@charset "UTF-8";

/* ------------------------------------------------------------------------- */
/* RESET
/* ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p,
address, em, img, strong, i, dl, dt, dd, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, figure, button, input, select {
  margin: 0; padding: 0; border: 0; word-break: break-all;
}

:lang(ko) { word-break: keep-all; }
ul, li { list-style: none; }
ul, li a { display: block; }
a { text-decoration: none; color: inherit; }
em, address { font-style: normal; }
h1, h2, h3, h4, h5, h6, strong { font-weight: normal; }
article, aside, figcaption, figure, footer, header, nav, section, main { display: block; }
table { border-collapse: collapse; border-spacing: 0; }

input, button, select, textarea { font: inherit; border: none; border-radius: 0; background-color: transparent; }

select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
button, select { cursor: pointer; }
textarea { resize: none; outline: none; }

a:focus, button:focus, input:focus,
textarea:focus, select:focus { outline: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline: 2px dashed currentColor; }
input:focus-visible { outline-offset: 0.2rem; }

img, svg, video, canvas, audio, iframe { display: block; }
img, video { max-width: 100%; height: auto; }

html { font-size: 62.5%; }

body {
  font: 400 1.6rem/1.5 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', '돋움', dotum, AppleGothic, sans-serif;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
  overflow-x: hidden;
  min-height: 100vh;
}


/* ------------------------------------------------------------------------- */
/* FONT
/* ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Pretendard';
  src: url(../../common/font/PretendardVariable.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal; 
  font-display: swap;
}
@font-face {
  font-family: 'Arita';
  src: url(../../common/font/AritaBuriKR-SemiBold.ttf) format('truetype');
  font-weight: 600;
  font-style: normal; 
  font-display: swap;
}
@font-face {
  font-family: 'Arita';
  src: url(../../common/font/AritaBuriKR-Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal; 
  font-display: swap;
}


/* ------------------------------------------------------------------------- */
/* TOKEN
/* ------------------------------------------------------------------------- */
:root {
  --WT: #ffffff;
  --WT-a40: rgba(255, 255, 255, 0.4);
  --WT-a30: rgba(255, 255, 255, 0.3);
  --WT-a20: rgba(255, 255, 255, 0.2);

  --BK: #000000;
  --BK-95: #131416;
  --BK-90: #1E2124;
  --BK-80: #33363D;
  --BK-70: #464C53;
  --BK-50: #6D7882;
  --BK-40: #8A949E;
  --BK-10: #E6E8EA;
  --BK-5: #F4F5F6;
  --BK-a50: rgba(0, 0, 0, 0.5);
  --BK-a40: rgba(0, 0, 0, 0.4);
  --BK-a30: rgba(0, 0, 0, 0.3);
  --BK-a10: rgba(0, 0, 0, 0.1);

  --primary: #00A28D;
  --GN-80: #4A7969;
  --GN-60: #68AA94;
  --GN-30: #BEDAD1;
  --GN-20: #DAE6E5;
  --GN-10: #F0F7F4; 

  /* btn more */
  --more-bg: rgba(255, 255, 255, 0.05);
  --more-bg-blur: blur(30px);
  --more-border: rgba(255, 255, 255, 0.35);
  --radius: 9999px;

  /* font */
  --Arita-tit: 600 6rem / 1.3  'Arita';
  --Arita-subtit: 600 4.8rem / 1.3  'Arita';
  --Arita-xl: 600 7.2rem / 1.2  'Arita';
  --Arita-xs: 600 1.8rem / 2.4rem 'Arita';

  --Pretendard-30-700: 700 3rem / 1.5 'Pretendard';
  --Pretendard-28-600: 600 2.8rem / 1.5 'Pretendard';
  --Pretendard-28-500: 500 2.8rem / 1.5 'Pretendard';
  --Pretendard-22-700: 700 2.2rem / 1.5 'Pretendard';
  --Pretendard-18-600: 600 1.8rem / 1.7 'Pretendard';
  --Pretendard-18-500: 500 1.8rem / 1.7 'Pretendard';
  --Pretendard-18-400: 400 1.8rem / 1.5 'Pretendard';
  --Pretendard-17-700: 700 1.7rem / 1.5 'Pretendard';
  --Pretendard-17-600: 600 1.7rem / 1.5 'Pretendard';
  --Pretendard-17-500: 500 1.7rem / 1.5 'Pretendard';
  --Pretendard-17-400: 400 1.7rem / 1.5 'Pretendard';
  --Pretendard-16-600: 600 1.6rem / 1.5 'Pretendard';
  --Pretendard-16-400: 400 1.6rem / 1.5 'Pretendard';
  --Pretendard-15: 500 1.5rem / 1.5 'Pretendard';
  --Pretendard-14: 500 1.4rem / 1.5 'Pretendard';

  /* components */
  --inner-120: 0 12rem;
  --table-border: #DDDFE1;
  --border: #E3E5E7;
  --digi-bg: #111836;
  --label-bg : #245E53;
}


