@charset "utf-8";
@import url(../../../fonts/Noto_Serif_KR/Noto_Serif_KR.css);

:root {
    --primary-color: #64183c;

    --layout-width: 1330px;
    --layout-width-mo: 85%;
}

#content * {box-sizing: border-box;}
#content img {display: block; width: 100%;}
.br-pc {display: block;}
.br-mo {display: none;}

@media screen and (max-width: 1024px) {
    .br-pc {display: none;}
    .br-mo {display: block;}
}


/* SECTION 공통 */
.common-section {position: relative; padding-block: 170px;}
.common-section .inner {position: relative; max-width: var(--layout-width); width: var(--layout-width-mo); margin: 0 auto; display: grid; grid-template-columns: var(--grid-cols, 1.6fr) 1fr;}
.common-content {display: grid; gap: 4em; font-size: 10px;}

.common-title {font-size: 5em;}
.common-badge {font-size: .8em; font-weight: 500;}
.common-desc {line-height: 1.7; font-size: clamp(10px, 2.6vw, 2.6em); font-weight: 400;}

@media (max-width: 1440px) {
    .common-content {font-size: 7px;}
}

@media (max-width: 1024px) {
    .common-section {padding-block: 90px;}
    .common-section .inner {grid-template-columns: auto; gap: 30px;}

    .common-title {font-size: 4.2em;}
    .common-badge {font-size: .7em;}
}

@media (max-width: 768px) {
    .common-section {padding-block: 50px;}
    .common-content {gap: 4em; font-size: 6px;}
}


/* ==== SECTION - INTRO ==== */
.intro {background-color: #f1f5f8;}
.intro .inner {position: relative; min-height: 771px; display: flex; align-items: center; overflow: hidden; background: url(../images/intro_bg.jpg) 80% center / auto 155% no-repeat;}
.intro .inner::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom left, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 62%, rgba(255,255,255,1) 76%); z-index: 1; pointer-events: none;}

.intro .intro__content {display: grid; gap: 20px; width: 70%; margin: 0 auto; font-size: 10px;}
.intro .intro__text {position: relative; z-index: 2; text-align: left; color: #232323;}
.intro .intro__text--philosophy {font-size: 3.36em; font-weight: 300;}
.intro .intro__text--slogan {font-size: 3.56em; font-weight: 600;}
.intro .intro__text--brand {font-size: 6em; font-weight: 700; color: var(--primary-color);}


@media (max-width: 1440px) {
    .intro .inner {background-position: 100% center; background-size: auto 120%;}
    .intro .inner::before {background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,1) 67%);}

    .intro .intro__content {width: var(--layout-width-mo);}
}

@media (max-width: 1024px) {
    .intro .inner {padding-bottom: 50px; align-items: flex-end; height: clamp(40em, 118vw, 68em); min-height: auto; background-position: top center; background-size: contain;} 
    .intro .inner::before {top: auto; bottom: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 47%, rgba(255,255,255,1) 71%);}

    .intro .intro__text {text-align: center;}
}

@media (max-width: 768px) {
    .intro .intro__content {font-size: 5px;}
}


