@charset "utf-8"; 

/*
 * --------------------------------------------------------------------------
 * descript : 레이아웃
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

 /*
 * ==========================================================================
 * Table of Contents 
 * ==========================================================================
 * 1.0 - 전체 프로젝트에 필요한 클래스(#wrap, .inner, .full, #main-container, #sub-container 등)
 * 2.0 - 해더
 * 3.0 - 서브 비주얼
 * 4.0 - 페이지 네비게이션
 * 5.0 - 풋터
 * 6.0 - 서브 비주얼 풋터
 * 7.0 - 메인 및 서브 오시는길(운영시간 안내 및 지도 api)
 * --------------------------------------------------------------------------
 */

/* --------------------------------------------------------------------------
   1.0 전체 프로젝트에 필요한 클래스(#wrap, .inner, .full, #main-container, #sub-container 등)
   -------------------------------------------------------------------------- */
#wrap{position:relative; width:100%; min-width:1400px; min-height:100%; font-family: 'Noto Sans KR', sans-serif; font-size:1em; line-height:1em; letter-spacing:0.7px;}

#main-container{min-height:600px;}
#sub-container{min-height:800px; margin-bottom:100px;}

.full{position:relative; width:100%; height:inherit; box-sizing:border-box;}
.inner{position:relative; width:100%; max-width:1200px; height:inherit; margin:0 auto;  box-sizing:border-box;}
.automation{position:relative; width:100%; height:inherit; box-sizing:border-box; text-align:center;}

@media (max-width:980px){
	.inner{padding:0 10px;}
}

a:hover{text-decoration:none;}
*::before{position:absolute; display:none; content:'';}
*::after{position:absolute; display:none; content:'';}

/* --------------------------------------------------------------------------
   2.0 해더
   -------------------------------------------------------------------------- */
/* GNB */
#header{position:relative; top:0; width:100%; height:100px; z-index:1; background:#fff; border-bottom:2px solid #5668a3;  -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#header.up{top:-100px;}
#header.down{top:0;}
#header .inner > div{float:left; box-sizing:border-box;}
#header .logo{width:20%;}
#header .logo a{display:inline-block; width:200px; line-height:100px;}


#header #gnb{width:80%; height:70px;}

/* 1차 카테고리 */
#header .gnb-dim{position:absolute; visibility:hidden; background:rgba(0,0,0,0.3); width:100%; height:80px; left:0; top:100px;}
#header #gnb{text-align:right;}
#header #gnb .inner > ul{display:inline-block;}
#header #gnb .inner > ul > li{float:left;}
#header #gnb .inner > ul > li::before{position:absolute; display:inline-block; content:''; width:9px; height:100px; right:0; top:0;}
#header #gnb .inner > ul > li:nth-child(4)::before{display:none;}
#header #gnb .inner > ul > li > a{display:inline-block; line-height:100px; height:100px; font-size:18px; font-weight:700; margin:0 50px; color:#222; box-sizing:border-box;}
#header #gnb .inner > ul > li:hover a{color:#003c9f;}

#header #gnb ul li.gnb a:hover{color:#003c9f; text-decoration:none;}
#header #gnb ul li.gnb.active{}
#header #gnb ul li.gnb.active > a{color:#003c9f; border-bottom:4px solid #003c9f;}

/* 따라다니는 바 스타일(common.js) */
#slider {position:absolute; top: 96px; left:0; width:0; height: 4px; background-color: #003c9f; z-index:-1;}


/* 2차 카테고리 */
#header #gnb ul li.gnb a + ul.lnb-wrap{position:absolute; display:inline-block; top:100px; visibility:hidden;}
#header #gnb ul li.gnb:nth-child(1) a + ul.lnb-wrap{left:200px;}
#header #gnb ul li.gnb:nth-child(4) a + ul.lnb-wrap{right:20px;}
#header #gnb ul li.gnb:hover ul.lnb-wrap{display:block;}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb{float:left;}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb a{font-size:18px; line-height:80px; font-size:15px; padding:0 25px; color:#fff;}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb a:hover{}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb.active{}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb.active a{}

#header #gnb .inner > ul > li:hover a + ul.lnb-wrap{visibility:visible;}
/* --------------------------------------------------------------------------
   3.0 서브 비주얼
   -------------------------------------------------------------------------- */
#sub-visual{position:relative; height:205px; background-position:center center; background-size:cover; background-repeat:no-repeat;}

