@charset "utf-8";

/* --------------------------------------------------------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,code,em,img,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,footer,header,hgroup,menu,nav,section,main,audio,video {margin: 0; padding: 0;}

/*html5추가 시멘틱엘리먼트를 익스하위버전에서 블럭으로 인식되도록함*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display: block}

/* button태그에 손모양 커서 */
button {cursor:pointer; background: none; border: none;}
/* 익스하위버전에서 이미지 선없애기 */
fieldset,img {border: 0; vertical-align: top}
/* 리스트 기호 빼기 */
ol,ul {list-style: none}
/* 태그 기본 기울임꼴 제거 */
address,em {font-style: normal}
/* 페이지안에서 가장 많은 링크색 지정 */
a {text-decoration: none; color: #1c1c1c;}
/* iframe으로 외부컨텐츠를 연결했을때
외부컨텐츠안쪽내용이 우리페이지에 영향을 주지못하도록 가려줌
*/
iframe {overflow: hidden; border: 0}
/* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */
table {border-collapse: collapse; border-spacing: 0; width: 100%}
/* 굵기 빼고 헤딩태그 폰트크기를 body에 선언한 크기와 일치시킴 */
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%}
/* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴 */
input,select,textarea,button {vertical-align: middle; margin: 0; padding: 0}
/* textarea 리사이즈기능 빼기 */
textarea {resize: none}
/* 페이지안의 모든 폰트의 줄간격을 1.5로 통일시킴
모바일 크롬, 모바일 사파리 브라우져의 텍스트 자동확대 방지
*/
body {line-height: 1.5; -webkit-text-size-adjust:none}

/* legend,caption,메뉴제목,섹션제목 블라인드 */
legend,caption,.blind {position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px}

/* float해제 */
.clearfix:after {
    content:'';
    display: block;
    clear: both;
}

.display-none {display: none !important;}

#dim {position: fixed; z-index: 5555; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: #000; opacity: 0.8;}



.dim_close {position: fixed; z-index: 5555; top: 0; left: 0; right: 0; width: 100%; height: 100%; cursor: pointer;}


/* 인덱스 페이지 */
.wrap {width: 100%; height: 100%;}
#main_start {width: 100%; height: 100%;}
#main_start .poster {position: fixed; z-index: 9000; top: 50%; left: 50%; width: 100%; max-width: 620px; height: 100%; max-height: 856px; transform: translate(-50%, -50%);}
#main_start .poster img {width: 100%;}

#main_start .select {visibility: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 8000; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%);}
#main_start .select.on {visibility: visible;}
#main_start .select .sel_box {width: 50%; height: 100%;}
/* #main_start .select .intro_normal {border: 1px solid red;}
#main_start .select .intro_theme {border: 1px solid blue;} */

#main_start .select .sel_box a {display: block; position: relative; height: 100%;}
#main_start .select .sel_box a img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#main_start .select .sel_box a img.hover {display: none;}
#main_start .select .intro_normal a img {left: 80%;}
#main_start .select .intro_theme a img {left: 20%;}
#main_start .select .intro_normal a:hover img.hover {display: block; top: 58.3%; left: 79.3%;}
#main_start .select .intro_theme a:hover img.hover {display: block; top: 59.5%; left: 19.5%;}