/* ==== SECTION - CHECKLIST ==== */
.checklist {color: #3a3a3a; background-color: #fcfcfc;}
.checklist .inner {padding: 100px 0 150px;}

.checklist .tit-group {position: relative; width: 100%; margin: 0 auto; text-align: center;}
.checklist .tit-group.has-bg {max-width: 922px; background: url(../images/checklist_text.png) center / contain no-repeat; aspect-ratio: 922 / 188; display: flex; flex-direction: column; justify-content: flex-end;}
.checklist .tit-group__sub {font-size: clamp(17px, 5vw, 40px); font-weight: 500;}
.checklist .tit-group__main {font-size: clamp(21px, 6vw, 54px); font-weight: 500;}

.checklist .checklist__container {position: relative; margin: 30px auto 100px; padding-block: 50px; width: 90%; max-width: 739px; text-align: center; border-radius: 23px; background-color: #fff; z-index: 0; transform-style: preserve-3d;}

/* checklist 그림자 */
.checklist .checklist__container::before,
.checklist .checklist__container::after {content: ''; position: absolute; left: 50%; transform: translateX(-50%) translateZ(-1px);width: 40%; height: 20px; background: rgba(0, 0, 0, .7); filter: blur(20px); border-radius: 100%; z-index: -1;}
.checklist .checklist__container::before {top: 20px;}
.checklist .checklist__container::after {bottom: 20px;}

.checklist .checklist__container .checklist__label {margin-bottom: 15px; font-size: clamp(14px, 2.7vw, 26px); font-weight: 600; color: var(--primary-color);}

.checklist .checklist__container .checklist__list {display: grid; gap: 7px;}
.checklist .checklist__container .checklist__list .checklist__item {font-size: clamp(14px, 2.7vw, 26px);}

.checklist .slogan__container {margin-top: 100px; text-align: center;}
.checklist .slogan__container .slogan__intro {font-size: clamp(17px, 5vw, 40px); font-weight: 600;}
.checklist .slogan__container .slogan__points {max-width: 805px; margin: 0 auto; background: url(../images/nopain_text.png) center / contain no-repeat; aspect-ratio: 805 / 299; display: flex; flex-direction: column; justify-content: space-evenly;}
.checklist .slogan__container .slogan__point {font-size: clamp(21px, 6vw, 54px); font-weight: 700;}
.checklist .slogan__container .slogan__main {position: relative; display: inline-block; font-size: clamp(21px, 6vw, 54px); font-weight: 600; color: var(--primary-color); z-index: 1;}
.checklist .slogan__container .slogan__main::before {z-index: -1; display: block; content: ''; position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); height: .6em; width: 102%; background-color: #e9e9e9;}

@media (max-width: 1024px) {
    .checklist .inner {padding: 40px 0 80px;}

    .checklist .checklist__container {padding-block: 30px; margin-bottom: 50px;}

    .checklist .slogan__container {margin-top: 50px;}
}


/* ==== SECTION - PATENT ==== */
.patent {
    width: 100%;
    background-image: url(../images/patent_bg_top.png), url(../images/patent_bg_bottom.png);
    background-position: left top, left bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto, 100% 100%;
}
.patent .inner {align-items: start;}
.patent .patent__headline {font-size: 3em;}
.patent .common-title {color: var(--primary-color);}
.patent .common-desc {color: #484848;}
.patent .patent__visual {transform: scale(1.15); transform-origin: right top;}

@media (max-width: 1024px) {
    .patent .common-title .common-badge {font-size: .9em;}
    .patent .common-title small.mo-only {font-size: .7em;}

    .patent .patent__visual {transform: scale(1);}
}

@media (max-width: 768px) {
    .patent {background-size: 250% auto, 100% 100%;}
}

/* ==== SECTION - SYSTEM ==== */
.system {background: url(../images/system_bg.jpg) center / cover no-repeat;}
.system .inner {align-items: center;}

.system .common-title {color: #fff;}
.system .common-desc {color: #d1d1d1;}

.system .benefit {display: flex; align-items: center; gap: 2em;}
.system .benefit__item {--circle-size: 19em; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: var(--circle-size); height: var(--circle-size); border: .35em solid #fff; border-radius: 100%; background-color: transparent; box-shadow: 0px 0px 20px 5px rgba(208, 37, 127, 1);}
.system .benefit__plus {position: absolute; top: 6%; left: 50%; transform: translateX(-50%); font-size: 3em; font-weight: 300; color: #fff;}
.system .benefit__text {padding-top: .5em; font-size: 2.36em; line-height: 1.3; color: #fff; word-break: keep-all;}
.system .system__visual--mo {display: none;}

@media (max-width: 1024px) {
    .system .system__visual--mo {display: block;}
    .system .system__visual--pc {display: none;}

    .system .benefit {justify-content: space-between;}
    .system .benefit__item {--circle-size: 28em;}
    .system .benefit__text {font-size: clamp(12px, 3vw, 3em);}
}

@media (max-width: 768px) {
    .system .benefit__item {--circle-size: clamp(10em, 26vw, 29em);}
}


/* ==== SECTION - EFFECT ==== */
.effect {background: url(../images/effect_bg.jpg) center / cover no-repeat;}
.effect .inner {align-items: center;}

.effect .common-title {color: #fff;}
.effect .common-desc {color: #fff;}

.effect .step {--step-gap: .6em; display: flex; align-items: center; gap: var(--step-gap);}
.effect .step__item {display: flex; align-items: center; gap: var(--step-gap);}
.effect .step__text {--circle-size: 2.5em; display: flex; align-items: center; justify-content: center; width: var(--circle-size); height: var(--circle-size); border-radius: 50%; background-color: var(--primary-color); color: #fff; font-size: 2.6em; font-weight: 700;}
.effect .step__item:not(:last-child)::after {content: '→'; font-size: 2.7em; color: #fff; font-weight: 400;}

.effect .status {display: flex; align-items: flex-start; flex-direction: column; gap: 1em;}
.effect .status__item {padding: .6em 1em; display: inline-flex; align-items: center; gap: .5em; font-size: 2.4em; border-radius: 9999px; color: #fff; background-color: #000;}
.effect .status__icon {width: 1em !important;}

.effect .effect__caption {font-size: 3em; color: #fff;}

.effect .effect__visual {transform: scale(1.4); transform-origin: right center;}

@media (max-width: 1024px) {
    .effect {padding-bottom: 0;}
    .effect .inner {gap: 0;}

    .effect .effect__visual {transform: scale(1.15); transform-origin: bottom center;}
}

@media (max-width: 768px) {
    .effect .common-content {gap: 2em;}

    .effect .step, .effect .status {font-size: 5px;}

    .effect .effect__caption {font-size: 2em;}
}


/* ==== SECTION - RECIPE ==== */
.recipe {color: #484848; background: url(../images/recipe_bg.jpg) left top / cover no-repeat;}
.recipe .inner {align-items: center;}

.recipe .common-title strong {color: var(--primary-color);}

.recipe .recipe__visual {transform: scale(1.15); transform-origin: right top;}

@media (max-width: 1024px) {
    .recipe .recipe__visual {transform: scale(1);}
}


/* ==== SECTION - WHY ==== */
.why {color: #484848; background: #ececec;}
.why .inner {--grid-cols: 1.1fr; align-items: center;}

.why .common-title {color: var(--primary-color);}
.why .common-badge {color: #484848;}


/* ==== SECTION - DOCTOR ==== */
.doctor {
    width: 100%;
    background-color: #a9b4c0;
    background-image: url(../images/doctor_bg_left.png), url(../images/doctor_bg_right.png);
    background-position: left top, right 30% top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100%, auto 180%;
}
.doctor .inner {--grid-cols: 1fr;}

.doctor .doctor__logo {display: grid; grid-template-columns: 17.5em auto; align-items: center; gap: 1em;}
.doctor .doctor__logo .logo__desc {font-size: 2.6em; font-weight: 600; color: #fff;}

.doctor .common-badge {color: #484848;}
.doctor .common-title {color: var(--primary-color);}

.doctor .card {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em;}
.doctor .card__item {padding: 2.5em 1em; letter-spacing: -0.05em; text-align: center; line-height: 1.4; border-radius: 1.4em; background: rgba(255,255,255,0.86);}
.doctor .card__title {font-size: 2.7em; font-weight: 600; color: var(--primary-color);}
.doctor .card__desc {font-size: 2.3em; font-weight: 100; color: #252525;}
.doctor .card__desc strong {font-weight: 600;}

@media (max-width: 1024px) {
    .doctor {
        background-position: left -6em top, right 5% bottom 0;
        background-repeat: no-repeat, no-repeat;
        background-size: 17em auto, auto 70%;
    }
    .doctor .card {padding-left: 3em; display: grid; grid-template-columns: auto; gap: 1em;}
    .doctor .card__item {width: 50%; min-width: 160px;}
}

@media (max-width: 768px) {
    .doctor .card {font-size: 5.2px;}
}


/* ==== SECTION - SOLUTION ==== */
.solution {padding-block: 50px; background-color: #6f2a4b;}
.solution__slogan {text-align: center; line-height: 2; font-family: 'Noto Serif KR'; font-size: clamp(16px, 4vw, 33px); font-weight: 100; color: #fff;}
.solution__slogan .highlight {color: #f0f8c2;}

@media (max-width: 1024px) {
    .solution {padding-block: 30px;}
    .solution__slogan {line-height: 1.7;}
}


/* ==== SECTION - YEARS ==== */
.years {padding-block: 290px; background: url(../images/years_bg.jpg) left top / cover no-repeat;}
.years .inner {--grid-cols: 2.4fr; align-items: center;}

.years .common-title {color: var(--primary-color);}
.years .common-desc {color: #484848;}

.years__logo {position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 175px;}

@media (max-width: 1024px) {
    .years {padding-block: 140px;}

    .years__visual {width: clamp(210px, 64%, 400px); justify-self: right;}

    .years__logo {bottom: 30px; width: 110px;}
}

@media (max-width: 768px) {
    .years {padding-block: 65px;}

    .years__logo {width: 60px;}
}


/* ==== SECTION - OUTRO ==== */
.outro {color: #212121; background: url(../images/outro_bg.png) #fdfdfd 80% center / auto 155% no-repeat;}
.outro::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.8) 82%, rgba(255,255,255,1) 87%); z-index: 1; pointer-events: none;}

.outro .common-title {color: var(--primary-color);}
.outro .common-badge {display: block; line-height: 1.3; font-weight: 600; color: #212121;}

.outro .common-content {z-index: 2;}

@media (max-width: 1024px) {
    .outro {padding-bottom: 60px; background-size: 80% auto; background-position: right -28% top; background-repeat: no-repeat;}
    .outro::before {top: auto; bottom: 0; background: linear-gradient(-135deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 85%);}
    .outro::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; bottom: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(255,255,255,1) 85%);}

    .outro .common-content {padding-top: clamp(35em, 57vw, 80em);}
    .outro .common-desc {font-size: clamp(13px, 3vw, 3em);}
}

@media (max-width: 768px) {
    .outro {padding-bottom: 30px;}
}