@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:120px; height:55px; margin:0px auto 0; padding-top:0px; font-size:0; }
#header .logo a { display:block; height:55px; width: 120px; position:relative;}
#header .logo .nth_01 { dislplay: block; width: 120px; height: 26px; position: absolute; top: 15px; left: 0px; background:url('../images/common/logo_n.jpg') no-repeat; background-size: contain; opacity: 1; z-index: 2; transition:all 1s ease;}

#header .logo .nth_02 { dislplay: block; width: 56px; height: 42px; position: absolute; top: 5px; left: 35px; background:url('../images/common/logo_30s.png') no-repeat; background-size: contain; opacity: 0; z-index: 1; transition:all 1s ease;}

#header h1.lon span.nth_01 {opacity:0; z-index:1; transition:all 1s ease;}
#header h1.lon span.nth_02 {opacity:1; z-index:2; transition:all 1s ease;}

#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; }
.gnbWrap #gnb .logo { display:block; width:121px; height:26px; margin-left:15px; font-size:0; background:url('../images/common/logo_n.jpg') no-repeat 0 15px; background-size:121px;}
.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); -webkit-transform:rotate(45deg);}
.gnbWrap #gnb .btnClose:after { content:""; display:block; position:absolute; top:50%; width:20px; height:2px; background:#222; transform:rotate(-45deg); -webkit-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 .gnb { position:absolute; top:60px; left:0; bottom:0; right:0; border-top:1px solid #e5e5e5; 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:350px; border:1px solid #666666; font-size:13px; color:#222; text-align:center;text-transform: uppercase;}


#footerWrap { position:relative;}
#footerTop { padding:15px 10px; text-align:left; background:#f1f1f1;}
#footerTop li { float:left;}
#footerTop li.right { float:right;}
#footerTop li a { font-size:11px; color:#222; font-weight:200;}
#footerTop li a i { display:inline-block; width:3px; height:6px; margin-left:3px; vertical-align:middle; background:url('../images/common/spr.png') no-repeat -75px -7px; background-size:150px;}
#footerTop li a i.icoPhone { width:12px; height:12px; margin-top:-2px; background-position:-85.5px -4px;}

#footerMiddle { padding:13px 10px 6px; border-bottom:1px solid #575757; background:#666666; position: relative;}
#footerMiddle li { display:inline-block; margin-bottom:8px;}
#footerMiddle li:after { content:''; display:inline-block; width:1px; height:8px; margin:0 3px 0 6px; background:#858585;}
#footerMiddle li:last-child:after { display:none;}
#footerMiddle li a { font-size:11px; color:#d9d9d9; font-weight:200;}
#footerMiddle .color a { color:#ffffff;}

#footerWrap .familySite { position:absolute; top: 9px; right: 5px; width:50%; height:30px; border:1px solid #e5e5e5; background:#f4f4f4;}
#footerWrap .familySite > a { display:block; height:30px; padding:0 15px; line-height:30px; font-size:14px; color:#444444;}
#footerWrap .familySite > a:after { content:''; display:block; position:absolute; top:50%; right:18px; width:7px; height:4px; margin-top:-2px; background:url('https://www.ihoban.co.kr/res/web/images/common/spr.png') no-repeat -196px -37px; transition: all .3s ease;}
#footerWrap .familySite.on > a:after { transform:rotate(180deg);}
#footerWrap .familySite ul { display:none; position:absolute; bottom:28px; left:-1px; right:-1px; border:1px solid #d0d0d0; background:#fff; z-index:3;}
#footerWrap .familySite li {display: block; margin-bottom: 0;}
#footerWrap .familySite li::after {display: none;}
#footerWrap .familySite li + li { border-top:1px solid #e5e5e5;}
#footerWrap .familySite li a { display:block; height:30px; padding:0 15px; line-height:30px; color:#111; font-weight: bold;}
#footerWrap .familySite li a:hover { color:#f56b02; background:#fafafa; }

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

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

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

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