@charset "utf-8"; /************************************************ Version : 하이로닉 1.0 Date : 2015-05-11110 *************************************************/ #wrap {width:100%; position:relative; z-index:1; padding:20px 0 0 0; margin:0;} #footer {position:relative; z-index:3;} #section {position:relative;} #container {position:relative; z-index:2;} div.nav-new-icon{display: none} .D_T {vertical-align:top ;} /*** header *****/ #header {position:relative; max-width:1260px; height:85px; margin:0 auto;} #header h1{position:absolute; left:0; top:20px; z-index:99999; background:url(../image/common/logo.png) no-repeat;} #header h1 a{display:block; width:172px; height:44px; text-indent:-50000px} #header > ul{position:absolute; right:0; top:10px; z-index:3} #header > ul li{float:left; letter-spacing:-1px} #header > ul li a{font-size: 13px;color: #706f6f;padding: 1px 2px;margin-left: 7px} #header > ul li.on a{color: #000;border-bottom: 2px solid #000;font-weight: 900} #header #mNavBtn{display: none;} /*** header > GNB *****/ #headerWrap > nav{position:absolute; left:0; top:43px; width:100%; z-index:9999;display: block} #headerWrap > nav > ul{ width:100%;max-width: 745px;display: block;margin: 0 auto} #headerWrap > nav > ul > li{float:left; width:20%;} #headerWrap > nav > ul > li > a{display:block; height:38px; line-height:38px; padding:0; text-align:center; font-size:20px; font-weight:400; letter-spacing:-1px; color:#444} #headerWrap > nav > ul > li > .menuWrap {display:none ; position:absolute; top:32px; left:0; width:100%; margin-top: 30px;background-color: #f3f3f3} #headerWrap > nav > ul > li > .menuWrap > .lineWrap{position:relative; height:370px;max-width: 845px;margin: 0 auto;width: 100%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > p{display: inline-block;width: 17%;text-align: right;font-size: 22px;font-weight: 600;border-right: 1px solid #ccccce;box-sizing: border-box;padding: 13% 3% 13% 0;margin-top: 3.5%;margin-right: 3%;vertical-align: middle;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul{display: inline-block;width: 79%;line-height: none ;margin: 3.5% 0 0 0;padding: 0;vertical-align: middle;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li{font-size: 14px;color: #363636;font-weight: 400} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li a{padding: 6px 0;display: inline-block;color: #363636} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.strong{float: left;font-weight: 600;color: #e11b22;font-size: 16px;width: 22%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.strong > a{color: #e11b22 !important;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul a:hover, #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul a:focus{font-weight: 600} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType{} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType > a{width: 25%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul{display: none;position: absolute;left: 42%;top: 0;height: 100%;padding-top: 4.5%;box-sizing: border-box;width: 80%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul li{display: inline-block;width: 119px;margin-right: 1%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul li img{display: block;width: 100%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul li p{text-align: center;display: block;margin-top: 5px} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType.on ul{display: block;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType.on > a{display: block;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner{position: absolute;right: 0;top: 0;height: 100%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner img{position: absolute;top: 0;left: 0} #headerWrap > nav > ul > li > .menuWrap > .lineWrap.About.Us > div.navBanner img{top: 55px;left: -168px;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap.PR > div.navBanner img{top: 0px;left: -110%;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap.PR > div.navBanner div > div:nth-of-type(2){padding-top: 40px} #headerWrap > nav > ul > li > .menuWrap > .lineWrap.Support > div.navBanner img{top: 20%;left: -130%;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner div{display: inline-block;vertical-align: middle;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner p.title{color: #fff;font-size: 14px;font-weight: 100;border-radius: 100px;padding: 5px 15px;background: #e11b22;display: inline-block;margin-bottom: 5px} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner div.content{color: #000;font-size: 14px;line-height: 130%;display: block;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner div.content p{position: relative;padding-left: 9px;color: inherit;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner div.content span.sqaure{width: 4px;height: 4px;background: #000;position: absolute;left: 0;top: 6px} #headerWrap > nav > ul > li.on .menuWrap{ display: block; z-index: 99999;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul > li.on > a, #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul > li:focus > a, #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul > li:hover > a, #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul > li:active > a { color: #363636;font-weight: 600} #headerWrap > nav > ul > li.on:after {display: block;content: '';width: 0px;margin:24px auto 0;position: relative;z-index: 1;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 0px solid transparent;border-top: 10px solid #fff;z-index: 1000000;} #headerWrap > nav .close{display:none; position:absolute; right:0; top:0; width:48px; height:25px; text-indent:-5000px; background:url(../image/btn/btn_close01.png) no-repeat 0 0} /*** header > 검색 *****/ #header fieldset{position:absolute; right:0px; top:37px; z-index:99999; width:210px; height:28px; border-bottom:1px solid #000; background:none} #header fieldset input[type="text"]{border:0; background:none; width:180px;padding-top: 10px} #header fieldset input[type="button"]{float:right; border:0; background: url(../image/common/new/searchicon.png) no-repeat center 50%; width:28px; height:28px; text-indent:-5000px;background-size: 80%;} /*** header > 모바일 검색버튼 *****/ .moSearch{display:none} /*** header > 전체메뉴 *****/ #header .allBtn{position:absolute; right:0px; top:37px; z-index:3; width:85px; height:30px;} #header .allBtn button{width:85px; height:30px; margin:0; text-align:left; text-indent:10px; color:#fff; letter-spacing:-1px; background:#464748 url(../image/bul/bul_down.png) no-repeat 90% 50%; font-size:12px;} .allMenu {display:none; position:absolute; top:89px; left:0; width:100%; background:#FFF; z-index:4} .allMenu > ul{padding:40px 20px; overflow:hidden} .allMenu > ul > li{float:left; width:25%} .allMenu > ul > li > a{display:block; margin:0 20px; padding-bottom:15px; font-size:20px; font-weight:bold; letter-spacing:-1px; color:#444; border-bottom:3px solid #acacac;} .allMenu > ul > li > ul{margin:0 20px;} .allMenu > ul > li > ul > li > a{display:block; margin-bottom:15px; font-size:14px; color:#E11B22; font-weight:bold} .allMenu > ul > li > ul > li {border-top:1px solid #dfe0e0; margin-top:15px; padding-top:15px} .allMenu > ul > li > ul > li:first-child{border-top:0;} .allMenu > ul > li > ul > li ul li{line-height:190%; font-size:14px} .allMenu > ul > li > ul > li ul li a{color:#464748} .allMenu .close{position:absolute; right:0; bottom:0; width:50px; height:50px; text-indent:-5000px; background:url(../image/btn/btn_close02.png) no-repeat 0 0} /*** visual *****/ #container .visual{position:relative; z-index:1; height:210px; background:url(../image/common/visual.png) no-repeat center 0;} #container .visual.About.Us, #container .visual.company{ background:url(../image/common/visual01.jpg) no-repeat center 100%; } #container .visual.Products, #container .visual.product{ background:url(../image/common/visual02.jpg) no-repeat center 100%; } #container .visual.RECRUT, #container .visual.careers{ background:url(../image/common/visual03.jpg) no-repeat center 100%; } #container .visual.News, #container .visual.PR{ background:url(../image/common/visual04.jpg) no-repeat center 100%; } #container .visual.Support, #container .visual.customer{ background:url(../image/common/visual05.jpg) no-repeat center 100%; } #container .visual.Treatment{ background:url(../image/common/visual06.jpg) no-repeat center 100%; } #container .visual.About.Us > div dl{width: 420.5px} #container .visual.Products > div dl{width: 392.8px} #container .visual.RECRUT > div dl{width: 407.8px} #container .visual.PR > div dl{width: 297px} #container .visual.Support > div dl{width: 344.1px} #container .visual > div {max-width:1260px; height:172px; margin:0 auto; padding-top:38px; background:url(../image/common/visual_bg.jpg) no-repeat 0 100%} #container .visual > div dl{ height:89px; padding:32px 35px 0; background:#0; margin-left:0;width:94.5% !important } #container .visual > div dl dt{overflow:hidden; margin-bottom:10px; font-size:38px; font-weight:bold;color:#FFF} #container .visual > div dl strong{font-size:20px;color:#313131} #container .visual > div dl dt span{display:block; float:left; font-size:23px; margin:12px 0 0 10px} #container .visual > div dl dd{font-size:14px; line-height: 17px;color:#FFF} /*** pageNavi *****/ #pageNavi{position:relative; border:1px solid #ddd; border-width:1px 0 1px 0; margin-bottom:25px; z-index:2} #pageNavi:after{content:""; clear:both; display:block} #pageNavi > div {max-width:1260px; height:48px; margin:0 auto;} #pageNavi > div > span{display:block; float:left; width:66px; height:48px; background:url(../image/common/page_arrow.png) no-repeat 100% 0} #pageNavi > div > span > a{display:block; width:50px; height:48px; background: url(../image/icon/icon_home.png) no-repeat 50% 50%; text-indent:-5000px} #pageNavi > div > ul{float:left;} #pageNavi > div > ul > li{position:relative; float:left; background:url(../image/common/page_arrow.png) no-repeat 100% 0; padding-right:23px;} #pageNavi > div > ul > li > a{display:block; width:256px; height:48px; line-height:48px; text-indent:15px; font-size:15px; background:url(../image/bul/bul_down01.png) no-repeat 100% 50%} #pageNavi > div > ul > li.on > a, #pageNavi > div > ul > li:hover > a, #pageNavi > div > ul > li > a:hover{font-weight:bold; color:#000} #pageNavi > div > ul > li.on > ul { display: block; } #pageNavi > div > ul > li > ul{display:none; border:1px solid #d9d9d9; position:absolute; top:48px; left:-17px; width:247px; padding:10px 15px 15px; background:#f5f5f5} #pageNavi > div > ul > li:hover > ul {display: block;} #pageNavi > div > ul > li > ul li{border-bottom:1px solid #d9d9d9; padding:0 5px; height:39px; line-height:39px;} #pageNavi > div > ul > li > ul li a{color:#676767; font-size:13px} #pageNavi > div > ul > li > ul li.on a, #pageNavi > div > ul > li > ul li a:hover{color:#c51311; font-weight:bold} /*** 컨텐츠영역 *****/ #container #contArea{position:relative; max-width:1260px; margin:0 auto 45px; z-index:1} #container #contArea h2{position:relative; border-bottom:3px solid #9c9d9e; height:62px; margin-bottom:30px} #container #contArea h2 strong{position:absolute; left:0; bottom:-3px; height:62px; font-size:36px; color:#393939; border-bottom:3px solid #E11B22; letter-spacing:-2px} #container #contArea .conts{position:relative;} #container #contArea .leftArea{position:absolute; left:0; top:95px; width:280px; height:200px;} #container #contArea .leftArea p{font-size:13px; line-height:150%; padding:20px 0; letter-spacing:-1px} #container #contArea .leftArea h3{font-size:22px; letter-spacing:-1px; color:#444} #container #contArea .leftArea h3 b{color:#E11B22; margin-left:3px;} #container .boardArea .conts, #container .memberArea .conts{margin-left:330px; min-height:400px;} #container .boardArea.movie .conts { margin-left: 0; } #container .servicerArea .conts{margin-left:330px; min-height:400px;} #container #contArea.servicerArea h2 { margin-bottom:57px} #container #contArea.servicerArea .leftArea { top:120px;} #container .conts h3{ font-size:23px; color:#222; letter-spacing:-1px; margin-bottom:23px} #container .conts h3 > span{ color:#E11B22; margin-left:5px;} /*** 고객만족도*****/ .areaPoll {position:relative; overflow:hidden; padding:40px 0 40px 43px; border:1px solid #d3d3d3} .areaPoll dt{color:#333; margin-bottom:13px;} .areaPoll dd{position:relative; overflow:hidden; color:#4d4d4d;} .areaPoll dd span{display:block; float:left; height:17px; margin-right:15px;} .areaPoll dd span label{display:block; float:left;} .areaPoll dd span input{float:left;} .areaPoll dd + dd {position:absolute; min-width:367px; height:46px; top:50%; right:45px; padding-left:30px; margin-top:-23px; border-left:1px solid #e2e2e2;} .areaPoll dd > label{display:block; position:absolute; left:30px; top:0; line-height:100%; width:55px;} .areaPoll dd > p{margin:18px 72px 0 0; height:25px; border:1px solid #d3d3d3;} .areaPoll dd > p input {padding:0; margin:0; width:100%; height:23px; line-height:23px; border:0;} .areaPoll dd > input[type="button"]{position:absolute; right:0; top:18px; width:73px; height:27px; padding:0; margin:0; background:#dfdfdf;} /*** footer*****/ #footer .section01{background: #eeecec} #footer .section01 .inner{max-width:1010px; margin:0 auto; overflow:hidden;position: relative;padding: 90px 0} #footer .section01 .inner .toTop{position: absolute;right: 0;bottom: -4px} #footer .section01 .inner .footerNav > div{float: left;width: 16.6666%;padding: 0 15px;box-sizing: border-box;} #footer .section01 .inner .footerNav > div:nth-of-type(1){padding-left: 0} #footer .section01 .inner .footerNav > div:nth-last-of-type(1){padding-right: 0;margin-top: 0px} #footer .section01 .inner .footerNav > div a{display: block;text-transform:uppercase} #footer .section01 .inner .footerNav > div .nav1{font-size: 19px;border-bottom: 1px solid #a6a5a5;color: #000;font-weight: 400;padding-bottom: 10px;margin-bottom: 10px} #footer .section01 .inner .footerNav > div .nav2{font-size: 14px;font-weight: 900;color: #848282;padding: 5px 0;width: 80%} #footer .section01 .inner .footerNav > div .nav2:nth-of-type(n+3){margin-top: 30px} #footer .section01 .inner .footerNav > div .nav3{font-size: 13px;font-weight: 400;color: #b2b0b0;padding: 5px 0} #footer .section01 .inner .footerNav > div.navType2{width: 33.3333%} #footer .section01 .inner .footerNav > div.navType2 .navType2Wrap{float: left;width: 50%;word-break:break-all;} #footer .section02Wrap{background: #b7b6b6;padding: 30px 0} #footer .section02{max-width:1010px; margin:0 auto} #footer .section02 .leftArea{float:left; width:80%; margin-bottom:20px;} #footer .section02 .leftArea ul{overflow:hidden; margin-bottom:15px} #footer .section02 .leftArea li{float:left; padding:0 25px; background:url(../image/common/vline_bg.png) no-repeat left 50%} #footer .section02 .leftArea li a{display:block; font-weight:600; height:24px; line-height:24px; font-size:15px;color: #403e3e} #footer .section02 .leftArea li:first-child{background:none; padding-left:0;} #footer .section02 .leftArea address{font-style:normal; line-height:150%} #footer .section02 .leftArea address span{display:block;color: #403e3e;font-weight: 100;font-size: 14px;letter-spacing: -0.4px} #footer .section02 .rightArea{float:right; position:relative;} #footer .section02 .rightArea .familySite{text-align:right; position:relative; margin-bottom:10px; z-index:3} #footer .section02 .rightArea .familySite button{border:1px solid #a4a4a4; text-indent:32px; text-align:left; font-size:14px; background:url(../image/common/family_bg.png) no-repeat 100% 50%;color: #403e3e;padding: 8px 0;width: 195px;background-color: #f7f7f7} #footer .section02 .rightArea .familySite ul{display:none; position:absolute; top:0px; left:0; width:195px; border:2px solid #212121; background:#fff;padding: 6px 0} #footer .section02 .rightArea .familySite ul li{line-height:190%; padding-left:10px; text-align:left;} #footer .section02 .rightArea .familySite ul li a{font-size: 14px;color: #878686;padding: 6px 25px;display: block;line-height: 100%;} #footer .section02 .rightArea .familySite ul li:hover{background: #e4e3e3} #footer .section02 .rightArea .familySite ul li:focus{background: #e4e3e3} #footer .section02 .rightArea .familySite ul li:hover a{color:#333332 } #footer .section02 .rightArea .familySite ul li:focus a{color:#333332 } #footer .section02 .rightArea .familySite ul li:first-child{border-top:0} #footer .section02 .rightArea p span{margin-left:5px;} .phone_p {display:block;} .phone_m {display:none;} @media only screen and (min-width:769px) and (max-width:1260px) { /*** 컨텐츠 *****/ #container #contArea{ padding:0 20px; } #container #contArea .leftArea{left:20px;} } @media only screen and (min-width:740px) and (max-width:1200px) { } @media only screen and (min-width:740px) and (max-width:1245px) { /*** footer*****/ #footer .section01{height:auto;} /*#footer .section01 .inner{width:auto; max-width:1245px; margin:0 auto; overflow:hidden;padding-left: 15px;padding-right: 15px;box-sizing: border-box;}*/ } @media only screen and (max-width:915px) { #headerWrap > nav > ul > li > a{font-size:20px;} } @media only screen and (max-width:1140px) { #container .boardArea .conts, #container .memberArea .conts{margin-left:0;} #container .servicerArea .conts{margin-left:0;} /*** header > 검색 전메뉴버튼 *****/ #header fieldset input[type="text"] {width: 80%} #header fieldset {width: 18%} } @media only screen and (max-width:1044px) { #wrap {padding: 7px 0 0 0;} #header h1{left:15px; } #header > ul{right:15px;} /*** header > gnb *****/ #headerWrap > nav {top: 30px;} #headerWrap > nav > ul {width: 60%;padding-left: 4%} #headerWrap > nav > ul > li > a{padding:0 0px; font-size:18px;} #header .allBtn{position:absolute; right:15px; top:37px; z-index:3; width:30px; height:30px;} #header .allBtn button{width:30px; height:30px; margin:0; text-indent:-5000px; background:#464748 url(../image/btn/btn_allmenu_pad.png) no-repeat 0 0;} #header .allBtn.clicked{background:#464748 url(../image/btn/btn_allmcloase_pad.png) no-repeat 0 0;} /*** visual *****/ #container .visual{background:url(../image/common/visual.png) no-repeat center 0; height:210px;} #container .visual > div {width:auto; max-width:1044px; height:172px; margin:0 auto; padding-top:38px;/* background:url(../image/common/visual_bg.png) no-repeat 0 100%*/} #container .visual > div dl{width:345px; height:89px; padding:32px 35px 0; background:0; margin-left:0; color:0; box-sizing:border-box;} #container .visual > div dl dt{overflow:hidden; margin-bottom:10px} /*** pageNavi *****/ #pageNavi{border:1px solid #ddd; border-width:1px 0 1px 0; margin-bottom:25px;} #pageNavi:after{content:""; clear:both; display:block} #pageNavi > div {width:auto; max-width:1044px; height:48px; margin:0 auto;} /*** 컨텐츠 *****/ #container #contArea{ margin:0 20px 30px;} #container #contArea .leftArea{display:none} #container #contArea.servicerArea h2 { margin-bottom:35px} /*** 고객만족도*****/ .areaPoll {padding:20px ;} .areaPoll dd + dd { min-width:300px; right:20px; padding-left:15px;} .areaPoll dd > label{left:20px;} /*** footer*****/ #footer .section02{ margin:0 15px} #footer .section02 .leftArea{width:100%;} #footer .section02 .leftArea ul{overflow:hidden; margin-bottom:15px} #footer .section02 .rightArea{float:none; margin-bottom:30px} #footer .section02 .rightArea .familySite{text-align:left;} #footer .section02 .rightArea .familySite ul{top:62px;} } @media only screen and (max-width:860px) { #container .boardArea .conts, #container .memberArea .conts, #container .servicerArea .conts label{font-size:11px} .phone_p {display:none;} .phone_m {display:block;} #headerWrap > nav > ul {width: 65%;padding-left: 21%} #header fieldset {width: 100%} #header fieldset{display:none; top:88px; z-index:3; width:100%; right:0; height:28px; border-width:1px 0 1px 0; background:#f3f3f3} #header fieldset input[type="text"]{border:0; background:none; width:90%;} #header fieldset input[type="button"]{float:right; border:0; background: url(../image/icon/icon_search.png) no-repeat center 50%; width:28px; height:28px} .moSearch{display:block; position: absolute; z-index:55; right:10px; top:37px; width:25px; height:25px; margin:0; text-indent:-5000px;background: url(../image/common/new/searchicon.png) no-repeat center 50%;background-size: 100%} .moSearch.clicked{background:url(../image/btn/btn_searcloase_pad.png) no-repeat 50% 50% / 30px 28px;} } @media only screen and (max-width:768px) { /*** footer*****/ #footer .section01{height:auto; background:none} #footer .section01 .inner{padding: 0;overflow: visible;} #footer .section01 .inner .toTop{bottom: -3px} #footer .section01 .inner .footerNav{display: none} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > div.navBanner{display: none} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > p {} .phone_p {display:none;} .phone_m {display:block;} } @media only screen and (max-width:640px) { #wrap {padding: 0} #header {height: 9vw;border-bottom: 0;padding: 4% 0} #header h1{display: block;text-align: center;position: relative;left: 0;top: 0;background-size: auto 100%;background-position: 50% 50%;height: 100%;z-index: 50} #header h1 a{width: auto;height: 100%;width: 33%;height: 100%;display: inline-block;} #header > ul{display: none} #header > ul li{margin-left:15px; font-size:12px;} #header > ul li:last-child{display:none} #header #mNavBtn{;width: 7vw;height: 7vw;padding: 5%;box-sizing: content-box;left: 0;top: 0;display: block;position: absolute;background:url(/static/image/common/new/mnavicon.png) no-repeat 50%;background-size:4.5vw;z-index: 55} #header #mNavBtn span{width: 100%;background: #3a3a3a;height: 1vw;display: block;} /*** header > gnb *****/ .backWrap{position: fixed;left: 0 !important;z-index: 998;top: 0;height: 100%;width: 100%;background:rgba(0,0,0,0.4)} .backWrap.depth1{display: none !important;} .backWrap.depth1.on{display: block !important;} .backWrap.depth2{z-index: 1000} .backWrap.depth3{z-index: 1020} #headerWrap > nav {display: none;background: #fff;width: 92%;position: fixed;left: -100%;top: 0;z-index: 999;height: 100%;overflow: auto;box-shadow: 0 0 20px 0 #666;} #headerWrap > nav.on {display: block;} #headerWrap > nav .navHeader{padding: 4.4% 5%;height: 9vw;border-bottom: 2px solid #e4e4e4} #headerWrap > nav .navHeader a{font-size: 4.7vw;font-weight: 600;color: #5d5d5d;background: url(/static/image/common/new/navarrowleft.png) no-repeat 0% 50%;background-size:2.2vw;padding-left: 5%;display: inline-block;padding: 3% 0 3% 5%} #headerWrap > nav .navHeader img.logo{float: left;height: 100%;} #headerWrap > nav .navHeader img.closeBtn{float: right;width: 5vw;padding: 3%} #headerWrap > nav > ul {width: 100%;padding: 15vw 5% 20vw;box-sizing: border-box;float: left;border-top: none !important} #headerWrap > nav > ul > li{float: none;width: 100%;border-bottom: 1px solid #e4e4e4;} #headerWrap > nav > ul > li.on .menuWrap, #headerWrap > nav > ul > li:focus .menuWrap, #headerWrap > nav > ul > li:hover .menuWrap, #headerWrap > nav > ul > li:active .menuWrap {display: none} #headerWrap > nav > ul > li.on .menuWrap{display: block !important;} #headerWrap > nav > ul > li.on:after, #headerWrap > nav > ul > li:focus:after, #headerWrap > nav > ul > li:hover:after, #headerWrap > nav > ul > li:active:after {display: none} #headerWrap > nav > ul > li > a{text-align: left;font-size: 4.7vw;height: auto;padding: 4% 0;color: #5d5d5d;font-weight: 100;line-height: 130%} #headerWrap > nav > ul > li > a{background: url(/static/image/common/new/navarrow.png) no-repeat 100% 50%;background-size:2.5vw;} #headerWrap > nav .navFooter{width: 100%;padding: 0 5% 10%;box-sizing: border-box;} #headerWrap > nav .navFooter ul{float: left;width: 60% !important;text-align: left;} #headerWrap > nav .navFooter ul li {display: inline-block;margin-right: 7%;width: auto !important;background: none;border-bottom: none !important} #headerWrap > nav .navFooter ul li a{font-size: 4.7vw;background: none !important;border-bottom: none !important} #headerWrap > nav .navFooter ul li.active a{font-weight: 900;color: #000;border-bottom: 3px solid #000 !important} #headerWrap > nav .navFooter > a{float: right;width: 39.5%;color: #706f6f;font-size: 4.7vw;text-align: right;border-left: 1px solid #888787} #headerWrap > nav > ul > li > .menuWrap{left: -100%;top: 0;position: fixed;width: 88%;z-index: 1001 !important;background: #fff;margin: 0;height: 100%;overflow: auto;box-shadow: 0 0 20px 0 #666;} #headerWrap > nav > ul > li > .menuWrap .backWrap{position: fixed;left: 0;z-index: 100;top: 0;height: 100%;width: 100%;background:rgba(0,0,0,0.4);} #headerWrap > nav > ul > li > .menuWrap .backWrap{position: fixed;left: 0;z-index: 100;top: 0;height: 100%;width: 100%;background:rgba(0,0,0,0.4);} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > p {text-align: left;margin:0;border-right: 0;width: 100%;padding: 25% 5% 10%;box-sizing: border-box;font-size: 6vw;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > p > b{background: url(/static/image/common/new/navarrow.png) no-repeat 100% 50%;background-size:1.7vw;padding-right: 5.7vw;color: #5d5d5d;font-weight: 600} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul {padding: 0 5% 20%;box-sizing: border-box;width: 100%;display: block;margin: 0;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li{float: none ;width: 100% ;border-bottom: 1px solid #e4e4e4;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li a{text-align: left;font-size: 4.7vw;height: auto;padding: 4% 0;color: #5d5d5d;font-weight: 100;line-height: 130%;width: 100%;background: url(/static/image/common/new/navarrow.png) no-repeat 100% 50%;background-size:2.5vw;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.strong{border-bottom: 0} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.strong:nth-of-type(2){margin-top: 10vw} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.strong > a{font-weight: 900;border-bottom: 0;background: none;padding-bottom: 0} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li{float: none ;width: 100% !important} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType > a{width: 100%} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType div.productNavWrap{display: none;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType.on div.productNavWrap{display: block} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType div.productNavWrap .productNav{background: #fff;position: relative;z-index: 1030;min-height: 100%;position: fixed;width: 84.2%;height: 100%;left: -100%;top: 0;overflow: auto;box-shadow: 0 0 20px 0 #666;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul {position: relative;width: 100%;left: 0;top: 0;padding: 0 4%;height: auto;padding: 4% 4% 20%;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul > li{width: 47% !important;margin: 2% 1%;border:none;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul > li a{font-size: 3.5vw;background: none;font-weight: 600} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul > li a p{margin-top: 4.5%;font-size: 3.5vw;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > ul > li a p{text-transform: uppercase;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > p {text-align: left;margin:0;border-right: 0;width: 100%;padding: 25% 5% 10%;box-sizing: border-box;font-size: 6vw;} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .productNav > p > b {background: url(/static/image/common/new/navarrow.png) no-repeat 100% 50%;background-size:1.7vw;padding-right: 5vw;color: #5d5d5d;font-weight: 600} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .navHeader a{display: inline-block;width: auto;padding: 3% 0 3% 7%;background: url(/static/image/common/new/navarrowleft.png) no-repeat 0% 50%; background-size: 2.5vw;font-weight: 600} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .navFooter li{width: auto !important} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .navFooter li a{width: auto} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .navFooter li.active a{font-weight: 900;color: #000;border-bottom: 3px solid #000 !important} #headerWrap > nav > ul > li > .menuWrap > .lineWrap > ul li.productNavType .navFooter > a{float: right;width: 39.5%;color: #706f6f;font-size: 4.7vw;text-align: right;border-left: 1px solid #888787;padding: 0;background: none;} #headerWrap > nav > ul {width: 100%;padding: 15vw 5% 20vw;border-top: 2px solid #e4e4e4;box-sizing: border-box;float: left;} #headerWrap > nav .menuWrap > p{} #headerWrap > nav .menuWrap .lineWrap {position: relative;z-index: 1010;background: #fff;min-height: 100%} #headerWrap > nav .menuWrap .lineWrap ul > li{} #headerWrap > nav .menuWrap .lineWrap ul > li > a{} #headerWrap > nav .menuWrap .lineWrap ul > li > a{} #headerWrap > nav > ul > li > .menuWrap > .lineWrap{height: auto;max-width: none;margin: 0 auto;} /*** header > 검색 *****/ #header fieldset{display:none; top:13vw; z-index:3; width:100%; right:0; height:30px; border-width:1px 0 1px 0; background:#f3f3f3} #header fieldset input[type="text"]{border:0; background:none; width:90%;} #header fieldset input[type="button"]{float:right; border:0; background: url(../image/icon/icon_search.png) no-repeat center 50%; width:28px; height:28px} .moSearch{;width: 7vw;height: 7vw;padding: 5%;box-sizing: content-box;background-size:5vw;right: 0;top: 0} .moSearch.clicked{background: url(../image/btn/btn_searcloase_mo.png) no-repeat 50% 50% / 30px 28px;} /*** header > 전체메뉴 *****/ #header .allBtn{position:absolute; right:6px; top:8px; z-index:3; width:30px; height:30px;} #header .allBtn button{width:30px; height:28px; margin:0; text-indent:-5000px; background:url(../image/btn/btn_allmenu_mo.png) no-repeat 0 0/ 30px 28px;} #header .allBtn.clicked button{background:#464748 url(../image/btn/btn_allmclpse_mo.png) no-repeat 0 0/ 30px 28px;} .allMenu {top:46px;} .allMenu > ul{padding:0 0;} .allMenu > ul > li{float:none; width:auto} .allMenu > ul > li > a{display:block; margin:0; padding:10px 0; text-indent:8px; font-size:15px; border-bottom:0;} .allMenu > ul > li > ul{margin:0; overflow:hidden; padding-bottom:0} .allMenu > ul > li > ul > li {border-top:0; margin-top:0; padding-top:0; overflow:hidden; background:#E11B22} .allMenu > ul > li > ul > li > a{float:left; width:23%;padding-left:2%; height:30px; line-height:30px; text-indent:0px; margin-bottom:0; font-size:12px; background:#E11B22; border-top:1px solid #CE403C; color:#fff} .allMenu > ul > li > ul > li:last-child > a{border-bottom:1px solid #E11B22;} .allMenu > ul > li > ul > li ul{float:left; width:75%; background:#e5e6e6; border-top:1px solid #cecfcf;} .allMenu > ul > li > ul > li:last-child ul{border-bottom:1px solid #cecfcf;} .allMenu > ul > li > ul > li ul li{line-height:100%; font-size:12px; float:left;} .allMenu > ul > li > ul > li ul li a{color:#464748; height:30px; line-height:30px; padding:0 8px;} .allMenu .close{display:none} /*** visual *****/ #container .visual{ display:none; background:url(../image/common/visual.png) no-repeat center 0; height:105px;} #container .visual > div {width:auto;height:85px;padding-top:20px; background:url(../image/common/visual_bg.png) no-repeat 0 100%} #container .visual > div dl{width:50%; height:42px; padding:16px 17px 0;margin-left:75px;} #container .visual > div dl dt{margin-bottom:5px;font-size:17px; } #container .visual > div dl dd{font-size:10px;} /*** pageNavi *****/ #pageNavi{display:none} /*** 컨텐츠영역 *****/ #container #contArea{ margin:0 15px 20px; padding-top:20px;} #container #contArea h2{border-bottom:2px solid #9c9d9e; height:30px; margin-bottom:15px} #container #contArea h2 strong{bottom:-2px; height:30px; font-size:18px; border-bottom:2px solid #ea4d51; letter-spacing:-1px} #container #contArea .leftArea{display:none} #container .boardArea .conts, #container .memberArea .conts{margin-left:0;} #container .servicerArea .conts{margin-left:0;} #container #contArea.servicerArea h2 { margin-bottom:15px} #container .conts h3{ font-size:15px; letter-spacing:-1px; margin-bottom:10px} /*** 고객만족도*****/ .areaPoll {padding:15px ;} .areaPoll dd{position:relative;} .areaPoll dd span{display:block; float:left; height:17px; margin-right:6px;} .areaPoll dd span label{display:block; float:left; margin-left:-4px;} .areaPoll dd span input{float:left;} .areaPoll dd + dd {position:relative; min-width:280px; height:46px; top:0; right:0; padding:10px 0 0; margin-top:13px; border-left:0; border-top:1px solid #ccc;} .areaPoll dd > label{left:0px; top:10px} .areaPoll dd > input[type="button"]{top:28px;} /*#footer .section01 .inner {padding: 15% 0}*/ #footer .section01 .inner .toTop{width: 16%} #footer .section01 .inner .toTop img{width: 100%} #footer .section02Wrap{padding: 10% 0} #footer .section02{padding: 0 5%;box-sizing: border-box;position: relative;} #footer .section02 .leftArea{float:none; width:100%;margin: 0} #footer .section02 .leftArea ul{max-width:none; margin:0 auto 18%; text-align:center;height: auto} #footer .section02 .leftArea li{padding: 0 5%} #footer .section02 .leftArea li:nth-of-type(3){padding-right: 0} #footer .section02 .leftArea li a{letter-spacing:-1px;font-size:4.3vw;line-height: 130%;height: auto;} #footer .section02 .leftArea address{text-align:left; letter-spacing:-1px; font-size:11px;width: 100%} #footer .section02 .leftArea address span{display:block;font-size: 3.7vw;line-height: 110%} #footer .section02 .leftArea address span.copyright{font-size: 3.1vw;line-height: 100%;text-align: center;margin-top: 10%} #footer .section02 .rightArea{position: absolute;right: 5%;top: 15%;width: 60%} #footer .section02 .rightArea .familySite{text-align:left;width: 100%} #footer .section02 .rightArea .familySite button{width: 100%;font-size: 4.6vw;;color: #3f3f3f;text-indent: 15%;background-size: contain;font-weight: 100} #footer .section02 .rightArea .familySite ul{width: 100%;top: 0;padding: 3% 0;box-sizing: border-box;} #footer .section02 .rightArea .familySite ul li {padding: 0} #footer .section02 .rightArea .familySite ul li a{font-size: 4.3vw;padding: 4% 0%;text-indent: 15%;} #footer .section02 .rightArea p {text-align:center} .phone_p {display:none;} .phone_m {display:block;} } @-webkit-keyframes navSlide { 0% { left: -100%; } 100% { left: 0; } } @keyframes navSlide { 0% { left: -100%; } 100% { left: 0; } }