/*!
 * app.css for master
 * Author wzcoder.com
 * @Copyright 2005-2021 wzcoder.com (http://www.wzcoder.com)
 * @version 1.0
 * @date 2021-03-05-1:59 PM
 */

/*--------------------------------------------------------------
# App通用
--------------------------------------------------------------*/

/*Preloader*/
.wz-loader.wz-style-1 {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 3000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.wz-loader.wz-style-2, .wz-loader.wz-style-3 {
    align-items: center;
    width: 100%;
    display: flex;
    top: 0;
    left: 0;
    overflow: hidden
}

.wz-loader.wz-style-1 .wz-box {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(var(--primary-color-rgb), 1);
}

.wz-loader.wz-style-1 .wz-logo {
    transform: translateY(100px);
    opacity: 0
}

.wz-loader.wz-style-1 .wz-logo img {
    max-width: 200px;
    height: auto;
}

.wz-loader.wz-style-2 {
    height: 100%;
    position: fixed;
    background-color: #fff;
    z-index: 3000;
    justify-content: center
}

.wz-loader.wz-style-2 .wz-box {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(var(--primary-color-rgb), 1);
}

.wz-loader.wz-style-2 .wz-icon {
    position: relative;
    z-index: 10
}

.wz-loader.wz-style-3 {
    height: 100%;
    position: fixed;
    background-color: #fff;
    z-index: 3000;
    justify-content: center
}

.wz-loader.wz-style-3 .wz-box {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #000
}

.wz-loader.wz-style-3 .wz-icon {
    position: relative;
    z-index: 10
}

.w-brd-rad {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.w-box-shadow {
    transition: all 0.3s ease-out 0s;
}

.w-box-shadow:hover {
    box-shadow: 0 5px 47px 4px rgba(214, 211, 211, .75);
}

.img-shadow img {
    border-radius: var(--border-radius-larger);
    box-shadow: rgba(0, 0, 0, 0.192) 4px 9px 12px 1px;
    transition: 0.3s ease-in-out;
}

.img-shadow:hover img {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}


.self-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.self-svg svg.icon {
    width: 100%;
    height: 100%;
    fill: #FFFFFF;
}


.wz-def-gt {
    margin-top: var(--default-gutter-y);
}

.wz-def-gb {
    margin-bottom: var(--default-gutter-y);
}

/*--------------------------------------------------------------
# default btn
--------------------------------------------------------------*/
.w-btn-default-outline span {
    display: contents;
    letter-spacing: 1px;
}

.text-white .w-btn-default-outline {
    color: #FFFFFF;
    border-color: #FFFFFF;

}

.text-white .w-btn-default-outline:hover, .text-white .w-btn-default-outline:focus, .text-white .w-btn-default-outline:active {
    border-color: var(--primary-color);
}

.btn-def i {
    margin-left: 10px;
    font-size: 16px;
    transition: 0.3s;
}

.btn-def:hover i {
    transform: translateX(5px);
}

.btn-def-sm {
    padding: 5px 20px;
}

.btn-def-sm span {
    line-height: 22px;
    font-size: 14px;
}

.first.section-bg {
    margin-top: -25px;
    padding-top: 85px
}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/
.card {
    margin-bottom: 30px;
    border: none;
    border-radius: var(--border-radius-larger);
    box-shadow: 0 5px 47px 4px rgba(var(--primary-color-rgb), .1);
}

.card-header,
.card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;

}

.card-title {
    padding: 30px 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--title-color);
    font-family: var(--heading-font);
}

.card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}

