@charset "utf-8";
/* 치료 안내 카테고리 */


/* 공통 요소 */
.intro{
    background-image: url(/img/spine/treatment/tre-intro.jpg);
}

/* philosophy */
.philosophy{
    padding-bottom: 0;
}
.philosophy .title strong{
    font-size: 4.2rem;
}
.philosophy .title p{
    color: var(--black);
}
.philosophy .img_box{
    position: relative;
    margin-top: 10rem;
    width: 100%; 
    height: 54rem;
    background-image: url(/img/spine/treatment/philosophy.jpg);
    background-repeat: no-repeat;
    background-position: 46% top;
    background-size: cover;
}
.philosophy .img_box img{
    position: absolute;
    top: -17%;
    right: 10%;
    height: 24rem;
    object-fit: contain;
    animation: bingbing 17s linear infinite;
}
@keyframes bingbing{
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}


/* 척추관절통증 */
/* summary */
.summary{
    padding-top: 14rem;
}
.summary .wrap{
    display: flex;
    justify-content: space-between;
    gap: 12rem;
}
.summary .wrap > img{
    width: 40%;
    object-fit: cover;
    border-radius: 2.4rem;
}
.summary .text_box{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 6rem;
}
.summary .text_box img{
    width: 3.5rem;
    object-fit: contain;
}
.summary .text_box strong{
    margin-top: 1.8rem;
    line-height: 1.55;
}
.summary .text_box h4{
    margin-top: 6rem;
    font-weight: 700;
    color: var(--main2);
}
.summary .text_box p{
    margin-top: 1.2rem;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #555;
}


/* description */
.description{
    background: #292929;
    padding: 14rem 0;
}
.description .wrap{
    display: flex;
    flex-direction: column;
    max-width: 1216px;
}
.description .title h3{
    font-size: 3.2rem;
    line-height: 1.56;
    color: #fff;
}
.description .wrap > img{
    margin-left: 20%;
    margin-top: 12rem;
    width: 65%;
    object-fit: contain;
    align-self: center;
}
.description .text_box{
    margin-top: 7rem;
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border-radius: 1.6rem;
    border: 1px solid var(--main1);
    padding: 6rem 8rem;
    display: flex;
    justify-content: space-between;
}
.description .text_box .l_box{
    flex-shrink: 0;
}
.description .text_box .l_box b{
    font-weight: 600;
    font-size: 2.8rem;
    line-height: 1.4;
    color: var(--main1);
}
.description .text_box .l_box p{
    margin-top: .8rem;
    font-family: 'Noto Serif KR', serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: #7D7D7D;
}
.description .text_box .r_box{
    width: 520px;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.description .text_box .r_box div{
    display: flex;
    align-items: center;
}
.description .text_box .r_box div img{
    width: 2.6rem;
    object-fit: contain;
}
.description .text_box .r_box div h5{
    font-weight: 300;
    margin-left: .8rem;
    color: #EAEAEA;
}


/* solution */
.solution .wrap{
    display: flex;
    justify-content: space-between;
}
.solution .title strong{
    font-size: 4.2rem;
}
.solution .title strong span{
    color: var(--main2);
}
.solution .title .p_box p{
    font-size: 1.8rem;
}
.solution .title .p_box p.b{
    font-weight: 700;
    color: var(--black);
}
.solution .img_box{
    width: 42%;
}
.solution .img_box > img{
    width: 100%;
    object-fit: contain;
    border-radius: 1.2rem;
    background: #000;
}
.solution .img_box div{
    margin-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
}
.solution .img_box div img{
    width: calc(50% - .6rem);
    object-fit: contain;
    border-radius: 1.2rem;
}


/* heal_process */
.heal_process .title strong{
    margin-top: 2.4rem;
    font-size: 4.2rem;
    color: var(--main2);
}
.heal_process .container{
    margin-top: 10rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12rem;
}
.heal_process .container > div{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4.8rem;
}
.heal_process .container > div .num{
    width: fit-content;
    margin-right: auto;
    display: flex;
    align-items: flex-end;
    color: var(--main2);
    flex-shrink: 0;
}
.heal_process .container > div .num b{
    font-weight: 700;
    font-family: "Cormorant Garamond", serif;
    font-size: 2.4rem;
}
.heal_process .container > div .num b span{
    font-weight: 700;
    font-family: 'Noto Serif KR', serif;
    font-size: 2.1rem;
}
.heal_process .container > div .text_box{
    width: 38%;
    display: flex;
    flex-direction: column;
}
.heal_process .container > div .text_box h4{
    font-weight: 600;
    color: var(--main2);
}
.heal_process .container > div .text_box .p_box{
    margin-top: 1.2rem;
}
.heal_process .container > div .text_box .p_box p{
    font-size: 1.8rem;
}
.heal_process .container > div img{
    width: 35%;
    object-fit: contain;
}




/* 수술 후 재활 */
/* int-body */
.int-body{
    padding: 18rem 0;
    background: url(/img/spine/treatment/reh-back.jpg) no-repeat;
    background-size: cover;
    background-position: 46% center;
}
.int-body .title strong{
    margin-top: 2.4rem;
}
.int-body .title .p_box p{
    font-size: clamp(14px, 1.8rem, 18px);
}

/* age */
.age{
    background: #FAFAF8;
}
.age.c2{
    background: #fff;
}
.age .container{
    margin-top: 10rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 2.4rem;
}
.age .container div{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.age .container div b{
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #fff;
    background: var(--main2);
    display: block;
    width: 100%;
    border-radius: 100px;
    padding: .6rem;
}
.age .container div img{
    margin-top: 3.6rem;
    width: 100%;
    object-fit: contain;
    border-radius: 1.2rem;
}
.age .container div p{
    font-weight: 400;
    margin-top: 2rem;
    font-size: clamp(12px, 1.4vw, 22px);
    line-height: 1.45;
    letter-spacing: -0.01em;
}
.age.c2 .container div b{
    background: #96908A;
}
.age.c2 .container div{
    padding: 2rem 0;
}
.age.c2 .container div.important{
    background: var(--main2);
    border-radius: 2rem;
    padding: 2rem;
}
.age.c2 .container div.important b{
    background: var(--main1);
}
.age.c2 .container div.important p{
    color: #fff;
    font-weight: 300;
}

/* reh_process */
.reh_process{
    background: var(--main1);
}
.reh_process .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reh_process .title{
    margin-bottom: 8rem;
}
.reh_process .title b{
    color: #555;
}
.reh_process img{
    width: 100%;
    max-width: 1216px;
    object-fit: contain;
}
.reh_process img.m{
    display: none;
    max-width: 420px;
}



/* 교통사고 후유증 */
/* choice */
.choice{
    padding: 10rem 0 28rem;
}
.choice .title span{
    color: var(--main2);
}
.choice .img_box{
    margin: 8rem auto 0;
    width: 100%;
    max-width: 1214px;
    display: flex;
    justify-content: space-between;
    gap: 2.4rem;
}
.choice .img_box img{
    width: calc(50% - 1.2rem);
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: .8rem;
    box-shadow: 0 0 1.2rem rgba(0, 0, 0, .16);
}

/* acc_point */
.acc_point{
    padding: 0;
    background: var(--ivory);
}
.acc_point .top_title{
    position: relative;
    width: 100%;
    background: var(--main2);
    padding: 8rem 0;
}
.acc_point .top_title::after{
    content: '';
    width: 40%;
    height: 9rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 99%);
    background: url(/img/spine/treatment/acc_deco.svg) no-repeat;
    background-size: contain;
    background-position: top center;
}
.acc_point .top_title h2{
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-size: clamp(22px, 3.6vw, 52px);
}
.acc_point .container{
    padding: 18rem 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}
.acc_point .container div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rem;
    background: #fff;
    border-radius: 2.4rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}
