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

/* #content */
.img_box img {width: 100%;}
.block {display: block;}
.p_color{color: #AE008E;}
strong{font-weight: bolder;}
.ir_text {display: inline-block; width: 268px; height: 54px; background: url(../images/img_text_mini.png) center no-repeat; background-size: contain;}

section > .inner {padding: 160px 16.66%; box-sizing: border-box;}
section .inner .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: 40px;line-height: 54px;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;}

.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;}

.intro{background: #35002B; color:#fff;}
.intro .title_text .p_color{color: #FE90EA;}
.intro .inner{padding:160px 0 0;}

.point{background: #FCEFFA;}
.point .inner{padding: 160px 13%;}

.point .m_color{color: #2D269E;}
.point .info_card_list{display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;}
.point .info_card{display: flex;align-items: center;flex-direction: column;border-radius: 10px;overflow: hidden;}
.point .info_card .info_card_title{font-size: clamp(18px, 3vw, 32px);background: linear-gradient(90deg, #E869D0 0%, #AE008E 100%);display: flex;justify-content: center;align-items: center;padding-block: .4em;color: #fff;width:  100%;}
.point .info_card .img_box{width: 100%;}
.point .is_dark .info_card .info_card_title{background:#423B41 ;}
.info_card_badge{font-size: clamp(16px, 3vw, 30px);width: 10.6em;border-radius: 100px;border: 1px solid #AE008E;background: linear-gradient(90deg, rgba(232, 105, 208, 0.10) 0%, rgba(174, 0, 142, 0.10) 100%);display:  flex;justify-content: center;align-items: center;padding-block: 0.25em;margin: .8em auto .4em;color:  #AE008E;font-weight:  600;}
.is_dark .info_card_badge{border: 1px solid #A7A7A7;background: rgba(112, 112, 112, 0.10);color: #423B41;}
.info_card_desc{font-size: clamp(14px, 2.8vw, 28px);color: #35002B; text-align: center; line-height:1.4;}

.point .point_list{display:grid; gap: 80px;}
.point h4{font-size: clamp(24px, 4.5vw,48px); text-align: center; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.point .desc_item{font-size: clamp(14px, 3vw,28px);color: #161718;text-align: center;line-height: 1.4;text-wrap: balance;word-break: keep-all;}
.point .desc_item .mark{border-radius: 6px;padding: .1em .24em;background: linear-gradient(90deg, rgba(232, 105, 208, 0.10) 0%, rgba(192, 27, 162, 0.10) 100%);}
.point .point_item{background: #fff;border: 1px solid #AE008E;border-radius: 10px;padding: 80px 12%;position: relative;display: grid;gap: 40px;align-items: center;}
.point .point_label{font-size: clamp(14px, 3vw, 32px);font-weight: 700;padding: .4em .75em; border-radius: 1.5em; background-color: #AE008E; width: max-content; color: #fff;
position: absolute; top:0;left: 50%; transform: translate(-50%, -50%); }
.point .notice{font-size: clamp(13px, 2vw, 21px);color: #AAADB0; text-align: center;}
.point .img_text{width: calc(489/1420 * 100%) ; margin: 0 auto;}
.point .point_description{font-size:  clamp(12px, 2.4vw, 26px); text-align: center; color: #161718;  line-height: 1.3; text-wrap: balance; word-break: keep-all; }

.point .compare_list{width: calc(1068/1420 * 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr);gap: 28px; }
@media screen and (max-width:1280px) {
    .point .point_item{padding: 80px 40px;}

}
@media screen and (max-width:768px) {
    .point .title_text i{display: block;}
    .point .point_item{padding: 36px 5%;gap: 16px;}
    .point .point_list{gap: 32px;}
    .point .point_description br{display: none;}
    .point .point_description i{display: block;}

    .point .img_text{width: 80%}

    .point .compare_list{gap: 16px;}
}



.bna{background: #F5F5F5;}
.bna .inner{position: relative;}
.bna .bna_list{display: grid; gap: 40px;}
.bna .bna_item{display: flex; justify-content: space-between; align-items: center; gap: 28px;}
.bna .bna_item .bna_label{font-size: clamp(16px, 3vw, 32px); border-radius: 0 0 .32em .32em; padding-block:.3em;display: flex; justify-content: center; align-items: center; color: #fff;}
.bna .bna_item .bna_label p{ text-align: center; }
.bna .bna_item .before .bna_label{background: #423B41;}
.bna .bna_item .after .bna_label{background: linear-gradient(90deg, #E869D0 0%, #AE008E 100%);}

.why {background: linear-gradient(252deg, #35002B 18.51%, #530845 87.97%);color:#fff;position: relative;}
.why::before{content:'';position: absolute;top: 0;right: 0;aspect-ratio:962/1200;background-image: url(../images/img_why_bg.png);background-size: contain;background-repeat: no-repeat;background-position: center top;width: calc(962/1920 * 100%);opacity: .8;mix-blend-mode: luminosity;}
.why .title_text .p_color{color:#FE90EA;}
.why .inner .why_box {width: 100%;display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;position: relative;align-items: stretch;}
.why .inner .why_box > li {display: flex;justify-content: center;background-color: #fff;border-radius: 10px;padding: 40px;flex-direction: column;aspect-ratio: 630/326;box-sizing: border-box;}
.why .inner .why_box > li:not(:nth-of-type(4)){background-repeat: no-repeat;background-size: contain;background-position: right bottom;}
.why .inner .why_box > li:nth-of-type(1){background-image: url(../images/img_why_01.png);}
.why .inner .why_box > li:nth-of-type(2){background-image: url(../images/img_why_02.png);}
.why .inner .why_box > li:nth-of-type(3){background-image: url(../images/img_why_03.png);}
.why .inner .why_box > li .main_text{width: max-content;padding: .1em .5em;font-weight: 600;font-size: 34px;color: #AE008E;border-radius: 6px;background: linear-gradient(90deg, rgba(232, 105, 208, 0.10) 0%, rgba(192, 27, 162, 0.10) 100%);}
.why .inner .why_box > li .sub_text{color: #E255C8;font-size: clamp(15px, 2.8vw, 28px);margin-bottom: .5em;text-transform: lowercase;}
.why .inner .why_box > li .sub_text::first-letter {
  text-transform: uppercase;}
.why .inner .why_box > li .desc_text {font-size: clamp(15px, 2.8vw, 28px);line-height: 1.4;letter-spacing: -1px;color: #261256;}
.why .inner .why_box > li .text_box{margin-top: auto;}
.why .inner .why_box > li .text_box .date_text{font-size: clamp(23px, 4.8vw, 48px); color: #AE008E; font-weight:900; }
.why .inner .why_box > li .notice{font-size: clamp(13px, 2vw, 20px);color: #AAADB0;} 
.why .inner .why_box > li .data_list{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;position: relative;}
.why .inner .why_box > li .data_list::before{content: ''; width: 1px; height: 100%; background: #dfe0e2; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.why .inner .why_box > li .data_list .num_text{color: #35002B; font-size: 40px;}
.why .inner .why_box > li .data_list .num_text strong{color: #AE008E; font-size: 1.2em; font-weight: 900;}
.why .inner ul li .icon_box {width: 130px;padding-top: 130px;background-position: center;background-repeat: no-repeat;background-size: contain;}

.recommend {background: #FCEFFA;color: #35002B;}
.recommend .inner {position: relative;}
.recommend .inner::after {content: "";background: url(../images/img_recommend_bg.png) no-repeat right bottom;background-size: contain;position: absolute;bottom: 0;right: 0;width: calc(934/ 1920 * 100%);height: 100%;}
.recommend ul {display: flex;flex-direction: column;align-items: flex-start;gap: 20px;width: 100%;}
.recommend ul li {width: 100%;background: #fff;padding: 40px 60px;box-sizing: border-box;display: flex;justify-content: flex-start;align-items: center;gap: 40px;border-radius: 10px;}
.recommend ul li .num {font-family: "Cormorant Infant";font-size: 32px;color: #AE008E; font-weight: 700;}
.recommend ul li .main_text {font-size: 32px;font-weight: 500;}
.recommend ul li .main_text .mark{background: linear-gradient(270deg, rgba(192, 27, 162, 0.15) 0%, rgba(232, 105, 208, 0.15) 100%); padding-inline: .1em;}


.info_surgery {background: #FAFAFA;}
.info_surgery .inner .title_text {margin-bottom: 60px;}
.info_surgery .inner ul {display: flex; justify-content: center;}
.info_surgery .inner ul li {width: 25%; padding: 0 2%; box-sizing: border-box; border-left: 1px solid #DFE0E2;}
.info_surgery .inner ul li:first-child {border-left: none;}
.info_surgery .inner ul li .icon_box {width: 60%; padding-top: 60%; background-position: center; background-repeat: no-repeat; background-size: contain; margin: 0 auto 10px;}
.info_surgery .inner ul li p {font-size: 24px; letter-spacing: -1px; color: #474A4D; text-align: center;}
.info_surgery .inner ul li p strong {display: block; font-size: 32px; font-weight: 600; line-height: 46px; letter-spacing: -1px; color: #161718; margin-bottom: .3em;}

.effect{background: linear-gradient(180deg, #F3EEFF 0%, #FFF 30.16%);}

.method{background: #F5F0FF}



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

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

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

}


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


    
    .sub_visual {padding-top: calc(1000/768 * 100%); background-image: var(--bg-ta); background-size: cover;}
    .intro .inner{padding:120px 0 0;}
    .point .inner{padding: 120px 5%;}
    .point .info_card_list{grid-template-columns: 1fr}

    .bna .swiper-buttons{display: none;}

    .why::before{transform: translateX(16%);width: calc(643/768 * 100%);}
    .why .inner .title_text i {display: block;}
    .why .inner .why_box{grid-template-columns: 1fr}

    .bna .bna_item{flex-direction: column;gap:  16px;}
    .bna .arrow img{transform: rotate(90deg);}

    .recommend ul li {gap: 16px;padding: 36px 40px;flex-direction: column;align-items: flex-start;}
    .recommend ul li .main_text i{display: block;}
    .recommend .inner::after {width: calc(291/ 375* 100%);right: -13%;}

    
    .info_surgery .inner ul {flex-wrap: wrap; row-gap: 40px; justify-content: center;}
    .info_surgery .inner ul li {width: 48%;}
    .info_surgery .inner ul li:nth-child(2n-1) {border-left: none;}
    .info_surgery .inner ul li .icon_box {width: 50%; padding-top: 50%; margin: 0 auto 20px;}
    .info_surgery .inner ul li p {font-size: 28px;}
    .info_surgery .inner ul li p strong {font-size: 36px; margin-bottom: .3em;}

}

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

    .ir_text {width: 130px; height: 26px;}
    .intro .inner{padding:60px 0 0;}
    .point .inner{padding: 60px 5%;}



    .sub_visual {padding-top: calc(500/375 * 100%);background-image: var(--bg-mo);}



    .bna .inner .swiper ul li{gap: 8px;}
    .bna .arrow img{width: 28px;}

   .why::before{aspect-ratio:318/353;}
    .why .inner .why_box {grid-template-columns:minmax(0, 1fr);gap: 10px;}
    .why .inner ul li .icon_box{width:64px;padding-top: 64px;}
    .why .inner .why_box > li{aspect-ratio: 327/158;min-width: 0;padding: 20px;}
    .why .inner .why_box > li .main_text {/* width: auto; */max-width: 100%;font-size: 18px;display: inline-block;}
    .why .inner .why_box > li:nth-of-type(4) .text_box > p {width: 100%;}
    .why .inner .why_box > li .data_list {margin-bottom: 10px;}
    .why .inner .why_box > li .data_list > li {flex: 1;min-width: 0;/* text-align: center; */}
    .why .inner .why_box > li .data_list .desc_text {font-size: 14px;line-height: 18px;}
    .why .inner .why_box > li .data_list .num_text {font-size: 18px;}
    .why .inner .why_box > li .data_list .num_text span {width: auto;height: auto;}
    .why .inner .why_box > li .data_list::before{left: 40%;}

    .recommend ul li {padding: 20px;gap: 6px;}
    .recommend ul li .num {font-size: 14px;}
    .recommend ul li .main_text {font-size: 18px;}



    .info_surgery .inner .title_text {margin-bottom: 40px;}
    .info_surgery .inner ul li .icon_box {margin: 0 auto 8px;}
    .info_surgery .inner ul li p {font-size: 16px; line-height: 18px;}
    .info_surgery .inner ul li p strong {font-size: 24px; line-height: 28px; margin-bottom: .3em;}

}