@charset "utf-8";

/******* chapter contents ***********/
/*.sectbg {position:relative;height:660px;background:#88b1c1}*/
.sectbg {position:relative;height:555px;}
.chapterCont .title {width:100%;padding-top:250px;font-size:70px;font-weight:bold;color:#fff;text-align:center;}
span.textRed{text-decoration: underline; color:red;}
#s22 .sect1 {position:relative;width:100%;height:720px;z-index:2; background: url(./chk/ckck_bg.png) no-repeat 0px 0px;}
#s22 .sect1 .btn-start {
	position: absolute;
	bottom: 123px;
    left: 65%;
	width: 141px;
    height: 46px;
	transform: translate(-50%);
	background: url(./chk/btn-start.png) no-repeat 0px 0px;
	z-index: 3;
    top:492px;
}

#s22 .sect2 {width:100%;height:720px; background: url(./chk/ckck_bg22.png) no-repeat 0 0;}
#s22 .sect3 {width:100%;height:720px; background: url(./chk/bg1.jpg) no-repeat 0 0;}
#s22 .sect4 {width:100%;height:720px; background: url(./chk/bg1.jpg) no-repeat 0 0;}
#s22 .quiz-num:after { content:""; display:block; width:63px; height:81px; background:url(./chk/chk_Q.png)no-repeat; position:absolute; top:5px; left:-60px;}
#s22 .quiz-num {
    position: absolute;
    position: absolute;
    top: 119px;
    left: 200px;
    font-size: 93px;
    font-weight: 700;
    color: #FF8345;
}
#s22 .quiz {
    position: absolute;
    top: 130px;
    left: 287px;
    width: 820px;
    padding-right: 20px;
    font-size: 24pt;
    color: #333;
    letter-spacing: -0.05em;
    line-height: 1.2;
    box-sizing: border-box;
    font-weight: 800;
}


.sect2 .num_left{position: absolute; top:148px; left:143px;display: block;font-weight: bold;font-size: 18px;}
#s22 .yes {
    opacity: 0.5; 
    position:absolute;
    top:265px;
    left:361px;
    display:block;
    width: 180px; 
    height: 270px; 
    /* background:url(./chk/chk_ox_o.png) no-repeat 0 0; */
}
#s22 .yes.active,#s22 .yes:hover {
    width: 169px;
    height: 169px;
    top: 151px;
    background: url(./chk/chk_ox_o_hover.png) no-repeat 0 0;
    opacity: 1;
    top:265px;
    left:361px;
    
}
#s22 .no {
    opacity: 0.5;
    position:absolute;
    top: 264px;
    left: 753px;
    display:block;
    width: 169px;
    height: 169px;
    /* background:url(./chk/chk_ox_x.png) no-repeat 0 0; */
}
#s22 .no.active,#s22 .no:hover {
    opacity: 1;
    top: 265px;
    left: 753px;
    width: 169px;
    height: 169px;
    background: url(./chk/chk_ox_x_hover.png) no-repeat 0 0;
}
/* 해설 이미지와 글 정답번호 */
#s22 .feedbox {
    display:none; 
    position:absolute; 
    top: 522px; 
    left: 148px; 
    width: 162px; 
    height: 36px; 
    box-sizing:border-box; 
    background:url(./chk/chk_qu_bg.png) no-repeat 0 0; 
    z-index: 3;
}
#s22 .feedbox .answer {
    position: relative; 
    top: 3px; 
    left: 130px; 
    color:#fff; 
    width:50px;
    height:36px;
    line-height:32px; 
    font-size:20pt; 
    font-family: "NanumSquareRound";
    /* background-image:url(./chk/answer.png); */
}
 /* 정답번호 */
