@charset "utf-8";
/* 메인 섹션 공통 */
.main-section {padding-block: var(--space-80);}
.main-section:not(.main-hero-section) {overflow-x: hidden;}

/* 메인 비주얼 */
.main-hero-section {position: relative; display: flex; align-items: center; height: 100vh; min-height: 560px; max-height: 760px; padding-block: var(--header-height) 0; background-color: var(--color-static1); overflow: hidden;}
.main-hero-section .hero-swiper {position: absolute; inset: 0; width: 100%; height: 100%;}
.main-hero-section .hero-bg {position: absolute; inset: 0;}
.main-hero-section .hero-bg img {width: 100%; height: 100%; object-fit: cover;}
.main-hero-section .inner {position: relative; z-index: 1;}

/* 히어로 페이지네이션 */
.main-hero-section .hero-pagination {position: absolute; left: 0; right: 0; bottom: var(--space-30); z-index: 2; display: flex; justify-content: center; column-gap: 10px;}
.main-hero-section .hero-pagination .swiper-pagination-bullet {position: relative; width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 999px; background-color: var(--color-white); opacity: 0.5; transition: opacity 0.3s;}
.main-hero-section .hero-pagination .swiper-pagination-bullet::before {content: ''; position: absolute; inset: -8px -5px;}
.main-hero-section .hero-pagination .swiper-pagination-bullet-active {width: 24px; opacity: 1;}
.main-hero-section .hero-pagination .swiper-pagination-bullet:focus-visible {outline-color: var(--color-white);}

/* 프로그램 */
.main-program-section {position: relative;}
.main-program-section .program-bg {position: absolute; inset: 0;}
.main-program-section .program-bg img {width: 100%; height: 100%; object-fit: cover;}
.main-program-section .inner {position: relative; z-index: 1;}
.main-program-section .program-swiper {overflow: visible;}
.main-program-section .swiper-slide {height: auto;}

/* 프로그램 카드 */
.program-card {display: flex; flex-direction: column; row-gap: 24px; height: 100%;}
.program-card .tit-wrap {display: flex; align-items: center; column-gap: 8px;}
.program-card .tit-wrap .card-tit {color: var(--color-font1);}
.program-card .txt-wrap .body-medium {margin-top: 4px; color: var(--color-font3);}
.program-card .img-wrap {position: relative; margin-top: auto; aspect-ratio: 357 / 490; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.program-card .img-wrap > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.program-card .img-wrap::after {content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgb(var(--rgb-black) / 0) 0%, rgb(var(--rgb-black) / 0.8) 100%); opacity: 0; transition: opacity 0.3s;}
.program-card .price-wrap {position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; column-gap: 8px; padding: 30px;}
.program-card .price-wrap .sub-section-tit {color: var(--color-font1); transition: color 0.3s;}
.program-card .price-wrap .arrow {flex: none; width: 32px; height: 32px; opacity: 0; transform: translateX(-12px); transition: opacity 0.3s, transform 0.3s;}
.program-card:focus-visible .img-wrap::after,
.program-card:focus-visible .price-wrap .arrow {opacity: 1;}
.program-card:focus-visible .price-wrap .arrow {transform: translateX(0);}
.program-card:focus-visible .price-wrap .sub-section-tit {color: var(--color-font6);}

/* 경험 */
.main-experience-section {padding-block: var(--space-50);}
.main-experience-section .inner {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); align-items: center; column-gap: var(--space-30); max-width: 1220px;}
.main-experience-section .experience-img {width: 100%; aspect-ratio: 600 / 739;}
.main-experience-section .experience-img img {width: 100%; height: 100%; object-fit: contain;}

/* 경험 단계 */
.step-list .step-item {padding-block: 20px; border-top: 1px solid var(--color-border1);}
.step-list .step-item:last-child {border-bottom: 1px solid var(--color-border1);}
.step-list .step-num {margin-bottom: 20px; color: var(--color-font5); transition: color 0.3s;}
.step-list .step-tit {display: flex; align-items: center; column-gap: 10px; color: var(--color-font5); transition: color 0.3s;}
.step-list .step-ico {flex: none; width: 24px; height: 24px; background-color: var(--color-font5); -webkit-mask: url(../img/main/main-step-check-ico.svg) center / contain no-repeat; mask: url(../img/main/main-step-check-ico.svg) center / contain no-repeat; transition: background-color 0.3s;}
.step-list .step-desc {margin-top: 6px; color: var(--color-font5); transition: color 0.3s;}
.step-list .step-item.active .step-num,
.step-list .step-item.active .step-tit {color: var(--color-font1);}
.step-list .step-item.active .step-ico {background-color: var(--color-static3);}
.step-list .step-item.active .step-desc {color: var(--color-font2);}

/* 카앤쿡이 다른 이유 */
.main-why-section {--why-gap: clamp(2.5rem, 9.7vw, 11.625rem);}
.why-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--why-gap);}
.why-list .why-item {position: relative;}
.why-list .why-item + .why-item::before {content: ''; position: absolute; top: 50%; left: calc(var(--why-gap) / -2); width: 1px; height: 100px; background-color: var(--color-border2); transform: translateY(-50%);}
.why-list .why-ico {width: 64px; height: 64px;}
.why-list .txt-wrap {margin-top: 30px;}
.why-list .card-tit {color: var(--color-font1);}
.why-list .body-medium {margin-top: 10px; color: var(--color-font3);}

