.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0} /* ****************** HEADER ********************** */ #header{position:absolute; height:140px; -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; height:140px; top:0; left:0; 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; background-color:rgb(0,0,0,0.3)} #headerInner{position:relative;; height:100%; } #header .logo{position:absolute; z-index:100; top:30px; left:100px; } /* padding값 적절히 바꿔주세요 */ #header .logo a{display: block;width:350px;height:78px;background:url(../img/common/logo.png) no-repeat; background-size:100% auto; font-size:0; -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 .area{ text-align:right; margin-right:150px; height:100%;} /* -------- Header :: GNB(PC) -------- */ #gnb{display: inline-block;vertical-align: top; padding-right:50px; height:100%; } #gnb > ul{display:flex; *display:inline;*zoom:1; height:100%;} #gnb > ul > li{position:relative; height:100%;} #gnb > ul > li > a{position:relative; z-index:100; display:flex;align-items: center; height:100%; line-height:100%; padding:0 57px; text-align:center; color:#fff; font-size:25px; 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;} /* 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:#222;} #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:#FC0; 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);} #gnb > ul > li:nth-child(2) .gnb-2dep, #gnb > ul > li:nth-child(3) .gnb-2dep, #gnb > ul > li:nth-child(4) .gnb-2dep, #gnb > ul > li:nth-child(5) .gnb-2dep{ display:none !important;} #gnb > ul > li { position: relative; /* 부모 요소에 position 설정 */} #gnb > ul > li .gnb-2dep { display: none; /* 기본적으로 숨김 */ position: absolute; top: 100%; left: 0; background: #fff; width: 200px; z-index: 1000;} #gnb > ul > li:hover .gnb-2dep { display: block; /* 부모 메뉴에 hover 시 서브메뉴 보이기 */} .hd_login { display:inline-block; vertical-align:top; padding-top:15px; -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:#999; font-size:17px;} /* -------- Header :: UTIL BOX -------- */ .header-util-box{ position:absolute; right:0; top:0; -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 :: 검색버튼 */ .header-search-box{position:relative; float:left; margin-left:19px; z-index:101;} .header-search-open-btn, .header-search-close-btn{width:90px; height:100px;background:none; -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-search-open-btn i, .header-search-close-btn i{font-size: 32px;} .header-search-inner-box button{ } .header-search-inner{display:none; /*overflow:hidden;*/ position:absolute; top:100px; right:0; width:600px; text-align:right;} /* padding-right: 닫기버튼의 width만큼*/ .header-search-inner .header-search-inner-box{overflow:hidden; height:83px; background-color:#286abd; color: rgba(255,255,255,0.5); position: relative;} .header-search-inner .header-search-word{height:28px; width:calc(100% - 105px); vertical-align:top; background-color:transparent; border:0; color:rgba(255,255,255,0.5); text-indent:5px; margin-top: 22px; margin-right: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); font-weight: 300; letter-spacing: -0.5px; font-size: 16px; padding-right: 50px; padding-bottom: 9px;} .header-search-inner .header-search-btn{color:rgba(255,255,255,0.5); position: absolute; right: 36px; top: 20px; background:none;} .header-search-inner .header-search-close-btn{position:absolute; top:-100px; right:0px; background-color:#286abd; color:#fff; } .header-search-box.open .header-search-inner{display:block;} .header-search-inner input::placeholder {color: rgba(255,255,255,0.5);} .header-search-btn i{ font-size:25px;} /*헤더 고정일 시*/ #header.fixed .header-search-inner-box{margin-top: -15px;} .header-search-close-btn{ height:100px;} #header.fixed .sitemap-line-btn{ margin-top:25px;} #header.fixed .header-search-open-btn{ height:85px;} /* Header :: 사이트맵(기본형 or 커스텀) */ .sitemap-line-btn{float:left; width:32px; height:32px; background:none; margin-left:7px; cursor:pointer; margin-top:32px; -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:25px; height:2px; background-color:#333; border-radius:5px; margin:7px auto;} #sitemap-layer-container{display:none;height: var(--header-height);box-sizing: border-box;-webkit-transition: all 0.35s ease;transition: all 0.35s ease; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#004f86; } #sitemap-layer-container #sitemap-layer-bg{position:absolute; display:table; width:100%; height:100%; text-align:center;} #sitemap-layer-container #sitemap-layer-box{position: relative;display: table-cell;vertical-align: middle;} /* modal layer content */ .modal-inner-content { text-align: left;} .footer-modal-content{width:96%; max-width:1500px; margin:20px auto; } .footer-modal-content h1{padding:0; text-align:center; border-bottom:1px #33729e solid; padding-bottom:30px;} #sitemap-layer-container .sitemap-btn{position:absolute; top:70px; right:70px; color:#fff; } #sitemap-layer-container .sitemap-btn i{font-size:35px;} #sitemap-layer-container .sitemap-btn i:hover {color:#fff} .footer-inner-box{padding:30px; } .footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; } /* 사이트맵 */ .sitemap-wrapper{padding:70px;} .sitemap-wrapper > ul{overflow:hidden;} .sitemap-wrapper > ul > li{float:left; width:20%; text-align:center;} /* 메뉴 갯수에 맞게 %로 계산, 두줄로 들어갈 경우 height값 설정 */ .sitemap-wrapper.menu4 > ul > li{width:25%;} .sitemap-wrapper.menu6 > ul > li{width:16.6%;} .sitemap-wrapper.menu7 > ul > li{width:14.2%;} .sitemap-wrapper > ul > li > h2{color:#fff; margin:0 2% ; padding-bottom:20px; font-size:25px;letter-spacing:-1.0px; letter-spacing:0;} .sitemap-wrapper > ul > li > h2 a{ color:#fff;} .sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5%;} .sitemap-wrapper > ul > li .sitemap-2dep a{display:block; padding:10px 0; color:#fff; font-size:20px; font-weight:400; line-height:1.2em; opacity:0.5;} .sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#fff; text-decoration:underline;} /* -------- Header :: GNB(Mobile) -------- */ .nav-open-btn{display:none;} #gnbM{display:none} /* 모바일 언어선택 */ .google_select{ display:inline-block; height:40px; overflow:hidden; position: absolute; right: 5%; top: 30%;} #google_translate_element > div > div {position: relative;min-width: 140px;height:100%;text-align:center;border-radius:30px; overflow:hidden;height:35px; line-height:35px;} #google_translate_element > div > div > select::-ms-expand { display: none;} #google_translate_element > div > div:after { content: '<>'; /* 목록 펼침 아이콘 */ font: 17px "Consolas", monospace; color: #333; transform: rotate(90deg); right: 11px; top: 18px; padding: 0 0 2px; border-bottom: 1px solid #999; position: absolute; pointer-events: none; display:none;} #google_translate_element > div > div > select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; max-width: 320px; height: 40px; float: right; margin: 5px 0px; padding: 0px 24px; font-size: 16px; line-height: 1.75; color: #333; border: 1px solid #cccccc; -ms-word-break: normal; word-break: normal; border-radius: 10px;} .sns { position: absolute; top: 500px; right: 3%;} .sns ul{ display: flex; flex-direction: column; gap: 15px;} .sns ul li{background: #fff; border-radius: 50px; display: flex; align-items: center; justify-content: center; padding: 14px; border:1px solid #ddd; } .sns ul li img{ height: 42px; box-sizing: border-box;} .sns ul li:hover {border: 2px solid #000;} @media all and ( min-width: 1920px ){ .sns {top: 400px;} .sns ul li img { height: 32px;} } @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{ top:20px;} #header.fixed .logo a { width:320px; background:url(../img/common/logo-fixed.png) no-repeat; background-size:100% auto; } #header.fixed #headerInnerWrap{top:0; height:100px; box-shadow: 12px 9px 17px #0000001c; background:#fff;} #header.fixed #gnb > ul > li > a{color:#222;} #header.fixed #gnb.each-menu > ul > li .gnb-2dep{ top:85px;} #header.fixed .hd_login{ padding-top:33px;} #header.fixed #gnb{ margin-top:0;} #header.fixed .tnbNav{ display:none;} } @media all and ( max-width: 1920px ){ #header{height:100px;} #headerInnerWrap{height:100px;} #header .logo { top:25px;} #header .logo a{ width:250px;} #headerInner .area{ margin-right:50px;} #gnb > ul > li > a{ font-size:19px; padding:0 40px;} #gnb.each-menu > ul > li .gnb-2dep{ top:100px; } #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:30px;} .hd_login a{ font-size:15px;} #header.fixed #headerInnerWrap{ height:100px;} #header.fixed .logo { top:25px;} #header.fixed #gnb > ul > li > a{font-size:19px;} #header.fixed #gnb.each-menu > ul > li .gnb-2dep{ top:100px;} #header.fixed #gnb > ul > li .gnb-2dep ul li a{ font-size:15px;} #header.fixed .hd_login{ top:30px;} #header.fixed .logo{ top:20px;} #header.fixed .logo a{ width:250px;} #header.fixed .hd_login{ padding-top:25px;} .footer-modal-content h1 img{ width:300px;} .footer-modal-content{ max-width:1000px;} .sitemap-wrapper{padding:50px;} .sitemap-wrapper > ul > li > h2{ font-size:20px;} .sitemap-wrapper > ul > li .sitemap-2dep a{ font-size:16px; padding:7px 0;} .header-search-open-btn, .header-search-close-btn{ height:80px;} .sitemap-line-btn{ margin-top:25px;} #header.fixed .header-search-open-btn, .header-search-close-btn{ height:70px;} #header.fixed .sitemap-line-btn{ margin-top:17px;} } @media all and ( max-width: 1440px ){ /* -------- Header :: GNB(PC) -------- */ #gnb > ul > li > a{font-size:16px;} #gnb > ul > li .gnb-2dep ul li a{font-size:13px;} } @media all and ( max-width: 1280px ){ #header .logo a{ background:url(../img/common/logo-fixed.png) no-repeat; background-size: auto 100%; height:45px;} #header, #headerInnerWrap, #headerInner{height:70px; background:#fff; } #header .logo{padding:5px 0; left:15px; top:10px;} /* padding값 적절히 바꿔주세요 */ #header .logo a{ width:250px;} #header.fixed #headerInnerWrap{box-shadow: 1px 1px 3px rgba(0, 0, 0, .1); background:#fff;} #header.fixed-header.fixed #headerInnerWrap{top:0; background-color:#ff6100; } #header.fixed #headerInnerWrap{ height:55.5px;} #header.fixed .logo{ top:10px;} /* -------- 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;} #gnbM #navigation > li .gnb-2dep > li{} #gnbM #navigation > li .gnb-2dep > li > a{display:block; color:#4e4e4e; 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;} /* -------- Header :: 네비게이션 오픈 버튼 -------- */ .nav-open-btn{ display:block; position:fixed; width: 70px; height: 70px; 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} .sns ul li {padding: 10px;} .sns ul li img {height: 35px;} } @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;} }