@charset "utf-8";

/*
html {overflow: hidden; height: 100%;}
body {overflow: auto; height: 100%;}
*/

/* ******************** 공용 ******************** */
/* 'Noto Sans SC', sans-serif */
body {font-family:'Noto Sans SC', sans-serif; font-size:16px; font-weight:500; line-height:1.8; color:#000; word-break:break-all; letter-spacing:0;}
body * {box-sizing:border-box;}

body .ENG {font-family:'Montserrat' !important;}
body .CHA {font-family:'Noto Sans SC', sans-serif !important;}

a {color:inherit; transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;}

#gotop {
	position:fixed; right:2vw; bottom:3vh;
	display:block; cursor:pointer; 
	width:60px; height:60px; border:1px solid #e5e5e5;
	background:#fff url(../../images/common/i-gotop.png)center 16px no-repeat;
	box-shadow:0 3px 8px rgba(0,0,0,.05);
	z-index:9998;
	border-radius:10px 0 0 0;
}
#gotop:hover {
	animation:moveT .8s infinite;
}

@keyframes moveT {
	0% {background-position:center 16px;}
	50% {background-position:center 12px;}
	100% {background-position:center 16px;}
}





	/* ****** footer ******* */
	footer {position:relative; background:#021313; padding:50px 5vw; font-size:14px; color:#fff;}
	footer address {display:flex; flex-direction:row; justify-content:space-between;}
	/* footer address>* {border:1px solid red;} */
	footer address .contact {display:flex; align-items:flex-start; width:60%;}
	footer address .contact img {padding-right:50px;}
	footer address .contact div {font-weight:400;}
	footer address .contact div p b {font-weight:300;}
	footer address .contact div p span {padding-right:40px;}
	footer address .contact div p.copy {margin-top:40px; color:#5f5f5f;}
	footer address aside {width:40%; text-align:right;}
	footer address aside span {padding-left:40px; font-weight:700;}
	footer address aside a.acc {border-bottom:1px solid transparent;}
	footer address aside a.acc:hover {border-bottom:1px solid #fff;}
	
	
	
	
	
	
/* ************************ 데스크탑 (1025~) ************************ */
@media screen and (min-width: 1025px) {

	.mo {display:none !important}

	header {position:absolute; left:0; top:0; width:100%; z-index:999999; /* min-width:1400px;  */height:125px;}
	header>* {float:left;}
	header .head {width:calc(380px + 7vw); padding-left:5vw; height:100px; padding-top:30px;}
	header .head .logo {position:absolute; top:45px; z-index:99999;}
	header .head .logo a {display:block}
	header .head .logo a img {height:37px;}
	header .head h1 a .b-logo,
	header .head h1 a .w-logo {display:none;}

	header .head .lang {position:absolute; z-index:9999; right:5vw; top:50px; font-weight:700; color:#fff; width:120px;}
	header .head .lang a {display:flex; align-items:center; justify-content:center;}
	header .head .lang a span {padding-right:10px;}
	header .head .lang .lang-con {display:none; }
	header .head .lang a.on+.lang-con {display:block; }
	header .head .lang a.on+.lang-con {padding:20px; background:#fff; margin-top:10px; border-radius:20px 0 0 0; box-shadow:-5px 10px 20px rgba(0,0,0,.1);}
	header .head .lang a.on+.lang-con ul li a {color:#000; font-size:13px; justify-content:start;}
	header .head .lang a.on+.lang-con ul li a span {border-bottom:1px solid #fff; transition:.3s; letter-spacing:-.5px;}
	header .head .lang a.on+.lang-con ul li a:hover span {border-bottom:1px solid #000;}

	header aside {z-index:999998; position:absolute; right:7vw; top:30px;}
	header aside a {display:block; float:left;overflow:hidden; background-repeat:no-repeat; background-size:25px; background-position:center 0;}
	header aside a+a {margin-left:20px;}
	header aside a.login {height:45px; padding-top:25px;  background-image:url(../images/common/icon_login.html); font-size:12px;}
	header aside a.logout {padding:12px 20px; border:2px solid; border-radius:100px; font-size:13px; line-height:1; font-weight:600; background:#fff;}
	header aside a.logout:hover {background:#073e88; color:#fff; border-color:transparent;}
	header aside a.gnbView {width:40px; height:45px; background-image:url(../images/common/icon_gnbView.html);}
	
	
	
	/* ******  ******* */
	nav.pc {overflow:hidden; position:absolute; left:0; top:0; width:100%; display:flex; justify-content:center;}
	
	nav.pc .gnb>ul:after {clear:both; content:''; display:block;}
	nav.pc .gnb>ul>li {float:left;}

	header .dep2tit {
		position:absolute; top:170px; left:0;
		width:100vw; text-align:center;
		margin-left:-1vw;
		height:50px; overflow-y:hidden;
	}
	header .dep2tit.on {opacity:1;}
	header .dep2tit li {display:block; height:59px; color:#00282b; font-size:32px; font-weight:700; line-height:1; text-align:center;}

	/* 1차 */
	nav.pc .gnb a:before, nav.pc .gnb a:after {
		transition:all .3s ease !important;
		-webkit-transition:all .3s ease !important;
		-moz-transition:all .3s ease !important;
	}
	nav.pc .gnb>ul>li>a {position:relative; display:block; font-size:18px; font-weight:700; line-height:1; color:#fff; padding:52px 0;}
	nav.pc .gnb>ul>li:last-child {padding-right:0 !important;}
	
	

	/* 2차 */
	nav.pc .gnb>ul>li>ul {
		z-index:0; position:absolute; left:0; top:230px;
		width:100vw !important;
		padding:0 5vw;
		opacity:0;
		margin-left:-1vw;
		/* transition:all .5s ease !important; */
		/* -webkit-transition:all .5s ease !important; */
		/* -moz-transition:all .5s ease !important; */
		transition:none !important;
		border-top:1px solid rgba(0,0,0,.05);
	}
	nav.pc .gnb>ul>li.on>ul {z-index:1; display:flex; opacity:1; justify-content:center;}
	nav.pc .gnb>ul>li>ul>li {
		margin-top:50px;
		margin-bottom:110px;
		padding:0 50px 50px;
	}
	nav.pc .gnb>ul>li>ul>li>a {position:relative; display:inline-block; color:#00282b; font-size:18px; font-weight:700;}
	nav.pc .gnb>ul>li>ul>li.on>a {color:#00282b; border-bottom:1px solid #00282b;}
	nav.pc .gnb>ul>li>ul>li.on>a:after {opacity:1; width:100%;}
	nav.pc .gnb>ul>li>ul>li>a:hover:after {opacity:1; width:100%; background:#fff;}
	nav.pc .gnb>ul>li>ul>li>a+ul {margin-top:40px;}
	nav.pc .gnb>ul>li.mobile {display:none;}

	/* 3차 */
	nav.pc .gnb>ul>li>ul>li>ul>li+li {margin-top:5px;}
	nav.pc .gnb>ul>li>ul>li>ul>li>a {color:#000; font-size:14px; display:block; font-weight:500; position:relative; /*opacity:.5; padding-left:15px;*/}

	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; background:#00282b;}
	nav.pc .navbg .dep1 {height:125px; border-bottom: 1px solid #e5e5e5;}
	
	nav.pc:hover .navbg .dep1 {background:#00282b;}
	nav.pc:hover .gnb>ul>li>a {color:#fff;}
	
	nav.pc.on .navbg .dep1 {opacity:1;}
	nav.pc .navbg .dep2 {position:absolute; left:0; top:125px; width:100%; height:1000px; background:rgba(255,255,255,98%);}
	
	.headerH {height:125px; background:#fff;}



	


	



	/* ****** lnb ******* */
	.lnb>ul>li>a {font-size:20px; font-weight:700;}
	.lnb>ul>li+li {margin-top:40px;}
	.lnb>ul>li>ul>li+li {margin-top:5px;}
	.lnb>ul>li>ul>li>a {font-size:15px;}
	.lnb>ul>li>ul>li>a.plus {display:block; background:no-repeat right center url(../images/common/i-plus.png); background-size:11px;}
	.lnb>ul>li>ul>li.on>a.plus {background:no-repeat right center url(../images/common/i-minus.png); background-size:11px;}
	.lnb>ul>li>ul>li.on>a span {border-bottom:1px solid #000;}
	.lnb>ul>li>ul>li>ul {display:none;}
	.lnb>ul>li>ul>li.on>a+ul {display:block; padding:5px 0; background:#fff;}
	.lnb>ul>li>ul>li>a+ul {margin-top:5px;}
	.lnb>ul>li>ul>li>a+ul li+li {margin-top:10px;}
	.lnb>ul>li>ul>li>a+ul li a {font-size:14px; color:#777; font-weight:400; position:relative; padding-left:15px; line-height:1.2; display:block;}
	.lnb>ul>li>ul>li>a+ul li a:before {
		position:absolute; top:6px; left:0; width:3px; height:3px; background:#ccc; display:block; content:""; border-radius:50%;
	}
	/* .lnb>ul>li>ul>li>a+ul li.on a:before {background:#fff;} */
	.lnb>ul>li>ul>li>a+ul li a span {border-bottom:1px solid #fff; transition:.3s;}
	.lnb>ul>li>ul>li>a+ul li a span:hover {color:#000; border-bottom:1px solid #000;}
	.lnb>ul>li>ul>li>a+ul li.on a span {color:#000; border-bottom:1px solid #000 !important;}
	.lnb>ul>li:first-child>ul>li>a+ul li.on a span {color:#000; border-bottom:1px solid #fff !important;}

	/* ****** ******* */
	aside.location h2 {font-size:32px; font-weight:800;}
	aside.location ul {display:flex; margin-top:20px;}
	aside.location ul li {padding-right:25px; font-size:13px; font-weight:400; background:url(../images/common/i-arrow.png) no-repeat right; margin-right:20px;}
	aside.location ul li:first-child {font-family:'Montserrat' !important; font-weight:600;}
	aside.location ul li:last-child {background:none;}

	/* ****** contents ******* */
	/* section.contents {max-width:1520px; border:10px solid red;} */
	section.contents {display:flex; flex-direction:row-reverse;}
	section.contents .lnb {width:20%; border-left:1px solid #e5e5e5; padding:100px 4vw 120px;}
	section.contents .contents-wrap {width:calc(100% - 20%); padding:100px 5vw 120px;}
	section.contents .contents-wrap .inner-wrap {margin-top:50px;}
	

	/* 주요 고객사 */
	#layerPop {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, .6); z-index:10000000}
	#layerPop .wrap {position:absolute; left:0; top:0; display:table; width:100%; height:100%; text-align:center;}
	#layerPop .wrap .inner {display:table-cell; vertical-align:middle;}
	#layerPop .wrap .inner>div {position:relative; display:inline-block; border-radius:30px 0 0 0; overflow:hidden; background:#fff}
	#layerPop .wrap .inner>div {width:900px;}
	#layerPop .wrap .inner>div>h2 {display:block; width:100%; height:70px; padding:0 30px; line-height:70px; font-size:20px; font-weight:700; text-align:left; border-bottom:1px solid #ddd; background:#f9f9f9; color:#000;}
	#layerPop .wrap .inner>div>a {position:absolute; right:0; top:0; width:70px; height:70px; border-left:1px solid #ddd; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../images/common/i-close.png) no-repeat center;}
	#layerPop .wrap .inner>div .innerBox {padding:30px; color:#000; height:60vh; overflow-y:auto;}
	#layerPop .wrap .inner>div .innerBox ul {display:flex; flex-direction:row; flex-wrap:wrap;}
	#layerPop .wrap .inner>div .innerBox ul li {width:calc(100%/4); padding:10px;}
	#layerPop .wrap .inner>div .innerBox ul li a {height:50px; background-size:60% !important; border:1px solid #e5e5e5;}
	#layerPop .wrap .inner>div .innerBox ul li a:hover {border-color:#ccc;}
	
	.productPop .inner .innerBox img {max-width:100%;}
	.productPop .inner>div {width:900px !important;}
	.productPop .inner .innerBox {height:70vh !important;}
	


}


/* ************************ 노트북 (1025~1280) ************************ */
@media screen and (min-width:1025px) and (max-width:1280px) {
	
	/* ****** footer ******* */
	footer address {flex-wrap:wrap;}
	footer address>* {width:100% !important;}
	footer address div p.copy {margin-top:0 !important;}
	footer address aside {margin-top:20px; padding-top:20px; text-align:left; border-top:1px dotted rgba(255,255,255,.3);}
	footer address aside span {padding-right:40px; padding-left:0;}

}



/* ************************ 태블릿 이하(~1024) ************************ */
@media screen and (max-width: 1024px) {

	.pc {display:none !important}

	header {z-index:999; width:100%; left:0; top:0;}
	header .head {width:100%; height:60px; overflow:hidden; line-height:1; border-bottom:1px solid #e9e9e9;}
	header .head h1 {margin:0 !important; display:block;}
	header .head h1 a {display:inline-block; padding:20px 30px 0;}
	header .head h1 a img {display:block; height:25px; font-size:0; line-height:0;}
	header .head h1 a .b-logo,
	header .head h1 a .w-logo {display:none;}
	header .gnbView {position:absolute; top:0; right:0; display:block; height:60px; width:60px; border-left:1px solid #e9e9e9; background:url(../images/common/i-menu.jpg)no-repeat center; background-size:30px;}
	
	
	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:90%; height:100%; overflow:hidden; box-shadow:-5px 0 5px rgba(0,0,0,.2) !important; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:70px; background-color:#fff; /* border-bottom:1px solid #fff; */}
	nav.mobile .closeWrap:after {
		position:absolute; bottom:0; left:0; width:100%; height:10px; box-shadow:5px 5px 5px #ddd inset; content:"";
	}
	nav.mobile .closeWrap .gnbClose {
		position:absolute; top:0; right:0;
		display:block; width:60px; height:60px; text-align:center; background:url(../images/common/pop-x.png) center no-repeat; background-size:20px; border-left:1px solid rgba(0,0,0,.1);
	}
	nav.mobile .closeWrap {display:flex; flex-direction:row; padding-left:30px;}
	nav.mobile .closeWrap .btn {padding:20px 0; color:#000; font-size:12px; font-weight:500; margin-right:10px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.6);}
	
	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left; background:#fff;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:15px 30px; font-size:16px; font-weight:700; color:#00282b; background:#fff; border-bottom:1px solid #e9e9e9; transition:.8s; position:relative;}
	nav.mobile .gnb>ul>li.on>a {color:#fff; background:#00282b;}
	nav.mobile .gnb>ul>li.on>a:before {display:block;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li>a {
		display:block; padding:10px 30px; font-size:15px; color:#333; font-weight:500;
		background:#f5f5f5; border-bottom:1px dotted #ddd;
	}
	nav.mobile .gnb>ul>li>ul>li>ul>li>a {
		display:block; padding:10px 50px; font-size:15px; color:#777; font-weight:500;
		background:#fff; border-bottom:1px dotted #ddd; position:relative;
	}
	nav.mobile .gnb>ul>li>ul>li>ul>li>a:before {
		position:absolute; top:50%; left:30px; width:10px; height:1px; background:#ccc; content:"";
	}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}


	





	/* ****** lnb ******* */
	.lnb {display:none;}
	
	aside.location {margin-bottom:20px;}
	aside.location h2 {font-size:32px; font-weight:800;}
	aside.location ul {display:flex; margin-top:20px;}
	aside.location ul li {padding-right:25px; font-size:13px; font-weight:400; background:url(../images/common/i-arrow.png) no-repeat right; margin-right:20px;}
	aside.location ul li:last-child {background:none;}
	
	/* ****** footer ******* */
	footer address {flex-wrap:wrap; font-size:12px;}
	footer address>* {width:100% !important;}
	footer address div p.copy {margin-top:0 !important;}
	footer address aside {margin-top:20px; padding-top:20px; text-align:left; border-top:1px dotted rgba(255,255,255,.3);}
	footer address aside span {padding-right:40px; padding-left:0;}


	/* ****** contents ******* */
	body>.contents {clear:both; padding:30px 30px 50px;}
	body>.contents .dep3tab {position:relative; margin:-50px 0 50px -20px; width:calc(100% + 40px); }
	body>.contents .dep3tab h3 {position:relative; height:50px; font-size:16px; font-weight:700; color:#000; line-height:1; padding:17px 0 15px 20px; border-bottom:1px solid #e5e5e5; cursor:pointer;}
	body>.contents .dep3tab h3.on {background:#1862b6; color:#fff;}
	body>.contents .dep3tab h3:after {content:">"; position:absolute; right:20px; top:18px; transform:rotate(90deg); font-size:14px; font-weight:300}
	body>.contents .dep3tab h3.on:after {transform:rotate(-90deg);}
	body>.contents .dep3tab>ul {display:none; width:100%; left:0; top:50px; box-shadow:0 5px 5px rgba(0,0,0,.05);}
	body>.contents .dep3tab li {display:block; margin:0;}
	body>.contents .dep3tab a {display:block; position:relative; padding:15px 35px; color:#000; background:#fff; font-size:16px; line-height:1.3; border-radius:0; border-bottom:1px solid #e5e5e5;}
	body>.contents .dep3tab li.on a {color:#1862b6;}
	body>.contents .dep3tab li.on a:before {content:""; width:3px; height:3px; background:#1862b6; position:absolute; left:25px; top:25px; border-radius:50%;}


	/* 주요 고객사 */
	#layerPop {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, .6); z-index:10000000}
	#layerPop .wrap {position:absolute; left:0; top:0; display:table; width:100%; height:100%; text-align:center;}
	#layerPop .wrap .inner {display:table-cell; vertical-align:middle; padding:0 30px;}
	#layerPop .wrap .inner>div {position:relative; display:inline-block; border-radius:30px 0 0 0; overflow:hidden; background:#fff}
	#layerPop .wrap .inner>div {width:100%;}
	#layerPop .wrap .inner>div>h2 {display:block; width:100%; height:70px; padding:0 30px; line-height:70px; font-size:20px; font-weight:700; text-align:left; border-bottom:1px solid #ddd; background:#f9f9f9; color:#000;}
	#layerPop .wrap .inner>div>a {position:absolute; right:0; top:0; width:70px; height:70px; border-left:1px solid #ddd; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../images/common/i-close.png) no-repeat center;}
	#layerPop .wrap .inner>div .innerBox {padding:30px; color:#000; height:50vh; overflow-y:auto;}
	#layerPop .wrap .inner>div .innerBox ul {display:flex; flex-direction:row; flex-wrap:wrap;}
	#layerPop .wrap .inner>div .innerBox ul li {width:calc(100%/3); padding:10px;}
	#layerPop .wrap .inner>div .innerBox ul li a {height:50px; background-size:60% !important; border:1px solid #e5e5e5;}
	
	.productPop .inner .innerBox img {max-width:100%;}
	.productPop .inner>div {width:100%;}
	
}





/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width:767px) {
	
	
	/* ****** footer ******* */
	footer address .contact {flex-wrap:wrap;}
	footer address .contact div {width:100%; margin-top:20px;}
	
	
	/* 주요 고객사 */
	#layerPop .wrap .inner>div .innerBox ul li {width:calc(100%/2);}
	
}