@media (max-width: 1680px) {
  .service-sec7 .txt-wrap:nth-of-type(1) {
    top: 51%;
    left: 2%;
  }

  .service-sec7 .txt-wrap:nth-of-type(2) {
    top: 31%;
    left: 13%;
  }

  .service-sec7 .txt-wrap:nth-of-type(3) {
    text-align: center;
    top: 11%;
    left: 43.5%;
  }

  .service-sec7 .txt-wrap:nth-of-type(4) {
    top: 31%;
    left: 75%;
    z-index: 1;
  }

  .service-sec7 .txt-wrap:nth-of-type(5) {
    top: 53%;
    left: 87%;
  }
}

@media (max-width: 1380px) {
  .solution-sec1 .card-wrap {
    margin: 0 5%;
  }
}

@media (max-width: 1280px) {
  :root {
    --font-size-16: clamp(14px, 16* var(--custom-size), 16px);
    --font-size-18: clamp(14px, 18* var(--custom-size), 18px);
    --font-size-20: clamp(15px, 20* var(--custom-size), 20px);
    --font-size-22: clamp(16px, 22* var(--custom-size), 22px);
    --font-size-24: clamp(17px, 24* var(--custom-size), 24px);
    --font-size-26: clamp(18px, 26* var(--custom-size), 26px);
    --font-size-28: clamp(22px, 28* var(--custom-size), 28px);
    --font-size-30: clamp(24px, 30* var(--custom-size), 30px);
  }
}

@media (max-width: 768px) {
  :root {
    --main-page-margin: 20px;
    --main-margin: 20px;
    --header-h: 80px;
  }

  .card-wrap {
    --column: 1 !important;
  }

  .index-sec1 .swiper-slide-active {
    width: 60% !important;
    aspect-ratio: 15 / 16;
  }

  .aboutus-sec4 .card-wrap {
    height: auto;
  }

  .banner .txt-wrap .intro-sub {
    max-width: 80%;
  }

  .sec-top .txt {
    max-width: 100%;
  }

  .header-nav,
  .header-r .search {
    display: none;
  }

  .btn-large-nav-expand {
    display: inherit;
    flex-direction: column;
    cursor: pointer;
  }

  .btn-large-nav-expand i {
    display: block;
    width: 24px;
    height: 2px;
    flex: 0 0 auto;
    background: #333;
    margin-bottom: 4px;
    transition: .5s cubic-bezier(.15, 1, .336, 1)
  }

  .btn-large-nav-expand i:last-of-type {
    margin-bottom: 0
  }

  .btn-large-nav-expand.active i {
    transition: .4s cubic-bezier(.1, .84, .2, 1.4)
  }

  .btn-large-nav-expand.active i:first-of-type {
    transform: translateY(300%) rotate(45deg)
  }

  .btn-large-nav-expand.active i:nth-of-type(2) {
    transform: scaleX(0)
  }

  .btn-large-nav-expand.active i:nth-of-type(3) {
    transform: translateY(-300%) rotate(-45deg)
  }

  .mobile-nav {
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  }

  .mobile-nav .ph_l {
    width: 81%;
    height: 100%;
    position: fixed;
    top: calc(var(--header-h) - 1px);
    left: -81%;
    z-index: 1120;
    overflow: hidden;
    background: #fff;
    color: rgba(255, 255, 255, .6);
    transition: left .3s;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .08);
  }

  .mobile-nav .ph_r {
    display: block;
    width: 40%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    position: fixed;
    right: -40%;
    top: calc(var(--header-h) - 1px);
    z-index: 1101;
    transition: right .3s;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .08);
  }

  .ph_l ul li {
    border-bottom: 1px solid #ccc;
    position: relative;
  }

  .ph_l ul li a {
    padding: 20px;
    color: #000;
    cursor: pointer;
  }

  .ph_l ul li a svg {
    transition: .3s;
    transform: rotate(-90deg);
  }

  .ph_l ul li a.active svg {
    transform: rotate(0deg);
  }

  .ph_l ul .mobile-nav_secont {
    margin-left: 5px;
  }

  .ph_l ul .mobile-nav_secont a {
    padding: 10px;
  }

  .btn-head-nav-toggle {
    display: block;
    margin-left: 10px;
  }

  .mob-nav-sec {
    margin-bottom: 20px;
    display: none;
  }

  .ph_l ul li .mob-nav-sec a {
    display: block;
    padding: 5px 20px 5px 40px;
  }

  .ph_l ul li .mob-nav-sec .mob-nav-a {
    display: flex;
  }

  .mob-nav-th {
    padding-left: 20px;
    font-size: 14px;
  }

  body.scrolled {
    --header-h: 60px;
  }

  .banner {
    height: 40vh;
  }

  .index-sec1 .swiper {
    padding-bottom: 60px;
  }

  .index-sec1 .swiper-slide-active {
    width: 80% !important;
  }

  .swiper-custom-button-wrap {
    transform: unset;
    left: 0;
  }

  .sec-top-center .font {
    width: 100%;
  }

  .index-sec2 .card-wrap {
    --column: 2;
  }

  .main-l-page {
    margin-right: var(--main-page-margin);
  }

  .sec-cont-lr {
    flex-direction: column;
  }

  .index-sec4 .sec-top,
  .index-sec4 .container,
  .area-wrap .pic,
  .area-wrap .txt,
  .service-sec5 .txt,
  .service-sec4 .area-wrap {
    width: 100% !important;
  }

  .index-sec4 .container {
    margin-right: 0;
    margin-top: 20px;
  }

  footer .footer-nav {
    display: none;
  }

  .footer-wrap,
  .copyright {
    flex-direction: column;
  }

  .footer-wrap .logo img {
    width: 100px;
  }

  .company-info,
  .index-sec4 .learn-more {
    margin-top: 30px;
  }

  .learn-more >span {
    display: none;
  }

  .copyright .txt {
    max-width: 100%;
  }

  .copyright .privacy {
    margin-top: 20px;
  }

  .service-sec2 {
    background-image: unset !important;
    background-color: rgba(180, 149, 69, 1);
  }

  .area-wrap,
  .area-wrap,
  .area-wrap {
    width: 100%;
    flex-direction: column;
  }

  .service-sec5 .item {
    padding-left: 30px;
  }

  .aboutus-sec3 .intro-lay {
    font-size: 14px;
  }

  .aboutus-sec5 .container .card-wrap {
    --column: 3 !important;
  }

  .index-sec2 .card-wrap .icon {
    height: auto;
  }

  .service-sec7 {
    display: none;
  }

  .service-sec8 {
    display: block;
  }

  .service-sec8 .item .title {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .service-sec8 .item .title::after {
    content: unset;
  }

  .service-sec8 .item .title img {
    width: 20px;
  }


  .solution-sec1 .card-wrap {
    margin: 0;
  }

  .service-sec2:not(.service-sec6) .card-wrap {
    --gap: 100px;
  }

  .service-sec2 .item:not(:last-child)::after {
    /* content: unset; */
    top: unset;
    width: 50px;
    bottom: calc(var(--gap) / -2);
    left: 50%;
    transform: translate(-50%, 50%) rotate(90deg);
  }

  .service-sec6 .item:not(:last-child)::after {
    content: unset;
  }

  .index-sec3 .swiper {
    padding-bottom: 12%;
    margin-top: 5%;
  }
}