@charset "utf-8";

@import url("lib/animated.css");
@import url("lib/jquery-ui-1.10.4.custom.min.css");
@import url("lib/swiper.css");
@import url("lib/perfect-scrollbar.css");


/* ==============================
 * layout
 * ============================== */
html,body{height:100%;}
body{ font-size:13px; -webkit-text-size-adjust: 100%;}
html.hidden,
body.hidden{overflow:hidden;}

#headerWrap {}
#header { position:relative; z-index:5; width:100%; height:55px; margin:0 auto;}
#header .logo { width:51px; height:26.5px; margin:0px auto 14px; padding-top:15px; font-size:0; background:url('../images/common/logo_s.png') no-repeat 0 15px; background-size:51px; box-sizing:content-box;}
#header .logo a { display:block; height:26.5px;}
#header .btnLocation { position:absolute; top:16px; right:16px; width:21.5px; height:21px; font-size:0; background:url('../images/common/icoLocation.gif') no-repeat; background-size:21.5px;}
#header .btnSearch { position:absolute; top:6px; right:6px; width:40px; height:40px; font-size:0; background:url('../images/common/btnSearch.png') no-repeat center center; background-size:20.5px;}
#header .btnSearchClose { position:absolute; top:6px; right:6px; width:40px; height:40px; font-size:0; background:url('../images/common/btnSearchClose.png') no-repeat center center; background-size:18.5px; display:none;}
#header .btnQuick { position:absolute; top:6px; right:46px; width:40px; height:40px; font-size:0; background:url('../images/main/quick/btnQuick.png') no-repeat center center; background-size:22.5px;}

#header .btnAll { display:block; position:absolute; top:6px; left:6px; width:40px; height:40px; font-size:0;}
#header .btnAll span { position:absolute; top:50%; left:50%; width:20px; height:2px; margin-left:-10px; background:#222;  transition:all .3s ease;}
#header .btnAll span:before { content:""; display:block; position:absolute; top:6px; width:20px; height:2px; background:#222; transition:all .3s ease; }
#header .btnAll span:after { content:""; display:block; position:absolute; top:-6px; width:20px; height:2px; background:#222; transition:all .3s ease; }

#header .btnAll.on { border-color:#fff;}
#header .btnAll.on span { background:none; }
#header .btnAll.on span:before { top:50%; transform:rotate(45deg); background:#fff;}
#header .btnAll.on span:after { top:50%; transform:rotate(-45deg); background:#fff;}

#header .searchArea { position:absolute; top:55.5px; left:0; right:0; z-index:2; background-color:#f8f8f8; height:108.5px; display:none; text-align:center; border:1px solid #ebebeb; border-width:1px 0;}
#header .searchArea .search { width:70%; display:inline-block; border-bottom:2px solid #222; position:relative; margin-top:34px;}
#header .searchArea input { width:100%; padding:10px 0; border:0; font-size:16px; background:none; color:#999999;}
#header .searchArea .search .btnSearch2 { display:inline-block; width:25px; height:23px; font-size:0; background:url('../images/common/btnSearch.png'); background-size:25px; top:10px; right:0; position:absolute;}

.gnbWrap { display:none; position:fixed; top:0; left:0; bottom:0; width:100%; z-index:50;}
.gnbWrap .bg { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6);}

.gnbWrap #gnb { position:absolute; top:0; left:-100%; bottom:0; z-index:2; width:305px; background:#fff;}
/* .gnbWrap #gnb > a { display:inline-block; } topLink영역이 깨져 수정함 */
.gnbWrap #gnb .logo { display:block; width:51px; height:26.5px; margin-left:15px; font-size:0; background:url('../images/common/logo_s.png') no-repeat 0 15px; background-size:51px;}
.gnbWrap #gnb .btnClose { display:block; position:absolute; top:16px; right:16px; width:20px; height:20px; font-size:0;}
.gnbWrap #gnb .btnClose:before { content:""; display:block; position:absolute; top:50%; width:20px; height:2px; background:#222; transform:rotate(45deg);}
.gnbWrap #gnb .btnClose:after { content:""; display:block; position:absolute; top:50%; width:20px; height:2px; background:#222; transform:rotate(-45deg);}

#gnb .topLink { display:table; table-layout:fixed; width:100%; margin-top:13px; border:1px solid #e5e5e5; border-width:1px 0;}
#gnb .topLink li { display:table-cell; vertical-align: middle;text-align:center; background:#f7f7f7;}
#gnb .topLink li + li { border-left:1px solid #e5e5e5;}
#gnb .topLink li a { display:block; padding:13px 0; font-size:12px; color:#222;}
#gnb .topLink:after { display:none;}
#gnb .topLink i { display:block; width:21px; height:24px; margin:0 auto 5px; background:url('../images/common/spr.png') no-repeat; background-size:150px;}
#gnb .topLink .icoTopLink1 { background-position:-1px -125px;}
#gnb .topLink .icoTopLink2 { width:24px; background-position:-28.5px -125px;}
#gnb .topLink .icoTopLink3 { width:24px; background-position:-57.5px -125px;}
#gnb .topLink .icoTopLink4 { width:24px; background-position:-85.5px -125px;}
#gnb .topLink .icoTopLink5 { width:24px; background-position:-114px -125px;}