.card-body {
    padding: 0 20px 20px 20px;
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

.index-about {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
}

@media (min-width: 768px) {
    .index-about {
        height: 100vh;
    }
}

.index-about .section-title {
    padding-bottom: 20px;
}

.index-about .content p {
    font-size: 18px;
}

.index-about .btn-def {
    margin-top: 15px
}

.brd-b {
    border-bottom: 1px solid;
}

.brd-t {
    border-top: 1px solid;
}

.brd-b, .brd-t {
    border-color: rgba(var(--border-color-rgb), 0.4);
}

@media (min-width: 768px) {
    .icon-boxes .brd-end-md {
        border-right: 1px solid rgba(var(--border-color-rgb), 0.4);
    }

    .icon-boxes .brd-b-md-0 {
        border-bottom: none;
    }
}


.icon-box {
    position: relative;
}

.icon-box a {
    color: #ffffff;
    display: block;
    position: relative;
    z-index: 5;
}

.icon-box i {
    display: inline-flex;
    font-size: 50px;
    transition: 0.5s;
}

.icon-box:hover i {
    color: var(--secondary-color)
}

.icon-box h4 {
    font-size: 22px;
}

.animated-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.animated-circles .circle {
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
}

.animated-circles.show .c-1 {
    animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards
}

.animated-circles.show .c-2 {
    animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards
}

.animated-circles.show .c-3 {
    animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards
}

@keyframes scaleToggleOne {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    50% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@keyframes scaleToggleTwo {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    20% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    60% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@keyframes scaleToggleThree {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    33% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    66% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

.icon-box .animated-circles .c-1,
.icon-box .animated-circles .c-2,
.icon-box .animated-circles .c-3 {
    transition: 0.8s cubic-bezier(.25, .46, .45, .94);
    transform: scale(0);
    width: 235px;
    height: 235px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -117px 0 0 -117px;
    background: rgba(var(--primary-color-rgb), 0.1);
    border-radius: 50%;
}

.icon-box .animated-circles .c-2 {
    transition-delay: 0.2s;
}

.icon-box .animated-circles .c-3 {
    transition-delay: 0.4s;
}

.icon-box:hover .animated-circles .c-1,
.icon-box:hover .animated-circles .c-2,
.icon-box:hover .animated-circles .c-3 {
    transform: scale(1);
}

.post-box {
    position: relative;
    padding: 20px;
    transition: 0.3s ease-in-out;
    background-color: #FFFFFF;
}

.post-box:hover {
    box-shadow: 0 5px 47px 4px rgba(var(--primary-color-rgb), .1);
}

.post-box .post-date {
    font-size: 14px;
    color: var(--primary-color);
}

.post-box h2.title {
    font-size: 20px;
    line-height: 30px;
    height: 60px;
    overflow: hidden;
    margin-bottom: 15px;
}

.post-box:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 1px;
    background: var(--border-color)
}

.post-box:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 0;
    height: 1px;
    background-image: linear-gradient(var(--linear-gradient));
    transition: all .36s
}

.post-box:hover::after {
    width: 100%
}

.index-product {
    background-image: radial-gradient(circle at right top, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.85) 90%), url('../img/p_bg.png');
    background-size: contain;
    background-position-x: center;
    background-position-y: 120%;
    background-repeat: no-repeat;
    position: relative;
}

.index-product .feature-box:not(:last-child) {
    margin-right: 50px;
}

.index-product .feature-box h2 {
    color: var(--focus-color);
    font-size: 40px;
    font-weight: 600;
}

.index-product .feature-box p {
    font-size: 20px;
    color: var(--title-color);
}

.product-box .img {
    transition: 0.3s ease-in-out;
}

.product-box .img:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}

.lizi canvas {
    position: absolute;
    left: 0;
    bottom: 0;
}

@media (max-width: 992px) {
    .lizi canvas {
        display: none;
    }
}

.index-product .container {
    position: relative;
    z-index: 10;
}

.cross-col2 {
    padding-bottom: 60px;
}

.cross-col2 .content h2.title {
    font-size: 24px;
}

.cross-col2 .content p.desc {
    color: var(--text-color-secondary);
}

@media (min-width: 768px) {
    .cross-col2 {
        padding: 60px 0;
    }

    .cross-col2 .img {
        padding: 30px;
    }

    .cross-col2 .order-first > .img {
        padding-left: 0;
    }

    .cross-col2 .order-first.order-md-last > .img {
        padding-left: 30px;
        padding-right: 0;
    }

}


.banner-inner {
    padding-top: 100px;
    height: 45vh;
    overflow: hidden;
    position: relative;
}

.banner-inner-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-size: cover;
    background-position: center center;
    -webkit-animation: scaleAnim 5s ease forwards;
    animation: scaleAnim 5s ease forwards;
    z-index: -1;
}

.banner-inner-wrapper,
.breadcrumb, .breadcrumb a {
    color: #FFFFFF;
}

.breadcrumb, .breadcrumb a {
    font-size: 14px;
    opacity: 0.6;
}

.breadcrumb {
    margin-top: 10px;
}

.banner-inner-wrapper h3 {
    font-size: 44px;
    letter-spacing: 1px;
}

@keyframes scaleAnim {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.page-nav {
    position: relative;
    margin-top: -25px;
    z-index: 100;
}

.nav-list li {
    display: inline-block;
    margin: 0 10px;
}

.nav-list li a {
    background-color: #FFFFFF;
    color: var(--primary-color);
    font-size: 18px;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.09)
}

.nav-list li a:hover {
    background-color: rgba(var(--primary-color-rgb), 1);
}

.nav-list li.active a {
    background: var(--primary-color);
    color: #FFFFFF;
}

.nav-list li.active a:hover {
    background-color: rgba(var(--primary-color-rgb), 0.8);
}

.sub-title {
    font-size: 36px;
    margin-top: 20px;
}

.profile {
    background-image: radial-gradient(circle at right top, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0.3) 90%), url('../img/profile_bg.jpeg');
    background-size: auto;
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat;
}

.profile-detail p {
    color: #666;
}

