/* include 공통 CSS */

/************************* 공통 시작*************************/
.inner {width: 100%; max-width:1440px; margin: 0 auto; }
.inner--fill {max-width:none; padding-right: calc((100% - 1600px) / 2); padding-left: calc((100% - 1600px) / 2);}
@media(max-width:1640px){
	.inner {padding: 0 4%;}
}

/* 상단 여백은 .sub-head가, 하단 여백은 각 페이지가 직접 가진다
   (여기서 padding을 주면 페이지마다 다른 하단 여백을 제어할 수 없다) */
.sub-container {min-height: 200px;}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header__fix {position: fixed; left:0; top:0; z-index: 100; width:100%; height: 100px; border-bottom:1px solid var(--rgba04); --menu-height : 0; transition: 0.15s ease-in-out all;}
/* 드롭다운 뒤에 깔리는 흰 판 — 높이는 topmenu 스킨 JS가 --menu-height로 넣어준다 */
.header__fix::after {content:''; position: absolute; top: 100%; left:0; z-index:1; width: 100%; height: var(--menu-height); background-color: var(--white); transition: 0.15s ease-in-out all;}
/* 헤더 높이를 .inner까지 물려줘야 자식이 세로 중앙에 놓인다 */
.header__fix .inner {height: 100%;}
/* 좌우 1fr이 균등 분배돼 가운데 메뉴가 로고·버튼 폭과 무관하게 화면 정중앙에 온다 */
.header__body {display: grid; grid-template-columns:1fr auto 1fr; align-items: center; height: 100%;}
.header__ctrl {display: flex; align-items: center; justify-self: end; height: 100%;}

.header-home {display: block; justify-self: start;}
.header-home__logo {display: block; width: 99px;}
.header-home__logo--color {display: none;}

.header-navi {position: relative; height: 100%;}
/* 메뉴에서 서브메뉴로 마우스를 옮길 때 드롭다운 사이 빈 공간이 .header-navi 박스 밖이라
   mouseleave가 터져 메뉴가 닫히던 문제. 열린 높이만큼 hit 영역을 넓혀 hover를 유지한다
   (가상요소는 부모의 일부로 판정되므로 mouseleave가 발생하지 않는다)
   z-index는 반드시 양수 — 음수로 두면 hit-test에서 배경 레이어로 밀려 아래 섹션이 잡힌다.
   스택 순서: 흰 판(header__fix::after, 1) < 이 브릿지(2) < 서브메뉴 링크(3) */
.header-navi::after {content:''; position: absolute; top: 100%; left: 50%; z-index:2; width: 100vw; height: var(--menu-height); transform:translateX(-50%);}
.header-navi__m-list {display: flex; height: 100%; gap:80px;}
.header-navi__m-item {position: relative; height: 100%;}
.header-navi__m-btn {display: flex; align-items: center; height: 100%; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing:-0.5px; transition: .15s ease-in-out all;}
.header-navi__m-btn,
.header-navi__m-btn:link,
.header-navi__m-btn:visited {color: var(--white);}
.header-navi__s-wrap {position: absolute; top: 100%; left: 50%; z-index:3; min-width: 150%; transform:translateX(-50%);}
.header-navi__s-list {padding: 16px 0; text-align: center; transition: .15s ease-in-out all;}
.header-navi__s-btn,
.header-navi__s-btn:link,
.header-navi__s-btn:visited,
.header-navi__c-btn,
.header-navi__c-btn:link,
.header-navi__c-btn:visited {color: var(--main-black);}
.header-navi__s-btn {display: block; padding: 8px 0; white-space: nowrap; font-size: 15px; font-weight: 500; letter-spacing:-0.5px; color: var(--white); transition: .15s ease-in-out all;}
@media(hover:hover){
	.header-navi__m-btn:hover {color: var(--secondary);}
	.header-navi__s-btn:hover {color: var(--secondary);}
	/* 드롭다운은 JS 클래스(.on)가 아니라 CSS hover로 직접 연다 */
	.header-navi__m-item:hover .header-navi__s-wrap {opacity: 1; visibility: visible;}
}
@media(max-width:1080px){
	.header-navi {display: none;}
	/* 가운데 메뉴가 빠지면 3분할 grid가 어긋나므로 좌우 2분할로 전환 */
	.header__body {display: flex; justify-content: space-between;}
}