body.noScroll {overflow: hidden;}
.soundOnly {
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  border: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip: rect(0, 0, 0, 0) !important;
}
.ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ellipsis-2 {overflow: hidden; 
  display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* flex utility */
.fxBtween {display: flex; align-items: center; justify-content: space-between;}
.fxStart {display: flex; align-items: flex-start;}
.fxEndBtween {width: 100%; display: flex; align-items: flex-end; justify-content: space-between;}
.fxColStart {display: flex; flex-direction: column; align-items: flex-start;}



/* ------------------------------------------------------------------------- */
/* COMMON
/* ------------------------------------------------------------------------- */
#wrap { width: 100%; min-height: 100dvh; overflow: hidden; position: relative; }
/* .inner { width: 100%; padding: var(--inner-120);} */
.inner { 
  max-width: 192rem; width: 100%;  
  padding: var(--inner-120); margin: auto;
}


/*------ header -----*/
#header { 
  width: 100%; height: 11.2rem; 
  position: fixed; inset: 0; z-index: 100;
  transition: transform 0.4s ease, backdrop-filter 0.2s ease;
  backdrop-filter: none;
}
#header.hidden {transform: translateY(-100%);}
#header.is-blur {
  backdrop-filter: blur(10px);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 100%
    );
}
#header .inner {height: 100%;}

nav.gnb {
  width: 100%; height: 100%;
  font: var(--Pretendard-18-600); color: var(--WT); 
  transition: color 0.2s ease;
}
nav.gnb ul li {transition: color 0.2s ease;}
nav.gnb ul.dep1 {height: 100%; display: flex; align-items: center; justify-content: space-between;}
nav.gnb ul.dep1 > li {
  max-width: 24rem; width: 100%; height: 100%; padding-block: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
nav.gnb ul.dep1 > li  a {
  display: block; 
  width: 100%; height: 100%; 
  display: flex; align-items: center; justify-content: center;
}
nav.gnb ul.dep1 li .gnb-logo img {max-width: 12.4rem; transition: filter 0.2s ease;}
nav.gnb ul.dep1 li.gnb-util {display: flex; align-items: center; gap: 0.8rem; flex-direction: row;}
nav.gnb ul.dep1 li.gnb-util button{
  width: 4.4rem; height: 4.4rem;
  background-repeat: no-repeat; background-position: center;
}
nav.gnb ul.dep1 li.gnb-util .search {background-image: url(../../images/collection/ico_search.svg);}
nav.gnb ul.dep1 li.gnb-util .allMenu {background-image: url(../../images/collection/ico_allMenu.svg);}

/* dep2 */
nav.gnb ul.dep2 {
  display: flex; align-items: center;
  flex-direction: column; gap: 2rem; 
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background-color: transparent;
  height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: height 0.7s ease, opacity 0.2s ease 0.2s, visibility 0.3s ease 0.2s;
}
#header nav.gnb ul.dep2 li {
  width: 100%;
  font: var(--Pretendard-16-600); text-align: center; 
  color: transparent; transition: color 0.1s ease;
}
#header nav.gnb ul.dep2 li > a {padding-block: 0;}

/* 헤더 컬러 모드 */
#header.is-BK nav.gnb { color: var(--BK); }
#header.is-WT nav.gnb { color: var(--WT); }

#header.is-WT nav.gnb .gnb-logo img,
#header.is-WT nav.gnb ul li.gnb-util button.search,
#header.is-WT nav.gnb ul li.gnb-util button.allMenu {filter: invert(0);}

#header.is-BK nav.gnb .gnb-logo img,
#header.is-BK nav.gnb ul li.gnb-util button.search,
#header.is-BK nav.gnb ul li.gnb-util button.allMenu,

#header:hover nav.gnb .gnb-logo img,
#header:hover nav.gnb ul li.gnb-util button.search,
#header:hover nav.gnb ul li.gnb-util button.allMenu {filter: invert(1);}

#header::before { content: ''; display: inline-block;
  width: 100%; height: 0;
  position: absolute; inset: 0; top: 0rem; z-index: 0;
  background-color: var(--WT);
  transition: height 0.5s ease, background-color 0.3s ease;
}
#header::after {content: ''; display: block;
  width: 100%; height: 1px;
  background-color: transparent; position: absolute; left: 0; top: 11.2rem;
  opacity: 0;
  transition: background-color 0.2s ease, opacity 0.3s ease;
}
#header:hover::before {height: 42rem; background-color: var(--WT);}
#header:hover::after {background-color: var(--BK-10); opacity: 1;}
#header:hover nav.gnb ul li {color: var(--BK-95);}
#header:hover nav.gnb ul.dep2 {
  width: 100%; 
  height: 30.8rem; height: 30.8rem;
  padding-block: 3.2rem;
  border-top: 2px solid transparent;
  opacity: 1; visibility: visible;
}
#header nav.gnb ul.dep1 li:hover ul.dep2,
#header nav.gnb ul.dep2:hover {background-color: var(--BK-5); border-color: var(--primary);}
#header:hover nav.gnb ul.dep2 li:hover {color: var(--primary);}



