* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --ratio-size: calc(100vw / 1920);
    --main-color: #0075c2;
    --auxiliary-color: #009b63;
    --white-color: #fff;
    --gray-color: #979aa4;
    line-height: 1;

    font-size: calc(0.417vw + 8px);
    font-family: sans-serif;
}

img {
    width: 100%;
}

ul,
ol {
    list-style-type: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.mobile-client {
    display: none;
}

.type-area {
    padding: 0 calc(var(--ratio-size) * 160);
}

.common-banner-title {
    font-size: calc(var(--ratio-size) * 70);
    line-height: 1.4;
}

.common-b-title {
    /* font-size: calc(var(--ratio-size) * 50); */
    font-size: calc(50rem / 16);
}

.common-m-title {
    /* font-size: calc(var(--ratio-size) * 20); */
    font-size: calc(20rem / 16);
    font-weight: bold;
}

.common-text {
    /* font-size: calc(var(--ratio-size) * 16); */
    font-size: calc(18rem / 16);
}

.common-s-text {
    /* font-size: calc(var(--ratio-size) * 14); */
    font-size: calc(14rem / 16);
}

.common-btn a {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: calc(var(--ratio-size) * 12) 0;
    padding-left: calc(var(--ratio-size) * 20);
    padding-right: calc(var(--ratio-size) * 15);
    border: 1px solid #fff;
    border-radius: calc(var(--ratio-size) * 35);
    transition: all .5s;
}

.common-btn a .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: calc(var(--ratio-size) * 10);
    border-radius: 50%;
    background-color: #fff;
    transition: all .5s;
}

.common-btn a .icon img {
    width: 7px;
    margin-left: 1px;
}

.common-btn a:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.common-to-top {
    position: fixed;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    bottom: calc(var(--ratio-size) * 40);
    right: calc(var(--ratio-size) * 20);
    padding: 10px;
    padding-bottom: 10px;
    color: var(--main-color);
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 6px #ccc;
    cursor: pointer;
    transition: all .5s;
}

.common-to-top .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--main-color);
    transition: all .5s;
}

.common-to-top .icon img {
    width: auto;
}

.common-to-top p {
    margin-top: calc(var(--ratio-size) * 10);
    font-size: 12px;
    writing-mode: vertical-lr;
}

.common-to-top:hover {
    background-color: var(--main-color);
    color: #fff;
}

.common-to-top:hover .icon {
    background-color: #fff;
}

.common-to-top:hover .icon .default-icon {
    display: none;
}

.common-to-top:hover .icon .put-icon {
    display: block;
}

.common-banner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(var(--ratio-size) * 650);
    background-size: cover;
    background-position: center;
    margin-top: calc(var(--ratio-size) * 72);
    background-color: #e5e7ed;
}

.common-banner .banner-title {
    font-size: calc(var(--ratio-size) * 70);
    color: #fff;
}

.common-breadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding-top: calc(var(--ratio-size) * 40);
    background-color: #fff;
}

.common-breadcrumb a {
    position: relative;
}

.common-breadcrumb a:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 11px;
    margin: 0 10px;
    background: url('../images/arrow_right_icon_gray.png') no-repeat center/cover;
}

.common-breadcrumb a:last-child {
    position: relative;
    padding-bottom: 2px;
    color: var(--main-color);
}

.common-breadcrumb a:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid var(--main-color);
}

.put-icon {
    display: none;
}

#svg-arrow:hover .cls-2 {
    fill: #0075c2
}

#svg-arrow:hover .cls-1 {
    stroke: #fff
}


.header-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 calc(var(--ratio-size) * 160);
    padding-top: calc(var(--ratio-size) * 34);
    padding-bottom: calc(var(--ratio-size) * 15);
    color: var(--white-color);
    transition: all .5s;
}

.header-container .logo {
    /* width: calc(var(--ratio-size) * 211); */
    width: calc(300rem / 16);
}

.header-container .menu {
    flex: 1;
    display: flex;
    justify-content: space-around;
    height: calc(var(--ratio-size) * 42);
}

.header-container .menu li a {
    display: inline-flex;
    align-items: center;
    padding: 0 calc(var(--ratio-size) * 10);
    width: 100%;
    height: 100%;
    transition: all .3s;
}

.header-container .menu li a:hover {
    color: var(--main-color);
}

.header-container .function-content {
    display: flex;
    align-items: center;
}

.header-container .function-content {
    height: calc(var(--ratio-size) * 42);
}

.header-container .function-content .lang {
    display: flex;
    align-items: center;
    height: calc(var(--ratio-size) * 42);
    border: 1px solid #fff;
    border-radius: calc(var(--ratio-size) * 60);
    cursor: pointer;
}

.header-container .function-content .lang a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 calc(var(--ratio-size) * 20);
}

.header-container .function-content .lang p {
    flex: 1;
}

.header-container .function-content .lang img {
    width: calc(var(--ratio-size) * 10);
    margin-left: calc(var(--ratio-size) * 10);
}

.header-container .function-content .search {
    width: calc(var(--ratio-size) * 42);
    height: calc(var(--ratio-size) * 42);
    margin-left: calc(var(--ratio-size) * 20);
}

.header-container .color-icon {
    display: none;
}

.header-container.active {
    padding-top: calc(var(--ratio-size) * 15);
    background-color: var(--white-color);
    box-shadow: 0 1px 5px rgba(236, 236, 236, .5);
}

.header-container.active .menu li a {
    color: #000;
}

.header-container.active .function-content .lang {
    color: #000;
    border-color: #000;
}

.header-container.active .white-icon {
    display: none;
}

.header-container.active .color-icon {
    display: block;
}

.header-container.active .menu li a:hover {
    color: var(--main-color);
}

.index-banner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(var(--ratio-size) * 940);
    overflow: hidden;
    color: var(--white-color);
}

.index-banner .title {
    margin-top: calc(var(--ratio-size) * 330);
    margin-left: calc(var(--ratio-size) * 160);
}

.index-banner .button {
    display: inline-flex;
    align-items: center;
    margin-top: calc(var(--ratio-size) * 25);
    margin-left: calc(var(--ratio-size) * 160);
    cursor: pointer;
    font-size: calc(24rem / 16);
}

.index-banner .play-icon {
    width: calc(var(--ratio-size) * 48);
    margin-right: calc(var(--ratio-size) * 10);
    transition: all .5s;
}

.index-banner .button:hover .play-icon {
    transform: scale(1.1);
}

.index-banner .down-icon {
    position: absolute;
    bottom: calc(var(--ratio-size) * 80);
    left: calc(var(--ratio-size) * 160);
    width: calc(var(--ratio-size) * 48);
    cursor: pointer;
    animation: downUpAn 1s linear infinite alternate;
}

.products-container {
    position: relative;
    z-index: 2;
    background-color: #fff;
}

.products-container .title-content {
    padding-top: calc(var(--ratio-size) * 100);
    padding-bottom: calc(var(--ratio-size) * 80);
    text-align: center;
}

.products-container .title-content .common-m-title {
    margin-top: calc(var(--ratio-size) * 30);
}

.products-container .switch-list {
    display: flex;
}

.products-container .product-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: calc(var(--ratio-size) * 30) 0;
    margin-right: calc(var(--ratio-size) * 10);
    border-top: 2px solid #e2e5ec;
    cursor: pointer;
}

