@media (max-width: 1799.9px){
  .ttl.xlg{font-size: 180px}
  .ttl.lg{font-size: 90px}
  .main-about .right{padding: 40px 30px 30px 45px}
  .main-about .right .ttl-box{margin-bottom: 40px;}
  .main-process .item{padding: 30px 15px}
}
@media (max-width: 1499.9px){
  .ttl.xlg{font-size: 155px}
  .ttl.lg{font-size: 72px}
  .ttl.md{font-size: 48px}
  #toTop{width: 40px; height: 40px}
  .slider-nav .icon-prev, .slider-nav .icon-next{width: 40px; height: 40px}
  .products-slider-nav{width: 90px; align-self: flex-end;}
  .main-slider-nav{width: calc(100% - 40px); left: 20px}
  .contact-form-section .form-box{width: 45%}
  .footer .wrapper{padding: 80px 80px 80px 40px;}
}
@media (max-width: 1299.9px){
  .ttl.xlg{font-size: 145px}
  .header-menu{margin-right: 30px}
  .main-about .left{width: 100%;}
  .main-about .right{width: 100%; order: -1; margin-bottom: 8px}
  .main-process .item{width: calc(50% - 4px); margin-bottom: 8px}
  .contact-form-section .wrapper{padding: 80px 30px}
}
@media (max-width: 1199.9px){
  .header{background: rgba(255, 255, 255, 0.9);}
  .header-menu{
    display: none;
    height: calc(100vh - 58px);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    flex-direction: column;
    margin: 0;
    padding: 25% 15px;
  }
  .header-menu a{display: block; width: 200px; text-align: center; margin: 0 auto 40px;}
  .header-menu .btn{margin-top: 80px}
  .burger-menu{display: block; margin-left: 15px;}
  .header .btn{margin-left: auto;}
  .ttl.xlg{font-size: 120px}
  .ttl.lg{font-size: 60px}
  .ttl.md{font-size: 36px}
  .ttl.sm{font-size: 24px}
  .main-advan .item{width: 50%; justify-content: flex-start; margin-bottom: 30px}
  .main-lines .wrapper{padding: 60px 30px 60px 60px}
  .footer .wrapper{padding: 60px 30px;}
}
@media screen and (max-width: 1024px){
  body{font-size: 20px}
  .ttl.xlg{font-size: 80px}
  .ttl.marker{padding-left: 20px}
  .main-about .right .ttl.sm{margin-left: -20px}
  .main-goal .wrapper{padding-left: 20px}
  .main-lines .ttl.marker{margin-left: -20px}
  .input, .label{font-size: 24px}
} 
@media (max-width: 991.9px){
  .contact-form-section .ttl-box{width: 100%; margin-bottom: 40px}
  .contact-form-section .ttl-box .ttl{margin-bottom: 30px}
  .contact-form-section .form-box{width: 100%}
  .footer .address{width: 100%;}
}
@media (max-width: 767.9px){
  .mb120{margin-bottom: 80px;}
  .mb80{margin-bottom: 50px;}
  .mb60{margin-bottom: 40px;}
  .mb40{margin-bottom: 30px;}
  .mb25{margin-bottom: 20px;}
  .mb20{margin-bottom: 15px;}
  .mb15{margin-bottom: 12px;}
  .ttl.lg {font-size: 48px;}
  .padding-section{padding: 60px 0}
  .main-goal .wrapper img{width: 100%}
  .main-goal .wrapper .text{width: 100%; max-width: 100%; margin-top: 40px}
  .main-process .item{width: 100%}
  .main-lines .ttl-box .text{width: 100%;max-width: 100%; margin-top: 20px}
  .footer-menu{width: 100%; margin: 40px 0}
}

@media (max-width: 576px){
  .mb120{margin-bottom: 60px;}
  .mb80{margin-bottom: 50px;}
  .mb60{margin-bottom: 40px;}
  .mb40{margin-bottom: 30px;}
  .mb25{margin-bottom: 15px;}
  .mb20{margin-bottom: 10px;}
  .mb15{margin-bottom: 8px;}
  .padding-section{padding: 40px 0}
  .main-advan .item{width: calc(50% - 5px); flex-direction: column; border-radius: 12px;
  background: #EEF3EF; text-align: center; padding: 14px; margin-bottom: 10px}
  .main-advan .ico{margin: 0 auto 12px;}
  .contact-form-section .ttl-box .text:before{margin-right: 15px}
  .footer .wrapper{padding: 60px 15px;}
  .products-slider-nav{display: none;}
  .main-slider .img-wrap {padding-bottom: 90%}
}
@media (max-width: 430px){
  .ttl.xlg{font-size: 72px}
  .ttl.lg{font-size: 36px}
  .ttl.md{font-size: 30px}
  .ttl.sm{font-size: 22px}
  .main-intro{border-radius: 0 0 30px 30px}
  .swiper-pagination-bullet{width: 10px; height: 10px; margin: 0 6px}
  .swiper-pagination-bullet-active{width: 30px}
  .main-about .left, .main-about .right{border-radius: 30px;}
  .main-about .right {padding: 60px 15px 60px 30px}
  .main-goal .wrapper:after{border-radius: 0 0 30px 30px}
  .main-slider .img-wrap{border-radius: 30px}
  .main-lines .wrapper {border-radius: 30px; padding: 60px 15px 60px 30px}
  .contact-form-section .wrapper{border-radius: 30px; padding: 60px 15px}
  .footer .wrapper:after{border-radius: 0 0 30px 30px;}
}
@media screen and (max-width: 365px){
  body{font-size: 18px}
  .ttl.xlg{font-size: 60px}
  .ttl.lg{font-size: 32px}
  .ttl.sm{font-size: 20px}
  .ttl.marker{padding-left: 18px}
  .input, .label{font-size: 20px}
  .swiper-pagination-bullet{width: 8px; height: 8px; margin: 0 4px}
  .swiper-pagination-bullet-active{width: 8px}
  .main-about .right img{width: 100%; margin-top: 15px}
  .header-menu{padding: 15% 15px}
  .header-menu a{margin-bottom: 30px}
}