/* include 공통 CSS */

/************************* 공통 시작*************************/
.inner {width:100%; max-width:1600px; 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%;}}

/* 헤더·푸터·제품카드 그리드 전용 (시안 자식 좌표 80~1840 = 1760) */
.inner-1760 {width:100%; max-width:1760px; margin:0 auto;}
@media(max-width:1800px){.inner-1760 {padding:0 4%;}}

/* 서브페이지 본문 공통 상하 여백 — 시안 Section-1 상단 120 (페이지별로 다시 잡지 않는다) */
.sub-container {padding: 120px 0; min-height:80px;}
@media(max-width:1080px){.sub-container {padding: 90px 0;}}
@media(max-width:768px){.sub-container {padding: 60px 0;}}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header {position:relative; z-index:100;}
.header__fix{position:fixed; top:0; left:0; z-index:100; width:100%; background-color:var(--white); transition:background-color .3s ease;}
.header__container {display:flex; align-items:center; height:var(--header-height);}
.header-home {display:flex; align-items:center; flex-shrink:0;}
.header-home__logo {width:166px;}
.header-home__logo--light {display:none;}

/* 메인(_INDEX_)만 히어로 위 투명, 스크롤 시 흰 배경으로 전환 */
.header--overlay .header__fix{background-color:transparent;}
.header--overlay .header-home__logo--light {display:block;}
.header--overlay .header-home__logo--dark {display:none;}
.header--overlay.header--active .header__fix{background-color:var(--white);}
.header--overlay.header--active .header-home__logo--light {display:none;}
.header--overlay.header--active .header-home__logo--dark {display:block;}

/* 전체메뉴 펼침(.on 은 topmenu all1 스킨 JS가 부여) — 흰 배경 + 컬러 로고 */
.header--overlay .header__fix.on .header-home__logo--light {display:none;}
.header--overlay .header__fix.on .header-home__logo--dark {display:block;}
.header--overlay .header__fix.on .header-drawer__line {background-color:var(--main-black);}

/* 1·2·3차 메뉴 스타일은 include/source/topmenu/all1/topmenu.skin.php 가 담당 */
.header-navi {margin-left:auto;}

.header-cta {display:flex; flex-shrink:0;}
.header-cta__btn {display:flex; flex-direction:column; align-items:center; justify-content:center; width:120px; height:var(--header-height); padding:12px 20px; font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-0.5px; text-align:center; color:var(--white);}
.header-cta__btn:link, .header-cta__btn:visited {color:var(--white);}
.header-cta__btn--catalog {background-color:var(--secondary);}
.header-cta__btn--quote {background-color:var(--main-color);}
.header-cta__line {display:block;}

/* 헤더 트랙2 — 로고는 --header-height(768 에서 64) 에 맞춰 축소 */
@media(max-width:768px){
	.header-home__logo {width:130px;}
}
@media(max-width:500px){
	.header-home__logo {width:112px;}
}

/* drawermenu 열기 버튼 (스킨 JS가 .header-drawer__btn 을 찾는다) */
.header-drawer {display:none; align-items:center; margin-left:20px;}
.header-drawer__btn {position:relative; width:26px; height:18px;}
.header-drawer__line {position:absolute; left:0; width:100%; height:2px; background-color:var(--main-black); transition:background-color .2s ease;}
.header-drawer__line--top {top:0;}
.header-drawer__line--middle {top:8px;}
.header-drawer__line--bottom {bottom:0;}
.header--overlay .header-drawer__line {background-color:var(--white);}
.header--overlay.header--active .header-drawer__line {background-color:var(--main-black);}
@media(max-width:1080px){
	.header-navi {display:none;}
	.header-cta {display:none;}
	.header-drawer {display:flex; margin-left:auto;}
	.header__container {height:var(--header-height);}
}
/* 모바일 drawer 스타일은 include/source/drawermenu/aside/drawermenu.skin.php 가 담당 */
/************************* header_inc 끝*************************/

