@charset "euc-kr";

.con_box.quiz_before { padding: 83px 0 90px 0; } 
.con_box.quiz_before > p { margin-bottom: 45px; color: #000000; font-size: 26px; font-weight: 300; } 
.con_box.quiz_before > p b { font-weight: 900; } 
.con_box.quiz_before .teacher { display: flex; flex-direction: row; align-items: center; justify-content: center; } 
.con_box.quiz_before .teacher > img { margin-right: 16px; } 
.con_box.quiz_before .teacher > img:last-of-type { margin-right: 0; } 
.con_box.quiz_before .tiny_noti { display: block; width: 100%; margin-top: 5px; margin-bottom: 34px; padding-right: 40px; color: #999999; font-size: 12px; font-weight: 300; text-align: right; } 

.quiz_zone { padding: 119px 0 91px 0; } 
.quiz_zone .qstn_con .question { position: relative; margin-bottom: 60px; padding-top: 65px; font-size: 33px; font-weight: bold; } 
.quiz_zone .qstn_con .question::before { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); content: ''; width: 37px; height: 37px; background-image: url('https://image.megagong.net/m/2023/0519_allawyer/con2_quiz_icon.png'); background-repeat: no-repeat; background-position: center; background-size: contain; } 
.quiz_zone .qstn_con .question span { text-decoration: underline; text-underline-offset: 6px; } 
.quiz_zone .qstn_con .answer li { width: 835px; height: 74px; line-height: 72px; margin: 0 auto 20px;border-radius: 40px;overflow: hidden; } 
.quiz_zone .qstn_con .answer li:last-of-type { margin-bottom: 0; } 
.quiz_zone .qstn_con .answer li a { display: table; width: 100%; height: 100%; margin: 0 auto; color: #000000; font-size: 26px; font-weight: 300; background-color: #e3e3e3; } 
.quiz_zone .qstn_con .answer li a:hover,
.quiz_zone .qstn_con .answer li a:active { color: #fff; background-color: #0038fd; }
.quiz_zone .qstn_con .page_count { margin-top: 150px; color: #000000; font-size: 20px; font-weight: 300; } 

.quiz_after { padding: 60px 30px 70px 30px; } 
.quiz_after .result { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin-bottom: 30px; padding-bottom: 40px; border-bottom: 1px solid #ebebeb; } 
.quiz_after .result > p { color: #000000; font-size: 22px; font-weight: bold; } 
.quiz_after .result > .type { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; margin-top: 10px; } 
.quiz_after .result > .type span { margin-left: 18px; margin-bottom: 0px; color: #000000; font-size: 35px; font-weight: 900; } 
.quiz_after .solution { margin-bottom: 49px; } 
.quiz_after .solution > p { margin-bottom: 55px; line-height: 1.6; color: #000000; font-size: 18px; font-weight: 300; } 
.quiz_after .solution .box { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #88a2fe; } 
.quiz_after .solution .box .box_title { width: 100%; padding: 15px 0; color: #ffffff; font-size: 23.5px; font-weight: 900; background-color: #0038fd; } 
.quiz_after .solution .box .box_desc { width: 100%; padding: 15px 0; color: #000000; font-size: 21.3px; font-weight: 300; } 


@media screen and (max-width: 1200px){
    .con_box.quiz_before .teacher { flex-wrap: wrap; width: 100%; } 
    .con_box.quiz_before .teacher > img:nth-of-type(1) { margin-left: 20%; margin-bottom: 16px; } 
    .con_box.quiz_before .teacher > img:nth-of-type(2) { margin-right: 20%; margin-bottom: 16px; } 
    .con_box.quiz_before .teacher > img:nth-of-type(3) { margin-left: 20%; } 
    .con_box.quiz_before .teacher > img:nth-of-type(4) { margin-right: 20%; }
    .con_box.quiz_before .tiny_noti{
        padding-right: 0;
        text-align: center;
    }
}

@media screen and (max-width: 992px){
    .con_box.quiz_before .teacher > img:nth-of-type(1) { margin-left: 10%; margin-bottom: 16px; } 
    .con_box.quiz_before .teacher > img:nth-of-type(2) { margin-right: 10%; margin-bottom: 16px; } 
    .con_box.quiz_before .teacher > img:nth-of-type(3) { margin-left: 10%; } 
    .con_box.quiz_before .teacher > img:nth-of-type(4) { margin-right: 10%; } 
    .quiz_zone .qstn_con .answer { margin: 0 20px; } 
    .quiz_zone .qstn_con .answer li { width: 100%; height: initial; line-height: 1.2; } 
    .quiz_zone .qstn_con .answer li a { padding: 15px 0; } 
    .quiz_after .solution > p { font-size: 16px; } 
}

@media screen and (max-width: 768px){
    .con_box.quiz_before { padding: 10vw 0; } 
    .con_box.quiz_before > p { margin-bottom: 8vw; font-size: 24px; } 
    .con_box.quiz_before .teacher { margin-bottom: 10vw; padding: 16px; } 
    .con_box.quiz_before .teacher > img { width: calc(50% - 8px); } 
    .con_box.quiz_before .teacher > img:nth-of-type(1) { margin-left: 0; margin-bottom: 16px; } 
    .con_box.quiz_before .teacher > img:nth-of-type(2) { margin-right: 0; margin-bottom: 16px; } 
    .con_box.quiz_before .teacher > img:nth-of-type(3) { margin-left: 0; } 
    .con_box.quiz_before .teacher > img:nth-of-type(4) { margin-right: 0; } 
    .con_box.quiz_before .tiny_noti { padding-right: 0; font-size: 9px; text-align: center; } 
    .quiz_zone { padding: 10vw 0; } 
    .quiz_zone .qstn_con .question { margin-bottom: 8vw; padding-top: 50px; font-size: 24px; } 
    .quiz_zone .qstn_con .answer li a { font-size: 20px; } 
    .quiz_zone .qstn_con .page_count { margin-top: 10vw; font-size: 14px; } 
    .quiz_after .solution > p { margin-bottom: 5vw; font-size: 13px; } 
    .quiz_after .solution .box .box_title { font-size: 20px; } 
    .quiz_after .solution .box .box_desc { font-size: 14px; } 
}

@media screen and (max-width: 576px){
    .con_box.quiz_before > p { margin-bottom: 4vw; font-size: 15px; } 
    .con_box.quiz_before > button { width: 65%; } 
    .quiz_zone .qstn_con .question { font-size: 15px; } 
    .quiz_zone .qstn_con .answer li a { font-size: 12px; } 
    .quiz_zone .qstn_con .page_count { margin-top: 10vw; font-size: 9px; } 
    .quiz_after { padding: 30px 10px 30px 10px; } 
    .quiz_after .result { margin-bottom: 5vw; padding-bottom: 5vw; } 
    .quiz_after .result > p { font-size: 14px; } 
    .quiz_after .result > .type > img { width: 50%; } 
    .quiz_after .result > .type span { margin-left: 8px; font-size: 20px; } 
    .quiz_after .solution { margin-bottom: 5vw; } 
    .quiz_after .solution > p { font-size: 11px; } 
    .quiz_after .solution .box .box_title { font-size: 15px; } 
    .quiz_after .solution .box .box_desc { font-size: 11px; } 
    .quiz_after > a { display: inline-block; width: 65%; } 
}