#sub-visual[data-menu="회사소개"]{background-image:url(/assets/img/common/theme/visual_bg01.jpg);}
#sub-visual[data-menu="제품소개"]{background-image:url(/assets/img/common/theme/visual_bg02.jpg);}
#sub-visual[data-menu="생산공정"]{background-image:url(/assets/img/common/theme/visual_bg03.jpg);}
#sub-visual[data-menu="고객센터"]{background-image:url(/assets/img/common/theme/visual_bg04.jpg);}

#sub-visual .inner{height:inherit;}
#sub-visual .object{position:absolute; left:0; top:50%; transform:translate(0, -50%); width:100%; height:80px;}
#sub-visual .object .obj{position:absolute; letter-spacing:-0.3px;}
#sub-visual .object .obj0101{top:0; left:0; font-size:14px; color:rgba(255,255,255,0.7); animation:fadeInLeft 1s both 0.5s;}
#sub-visual .object .obj0101::before{ppsition:absolute; display:inline-block; width:400px; height:1px; background:rgba(255,255,255,0.2); left:0; bottom:0;}
#sub-visual .object .obj0102{top:30px; left:0; font-size:50px; line-height:1.2em; color:#fff; font-weight:700; animation:fadeInLeft 1s both 1s;}
#sub-visual .object .obj0102 b{color:#ff722d;}

#sub-visual[data-menu="고객센터"] .object{position:absolute; left:50%; top:50%; transform:translate(0, -50%); width:50%; height:80px;}
#sub-visual[data-menu="고객센터"] .object .obj{position:absolute; letter-spacing:-0.3px;}
#sub-visual[data-menu="고객센터"] .object .obj0101,
#sub-visual[data-menu="제품소개"] .object .obj0101{top:0; left:0; font-size:14px; color:rgba(0,0,0,0.7); animation:fadeInLeft 1s both 0.5s;}
#sub-visual[data-menu="고객센터"] .object .obj0101::before,
#sub-visual[data-menu="제품소개"] .object .obj0101::before{position:absolute; display:inline-block; width:400px; height:1px; background:rgba(0,0,0,0.2); left:0; bottom:0;}
#sub-visual[data-menu="고객센터"] .object .obj0102,
#sub-visual[data-menu="제품소개"] .object .obj0102{top:30px; left:0; font-size:50px; line-height:1.2em; color:#43436f; font-weight:700; animation:fadeInLeft 1s both 1s;}
#sub-visual[data-menu="고객센터"] .object .obj0102 b{color:#ff722d;}

/* --------------------------------------------------------------------------
   4.0 페이지 네비게이션
   -------------------------------------------------------------------------- */
#breadcrumb{position:absolute; width:100%; background:rgba(0,0,0,0.2); z-index:2; left:0; bottom:0;}
#breadcrumb .inner > ul > li{position:relative; float:left; border-right:1px solid rgba(255,255,255,0.5);}
#breadcrumb .inner > ul > li a,
#breadcrumb .inner > ul > li button{display:inline-block; width:100%; height:50px; line-height:50px; float:left; cursor:pointer;}
#breadcrumb .inner > ul > li > a{background:rgba(0,0,0,0.2) url(/assets/img/web/sub/theme/home.png) no-repeat center center; width:100px;}
#breadcrumb .inner > ul > li button{background:rgba(0,0,0,0.3) url(/assets/img/web/sub/theme/btn_down.png) no-repeat 90% center; padding:0 150px 0 50px; font-size:15px; color:#fff;}
#breadcrumb .inner > ul > li button.active{background:rgba(0,0,0,0.3) url(/assets/img/web/sub/theme/btn_up.png) no-repeat 90% center;}

#breadcrumb .inner > ul > li button + ul{display:none; position:absolute; width:100%; left:0; top:50px;}
#breadcrumb .inner > ul > li button + ul li{}
#breadcrumb .inner > ul > li button + ul li a{display:block; width:100%; background:rgba(0,0,0,0.5); padding:0 15px; color:#fff; box-sizing:border-box; font-weight:300; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#breadcrumb .inner > ul > li button + ul li a:hover{background:rgba(0,0,0,0.9);}

/* --------------------------------------------------------------------------
   5.0 풋터
   -------------------------------------------------------------------------- */
#footer{width:100%; background:#333;}

#footer .footer-info{display:block; padding:25px 0 25px 300px; background:url(/assets/img/common/theme/f_logo.png) no-repeat left center;}
#footer .footer-info p{height:25px; line-height:25px; color:#ddd; font-size:14px;}
#footer .footer-info p i{display:inline-block; width:1px; height:12px; background:#aaa; margin:0 15px;}
#footer .footer-info p span{display:inline-block;}
#footer .footer-info p.copyright{margin-top:15px; font-size:11px; color:#ddd;}
#footer .footer-info p.copyright a{color:#00aeff;}