#s22 .feedbox .exp {
    position: relative;
    top: -30px;
    left: 176px;
    color: #fff;
    font-size: 22px;
    width: 840px;
    line-height: 1.3;
    font-family: "NanumSquareRound";
    font-weight: 600;
} /* 해설 마지막 숫자가 왼쪽 공백 조정 */
/* O / X */
#s22 .icon-o {position:absolute;top:110px;left:126px;width:142px;height:110px;background:url(./chk/answer_o.png) no-repeat 0 0;}
#s22 .icon-x {position:absolute;top:110px;left:126px;width:142px;height:110px;background:url(./chk/answer_x.png) no-repeat 0 0;}
/* 결과보기 버튼 위치 */
#s22 .btn-cor {
	position:absolute; 
	top: 463px;
    right: 111px;
    width: 171px;
    height: 46px;
	background:url(./chk/btn-cor.png) no-repeat 0 0;
}
/*#s22 .btn-cor:hover{background:url(./chk/btn-cor-hover.png) no-repeat 0 0;}  정답보기 버튼 위치 */
#s22 .btn-result {
    display:none; 
    position:absolute; 
    top:463px; 
    right:111px; 
    width:171px; 
    height:46px; 
    background:url(./chk/btn_result.png) no-repeat 0 0;
    z-index: 3;}

#s22 .selc {position:absolute; top:230px; left:257px; width: 660px; z-index: 1;} /* 보기 문항 위치 */
#s22 .selc li {position:relative; list-style:none; /*float:left;*/ margin-left: 54px;}
#s22 .selc li.on .icon-check {position:absolute; margin-top:3px; top:-14px; left:-33px; display:block; width:42px; height:40px; background:url(./chk/icon_check.png) no-repeat 0 0;}
#s22 .selc li a {text-decoration:none; color:#000; letter-spacing: -1px; font-size:20px; line-height: 2.2; margin-left: 10px; font-family: "NanumSquareRound";} /* 보기 문항 사이즈 */
#s22 .selc li a:hover{color:#000;}
#s22 .qnumimg1 {position:absolute; margin-top:5px; top:2px; left:-30px; width:28px; height:29px; cursor:pointer; background:url(./chk/btn_choice.png) no-repeat 0 0;} /* 보기 1번호 위치 */
#s22 .qnumimg2 {position:absolute; margin-top:5px; top:2px; left:-30px; width:28px; height:29px; cursor:pointer; background:url(./chk/btn_choice.png) no-repeat 0 0; background-position-x: -28px;} /* 보기 2번호 위치 */
#s22 .qnumimg3 {position:absolute; margin-top:5px; top:2px; left:-30px; width:28px; height:29px; cursor:pointer; background:url(./chk/btn_choice.png) no-repeat 0 0; background-position-x: -56px;} /* 보기 3번호 위치 */
#s22 .qnumimg4 {position:absolute; margin-top:5px; top:2px; left:-30px; width:28px; height:29px; cursor:pointer; background:url(./chk/btn_choice.png) no-repeat 0 0; background-position-x: -84px;} /* 보기 3번호 위치 */
#s22 .qnumimg1:hover,#s22 .qnumimg2:hover,#s22 .qnumimg3:hover,#s22 .qnumimg4:hover{background-position-y: -29px;}

#s22 .gap {position:absolute; height:10px;} /* 보기 간격 조정 */

#s22 .selc li.on a {color:#000;}
#s22 .selc li.onre a {color:#000;} /* 정답색상 */
#s22 .feedbox .cntbox {position:absolute;top:131px;right:640px;}
#s22 .feedbox .cntbox .num {display:none !important}
#s22 .feedbox .cntbox span {color:#000;font-size:20px}
#s22 .feedbox .cntbox .next {position:absolute; top: -190px; right: -1500px; display:inline-block; width:171px; height:46px; background:url(./chk/chk_btn_dm.png) no-repeat 0 0; font-size:0;}

#s22 .sect5 .txt {position:absolute; top:0; left:0; width:100%; height:720px; font-size:0; text-align:center;background: url(./chk/ckck_bg4-1.png) no-repeat 0px 0px;}
#s22 .sect5 .result_desc {
    position: absolute;
    top: 277px;
    left: 473px;
    width: 30px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 31px;
    font-weight: 500;
    color: black;
}