.products-container .product-item:not(:last-child) {
    margin-right: calc(var(--ratio-size) * 17);
}

.products-container .product-item .serial {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 32);
    height: calc(var(--ratio-size) * 32);
    background-color: var(--white-color);
    border-radius: 50%;
    color: var(--auxiliary-color);
    box-shadow: 0 0 8px #ccc;
    overflow: hidden;
}

.products-container .product-item .serial img {
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    transition: all .5s;
}

.products-container .product-item .description {
    flex: 1;
    margin-left: calc(var(--ratio-size) * 15);
    line-height: 1.5;
    color: var(--gray-color);
}

.products-container .product-item.active {
    border-top-color: var(--main-color);
}

.products-container .product-item.active .description {
    color: var(--main-color);
}

.products-container .product-item.active .serial img {
    transform: translateY(0) !important;
}

.products-container .products-swiper {
    width: 100%;
    height: calc(var(--ratio-size) * 780);
    overflow: hidden;
}

.products-container .products-swiper .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.products-container .products-swiper .swiper-slide::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.products-container .products-swiper .swiper-slide:first-child:after {
    content: unset;
}

.products-container .products-swiper .content {
    position: relative;
    z-index: 2;
    width: calc(var(--ratio-size) * 540);
    margin-left: calc(var(--ratio-size) * 160);
    color: var(--white-color);
}

.products-container .products-swiper .title {
    font-size: calc(var(--ratio-size) * 40);
    line-height: 1.5;
}

.products-container .products-swiper .text {
    margin-top: calc(var(--ratio-size) * 30);
    line-height: 1.5;
}

.products-container .products-swiper .common-btn {
    margin-top: calc(var(--ratio-size) * 40);
}

.service-container {
    position: relative;
    z-index: 3;
    background-color: #ebedf4;
}

.service-container .title-content {
    padding-top: calc(var(--ratio-size) * 160);
    text-align: center;
}

.service-container .title-content .common-m-title {
    margin-top: calc(var(--ratio-size) * 30);
}

.service-container .service-list {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    /* margin-top: calc(var(--ratio-size) * 80); */
    margin-top: calc(var(--ratio-size) * -70);
    transform: translateY(calc(var(--ratio-size) * 150));
}

.service-container .service-list .service-item {
    position: relative;
    width: calc((100% - var(--ratio-size) * 40) / 3);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(var(--ratio-size) * 600);
    padding: calc(var(--ratio-size) * 40);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--white-color);
    cursor: pointer;
    overflow: hidden;
    transition: all .5s;
}

.service-container .service-list .service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.service-container .service-item .show {
    position: relative;
    z-index: 2;
    width: 100%;
}

.service-container .service-item .show .icon {
    height: calc(var(--ratio-size) * 82);
    margin-bottom: calc(var(--ratio-size) * 30);
    transition: all .5s .4s;
}

.service-container .service-item .show .icon img {
    width: auto;
    height: 100%;
}

.service-container .service-item .show .name {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: calc(var(--ratio-size) * 30);
    transition: all .5s .35s;
}

.service-container .service-item:not(:last-child) {
    margin-right: calc(var(--ratio-size) * 20);
}

.service-container .service-item .more {
    position: absolute;
    left: 0;
    bottom: calc(var(--ratio-size) * 40);
    z-index: 2;
    display: block;
    width: calc(var(--ratio-size) * 580);
    padding: 0 calc(var(--ratio-size) * 40);
}

.service-container .service-item .more .name {
    transition: all .5s .2s;
}

.service-container .service-item .more .text {
    margin-top: calc(var(--ratio-size) * 30);
    line-height: 1.5;
    transition: all .5s .15s;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.service-container .service-item .more .common-btn {
    margin-top: calc(var(--ratio-size) * 30);
    transition: all .5s;
}

.service-container .service-item .more .name,
.service-container .service-item .more .text,
.service-container .service-item .more .common-btn {
    opacity: 0;
    transform: translateY(100%);
}

.service-container .service-list .service-item:hover {
    width: calc(var(--ratio-size) * 800);
}

.service-container .service-list .service-item:hover .show .icon {
    opacity: 0;
    transform: translateY(-80%);
    transition: all .5s;
}

.service-container .service-list .service-item:hover .show .name {
    opacity: 0;
    transform: translateY(-150%);
    transition: all .5s .15s;
}

.service-container .service-list .service-item:hover .more .name {
    opacity: 1;
    transform: translateY(0);
    transition: all .5s .3s;
}

.service-container .service-list .service-item:hover .more .text {
    opacity: 1;
    transform: translateY(0);
    transition: all .5s .35s;
}

.service-container .service-list .service-item:hover .more .common-btn {
    opacity: 1;
    transform: translateY(0);
    transition: all .5s .4s;
}

.about-us-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding-top: calc(var(--ratio-size) * 250);
    padding-bottom: calc(var(--ratio-size) * 200);
    /* margin-top: calc(var(--ratio-size) * -150); */
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* .about-us-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background-color: rgba(8, 159, 224, 0.7);
}

.about-us-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: calc(60%);
    height: 100%;
    background-color: rgba(8, 159, 224, 0.9);
} */

.about-us-container .title-content {
    position: relative;
    z-index: 1;
    width: calc(var(--ratio-size) * 500);
    color: var(--white-color);
}

.about-us-container .title-content .common-b-title {
    margin-top: calc(var(--ratio-size) * 23);
    line-height: 1.3;
}

.about-us-container .text-content {
    position: relative;
    z-index: 1;
    width: calc(var(--ratio-size) * 780);
    margin-top: calc(var(--ratio-size) * 50);
    line-height: 1.5;
    color: var(--white-color);
}

.about-us-container .text-content .common-btn {
    margin-top: calc(var(--ratio-size) * 40);
}

.news-container {
    position: relative;
    z-index: 2;
    padding-bottom: calc(var(--ratio-size) * 150);
    padding-top: calc(var(--ratio-size) * 115);
    background-color: #fff;
}

.news-container .title-content {
    display: flex;
    justify-content: space-between;
}

.news-container .title-content .common-btn a {
    border-color: #d4d7dd;
}

.news-container .title-content .common-btn .icon {
    background-color: var(--main-color);
}

.news-container .title-content .common-btn:hover {
    color: #fff;
}

.news-container .title-content .common-btn:hover .default-icon {
    display: none;
}

.news-container .title-content .common-btn:hover .put-icon {
    display: block;
}

.news-container .title-content .common-btn:hover .icon {
    background-color: var(--white-color);
}

.news-container .news-swiper {
    position: relative;
    height: calc(var(--ratio-size) * 560);
    margin-top: calc(var(--ratio-size) * 80);
    overflow: hidden;
}

.news-container .news-swiper .swiper-slide {
    border: 1px solid #e2e5ec;
    background-color: #fff;
    overflow: hidden;
    letter-spacing: 1px;
}

.news-container .news-swiper .swiper-slide a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.news-container .news-swiper .swiper-slide .pic {
    position: relative;
    height: calc(var(--ratio-size) * 280);
    transition: all .5s .2s;
}

.news-container .news-swiper .swiper-slide .pic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 50%);
    opacity: 0;
    transition: all .5s;
}

