@media screen and (max-width: 1550px) {
  .container {max-width: 100%; padding: 0 20px; overflow: hidden;}
  .visual .kv-item ul li .child-box {width: calc(100% - 400px); height: 250px;}
  .visual .kv-item ul li .child-box .txt {font-size: 35px;}
  .visual .kv-item ul li .child-box:after {right: -90px; width: 190px; height: 190px; font-size: 14px; padding-right: 0; text-indent: -73px;}
  .visual .kv-item ul li:nth-child(even) .child-box:after {padding-left: 0; text-indent: 26px; left: -90px;}

  .tit-box .tit {font-size: 60px; margin-bottom: 50px;}
  .tit-box .sub {font-size: 28px;}
  .tit-box {margin-bottom: 100px;}

  .swiper-arrow {width: 350px; height: 55px; padding: 0 20px; margin: 40px auto 0;}
  .swiper-arrow button {padding-bottom: 0;}
  .swiper-arrow button img {width: 100px;}
  .swiper-arrow .swiper-pagination1 div {padding-bottom: 7px; font-size: 24px;}

  .sec {padding: 150px 0 150px;}

  .visual .txt-box .tit {font-size: 250px;}

  .top-btn {top: auto; bottom: 20px; right: 20px;}
  .top-btn a {width: 40px;}
}

@media screen and (max-width: 900px) {
  footer {margin-top: 50px; padding: 50px 0 80px;}
  footer ul li {padding-right: 0;}
  footer ul {flex-flow: column; align-items: flex-start; justify-content: flex-start; gap: 50px;}
  footer ul li .tit {margin-bottom: 20px; font-size: 16px;}
  footer ul li .address {margin-bottom: 25px; font-size: 14px;}
  footer ul li .link-box a {font-size: 14px;}
  footer ul li .copyright {margin-top: 20px;}

  header {top: 50px;}
  header .logo {width: 150px;}
  .visual {padding-top: 150px; padding-bottom: 100px;}
  .visual .txt-box .tit {font-size: 150px;}

  .visual .kv-item ul {gap: 50px;}
  .visual .kv-item ul li .child-box {width: calc(100% - 100px); height: 100px;}
  .visual .kv-item ul li .child-box:before {width: 4px;}
  .visual .kv-item ul li .child-box:after {right: -20px; width: 50px; height: 50px; font-size: 14px; text-indent: -73px;}
  .visual .kv-item ul li:nth-child(even) .child-box:after {left: -20px; text-indent: -9999px;}
  .visual .kv-item ul li .child-box .txt {font-size: 24px;}

  .sec {padding: 50px 0;}
  .tit-box .tit {margin-bottom: 20px; font-size: 30px;}
  .tit-box .sub {font-size: 18px; word-break: keep-all;}
  .tit-box {margin-bottom: 50px;}
  .img-list {padding-bottom: 123px; margin: 50px 0;}
  .swiper-arrow {width: 250px; height: 45px; margin: 0 auto;}
  .swiper-arrow button img {width: 50px;}
  .slide-area {height: 350px;}
  .swiper-arrow .swiper-pagination1 div {padding-bottom: 15px; font-size: 16px;}
}

@media screen and (max-width: 599px) {
  header {top: 20px;}
  header .logo {width: 100px;}
  
  .visual {padding-top: 100px; padding-bottom: 50px;}
  .visual .txt-box .tit {font-size: 100px;}
  .visual .kv-item ul li .child-box {gap: 10px; height: 70px;}
  .visual .kv-item ul li .child-box .txt {font-size: 16px;}
  .visual .kv-item ul {gap: 20px;}

  .tit-box .sub {word-break: keep-all;}

  .img-list {flex-flow: column; padding-bottom: 50px; margin-bottom: 0;}
  .img-list img {width: 100%;}
  .img-list img:nth-child(even) {top: 0;}

  .tit-box .sub {font-size: 14px;}

  .slide-area {height: auto;}
  .slide-area .swiper-wrapper .swiper-slide.swiper-slide-active img {transform: scale(1);}
  .slide-area .swiper-wrapper .swiper-slide {height: 100%;}
  .swiper-arrow {height: 35px; margin-top: 20px;;}

  .steps-list ul li {width: 100%;}
  .steps-list ul li .child-box .txt-box {flex-flow: column-reverse; gap: 10px; width: 100%; text-align: center;}
  .steps-list ul li .child-box .txt-box:before {display: none;}

  .explan-img {flex-flow: column;}
  .explan-img img {width: 100%; height: auto;}
}

@media screen and (max-width: 342px) {
  footer ul li .link-box a,footer ul li .address,footer ul li dl,footer ul li .copyright {font-size: 12px;}
}