/*------ footer -----*/
footer {width: 100%; height: 13rem; border-top: 1px solid var(--border);}
footer .inner {height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem;}
footer .ft-cont {display: flex; align-items: center; gap: 6rem;}
footer .ft-cont .ft-logo {max-width: 13.2rem; filter: invert(1);}
footer .ft-cont .ft-nav ul {
  display: flex; align-items: center; gap: 2.4rem;
  font: var(--Pretendard-15); color: var(--BK-80);
}
footer .ft-cont .ft-nav ul li {display: flex; align-items: center; position: relative; white-space: nowrap;}
footer .ft-cont .ft-nav ul li:not(:last-child)::after {content: ''; 
  display: inline-block;
  width: 1px; height: 1.4rem;
  background-color: var(--BK-40);
  position: absolute; right: -1.2rem; 
}
footer .ft-cont .copyright {font: var(--Pretendard-14); color: var(--BK-80);}
footer .ft-org {display: flex; align-items: center; justify-content: center; gap: 2.4rem;}

@media (max-width: 1800px) {
  footer .ft-cont.drop {flex-direction: column; gap: 2rem; align-items: flex-start;}
}

/*------ section -----*/
.sec {padding: 16rem 0;}
.sec-item {display: flex; align-items: flex-start; gap: 6rem;}
.sec-item + .sec-item {margin-top: 12rem;}
.sec-head {display: flex; align-items: flex-end; justify-content: space-between; flex: 1;}
.sec-head.center {justify-content: center;}
.sec-head.fxStart {align-items: center; justify-content: flex-start; gap: 5rem;}
.sec-head.ty-col {flex-direction: column; align-items: flex-start; gap: 4rem;}
.sec-con > .sec-head { margin-bottom: 5rem; }

.sec-tit, .sec-tit2 {
  font: var(--Arita-tit); color: var(--BK-90);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.sec-tit2 {font: var(--Arita-subtit);}
.sub-tit {font: var(--Pretendard-28-600);}
.sub-tit2 {font: var(--Pretendard-22-700);}
.sec-label {font: var(--Arita-xs); color: var(--GN-10);}
.desc {font: var(--Pretendard-18-400); color: var(--GN-10);}

/* WT text */
.sec-tit.WT,
.sub-tit2.WT {color: var(--WT);}



/* ------------------------------------------------------------------------- */
/* BUTTON
/* ------------------------------------------------------------------------- */
button, input, textarea {font: var(--Pretendard-18-500); letter-spacing: -0.02em;} 

/* 바로가기 */
.btn.more {
  min-height: 5.7rem;
  padding: 1.5rem 3rem; margin-top: 5rem;
  display: inline-flex; align-items: center; flex-shrink: 0;
  background-color: var(--more-bg); backdrop-filter: var(--more-bg-blur);
  border: 1px solid var(--more-border); border-radius: var(--radius);
  color: var(--WT);
  transition: background-color 0.3s ease, color 0.3s ease; 
}
.btn.more::after{content: ''; display: inline-block;
  width: 0; height: 2.4rem; overflow: hidden;
  mask: url(../../images/collection/ico_outLink.svg) no-repeat center / contain;
  -webkit-mask: url(../../images/collection/ico_outLink.svg) no-repeat center / contain;
  background-color: var(--primary); opacity: 0;
  transition: width 0.3s ease, opacity 0.1s linear;
}
.btn.more:hover {background-color: var(--WT); color: var(--primary); gap: 1rem;}
.btn.more:hover::after {width: 2.4rem; opacity: 1;}

/* ty2 */
.btn.more.ty2:hover {color: var(--BK-80);}
.btn.more.ty2:hover::after {background-color: var(--BK-80); color: var(--BK-80);}

/* BK */
.btn.more.BK {color: var(--BK-90); font: var(--Pretendard-18-500); background-color: rgba(0, 0, 0, 0.05);}
.btn.more.BK:hover {font: var(--Pretendard-18-500);background-color: var(--WT); color: var(--primary);}

/* 화살표 바로가기 */
.ico {
  min-width: 5.2rem; height: 5.2rem;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--WT); border: 1px solid transparent; border-radius: var(--radius);
  background-repeat: no-repeat; background-position: center;
  transition: background-color 0.2s ease, border-color 0.3s linear, color 0.2s ease;
}
.ico.link {border-color: var(--border); background-image: url(../../images/collection/ico_outLink.svg);}
.ico.link:hover {border-color: var(--BK-80);}



