@media screen and (max-width: 1400px) {
    .about-us-page .history .connecting-line {
        width: calc(var(--ratio-size) * 300);
    }
}

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

    :root,
    body {
        --header-height: 80px;
        --type-area: 60px;
    }

    header .logo {
        height: 40px;
    }

    .about-us-page .history .connecting-line {
        width: calc(var(--ratio-size) * 200);
    }
}

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

    :root,
    body {
        --type-area: 15px;
        --header-height: 50px;
        --text-bigger-size: 18px;
        --text-big-size: 16px;
        --text-normal-size: 14px;
        --text-small-size: 14px;
    }

    header .logo {
        height: 30px;
    }

    header nav {
        display: none;
    }

    header .function {
        margin-left: auto;
    }

    header .phone-menu {
        display: flex;
    }

    header .function .lang a {
        border: none;
    }

    footer .nav-list {
        display: none;
    }

    .inside-banner-container {
        height: auto;
    }

    .switch-nav-list-container {
        gap: 40px;
    }

    .index-page .index-swiper {
        height: auto;
        padding-top: var(--header-height);
    }

    .index-page .index-banner-swiper .swiper-slide {
        height: auto;
    }

    .index-page .index-swiper>.swiper-wrapper {
        display: block;
    }

    .index-page .index-banner-swiper .swiper-slide .text-content {
        padding: 50px 0;
    }

    .index-page .index-banner-swiper .index-banner-pagination {
        bottom: 10px;
    }

    .index-page .about-bc-screen .top-part {
        padding-bottom: 40px;
    }

    .index-page .about-bc-screen .screen-bg img {
        width: auto;
        max-width: 80%;
        max-height: 80%;
    }

    .index-page .about-bc-screen .list .item .text {
        visibility: visible;
        opacity: 1;
    }

    .index-page .advantage-screen {
        padding: 0 var(--type-area);
        padding-top: 30px;
        padding-bottom: 60px;
    }

    .index-page .advantage-screen .advantage-main-content .main-content {
        margin: 0 auto;
    }

    /* .index-page .advantage-screen .advantage-main-content {
        display: block;
    }

    .index-page .advantage-screen .advantage-main-content .main-content {
        width: 50%;
    }

    .index-page .advantage-screen .advantage-main-content .list-item {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 0 var(--type-area);
    }

    .index-page .advantage-screen .advantage-main-content .list-item .item {
        width: calc((100% - 10px) / 2);
    }

    .index-page .advantage-screen .advantage-main-content .main-content {
        margin: 20px auto;
    }

    .index-page .advantage-screen .advantage-main-content .list-item .pic {
        width: min(100%, calc(100rem / 16));
        height: min(100%, calc(100rem / 16));
    } */

    .index-page .advantage-screen .advantage-main-content .list-item {
        flex: 1;
    }

    .index-page .case-screen {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .index-page .case-screen .index-case-swiper {
        padding: 0 var(--type-area);
    }

    .index-page .case-screen .index-case-swiper .swiper-slide {
        flex-direction: column;
        height: auto;
        padding: 0;
        box-shadow: 0 1px 3px #c1c1c1;
    }

    .index-page .case-screen .index-case-swiper .swiper-slide .bg {
        position: relative;
        aspect-ratio: 16 / 9;
    }

    .index-page .case-screen .index-case-swiper .swiper-slide .text-content {
        width: 100%;
    }

    .about-us-page .overview .description-content {
        flex-direction: column;
    }

    .about-us-page .overview .description-content .video-content {
        width: 100%;
    }

    .about-us-page .overview .mission-list {
        gap: 0;
        flex-direction: column;
    }

    .about-us-page .overview .mission-list .item,
    .about-us-page .overview .mission-list .item:nth-child(1),
    .about-us-page .overview .mission-list .item:nth-child(2),
    .about-us-page .overview .mission-list .item:nth-child(3) {
        margin-top: 20px;
    }

    .about-us-page .overview .mission-list .item {
        height: auto;
        padding-bottom: 20px;
    }

    .index-page .earth-content .core-content,
    .about-us-page .earth-content .core-content {
        left: -25%;
        width: 150%;
        height: auto;
    }

    .index-page .ecology-screen {
        padding-top: 50px;
    }

    .index-page .ecology-screen,
    .about-us-page .ecology {
        flex-direction: column;
        padding-bottom: 0;
    }

    .index-page .ecology-content,
    .index-page .ecology-content ul,
    .about-us-page .ecology-content,
    .about-us-page .ecology-content ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .index-page .ecology-content ul li,
    .about-us-page .ecology-content ul li {
        width: 50%;
    }

    .ecology-content ul li:nth-child(2) {
        border-top: 1px solid rgba(255, 255, 255, .3);
    }

    .index-page .ecology-screen .earth-content,
    .about-us-page .ecology .earth-content {
        display: none;
    }

    .index-page .ecology-screen .earth-mobile,
    .about-us-page .ecology .earth-mobile {
        position: relative;
        z-index: 3;
        display: block;
    }

    .index-page .earth-content,
    .about-us-page .earth-content {
        z-index: 2;
    }

    .index-page .earth-content .more-message .ball,
    .about-us-page .earth-content .more-message .ball {
        width: 60px;
        height: 60px;
    }

    .index-page .earth-content .earth-line-content,
    .about-us-page .earth-content .earth-line-content {
        display: none;
        /* width: calc(90vw - 60px);
        height: calc(90vw - 60px); */
    }

    .index-page .earth-content .third-floor,
    .about-us-page .earth-content .third-floor {
        width: calc(90vw - 60px);
        height: calc(90vw - 60px);
    }

    .index-page .earth-content .third-floor>.more-message:nth-child(1),
    .about-us-page .earth-content .third-floor>.more-message:nth-child(1) {
        top: 4%;
        left: 10%;
        transform: translate(-20%, 0);
    }

    .index-page .earth-content .third-floor>.more-message:nth-child(3),
    .about-us-page .earth-content .third-floor>.more-message:nth-child(3) {
        top: 80%;
        left: 10%;
    }

    .about-us-page .history {
        flex-direction: column;
        height: auto;
    }

    .about-us-page .history .left {
        overflow: hidden;
        height: 300px;
        width: 100%;
        background: url('../images/history-bg.jpeg') no-repeat center/cover;
    }

    .about-us-page .history .left .year-swiper .swiper-slide {
        height: 70px;
        padding-left: 20%;
    }

    .about-us-page .history .right {
        width: 100%;
        height: auto;
    }

    .about-us-page .history .right .common-title-effect {
        display: none;
    }

    .about-us-page .history>.common-title-effect {
        display: block;
    }

    .about-us-page .history .right .text ul li::before {
        top: 10px;
    }

    .about-us-page .history .connecting-line {
        display: none;
    }

    .about-us-page .history>.common-title-effect {
        padding: calc(var(--ratio-size) * 100) calc(var(--ratio-size) * 170);
        background-image: linear-gradient(to right, #020A24, #051234 50%);
        background-color: #05082A;
    }

    .about-us-page .history>.common-title-effect .cn-title {
        padding-bottom: calc(var(--ratio-size) * 100);
        color: #fff;
    }

    .about-us-page .history .right .history-swiper {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        padding-top: 0;
    }

    .about-us-page .history .right .text {
        position: relative;
        top: auto;
    }

    .about-us-page .history .right .history-swiper .swiper-slide {
        width: 100%;
        height: auto;
        padding-left: 10px;
        padding-right: 0;
        /* text-align: justify; */
    }

    .about-us-page .history .history-bg {
        display: none;
    }

    .news-page .top-news {
        flex-direction: column;
    }

    .news-page .top-content .select-content {
        right: auto;
        left: 0;
        top: -60px;
        width: 150px;
    }

    .news-page .top-news .pic {
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 16 / 9;
    }

    .news-page .top-news .content {
        width: 100%;
    }

    .news-page .news-list {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .news-page .news-list .news-item {
        width: 100%;
        margin: 0;
    }

    .news-page .news-list .news-item:nth-child(3n + 2) {
        margin: 0;
    }

    .news-page .news-list .news-item .pic {
        height: auto;
        aspect-ratio: 16/ 9;
    }

    .news-page .top-content {
        flex-direction: column;
        justify-content: center;
    }

    .news-page .news-container {
        margin-top: 20px;
    }

    .contact-us-page .contact-us {
        flex-direction: column-reverse;
    }

    .contact-us-page .contact-us .form-content {
        width: 100%;
    }

    .contact-us-page .contact-us .message-list {
        width: 100%;
    }

    .contact-us-page .form-content form .item .verification {
        width: 100%;
    }

    .contact-us-page .form-content form .item .bottom {
        justify-content: center;
    }

    .contact-us-page .form-content form .bottom input {
        flex: 1;
    }

    .contact-us-page .form-content form .item .verification img {
        height: auto;
    }

    .news-detail-page .detail-top {
        padding: 30px 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .news-detail-page .main .detail-content {
        padding: 0 var(--type-area);
    }

    .news-detail-page .main .select-content {
        flex-direction: column;
        padding: 0 var(--type-area);
    }

    .news-detail-page .main .select-content a {
        width: 100%;
    }

    .news-detail-page .main .select-content a.prev-btn {
        border-right: none;
        border-bottom: 1px solid #ccc;
    }

    .news-detail-page .main .select-content a.next-btn {
        padding: 5px 10px;
    }

    .news-detail-page .main .select-content .next-btn .content {
        text-align: left;
    }

    .news-detail-page .main .select-content a .btn {
        display: none;
    }

    .news-detail-page .main .select-content a .title {
        font-size: 18px;
    }

    .case-page .all-case .case-list {
        grid-template-columns: 1fr;
    }

    .case-page .customers .first-floor-logo,
    .case-page .customers .second-floor-logo {
        height: calc(100vw / 960 * 160);
    }

    .case-page .customers .logo-wall .item {
        width: calc(100vw / 960 * 320);
        height: calc(100vw / 960 * 160);
    }

    .service-page .content-main .logo-img {
        display: none;
    }

    .service-page .content-main .main-content {
        display: none;
    }

    .service-page .content-main .mobile-pic {
        display: block;
    }

    .service-page .top-content .title {
        font-size: 20px;
    }

    body .innovate-page {
        padding-bottom: 50px;
    }

    .innovate-page .main-content .content-item .top {
        font-size: max(18px, calc(var(--ratio-size) * 36));
    }

    .innovate-page .main-content .content-item .other-content .item .name {
        font-size: calc(18rem / 16);
    }

    .innovate-page .main-content .content-item .other-content .item .text {
        font-size: calc(16rem / 16);
    }

    .innovate-page .main-content .hover-area {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
    }

    .innovate-page .main-content .content-area {
        margin-top: 20px;
    }

    .innovate-page .main-content .content-item.top-content-item {
        width: calc(100% - var(--ratio-size) * 120);
    }

    .innovate-page .main-content .bottom-content-area {
        flex-direction: column;
        gap: 20px;
    }

    .innovate-page .main-content .bottom-content-area .left-content-item,
    .innovate-page .main-content .bottom-content-area .right-content-item {
        width: auto;
        flex: 1;
    }

    .innovate-page .main-content .bottom-content-area {
        margin-top: 20px;
    }

    .innovate-page .main-content .hover-area.animate {
        animation: mediaBreathAn 2s infinite linear alternate;
    }

    @keyframes mediaBreathAn {
        100% {
            transform: scale(.9);
        }
    }

    .digitization-page .top-area .content-btn {
        padding-bottom: calc(var(--ratio-size) * 350);
    }

    .digitization-page .top-area .switch-pic {
        width: 60%;
        height: auto;
        aspect-ratio: 89 / 53;
    }

    .digitization-page .top-area .circle-bg {
        width: 90%;
        height: auto;
        aspect-ratio: 388 / 177;
    }

    .digitization-page .top-area .content-btn .btn-list {
        width: 90%;
    }

    .digitization-page .top-area .content-btn {
        margin-top: -26%;
    }

    .digitization-page .top-area .content-btn .btn-item p {
        font-size: 10px;
        /* font-size: calc(18rem / 16); */
    }

    .digitization-page .top-area .content-btn .btn-item {
        width: 10%;
    }

    .digitization-page .top-area .content-btn .btn-item .pic {
        width: 100%;
    }

    .digitization-page .top-area .content-btn .btn-item:nth-child(1) {
        top: calc(var(--ratio-size) * -204);
        left: calc(var(--ratio-size) * 100);
    }

    .digitization-page .top-area .content-btn .btn-item:nth-child(2) {
        top: calc(var(--ratio-size) * -114);
        left: calc(var(--ratio-size) * 442);
        /* top: calc(var(--ratio-size) * -97);
        left: calc(var(--ratio-size) * 523); */
    }

    .digitization-page .top-area .content-btn .btn-item:nth-child(3) {
        top: calc(var(--ratio-size) * -89);
        right: calc(var(--ratio-size) * 796);
        /* top: calc(var(--ratio-size) * -101);
        right: calc(var(--ratio-size) * 523); */
    }

    .digitization-page .top-area .content-btn .btn-item:nth-child(4) {
        /* top: calc(var(--ratio-size) * -204);
        right: calc(var(--ratio-size) * 147); */
        top: calc(var(--ratio-size) * -114);
        right: calc(var(--ratio-size) * 465);
    }

    /* .digitization-page .top-area .content-btn .btn-item:nth-child(4) {
        top: calc(var(--ratio-size) * -204);
        right: calc(var(--ratio-size) * 147);
    } */
    .digitization-page .top-area .content-btn .btn-item:nth-child(5) {
        top: calc(var(--ratio-size) * -204);
        right: calc(var(--ratio-size) * 147);
    }

    .digitization-page .content-flow .list {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .digitization-page .content-flow .list .item {
        width: 25%;
        font-size: calc(14rem / 16);
    }

    .digitization-page .content-flow .list .item p {
        /* width: 5em; */
        text-align: center;
    }

    .digitization-page .content-flow .list .item .icon {
        width: 50%;
    }

    .digitization-page .top-area .bottom-title,
    .digitization-page .content-flow .bottom-title {
        width: 100%;
    }

    .digitization-page .top-area .bottom-title p,
    .digitization-page .content-flow .bottom-title p {
        position: relative;
        z-index: 2;
        font-size: calc(20rem / 16);
    }

    .digitization-page .top-area .bottom-title img,
    .digitization-page .content-flow .bottom-title img {
        position: absolute;
        height: 100%;
        object-fit: cover;
    }

    .digitization-page .content-flow .list .arrow {
        width: calc(12.5% - 20px);
    }

    .digitization-page .content-flow .list .arrow img {
        width: 33%;
    }

    .digitization-page .content-flow .list:first-child div:not(.item):nth-child(6) {
        display: none;
        position: relative;
        flex-direction: column;
        width: 100%;
    }

    .digitization-page .content-flow .list:first-child div:not(.item):nth-child(6) img {
        width: 5%;
        transform: rotate(90deg);
    }

    .digitization-page .content-flow .floor:nth-child(2) .list .item {
        width: calc((100% - 20px) / 3);
        text-align: center;
        aspect-ratio: unset;
    }

    .digitization-page .content-flow .floor:nth-child(2) .list .item .icon {
        width: 100%;
        height: auto;
        flex: 1;
    }

    .digitization-page .content-flow .floor:nth-child(2) .list .item .icon img {
        max-width: 50%;
        max-height: 90%;
        width: auto;
    }

    .digitization-page .content-flow .floor:nth-child(3) .list .item {
        width: calc((100% - 20px) / 3);
        text-align: center;
    }

    .digitization-page .content-flow .floor:nth-child(3) .list .item .icon {
        width: 50%;
        height: 50%;
    }

    .digitization-page .content-flow .floor:nth-child(3) .list .item .icon img {
        max-height: 100%;
    }

    .ecology-page .main-content {
        display: none;
    }

    .ecology-page .mobile-pic {
        display: block;
        padding-top: 50px;
    }

    .index-page .case-screen .index-case-swiper .swiper-slide .text-content .name {
        font-size: 16px;
    }

    .index-page .case-screen .index-case-swiper .swiper-slide .text-content ul {
        margin-top: 20px;
        font-size: 12px;
    }

    .case-page .all-case .condition-content {
        justify-content: space-between;
    }

    .case-page .all-case .case-select-content,
    .case-page .all-case .case-search {
        flex: 1;
        width: auto;
    }

    .contact-us-page .contact-us .message-list .title {
        font-size: var(--text-big-size);
    }

    .contact-us-page .contact-us .message-list ul {
        font-size: var(--text-small-size);
    }

    .news-page-breadcrumbs.breadcrumbs-nav-container {
        margin-top: 20px;
    }

    .news-page .news-container .time {
        font-size: var(--text-normal-size);
    }

    .news-page .news-container .top-news .title {
        font-size: var(--text-big-size);
        line-height: 1.5;
    }

    .news-page .news-container .top-news .text {
        font-size: var(--text-normal-size);
    }

    .common-btn-arrow a {
        padding: 10px 0;
        padding-left: 25px;
        padding-right: 20px;
        font-size: var(--text-normal-size);
    }
}


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

    :root,
    body {
        --title-bigger-size: 35px;
        --title-big-size: 22px;
    }

    .index-page .index-banner-swiper .swiper-slide .text-content .title {
        font-size: 14px;
        line-height: 1.5;
    }

    .index-page .about-bc-screen .list.float-top {
        display: none;
    }

    .index-page .about-bc-screen .screen-bg {
        align-items: flex-start;
        padding-top: 80px;
    }

    .index-page .about-bc-screen .list {
        flex-direction: column;
    }

    /* .index-page .about-bc-screen .list .item:not(:last-child) {
        border-bottom: 1px solid #c1c1c157;
    } */

    .index-page .about-bc-screen .list .item {
        display: none;
    }

    .index-page .about-bc-screen .list.default .mobile-list-pic {
        display: block;
    }

    .inside-banner-container .content .text {
        margin-top: 20px;
        font-size: 16px;
    }

    .innovate-page .main-content .content-item .top {
        padding: 15px;
    }

    .innovate-page .main-content .content-item .other-content .item {
        padding: 10px 15px;
        border-radius: 10px;
    }

    .innovate-page .main-content .content-item .other-content {
        gap: 10px;
        flex-wrap: wrap;
        padding: 15px;
    }

    .innovate-page .main-content .content-item .other-content .left,
    .innovate-page .main-content .content-item .other-content .right {
        gap: 10px;
        width: 100%;
        flex: none;
    }

    .innovate-page .main-content .content-item.top-content-item .left .item:nth-child(1),
    .innovate-page .main-content .content-item.top-content-item .left .item:nth-child(2),
    .innovate-page .main-content .content-item.top-content-item .right .item:nth-child(1),
    .innovate-page .main-content .content-item.top-content-item .right .item:nth-child(2) {
        width: 100%;
    }

    .innovate-page .main-content .bottom-content-area .other-content .item:nth-child(1),
    .innovate-page .main-content .bottom-content-area .other-content .item:nth-child(2) {
        width: 100%;
    }

    .digitization-page .top-area .content-btn {
        padding-bottom: calc(var(--ratio-size) * 700);
    }

    .digitization-page .top-area .content-btn .btn-item p {
        white-space: normal;
        width: 5em;
    }

    .digitization-page .content-flow .list .item {
        font-size: 8px;
    }

    .index-page .advantage-screen .advantage-main-content {
        padding: 0;
    }

    .index-page .advantage-screen .advantage-main-content .list-item .text {
        font-size: 10px;
    }

    .index-page .advantage-screen .advantage-main-content .main-content {
        position: relative;
        width: 22%;
        padding-top: 10px;
    }

    .index-page .advantage-screen .advantage-main-content .main-content::after,
    .index-page .advantage-screen .advantage-main-content .main-content .logo {
        top: calc(50% + 10px);
    }

    .index-page .advantage-screen .advantage-main-content .main-content svg {
        margin-top: 10px;
    }

    .case-page .all-case .case-select-content .selected {
        font-size: 12px;
    }

    .case-page .all-case .case-list .item .content .name {
        font-size: 16px;
    }

    .news-page .news-list .news-item .content .title {
        font-size: 16px;
    }

    .service-page .top-content .steps {
        font-size: 12px;
    }

    .service-page .content-main {
        width: 100%;
    }
}