.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; background-color:#fff; -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; height:100%; } #header .logo{position:absolute; z-index:100; top:35px; left:0; width:300px; -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%;} /* 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;} #headerInner .area{ text-align:right} /* -------- Header :: GNB(PC) -------- */ #gnb{display: inline-block;vertical-align: top; padding-right:100px;} #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 57px; text-align:center; color:#1b1b1b; 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; } #gnb > ul > li .gnb-2dep ul{ display:none;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:#b3d5ff; 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:40px; padding-right: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:#666; font-size:17px;} /* -------- Header :: GNB(Mobile) -------- */ .nav-open-btn{display:none;} #gnbM{display:none} /* 모바일 언어선택 */ .cs{ position:absolute; right:0; top:200px; z-index:11; text-align:center;letter-spacing:-1px;} .cs li{ position:relative; width:200px;} .cs li:nth-child(1) .txt1{ position:relative; background:#f2da00; padding:20px 15px 25px 0; border-radius:50px 50px 0 0; font-size:25px; font-weight:bold; color:#391d1d} .cs li:nth-child(1) i{ position:absolute; right:-10px; top:-25px;} .cs li:nth-child(1) i img{ width:67px;} .cs li:nth-child(1) .txt2{ position:relative; background:#391d1d; color:#f2da00;padding:25px 0 30px 0; border-radius:0 0 50px 50px } .cs li:nth-child(1) .txt2 span{ position:absolute; top:-15px; background:#391d1d; width:120px; left:50%; margin-left:-60px;border-radius:15px 15px 0 0; padding:7px 0 0 0;} .cs li:nth-child(1) .txt2 b{ font-size:30px; font-weight:bold;} .cs li:nth-child(2){ background:#0072bc; color:#fff; text-align:center; border-radius:30px; font-size:19px; padding:30px 0;;} .cs li:nth-child(2) span{ display:inline-block; background:#fff; color:#0072bc; padding:5px 10px; border-radius:10px; font-weight:500; margin-bottom:10px;} .cs li:nth-child(2) p{font-family: 'NanumSquare'; font-weight:bold; font-size:23px; } .cs li:nth-child(3){ background:#00a99d; color:#fff ; border-radius:50%; height:200px; text-align:center;} .cs li:nth-child(3) img{ width:45px; padding-top:15px;} .cs li:nth-child(3) .txt1{ position:relative; padding-bottom:7px; margin-bottom:10px; margin-top:5px;} .cs li:nth-child(3) .txt1:before{ content:''; position:absolute ; bottom:0; left:50%; width:100px; margin-left:-50px; height:1px; border-bottom:1px #fff solid; opacity:0.5;} .cs li:nth-child(3) .txt2{font-family: 'NanumSquare'; font-size:21px;} .cs li:nth-child(3) .txt2 span{ font-weight:bold; font-size:25px; display:block} .cs li:nth-child(2), .cs li:nth-child(3){ margin-top:35px;} .cs a{ color:#fff;} @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 { width:250px; top:30px;} #header.fixed #headerInnerWrap{top:0; height:85px; box-shadow: 12px 9px 17px #0000001c;} #header.fixed #gnb > ul > li > a{height:85px; line-height:85px; font-size:23px;} #header.fixed #gnb.each-menu > ul > li .gnb-2dep{ top:85px;} #header.fixed .hd_login{ padding-top:30px;} } @media all and ( max-width: 1920px ){ #header .logo{ width:250px;} #headerInnerWrap{ height:85px;} #gnb > ul > li > a{ font-size:21px; height:85px; line-height:85px; padding:0 40px;} #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{ top:35px;} .hd_login a{ font-size:15px;} #header.fixed #headerInnerWrap{ height:70px;} #header.fixed .logo { width:220px; top:25px;} #header.fixed #gnb > ul > li > a{ height:70px; line-height:70px; font-size:19px;} #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:30px;} .cs{ top:150px;} .cs li{ width:150px;} .cs li:nth-child(1) .txt1{ font-size:20px;padding:20px 15px 25px 0; border-radius:45px 45px 0 0;} .cs li:nth-child(1) .txt2{padding:20px 0 25px 0; border-radius:0 0 45px 45px } .cs li:nth-child(1) .txt2 span{ width:100px; margin-left:-50px;border-radius:15px 15px 0 0; padding:7px 0 0 0; font-size:15px;} .cs li:nth-child(1) .txt2 b{ font-size:21px;} .cs li:nth-child(1) i img{ width:60px;} .cs li:nth-child(2){ font-size:15px; padding:25px 0;} .cs li:nth-child(2) span{ padding:3px 10px;} .cs li:nth-child(2) p{ font-size:17px;} .cs li:nth-child(2) .mb20{ margin-bottom:15px} .cs li:nth-child(3){ height:150px;} .cs li:nth-child(3) img{ width:30px; padding-top:15px;} .cs li:nth-child(3) .txt1{ padding-bottom:5px; margin-bottom:5px; font-size:15px;} .cs li:nth-child(3) .txt2{font-family: 'NanumSquare'; font-size:17px;} .cs li:nth-child(3) .txt2 span{ font-size:19px;} .cs li:nth-child(2), .cs li:nth-child(3){ margin-top:15px;} } @media all and ( max-width: 1440px ){ /* -------- Header :: GNB(PC) -------- */ #headerInner{ margin:0 20px 0 50px;} #gnb > ul > li > a{ padding:0 30px;} #gnb > ul > li .gnb-2dep ul li a{font-size:13px;} .cs li{ width:120px;} .cs li:nth-child(1) .txt1{padding: 15px 15px 20px 0;border-radius:35px 35px 0 0;} .cs li:nth-child(1) .txt2{border-radius:0 0 35px 35px;padding: 15px 0 20px 0;} .cs li:nth-child(1) .txt1, .cs li:nth-child(1) .txt2 b{ font-size:17px;} .cs li:nth-child(1) .txt2 span{ font-size:14px;} .cs li:nth-child(1) i img{ width:45px;} .cs li:nth-child(2){ font-size:14px; padding:15px 0;} .cs li:nth-child(2) p{ font-size:15px;} .cs li:nth-child(3){ height:120px;} .cs li:nth-child(3) img{ width:20px; padding-top:10px;} .cs li:nth-child(3) .txt1{ font-size:14px;} .cs li:nth-child(3) .txt2{ font-size:15px;} .cs li:nth-child(3) .txt2 span{ font-size:17px;} } @media all and ( max-width: 1220px ){ #headerInner{ margin:0;} #header, #headerInnerWrap, #headerInner{height:55.5px;} #header .logo{ top:20px; left:30px; width:200px;} /* padding값 적절히 바꿔주세요 */ #header .logo a{-webkit-background-size: 60%; background-size: 60%; background-position: center left;} #header.fixed .logo{top:20px; width:200px;} #header.fixed #headerInnerWrap{box-shadow: 1px 1px 3px rgba(0, 0, 0, .1)} #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;} #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: 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 #headerInnerWrap{ height:55.5px;} #header.fixed-header .nav-open-btn .line{background-color:#fff} #headerInnerWrap .cs{ display:none; } #gnbM .cs{ top:auto; bottom:0; width:100%; height:171px;} .cs li{ display:inline-block; vertical-align:top; } .cs li:nth-child(1) .txt1{ font-size:20px;} .cs li:nth-child(1), .cs li:nth-child(3){ width:30%} .cs li:nth-child(2){ width:calc((100% - 60%) - 20px); height:171px; overflow:hidden;} .cs li:nth-child(2), .cs li:nth-child(3){ margin-top:0;} .cs li:nth-child(1) .txt1, .cs li:nth-child(1) .txt2, .cs li:nth-child(2), .cs li:nth-child(3){ border-radius:0;} .cs li:nth-child(3){ height:171px;} .cs li:nth-child(1) .txt1{ padding:36px 0 30px 0;} .cs li:nth-child(1) .txt2{ padding:25px 0 26px 0;} .cs li:nth-child(1) i{ left:0; top:-10px;} .cs li:nth-child(1) .txt2 span{ padding-top:10px; top:-10px;} .cs li:nth-child(3) .txt1{ font-size:17px;} .cs li:nth-child(3) img{ width:30px; padding-top:20px;} .cs li:nth-child(3) .txt1{ padding-bottom:10px;margin-bottom:15px;} } @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:20px; padding:15px;} #gnbM #navigation > li .gnb-2dep > li > a{font-size:13px;} } @media all and ( max-width: 480px ){ .cs li:nth-child(3) .txt1::before{ width:70px; margin-left:-35px;} }