
.h3-wrap small{ display: block; margin-bottom: 5px; font: var(--h2-sub); line-height: 1.1; color: #5b6c60; }
.h3-wrap h3 { display: block; font: var(--h2); font-weight: 600; line-height: 1.4; color: var(--main-black); }
.h3-wrap h3 span { display: block; font-weight: 400; }
.h3-wrap .subdesc { margin-top: 14px; font: var(--basic-txt); }
.btn-md { height:64px; display: flex; align-items: center; justify-content: center; padding: 0 22px; font:var(--button-md-txt); border-radius: 60px; }
.btn--fill { background-color: #5b6c60; color: #fff; }
.btn--line { border: 1px solid #5b6c60; color: var(--main-black); }

.bullet { display: flex; flex-direction: column; }
.bullet li { position: relative; padding-left: 12px; font: var(--basic-txt); line-height: 1.8; color: #5b6c60; }
.bullet li:before { content: ""; position: absolute; left: 0; top: 15px; width: 3px; aspect-ratio: 1/1; border-radius: 50%; background-color: #5b6c60; }
.bullet b { font-weight: 800; }


/* Diet - Stem Cell (diet_stemcell.html) */
.diet-stemcell { padding: 200px 0 0; overflow: hidden; }
.diet-stemcell-visual .visual-grid { display: grid; grid-template-columns: 1fr 1fr; }
.diet-stemcell-visual .visual-copy { padding-right: 40px; }
.diet-stemcell-visual .visual-copy .lead { margin-top: 20px; margin-bottom: 30px; font: var(--basic-txt); }
.diet-stemcell-visual .visual-copy .desc { font: var(--basic-txt); }
.diet-stemcell-visual .visual-copy .btn-row { max-width: 540px; display: flex; gap: 20px; align-items: center; margin-top: 6.4rem; }
.diet-stemcell-visual .visual-copy .btn-row a { flex:1; }
.diet-stemcell-visual .visual-banner { border-radius: 10px; overflow: hidden; }
.diet-stemcell-visual .btn-row { display: flex; gap: 2rem; align-items: center; margin-top: 3rem; }


.diet-stemcell-design { padding:150px 0; background: url('/resources/img/sub/new/diet_stemcell_2.jpg') no-repeat center center / cover; }
.diet-stemcell-design .sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.diet-stemcell-design .sec-head .sublead { margin-top: 50px; font: var(--h4-kr); }


.diet-stemcell-principles { padding: 150px 0 100px; overflow: hidden; }
.diet-stemcell-principles .h3-wrap { margin-bottom: 50px; text-align: center; }

.diet-stemcell-principles .principle-list { display: flex; flex-direction: column; gap: 80px; }
.diet-stemcell-principles .principle-list > li { display: flex; }
.diet-stemcell-principles .principle-list > li:nth-child(even) { flex-direction: row-reverse; }
.diet-stemcell-principles .principle-list > li > div { width: 50%; }
.diet-stemcell-principles .principle-list > li .principle__copy { padding-right: 60px; }
.diet-stemcell-principles .principle-list > li:nth-child(even) .principle__copy { padding-left: 80px; padding-right: 0; }

.diet-stemcell-principles .principle__copy .num { font: var(--h4-kr); color: #79736c; margin-bottom: 20px; }
.diet-stemcell-principles .principle__copy h4 { font: var(--h3-kr); font-weight: 300; margin-bottom: 30px; line-height: 1.5; }
.diet-stemcell-principles .principle__copy h4 b { font-weight: 700; }
.diet-stemcell-principles .principle__copy .desc { font: var(--basic-txt); color: var(--main-black); }
.diet-stemcell-principles .principle__copy .point { font: var(--basic-txt); font-weight: 700; color: #5b6c60; }
.diet-stemcell-principles .principle__copy p + p { margin-top:20px; }
.diet-stemcell-principles .principle__media { border-radius: 10px; overflow: hidden; aspect-ratio: 72/62; }
.diet-stemcell-principles .principle__media img { width: 100%; height: 100%; object-fit: cover; }
.diet-stemcell-principles .bullet { margin-top: 20px; }

.diet-stemcell-principles .chroma { margin-top: 70px; overflow: visible; }
.diet-stemcell-principles .chroma-list .img { aspect-ratio: 35/47; border-radius: 10px; overflow: hidden; }
.diet-stemcell-principles .chroma-list .img img { width: 100%; height: 100%; object-fit: cover; }
.diet-stemcell-principles .chroma-list .tit { margin-top: 30px; font: var(--h4-kr); font-weight: 800; line-height: 1.5; text-align: center; }
.diet-stemcell-principles .chroma-list .txt { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 20px; font: var(--basic-txt); text-align: center; line-height: 1.6; }
.diet-stemcell-principles .chroma-list .txt p { line-height: 1.6; }
.diet-stemcell-principles .chroma-list .txt b { font-weight: 800; }
.diet-stemcell-principles .chroma-list .txt ol { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.diet-stemcell-principles .chroma-list .txt ol li { list-style: decimal; padding-left: 10px; }


.diet-stemcell-effects { margin-top:100px; position: relative; background: white; }
.diet-stemcell-effects::before { content: ""; position: absolute; left: 0; top: 1px; transform: translateY(-100%); width: 100%; aspect-ratio: 1920/190; background: url('/resources/img/sub/new/diet_stemcell_bg.svg') no-repeat center center / cover; }
.diet-stemcell-effects .swiper-container { overflow: visible; }
.diet-stemcell-effects .h3-wrap { text-align: center; margin-bottom: 5rem; }
.diet-stemcell-effects .effects-list .img { aspect-ratio: 272/320; border-radius: 10px; overflow: hidden; background-color: #fff; }
.diet-stemcell-effects .effects-list .img img { width: 100%; height: 100%; object-fit: cover; }
.diet-stemcell-effects .effects-list .tit { margin-top: 30px; font: var(--h4-kr); font-weight: 800; line-height: 1.5; }


.diet-stemcell-program { padding: 150px 0 150px; background: white; }
.diet-stemcell-program .h3-wrap { margin-bottom: 50px; text-align: center; }
.diet-stemcell-program .program-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.diet-stemcell-program .program-list li { background-color: #f9f9f7; border-radius: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; padding: 4.8rem 2rem 4rem; transition: .3s; cursor: pointer; }
.diet-stemcell-program .program-list li .icon { height: 5rem; display: flex; align-items: center; justify-content: center; transition: .3s; }
.diet-stemcell-program .program-list li .icon img { width: auto; height: 100%; object-fit: contain; }
.diet-stemcell-program .program-list li .tit { margin-top: .5rem; font: var(--basic-txt); font-weight: 500; }
.diet-stemcell-program .program-list li .arrow { width: 2.8rem; height: 2.8rem;  transition: .3s; }
.diet-stemcell-program .program-list li .arrow img { width: 100%; height: 100%; object-fit: contain; }
.diet-stemcell-program .program-list li:hover { background-color: #5d6e62; color: #fff; }
.diet-stemcell-program .program-list li:hover .icon { filter: brightness(0) invert(1); }
.diet-stemcell-program .program-list li:hover .arrow { filter: brightness(0) invert(1); }

.diet-stemcell-program-popup { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); }
.diet-stemcell-program-popup .popup-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92%; max-width: 700px; background-color: #fff; border-radius: 20px; padding: 50px; }
.diet-stemcell-program-popup .popup-inner .close-btn { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; background: #A8B295; text-indent: -999px; overflow: hidden; }
.diet-stemcell-program-popup .popup-inner .close-btn::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 80%; height: 1px; background: white; }
.diet-stemcell-program-popup .popup-inner .close-btn::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 80%; height: 1px; background: white; }
.diet-stemcell-program-popup .popup-inner .tit { font: var(--h4-kr); font-weight: 800; line-height: 1.5; }
.diet-stemcell-program-popup .popup-inner .desc { margin-top: 10px; font: var(--basic-txt); line-height: 1.5; }
.diet-stemcell-program-popup .popup-inner .media-box { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; margin-top: 30px; }
.diet-stemcell-program-popup .popup-inner .media-box img { width: 100%; height: 100%; border-radius: 2rem; }
.diet-stemcell-program-popup .popup-inner > ul > li { display: none; }


.diet-stemcell-process .cont-box { padding-top: 84px; }
.diet-stemcell-process .cont-box .proc-tab > ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; position: relative; }
.diet-stemcell-process .cont-box .proc-tab > ul::before { content: ''; width: 100vw; height: 1px; background-color: var(--sub-color); position: absolute; top: 14px; left: 50%; transform: translateX(-50%); }
.diet-stemcell-process .cont-box .proc-tab > ul > li { width: calc(100% / 6); }
.diet-stemcell-process .cont-box .proc-tab > ul .proc-circle { width: 28px; height: 28px; border-radius: 50%; background-color: var(--sub-color); margin: 0 auto; font: 500 15px/28px 'Poppins'; color: transparent; text-align: center; position: relative; cursor: pointer; transition: all 0.3s ease; }
.diet-stemcell-process .cont-box .proc-tab > ul .proc-circle::before { content: ''; width: 64px; height: 64px; border-radius: 50%; background-color: var(--sub-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.1; }
.diet-stemcell-process .cont-box .proc-tab > ul .proc-circle::after { content: ''; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sub-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.diet-stemcell-process .cont-box .proc-tab > ul .proc-name { font: var(--samll-txt); padding-top: 28px; text-align: center; transition: all 0.3s ease; } 
.diet-stemcell-process .cont-box .proc-tab > ul > li:hover .proc-circle, 
.diet-stemcell-process .cont-box .proc-tab > ul > li.on .proc-circle { background-color: var(--key-color); }
.diet-stemcell-process .cont-box .proc-tab > ul > li:hover .proc-circle::before,
.diet-stemcell-process .cont-box .proc-tab > ul > li.on .proc-circle::before { background-color: var(--key-color); }
.diet-stemcell-process .cont-box .proc-tab > ul > li:hover .proc-circle::after,
.diet-stemcell-process .cont-box .proc-tab > ul > li.on .proc-circle::after { border: 1px solid var(--key-color); }
.diet-stemcell-process .cont-box .proc-tab > ul > li:hover .proc-name,
.diet-stemcell-process .cont-box .proc-tab > ul > li.on .proc-name { font-weight: 500; }
.diet-stemcell-process .cont-box .proc-wrap { margin-top: 40px; overflow: hidden; position: relative; }
.diet-stemcell-process .cont-box .proc-box { display: flex; flex-direction: row; flex-wrap: nowrap;  justify-content: space-between; align-items: flex-end; background: #ffffff75; padding: 60px; border-radius: 25px; opacity: 0; }
.diet-stemcell-process .cont-box .proc-wrap > ul > li.swiper-slide-active .proc-box  { opacity: 1; }
.diet-stemcell-process .cont-box .proc-box .proc-txt-box { width: calc(100% - 680px); }
.diet-stemcell-process .cont-box .proc-box .proc-img-box { border-radius: 20px; overflow: hidden; }

.diet-stemcell-process .cont-box .proc-box .proc-num { font: 600 20px/100% 'Poppins'; color: var(--key-black); opacity: 0.7; margin-bottom: 10px; }
.diet-stemcell-process .cont-box .proc-box .proc-step { font: var(--h3-kr); margin-bottom: 20px; }
.diet-stemcell-process .cont-box .proc-box .proc-exp span { display: block; font: var(--basic-txt); }

.diet-stemcell-process .cont-box .proc-wrap .swiper-control { width: 101px; height: 48px; position: absolute; top: 60px; left: 60px; }
.diet-stemcell-process .cont-box .proc-wrap .swiper-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--sub-color); }
.diet-stemcell-process .cont-box .proc-wrap .swiper-arrow.swiper-button-prev { background: url('/resources/img/sub/sub_arr_prev.svg') no-repeat center/11px 22px; left: 0; }
.diet-stemcell-process .cont-box .proc-wrap .swiper-arrow.swiper-button-next { background: url('/resources/img/sub/sub_arr_next.svg') no-repeat center/11px 22px; right: 0; }


.diet-stemcell-recommend { background-color: #f0e9e3; padding: 15rem 0 12rem; }
.diet-stemcell-recommend .recommend-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3rem; }
.diet-stemcell-recommend .recommend-list li { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.diet-stemcell-recommend .recommend-list .circle { width: 15rem; height: 15rem; border-radius: 15rem; background-color: #fff; display: flex; align-items: center; justify-content: center; }
.diet-stemcell-recommend .recommend-list .circle img { width: 55%; height: auto; object-fit: contain; }
.diet-stemcell-recommend .recommend-list p { font-size: var(--fs-19); line-height: 1.5; color: var(--main-black); }

.diet-stemcell-faq { background-color: #f0e9e3; padding: 15rem 0 12rem; overflow: hidden; }
.diet-stemcell-faq .faq-bg { position: absolute; left: 50%; bottom: -5rem; transform: translateX(-50%); width: 2461px; height: 1854px; opacity: 0.7; mix-blend-mode: multiply; pointer-events: none; }
.diet-stemcell-faq .faq-bg img { width: 100%; height: 100%; object-fit: cover; }

.diet-stemcell-faq .faq-list { display: flex; flex-direction: column; gap: 2rem; }
.diet-stemcell-faq .faq-item { background-color: #fff; border-radius: 1rem; padding: 3rem; }
.diet-stemcell-faq .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 2rem; cursor: pointer; }
.diet-stemcell-faq .faq-item summary::-webkit-details-marker { display: none; }
.diet-stemcell-faq .faq-item .q { width: 2.4rem; font-size: var(--fs-19); font-weight: 800; line-height: 1.5; color: var(--main-black); }
.diet-stemcell-faq .faq-item .qt { flex: 1; font-size: var(--fs-19); font-weight: 600; line-height: 1.5; color: var(--main-black); }
.diet-stemcell-faq .faq-item .ico { width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; transform: rotate(-45deg); transition: transform 0.2s ease; }
.diet-stemcell-faq .faq-item .ico img { width: 2rem; height: 2rem; object-fit: contain; }
.diet-stemcell-faq .faq-item[open] .ico { transform: rotate(135deg); }

.diet-stemcell-faq .faq-item .answer { display: grid; grid-template-columns: 2.4rem 1fr; gap: 2.9rem; margin-top: 3rem; }
.diet-stemcell-faq .faq-item .a { font-size: var(--fs-19); font-weight: 800; line-height: 1.5; color: var(--main-black); }
.diet-stemcell-faq .faq-item .answer p { font-size: var(--fs-17); font-weight: 300; line-height: 1.5; color: var(--main-black); }

@media screen and (max-width: 1024px) {
	.diet-stemcell-principles .principle,
	.diet-stemcell-principles .principle--reverse { grid-template-columns: 1fr; }
	.diet-stemcell-principles .principle__media { height: 44rem; }
	.diet-stemcell-principles .chroma-list { grid-template-columns: repeat(2, 1fr); }
	.diet-stemcell-effects .effects-list { grid-template-columns: repeat(3, 1fr); }
	.diet-stemcell-program .program-list { grid-template-columns: repeat(2, 1fr); }
	.diet-stemcell-process .process-steps { grid-template-columns: repeat(4, 1fr); }
	.diet-stemcell-process .process-card { grid-template-columns: 1fr; padding: 4rem; }
	.diet-stemcell-recommend .recommend-list { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 768px) {
	.diet-stemcell .sec-head h3 { font-size: var(--fs-36); }
	.diet-stemcell .sec-head .sublead { font-size: var(--fs-18); }
	.diet-stemcell .sec-head .subdesc { font-size: var(--fs-16); }

	.diet-stemcell .btn-row { flex-direction: column; align-items: stretch; }
	.diet-stemcell .btn { width: 100%; }

	.diet-stemcell-process .sec-head h3,
	.diet-stemcell-process .sec-head h3 span { font-size: var(--fs-36); }

	.diet-stemcell-principles .principle__copy h4 { font-size: var(--fs-24); }
	.diet-stemcell-principles .chroma-list { display: flex; gap: 1.6rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
	.diet-stemcell-principles .chroma-list li { min-width: 26rem; scroll-snap-align: start; }

	.diet-stemcell-effects .effects-list { display: flex; gap: 1.6rem; overflow-x: auto; padding-bottom: 1rem; }
	.diet-stemcell-effects .effects-list li { min-width: 22rem; }

	.diet-stemcell-recommend .recommend-list { grid-template-columns: repeat(2, 1fr); }
	.diet-stemcell-faq .faq-item { padding: 2rem; }
}
