@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
* {
	margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif;
}

html,body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	background:#000;
}

#wrap{
	position:absolute;
	width:1010px;
	height:610px;
	margin:0;
	padding:0;
	left:50%;
	margin-left:-497px;
	top:50%;
	margin-top:-315px;
	overflow:hidden;
}


.top-subtitle {
    position: absolute;
    top: 37px; left: 83px;
    margin: 0;
    line-height: 29px;
    color: #000;
    font-size: 22px;
    font-family: "Noto Sans KR";
    /*letter-spacing: -0.05em;*/
    z-index: 50;
    width: 142px;
    text-align: center;
}
.top-subtitle:before {
    content: "";
    float: left;
    margin-top: 12px;
    width: 6px;
    height: 7px;
    background-image: url('../img/top_subtitle.png');
}
.top-subtitle_left{position: absolute;
				   top:37px;
				   left: 220px;
				   color:#000;
				   font-size: 22px;
				   font-weight: bold;
    			   z-index: 50;}

/************/
/* skip버튼 */
/************/
#skip a{display:block; position:absolute; right:20px; bottom:50px; width:70px; height:63px; cursor:pointer;margin-top:70px; text-indent:-9999px; background:url(../img/skipBtn.png) top no-repeat; background-position:0px -5px; z-index:1000;}
#skip a:hover{background-position:0px -65px;margin-top:20px;}

/*****************************************************************************************************************/
#mappop {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6) url('../img/map.png') no-repeat;
	background-position: center;
	z-index: 1000;
}
#mappop .btn-close {
	position: absolute;
	top: 32px;
	right: 52px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
#mappop .mapinner {
	margin: 123px 0 0 89px;
	width: 826px;
	height: 427px;
}
#mappop .mapinner>div {
	float: left;
	width: 50%;
	height: 100%;
}
#mappop .mapinner>div:nth-child(2) {box-sizing:border-box;padding-left:35px}
#mappop .mapinner li {
	width: 100%;
	line-height: 24px;
	margin-bottom: 21px;
	font-family:'Noto Sans KR';
}
#mappop .mapinner li.active {color: #f77}
#infopop {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6) url('../img/help.png') no-repeat;
	z-index: 1000;
}
#infopop .btn-close {
	position: absolute;
	top: 25px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: url('../img/INbtn_close.png') no-repeat;
	background-size: 100%;
	cursor: pointer;
}

#indexLayer {
	position: absolute;
	top: -510px;
	right: -10px;
	z-index: 999;
}
#indexLayer.open {right:-232px}

#indexLayer ul li {
	list-style:none;
}
.index-wrap .indexbox  {
	position:relative;
	top:650px;
	left:-1029px;
	width:212px;
	height:423px;
	padding-left:1px;
	padding-top:3px;
    background-image: url('../img/index/bg_index.png');

}

.index-wrap.open .indexbox .open-index {
	position:absolute;
	top:404px;
	left: 145px;
	width: 57px;
	height: 14px;
	background:url(../img/index/btn_index_close.png) no-repeat 0 0;
	z-index: 10;
}

.index-wrap .indexbox a {
	position:absolute;
	display:block;
}
/* index */
.indexbox .tit1 {top:0;left:0;width:213px; height:29px; background:url(../img/index/index_title_1.png) no-repeat -11px 0;}
.indexbox .tit1.on,
.indexbox .tit1:hover {background:url(../img/index/index_title_ov.png) no-repeat -11px 0;}
/*1*/
.indexbox .tit2 {top:33px;left:0;width:213px; height:29px; background:url(../img/index/index_title_1.png) no-repeat -234px 0;}
.indexbox .tit2.on,
.indexbox .tit2:hover {background:url(../img/index/index_title_ov.png) no-repeat -234px 0;}

