@charset "utf-8";
.program-tit-section {height: calc(100vh - 74px); min-height: 600px; position: relative;}
.program-tit-section .left {padding: 0 2rem; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; width: 55%; height: 100%; border-top-right-radius: 100px; background: radial-gradient(circle at 20% 30%, #E6D9E3 0%, #F3F4F6 100%);}
.program-tit-section .left .tit-wrapper {width: 100%; display: flex; flex-direction: column; row-gap: 60px; align-items: center;}
.program-tit-section .left .tit-wrap {display: flex; flex-direction: column; row-gap: 8px;}
.program-tit-section .left .tit-wrap span {text-transform: uppercase; font-size: 1.333rem; text-align: center;}
.program-tit-section .left .tit-wrap h2 {font-size: 2.667rem; text-align: center;}
.program-tit-section .left .tit-wrapper .btn-wrap {display: flex; align-items: center; column-gap: 20px; flex-wrap: wrap; row-gap: 10px;}
.program-tit-section .left .tit-wrapper .scroll-mouse-wrap {margin-top: 20px;}
.program-tit-section .left .round-cont {text-transform: uppercase; animation: floating 3s ease-in-out infinite; position: absolute; left: 100%; bottom: 15%; transform: translateX(-50%); width: 9.611rem; height: 9.611rem; padding: 1rem; text-align: center; word-break: keep-all; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #fff; font-size: 1.333rem;}
.program-tit-section .right {width: 55%; height: 100%; position: absolute; top: 0; right: 0; z-index: -1;}
.program-tit-section .right img {width: 100%; height: 100%; object-fit: cover;}
.program-about-section {padding: 170px 0;}
.program-about-section .cont-wrapper {margin-top: 24px; display: flex; align-items: flex-start; justify-content: space-between;}
.program-about-section .cont-wrapper .img-wrap {overflow: hidden; width: 50%; height: auto; aspect-ratio: 872/503; border-radius: 50px;}
.program-about-section .cont-wrapper .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.program-about-section .cont-wrapper .cont-wrap {width: 45%; display: flex; flex-direction: column; align-items: flex-start; row-gap: 50px;}
.program-about-section .cont-wrapper .txt-wrap strong {font-size: 36px; font-weight: 600;}
.program-about-section .cont-wrapper .txt-wrap p {font-size: 1.111rem; margin-top: 20px;}
.program-about-section .cont-wrapper .info-box {width: 100%; padding: 30px 60px; border-radius: 30px; display: flex; flex-direction: column; row-gap: 30px; align-items: flex-start; justify-content: center; border: 1px solid #EBEBEB; box-shadow: 0 0 5px rgba(185, 169, 138, 0.1);}
.program-about-section .cont-wrapper .info-list {width: 100%; display: flex; row-gap: 30px; flex-wrap: wrap;}
.program-about-section .cont-wrapper .info-list li {width: 50%; display: flex; align-items: center; column-gap: 16px; font-size: 1.111rem;}
.program-about-section .cont-wrapper .info-list li span {font-size: 1.111rem; color: #4B5563;}
.program-effect-section {padding-bottom: 120px;}
.program-effect-section .img-bg {margin-bottom: 30px; padding: 113px 0; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; min-height: clamp(250px,30vw,600px);}
.program-effect-section .img-bg .img-wrap {overflow: hidden; margin-left: auto; width: 100%; max-width: 558px; aspect-ratio: 558/374; border-radius: 50px;}
.program-effect-section .img-bg .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.program-effect-section .txt-wrap {display: flex; align-items: center; flex-direction: column; row-gap: 10px;}
.program-effect-section .txt-wrap span {text-align: center; font-size: 1rem;}
.program-effect-section .txt-wrap p {text-align: center; font-size: 1.333rem; font-weight: 600;}
.program-effect-section .product-wrapper {display: flex; flex-direction: column; row-gap: 4.444rem; margin-bottom: 50px;}
.program-effect-section .product-wrap {display: flex; align-items: center; flex-direction: column; row-gap: 20px;}
.program-effect-section .product-wrap .product-list {width: 100%; display: flex; align-items: center; flex-wrap: wrap; column-gap: 24px;}
.program-effect-section .product-wrap .product-list .product {width: calc(100% / 3 - (24px * 2) / 3); display: flex; flex-direction: column; row-gap: 10px;}
.program-effect-section .product-wrap .product-list .product .img-wrap {width: 100%; height: auto; aspect-ratio: 558/374; border-radius: 50px; border: 10px solid #E6D9E3; overflow: hidden;}
.program-effect-section .product-wrap .product-list .product .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.program-effect-section .product-wrap .product-list .product p {text-align: center; font-size: 1.333rem;}
.program-why-section {padding: 35px 0; background-color: #E6D9E3;}
.program-why-section .why-tit {display: flex; align-items: center; justify-content: center; column-gap: 1.333rem; margin-bottom: 70px;}
.program-why-section .why-tit strong {font-size: 5.333rem; font-weight: 600;}
.program-why-section .why-tit span {font-size: 1.778rem; font-weight: 500; word-break: keep-all;}
.program-why-section .why-slider .swiper-slide {display: flex; align-items: center; justify-content: space-between;}
.program-why-section .why-slider .swiper-slide .img-wrap {flex-shrink: 0; width: 62%; max-width: 993px; height: auto; aspect-ratio: 993/566; border-radius: 50px; border: 10px solid #fff; overflow: hidden;}
.program-why-section .why-slider .swiper-slide .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.program-why-section .why-slider .swiper-slide .txt-wrap {width: 35%;}
.program-why-section .why-slider .swiper-slide .txt-wrap span {font-size: 1.111rem;}
.program-why-section .why-slider .swiper-slide .txt-wrap strong {font-size: 1.778rem; display: block; margin-top: 10px;}
.program-why-section .why-slider .swiper-slide .txt-wrap p {font-size: 1.111rem; color: #383838; margin-top: 20px;}
.program-why-section .why-slider .why-pagination{position: unset; margin-top: 66px; display: flex; justify-content: center; align-items: center; gap: 25px;}
.program-why-section .why-slider .why-pagination .swiper-pagination-bullet {transition: background 0.2s; width: 16px; height: 16px; background: #fff; opacity: 1;}
.program-why-section .why-slider .why-pagination .swiper-pagination-bullet-active {background: #7A4A6E;}
.program-area-section {padding: 210px 0 348px;}
.program-area-section .tit-wrap {margin-bottom: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 10px;}
.program-area-section .tit-wrap h3 {font-size: 2.222rem; word-break: keep-all; text-align: center;}
.program-area-section .img-wrap {width: 100%; aspect-ratio: 1720/860; border-radius: 50px; overflow: hidden;}
.program-area-section .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.program-area-section .img-wrap-tab {width: 100%; max-width: 558px; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; column-gap: 24px;}
.program-area-section .img-wrap-tab .label {width: calc(50% - 12px); text-align: center; cursor: pointer;}
.program-area-section .img-wrap.hair-only-layout img:not(.on) {display: none;}
.program-result-section {padding: 100px 0; background: #E6D9E3; background: linear-gradient(180deg,rgba(230, 217, 227, 1) 80%, rgba(250, 247, 251, 1) 100%);}
.program-result-section .tit-wrapper {row-gap: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 100px;}
.program-result-section .tit-wrapper .result-label {padding: 15px 24px; border-radius: 50%; border: 1px solid #2E2E2E; font-size: 1.111rem; color: #2E2E2E;}
.program-result-section .tit-wrap {row-gap: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.program-result-section .tit-wrap span {font-size: 1.111rem;}
.program-result-section .tit-wrap h3 {font-size: 2.222rem;}
.program-result-section .result-wrap {margin-bottom: 160px; display: flex; align-items: flex-start; justify-content: space-between;}
.program-result-section .result-wrap:last-child {margin-bottom: 0;}
.program-result-section .result-wrap .left {display: flex; flex-direction: column; row-gap: 10px;}
.program-result-section .result-wrap .left .num {font-size: 2.667rem; color: #B89BB1; position: relative; width: 5.111rem; height: 5.889rem; z-index: 1; display: flex; align-items: center; justify-content: flex-start;}
.program-result-section .result-wrap .left .num::after {content: ''; width: 4.278rem; height: 4.278rem; border-radius: 50%; background-color: #fff; position: absolute; top: 0; right: 0; z-index: -1;}
.program-result-section .result-wrap .left strong {font-size: 2rem;}
.program-result-section .result-wrap .right {width: 65%; max-width: 1002px; padding: 0 92px; position: relative;}
.program-result-section .result-wrap .result-swiper img {width: 100%; height: 100%; object-fit: cover;}
.program-result-section .result-wrap .right .swiper-nav .prev {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.program-result-section .result-wrap .right .swiper-nav .next {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.program-method-section {padding: 200px 0 250px;}
.program-method-section h3 {text-align: center; font-size: 2.667rem; margin-bottom: 30px;}
.program-method-section .method-list {display: flex; align-items: center; column-gap: 24px;}
.program-method-section .method-list li {width: calc(100% / 3 - 48px / 3); display: flex; flex-direction: column; align-items: flex-start; row-gap: 28px;}
.program-method-section .method-list .img-wrap {width: 100%; height: auto; aspect-ratio: 557 / 360; border-radius: 1000px; border: 4px solid #fff; overflow: hidden;}
.program-method-section .method-list .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.program-method-section .method-list .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: 14px;}
.program-method-section .method-list .txt-wrap span {font-size: 1.778rem; color: #979797; display: flex; align-items: center; column-gap: 6px;}
.program-method-section .method-list .txt-wrap .num {font-size: 2.667rem; color: #7A4A6E;}
.program-method-section .method-list .txt-wrap p {font-size: 1.333rem; font-weight: 500; word-break: keep-all;}
.program-recommend-section {background-image: url(../img/sub/program-recommend-bg.webp);  background-attachment: fixed; background-size: cover; background-position: center; padding: 100px 0;}
.program-recommend-section .tit-wrap {margin-bottom: 70px; display: flex; flex-direction: column; align-items: center; row-gap: 14px;}
.program-recommend-section .tit-wrap span {font-size: 2.222rem; color: #fff;}
.program-recommend-section .tit-wrap h3 {font-size: 2.667rem; text-align: center; word-break: keep-all;}
.program-recommend-section .recommend-list {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 24px; row-gap: 80px;}
.program-recommend-section .recommend-list li {padding: 30px; background-color: #fff; box-shadow: 0 4px 8px rgba(172, 167, 157, 1); width: calc(100% / 4 - (24px * 3) / 4); border-radius: 50px; height: 258px; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 10px;}
.program-recommend-section .recommend-list li span {color: #2C1333; font-size: 1.778rem;}
.program-recommend-section .recommend-list li p {color: #4B5563; word-break: keep-all; font-size: 1rem; line-height: 1.2; text-align: center;}
@keyframes floating {
  0% {
    transform: translate(-50%,0);
  }
  50% {
    transform: translate(-50%,-0.833rem);
  }
  100% {
    transform: translate(-50%,0);
  }
}

@media screen and (max-width: 1600px) {
    .program-about-section .cont-wrapper .info-list {flex-wrap: wrap; row-gap: 20px;}
    .program-about-section .cont-wrapper .info-list li {width: 100%;}
}

@media screen and (max-width: 1280px) {
    /* 여백설정 */
    .program-about-section { padding: 100px 0; }
    .program-area-section { padding: 100px 0 120px; }
    .program-result-section .result-wrap { margin-bottom: 80px; }
    .program-method-section { padding: 100px 0; }
    /* 반응형 */
    .program-tit-section .left .round-cont {width: 8.5rem; height: 8.5rem; font-size: 1.2rem; bottom: 10%;}
    .program-why-section .why-slider .swiper-slide .txt-wrap p br {display: none;}
    .program-method-section .method-list .txt-wrap {align-items: center; width: 100%;}
    .program-method-section .method-list .txt-wrap p {text-align: center; font-size: 1.2rem;}
    .program-recommend-section .recommend-list li {width: calc(100% / 3 - (24px * 2) / 3);}
}

@media screen and (max-width: 1024px) {
    /* 여백설정 */
    .program-about-section { padding: 80px 0; }
    .program-about-section .cont-wrapper { row-gap: 40px; }
    .program-effect-section { padding-bottom: 80px; }
    .program-effect-section .img-bg { padding: 80px 0; }
    .program-why-section { padding: 60px 0; }
    .program-why-section .why-tit { margin-bottom: 40px; margin-top: 0; }
    .program-why-section .why-tit strong { font-size: 3.5rem; } /* 폰트 크기 일부 조정 */
    .program-area-section { padding: 80px 0 100px; }
    .program-area-section .tit-wrap { margin-bottom: 30px; }
    .program-result-section { padding: 80px 0; }
    .program-result-section .tit-wrapper { margin-bottom: 60px; }
    .program-result-section .result-wrap { margin-bottom: 60px; }
    .program-method-section { padding: 80px 0; }
    .program-method-section .method-list { row-gap: 40px; }
    .program-recommend-section { padding: 80px 0; }
    .program-recommend-section .recommend-list { row-gap: 40px; }
    /* 반응형 */
    .program-tit-section {width: 100%; height: fit-content; min-height: unset; flex-direction: column;}
    .program-tit-section .left {width: 100%; height: fit-content; padding: 5rem 1rem;}
    .program-tit-section .left .tit-wrapper {row-gap: 30px;}
    .program-tit-section .right {width: 100%; aspect-ratio: 16/9; position: unset;}
    .program-tit-section .left .round-cont {width: 7rem; height: 7rem; font-size: 1rem; left: unset; right: 0; bottom: -3.5rem;}
    .program-about-section .cont-wrapper {flex-direction: column; row-gap: 30px;}
    .program-about-section .cont-wrapper .img-wrap,
    .program-about-section .cont-wrapper .cont-wrap {width: 100%;}
    .program-about-section .cont-wrapper .info-list li {width: 50%;}
    .program-effect-section .img-bg .img-wrap {margin: 0 auto;}
    .program-effect-section .product-wrap .product-list .product .img-wrap {border-radius: 30px; border: 5px solid #E6D9E3;}
    .program-effect-section .product-wrap .product-list .product p {font-size: 1.2rem;}
    .program-why-section .why-slider .swiper-slide {flex-direction: column; row-gap: 24px;}
    .program-why-section .why-slider .swiper-slide .txt-wrap,
    .program-why-section .why-slider .swiper-slide .img-wrap {width: 100%; max-width: unset;}
    .program-result-section .result-wrap {flex-direction: column; row-gap: 30px;}
    .program-result-section .result-wrap .right {width: 100%;}
    .program-result-section .result-wrap:nth-child(odd),
    .program-result-section .result-wrap:nth-child(odd) .left {align-items: flex-end;}
    .program-method-section .method-list {flex-direction: column; row-gap: 60px;}
    .program-method-section .method-list li {width: 100%;}
    .program-recommend-section .recommend-list li {width: calc(50% - 12px); height: 180px; border-radius: 30px;}
}

@media screen and (max-width: 768px) {
    /* 여백설정 */
    .program-about-section { padding: 60px 0; }
    .program-about-section .cont-wrapper .txt-wrap { row-gap: 30px; }
    .program-effect-section { padding-bottom: 60px; }
    .program-effect-section .img-bg { padding: 60px 20px; } /* 좌우 여백 추가 */
    .program-why-section { padding: 50px 0; }
    .program-why-section .why-tit { margin-bottom: 30px; column-gap: 15px; }
    .program-why-section .why-slider .why-pagination { margin-top: 40px; }
    .program-area-section { padding: 60px 0 80px; }
    .program-result-section { padding: 60px 0; }
    .program-result-section .tit-wrapper { margin-bottom: 40px; }
    .program-result-section .result-wrap { margin-bottom: 50px; }
    .program-method-section { padding: 60px 0; }
    .program-method-section h3 { font-size: 2rem; margin-bottom: 30px; }
    .program-recommend-section { padding: 60px 0; }
    .program-recommend-section .tit-wrap { margin-bottom: 40px; }
    /* 반응형 */
    /* .program-tit-section .left .round-cont {display: none;} */
    .program-tit-section .right {width: 100%; aspect-ratio: 16/9; position: unset;}
    .program-effect-section .product-wrap .product-list .product .img-wrap {border-radius: 15px;}
}

@media screen and (max-width: 600px) {
    .program-about-section .cont-wrapper .info-list li {width: 100%;}
    .program-result-section .result-wrap .right {padding: 0;}
    .program-result-section .result-wrap .right .swiper-nav {display: none;}
    .program-effect-section .product-wrap .product-list {row-gap: 30px;}
    .program-effect-section .product-wrap .product-list .product {width: 100%;}
    .program-effect-section .product-wrap .product-list .product .img-wrap {border-radius: 50px; border: 10px solid #E6D9E3;}
    .program-recommend-section .recommend-list li {width: 100%;}
}

@media screen and (max-width: 480px) {
    /* 여백설정 */
    .program-about-section { padding: 50px 0; }
    .program-area-section { padding: 50px 0 60px; }
    .program-result-section .result-wrap .left strong { font-size: 1.5rem; }
    .program-recommend-section .recommend-list { row-gap: 20px; }
    /* 반응형 */
    .program-why-section .why-tit span {font-size: 1.5rem;}
}