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

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

/* ----------------------------- */
.t_div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.t_div p{
    font-size: 20px;
    color: #c8c8c8;
    font-family: 'mon m' !important;
    letter-spacing: 4px !important;
}

.t_div h3{
    font-size: 48px;
    line-height: 60px;
    color: #000;
    font-family: '지마켓 B';
    margin-top: 26px;
    text-align: center;
}

.t_div h3 span{
    font-size: 48px;
    line-height: 60px;
    color: #000;
    font-family: '지마켓 B';
    color: #7c6657 !important;
}

.innerbox{
    max-width: 1312px;
    width: 100%;
    margin: 0 auto;
}



/* ----------------------------- */
.secCont02{
    display: flex;
    align-items: center;
    width: 100%;
    height: 737px;
    background-image: url("/img/sub/stem_skininjection/sec02.jpg");
}

.secCont02 .innerbox{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.secCont02 .innerbox > div > div span{
    font-size: 48px;
    font-family: '지마켓 M' !important;
    color: #000;
}
.secCont02 .innerbox > div > div h2{
    font-family: '지마켓 B';
    font-size: 48px;
    color: #7c6657;
    margin-top: 12px;
}
.secCont02 .innerbox > div p{
    font-size: 28px;
    line-height: 38px;
    color: #2c2c2c;
    margin-top: 34px;
}

/* ----------------------------- */
.secCont03{
    padding: 70px 0;
    background-color: #f8f8f8;
}

.secCont03 .flexbox{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 130px;
    margin-top: 40px;
}

.secCont03 .flexbox > div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.secCont03 .flexbox .div01 p{
    font-size: 24px;
    color: #0c0c0c;
    text-align: center;
}
.secCont03 .flexbox .div01 h5{
    font-size: 30px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-top: 10px;
}

.secCont03 .flexbox .linediv{
    width: 60px;
    height: 4px;
    margin: 20px 0;
    background-color: #6e6e6e;
}

.secCont03 .flexbox .div03 p{
    font-size: 22px;
    line-height: 29px;
    text-align: center;
    color: #000;
}


.secCont03 .flexbox .co01 .div01{
    margin-top: 36px;
}
.secCont03 .flexbox .co02 .div01{
    margin-top: 60px;
}

.secCont03 .flexbox .co01 h5{
    color: #7c6657;
}

.secCont03 .flexbox .co01 .linediv{
    background-color: #7c6657;
}

.secCont03 .flexbox .co01 .div03 p span{
    font-weight: 600;
    color: #7c6657;
}


/* ----------------------------- */

.secCont04{
    padding: 100px 0;
    background-color: #f2f2f2;
}

.secCont04 .flexbox{
    max-width: 1176px;
    width: 100%;
    margin: 0 auto;
    margin-top: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.secCont04 .flexbox > div{
    width: 50%;
    min-height: 536px;
    border-radius: 15px;
    background-color: #fff;
}

.secCont04 .flexbox > div > span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 68px;
    font-size: 30px;
    color: #000;
    font-weight: 500;
}

.secCont04 .flexbox > div.div01{
    border: 3px solid #cccccc;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.secCont04 .flexbox > div.div01 > span{
    background-color: #cccccc;
}

.secCont04 .flexbox > div.div02{
    border: 3px solid #7c6657;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.secCont04 .flexbox > div.div02 > span{
    background-color: #7c6657;
    color: #fff;
}

.secCont04 .flexbox .divbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-top: 26px;
}

.secCont04 .flexbox .divbox > div:nth-child(2){
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 36px;
}

.secCont04 .flexbox .divbox > div:nth-child(2) .linediv{
    width: 510px;
    height: 2px;
    margin: 20px auto;
    background-color: #e1e1e1;
}

.secCont04 .flexbox .divbox > div:nth-child(2) span{
    font-size: 24px;
    font-weight: 500;
    color: #666666;
}
.secCont04 .flexbox .div02 .divbox > div:nth-child(2) span:nth-child(1){
    color: #7c6657;
    font-weight: 600;
}

.secCont04 .flexbox .div02 .divbox > div:nth-child(2) span:nth-child(1) span{
    color: #000;
}

.secCont04 .flexbox .div02 .divbox > div:nth-child(2) span:nth-child(3){
    color: #7c6657;
    font-weight: 600;
}