.header-contact {display: flex; align-items: center; justify-content: center; width: 120px; height: 40px; border-radius: 500px; background-color: var(--main-color); transition: .15s ease-in-out all;}
.header-contact__txt {font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing:-0.5px; color: var(--white);}

.header-drawer {display: none; position: relative; margin-left: 24px;}
.header-drawer__btn {position: relative; width: 20px; height: 14px; z-index: 0; transition:.15s ease-in-out all;}
.header-drawer__line {position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--white); transition:.15s ease-in-out all;}
.header-drawer__line--top {top: 0;}
.header-drawer__line--middle {top: 50%; transform:translateY(-50%)}
.header-drawer__line--bottom {bottom: 0;}
@media(hover:hover){
	.header-drawer__btn:hover .header-drawer__line--top{left: -0.25em;}
	.header-drawer__btn:hover .header-drawer__line--middle{left: 0.25em;}
	.header-drawer__btn:hover .header-drawer__line--bottom{left: -0.125em;}
}
@media(max-width:1080px){	
	.header-drawer {display:block;}
}

/* 액티브(라이트 모드) — 밝은 배경 섹션 위 / 드롭다운 오픈 시 */
.header__fix.enter {background-color: var(--white); border-bottom-color: transparent;}
.header__fix.enter .header-home__logo--white {display: none;}
.header__fix.enter .header-home__logo--color {display: block;}
.header__fix.enter .header-navi__m-btn {color: var(--main-black);}
.header__fix.enter .header-navi__m-btn--crt {color: var(--main-color);}
.header__fix.enter .header-navi__s-list {background-color: var(--white);}
.header__fix.enter .header-navi__s-btn {color: var(--main-black);}
.header__fix.enter .header-navi__s-btn--crt {color: var(--main-color);}
.header__fix.enter .header-drawer__line {background-color: var(--main-black);}
/* 현재 메뉴 표시 — 다크 모드에서는 포인트 그린 */
.header-navi__m-btn--crt {color: var(--secondary);}
.header-navi__s-btn--crt {color: var(--secondary);}

/************************* header_inc 끝*************************/

/************************* sub-visual 시작 *************************/
/* 배경 이미지는 메뉴별로 달라 sh.php의 <style>에서 넣는다(어두운 오버레이는 이미지에 포함) */
.sub-visual {display: grid; grid-template-rows:1fr auto; min-height: 520px; background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--white);}
.sub-visual__body {padding:218px 0 0;}
.sub-visual__title {font-size: 60px; font-weight: 700; line-height: 1.4; letter-spacing:-1px;}
@media(max-width:1320px){
	.sub-visual {min-height: 440px;}
	.sub-visual__body {padding:184px 0 0;}
	.sub-visual__title {font-size: 48px;}
}
@media(max-width:1080px){
	.sub-visual {min-height: 380px;}
	.sub-visual__body {padding:159px 0 0;}
	.sub-visual__title {font-size: 40px;}
}
@media(max-width:768px){
	.sub-visual {min-height: 300px;}
	.sub-visual__body {padding:126px 0 0;}
	.sub-visual__title {font-size: 32px;}
}
@media(max-width:500px){
	.sub-visual {min-height: 260px;}
	.sub-visual__body {padding:109px 0 0;}
	.sub-visual__title {font-size: 26px;}
}
/* 서브페이지 공통 타이틀 — 2depth 메뉴명(없으면 1depth) */
.sub-head {padding:120px 0;}
.sub-head__title {font-size: 52px; font-weight: 700; line-height: 1.4; letter-spacing:-1px; text-align: center; color: var(--main-black);}
@media(max-width:1320px){
	.sub-head {padding:100px 0;}
	.sub-head__title {font-size: 44px;}
}
@media(max-width:1080px){
	.sub-head {padding:80px 0;}
	.sub-head__title {font-size: 38px;}
}
@media(max-width:768px){
	.sub-head {padding:60px 0;}
	.sub-head__title {font-size: 30px;}
}
@media(max-width:500px){
	.sub-head {padding:48px 0;}
	.sub-head__title {font-size: 26px;}
}
/************************* sub-visual 끝 *************************/