#s22 .sect5 .result_desc0 {
    position: absolute;
    top: 277px;
    left: 588px;
    width: 30px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 35px;
    font-weight: 500;
    color: #FF8345;
}
#s22 .sect5 .result {position:absolute; top:338px; left:223px; width:982px; height:162px; /*margin:0 0 0 215px;*/background:none;}
#s22 .sect5 .result:after {content:'';display:block; clear:both}
#s22 .sect5 .result li {
    float: left;
    width: 131px;
    height: 162px;
    list-style: none;
    left: 182px;
    top: 24px;
    position: relative;
}
#s22 .sect5 .result li.q0{display:none;}
/*#s22 .sect5 .result .q2 {margin-top:-33px;}
#s22 .sect5 .result .q3 {margin-top:-21px;}*/
#s22 .sect5 .result li .t1 {display:none;}
#s22 .sect5 .result li .t2 {display:block; width:87px; height:104px;font-size:100px; /*margin:24px 8px 0 -3px;*/ font-weight:bold; color:#38a7e6; text-align:center;}
#s22 .sect5 .result li .answer-o {display:inline-block; margin: 11% 0 0 56%; transform: translate(-50px,-50px); /*width:104px; height:103px;*/background:url(./chk/ckck_O.png) no-repeat center center;}
#s22 .sect5 .result li .answer-x {display:inline-block; margin: 11% 0 0 56%; transform: translate(-50px,-50px); /*width:99x; height:99px;*/background:url(./chk/ckck_X.png) no-repeat center center;}
#s22 .std-layer {display:none; position:absolute; top:0; left:0; width:100%; height:660px; z-index:2;}
/*#s22 .std-layer.std1 {background:url(../img/bg_layer_1.png) no-repeat 0 0;}
#s22 .std-layer.std2 {background:url(../img/bg_layer_2.png) no-repeat 0 0;}
#s22 .std-layer.std3 {background:url(../img/bg_layer_3.png) no-repeat 0 0;}*/
#s22 .std-layer .num-box {position:absolute; top:540px; left:810px;}
#s22 .std-layer .num-box {font-size:20px; color:#8c8c8c;}
#s22 .std-layer .num-box  span {font-size:25px; color:#3c8702;}
#s22 .std-layer .num-box .num-prev {display:inline-block; width:16px; height:16px; margin-right:3px; background:url(../img/btn_num_prev_over.png) no-repeat 0 0; }
#s22 .std-layer .num-box .num-prev.off {background:url(../img/btn_num_prev.png) no-repeat 0 0; cursor:default;}
#s22 .std-layer .num-box .num-next {display:inline-block; width:16px; height:16px; background:url(../img/btn_num_next_over.png) no-repeat 0 0; }
#s22 .std-layer .num-box .num-next.off {background:url(../img/btn_num_next.png) no-repeat 0 0; cursor:default;}
#s22 .layer_close {position:absolute; top:61px; right:32px; display:block; width:52px; height:53px; background:url(../img/btn_layer_close.png) no-repeat 0 0; }
#s22 .layer_close:hover {background:url(../img/btn_layer_close_over.png) no-repeat 0 0; }
.chk-layer1 {display:none; position:absolute; top:0; left:0; width:100%; height:660px; background:url(../img/chk1.png) no-repeat 0 0; cursor:pointer;}
.chk-layer2 {display:none; position:absolute; top:0; left:0; width:100%; height:660px; background:url(../img/chk2.png) no-repeat 0 0; cursor:pointer;}
.chk-layer3 {display:none; position:absolute; top:0; left:0; width:100%; height:517px; background:url(../img/chk3.png) no-repeat 0 0; cursor:pointer;z-index: 3;}
.chk-layer4 {display:none; position:absolute; top:0; left:0; width:100%; height:517px; background:url(../img/chk4.png) no-repeat 0 0; cursor:pointer;z-index: 3;}
#s22 .reQuiz-viewLay {position:absolute; top:388px; left:0; display: none;}
#s22 .reQuiz-viewLay li {position:relative; width:90px; height:38px; margin-bottom:5px; padding:0 11px 0 19px; background:url(../img/bg_replay.png) no-repeat 0 0; cursor:pointer; text-align:center;}
#s22 .reQuiz-viewLay li.ac {background:url(../img/bg_replay.png) no-repeat 0 -50px !important;}
#s22 .reQuiz-viewLay li a {display:block; width:100%; height:45px; text-align:center; color:#fff; line-height:43px; text-decoration:none;}
#s22 .icon-o-sm {display:block; position:absolute; top:4px; left:17px; width:38px; height:38px;background:url(../img/chk_o_sm.png) no-repeat 0 0; }
#s22 .icon-x-sm {display:block; position:absolute; top:4px; left:17px; width:38px; height:38px;background:url(../img/chk_x_sm.png) no-repeat 0 0; }