/* ----------------------------- */
.secCont05{
    display: flex;
    align-items: center;
    width: 100%;
    height: 732px;
    background-image: url("/img/sub/stem_skininjection/sec05.jpg");
}

.secCont05 .innerbox > div > div span{
    font-size: 48px;
    font-family: '지마켓 M' !important;
    color: #ffffff;
}
.secCont05 .innerbox > div > div h2{
    font-family: '지마켓 B';
    font-size: 48px;
    color: #ffe5b8;
    margin-top: 12px;
}
.secCont05 .innerbox > div > div h2 span{
    color: #fff;
}


.secCont05 .innerbox > div p{
    font-size: 28px;
    line-height: 38px;
    color: #ffffff;
    margin-top: 34px;
}

.secCont05 .innerbox > div p span{
    font-weight: 600;
}

/* ----------------------------- */
.secCont06{
    display: flex;
    align-items: center;
    width: 100%;
    height: 732px;
    background-image: url("/img/sub/stem_skininjection/sec06.jpg");
}

.secCont06 .innerbox > div > div span{
    font-size: 36px;
    font-family: '지마켓 M' !important;
    color: #000000;
}
.secCont06 .innerbox > div > div h2{
    font-family: '지마켓 B';
    font-size: 48px;
    color: #7c6657;
    margin-top: 12px;
}
.secCont06 .innerbox > div > div h2 span{
    color: #fff;
}


.secCont06 .innerbox > div p{
    font-size: 28px;
    line-height: 35px;
    color: #0c0c0c;
    margin-top: 26px;
}

.secCont06 .innerbox > div p span{
    font-weight: 600;
}

.secCont06 .innerbox  img{
    margin-top: 50px;
}


/* ----------------------------- */
.secCont07{
    display: flex;
    align-items: center;
    width: 100%;
    height: 730px;
    background-image: url("/img/sub/stem_skininjection/sec07.jpg");
}

