/*********************
00) 공통
01) Header
02) Mobile Menu
03) Footer
04) sub Layout
*********************/

/*********************
00) 공통
*********************/
.wrapper{width: 92.72%; max-width:1160px; margin: 0 auto;}

/*********************
01) Header
*********************/
#header{position: fixed; height: 100px; transition:.2s; width: 100%; z-index:99;}
#header .topLogo{float:left;  height: 100%;padding-right: 30px;}
#header .topLogo a{display:block;  width: 160px; height: 100%; background: url('../img/common/topLogo.png') no-repeat 40px center ; font-size: 0;padding-left: 40px;}
#header .unesco{float:left; width: 22%; max-width:414px; height: 100%; background: url('../img/common/unesco.png') no-repeat center / 100%; font-size: 0; margin-left: 40px;}
#header .shopBtn{position: absolute; right: 0; top: 0; width: 100px; height: 100%;overflow: hidden;text-align: center;}
#header .shopBtn a{display:block; font-size: 0; height: 100%; background: #363636 url('../img/common/topShop.png') no-repeat center; transition:.2s;overflow: hidden;}
#header .shopBtn a:hover{background-color: #d8231e;}
#header .mMenuOpen{display:none;}
/*menu*/
#header ul#gnb{float:left; width: calc(100% - 310px);/*  margin-right: 190px; text-align: right; */}
#header ul#gnb > li{/* float:left; */ position: relative; display:inline-block;}
#header ul#gnb > li > a{display:inline-block; font-size: 20px; line-height: 100px; height: 100%; padding: 0 25px; transition:.2s; position: relative;z-index: 1;}
#header ul#gnb > li > a.on::before{display: block;content: '';position: absolute;height: 5px;bottom: 41%;left: 21px;right: 21px;opacity: .45;background-color: #d8231e;z-index: 0;}
#header ul#gnb > li > a:hover{color: #d8231e;}
#header ul#gnb ul.depth2{display:none; position: absolute; top: 100%; left: 0; width: 100%; border: solid 1px #e5e5e5; padding: 10px 0; background-color: #fff; min-width: 150px; left: 50%; transform:TranslateX(-50%);}
#header ul#gnb ul.depth2 li a{display:block; font-family:'Noto Sans KR', sans-serif !important; font-size: 15px; line-height: 40px; height: 40px; text-align: center; transition:.2s;}
#header ul#gnb ul.depth2 li.on a,
#header ul#gnb ul.depth2 li a:hover{color: #d8231e;}
/*언어선택*/
#header select.lang{position: absolute; right: 130px; top: 50%; transform:translateY(-50%); background: transparent; border:0;cursor: pointer;}
/* sns */

.tsns{position: absolute;overflow: hidden;text-align: right;top: 50%;transform:translateY(-50%);right: 120px;width: 100px;text-align: right;}
.tsns a{display: inline-block;text-align: center;padding: 10px 10px;vertical-align: middle;position: relative;height: 16px;background-repeat: no-repeat;background-position: center;font-size: 0;text-indent: -999em;}
/* .tsns a::before{display: block;content: '';width: 1px;background-color: #000;height: 8px;position: absolute;top: 50%;left: 0;margin-top: -4px;opacity: .4;}
.tsns a#ts1::before{display: none;} */
.tsns a#ts1{background-image: url(/design/img/common/ts_1.png);width: 8px;}
.tsns a#ts2{background-image: url(/design/img/common/ts_2.png);width: 16px;}
.tsns a#ts3{background-image: url(/design/img/common/ts_3.png);width: 23px;}
.tsns a#ts1:hover{background-image: url(/design/img/common/tso_1.png)}
.tsns a#ts2:hover{background-image: url(/design/img/common/tso_2.png)}
.tsns a#ts3:hover{background-image: url(/design/img/common/tso_3.png)}

#header .topBtn{position: absolute; right: 0; top: 0; width: 100px; height: 100%;overflow: hidden;text-align: center;}
#header .topBtn a{display:block; font-size: 12px;color: #ccc; height: 100%; background: #363636 ; transition:.2s  ease-out;overflow: hidden;letter-spacing: -1px;position: relative;}
#header .topBtn a span{display: block;position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);width: 100%;}
#chevron {position: relative;text-align: center;padding: 10px;margin: 0 auto 10px;height: 3px;width: 14px;display: block;}
#chevron:before {display:block;content: '';position: absolute;top: 0;left: 0;height: 100%;width: 48%;background: #ccc;transform: skew(0deg, 11deg);transition:.2s ease-out}
#chevron:after {display:block;content: '';position: absolute;top: 0;right: 0;height: 100%;width: 48%;background: #ccc;transform: skew(0deg, -11deg);transition:.2s ease-out}
#header .topBtn a:hover{background-color: #d8231e;color: #fff;}
#header .topBtn a:hover #chevron:before,#header .topBtn a:hover #chevron:after{background-color: #fff;}
body.fixed #header{background-color: #fff;height:80px;}
body.fixed #header ul#gnb > li > a{line-height: 80px;}

