@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 - 스크롤 탑
 * --------------------------------------------------------------------------
 */

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

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

.full{position:relative; width:100%; min-width:320px; max-width:640px; margin:0 auto; height:inherit; box-sizing:border-box;}
.inner{position:relative; width:100%; min-width:320px; max-width:640px; margin:0 auto; height:inherit; 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 해더
   -------------------------------------------------------------------------- */
#header{position:relative; background:#fff; top:0; width:100%; height:70px; z-index:10; border-bottom:1px solid #dddddd;}
#header.active{background:#ec1b39; margin:10px 10px 0 10px; width:calc(100% - 20px)}

#header .inner{height:inherit;}
#header .inner > div{float:left; box-sizing:border-box;}

#header .logo{width:13em;}
#header .logo a{display:inline-block; position:absolute; top:50%; left:10px; transform:translate(0, -50%); z-index:11;}
#header .logo a img{width:13em;}

/* 햄버거 버튼 스타일 및 트랜지션 */
.hamburger{position:absolute; top:50%; right:10px; transform:translate(0, -50%); z-index:11; cursor:pointer;}
.hamburger:hover {opacity: 0.7;}
.box {width:40px; height:24px; display:inline-block; position:relative;}
.bar {display:block; top:50%;}
.bar, .bar::before, .bar::after {width:40px; height:2px; background-color:#1e3da1; position:absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.bar::before, .bar::after {content: ""; display: block; }
.bar::before{top:-13px; }
.bar::after{bottom:-13px; }

.spin .bar {transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.spin .bar::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
.spin .bar::after {transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.spin.active .bar {transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.spin.active .bar::before {top:0; opacity:0; transition:top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.spin.active .bar::after {bottom:0; transform: rotate(-90deg); transition:bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }


/* 1차 카테고리 */
.gnb-dim{display:none; position:fixed; z-index:5; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.7);}

#header .inner{padding:0; margin:0 auto; min-width:200px;}
#header #gnb{position:absolute; width:100%; box-sizing:border-box; z-index:9; visibility:hidden; top:100px; opacity:0;  -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 #gnb.active{visibility:visible; top:70px; opacity:1;}
#header #gnb .inner{background:#edf4ff; box-sizing:border-box; padding:10px;}
#header #gnb .inner > ul{}
#header #gnb .inner > ul > li{position:relative;}
#header #gnb .inner > ul > li > a{position:relative; display:block; line-height:50px; height:50px; border-bottom:1px solid #cad9f1; font-size:1.1em; font-weight:400; color:#222; box-sizing:border-box; padding-left:20px; }
#header #gnb .inner > ul > li > a::before{display:inline-block; width:2px; height:13px; background:#1e3da1; left:5px; top:19px; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg);}
#header #gnb .inner > ul > li:last-child a{border-bottom:0;}


#header #gnb ul li.gnb:hover a{color:#1e3da1; text-decoration:none;}
#header #gnb ul li.gnb.active{}
#header #gnb ul li.gnb.active > a{color:#1e3da1;}

/* 2차 카테고리 */
#header #gnb ul li.gnb a + ul.lnb-wrap{position:relative; width:100%; background:#fff; display:none; z-index:10;}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb{width:100%;}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb a{display:inline-block; width:100%; font-size:1em; line-height:3.5em; font-weight:400; padding:0 25px; color:#555; box-sizing:border-box; border-bottom:1px solid #edf4ff;}
#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{color:#1e3da1;}

/**********************************************************************/


/* --------------------------------------------------------------------------
   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:20px; font-size:1em; color:rgba(255,255,255,0.7); animation:fadeInLeft 1s both 0.5s;}
#sub-visual .object .obj0101::before{ppsition:absolute; display:inline-block; width:calc(100% + 100px); height:1px; background:rgba(255,255,255,0.2); left:0; bottom:0;}
#sub-visual .object .obj0102{top:30px; left:20px; font-size:2.8em; 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:0; top:50%; transform:translate(0, -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:20px; font-size:1em; 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:calc(100% + 100px); 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:20px; font-size:2.8em; 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:relative; width:100%; background:#f9f9f9; height:50px; border-bottom:1px solid #ddd; border-top:1px solid #ddd; z-index:2;}
#breadcrumb a, #breadcrumb button{display:inline-block; vertical-align:middle; width:100%;}
#breadcrumb .full > li{}
#breadcrumb li.gnb{position:relative; float:left; width:calc(100% / 2); box-sizing:border-box;  border-right:1px solid #ddd;  border-left:1px solid #ddd; }
#breadcrumb li.gnb button{width:100%; height:50px; line-height:50px; padding:0 15px; box-sizing:border-box; text-align:left; background:url(/assets/img/common/theme/breadcrumb_down.png) no-repeat 90% center; font-size:1.1em;}
#breadcrumb li.gnb button.active{ background:url(/assets/img/common/theme/breadcrumb_up.png) no-repeat 90% center;}
#breadcrumb li.gnb ul{display:none; position:absolute; width:calc(100% + 2px); left:-1px; top:50px; background:#f9f9f9; border:1px solid #ddd; box-sizing:border-box;}
#breadcrumb li.gnb ul li{}
#breadcrumb li.gnb ul li a{display:block; padding:0 15px; height:50px; line-height:50px; border-bottom:1px solid #ddd; font-size:1em; color:#222; cursor:pointer; box-sizing:border-box;}
#breadcrumb li.gnb ul li:last-child a{border-bottom:0;}

#breadcrumb li.lnb{position:relative; float:left; width:calc(100% / 2); box-sizing:border-box;  border-right:1px solid #ddd; }
#breadcrumb li.lnb button{width:100%; height:50px; line-height:50px; padding:0 15px; box-sizing:border-box; text-align:left; background:#fff url(/assets/img/common/theme/breadcrumb_down.png) no-repeat 90% center; font-size:1.1em;}
#breadcrumb li.lnb button.active{ background:#fff url(/assets/img/common/theme/breadcrumb_up.png) no-repeat 90% center;}
#breadcrumb li.lnb ul{display:none; position:absolute; width:calc(100% + 2px); left:-1px; top:50px; background:#fff; border:1px solid #ddd; box-sizing:border-box;}
#breadcrumb li.lnb ul li{}
#breadcrumb li.lnb ul li a{display:block; padding:0 15px; height:50px; line-height:50px; border-bottom:1px solid #ddd; font-size:1em; color:#222; cursor:pointer; box-sizing:border-box;}
#breadcrumb li.lnb ul li:last-child a{border-bottom:0;}
/**********************************************************************/

/* --------------------------------------------------------------------------
   5.0 풋터
   -------------------------------------------------------------------------- */
#footer{position:relative; width:100%; line-height:28px; background:#333; color:#ddd; text-align:left; font-size:1em; left:0; bottom:0;}
#footer .inner{background:url(/assets/img/common/theme/f_logo.png) no-repeat 10px 30px; box-sizing:border-box; padding:90px 10px 30px 10px; background-size:180px;}
#footer a{color:#00aeff;}
/**********************************************************************/

/* --------------------------------------------------------------------------
   6.0 스크롤 탑
   -------------------------------------------------------------------------- */
.scroll-top{position:fixed; opacity:0; right:25px; bottom:35px; z-index:8; -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;}
.scroll-top img{width:4em;}