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

/* #content */
.img_box img {width: 100%;}
.block {display: block;}
.p_color {color: #262F9C;}
.p_text_serif {font-family: 'Noto Serif KR';}
.p_text_book {font-family: 'BookAntiqua';}
.num {display: inline-block; font-weight: 700; font-size: 32px; line-height: 50px; height: 50px; padding: 0 20px; border-radius: 50px; border: 1px solid; box-sizing: border-box;}

section > .inner {padding: 160px 16.66%; box-sizing: border-box;}
section .inner .add_text {display: block; font-weight: 400; font-size: .63em; line-height: 1.2em; margin-bottom: .25em;}
section .inner .title_text {font-weight: 700; font-size: 64px; letter-spacing: -1px; text-align: center; margin-bottom: 80px;}
section .inner .sub_title {font-size: 48px; font-weight: 700; line-height: 64px; letter-spacing: -1px; text-align: center;}
section .inner .sub_explain p {font-size: 28px; line-height: 42px; letter-spacing: -1px; text-align: center; margin-bottom: 1em;}
section .inner .sub_explain p:last-of-type {margin-bottom: 0;}
section .inner .sub_explain p strong {font-weight: 600;}


.sub_visual {width: 100%; padding-top: calc(950/1920 * 100%); position: relative;
    background-image: url(../images/img_visual.png); background-repeat: no-repeat; background-position: center; background-size: contain;} 


.worry {background: #D0D4FF;}
.worry .inner ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.worry .inner ul li {background: #fff; border-radius: 20px; padding: 48px 2%; text-align: center;}
.worry .inner ul li .icon_box {display: inline-block; width: 25%; padding-top: 25%; margin-bottom: 8px;
    background-position: center; background-repeat: no-repeat; background-size: contain;}
.worry .inner ul li p {font-size: 26px; line-height: 40px; letter-spacing: -1px;}


.banner {background-repeat: no-repeat; background-position: center right; background-size: cover; color: #fff;}
.banner .inner {padding: 160px 12.5%;}
.banner .inner .title_text {text-align: left;}
.banner .inner .sub_explain p {font-weight: 300; font-size: 30px; line-height: 40px; text-align: left;}

.banner.surgery {background-image: url(../images/img_bg_banner_surgery.png);}
.banner.doctor {background-image: url(../images/img_bg_banner_doctor.png);}


.definition {background: #FFE5F3;}
.definition .p_color {color: #FF4CAD;}
.definition .badge {border-color: #FF4CAD;}
.definition .inner .title_box {margin-bottom: 80px;}
.definition .inner .title_box .title_text {margin-bottom: 50px;}
.definition .inner .con {border-radius: 40px; background: #fff; box-shadow: 0 20px 40px rgb(255,102,185,.15); padding: 80px 5%; box-sizing: border-box;}
.definition .inner .con .step_box {display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; margin-bottom: 60px; position: relative; z-index: 1;}
.definition .inner .con .step_box::before {content: ''; display: block; width: 62%; height: 1px; background: #FF4CAD; position: absolute; top: 25px; left: 50%; transform: translateX(-50%); z-index: -1;}
.definition .inner .con .step_box li {text-align: center;}
.definition .inner .con .step_box li .num {background: #fff; margin-bottom: 24px;}
.definition .inner .con .step_box li.on .num {background: #FF4CAD; color: #fff;}
.definition .inner .con .step_box li p {font-weight: 500; font-size: 28px; letter-spacing: -1px;}
.definition .inner .con .step_box li p strong {display: block; font-size: 38px; margin-top: .3em;}
.definition .inner .con .img_box {width: 60%; margin: 0 auto;}


.part {background: #F1E5FF;}
.part .p_color {color: #883EDB;}
.part .inner {padding: 160px 20% 190px;}
.part .inner .title_text {margin-bottom: 60px;}
.part .inner .img_box {position: relative;}
.part .inner .img_box p {
    width: 100%;
    padding: 40px 2%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 30px;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: -10%;
    transform: translateX(-50%);
    }


.method .inner {padding: 160px 12.5%;}
.method .inner ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
.method .inner ul li:nth-child(1) {grid-column: 1/4;}
.method .inner ul li {text-align: center; border-radius: 20px; border: 1px solid rgba(83,36,77,.5); overflow: hidden;}
.method .inner ul li .img_box img {border-radius: 20px 20px 0 0;}
.method .inner ul li .text_box {border-radius: 0 0 20px 20px; padding: 36px 2% 54px;}
.method .inner ul li .text_box .step {display: block; font-size: 30px; line-height: 1.5; color: #333; margin-bottom: .5em;}
.method .inner ul li .text_box .step strong {font-weight: 500;}
.method .inner ul li .text_box p {font-size: 28px; line-height: 1.3; letter-spacing: -1px; color: #505050;}
.method .inner .notice {font-size: 18px; line-height: 1.2; letter-spacing: -1px; color: rgba(114,114,114,.7); text-align: right; margin-top: 1em;}


.point {background-image: url(../images/img_bg_point.png); background-repeat: no-repeat; background-position: center; background-size: cover;}
.point .inner {padding: 160px 12.5%;}
.point .inner .step_box {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.point .inner .step_box li {text-align: center; border: 4px solid transparent; border-radius: 40px;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 100%), linear-gradient(130deg, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 100%);
    background-origin: border-box; background-clip: content-box, border-box;}
.point .inner .step_box li > div {padding: 80px 2%;}
.point .inner .step_box li .badge {display: inline-block; text-transform: uppercase; font-weight: 700; font-size: 20px; line-height: 1.5; 
    border: 1px solid #262F9C; border-left: none; border-right: none;}
.point .inner .step_box li strong {display: block; font-size: 32px; line-height: 1; margin: 44px 0;}
.point .inner .step_box li p {font-size: 26px; line-height: 40px; letter-spacing: -1px;}
.point .inner .con {text-align: center; border: 4px solid transparent; border-radius: 40px;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 100%), linear-gradient(130deg, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 100%);
    background-origin: border-box; background-clip: content-box, border-box; position: relative; margin-top: 106px;}
.point .inner .con > div {padding: 80px 15%;}
.point .inner .con .num {background: #2D269E; border-color: #2D269E; color: #fff; position: absolute; top: -25px; left: 50%; transform: translateX(-50%);}
.point .inner .con .img_box {margin: 60px 0 52px;}
.point .inner .notice {font-size: 18px; line-height: 1.2; letter-spacing: -1px; color: rgba(114,114,114,.7); text-align: right; margin-top: 1em;}


.recommend {background: #E9EFFF;}
.recommend .inner {position: relative;}
.recommend .inner::after {content: "";background: url(../images/model.png) no-repeat right bottom;background-size: contain;position: absolute;bottom: 0;right: 0%;width: calc(798/ 1920 * 100%);height: 100%;}
.recommend ul {display: flex;flex-direction: column;align-items: flex-start;gap: 20px;width: 100%;}
.recommend ul li {font-size: 28px;border-radius: 20px;letter-spacing: -1px;position: relative;width: 100%;background: #fff;padding: 32px 80px;box-sizing: border-box;display: flex;justify-content: flex-start;align-items: center;gap:  40px;box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);}
.recommend ul li .num {font-size: 34px;font-weight: 700;border: none;padding: 0;}
.recommend ul li .main_text {font-size: 32px;font-weight: 500;}
.recommend ul li .main_text strong{font-weight: bolder;}



.banner.doctor .inner .title_text {margin: 0; font-weight: 300;}
.banner.doctor .inner .title_text strong {display: block;}
.banner.doctor .inner .sub_title {text-align: left; margin: 38px 0 35px;}
.banner.doctor .inner .sub_title strong {display: block;}



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

    .banner .inner {padding: 120px 10%;}
    .part .inner {padding: 120px 10% 150px;}
    .method .inner {padding: 120px 10%;}
    .point .inner {padding: 120px 10%;}
    .recommend .inner ul {width: 80%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    section > .inner {padding: 120px 8%;}

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

    .banner .inner {padding: 120px 6%;}
    .part .inner {padding: 120px 6% 150px;}
    .method .inner {padding: 120px 6%;}
    .point .inner {padding: 120px 6%;}
    .recommend .inner ul {width: 90%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    .num {font-size: 28px;}
    
    
    section > .inner {padding: 120px 5%;}
    section .inner .add_text {font-size: .52em;}
    section .inner .title_text {margin-bottom: 60px;}
    section .inner .sub_title {font-size: 40px; line-height: 56px;}
    section .inner .sub_explain p {font-size: 24px; line-height: 38px;}


    .sub_visual {padding-top: calc(1000/768 * 100%); background-image: url(../images/img_visual_tab.png);}


    .worry .inner .title_text i {display: block;}
    .worry .inner ul {grid-template-columns: repeat(1, 1fr);}
    .worry .inner ul li {padding: 40px 2%;}
    .worry .inner ul li .icon_box {width: 20%; padding-top: 20%; margin-bottom: 4px;}


    .banner .inner {padding: 120px 5%;}
    .banner .inner .title_text .block {display: inline;}
    .banner .inner .title_text i {display: block;}

    .banner.surgery {background-image: url(../images/img_bg_banner_surgery_mo.png);}
    .banner.doctor {background-image: url(../images/img_bg_banner_doctor_mo.png);}


    .definition .inner .title_box {margin-bottom: 60px;}
    .definition .inner .title_box .title_text {margin-bottom: 30px;}
    .definition .inner .con {border-radius: 30px; padding: 60px 2%;}
    .definition .inner .con .step_box {margin-bottom: 40px;}
    .definition .inner .con .step_box::before {top: 25px; left: 50%; transform: translateX(-50%); z-index: -1;}
    .definition .inner .con .step_box li p {font-size: 21px;}
    .definition .inner .con .step_box li p strong {font-size: 32px;}
    .definition .inner .con .img_box {width: 90%;}


    .part .inner {padding: 120px 5% 207px;}
    .part .inner .title_text {margin-bottom: 34px;}
    .part .inner .title_text span {display: block;}
    .part .inner .img_box p {padding: 32px 2%;font-size: 32px;bottom: -87px;}


    .method .inner {padding: 120px 5%;}
    .method .inner .title_text span {display: block;}
    .method .inner ul {grid-template-columns: 1fr; gap: 40px;}
    .method .inner ul li:nth-child(1) {grid-column: 1/2;}
    .method .inner ul li .text_box {padding: 50px 2% 54px;}
    .method .inner ul li .text_box .step {font-size: 46px; line-height: 1;}
    .method .inner ul li .text_box p {font-size: 36px;}
    .method .inner .notice {font-size: 16px;}


    .point {background-image: url(../images/img_bg_point_tab.png);}
    .point .inner {padding: 120px 5%;}
    .point .inner .step_box {grid-template-columns: repeat(1, 1fr);}
    .point .inner .step_box li {border-radius: 30px;}
    .point .inner .step_box li > div {padding: 60px 2%;}
    .point .inner .step_box li strong {margin: 32px 0;}
    .point .inner .con {border-radius: 30px; margin-top: 60px;}
    .point .inner .con > div {padding: 60px 10%;}
    .point .inner .con .num {top: -25px; left: 50%; transform: translateX(-50%);}
    .point .inner .con .sub_explain p .block {display: inline;} 
    .point .inner .con .sub_explain p i {display: block;} 
    .point .inner .con .img_box {margin: 40px auto;}
    .point .inner .notice {font-size: 14px;}

    .point .inner .con:nth-of-type(1) {margin-top: 140px;}
    .point .inner .con:nth-of-type(1) .img_box {width: 60%;}



    .recommend ul li {gap: 24px;padding: 32px 48px;}
    .recommend ul li .main_text i{display: block;}
    .recommend .inner::after {width: calc(210/ 375* 100%);right: -2%;}


    .banner.doctor .inner .sub_title {margin: 28px 0;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    .num {font-size: 18px;line-height: 30px;height: 30px;padding: 0 12px;}

    section > .inner {padding: 60px 5%;}
    section .inner .title_text {font-size: 34px; line-height: 44px; margin-bottom: 32px;}
    section .inner .sub_title {font-size: 22px; line-height: 1.2em; margin-bottom: 20px;}
    section .inner .sub_explain p {font-size: 16px; line-height: 24px;}


    .sub_visual {padding-top: calc(500/375 * 100%); background-image: url(../images/img_visual_mo.png);}

    
    .worry .inner ul {gap: 10px;}
    .worry .inner ul li {border-radius: 15px; padding: 24px 2%;}
    .worry .inner ul li p {font-size: 16px; line-height: 1.5;}


    .banner .inner {padding: 60px 5%;}
    .banner .inner .title_text {font-size: 34px; line-height: 1.3;}
    .banner .inner .sub_title {font-size: 20px; line-height: 24px; margin: 25px 0 14px;}
    .banner .inner .sub_explain p {font-size: 16px; line-height: 24px;}
    .banner .inner .sub_explain p .block {display: inline;}
    .banner .inner .sub_explain p i {display: block;}


    .definition .inner .title_box {margin-bottom: 30px;}
    .definition .inner .title_box .title_text {margin-bottom: 16px;}
    .definition .inner .con {border-radius: 15px; padding: 40px 5%;}
    .definition .inner .con .step_box {width: 100%; padding-left: 25%; box-sizing: border-box; grid-template-columns: repeat(1, 1fr); gap: 40px; place-items: normal; margin-bottom: 24px;}
    .definition .inner .con .step_box::before {width: 1px; height: 78%; top: 0; left: calc(25% + 22px); transform: translateX(0);}
    .definition .inner .con .step_box li {text-align: left; display: flex; gap: 12px;}
    .definition .inner .con .step_box li .num {margin-bottom: 0;}
    .definition .inner .con .step_box li p {font-size: 16px;}
    .definition .inner .con .step_box li p strong {font-size: 24px;}
    .definition .inner .con .img_box {width: 100%;}


    .part .inner {padding: 60px 5% 102px;}
    .part .inner .title_text {margin-bottom: 30px;}
    .part .inner .img_box p {padding: 16px 2%;border-radius: 15px;font-size: 16px;bottom: -42px;}


    .method .inner {padding: 60px 5%;}
    .method .inner ul li {border-radius: 12px;}
    .method .inner ul li .img_box img {border-radius: 12px 12px 0 0;}
    .method .inner ul li .text_box {border-radius: 0 0 12px 12px; padding: 24px 2% 27px;}
    .method .inner ul li .text_box .step {font-size: 22.5px;}
    .method .inner ul li .text_box p {font-size: 16px;}
    .method .inner .notice {font-size: 14px;}
    .method .inner .notice i {display: block;}


    .point .inner {padding: 60px 5%;}
    .point .inner .step_box {gap: 10px;}
    .point .inner .step_box li {border: 2px solid transparent; border-radius: 15px;}
    .point .inner .step_box li > div {padding: 24px 2%;}
    .point .inner .step_box li .badge {font-size: 16px;}
    .point .inner .step_box li strong {font-size: 18px; margin: 16px 0;}
    .point .inner .step_box li p {font-size: 16px; line-height: 24px;}
    .point .inner .con {border: 2px solid transparent; border-radius: 15px; margin-top: 46px;}
    .point .inner .con > div {padding: 40px 5%;}
    .point .inner .con .num {top: -15px;}
    .point .inner .con .img_box {margin: 24px auto;}
    .point .inner .con .sub_explain p i {display: inline;} 
    .point .inner .con .sub_explain p b {display: block;} 
    .point .inner .notice {font-size: 14px;}

    .point .inner .con:nth-of-type(1) {margin-top: 46px;}


    .recommend ul{gap:10px;}
    .recommend li::before {width: 14px; height: 12px;}
    .recommend ul li {padding: 20px;gap: 12px;border-radius: 10px;}
    .recommend ul li .num {font-size: 14px}
    .recommend ul li .main_text {font-size: 18px}
}


@media screen and (max-width: 545px) {
    .recommend .inner::after {width: calc(300/ 375* 100%);right: -27%;}
}