/* 스크롤 */
.scroll-style {padding: 0 0 15px; box-sizing: border-box; overflow: auto; height: 100%; max-height: 320px; font-size: 14px; line-height: 1.4; color: #fff;}
.scroll-style::-webkit-scrollbar {width: 3px; background: rgb(195, 195, 195, 0.9);}
.scroll-style::-webkit-scrollbar-thumb {width: 5px; background: #555;} 
.scroll-style::-webkit-scrollbar-track {width: 5px;} 

/* 퍼즐 */
.pop-puzzle {position: fixed; width: 30px; height: 30px; border: 3px solid red; box-sizing: border-box;}
.pop-puzzle1 {top: 10%; left: 30%;}
.pop-puzzle2 {top: 30%; left: 70%;}
.pop-puzzle3 {top: 50%; left: 90%;}
.pop-puzzle4 {top: 80%; left: 10%;}
.pop-puzzle5 {top: 60%; left: 40%;}
.pop-puzzle6 {top: 20%; left: 50%;}

.puzzle_wrap {display: none; position: fixed; z-index: 5000; bottom: -317px; right: 10px; transform: scale(0.6); transform-origin:bottom right ; transition: all ease-in 0.6s; pointer-events: none;}
.puzzle_wrap.on {bottom: 10px;}
.puzzle_wrap img {display: block; height: 100px; margin: 0 auto; margin-bottom: 100px; transform: scale(0.8); transition: all 0.3s 0.5s; pointer-events: auto;}
.puzzle_wrap.on img{margin-bottom: 10px; transition: all 0.6s;}

@-webkit-keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  @keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  
  

.puzzle_box {position: relative; width: 350px; height: 516px; background: url(../../images/puzzle_box.png) no-repeat 50% 50%; background-size: contain; opacity: 1;}
.puzzle_box .clear-popup {visibility: hidden;  top: 50%; left: 50%; width: 70%; height: 70%; position: absolute; border-radius: 25px; opacity: 0; overflow: hidden; transform: translate(-50%, -50%); transition: all 0.5s 1.2s;}
.puzzle_box .clear-popup:before {content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-image: url(../../images/clear_box.png); background-repeat: no-repeat; background-size: cover; opacity: 1;}
.puzzle_box.active1.active2.active3.active4.active5.active6 .clear-popup {visibility: visible; width: 100%; height: 100%; opacity: 1;} 
/* .puzzle_wrap:has(> .puzzle_box.active1.active2.active3.active4.active5.active6) {bottom:10px !important;}  */
.puzzle_box .clear-popup .clear_wrap {width: 100%; height: 100%; background: url(../../images/clear_btn.png) no-repeat; position: absolute;
top: 50%; left: 50%; transform: translate(-25%, -20%);}
.clear_bg{width: 100%; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);}
.puzzle_box .clear-popup p {text-align: center; font-size: 30px; color: #fff;}
.puzzle_box .clear-popup p + p {margin-top: 5px; font-size: 18px; color: #bbb;}
.puzzle_box .clear-popup .btn_link {display: block; margin: 100px auto 0; width: calc(100% - 100px); height: 56px; border: 3px solid #fff; border-radius: 20px; box-sizing: border-box; font-size: 18px; color: #fff; pointer-events: auto;}
.puzzle_box .clear-popup .btn_link:hover {background: #fff; color: #000;}

.puzzle_box li {position: absolute; top: -30px; left: -30px;  box-sizing: border-box; opacity: 0; transform: scale(1.2); transition: all 0.5s 0.3s;}
.puzzle_box li:nth-of-type(1).active {top: 6px; left: 7px; width: 204px; height: 168px; background: url(../../images/puzzle1.png)no-repeat; background-size: contain;}
.puzzle_box li:nth-of-type(2).active {top: 6px; left: initial; right: 8px; width: 168px; height: 168px; background: url(../../images/puzzle2.png)no-repeat; background-size: contain;}
.puzzle_box li:nth-of-type(3).active {top: 138px; left: 7px; width: 168px; height: 205px; background: url(../../images/puzzle3.png)no-repeat; background-size: contain;}
.puzzle_box li:nth-of-type(4).active {top: 137px; left: initial; right: 8px; width: 208px; height: 205px; background: url(../../images/puzzle4.png)no-repeat; background-size: contain;}
.puzzle_box li:nth-of-type(5).active {top: initial; bottom: 7px; left: 7px; width: 208px; height: 211px; background: url(../../images/puzzle5.png)no-repeat; background-size: contain;}
.puzzle_box li:nth-of-type(6).active {top: initial; bottom: 7px; left: initial; right: 8px; width: 168px; height: 203px; background: url(../../images/puzzle6.png)no-repeat; background-size: contain;}
.puzzle_box li.active {opacity: 1; transform: scale(1); -webkit-animation: jello-horizontal 0.4s 0.9s both; animation: jello-horizontal 0.4s 0.9s both;}


.puzzle.active {background: red;}


@font-face {
  font-family: 'SBAggroM';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SBAggroL';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 퍼즐 완성시 응모팝업 */
.flex-sb {display: flex !important; justify-content: space-between !important;}
.flex-box {display: flex !important;}
.red {color: #B50000 !important;}


@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

#dim {display: none; position: fixed; z-index: 8000; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7);}
#dim.active {display: block;}
.pop_cp {display: none; position: fixed; z-index: 9000; top: 50%; left: 50%; width: 700px; height: auto; background: #fff;  border-radius: 15px; overflow: hidden; 
-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.pop_cp.active {display: block;}
.pop_cp .cp_wrap {display: flex; flex-direction: column;}
/* 헤드 */
.pop_cp .cp_hd {height: 212px;  background: linear-gradient(to bottom, #000000, #fff);}
.pop_cp .cp_hd img {width: 100%;}
/* 컨텐츠 */
.pop_cp .cp_ct {padding: 0px 35px 39px; box-sizing: border-box;}
.pop_cp .cp_ct .ct_wrap {margin-top: 30px;}
    /* 서브제목 */
.pop_cp .cp_ct .ct_tit {letter-spacing: 0px; font-family:SBAggroM, sans-serif; font-size: 20px; color: #3D009D;}
.pop_cp .cp_ct .top_ex {display: flex; align-items: flex-end; font-family:SBAggroL, sans-serif; font-size: 12px; color: #000;}
    /* 인풋요소 */
.pop_cp .cp_ct .input_wrap {display: flex; justify-content: flex-start; align-items: center; height: 40px; border-top: 2px solid #3D009D;}
.pop_cp .cp_ct .input_wrap + .input_wrap {height: 55px; border-top: 1px solid #DCDCDC; border-bottom: 2px solid #3D009D;}
.pop_cp .cp_ct .input_wrap label {display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; padding-right: 20px; width: 150px; height: 100%; background: #3D009D; box-sizing: border-box; font-family:SBAggroM, sans-serif; font-size: 16px;}
input {outline: none; border: none;}
.pop_cp .cp_ct .input_wrap .flex_grup {display: flex; flex-flow: wrap; align-items: center; gap: 5px 15px; }
.pop_cp .cp_ct .input_wrap input {margin-left: 10px; padding: 0 10px; width: 200px; height: 26px; border:1px solid #DCDCDC; box-sizing: border-box;}
.pop_cp .cp_ct .input_wrap span {font-family:SBAggroL, sans-serif; font-size: 12px; color: #999999;}
.pop_cp .cp_ct .input_wrap .ex_txt {padding-left:10px; font-size: 10px; color: #B50000;}

.pop_cp .cp_ct .ct_txt {display: block; padding-left: 8px; line-height: 18px; font-family:SBAggroL, sans-serif; font-size: 14px; color: #000;}

/* 테이블 */
.pop_cp .cp_ct .table_wrap {margin-top: 11px; background: #F1F1F1; border-top: 1px solid #444444; box-sizing: border-box; font-family:SBAggroL, sans-serif; font-size: 12px; color: #000000;}
.pop_cp .cp_ct .table_wrap .pv_wrap {display: flex; justify-content: space-between; align-items: center; padding-left: 10px; height: 36px; border-bottom: 1px solid #DCDCDC; box-sizing: border-box;}
/* 라디오 */
.pop_cp .cp_ct .table_wrap .pv_wrap .check_wrap {position: relative; margin-right: 35px;}
.pop_cp .cp_ct .table_wrap .pv_wrap .check_wrap + .check_wrap {margin-right: 10px;}
.pop_cp .table_wrap .check_wrap input[type=radio] {width: 0px;}
.pop_cp .table_wrap .check_wrap label.chk_img {position: absolute; left: -18px; top: 0.2px; width: 15px; height: 15px; background: url(../images/chk.png); background-size: 100%; background-repeat: no-repeat;}
.pop_cp .table_wrap .check_wrap input[type=radio]:checked + label.chk_img {background: url(../images/chk_active.png); background-size: 100%; background-repeat: no-repeat;}

.pop_cp .cp_ct .table_wrap > .flex-box {border-bottom: 1px solid #DCDCDC;}
.pop_cp .cp_ct .table_wrap .table_th {flex-shrink: 0; width: 110px; height: 35px; line-height: 35px; text-align: center; font-family:SBAggroM, sans-serif;}
.pop_cp .cp_ct .table_wrap .table_td {padding: 0 9px; width: 100%; height: 35px; line-height: 35px; background: #fff; box-sizing: border-box; text-align: left;}
.pop_cp .cp_ct .cnp {display: block; margin-top: 5px; text-align: center; font-family:SBAggroL, sans-serif; font-size: 10px; color: #666666;}
/* 버튼 */
.pop_cp .cp_ct .btn_wrap {margin-top: 31px; text-align: center;}
.pop_cp .cp_ct .btn_wrap button {width: 250px;}
.pop_cp .cp_ct .btn_wrap button img {width: 100%;}

.pop_cp .cp_bt {height: 40px; background: #E8DAFF;}
.pop_cp .cp_bt .bt_txt {display: flex; justify-content: center; align-items: center; height: 100%; line-height: 12px; text-align: center; font-family:SBAggroL, sans-serif; font-size: 10px; color: #222222;}


/* 얼롯창 */
.swal-modal {max-width: 450px; border-radius: 10px; background-color: transparent;}
body .swal-icon--success__ring {border-color: #e3e3e3;}
body .swal-icon--success__line {background-color: #e3e3e3;}
.swal-overlay--show-modal .swal-modal {position: relative;}
.swal-overlay--show-modal .swal-modal:before {content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-image: url(../images/event_tit.png); background-size: cover; background-size: 500%; background-position: 0 0; border-radius: 15px; opacity: 0.95; transform: translate(-50%, -50%);}
.swal-icon--success__hide-corners,
.swal-icon--success:after, .swal-icon--success:before {background: rgba(255, 255, 255, 0);}

.swal-icon--warning {border-color: #ffe600 !important;}
.swal-icon--warning__body, .swal-icon--warning__dot {background: #ffe600;}

.swal-title {font-family:SBAggroL, sans-serif; color: #fff;}
.swal-text {font-family:SBAggroL, sans-serif; font-size: 18px; color: #e3e3e3;display: block;text-align: center;word-break: keep-all;}


.swal-button {background-color: #e3e3e3; color: #555;}
.swal-button:not([disabled]):hover {background-color: #fff;}

/* 퀴즈 문제 판 */
.quiz_box_wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: url(../../images/quiz_bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
}

.quiz_box_wrap.active{
  display: block;
}

.exit_btn{
  background: url(../../skin/m_menur.png) no-repeat;
  background-color: #545454;
  width: 53px;
  height: 57px;
  position: absolute;
  z-index: 999;
  top: -5px;
  right: 0px;
  cursor: pointer;
}

/* 정답 맞추거나 틀렸을 때 */
.wrong_answer{
  display: none;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../../images/wronganswer.png) no-repeat;
  width: 280px;
  height: 400px;
  cursor: pointer;
}

.right_answer{
  display: none;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 400px;
  cursor: pointer;
}

.right_answer.right1{
  display: block;
  background: url(../../images/rightanswer_01.png) no-repeat;
}

.right_answer.right2{
  display: block;
  background: url(../../images/rightanswer_02.png) no-repeat;
}

.right_answer.right3{
  display: block;
  background: url(../../images/rightanswer_03.png) no-repeat;
}

.right_answer.right4{
  display: block;
  background: url(../../images/rightanswer_04.png) no-repeat;
}

.right_answer.right5{
  display: block;
  background: url(../../images/rightanswer_05.png) no-repeat;
}

.right_answer.right6{
  display: block;
  background: url(../../images/rightanswer_06.png) no-repeat;
}

/* 퀴즈 문제 바꾸기 css */
.quiz_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 740px;
  height: 500px;
}

.quiz_box.click::after{
  position: absolute;
  content: "";
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000vw;
  height: 1000vh;
  /* background: url(../../images/rightanswer_bg.png) no-repeat; */
  background: #ffffffb2;
}

.quiz_box.quiz1{
  background: url(../../images/quiz_1.png) no-repeat;
}

.quiz_box.quiz2{
  background: url(../../images/quiz_2.png) no-repeat;
  height: 530px;
}

.quiz_box.quiz3{
  background: url(../../images/quiz_3.png) no-repeat;
  height: 530px;
}

.quiz_box.quiz4{
  background: url(../../images/quiz_4.png) no-repeat;
  height: 530px;
}

.quiz_box.quiz5{
  background: url(../../images/quiz_5.png) no-repeat;
  height: 530px;
}

.quiz_box.quiz6{
  background: url(../../images/quiz_6.png) no-repeat;
  height: 530px;
}

.distracter_box{
  display: flex;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 710px;
}

.distracter {
  width: 180px;
  height: 270px;
  cursor: pointer;
}

.distracter_1.quiz1{
  background: url(../../images/quiz_1_1.png) no-repeat;
}

.distracter_2.quiz1{
  background: url(../../images/quiz_1_2.png) no-repeat;
}

.distracter_3.quiz1{
  background: url(../../images/quiz_1_3.png) no-repeat;
}

.distracter_1.quiz1:hover{
  background: url(../../images/quiz_1_1hover.png) no-repeat;
}

.distracter_2.quiz1:hover{
  background: url(../../images/quiz_1_2hover.png) no-repeat;
}

.distracter_3.quiz1:hover{
  background: url(../../images/quiz_1_3hover.png) no-repeat;
}

/* 2번 퀴즈 */
.distracter_1.quiz2{
  background: url(../../images/quiz_2_1.png) no-repeat;
}

.distracter_2.quiz2{
  background: url(../../images/quiz_2_2.png) no-repeat;
}

.distracter_3.quiz2{
  background: url(../../images/quiz_2_3.png) no-repeat;
}

.distracter_1.quiz2:hover{
  background: url(../../images/quiz_2_1hover.png) no-repeat;
}

.distracter_2.quiz2:hover{
  background: url(../../images/quiz_2_2hover.png) no-repeat;
}

.distracter_3.quiz2:hover{
  background: url(../../images/quiz_2_3hover.png) no-repeat;
}

/* 3번 퀴즈 */
.distracter_1.quiz3{
  background: url(../../images/quiz_3_1.png) no-repeat;
}

.distracter_2.quiz3{
  background: url(../../images/quiz_3_2.png) no-repeat;
}

.distracter_3.quiz3{
  background: url(../../images/quiz_3_3.png) no-repeat;
}

.distracter_1.quiz3:hover{
  background: url(../../images/quiz_3_1hover.png) no-repeat;
}

.distracter_2.quiz3:hover{
  background: url(../../images/quiz_3_2hover.png) no-repeat;
}

.distracter_3.quiz3:hover{
  background: url(../../images/quiz_3_3hover.png) no-repeat;
}

/* 4번 퀴즈 */
.distracter_1.quiz4{
  background: url(../../images/quiz_4_1.png) no-repeat;
}

.distracter_2.quiz4{
  background: url(../../images/quiz_4_2.png) no-repeat;
}

.distracter_3.quiz4{
  background: url(../../images/quiz_4_3.png) no-repeat;
}

.distracter_1.quiz4:hover{
  background: url(../../images/quiz_4_1hover.png) no-repeat;
}

.distracter_2.quiz4:hover{
  background: url(../../images/quiz_4_2hover.png) no-repeat;
}

.distracter_3.quiz4:hover{
  background: url(../../images/quiz_4_3hover.png) no-repeat;
}

/* 5번 퀴즈 */
.distracter_1.quiz5{
  background: url(../../images/quiz_5_1.png) no-repeat;
}

.distracter_2.quiz5{
  background: url(../../images/quiz_5_2.png) no-repeat;
}

.distracter_3.quiz5{
  background: url(../../images/quiz_5_3.png) no-repeat;
}

.distracter_1.quiz5:hover{
  background: url(../../images/quiz_5_1hover.png) no-repeat;
}

.distracter_2.quiz5:hover{
  background: url(../../images/quiz_5_2hover.png) no-repeat;
}

.distracter_3.quiz5:hover{
  background: url(../../images/quiz_5_3hover.png) no-repeat;
}

/* 6번 퀴즈 */
.distracter_1.quiz6{
  background: url(../../images/quiz_6_1.png) no-repeat;
}

.distracter_2.quiz6{
  background: url(../../images/quiz_6_2.png) no-repeat;
}

.distracter_3.quiz6{
  background: url(../../images/quiz_6_3.png) no-repeat;
}

.distracter_1.quiz6:hover{
  background: url(../../images/quiz_6_1hover.png) no-repeat;
}

.distracter_2.quiz6:hover{
  background: url(../../images/quiz_6_2hover.png) no-repeat;
}

.distracter_3.quiz6:hover{
  background: url(../../images/quiz_6_3hover.png) no-repeat;
}


@media screen and (max-width: 701px) {
  .pop_cp {width: calc(100% - 3%);}
  .pop_cp .cp_hd {height: auto;}
  .pop_cp .cp_ct {max-height: 380px; overflow: auto;}
  .pop_cp .cp_ct::-webkit-scrollbar {width: 2px;}
  .pop_cp .cp_ct::-webkit-scrollbar-thumb {width: 2px; background: #e9e9e9;}
  .pop_cp .cp_ct::-webkit-scrollbar-track {width: 2px;}
  .pop_cp .cp_ct .input_wrap {flex-direction: column; height: auto; border-top: none; border-bottom: 2px solid #3D009D;;}
  .pop_cp .cp_ct .input_wrap + .input_wrap {margin-top: 20px; height: auto;}
  .pop_cp .cp_ct .input_wrap .flex_grup {width: 100%;}
  .pop_cp .cp_ct .input_wrap label {justify-content: center; padding-right: 0; width: 100%; height: 40px; font-size: 14px;}
  .pop_cp .cp_ct .input_wrap input {margin-left: 0; width: 100%; height: 40px; text-align: center; font-size: 12px;}

  .pop_cp .cp_ct .ct_tit {margin-bottom: 5px;}
  .pop_cp .cp_ct .ct_txt {font-size: 12px; word-break: keep-all;}
  .pop_cp .cp_ct .input_wrap span {display: block; padding-bottom: 5px;}

  .pop_cp .cp_ct .table_wrap {word-break: keep-all;}
  .pop_cp .cp_ct .table_wrap .pv_wrap {flex-direction: column; padding: 6px 0; height: 60px;}
  .pop_cp .cp_ct .table_wrap .pv_wrap .check_wrap + .check_wrap {margin-right: -15px;}
  .pop_cp .cp_ct .table_wrap .table_td {display: flex; align-items: center; height: auto; line-height: 20px;}

  .pop_cp .cp_ct .btn_wrap button {width: 190px;}
  .pop_cp .cp_bt {word-break: keep-all;}

  .quiz_box{
    transform: scale(0.5) translate(-50%, -50%);
    transform-origin: left top;
  }
  
}
@media screen and (max-width: 380px) {
  .pop_cp .cp_ct .table_wrap .table_td {font-size: 10px;}
  .pop_cp .cp_bt {height: 70px;}
}