@charset "utf-8";

.header-slider-ovclick{position:fixed;z-index:2600;width:100%;min-height:100%;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }

/* =====================================
   header-wrap
==================================== */
#header-wrap {width:100%; position:fixed; z-index:6000;}
#header-wrap:after{position:absolute; left:0; width:100%; top:0; height:100%; display:block; content:""; background:none; box-sizing:border-box; /*border-bottom:1px solid rgba(208,208,208,1);*/ z-index:-1;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
#header-wrap{box-shadow: 0 4px 8px rgba(0,0,0,0);}
#header{position:relative; height:60px;}

#logo{
	width:150px; 
	height:40px; 
	left:10px; 
	top:10px; 
	background:url(../images/common/logo.png) no-repeat left center; 
	background-size:100%; 
	position:absolute; 
	z-index:7001;
}
#logo a{display:block; height:100%;}

#gnb-wrap{display:none;}

#header .bt-mnall {position:absolute;display:block;z-index:2599; width:30px; height:30px; right:1rem; top:1rem;}


#header .bt-mnclose {position:absolute;right:0;top:50%;margin-top:-25px;width:50px;height:50px; z-index:5400;border:0;}
.bt-mnall span, .bt-mnclose span {background:rgba(255,255,255,0.5);  width: 20px;height: 2px;display: block;margin: 7px 0;border-radius: 35px; transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);}
#header-wrap.fix #header .bt-mnall span, .bt-mnclose span {background:rgba(255,255,255,0.6)}
#header-wrap.fix {background:rgba(0,0,0,0.7); box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.bt-mnclose span {background:rgba(0,0,0,0.7)}
.bt-mnall span:last-of-type { position: relative;width: 15px;margin-top: 0;transform: translateX(15px)}
.bt-mnall span:nth-of-type(2) {position: relative;width: 30px;opacity: 1;}
.bt-mnall span:first-of-type {width: 20px;margin-top: 0;transition: all 0.6s;transform: translateX(10px);}

.bt-mnclose span:nth-of-type(2) {position: relative;width: 40px;opacity: 0;}
.bt-mnclose span:first-of-type {width: 40px;margin-top: 12px;transition: all 0.6s; transform: rotate(-45deg) translate(-4px, 8px);}
.bt-mnclose span:last-of-type { position: relative;width: 40px;margin-top: 0;transform: rotate(45deg) translate(-4px, -8px);}


