@charset "utf-8";

/* ** 전역적으로 사용될 변수 스타일을 작성합니다. */
:root {
  --primary: #00B9FF;
  --primary-dark: #003B86;
  --secondary: #FFB300;
  --secondary-dark: #108A7D;
  --gray1: #707070;
  --gray2: #909090;
  --gray3: #adadad;
  --gray4: #afafaf;
  --light-gray1: #dadada;
  --light-gray2: #dfdfdf;
  --light-gray3: #e9e8e7;
  --light-gray4: #f2f1f0;
  --light-gray5: #f7f6f5;
  --ff-primary: "Pretendard", "맑은 고딕", sans-serif;
  --ff-secondary: "Poppins", var(--ff-primary);
  --cubic-pop1: cubic-bezier(.85,.14,.29,.99);
  --cubic-pop2: cubic-bezier(.71,.45,.36,1.31);
  --cubic-pop3: cubic-bezier(.85,.14,.29,.99);
}

/* ** 프로젝트 진행시 커스텀 스타일을 여기에 작성합니다. */

/* Base assets */
body {font-family: var(--ff-primary);}

.typo1,
.typo2,
.typo3,
.typo4,
.typo5,
.typo6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {font-family: var(--ff-secondary); line-height: 1.1;}

.sbj_tag {color: var(--primary-dark); font-size: 16px; font-weight: 600; display: block; line-height: 1.5; margin-bottom: 0.5em;}
.sbj_tag.big {font-size: 25px;}

.fc-primary {color: var(--primary) !important;}
.fc-primary-dark {color: var(--primary-dark) !important;}
.fc-secondary {color: var(--secondary) !important;}
.fc-secondary-dark {color: var(--secondary-dark) !important;}

.ff-primary {font-family: var(--ff-primary);}
.ff-secondary {font-family: var(--ff-secondary);}

.bg--gray1 {background-color: var(--gray1);}
.bg--gray2 {background-color: var(--gray2);}
.bg--gray3 {background-color: var(--gray3);}
.bg--gray4 {background-color: var(--gray4);}
.bg--lg1 {background-color: var(--light-gray1);}
.bg--lg2 {background-color: var(--light-gray2);}
.bg--lg3 {background-color: var(--light-gray3);}
.bg--lg4 {background-color: var(--light-gray4);}
.bg--lg5 {background-color: var(--light-gray5);}

.container {width: min(1200px, calc(100% - 100px))!important; margin-inline: auto;}
.container--wide {width: min(1520px, calc(100% - 100px))!important; margin-inline: auto;}

@media screen and (max-width: 1399px) {
  .container,
  .container--wide {width: min(720px, calc(100% - 30px))!important; min-width: 320px;}
}



