@media screen and (max-width:1700px) {
    .main .main-banner .main-title::after{
        display: none;
    }
}
@media screen and (max-width:1400px) {
    /* main */
    .main .main-banner .main-title h2{
        font-size: 5.6rem;
    }


    .main .main-banner .main-title p{
        font-size: 2rem;
    }


    .section-title h2{
        font-size: 5.6rem;
    }


    .section-title p{
        font-size: 2rem;
    }
    .main-intro .intro-wrap .intro-item{
        font-size: 1.8rem;
    }
    .main-intro::before, .main-approach::before{
        display: none;
    }
    .sub-product .product-list{
        grid-template-columns: repeat(3, 1fr);
        gap: 4rem;
    }
}


@media screen and (max-width:1199px) {
    .main-intro .intro-wrap{
        grid-template-columns: 1fr 1fr;
    }
    .main-intro .intro-wrap .intro-item img{
        display: block;
        width: 100%;
        max-height: 300px;
        object-fit: cover;
    }
    .main-approach .approach-wrap .swiper-slide{
        flex-direction: column;
    }
    .main-approach .approach-wrap .swiper-slide img{
        max-height: 30rem;
        object-fit: cover;
        width: 100%;
    }
    .main-approach .approach-wrap .swiper-slide .approach-txt{
        width: 100%;
        padding: 3rem 0;
    }
    .main .sec_box h3{
        font-size: 3.2rem;
    }
    .main-product .product_list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .main-product .product_list img{
        margin: 0 auto;
    }
    .sub-directions .map .map-txt h3{
        margin-bottom: 2rem;
    }
    .sub-directions .map .map-txt .map-wrap{
        gap: 1rem;
        flex-direction: column;
    }
    .swiper-slide{
        width: 25%;
    }
    .sub-about{
        padding-top: 8rem;
    }
    .sub .sub-tab ul li a{
        font-size: 2rem;
        padding: 1.6rem 0;
    }
    .sub .sub-title h2{
        font-size: 4rem;
    }
    .about-sec .about-content p{
        font-size: 2rem;
    }
    .about-sec .about-content p br{
        display: none;
    }
    .about-sec .history{
        padding: 4rem;
    }
    .about-sec .history .his-tit h3{
        font-size: 4rem;
    }
    .about-sec .history .history-content .year{
        font-size: 3.2rem;
    }
    .about-sec .history .history-content{
        padding-left: 6rem;
    }
    .about-sec .history .history-content li{
        font-size: 2rem;
    }
    .about-sec .history .history-content::before{
        left: 1.7rem;
    }
    .about-sec .history .history-item{
        margin-bottom: 4rem;
    }
    .about-sec .history .history-content .year::before{
        width: 1.4rem;
        height: 1.4rem;
        left: -6rem;
    }
    .about-sec::after{
        height: 50rem;
    }
    .certified-sec .certified-list{
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    .location-sec .location-text p{
        font-size: 2rem;
    }
    .location-sec .location-text p br{
        display: none;
    }
    .root_daum_roughmap .wrap_map{
        height: 400px !important;
    }


.process-steps {
    grid-template-columns: repeat(2, 1fr); 
  }

  .process-step:nth-child(1) { order: 1; }
  .process-step:nth-child(2) { order: 2; }
  .process-step:nth-child(3) { order: 3; }
  .process-step:nth-child(4) { order: 4; }
  .process-step:nth-child(5) { order: 5; }
}



@media screen and (max-width:899px) {

    /* main */
    .main .main-banner{
        padding-top: 60px;
    }
    
    .main .main-banner .main-title{
        padding: 25rem 4rem;
        height: calc(100vh - 100px);
    }


    .main .main-banner .main-title h2{
        font-size:4rem;
    }


    .main .main-banner .main-title p{
        font-size: 1.8rem;
    }
    
    .main-intro{
        padding: 8rem 0;
    }
    .main-product{
        padding: 8rem 0;
    }
    .main-certified{
        padding: 8rem 0;
    }


    .main-intro .intro-wrap img{
        height: 200px;
        object-fit: cover;
    }
    .main-approach{
        padding: 8rem 0;
    }
    .main .sec_box h3{
        font-size: 2.8rem;
    }



    .section-title h2{
        font-size: 4rem;
        line-height: 1.2;
    }
    .section-title p{
        font-size: 1.8rem;
    }
    .main-intro .intro-wrap{
        grid-template-columns: 1fr;
    }
    .main-intro .intro-wrap .intro-item{
        font-size: 1.6rem;
    }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
    .swiper-button-next, .swiper-rtl .swiper-button-prev{
        font-size: 3.2rem;
    }
    .swiper-button-next:after, .swiper-button-prev:after{
        font-size: 3.2rem;
    }


    .main-approach .approach-wrap{
        padding: 0;
    }
    .swiper-pagination-fraction{
        left: 0;
        bottom: -2rem;
    }


    /* subpage */
    .sub{
        padding: 8rem 0;
    }
    .sub .sub-title h2{
        font-size: 3.2rem;
        line-height: 1.2;
    }
    .sub .sub-title p{
        font-size: 1.8rem;
    }
    .sub-about .about-txt{
        flex-direction: column;
    }
    .sub-about .about-txt img,
    .sub-about .about-txt p{
        width: 100%;
    }
    .sub-overview .overview-wrap .overview-text li ul{
        font-size: 2rem;
    }
    .sub-overview .overview-wrap .overview-text .overview-tit{
        min-width: 14rem;
    }
    .sub-overview .overview-wrap .overview-banner{
        padding: 8rem 0;
    }
    .sub-overview .overview-wrap .overview-banner h3{
        font-size: 2.4rem;
    }
    .sub-overview .overview-wrap .overview-text .desc{
        margin-left: 2rem;
    }
    .root_daum_roughmap .wrap_map{
        height: 22rem !important;
    }
    .swiper-slide{
        width: 33%;
    }
    .about-sec .history{
        padding: 3rem;
    }
    .about-sec .history .his-tit h3{
        font-size: 3.2rem;
    }
    .about-sec .history .history-content .year{
        font-size: 2rem;
    }
    .about-sec .history .history-content li{
        font-size: 1.6rem;
        text-indent: 1.2rem;
    }
    .about-sec .history .history-content .year::before{
        width: 1rem;
        height: 1rem;
        border: 0.8rem solid #0099C8;
        left: -4rem;
    }
    .about-sec .history .history-content{
        padding-left: 4rem;
    }
    .about-sec .history .history-content::before{
        left: 1.3rem;
    }
    .about-sec .history .history-content li::before{
        top: 9px;
        transform: none;
    }
    .about-sec::after{
        height: 40rem;
    }
    .location-sec .location-content{
        flex-direction: column;
        gap: 3rem;
    }
    .location-sec .location-text p{
        margin-bottom: 2rem;
    }
    .sub-product .product-list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .sub-product .product-list{gap:4rem}


 .process-steps {
    grid-template-columns: 1fr;
gap: 4rem;
  }


  .process-step {
    padding-left: 6rem;
  }


  .process-step::before {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 2rem;
  }


  .process-step .step-title {
    font-size: 2.2rem;
  }


  .process-step .step-list li {
    font-size: 1.8rem;
  }
.sub .sub-tab .product_tab li{width:100%}
}



@media screen and (max-width:599px) {
    /* main */
    .main .main-banner .main-title{
        padding: 14rem 2rem;
    }
    .main .main-banner .main-title h2{
        font-size:3.2rem;
    }
    .main .main-banner .main-title h2 br{
        display: none;
    }


    .main .main-banner .main-title p{
        font-size: 1.4rem;
    }
    .main .main-banner .main-title p br{
        display: none;
    }
    .main .main-banner .btn{
        margin-top: 20px;
    }
    .main .main-banner .btn a{
        font-size: 1.4rem;
        padding: 8px 14px;
    }
    .main .main-banner .btn a::after{
        width: 18px;
        height: 18px;
        background-size: cover;
        top: 4px;
        margin-left: 6px;
    }
    .main .sec_box h3{
        font-size: 2.4rem;
        margin-top: 20px;
    }
    .main-product .product_list{
        grid-template-columns: repeat(1, 1fr);
    }
    .sec_box .more{
        margin-top: 20px;
    }
    .sec_box .more a{
        padding: 0.6rem 2rem;
        font-size: 1.4rem;
    }


    .section-title h2{
        font-size: 3.2rem;
    }
    .section-title p{
        font-size: 1.6rem;
        margin: 2rem 0 4rem;
    }


    .main-intro .intro-wrap .intro-item{
        flex-direction: column-reverse;
    }
    .main-intro .intro-wrap .intro-item p{
        margin-top: 1rem;
        text-align: left;
    }
    .main-intro .intro-wrap .intro-item img{
        max-height: 20rem;
    }


    .main-approach{
        padding: 8rem 0;
    }
    .main-approach .approach-wrap{
        margin-top: 0;
    }
    .main-approach .approach-wrap .swiper-slide .approach-txt h3{
        font-size: 2.2rem;
    }
    .main-approach .approach-wrap .swiper-slide .approach-txt p{
        font-size: 1.6rem;
    }
    .main-approach .approach-wrap .swiper-slide .approach-txt{
        padding: 2rem 0;
    }
    .main-product .product_list .product_item p{
        font-size: 1.6rem;
    }
    .main-intro{
        padding: 5rem 0;
    }
    .main-product{
        padding: 5rem 0;
    }
    .main-certified{
        padding: 5rem 0;
    }


    .root_daum_roughmap .wrap_map{
        max-height: 26rem;
    }
    .main-certified .certified-wrap{
        padding: 0;
    }
    .swiper-button-next:after, .swiper-button-prev:after{
        display: none;
    }
    .main-certified .certified-wrap{
        margin-top: 20px;
    }


    /* subpage */
    .sub .sub-title h2{
        font-size: 2.4rem;
    }
    .sub .sub-title p{
        font-size: 1.6rem;
    }
    .sub-about .about-txt{
        gap: 2rem;
    }
    .sub-about .about-txt img{
        max-height: 28rem;
    }
    .sub-overview .overview-wrap .overview-text li ul{
        font-size: 1.6rem;
        flex-direction: column;
    }
    .sub-overview .overview-wrap .overview-text .overview-tit{
        min-width: 9rem;
        padding-bottom: 1rem;
    }
    .sub-overview .overview-wrap .overview-text .desc{
        margin-left: 0;
        border-top: 0;
        padding-top: 0;
    }
    .sub-overview .overview-wrap .overview-text li:last-child .overview-tit{
        border-bottom: 0;
    }
    .sub-overview .overview-wrap .overview-banner{
        padding: 4rem 0;
        margin-top: 2rem;
    }
    .sub-overview .overview-wrap .overview-banner h3{
        font-size: 2rem;
        padding: 0 2rem;
    }


    .sub-directions .map .map-txt{
        padding: 2rem 0;
    }
    .sub-directions .map .map-txt h3{
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .sub-directions .map .map-txt .map-wrap{
        gap:0
    }
    .sub-directions .map .map-txt .txt-item{
        font-size: 1.6rem;
    }


    .section-title h2::after{
        width: 8px;
        height: 8px;
        bottom: 2px;
        margin-left: 0.5rem;
    }


    .sub .sub-title h2::after{
        width: 8px;
        height: 8px;
        bottom: 2px;
        margin-left: 0.5rem;
    }
    .sub .sub-title.contact-form{
    text-align: left;
    }
    .swiper-slide{
        width: 50%;
    }
    .sub{
        padding: 5rem 0;
    }
    .sub_bnn .inner{
        padding-top: 0
    }
    .sub_bnn .title{
        padding: 4rem 0;
    }
    .sub .sub-tab ul{
        gap: 0.4rem;
    }
    .sub .sub-tab ul li a{
        font-size: 1.6rem;
        padding: 1rem 0;
    }
    .about-sec .about-content p{
        font-size: 1.6rem;
    }
    .about-sec .history{
        margin-top: 4rem;
        padding: 1.4rem;
    }
    .about-sec .history .his-tit h3{
        font-size: 2rem;
    }
    .about-sec .history .history-content{
        padding-left: 2.4rem;
    }
    .about-sec .history .history-content .year{
        font-size: 1.8rem;
    }
    .about-sec .history .history-content li{
        font-size: 1.4rem;
    }
    .about-sec .history .history-content .year::before{
        width: 0.6rem;
        height: 0.6rem;
        border: 0.6rem solid #0099C8;
        left: -2.4rem;
    }
    .about-sec .history .history-content::before{
        left: 0.9rem;
    }
    .about-sec .history .history-item{
        margin-bottom: 2rem;
    }
    .about-sec::after{
        height: 30rem;
    }
    .certified-sec .certified-list{
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .location-sec .location-text p{
        font-size: 1.6rem;
    }
    .location-sec .location-text .location-icon li{
        font-size: 1.6rem;
        text-indent: 2.6rem;
    }
    .location-sec .location-text .location-icon li::before{
        width: 2rem;
        height: 2rem;
    }
    .sub-product .product-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 4rem;
    }
    .sub-product .product-list .tit{
        margin: 1rem 0;
        font-size: 1.6rem;
    }
    .sub-product .product-list .btn{
        font-size: 1.4rem;
    }
    .pop_wrap .layer img{
        padding: 1rem;
    }
    .pop_wrap .layer .tit{
        font-size: 1.6rem;
    }
}