/* 시공사례 */
.case-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-40);}
.case-card {display: flex; flex-direction: column; row-gap: 30px;}
.case-card .img-wrap {position: relative; display: flex; flex-direction: column-reverse; justify-content: space-between; aspect-ratio: 740 / 420; padding: 20px; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.case-card .img-wrap > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;}
.case-card .img-wrap .badge {position: relative; align-self: flex-start;}
.case-card .img-wrap .badge + .badge {align-self: flex-end;}
.case-card .card-tit {color: var(--color-font1); transition: color 0.3s;}
.case-card:focus-visible .img-wrap > img {transform: scale(1.05);}
.case-card:focus-visible .card-tit {color: var(--color-static2);}
.case-card .body-medium {margin-top: 10px; color: var(--color-font3);}

/* 월드비전 */
.main-worldvision-section {position: relative; height: 520px;}
.main-worldvision-section .worldvision-bg {position: absolute; inset: 0;}
.main-worldvision-section .worldvision-bg img {width: 100%; height: 100%; object-fit: cover; object-position: 80% center;}
.main-worldvision-section .worldvision-bg::after {content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgb(var(--rgb-black) / 0.6) 0%, rgb(var(--rgb-black) / 0) 60%);}
.main-worldvision-section .inner {position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.main-worldvision-section .section-tit-wrap {margin-bottom: 0;}
.main-worldvision-section .section-tit-wrap .square-btn {min-width: 190px; justify-content: space-between;}
.main-worldvision-section .worldvision-logo {align-self: flex-end; width: 230px; height: auto;}

/* 지점 찾기 */
.store-wrap {display: grid; grid-template-columns: minmax(0, 820px) minmax(0, 1fr); column-gap: 40px;}
.store-search {display: flex; column-gap: 20px;}
.store-search .input-wrap {flex: 1 1 auto; min-width: 0;}
.store-search .search-input {max-width: none; padding-inline: calc(var(--fs-20) + 24px + 8px) var(--fs-20); background-position: left var(--fs-20) center;}
.store-search .custom-select {flex: none; width: 200px;}
.store-map-wrap {display: flex; flex-direction: column;}
.store-map {flex: 1 1 auto; min-height: 300px; margin-top: 20px; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.store-map iframe {display: block; width: 100%; height: 100%; border: 0;}

/* 지점 카드 */
.store-slide-wrap {position: relative; min-width: 0;}
.store-swiper {height: 100%;}
.store-swiper .swiper-slide {width: 400px; height: auto;}
.store-slide-wrap .swiper-prev {left: calc((var(--size-56) / 2) * -1);}
.store-slide-wrap .swiper-next {right: calc((var(--size-56) / 2) * -1);;}
.store-slide-wrap .swiper-nav-btn.swiper-button-disabled,
.store-slide-wrap .swiper-nav-btn.swiper-button-lock {opacity: 0; visibility: hidden;}
.store-card {display: flex; flex-direction: column; row-gap: 26px; height: 100%; padding: 20px; border: 1px solid var(--color-border1); border-radius: 20px; background-color: var(--color-white);}
.store-card .img-wrap {flex: 1 1 0; min-height: 200px; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.store-card .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.store-card .card-tit {color: var(--color-font1);}
.store-info {display: flex; flex-direction: column; row-gap: 8px;}
.store-info > div {display: flex; align-items: center; justify-content: space-between; column-gap: 16px;}
.store-info dt {display: flex; align-items: center; column-gap: 10px; flex: none; color: var(--color-font3);}
.store-info dt img {width: 20px; height: 20px;}
.store-info dd {min-width: 0; text-align: right; color: var(--color-font1);}
.store-card .square-btn {width: 100%; margin-top: auto;}

/* 호버 */
@media (hover: hover) {
    .program-card:hover .img-wrap::after,
    .program-card:hover .price-wrap .arrow {opacity: 1;}
    .program-card:hover .price-wrap .arrow {transform: translateX(0);}
    .case-card:hover .img-wrap > img {transform: scale(1.05);}
    .case-card:hover .card-tit {color: var(--color-static2);}
    .program-card:hover .price-wrap .sub-section-tit {color: var(--color-font6);}
}

@media screen and (max-width: 1280px) {
    .store-wrap {grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--space-30);}
}
@media screen and (max-width: 1024px) {
    .store-wrap {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-40);}
    .store-swiper .swiper-slide {width: min(400px, 85%);}
    .store-card .img-wrap {flex: none; aspect-ratio: 360 / 250; min-height: 0;}
    .store-map {flex: none; aspect-ratio: 820 / 480; min-height: 0;}
    .store-slide-wrap .swiper-prev {left: -12px;}
    .store-slide-wrap .swiper-next {right: -12px;}
    .main-experience-section .inner {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-40);}
    .main-experience-section .experience-img {justify-self: center; max-width: 440px;}
    .main-hero-section {height: 70vh;}
}
@media screen and (max-width: 768px) {
    .why-list {grid-template-columns: minmax(0, 1fr);}
    .why-list .why-item + .why-item {margin-top: var(--space-40); padding-top: var(--space-40); border-top: 1px solid var(--color-border2);}
    .why-list .why-item + .why-item::before {display: none;}
    .case-list {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-48);}
    .store-search {flex-wrap: wrap; row-gap: 12px;}
    .store-search .input-wrap {flex-basis: 100%;}
    .store-search .custom-select {width: 100%;}
    .main-hero-section {height: 560px; min-height: 0;}
    .main-worldvision-section {height: 400px;}
    .main-worldvision-section .worldvision-logo {width: 160px;}
}