.profile-img {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.swiper-bg {
    width: 100%;
    height: 100vh;
}

.culture-box .swiper-bg {
    height: 38vw;
    max-height: 670px;
}

.swiper-bg .swiper-slide {
    background-size: cover;
    background-position: center center;
}


.swiper-culture {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.culture-item {
    position: relative;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: linear 0.5s;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.culture-item.culture-item_inner {
    padding: 15px;
}

.swiper-culture .swiper-wrapper .swiper-slide:nth-child(4) .culture-item {
    border-right: none;
}

.culture-item:before {
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    transition: all 0.36s;
}

.culture-item:hover:before {
    background: rgba(0, 0, 0, 0.6);
}

.swiper-slide-thumb-active .culture-item:before {
    background: rgba(0, 0, 0, 0.6);
}

.culture-item .fr {
    position: absolute;
    top: 0;
    padding: 100px 60px 80px;
    color: #FFFFFF;
    z-index: 20;
    transition: all 0.36s;
}


.culture-item .fr .p {
    margin-top: 20px;
    opacity: 0;
    display: none;
    transition: 0.5s;
}

.culture-item:hover .fr p {
    opacity: 1;
    display: block;
}

.culture-item .fr p {
    margin-bottom: 0.5rem;
}

.staff-mc {
    max-width: calc(960px + 50%);
}

.staff-mc {
    width: calc(50vw + 680px);
}

.staff-item {
    position: relative;
    z-index: 1;
}

.staff-img {
    position: relative;
    overflow: hidden;
}


.staff-item .staff-img:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 40%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

.staff-item .staff-text {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    width: 100%;
    padding: 0 30px;
    transition: all .36s;
}

.staff-item .staff-text .title {
    font-size: 32px;
    font-weight: bold;
    line-height: 46px;
    height: 46px;
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
    overflow: hidden;
}

.staff-item .staff-text .text {
    opacity: 0;
    transition: all .36s;
}

.staff-item .staff-text .text p {
    font-size: 18px;
    line-height: 30px;
    height: 60px;
    overflow: hidden;
    color: #fff;
}

@media screen and (min-width: 1200px) {
    .staff-item:hover .staff-text {
        bottom: 30px;
    }

    .staff-item:hover .staff-text .text {
        opacity: 1;
    }
}

/*发展历程*/
.swiper-btn-box {
    --s: 16px;
    --fill: var(--mcolor);
    --dc: rgba(var(--mcolor-rgb), 0.1);
    --hc: rgba(var(--mcolor-rgb), 0.5);
}

.swiper-btn-box .swiper-btn {
    display: flex;
    position: relative;
}

.swiper-btn-box .swiper-btn .self-svg {
    --size: 100%;
    position: relative;
    border-radius: 5px;
    width: var(--s);
    height: var(--s);
    background-color: transparent;
    transition: background 0.3s;
}

.swiper-btn-box .swiper-btn.prev svg {
    transform: scaleX(-1);
}

.swiper-box .swiper-other {
    padding-top: clamp(0.3rem, 3.645vw, 70px);
}

.swiper-box .swiper-other .swiper-btn {
    flex-shrink: 0;
}

.swiper-box .swiper-other .delay-box {
    width: calc(96.8% - var(--s) * 2);
}

.swiper-box .swiper-other .delay-box .delay-line {
    display: block;
    position: relative;
    background: #dcdcdc;
    height: 2px;
}

.swiper-box .swiper-other .delay-box .delay-line::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--btn-bg);
}

.swiper-box .swiper-other .delay-box.run .delay-line::before {
    animation: swiper-delay-ani var(--anitime) linear;
}

@keyframes cycle-ani {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pointrun1 {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    75% {
        transform: scale(4.5);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.history {
    --anitime: 9.3s;
    position: relative;
    overflow: hidden;
    padding-top: clamp(30px, 3.48vw, 67px);
    padding-bottom: clamp(0.5rem, 6.25vw, 150px);
    background-image: linear-gradient(90deg, var(--primary-color) 0%, #115aba 50%, var(--primary-color) 100%);
}

.history .big-text {
    color: rgba(244, 244, 244, 0.03);
}

.history .auto-title-block .auto-title-des {
    color: #fff;
}

.history .img-cycle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1399px;
}

.history .img-cycle img {
    display: block;
    animation: cycle-ani var(--anitime) linear infinite;
}

.history .auto-title-block .auto-title-h2 {
    color: #ffffff;
}

.history .swiper-box {
    margin-top: clamp(0.35rem, 14.16vw, 160px);
    color: #ffffff;
}

.history .swiper-box .swiper-history .swiper-slide {
    opacity: 0.5;
}

.history .swiper-box .swiper-history .swiper-slide.swiper-slide-active {
    opacity: 1;
}

.history .swiper-box .swiper-history .year {
    font-size: 48px;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 1px;
}

.history .swiper-box .swiper-history .title {
    font-size: 24px;
    margin: 1rem 0;
}

.history .swiper-box .swiper-history .content {
    --point: 6px;
    --lh: 1.7em;
    margin-top: 26px;
    font-size: 16px;
}

.history .swiper-box .swiper-history .content p {
    display: flex;
    margin-bottom: 0;
}

.history .swiper-box .swiper-history .content p::before {
    content: '';
    display: block;
    flex-shrink: 0;
    margin-top: calc((var(--lh) - var(--point)) / 2);
    margin-right: 0.5em;
    border-radius: 50%;
    height: var(--point);
    width: var(--point);
    background: #ffffff;
}

.history .swiper-box .swiper-history .content p + p {
    margin-top: 0.6em;
}

.history .swiper-box .swiper-other {
    margin-top: clamp(0.3rem, 4.76vw, 80px);
}

.history .swiper-box .swiper-thumb {
    --anstime: 3s;
    --pw: 12px;
    --pad: 45px;
    margin: calc(var(--pad) * -1) 0;
    width: calc(95% - var(--s) * 2);
    padding: var(--pad) 0;
}

.history .swiper-box .swiper-thumb::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    width: 100%;
    background: #ffffff;
}

.history .swiper-box .swiper-thumb .swiper-slide {
    position: relative;
    cursor: pointer;
    text-align: center;
}

.history .swiper-box .swiper-thumb .swiper-slide.swiper-slide-thumb-active .point {
    opacity: 0;
}

.history .swiper-box .swiper-thumb .swiper-slide.swiper-slide-thumb-active .logo {
    opacity: 1;
}

.history .swiper-box .swiper-thumb .swiper-slide.swiper-slide-thumb-active .year {
    opacity: 1;
}

.history .swiper-box .swiper-thumb .icon {
    display: block;
    position: relative;
}

.history .swiper-box .swiper-thumb .point {
    display: block;
    margin: 0 auto;
    position: relative;
    border-radius: 50%;
    border: 3px solid #7d9de3;
    width: calc(var(--pw) * 1);
    height: calc(var(--pw) * 1);
    background-color: #e4eff5;
}

.history .swiper-box .swiper-thumb .point::before,
.history .swiper-box .swiper-thumb .point::after {
    content: '';
    display: block;
    position: absolute;
    left: 0%;
    top: 0%;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(31deg, #2244b1 0%, #115aba 65%, #006fc3 100%), linear-gradient(#e4eff5, #e4eff5);
    background-blend-mode: normal, normal, normal;
    animation: pointrun1 var(--anstime) infinite;
}

.history .swiper-box .swiper-thumb .point::after {
    animation-delay: 0.75s;
}

.history .swiper-box .swiper-thumb .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.history .swiper-box .swiper-thumb .logo img {
    display: block;
}

.history .swiper-box .swiper-thumb .year {
    position: absolute;
    margin-top: 1em;
    width: 100%;
    font-size: 20px;
    line-height: 1.4em;
    opacity: 0.5;
}

.history .swiper-box .swiper-btn .self-svg {
    --fill: #ffffff;
}

@media (max-width: 1700px) {
    .history .swiper-box {
        margin-top: clamp(0.35rem, 10vw, 272px);
    }

    .history .swiper-box .swiper-history .year {
        font-size: 44px;
    }

    .history .swiper-box .swiper-history .p {
        margin-top: 22px;
    }

    .history .swiper-box .swiper-history .p p + p {
        margin-top: 0.5em;
    }

    .history .swiper-box .swiper-other {
        margin-top: clamp(0.3rem, 4vw, 80px);
    }
}

@media (max-width: 1600px) {
    .swiper-box .swiper-other {
        padding-top: clamp(0.3rem, 2.8vw, 70px);
    }

    .history .swiper-box {
        margin-top: clamp(0.35rem, 7vw, 272px);
    }

    .history .swiper-box .swiper-history .year {
        font-size: 40px;
    }

    .history .swiper-box .swiper-history .p {
        margin-top: 18px;
        font-size: 20px;
    }

    .history .swiper-box .swiper-other {
        margin-top: clamp(0.3rem, 3.6vw, 80px);
    }
}

@media (max-width: 1500px) {
    .history .swiper-box .swiper-history .year {
        font-size: 36px;
    }
}

@media (max-width: 1200px) {
    .swiper-box .swiper-other {
        padding-top: 0.3rem;
    }

    .history {
        padding-top: 47px;
        padding-bottom: 47px;
    }

    .history .swiper-box {
        margin-top: 22px;
        margin-bottom: 32px;
    }

    .history .swiper-box .swiper-history .year {
        text-align: center;
        font-size: 32px;
    }

    .history .swiper-box .swiper-history .p {
        margin-top: 12px;
        font-size: 18px;
    }

    .history .swiper-box .swiper-other {
        margin-top: 6px;
    }

    .history .swiper-box .swiper-thumb {
        --anstime: 3s;
        --pw: 12px;
        --pad: 42px;
    }

    .history .swiper-box .swiper-thumb .logo {
        width: 22px;
    }

    .history .swiper-box .swiper-thumb .year {
        margin-top: 12px;
        font-size: 18px;
    }
}

.client-box {
    padding: 15px;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-out 0s;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
}

.client-box:hover {
    transform: translateY(-5px);
}

.client-box img {
    max-height: 85px;
}

.capacity-img {
    padding: 20px;
}

.capacity-text {
    font-size: 18px;
    margin-bottom: 2em;
}

.capacity-list .title {
    font-size: 20px;
    color: var(--primary-color);
}

.capacity-list p.desc {
    font-size: 40px;
    color: var(--focus-color);
    font-weight: 600;
}


.global-map {
    padding: 0px 0;
    width: 100%;
    background: #fff;
    overflow: hidden;
}

.box-map {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}

.box-map img {
    display: block;
    width: 100%;
    height: auto;
}

.point-box {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.point {
    width: 170%;
    cursor: pointer;
    height: 170%;
    border-radius: 50%;
    position: relative;
}

.point-box .inner {
    opacity: 1;
    transition: 0.5s;
}

.point-click:hover .inner {
    opacity: 1;
}

.point-click span {
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

/*新加坡*/
.point_singapore {
    left: 77.6%;
    top: 63.2%;
}

.point_wuxi {
    left: 82%;
    top: 50.5%;
}

.point_xuzhou {
    left: 79.9%;
    top: 44.2%;
}

.point_xuzhou .inner {
    color: #0070BC !important;
    top: 4px;
    left: 28px;
}

.point_anhui {
    left: 79.4%;
    top: 45.7%;
}

.point_anhui .inner {
    color: #0070BC !important;
    top: 15px;
    left: -20px;
}

.point::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.point::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    opacity: 0;
}

.green .point::after {
    background: #83c93e;
}

.green .point::before {
    background-color: #83c93e;
    -webkit-animation: roundScale 1.5s infinite linear;
    animation: roundScale 1.5s infinite linear 0.2s;
}

.orange .point::after {
    background: var(--focus-color);
}

.orange .point::before {
    background-color: var(--focus-color);
    -webkit-animation: roundScale 1.5s infinite linear;
    animation: roundScale 1.5s infinite linear 0.2s;
}

.blue .point::after {
    background: #0175be;
}

.blue .point::before {
    background-color: #0175be;
    -webkit-animation: roundScale 1.5s infinite linear;
    animation: roundScale 1.5s infinite linear 0.4s;
}

.inner {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
    position: absolute;
    left: 30px;
    top: 5px;
    width: auto;
    font-size: 14px;
    display: flex;
    z-index: 2;
    white-space: nowrap;
}


.infobox {
    display: flex;
    justify-content: center;
}

.infobox .point-box {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    transform: none;
    margin-right: 15px;
}

.infobox .point-box .point {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    margin-bottom: 0;
}

.infobox .point-box .inner {
    opacity: 1;
    position: relative;
    left: auto;
    top: auto;
}

.infobox .globalization .base-list li {
    color: var(--text-color-secondary);
    font-size: 14px;
}

@media screen and (max-width: 998px) {
    .point-box .inner {
        opacity: 0;
    }

    .infobox .globalization {
        width: 33.3333%;
    }


    .infobox .point-box .inner {
        font-size: 1rem;
    }
}

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


    .infobox {
        display: flex;
        justify-content: left;
        flex-direction: column;
    }

    .infobox .globalization {
        margin-bottom: 1rem;
        width: 100%;
    }

}

@keyframes roundScale {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0.2;
    }
    25% {
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0.3;
    }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.5;
    }
    75% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.0;
    }
}

/*--------------------------------------------------------------
# Jobs
--------------------------------------------------------------*/
.box-jobs {
    padding: 20px 30px;
    background-color: #FFFFFF;
    margin-bottom: 30px;
    border-radius: var(--border-radius-larger);
    position: relative;
    transition: all 0.3s ease-out;
    overflow: hidden;
}

.box-jobs:hover,
.box-jobs:has(.jobs-body.show) {
    box-shadow: 0 5px 47px 4px rgba(var(--primary-color-rgb), .1);
}

.box-jobs:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    bottom: 0;
    background-image: linear-gradient(var(--linear-gradient));
    width: 0;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.box-jobs:hover:after,
.box-jobs:has(.jobs-body.show):after {
    width: 100%;
    opacity: 1;
}


.box-jobs .jobs-header {
    padding: 10px 0;
    position: relative;
}

.box-jobs .jobs-header h3 {
    font-size: 20px;
    font-weight: 600;
}

.box-jobs .jobs-header p {
    font-size: 14px;
    padding: 5px 0;
    color: var(--text-color-secondary);
    margin-bottom: 0;

}

.box-jobs .jobs-header p span b {
    font-weight: 600;
}

.box-jobs .jobs-header .accordion-icon {
    position: absolute;
    right: 0;
    top: 10px;
}

.box-jobs .jobs-header .accordion-icon i {
    font-size: 30px;
    font-weight: 400;
}

.box-jobs .jobs-body {
    margin: 1.5rem 0;
}

.box-jobs .jobs-body strong, .box-jobs .jobs-body b {
    font-weight: 600;
}

.box-jobs .jobs-body .content p {
    margin-bottom: 8px;
}

.box-jobs .jobs-body .content button {
    margin-top: 1.5rem;
}

#jobs [aria-expanded="false"] .accordion-icon i:nth-child(1) {
    display: inline;
}

