@charset "euc-kr"; /* before */
.before { background: url(https://img.megagong.net/m/2022/0923_quiz/before_bg.jpg) center no-repeat; padding: 130px 0; } 
.before .txt { margin: 50px 0 130px; } 
.before .content { position: relative; width: 1000px; margin: 0 auto; } 
.before .content .tx { position: absolute; } 
.before .content .tx.tx1 { top: -10px; left: 0; } 
.before .content .tx.tx2 { top: -60px; right: 0; } 
.before .count { margin: 62px 0 35px; } 
.before .count span { font-size: 26px; color: #702aff; font-weight: 700; position: relative; } 
.before .count span::before { content:''; background: url(https://img.megagong.net/m/2022/0923_quiz/before_ico1.png) center no-repeat; width: 31px; height: 17px; position: absolute; top: 50%; left: -53px; transform: translate(0, -50%); } 
.before .count span::after { content:''; background: url(https://img.megagong.net/m/2022/0923_quiz/before_ico2.png) center no-repeat; width: 31px; height: 17px; position: absolute; top: 50%; right: -53px; transform: translate(0, -50%); } 
.before .test_btn a { display: inline-block; } 
.before .join_btn { margin: 30px 0 98px; } 
.before .join_btn a { font-size: 15px; display: inline-block; background: #0ab65f; border-radius: 100px; padding: 4.5px 32.5px; } 

/* quiz */
.quiz { background: url(https://img.megagong.net/m/2022/0923_quiz/quiz_bg.jpg) no-repeat; background-position-y: top !important; padding: 40px 0 130px; } 
.quiz .copyright { text-align: right; margin: 0 -74px 0 0; } 
.quiz .con_tit { margin: 66px 0 70px; } 
.quiz .quiz_zone .qstn_con .time { height: 30px; width: 768px; margin: 0 auto; display: flex; justify-content: space-between; } 
.quiz .quiz_zone .qstn_con .time a { vertical-align: top; display: inline-block; border: 3px solid #5e524c; width: 30px; height: 100%; border-radius: 100%; position: relative; } 
.quiz .quiz_zone .qstn_con .time a img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.quiz .quiz_zone .qstn_con .time .bar_wrap { position: relative; width: 670px; height: 100%; border: 3px solid #5e524c; overflow: hidden; border-radius: 100px; display: inline-block; } 
.quiz .quiz_zone .qstn_con .time .bar_wrap .bar { height: 100%; } 
.quiz .quiz_zone .qstn_con .time .num { vertical-align: top; font-style: normal; font-size: 18px; color: #5e524c; } 
.quiz .quiz_zone .qstn_con .time .num strong { font-weight: normal; } 
.quiz .quiz_zone .qstn_con .question_img { margin: 40px 0 0; border: 5px solid #5e524c; display: inline-block; border-radius: 40px; overflow: hidden; } 
.quiz .quiz_zone .qstn_con .question { font-size: 40px; font-weight: 700; margin: 40px 0 60px; } 
.quiz .quiz_zone .qstn_con .question.line1 { padding: 28px 0; } 
.quiz .quiz_zone .qstn_con .answer li { width: 500px; height: 100px; margin: 0 auto; } 
.quiz .quiz_zone .qstn_con .answer.txt li { display: inline-table; margin: 0 auto; vertical-align: top; } 
.quiz .quiz_zone .qstn_con .answer.txt li p { display: table-cell; vertical-align: middle; } 
.quiz .quiz_zone .qstn_con .answer li a, .quiz .quiz_zone .qstn_con .answer li p { background: #eae9ce; display: table; font-size: 23px; color: #333333; font-weight: 700; border-radius: 100px; margin: 0 auto; width: 100%; height: 100%; } 
.quiz .quiz_zone .qstn_con .answer li:first-child { margin: 0 auto 20px; } 
.quiz .quiz_zone .qstn_con .answer.txt li:first-child { margin: 0 20px 30px 0; } 
.quiz .quiz_zone .qstn_con .answer li a:hover, .quiz .quiz_zone .qstn_con .answer li a:active , .quiz .quiz_zone .qstn_con .answer li p:hover, .quiz .quiz_zone .qstn_con .answer li p:active { background:#702aff; color:#fff; } 
.quiz .quiz_zone .qstn_con .answer li a:hover input, .quiz .quiz_zone .qstn_con .answer li a:active input , .quiz .quiz_zone .qstn_con .answer li p:hover input, .quiz .quiz_zone .qstn_con .answer li p:active input { color: #fff; border-color: #fff; } 
.quiz .quiz_zone .qstn_con .answer li a span , .quiz .quiz_zone .qstn_con .answer li p span { display: table-cell; vertical-align: middle; } 
.quiz .quiz_zone .qstn_con .answer li a input , .quiz .quiz_zone .qstn_con .answer li p input { display: block; width: 80%; margin: 0 auto; background: none; border-width: 0 0 2px 0; height: 35px; text-align: center; font-size: 17px; } 

/* after */
.after { background: url(https://img.megagong.net/m/2022/0923_quiz/after_bg2.jpg) no-repeat; background-position-y: top !important; padding: 40px 0 100px; } 
.after .copyright { text-align: right; margin: 0 -74px 0 0; } 
.after .con_tit { margin: 70px 0 48px; } 
.after .result { margin: 0 0 28px; } 
.after .tip { color: #5e524c; font-size: 15px; } 
.after .type_result { margin: 46px 0 50px; } 
.after .type_result .character { display: inline-block; margin: 0 20px 0 0; } 
.after .type_result .txt { font-size: 24px; } 
.after .type_result .txt strong { color: #702aff; font-weight: 900; } 
.after .info li:first-child { margin: 48px 0 25px; } 
.after .subtit { margin: 100px 0 32px; } 
.after .bnr { display:block; width: 1000px; margin: 0 auto; } 
.after .bnr dl { background: #edeccd; border-radius: 26px; text-align: left; display: table; width: 100%; height: 180px; } 
.after .bnr + .bnr { margin: 20px auto 94px; } 
.after .bnr dt { display: table-cell; width: 50%; text-align: center; vertical-align: middle; } 
.after .bnr dd { display: table-cell; /* vertical-align: middle; */text-align: left; color: #5e524c; vertical-align: middle; width: 50%; font-size: 21px; } 
.after .bnr dd strong { display: block; font-size: 26px; } 
.after .bnr dd .small { font-weight: 700; } 
.after .bnr dd .col { color: #702aff; } 
.after .other { margin: 0 auto 130px; } 
.after .other li { display: inline-block; } 
.after .other li:first-child { margin: 0 84px 0 0; position: relative; } 
.after .other li:first-child::before { content:''; width: 2px; height: 86%; background: #cccccc; position: absolute; right: -46px; bottom: 0; } 
.after .other li p { font-size: 24px; font-weight: 900; margin: 0 0 30px; } 
.after .other li p span { position: relative; z-index: 1; } 
.after .other li p span::before { content:''; background: #e5c12c; height: 12px; width: 104%; position: absolute; z-index: -1; border-radius: 100px; bottom: 2px; left: 50%; transform: translate(-50%, 0); } 

.link { background: #eaeaea; padding: 95px 0 100px; } 
.link .tit { font-size: 32px; font-weight: 900; } 
.link ul { margin: 25px 0 65px; } 
.link ul li { display: inline-block; margin: 0 13.5px 0 0; } 
.link .btn a { display: inline-block; } 
.link .btn + .btn { margin: 22px 0 0; } 

#layerPop .s_info + .s_info { margin: 15px 0 0; } 
#layerPop .s_info li.tit { padding: 0 0; color: #702aff; } 

/* 230714 */
.before .content .tx.tx2.re_posit {
   top: -90px;
   right: 69px;
}
.br_768 {display: none;}

@media screen and (max-width: 1200px){
 #mContainer { min-height: auto !important; } 
.eventWrap { overflow: hidden; } 
 /* before */
 .before { padding: 11% 0; } 
 .before .txt { margin: 4.5% 0 11%; padding: 0 27%; } 
 .before .content { width:100%; padding: 0 10%; } 
 .before .content .character img { width: 100%; } 
 .before .content .tx { width: 25%; } 
 .before .content .tx.tx1 { left: -2%; top: -10%; } 
 .before .content .tx.tx2 { top: -18%; right: -2%; } 
 .before .content .tx img { width:100%; } 
 .before .count { margin: 5.5% 0 3%; } 
 .before .join_btn { margin: 3% 0 8.5%; } 
 .before .test_btn { padding: 0 15%; } 

/* quiz */
 .quiz { padding: 3.5% 0 11%; background-size: cover; } 
 .quiz .copyright { margin: 0 0; } 
 .quiz .con_tit { margin: 6% 0 6.5%; } 
 /* .quiz .quiz_zone .qstn_con .answer.txt li { display: table; margin: 0 auto 20px; } */
 /* .quiz .quiz_zone .qstn_con .answer.txt li:first-child { margin: 0 auto 20px; } */
.quiz .quiz_zone .qstn_con .answer.txt li { width: 49%; } 
 .quiz .quiz_zone .qstn_con .answer.txt li:first-child { margin: 0 1% 2% 0; } 
 .quiz .quiz_zone .qstn_con .next { padding: 0 15%; display: block; } 
 .quiz .quiz_zone .qstn_con .question { margin: 4% 0 6%; } 

/* after */
 .after { padding: 3.5% 0 11%; } 
 .after .copyright { margin: 0 0; display: none; } 
 .after .con_tit { margin: 6.5% 0 4.5%; margin: 0 0 4.5%; } 
 .after .result { margin: 0 0 3%; } 
 .after .type_result { margin: 5% 0 5.5%; } 
 .after .recomm , .after .info { margin: 0 -35%; margin: 0 -25%; } 
 .after .subtit { margin: 10% -35% 3%; margin: 10% -25% 3%; } 
 .after .other li { width: 46%; } 
 .after .other li:first-child { margin: 0 7% 0 0; } 
 .after .other li:first-child::before { right: -8%; } 
 .after .bnr { width: 100%; } 
 .after .bnr + .bnr { margin: 2% auto 10%; } 
 .after .bnr dt { padding: 0 2%; } 
 .after .bnr dd { padding: 0 2%; } 
 .after .other { margin: 0 auto 11%; } 

 .link { padding: 8% 0 9.5%; } 
 .link ul { margin: 3% 0 6.5%; margin: 3% 10% 6.5%; } 

 /* 230714 */
 .before .content .tx.tx2.re_posit {
   top: -33%;
   right: 4%;
   width: 22%;
}
 }

@media (max-width: 992px){
 .clickPop { padding: 15px 0 20px; } 
 .dim_popup.sns .tit { font-size:22px } 
 .dim_popup.sns table { font-size:12px } 

 .quiz .quiz_zone .qstn_con .question { font-size: 37px; } 
 .quiz .quiz_zone .qstn_con .question.line1 { padding: 25.9px 0px; } 

 .after { background-size: 240% auto; } 
 .after .bnr dd { font-size: 16px; } 
 .after .bnr dd strong { font-size: 20px; } 
 }

@media (max-width: 800px){
 .quiz .quiz_zone .qstn_con .time { width: 100%; } 
 .quiz .quiz_zone .qstn_con .time .bar_wrap { width: calc(100% - 80px); } 
 .quiz .quiz_zone .qstn_con .question_img { margin: 4% 0 0; border-radius: 32px; } 
 }

@media (max-width: 768px){
 .after .bnr dl { height: 150px; border-radius: 15px; } 
 .after .bnr dd strong { } 
 .after .other li p { font-size: 20px; margin: 0 0 3%; } 
 .link .tit { } 
 /* .after .bnr dl { border-radius: 10px; height: auto; padding: 10px 0; } */
 /* .after .bnr dt { width: 100%; display: block; padding: 0 5%; } */
 /* .after .bnr dd { display: block; width: 100%; text-align: center; margin: 5px 0 0; font-size: 14px; } */
 /* .after .bnr dd strong { font-size: 17px; } */
 /* .after .bnr dd strong br.mo { display: none; } */
 
 .quiz .quiz_zone .qstn_con .question { font-size: 27px; } 
 .quiz .quiz_zone .qstn_con .question.line1 { padding: 18.9px 0; } 
 .quiz .quiz_zone .qstn_con .answer li:first-child { margin: 0 auto 10px; } 
 /* .quiz .quiz_zone .qstn_con .answer.txt li:first-child { margin: 0 auto 10px; } */
 /* .quiz .quiz_zone .qstn_con .answer.txt li { margin: 0 auto 10px; } */
 
 .quiz .quiz_zone .qstn_con .answer li { width: 90%; height: 90px; } 
 .quiz .quiz_zone .qstn_con .answer li a, .quiz .quiz_zone .qstn_con .answer li p { font-size: 19px; } 
 .quiz .quiz_zone .qstn_con .next { /* width: 90%; *//* display: block; *//* margin: 0 auto; */ } 
 .quiz .quiz_zone .qstn_con .next img { width: 100%; } 

 .after .type_result .character { margin: 0 10px 0 0; width: 11%; } 
 .after .type_result .txt { font-size: 20px; } 
 /* .after .other li { width: 80%; } */
 /* .after .other li:first-child { margin: 0 0 7% 0; } */
 /* .after .other li:first-child::before { right: auto; left: 50%; bottom: -5.5%; width: 100%; height: 2px; transform: translate(-50%, 0); } */

 .link .tit { font-size: 28px; } 
 .link ul li { margin: 0 1% 0 0; width: 14%; } 
 .link .btn + .btn { margin: 2% 0 0; } 
 .link .btn { padding: 0 10%; padding: 0 20%; } 

 /* 230714 */
 .after .bnr .re_size dt {
   padding: 0 5%;
}
 .br_768 {display: block;}
 }

@media (max-width: 576px){
 .dim_popup.sns { width:90% } 

 .before .content { padding: 0 17%; } 
 .before .content .tx { width: 32%; } 
 .before .content .tx.tx1 { top: -26%; } 
 .before .content .tx.tx2 { top: -37%; } 
 .before .txt { padding: 0 20%; margin: 4.5% 0 16%; } 
 .before .join_btn { margin: 5% 0 8.5%; } 
 .before .count span { font-size: 22px; } 
 .before .copyright { width: 24%; margin: 0 auto; } 
 .before .test_btn { padding: 0 7%; } 

 .quiz .copyright { width: 24%; margin: 0 0 0 76%; } 
 .quiz .quiz_zone .qstn_con .question { font-size: 22px; } 
 .quiz .quiz_zone .qstn_con .question.line1 { padding: 15.4px 0; } 
 .quiz .quiz_zone .qstn_con .answer li a, .quiz .quiz_zone .qstn_con .answer li p { font-size: 16.5px; } 
 .quiz .quiz_zone .qstn_con .answer.txt li { height: 70px; } 
 
 .after .bnr dd strong { font-size: 17px; } 
 .after .bnr dd { font-size: 13px; } 
 .after .bnr dl { height: auto; padding: 10px 0; } 
 
 .after .copyright { width: 24%; margin: 0 0 0 76%; } 
 .after .tip { font-size: 13px; } 
 .after .recomm, .after .info { margin: 0 -48%; margin: 0 -36%; } 
 .after .subtit { margin: 10% -48% 3%; margin: 10% -30% 3%; } 
 .after .type_result .txt { font-size: 17px; } 
 .after .info li:first-child { margin: 5% 0 2.5%; } 
 .after .other li p { font-size: 17px; } 
 .after .other li p span::before { height: 6px; } 
 .link .tit { font-size: 25px; font-size: 23px; } 

 /* 230714 */
 .before .content .tx.tx2.re_posit {
   top: -53%;
   right: 1%;
   width: 30%;
}
 }

@media (max-width:460px){
 .before .count span { font-size: 17px; } 

 .quiz .quiz_zone .qstn_con .question { font-size: 15px; margin: 2% 0 3%; } 
 .quiz .quiz_zone .qstn_con .question.line1 { padding: 11.2px 0; } 
 .quiz .quiz_zone .qstn_con .answer li { height: 70px; } 
 .quiz .quiz_zone .qstn_con .answer li a, .quiz .quiz_zone .qstn_con .answer li p { font-size: 13px; } 
.quiz .quiz_zone .qstn_con .answer.txt li { height: 50px; } 
 
 .after .type_result .txt { font-size: 15px; } 
 .link .tit { font-size: 23px; font-size: 20px; } 

 .after .bnr dd strong { font-size: 14px; } 
 .after .other li p { font-size: 13px; } 
 
 .quiz .con_tit { margin: 3% 0; } 
 .quiz .quiz_zone .qstn_con .time { height: 22px; } 
 .quiz .quiz_zone .qstn_con .time .num { font-size: 15px; } 
 .quiz .quiz_zone .qstn_con .time a { width: 22px; } 
 .quiz .quiz_zone .qstn_con .answer li { height: 50px; } 
.quiz .quiz_zone .qstn_con .answer li:first-child { margin: 0 auto 5px; } 
.quiz .quiz_zone .qstn_con .answer.txt li p input { height: 20px; font-size: 11px; } 
 }

 @media (max-width:400px) {
    [class*=mg_popup_wrap] .content_area { max-height: 550px; overflow-y: scroll; } 
 }