@charset "utf-8";


@media (min-width: 1200px) {
	body .leftLayout {display:flex; flex-direction:column; width:300px; height:100vh; position:fixed; left:0; top:0; background:#fff; z-index:9;}

	/* 헤더 */
	header {flex-grow:1;}
	header h1.logo {height:120px; position:relative; z-index:9; display:flex; align-items:center; justify-content:center;}

	/* gnb */
	nav {padding:18vh 0 0;}
	nav .gnb {}
	nav .gnb .dep1 {display:flex; gap:50px; flex-direction:column;}
	nav .gnb .dep1>li {padding-left:50px; position:relative;}
	nav .gnb .dep1>li:before {width:30px; height:1px; background:var(--base1); border-radius:50%; left:0; top:14px; position:absolute; display:block; content:''; opacity:0; transition:var(--ani);}
	nav .gnb .dep1>li>a {color: #000;font-size: var(--fs24); line-height: normal; position:relative;}
	nav .gnb .dep1>li.on:before {opacity:1;}
	nav .gnb .dep1>li:hover>a,
	nav .gnb .dep1>li.on>a {color:var(--base1);}

	nav .gnb .dep2 {padding:15px 0 0 10px; }
	nav .gnb .dep2>li {}
	nav .gnb .dep2>li+li {padding:15px 0 0; }
	nav .gnb .dep2>li a {padding-left:10px; position:relative;}
	nav .gnb .dep2>li a:before {width:3px; height:3px; background:#666; border-radius:50%; left:0; top:9px; position:absolute; content:''; display:block;}
	nav .gnb .dep2>li a:hover {color:var(--base2);}
	nav .gnb .dep2>li.on a {color:var(--base2);}
	nav .gnb .dep2>li.on a:before {background:var(--base2);}

	nav .gnb .dep1>li:hover .dep2 {display:block;}

	footer {padding:50px;}
	footer .footer-list {}
	footer .footer-item {line-height:40px; border-bottom:1px solid #e5e5e5; display:block; color:#333; font-weight:500;}
	footer .footer-item:nth-child(1) {background:url(/images/common/icon_footer_arrow.svg)100% center no-repeat;}
	footer .footer-item:nth-child(2) {background:url(/images/common/icon_footer_plus.svg)100% center no-repeat;}
	footer .copy {margin:10px 0 0; color: #999; font-size: var(--fs12); line-height: 140%; position:relative;}
	footer .copy a {
		width:20px; height:20px; display:block;
		right:0; top:0; position:absolute; background:url(/images/common/icon_footer_more.svg)center no-repeat;
	}

	footer .layer {display:none; background:#fff; position:absolute; left:280px; bottom:20px; z-index:99; border-radius:5px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,.1); }
	footer .layer.active {display:block;}
	footer .layer .layer-tit {padding:0 10px 0 20px; height:40px; background:var(--base1); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5e5e5;}
	footer .layer .layer-tit .tit {color:#fff; font-size:var(--fs15);}
	footer .layer .layer-tit .closeBtn {
		width:20px; height:20px; border-radius:50%;
		background:url(/images/common/icon_close_white.svg)center /16px no-repeat;
	}
	footer .layer .layer-family li {}
	footer .layer .layer-family li+li {border-top:1px solid #e5e5e5;}
	footer .layer .layer-family li a {padding:0 80px 0 20px; line-height:38px; display:block; position:relative; font-size:var(--fs14); white-space:nowrap;}
	footer .layer .layer-family li a:before {
		width:20px; height:20px; background:url(/images/common/icon_blank.svg)center /12px no-repeat;
		right:10px; top:10px; position:absolute; display:block; content:''; opacity:.2; transition: var(--ani);
	}
	footer .layer .layer-family li a:hover {background:#f1f1f1;}
	footer .layer .layer-family li a:hover:before {opacity:1;}


}





@media (max-width: 1199px) {

	body .moHead {}
	body .moHead .logo {height:60px; border-bottom:1px solid #e5e5e5; display:flex; align-items:center; justify-content:center;}
	body .moHead .logo .logoImg {}
	body .moHead .logo .logoImg img {height:30px;}
	body .moHead .logo .menuBtn {width:60px; height:60px; position:absolute; left:0; top:0; }
	body .moHead .logo .menuBtn img {width:100%; height:100%; object-fit:scale-down;}


	body .leftLayout {
		display:flex; flex-direction:column; width:280px; height:100vh;
		position:fixed; left:0; top:0; background:#fff; z-index:9999;
		transform:translateX(-100%); transition:var(--ani);
	}

	body .leftLayout.active {transform:translateX(0);}
	body .gnbCover {z-index:-1; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; transition:var(--ani);}
	body .gnbCover.active {z-index:9; opacity:1;}

	/* 헤더 */
	header {flex-grow:1;}
	header h1.logo {gap:10px; height:100px; position:relative; display:flex; align-items:center; justify-content:center;}
	header h1.logo img {height:35px;}
	header h1.logo .closeBtn {width:35px; height:35px; position:absolute; right:0; top:0; }
	header h1.logo .closeBtn img {width:100%; height:100%; object-fit:scale-down;}

	/* gnb */
	nav {padding:5vh 0 0;}
	nav .gnb {}
	nav .gnb .dep1 {display:flex; gap:20px; flex-direction:column;}
	nav .gnb .dep1>li {padding-left:40px; position:relative;}
	nav .gnb .dep1>li:before {width:25px; height:1px; background:var(--base1); border-radius:50%; left:0; top:12px; position:absolute; display:block; content:''; opacity:0; transition:var(--ani);}
	nav .gnb .dep1>li>a {color: #000;font-size: var(--fs24); line-height: normal; position:relative;}
	nav .gnb .dep1>li.on:before {opacity:1;}
	nav .gnb .dep1>li:hover>a,
	nav .gnb .dep1>li.on>a {color:var(--base1);}

	nav .gnb .dep2 {padding:15px 0 0 10px;}
	nav .gnb .dep2>li {}
	nav .gnb .dep2>li+li {padding:10px 0 0; }
	nav .gnb .dep2>li a {padding-left:10px; position:relative;}
	nav .gnb .dep2>li a:before {width:3px; height:3px; background:#666; border-radius:50%; left:0; top:9px; position:absolute; content:''; display:block;}
	nav .gnb .dep2>li a:hover {color:var(--base2);}
	nav .gnb .dep2>li.on a {color:var(--base2);}
	nav .gnb .dep2>li.on a:before {background:var(--base2);}


	header .gnbView {width:60px; height:60px; background:url(/images/common/icon_menu.svg)center no-repeat;}
	header .gnbCover {background:rgba(0,0,0,.9); width:100%; height:100vh; left:0; top:0; position:absolute; }

	.headerH {height:60px;}

	.sub-visual {}

	footer {padding:40px;}
	footer .footer-list {}
	footer .footer-item {line-height:40px; border-bottom:1px solid #e5e5e5; display:block; color:#333; font-weight:500;}
	footer .footer-item:nth-child(1) {background:url(/images/common/icon_footer_arrow.svg)100% center no-repeat;}
	footer .footer-item:nth-child(2) {background:url(/images/common/icon_footer_plus.svg)100% center no-repeat;}
	footer .copy {margin:10px 0 0; color: #999; font-size: var(--fs12); line-height: 140%; position:relative;}
	footer .copy a {
		width:20px; height:20px; display:block;
		right:0; top:0; position:absolute; background:url(/images/common/icon_footer_more.svg)center no-repeat;
	}
	
	footer .layer {display:none; background:#fff; position:absolute; left:250px; bottom:20px; z-index:99; border-radius:5px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,.1); }
	body .leftLayout.active footer .layer.active {display:block;}
	footer .layer .layer-tit {padding:0 10px 0 20px; height:40px; background:var(--base1); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5e5e5;}
	footer .layer .layer-tit .tit {color:#fff;font-size:var(--fs15);}
	footer .layer .layer-tit .closeBtn {
		width:20px; height:20px; border-radius:50%;
		background:url(/images/common/icon_close_white.svg)center /18px no-repeat;
	}
	footer .layer .layer-family li {}
	footer .layer .layer-family li+li {border-top:1px solid #e5e5e5;}
	footer .layer .layer-family li a {padding:0 80px 0 20px; line-height:36px; display:block; position:relative; font-size:var(--fs14);}
	footer .layer .layer-family li a:before {
		width:20px; height:20px; background:url(/images/common/icon_blank.svg)center /12px no-repeat;
		right:10px; top:10px; position:absolute; display:block; content:'';
	}
	footer .layer .layer-family li a:hover {background:#f1f1f1;}

	body .leftLayout.active footer .layer {}


}

@media (max-width: 767px) {
	body .leftLayout {
		width:260px;
	}

	header h1.logo {height:80px;}
	header h1.logo img {height:30px;}


	nav {padding:3vh 0 0;}
	nav .gnb .dep1>li {padding-left:30px;}
	nav .gnb .dep1>li:before {width:20px;}


	footer {padding:30px;}






}