@charset "utf-8";

@media (min-width: 1921px) {
    /* 성인 교정 페이지 */
    .treatment .treatment_slide button{
        top: 33.5%;
    }
}



@media (max-width: 1440px) {
    /* 성장기 교정 페이지 */
    .growth {
        padding: 18rem 0 15rem;
    }
    .growth .card .t_name{
        height: 5.4rem;
    }
    .growth .card .t_name button{
        font-size: 2.05rem;
    }
    .growth .card .card_contents article .l_box{
        padding: 0 8rem;
    }
    .growth .card .card_contents article .l_box br{
        display: none;
    }
    .xray .container article .r_box{
        padding: 0 5rem;
    }
    .benefit .container div p br{
        display: none;
    }
    .benefit{
        padding: 15rem 0 18rem;
    }  
    .case{
        padding: 0 0 18rem;
    }

    /* 성인 교정 페이지 */
    .safe{
        padding: 18rem 0 15rem;
    }
    .explain .container{
        gap: 6rem;
    }
    .explain .container>img{
        width: 45%;
    }
    .explain .container .r_box{
        justify-content: center;
        padding: 6rem 0;
    }
    .explain .container .r_box h3{
        margin-top: 0;
    }
    .explain .container .r_box .checklist{
        margin-top: 2rem;
    }
    .explain .container .r_box p{
        margin-top: 3rem;
    }
    .explain .container .r_box p br{
        display: none;
    }
    .explain{
        padding: 15rem 0 18rem;
    }

    /* 부분 교정 페이지 */
    .part{
        padding: 18rem 0 15rem;
    }
    .part .container img{
        width: 45%;
    }
    .part .container .r_box{
        padding: 8rem 5rem;
    }
    .part .container .r_box p br{
        display: none;
    }
    .need .container{
        gap: 2rem;
    }
    .need .container div h3{
        font-size: 1.9rem;
    }
    .need .container div h3:first-child{
        margin-bottom: 1.3rem;
    }
    .benefits .container>div:nth-child(2) .text_box{
        padding-left: 6rem;
    }
}