.news-container .news-swiper .swiper-slide .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-container .news-swiper .swiper-slide .show-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(var(--ratio-size) * 280);
    padding: calc(var(--ratio-size) * 30);
    transition: all .5s;
}

.news-container .news-swiper .show-content .sign {
    padding: calc(var(--ratio-size) * 8) calc(var(--ratio-size) * 10);
    border-radius: calc(var(--ratio-size) * 35);
    background-color: var(--main-color);
    color: var(--white-color);
    transition: all .5s;
}

.news-container .news-swiper .show-content .text {
    margin-top: calc(var(--ratio-size) * 20);
    font-weight: normal;
    line-height: 1.5;
}

.news-container .news-swiper .show-content .text p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news-container .news-swiper .show-content .time {
    color: var(--gray-color);
}

.news-container .news-swiper .hide-content {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    width: 100%;
    height: calc(var(--ratio-size) * 280);
    padding: 0 calc(var(--ratio-size) * 44);
    color: #fff;
    transition: all .5s;
}

.news-container .news-swiper .hide-content .time {
    margin-top: calc(var(--ratio-size) * 45);
}

.news-container .news-swiper .hide-content .year {
    font-size: calc(var(--ratio-size) * 50);
}

.news-container .news-swiper .hide-content .day {
    margin-top: calc(var(--ratio-size) * 10);
}

.news-container .news-swiper .hide-content .title {
    margin-top: calc(var(--ratio-size) * 25);
    font-size: calc(var(--ratio-size) * 24);
    line-height: 1.5;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news-container .news-swiper .hide-sign {
    position: absolute;
    top: calc(var(--ratio-size) * 50);
    left: calc(var(--ratio-size) * 44);
    padding: calc(var(--ratio-size) * 8) calc(var(--ratio-size) * 10);
    border-radius: calc(var(--ratio-size) * 35);
    background-color: #f6a100;
    color: var(--white-color);
    transform: translateX(-300%);
    transition: all .5s;
}

.news-container .news-swiper .swiper-slide:hover .pic {
    height: 100%;
    transition: all .5s;
}

.news-container .news-swiper .swiper-slide:hover .pic::after {
    opacity: 1;
}

.news-container .news-swiper .swiper-slide:hover .hide-content {
    transform: translateY(0);
    transition: all .5s .3s;
}

.news-container .news-swiper .swiper-slide:hover .hide-sign {
    transform: translateX(0);
    transition: all .5s .2s;
}



.news-container .news-swiper .swiper-slide-active .pic {
    height: 100%;
    transition: all .5s;
}

.news-container .news-swiper .swiper-slide-active .pic::after {
    opacity: 1;
}

.news-container .news-swiper .swiper-slide-active .hide-content {
    transform: translateY(0);
    transition: all .5s .3s;
}

.news-container .news-swiper .swiper-slide-active .hide-sign {
    transform: translateX(0);
    transition: all .5s .2s;
}



.swiper-news-prev,
.swiper-news-next {
    position: absolute;
    bottom: calc(var(--ratio-size) * 430);
    z-index: 1;
    width: calc(var(--ratio-size) * 48);
    height: calc(var(--ratio-size) * 48);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.swiper-news-prev {
    left: calc(var(--ratio-size) * 160);
    transform: translate(-50%, 50%) rotate(90deg);
    box-shadow: 0 0 6px #ccc;
}

.swiper-news-next {
    right: calc(var(--ratio-size) * 160);
    transform: translate(50%, 50%) rotate(-90deg);
    box-shadow: 0 0 6px #ccc;
}

.footer-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(var(--ratio-size) * 740);
}

.footer-container .footer-main {
    position: fixed;
    bottom: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(var(--ratio-size) * 740);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    background-size: 100%;
}

.footer-main .top {
    display: flex;
    align-items: center;
    height: calc(var(--ratio-size) * 480);
    margin-left: calc(var(--ratio-size) * 980);
}

.footer-main .top .title {
    line-height: 1.1;
}

.footer-main .top .common-btn {
    margin-top: calc(var(--ratio-size) * 40);
}

.footer-main .top .common-btn a {
    background-color: #fff;
}

.footer-main .top .common-btn .icon {
    background-color: var(--main-color);
}

.footer-main .top .common-btn a:hover {
    background-color: var(--main-color);
    color: #fff;
}

.footer-main .top .common-btn a:hover .icon {
    background-color: #fff;
}

.footer-main .top .common-btn a:hover .default-icon {
    display: none;
}

.footer-main .top .common-btn a:hover .put-icon {
    display: block;
}

.footer-main .bottom-text {
    display: flex;
    justify-content: space-between;
    padding-top: calc(var(--ratio-size) * 60);
    border-top: 1px solid #fff;
}

.footer-main .bottom-text .common-text {
    line-height: 1.5;
}

.footer-main .bottom-text .wall-logo {
    margin-top: calc(var(--ratio-size) * 20);
}

.footer-main .bottom-text .logo-item {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.footer-main .bottom-text .logo-item .qr-pic {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 10px));
    display: none;
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 10);
}

.footer-main .bottom-text .logo-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    display: none;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #fff;
}


.footer-main .bottom-text .logo-item:hover::after,
.footer-main .bottom-text .logo-item:hover .qr-pic {
    display: inline-block;
}

.footer-main .bottom-text .logo-item img {
    border-radius: calc(var(--ratio-size) * 10);
    box-shadow: 0 0 6px #ccc;
}

.footer-main .bottom-text .tel {
    font-size: calc(30rem / 16);
}

.footer-main .bottom-text .address {
    /* margin-top: calc(var(--ratio-size) * 8); */
    line-height: 1.5;
    text-align: right;
}

.footer-main .site-message {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--ratio-size) * 70);
    margin-bottom: 10px;
    color: var(--gray-color);
}

.inquiry-container {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--ratio-size) * 60);
    padding-bottom: calc(var(--ratio-size) * 115);
    background-color: #fff;
}

.inquiry-container .title-content {
    margin-bottom: calc(var(--ratio-size) * 57);
}

.inquiry-container form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.inquiry-container form .input-item {
    position: relative;
    display: flex;
    align-self: center;
    width: calc(50% - var(--ratio-size) * 15);
    height: calc(var(--ratio-size) * 60);
    padding: 0 calc(var(--ratio-size) * 24);
    margin-bottom: calc(var(--ratio-size) * 30);
    background-color: #fff;
    box-shadow: 0 0 6px #ccc;
    /* font-size: calc(var(--ratio-size) * 16); */
    font-size: calc(18rem / 16);
    color: #666;
}

.inquiry-container form .input-item label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inquiry-container form .input-item label {
    position: relative;
}

.inquiry-container form .input-item label .required::after {
    content: '*';
    color: #ff0000;
}

.inquiry-container form .input-item input {
    flex: 1;
    margin-left: calc(var(--ratio-size) * 20);
    border: none;
    outline: none;
}

.inquiry-container form .input-item .select-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.inquiry-container form .input-item .select-input .text {
    display: flex;
}

.inquiry-container form .input-item .select-input .text .select-value {
    margin-left: calc(var(--ratio-size) * 20);
}

.inquiry-container form .input-item .select-list {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    z-index: 2;
    display: none;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 4px #ccc;
}


