@charset "utf-8";

html {font-size: 62.5%; /* 16px */}
body {background: #fff; color: var(--col-black); font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1.25;}

.container {width: 100%; max-width: 1428px; margin: 0 auto;}

@media (min-width: 1921px) {
    html {font-size: 70.4%; /* 18px */}
}
@media (max-width: 1500px) {
    .container {padding: 0 4rem;}
}
@media (max-width: 992px) {
    html {font-size: 58.6%; /* 15px */}
    .container {padding: 0 2rem;}
}



/*============================================================*/
/* 헤더 */
/*============================================================*/
.hd-wrap {position: fixed; top: 0; left: 0; right: 0; z-index: 10;}
header {position: relative; height: var(--hd-height); background: #fff; z-index: 10;}
header::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: .5rem; background: var(--col-theme);}
header .container {position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%;}

/* 로고 */
.hd-logo {flex: 0 0 auto; width: 6.8rem; aspect-ratio: 68/40; background: url(/img/logo/symbol.png) left center/contain no-repeat;}
.hd-logo a,
.hd-logo button {display: block; width: 100%; height: 100%;}

/* 우측 버튼 */
header .right {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}

/* 언어 토글 */
.lang-toggle {position: absolute; top: calc(50% - 1.75rem); right: 0; display: inline-block; border-radius: 10rem; background: var(--col-theme); color: #fff; overflow: hidden;}
.lang-current {display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 0.8rem 1.2rem; font-weight: 500;}
.lang-current::after {content: ""; width: 1.5rem; aspect-ratio: 15/10; background: url("/img/icon/arrow_wt.svg") center/contain no-repeat;}

.lang-list {position: relative; height: 0; opacity: 0; visibility: hidden; width: 100%; z-index: 10; transition: height .35s ease-in-out;}
.lang-list li {border-top: 1px solid #eee;}
.lang-list a {display: block; padding: 6px 10px; text-align: center;}

.lang-toggle.open {border-radius: 2rem;}
.lang-toggle.open .lang-current::after {transform: rotate(180deg);}
.lang-toggle.open .lang-list {height: auto; opacity: 1; visibility: visible;}

@media (max-width: 1500px) {
    .lang-toggle {right: 4rem;}
}
@media (max-width: 767px) {
    header {height: var(--hd-height-m);}
    .lang-toggle {right: 2rem;}
}




/*============================================================*/
/* 컨테이너 */
/*============================================================*/
.content-container {padding-top: calc(var(--hd-height)); overflow: hidden;}

/* 배경 라인 요소 */
.content-container {position: relative;}
.hero-line {position: absolute; top: 0.4%; left: 58%; transform: translateX(-50%); width: 102%; height: auto; pointer-events: none;}

.scroll-path1 {opacity: 0; stroke-dasharray: 500; stroke-dashoffset: -500; animation: drawLineDown 1s ease-out forwards, fadeIn 1s ease-out forwards;}
.scroll-path2 {opacity: 0; stroke-dasharray: 3000; stroke-dashoffset: -3000; animation: drawLineDown 2.6s ease-out forwards 1s, fadeIn 2s ease-out forwards 1s;}
@keyframes drawLineDown {
    to {stroke-dashoffset: 0;}
}
@keyframes fadeIn {
    to {opacity: 1;}
}


@media (max-width: 1450px) {
    .hero-line {width: 108%;}
}
@media (max-width: 992px) {
    .hero-line {display: none;}
}
@media (max-width: 767px) {
    .content-container {padding-top: calc(var(--hd-height-m));}
}




/*============================================================*/
/* 푸터 */
/*============================================================*/
footer {padding: 2.6rem 0; border-top: 1px solid var(--col-bd-gray);}
footer .ft-name {font-size: 16px; letter-spacing: -0.02em;}
footer .ft-info {margin-top: 8px; color: var(--col-gray); font-size: 14px; line-height: 1.45;}
footer .copyright {margin-top: 16px; color: var(--col-gray); font-size: 12px;}

@media (min-width: 1921px) {
    footer .ft-name {font-size: 18px;}
    footer .ft-info {font-size: 16px;}
    footer .copyright {font-size: 14px;}
}