.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0} /* ****************** HEADER ********************** */ #header{position:relative; -webkit-transition:top 0.5s;-moz-transition:top 0.5s;-o-transition:top 0.5s;-ms-transition:top 0.5s;transition:top 0.5s} #headerInnerWrap{position:fixed; top:0; left:0; height:100px; width:100%; z-index:99; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;} #headerInner{position:relative; margin:0 100px; } #header .logo{position:absolute; z-index:100; top:40px; left:0; width:270px; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s} /* padding값 적절히 바꿔주세요 */ #header .logo img{ display:block; width:100%;} #headerInner .area{ text-align:right;} /* Header :: 사이트맵(기본형 or 커스텀) */ .sitemap-line-btn{float:left; width:32px; height:32px; margin-left:7px; margin-top: 26.5px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; overflow: hidden;} .sitemap-line-btn .line{display:block; width:18px; height:2px; background-color:#333; border-radius:5px; margin: 4px auto;} /* -------- Header :: GNB(PC) -------- */ #gnb{ display:inline-block; padding-top:20px; vertical-align:top} #gnb > ul{display:inline-block; *display:inline;*zoom:1;} #gnb > ul > li{position:relative; float:left;} #gnb > ul > li > a{position:relative; z-index:100; display:block; height:100px; line-height:100px; padding:0 45px; text-align:center; color:#fff; font-size:21px; letter-spacing:-0.65px; font-weight:500; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;} #header.fixed #gnb.each-menu > ul > li:nth-child(1) .gnb-2dep {width: 150px} #gnb.each-menu > ul > li:nth-child(1) .gnb-2dep {width: 150px} /* GNB :: 2차 각각메뉴 */ #gnb.each-menu > ul > li .gnb-2dep{ display:none;position:absolute; top:100px; left:0px; z-index:102;width:100%; text-align:left; background-color:#222834; } #gnb > ul > li .gnb-2dep ul{padding: 30px 0;} #gnb > ul > li .gnb-2dep ul li{position:relative; padding:0 20px;} #gnb > ul > li .gnb-2dep ul li a{display:block; text-align:left; color:#a7a9ae; font-size:19px; line-height:40px; letter-spacing: -0.65px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} #gnb > ul > li .gnb-2dep ul li a:hover{color: #fff; padding-left:15px; } #gnb > ul > li .gnb-2dep ul li a:before{position:absolute; top:15px; left:20px;content:""; width: 9px; height: 4px; background-color: #fff; opacity:0;filter:Alpha(opacity=0); -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} #gnb > ul > li .gnb-2dep ul li a:hover:before{ opacity:1.0;filter:Alpha(opacity=100);} .hd_login { display:inline-block; vertical-align:top; padding-top:50px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .hd_login li { display:inline-block;margin:0 5px;border-left:1px solid #ccc;padding-left:10px;line-height:13px} .hd_login li:first-child {border-left:0} .hd_login a {color:#fff; font-size:17px;} /* #gnb.each-menu > ul > li:nth-child(4) .gnb-2dep ul, #gnb.each-menu > ul > li:nth-child(7) .gnb-2dep ul, #gnb.each-menu > ul > li:nth-child(8) .gnb-2dep ul {display: none;} */ /* -------- Header :: GNB(Mobile) -------- */ .nav-open-btn{display:none;} #gnbM{display:none} /* 모바일 언어선택 */ #header.fixed .logo{width:190px; top:15px; background:url(../img/common/logo_fixed.png) no-repeat; background-size:100% auto; height:50px;} #header.fixed .logo a{ display:block; width:100%; height:100%;} #header.fixed #gnb{ padding-top:0} #header.fixed .hd_login{ padding-top:20px;} #header.fixed .hd_login a{ color:#555;} @media all and ( min-width: 1221px ){ /* -------- Header :: 스타일변경 -------- */ /* Header :: 마우스 OVER 스타일 (마우스 오버시 헤더의 배경색이 변경되는 경우에만 삽입) */ #header.fixed-header.over #headerInnerWrap{background:#fff;} #header.fixed-header.over .header-search-open-btn{border-color:#ff6100; color:#ff6100;} #header.fixed-header.over .header-lang{border-color:#ff6100;} #header.fixed-header.over .header-lang .lang-open-btn{color:#ff6100} #header.fixed-header.over .sitemap-line-btn .line{background-color:#ff6100} #header.fixed-header.over .sitemap-custom-btn{color:#ff6100; border-color:#ff6100; } #header.fixed-header.over #gnb{border-color:rgba(0,0,0,0.2)} #header.fixed-header.over #gnb > ul > li > a{color:#333;} #header.fixed-header.over #gnb > ul > li > a:hover,#header.fixed-header.over #gnb > ul > li.on > a{color:#fff;} /* Header :: FIXED 스타일 (PC스타일) */ #header.fixed .logo img{ display:none;} #header.fixed #headerInnerWrap{top:0; height:85px; box-shadow: 12px 9px 17px #0000001c; background:#fff;} #header.fixed #gnb > ul > li > a{height:85px; line-height:85px; font-size:21px;} #header.fixed #gnb.each-menu > ul > li .gnb-2dep{ top:85px;} #header.fixed .hd_login{ padding-top:17px;} #header.fixed #gnb > ul > li > a{ color:#222;} } @media all and ( max-width: 1920px ){ #header .logo{ width:200px;} #headerInnerWrap{ height:85px;} #gnb > ul > li > a{ font-size:17px; height:85px; line-height:85px; padding:0 25px;} #gnb.each-menu > ul > li .gnb-2dep{ top:85px;} #gnb > ul > li .gnb-2dep ul{ padding:20px 0;} #gnb > ul > li .gnb-2dep ul li a{ font-size:16px; line-height:35px;} .hd_login{ padding-top:45px;} .hd_login a{ font-size:15px;} #header.fixed #headerInnerWrap{ height:70px;} #header.fixed .logo { width:170px; top:10px;} #header.fixed #gnb > ul > li > a{ height:70px; line-height:70px; font-size:17px;} #header.fixed #gnb.each-menu > ul > li .gnb-2dep{ top:70px;} #header.fixed #gnb > ul > li .gnb-2dep ul li a{ font-size:15px;} #header.fixed .hd_login{ top:25px;} } @media all and ( max-width: 1700px ){ #gnb > ul > li > a{ font-size:18px; padding:0 20px;} #headerInner{ margin:0 50px;} #gnb > ul > li .gnb-2dep ul li a{ font-size:15px;} } @media all and ( max-width: 1440px ){ /* -------- Header :: GNB(PC) -------- */ #header .logo{ width:160px;} #gnb > ul > li > a{font-size:16px;padding:0 15px;} #gnb > ul > li .gnb-2dep ul li a{font-size:13px; line-height:25px;} } @media all and ( max-width: 1220px ){ #header, #headerInnerWrap, #headerInner{height:55.5px;} #header .logo{padding:5px 0;} /* padding값 적절히 바꿔주세요 */ #header .logo a{-webkit-background-size: 60%; background-size: 60%; background-position: center left;} #header.fixed .logo { width:135px; top:10px;} #header.fixed #headerInnerWrap{box-shadow: 1px 1px 3px rgba(0, 0, 0, .1); background:#fff; height:55.5px;} #header.fixed-header.fixed #headerInnerWrap{top:0; background-color:#ff6100; } /* -------- Header :: UTIL BOX -------- */ .header-util-box{padding-right:35px;} /* Header :: 사이트맵 버튼 */ .sitemap-line-btn, .sitemap-custom-btn{display:none;} /* Header :: 검색 버튼, 언어선택 버튼 */ .header-search-box {display: none;} .header-lang {display: none;} /* -------- Header :: GNB(Pc) -------- */ #gnb{display:none;} .gnb-overlay-bg{display:none} /* -------- Header :: GNB(Mobile) -------- */ #gnbM{ display:block; overflow-y:auto; position:fixed; top:0px; right:-102%; width:100%; height:100%; max-width:100%; background-color:#f2f2f2; z-index:999; box-shadow:-2px 1px 11px rgba(0, 0, 0, .3); transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -oz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); /* gnb OPEN 속도 */ visibility:hidden; } #gnbM.open{ right:0px; visibility:visible; } #gnbM .header-lang {display: block;} #gnbM #navigation{margin-top:55px; text-align: center;} /* Header 높이값 */ /* GNB Mobile :: 1차 */ #gnbM #navigation > li{} #gnbM #navigation > li > a {position:relative; display:block; padding:20px 15px; color:#111; font-size:20px; font-weight: 500; letter-spacing: -0.75px;} #gnbM #navigation > li.active > a{color:#286abd;} #gnbM #navigation > li.has-2dep > a{} #gnbM #navigation > li.has-2dep.active > a{} /* GNB Mobile :: 2차 */ #gnbM #navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#fff; color:#333; } #gnbM #navigation > li .gnb-2dep > li{} #gnbM #navigation > li .gnb-2dep > li > a{display:block; color:#333; font-weight: 400; letter-spacing: -0.75px; font-size:13px; padding:10px 15px;} #gnbM #navigation > li .gnb-2dep > li.on > a{opacity:1.0;filter:Alpha(opacity=100); text-decoration:underline;} /* GNB Mobile :: 3차 */ #gnbM #navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:10px 20px; background-color:#aaa;} #gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;} #gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;} .gnb-2dep li a{ color:#555; line-height:35px;} /* -------- Header :: 네비게이션 오픈 버튼 -------- */ .nav-open-btn{ display:block; position:fixed; width: 55.5px; height: 55.5px; background-color: #286abd; top:0px; right:0px; z-index:9998; transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -oz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); } .nav-open-btn .line{ display:block; width:16px; height:2px; background-color:#fff; border-radius:5px; margin: 4px 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{background-color: transparent;} .nav-open-btn.active .line{background-color:#222;} .nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4){opacity: 0;} .nav-open-btn.active .line:nth-child(1){ -webkit-transform: translateY(6px) rotate(45deg); -ms-transform: translateY(6px) rotate(45deg); -o-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg); } .nav-open-btn.active .line:nth-child(3){ -webkit-transform: translateY(-6px) rotate(-45deg); -ms-transform: translateY(-6px) rotate(-45deg); -o-transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg); } #header.fixed-header .nav-open-btn .line{background-color:#fff} #header .logo{ background:url(../img/common/logo_fixed.png) no-repeat; background-size:100% auto; height:35px; top:10px; width:137px;} #header .logo a{ display:block; width:100%; height:100%;} #header .logo img{ display:none;} .hd_login{ display:none;} } @media all and ( max-width: 800px ){ /* -------- Header :: UTIL BOX -------- */ .header-util-box{padding-right:28px;} /* Header :: 사이트맵, 네비게이션 버튼 */ .nav-open-btn{top:0; margin-top:0;} .nav-open-btn .line{width:20px; height:2px;} .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(3){ -webkit-transform: translateY(-5px) rotate(-45deg); -ms-transform: translateY(-5px) rotate(-45deg); -o-transform: translateY(-5px) rotate(-45deg); transform: translateY(-5px) rotate(-45deg); } /* Header :: GNB(Mobile) */ #gnbM #navigation{margin-top:60px;} /* Header 높이값 */ #gnbM #navigation > li > a {font-size:15px;} #gnbM #navigation > li .gnb-2dep > li > a{font-size:13px;} #headerInner{ margin:0 10px;} }