/************************* sub-dropdown 시작 *************************/
/* 서브비주얼 하단에 겹치는 카테고리바 — 좌우 여백까지 상하 라인이 이어진다 */
.drop-menu {border-top:1px solid var(--rgba02); border-bottom:1px solid var(--rgba02);}
.drop-menu__body {display: flex; min-height: 72px; color: var(--white);}
.drop-menu__home {display: flex; justify-content: center; align-items: center; width: 72px; border-right:1px solid var(--rgba02); border-left:1px solid var(--rgba02);}
.drop-menu__icon {width: 18px;}
.drop-menu__wrap {position: relative; z-index: 0; width: 304px; border-right:1px solid var(--rgba02);}
.drop-menu__btn {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding:0 28px; transition:.15s ease-in-out all;}
.drop-menu__btn,
.drop-menu__btn:link,
.drop-menu__btn:visited {color: var(--white);}
.drop-menu__tit {display: block; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing:-0.5px;}
.drop-menu__arr {width: 18px; transition:.15s ease-in-out all;}
.drop-menu__navi {position: absolute; top: 100%; left: -1px; z-index: 10; width:calc(100% + 2px); height: 0; overflow: hidden;}
.drop-menu__list {background-color: var(--white); border:1px solid var(--line01);}
.drop-menu__link {display: block; padding:12px 28px; font-size: 15px; font-weight: 500; letter-spacing:-0.5px; transition:.15s ease-in-out all;}
.drop-menu__link,
.drop-menu__link:link,
.drop-menu__link:visited {color: var(--main-black);}
@media(hover:hover){
	.drop-menu__link:hover {background-color: var(--main-color); color: var(--white);}
}
.drop-menu__btn.on .drop-menu__arr {transform:rotate(180deg);}
/* 카테고리바 반응형 — 홈 72 + 셀렉트 304x2 = 680 고정이라 좁은 화면에서 문서가 통째로 넘쳤다 */
@media(max-width:1080px){
	.drop-menu__wrap {width: 240px;}
}
@media(max-width:768px){
	.drop-menu__body {min-height: 60px;}
	.drop-menu__home {width: 56px;}
	/* 고정폭을 풀고 남는 폭을 나눠 갖는다 */
	.drop-menu__wrap {flex:1; min-width: 0; width: auto;}
	.drop-menu__btn {padding:0 16px;}
	.drop-menu__tit {font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.drop-menu__arr {flex-shrink: 0; margin-left: 8px;}
}
@media(max-width:500px){
	.drop-menu__body {min-height: 52px;}
	.drop-menu__home {width: 44px;}
	.drop-menu__icon {width: 16px;}
	.drop-menu__btn {padding:0 10px;}
	.drop-menu__tit {font-size: 13px;}
	.drop-menu__arr {width: 14px; margin-left: 4px;}
	.drop-menu__link {padding:10px 14px; font-size: 14px;}
}

/************************* dropdown 끝 *************************/
/************************* tabmenu 시작 *************************/
.tab-menu {border-bottom:1px solid var(--main-gray)}
.tab-menu__list {display: flex;}
.tab-menu__item {flex:1;}
.tab-menu__btn {padding:1.5em 0.75em; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; transition: .15s ease-in-out all;}
.tab-menu__btn--crt {background-color: var(--main-color);}
.tab-menu__btn--crt,
.tab-menu__btn--crt:link,
.tab-menu__btn--crt:visited {color: #fff;}
@media(hover:hover){
	.tab-menu__btn:hover {background-color: var(--main-color); color: #fff;}
}
/************************* sub-tabmenu 끝 *************************/

/************************* depth3 시작 *************************/
.depth3__list {display: flex; flex-flow: row wrap;}
.depth3__item {flex:1;}
.depth3__item:last-child {border:0;}
.depth3__btn {padding:1.5em 0.75em; width: 100%; height: 100%; display: flex; align-items: center;justify-content: center; border-bottom:2px solid var(--main-gray); transition:.15s ease all;}
.depth3__btn--crt {border-color:var(--main-color);}
@media(hover:hover){
	.depth3__btn:hover {border-color:var(--main-color);}
}
/************************* depth3 끝 *************************/


/************************* footer_inc 시작 *************************/
.footer {padding:60px 0; background-color: var(--bg01); color: var(--white);}
.footer__head {display: flex; justify-content: space-between; align-items: center;}
.footer__name {font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing:-0.5px;}

.footer-policy__link {margin-right: 12px; vertical-align: baseline; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing:-0.5px; transition:.15s ease all;}
.footer-policy__link:last-of-type {margin-right: 0;}
.footer-policy__link--strong {font-weight: 700;}
.footer-policy__link,
.footer-policy__link:visited,
.footer-policy__link:link {color: var(--white);}
@media(hover:hover){
	.footer-policy__link:hover {color: var(--secondary);}
}

.footer-info {margin:20px 0 0;}
.footer-info__row {display: flex; flex-wrap:wrap; margin-bottom: 4px;}
.footer-info__row:last-child {margin-bottom: 0;}
.footer-info__item {display: flex; align-items: center; margin-right: 16px; font-size: 16px; line-height: 1.7; letter-spacing:-0.5px;}
.footer-info__item:last-child {margin-right: 0;}
.footer-info__cate {margin-right: 8px; font-weight: 700; color: var(--white);}
.footer-info__desc {font-weight: 500; transition:.15s ease all;}
.footer-info__desc,
.footer-info__desc:visited,
.footer-info__desc:link {color: var(--rgba01);}
@media(hover:hover){
	a.footer-info__desc:hover {color: var(--secondary);}
}

.footer__foot {display: flex; justify-content: space-between; align-items: flex-end; margin:28px 0 0;}
.footer-sns {display: flex;}
.footer-sns__link {display: block; width: 40px; margin-right: 4px; transition:.15s ease all;}
.footer-sns__link:last-child {margin-right: 0;}
.footer-sns__link img {display: block; width: 100%;}
@media(hover:hover){
	.footer-sns__link:hover {opacity: 0.7;}
}
.footer__cprt {font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing:-0.5px; color: var(--rgba02);}
/* ===== 푸터 반응형 (트랙2) ===== */
@media(max-width:1080px){
	.footer {padding:48px 0;}
	.footer__head {flex-wrap:wrap;}
	.footer-policy {margin:12px 0 0;}
}
@media(max-width:768px){
	.footer {padding:40px 0;}
	.footer__name,
	.footer-policy__link,
	.footer-info__item,
	.footer__cprt {font-size: 15px;}
	.footer-info__row {display: block; margin-bottom: 8px;}
	.footer-info__item {margin:0 0 4px;}
	.footer__foot {flex-wrap:wrap; align-items: flex-start;}
	.footer__cprt {width: 100%; margin:20px 0 0;}
}
@media(max-width:500px){
	.footer__name,
	.footer-policy__link,
	.footer-info__item,
	.footer__cprt {font-size: 14px;}
}

/************************* footer_inc 끝 *************************/


/************************* split-text *************************/
.split-text__word {font-size: inherit;}
.split-text__letter {display: inline-block; font-size: inherit;}
.split-text--no-delay .split-text__letter {transition-delay:0s !important; animation-delay:0s !important;}