/************************* sub-hero 시작 *************************/
/* 서브비주얼 — 헤더(80)가 위에 겹치는 구조. 배경 오버레이는 Figma bg fill 검정 20% */
.sub-hero {padding-top:255px; background-repeat:no-repeat; background-position:center; background-size:cover; background-color:var(--gray-800);}
.sub-hero--m1 {background-image:linear-gradient(var(--rgba05), var(--rgba05)), url('/theme/responsive_duroo/include/img/sub_visual_1.jpg');}
.sub-hero--m2 {background-image:linear-gradient(var(--rgba05), var(--rgba05)), url('/theme/responsive_duroo/include/img/sub_visual_2.jpg');}
.sub-hero--m3 {background-image:linear-gradient(var(--rgba05), var(--rgba05)), url('/theme/responsive_duroo/include/img/sub_visual_3.jpg');}
.sub-hero--m4 {background-image:linear-gradient(var(--rgba05), var(--rgba05)), url('/theme/responsive_duroo/include/img/sub_visual_4.jpg');}
.sub-hero__title {font-size:48px; font-weight:700; line-height:1.4; letter-spacing:-1px; color:var(--white);}
.sub-hero__navi {display:flex; align-items:center; margin-top:20px;}
.sub-hero__home {display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin-right:16px;}
.sub-hero__arrow {margin-right:16px;}
.sub-hero__depth {margin-right:16px; font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-0.5px; color:var(--white);}
.sub-hero__depth:last-child {margin-right:0;}
@media(max-width:1320px){
	.sub-hero {padding-top:200px;}
	.sub-hero__title {font-size:40px;}
}
@media(max-width:1080px){
	.sub-hero {padding-top:170px;}
	.sub-hero__title {font-size:34px;}
	.sub-hero__depth {font-size:16px;}
}
@media(max-width:768px){
	.sub-hero {padding-top:120px;}
	.sub-hero__title {font-size:26px;}
	.sub-hero__navi {margin-top:12px;}
	.sub-hero__home {width:20px; height:20px; margin-right:10px;}
	.sub-hero__arrow {margin-right:10px;}
	.sub-hero__depth {margin-right:10px; font-size:14px;}
}
/************************* sub-hero 끝 *************************/

/************************* tabmenu 시작 (시안: 하단 앵커 박스, active primary pop-up) *************************/
/* 탭 — 서브비주얼 하단에 걸침. 활성 89 / 비활성 73 (시안 tap 1760x89) */
.tab-menu {margin-top:84px;}
.tab-menu__list {display:flex; align-items:flex-end;}
.tab-menu__item {flex:1 1 0; min-width:0; display:flex;}
.tab-menu__btn {display:flex; align-items:center; justify-content:center; width:100%; padding:23px 12px; background-color:var(--white); border:1px solid var(--gray-200); border-right:0; font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-1px; text-align:center; color:var(--gray-800); transition:color .15s ease;}
.tab-menu__item:last-child .tab-menu__btn {border-right:1px solid var(--gray-200);}
.tab-menu__btn--crt {padding:32px 12px; border:0; background-color:var(--main-color); color:var(--white);}
.tab-menu__btn--crt:link, .tab-menu__btn--crt:visited {color:var(--white);}
@media(hover:hover){
	.tab-menu__btn:not(.tab-menu__btn--crt):hover {color:var(--main-color);}
}
@media(max-width:1080px){
	.tab-menu {margin-top:60px;}
	.tab-menu__btn {padding:19px 10px; font-size:16px;}
	.tab-menu__btn--crt {padding:26px 10px;}
}
@media(max-width:768px){
	.tab-menu {margin-top:40px;}
	.tab-menu__list {overflow-x:auto;}
	.tab-menu__item {flex:0 0 auto;}
	.tab-menu__btn {padding:15px 20px; font-size:15px; white-space:nowrap;}
	.tab-menu__btn--crt {padding:19px 20px;}
}
/************************* tabmenu 끝 *************************/

