@charset "utf-8";

/* ================================================================ */
@font-face {
    font-family: "NanumBarunGothic";
    src:url('./font/NanumBarunGothic.eot'); 
	src:url('./font/NanumBarunGothic.eot?#iefix') format('embedded-opentype'), 
		url('./font/NanumBarunGothic.woff') format('woff'), 
		url('./font/NanumBarunGothic.ttf') format('truetype'); 
}

html,body{width:100%;height:100%;margin: 0;	padding: 0;}
html, body{overflow-x: hidden;}
/*#section_24 {overflow: hidden;}*/
section:last-child{overflow: hidden;}

body,h1,h2,h3,h4,input,button,textarea{font-family:'NanumBarunGothic','나눔바른고딕',dotum,Helvetica,sans-serif;font-size:11px;}

img,fieldset,iframe{border:0 none}
form{margin:0;}
dl,ul,ol,li {list-style:none;margin:0;padding:0;}

textarea {font-size:20px;}
/* ================================================================ */


/* Layout */
/* ================================================================ */
.container-fluid {
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: auto;
	margin-left: auto;
}

.container{
	padding-right: 0px;
	padding-left: 0px;
}
/* ================================================================ */


/* background images */
/* ================================================================ */

#section_wrap {
	transform-origin: top;
	position: absolute;
	width: 1800px;
	top: 0;
	left: 0;
	left:50%;
	margin-left:-900px;
}

#section_wrap > section{ background-size:auto 100%;background-repeat: no-repeat;background-position: 50% 50%;display:table;}
#section_wrap > section > .container{display:table-cell;vertical-align: middle;text-align: center;position: relative;}

#section_01{width:100%; height:900px; background-image: url(../images/bg/01.png);}	
#section_02{width:100%; height:900px; background-image: url(../images/bg/02.png)}
#section_03{width:100%; height:900px; background-image: url(../images/bg/03.png)}
#section_04{width:100%; height:900px; background-image: url(../images/bg/04.png)}
#section_05{width:100%; height:900px; background-image: url(../images/bg/05.png)}
#section_06{width:100%; height:900px; background-image: url(../images/bg/06.png)}
#section_07{width:100%; height:900px; background-image: url(../images/bg/07.png)}
#section_08{width:100%; height:900px; background-image: url(../images/bg/bg08_1.png)}
#section_08 > .container{ background:url(../images/bg/bg08.png) no-repeat 50% 50%; background-size: auto 100%;}
#section_09{width:100%; height:900px; background-image: url(../images/bg/09.png)}
#section_10{width:100%; height:900px; background-image: url(../images/bg/bg10_1.png)}
#section_10 > .container{ background:url(../images/bg/bg10.png) no-repeat 50% 50%; background-size: auto 100%;}
#section_11{width:100%; height:900px; background-image: url(../images/bg/11.png)}
#section_12{width:100%; height:900px; background-image: url(../images/bg/bg12_1.png)}
#section_12 > .container{ background:url(../images/bg/bg12.png) no-repeat 50% 50%; background-size: auto 100%;}
#section_13{width:100%; height:900px; background-image: url(../images/bg/13.png)}
#section_14{width:100%; height:900px; background-image: url(../images/bg/14.png)}
#section_15{width:100%; height:900px; background-image: url(../images/bg/15.png)}
#section_16{width:100%; height:900px; background-image: url(../images/bg/16.png)}
#section_17{width:100%; height:900px; background-image: url(../images/bg/17.png)}
#section_18{width:100%; height:900px; background-image: url(../images/bg/bg18_1.png)}
#section_18 > .container{ background:url(../images/bg/bg18.png) no-repeat 50% 50%; background-size: auto 100%;}
#section_19{width:100%; height:900px; background-image: url(../images/bg/19.png)}
#section_20{width:100%; height:900px; background-image: url(../images/bg/bg20_1.png)}
#section_20 > .container{ background:url(../images/bg/bg20.png) no-repeat 50% 50%; background-size: auto 100%;}
#section_21{width:100%; height:900px; background-image: url(../images/bg/21.png)}
#section_22{width:100%; height:900px; background-image: url(../images/bg/22.png)}
#section_23{width:100%; height:900px; background-color: #D7EBEA}
#section_23 > .container{ background:url(../images/bg/bg23.png) no-repeat 50% 50%; background-size: auto 100%;}
#section_24{width:100%; height:900px; background-image: url(../images/bg/24.png)}
/* ================================================================ */

/* ================================================================ */
section .subtitle {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 10;
	display: none;
}
section .subtitle p{
	width: 80%;
	margin: 0 auto 10px auto;
	background: rgba(0,0,0,0.8);
	border: 1px solid #fff;
	color: #fff;
	font-size: 20px;
	padding: 20px 0;
}

.click_bg {position: absolute;background: #fff url("../images/btn_click_on.png") no-repeat 50% 50%;border-radius: 20px 20px;cursor: pointer;}
.click_bg:hover {background: #fff url("../images/btn_click.png") no-repeat 50% 50%;}

.img_question, .btn_question, .btn_question2{
	position: absolute;cursor:pointer;
}

#audio_click, #audio_true, #audio_false {	
	position: absolute;
	width: 0;
	height: 0;	
}


#alert_box {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
}