.inquiry-container form .input-item .select-list dt {
    width: 100%;
    padding: calc(var(--ratio-size) * 10) calc(var(--ratio-size) * 24);
    cursor: pointer;
}

.inquiry-container form .input-item .select-list dt:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.inquiry-container form .input-item .select-list dt:hover {
    background-color: rgba(0, 117, 194, .8);
    color: #fff;
}

.inquiry-container form .input-item .select-input img {
    width: calc(var(--ratio-size) * 19);
    height: calc(var(--ratio-size) * 11);
}

.inquiry-container form .input-item.full-textarea {
    flex-direction: column;
    width: 100%;
    height: calc(var(--ratio-size) * 285);
    padding-top: calc(var(--ratio-size) * 20);
    padding-bottom: calc(var(--ratio-size) * 20);
}

.inquiry-container form .input-item.full-textarea label {
    justify-content: flex-start;
}

.inquiry-container form .input-item.full-textarea textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    margin-top: calc(var(--ratio-size) * 15);
}

.inquiry-container form .input-item .error {
    position: absolute;
    bottom: 0;
    color: #ff0000;
    font-size: 12px;
    opacity: 0;
    transition: all .5s;
}

.inquiry-container form .input-item .error.has-error {
    opacity: 1;
    transform: translateY(120%);
}

.inquiry-container .common-btn {
    margin-top: calc(var(--ratio-size) * 16);
    text-align: center;
}

.inquiry-container .common-btn a {
    padding-left: calc(var(--ratio-size) * 30);
    box-shadow: 0 0 6px #ccc;
    transition: all .5s;
}

.inquiry-container .common-btn a .icon {
    background-color: var(--main-color);
    transition: all .5s;
}

.inquiry-container .common-btn a:hover {
    color: #fff;
}

.inquiry-container .common-btn a:hover .icon {
    background-color: #fff;
}

.inquiry-container .common-btn a:hover .default-icon {
    display: none;
}

.inquiry-container .common-btn a:hover .put-icon {
    display: block;
}

.find-us {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-top: calc(var(--ratio-size) * 107);
    padding-bottom: calc(var(--ratio-size) * 120);
    background-color: #ebedf4;
}

.find-us .city-list {
    margin-top: calc(var(--ratio-size) * 54);
}

.find-us .city-list .city-item {
    min-height: calc(var(--ratio-size) * 285);
    padding: calc(var(--ratio-size) * 50) calc(var(--ratio-size) * 40);
    background-color: #fff;
}

.find-us .city-list .city-item:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 20);
}

.find-us .city-list .city-item .name {
    /* font-size: calc(var(--ratio-size) * 28); */
    font-size: calc(28rem / 16);
    color: var(--main-color);
    font-weight: bold;
}

.find-us .city-list .city-item .company {
    margin-top: calc(var(--ratio-size) * 30);
    line-height: 1.3;
}

.find-us .city-list .city-item .message {
    margin-top: calc(var(--ratio-size) * 20);
    /* font-size: calc(var(--ratio-size) * 18); */
    font-size: calc(18rem / 16);
    color: gray;
    line-height: 1.3;
}

.find-us .city-list .city-item .message-item {
    display: flex;
    align-items: center;
}

.find-us .city-list .city-item .message-item img {
    width: calc(var(--ratio-size) * 32);
    margin-right: calc(var(--ratio-size) * 10);
}

.find-us .city-list .city-item .message-item img p {
    flex: 1;
}

.find-us .city-list .city-item .message-item p a:hover {
    color: #0075c1;
}

.find-us .city-list .city-item .message-item:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 10);
}

.find-us .map {
    width: calc(var(--ratio-size) * 859);
    margin-left: calc(var(--ratio-size) * 55);
}

.follow-us {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--ratio-size) * 110);
    padding-bottom: calc(var(--ratio-size) * 150);
    background-color: #fff;
}

.follow-us .follow-list {
    margin-top: calc(var(--ratio-size) * 50);
}

.follow-us .follow-item {
    display: flex;
    align-items: center;
    background-color: #ebedf4;
}

.follow-us .follow-item .left {
    display: flex;
    align-items: center;
    padding: calc(var(--ratio-size) * 40);
    padding-right: 0;
}

.follow-us .follow-item .icon {
    width: calc(var(--ratio-size) * 200);
}

.follow-us .follow-item .text {
    margin-left: calc(var(--ratio-size) * 55);
    margin-right: calc(var(--ratio-size) * 470);
    /* font-size: calc(var(--ratio-size) * 30); */
    font-size: calc(30rem / 16);
    line-height: 1.5;
}

.follow-us .follow-item .qr-pic {
    width: calc(var(--ratio-size) * 280);
    padding: calc(var(--ratio-size) * 14);
    border-left: 1px solid #d3d5db;
}

@keyframes downUpAn {
    to {
        transform: translateY(-40%);
    }
}

.product-nav {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.common-banner:has(.product-nav.fixed) {
    z-index: 4;
}

.product-nav.fixed {
    position: fixed;
    bottom: unset;
    top: 0;
    z-index: 5;
    background-color: #fff;
    color: #333;
    border-top: 1px solid #e7e7e7;
    box-shadow: 0 1px 5px rgba(236, 236, 236, .5);
}

body:has(.product-nav.fixed) .header-container.active {
    box-shadow: none;
}

.product-link {
    width: calc(100% / 4);
    flex: 0 0 auto;
    padding: calc(20 * var(--ratio-size)) calc(6.25vw - 40px);

    border-top: 1px solid transparent;
    margin-top: -1px;
}

.fixed .product-link {
    padding-top: calc(12 * var(--ratio-size));
    padding-bottom: calc(12 * var(--ratio-size));
}

.product-link.active,
.product-link:hover {
    border-top: 1px solid rgba(255, 255, 255, 1);
    font-weight: bold;
}

.fixed .product-link.active,
.fixed .product-link:hover {
    color: var(--main-color);
    border-top: 1px solid var(--main-color);
}

.product-link span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.25em;
    height: 2.5em;
}

.product-nav:has(.product-link:nth-of-type(5)) .product-link {
    width: calc(100% / 5);
}

.product-nav:has(.product-link:nth-of-type(6)) .product-link {
    width: calc(100% / 6);
}

/* 火狐浏览器不兼容has */
.action--site-about_us .product-link {
    width: calc(100% / 6);
}


.products {
    position: relative;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
    padding-bottom: calc(50 * var(--ratio-size));
}

.product-list {
    margin-top: calc(40 * var(--ratio-size));
}

.product-list .product {
    display: flex;
    margin-bottom: calc(60 * var(--ratio-size));
    position: relative;
}

.product-list .product .info,
.product-list .product .cover {
    position: relative;
    width: 50%;
    flex: 0 0 auto;
}

.product-list .product .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-list .product:nth-of-type(2n) {
    flex-direction: row-reverse;
}

.product .info {
    background-color: #ebedf4;
    padding: calc(60 * var(--ratio-size));
    position: relative;
}

.product .info::after {
    content: "";
    position: absolute;
    width: calc(var(--ratio-size) * 160);
    height: 100%;
    top: 0;
    left: 100%;
    background: #ebedf4;
}

.product:nth-of-type(2n) .info::after {
    right: 100%;
    left: unset;
}