#jobs [aria-expanded="false"] .accordion-icon i:nth-child(2) {
    display: none;
}

#jobs [aria-expanded="true"] .accordion-icon i:nth-child(1) {
    display: none;
}

#jobs [aria-expanded="true"] .accordion-icon i:nth-child(2) {
    display: inline;
    color: var(--primary-color);
}

#hr_contact .modal-body p {
    margin-bottom: 5px;
}

#hr_contact .modal-body input, #hr_contact .modal-body input:focus {
    border: none;
    outline: none !important;
}

#hr_contact .btn-clipboard {
    font-size: 12px;
    color: var(--text-color-secondary);
    border: none;
    background-color: transparent;
}

.solution .cat-sol:not(:last-child) {
    margin-bottom: 120px;
}

.solution-box .title {
    position: relative;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 24px;
}

.solution-box .title:after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 2px;
    background-image: linear-gradient(var(--linear-gradient));
    bottom: -8px;
    left: 0;
}

.solution-box .desc {
    color: var(--text-color-secondary);
}

.solution-box .text-end .title:after {
    left: auto;
    right: 0;
}

.solution-box .img {
    box-shadow: rgba(0, 0, 0, 0.192) 4px 9px 12px 1px;
    transition: 0.3s ease-in-out;
    border-radius: var(--border-radius-larger);
    margin-bottom: 30px;
}