.acc_point .container div img{
    object-fit: contain;
}
.acc_point .container div img.text{
    width: 504px;
    max-width: 50%;
}
.acc_point .container div img.img{
    width: 404px;
    max-width: 38%;
    border-radius: 2.4rem;
}



/* 체형 교정 */
/* table */
.table{
    background: #F6F5F2;
}
.table .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.table .title h3{
    margin-top: 2.4rem;
}
.table img{
    margin-top: 7rem;
    width: 100%;
    object-fit: contain;
    max-width: 1004px;
}

/* philosophy */
.philosophy .img_box{
    background-image: url(/img/spine/treatment/philosophy.jpg);
}



/* 다이어트 */
/* philosophy */
.philosophy.c2{
    background: #FAFAF8;
}
.philosophy.c2 .wrap{
    padding-bottom: 8rem;
}
.philosophy.c2 .img_box{
    background-image: url(/img/spine/treatment/diet.jpg);
}

/* diet */
.diet .wrap{
    padding: 0 4%;
    display: flex;
    justify-content: space-between;
    gap: 12%;
}
.diet .title strong.min{
    margin-top: 2.4rem;
    font-size: 3.8rem;
    line-height: 1.65;
}
.diet img{
    width: 45%;
    object-fit: contain;
}
.diet .text_box{
    flex: 1;
    padding-top: 6rem;
}
.diet .text_box p{
    font-size: 1.8rem;
}

/* diet-process-title */
.diet-process-title{
    padding: 18rem 0 0;
}
.diet-process-title .wrap{
    border-bottom: .5px solid #e4e4e4;
    padding-bottom: 8rem;
}