.product .info .title {
    font-size: calc(36rem / 16);
    line-height: calc(42em / 36);
    margin-bottom: calc(24 * var(--ratio-size));
}

.product .info .desc {
    font-size: 1rem;
    line-height: 1.5em;
    color: #666666;
}

.product .info .common-btn {
    margin-top: calc(60 * var(--ratio-size));
}

.product .info .common-btn a {
    color: var(--main-color);
    background-color: #fff;
}

.product .info .common-btn a:hover {
    color: #fff;
    background-color: var(--main-color);
}

.product .info .common-btn a .icon {
    background-color: var(--main-color);
}

a.anchor {
    position: absolute;
    top: calc(-170 * var(--ratio-size));
}

.product-intro {
    display: flex;
    padding-bottom: calc(90 * var(--ratio-size));
    padding-top: calc(60 * var(--ratio-size));

    position: relative;
    z-index: 2;
    background-color: #fff;
}

.product-intro .left {
    font-size: calc(48 * var(--ratio-size));
    line-height: calc(56em / 48);
    color: var(--main-color);
    width: 33%;
    flex: 0 0 auto;
}

.product-intro .right {
    width: 67%;
    flex: 0 0 auto;
    line-height: calc(24.88em / 16);
}

.product-intro .right p+p {
    margin-top: calc(24.88em / 16);
}

.product-big-pic {
    z-index: 3;
    position: relative;
}

.product-big-pic img {
    display: block;
    width: 100%;
    height: auto;
}

.product-sec1,
.product-sec2,
.product-sec3 {
    position: relative;
    z-index: 3;
    background-color: #fff;
    overflow: hidden;

    padding-top: calc(100 * var(--ratio-size));
    padding-bottom: calc(100 * var(--ratio-size));
}

.product-sec2 {
    background-color: #ebedf4;
}

.order-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(45 * var(--ratio-size));
    margin-right: calc(-40 * var(--ratio-size));
    margin-bottom: calc(-40 * var(--ratio-size));
}

.order-item {
    display: flex;
    align-items: center;
    flex: 0 0 calc(100% / 3 - 40 * var(--ratio-size));
    margin-right: calc(40 * var(--ratio-size));
    margin-bottom: calc(40 * var(--ratio-size));
    background-color: #ebedf4;
    padding: calc(20 * var(--ratio-size));
    font-size: calc(24 * var(--ratio-size));
}

.order-num {
    border-radius: 50%;
    color: #fff;
    background-color: #009b63;
    box-shadow: 0px 0px 12px 0px rgba(7, 0, 105, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: calc(18em / 24);
    width: calc(52em / 24);
    height: calc(52em / 24);
    flex: 0 0 auto;
}

.solution-list {
    margin-top: calc(45 * var(--ratio-size));
}

.solution-list .solution {
    gap: calc(60 * var(--ratio-size));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.solution .cover {
    width: 50%;
    flex: 0 0 auto;
}

.solution .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution .info {
    width: calc(50% - 60 * var(--ratio-size));
    flex: 0 0 auto;
}

.solution .title {
    font-size: calc(36 * var(--ratio-size));
    color: #000;
    line-height: calc(42em / 36);
    max-width: 80%;
    margin-bottom: calc(32 * var(--ratio-size));
}

.solution .desc {
    line-height: 1.5em;
    color: #666666;
}

.solution .desc p+p {
    margin-top: 1.5em;
}

.solution:nth-of-type(2n) {
    flex-direction: row-reverse;
}

.swiper.swiper-app {
    overflow: visible;
    margin-top: calc(45 * var(--ratio-size));
}

.swiper-app .swiper-slide {
    cursor: zoom-in;
}

.swiper-app .cover {
    position: relative;
}

.swiper-app .cover::after {
    content: "";
    z-index: 4;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    transition: .3s opacity;
}

.swiper-app .cover:hover::after {
    opacity: 1;
}

.swiper-app .cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: contain;
}

.swiper-app .name {
    text-align: center;
    margin-top: calc(16 * var(--ratio-size));
    font-size: calc(18rem / 16);
}

.page-app {
    margin-top: calc(50 * var(--ratio-size));
    text-align: center;
}

.swiper-app .swiper-news-prev,
.swiper-app .swiper-news-next {
    top: 0;
    bottom: calc(18 * var(--ratio-size));
    margin: auto;
}

.swiper-app .swiper-news-prev {
    left: calc(var(--ratio-size) * -24);
    transform: rotate(90deg);
}

.swiper-app .swiper-news-next {
    right: calc(var(--ratio-size) * -24);
    transform: rotate(-90deg);
}

.about-us {
    position: relative;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
}

.about-us-layout {
    padding-top: calc(70 * var(--ratio-size));
    padding-bottom: calc(70 * var(--ratio-size));
    position: relative;
}

.about-us .title {
    font-size: clamp(20px, 2.6vw, 2.6vw);
}

.Overview-wrap {
    display: flex;
}

.Overview-wrap .title {
    flex: 1;
}

.Overview-wrap .intro {
    width: 58%;
    color: #333;
    line-height: calc(24rem / 16);
}

.Overview-wrap .intro>div {
    margin-bottom: calc(20 * var(--ratio-size));
}

.Overview-wrap .intro .font p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    word-break: break-word;
    transition: .3s;
}

.Overview-wrap .intro .open-more {
    color: #0075c1;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.Overview-wrap .intro .open-more img {
    margin-left: 5px;
    width: auto;
}

.Milestone {
    background-color: #ebedf4;
}

.Milestone-wrap .title {
    padding-bottom: calc(30 * var(--ratio-size));
    border-bottom: 1px solid #bcbec3;
}

.Milestone-cont {
    display: flex;
    margin-top: calc(40 * var(--ratio-size));
}

.Milestone-cont .block {
    flex: 1;
}

.Milestone-cont .intro {
    width: 58%;
    max-height: calc(100px + 10vw);
    overflow-x: auto
}

.Milestone-cont .intro::-webkit-scrollbar-button {
    display: none;
}

.Milestone-cont .intro::-webkit-scrollbar {
    width: 5px;
    border-radius: 5px;
    background-color: #cccccc;
}

.Milestone-cont .intro::-webkit-scrollbar-thumb {
    background-color: #0075c1;
    border-radius: 5px;
}

.Milestone-cont .intro .item {
    margin-bottom: clamp(20rem / 16, calc(20 * var(--ratio-size)), calc(20 * var(--ratio-size)));
}

.Milestone-cont .intro .time {
    font-size: calc(24rem / 16);
    color: #0075c1;
    margin-bottom: calc(10 * var(--ratio-size));
}

.Milestone-cont .intro p {
    line-height: calc(24rem / 16);
}

.time-pick {
    color: #788697;
    font-size: calc(28rem / 16);
    display: flex;
    justify-content: space-between;
}

.time-pick {
    height: 200px;
    margin-top: calc(20 * var(--ratio-size));
}

.time-pick .swiper {
    width: 100%;
    height: 100%;
}

.time-pick .swiper-wrapper {
    /* justify-content: center; */
    /* margin-left: -135px; */
}

