@charset "utf-8";
/**********************************************************************
* Descript : 전체 페이지에 적용되는 레이아웃 스타일 정의
-----------------------------------------------------------------------
* 최초작성일 : 2018.04.04
* 최초작성자 : 더웹 유대경
***********************************************************************/



/**********************************************************************
* Descript : ★★★★★★★★★★★★주의 #wrap .inner 클래스 (전체 페이지에 적용됩며, 모든 하위메뉴의 레이아웃사이즈가 변경될 수 있습니다.)★★★★★★★★★★★★★★★★★★
***********************************************************************/
#wrap{position:relative; width:100%; min-height:100%; min-width:1200px; font-family: 'Open Sans', 'Nanum Gothic', '나눔고딕',  sans-serif;}
#main-container{}
#sub-container{min-height:100%;}

.inner{position:relative; max-width:1200px; margin:0 auto; box-sizing:border-box;}
@media (min-width:0) and (max-width:980px){.inner{padding:0 10px;}}
/**********************************************************************/



/**********************************************************************
* Descript : 팝업스타일
***********************************************************************/
.layer-popup{position:absolute; left:0; top:100px; z-index:9; padding:10px;}
.layer-popup a{display:block;}
.layer-popup a img{width:100%; max-width:640px;}
.layer-popup .layer-popup-close{position:relative; box-sizing:border-box; background:#111; height:35px; line-height:35px; color:#fff; padding:0 10px;}
.layer-popup .layer-popup-close label{position:absolute; left:15px; top:0; height:35px; line-height:35px; color:#fff; font-size:12px; cursor:pointer; background:url(/assets/img/common/icon_close.png) no-repeat left center; padding-left:15px;}
.layer-popup .layer-popup-close button[type="button"]{position:absolute; right:10px; top:0; height:35px; line-height:35px; color:#fff; font-size:12px; cursor:pointer;}
/**********************************************************************/



/**********************************************************************
* Descript : 메인페이지 비주얼 동영상 스타일
***********************************************************************/
#video-visual{position:relative; width:100%; height:100%; overflow:hidden; background:#000; z-index:1;}
#video-visual video{min-width:100%; min-height:100%; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#video-visual .typo-animation.active{display:block !important;}
#video-visual .video-txt{position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:1; text-align:center;  font-family: 'Open Sans', sans-serif;}
#video-visual .video-txt .typo-logo{font-size:200px; line-height:240px; letter-spacing:-16px; font-weight:700; text-align: center; color:#fff; text-shadow:0 0 30px #000;}
#video-visual .video-txt .typo-cap{font-size:55px; font-weight:400; letter-spacing:-3px; text-align: center; color:#fff; text-shadow:0 0 30px #000;}
#video-visual .video-txt b{color:#65edc5;}
/**********************************************************************/



/**********************************************************************
* Descript : Header 스타일(로고, GNB, 로그인/로그아웃)
***********************************************************************/
#header{position:relative; top:0; width:100%; height:70px; z-index:10; background:#fff;  -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.fixed{position:fixed; box-shadow:0 0 25px rgba(0,0,0,0.1); z-index:9;}
#header.up{top:-100px;}
#header.down{top:0;}
#header .inner > div{float:left; box-sizing:border-box;}
#header .logo{width:20%;}
#header .logo a{height:70px; line-height:70px; display:block;}
#header .logo a img{height:36px;}

#header .gnb-bg{position:absolute; left:0; top:70px; width:100%; height:75px; background:rgba(0,0,0,0.6); display:none;}

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


/* 1차 카테고리 */
#header .gnb-dim{display:none; position:absolute; width:100%; height:80px; left:0; top:100px; background:rgba(255,255,255,0.7);}
#header #gnb{text-align:right;}
#header #gnb .inner > ul{display:inline-block;}
#header #gnb .inner > ul > li{position:relative; float:left;}
#header #gnb .inner > ul > li:nth-child(4)::before{display:none;}
#header #gnb .inner > ul > li > a{display:inline-block; line-height:70px; height:70px; font-size:18px; font-weight:700; margin-left:80px; color:#222; box-sizing:border-box; font-family: 'Open Sans', sans-serif;}
#header #gnb .inner > ul > li > a:hover{color:#2bd1a3;}

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

#header #gnb ul li.gnb a:hover{color:#2bd1a3; text-decoration:none;}
#header #gnb ul li.gnb.active{}
#header #gnb ul li.gnb.active > a{color:#2bd1a3; border-bottom:6px solid #2bd1a3;}

/* 2차 카테고리 */
#header #gnb ul li.gnb a + ul.lnb-wrap{position:absolute; width:900px; left:-210px; top:70px; display:none;}
#header #gnb ul li.gnb a[data-text="MESSAGE"] + ul.lnb-wrap{width:300px; left:60px;}
#header #gnb ul li.gnb a[data-text="WEB"] + ul.lnb-wrap{width:300px; left:0;}
#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; font-weight:400; padding:0 25px; color:#fff;}
#header #gnb ul li.gnb a + ul.lnb-wrap li.lnb a:hover{color:#2bd1a3;}
#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:#2bd1a3;}
/**********************************************************************/



/**********************************************************************
* Descript : 메인, 서브 레이아웃
***********************************************************************/
#wrap #main-container{position:relative; width:100%;}
#wrap #sub-container{position:relative; width:100%;}
/**********************************************************************/



/**********************************************************************
* Descript : 페이지 비주얼 스타일(페이지 타이틀, 이전페이지, 다음페이지)
***********************************************************************/
#sub-visual{width:100%; background:#ddd;}
#sub-visual .inner{height:300px;}
#sub-visual[data-menu="엘치과 소개"]{} /* #sub-visual의 attr 속성 값으로 스타일 지정 할 경우 사용합니다. */
#sub-visual .sub-visual-prev, #sub-visual .sub-visual-next{position:absolute; top:50%;}
#sub-visual .sub-visual-prev a, #sub-visual .sub-visual-next a{}
#sub-visual .sub-visual-prev a span, #sub-visual .sub-visual-next a span{}
#sub-visual .sub-visual-prev{ left: 0; transform: translate(0, -50%);}
#sub-visual .sub-visual-next{ right:0; transform: translate(0, -50%);}
#sub-visual h2{position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/**********************************************************************/



/**********************************************************************
* Descript : 페이지 네비게이션(Bread Crumb)
***********************************************************************/
#breadcrumb{width:100%; background:#aaa; height:35px; text-align:right;}
#breadcrumb span{position:relative; display:inline-block; margin-left:35px; line-height:35px;}
#breadcrumb span::before{position:absolute; display:inline-block; content:'>'; right:-23px; top:0; font-size:10px;}
#breadcrumb span:last-child::before{visibility:hidden;}
#breadcrumb span.active{color:#fc0;}
/**********************************************************************/



/**********************************************************************
* Descript : 4차 카테고리 스타일
***********************************************************************/
#cnb{}
#cnb ul{}
#cnb ul li{}
#cnb ul li a{}
#cnb ul li.active{}
#cnb ul li.active a{}
/**********************************************************************/



/**********************************************************************
* Descript : 풋터 스타일
***********************************************************************/
#footer{position:relative; width:100%; background:#888888; padding:50px 0; z-index:1; text-align:center;}

#footer ul.footer-info{width:inherit; display:block;}
#footer ul.footer-info li{height:25px; line-height:25px; color:#fff; font-size:13px;}
#footer ul.footer-info li span{display:inline-block; margin-right:25px;}
#footer ul.footer-info li.copyright{margin-top:15px; color:#fff; font-size:11px;}
#footer ul.footer-info a{color:#1fbbee; font-weight:700;}
#footer select{position:absolute; top:0; right:0; background:#fff url(/assets/img/common/arrow.png) no-repeat 95% center; height:35px; line-height:35px; text-align:left; padding:0 15px; min-width:200px; cursor:pointer; margin-top:15px;}
/**********************************************************************/