.solution-box .item {
    overflow: hidden;
}

.solution-box .img:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}

.solution-box .content {
    padding: 10px;
}

.params-table table {
    width: 100%;
}

.params-table tbody tr {
    border-bottom: solid 1px var(--border-color);
}

.params-table tbody tr td {
    width: 303px !important;
    font-size: 18px;
    color: #131313;
    line-height: 1.6;
    padding: 13px 0;
}

.params-table tbody tr td:first-child {
    width: 190px !important;
    color: #676767;
    padding-left: 10px;
}

.params-table {
    white-space: nowrap;
    overflow: auto;
}

.product-feature-box {
    padding-bottom: 60px;
}

.feature-box__icon, .flow-box, .file-box {
    padding: 20px;
    position: relative;
    border-radius: var(--border-radius-larger);
}


.feature-box__icon .icon {
    width: 64px;
}

.feature-box__icon h3.title,
.flow-box h3.title {
    font-size: 24px;
    font-weight: 600;
    padding-top: 20px;
    padding-bottom: 30px;
    color: var(--primary-color);
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}


.feature-box__icon h3.title::after,
.flow-box h3.title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    bottom: -1px;
    background-image: linear-gradient(var(--linear-gradient));
    width: 0;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.feature-box__icon:hover h3.title::after,