#gnb .gnb { position:absolute; top:129px; left:0; bottom:0; right:0; background:#f7f7f7;}
#gnb .gnb:after { content:''; display:block; position:absolute; top:0; left:101px; bottom:0; width:1px; background:#e5e5e5;}
#gnb .gnb .left { float:left; width:101px;}
#gnb .gnb .left > a { display:block; height:44px; padding-left:15px; border-bottom:1px solid #e5e5e5; line-height:44px; font-size:13px; color:#222;}
#gnb .gnb .left > a.on { color:#fff; background:#f96f00;}

#gnb .gnb .right { overflow-y:scroll; position:absolute; top:0; left:101px; right:0; bottom:0; padding:15px; background:#fff;}
#gnb .gnb .right .subBox { margin-bottom:15px;}
#gnb .gnb .right .subBox h2 { padding:10px 0; border-bottom:1px solid #595757; padding-left:9px; font-size:18px; color:#333; font-weight:500;}
#gnb .gnb .right .subBox ul {}
#gnb .gnb .right .subBox li { padding:10px 0; border-bottom:1px solid #e5e5e5;}
#gnb .gnb .right .subBox li a { display:block; padding-left:9px; font-size:13px; color:#666;}
#gnb .gnb .right .btnContactUs { display:block; padding:10px; margin-bottom:200px; border:1px solid #666666; font-size:13px; color:#222; text-align:center;text-transform: uppercase;}


#footerWrap { position:relative;}
#footerTop { padding:15px 10px; text-align:center; background:#f1f1f1;}
#footerTop li { display:inline-block;}
#footerTop li:first-child {float:left;}
#footerTop li:nth-child(2) {float:right;}
/*#footerTop li + li:before { content:''; display:inline-block; width:1px; height:8px; margin:0 3px; background:#ccc;}*/
#footerTop li a { font-size:12px; color:#222;}
#footerTop li a i { display:inline-block; width:3px; height:6px; margin-left:13px; vertical-align:middle; background:url('../images/common/spr.png') no-repeat -75px -7px; background-size:150px;}
#footerTop li a i.icoPhone { width:10.5px; height:12.5px; margin-top:-3px; background-position:-85px -4px;}

#footerMenu { padding:22.5px 0; text-align:center; background:#7d7d7d;}
#footerMenu li {display: block; width: 20%; float: left; text-align: center;}
#footerMenu li a {font-size:11px; color:#d9d9d9;}
#footerMenu li a [class*=icon] {display:inline-block;}
#footerMenu li a .icon1 {background:url('../images/common/icon_footer.png') no-repeat 0 0; background-size:235px; width:38px; height:36px; margin-right:-2px;}
#footerMenu li a .icon2 {background:url('../images/common/icon_footer.png') no-repeat -50px 0; background-size:235px; width:38px; height:36px; }
#footerMenu li a .icon3 {background:url('../images/common/icon_footer.png') no-repeat -100.5px 0; background-size:235px; width:38px; height:36px; }
#footerMenu li a .icon4 {background:url('../images/common/icon_footer.png') no-repeat -150px 0; background-size:235px; width:38px; height:36px; }
#footerMenu li a .icon5 {background:url('../images/common/icon_footer.png') no-repeat -204.5px 0; background-size:235px; width:30.5px; height:36px;}
#footerMenu li a span {display:block; font-weight:300;}

#footerMiddle { padding:9px 11px 20px; border-bottom:1px solid #575757; text-align:left; background:#666666;}
#footerMiddle li { display:inline-block; margin-top:11px;}
#footerMiddle li + li:before { content:''; display:inline-block; width:1px; height:8px; margin:0 14px; background:#858585;}
#footerMiddle li a { font-size:11px; color:#d9d9d9; font-weight:200; display:inline-block;}
#footerMiddle .color a { color:#ffffff;}

#footerBottom { position:relative; padding:11px 10px 14px; border-top:1px solid #7d7d7d; background:#666666; font-weight:300;}
#footerBottom p { color:#fff; font-size:11px; text-transform:uppercase;  }
#footerBottom .link { position:absolute; top:10px; right:10px;}
#footerBottom .link a { font-size:11px; color:#d9d9d9; display:inline-block;}
#footerBottom .link a +a:before { content:''; display:inline-block; width:1px; height:8px; margin:0 19px 0 10px; background:#858585;}

@media screen and (max-width: 1214px){
}

@media screen and (max-width:800px){
}

@media screen and (max-width:640px){
}