/* Header */
.header {--bg: rgb(0,0,0,0.5); font-family: var(--ff-secondary); color: #fff;}
.header::after {opacity: .5; transition: .4s; background: transparent;}
.header__bg { transition: background .4s;  -webkit-backdrop-filter: blur(2px); background: var(--bg); border-bottom: 1px solid #fff3;}
.header .logo {width: auto; height: auto; transition: background .4s;}
.header .logo .logo-white {display: block;}
.header .logo .logo-color {display: none;}

.gnb {display: flex; gap: 60px;}
.gnb .gnb-group {display: flex; position: relative; height: 100%;}
.gnb .gnb-group:not(:last-child)::before {content:""; width: 1px; height: 21px; border-radius: 50%; background: #fff; position: absolute; left:108%; flex-shrink: 0; top:50%; transform: translate(0,-50%);}
.gnb__item {position: relative;}
.gnb__item > a {position: relative; font-size: 18px; font-weight: 600; padding: 0 18px; transition: color .4s; color:#fff; font-family: var(--ff-primary);}
.gnb__item:hover > a {color: var(--primary)!important;}
.gnb__item:last-child > a::before {display: none;}

.gnb-submenu {position: absolute; top: 100%; left: 50%; transform: translate(-50%); display: flex; padding-inline: 100vw; background: var(--bg); transition: background .4s; border-bottom: 1px solid #fff3; display: none;}
.gnb__item:hover .gnb-submenu {display: flex;}
.gnb-submenu > li {flex-shrink: 0;}
.gnb-submenu > li > a {display: flex; align-items: center; justify-content: center; text-align: center; padding: 1em;}
.gnb-submenu > li > a:hover {color: var(--primary)!important;}

.header_etc_nav {}
.header_etc_nav .lang-nav {position: relative;}
.header_etc_nav .lang-nav .trigger { color:#fff; font-family: var(--ff-primary); font-weight: 600; display: flex; gap: 1em;align-items: center; justify-content: center;border:1px solid #fff; border-radius: 23px; padding: 0.3em 0.8em 0.3em 1.2em;}
.header_etc_nav .lang-nav .trigger.active {color: var(--primary);}
.header_etc_nav .lang-nav .icon svg {display: block;}
.header_etc_nav .lang-nav .ls {position: absolute; top: 100%; left: 0; width: 100%; padding-top: 10px; display: none;}
.header_etc_nav .lang-nav:hover .ls {display: block;}
.header_etc_nav .lang-nav .ls ul {border-radius: 20px; background: white; color: rgba(42,42,42,0.48); padding: 10px 0; border: 1px solid #dadada;}
.header_etc_nav .lang-nav .ls ul > li {}
.header_etc_nav .lang-nav .ls ul > li > a {display: block; padding: 0.3em 1em; line-height: 1; font-weight: 600;}
.header_etc_nav .lang-nav .ls ul > li > a:hover {color: var(--primary-dark)!important;}

.header.white {--bg: white;}
.header.white .gnb-submenu,
.header.white .header__bg {border-bottom: 1px solid #dfdfdf;}
.header.white .gnb-submenu > li > a,
.header.white .gnb__item > a {color:#000;}
.header.white .logo-white {display: none;}
.header.white .logo-color {display: block;}
.header.white .gnb .gnb-group:not(:last-child)::before {background: #adadad;}
.header.white .header_etc_nav .lang-nav {}
.header.white .header_etc_nav .lang-nav .trigger {color:rgba(42,42,42,0.48); border:1px solid rgba(42,42,42,0.48);}
.header.white .header_etc_nav .lang-nav .icon svg path {stroke:rgba(42,42,42,0.48)}


.header--sub .header__bg {background: #fff;}
.header--sub .gnb__item > a {color:#000;}
body:has(.prd-lnb-bar) .header {position: relative;}

.sitemap {display: none;}

@media screen and (max-width: 1499px) {
  .header .container {gap: 20px;}
  .gnb__item > a {font-size: 16px;}
}
@media screen and (max-width: 1399px) {
  .header {--bg: white;}
  .header .header__bg {border-bottom: 1px solid #dfdfdf;}
  .header .logo {width: 150px;}
  .header .logo-white {display: none!important;}
  .header .logo-color {display: block!important;}
  .header .gnb {display: none;}
  .header_etc_nav .lang-nav {display: none;}
  .header_etc_nav .sitemap_btn {display: block;}
  .header_etc_nav .sitemap_btn .ico--hamburger {width: 40px; height: 30px; padding: 0; background: var(--primary-dark); border-radius: 5px; display: flex; align-items: center; justify-content: center; padding: 5px 10px;}
  .header_etc_nav .sitemap_btn .ico--hamburger .inner {display: flex; flex-direction: column; gap: 5px; justify-content: center; width: 100%;}
  .header_etc_nav .sitemap_btn .ico--hamburger .inner .bar {width: 100%; height: 3px; background: white;}

  .sitemap {display: block; position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: calc(var(--vh, 1vh) * 100); pointer-events: none;}
  .sitemap__dim {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .5s;}
  .sitemap__container {position: absolute; z-index: 10; top: 0; right: 0; width: 100%; max-width: 520px; height: 100%; background: #fff; overflow: hidden auto; --padding-inline: 30px; transform: translate(100%); opacity: 0; transition: opacity .5s, transform .5s; padding-top: 40px;}
  .sitemap__container .head {position: sticky; top: 0; left: 0; width: 100%; padding-block: 30px 20px; padding-inline: var(--padding-inline); display: flex; align-items: flex-end; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--light-gray1);}
  .sitemap__container .head .logo {height: auto; width: auto;}
  .sitemap__container .head .logo a {display: block;}
  .sitemap__container .head .logo a svg {width: 100px; height: auto;}
  .sitemap__container .head .logo a svg path {fill: var(--logo-navy);}
  .sitemap__container .head .logo a svg :where(#logo_elem5, #logo_elem3, #logo_elem2) {fill: var(--logo-blue)!important;}
  .sitemap__container .body {padding-block: 20px;}
  .sitemap__container .body .block {padding-inline: var(--padding-inline); padding-block: 15px;}

  body.sitemap--open .sitemap {pointer-events: initial;}
  body.sitemap--open .sitemap__dim {opacity: 1;}
  body.sitemap--open .sitemap__container {opacity: 1; transform: translate(0);}
  body.sitemap--open .header .lang-nav > a:not(.active) {color: #000!important;}

  .sitemap_gnb {font-family: var(--ff-secondary);}
  .sitemap_gnb__item {padding-block: .7em;}
  .sitemap_gnb__item:not(:last-child) {border-bottom: 1px solid #ededed;}
  .sitemap_gnb__item .trigger {display: flex; align-items: center; justify-content: space-between; font-size: 22px;}
  .sitemap_gnb__item .trigger .ico--plus {width: 1em; height: auto; aspect-ratio: 1 / 1; display: none;}
  .sitemap_gnb__item .trigger .ico--plus::before,
  .sitemap_gnb__item .trigger .ico--plus::after {background: #afafaf; border-radius: 2px;}
  .sitemap_gnb__item .trigger .ico--plus::before {width: 2px;}
  .sitemap_gnb__item .trigger .ico--plus::after {height: 2px;}
  .sitemap_gnb__item.active .trigger {font-weight: 700;}
  .sitemap_gnb__item.active .trigger .ico--plus::before {display: none;}
  .sitemap_gnb__item.active .trigger .ico--plus::before,
  .sitemap_gnb__item.active .trigger .ico--plus::after {background: var(--secondary);}

  .sitemap_submenu {display: none; margin-block: 10px; padding: 0 0 20px 5px;}
  .sitemap_gnb__item.active .sitemap_submenu {display: block;}
  .sitemap_submenu__ls {font-size: 20px;}
  .sitemap_submenu__ls > .item {}
  .sitemap_submenu__ls > .item > a {display: block; padding-block: 5px; font-weight: 300;}
  .sitemap_submenu__ls > .item.active > a {font-weight: 500;}

  .sitemap_submenu__ls > .item:has(.depth2_ls) > a {display: flex; align-items: center; gap: .8em;}
  .sitemap_submenu__ls > .item:has(.depth2_ls) > a::after {width: .3em; aspect-ratio: 1 / 1; border-top: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; transform: rotate(45deg); content: ''; display: block; transition: transform .4s;}
  .sitemap_submenu__ls > .item:has(.depth2_ls).active > a::after {transform: translate(0, -25%) rotate(135deg);}
  .sitemap_submenu__ls > .item .depth2_ls {display: none; font-size: 18px; padding: 5px 0 40px 0; color: #dfdfdf;}
  .sitemap_submenu__ls > .item.active .depth2_ls {display: block;}
  .sitemap_submenu__ls > .item:last-child .depth2_ls {padding-bottom: 0;}
  .sitemap_submenu__ls > .item .depth2_ls > li > a {display: block; padding-block: 8px; line-height: 1;}
  .sitemap_submenu__ls > .item .depth2_ls > li.active {color: #1b1b1b; font-weight: 500;}

  .sitemap__container .body .block:has(.sitemap__lang) {background: #f3f2f2;}
  .sitemap__lang {display: flex; font-size: 18px;}
  .sitemap__lang a {display: flex; align-items: center; color: #909090; text-transform: uppercase;}
  .sitemap__lang a.active {color: var(--primary-dark); font-weight: 600;}
  .sitemap__lang a:not(:last-child)::after {width: 1px; height: .7em; content: ''; background: #dfdfdf; margin: 0 .6em;}
}
@media screen and (max-width: 767px) {
  .header {height: 50px;}
  .header .logo {width: 120px;}

  .sitemap__container {--padding-inline: 20px; padding-top: 30px;}
}


/* footer */
.footer {background: #171717;}
.footer .footer__bar {border-bottom: 1px solid #323232;}
.footer .footer__bar .container {display: flex; justify-content: space-between; align-items: center;}
.footer .footer__bar .site {width:200px; height: 41px;  background: #232323; color:#9A9A9A; font-size: 16px;display: flex; align-items: center; justify-content: space-between; padding: 10px 13px;}
.footer .footer__bar .footer_nav {padding: 20px 0;}
.footer .footer__bar .footer_nav .btn {padding:0 30px; border-right: 1px solid #707070; font-size: 17px; color:#D4D4D4;}
.footer .footer__bar .footer_nav .btn:first-child {padding-left: 0;}
.footer .footer__bar .footer_nav .btn:last-child {border-right: none;}

.footer .footer_cont {padding: 55px 0 80px; display: flex; gap: 68px; color:#9A9A9A;}
.footer .footer_cont .address_cont {width: 50%;font-size: 18px;}
.footer .footer_cont .address_cont .sbj {color:var(--main-color); }
.footer .footer_cont .address_cont .address {display: flex; flex-direction: column;padding: 0px 0 60px;}
.footer .footer_cont .address_cont .address .addr {}
.footer .footer_cont .address_cont .address .contact {}
.footer .footer_cont .address_cont .address .contact b {margin-left: 1.2em; font-weight: 400;}
.footer .footer_cont .address_cont .address .contact b:first-child {margin-left: 0;}
.footer .copy {font-size: 16px; color:#A8A8A8;}
.footer .address_cont .copy {}
.footer .info-cont .copy {display: none;}
.footer .footer_cont .info-cont {text-align: right; margin-left: auto;}
.footer .footer_cont .info-cont .wrap {}
.footer .footer_cont .info-cont .wrap > a {font-size: 29px; color:#00B9FF; display: block;}
.footer .footer_cont .info-cont .wrap > a span {color: white;}
.footer .footer_cont .sns-cont {display: flex; gap: 10px;align-items: flex-end; cursor: pointer; justify-content: flex-end;margin-top: 30px;}

@media screen and (max-width: 1399px) {
  .footer .footer__bar .footer_nav {padding-block: 15px;}
  .footer .footer__bar .footer_nav {}
  .footer .footer__bar .footer_nav .btn {font-size: 15px; padding-inline: 1em;}
  .footer .footer_cont {padding-block: 40px 60px; flex-direction: column; gap: 20px;}
  .footer .footer_cont .sbj img {width: 150px;}
  .footer .footer_cont .address_cont {width: 100%; font-size: 15px;}
  .footer .footer_cont .address_cont .address {padding-bottom: 0px;}
  .footer .footer_cont .info-cont .wrap > a {font-size: 20px;}
  .footer .address_cont .copy {display: none;}
  .footer .info-cont .copy {display: block; font-size: 14px; margin-top: 1em;}
}
@media screen and (max-width: 767px) {
  .footer .footer_cont .address_cont .address .contact b {margin-left: 0;}
}


.floating-btn {display: flex;flex-direction: column; position: fixed; right:0;bottom:0;cursor: pointer; z-index: 1111; }
.floating-btn .btn {padding: 0; border:none;cursor: pointer;}
.floating-btn .btn > img {display: block;}