@media all and (max-width:1600px){
	#header .shopBtn,#header .topBtn{width: 80px;}
	#header select.lang{right: 100px;}
	.tsns{right: 100px}
}
@media all and (max-width:1280px){
	#header{height: 80px;}
	#header ul#gnb > li > a{ line-height: 80px;}
/* 	.tsns{padding-left: 0;width: 107px;} */
	.tsns a{padding: 5px 10px;}
	.tsns a::before{display: none;}
}
@media all and (max-width:1100px){
	#header{height: 70px;transition:none; }
	#header .topLogo{width: 90px;}
	#header .topLogo a{transition:none;padding-left: 20px;background-position: 20px center;background-size: 122px auto;}
/* 	#header .unesco{display:none;}
	#header .unesco{width: 0.1%; background:none; margin-left: 20px;}*/
	.tsns{right: calc(86px + 3.64%);}
	.tsns a{padding: 0 10px;}
	#header .topBtn{width: 30px; height: 30px; top: 50%; right: calc(3.64% + 37px); transform:translateY(-50%);}
	#header .topBtn a{font-size: 0;background: none;}
	#chevron {padding: 5px;margin: 0 auto;height: 4px;width: 9px;display: block;}
	#chevron:before {transform: skew(0deg, 15deg);background-color: #363938;}
	#chevron:after {transform: skew(0deg, -15deg);background-color: #363938}
	#header .topBtn a:hover{background:none;}
	#header .topBtn a:hover #chevron:before,#header .topBtn a:hover #chevron:after{background-color: #363938;}
	body.fixed #chevron:before,
	body.fixed #chevron:after,
	body.fixed #header .topBtn a:hover #chevron:before,
	body.fixed #header .topBtn a:hover #chevron:after{background-color: #ddd;}

	#header .shopBtn{right: calc(3.64% + 40px);width: 40px; }
	#header .shopBtn a{background: url('../img/common/mTopShop.png') no-repeat center / 17px;  transition:.2s;}
	#header ul#gnb{display:none;}
	#header .shopBtn a:hover{background-color: inherit;}
	#header .mMenuOpen{display:block; position: absolute; width: 30px; height: 30px; right: 3.64%; top: 50%; transform:translateY(-50%); background: url('../img/common/mTopMenu.png') no-repeat center / 15px; font-size: 0;  transition:.2s;}
	body.fixed #header{background-color: #0d0d0d;}
	body.fixed #header .topLogo a{background-image:url('../img/common/logo_w.png');}
	body.fixed #header .shopBtn a{background-image:url('../img/common/mTopShop_w.png');}
	body.fixed #header .mMenuOpen{background-image:url('../img/common/mTopMenu_w.png');}
	body.fixed #header select.lang{color: #fff;}
	body.fixed .tsns a#ts1{background-image: url(/design/img/common/ts_1_w.png);}
	body.fixed .tsns a#ts2{background-image: url(/design/img/common/ts_2_w.png);}
	body.fixed .tsns a#ts3{background-image: url(/design/img/common/ts_3_w.png);}


}
@media all and (max-width:450px){
/* #header .unesco{margin-left: 5px;}
.tsns{padding-left: 0;width: 90px;border-left: 0;} */
.tsns{right: calc(70px + 3.64%);width: auto;}
.tsns a{padding: 0 5px;}
#header .shopBtn{right: calc(3.64% + 30px);}
#header select.lang{right: 85px;}
}
@media all and (max-width:360px){
#header .topLogo{width: 75px;}
#header .topLogo a{background-size: 110px auto;}

}
/*********************
02) Mobile Menu
*********************/
.mMenu{position: fixed; width: 100%; background-color: #1e1e22; left: -100%; top: 0; bottom: 0; z-index:99;}
.mMenu .menuHeader{height: 70px; overflow:hidden; position: relative;}
.mMenu .menuHeader .mMenuClose{width: 30px; height: 30px; position: absolute; right: 3.64%; top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); background: url('../img/common/mTopMenu_close.png') no-repeat center / 15px; font-size: 0; outline:none;}
.mMenu .menuContent{padding: 20px 10%;}
.mMenu .menuContent > ul > li > a{font-size: 30px; line-height: 60px; font-family: 'Noto Sans KR', sans-serif;display:block;  color: #fff; transition:.2s; font-weight: 500;}
.mMenu .menuContent > ul.opacityCtl > li > a{opacity:.5;}
.mMenu .menuContent > ul.opacityCtl > li > a.ac{opacity:1;}
.mMenu .menuContent ul.depth2{padding: 10px 10px 20px;}
.mMenu .menuContent ul.depth2 li a{display:block; font-size: 18px; font-family:'Noto Sans KR', sans-serif; line-height: 40px; font-weight: 400; color: #fff;}
/*********************
03) Footer
*********************/
#footer{background-color: #0d0d0d; padding: 47px 0 55px;text-align: center;}
#footer .footLogo{margin: 0 auto;text-align: center;margin-bottom: 30px;}
#footer p.copy{color: #666;font-size: 15px;font-weight: 400; font-family: 'Fira Sans', sans-serif;line-height: 1.3;}
a.goTop{width:58px;position:fixed;bottom:80px;right:10px;cursor:pointer;display:none;z-index:99}
a.goTop span{display:block;height:56px;position:relative;text-indent:-999em;background:rgba(255,255,255,0.6);transition:.25s ease-out;position: relative;}
a.goTop span::after{display:block;content:'';border-style: solid;border-color: #222; border-width:  0 0 2px 2px  ;    padding: 6px;transform: rotate(135deg);position: absolute;top: 23px;left: 21px;transition:.25s ease-out}
a.quicks01{position:fixed; bottom:10px; right:330px;}
a.quicks02{position:fixed; bottom:10px; right:170px;}
a.quicks03{position:fixed; bottom:10px; right:10px;}

@media all and (max-width:970px){
#footer{padding-top: 35px; padding-bottom: 50px;}
#footer ul.logoList li{margin-right: 20px;}
#footer ul.logoList li a img{height: 30px;}
#footer p.copyright{font-size: 13px; margin-top: 20px;}
}
@media screen and (max-width:640px) {
a.goTop{width:39px;bottom:10px;right:5px;}
a.goTop span{height:37px;}
a.goTop span::after{padding: 6px;top: 15px;left: 12px;}
div.quicks{display:none;}
}
/*********************
04) sub Layout
*********************/
/*wrapper*/
.subWrap{/* width: 87.92592875027%; */margin-right: calc(3.64583333333% + 186px);}
/*header*/
.subHeader *{transition:.2s;}
.subHeader{padding-top: 180px; padding-bottom: 50px; padding-left: calc(3.64583333333% + 190px); }
.subHeader .subWrap{position: relative;}
.subHeader h1{font-size: 60px; line-height: 1.2;}
.subHeader h1.kdgM{letter-spacing: -2px;}
.subHeader p.navi{position: absolute; right: 0; bottom: 10px; font-size: 16px;}
.subHeader p.navi em{font-style:normal; font-weight: 500;}
/*subContent*/
.subContent{position: relative; padding-left: calc(3.64583333333% + 190px); padding-bottom: 120px;}
.subVisual{height: 0; padding-bottom: 24%; background-size:cover; background-position:left center; margin-bottom: 80px;background-repeat: no-repeat;}
.subVisual.webtoontop{background-image: url(../img/webtoon/webtoon_visual.jpg);background-position:left bottom;}
.subVisual.osmutop{background-image: url(../img/sub/ybg_osmu_visual.jpg);}
.subVisual.character{background-image:url(../img/sub/character_visual.jpg)}
.subVisual.colorbook{padding-bottom: 25.48%;background-image: url(../img/sub/colorbook_visual.jpg);margin-bottom: 0;}
.subVisual.event{background-image:url(../img/sub/event_visual.jpg)}

@media all and (min-width: 1700px){
.subVisual{padding-bottom: 400px;background-size:auto; }
.subVisual.colorbook{padding-bottom: 423px;}
.subVisual.character{padding-bottom: 423px;}
}
@media all and (min-width: 815px){
.subVisual.webtoontop{padding-bottom: 400px;background-size:auto; }
}
.pageContent{}
/*subMenu*/
.subMenu *{transition:.2s;}
.subMenu{position: fixed; left: 3.64583333333%; width: 170px; top: 100; }
.subMenu ul li a{font-size: 16px; line-height: 50px; color: #5a5a5a; transition:.2s; display:block; height: 50px;}
.subMenu ul li.on a,
.subMenu ul li a:hover{font-weight: bold; color: #000;}
.subMenu ul li a.long{line-height: 1.2; padding: 10px 0;}

@media all and (max-width:1140px){
.subWrap{width: 100%;}
.subHeader{padding-left: 3.64583333333%;}
.subHeader p.navi{position: static; margin-top: 40px;}
.subContent{padding-left: 3.64583333333%; padding-bottom: 50px;}
.pageContent{padding-right: 3.82165605096%;}
.subMenu{display:none;}

}

@media all and (max-width: 815px){
.subHeader{padding-top: 120px; padding-bottom: 40px;}
.subHeader h1{font-size: 30px;}
.subHeader p.navi{margin-top: 20px; font-size: 13px;}
.subVisual{padding-bottom: 30%; margin-bottom: 40px;}
}