/* 유형확인버튼 */
#s22 .btn-again {
    display:none; 
    position:absolute; 
    top:476px; 
    left:472px; 
    width:171px; 
    height:46px; 
    background:url(./chk/btn_again.png) no-repeat 0 0;  
    font-size:0;

}

/* 다시풀기버튼 */
#s22 .btn-re {
    display:block; 
    position:absolute; 
    top:476px; 
    left:652px; 
    width:171px; 
    height:46px; 
    background:url(./chk/btn_repeat.png) no-repeat 0 0; 
    font-size:0;
}

/* 적생 글씨 스타일 추가 20180305 */
#s22 .textRed {color:#fb0b27;}

/*유형확인*/
.chk_btn_popup{
    display: block;
    position: absolute;
    top: 410px;
    left: 657px;
    width: 201px;
    height: 46px;
    background: url(./chk/chk_btn_popup.png) no-repeat 0 0;
    z-index: 10;
}

.chk_btn_down{
    display:block; 
    position:absolute; 
    top:410px; 
    left:424px; 
    width:201px; 
    height:46px; 
    background:url(./chk/chk_btn_down.png) no-repeat 0 0;
    z-index: 10;
}

.chk_btn_start{
    display: block;
    position: absolute;
    top: 520px;
    left: 546px;
    width: 193px;
    height: 44px;
    background: url(./chk/chk_btn_str.png) no-repeat 0 0;
    z-index: 10;
}
.chk_popup{position:absolute; top:0; left:0; width:1280px; height:720px; background:url(./chk/popup.png) no-repeat 0 0;z-index: 10;}
.popup_x{position:absolute; top:543px; right:574px; width:131px; height:45px; background:url(./chk/popup_x.png) no-repeat 0 0; z-index: 11;}
.chk_popup_AB{position:absolute; top:0; left:0; width:1280px; height:720px; background:url(./chk/A_popup.png) no-repeat 0 0;}
.chk_popup_AB.b{background:url(./chk/B_popup.png) no-repeat 0 0;}
.chk_popup_AB.c{background:url(./chk/C_popup.png) no-repeat 0 0;}
/*타입2 문제*/



#s22 .btn-exp {display:block; position:absolute; top:530px; left:775px; width:217px; height:44px;background:url(../img/btn_aview.png) no-repeat 0 0; font-size:0;}
#s22 .btn-exp:hover {background:url(../img/btn_aview_over.png) no-repeat 0 0;}
.hide {display: none !important;}
.active {display: block !important;}
.section {display: none}