.time-pick .swiper-slide {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-pick .swiper-slide-active {
    background-image: linear-gradient(to right, #1090cb, #0b55a4);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 8vw;
}

.time-pick-btn {
    position: relative;
    width: calc(150 * var(--ratio-size));
    margin-left: calc(40 * var(--ratio-size));
    background-color: #ebedf4;
    height: 100%;
    flex-shrink: 0;
}

.time-pick-btn .swiper-button-prev,
.time-pick-btn .swiper-button-next {
    width: calc(50 * var(--ratio-size));
    height: calc(50 * var(--ratio-size));
    background-color: #0075c1;
    border-radius: 50%;
}

.time-pick-btn .swiper-button-prev::after {
    margin-left: -2px;
}

.time-pick-btn .swiper-button-next::after {
    margin-left: 2px;
}

.time-pick-btn .swiper-button-prev::after,
.time-pick-btn .swiper-button-next::after {
    font-size: 14px;
    color: #fff;
}

.time-pick-btn .swiper-button-disabled {
    background-color: unset;
}

.time-pick-btn .swiper-button-disabled::after {
    color: #0075c1;
    opacity: 1;
}

.Mission-wrap {
    position: relative;
    aspect-ratio: 2.7;
}

.Mission-wrap .pic {
    width: 80%;
    height: 100%;
}

.Mission-wrap .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.Mission-wrap .intro {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 30%;
    height: 80%;
    padding: calc(40rem / 16);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.Mission-wrap .intro .txt {
    border-left: 2px solid #009b63;
    padding-left: calc(40rem / 16);
    padding-bottom: calc(40rem / 16);
}

.Mission-wrap .intro .txt p {
    color: #333;
    line-height: calc(24rem / 16);
    margin-top: calc(20rem / 16);
}

.Mission-wrap .intro .icon {
    width: 40%;
    padding-left: calc(40rem / 16);
}

.Vision {
    padding-top: 0;
}

.Vision .Mission-wrap {
    display: flex;
    flex-direction: row-reverse;
}

.Vision .Mission-wrap .intro {
    right: unset;
    left: 0;
}

.Social {
    aspect-ratio: 2.4;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    color: #fff;
    position: relative;
}

.Social-wrap {
    position: relative;
    height: 100%;
}

.Social .title {
    position: absolute;
    top: calc(70 * var(--ratio-size));
    left: calc(var(--ratio-size) * 160);
}

.item-wrap {
    display: flex;
    height: 100%;
}

.item-cont {
    margin-bottom: calc(40rem / 16);
    padding-right: calc(20rem / 16);
}

.item-wrap .item {
    flex: 1;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    padding-top: 16%;
    transition: .3s;
}

.item-wrap .item .icon {
    width: 25%;
    min-width: 75px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: calc(30rem / 16);
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(30rem / 16);
}

.item-wrap .item .txt {
    font-size: clamp(16px, 1.5vw, 1.5vw);
    margin-bottom: calc(30rem / 16);
    text-align: center;
}

.item-wrap .item .font {
    /* white-space: nowrap; */
    text-align: center;
    line-height: calc(24rem / 16);
    padding: 0 calc(10rem / 16);
    opacity: 0;
    transition-delay: .3s;
    transition: .5s;
}

.item-wrap .item:hover {
    background-color: rgba(0, 0, 0, .4);
    padding-top: 12%;
}

.item-wrap .item:hover .font {
    opacity: 1;
}

.Careers-wrap .swiper-wrapper {
    padding: calc(50rem / 16) 0;
    align-items: stretch;
}

.Careers-wrap .swiper-wrapper .swiper-slide {
    display: flex;
    height: auto;
}

.Careers-wrap .swiper-slide .pic {
    padding: calc(20rem / 16);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-color: #e5e7ed;
    cursor: pointer;
}

.Careers-wrap .swiper-slide .pic img {
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.Careers-wrap .swiper-slide .txt {
    width: 60%;
    padding: calc(20rem / 16);
    border: 1px solid #bcbec3;
    border-left: 0;
}

.Careers-wrap .swiper-slide .txt .name {
    font-size: clamp(18px, 1.5vw, 1.5vw);
    padding-bottom: calc(20rem / 16);
    border-bottom: 1px solid #bcbec3;
}

.Careers-wrap .swiper-slide .txt .intro {
    color: #333;
    padding-top: calc(20rem / 16);
    line-height: calc(20rem / 16);
}

.news {
    position: relative;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
    padding: calc(20px + 1.5vw) 0;
}

.news_title {
    font-size: clamp(20px, 2.6vw, 2.6vw);
    display: flex;
    justify-content: space-between;
}

.news .had .link {
    margin-top: 40px;
    background: #ebedf4;
    padding: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.news .had .link .img {
    width: 46.7%;
    overflow: hidden;
}

.news .had .link .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

.news .had .text {
    width: 53.3%;
    padding-left: 70px;
}

.news .had .text strong,
.news .list ul li .link .text strong {
    display: block;
    font-size: 16px;
    color: #666666;
}

.news .had .text h3 {
    font-size: clamp(20px, 1.8vw, 1.8vw);
    color: #000000;
    margin-top: calc(20rem / 16);
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: break-word;
}

.news .had .text p {
    font-size: 18px;
    line-height: 28px;
    margin-top: 20px;
}

.news .had .text .m_link_ls {
    margin-top: 30px;
}

.news .had .link:hover .m_link_ls span {
    background: #2186c4;
    border: 1px solid #2186c4;
    color: #fff;
}

.news .had .link:hover .m_link_ls span:before {
    background: #fff;
}

.news .had .link:hover .img img {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
}

.news .had .link:hover .text h3 {
    color: #2186c4;
}

.news .list ul li .link {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 40px;
    border-bottom: 1px solid #e5e5e5;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    background-color: #ebedf4;
    margin: calc(20px + 1.5vw) 0;
}

.news .list ul li .link .img {
    width: 30%;
    /* width: 340px;
    height: 201px; */
    flex: 0 0 auto;
    overflow: hidden;
    transition: .3s;
}

.news .list ul li .link .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

.news .list ul li .link .text {
    width: calc(100% - 340px);
    padding-left: 50px;
}

.news .list ul li .link .text .common-btn {
    display: none;
}

.news .list ul li .link .text h3 {
    font-size: clamp(18px, 1.4vw, 1.4vw);
    color: #333333;
    margin-top: calc(15rem / 16);
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-word;
    line-height: 1.5;
}

.news .list ul li .link .text p {
    font-size: clamp(14px, 1vw, 1vw);
    color: #666666;
    line-height: 27px;
    margin-top: calc(10rem / 16);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

.news .list ul li .link:hover {
    background: #f5f5f5;
}

.news .list ul li .link:hover .text h3 {
    color: #2186c4;
}

.news .list ul li .link:hover .img {
    width: 46.7%;
}

.news .list ul li .link:hover .common-btn {
    display: block;
}

/* .news .list ul li .link:hover .img img {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
} */

.pagebox {
    text-align: center;
    position: relative;
}

.pagebox ul {
    margin-top: 60px;
}

.pagebox ul li {
    display: inline-block;
    vertical-align: middle;
}

.pagebox ul li a {
    margin: 0px;
    font-size: 14px;
    color: #000;
    position: relative;
    display: block;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
}

.pagebox ul .page a {
    height: 38px;
    width: 38px;
    border: 1px solid #e3e3e3;
    line-height: 38px;
    margin: 0px 2px;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    border-radius: 50%;
}

.pagebox ul .previous a {
    color: #0077b6;
    height: 38px;
    font-size: 16px;
    line-height: 38px;
    overflow: hidden;
    margin-right: 10px;
    padding: 0px 0px;
}

.pagebox ul .next a {
    color: #0077b6;
    height: 38px;
    font-size: 16px;
    line-height: 38px;
    overflow: hidden;
    margin-left: 10px;
    padding: 0px 0px;
}

.pagebox ul li.first {
    display: none;
}

.pagebox ul li.last {
    display: none;
}

.pagebox ul li.page:hover a,
.pagebox ul li.selected a {
    color: #fff;
    background: #0077b6;
    border: 1px solid #0077b6;
}

.pagebox ul .previous a {
    color: #999999;
}

.pagebox ul .previous a:before {
    content: '';
    background: url('../images/icon20.png') no-repeat left center;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    width: 19px;
    height: 8px;
    margin-right: 5px;
}

.pagebox ul .next a {
    color: #999999;
}

.pagebox ul .next a:after {
    content: '';
    background: url('../images/icon21.png') no-repeat left center;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    width: 19px;
    height: 8px;
    margin-left: 5px;
}

.pagebox ul .previous a:hover {
    color: #2186c4;
}

.pagebox ul .previous a:hover:before {
    content: '';
    background: url('../images/icon20_m.png') no-repeat left center;
}

.pagebox ul .next a:hover {
    color: #2186c4;
}

.pagebox ul .next a:hover:after {
    content: '';
    background: url('../images/icon21_m.png') no-repeat left center;
}

.news_detail-wrap {
    position: relative;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
}

.news_details {
    background: #ebedf4;
    padding-top: calc(var(--ratio-size) * 72);
}

.news_detail-wrap .common-breadcrumb {
    background-color: unset;
}

.news_details .had {
    padding: calc(50px + 1.5vw) 0;
}

.news_details .had h3 {
    font-size: clamp(20px, 1.8vw, 1.8vw);
    margin-top: 25px;
    width: 80%;
}

.news_details .had strong {
    display: block;
    margin-top: 20px;
    font-size: clamp(18px, 1.5vw, 1.5vw);
    color: #666666;
}

.news_details1 {
    margin-top: 50px;
    padding: 0 18vw calc(50px + 1.5vw);
}

.news_details1 p {
    font-size: clamp(16px, 1vw, 1vw);
    color: #333333;
    line-height: 30px;
    margin-top: 30px;
}

.news_details1 p strong {
    font-weight: bold;
}

.news_details1 .m_link_ls {
    text-align: center;
    margin-top: 50px;
}

.common-btn {
    margin-top: calc(60rem / 16);
}

.common-btn .link-more {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: calc(var(--ratio-size) * 12) 0;
    padding-left: calc(var(--ratio-size) * 20);
    padding-right: calc(var(--ratio-size) * 15);
    border: 1px solid #fff;
    border-radius: calc(var(--ratio-size) * 35);
    transition: all .5s;
}

.news .common-btn .link-more {
    color: var(--main-color);
    background-color: #fff;
}

.news_details1 .common-btn {
    text-align: center;
}

.news_details1 .common-btn .link-more {
    color: var(--main-color);
    background-color: #fff;
    box-shadow: 0px 5px 10px 0px rgba(71, 52, 26, 0.1);
}

.news_details .common-btn .link-more {
    color: #fff;
    background-color: var(--main-color);
}

.common-btn .link-more .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: calc(var(--ratio-size) * 10);
    border-radius: 50%;
    background-color: #fff;
    transition: all .5s;
}

.news .common-btn .link-more .icon {
    background-color: var(--main-color);
}

.news_details1 .common-btn .link-more .icon {
    background-color: var(--main-color);
}

.common-btn .link-more .icon img {
    width: 7px;
    margin-left: 1px;
}

.news::after {
    content: "";
    position: absolute;
    width: calc(var(--ratio-size) * 160);
    height: 100%;
    top: 0;
    left: 100%;
    background: #ebedf4;
}

body.wfEditorMode a.wfEditorMode {
    margin-top: 0;
    font-size: initial;
    position: relative;
    z-index: 999;
}

.choose-type .choose-item {
    width: 15vw;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: calc(18rem / 16);
    background: url('../images/j.png') no-repeat 92% center;
    position: relative;
    cursor: pointer;
    min-width: 180px;
    overflow: hidden;
    font-size: calc(18rem / 16);
}

.choose-type .choose-item.active {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
    overflow: unset;
}

.choose-type .choose-item.active ul {
    border-radius: 0 0 10px 10px;
    opacity: 1;
}

.choose-type .choose-item ul {
    width: calc(100% + 2px);
    position: absolute;
    top: 100%;
    left: -1px;
    border: 1px solid #ddd;
    border-top: 0;
    border-radius: 30px;
    opacity: 0;
    background-color: #fff;
    z-index: 1;
}

.choose-type .choose-item ul li a {
    line-height: calc(24rem / 16);
    padding: calc(10rem / 16) 6%;
    display: block;
}

.choose-type .choose-item ul li:last-child {
    border-radius: 0 0 10px 10px;
}

.choose-type .choose-item ul li:hover {
    background-color: #ddd;
}

.news_details1_cont img {
    width: 100% !important;
    height: initial;
    max-width: 100%;
}

.mark-layer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.mark-layer.active {
    visibility: visible;
    opacity: 1;
}

.mark-layer .mark {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.mark-layer .mark-cont {
    width: 50%;
    height: 80%;
    padding: 0 calc(10rem / 16);
    position: relative;
}

.mark-layer .mark-cont .pic {
    width: 100%;
    height: 100%;
}

.mark-layer .mark-cont .btn-close {
    position: absolute;
    top: -50px;
    right: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255);
}

.mark-layer .mark-cont img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.product-detail {
    position: relative;
    z-index: 3;
    overflow: hidden;
    background-color: #fff;
}

.product-detail-intro {
    flex-direction: column;
    align-items: center;
}

.product-detail-intro .left {
    /* width: 46%; */
    width: auto;
    text-align: center;
    color: #000;
}

.product-detail-intro .left .s_title {
    font-size: calc(30 * var(--ratio-size));
}

.product-detail-intro .right {
    width: 60%;
    width: auto;
    margin-top: calc(20px + 1vw);
}

.layout-wrap {
    padding-top: calc(20px + 3vw);
    padding-bottom: calc(20px + 3vw);
}

.bgc-1 {
    background-image: linear-gradient(to bottom, #ebedf4, #fff);
}

.layout-cont {
    margin-bottom: calc(60 * var(--ratio-size));
}

.product-detail .order-list {
    margin-top: 0;
}

.layout-title {
    font-size: clamp(20px, 1.875vw, 1.875vw);
    margin-bottom: clamp(20px, 40 * var(--ratio-size), 40 * var(--ratio-size));
    line-height: 1.2;
}

.pic-txt-lay {
    display: flex;
    aspect-ratio: 3.2;
}

.pic-txt-lay .pic {
    padding: clamp(20px, 2.5vw, 2.5vw);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
    background-image: linear-gradient(to bottom, #5c7bac, #cad8ed);
}

.pic-txt-lay .pic img {
    height: 100%;
    max-width: 84%;
    object-fit: contain;
    object-position: center;
}

.pic-txt-lay .txt {
    flex: 1;
    padding: calc(20px + 2vw);
    padding-top: calc(20px + 3vw);
    background-color: #d3d8e7;
}

.pic-txt-lay .txt .font {
    color: #333;
    line-height: 1.5;
}

.product-detail .order-item {
    padding: clamp(10px, 20 * var(--ratio-size), 20 * var(--ratio-size));
}

.product-detail .order-text {
    font-size: clamp(14px, .9vw, .9vw);
}

.product-detail table {
    width: 100%;
    text-align: center;
}

.product-table {
    overflow-x: auto;
    border: 1px solid #fff;
    border-right: 0px;
}

.product-detail tbody tr:nth-child(2n) {
    background-color: #f5f6fa;
}

.product-detail tbody tr:nth-child(2n+1) {
    background-color: #e2e6f1;
}

.product-detail tbody tr:first-child {
    background-color: #0075c1;
    color: #fff;
    font-size: calc(18rem / 16);
}

.product-detail td {
    border-right: 1px solid #fff;
    padding: calc(14rem / 16) calc(5rem / 16);
    min-width: 70px;
}

.product-detail .order-num img {
    width: 50%;
}


.Mission-wrap .intro.animate__fadeInRightSort {
    -webkit-animation-name: fadeInRightSort_custom;
    animation-name: fadeInRightSort_custom;
}

.Mission-wrap .intro.animate__fadeInLeftSort {
    -webkit-animation-name: fadeInLeftSort_custom;
    animation-name: fadeInLeftSort_custom;
}

@keyframes fadeInRightSort_custom {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(30%, -50%, 0);
        transform: translate3d(30%, -50%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes fadeInLeftSort_custom {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-30%, -50%, 0);
        transform: translate3d(-30%, -50%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

.card-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    display: flex;
    flex-direction: column;
    margin-right: calc(30rem / 16);
    margin-bottom: calc(30rem / 16);
    width: calc((100% - (30rem / 16) *2) / 3);
}

.card:nth-child(3n) {
    margin-right: 0;
}

.card .pic {
    aspect-ratio: 1.8;
    overflow: hidden;
}

.card .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}

.card .txt {
    background-color: #ebedf4;
    padding: clamp(10px, 2vw, 2vw);
    line-height: 1.5;
    flex: 1;
}

.card .txt h1 {
    font-size: clamp(18px, 1.26vw, 1.26vw);
    color: #3071b7;
    margin-bottom: clamp(10px, 1vw, 1vw);
}

.card .intro .para strong {
    font-weight: bold;
}

.card .intro .font {
    color: #666666;
    margin-top: clamp(10px, .5vw, .5vw);
}

.pic-table {
    display: flex;
}

.pic-table .pic {
    padding: clamp(20px, 2.5vw, 2.5vw);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-image: linear-gradient(to bottom, #f8f9fb, #ebedf4);
}

.pic-table .tab {
    width: 50%;
}

.pic-table table {
    width: 100%;
    text-align: center;
}

.product-detail .pic-table tbody tr {
    background-color: #f8f9fb;
}

.pic-table tbody tr.fill {
    background-color: #e2e6f1;
    font-size: calc(18rem / 16);
    color: #0075c1;
    font-weight: bold;
}

.pic-table tbody tr.tips {
    font-size: calc(14rem / 16);
}

.pic-table tbody tr.tips span {
    color: #ff0000;
}

.pic-table tbody tr:first-child {
    background-color: #0075c1;
    color: #fff;
    font-size: calc(20rem / 16);
}

.pic-table td {
    width: 33.33%;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: calc(14rem / 16) calc(5rem / 16);
}

.product .info .title {
    margin-bottom: clamp(20px, 3vw, 3vw);
    position: relative;
}

.product .info .title::after {
    content: '';
    position: absolute;
    bottom: calc(-20rem / 16);
    left: 0;
    width: calc(50rem / 16);
    height: 2px;
    background-color: #0075c1;
}

.service .info .desc p {
    display: flex;
    align-items: center;
    color: #333;
    font-size: calc(18rem / 16);
    margin-bottom: calc(20rem / 16);
}

.service .info img {
    width: auto;
    margin-right: calc(10rem / 16);
}

.service .product {
    flex-direction: row-reverse;
    margin-top: clamp(20px, 3vw, 3vw);
}

.service .product .info {
    padding-left: 0;
    padding-right: calc(60 * var(--ratio-size));
}

.service .product:nth-of-type(2n) .info {
    padding-right: 0;
    padding-left: calc(60 * var(--ratio-size));
}

/* .service .product:nth-of-type(2n) {
    flex-direction: row;
} */


.service .product .info::after {
    right: 100%;
    left: unset;
    display: none;
}

.service .product:nth-of-type(2n) .info::after {
    right: unset;
    left: 100%;
}

.action--site-service .product-nav {
    justify-content: center;
    text-align: center;
}

.service {
    position: relative;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
}

.service-intro {
    /* margin: clamp(20px, 3vw, 3vw) 0 clamp(30px, 3vw, 3vw); */
    margin: clamp(20px, 3vw, 3vw) 0 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.service-intro::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/1122.png) center/contain no-repeat;
    background-size: cover;
    z-index: -1;
}

.service-intro-card {
    width: calc(100% / 9);
    /* background-color: #ebedf4; */
    padding: calc(60rem / 16) clamp(10px, 1vw, 1vw) clamp(30px, 9vw, 9vw);
    /* margin-right: calc(10rem / 16); */
    /* margin-bottom: calc(10rem / 16); */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.service-intro-card:last-child {
    /* margin-right: 0; */
    border-right: 0;
}

.service-intro-card .pic {
    height: 50%;
    aspect-ratio: 1;
    background-color: #353639;
    position: relative;
    border-radius: 50%;
    padding: 20%;
    margin-bottom: clamp(20px, 2vw, 2vw);
}

.service-intro-card .pic span {
    width: clamp(16px, 21%, 21%);
    aspect-ratio: 1;
    position: absolute;
    top: calc(5 * var(--ratio-size));
    left: calc(5 * var(--ratio-size));
    font-size: .73vw;
    background-color: #0075c1;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-intro-card .pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .3s;
}

.service-intro-card .txt {
    font-size: calc(18rem / 16);
    color: #fff;
    line-height: 1.5;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: left;
}

.service-intro-card .txt .lines {
    position: relative;
}

.service-intro-card .txt .lines .line:nth-of-type(2) {
    position: absolute;
    left: 0;
    top: 1.5em;
    white-space: nowrap;
}

.service-intro-card:hover {
    background-color: rgba(12, 123, 196, .83);
}

.service-intro-card:hover .pic {
    background-color: #4d97c8;
}

.service-intro-card:hover .pic span {
    background-color: #fff;
    color: #0075c1;
}

.service-intro-card:hover .pic img {
    transform: scale(1.1);
}

.card:hover .pic img {
    transform: scale(1.2);
}

/* .service-banner-title {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: clamp(20px, 4vw, 4vw);
    font-size: clamp(16px, 2vw, 2vw);
    color: #fff;
} */

.service-title {
    width: 100%;
    font-size: calc(36rem / 16);
    margin-top: calc(110 * var(--ratio-size));
}