@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&display=swap');
.cormorant-infant {
    font-family: "Cormorant Infant", serif;
    font-style: normal;
}

/* #content */
#content {color: #3D0E61;}
.img_box img {width: 100%;}
.block {display: block;}
.p_color{color: #B048FF;}
strong{font-weight: bolder;}

section > .inner {padding: 160px 11%; box-sizing: border-box;}
section .title_text {font-weight: 700;font-size: 64px;letter-spacing: -1px;text-align: center;margin-bottom: 60px;line-height: 1.3;}
section .inner .sub_explain p {font-size: 36px;line-height: 1.3;letter-spacing: -0.02em;text-align: center;margin-bottom: 1em;}
section .inner .sub_explain p:last-of-type {margin-bottom: 0;}
section .inner .add_text {display: block; font-weight: 400; font-size: 40px; line-height: 50px; text-align: center; margin-bottom: .25em;}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section > .inner {padding: 150px 10%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    section > .inner {padding: 150px 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    section > .inner {padding: 150px 6%;}
}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    section > .inner {padding: 120px 5%;}
    section .inner .add_text {font-size: 36px; letter-spacing: -0.05em;}
    section .inner .sub_explain p {font-size: 32px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px) */
@media screen and (max-width:767px) {
    .wrap {min-width: 375px;}
    section > .inner {padding: 60px 5%;}
    section .title_text {font-size: 34px; margin-bottom: 40px;}
    section .inner .sub_explain p {font-size: 16px;}
    section .inner .add_text {font-size: 22px; line-height: 32px;}
    .ir_text {width: 130px; height: 26px;}
}


/* =======================================
 * [sub_visual]
======================================= */
.sub_visual {width: 100%; padding-top: calc(950/1920 * 100%); position: relative;
    background-image:var(--bg-pc); background-repeat: no-repeat; background-position: center; background-size: contain;}

@media screen and (max-width:1024px) {
    .sub_visual {padding-top: calc(1000/768 * 100%); background-image: var(--bg-ta); background-size: cover;}
}

@media screen and (max-width:767px) {
    .sub_visual {padding-top: calc(500/375 * 100%); background-image: var(--bg-mo);}
}

/* =======================================
 * [solution] 부위에 맞는 리프팅을 찾아야 하는 이유
======================================= */
.solution {background: #3D0E61; color: #fff;}
.solution .p_color {color: #C982FF;}
.solution .inner .dots {margin-block: 50px; display: grid; gap: 10px; justify-items: center;}
.solution .inner .dots .dot {--dot-size: 8px; display: block; width: var(--dot-size); height: var(--dot-size); border-radius: 9999px; background-color: #fff;}
.solution .inner .dots .dot:nth-child(1) {opacity: .3;}
.solution .inner .dots .dot:nth-child(2) {opacity: .6;}
.solution .inner ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.solution .inner ul li {display: flex;flex-direction: column;align-items: center;justify-content: center;background: #F8EFFF;padding: 35px 0;text-align: center;border-radius: 10px;position: relative;}
.solution .inner ul li .img_box img{width: 112px;}
.solution .inner ul li .badge {display: inline-block; padding: 10.5px 14px; border-radius: 100px; background: #F0EBFF;font-weight: 700; font-size: 16px; text-transform: uppercase;}
.solution .inner ul li p {font-size: 26px;letter-spacing: -1px;color: #3D0E61;font-weight: 400;line-height: 1.4;}
.solution .inner ul li .mo_text_box p > strong {font-size: 1.15em;}
.solution .inner ul li .mo_text_box p > span {display: block;}
.solution .inner .sub_explain strong {color: #fff;}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .solution .inner .title_text i{display: block;}
    .solution .inner ul {grid-template-columns: repeat(1, 1fr);}
    .solution .inner ul li{padding:22px 0;}
    .solution .inner .sub_explain i {display: block;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:767px) {
    .solution .inner .title_text i {display: block;}
    .solution .inner .dots {margin-block: 32px;}
    .solution .inner .dots .dot {--dot-size: 4px;}
    .solution .inner ul {gap: 10px; border-radius: 6px;}
    .solution .inner ul li{padding:15px 0;}
    .solution .inner ul li p {font-size: 16px;}
    .solution .inner ul li .badge {padding: 6px 8px; border-radius: 46px; max-width: 80px; margin:0 auto; background: #F0EBFF; font-size: 10px;}
    .solution .inner ul li .img_box img{width: 80px;}
}


/* =======================================
 * [important] 왜 부위별 맞춤 리프팅이 중요할까요?
======================================= */
.important .inner {background: #F8EFFF;}
.important .inner .important_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.important .inner .important_list .important_item {padding: 40px 5%; border-radius: 24px; background-color: #fff; box-shadow: rgba(144, 0, 255, .1) 0 0 30px;}
.important .inner .important_list .important_item .important_header {margin-bottom: 5%; display: grid; justify-content: center; gap: .8em; text-align: center; font-size: clamp(22px, 3vw, 32px);}
.important .inner .important_list .important_item .important_header .important_title_sub {aspect-ratio: 1; padding: 3px; margin: 0 auto; width: fit-content; font-weight: 600; border: 1px solid #B048FF; border-radius: 9999px; color: #B048FF;}
.important .inner .important_list .important_item .important_header .important_title {letter-spacing: -1px; font-weight: 700;}
.important .inner .important_list .important_item .text_box {margin-top: 3em; display: grid; gap: 2em; text-align: center; font-size: clamp(6px, 1.2vw, 10px);}
.important .inner .important_list .important_item .text_box > p {line-height: 1.4; letter-spacing: -1px; font-size: 2.6em; word-break: keep-all; color: #3D0E61;}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .important .inner i {display: block;}
    .important .inner .important_list {grid-template-columns: auto;}
    .important .inner .important_list .important_item {padding: 50px 4%;}
    .important .inner .important_list .important_item .img_box {padding-inline: 8%; background-color: #F8EFFF;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:767px) {
    .important .inner .important_list .important_item {padding-block: 30px;}
    .important .inner .important_list .important_item .img_box {padding: 0;}
}


/* =======================================
 * [system] 체계적인 리팅 다각도 분석 시스템
======================================= */
.system .system_list {--system-gap: 30px; --circle-size: 49px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.system .system_list .system_item .system_num {padding: .2em .8em; margin: 0 auto; width: fit-content; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; text-align: center; box-sizing: border-box; border-radius: 9999px; border: 1px solid #B048FF; color: #B048FF; background-color: #F8EFFF; position: relative; z-index: 1;}
.system .system_list .system_item .system_content {display: flex; flex-direction: column; gap: var(--system-gap);}
.system .system_list .system_item .system_content .system_title {text-align: center; letter-spacing: -1px; line-height: 1.4; font-size: 26px; font-weight: 500; color: #3D0E61;}
.system .system_list .system_item .system_content .img_box {border-radius: 10px; overflow: hidden;}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .system .inner i {display: block;}
    .system .system_list {grid-template-columns: repeat(2, 1fr); row-gap: 30px;}
    .system .system_list .system_item .system_content {--system-gap: 24px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:767px) {
    .system .system_list {grid-template-columns: auto;}
    .system .system_list .system_item {align-items: center; justify-content: flex-start;}
    .system .system_list .system_item .system_num {font-size: 20px;}
    .system .system_list .system_item .system_content {gap: 10px;}
    .system .system_list .system_item .system_content .system_title {width: auto; text-align: center; font-size: 22px;}
    .system .system_list .system_item .system_content .system_title br {display: none;}
}


/* =======================================
 * [liftings] 내 고민에 맞는 리프팅을 찾아보세요
======================================= */
.liftings {padding-top: 160px; letter-spacing: -1px;}
.liftings .inner {background: #FAFAFA;}
.liftings_tabs {display: grid; grid-template-columns: repeat(3, 1fr); }
.liftings_tabs .liftings_tab {padding: 20px; border: 0; color: #23005D; font-size: 32px; cursor: pointer; background: transparent; border-block: 1px solid #ddd;}
.liftings_tabs .liftings_tab.is_active {border-bottom: 3px solid #B048FF; color: #B048FF; font-weight: 700;}
.liftings_tabs .liftings_tab:focus-visible {position: relative; z-index: 1; outline: 3px solid #B048FF; outline-offset: -3px;}
.liftings_panel {min-height: 240px; box-sizing: border-box;}
.liftings_panel .add_text {font-style: italic; font-weight: 500; color: #B048FF;}
.liftings_panel .bna_list {display: grid; gap: 60px;}
.liftings_panel .bna_list .bna_item {display: grid; gap: 60px; padding: 70px 70px; border-radius: 24px; background-color: #fff; box-shadow: rgba(0, 0, 0, .05) 0 0 25px;}
.liftings_panel .bna_list .bna_item .bna_header {display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between;}
.liftings_panel .bna_list .bna_item .bna_header .bna_info {display: grid; gap: 16px; align-content: start;}
.liftings_panel .bna_list .bna_item .bna_header .bna_info .bna_label.recommendation::before {content: '추천 고민'; width: fit-content; padding: 7px 18px; display: block; border: 1px solid #B048FF; border-radius: 8px; font-size: 24px; font-weight: 600; color: #B048FF;}
.liftings_panel .bna_list .bna_item .bna_header .bna_info .bna_title {line-height: 1.3; font-size: 56px; font-weight: 700;}
.liftings_panel .bna_list .bna_item .bna_header .bna_circles {display: flex; align-items: center; isolation: isolate;}
.liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle {position: relative; display: grid; place-items: center; align-content: center; gap: 16px; width: clamp(210px, 26vw, 260px);; aspect-ratio: 1; padding: 16px; font-size: 28px; font-weight: 500; border-radius: 50%; box-sizing: border-box; background: rgba(201, 130, 255, .2); box-shadow: inset 0 0 51px -25px #B048FF; color: #23005D; text-align: center; line-height: 1.4; word-break: keep-all;}
.liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle + .bna_circle {margin-left: clamp(-28px, -1.8vw, -16px);}
.liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle::before {display: block; content: ''; width: 24px; height: 32px; aspect-ratio: 24 / 32; background: url(../images/ico_check.svg) center / 100% no-repeat;}

.liftings_panel .bna_list .bna_item .bna_body .bna_img {--bna-img-gap: clamp(12px, 2vw, 20px); --bna-img-radius: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--bna-img-gap);}
.liftings_panel .bna_list .bna_item .bna_body .bna_img .img_box {position: relative; border-radius: var(--bna-img-radius); overflow: visible; background: #868686;}
.liftings_panel .bna_list .bna_item .bna_body .bna_img .img_box img {display: block; border-radius: var(--bna-img-radius);}
.liftings_panel .bna_list .bna_item .bna_body .bna_img .img_box.img_after {background: #B048FF;}
.liftings_panel .bna_list .bna_item .bna_body .bna_img .img_box .bna_caption {display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; border-radius: 0 0 var(--bna-img-radius) var(--bna-img-radius); box-sizing: border-box; background: #868686; color: #fff; font-size: 32px; font-weight: 600; letter-spacing: .04em; position: absolute; right: 0; bottom: 0; left: 0; z-index: 1;}
.liftings_panel .bna_list .bna_item .bna_body .bna_img .img_box.img_after .bna_caption {background: #B048FF;}
.liftings_panel .bna_list .bna_item .bna_body .bna_img .bna_arrow {display: block; width: 40px; aspect-ratio: 1; background: url(../images/ico_arrow.svg) center / 100% no-repeat; pointer-events: none;}

.liftings_panel .bna_list .bna_item .btn_detail {margin: 0 auto; padding-block: 20px; width: 70%; text-align: center; font-size: 32px; font-weight: 700; border-radius: 9999px; color: #fff; background-color: #9000FF;}

/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1440px) {
    .liftings_panel .bna_list .bna_item {padding-inline: 6%;}
    .liftings_panel .bna_list .bna_item .bna_header {grid-template-columns: auto; justify-content: center; justify-items: center; gap: 30px;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_info {justify-content: center; justify-items: center;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_info .bna_title {text-align: center;}
}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .liftings {padding-top: 120px;}
    .liftings i {display: block;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_circles {justify-content: center; width: 100%;}
    .liftings_panel .bna_list .bna_item .bna_body .bna_img {grid-template-columns: auto; justify-items: center; gap: 20px;}
    .liftings_panel .bna_list .bna_item .bna_body .bna_img .bna_arrow {transform: rotate(90deg);}
}

@media screen and (max-width:767px) {
    .liftings {padding-top: 60px;}
    .liftings_tabs .liftings_tab {padding: 14px 8px; font-size: 16px;}
    .liftings_panel .bna_list {gap: 32px;}
    .liftings_panel .bna_list .bna_item {gap: 20px; padding-block: 36px;}
    .liftings_panel .bna_list .bna_item .bna_header {gap: 18px;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_info .bna_title {font-size: 28px;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_info .bna_label.recommendation::before {font-size: 12px;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_circles {--bna-circle-size: clamp(130px, 23vw, 170px); --bna-circle-column-gap: 20px; --bna-circle-overlap: 36px; display: grid; grid-template-columns: repeat(2, var(--bna-circle-size)); justify-content: center; column-gap: var(--bna-circle-column-gap); width: 100%;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle {width: var(--bna-circle-size); padding: 10px; font-size: 15px; gap: 4px;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle + .bna_circle {margin-left: 0;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle::before {width: 22px; height: 29px;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle:first-child {grid-column: 1 / -1; justify-self: center; z-index: 2;}
    .liftings_panel .bna_list .bna_item .bna_header .bna_circles .bna_circle:nth-child(n + 2) {margin-top: calc(0px - var(--bna-circle-overlap)); z-index: 1;}
    .liftings_panel .bna_list .bna_item .bna_body .bna_img {gap: 10px;}
    .liftings_panel .bna_list .bna_item .bna_body .bna_img .bna_arrow {width: 20px;}
    .liftings_panel .bna_list .bna_item .bna_body .bna_img .img_box .bna_caption {padding: 7px; font-size: 15px;}
    .liftings_panel .bna_list .bna_item .btn_detail {width: 100%; font-size: 22px;}
}


/* =======================================
 * [why] 왜 리팅성형외과는 맞춤 리프팅을 잘 할까요?
======================================= */
.why .inner {position: relative; overflow: hidden; background: linear-gradient(53deg, #2E0051, #3D0E61);}
.why .inner .why_bg {display: block; width: auto; height: 100%; object-fit: contain; pointer-events: none; position: absolute; top: 0; right: 0; z-index: 0;}
.why .inner > * {position: relative; z-index: 1;}
.why .inner .add_text {color: #fff;}
.why .inner .title_text {color: #fff;}
.why .inner .content {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 60px;}
.why .inner .content .why_list .why_item {padding-block: 32px; display: flex; align-items: center; gap: 18px; font-size: 29px;}
.why .inner .content .why_list .why_item:not(:last-child) {border-bottom: 1px solid rgba(221, 221, 221, .4);}
.why .inner .content .why_list .why_item .why_num {text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .15em; font-weight: 700; font-size: 1.01em; color: #C982FF;}
.why .inner .content .why_list .why_item .why_text {letter-spacing: -1%; color: #fff;}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .why .inner .why_bg {width: 70%; height: auto; top: auto; bottom: 0; transform: translateY(8%);}
    .why .inner .content {grid-template-columns: auto; gap: 24px;}
    .why .inner .content .why_list .why_item {font-size: clamp(16px, 4vw, 29px);}
}

@media screen and (max-width:768px) {
    .why .inner .why_bg {max-width: 520px; width: 108%; right: -6%; transform: translateY(23%);}
}

@media screen and (max-width:767px) {
    .why .inner .content {gap: 0;}
    .why .inner .content .why_list .why_item {padding-block: 16px;}
}


/* =======================================
 * [form] 한 분 한 분의 얼굴에 맞게 만족도 높은 결과를 약속드립니다
======================================= */
.form .inner {--form-border: 1px solid #C4C6C8; --form-gap: 40px; background: #F8EFFF;}
.form .inner .form_container {display: grid; gap: var(--form-gap); min-width: 0; padding: 60px 100px; padding-left: 36%; border-radius: 24px; box-sizing: border-box; background-color: #fff;}
.form .inner .form_container .asterisk {color: #C982FF;}
.form .inner .form_container .form_notice {text-align: right; font-size: 16px; font-weight: 500;}
.form .inner .form_container .form_wrapper {display: grid; gap: var(--form-gap); min-width: 0;}
.form .inner .form_container .form_wrapper .form_field {display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; min-width: 0;}
.form .inner .form_container .form_wrapper .form_field .form_label {letter-spacing: -2%; font-size: 26px; font-weight: 500;}
.form .inner .form_container .form_wrapper .form_field .form_input {display: block; width: 100%; min-width: 0; padding: 20px 20px; box-sizing: border-box; font-size: 18px; border: var(--form-border); border-radius: 10px;}
.form .inner .form_container .form_wrapper .form_field .form_input:focus {outline-color: #B048FF;}
.form .inner .form_container .form_wrapper .form_field .form_input::placeholder {color: #AAADB0;}
.form .inner .form_container .form_wrapper .form_field .form_input[type="number"] {-moz-appearance: textfield; appearance: textfield;}
.form .inner .form_container .form_wrapper .form_field .form_input[type="number"]::-webkit-inner-spin-button,
.form .inner .form_container .form_wrapper .form_field .form_input[type="number"]::-webkit-outer-spin-button {margin: 0; -webkit-appearance: none;}
.form .inner .form_container .agreement {min-width: 0; padding: 40px 32px; border: var(--form-border); border-radius: 10px; box-sizing: border-box;}
.form .inner .form_container .agreement_checkbox {--checkbox-size: 28px; width: var(--checkbox-size); height: var(--checkbox-size); margin: 0; accent-color: #B048FF; cursor: pointer;}
.form .inner .form_container .agreement_all,
.form .inner .form_container .agreement_label {display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer;}
.form .inner .form_container .agreement_all {padding-bottom: 20px; border-bottom: var(--form-border);}
.form .inner .form_container .agreement_all .agreement_text {font-size: 26px; font-weight: 600;}
.form .inner .form_container .agreement_list {display: grid; gap: 18px; min-width: 0; padding-block: 22px;}
.form .inner .form_container .agreement_item {width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;}
.form .inner .form_container .agreement_text {line-height: 1.4; word-break: keep-all; font-size: 18px; font-weight: 500;}
.form .inner .form_container .agreement_detail {padding: 9px 16px; border: 1px solid #AAADB0; border-radius: 9999px; flex: 0 0 auto; color: #3D0E61; background: #fff; line-height: 1; cursor: pointer; font-size: 18px;}
.form .inner .form_container .agreement_detail[aria-expanded="true"] {border-color: #B048FF; color: #B048FF; background: #F8EFFF;}
.form .inner .form_container .agreement_content {width: 100%; min-width: 0; max-width: 100%; padding: 20px; border: var(--form-border); border-radius: 10px; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; background: #F8F8F8; color: #5F6266; font-size: 15px; line-height: 1.4;}
.form .inner .form_container .agreement_content strong {display: block; color: #242629; font-size: 16px;}
.form .inner .form_container .agreement_notice {display: grid; gap: 6px; color: #909498; font-size: 16px; line-height: 1.5;}
.form .inner .form_container .agreement_notice li::before {content: '* ';}
.form .inner .form_container .submit_btn {display: block; padding-block: 25px; width: 100%; letter-spacing: -1%; font-size: 32px; font-weight: 700; border-radius: 9999px; color: #fff; background-color: #B048FF;}

.form .inner .form_decoration {position: absolute; left: 7%; bottom: 0; width: 30%; aspect-ratio: 813 / 1619; overflow: hidden;}
.form .inner .form_decoration img {display: block; width: 100%; height: auto;}

@media screen and (max-width:1024px) {
    .form .inner i {display: block;}
    .form .inner .form_container {padding: 60px 6%;}
    .form .inner .form_decoration {aspect-ratio: 813 / 855; width: 73%; margin: 0 auto; position: static;}
}

@media screen and (max-width:767px) {
    .form .inner {--form-gap: 16px;}
    .form .inner .form_container .form_notice {font-size: 13px;}
    .form .inner .form_container .form_wrapper .form_field {grid-template-columns: 60px minmax(0, 1fr);}
    .form .inner .form_container .form_wrapper .form_field .form_label {font-size: 16px;}
    .form .inner .form_container .form_wrapper .form_field .form_input {font-size: 16px;}
    .form .inner .form_container .agreement {padding: 24px 5%;}
    .form .inner .form_container .agreement_all .agreement_text {font-size: inherit;}
    .form .inner .form_container .agreement_item {align-items: flex-start; gap: 7px;}
    .form .inner .form_container .agreement_checkbox {--checkbox-size: 22px;}
    .form .inner .form_container .agreement_text {font-size: 14px;}
    .form .inner .form_container .agreement_detail {font-size: 16px;}
    .form .inner .form_container .agreement_content {padding: 15px; font-size: 12px;}
    .form .inner .form_container .agreement_notice {font-size: 12px;}
    .form .inner .form_container .submit_btn {padding-block: 20px; font-size: 22px;}
}