#header .bt-mnclose {position:absolute;right:0;top:50%;margin-top:-27px;width:54px;height:54px; z-index:5400;border:0;background:url(../images/common/bt-mnclose.png) no-repeat center center;}
#mainNavi-wrap{position:relative; text-align:left;}
#mainNavi {position:relative}		
#mainNavi.mn-h-open {right:0;}
.tm-top{position:relative;}
.tm-top h2{ background:#fff url(../images/common/logo-black.png)no-repeat 15px center; background-size:154px auto; height:70px; border-bottom:1px solid #e6e6e6}
		
.tm-gnb{background:#f8f8f8}
.tm-gnb ul{text-align:center; overflow:hidden; padding:0;border-bottom:1px solid #e6e6e6}
.tm-gnb li{float:left; width:50%; position:relative;}
.tm-gnb li a{display:block; padding:10px 0; font-size:13px;text-transform:uppercase; color:#555; font-weight:400;}
.tm-gnb li:nth-child(1) {border-right:1px solid #e6e6e6;}
.tm-gnb li:nth-child(1) a:before{content:"\f3c5"; font-family: 'Line Awesome Free'; font-weight: 900; font-size:18px; display:inline-block; margin-right:5px; vertical-align:middle;}



/*상단 기타메뉴*/
.etcNavi {position:fixed; width:100%; height:40px;  top:0; left:0; background:#f5f5f5; z-index:5002}
.etcNavi ul {height:100%; display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center; gap:1rem}
/*.etcNavi ul li { position:relative; width:30%; height:100%;  display:inline-block; vertical-align:middle;  text-align:center; color:#fff}
*/
.etcNavi ul li a {display:flex; height:100%; justify-content:center; align-items:center;}
/*.etcNavi .hybean {display:flex; width:200px}*/
.etcNavi .hybean a:before {
	content:"";
	width:60px;
	height:20.6px;
	background-color:#2dc456;
	color:#2dc456;
	-webkit-mask-image: url('/images/common/happybean-w.svg');
	mask-image: url('/images/common/happybean-w.svg');
	/*flex:2 1 0;*/

}



.etcNavi .hybean a {/*width:130px; padding:0;*/ justify-content:flex-start; gap:4px}
.etcNavi .hybean a img {width:50px}
.etcNavi .hybean a span{display:inline-block; color:#2dc456;}

.etcNavi ul li.snsLink {display:flex; gap:3px}
.etcNavi ul li.snsLink a {
	background-repeat:no-repeat; 
	background-size:64%; 
	background-position:center center; 
	width:36px; 
	height:36px;
	border-radius:100%;
}
.snsLink a:nth-of-type(1) {background-color:#4468b1; background-image:url("/images/common/facebook.svg");}
.snsLink a:nth-of-type(2) {background-color:#ffe800; background-image:url("/images/common/kakao.svg");}

.topmenu {width:100%;display:block;position:relative;}
.topmenu:after {display:block;content:"";clear:both;}
.topmenu li {line-height:1.3em;position:relative;text-transform:uppercase}
.topmenu a {position:relative;}
.topmenu .mn-txt{display:none;}

.topmenu .has-sub .tgl-btn {padding:0;display:block;width:20px;height:20px;position:absolute;right:15px;top:8px;border:0;z-index:100;text-indent:-9999em;background:transparent;}
.topmenu .has-sub .tgl-btn:before {content:'';position:absolute;left:0;top:50%;width:60%;height:1px;background:#777;transform: rotate(45deg);}
.topmenu .has-sub .tgl-btn:after {content:'';position:absolute;right:0;top:50%;width:60%;height:1px;background:#777;transform: rotate(-45deg);}
.topmenu .mn_l1 > .tgl-btn {right:15px;top:16px;}
.topmenu .mn_l1.is-open > .tgl-btn:before, .topmenu .mn_l1.over > .tgl-btn:before {left:2px;transform: rotate(0);}
.topmenu .mn_l1.is-open > .tgl-btn:after, .topmenu .mn_l1.over > .tgl-btn:after {right:2px;transform: rotate(0);}
.topmenu .mn_l2 > .tgl-btn {width:16px;height:16px;right:12px;top:16px;}
.topmenu .mn_l2 > .tgl-btn:before, .topmenu .mn_l2 > .tgl-btn:after {height:1px;}
.topmenu .mn_l2.is-open > .tgl-btn:before, .topmenu .mn_l2.over > .tgl-btn:before {transform: rotate(0);}
.topmenu .mn_l2.is-open > .tgl-btn:after, .topmenu .mn_l2.over > .tgl-btn:after {transform: rotate(0);}

.topmenu .mn_a1 {
	font-family: var(--sub--title-font); 
	position:relative;
	display:block;
	border-bottom:1px solid #e6e6e6;
	}

.topmenu .over .mn_a1 span, .topmenu  .mn_a1:hover span {color:#111;}

.topmenu .has-sub .is-ico {padding:0;display:block;width:30px;height:30px;position:absolute;right:0px;top:3px;border:1px solid red;}

.topmenu li > div {display:none; opacity:0;}
.topmenu .depth2-wrap {position:relative; width:auto !important}
.topmenu .depth2 {position:relative;background:#f6f6f6;padding:12px 0;border-bottom:1px solid #e6e6e6;}
.topmenu .depth2:after {clear:both;content:"";display:block}
.topmenu .depth2 a {font-size:14px;line-height:1.3em;display:block;}
.topmenu .depth2 .mn_l2:last-child{border-bottom:none}
.topmenu .depth2 .mn_l2.first , .topmenu .depth2 .mn_l2:first-child {border-top:0px}
.topmenu .depth2 .mn_a2 {display:block;padding:6px 45px 6px 17px; position:relative;}
.topmenu .depth2 .mn_a2 span.img{display:none;}
.topmenu .depth2 .mn_a2 span {font-size:14px;font-weight:300;cursor:pointer;color:#444;transition: all 0.2s;}
.topmenu .depth2 .mn_a2:hover span, .topmenu .depth2 .over .mn_a2 span{color:#333; font-weight:700; text-decoration:none; transition: all 0.2s;}
.mn-bar {display:none;}


#header-wrap.isOver #gnb-wrap li a{color:#111}
#header-wrap.isOver #gnb-wrap {background:rgba(255,255,255,0.8);box-shadow: 0 4px 8px rgba(0,0,0,0.1);}


		
#gnb-wrap{display:block; position:absolute; z-index:3009; width:100%; background:rgba(0,0,0,0.8)}
#gnb-wrap>.gnb-menu {position:relative; width:100%; margin:0 auto; padding-right:200px}
#gnb-wrap>.gnb-menu ul.grobal {float:left; /*overflow:hidden*/}
#gnb-wrap>.gnb-menu>ul.grobal>li{float:left; }
#gnb-wrap>.gnb-menu>ul.grobal>li:last-child {display:none;}
#gnb-wrap>.gnb-menu>ul.grobal>li>a{display:block; color:#bbb; line-height:40px; font-size:14px;}
#gnb-wrap>.gnb-menu>ul.grobal>li:first-child {margin-right:0px; padding:0 6px; border-left:1px solid #39393a; border-right:1px solid #39393a;}
#gnb-wrap>.gnb-menu>ul.grobal>li:first-child>a{background:url(../images/common/ci.png) no-repeat left center;  padding-left:25px; background-size:22.5px}
#gnb-wrap>.gnb-menu>ul.grobal>li:last-child>a:before {content:"\f219"; font-family: 'Line Awesome Free'; font-weight: 900; font-size:16px; display: inline-block; vertical-align:middle; margin-right:5px}
#gnb-wrap>.gnb-menu>ul.sns {position:absolute; right:0}
#gnb-wrap>.gnb-menu>ul.sns>li{float:left;width:40px; height:40px; line-height:40px;background-size:100% !important;}
#gnb-wrap>.gnb-menu>ul.sns>li>a {display:block;  text-indent:-999999px;}
#gnb-wrap>.gnb-menu>ul.sns>li.insta {background:url('../images/common/insta.png') no-repeat;}
#gnb-wrap>.gnb-menu>ul.sns>li.blog {background:url('../images/common/blog.png') no-repeat;}
#gnb-wrap>.gnb-menu>ul.sns>li.facebook {background:url('../images/common/facebook.png') no-repeat;}
#gnb-wrap>.gnb-menu>ul.sns>li.kakaostory {background:url('../images/common/kakaostory.png') no-repeat;}




	

	@media only screen and (max-width:999px) { /* mobile menu css style */
	#mainNavi {position:fixed;background:#fff;transition:right 0.3s ease;z-index:7002;right:-280px;overflow-y:auto;overflow-x:hidden;top:0px;width:240px;height:100%;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;	transition: all 0.2s ease-out;}
	.topmenu .mn_a1 span {display:block;padding:17px 30px 17px 20px;overflow:hidden;font-size:15px;letter-spacing:-0.01em;white-space:normal;cursor:pointer;color:#333;}
		
	}




/* 메뉴부분 */
	@media only screen and (min-width:1000px){  /* web menu css style */
	    #doc {max-width:1200px;}
		.div-cont{max-width:1400px; margin:0 auto;}
		
		#mainNavi-wrap {overflow:hidden;position:absolute;left:0;top:25px;width:100%; height:auto;  display:block;z-index:6001; /*box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/}
		#mainNavi-wrap .tmn-tit {display:none;}
		#header {height:100px;}
		#mainNav {position:relative;}
		#header .bt-mnall {display:none;}
		.tm-top, .tm-gnb{display:none;}
		.etcNavi ul{max-width:var(--container); margin:0 auto}
		.etcNavi ul li,.etcNavi .hybean {width:auto}
		#logo {top:50%; transform:translateY(-50%); width:180px; height:48px; background:url(../images/common/logo.png) no-repeat left center; background-size:100%;}
		.topmenu {display:block;position:relative;text-align:center; font-size:0; padding: 0 100px 0 150px}
		.topmenu:after {display:block;content:"";clear:both;}
		.topmenu .tgl-btn {display:none;}
		.topmenu .has-sub .tgl-btn{display:none;}
		.topmenu .mn_a1 {
			line-height:1.35em;
			display:block; 
			text-align:center;
			padding:15px 1.00em; 
			position:relative; 
			overflow:hidden;
			color:#fff;
			font-size:17px;
			letter-spacing:-0.02em;
			cursor:pointer;
			text-align:center;
			white-space:nowrap; 
			border:none
		}
		
		.topmenu .mn_l1 {display:inline-block;position:relative;}
		.topmenu li.mn_l1.over .mn_a1, .topmenu li.mn_l1 .mn_a1:hover{color:#01b4e5}
		
		.topmenu .depth2-wrap {position:absolute;top:70px;display:none;visibility:hidden;padding:0; width:100%; left:50%; transform:translateX(-50%);}
		.topmenu .depth2 {position:relative;height:auto;padding:15px 10px 15px 24px;overflow:hidden; background:none; border:none}
		.topmenu .depth2 li {letter-spacing:-1px;width:auto; display:block; margin-top:3px}
		.topmenu .depth2 li:firs-child{margin-top:0;}
		.topmenu .depth2 .mn_l2 {text-align:left;}
		.topmenu .depth2 .mn_a2 {cursor:pointer;display:block; padding:5px 0;line-height:1.3em; text-align:center; position:relative; font-size:14px;letter-spacing:-0.02em;color:#111;white-space:nowrap;}
		.topmenu .depth2 .mn_a2 span {font-size:16px;font-weight:400; letter-spacing:-0.05em}
		.topmenu .depth2 .over .mn_a2 ,.topmenu .depth2 .mn_a2:hover,.topmenu .depth2 .mn_a2:focus, .topmenu .depth2 .mn_a2:active {color:#01b4e5;font-weight:400; text-decoration:none}
		.topmenu .depth2 .is-over .mn_a2 span,topmenu .depth2 .over .mn_a2 span {color:#01b4e5;font-weight:400;text-decoration:none}
		
		#mainNavi-wrap .ovbar {position:absolute;height:14px;top:63px;display:block;overflow:hidden; height:12px; display:block;}
		#mainNavi-wrap .ovbar:after {position:absolute;bottom:0;left:50%;margin-left:-45%;background:#258cc5; height:3px;content:"";display:block;z-index:200; width:90%}

		.mn-bar{background:#fff; position:absolute;  width:100%; left:50%; top:100px; transform:translateX(-50%); border-bottom:1px solid #ccc}
		
		#header-wrap.isOver:after{border-bottom:1px solid #dedede; background:#fff;}
		#header-wrap.isOver #logo{background:url(../images/common/logo-black.png) no-repeat center center; background-size:100%}
		#header-wrap.isOver .topmenu .mn_a1 {color:#111}
		#gnb-wrap>.gnb-menu  {max-width:1200px;}
		#gnb-wrap>.gnb-menu ul.grobal {float:right;}
		#gnb-wrap>.gnb-menu>ul.grobal>li:first-child {margin-right:12px; padding:0 12px;}
		#gnb-wrap>.gnb-menu>ul.grobal>li:last-child {display:block;}
		#gnb-wrap>.gnb-menu>ul.grobal>li:first-child>a{background:url(../images/common/ci.png) no-repeat left center;  padding-left:40px; background-size:36px}

	}
	@media only screen and (min-width:1200px){  
		.topmenu {padding: 0 60px 0 200px}
		.topmenu .mn_a1 {padding:15px 1.5em; font-size:17px}
		#logo {width:210px; height:56px}

	}

	@media only screen and (min-width:1400px){  

		.topmenu .mn_a1 {padding:15px 1.725em; font-size:20px}

	}

	@media only screen and (min-width:1600px){ 
		.topmenu {text-align:center; padding: 0 60px 0 16%}
		.topmenu .mn_a1 {padding:15px 1.825em; }
		.topmenu .depth2 {padding:15px 10px 15px 10px;}
	}


 
	/*검색*/
	.other{display:block;/* position:absolute; width:300px; top:0; right:0; z-index:9005;*/}
	.sch-menu { position:absolute; right:60px; top:15px; z-index:6005; display:inline-block; font-size:18px; color:#fff; /*padding:40px 35px;*/ height:35px; line-height:35px;}
	.sch-menu:before {display:block; font-family: 'Line Awesome Free';font-weight: 900;content:"\f002"; font-size:24px; line-height:30px; color:#263997;transform: rotate(-90deg);}
	.sch-menu-close{position:absolute;  z-index: 4500; right:10px; bottom:10px; width:50px; height:50px; padding:10px; background:#fff; line-height:50px; color:#333;  text-align:Center; font-size:14px; }
	.sch-menu-close span {background: #333;  width: 20px;height: 2px;display: block;margin: 7px 0;border-radius: 35px; transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);}
	.sch-menu-close span:nth-of-type(2) {position: relative;width: 40px;opacity: 0;}
	.sch-menu-close span:first-of-type {width: 40px;margin-top: 12px;transition: all 0.6s; transform: rotate(-45deg) translate(-4px, 8px);}
	.sch-menu-close span:last-of-type { position: relative;width: 40px;margin-top: 0;transform: rotate(45deg) translate(-4px, -8px);}

    .searchW {display:none; position: absolute; top:120px; z-index: 9100; width:100%;  max-width: 1200px; left: 50%; transform: translateX(-50%); background: #fff url() left bottom no-repeat; padding: 2em 3em 4em 3em; border: 1px solid #666;;box-shadow:0 0 8px 0 rgba(0,0,0, .3);transition: all 1s;}
	
	.layer-slider-ovclick{position:fixed;z-index:2600;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }
	
	/*검색*/
	.schBOX {min-height:40px; top:26px}
	.schBOX>.searchForm {max-width:1200px; margin:0 auto; padding:17px 0; text-align:center}
	.schBOX>.searchForm>form {display:flex; flex-wrap:wrap}
	.schBOX>.searchForm>form>div {width:100%; display:inline-block; border-bottom:1px solid #333; margin-bottom:1em}
	.schBOX>.searchForm>form>div:nth-child(2) {margin-bottom:2em}
	.searchForm input,.searchForm select {background:none; }
	.searchForm input[type=text],.searchForm input[type=search] {width:100%; min-width:300px; border:0}
	.searchForm select {
		width:100%; 
		border:0;
		border-radius: 0px; /* iOS 둥근모서리 제거 */ 
		-webkit-appearance: none; /* 네이티브 외형 감추기 */ 
		-moz-appearance: none; 
		appearance: none;
		background: url('../images/common/select_icon.png')  no-repeat;
		background-position: center right;
		}
	.searchForm .search {border:1px solid #333; background:none; display:block; width:100%; padding:0.666em 0 0.666em 0}
	.searchForm .search:hover {background:#333; color:#fff}
	
@media only screen and (min-width:1000px){ 
.sch-menu {right:0; top:25px; padding:15px; color:#666}
.sch-menu:before {font-size:32px; line-height:32px}
}

@media only screen and (min-width:1100px){ 

.sch-menu {right:1em;}

}

@media only screen and (min-width:1400px){ 
    
	.searchW {padding: 3em 4em 5em 4em;}
	.schBOX>.searchForm>form {flex-wrap:nowrap; justify-content:space-between}
	.schBOX>.searchForm>form>div:nth-child(1) {width:30%;margin-bottom:0}
	.schBOX>.searchForm>form>div:nth-child(2) {width:50%;margin-bottom:0}
	.searchForm .search {width:15%}

}




/*언어선택*/
.lang{display:none; position:absolute; right:30px; top:40px; z-index:9005}
.lang a {display:inline-block;  height:100%; text-align:center; line-height:40px; -webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.lang > .btn-lang {position:relative; padding:0 10px}
.lang > .btn-lang span {display: inline-block;vertical-align: top;padding: 0 24px 0 5px;font-weight: 400;}
.lang a:before {display:inline-block; font-size:16px; line-height:0; vertical-align:middle}
.lang > .btn-lang:hover, .lang.active .btn-lang {}
.lang > .btn-lang:after{font-family: 'Line Awesome Free';font-weight: 900;content:"\f107";  position:absolute; right:15px; top:0%; margin-top:-1px; display:block; }
.lang.active .btn-lang:after {transform: rotate(180deg); }




.lang .langInfobox{width:100%; position:absolute; z-index:9005; top:40px; left:0; height:0; overflow:hidden; }
.lang ul.langInfo {border:1px solid #ebebeb;}
.lang ul.langInfo.active{display:block;}
.lang ul.langInfo li a {display:block; width:100%; background:#fff; line-height:30px; color:#666; text-align:center; font-size:12px}
.lang ul.langInfo li a:hover {color:#FFF; transition: all 0.2s;}
.lang ul.langInfo li a:hover {background:#555; }



@media only screen and (min-width:1000px){
.lang{display:block; right:30px; top:35px;}
}

@media only screen and (min-width:1100px){
.lang{right:70px; }
}

@media only screen and (min-width:1600px){
.lang{right:5%; }
}


.twodepth{position:absolute; bottom:0; width:100%;  left:50%;transform:translateX(-50%); /*background:rgba(0,0,0,1); border-top:1px solid rgba(255,255,255,0.2); text-align:center*/}
.twodepth>div{position:relative; max-width:1400px; background:rgba(0,0,0,0.8); margin:0 auto; overflow:hidden; overflow-x: auto; white-space: nowrap;}
.twodepth ul {text-align:center}
.twodepth ul li {display:inline; margin:0}
.twodepth ul li a {display:inline-block; position:relative; line-height:50px; padding:0 1.2em; color:#cdcdcd; font-weight:300; text-align:center; -webkit-transition: all 0.2s; transition: all 0.2s; }

/*.twodepth ul li a:before {position: absolute; left: 50%; top: 0; width: 0; height:2px; background-color: #fff; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }
.twodepth ul li a:hover:before,.twodepth ul li.active a:before{ left: 0; width: 100%; }*/

.twodepth ul li.active a {background:#25378e; color:#fff}
/*.twodepth ul li.active a:after {content:"\f0ab"; font-family: 'Line Awesome Free'; font-weight: 900; font-size:24px; position:absolute; right:0.333em; top:50%; transform: translateY(-50%); }*/
.twodepth ul li a[target="_blank"]:after {content:"\f35d"; font-family: 'Line Awesome Free'; font-weight: 900; font-size:18px; line-height:0; display: inline-block;  margin-left:5px}


@media only screen and (min-width:1200px){
.twodepth ul li a:hover {background:#25378e; -webkit-transition: all 0.2s; transition: all 0.2s;}
.twodepth ul {display:flex; justify-content:center}
.twodepth ul li a {display:block; line-height:60px; font-size:18px}
.twodepth ul li {margin:0}
.twodepth ul.col03 li {display:inline-block; width:33.333%}
.twodepth ul.col04 li {display:inline-block; width:25%}
.twodepth ul.col06 li {display:inline-block; width:16.666%}

}