/* ------------------------------------------------------------------------- */
/* TABLE
/* ------------------------------------------------------------------------- */
table {width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0; text-align: left; vertical-align: middle;}
th {font-weight: normal;}

.tbl table th, .tbl table td {height: 7.3rem; padding: 0.6rem;}
.tbl table td {
  font: var(--Pretendard-18-500); color: var(--BK-90); letter-spacing: -0.02em;
  transition: background-color 0.3s linear;
}

/* 정렬 */
.tbl table td.tar {text-align: right;}
.tbl table td.tac {text-align: center;}

/* list 타입 */
.tbl.list table td {border: 1px solid var(--table-border); border-left: 0; border-right: 0;}
.tbl.list table td.day {font: var(--Pretendard-17-400); color: var(--BK-50); white-space: nowrap;}

/* hover, 링크(임의) */
.tbl.list table tbody tr:has(a):hover td {background-color: #f0f7f463; cursor: pointer;}
.tbl.list table tbody tr:has(a):hover td a {text-decoration: underline; text-underline-offset: 3px;}

/* 말줄임 */
.tbl table .ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}


/* ------------------------------------------------------------------------- */
/* TAB
/* ------------------------------------------------------------------------- */
.tab {display: flex; align-items: center; justify-content: center; gap: 1rem;}
.tab .tab-menu {
  height: 5.2rem;
  padding: 1.4rem 2.4rem;
  border: 1px solid var(--BK-a10); border-radius: var(--radius);
  background-color: var(--WT); color: var(--BK-80);
  font: var(--Pretendard-17-500);
  transition: background-color 0.2s linear, border 0.2s ease, color 0.2s linear;
}
.tab .tab-menu.active {background: var(--BK-90); color: var(--WT);}
.tab .tab-menu.link {background-image: url(../../images/collection/ico_outLink.svg); background-repeat: no-repeat; background-position: center;}
.tab .tab-menu:hover {border-color: var(--BK-90);}

/* 탭 패널 */
[data-tab-panel] { position: absolute; visibility: hidden; pointer-events: none;}
[data-tab-panel].active { position: relative; visibility: visible; pointer-events: auto;}

/* 탭 > 텍스트박스 */
.tab-text {
  margin-top: 2.4rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
}
.tab-text h4 {
  width: 100%; 
  font: var(--Pretendard-22-700); color: var(--BK-95); letter-spacing: 0.03em; 
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
}
.tab-text p {font: var(--Pretendard-18-400); color: var(--BK-70);}
.tab-text .day {font: var(--Pretendard-17-400); color: var(--BK-40);}


/*---- 탭 > 스와이퍼 버튼 ----*/
.swiper-controls.tcon {
  width: 100%; 
  position: absolute; z-index: 10;
  top: 50%; transform: translateY(-50%); left: -2%;
  opacity: 0; transition: opacity 0.3s ease;
}

.swiper-controls.tcon .sw-btns {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.swiper-controls.tcon .sw-btns button {
  width: 5.2rem; height: 5.2rem;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--WT-a40); backdrop-filter: blur(4px);
  border-radius: var(--radius); border: 1px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, filter 0.2s ease;
}
.swiper-controls.tcon .sw-btns .swiper-next {position: absolute; right: -8%;}
.swiper-controls.tcon .sw-btns button::before {
  content: ''; display: block;
  width: 2.6rem; height: 2.6rem;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  background-color: var(--BK-90);
}
.swiper-controls.tcon .sw-btns .swiper-prev::before {
  mask-image: url(../../images/collection/ico_prev_BK.svg); 
  -webkit-mask-image: url(../../images/collection/ico_prev_BK.svg);
}
.swiper-controls.tcon .sw-btns .swiper-next::before {
  mask-image: url(../../images/collection/ico_next_BK.svg); 
  -webkit-mask-image: url(../../images/collection/ico_next_BK.svg);
}

/* state */
.tab-contents:hover .swiper-controls.tcon {opacity: 1;}

.swiper-controls.tcon .sw-btns button:hover,
.swiper-controls.tcon .sw-btns button:active {border-color: var(--WT); filter: brightness(1.1);}

.swiper-controls.tcon .sw-btns button:disabled,
.swiper-controls.tcon .sw-btns button:disabled:hover,
.swiper-controls.tcon .sw-btns button:disabled:active {
  filter: none;  backdrop-filter: blur(10px); 
  border-color: transparent; 
  opacity: 0.7; cursor: not-allowed; pointer-events: none;
}


/* ------------------------------------------------------------------------- */
/* swiper
/* ------------------------------------------------------------------------- */
.swiper-slide:hover {cursor: pointer;}