.nara1-0 .section.nara1-0 {display: block !important}
.nara1-1 .section.nara1-1 {display: block !important}
.nara1-2 .section.nara1-2 {display: block !important}
.nara1-3 .section.nara1-3 {display: block !important}
.nara1-4 .section.nara1-4 {display: block !important}
.nara1-5 .section.nara1-5 {display: block !important}
.nara1-6 .section.nara1-6 {display: block !important}
.nara1-7 .section.nara1-7 {display: block !important}
.nara1-8 .section.nara1-8 {display: block !important}
.nara1-9 .section.nara1-9 {display: block !important}
.nara1-10 .section.nara1-10 {display: block !important}
.nara1-11 .section.nara1-11 {display: block !important}
.nara2-0 .section.nara2-0 {display: block !important}
.nara2-1 .section.nara2-1 {display: block !important}
.nara2-2 .section.nara2-2 {display: block !important}
.nara2-3 .section.nara2-3 {display: block !important}
.nara2-4 .section.nara2-4 {display: block !important}
.nara2-5 .section.nara2-5 {display: block !important}
.nara2-6 .section.nara2-6 {display: block !important}
.nara2-7 .section.nara2-7 {display: block !important}
.nara2-8 .section.nara2-8 {display: block !important}
.nara2-9 .section.nara2-9 {display: block !important}
.nara3-0 .section.nara3-0 {display: block !important}
.nara3-1 .section.nara3-1 {display: block !important}
.nara3-2 .section.nara3-2 {display: block !important}
.nara3-3 .section.nara3-3 {display: block !important}
.nara3-4 .section.nara3-4 {display: block !important}
.nara3-5 .section.nara3-5 {display: block !important}
.nara3-6 .section.nara3-6 {display: block !important}
.nara4-0 .section.nara4-0 {display: block !important}
.nara4-1 .section.nara4-1 {display: block !important}
.nara4-2 .section.nara4-2 {display: block !important}
.nara4-3 .section.nara4-3 {display: block !important}
.nara4-4 .section.nara4-4 {display: block !important}
.nara4-5 .section.nara4-5 {display: block !important}
.nara4-6 .section.nara4-6 {display: block !important}
.nara4-7 .section.nara4-7 {display: block !important}
.nara5-0 .section.nara5-0 {display: block !important}
.nara5-1 .section.nara5-1 {display: block !important}
.nara5-2 .section.nara5-2 {display: block !important}
.nara5-3 .section.nara5-3 {display: block !important}
.nara5-4 .section.nara5-4 {display: block !important}
.nara5-5 .section.nara5-5 {display: block !important}
.nara6-0 .section.nara6-0 {display: block !important}
.nara6-1 .section.nara6-1 {display: block !important}
.nara6-2 .section.nara6-2 {display: block !important}
.nara6-3 .section.nara6-3 {display: block !important}
.nara6-4 .section.nara6-4 {display: block !important}
.nara7-0 .section.nara7-0 {display: block !important}
.nara7-1 .section.nara7-1 {display: block !important}
.nara7-2 .section.nara7-2 {display: block !important}
.nara7-3 .section.nara7-3 {display: block !important}
.nara7-4 .section.nara7-4 {display: block !important}
.nara7-5 .section.nara7-5 {display: block !important}
.nara7-6 .section.nara7-6 {display: block !important}
.nara8-0 .section.nara8-0 {display: block !important}
.nara8-1 .section.nara8-1 {display: block !important}

.section .part {visibility: hidden}

