@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2017-05-30
******************************************************** */

@import url("./font.css");	/* 나눔고딕 */ 
/* @import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css'); */
@import url('https://fonts.googleapis.com/css?family=Raleway');

/* layout */
body, table, th, td, button, select, input {
	font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}

body { background-color:#fff; }
#wrap { min-width:1200px; overflow:hidden;} /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 =>  제품 카테고리의 갯수가 늘어나면  min-width  를 같이 늘려줘야 함*/
.area{ width:1200px; margin:0px auto; } /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area2{ width:1770px; margin:0px auto; }
.font-rale {font-family: 'Raleway','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;;}
.clearfix {*zoom:1;}
.clearfix:after {display:block; content:""; clear:both;}

/* ******************  HEADER ********************** */
#headerInner { height:66px; margin:0 auto; color:#ce254e;  position:relative;}
#header { width:100%; position:relative; }
#header:after{content:""; position:absolute; top:0px; left:50%; margin-left:-330px; width:100%; height:5px; z-index:99;}
#header .logo {position:absolute; left:50%; margin-left: -885px; top:50%; margin-top:-23px; z-index:9999;}

/* GNB */
#gnb {position:absolute; top:0; right:0; height:66px; width:100%; background-color:#fff;/* background:url("/kr/images/main/gnb_bg.jpg") repeat-x center -9px; */z-index:999;}
#gnbList{margin:0 66px 0 2%; padding-left:130px; position:relative; z-index:9999; } 
#gnb > ul {/* position:absolute; top:0; right:66px;  height:66px; */}
#gnbList > ul {height:66px; text-align:right; }
#gnbList > ul > li {/* float:left; */ display:inline-block; position:relative; height:66px; margin-left:-4px; }
#gnbList > ul > li.menu-btn a{padding:0;}
#gnbList > ul > li  img {margin-left:8px; }
#gnbList > ul > li > a {position:relative; top:-1px;display:block; height: 66px; min-width:50px; text-align:center; font-size:17px; font-weight:400; line-height:66px; color:#222; padding:0 30px;}

/* GNB 하위 */
#gnbList > ul > li ul{display:none;}
#gnbList > ul > li .gnb-2dep {position:absolute; top:66px; left:-1px; width:100%; z-index:99; text-align:center; background-color:#FAF7FF;  border-top:1px solid #eee; padding:16px 0;}
#gnbList > ul > li .gnb-2dep:hover {border-top: 1px solid #936ED9;}
#gnbList > ul > li .gnb-2dep li{position:relative; margin-top:-1px;}
#gnbList > ul > li .gnb-2dep > li:first-child,
#gnbList > ul > li .gnb-2dep > li .gnb-3dep li:first-child{
	margin-top:0;
}
#gnbList > ul > li .gnb-2dep > li a{
	display:block; color:#555; font-size:15px;  padding:10px; color:#666666; line-height:18px; word-break:break-all;
	-webkit-transition:background-color 0.2s;-moz-transition:background-color 0.2s;-o-transition:background-color 0.2s;-ms-transition:background-color 0.2s;transition:background-color 0.2s
}
#gnbList > ul > li .gnb-2dep > li a:hover{color:#9571d9;}
#gnbList > ul > li .gnb-2dep > li.on > a{border-right:0; background:#a1cb3a url(/images/layout/gnb_3dep_on_arrow.png) no-repeat 100% 50%}
#gnbList > ul > li .gnb-2dep > li .gnb-3dep{position:absolute; top:0px; left:100%; margin-left:-1px; width:220px; z-index:-1;}
#gnbList > ul > li .gnb-2dep > li .gnb-3dep li a:hover {background-color:#a1cb3a;color:#fff}
#gnb.fixed{position:fixed; top:0px; left:0px; width:100%; background-color:#fff; border-bottom:1px solid #ddd;}
/* TOTAL MENU */

.en-header .total-menu-list > li > ul { padding:25px 25px 0 45px; }

#totalMenuCon{display:none; width:100%; background-color:#FAF7FF; position:absolute; top:66px;  z-index:99; border-top:1px solid #ddd; height:715px}
#totalMenuInner{width:1098px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
#totalMenuInner > h2{float:left; width:178px; padding:30px 20px; color:#333; font-weight:400; font-size:22px; line-height:35px; letter-spacing:-1.5px;}
#totalMenuInner > h2 strong{color:#2f90c7; font-weight:400;}

