/* BASIC css start */ /* 최상단 배너 영역 */ #topBanner { display:none; position:relative; width:100%; height:100px; overflow:hidden } #topBanner .bnnr_bx { margin-left:-951px; position:absolute; top:0; left:50%; width:1903px; height:100px } #topBanner .bnnr_bx img { display:block } #topBanner .bnnr_bx p.bt_closeBanner { margin-left:560px; position:absolute; top:10px; left:50%; width:50px; height:50px; text-indent:-9999em; cursor:pointer; z-index:10; background:url(/design/hangso1/phps/common/btn_topbanner_close.png) 0 0 no-repeat; } /* header */ #header { position:relative; width:100%; background:#fffdf7; z-index:100 } #header.act { margin-top:-80px; position:fixed; top:0; left:0; right:0 } #header .headerTop { margin:0 auto; position:relative; width:1200px; height:80px; *zoom:1 } #header .headerTop:after { display:block; clear:both; content:'' } #header .headerTop .tlogo { position:absolute; top:19px; left:0 } #header .headerTop .topRight { float:right } #header .headerTop .topRight .helps { padding-top:30px; float:left } #header .headerTop .topRight .helps li { float:left; border-left:1px solid #d9d9d9 } #header .headerTop .topRight .helps li.first { border-left:none } #header .headerTop .topRight .helps li a { display:block; margin:0 15px; font-size:13px; color:#616161; line-height:20px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent } #header .headerTop .topRight .helps li a:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: -10px; background: #fc7d58; height: 1px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.7s; transition-duration: 0.7s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #header .headerTop .topRight .helps li a:hover:before, #header .headerTop .topRight .helps li a:focus:before, #header .headerTop .topRight .helps li a:active:before { left:0; right:0 } #header .headerTop .topRight .tnb { padding-top:12px; float:left } #header .headerTop .topRight .tnb li { padding:0 18px; float:left } #header .headerTop .topRight .tnb li.last { padding-right:0 } #header .headerTop .topRight .tnb li a { display:block; text-align:center; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent } #header .headerTop .topRight .tnb li a:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: -5px; background: #fc7d58; height: 1px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.7s; transition-duration: 0.7s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #header .headerTop .topRight .tnb li a:hover:before, #header .headerTop .topRight .tnb li a:focus:before, #header .headerTop .topRight .tnb li a:active:before { left:0; right:0 } #header .headerTop .topRight .tnb li .ico { display:inline-block; width:22px; height:24px; background:url(/design/hangso1/phps/common/sp_tnb.png) 0 0 no-repeat } #header .headerTop .topRight .tnb li .ico1 { background-position:0 0 } #header .headerTop .topRight .tnb li .ico2 { background-position:0 -24px } #header .headerTop .topRight .tnb li .ico3 { background-position:0 -48px } #header .headerTop .topRight .tnb li .ico4 { background-position:0 -72px } #header .headerTop .topRight .tnb li .ico5 { background-position:0 -96px } #header .headerTop .topRight .tnb li .ico6 { width:24px; background:url(/design/hangso1/phps/m/m_header_guide_icon.png) 0 4px no-repeat; background-size:24px auto } #header .headerTop .topRight .tnb li .tx { display:block } #header .headerBottom { height:42px; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9 } #header .headerBottom .inner { margin:0 auto; position:relative; width:1200px; *zoom:1 } #header .headerBottom .inner:after { display:block; clear:both; content:'' } #header .headerBottom .inner .gnbArea { padding-right:292px; position:relative; height:42px } #header .headerBottom .inner .gnbArea ul { *zoom:1 } #header .headerBottom .inner .gnbArea ul:after { display:block; clear:both; content:'' } #header .headerBottom .inner .gnbArea > ul > li { float:left } #header .headerBottom .inner .gnbArea > ul > li .depth1 { display:block; margin-top:-1px; text-align:center; height:44px; font-size:18px; color:#090909; font-weight:bold; line-height:45px; width:88px; } #header .headerBottom .inner .gnbArea > ul > li .depth1.wth1 { width:151px; } #header .headerBottom .inner .gnbArea > ul > li .depth1.wth2 { width:151px; } #header .headerBottom .inner .gnbArea > ul > li .depth1.wth3 { width:151px; } #header .headerBottom .inner .gnbArea > ul > li .depth1.wth4 { width:151px; } #header .headerBottom .inner .gnbArea > ul > li .depth1.wth5 { width:151px; } #header .headerBottom .inner .gnbArea > ul > li .depth1.wth6 { width:151px; } #header .headerBottom .inner .gnbArea > ul > li .depth1.wth7 { width:151px; } #header .headerBottom .inner .gnbArea > ul > li.active .depth1 { color:#fff; background:#ec7956 } #header .headerBottom .inner .gnbArea > ul > li .depth2Area { display:none; position:absolute; top:43px; left:0; width:1198px; min-height:250px; border:1px solid #d9d9d9; border-top:none; background:#fffdf7; -webkit-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.5); box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.5); z-index:10 } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx { padding:30px 0; overflow:hidden; *zoom:1 } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx:after { display:block; clear:both; content:'' } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx > li { margin-left:-1px; padding:0 30px; float:left; width:170px; min-height:204px; border-left:1px solid #f4f4f4 } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx > li > .depth2 { display:block; padding:0 10px 0 16px; position:relative; height:36px; font-size:14px; color:#fff; line-height:34px; background:#afafaf } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx > li > .depth2 .ico { position:absolute; top:16px; right:10px; width:8px; height:4px; background:url(/design/hangso1/phps/common/arr_gnb.gif) 0 0 no-repeat } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx > li > .depth3 { padding:10px 0 } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx > li > .depth3 li a { display:block; padding:0 0 0 16px; height:28px; font-size:14px; color:#000; line-height:30px } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depth2Bx > li > .depth3 li a:hover { text-decoration:underline } #header .headerBottom .inner .gnbArea > ul > li .depth2Area .depthBnnr { position:absolute; top:30px; right:30px } #header .headerBottom .inner .searchArea { position:absolute; top:0; right:0; width:290px; height:42px; border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; background:#f1f1f1 } #header .headerBottom .inner .searchArea .search { margin-right:45px } #header .headerBottom .inner .searchArea .search span {padding: 0 10px 0 16px;font-size:14px;color:#919191;line-height: 42px;} #header .headerBottom .inner .searchArea .search input { padding-left:10px; width:235px; height:41px;font-size:14px; line-height:42px; border:none;background:#f1f1f1;vertical-align: top;} #header .headerBottom .inner .searchArea .search a { display:block; position:absolute; top:0; right:0; width:45px; height:42px; text-indent:-9999em; background:url(/design/hangso1/phps/common/btn_search.gif) 0 0 no-repeat } /* BASIC css end */