#sect_wrap.nara1-0 .part.nara1-0 {visibility: visible !important}
#sect_wrap.nara1-1 .part.nara1-1 {visibility: visible !important}
#sect_wrap.nara1-2 .part.nara1-2 {visibility: visible !important}
#sect_wrap.nara1-3 .part.nara1-3 {visibility: visible !important}
#sect_wrap.nara1-4 .part.nara1-4 {visibility: visible !important}
#sect_wrap.nara1-5 .part.nara1-5 {visibility: visible !important}
#sect_wrap.nara1-6 .part.nara1-6 {visibility: visible !important}
#sect_wrap.nara1-7 .part.nara1-7 {visibility: visible !important}
#sect_wrap.nara1-8 .part.nara1-8 {visibility: visible !important}
#sect_wrap.nara1-9 .part.nara1-9 {visibility: visible !important}
#sect_wrap.nara1-10 .part.nara1-10 {visibility: visible !important}
#sect_wrap.nara1-11 .part.nara1-11 {visibility: visible !important}
#sect_wrap.nara2-0 .part.nara2-0 {visibility: visible !important}
#sect_wrap.nara2-1 .part.nara2-1 {visibility: visible !important}
#sect_wrap.nara2-2 .part.nara2-2 {visibility: visible !important}
#sect_wrap.nara2-3 .part.nara2-3 {visibility: visible !important}
#sect_wrap.nara2-4 .part.nara2-4 {visibility: visible !important}
#sect_wrap.nara2-5 .part.nara2-5 {visibility: visible !important}
#sect_wrap.nara2-6 .part.nara2-6 {visibility: visible !important}
#sect_wrap.nara2-7 .part.nara2-7 {visibility: visible !important}
#sect_wrap.nara2-8 .part.nara2-8 {visibility: visible !important}
#sect_wrap.nara2-9 .part.nara2-9 {visibility: visible !important}
#sect_wrap.nara3-0 .part.nara3-0 {visibility: visible !important}
#sect_wrap.nara3-1 .part.nara3-1 {visibility: visible !important}
#sect_wrap.nara3-2 .part.nara3-2 {visibility: visible !important}
#sect_wrap.nara3-3 .part.nara3-3 {visibility: visible !important}
#sect_wrap.nara3-4 .part.nara3-4 {visibility: visible !important}
#sect_wrap.nara3-5 .part.nara3-5 {visibility: visible !important}
#sect_wrap.nara3-6 .part.nara3-6 {visibility: visible !important}
#sect_wrap.nara4-0 .part.nara4-0 {visibility: visible !important}
#sect_wrap.nara4-1 .part.nara4-1 {visibility: visible !important}
#sect_wrap.nara4-2 .part.nara4-2 {visibility: visible !important}
#sect_wrap.nara4-3 .part.nara4-3 {visibility: visible !important}
#sect_wrap.nara4-4 .part.nara4-4 {visibility: visible !important}
#sect_wrap.nara4-5 .part.nara4-5 {visibility: visible !important}
#sect_wrap.nara4-6 .part.nara4-6 {visibility: visible !important}
#sect_wrap.nara4-7 .part.nara4-7 {visibility: visible !important}
#sect_wrap.nara5-0 .part.nara5-0 {visibility: visible !important}
#sect_wrap.nara5-1 .part.nara5-1 {visibility: visible !important}
#sect_wrap.nara5-2 .part.nara5-2 {visibility: visible !important}
#sect_wrap.nara5-3 .part.nara5-3 {visibility: visible !important}
#sect_wrap.nara5-4 .part.nara5-4 {visibility: visible !important}
#sect_wrap.nara5-5 .part.nara5-5 {visibility: visible !important}
#sect_wrap.nara6-0 .part.nara6-0 {visibility: visible !important}
#sect_wrap.nara6-1 .part.nara6-1 {visibility: visible !important}
#sect_wrap.nara6-2 .part.nara6-2 {visibility: visible !important}
#sect_wrap.nara6-3 .part.nara6-3 {visibility: visible !important}
#sect_wrap.nara6-4 .part.nara6-4 {visibility: visible !important}
#sect_wrap.nara7-0 .part.nara7-0 {visibility: visible !important}
#sect_wrap.nara7-1 .part.nara7-1 {visibility: visible !important}
#sect_wrap.nara7-2 .part.nara7-2 {visibility: visible !important}
#sect_wrap.nara7-3 .part.nara7-3 {visibility: visible !important}
#sect_wrap.nara7-4 .part.nara7-4 {visibility: visible !important}
#sect_wrap.nara7-5 .part.nara7-5 {visibility: visible !important}
#sect_wrap.nara7-6 .part.nara7-6 {visibility: visible !important}
#sect_wrap.nara8-0 .part.nara8-0 {visibility: visible !important}
#sect_wrap.nara8-1 .part.nara8-1 {visibility: visible !important}


#toolbar>.btn-fullscreen.Y{right: 0px;}
#toolbar>.btn-fullscreen.N{right: -40px;}


.index_box_YN {
    position: absolute;
    top: 16px;
    left: 0;
    width: 214px;
    height: 90%;
}
.index_box_YN.Y { display: block;}
.index_box_YN.N { display: none;}