/* Core responsive skeleton loaded after the desktop stylesheet. */

img,
video,
iframe,
object,
embed {
    max-width: 100%;
}

video,
iframe {
    height: auto;
}

html,
body {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

@media screen and (max-width: 1320px) {
    html,
    body,
    .header,
    .page-service,
    .service-main {
        min-width: 0 !important;
        max-width: 100%;
    }

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .page-service,
    .service-main {
        overflow-x: hidden !important;
    }
}

@media screen and (max-width: 1280px) {
    #app,
    .banner,
    .main,
    .footer {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 14px;
        line-height: 1.6;
    }

    .wp,
    .wp1,
    .wp2,
    .wp3,
    .wp4,
    .wp5,
    .footer > .wp3 {
        width: 100%;
        max-width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    .g-tit01 h1,
    .g-tit01 h2 {
        max-width: 100%;
    }

    .g-tit01 .g-home-title {
        font-size: 38px;
        line-height: 1.28;
    }

    .g-tit01 .g-code-title-line {
        font-size: 44px;
    }

    .g-tit01 .g-code-title-stack .g-code-cn {
        font-size: 70px;
    }

    .g-tit01 .g-code-title-stack .g-code-en {
        font-size: 48px;
    }

    .m-products .top .info .left,
    .m-products .top .info .right,
    .fd-t .left,
    .fd-t .right {
        float: none;
    }

    .g-more,
    .g-more-1,
    .row-a1 .g-more {
        width: min(100%, 260px);
        height: 58px;
        line-height: 56px;
    }

    .g-more span,
    .g-more-1 span,
    .row-a1 .g-more span {
        font-size: 18px;
        line-height: 56px;
    }

    .g-btn-contact,
    .g-btn-contact.g-btn-contact-sumaart,
    .g-btn-contact.g-btn-contact-sumaart.is-expanded,
    .g-btn-contact.g-btn-contact-sumaart.is-collapsed {
        width: min(100%, 720px);
        max-width: 100%;
        height: 132px;
        max-height: none;
        padding-left: 48px;
        padding-right: 48px;
        font-size: 50px;
        line-height: 1;
        border-width: 5px;
    }

    .products-list-1,
    .news-all-grid,
    .news-related-grid,
    .service-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-all-card-large {
        grid-column: span 1;
    }

    .ul-listb2 {
        margin-left: 0;
        margin-right: 0;
    }

    .ul-list5 {
        max-width: 100%;
    }

    .m-news .slick-service,
    .slick-service {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
    }

    .news-detail-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-detail-side {
        position: static;
    }

    .footer > .wp3 {
        padding-left: 32px;
        padding-right: 32px;
    }

    .fd-t .left,
    .fd-t .right {
        width: 100%;
    }

    .fd-t .right {
        margin-top: 32px;
    }

    .fd-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 48px;
    }

    .fd-nav li,
    .fd-t .right .fd-nav li {
        float: none;
        width: auto;
        min-width: 0;
        margin-left: 0;
    }

    .fd-nav .sub.nowrap dd {
        white-space: normal;
    }

    .fd-big-word-text {
        max-width: 100%;
        letter-spacing: 0;
        white-space: normal;
        transform: none;
        -webkit-transform: none;
    }

    .fd-link dt,
    .fd-link dd,
    .fd-link dd a {
        float: none;
    }
}

@media screen and (min-width: 801px) and (max-width: 1280px) {
    .header {
        line-height: 72px;
    }

    .header .wp3 {
        display: block;
        max-width: 1920px;
        padding-left: clamp(32px, 4.6875vw, 60px);
        padding-right: clamp(32px, 4.6875vw, 60px);
    }

    .header .logo {
        float: left;
    }

    .header .hd-right {
        float: right;
    }

    .header .hdr {
        display: block;
        min-width: 0;
        text-align: center;
    }

    .header .nav {
        display: inline-block;
        white-space: nowrap;
    }

    .header .nav li {
        margin-left: clamp(18px, 2.5vw, 32px);
        margin-right: clamp(18px, 2.5vw, 32px);
    }

    .header .nav .v1 {
        font-size: 14px;
        padding: 0;
    }

    .header .g-contact-btn {
        height: 38px;
        padding-left: 16px;
        padding-right: 48px;
        font-size: 13px;
    }

    .header .g-contact-btn-icon {
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 800px) {
    .wp,
    .wp1,
    .wp2,
    .wp3,
    .wp4,
    .wp5,
    .footer > .wp3 {
        padding-left: 22px;
        padding-right: 22px;
    }

    .header,
    .bd1 .header,
    .header.fixed,
    .header.hd-bg {
        line-height: 64px;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
    }

    .header .wp3 {
        height: 64px;
        padding-left: 18px;
        padding-right: 18px;
        position: relative;
    }

    .logo {
        float: none;
    }

    .logo img {
        height: 14px;
    }

    .header .logo .img1 {
        display: none;
    }

    .header .logo .img2 {
        display: inline-block;
        filter: none;
    }

    .hd-right {
        float: none;
        position: absolute;
        right: 72px;
        top: 50%;
        line-height: 1;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }

    .g-contact-btn {
        height: 34px;
        padding: 0 42px 0 14px;
        font-size: 12px;
    }

    .g-contact-btn-icon {
        right: 3px;
        width: 28px;
        height: 28px;
    }

    .g-tit01 h1,
    .g-tit01 h2 {
        margin-left: 0;
    }

    .g-tit01 .g-home-title,
    .g-tit01 .g-code-title {
        padding-left: 0;
    }

    .g-tit01 .g-home-title {
        font-size: 31px;
    }

    .g-tit01 .g-home-title::before,
    .g-tit01 .g-code-title::before {
        width: 44px;
        height: 44px;
        left: -10px;
        top: -6px;
    }

    .g-tit01 .g-code-title-line {
        font-size: 34px;
    }

    .g-tit01 .g-code-title-stack .g-code-cn {
        font-size: 46px;
        line-height: 1.04;
        white-space: normal;
    }

    .g-tit01 .g-code-title-stack .g-code-en {
        margin-top: 4px;
        font-size: 30px;
    }

    .products-list-1,
    .news-all-grid,
    .news-related-grid,
    .service-card-grid,
    .service-process-list {
        grid-template-columns: 1fr;
    }

    .row-a1 .products-list .jvds-work-meta {
        display: block;
    }

    .row-a1 .products-list .tit,
    .row-a1 .products-list .desc {
        max-width: 100%;
        text-align: left;
        white-space: normal;
    }

    .ul-list2 li,
    .ul-listb1 li,
    .ul-iconb1 li,
    .ul-iconb2 li {
        width: 100%;
        float: none;
    }

    .g-tab-con .g-tit01,
    .g-tab-con .right {
        float: none;
    }

    .g-tab-con .right {
        margin-top: 34px;
    }

    .ul-list5 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 12px;
        padding-top: 0;
        overflow: visible;
        text-align: center;
        white-space: normal;
    }

    .ul-list5 a {
        display: flex;
        min-width: 0;
        margin: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ul-list5 li {
        width: 100%;
        text-align: center;
    }

    .ul-list5 .icon {
        margin-left: auto;
        margin-right: auto;
    }

    .ul-list5 .tit {
        display: block;
        text-align: center;
    }

    .m-news .slick-service,
    .slick-service {
        display: grid;
        grid-template-columns: 1fr;
        gap: 34px;
        cursor: auto;
    }

    .m-news .slick-service .item,
    .slick-service .item,
    .slick-service-1 .item {
        width: 100%;
        max-width: 100%;
        float: none;
        flex: none;
        padding: 0;
        margin-bottom: 0;
    }

    .slick-service .txt,
    .slick-service-1 .txt {
        height: auto;
    }

    .g-btn-contact,
    .g-btn-contact.g-btn-contact-sumaart,
    .g-btn-contact.g-btn-contact-sumaart.is-expanded,
    .g-btn-contact.g-btn-contact-sumaart.is-collapsed {
        height: 88px;
        padding: 0 24px;
        gap: 16px;
        font-size: 30px;
        border-width: 4px;
        white-space: normal;
    }

    .g-btn-contact-sumaart .g-btn-contact-text {
        flex-wrap: wrap;
    }

    .g-btn-contact-sumaart .g-btn-contact-arrow {
        width: 42px;
        height: 42px;
    }

    .fd-nav {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .fd-nav .sub dd {
        font-size: 14px;
        line-height: 28px;
    }

    .fd-copy {
        display: flex;
        flex-direction: column;
        gap: 8px;
        line-height: 1.6;
    }
}

@media screen and (max-width: 390px) {
    .wp,
    .wp1,
    .wp2,
    .wp3,
    .wp4,
    .wp5,
    .footer > .wp3 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header .wp3 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hd-right {
        display: none;
    }

    .g-tit01 .g-home-title {
        font-size: 26px;
    }

    .g-tit01 .g-code-title-line {
        font-size: 30px;
    }

    .g-tit01 .g-code-title-stack .g-code-cn {
        font-size: 38px;
    }

    .g-tit01 .g-code-title-stack .g-code-en {
        font-size: 25px;
    }

    .g-btn-contact,
    .g-btn-contact.g-btn-contact-sumaart,
    .g-btn-contact.g-btn-contact-sumaart.is-expanded,
    .g-btn-contact.g-btn-contact-sumaart.is-collapsed {
        height: 74px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 24px;
        border-width: 3px;
    }

    .g-btn-contact-sumaart .g-btn-contact-arrow {
        width: 34px;
        height: 34px;
    }

    .ul-list5 a {
        min-width: 0;
    }

    .fd-logo a img {
        height: 24px;
    }
}