@charset "utf-8";

.header-container { position: fixed; top:0; left:0; width: 100%; z-index: 90; padding: 0 100px 20px; }
.header-container.blur:before { content: ''; width: 100%; height: 110px; position: absolute; top: 0; left: 0; backdrop-filter: blur(5px); border-bottom: 1px solid rgba(255,255,255,0.3);}
.header-wrap:after { content: ''; display: block; clear: both;}
.header-wrap .logo-area { position: relative; float: left; margin-top: 40px; width: 145px; height: auto; cursor: pointer;}
.header-wrap .logo-area > img { opacity: 1; width: 100%; height: 29px; position: absolute; top: 0; left:0; transition: opacity .4s; }

/* 배경 컬러 white 일 때 */
.white .header-container .logo-area > img.logo-b { opacity: 1; }
.white .header-container .logo-area > img.logo-w { opacity: 0; }
.white .header-container .gnb-area > ul > li > a { color: var(--dark-color); }
.white .header-container .util-area .hamburger .line { border-bottom-color: var(--dark-color); }

/* 배경 컬러 black 일 때 */
.black .header-container .logo-area > img.logo-b { opacity: 0; }
.black .header-container .logo-area > img.logo-w { opacity: 1; }
.black .header-container .gnb-area > ul > li > a { color: #fff; }
.black .header-container .util-area .hamburger .line { border-bottom-color: #fff; }

.gnb-area { float: right; margin: 50px 100px 0 0;}
.gnb-area > ul > li { position: relative; display: inline-block; vertical-align: top; text-align: center; padding-bottom: 10px;}
.gnb-area > ul > li > a { color: #fff; font-size: 1.7rem; font-weight: 900; font-family: 'Rajdhani'; padding: 0 20px; transition: color .6s;}
.gnb-area > ul > li:hover > ul { transform: scaleY(1) translateX(-50%); }
.gnb-area > ul > li > ul { transform: scaleY(0) translateX(-50%); transition: transform .25s; transform-origin: top; background: var(--main-blue); position: absolute; top: 100%; left: 50%; width: 150px; padding: 15px 0; border-radius: 0 0 30px 0; }
.gnb-area > ul > li > ul > li > a { color: #fff; display: block; font-size: 1.3rem; font-weight: 500; padding: 9px 30px; line-height: 1.6;transform: skewX(-0.1deg);}
.gnb-area > ul > li > ul > li > a:hover { background: rgba(0,0,0,0.1)}

.util-area { position: absolute; top: 55px; right: 100px; }
.util-area .hamburger { position: relative; text-align: right; cursor: pointer; z-index: 999;}
.util-area .hamburger .line { display: block; height:0; border-bottom: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; transition: transform .4s, border-bottom-color .5s;}
.util-area .hamburger .line:not(:last-child) { margin-bottom: 7px;}
.util-area .hamburger .line.line1 { width: 30px; transform: rotate(180deg); }
.util-area .hamburger .line.line2 { width: 20px; margin-left: 10px;}
.util-area.on .hamburger .line { border-left: 0; border-right: 0; }
.util-area.on .hamburger .line.line1 { transform: rotate(45deg) skew(-45deg); margin-bottom: -4px; border-bottom-color: #fff;}
.util-area.on .hamburger .line.line2 { transform: rotate(-45deg) skew(45deg); margin-left: 0; width: 30px; border-bottom-color: #fff;}
.util-area.on .sitemap-wrap { left: 0; }
.util-area .sitemap-wrap { left: 100%; position: fixed; top: 0; width: 100%; height: 100%; background: var(--dark-color); z-index: 888; transition: left .5s; }
.util-area .sitemap-wrap .sitemap { position: absolute; top:40%; left: 0; width: 100%; height: 50%; transform: translateY(-50%); }
.util-area .sitemap-wrap .sitemap:after { content: ''; position: absolute; top: 300px; left: 0; width: 100%; height: 100%; background: rgba(2,3,23,0.5); border-top: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(25px); z-index: 1; }
.util-area .sitemap-wrap .sitemap .title-area { position: relative; text-align: center; font-size: 6.8rem; color: #fff; font-weight: 900; padding-bottom: 150px;}
.util-area .sitemap-wrap .sitemap .all-menu {text-align: center; display: flex; justify-content: center; }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item { position: relative; display: inline-block; padding-right: 80px; text-align: left; vertical-align: top; }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit { position: relative; padding-bottom: 80px; text-align: center; }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit:after { content: ''; position: absolute; top:0; left: 50%; margin-left: -75px; width: 150px; height: 150px; border-radius: 50%; background: var(--main-blue); z-index: 1; transform: scale(0); transition: transform .5s; }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit a { position: relative; z-index: 2; font-size: 3.5rem; font-weight: 900; position: relative; color: rgba(255,255,255,0.5); }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item .list { position: relative; z-index: 2;}
.util-area .sitemap-wrap .sitemap .all-menu .menu-item .list ul li:not(:last-child) { margin-bottom: 15px; }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item .list ul li a { font-size: 1.8rem; color: rgba(255,255,255,0.7); }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item .list ul li:hover a { color: #fff; }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item.on .tit a,
.util-area .sitemap-wrap .sitemap .all-menu .menu-item:hover .tit a { color: var(--main-green); }
.util-area .sitemap-wrap .sitemap .all-menu .menu-item.on .tit:after,
.util-area .sitemap-wrap .sitemap .all-menu .menu-item:hover .tit:after { transform: scale(1); }
.util-area .sitemap-wrap .copyright { position: absolute; bottom:100px; right: 100px; color: rgba(255,255,255,0.6); font-weight: 600; font-size: 1.6rem; }
.util-area .sitemap-wrap .brochure { opacity: .6; position: absolute; bottom:100px; left: 100px; padding: 12px 20px; color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 6px; display: inline-block; font-size: 1.6rem; font-weight: 600; cursor: pointer;}
.util-area .sitemap-wrap .brochure:hover { opacity: 1; }
.util-area .sitemap-wrap .brochure img { width: 11px; height: 14px; position: relative; top: 4px; margin-right: 7px;}

@media (max-width: 1400px) {
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item { padding-right: 50px; }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit a { font-size: 2.8rem;}
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .list ul li a { font-size: 1.5rem; }
}

@media (max-width: 1100px) {
  .header-container { padding: 0 60px; }
  .header-container.blur:before { height: 90px; }
  .header-wrap .logo-area { width: 145px; }
  .gnb-area { margin-right: 60px; }
  .gnb-area > ul > li > a { padding: 0 10px;}
  .gnb-area > ul > li > ul { padding: 10px 0; width: 130px; border-radius: 0 0 15px; }
  .gnb-area > ul > li > ul > li > a { padding: 5px 15px; font-size: 1.2rem;}
  .util-area { right: 60px; }

  .util-area .sitemap-wrap .sitemap { position: static; height: auto; transform: none; padding-top: 80px; }
  .util-area .sitemap-wrap .sitemap:after { display: none; }
  .util-area .sitemap-wrap .sitemap .title-area { font-size: 4rem; padding-bottom: 80px; }
  .util-area .sitemap-wrap .sitemap .all-menu { flex-wrap: wrap;}
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item { text-align: center; width: 33%; margin-bottom: 50px; padding:0;}
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit { padding-bottom: 20px; }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit:after { display: none; }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit a { display: inline-block; font-size: 2.4rem;}
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit a:after { display: none; content: ''; position: absolute; top:-7px; left: -10px; width: 20px; height: 20px; background: var(--main-blue); border-radius: 40px; z-index: -1;}
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item:hover .tit a:after,
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item.on .tit a:after { display: block; }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .list ul li a { font-size: 1.4rem; }
}

@media (max-width: 840px) {
  .header-container { padding: 0 30px; }
  .header-wrap .logo-area { margin-top: 30px;}
  .gnb-area { margin-top: 40px; }
  .util-area { top: 40px; right: 30px;}
  .util-area .sitemap-wrap { padding-bottom: 60px; text-align: center; overflow-y: auto; }
  .util-area .sitemap-wrap .brochure { position: static; min-width: 170px; font-size: 1.4rem; padding: 8px 20px; margin-top: 20px; clear: both; }
  .util-area .sitemap-wrap .brochure img { top: 2px; }
  .util-area .sitemap-wrap .copyright { position: static; width: 100%; text-align: center; font-size: 1.3rem; clear: both; padding-top: 20px;}
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit a { font-size: 2rem; }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .list ul li a { font-size: 1.3rem; }
}

@media (max-width: 768px) {
  .gnb-area { display: none; }
}

@media (max-width: 450px) {
  .util-area .sitemap-wrap .sitemap { padding-top: 60px; }
  .util-area .sitemap-wrap .sitemap .title-area { padding-bottom: 30px; font-size: 3.5rem; }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item { float: left; width: 50%; padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.3); border-left: 1px solid rgba(255,255,255,0.3); margin-bottom: 0; }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item:nth-child(2n-1) { border-left: 0; }
  .util-area .sitemap-wrap .sitemap .all-menu { border-bottom: 1px solid rgba(255,255,255,0.3); }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit a { color: var(--main-green); }
  .util-area .sitemap-wrap .sitemap .all-menu .menu-item .tit a:after { display: block; }
}