#alert_box.alert_04_o {
	background: rgba(0,0,0,0.5) url("../images/04/img04_result_o.png") no-repeat 50% 50%;background-size: 500px auto;
}
#alert_box.alert_04_x {
	background: rgba(0,0,0,0.5) url("../images/04/img04_result_x.png") no-repeat 50% 50%;background-size: 500px auto;
}


#alert_box.alert_o {
	background: rgba(0,0,0,0.5) url("../images/quizpop_o.png") no-repeat 50% 50%;background-size: 292px 282px;
}
#alert_box.alert_re {
	background: rgba(0,0,0,0.5) url("../images/quizpop_re.png") no-repeat 50% 50%;background-size: 392px 282px;
}
#alert_box.alert_x {
	background: rgba(0,0,0,0.5) url("../images/quizpop_x.png") no-repeat 50% 50%;background-size: 292px 282px;
}
/* ================================================================ */

/* ================================================================ */
#section_04 .img04_drop{position:absolute;width:248px; height:234px;}
#section_04 .img04_drag_div{position:absolute;cursor: pointer;}

#section_06 .img06_drop{position:absolute;width:464px;height:470px;}
#section_06 .img06_drag_div{position:absolute;cursor: pointer;}
#section_06 #img06_drop1{width:466px;height:476px;background: url("../images/06/img06_target_box.png") no-repeat 50% 50%;}

#section_10 .btn_question {
	width:210px; height:100px; top:158px;left:17px;z-index: 1;
	background:#D1E7F0 url("../images/10/btn_question.png") no-repeat 50% 50%;
}
#section_10 .btn_question:hover {background:#D1E7F0 url("../images/10/btn_question_on.png") no-repeat 50% 50%;}

#section_10 .btn_question2 {	
	width:210px; height:200px; top:325px;left:17px;z-index: 1;
	background:#fff url("../images/10/btn_question.png") no-repeat 50% 50%;
}
#section_10 .btn_question2:hover {background:#fff url("../images/10/btn_question_on.png") no-repeat 50% 50%;}

#section_11 .img11_drop{position:absolute;width:380px; height:75px;}
#section_11 .img11_drag_div{position:absolute;cursor: pointer;}

#section_12 ul > li{padding: 10px 3px 10px 2px;}
#section_12 ul > li img{cursor: pointer;}

#section_15 .img_view, #section_16 .img_view{position:absolute;display:none;}

#section_17 .btn_question {
	top:207px;left:743px;width:280px;height:150px;z-index: 1;
	background:#fff url("../images/17/btn_question.png") no-repeat 50% 50%;
}
#section_17 .btn_question:hover {background:#fff url("../images/17/btn_question_on.png") no-repeat 50% 50%;}

#section_18 .container div, #section_20 .container div {position:absolute;}
#section_18 .container div, #section_18 .container div > img,
#section_20 .container div, #section_20 .container div > img {cursor: pointer;}

#txt_origin_01{width:414px;height:18px;background: url("../images/20/txt_origin_01.png") no-repeat 50% 50%;}

.btn_back{position:absolute;width:149px;height:43px;background: url("../images/18/btn_back.png") no-repeat 50% 50%;cursor:pointer;}
.btn_back:hover{background:url("../images/18/btn_back_on.png") no-repeat 50% 50%;}

#section_23 .btn_reset {position:absolute;background: url("../images/23/btn_reset.png") no-repeat 50% 50%;cursor:pointer;}
#section_23 .btn_reset:hover {background:url("../images/23/btn_reset_on.png") no-repeat 50% 50%;}

#section_23 .btn_ok {position:absolute;background: url("../images/23/btn_ok.png") no-repeat 50% 50%;cursor:pointer;}
#section_23 .btn_ok:hover {background:url("../images/23/btn_ok_on.png") no-repeat 50% 50%;}

/* ================================================================ */

/* ================================================================ */
table {
	width:100%;height: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;word-break: break-all;
}

table.border_radius tr th,
table.border_radius tr td {
	border-right: 1px solid #EA9866;
	border-bottom: 1px solid #EA9866;
	width:9.09%;height:60px;
	background-color: #FFF2E7;  
	padding:0;
}


table.border_radius tr:first-child td {border-top:1px solid #EA9866; }
table.border_radius tr:last-child td {border-bottom:1px solid #EA9866;}
table.border_radius th:first-child, table td:first-child {border-left:1px solid #EA9866;}
table.border_radius th:last-child, table td:last-child {border-right:1px solid #EA9866;}

table.border_radius tr:first-child td:first-child {border-top-left-radius: 6px;}
table.border_radius tr:first-child td:last-child {border-top-right-radius: 6px;}
table.border_radius tr:last-child td:first-child {border-bottom-left-radius: 6px;}
table.border_radius tr:last-child td:last-child {border-bottom-right-radius: 6px;}
/* ================================================================ */