@media (max-width: 1024px) {
    /* 성장기 교정 페이지 */
    .growth .card .t_name{
        height: 7.5rem;
    }
    .growth .card .t_name button{
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .growth .card .card_contents{
        height: 40rem;
    }
    .growth .card .card_contents article .l_box{
        padding: 0 4.5rem;
    }
    .xray .container article{
        height: 42rem;
    }
    .xray .container article .r_box{
        padding: 0 4.5rem;
    }
    .xray .container article .r_box p:nth-of-type(1) {
        margin-top: 3.5rem;
    }
    .xray .container article .r_box p br{
        display: none;
    }
    .benefit .container{
        flex-direction: column;
        justify-content: flex-start;
        gap: 5rem;
    }  
    .benefit .container div{
        flex: 1;
        flex-direction: row;
        justify-content: flex-start;
    }  
    .benefit .container div img{
        width: 20%;
    }  
    .benefit .container div h3{
        width: 122px;
        margin: 0 0 0 5rem;
        flex-shrink: 0;
        text-align: center;
        box-sizing: content-box;
        padding-right: 5rem;
        border-right: 1px solid #d9d9d9;
    }   
    .benefit .container div p{
        margin-top: 0;
        padding-left: 2.5rem;
        text-align: left;
    }  

    /* 성인 교정 페이지 */
    .safe .container{
        width: 100%;
        gap: 2rem;
    }
    .safe .container div b{
        font-size: 8.8rem;
    }
    .safe .container div strong{
        margin-top: 3.2rem;
        font-size: 2.2rem;
    }
    .explain .container{
        gap: 4rem;
    }
    .explain .container>img{
        width: 42%;
    }

    /* 부분 교정 페이지 */
    .part .container{
        margin: 0 auto;
        width: 90%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .part .container img{
        margin-left: 0;
        width: 100%;
        max-height: 300px;
        max-width: none;
    }
    .part .container .r_box{
        padding: 7rem 5rem;
    }
    .need .container{
        grid-template-columns: repeat(2, 1fr);
    }
    .need .container div{
        max-width: 220px;
    }
    .need .container div h3 {
        font-size: 2rem;
    }
    .need .container div:nth-child(odd) { 
        justify-self: end; 
    }
    .benefits .container>div{
        gap: 6rem;
    }
    .benefits .container>div img{
        width: 38%;
    }
    .benefits .container>div:nth-child(2) .text_box{
        padding-left: 3rem;
    }
    .benefits .container>div .text_box p br{
        display: none;
    }
}



@media (max-width: 768px) {
    /* 성장기 교정 페이지 */
    .growth{
        padding: 15rem 0;
    }
    .growth .card .t_name{
        height: 7rem;
    }
    .growth .card .t_name button{
        font-size: 1.8rem;
    }
    .growth .card .card_contents{
        height: 505px;
    }
    .growth .card .card_contents article{
        flex-direction: column-reverse;
        height: 100%;
    }
    .growth .card .card_contents article .l_box{
        width: 100%;
        height: auto;
        max-width: none;
        padding: 5rem 4rem;
    }
    .growth .card .card_contents article .l_box p:first-of-type{
        margin-top: 4rem;
    }
    .growth .card .card_contents article img{
        width: 100%;
        height: 30rem;
        max-width: none;
    }
    .xray .container{
        gap: 5.5rem;
    }
    .xray .container article{
        width: 85%;
        min-width: 400px;
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .xray .container article img{
        width: 100%;
        max-width: none;
        max-height: 500px;
    }
    .xray .container article .r_box{
        width: 100%;
        padding: 4rem 3rem;
    }
    .xray .container article .r_box p:nth-of-type(1) {
        margin-top: 3rem;
    }
    .benefit .container div img{
        width: 13.5%;
    }  
    .benefit .container div h3{
        width: 108px;
        font-size: 19px;
        margin-left: 2rem;
        padding-right: 2rem;
    }   
    .benefit{
        padding: 15rem 0;
    }  
    .case{
        padding: 0 0 15rem;
    }

    /* 성인 교정 페이지 */
    .safe{
        padding: 15rem 0;
    }
    .safe .container{
        gap: 1rem;
    }
    .safe .container div b{
        margin-top: 1rem;
        font-size: 7rem;
    }
    .safe .container div strong{
        margin-top: 2.2rem;
        font-size: 2rem;
    }
    .treatment .treatment_slide .swiper-slide .text_box{
        width: 87.5%;
    }
    .explain .container{
        flex-direction: column;
        justify-content: flex-start;
    }
    .explain .container>img{
        width: 100%;
        max-width: none;
    }
    .explain .container .r_box{
        padding: 0;
    }
    .explain .container .r_box .checklist div{
        font-size: 15.5px;
    }
    .explain .container .r_box .checklist div img{
        width: 18px;
    }
    .explain{
        padding: 15rem 0;
    }

    /* 부분 교정 페이지 */
    .part{
        padding: 15rem 0;
    }
    .part .container{
        width: 95%;
    }
    .need .title p{
        padding: 0 2.5rem;
    }
    .need .title p br{
        display: none;
    }
    .need .container{
        width: 100%;
    }
    .benefits .container>div{
        flex-direction: column;
        justify-content: flex-start;
        gap: 2rem;
    }
    .benefits .container>div:nth-child(2){
        flex-direction: column;
    }
    .benefits .container>div img{
        width: 65%;
    }
    .benefits .container>div:nth-child(2) .text_box{
        padding-left: 0;
    }
    .benefits .container>div .text_box{
        padding: 0 1rem;
    }
    .benefits .container>div .text_box p:first-of-type{
        margin: 2rem 0 1rem
    }
}



@media (max-width: 480px) {
    /* 성장기 교정 페이지 */
    .growth{
        padding: 14rem 0;
    }
    .growth .card .t_name{
        height: 7.5rem;
        text-wrap: nowrap;
    }
    .growth .card .t_name button{
        font-size: 13.8px;
    }
    .growth .card .card_contents{
        height: 450px;
    }
    .growth .card .card_contents article img{
        height: 25rem;
    }
    .xray{
        padding: 14rem 0;
    }
    .xray .container article{
        width: 100%;
        min-width: 0;
    }
    .benefit{
        padding: 14rem 0 15rem;
    }  
    .benefit .container {
        gap: 7rem;
    }
    .benefit .container div{
        flex-direction: column;
    }  
    .benefit .container div img{
        width: 40%;
    }
    .benefit .container div h3{
        margin: 0;
        padding: 0;
        border: 0;
        margin-top: 1.4rem;
        font-size: 18px;
    }
    .benefit .container div p{
        width: 80%;
        padding: 0;
        text-align: center;
    }
    .case{
        padding: 0 0 14rem;
    }
    .case .title p{
        padding: 0 1.5rem;
    }
    .case .title p br{
        display: none;
    }

    /* 성인 교정 페이지 */
    .safe{
        padding: 14rem 0;
    }
    .safe .container div{
        border: 2.5px solid var(--main);
        display: flex;
    }
    .safe .container div b{
        margin-top: .8rem;
        font-size: 5rem;
    }
    .safe .container div strong{
        margin-top: 1.6rem;
        font-size: 14px;
    }
    .treatment{
        padding: 14rem 0;
    }
    .treatment .treatment_slide .swiper-slide .text_box{
        width: 91%;
    }
    .treatment .treatment_slide .swiper-slide .text_box i {
        margin-top: 8px;
        font-size: 11px;
    }
    .treatment .treatment_slide button{
        top: 28%;
    }
    .explain{
        padding: 14rem 0 15rem;
    }
    .explain .container .r_box .checklist div{
        font-size: 15px;
    }

    /* 부분 교정 페이지 */
    .part{
        padding: 14rem 0;
    }
    .part .container{
        width: 100%;
    }
    .part .container .r_box{
        padding: 5.5rem 4rem;
    }
    .part .container .r_box h3{
        margin-top: 0;
    }
    .need{
        padding: 14rem 0;
    }
    .need .container div:nth-child(odd){
        justify-self: auto;
    }
    .benefits .container>div img{
        width: 75%;
    }

    /* 재교정 페이지 */
    .m_b{
        margin-bottom: 14rem;
    }
}