.flow-box:hover h3.title::after {
    opacity: 1;
    width: 100%;
}

.feature-box__icon p {
    font-size: 18px;
    color: var(--text-color-secondary);
}

.flow-box, .file-box {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: radial-gradient(circle at top left, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.97) 100%), url('../img/logo_bg.png');
}

.flow-box .number {
    transition: all 0.3s ease-out;
    position: absolute;
    right: 10px;
    bottom: -40px;
    z-index: 1;
    font-size: 80px;
    color: rgba(0, 0, 0, 0.1);
}

.flow-box:hover .number {
    bottom: -10px;
}

.flow-box h3.title {
    padding-top: 10px;
    padding-bottom: 30px;
    color: var(--primary-color);
    padding-left: 20px;
}

.flow-box h3.title::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 15px;
    font-size: 16px;
    line-height: inherit;
    color: var(--primary-color);
}

.flow-box .content {
    position: relative;
    z-index: 2;
}

@media (min-width: 992px ) {
    .flow-box .content {
        height: 115px;
        overflow: hidden;
    }
}

@media (min-width: 1200px ) {
    .flow-box .content {
        height: 90px;
        overflow: hidden;
    }
}

.flow-box .content p {
    font-size: 16px;
    color: var(--text-color-secondary);
    line-height: 26px;
    margin-bottom: 5px;
}


