@font-face {
    font-family: '210 M고딕010.ttf';
    src: url('/font/210 M고딕010.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕030.ttf';
    src: url('/font/210 M고딕030.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕040.ttf';
    src: url('/font/210 M고딕040.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕050.ttf';
    src: url('/font/210 M고딕050.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕060.ttf';
    src: url('/font/210 M고딕060.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕070.ttf';
    src: url('/font/210 M고딕070.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕080.ttf';
    src: url('/font/210 M고딕080.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕090.ttf';
    src: url('/font/210 M고딕090.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Dynalight-Regular.ttf';
    src: url('/font/Dynalight-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'LEMONMILK-Regular.otf';
    src: url('/font/LEMONMILK-Regular.otf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'GothicA1-Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/GothicA1-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'SB 어그로 M';
    src: url('/font/SB_Aggro_M.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SB 어그로 B';
    src: url('/font/SB_Aggro_B.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '지마켓 L';
    src: url('/font/GmarketSansTTFLight.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '지마켓 M';
    src: url('/font/GmarketSansTTFMedium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '지마켓 B';
    src: url('/font/GmarketSansTTFBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon b';
    src: url('/font/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon sb';
    src: url('/font/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon m';
    src: url('/font/Montserrat-Medium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon r';
    src: url('/font/Montserrat-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon l';
    src: url('/font/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'KyoboHandwriting2024SeoWooPark';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-1@1.0/KyoboHandwriting2024psw.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

.bg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ----------------- */
.troubleReason{
    width: 100%;
    background-color: #f8f8f8;
    padding: 90px 0;
    margin-top: 90px;
}

.troubleReason .condiv{
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 64px;
}

.troubleReason .condiv .carddiv{
    width: calc(100%/4 - 21px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.troubleReason .condiv .carddiv .imgbox{
    width: 100%;
}

.troubleReason .condiv .carddiv img{
    width: 100%;
}

.troubleReason .condiv .carddiv .whitediv{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 132px;
    border-radius: 15px;
    box-shadow: 0px 0px 7.76px 0.24px rgba(30, 29, 28, 0.06);
    background-color: #fff;
    margin-top: -54px;
    padding-top: 24px;
}

.troubleReason .condiv .carddiv .whitediv span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    line-height: 20px;
    border-radius: 50px;
    background-color: #222222;
    font-size: 14px;
    color: #fff;
    font-family: "Outfit", sans-serif !important;
}

.troubleReason .condiv .carddiv .whitediv p{
    font-size: 18px;
    line-height: 22px;
    margin-top: 12px;
    text-align: center;
    font-weight: 500;
}

.troubleReason .condiv .carddiv01 .whitediv p{
    margin-top: 18px;
}



#surgery1{
    margin-top: 0;
}

.d_h2{
    font-weight: 500; 
    font-size: 36px;
    color: #222222; 
    line-height: 50px;
}

.surgery_section_image_skincare{
    padding: 72px 0 !important;
    background: url(/img/surgery_section_image_skincare.png) no-repeat center !important;
}

#surgery1 .surgery_section_text p.type4{
    color: #222222 !important;
    font-weight: 500;
}

#surgery1.type2 .surgery_section_circle li{
    border-color: #abd3ea;
}


#surgery1 .surgery_section_circle li p,
#surgery1 .surgery_section_circle li span{
    color: #000;
}

#surgery1 .surgery_section_circle li span{
    top: calc(14% - -12px);
}

.solutionSection{
    padding-bottom: 90px;
}
.solutionSection .condiv{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 60px;
}

.solutionSection .condiv .carddiv{
    width: calc(100%/3 - 14px);
}

.solutionSection .condiv .carddiv .sol-img{
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.solutionSection .condiv .carddiv .graybox{
    background-color: #f8f8f8;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 50px;
}

.solutionSection .condiv .carddiv .graybox .num{
    display: block;
    font-size: 16px;
    font-family: "Outfit", sans-serif !important;
    font-weight: 500;
}

.solutionSection .condiv .carddiv .graybox h4{
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin-top: 15px;
}

.solutionSection .condiv .carddiv .graybox ul{
    margin-top: 25px;
}

.solutionSection .condiv .carddiv .graybox ul li{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
}

.solutionSection .condiv .carddiv .graybox ul li img{
    width: 17px;
}

.solutionSection .condiv .carddiv .graybox ul li p{
    font-size: 16px;
    color: #9b9b9b;
    font-weight: 400;
}


.bestSection{
    width: 100%;
    background-color: #f2d2e1;
    padding: 90px 0;
}

.bestSection .condiv{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.bestSection .condiv .carddiv{
    width: calc(100%/3 - 14px);
    height: 260px;
    border-radius: 20px;
    padding: 60px 30px;
}

.bestSection .condiv .carddiv01{
    background-image: url("/img/sub/skin_skincare/best-carddiv01.png");
}
.bestSection .condiv .carddiv02{
    background-image: url("/img/sub/skin_skincare/best-carddiv02.png");
}
.bestSection .condiv .carddiv03{
    background-image: url("/img/sub/skin_skincare/best-carddiv03.png");
}

.bestSection .condiv .carddiv .num{
    display: block;
    font-size: 16px;
    font-family: "Outfit", sans-serif !important;
    font-weight: 500;
}

.bestSection .condiv .carddiv h4{
    font-size: 20px;
    margin-top: 14px;
}

.bestSection .condiv .carddiv h4 span{
    font-weight: 600;
}

.bestSection .condiv .carddiv ul{
    margin-top: 30px;
}

.bestSection .condiv .carddiv ul li{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.bestSection .condiv .carddiv ul li img{
    width: 14px;
}

.bestSection .condiv .carddiv ul li p{
    font-size: 15px;
    color: #666666;
    font-weight: 500;
}

.bestSectionGreen{
    background-color: #c0dedb !important;
}

.bestSectionGreen h4{
    line-height: 27px;
}

.bestSectionGreen .condiv .carddiv{
    padding-top: 50px !important;
}

.bestSectionGreen .condiv .carddiv01{
    background-image: url("/img/sub/skin_skincare/best01-carddiv01.png") !important;
}
.bestSectionGreen .condiv .carddiv02{
    background-image: url("/img/sub/skin_skincare/best01-carddiv02.png") !important;
}
.bestSectionGreen .condiv .carddiv03{
    background-image: url("/img/sub/skin_skincare/best01-carddiv03.png") !important;
}

#surgery21{
    margin-top: 0;
    margin-bottom: 0;
    background-color: #fff;
}

#surgery21 .surgery_section_content ul{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 18px;
}

#surgery21 .surgery_section_content ul li{
    width: calc(100%/4 - 14px);
    background-color: #f8f8f8 !important;
}

.surgery_faq{
    margin-top: 0;
}


@media all and (min-width: 991px){
    .pcbanner{
        display: block;
        width: 100%;
    }
    .mobilebanner{
        display: none;
    }

    #surgery1 .surgery_section_circle li p{
        top: 53% !important;
    }
}

@media all and (max-width: 991px){
    .pcbanner{
        display: none;
    }
    .mobilebanner{
        display: block;
    }

    .mobilebanner{
        width: 100% !important;
    }

    .d_h2{
        font-size: 23px;
        line-height: 32px;
    }

    .troubleReason{
        padding-top: 35px;
        margin-top: 40px;
        padding-bottom: 40px;
    }

    .troubleReason .condiv{
        gap: 10px;
        margin-top: 20px;
    }

    .troubleReason .condiv .carddiv{
        width: calc(100%/2 - 5px);
    }

    .troubleReason .condiv .carddiv .whitediv{
        width: 85%;
        height: 70px;
        border-radius: 7px;
        padding-top: 11px;
        margin-top: -24px;
    }

    .troubleReason .condiv .carddiv .whitediv p{
        font-size: 10px;
        line-height: 14px;
        margin-top: 6px;
    }

    .troubleReason .condiv .carddiv .whitediv span{
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .troubleReason .condiv .carddiv01 .whitediv p{
        margin-top: 10px;
    }

    .surgery_section_image_skincare{
        padding: 0 !important;
    }

    .surgery_section_image_skincare{
        background-image: url(/img/sub/skin_skincare/mobile/surgery_section_image_skincare.png) !important;
        background-size: cover !important;
        padding-bottom: 430px !important;
        padding-top: 40px !important;
        margin-bottom: 40px !important;
    }

    #surgery1 .surgery_section_text p .hidden-lg, #surgery1 .surgery_section_text p .hidden-md{
        display: block !important;
    }


    .solutionSection .condiv{
        margin-top: 25px;
    }

    .solutionSection .condiv .carddiv{
        width: 100%;
    }

    .solutionSection .condiv .carddiv .graybox{
        padding: 40px 30px;
    }

    .solutionSection .condiv .carddiv .sol-img{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .solutionSection .condiv .carddiv .graybox{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .solutionSection .condiv .carddiv .graybox .num{
        font-size: 12px;
    }

    .solutionSection .condiv .carddiv .graybox h4{
        font-size: 16px;
    }

    .solutionSection .condiv .carddiv .graybox ul li p{
        font-size: 13px;
    }

    .solutionSection .condiv .carddiv .graybox ul li img{
        width: 13px;
    }


    .solutionSection {
        padding-bottom: 50px;
    }

    .bestSection{
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .bestSection .condiv .carddiv{
        width: 100%;
        height: 188px;
        padding: 40px 15px;
        border-radius: 7px;
    }

    .bestSection .condiv .carddiv01{
        background-image: url("/img/sub/skin_skincare/mobile/best-carddiv01.png");
    }
    .bestSection .condiv .carddiv02{
        background-image: url("/img/sub/skin_skincare/mobile/best-carddiv02.png");
    }
    .bestSection .condiv .carddiv03{
        background-image: url("/img/sub/skin_skincare/mobile/best-carddiv03.png");
    }


    .bestSection .condiv .carddiv .num{
        font-size: 12px;
    }
    .bestSection .condiv .carddiv h4{
        font-size: 16px;
        line-height: 23px;
        margin-top: 6px;
    }

    .bestSection .condiv .carddiv ul li p{
        font-size: 11px;
    }

    .bestSection .condiv .carddiv ul{
        margin-top: 18px;
    }
    .bestSection .condiv .carddiv ul li{
        margin-top: 11px;
    }
    .bestSection .condiv .carddiv ul li img{
        width: 10px;
    }

    .bestSectionGreen .condiv .carddiv{
        padding-top: 32px !important;
    }

    #surgery21{
        padding-top: 40px !important;
    }

    .surgery_section_text h1{
        font-size: 23px !important;
    }
    .surgery_section_text h1 .mobile_show{
        display: none !important;
    }

    .at-html .at-wrapper .at-body .page-wrap .surgery_wrap .surgery_section_text h1 .mobile_show{
        display: none !important;
    }

    #surgery21.type11 .surgery_section_content li h1{
        font-size: 16px;
        font-weight: 500;
    }
    #surgery21 .surgery_section_content li p{
        font-size: 13px;
        line-height: 19px;
    }

    #surgery21{
        padding-bottom: 40px !important;
    }

    .surgery_faq{
        margin-bottom: 0 !important;
    }
    .surgery_youtube{
        margin-top: 0 !important;
    }

    .hidden-xs{
        display: block !important;
    }
}