@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html {overflow: hidden; height: 100%;} */
/* body {overflow: auto; height: 100%;} */


/* ************************ 셋팅 ************************ */
:root {
	--f_Pretendard:'Pretendard';
	
	--base1:#EC1B23;
	--gray:#D9D9D9;
	--ftgray:#777;
	--border1:#DDD;
	--border2:#F4F4F4;
	--border3:rgba(0,0,0,15%);
	
	--shadow:20px 20px 20px 10px rgba(0, 0, 0, 0.10);
	--shadow2:20px 20px 15px 0px rgba(0, 0, 0, 0.10);
	--shadow3:30px 30px 20px 0px rgba(0, 0, 0, 0.15);
	--ani:all .3s;
	
	--fs12:1.2rem;
	--fs14:1.4rem;
	--fs15:1.5rem;
	--fs16:1.6rem;
	--fs18:1.8rem;
	--fs20:2rem;
	--fs22:2.2rem;
	--fs24:2.4rem;
	--fs25:2.5rem;
	--fs26:2.6rem;
	--fs28:2.8rem;
	--fs30:3rem;
	--fs32:3.2rem;
	--fs36:3.6rem;
	--fs40:4rem;
	--fs43:4.3rem;
	--fs45:4.5rem;
	--fs48:4.8rem;
	--fs50:5rem;
	--fs55:5.5rem;
	--fs60:6rem;
	--fs70:7rem;
	
}

@media (max-width: 1200px) {
	:root {
		--fs30:2.6rem;
		--fs36:3rem;
		--fs40:3.6rem;
		--fs20:1.8rem;
		--fs24:2.1rem;
		--fs70:5.5rem;
	}

}

@media (max-width: 767px) {
	:root {
		
		--fs20:1.6rem;
		--fs24:1.9rem;
		--fs26:2rem;
		--fs30:2.2rem;
		--fs40:2.6rem;
		--fs45:3.6rem;
		--fs50:3.6rem;
		--fs60:3.6rem;
		--fs70:4rem;
		
	}

}


@media (max-width: 500px) {
	:root {
		--fs32:2.4rem;
		--fs36:2.2rem;
		--fs40:2.4rem;
		--fs45:3rem;
		--fs50:2.4rem;
		--fs60:3.4rem;
		--fs70:3.6rem;
	}

}