@media (min-width: 1920px) {

}
@media (max-width: 1440px) {
    /* 척추 관절 통증 */
    .summary{
        padding-top: 8rem;
    }
    .summary .wrap{
        flex-direction: column;
        gap: 0;
    }
    .summary .wrap > img {
        width: 100%;
        max-width: 480px;
    }
    .solution .wrap{
        flex-direction: column;
        justify-content: flex-start;
        gap: 6rem;
    }
    .solution .img_box{
        width: 100%;
        max-width: 640px;
    }

    /* 교통사고 후유증 */
    .acc_point .container div{
        padding: 6rem;
    }

    /* 체형 교정 */
    .philosophy .img_box{
        height: 46rem;
    }

    /* 다이어트 */
    .diet .wrap{
        padding: 0;
        gap: 8%;
    }
    .diet-process-title{
        padding: 16rem 0 0;
    }
}
@media (max-width: 1024px) {
    /* 척추 관절 통증 */
    .description .wrap > img {
        margin-top: 8rem;
    }
    .description .text_box {
        margin-top: 6rem;
        padding: 4.8rem;
    }
    .solution .title strong {
        font-size: 3.6rem;
    }
    .heal_process .container{
        margin-top: 8rem;
        gap: 8rem;
    }
    .heal_process .container > div{
        flex-direction: column;
        justify-content: flex-start;
        gap: 2.8rem;
    }
    .heal_process .container > div .text_box {
        width: 100%;
    }
    .heal_process .container > div img {
        width: 100%;
    }

    /* 교통사고 후유증 */
    .choice {
        padding: 0 0 16rem;
    }
    .acc_point .container {
        padding: 12rem 0;
        gap: 4.8rem;
    }
    .age .container{
        margin-top: 8rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 5rem;
    }
    .age.c2 .container {
        row-gap: 3.6rem;
    }
    .age.c2 .container div.important{
        grid-column: span 2;
    }

    /* 체형 교정 */
   .table img{
        margin-top: 4.8rem;
    }
    .philosophy .title p{
        display: block;
        padding-right: 8rem;
    }
    .philosophy .title p br{
        display: none;
    }
    .philosophy .img_box{
        height: 44rem;
    }
    .philosophy .img_box img{
        top: -13.5%;
        height: 20rem;
    }
    .philosophy .title strong{
        font-size: 3.6rem;
    }
    .philosophy .title strong br{
        display: none;
    }

    /* 다이어트 */
    .philosophy.c2 .wrap {
        padding-bottom: 0;
    }
    .diet .wrap{
        flex-direction: column-reverse;
        justify-content: flex-start;
        gap: 8rem;
    }
    .diet .text_box{
        padding-top: 0;
    }
    .diet img{
        width: 100%;
        max-width: 380px;
    }
}
@media (max-width: 768px) {
    /* 척추 관절 재활 */
    .summary .text_box strong br{
        display: none;
    }
    .description .wrap > img {
        margin-left: 5%;
        width: 85%;
    }
    .description .text_box {
        flex-direction: column;
        justify-content: flex-start;
        gap: 4.8rem;
        padding: 4rem;
    }
    .description .text_box .l_box b br{
        display: none;
    }
    .description .text_box .r_box {
        width: 100%;
        max-width: none;
        gap: 1.4rem;
    }

    /* 수술 후 재활 */
    .age .container{
        margin-top: 6rem;
        gap: 1.2rem;
        row-gap: 4rem;
    }
    .age .container div b{
        font-size: 16px;
    }
    .age .container div img{
        margin-top: 2rem;
    }
    .age .container div p{
        margin-top: 2rem;
    }
    .reh_process img.pc{
        display: none;
    }
    .reh_process img.m{
        display: block;
    }
    
    /* 교통사고 후유증 */
    .choice {
        padding: 0 0 14rem;
    }
    .choice .img_box{
        margin: 8rem auto 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4rem;
    }
    .choice .img_box img{
        width: 100%;
    }
    .acc_point .top_title {
        padding: 6rem 0;
    }
    .acc_point .container div{
        padding: 6rem 4.8rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4rem;
    }
    .acc_point .container div img.text{
        width: 85%;
        max-width: none;
    }
    .acc_point .container div img.img{
        width: 100%;
        max-width: none;
    }

    /* 체형 교정 */
   .table .title h3 br{
        display: none;
    }
    .philosophy .title p{
        padding-right: 4rem;
    }
    .philosophy .img_box{
        height: 42rem;
    }
    .philosophy .img_box img{
        top: -12%;
        height: 17rem;
    }
    .philosophy .title strong{
        font-size: 3.4rem;
    }

    /* 다이어트 */
    .diet-process-title{
        padding: 14rem 0 0;
    } 
}
@media (max-width: 480px) {
    /* 척추 관절 재활 */
    .summary .text_box p br{
        display: none;
    }
    .description .wrap > img {
        margin-top: 7rem;
        margin-left: 0;
        width: 90%;
    }
    .description .text_box {
        gap: 3.6rem;
        padding: 2.8rem;
    }
    .description .text_box .r_box {
        gap: 1rem;
    }

    /* 수술 후 재활 */
    .int-body .title .p_box p br{
        display: none;
    }
    .age .container div p br{
        display: none;
    }
    .reh_process .title {
        margin-bottom: 6rem;
    }

    /* 교통사고 후유증 */
    .acc_point .top_title h2 br{
        display: none;
    }

    /* 체형 교정 */
    .philosophy .title p{
        padding-right: 0;
    }
    .philosophy .img_box{
        height: 34rem;
    }
    .philosophy .img_box img{
        top: -17%;
        margin-right: -3%;
        height: 15rem;
    }
}