.indexbox .sub1-1 {top:70px;left:0px; width:164px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; line-height: 1.3;  background:url(../img/index/index_icon.png) no-repeat 19px 6px;}
.indexbox .sub1-1.on,
.indexbox .sub1-1:hover {color:#ffd803;}

.indexbox .sub1-2 {top:95px;left:0px; width:164px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; background:url(../img/index/index_icon.png) no-repeat 19px 30%;}
.indexbox .sub1-2.on,
.indexbox .sub1-2:hover {color:#ffd803;}

/*2*/
.indexbox .tit3 {top:97px;left:0;width:213px; height:29px; background:url(../img/index/index_title_1.png) no-repeat -459px 0;}
.indexbox .tit3.on,
.indexbox .tit3:hover {background:url(../img/index/index_title_ov.png) no-repeat -459px 0;}

.indexbox .sub2-1 {top:139px;left:0px; width:164px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; line-height: 1.3;  background:url(../img/index/index_icon.png) no-repeat 19px 6px;}
.indexbox .sub2-1.on,
.indexbox .sub2-1:hover {color:#ffd803;}

.indexbox .sub2-2 {top:170px;left:0px; width:164px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; line-height: 1.3;  background:url(../img/index/index_icon.png) no-repeat 19px 6px;}
.indexbox .sub2-2.on,
.indexbox .sub2-2:hover {color:#ffd803;}

.indexbox .sub2-3 {top:203px;left:0px; width:171px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; line-height: 1.3;  background:url(../img/index/index_icon.png) no-repeat 19px 6px;}
.indexbox .sub2-3.on,
.indexbox .sub2-3:hover {color:#ffd803;}

/*3*/
.indexbox .tit4 {top:236px;left:0;width:213px; height:29px; background:url(../img/index/index_title_1.png) no-repeat -681px 0;}
.indexbox .tit4.on,
.indexbox .tit4:hover {background:url(../img/index/index_title_ov.png) no-repeat -681px 0;}

.indexbox .sub3-1 {top:279px;left:0px; width:164px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; line-height: 1.3;  background:url(../img/index/index_icon.png) no-repeat 19px 6px;}
.indexbox .sub3-1.on,
.indexbox .sub3-1:hover {color:#ffd803;}

.indexbox .sub3-2 {top:308px;left:0px; width:164px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; background:url(../img/index/index_icon.png) no-repeat 19px 30%;}
.indexbox .sub3-2.on,
.indexbox .sub3-2:hover {color:#ffd803;}

.indexbox .sub3-3 {top:335px;left:0px; width:164px; height:20px; color:#ccc; padding-left: 32px; font-size: 15px; text-decoration: none; background:url(../img/index/index_icon.png) no-repeat 19px 30%;}
.indexbox .sub3-3.on,
.indexbox .sub3-3:hover {color:#ffd803;}

.indexbox .tit5 {top:365px;left:0;width:213px; height:29px; background:url(../img/index/index_title_1.png) no-repeat -902px 0;}
.indexbox .tit5.on,
.indexbox .tit5:hover {background:url(../img/index/index_title_ov.png) no-repeat -902px 0;}






.chapter-title {position:absolute; top:0; left:0; width:1010px; height:72px; background:url(../img/top_title.png) no-repeat 0 0; z-index:10;}
#s10 .chapter-title,
#s19 .chapter-title {background:url(../img/top_title.png) no-repeat 0 0; }

.printchapter-title {position:relative; top:0; left:0; width:100%; height:45px; z-index:1;}
#printbigtit {position:absolute; top:55px; left:85px; font-size:35px; color:#000; letter-spacing:-0.08em}
#printsubtit {position:relative; top:65px; left:720px; font-size:25px; color:#000;}

#locationBG.full,
#downloadBG.full {
	top:0;
	height:714px;
}
#locationBG.full .img,
#downloadBG.full .img {margin-top:0px;}
#locationBG.full .btn-classDown,
#downloadBG.full .btn-classDown {top:232px;}
.full .btn-layerClose {top:0px;}
#locationBG {
	display:none;
	position:absolute;
	top:45px;
	left:0;
	width:100%;
	height:615px;
	z-index:2;
	background:rgba(0,0,0,0.7);
	text-align:center;
}
#locationBG .img {
	display:none;
	position:relative;
	margin:30px 0 0 0;
	width:915px;
}
#locationBG .img.on {display:inline-block;}
#locationBG .ctnbox {
	position:absolute;
	top:70px;
	right:20px;
}
#locationBG .ctnbox .num {
	display:inline-block;
	margin-left:3px;
	font-size:20px;
	color:#333;
	vertical-align:middle;
}
#locationBG .ctnbox .num.line {
	padding-right:10px;
	background:url(../img/subdown/arrow_line.png) no-repeat right center;
}
#locationBG .ctnbox .num.on {
	color:#008601;
}
#locationBG .ctnbox .btn-next{
	display:inline-block;
	width:17px;
	height:17px;
	padding-left:3px;
	background:url(../img/subdown/arrow_left_btn.png) no-repeat right center;
	vertical-align:-5px;
}
#locationBG .ctnbox .btn-prev{
	display:inline-block;
	width:17px;
	height:17px;
	padding-left:3px;
	background:url(../img/subdown/arrow_right_btn.png) no-repeat right center;
	vertical-align:-5px;
}