html {font-size:0.625rem;}
html body {font-family:var(--f_Pretendard), sans-serif; font-size:var(--fs18); font-weight:400; line-height:1.6; color:#000; word-break:keep-all; overflow-x:hidden;}


a {text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important; transition:var(--ani);color:inherit;}
a:link, a:visited, a:hover, a:active {text-decoration:none; color:inherit;}
a,img,i,button {transition:all .5s ease;-webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

.w1200 {max-width:1200px; margin:0 auto!important;width:100%;}
.w1400 {max-width:1400px; margin:0 auto!important;width:100%;}
.w1600 {max-width:1600px; margin:0 auto!important;width:100%;}

.scroll-y::-webkit-scrollbar {height:3px; width:10px;}
.scroll-y::-webkit-scrollbar-thumb {background-color:#999; border-radius:5px;}
.scroll-y::-webkit-scrollbar-track {background-color:#ccc; border-radius:5px;}

/* lnb 배경 */
.sub-visual {position:relative; width:100%; height:740px; background-color:#000;}
.sub-visual .cover {position:absolute; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4);}
.sub-visual.company {background:url(/images/common/lnb-company.webp) no-repeat center top / cover;}

.sub-visual.equipment {background:#000 url(/images/common/lnb-equipment.webp) no-repeat center top / cover;}
.sub-visual.material {background:#000 url(/images/common/lnb-business.webp) no-repeat center top / cover;}
.sub-visual.performance {background:#000 url(/images/common/lnb-performance.webp) no-repeat center top / cover;}

.sub-visual.pr {background:#000 url(/images/common/lnb-pr.webp) no-repeat center top / cover;}
.sub-visual.support {background:#000 url(/images/common/lnb-support.webp) no-repeat center top / cover;}

/* lnb 텍스트 */
.sub-visual .sub-visual-wrap {position:absolute; display:table; max-width:1400px; height:250px; left:50%; transform:translateX(-50%); width:100%;}
.sub-visual .sub-visual-text {display:flex; flex-direction:column; justify-content:center; height:100%; padding-top:235px; box-sizing:border-box;}
.sub-visual .sub-visual-text span {font-size:var(--fs16); font-weight:200; letter-spacing:1; color:#fff; text-align:left; z-index:5; position:relative;}
.sub-visual .sub-visual-text p {font-size:var(--fs50); line-height:1.2; font-weight:700; color:#000; text-align:left; position:relative; color:#fff; margin-top:20px;}

/* 브레드 크럼 */
.site-route {display:flex; justify-content:flex-end; margin-top:80px !important;}
.site-route>p {font-weight:700; font-size:24px; position:relative; height:100%; display:flex; align-items:center; justify-content:center; border-top:5px solid var(--base1); box-sizing: border-box;}
.site-route ul {display:flex; align-items:center; font-size:14px; font-weight:500; opacity:0.7; color:#888; list-style: none;}
.site-route ul li {position:relative;}
.site-route ul li img {transform:translateY(-2px)}
.site-route ul li+li {padding-left:25px;}
.site-route ul li+li:before {content:""; display:block; width:1px; height:8px;  position:absolute; top:7px; left:12px; background:#888; transform:rotate(-45deg);}

.breadcrumb {position:relative; }
.page-name-wrap {}
.page-name {list-style:none; margin:0; padding:0;}
.page-name li:nth-child(1) {font-size:30px; font-weight:700; color:#000;}


/* 콘텐츠 */
.contents .contentsWrap {padding:140px 0;}



/* 푸터 */
footer {position:relative; padding:6.5vw 7.81vw; padding-bottom: 10vw; background:url(/images/common/footer_bg_2.jpg) no-repeat center / cover; color:#666; font-size:16px; z-index:5; font-weight:400;}
footer:before {position:absolute; content:""; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:-1;}
footer .footer-info {display:grid; grid-template-columns:auto auto; justify-content: space-between; color:#fff;}
footer .footer-info .navWrap>ul {display:grid; grid-template-columns:auto auto auto auto; gap:6.25vw; margin-right:80px;}
footer .footer-info .navWrap>ul>li {padding-right:0 !important;}
footer .footer-info .navWrap>ul>li>a {font-size:20px; font-weight:600;}
footer .footer-info .navWrap>ul>li>ul {margin-top:30px; font-size:15px;}
footer .footer-info .navWrap>ul>li>ul>li>a {line-height:2; font-weight:300;}
footer .footer-info .infoWrap ul li:nth-child(1) {display:grid; grid-template-columns:auto auto; justify-content: space-between; padding-bottom:25px;}
footer .footer-info .infoWrap ul li:nth-child(1) h3 {font-size:20px;}
footer .footer-info .infoWrap ul li:nth-child(1) a {font-size:15px;}
footer .footer-info .infoWrap ul li:nth-child(1) a+a {margin-left:30px;}
footer .footer-info .infoWrap ul li:nth-child(2) {display:grid; grid-template-columns:auto auto; gap:100px; font-size:15px; font-weight:300;}
footer .footer-info .infoWrap ul li:nth-child(2) p {font-weight:600;}
footer .footer-info .infoWrap ul li:nth-child(3) {font-size:13px;}
footer .footer-info .infoWrap ul li:nth-child(3) a {margin-left:20px;}
footer .footer-info .infoWrap ul li+li {padding:25px 0; border-top:1px solid rgba(255,255,255,.15);}

/*** 전체메뉴팝업 ***/
.popAllMenu {z-index:99999; position:fixed; top:0; right:0; width:100%; height:100%; display:flex; align-items: stretch; justify-content:flex-end;  color:#fff; background: #000; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;}

.popAllMenu.on {opacity:1; visibility:visible;}
.popAllMenu.on .popContent {transform:translateX(0); opacity:1;}
.popAllMenu.off {opacity:0; visibility:hidden;}
.popAllMenu.off .popContent {transform:translateX(50px); opacity:0;}

.popAllMenu .popContent .close {
	z-index:999; position:absolute; top:50px; right:50px; text-indent:-9999px; width:50px; height:50px; border-radius:8px; border:2px solid rgba(255,255,255,.3); background:url(../images/common/i_colose.png) no-repeat center/50%; cursor:pointer;
}
.popAllMenu .popContent .close:hover {border:2px solid #fff;}

.popAllMenu .popContent {position:relative; 
	width:45%; /*height:100%;*/ background:var(--base1); transform:translateX(50px); opacity:0; transition:transform .5s ease .2s, opacity .5s ease .2s; padding:100px; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 100px;
}
.popAllMenu .popContent .etc {display:flex; justify-content: space-between; width: 100%; font-size:var(--fs15); opacity:.3;}
.popAllMenu .popContent .etc div {display:flex; gap:10px;}
.popAllMenu .popContent .wrap ul>li>a {font-weight:700; font-size:var(--fs32); display:block;}

.popAllMenu .popContent .wrap {width:100%;}
.popAllMenu .popContent .wrap ul>li>ul>li>a {display: inline-block; color:rgba(255,255,255,.4); font-size:var(--fs18); font-weight:400; transition: transform 0.3s ease, color 0.5s ease; padding-bottom: 3px;}
.popAllMenu .popContent .wrap ul>li>ul>li>a:hover {color:#fff;transform:translateX(10px);}

.popAllMenu .popContent .wrap ul {display:flex; justify-content: space-between;}
.popAllMenu .popContent .wrap ul>li {position:relative;}
.popAllMenu .popContent .wrap ul>li:before {position:absolute; content:""; width:1px; height:100%; background:rgba(255,255,255,.08); left:-50px;}
.popAllMenu .popContent .wrap ul>li:nth-child(1):before {content:none;}
.popAllMenu .popContent .wrap ul>li>ul {display:inline-block; margin-top:40px;}
.popAllMenu .popContent .wrap ul>li>ul>li>ul {margin-top:0;}

.popAllMenu .popContent .wrap .toggle-submenu {position:relative; color:#fff; padding-left:20px;}
.popAllMenu .popContent .wrap .toggle-submenu:hover {transform:translateX(0px);}
.popAllMenu .popContent .wrap .toggle-submenu:before {content: ""; position: absolute; left: 0px; top: 9px; width: 12px; height: 8px; background:url(/images/common/gnb-arrow.svg) no-repeat left; transition: all 0.3s; filter: invert(1);}
.popAllMenu .popContent .wrap .active-sub .toggle-submenu:before {transform: rotate(-180deg);}
.popAllMenu .popContent .wrap .has-sub {padding:8px 0;}
.popAllMenu .popContent .wrap ul>li>ul>li:before {content:none;}


/*** 이메일무단수집거부팝업 ***/
.emailPopup ul {padding:0; margin:0; list-style:none;}
.emailPopup dd, .emailPopup dl {margin:0;}
.emailPopup dd {font-size:var(--fs16); margin-top:10px;}
.emailPopup {display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; max-width:700px; padding:50px !important; background-color:#fff;
box-shadow:0 0 10px rgba(0, 0, 0, 0.5); z-index:99999; border-radius:1.5rem; text-align:left; }
.emailPopOverlay {display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-color: rgba(0, 0, 0, 0.5); z-index: 9999;}
.emailPopup a.closeBtn {position:absolute; right:25px; top:20px; font-weight:800; font-size:18px;}
.emailPopup .txt {display:flex; align-items:flex-start; gap:30px;word-break:keep-all;}
.emailPopup .txt img {max-width:100px;}
.emailPopup .txt dl dt {font-size:20px; font-weight:800;}
.emailPopup ul {margin-top:30px; text-align:left; border:1px solid var(--border1); padding:30px; background:#f5f5f5;}
.emailPopup ul li {padding-left:15px; position:relative; font-size:var(--fs16);}
.emailPopup ul li+li {margin-top:5px;}
.emailPopup ul li:before {content:""; position:absolute; display:block; width:4px; height:4px; border-radius:50%; background:#666; top:10px; left:0;}
.emailPopup pre {font-family: var(--f_Pretendard), sans-serif; font-size:var(--fs15); font-weight:500; height: 180px; overflow-y: auto; background:#fff; border-radius:0; margin-top:30px; padding:30px; box-sizing: border-box;}


/* ************************ 데스크탑 (1249~) ************************ */
@media screen and (min-width: 1249px), print {

	html,body {min-width:1200px;}
	.mobile {display:none !important;}

	/*헤더**/
	header {z-index:999; position:absolute; width:100%; min-width:1200px; top:0; left:0;}
	
	/* header fix :: (주)에스티아이 */
	header.fix {position:fixed; top:0; left:0; width:100%; z-index:9999; background:transparent; color:#fff; transition:background .25s ease, box-shadow .25s ease, color .25s ease;}
	.scrolled nav.pc.box {box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px -3px, rgba(0, 0, 0, 0.05) 0px 4px 8px -2px !important;}
	.scrolled nav.pc .navbg {background: #fff; /*backdrop-filter: blur(7.5px);*/}
	.scrolled nav.pc .gnb>ul>li>a {color:#000 !important;}
	.scrolled .langWrap .lang {filter: invert(1);}
	.scrolled aside .allView {filter: invert(1);}
	.scrolled nav.pc .gnb>ul>li.on>a:after {border-bottom:2px solid #000;}
	.scrolled .langWrap ul li a {color:#000;}
	
	
	header .head {width:90vw; margin:0 auto; position:relative;}
	header .head h1 {position:absolute; z-index:99999; left:0; top:30px;}
	header .head h1 a {}
	header .head h1 a img {max-width:433px; width:100%; height:40px;}

	/* gnb aside */
	header aside {position:absolute; right:0; top:15px; z-index:99999; color:#fff;}
	header aside>* {float:left;}
	header aside .allView {width: 70px; height: 70px; background:url(/images/common/menu.png) center / 22px no-repeat;}
	
	/* gnb 다국어선택 */
	.langWrap {position: relative; height:70px; display: flex; align-items: center; margin-right:10px !important;}
	.langWrap .lang {padding:0 25px 10px 0; background:url(/images/common/i-langArrow.svg) right 4px no-repeat; font-size:16px; border-bottom:1px solid #fff; line-height:1;}
	.langWrap ul {width:100%; position: absolute; top: 50px; right:0; padding: 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease; z-index: 100; overflow:hidden;}
	.langWrap ul li+li {border-top:1px solid #ccc;}
	.langWrap ul li a {width:100%; display:inline-block; font-size:var(--fs16); font-weight:600; color:#fff; padding:5px 0;}
	.langWrap.active ul {opacity: 1; visibility: visible; pointer-events: auto;}
	
	/* gnb */
	nav.mobile {visibility:hidden;}
	nav.pc {z-index:99; position:absolute; display:block; width:100%; overflow:hidden; height:100px;}
	nav.pc:hover {border-bottom:0}
	nav.pc .navbg {
		position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0);
		transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;}
	nav.pc.on .navbg {background:rgba(255,255,255,1); }
	nav.pc .navbg .dep1 { display : none; position: absolute;
    width: 100%; height: 100px; }
	nav.pc.on .navbg .dep1 { display : block; transition : all 2s ease; border-bottom:1px solid #ededef !important;}
	nav.pc .navbg .dep2 {position:absolute; height:100%; background-color:#fff;}

	nav.pc .wrap {z-index:1300; position:relative; display:block; max-width:1400px; height:130px; margin:0 auto;}

	nav.pc .gnb {position:relative; width: 100%; max-width:90vw; margin:0 auto; letter-spacing:0;}
	nav.pc .gnb a.on {color:var(--blue);}
	nav.pc .gnb > ul { display:flex; padding-left:15vw;}
	nav.pc .gnb>ul>li {position:relative; padding-top:35px; padding-right:3.2vw;}
	nav.pc .gnb>ul>li:nth-child(3) {padding-right:4.5vw !important;}
	nav.pc .gnb>ul>li:last-child {padding-right:0!important;}
	nav.pc .gnb>ul>li>a {display:block; position : relative; color:#fff; font-size:20px; font-weight:600;}
	nav.pc.sub .gnb>ul>li>a {color:#fff;}
	nav.pc .gnb>ul>li>a span {font-size:14px; font-weight:400; padding-left:5px;}
	nav.pc.on .gnb>ul>li>a span {color:#999;}
	
	nav.pc.on .gnb>ul>li>a:hover span {color:var(--base1);}
	nav.pc.on .gnb>ul>li.on>a, nav.pc.on .gnb>ul>li.on>a span {color:var(--base1)!important;}
	nav.pc.on .gnb>ul>li.on>a:after {border-bottom:2px solid var(--base1)!important;}
	nav.pc .gnb>ul>li>a:after { position: absolute; content:""; display: block; border-bottom: 2px solid var(--base1); transition:width 250ms ease-out; left: 0; right: auto; width:0;}
	nav.pc .gnb>ul>li>a:hover {color:var(--base1)!important;}
	nav.pc .gnb>ul>li>a:hover:after, nav.pc .gnb>ul>li.on>a:after {width:100%;}
	nav.pc .gnb>ul>li.on>a:after {border-bottom: 2px solid #fff;}
	nav.pc .gnb>ul>li>ul {
		position:absolute; top:100px; left:0; width:100% !important;padding:30px 0 10px; padding-bottom:30px;
		transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;
	}
	nav.pc .gnb>ul>li>ul>li>a {position: relative;display: inline-block; color:#000; letter-spacing:-.5px; font-size:18px; font-weight:500; white-space: nowrap;}
	nav.pc .gnb>ul>li>ul>li>a span {font-size:14px; color:#999; padding-left:5px;}
	nav.pc .gnb>ul>li>ul>li.on>a span {color:var(--base1);}
	nav.pc .gnb>ul>li>ul>li>a:hover {color:var(--base1)!important;}
	nav.pc .gnb>ul>li>ul>li>a:hover span {color:var(--base1);}
	nav.pc .gnb>ul>li>ul>li>a:after { position: absolute; content:""; display: block; border-bottom: 1px solid var(--base1); transition: width 250ms ease-out; left: auto; right: 0; width:0;}
	nav.pc .gnb>ul>li>ul>li+li a {margin-top:15px;}
	
	nav.pc .gnb>ul>li>ul>li.on a {color:var(--base1)!important;}
	@keyframes wide {
	  from {transform:scaleX(0);}
	  to {transform:scaleX(1);}
	}

	/* lnb */
	.lnb {position:absolute; bottom:-35px; width:100%; left: 50%; right: 50%; transform: translate(-50%, -50%); border-top:1px solid rgba(255, 255, 255, 0.15); height:70px; backdrop-filter: blur(7.5px);}
	.lnb .lnb-wrap {display:flex; align-items:center; justify-content: flex-start; position:relative; height:100%; width: 100%; max-width : 1400px; margin : 0 auto;  overflow: hidden;}
	.lnb .lnb-wrap a {font-size:16px; color:#000;}
	.lnb .lnb-wrap h3 {background:var(--green); color:#fff; font-weight:500; height:100%; padding:20px 30px; box-sizing:border-box; font-size:18px;}
	.lnb .lnb-wrap .home {display:block; width:40px; height:40px; font-weight:300; background:#fff url(../images/common/i-home.png)no-repeat center / 15px; border-radius:50%; border:1px solid #efefef;}	
	.lnb .lnb-wrap .lnb-depth {position:relative;}
	.lnb .lnb-wrap .lnb-depth .onmenu {display:block; font-size:16px; font-weight:400; color:#000; cursor:pointer; line-height:60px; background:url(../images/common/lnb_arrow.png)100% center no-repeat}
	.lnb .lnb-wrap .lnb-depth.dep2 .onmenu { color : var(--base); background:url(../images/common/lnb_arrow2.png)100% center no-repeat; }
	.lnb .lnb-wrap .lnb-depth>ul {display:flex; width:100%; gap:60px; height: 70px; align-items:center;}
	.lnb .lnb-wrap .lnb-depth>ul li{position:relative;}
	.lnb .lnb-wrap .lnb-depth>ul li:last-child {border-bottom:none;}
	.lnb .lnb-wrap .lnb-depth>ul li a {display:block; padding:21.5px 0; font-weight:600; color:#fff; opacity:0.5; text-align:center; font-size:18px;}
	.lnb .lnb-wrap .lnb-depth>ul li:hover a {opacity:1; }
	.lnb .lnb-wrap .lnb-depth>ul li.on a {position:relative; opacity:1;}
	.lnb .lnb-wrap .lnb-depth>ul li.on a:after {content:""; display:block; position:absolute; width:100%; height:2px; background:#fff; top:1px;}
	/*.lnb .lnb-wrap .lnb-depth>ul li.on a:before {content:""; display:block; position:absolute; background:var(--base1); left:-8px; top:25px; border-radius:100px; width:5px; height:5px;}*/
	.lnb .lnb-wrap .lnb-depth.on>ul { display:block;}
	.lnb #gotop {position:absolute; right:0; top:50%; transform:translateY(-50%); display:block; width:85px; line-height:42px; font-size :12px; font-weight:600; background:#fff url(../images/common/i-gotop_arrow.png) no-repeat 20px center / 8px; text-align:center; opacity:1 !important;
	font-weight:800; border:1px solid #efefef; border-radius:40px; padding-left:15px;}




	

	
	
}

/** gnb 부분수정 **/
/*@media screen and (max-width: 1500px), print { 
header .head h1 a img {max-width:350px; width:21vw;}
nav.pc .gnb>ul>li>a {font-size:20px;}
nav.pc .gnb>ul>li>ul>li>a {font-size:16px;}
}*/

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

	.pc {display:none !important;}

	
	/*헤더*/
	header {position:absolute; left:0; top:0; width:100%; z-index:999; height:70px; background:ease-gradient(to bottom, rgba(0,0,0,.7), transparent);}
	header.fixOn {position:static; width:100%; z-index:1000 !important; background:transparent;}
	
	header.fix {transition: background-color .3s, color .3s;}
	header .head {}
	header .head .gnbView {position:absolute; right:0; top:0; width:70px; height:70px; background:url(../images/common/menu.png)center /22px no-repeat ;}
	header .head .gnbView img {}
	header .head h1 {display:inline-block;}
	header .head h1 a {height:70px; display:flex; align-items:center; padding-left:30px; transform:translateY(3px);}
	header .head h1 a img {height:45px; width:auto;}
	
	header .head h1 a img.scroll {display: none;}
	.black_header_Bg {height:60px;}

	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; top:0; width:50%; min-width:320px; height:100%; overflow:hidden; box-shadow:0 !important; background:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px;border-bottom: 1px solid rgba(0,0,0,.15); overflow:hidden; font-weight : 500;}
	nav.mobile .closeWrap .gnbClose {display:block; width:60px; height:60px; background:url(../images/common/icon_close.png)center no-repeat; background-size:20px; border-left:1px solid rgba(0,0,0,.15); float:right;}
	
	nav.mobile .closeWrap .infoWrap {display:flex; justify-content: space-between; align-items: center; height:60px; padding:0 20px;}
	nav.mobile .closeWrap .infoWrap .mhome {color:#fff; padding:5px 15px; border-radius:100px; background:var(--base1); display:inline-block; font-size:14px;}
	nav.mobile .closeWrap .infoWrap .mLang a {font-size:15px;}
	nav.mobile .closeWrap .infoWrap .mLang a+a {margin-left:8px;}
	nav.mobile .closeWrap .infoWrap .mLang a.on {color:var(--base1); border-bottom:1px solid var(--base1);}
	
	nav.mobile .closeWrap .link {float:left; padding:0 20px;line-height:60px; font-size:12px;}
	nav.mobile .closeWrap .link+.link {padding-left:0;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left !important; font-weight : 400;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb>ul>li {clear:both; position:relative; border-bottom:1px solid #e5e5e5;}
	nav.mobile .gnb>ul>li>a {display:block; padding:20px; font-size:17px;}
	nav.mobile .gnb>ul>li>a span {font-size:14px; color:#999; padding-left:5px;}
	nav.mobile .gnb>ul>li.on {border-color:var(--base1);}
	nav.mobile .gnb>ul>li.on>a {background:var(--base1); color:#fff;}
	nav.mobile .gnb>ul>li.on>a span {color:#fff;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;border-top: 1px solid #eee;}
	nav.mobile .gnb>ul>li>ul>li a {display:block; padding:15px 40px; font-size:15px; /*color:var(--base1);*/ letter-spacing:-.8px;background:#fff;}

	    nav.mobile .gnb>ul>li>ul>li a:before {
        position: absolute;
        top: 24px;
        left: 25px;
        transition: all .3s;
        display: block;
        content: "";
        border-radius: 50%;
        width: 4px;
        height: 4px;
        background: transparent;
    }
	
	    nav.mobile .gnb>ul>li>ul>li a:hover:before, nav.mobile .gnb>ul>li>ul>li.on a:before {
        background: var(--base1);
    }
	nav.mobile .gnb>ul>li>ul>li a span {font-size:14px; color:#999; padding-left:5px;}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#000; background-color:#f5f5f5;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:var(--base1); font-weight:700;}
	nav.mobile .gnb>ul>li>ul>li.on a span {color:var(--base1);}
	nav.mobile .gnb>.side {display:none;}
	
	header .closeWrap a.inquire {display:inline-block; background-color:var(--base1); width:100px; height:40px; text-align:center; line-height:40px; color:#fff; border-radius: 3rem; margin:10px;}
	header .closeWrap a.call {display:flex; justify-content: center; align-items: center; width: 40px; height:40px; border-radius:50%; position:absolute; top:10px; left:120px; background:var(--base1);}

	.sub-toptext h1 {font-size:45px;}
	.sub-toptext > p.sub-tit {font-size:45px;}
	.sub-toptext > p {font-size:16px;}
	.site-route {height:65px;}
	.site-route>p {font-size:20px; border-top:3px solid var(--base1);}
	
	/* footer */
	footer {padding:50px 30px 35px;}
	footer .footer-info {display:flex; flex-direction: column; gap:50px;}
	footer .footer-info .navWrap>ul {grid-template-columns: auto; margin:0; gap:0;}
	footer .footer-info .navWrap>ul>li {margin-bottom:10px;}
	footer .footer-info .navWrap>ul>li+li {/*border-top:1px solid rgba(255,255,255,15%); */padding-top:5px;}
	footer .footer-info .navWrap>ul>li>ul {margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0px;}
	footer .footer-info .navWrap>ul>li>ul>li {opacity:.7;height: 22px;}
	footer .footer-info .navWrap>ul>li>a {font-weight:700;}
	
	/* lnb */
	.lnb {
		position:relative; height:30vh; opacity:0;
		background-position:center; background-repeat:no-repeat; background-size:cover;
	}
	.contents .lnbWrap {top:40%; padding:0 30px;}
	.sub-toptext > p.sub-tit {font-size:20px;}
	.sub-toptext h2 {font-size:36px;}
	.contents .site-routeWrap {width: calc(100% - 450px);}
	
	/*컨텐츠*/
	.contents {position:relative; overflow-x:hidden;}
	
	a.gotop {position:fixed; right:10px; bottom:60px; display:block; width:40px; height:40px; background:#fff url(../images/common/i-gotop.png) no-repeat center; line-height:1; border-radius:50%; border:2px solid #000; text-indent:-999px; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,.2);}
	
	.sub-visual {position:relative; width:100%; height:600px;}
	.sub-visual .sub-visual-wrap { position : absolute; display:table; width:100%; height:100%; left : 50%; transform : translateX(-50%);}
	.sub-visual .sub-visual-text {padding-top:80px; padding:80px 30px 0;}
	.sub-visual .sub-visual-text h2 {position:relative; font-size:30px; font-weight:800; letter-spacing:-.5px; color:#fff; z-index : 5;}
	.sub-visual .sub-visual-text h2:before {top:-20px; height:2px; width:60px;}
	.sub-visual .sub-visual-text p {/*font-size:16px; font-weight:400;*/ color:#fff; position:relative; margin-top:20px; line-height:1.3;}
	
	.contents-wrap {padding:50px 20px 50px!important;}
	
	.breadcrumb, .page-name-wrap {padding:0 30px;}
	.breadcrumb:before {left:30px;}
	.contents .contentsWrap {padding:100px 30px;}
	
	
}
/* ************************ 모바일 (0~991) ************************ */
@media screen and (max-width: 991px) {
.sub-visual {height:470px;}	
.contents .lnbWrap {top:auto; bottom:50px;}
.sub-visual .sub-visual-text h2 {font-size:24px;}
.sub-visual .sub-visual-text h2:before {width:50px;}
.sub-visual .sub-visual-text p {margin-top:10px;}
	
footer {font-size:15px;}

}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {

    body {font-size:16px;}
	
	header .head h1 a img {height:40px;} 
	.sub-visual {height:340px;}
    .sub-visual .sub-visual-text h2 {font-size: 24px;}
	/* .sub-visual .sub-visual-text p {font-size:16px;} */
	.sub-visual .sub-visual-text p:before {top:-8px;}
	
	.contents .contentsWrap {padding:40px 20px 50px!important;}
	
	.contents .lnbWrap {height:auto; flex-direction:column; align-items: flex-start; bottom:0; padding:0 20px;}
	

	.contents .sub-toptext {width:100%; padding:0;}
	.contents .site-routeWrap {width:100%;}
	.contents .site-routeWrap:after {display:none;}
	.sub-toptext h2 {font-size:24px;}
	.sub-toptext > p.sub-tit {font-size:16px; line-height:1.6;}
	.site-route {margin-top:10px !important;}

	
	/*footer*/
	footer {padding:30px 20px;}
	
	.site-route {height:25px;}
	.breadcrumb:before {height:55px; left:20px; top:-10px;}
	.page-name-wrap {margin-top:30px;}
	.breadcrumb, .page-name-wrap {padding: 0 20px;}
	
		
	/*이메일무단수집거부팝업*/
	.emailPopup {width:80%; padding:20px !important;}
	.emailPopup .txt img {max-width:70px;}
	.emailPopup .txt {flex-direction:column; gap:10px;}
	.emailPopup ul {padding:10px 20px; margin-top:10px; height: 180px;
        overflow-y: scroll;}
	
	

}

/* ************************ 모바일 (0~500) ************************ */
@media screen and (max-width:500px) { 
body {overflow-x:hidden !important;}
 header .head h1 a {padding-left:20px;}
 header .head h1 a img {height:35px;}
.sub-visual .sub-visual-text h2 {font-size:20px;}
/* .sub-visual .sub-visual-text p {font-size:15px;} */

footer {padding:30px 20px;}
footer .footer-info .infoWrap ul li:nth-child(1) a+a {margin-left:10px;}
footer .footer-info .infoWrap ul li:nth-child(1){grid-template-columns: auto; gap:10px; padding-bottom:10px;}
footer .footer-info .infoWrap ul li:nth-child(2) {grid-template-columns: auto; gap:10px;}
footer .footer-info .infoWrap ul li+li {padding:10px 0;}
footer .footer-info .infoWrap ul li:nth-child(3) a {display:block; margin-left:0;}

}