.secCont07 .innerbox{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.secCont07 .innerbox > div > div span{
    display: block;
    font-size: 36px;
    font-family: '지마켓 M' !important;
    color: #000;
    text-align: center;
}
.secCont07 .innerbox > div > div h2{
    font-family: '지마켓 B';
    font-size: 48px;
    color: #7c6657;
    margin-top: 12px;
    text-align: center;
}
.secCont07 .innerbox > div p{
    font-size: 28px;
    line-height: 38px;
    color: #2c2c2c;
    margin-top: 34px;
    text-align: center;
}

.secCont07 .innerbox > div p span{
    font-weight: 600;
}


/* ----------------------------- */
.secCont08{
    padding: 100px 0;
}

.secCont08 .p01{
    font-size: 28px;
    margin-top: 30px;
    text-align: center;
    font-weight: 500;
}

.secCont08 ul{
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
    margin-top: 38px;
}

.secCont08 ul li{
    display: flex;
    align-items: center;
}

.secCont08 ul li > div{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.secCont08 ul li .div01,
.secCont08 ul li .div03{
    width: 490px;
}


.secCont08 ul .li01 .div01{
    background-color: #d6cbc2;
    border-top-left-radius: 15px;
}
.secCont08 ul .li01 .div02{
    background-color: #b8a89a;
    border-left:  2px solid #d6cbc2;
    border-right: 2px solid #7c6657;
}
.secCont08 ul .li01 .div03{
    background-color: #7c6657;
    border-top-right-radius: 15px;
    
}

.secCont08 ul li .div01 h4,
.secCont08 ul li .div03 h4{
    font-size: 26px;
    font-weight: 600;
}

.secCont08 ul li .div02 span{
    font-family: 'mon m';
    font-size: 26px;
    color: #fff;
}



.secCont08 ul li .div03 h4{
    color: #fff;
    font-weight: 500;
}


.secCont08 ul li .div02{
    width: calc(100% - 490px*2);
}

.secCont08 ul li p{
    font-size: 22px;

}

.secCont08 ul li .div01 p{
    color: #666666;
    font-weight: 500;
}
.secCont08 ul li .div03 p{
    color: #000000 !important;
    font-weight: 500;
}

.secCont08 ul .reli .div01 p,
.secCont08 ul .reli .div03 p{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-weight: 500;
    width: 90%;
    border-bottom: 1px solid #d3d3d3;
    height: 100%;
}



.secCont08 ul .reli:last-child .div01 p:last-child,
.secCont08 ul .reli:last-child .div02 p:last-child,
.secCont08 ul .reli:last-child .div03 p:last-child{
    border-bottom: none;
    
}

.secCont08 ul .reli .div02{
    background-color: #fbf9f8;
    border-left: 2px solid #d6cbc2;
    border-right: 2px solid #7c6657;
}

.secCont08 ul .reli .div02 p{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c6657;
    font-weight: 600;
    width: 85%;
    border-bottom: 1px solid #e1d5d1;
    height: 100%;
}

.secCont08 ul .reli .div01{
    border-left: 2px solid #d6cbc2;
}
.secCont08 ul .reli .div03{
    border-right: 2px solid #7c6657;
}

.secCont08 ul .reli:last-child .div01{
    border-bottom: 2px solid #d6cbc2;
    border-bottom-left-radius: 15px;
}

.secCont08 ul .reli:last-child .div02{
    border-bottom: 2px solid #b8a89a;
}

.secCont08 ul .reli:last-child .div03{
    border-bottom: 2px solid #7c6657;
    border-bottom-right-radius: 15px;
}



/* ----------------------------- */
.secCont09{
    padding: 80px 0;
    background-color: #f1ebe3; 
}

.secCont09 .t_div p{
    color: #b8a89a;
}

.secCont09 .s_t{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 285px;
    height: 72px;
    padding-bottom: 4px;
    border-radius: 50px;
    background-color: #7c6657;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    margin: 0 auto;
    margin-top: 20px;
}
.secCont09_01{
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

/* ----------------------------- */
.secCont10{
    padding: 80px 0;
    background-color: #f8f8f8;
}

.secCont10 .p01{
    font-size: 28px;
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
}

.progress-steps {
    width: 100%;
    max-width: 1380px;
    margin: 40px auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-family: sans-serif;
    position: relative;
    color: #6A5A4F; /* 글자/선/점 색 (브라운 느낌) */
}

/* 각 스텝 하나 */
.step {
    position: relative;
    text-align: center;
    flex: 1;
    min-width: 0;
}

/* STEP 1, STEP 2 텍스트 */
.step-label {
    font-size: 20px;
    font-weight: 500;
    color: #2c2c2c;
    margin-bottom: 8px;
    white-space: nowrap;
}

/* 점(원) */
.step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #6A5A4F;
    background-color: #f8f8f8;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transition: background-color .3s;
}


/* 활성화된 스텝은 채워진 원 */
.step.active .step-dot {
    background-color: #6A5A4F;
}

/* 선 (각 step 기준 왼쪽으로 뻗는 라인) */
.step-line {
    position: absolute;
    top: 36px; /* 점 가운데 높이랑 맞춰주기 */
    left: -45%;
    width: 90%;
    height: 2px;
    background-color: #6A5A4F;
    z-index: 1;
}

/* 첫 번째 스텝은 왼쪽 선 필요 없음 */
.step:first-child .step-line {
    display: none;
}

/* 전체 컨테이너 높이 조금만 */
.progress-steps-wrapper {
    padding: 20px 10px;
}

.secCont10_01{
    display: flex;
    justify-content: center;
}


/* ----------------------- */
@media(max-width:991px){
    .moswiper{
        overflow: hidden;
        background-image: url("/img/sub/stem_skininjection/mobile/moswiper.png");
        background-size: cover;
        background-repeat: no-repeat;
        padding: 40px 0;
    }
    .swiper{
        height: max-content;
        margin-top: 20px;
    }
    .moswiper_title{
        width: 68% !important;
        margin: 0 auto;
    }

    .swiper-slide img{
        opacity: .4;
        transition: all .2s;
    }
    .swiper-slide-active img{
        opacity: 1;
    }

    /* 초기 상태: prev 슬라이드 숨김 */
    .swiper.swiper-initialized:not(.show-prev) .swiper-slide-prev {
        opacity: 0;
        pointer-events: none;
    }

    /* 나중에는 다시 보이도록 */
    .swiper.show-prev .swiper-slide-prev {
        opacity: 1;
        pointer-events: auto;
        transition: opacity .3s;
    }


}