#downloadBG {
	display:none;
	position:absolute;
	top:0px;
	left:0;
	width:100%;
	height:714px;
	z-index:7;
	background:rgba(0,0,0,0.7);
	text-align:center;
}
#downloadBG .img {
	display:inline-block;
	margin:90px 0 0 0;
	width:914px;
}
.btn-layerClose {
	position:absolute;
	top:95px;
	right:285px;
	display:block;
	width:38px;
	height:38px;
	background:url(../img/subdown/close_btn.png) no-repeat 0 0;
	z-index:2;
}
.btn-layerClose:hover {
	background:url(../img/subdown/closeov_btn.png) no-repeat 0 0;
}
#downloadBG .btn-classDown1 {
	position:absolute;
	top:212px;
	right:357px;
	display:block;
	width:27px;
	height:25px;
	background:url(../img/subdown/download.png) no-repeat 0 0;
}

#downloadBG .btn-classDown2 {
	position:absolute;
	top:252px;
	right:357px;
	display:block;
	width:27px;
	height:25px;
	background:url(../img/subdown/download.png) no-repeat 0 0;
}

#downloadBG .btn-classDown3 {
	position:absolute;
	top:292px;
	right:357px;
	display:block;
	width:27px;
	height:25px;
	background:url(../img/subdown/download.png) no-repeat 0 0;
}

#downloadBG .btn-classDown4 {
	position:absolute;
	top:332px;
	right:357px;
	display:block;
	width:27px;
	height:25px;
	background:url(../img/subdown/download.png) no-repeat 0 0;
}

#downloadBG .btn-classDown5 {
	position:absolute;
	top:372px;
	right:357px;
	display:block;
	width:27px;
	height:25px;
	background:url(../img/subdown/download.png) no-repeat 0 0;
}

#downloadBG .btn-classDown6 {
	position:absolute;
	top:412px;
	right:357px;
	display:block;
	width:27px;
	height:25px;
	background:url(../img/subdown/download.png) no-repeat 0 0;
}

#downloadBG .btn-classSummay {
	position:absolute;
	top:452px;
	right:357px;
	display:block;
	width:27px;
	height:25px;
	background:url(../img/subdown/download.png) no-repeat 0 0;
}

#btn-fullscreen {position:absolute;
						  left:810px;
						  top:3px;
						  width: 20px;
						  height: 40px;
						  z-index: 999;
						  border:0px;
						  background: url(../img/player/btn_full.png) no-repeat 0 50%;
						  cursor: pointer;
						  display: none;
}
#btn-fullscreen_no {position:absolute;
						  left:810px;
						  top:3px;
						  width: 30px;
						  height: 40px;
						  z-index: 999;
						  border:0px;
						  background: url(../img/player/btn_full_no.png) no-repeat 0 50%;
						  cursor: pointer;
						  display: none;
}
.poster-1 {background: url(../../common/img/poster/poster-1.jpg) no-repeat 0px 0px !important;}

.overlay {z-index: 3; position: absolute; top:0px; left:0px; width:1010px; height:568px; z-index: 1001;}
.overlay-blur {background: rgb(0, 0, 0); opacity: 0.6;}
.pleaseplay_btn {position: absolute; top:50%; left:50%; margin-left:-103px; margin-top: -104px; cursor: pointer;}