@charset "utf-8";

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

/* ******************** 공용 ******************** */
a {transition-duration:.3s;}
a:link {color:#666;}
a:visited {color:#666;}
a:hover {color:#000;}
a:active {color:#000;}
#gotop {z-index:2000; position:fixed; display:none; width:35px; height:35px; right:20px; border-radius:3px; bottom:40px;}
body {font-family:'NotoSansKR'; font-weight:300; font-size:16px; line-height:1.6; color:#666; word-break:keep-all;}
body h1,h2,h3,h4 {font-weight:300;}
/* body > section {position:relative; display:block; width:100%; max-width:1200px; margin:0 auto;} */



/* ******************** 데스크탑 (992~) ******************** */
@media screen and (min-width: 992px), print{
	.mobile {display:none !important;}	
	
	/* header */
	header {position:absolute; top:0; left:0; z-index:999; width:100%; height:100px;} 
	header .head {position:relative; width:1200px; margin:0 auto; max-width:100%;}
	header .head h1 {position:absolute; top:0; left:0; z-index:99999;}
	header .head h1 a {display:inline-block; padding:20px 0 0;}
	header .head h1 a img {display:block; height:60px;}

	/* gnb */
	nav.mobile {visibility:hidden;}
	nav.pc {z-index:9999; visibility:hidden; position:absolute; display:block; width:100%; overflow:hidden; background:#fff;}
	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%;}
	nav.pc .navbg .dep1 {height:100px;}
	nav.pc .navbg .dep2 {border-top:1px solid #eaeaea;}
	nav.pc .gnb {position:relative; height:100px; width:1200px; margin:0 auto; max-width:100%; padding-left:21%;}
	
	nav.pc .gnb>ul {padding-top:50px;}
	nav.pc .gnb>ul>li {position:relative; float:left;}
	nav.pc .gnb>ul>li>a {position:relative; display:inline-block; width:100%; padding:0; font-size:22px; font-weight:400; color:#000; letter-spacing:-.5px; line-height:1;}
	nav.pc .gnb>ul>li>a:before {content:''; display:block; width:0; height:1px; background:#f7d195; position:absolute; left:0; bottom:-10px;}
	nav.pc .gnb>ul>li>a:hover:before,
	nav.pc .gnb>ul>li.on>a:before {}
	nav.pc .gnb>ul>li>ul {padding:70px 0 30px;}
	nav.pc .gnb>ul>li>ul>li {line-height:1;}
	nav.pc .gnb>ul>li>ul>li+li {padding-top:20px;}
	nav.pc .gnb>ul>li>ul>li a {font-size:15px; color:#000; font-weight:400; border-bottom:2px solid rgba(255,255,255,0);}
	nav.pc .gnb>ul>li>ul>li.on {}
	nav.pc .gnb>ul>li>ul>li.on a {color:#3361c7; border-bottom:2px solid #3361c7;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:#3361c7;}
		
	/* aside */
	header .aside {position:absolute; top:61px; display:inline-block; font-size:0;}
	header .aside a {font-size:12px; font-weight:400; color:#000; display:inline-block; line-height:1;}
	header .aside a+a {padding-left:10px;}
	
	.headerH {height:100px ! important;}
	
	
	/* lnb */
	.lnb {position:relative; width:100%; height:460px; background-position:center center; background-size:cover; background-repeat:no-repeat;}
	.lnb::before {content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:#355f92; opacity:.2;}
	.lnb p {position:relative; z-index:9; width:100%; text-align:center; font-size:24px; font-weight:400; line-height:1; padding-top:160px; color:#fff;}
	.lnb p span {font-size:48px; font-weight:500; display:block; padding-top:35px;}
	.lnb ul {z-index:9; position:relative; left:0; top:123px; /*transform:translateX(-50%);*/ width:1200px; margin:0 auto; max-width:100%; background:#fff; font-size:0; text-align:center;}
	.lnb ul li {display:inline-block; padding:0 45px;}
	.lnb ul li a {font-size:16px; font-weight:400; color:#000; padding:28px 0 21px; border-bottom:5px solid rgba(255,255,255,0); line-height:1;}
	.lnb ul li.on a {display:block; color:#3361c7; border-bottom:5px solid #3361c7;}
	.lnb ul li a:hover {color:#3361c7;}
	.lnb.fixOn ul {position:fixed; width:100%; top:0; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.1);}
	
	.lnb.company {background-image:url(../images/common/sub_company.jpg);}
	.lnb.production {background-image:url(../images/common/sub_production.jpg);}
	.lnb.dataroom {background-image:url(../images/common/sub_dataroom.jpg);}
	.lnb.customer {background-image:url(../images/common/sub_customer.jpg);}
	
	/* 서브타이틀 */
	section.titleArea {background:#f3f3f3; width:100%; height:100px;}
	section.titleArea .titleWrap {width:1200px; margin:0 auto; overflow:hidden; max-width:100%;}
	section.titleArea .titleWrap h2 {float:left; margin-top:40px; font-size:30px; font-weight:400; color:#000; padding-left:42px; background:url(../images/common/titleBefore.png)left center no-repeat;}
	section.titleArea .titleWrap ul {float:right; margin-top:50px;}
	section.titleArea .titleWrap ul li {float:left; line-height:1; font-size:14px;}
	section.titleArea .titleWrap ul li+li {padding-left:35px;}
	
	
	/* 컨텐츠 */
	.contents>[class*='-wrap'] {width:1200px; margin:0 auto; max-width:100%; padding:100px 0;}

	/* footer */
	body footer {padding:70px 0 50px; background:#fff; border-top:1px solid #d1dee2;}
	body footer .footer-wrap {width:1200px; margin:0 auto;}
	body footer .footer-wrap>div {float:left;}
	body footer .footer-logo {padding-right:60px;}
	body footer .footer-info address {}
	body footer .footer-info address p {font-size:14px; overflow:hidden;}
	body footer .footer-info address p span {float:left; padding-right:20px;}
	body footer .footer-info p.copy {font-size:14px;}
	
}




/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	.pc {display:none !important;}
	
	header {position:absolute; top:0; left:0; width:100%;}
	header .head {z-index:100; position:absolute; left:0; top:0; width:100%; height:55px; overflow:hidden; line-height:1; border-bottom:1px solid rgba(255,255,255,.2);}
	header .head a.mobile {position:absolute; top:0; background-size:17px; width:55px; height:55px; background-repeat:no-repeat; background-position:center; cursor:pointer;}
	header .head a.right {right:0; border-left:1px solid #eee;}
	header .head a.left {border-right:1px solid rgba(255,255,255,.2); left:0;}
	header .head .gnbView {background-image:url(../images/common/icon_allmenu.png);}
	header .head .gnbView img {height:15px;}
	header .head h1 {display:block; text-align:center;}
	header .head h1 a {display:inline-block; padding-top:10px;}
	header .head h1 a img {height:30px;}

	/* gnb */
	
	/*gnb*/
	nav.pc {display:none;}
	nav.mobile {z-index:9999; position:fixed; top:0; width:70%; height:100%; overflow:hidden; box-shadow:0 !important; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px; background-color:#fff; color:#3361c7; border-bottom:5px solid #e5e5e5;}
	nav.mobile .closeWrap .gnbClose {display:block; width:55px; height:55px; background:url(../images/common/icon_x.png) no-repeat center; background-size:17px; border-left:1px solid rgba(0,0,0,.1); float:right;}
	nav.mobile .closeWrap aside a {float:left; display:inline-block; padding:0 20px; color:#000; font-size:12px; letter-spacing:0; height:55px; line-height:55px;}
	nav.mobile .closeWrap aside a.second {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;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; position:relative; padding:12px 20px; font-size:16px; font-weight:500; color:#333; border-bottom:1px solid #e4e4e4; background:#fff;}
	nav.mobile .gnb>ul>li a:before {content:''; display:block; opacity:0; width:5px; height:100%; background:#3361c7; position:absolute; left:0; top:0;}
	nav.mobile .gnb>ul>li.on a:before {opacity:1;}
	nav.mobile .gnb>ul>li.on>a {color:#3361c7; }
	nav.mobile .gnb>ul>li>ul {box-shadow:0 2px 2px rgba(0,0,0,.2);}
	nav.mobile .gnb>ul>li>ul>li {}
	nav.mobile .gnb>ul>li>ul>li>a {position:relative; display:block; width:100%; padding:10px 20px 10px 40px; background:#f5f5f5; border-bottom:1px solid #e5e5e5;}
	nav.mobile .gnb>ul>li>ul>li>a:before {content:''; display:block; opacity:0; width:2px; height:2px; background:#666; position:absolute; left:30px; top:calc(50% - 1px); border-radius:50%;}
	nav.mobile .gnb>ul>li>ul>li>a:hover:before  {opacity:1;}
	nav.mobile .gnb>ul>li>ul>li>a:hover,
	nav.mobile .gnb>ul>li>ul>li.on>a {color:#3361c7;}
	nav.mobile .gnb>ul>li>ul>li.on>a:before {}
	
	
	.headerH {height:55px ! important;}
	
	
	/* lnb */
	.lnb {position:relative; margin-top:100px; height:460px; background-position:center center; background-size:cover; background-repeat:no-repeat;}
	.lnb::before {content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:#355f92; opacity:.2;}
	.lnb p {position:relative; z-index:9; width:100%; text-align:center; font-size:24px; font-weight:400; line-height:1; padding-top:160px; color:#fff;}
	.lnb p span {font-size:48px; font-weight:500; display:block; padding-top:35px;}
	.lnb ul {position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:1200px; background:#fff; font-size:0; text-align:center;}
	.lnb ul li {display:inline-block; padding:0 45px;}
	.lnb ul li a {font-size:16px; font-weight:400; color:#000; padding:28px 0 21px; border-bottom:5px solid rgba(255,255,255,0); line-height:1;}
	.lnb ul li.on a {display:block; color:#3361c7; border-bottom:5px solid #3361c7;}
	.lnb ul li a:hover {color:#3361c7;}
	
	.lnb.company {background-image:url(../images/common/sub_company.jpg);}
	.lnb.production {background-image:url(../images/common/sub_company.jpg);}
	.lnb.dataroom {background-image:url(../images/common/sub_company.jpg);}
	.lnb.customer {background-image:url(../images/common/sub_company.jpg);}
	
	/* 서브타이틀 */
	section.titleArea {background:#f3f3f3; width:100%; height:75px;}
	section.titleArea .titleWrap {width:100%; padding:0 20px; overflow:hidden;}
	section.titleArea .titleWrap h2 {float:left; margin-top:25px; font-size:27px; font-weight:400; color:#000; padding-left:42px; background:url(../images/common/titleBefore.png)left center no-repeat;}
	section.titleArea .titleWrap ul {float:right; margin-top:35px;}
	section.titleArea .titleWrap ul li {float:left; line-height:1; font-size:14px;}
	section.titleArea .titleWrap ul li+li {padding-left:20px;}
	
	
	/* 컨텐츠 */
	.contents>[class*='-wrap'] {width:100%; padding:50px 20px;}


	/* footer */
	body footer {padding:50px 0 30px; background:#fff; border-top:1px solid #d1dee2;}
	body footer .footer-wrap {width:100%; padding:0 20px;}
	body footer .footer-wrap>div {}
	body footer .footer-logo {text-align:center; height:60px; padding-bottom:15px;}
	body footer .footer-logo img {height:100%;}
	body footer .footer-info {text-align:center;}
	body footer .footer-info address {}
	body footer .footer-info address p {font-size:14px; overflow:hidden;}
	body footer .footer-info address p span {display:block; font-size:14px;}
	body footer .footer-info p.copy {font-size:14px;}
	
	
	
}





/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width:767px) {
	.pc {display:none !important;}
	
	header .head h1 a {padding-top:15px;}
	header .head h1 a img {height:25px;}
	
	/* 서브타이틀 */
	section.titleArea {height:60px;}
	section.titleArea .titleWrap h2 {font-size:21px; background-size:20px; padding-left:25px; margin-top:20px;}
	section.titleArea .titleWrap ul {margin-top:30px;}
	section.titleArea .titleWrap ul li {font-size:12px;}
	section.titleArea .titleWrap ul li+li {padding-left:10px;}
	
	/* 컨텐츠 */
	section.contents>[class*='-wrap'] {padding:30px 20px;}
	section.contents>[class*='-wrap'] h2 {font-size:36px; padding-bottom:30px;}
	
	
	
	/* footer */
	/*footer {padding:20px 0;}*/
	body footer address {}
	body footer address ul {display:block; padding:0 20px 0 25%;}
	body footer address ul li {display:block;}
	body footer address ul li+li {margin:20px 0 0;}
	
	
}