@charset "euc-kr"; 

@keyframes sparkle {
   0% {
     opacity: 0.5;
     transform: scale(0.9);
   }
   50% {
     opacity: 1;
     transform: scale(1.05);
   }
   100% {
     opacity: 0.5;
     transform: scale(0.9);
   }
 }

 @keyframes sparkle2 {
   0% {
     opacity: 1;
     transform: scale(1);
   }
   25% {
     opacity: 0.6;
     transform: scale(0.95);
   }
   50% {
     opacity: 1;
     transform: scale(1.05);
   }
   75% {
     opacity: 0.6;
     transform: scale(0.95);
   }
   100% {
     opacity: 1;
     transform: scale(1);
   }
 }
 
:root{
   --drop-shadow : drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
   --point-color: #001eff; 
}

/* settings */
.point_c{color: var(--point-color) !important;}
.point_b{background-color: var(--point-color) !important;}

/* before */
.before {background: #cbe5ff url(https://img.megagong.net/m/2025/0320_quiz/before_bg.jpg) center no-repeat;padding: 75px 0 85px;} 
.before h3{margin-bottom: 25px;} 
.before .mid_text{margin: 20px auto 50px} 
.before .character_slider{position: relative;}
.before .twinkle{position: absolute;left: 50%;transform: translateX(-50%);z-index: 2;animation: sparkle 1.5s infinite alternate;}
.before .twk1{margin-left: -265px;top: 55px;}
.before .twk2{ margin-left: 210px; top: 130px;animation: sparkle2 2.5s infinite alternate;}
.before .twk3{ margin-left: 235px; top: 155px;}
.before .test_btn{width: 100%;max-width: 540px;height: 80px;margin: 0 auto;position: relative;}
.before .test_btn a{background: var(--point-color);display: block;height: 100%;color: #fff;align-content: center;border-radius: 45px;cursor : url(https://img.megagong.net/m/2025/0320_quiz/before_btn1_hand.png) 0 0, auto;transition: all 0.1s ease;}
.before .test_btn a:hover{box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.2); transform: translateY(2px); }
.before .test_btn.done a{background: #000;}
.before .test_btn.done a:hover{box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.9);}
.before .test_btn:not(.done).on a{background: #00b145;}
.before .test_btn .icon{position: absolute;right: 75px;bottom:-25px}
.before .count{margin-top: 30px;}

/* quiz */
.quiz,.after{ background: url(https://img.megagong.net/m/2025/0320_quiz/quiz_bg.png) no-repeat; background-position-y: top !important; padding: 40px 0 130px;} 
.quiz{cursor : url(https://img.megagong.net/m/2025/0320_quiz/before_btn1_hand.png) 0 0, auto;}
.quiz .inner,.after .inner{max-width:640px;width: 100%;}
.quiz .quiz_zone{ margin-top: 50px; }

/* quiz - time */
.quiz .quiz_zone .time {height: 30px;display: flex;align-items: center;gap: 15px;} 
.quiz .quiz_zone .time a {border: 3px solid #5e524c;width: 30px;border-radius: 100%;position: relative;aspect-ratio: 1/1;cursor: inherit;box-sizing: border-box;} 
.quiz .quiz_zone .time a img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.quiz .quiz_zone .time .bar_wrap {position: relative;height: 100%;border: 3px solid #5e524c;overflow: hidden;border-radius: 100px;display: inline-block;flex: 1;box-sizing: border-box;} 
.quiz .quiz_zone .time .bar_wrap .bar {height: 100%;background: var(--point-color);width: 0;transition: width 1s ease-out;} 

.quiz #qstn_con_1.on .time .bar_wrap .bar{width: 7.7%;} 
.quiz #qstn_con_2.on .time .bar_wrap .bar{width: 15.4%;} 
.quiz #qstn_con_3.on .time .bar_wrap .bar{width: 23.1%;} 
.quiz #qstn_con_4.on .time .bar_wrap .bar{width: 30.8%;} 
.quiz #qstn_con_5.on .time .bar_wrap .bar{width: 38.5%;} 
.quiz #qstn_con_6.on .time .bar_wrap .bar{width: 46.2%;} 
.quiz #qstn_con_7.on .time .bar_wrap .bar{width: 53.8%;} 
.quiz #qstn_con_8.on .time .bar_wrap .bar{width: 61.5%;} 
.quiz #qstn_con_9.on .time .bar_wrap .bar{width: 76.9%;} 
.quiz #qstn_con_10.on .time .bar_wrap .bar{width: 69.2%;} 
.quiz #qstn_con_11.on .time .bar_wrap .bar{width: 84.6%;} 
.quiz #qstn_con_12.on .time .bar_wrap .bar{width: 92.3%;} 
.quiz #qstn_con_13.on .time .bar_wrap .bar{width: 100%;} 

.quiz .quiz_zone .time .num {font-style: normal;color: #5e524c;} 
.quiz .quiz_zone .time .num strong { font-weight: normal; } 

/* quiz - question_img */
.quiz .quiz_zone .question {font-weight: 700;} 
.quiz .quiz_zone .question_img {margin: 20px auto 60px;border: 2px solid #5e524c;display: inline-block;border-radius: 20px;overflow: hidden;background: #5e524c;} 

/* quiz - answer txt */
.quiz .quiz_zone .answer.txt > li {margin-top: 0;display: flex;align-items: center;justify-content: space-between;padding: 0 50px;gap: 30px;height: 120px;transition: .1s all ease;} 
.quiz .quiz_zone .answer.txt > li label{cursor: inherit}
.quiz .quiz_zone .answer.txt > li input[type="text"]  {background: none;border-width: 0 0 2px 0;height: 30px;flex: 1;font-size: 20px;cursor: inherit} 

.quiz .chk_wrap{ display: flex; gap: 20px;}
.quiz .chk_wrap li{display: flex;align-items: center;gap: 10px;position: relative;}
.quiz .chk_wrap input{position: absolute;width: 100%;height: 100%;opacity: 0;z-index: 2;cursor: inherit}
.quiz .chk_wrap .custom{position: relative;width: 40px; height: auto; aspect-ratio: 1;}
.quiz .chk_wrap .custom:before{content: '';display: block;width: 100%;height: 100%;border-radius: 3px;border: 2px solid #9f9f9f;box-sizing: border-box;transition: .5s ease;}
.quiz .chk_wrap .custom:after{content: '';display: block;border: 1px solid #9f9f9f;border-width: 0 3px 3px 0;width: 8px;height: auto;aspect-ratio: 1/2;position: absolute;left: 50%;top: 45%;transform: translate(-50%,-50%) rotate(45deg);}
.quiz .chk_wrap input:checked + .custom:before{background: var(--point-color);border-color: var(--point-color);}
.quiz .chk_wrap input:checked + .custom:after{border-color:#fff;}

/* quiz - answer common */
.quiz .quiz_zone .answer{ display: flex; flex-direction: column; gap: 20px;margin-top: 60px;}
.quiz .quiz_zone .answer > li {width: 100%;display: block;height: 110px;border-radius: 10px;align-content: center;background: #f1f1f2;color: #111;overflow: hidden;position: relative;} 
.quiz .quiz_zone .answer > li:hover{filter: var(--drop-shadow);}
.quiz .quiz_zone .answer:not(.txt,.next) > li:hover{background: #001eff;color:#fff }
/* quiz - answer next */
.quiz .quiz_zone .answer.next li{height: 80px;background: #001eff;color: #fff;} 
.quiz .quiz_zone .answer.next > li::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #001eff; color:#222; transition: left .5s ease-in-out; z-index: -1; background: #fff;}
.quiz .quiz_zone .answer.next > li:hover::before { left: 0; }
.quiz .quiz_zone .answer.next > li:hover {border: 2px solid #001eff; color:#001eff ; }

/* after */
.after .con_tit{ margin-bottom: 50px;}
.after .result_wrap .tip{ margin: 25px auto 45px; opacity: .5;}
.after .result_wrap .same{ border: 4px solid var(--point-color); border-radius: 45px; height: 80px; align-content: center;}
.after .result_wrap .info{ margin: 50px auto 100px;}
.after .result_wrap .info dl:first-child{ margin-bottom: 50px;}
.after .result_wrap .info dt{margin-bottom: 15px;}
.after .result_wrap .info dd{line-height:1.8}
.after .banner_wrap .banner{ margin-top: 30px; display: flex; flex-direction: column; gap: 20px;}
.after .banner_wrap .banner a{ display: flex; background: #e8f5ff; padding: 40px 0; border-radius: 10px; align-items: center;}
.after .banner_wrap .banner .img{min-width: 246px;}
.after .banner_wrap .banner .text{ text-align: left; align-content: center; flex: 1;}
.after .banner_wrap .banner .text span{ display: block;}
.after .banner_wrap .banner .text p{ margin-top: 15px; opacity: .6;}
.after .link_wrap{ margin: 50px auto 80px;}
.after .link_wrap .link{ justify-content: space-between; max-width: 340px; margin: 25px auto 0;}
.after .test_btn{ display: flex; flex-direction: column; gap: 20px; justify-content: center;}
.after .test_btn a{color: #fff;background: #000;border-radius: 20px;height: 80px;align-content: center;max-width: 400px;margin: 0 auto;width: 100%;}

.event{background: #00a2ff;}
.evSection.event .bg_shadow{bottom: auto;top: 47%;}
.evSection.event .obj_cover .partc_obj{top:0}
.event .container_info .info .noti{padding-left: 8px;font-size: 16px;font-weight: 500;opacity: 1;}
.event .container_info .info .noti::before{content: '*';}
.event .btn-status{margin-top: 15px;display: flex;justify-content: flex-end;}
.event .btn-status a{padding: 0 3px 3px;border-bottom: 1px solid #000;}
.event .step_base_wrap .step_list li .box_area .label.c_blue,
.event .step_base_wrap .hashtag{color:var(--point-color)}
.event .step_base_wrap .step_list li .box_area .txt{color:#626262;height: 90px;}
.event .step_base_wrap .step_list li .box_area .txt b{color:#000}

.event .step_base_wrap .step_list li .box_area.type2{align-content:center;padding: 30px 10px;}
.event .step_base_wrap .step_list li .box_area.type2 .btn-base{ max-width: 260px; margin: 0 auto;}
.event .step_base_wrap .step_list li .box_area.type2 .btn-base:last-child{margin-top: 15px;color:#fff;}

.event .step_base_wrap .step_list li .box_area.type2 .btn-base a{padding-left: 0;padding-right: 0;width: 100%;min-width: 0;}

#popupCertified .mg_filebox input[type="file"]{z-index: 2;}
#popupCertified .mg_filebox .filename a{z-index: 3;}
#popupCertified .mg_s_info {line-height: 1.4;}
#popupCertified .mg_s_info h6{margin-bottom: 7px;font-size: 13px;}
#popupCertified .mg_s_info .txt{ padding-left: 10px; text-indent: -9px;}

#popupViewUrl .tb_scroll{height: 375px;overflow-y: auto;border: 1px solid #000;border-width: 1px 0;display: flex;flex-direction: column;justify-content: space-between;}
#popupViewUrl table thead{border-top:0}
#popupViewUrl .tb_scroll table tbody .txt{text-align: left;}
#popupViewUrl .tb_scroll table tbody .txt .del{color:#f00;margin-left: 5px;}

@media screen and (max-width: 1200px){
   #mContainer { min-height: auto !important; } 
   .eventWrap { overflow: hidden; } 
   .eventWrap .inner{width: 96% !important;}
   .before .test_btn a, .quiz{cursor: pointer;}
   
   .before{ padding: 12% 0 10%; background-size: 250%;}
   .before::before{content: '';display: block;position: absolute;top: 0;width: 3000px;left: 50%;margin-left: -1500px;background: #dbeeff;height: 7%;}
   
   .quiz, .after {padding: 10% 0 15%;} 
   .quiz .con_tit, .after .con_tit{ width: min(526px, 80%); margin: 0 auto;}
   .quiz .quiz_zone{margin-top: 7%;}

   /* quiz - time */
   .quiz .quiz_zone .time {height: clamp(25px,4vmin,30px);gap: 1.5vmin;} 
   .quiz .quiz_zone .time a {width: clamp(25px,4vmin,30px);} 
   .quiz .quiz_zone .time a img {width: min(9px,35%);} 
   /* quiz - question_img */
   .quiz .quiz_zone .question {font-weight: 700;} 
   .quiz .quiz_zone .question_img {margin: 3% auto 8%;border-radius: clamp(10px,3vmin,20px);} 
   /* quiz - answer txt */
   .quiz .quiz_zone .answer.txt > li {padding: 5%  20px;height: auto;gap: 2vmin;} 
   .quiz .quiz_zone .answer.txt > li > label{min-width: 120px;}
   .quiz .quiz_zone .answer.txt > li label{text-align: left;}
   .quiz .quiz_zone .answer.txt > li input[type="text"]  {height: clamp(25px,4vmin,30px);font-size: clamp(15px,3vmin,20px);} 
   .quiz .chk_wrap{gap: 2vmin;}
   .quiz .chk_wrap li{gap: 1vmin;}
   .quiz .chk_wrap .custom{width: clamp(25px,5vmin,40px);}
   .quiz .chk_wrap .custom:after{width: 1.5vmin;border-width: 0 min(3px,.7vmin) min(3px,.7vmin) 0;max-width: 8px;}
   /* quiz - answer common */
   .quiz .quiz_zone .answer{margin-top: 7%; gap: 3vmin;}
   .quiz .quiz_zone .answer > li,
   .quiz .quiz_zone .answer:not(.txt) > li{height: auto;padding: 5% 20px;min-height: 75px;}
   /* quiz - answer next */
   .quiz .quiz_zone .answer.next li{height: auto;padding: 5% 0;} 
   .quiz .quiz_zone .answer.next > li::before {display: none;}
   .quiz .quiz_zone .answer.next > li:hover {color:#fff;}
   
   .after .con_tit{ margin-bottom: 7%;}
   .after .result_wrap .tip{ margin: 3% auto 6%;}
   .after .result_wrap .same{ height: clamp(45px,10vmin,80px); border-width: clamp(1px,1vmin,4px);}
   .after .result_wrap .info{ margin: 7% auto 12%;}
   .after .result_wrap .info dl:first-child{ margin-bottom: 7%;}
   .after .result_wrap .info dt,
   .after .banner_wrap > p{width: min(330px,80%);margin: 0 auto;}
   .after .result_wrap .info dt{margin-bottom: 3%;}

  .event .container_info .info .noti{font-size: 14px;}
  .event .step_base_wrap .step_list li .box_area{ padding-left: 10px; padding-right: 10px;}
  .event .step_base_wrap .step_list li .box_area .txt{height:auto}
}
@media (max-width: 768px){
   .before .character_slider .swiper_common {width: 50%;margin: 0 auto;}
   .before .twinkle{aspect-ratio: 1/1;margin-left: 0 !important;}
   .before .twk1{left: 17%;width: 5.5vmin;}
   .before .twk2{left: auto;right: 20%;width: 3.5vmin;top: 30%;}
   .before .twk3{left: auto;right: 17%;width: 4.5vmin;top: 36%;}
   .before .mid_text{margin: 3% auto 7%;}
   .before .test_btn{height: clamp(60px,10vmin,80px);}
   .before .count{ margin-top: 4%;}

   .event .gift_list_wrap li .img{overflow: hidden;aspect-ratio: 1/.7;}
   .event .gift_list_wrap li img{padding: 20% 15% 10%;}
   .event .gift_list_wrap li .badge{font-size: clamp(11px,1.5vmin,13px);height: clamp(45px,7vmin,55px);}
   .event .gift_list_wrap .type2 img{padding: 10% 29%;}   
   .event .gift_list_wrap .type2 .badge:first-child{right: 60px;background-color: #243aff;}

   .after .banner_wrap .banner{gap:2vmin;margin-top: 4%;}
   .after .banner_wrap .banner a{ flex-direction: column; gap: 5vmin; padding: 20px 0;}
   .after .link_wrap{ margin: 7% auto 10%;}
   .after .link_wrap .link{ gap: 4vmin; justify-content: center;}
   .after .test_btn{ gap: 2vmin;}
   .after .test_btn a{ height: clamp(60px,10vmin,80px); border-radius: 10px;}
}