/* 헤더 */ #header {position:fixed; left:0; top:0; width:100%; height:100px; z-index:9999; transition:all 0.25s ease;} #header.header_scroll {position:fixed; background:#fff;} #header .header-inner {padding:0 20px; height:100%;} #header .header-wrap {display:flex; justify-content:space-between; align-items:center;} #logo a {display:inline-block; padding:0; z-index:999; position:relative; text-align:center;} #logo a img {display:inline-block; vertical-align:middle;} #logo .logo-t {display:block; margin-top:12px; transition:all 0.8s ease;} #header #logo {} #header.header_scroll #logo .logo-t {transform:translate(90px,-35px); margin:0; transition:all 0.8s ease;} @media screen and (max-width:767px) { #header .header-wrap {height:100%;} #header #logo a {transform:translate(-30px, 10px); padding:0;} #header #logo .logo-t {transform:translate(90px,-35px); transition:none; margin:0;} } /* 기본 header 바가 투명일 때 적용 (로고 온오프) */ #header .logo-off {display:block;} #header .logo-on {display:none;} #header.header_scroll {height:90px;} #header.header_scroll .logo-off, #header.active .logo-off {display:none;} #header.header_scroll .logo-on, #header.active .logo-on {display:block;} /* #header:before {content:''; position:absolute; width:100%; height:var(--header-height); background:linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)} */ /* NAVI :: 공통 */ .menu-area { max-width:1240px; margin:0 auto; } /* NAVI :: 스타일2 (메가 메뉴 스타일 / total Menu Style) */ #nav.total-menu { width:100%; position:absolute; top:0; right:0; padding-right:13rem; text-align:right;} #nav.total-menu > ul {display:inline-flex; } #nav.total-menu > ul > li {text-align:center; position:relative; } #nav.total-menu > ul > li.point a {position: relative;} #nav.total-menu > ul > li.point a:before {content:''; position:absolute; width:8rem; height:8rem; background:#a5e9fc; border-radius:50%; top:calc(50% - 4rem); right:4rem; z-index:-1; transition:all 0.5s ease;} #nav.total-menu > ul > li > a {position:relative; display:block; padding:0 28px; height:100px; line-height:100px; font-size:20px; color:#222; font-weight:600; transition:all 0.5s ease; z-index:9} #nav.total-menu > ul > li > a:after {} #nav.total-menu > ul > li .submenu {height:0; visibility:hidden; opacity:0; width:100%; z-index:9999; overflow:hidden;} #nav.total-menu > ul > li .submenu > ul {padding-top:0px;} #nav.total-menu > ul > li .submenu > ul > li {transition:all 0.3s ease;} #nav.total-menu > ul > li .submenu > ul > li:last-child {border-bottom:0;} #nav.total-menu > ul > li .submenu > ul > li > a {display:block; padding:0px 10px 14px; font-size:17px; transition:all 0.25s ease;} #nav.total-menu > ul > li:hover > a {color:#04347d} #nav.total-menu > ul > li:hover > a:after {} #nav.total-menu > ul > li:hover .submenu {} #nav.total-menu > ul > li .submenu > ul > li a:hover {color:#07b1f0; font-weight:500;} #nav.total-menu #gnbBg {position:absolute; width:100%; height:0px; background:#fff; left:0; transition:all 0.4s ease;} #nav.total-menu.open .menu-area {} #nav.total-menu.open > ul > li > a { color:#222; padding:0 8rem;} #nav.total-menu.open > ul > li.point a:before {right:9rem;} #nav.total-menu.open > ul > li:hover > a {color:var(--main-color)} #nav.total-menu.open > ul > li .submenu {opacity:1; visibility:visible; height:auto;transition:height 0.25s ease-in-out, opacity 0.5s ease-in-out 0.2s} #nav.total-menu.open #gnbBg {height:350px;} #header.header_scroll #nav.total-menu > ul > li > a {color:#222; height:90px; line-height:90px;} /* 유틸박스 */ #util-wrap {display:flex; align-items:center; padding:15px 0; z-index:9;} #util-wrap .language {margin-right:30px; position:relative;} #util-wrap .language .cur {font-size:17px; font-weight:500; color:#222; padding-bottom:10px; cursor:pointer; } #util-wrap .language .cur:after {content:'\f078'; font-family:'Font Awesome 5 Free'; font-weight:900; margin-left:10px; display:inline-block; transition:all 0.3s ease;} #util-wrap .language .dropdown-list {opacity:0; visibility:hidden; position:absolute; border:1px solid #ddd; border-radius:10px; top:30px; width:100%; z-index:999; transition: all 0.3s ease;} #util-wrap .language .dropdown-list li {text-align:center; background:#fff; } #util-wrap .language .dropdown-list li:first-child {border-radius:10px 10px 0 0;} #util-wrap .language .dropdown-list li:last-child {border-radius:0 0 10px 10px;} #util-wrap .language .dropdown-list li a {display:inline-block; padding:8px 0; text-align:Center; width:100%; font-size:14px; color:#000} #util-wrap .language .dropdown-list li:hover {background:#f4f4f4;} #util-wrap .language.active .dropdown-list {opacity:1; visibility:visible;} #util-wrap .language.active .cur:after {transform:rotate(180deg);} #util-wrap .sitemap-open-btn {display:flex; flex-direction:column; align-items:center; justify-content:center; width:7rem; height:7rem; background:var(--main-color); border-radius:50%; cursor:pointer; transition:all 0.5s ease;} #util-wrap .sitemap-open-btn .row {width:30px; height:3px; border-radius:15px; display:block; background:#fff; margin:5px 0px; position:relative; z-index:99; text-align:right;} #util-wrap .sitemap-open-btn .row:first-child {width:25px; margin:2px 0px 2px 5px} #header.on #util-wrap .sitemap-open-btn .row {background:#fff;} #header #util-wrap .sitemap-open-btn .row {background:#fff;} #util-wrap .nav-open-btn {display:none; top:24px; right:15px; z-index:99999999;} #util-wrap .nav-open-btn .line {width:25px; height:3px; background:#333; border-radius:15px; display:block; margin:5px 0; transition:all 0.25s ease;} #util-wrap .nav-open-btn.active .line {background:#000;} #util-wrap .nav-open-btn.active .line1 {transform:translateY(5px) rotate(45deg);} #util-wrap .nav-open-btn.active .line3 {transform:translateY(-11px) rotate(-45deg)} #util-wrap .nav-open-btn.active .line2 {opacity:0;} #header.header_scroll #util-wrap .sitemap-open-btn {width:6rem; height:6rem;} @media screen and (max-width:1300px){ #nav > ul > li > a {font-size:16px; padding:0 30px;} } @media screen and (max-width:1023px){ /* 메뉴, 사이트맵 숨김 */ #nav {display:none;} #util-wrap .sitemap-open-btn {display:none;} #util-wrap .nav-open-btn {display:block;} } #sidebar {position:absolute; left:0; top:0; width:16rem; height:var(--mainVisual-height); background:#fff; z-index:1;} #sidebar .sidebar-inner {width:100%; height:100%; padding:20rem 4rem;} #sidebar .sidebar-wrap {display:flex; flex-direction:column; align-items:center;} #sidebar .sidebar-wrap .icon-btn {padding:3rem 0; display:block; width:100%; text-align:center;} /* GNB MOBILE :: 스타일1 (기본 스타일 / Basic Style) */ .overlay {display:none; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0; top:0; z-index:999} .gnb_style_basic {display:none; position:fixed; right:-280px; width:280px; top:0; background:#fff; height:100%; z-index:999999; transition:0.4s ease;;} .gnb_style_basic .gnb-mobile-wrapper {width:100%; height:100%; position:relative; padding:75px 0px;} .gnb_style_basic .gnb-mobile-wrapper .gnb-mobile-inner { width:100%; height:100%;} .gnb_style_basic #mobile-nav {width:100%; height:100%;} .gnb_style_basic #mobile-nav > li {position:relative; border-bottom:1px solid #ddd;} .gnb_style_basic #mobile-nav > li > a {font-size:16px; font-weight:600; color:#222; display:block; height:55px; line-height:55px; padding:0 20px} .gnb_style_basic #mobile-nav > li > i {position:absolute; left:0; top:0; width:100%; height:55px; transition:0.4s ease;} .gnb_style_basic #mobile-nav > li > i:after {position:absolute; right:10%; top:40%; content:'\f078'; font-family:'Font Awesome 5 Free'; font-weight:900;} .gnb_style_basic #mobile-nav > li.open i:after {content:'\f077'} .gnb_style_basic #mobile-nav .submenu {display:none;} .gnb_style_basic #mobile-nav .submenu ul li {border-top:1px solid #ddd;} .gnb_style_basic #mobile-nav .submenu ul li a {display:block; padding:10px 20px; font-size:15px; transition:0.4s ease;} .gnb_style_basic #mobile-nav > li.open > a {background:#f4f4f4} .gnb_style_basic.open {right:0px;} @media screen and (max-width:1023px){ .gnb_style_basic {display:block;} } /* GNB MOBILE :: 스타일2 (Full Style) */ .siteMap_style05_full {position:fixed; width:100%; height:100%; background-color:transparent; background-position:center; background-size:cover; top:0; right:-600px; z-index:999999; visibility:hidden; opacity:0; transition:all 0.3s 0.7s} .siteMap_style05_full .sitemap-area .sitemap-con {position:absolute; left:0; width:100%; height:100%; display:flex;} .siteMap_style05_full .sitemap-left-con {display:flex; flex-direction: column; justify-content:space-between; width:35%; padding:120px 50px; background:#222; transform:translateY(100%); transition:all .6s cubic-bezier(0.8, 0.01, 0.31, 1.04) 0.2s;} .siteMap_style05_full .sitemap-left-con .sitemap-slogan-con .sitemap-slogan {color:#fff; font-size:48px;} .siteMap_style05_full .sitemap-left-con .sitemap-slogan-con p {color:#fff; font-size:21px; font-weight:400;} .siteMap_style05_full .sitemap-left-con .sitemap-footer-con .footer-menu {display:flex; flex-wrap:wrap; margin-bottom:10px;} .siteMap_style05_full .sitemap-left-con .sitemap-footer-con .footer-menu a {color:#fff; margin-right:15px; font-weight:300; font-size:1.7rem;} .siteMap_style05_full .sitemap-left-con .sitemap-footer-con .copy {font-weight:200; color:rgba(255,255,255,.6); font-size:1.7rem;} .siteMap_style05_full .sitemap-right-con {width:65%; padding:70px 0px; background:#fff; transform:translateY(-100%); transition:all .6s cubic-bezier(0.8, 0.01, 0.31, 1.04) 0.2s;} .siteMap_style05_full .sitemap-right-con .sitemap-box {width:100%; height:100%;} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul {display:flex; align-items:start; flex-direction:column; width:100%; height:100%;} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li {display:flex; align-items:center; flex-direction:row; position:relative; width:100%; height:100%; padding:50px 30px; overflow:hidden; border-bottom:1px solid transparent; transition:all 0.3s } .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li h2 {font-size:24px; font-weight:600; color:#222; width:20%; padding:0 25px 0px 0; line-height:1; opacity:0; transform:translateY(-50%); transition:all 1.5s ease, transform 1.5s 0.5s, opacity 1.5s 0.5s} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li .sitemap-2dep {width:80%; display:flex; align-items:start; flex-wrap:wrap;} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li .sitemap-2dep li a {display:block; color:#888; font-size:19px; font-weight:500; padding:0px 30px 0px; opacity:0; transform:translateY(-50%); transition:all 1.5s ease, transform 1.5s 0.5s, opacity 1.0s 0.5s} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li .sitemap-2dep li a:hover {color:var(--main-color);} .siteMap_style05_full .sitemap-close-btn {position:absolute; top:25px; right:30px; width:40px; height:40px; z-index:9999; } .siteMap_style05_full .sitemap-close-btn span {width:25px; height:4px; background:#000; display:block; margin:5px auto; border-radius:5px;} .siteMap_style05_full .sitemap-close-btn span.line1 {transform:translateY(3px) rotate(45deg)} .siteMap_style05_full .sitemap-close-btn span.line2 {transform:translateY(-6px) rotate(-45deg)} .siteMap_style05_full.open {visibility:visible; opacity:1; right:0; transition:all 0.3s} .siteMap_style05_full.open .sitemap-left-con, .siteMap_style05_full.open .sitemap-right-con {transform:translateY(0)} .siteMap_style05_full.open .sitemap-area {visibility:visible; opacity:1;} .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li h2, .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a {opacity:1; transform:translateY(0%); } .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li {border-color: #ddd; } .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li:before { width:100%; /*transition:width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s*/} .siteMap_style05_full .sitemap-con .sitemap-box > ul > li.active {background:#f4f4f4;} .siteMap_style05_full .sitemap-con .sitemap-box > ul > li.active:before {background:#f4f4f4} .siteMap_style05_full .sitemap-con .sitemap-box > ul > li.active h2 {color:#000} #siteMap_style05_dimmed.dimmed_bg {width:100%; height:100%; background:rgba(0,0,0,0.3); position:fixed; left:0; top:0; right:0; bottom:0; z-index:9999; opacity:0; visibility:hidden; transition:all .3s cubic-bezier(0.8, 0.01, 0.31, 1.04) .8s;;} #siteMap_style05_dimmed.open.dimmed_bg {opacity:1; visibility:visible; transition:all .3s cubic-bezier(0.8, 0.01, 0.31, 1.04) 0s;;} @media screen and (max-width:1880px) { #mainVisual {margin-top:120px;} #nav.total-menu {padding:0 13rem;} #nav.total-menu > ul {max-width:100%; width:100%; justify-content: center;} #nav.total-menu > ul > li.point a:before {right:6rem;} }