.file-box .content {
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.file-box .content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    bottom: -1px;
    background-image: linear-gradient(var(--linear-gradient));
    width: 0;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.file-box:hover .content::after {
    opacity: 1;
    width: 100%;
}

.file-box .content .title {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    padding-top: 10px;
    color: var(--primary-color);
    margin-bottom: 20px;
    position: relative;
    padding-left: 18px;
}

.file-box .content .title::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 16px;
    line-height: inherit;
    color: var(--primary-color);
}

.file-box .content .post-date {
    font-size: 14px;
    color: var(--text-color-secondary)
}

.article .article-title {
    height: 25vh;
    margin-bottom: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: radial-gradient(circle at top left, rgba(246, 249, 255, 0.98) 0%, rgba(246, 249, 255, 0.97) 100%), url('../img/logo_bg.png');
    background-color: var(--light-bg-color);
}

.article .article-title h2 {
    padding-top: 12vh;
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: bold;
}

.article .article-title p.date {
    color: var(--text-color-secondary);
}

@media (max-width: 768px) {
    .article .article-title {
        margin-bottom: 30px;
    }

    .article .article-title h2 {
        padding-top: 10vh;
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .article .article-title p.date {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .article .article-body img {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1200px) {
    .article .article-body p {
        font-size: 18px;
    }
}

.contact {
    position: relative;
}

.w-1920 {
    width: 1920px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    top: 0;
}

.w-1920__le {
    width: 77.8%;
    background: var(--light-bg-color);
    padding-top: 145px;
    padding-bottom: 77px;
    padding-left: 320px;
    overflow: hidden;
    height: 100%;
}

@media screen and (max-width: 1680px) {
    .w-1920__le {
        padding-top: 120px;
        padding-bottom: 75px;
        padding-left: 8.75%;
    }
}

@media screen and (max-width: 1440px) {
    .w-1920__le {
        padding-top: 100px;
        padding-bottom: 70px;
        padding-left: 8.75%;
    }
}

@media screen and (max-width: 1280px) {
    .w-1920__le {
        padding-top: 80px;
        padding-bottom: 60px;
        padding-left: 8.75%;
    }
}

@media screen and (max-width: 1200px) {
    .w-1920__le {
        padding-top: 80px;
        padding-bottom: 60px;
        padding-left: 40px;
    }
}

@media screen and (max-width: 1199px) {
    .ctact_tp_le {
        width: 100%;
        padding-top: 80px;
        padding-bottom: 30px;
        padding-left: 40px;
    }
}

@media screen and (max-width: 768px) {
    .w-1920__le {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 30px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (max-width: 767px) {
    .w-1920__le {
        padding-left: 20px;
        padding-right: 20px;
    }
}


.w-1920__ri {
    width: 53%;
    overflow: hidden;
    position: absolute;
    right: 0;
    border-radius: 15px 0 0 15px;
    bottom: 75px;
    z-index: 20;
}


@media screen and (max-width: 1680px) {
    .w-1920__ri {
        width: 52%;
        overflow: hidden;
        position: absolute;
        right: 0;
        bottom: 75px;
    }
}

@media screen and (max-width: 1440px) {
    .w-1920__ri {
        bottom: 65px;
        border-radius: 15px 0 0 15px;
    }
}

@media screen and (max-width: 1440px) {
    .w-1920__ri {
        width: 50%;
        bottom: 75px;
        border-radius: 15px 0 0 15px;
    }
}

@media screen and (max-width: 1280px) {
    .w-1920__ri {
        width: 48%;
        bottom: 75px;
        border-radius: 15px 0 0 15px;
    }
}

@media screen and (max-width: 1199px) {
    .w-1920__ri {
        width: 50%;
        bottom: auto;
        top: 170px;
    }
}

.contact-main {
    position: relative;
    z-index: 10;
}

@media screen and (max-width: 991px) {
    .w-1920__ri {
        width: 43%;
        bottom: auto;
        top: 265px;
    }
}


@media screen and (max-width: 768px) {
    .w-1920__ri {
        width: 100%;
        bottom: auto;
        top: 170px;
        position: static;
        border-radius: 15px;
        background: #f7f8fa;
        padding: 0 20px;
    }
}


.contact-icon-box {
    margin-top: 30px;
}

.contact-icon-box .icon > i, .contact-icon-box .icon > em {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 22px;
    line-height: 0;
    transition: all 0.4s ease-out 0s;
    background-color: var(--white-color);
    color: var(--primary-color);
    margin-right: 25px;
}

.contact-icon-box:hover .icon > i,
.contact-icon-box:hover .icon > em {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.contact-icon-box .detail h3 {
    font-size: 20px;
}

.contact-icon-box .detail p {
    color: var(--text-color-secondary);
    margin-bottom: 0;
}

.contact-info h2 {
    font-size: 32px;
    color: var(--title-color);
    margin-bottom: 2em;
}

.contact-icon-box .detail h3 > a {
    font-size: 14px;
    color: var(--text-color-secondary);
}

.contact-box {
    position: relative;
    border-radius: var(--border-radius-larger);
    box-shadow: 0 5px 30px 4px rgba(var(--primary-color-rgb), .05);
}

.contact-box:hover {
    box-shadow: 0 5px 47px 4px rgba(var(--primary-color-rgb), .1);
}

.contact-box:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 0;
    height: 2px;
    background-image: linear-gradient(var(--linear-gradient));
    transition: all .36s
}

.contact-box:hover:after {
    width: 100%
}

.contact-box .img {
    overflow: hidden;
    position: relative;
    padding-top: 42.8571%;
}

.contact-box .img img {
    display: block;
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.contact-box .img::after {
    background: var(--primary-color);
    opacity: 0.33;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.contact-box:hover .img::after {
    opacity: 0;
}

.contact-box .box {
    width: 90%;
    margin: 0 auto;
    position: relative;
    --is: 68px;
    margin-top: calc((var(--is) / -2));
    min-height: 200px;
}

.contact-box .box i {
    display: block;
    width: var(--is);
    height: var(--is);
    font-size: 30px;
    line-height: var(--is);
    color: var(--primary-color);
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 1px rgba(14, 11, 11, 0.23);
    border-radius: 50%;
    transition: all 0.3s;
    text-align: center;

}

.contact-box .box h3 {
    margin-top: 20px;
    font-size: 20px;
    margin-bottom: 15px;
}

.contact-box .box .content, .contact-box .box .content p {
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--text-color-secondary);
}

.contact-box:hover .box i {
    background: var(--primary-color);
    color: #FFFFFF;
}


/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    top: 60px;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}


.sidebar-nav .nav-header {

}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-item {
    margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
    font-size: 22px;
    text-transform: uppercase;
    color: var(--title-color);
    font-weight: 600;
    margin: 10px 0 25px 20px;
}

.sidebar-nav .nav-heading i {
    margin-right: 10px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-color);
    transition: 0.3s;
    padding: 12px 25px;
    border-radius: 4px;
}

.sidebar-nav .nav-link.active {
    background: #f6f9ff;
    color: var(--focus-color);
}

.sidebar-nav .nav-link i {
    font-size: 14px;
    margin-right: 10px;
    color: var(--primary-color);
}

.sidebar-nav .nav-link.collapsed {
    background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
    color: #899bbd;
}

.sidebar-nav .nav-link:hover {
    color: var(--focus-color);
    background: #f6f9ff;
}

.sidebar-nav .nav-link:hover i {
    color: #4154f1;
}

.sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 0;
    transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-nav .nav-content {
    padding: 5px 0 0 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 0 10px 30px;
    transition: 0.3s;
}

.sidebar-nav .nav-content a i {
    font-size: 6px;
    margin-right: 8px;
    line-height: 0;
    border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--focus-color);
    background: #f6f9ff;
}

.sidebar-nav .nav-content a.active i {
    background-color: var(--focus-color);
}

.product-list-item .product-module:not(:last-child) {
    margin-bottom: 30px;
}

.product-list-item .product-module .files-lists li a {
    color: var(--text-color-secondary);
}

@media (max-width: 768px) {

    .index .section-title h2,
    .layout .section-title h2 {
        text-align: center;
        font-weight: normal;
    }

    .index .section-title h2:after, .layout .section-title h2:after {
        left: calc(50% - 25px);
    }

    .index-product .feature-box h2 {
        font-size: 28px;
    }

    .index-product .feature-box p {
        font-size: 1rem;
    }

    .post-box h2.title {
        font-size: 18px;
    }

    .banner-inner {
        height: 30vh;
    }

    .banner-inner-wrapper {
        text-align: center;
    }

    .banner-inner-wrapper h3 {
        font-size: 30px;
    }

    .history .swiper-box .swiper-history .title {
        font-size: 20px;
        text-align: center;
    }

    .history .swiper-box .swiper-history .content {
        text-align: center;
    }

    .sub-title {
        font-size: 26px;
    }

    .content .title a {
        font-size: 18px;
    }


    .infobox .point-box {
        transform: unset;
        margin-right: 0;
    }

    .contact-info h2 {
        text-align: center;
    }

    .contact-box .box .content, .contact-box .box .content p {
        font-size: 14px;
    }

    .cross-col2 .content h2.title,
    .product-box .content .title a {
        font-size: 20px;
    }

    .params-table tbody tr td {
        font-size: 14px;
    }

    .flow-box .content p,
    .box-jobs .content p {
        font-size: 14px;
    }
}