@charset "utf-8";

@font-face {
	font-family: 'yg-jalnan';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
	font-display: swap;
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'NanumSqR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.relative{position:relative;}
.leftBox{float:left;}
.rightBox{float:right;}
.clear::after{content:"";display:block;clear:both;}
.navy{color:#003499;}
strong{font-weight:900;}

html{max-width:1920px;margin:0 auto;overflow-x:hidden;overflow-y:hidden;}
body{padding:0;font-family:"NanumSqR";text-align:center;}
#wrap{position: fixed;width: 1920px;height: 1080px;}
.head_txt{position:absolute;top:0;left:2%;width:30%;margin:50px 0;text-align:left;font-family:"Jalnan";font-size:44px;z-index:100;}
.head_txt .line{display:block;width:100px;height:10px;margin:20px 0 40px;background:#00c4fb;border-radius:30px;}
.btn_next{position:absolute;top:50%;right:2%;width:140px;height:141px;margin-top:-70px;background-image:url("../images/icon_next_page.png");}
.notice_txt{position:absolute;bottom:10%;left:2%;width:100%;color:#666;text-align:left;font-weight:900;font-size:32px;}

/* color page */
.box_area{display:flex;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:75%;}
.box_area .leftBox{width:33%;}
.box_area .leftBox a{display:block;font-size:0px;color:transparent;}
.box_area .leftBox a img{width:100%;height:auto;}

/* page */
.page .head_copy{display:inline-block;position:absolute;top:5%;left:2%;}
.page .btn_home{display:inline-block;position:absolute;top:6%;right:2%;z-index:100;}

.page .circle_area{position:relative;width:50%;margin:0 auto;padding-top:10%;}
.page .circle_area .txt_qna{margin:0 0 30px;padding:0;font-weight:900;font-size:45px;}
.page .circle_area .leftBox{width:45%;}
.page .circle_area .rightBox{width:45%;}
.page .circle_area div img{width:100%;height:auto;}

.page .circle_area label{cursor:pointer;}
.page .circle_area .img_checkbox input[type="checkbox"]{display: none;}
.page .circle_area .img_checkbox .check_icon{display: inline-block;width: 60px;height: 60px;background-image: url('../images/icon_checkbox_off.png');background-size: cover;background-repeat: no-repeat;}
/* 체크됐을 때 */
.page .circle_area .img_checkbox input[type="checkbox"]:checked + .check_icon{background-image: url('../images/icon_checkbox_on.png');}

/* 정답 */
.page .correct{display:none;width:80%;height:auto;margin:50px auto 0;padding:36px 0;background:url(../images/bg_popup_correct.png) no-repeat;background-size:100% auto;;border-radius:40px;box-shadow:5px 15px 20px rgba(0,0,0,0.2);}
.page .correct p{display:inline-block;margin:0;font-size:40px;}

/* 오답 */
.page .dimmed{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:101;}
.page .wrong{display:none;position:absolute;top:50%;left:50%;width:1000px;height:281px;margin:-140px 0 0 -500px;background:url(../images/bg_popup_wrong.png) no-repeat;background-size:cover;text-align:center;z-index:102;border-radius:40px;box-shadow:5px 15px 20px rgba(0,0,0,0.5);}
.page .wrong p{margin:50px 0 30px;font-size:40px;}
.page .wrong .btn_close{display:inline-block;margin:0;cursor:pointer;}
.page .wrong .btn_close img{border-radius:45px;box-shadow:5px 15px 20px rgba(0,0,0,0.3);}