.total-menu-list{float:left; width:100%;}
.total-menu-list > li{position:relative; float:left; width:25%;  background-color:#fff; }
.total-menu-list > li h3{height:60px; text-align:center; border-left:1px solid #ddd; font-size:17px; line-height:60px; color:#000; font-weight:500; border-bottom:1px solid #ddd;}
.total-menu-list > li > ul{height:500px; padding:25px 25px 0 75px; border-left:1px solid #ddd;}
.total-menu-list > li > ul:before{display:none; position:absolute; content:""; top:60px; left:35px; width:150px; height:1px; background-color:#fff;}
.total-menu-list > li.total-menu2 > ul{padding-left:40px;}
.total-menu-list > li > ul > li a{display:block; padding-bottom:20px; color:#777; font-size:14px;}
.total-menu-list > li > ul > li > .gnb-3dep li:before{display:inline-block; content:"-"; margin-right:5px;}
.total-menu-list > li > ul > li > .gnb-3dep a{display:inline-block !important; font-size:12px;}
/*.total-menu-list > li:hover{background-color:#9ec83a}
.total-menu-list > li:hover > h3{color:#fff;}
.total-menu-list > li:hover > ul:before{display:block;}
.total-menu-list > li:hover > ul > li a,.total-menu-list > li:hover > ul > li > .gnb-3dep li:before{color:#fff;}*/
#gnbBg,#totalGnbBg{display:none; position:fixed; top:0px; left:0px;width:100%; height:100%; background-color:#000; background-color:rgba(0,0,0,0.5); z-index:99;}
#totalMenuBg{position:absolute; top:66px; left:0px; width:100%; height:500px; background-color:#FAF7FF; display:none; z-index:11; border-top:1px solid #eee;z-index:99;}
.menu-btn {position:absolute; display:inline-block; width:66px; height:66px; right:0; top:0;}
.menu-btn a {display:block; height:66px; text-align:center; line-height: 66px;}
.total-menu-open {background-color:#9672DA; z-index:12;}
.nav-open-btn {	
	display:inline-block;
	vertical-align: middle;
    transition: all 0.7s;
    -webkit-transition: all 0.7s;
    -oz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    z-index: 999999;
}

.nav-open-btn .line {
    display: block;
    width: 26px;
    height: 2px;
    background-color: #fff;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.nav-open-btn.active .line:nth-child(1) {
    -webkit-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    -o-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}

.nav-open-btn.active .line:nth-child(2) {
    opacity: 0;
}

.nav-open-btn.active .line:nth-child(3) {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    -o-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}

.util-list {position:fixed; top:0; right:0; z-index:98; box-shadow:-1px 1px 5px #ddd; background-color:#fff;}
.util-list li {position:relative;width:65px; height:65px; text-align:center; line-height: 66px; border: 1px solid #DDDDDD; border-top: 0;}
.util-list .util-top {border-top: 1px solid #ddd;}
.util-list li a {display:block; height:66px;}
.util-list .util-hover {position:absolute; top:0; left:0; width:66px; height:41px; background-color:rgba(151, 115, 218, 0.8); text-align:center; line-height: 17px; color:#fff; font-size:15px; letter-spacing: -0.1px; font-weight: 500; opacity:0;filter:Alpha(opacity=0); padding-top: 25px;}
.util-list .util-hover.long {padding-top: 15px; height:51px;}
.util-list li:hover .util-hover {opacity:1;filter:Alpha(opacity=100);}
.util-list .side-logo {opacity:0;filter:Alpha(opacity=0); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; }
.util-list .side-logo  img {width:100%;}
.side-logo a {background-color:#9671DA;}
.side-logo.scroll{opacity:1;filter:Alpha(opacity=100);}

@media all and (max-width:1857px){
	#header .logo{left:2%; margin-left:0;}
}

@media all and (max-width:1220px){
	#header .util-list {z-index:999;}
	#header .util-list .side-logo{opacity:1;filter:Alpha(opacity=100);}
}
/* ******************  FOOTER ********************** */
#footer { background-color:#6B40A4; }
#footerInner { height:98px; padding-top: 25px; margin:0 auto; color:#8a6d3b; text-align:center; font-size:14px; line-height: 22px; color:#fff;}
#footer .foot-logo {text-align:center; height:70px; padding-top: 25px; border-bottom: 1px solid #8966B6;}
#footerInner .copy {margin-top: 15px;}

/* ****************** SUB LAYOUT ********************** */
#container { background-color:#fff; overflow:hidden; }
#visual { width:100%; height:350px; margin:0 auto; position:relative; }
#middleArea { overflow:hidden; }
#sidebar { width:200px; height:500px; background-color:#f4f8fa; color:#34789a; float:left; }
#content { width:1200px; min-height:500px;  padding-bottom: 95px;}
#mainContent {min-height:700px;}