/************************* footer_inc 시작 *************************/
.footer {padding:60px 0; background-color:var(--gray-800);}
.footer__head {display:flex; align-items:flex-start; justify-content:space-between;}
.footer-home {display:inline-block;}
.footer-home__logo {width:227px;}
.footer-navi {display:flex; gap:40px;}
.footer-navi__link {font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-0.5px; color:var(--gray-50); transition:color .15s ease;}
.footer-navi__link:link, .footer-navi__link:visited {color:var(--gray-50);}
.footer__body {display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 40px; margin-top:28px;}
.footer-info {display:flex; flex-wrap:wrap; gap:16px;}
.footer-info__item {display:flex; align-items:center; gap:8px; padding-top:16px; border-top:1px solid var(--footer-line);}
.footer-info__cate {font-size:18px; font-weight:500; line-height:1.4; letter-spacing:-0.5px; color:var(--gray-300);}
.footer-info__desc {font-size:18px; font-weight:500; line-height:1.4; letter-spacing:-0.5px; color:var(--gray-300);}
.footer-adm {display:flex; flex-wrap:wrap; align-items:center; gap:8px 40px;}
.footer-adm__biz {display:flex; align-items:center; gap:8px;}
.footer-adm__cate {font-size:16px; line-height:1.4; color:var(--gray-300);}
.footer-adm__desc {font-size:16px; line-height:1.4; color:var(--gray-300);}
.footer-adm__cprt {font-size:16px; line-height:1.4; color:var(--gray-300);}
.footer-adm__nav {display:flex; gap:12px;}
.footer-adm__link {font-size:16px; line-height:1.4; color:var(--gray-300); transition:color .15s ease;}
.footer-adm__link:link, .footer-adm__link:visited {color:var(--gray-300);}
@media(hover:hover){
	.footer-adm__link:hover {color:var(--main-color);}
	.footer-navi__link:hover {color:var(--main-color);}
}
/* 푸터 트랙2 */
@media(max-width:1320px){
	.footer-navi__link {font-size:16px;}
	.footer-info__cate {font-size:16px;}
	.footer-info__desc {font-size:16px;}
}
@media(max-width:1080px){
	.footer {padding:48px 0;}
	.footer-home__logo {width:190px;}
	.footer__body {align-items:flex-start; gap:24px 40px;}
}
@media(max-width:768px){
	.footer {padding:40px 0;}
	.footer__head {flex-direction:column; align-items:flex-start;}
	.footer-navi {margin-top:20px; gap:24px;}
	.footer-navi__link {font-size:15px;}
	.footer-home__logo {width:160px;}
	.footer__body {margin-top:24px; gap:20px;}
	.footer-info {gap:12px;}
	.footer-info__item {padding-top:12px;}
	.footer-info__cate {font-size:15px;}
	.footer-info__desc {font-size:15px;}
	.footer-adm {gap:6px 20px;}
	.footer-adm__cate {font-size:14px;}
	.footer-adm__desc {font-size:14px;}
	.footer-adm__cprt {font-size:14px;}
	.footer-adm__link {font-size:14px;}
}
@media(max-width:500px){
	.footer-info {flex-direction:column; gap:10px;}
	.footer-info__item {width:100%;}
	.footer-adm__biz {width:100%;}
	.footer-adm__cprt {width:100%;}
}
/************************* footer_inc 끝 *************************/

/************************* sub-header 시작 *************************/
.sub-header {display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;}
.sub-header__int {display: flex; flex-direction: column; gap: 10px;}
.sub-header__eyebrow {font-size: 15px; font-weight: 600; color: var(--primary);}
.sub-header__title {font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink);}
.sub-header__lead {max-width: 760px; margin: 0 auto; font-size: 17px; color: var(--ink-sub); line-height: 1.65;}
.sub-header--align-left {width: 33.33%; text-align: left; align-items: flex-start;}
.sub-header--align-left .sub-header__lead {margin-left: 0; margin-right: 0; max-width: none;}
@media(max-width:768px){
	.sub-header__title {font-size: 26px;}
	.sub-header__lead {font-size: 15px;}
	.sub-header--align-left {width: auto;}
}
/************************* sub-header 끝 *************************/

/************************* statement 시작 *************************/
.statement {position: relative; z-index: 0; text-align: center; padding: 96px 0;}
.statement__bg {position: absolute; inset: 0; z-index: -1;}
.statement__container {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.statement__eyebrow {font-size: 15px; font-weight: 600; color: var(--primary);}
.statement__title {font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; color: var(--ink);}
.statement__subtitle {font-size: 20px; font-weight: 500; color: var(--ink);}
.statement__desc {max-width: 800px; font-size: 17px; line-height: 1.75; color: var(--ink-sub);}
.statement--tint {background-color: var(--surface-alt);}
.statement--dark {background-color: var(--ink);}
.statement--dark .statement__eyebrow {color: var(--primary-bright);}
.statement--dark .statement__title {color: #fff;}
.statement--dark .statement__subtitle {color: rgba(255,255,255,0.9);}
.statement--dark .statement__desc {color: rgba(255,255,255,0.7);}
@media(max-width:768px){
	.statement {padding: 60px 0;}
	.statement__title {font-size: 28px;}
	.statement__subtitle {font-size: 17px;}
	.statement__desc {font-size: 15px;}
}
/************************* statement 끝 *************************/

/************************* 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;}

/************************* AOS (scroll reveal) 시작 *************************/
#wrap {overflow-x: clip;}
[data-aos] {opacity: 0; transition: opacity .6s ease, transform .6s ease; transition-delay: var(--aos-delay, 0s);}
[data-aos="fade-up"] {transform: translateY(28px);}
[data-aos="fade-down"] {transform: translateY(-28px);}
[data-aos="fade-left"] {transform: translateX(28px);}
[data-aos="fade-right"] {transform: translateX(-28px);}
[data-aos="fade"] {transform: none;}
[data-aos].aos-in {opacity: 1; transform: none;}
@media(prefers-reduced-motion: reduce){ [data-aos] {opacity: 1 !important; transform: none !important; transition: none !important;} }
/************************* AOS 끝 *************************/