:root {
        --main-color: #AEF731;
        --color-blue: #3FC6FF;
        --color-dark: #242831;
        --color-grey: #d6d6d8;

        --bezier-mazel: cubic-bezier(0, 0, .58, 1);
        --bezier-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --animation-duration: 0.275s;
        --f-size-18: 18px;
        --f-size-20: 20px;
        --f-size-25: 25px;
        --f-size-30: 30px;
        --f-size-48: 48px;
        --f-size-50: 50px;
        --f-size-60: 60px;
        --f-size-80: 80px
}

html,
body,
div,
p,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
select,
button,
textarea,
iframe,
table,
th,
td,
header,
section,
article {
        margin: 0;
        padding: 0
}

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

body {
        font-family: "SourceHanSans", "思源黑体", "SourceHanSansCN", "PingFang SC", "Helvetica Neue", "Source Han Sans CN", "sans-serif", "Arial", "Hiragino Sans GB", "黑体";
        font-size: var(--f-size-20);
        color: rgba(255, 255, 255, .6);
        line-height: 1.5;
        text-align: justify;
        background-color: #4c6ebb;
        overflow-x: hidden
}

img {
        width: 100%;
        border: 0 none;
        vertical-align: top;
        outline: none
}

ul,
li {
        list-style-type: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
        font-weight: normal
}

input,
button,
textarea {
        font-family: "PingFang SC", "Microsoft YaHei", "Arial", "Sans-serif", "Helvetica";
        border-radius: 0;
        border: 0
}

button {
        cursor: pointer
}

i,
em,
cite,
u {
        font-style: normal
}

input:focus,
textarea:focus {
        outline: none
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
        color: #999
}

input:-moz-placeholder,
textarea:-moz-placeholder {
        color: #999
}

input::-moz-placeholder,
textarea::-moz-placeholder {
        color: #999
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
        color: #999
}

a {
        color: rgba(255, 255, 255, .6);
        text-decoration: none;
        outline: none;
        cursor: pointer
}

a:hover {
        text-decoration: none;
        color: var(--main-color)
}

a:focus {
        outline: none
}

.clearfix {
        *zoom: 1
}

.clearfix:after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
        font-size: 0
}

.fl {
        float: left
}

.fr {
        float: right
}

a,
button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body.modal-open {
        position: fixed;
        width: 100%
}

.header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999
}

.header .inner {
        position: relative;
        z-index: 100;
        max-width: 2560px;
        margin-left: auto;
        margin-right: auto;
        padding: 30px 60px 30px 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
}

.header::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #383e4c;  /* background-color: #383a42; */
        z-index: 1;
        transform: translate3d(0, -150%, 0);
        transition: all .375s ease-in
}

.header.scrolling::after {
        transform: translate3d(0, 0, 0)
}

.m-nav-switch {
        display: none
}

.logo {
        width: 173px;
        height: 30px;
        background: url(../images/logo_home.png) no-repeat;
        background-size: 100% auto !important;
        display: inline-block
}

.nav ul {
        display: flex
}

.nav li {
        line-height: 44px;
        position: relative;
        font-size: 18px;
        cursor: pointer
}

.nav li a {
        color: #fff;
        display: inline-block;
        padding: 0 40px;
        position: relative
}

.nav li a.first-level-menu::after {
        content: "";
        width: 6px;
        height: 6px;
        background-color: var(--main-color);
        position: absolute;
        left: 50%;
        margin-left: -3px;
        bottom: 0;
        border-radius: 50%;
        transform: scale(0);
        opacity: 0;
        transition: all .275s linear
}

.nav li a.first-level-menu {
        display: flex;
        align-items: center
}

.nav li a.first-level-menu .icon-arrow-d {
        margin-left: 5px
}

.nav li .m-drop-arrow {
        display: none
}

.nav li.drop-menu:hover .drop-content {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        height: auto;
        overflow: initial
}

.nav li .drop-content {
        width: 270px;
        height: 0;
        overflow: hidden;
        transition: transform .275s ease-in, opacity .375s linear;
        opacity: 0;
        transform: translate3d(0, 25%, 0);
        padding-top: 17px;
        position: absolute;
        left: 50%;
        margin-left: -80px;
        top: 43px
}
/*导航菜单*/
.nav li .drop-content .item {
        
        width: 160px;
        background-color: #383e4c;
        line-height: 50px;
        position: relative;
        cursor: pointer;
        border: 1px solid #383e4c;    /* 设置边框       */
        /*border-radius: 5px;              设置圆角的半径  */
        padding: 2px;                   /* 设置内边距      */
        margin: 2px;                    /* 设置外边距      */
}

.nav li .drop-content .item:last-child {
        border-bottom: none
}

.nav li .drop-content .item>a {
        color: rgba(255, 255, 255, .5);
        padding: 0 0 0 35px;
        display: flex;
        align-items: center
}

.nav li .drop-content .item>a .txt {
        margin-right: 10px
}

.nav li .drop-content .item>a .icon-arrow-r {
        opacity: .5
}

.nav li .drop-content .item .drop__cont {
        width: 0;
        overflow: hidden;
        position: absolute;
        background-color: #282c37;
        left: 100%
}

.nav li .drop-content .item .drop__cont a {
        width: 208px;
        box-sizing: border-box;
        display: block;
        color: rgba(255, 255, 255, .5);
        padding-left: 35px
}

.nav li .drop-content .item .drop__cont a:last-child {
        border-bottom: none
}

.nav li .drop-content .item .drop__cont a.current,
.nav li .drop-content .item .drop__cont a:hover {
        background-color: #2b3d4b;
        color: var(--color-blue)
}

.nav li .drop-content .item:nth-child(1) .drop__cont {
        top: 0px
}

.nav li .drop-content .item:nth-child(2) .drop__cont {
        top: -60px
}

.nav li .drop-content .item:nth-child(3) .drop__cont {
        top: -120px
}

.nav li .drop-content .item:nth-child(4) .drop__cont {
        top: -180px
}

.nav li .drop-content .item.current,
.nav li .drop-content .item:hover {
        background-color: #394b5f
}

.nav li .drop-content .item.current>a,
.nav li .drop-content .item:hover>a {
        color: var(--main-color)  /*--color-blue 改成 main-color*/
}

.nav li .drop-content .item.current>a .icon-arrow-r,
.nav li .drop-content .item:hover>a .icon-arrow-r {
        background-position: -9px 0;
        opacity: 1
}

.nav li .drop-content .item.current .drop__cont,
.nav li .drop-content .item:hover .drop__cont {
        width: 208px;
        transition: all .275s ease-in
}

.nav li.lang-switch {
        margin-left: 30px
}

.nav li.lang-switch>a {
        padding-right: 0
}

.nav li.lang-switch::after {
        content: "";
        width: 1px;
        height: 14px;
        background-color: #fff;
        opacity: .8;
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translate(0, -50%)
}

.nav li.current a,
.nav li:hover a {
        color: var(--main-color)
}

.nav li.current a .icon-arrow-d,
.nav li:hover a .icon-arrow-d {
        transform: rotate(180deg)
}

.nav li.current a.first-level-menu::after,
.nav li:hover a.first-level-menu::after {
        transform: scale(1);
        opacity: 1
}

.icon-arrow-d {
        width: 14px;
        height: 6px;
        background: url(../images/icon-arrow-d.png) no-repeat;
        background-size: cover;
        display: inline-block;
        transition: all .275s ease-in
}

.icon-arrow-r {
        width: 9px;
        height: 14px;
        background: url(../images/icon-arrow-r.png) no-repeat;
        background-size: 18px 14px;
        display: inline-block
}

.wrap-box {
        width: 1440px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 21
}

.wrap-box-1200 {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 21;
        padding: 0 25px
}

.green,
a.green {
        color: var(--main-color) !important
}

a.green:hover {
        text-decoration: underline
}

.blue {
        color: var(--color-blue) !important
}

.footer {
        max-width: 2560px;
        min-height: 40vh;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to top, #383e4c, #4c6ebb);

}

.footer .filling {
        width: 100%;
        box-sizing: border-box;
        padding: 0 25px;
        text-align: center;
        transform: translate(-50%, 0);
        position: absolute;
        left: 50%;
        bottom: 60px;
        z-index: 10;
        font-size: 14px;        
}

.footer .beian {
        width: 100%;
        box-sizing: border-box;
        padding: 0 25px;
        text-align: center;
        transform: translate(-50%, 0);
        position: absolute;
        left: 50%;
        bottom: 40px;
        z-index: 10;
        font-size: 14px;        
}

.footer .thin-line {
        padding-bottom: 1px;
        margin-bottom: 1px;
        width: 120px;
        font-size: 14px;
        border-bottom: 1px solid #9fa5b1;        
}

.footer .nav {
        padding-top: 10px;
        padding-bottom: 1px;
        margin-bottom: 1px;
        font-size: 14px;   
}

.footer .nav-item {
        padding-top: 3px;
        padding-bottom: 1px;
        margin-bottom: 1px;
        font-size: 14px;   
}
.footer .infor-tab-cont{
        width: 320px;
        font-size: 14px;
}

.footer .copyright {
        width: 100%;
        box-sizing: border-box;
        padding: 0 25px;
        text-align: center;
        transform: translate(-50%, 0);
        position: absolute;
        left: 50%;
        bottom: 20px;
        z-index: 10;
        font-size: 14px;
 
}

.footer .lattice-5 {
        right: -180px;
        top: -200px
}

.footer .lattice-6 {
        left: -108px;
        top: -120px;
        z-index: 2
}

.footer .lattice-group {
        top: 24%;
        right: 36%;
        z-index: 1
}

.footer .wrap-box {
        z-index: 20
}

.footer .video-bg {
        top: 5%
}

.footer .video-bg::after {
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
        z-index: 2;
        /* background: linear-gradient(180deg, rgb(76, 110, 187) 3%, rgba(36, 40, 49, 0) 94%); */
        background: linear-gradient(to top, #383e4c, #4c6ebb);

}

.footer-cont {
        display: flex;
        justify-content: space-between;
        padding-bottom: 100px
}

.footer-cont .infor-box {
        width: 310px
}

.footer-cont .infor-box .WX-code {
        max-width: 135px;
        margin-top: 35px;
        text-align: center
}

.form-box {
        width: 72.25%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
}

.form-box .form-item {
        width: 50%;
        box-sizing: border-box;
        padding-right: 60px;
        margin-bottom: 18px
}

.form-box .form-item.textarea-item {
        width: 100%
}

.form-box .form-item .label {
        display: block;
        padding-bottom: 6px
}

.form-box .form-item .tel-item {
        position: relative
}

.form-box .form-item .tel-item i {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%)
}

.form-box .form-item .tel-item .input {
        padding-left: 50px
}

.form-box .form-item .input {
        width: 100%;
        box-sizing: border-box;
        padding: 15px 0;
        font-size: var(--f-size-20);
        color: #fff;
        background: rgba(0, 0, 0, 0);
        border: none;
        border-bottom: 1px rgba(255, 255, 255, .6) solid
}

.form-box .form-item .input::placeholder {
        color: rgba(255, 255, 255, .7)
}

.form-box .form-item .input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, .2)
}

.form-box .form-item .select-item {
        width: 100%
}

.form-box .form-item .select-item .select-text {
        padding: 12px 0
}

.form-box .form-item .textarea {
        width: 100%;
        min-height: 100px;
        border: 1px rgba(255, 255, 255, .6) solid;
        background: none;
        box-sizing: border-box;
        padding: 10px;
        color: #fff;
        font-size: var(--f-size-20)
}

.mobile-show {
        display: none !important
}

.mobile-hide {
        display: block !important
}

.contact-infor-tabbox .infor-tab-nav {
        padding-top: 35px;
        padding-bottom: 12px
}

.contact-infor-tabbox .infor-tab-nav .item {
        cursor: pointer;
        padding: 0 25px;
        display: inline-block;
        position: relative
}

.contact-infor-tabbox .infor-tab-nav .item:first-child {
        padding-left: 0
}

.contact-infor-tabbox .infor-tab-nav .item:first-child::before {
        display: none
}

.contact-infor-tabbox .infor-tab-nav .item::before {
        content: "";
        width: 1px;
        background-color: rgba(255, 255, 255, .3);
        position: absolute;
        left: 0;
        top: 3px;
        bottom: 3px
}

.contact-infor-tabbox .infor-tab-nav .active {
        color: #fff;
        font-size: 1.25em
}

.select-item {
        position: relative
}

.select-item .select-text {
        display: block;
        box-sizing: border-box;
        border-bottom: 1px rgba(255, 255, 255, .6) solid;
        color: #fff;
        position: relative;
        cursor: pointer
}

.select-item .select-text::after {
        content: "";
        width: 32px;
        height: 17px;
        background-image: url(../images/arrow-d@2x.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -8px;
        opacity: .5;
        transition: transform .275s linear
}

.select-item.opened .select-text::after {
        transform: rotate(180deg)
}

.select-item.opened .select-options {
        transform: scaleY(1)
}

.select-item .select-options {
        background-color: #383e4d;
        transform: scaleY(0);
        transform-origin: top center;
        transition: transform .275s linear;
        position: absolute;
        left: 0;
        right: 0
}

.select-item .select-options li {
        cursor: pointer;
        padding: 6px 15px;
        color: #a9aaad;
        margin-bottom: 1px
}

.select-item .select-options li.selected,
.select-item .select-options li:hover {
        background-image: url(../images/icon-confirm.png);
        background-repeat: no-repeat;
        background-size: 32px 32px;
        background-position: right center;
        background-origin: content-box;
        background-color: #384c5f;
        color: var(--main-color)
}

.bot-logo {
        width: 200px;
        display: block
}

/*2024-02-02 添加：底部菜单样式*/
.footer-inner-container h1 {
        padding-bottom: 10px;
        margin-bottom: 20px;
        width: 120px;
        font-size: 14px;
        border-bottom: 1px solid #263758;
    }

.top-banner {
        max-width: 2560px;
        height: 100vh;
        min-height: 600px;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: cover
}

.top-banner .wrap-box {
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 10
}

.top-banner .inner-cont {
        font-size: var(--f-size-60);
        position: relative
}

.top-banner .inner-cont h3 {
        font-size: inherit;
        color: #fff;
        font-weight: bold;
        padding-bottom: .675em;
        position: relative;
        z-index: 32
}

.top-banner .inner-cont .en {
        font-size: .6em;
        line-height: 1.1;
        font-weight: 300;
        position: relative;
        z-index: 32
}

.top-banner .inner-cont .zh {
        width: 590px;
        font-size: .535em;
        line-height: 1.4;
        font-weight: 300;
        position: relative;
        z-index: 32
}

.top-banner .inner-cont .lattice-group {
        left: 39.5%;
        top: -160px
}

.top-banner .lattice-1 {
        left: 3.125%;
        bottom: 0
}

.top-banner .lattice-2 {
        right: 3.125%;
        bottom: 8.611%
}

.top-banner .lattice-item3 {
        left: 8.615%;
        bottom: 15.74%
}

.top-banner.banner-index .lattice-group {
        top: 20%;
        left: 29.65%
}

.top-banner.banner-about .lattice-1 {
        bottom: auto;
        top: 150px
}

.top-banner.banner-about .lattice-2 {
        right: 0;
        bottom: 0
}

.top-banner.banner-about .lattice-4 {
        left: 17.7%;
        bottom: 13%
}

.top-banner.banner-about .lattice-5 {
        right: 9.375%;
        top: 19.375%
}

.top-banner.banner-about .lattice-group {
        top: 20%;
        left: 29.65%
}

.top-banner.banner-news {
        height: 31.25vw;
        min-height: 500px;
        background-image: url(../images/banner-news.jpg);
        background-position: bottom center
}

.top-banner.banner-news .lattice-5 {
        left: 5.375%;
        top: 30%
}

.top-banner.banner-service .lattice-group1 {
        top: 22.22%;
        left: -137px
}

.top-banner.banner-service .lattice-group2 {
        left: 4.85%;
        bottom: 6.85%
}

.top-banner.banner-service .lattice-1 {
        left: 19.85%;
        bottom: 8.85%
}

.top-banner.banner-service .lattice-2 {
        bottom: auto;
        top: 20%;
        right: -160px
}

.top-banner.banner-service .lattice-5 {
        right: -14px;
        bottom: 20.37%
}

.top-banner.banner-service .lattice-6 {
        right: 32.916%;
        bottom: 18.15%
}

.top-banner.case-details-banner {
        height: 31.25vw;
        min-height: 500px;
        background-image: url(../images/case/detais-top.png)
}

.top-banner.case-details-banner .lattice-5 {
        top: 25%;
        right: 0
}

.top-banner .video-bg::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 20%;
        min-height: 80px;
        left: 0;
        bottom: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(36, 40, 49, 0) 3%, #4C6EBB 94%)
}

.top-banner.banner-case .lattice-1,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-1 {
        left: 10%;
        bottom: calc(50% - 165px)
}

.top-banner.banner-case .lattice-2,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-2 {
        right: -50px
}

.top-banner.banner-case .lattice-4,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-4 {
        bottom: 16%;
        left: 19.6875%
}

.top-banner.banner-case .lattice-5,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-5 {
        right: 5.3125%;
        top: 15.74%
}

.top-banner.banner-case .lattice-6,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-6 {
        top: 25%;
        left: 58.82%
}

.top-banner.banner-case .wrap-box .lattice-5,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .wrap-box .lattice-5 {
        right: -130px
}

.top-banner.banner-case .inner-cont .lattice-group,
.motivation-swiper .swiper-slide .top-banner.banner-motivation .inner-cont .lattice-group {
        top: -100px
}

.cont-til60 {
        font-size: var(--f-size-60);
        color: #fff;
        font-weight: bold
}

.paging-box .item {
        padding: 10px
}

.paging-box .item.current,
.paging-box .item:hover {
        color: var(--main-color)
}

.paging-box a.page-prev,
.paging-box a.page-next {
        position: relative
}

.paging-box a.page-prev .icon,
.paging-box a.page-next .icon {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        background: url(../images/icon-back.png) no-repeat center center;
        background-size: cover !important
}

.paging-box a.page-prev:hover .icon,
.paging-box a.page-next:hover .icon {
        background: url(../images/icon-back-hover.png) no-repeat center center
}

.paging-box a.page-prev {
        padding-left: 40px
}

.paging-box a.page-prev .icon {
        left: 0
}

.paging-box a.page-next {
        padding-right: 40px
}

.paging-box a.page-next .icon {
        right: 0;
        transform: rotate(180deg)
}

.mb80 {
        margin-bottom: 80px !important
}

.mb120 {
        margin-bottom: 120px !important
}

.pb20 {
        padding-bottom: 20px !important
}

.lattice-1 {
        width: 231px;
        height: 331px;
        background: url(../images/lattice-1.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-2 {
        width: 346px;
        height: 227px;
        background: url(../images/lattice-2.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-3 {
        width: 151px;
        height: 151px;
        background: url(../images/lattice-3.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-4 {
        width: 220px;
        height: 52px;
        background: url(../images/lattice-4.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-5 {
        width: 151px;
        height: 151px;
        background: url(../images/lattice-5.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-6 {
        width: 100px;
        height: 52px;
        background: url(../images/lattice-6.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-7 {
        width: 70px;
        height: 70px;
        background: url(../images/lattice-7.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-8 {
        width: 144px;
        height: 70px;
        background: url(../images/lattice-8.png) no-repeat;
        display: inline-block;
        z-index: 5
}

.lattice-group {
        width: 240px;
        position: absolute
}

.lattice-group.w144 {
        width: 144px
}

.lattice-group.w120 {
        width: 120px
}

.lattice-group.w120.static .grid span {
        opacity: .9
}

.lattice-group.w120.static .grid span:nth-child(6),
.lattice-group.w120.static .grid span:nth-child(7),
.lattice-group.w120.static .grid span:nth-child(8),
.lattice-group.w120.static .grid span:nth-child(11),
.lattice-group.w120.static .grid span:nth-child(12),
.lattice-group.w120.static .grid span:nth-child(13) {
        opacity: .5
}

.lattice-group .grid {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        z-index: 10
}

.lattice-group .grid span {
        width: 4px;
        height: 4px;
        margin: 10px;
        border-radius: 50%;
        background-color: #fff;
        opacity: .6;
        display: block
}

.lattice-group .grid span.el:nth-child(4),
.lattice-group .grid span.el:nth-child(26) {
        background-color: var(--color-blue)
}

.lattice-group .grid span.el:nth-child(15),
.lattice-group .grid span.el:nth-child(16) {
        background-color: var(--main-color)
}

.lattice-group .grid.shadow {
        opacity: .1;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0
}

.icon-left-btn,
.icon-right-btn {
        width: 40px;
        height: 40px;
        display: inline-block;
        cursor: pointer;
        background-size: cover;
        background-repeat: no-repeat
}

.icon-left-btn {
        background-image: url(../images/icon-left-btn.png)
}

.icon-right-btn {
        background-image: url(../images/icon-right-btn.png)
}

@keyframes opacityAni {
        0% {
                opacity: 0;
                transform: scale(0)
        }

        100% {
                opacity: .5;
                transform: scale(1)
        }
}

.ani-delay-125 {
        transition-delay: .125s !important
}

.ani-delay-25 {
        transition-delay: .25s !important
}

.ani-delay-375 {
        transition-delay: .375s !important
}

.ani-delay-475 {
        transition-delay: .475s !important
}

.ani-delay-5 {
        transition-delay: .5s !important
}

.ani-delay-625 {
        transition-delay: .625s !important
}

.ani-delay-75 {
        transition-delay: .75s !important
}

.ani-delay-875 {
        transition-delay: .875s !important
}

.ani-delay-10 {
        transition-delay: 1s !important
}

.ani-up-in,
.ani-up-in2,
.ani-down-in2,
.ani-left-in,
.ani-left-in2,
.ani-right-in,
.ani-right-in2,
.ani-up-in-100 {
        transition: transform .75s ease, opacity 1s linear;
        opacity: 0
}

.ani-left-in {
        transform: translate3d(-100%, 0, 0)
}

.ani-left-in2 {
        transform: translate3d(-50%, 0, 0)
}

.ani-right-in {
        transform: translate3d(100%, 0, 0)
}

.ani-right-in2 {
        transform: translate3d(50%, 0, 0)
}

.ani-down-in2 {
        transform: translate3d(0, -50%, 0)
}

.ani-up-in {
        transform: translate3d(0, 100%, 0)
}

.ani-up-in2 {
        transform: translate3d(0, 50%, 0)
}

.ani-up-in-100 {
        transform: translate3d(0, 120px, 0)
}

.ani-opacity-in {
        opacity: 0;
        transition: all 1s ease-in
}

.ani-scale-in {
        transition: all .75s ease-in;
        transform: scale(0)
}

.active .ani-up-in,
.active .ani-up-in2,
.active .ani-down-in2,
.active .ani-left-in,
.active .ani-left-in2,
.active .ani-right-in,
.active .ani-right-in2,
.active .ani-up-in-100 {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important
}

.active .ani-opacity-in {
        opacity: 1 !important
}

.active .ani-scale-in {
        transform: scale(1)
}

.video-bg {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 0;
        overflow: hidden
}

.video-bg .video {
        height: 100%;
        width: 100%;
        line-height: 0;
        object-fit: cover;
        pointer-events: none
}

@media screen and (max-width: 1600px) {
        :root {
                --f-size-18: 14px;
                --f-size-20: 16px;
                --f-size-25: 20px;
                --f-size-30: 24px;
                --f-size-48: 40px;
                --f-size-50: 40px;
                --f-size-60: 48px;
                --f-size-80: 58px
        }

        .header .inner {
                padding: 18px 60px 18px 60px
        }

        .nav li {
                font-size: 16px
        }

        .logo {
                width: 173px;
                height: 30px
        }

        .wrap-box {
                width: 1200px
        }
}

@media screen and (max-width: 1440px) {
        :root {
                --f-size-20: 14px;
                --f-size-30: 20px;
                --f-size-48: 32px;
                --f-size-50: 32px;
                --f-size-60: 40px;
                --f-size-80: 72px
        }

        .header .inner {
                padding: 12px 60px 12px 60px
        }

        .logo {
                width: 110px;
                height: 19px
        }

        .wrap-box {
                width: 1080px
        }

        .wrap-box-1200 {
                max-width: 1080px
        }

        .icon-left-btn,
        .icon-right-btn {
                width: 30px;
                height: 30px;
                background-size: 24px 24px;
                background-position: center center
        }

        .nav li {
                font-size: 14px
        }

        .nav li>a {
                padding: 0 30px
        }

        .nav li.lang-swith::after {
                height: 12px
        }

        .footer-cont {
                margin-bottom: 120px
        }

        .footer-cont .infor-box {
                width: 260px
        }

        .top-banner .wrap-box .inner-cont h3 {
                line-height: 1.4
        }

        .top-banner.banner-case .lattice-1,
        .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-1 {
                left: -20px
        }

        .footer .lattice-5 {
                right: 0;
                top: 50px
        }

        .footer .lattice-6 {
                left: -30px
        }

        .select-item .select-text::after {
                width: 16px;
                height: 9px;
                margin-top: -4px
        }

        .select-item .select-options li.selected,
        .select-item .select-options li:hover {
                background-size: 16px 16px
        }
}

@media screen and (max-width: 1080px) {
        .wrap-box {
                width: 100%;
                padding: 0 25px;
                box-sizing: border-box
        }

        .header .inner {
                padding: 12px 25px 12px 25px
        }

        .nav li>a {
                padding: 0 20px
        }
}

@media screen and (max-width: 920px) {
        .nav li {
                font-size: 14px
        }

        .nav li>a {
                padding: 0 15px
        }
}

@media screen and (max-width: 768px) {
        :root {
                --f-size-18: 13px;
                --f-size-20: 14px;
                --f-size-25: 18px;
                --f-size-30: 18px;
                --f-size-48: 24px;
                --f-size-50: 24px;
                --f-size-60: 32px;
                --f-size-80: 60px
        }

        .mb80 {
                margin-bottom: 40px !important
        }

        .mb120 {
                margin-bottom: 7.8125vw !important
        }

        .icon-left-btn,
        .icon-right-btn {
                background-size: 20px 20px
        }

        .mobile-show {
                display: inline-block !important
        }

        .mobile-hide {
                display: none !important
        }

        .motivation-page .header::after {
                transform: translate3d(0, -150%, 0)
        }

        .motivation-page .header.scrolling::after {
                transform: translate3d(0, 0, 0)
        }

        .header .inner {
                padding: 21px 25px 20px 25px
        }

        .header::after {
                transform: translate3d(0, 0, 0)
        }

        .header.opened .m-nav-switch .item:nth-child(2) {
                transform: translate(5px, 5px)
        }

        .header.opened .m-nav-switch .item:nth-child(4) {
                transform: translate(5px, -5px)
        }

        .header.opened .m-nav-switch .item:nth-child(6) {
                transform: translate(-5px, 5px)
        }

        .header.opened .m-nav-switch .item:nth-child(8) {
                transform: translate(-5px, -5px)
        }

        .header.opened .nav {
                transform: translate3d(0, 0, 0)
        }

        .logo {
                position: relative;
                z-index: 900
        }

        .m-nav-switch {
                width: 30px;
                height: 30px;
                padding: 7px;
                position: absolute;
                right: 10px;
                top: 8px;
                z-index: 850;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between
        }

        .m-nav-switch .item {
                width: 4px;
                height: 4px;
                margin: 3px;
                display: inline-block;
                border-radius: 50%;
                background: #fff;
                transition: transform .275s ease-in
        }

        .m-nav-switch .item:nth-child(1),
        .m-nav-switch .item:nth-child(2),
        .m-nav-switch .item:nth-child(4) {
                opacity: .3
        }

        .m-nav-switch .item:nth-child(5),
        .m-nav-switch .item:nth-child(8) {
                background: var(--main-color)
        }

        .m-nav-switch .item:nth-child(6),
        .m-nav-switch .item:nth-child(9) {
                background: var(--color-blue)
        }

        .nav {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 800;
                transform: translate3d(100%, 0, 0);
                transition: transform .275s ease-in;
                background: url(../images/m-nav-bg.png) no-repeat bottom center #363944;
                background-size: 100% auto
        }

        .nav ul {
                position: absolute;
                top: 80px;
                left: 0;
                right: 0;
                bottom: 160px;
                padding-left: 20px;
                padding-right: 20px;
                flex-direction: column;
                overflow: hidden;
                overflow-y: auto
        }

        .nav ul li {
                width: 100%;
                font-size: 18px;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                position: relative
        }

        .nav ul li .icon-arrow-d,
        .nav ul li .icon-arrow-r {
                display: none
        }

        .nav ul li .m-drop-arrow {
                width: 36px;
                height: 36px;
                background: url(../images/dot-arrow-d.png) no-repeat center center;
                display: block;
                background-size: 22px 22px;
                transition: all .275s ease-in;
                position: absolute;
                right: -5px;
                top: 4px;
                z-index: 990
        }

        .nav ul li a {
                display: block;
                padding: 0
        }

        .nav ul li a.first-level-menu::after {
                display: none
        }

        .nav ul li .drop-content {
                width: 100%;
                height: auto;
                position: static;
                opacity: 1;
                padding-top: 0;
                margin-left: 0;
                transform: translate3d(0, 0, 0);
                display: none
        }

        .nav ul li .drop-content .item {
                width: 100%;
                border-bottom: none;
                line-height: 36px;
                background-color: rgba(0, 0, 0, 0)
        }

        .nav ul li .drop-content .item>a {
                justify-content: space-between
        }

        .nav ul li .drop-content .item .m-drop-arrow {
                top: 0
        }

        .nav ul li .drop-content .item .drop__cont {
                width: 100%;
                display: none;
                position: static;
                opacity: 1;
                background-color: rgba(0, 0, 0, 0)
        }

        .nav ul li .drop-content .item .drop__cont a {
                width: 100%;
                box-sizing: border-box;
                border-bottom: none;
                font-size: .75em;
                padding-left: 60px
        }

        .nav ul li .drop-content .item .drop__cont a:hover {
                background: none
        }

        .nav ul li .drop-content .item:hover {
                background: none
        }

        .nav ul li .drop-content .item.active .m-drop-arrow {
                transform: rotate(180deg)
        }

        .nav ul li .drop-content .item.active .drop__cont {
                width: 100%
        }

        .nav ul li .drop-content .item.active .drop__cont {
                display: block
        }

        .nav ul li.drop-menu.active .first-level-arrow {
                transform: rotate(180deg)
        }

        .nav ul li.drop-menu.active .drop-content {
                display: block
        }

        .nav ul li.drop-menu:hover .drop-content {
                height: auto
        }

        .nav ul li.lang-switch {
                margin-left: 0
        }

        .nav ul li.lang-switch::after {
                display: none
        }

        .nav .contact-infor-tabbox {
                position: absolute;
                left: 20px;
                right: 20px;
                bottom: 30px
        }

        .nav .contact-infor-tabbox .infor-tab-nav {
                padding-top: 0
        }

        .top-banner {
                height: 106.75vw;
                min-height: auto;
                margin-top: 61px;
                background-size: 100% auto;
                background-position: center bottom
        }

        .top-banner .wrap-box {
                align-items: flex-start;
                justify-content: center;
                text-align: center
        }

        .top-banner .inner-cont {
                width: 95%;
                padding-top: 14.667vw
        }

        .top-banner .inner-cont h3 {
                padding-bottom: 2.135vw
        }

        .top-banner .inner-cont .en {
                display: none
        }

        .top-banner .inner-cont .zh {
                width: 100%
        }

        .top-banner .inner-cont .lattice-group {
                top: 50px;
                left: 20.5%
        }

        .top-banner.case-details-banner,
        .top-banner.banner-news {
                height: 42.5vw;
                min-height: 0;
                max-height: 200px;
                background-size: cover
        }

        .top-banner.case-details-banner .wrap-box,
        .top-banner.banner-news .wrap-box {
                justify-content: flex-start;
                text-align: left;
                align-items: center
        }

        .top-banner.case-details-banner .wrap-box .inner-cont,
        .top-banner.banner-news .wrap-box .inner-cont {
                padding-top: 0
        }

        .top-banner.case-details-banner .wrap-box .inner-cont .pb20,
        .top-banner.banner-news .wrap-box .inner-cont .pb20 {
                padding-bottom: 0 !important
        }

        .top-banner.case-details-banner .wrap-box .inner-cont h3,
        .top-banner.banner-news .wrap-box .inner-cont h3 {
                text-align: left
        }

        .top-banner.case-details-banner .video-bg::after,
        .top-banner.banner-news .video-bg::after {
                display: block
        }

        .top-banner.banner-news .lattice-1 {
                display: none
        }

        .top-banner.banner-news .lattice-5 {
                right: auto;
                left: -30px;
                top: 30%
        }

        .top-banner.banner-index {
                height: 110vw
        }

        .top-banner.banner-index .inner-cont {
                padding-top: 8vw
        }

        .top-banner.banner-index .lattice-1 {
                bottom: 30%;
                left: -20px
        }

        .top-banner.banner-index .lattice-2 {
                bottom: -20px
        }

        .top-banner.banner-index .lattice-group,
        .top-banner.banner-about .lattice-group {
                display: none
        }

        .top-banner.case-details-banner {
                background-size: cover
        }

        .top-banner .video-bg::after {
                display: none
        }

        .top-banner.banner-service .lattice-1,
        .top-banner.banner-case .lattice-1,
        .top-banner.banner-about .lattice-1 {
                left: 25px;
                bottom: auto;
                top: -65px
        }

        .top-banner.banner-service .lattice-2,
        .top-banner.banner-case .lattice-2,
        .top-banner.banner-about .lattice-2 {
                bottom: -30px;
                right: 10px;
                top: auto
        }

        .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-1 {
                left: 25px;
                bottom: calc(50% - 80px)
        }

        .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-2 {
                right: 0;
                bottom: calc(67% - 80px)
        }

        .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-4 {
                bottom: auto;
                top: 18.5%;
                left: 8.625%
        }

        .motivation-swiper .swiper-slide .top-banner.banner-motivation .lattice-5 {
                right: -60px
        }

        .motivation-swiper .motivation-slide:first-child .wrap-box .lattice-group {
                top: -10px;
                left: -38px !important
        }

        .paging-box .item {
                padding: 10px 6px
        }

        .paging-box a.page-prev .icon,
        .paging-box a.page-next .icon {
                width: 20px;
                height: 20px;
                margin-top: -10px
        }

        .paging-box a.page-prev {
                padding-left: 20px;
                padding-right: 8px
        }

        .paging-box a.page-next {
                padding-right: 20px;
                padding-left: 6px
        }

        .footer {
                min-height: 0
        }

        .footer .lattice-6 {
                left: auto;
                right: 20px;
                top: 10px
        }

        .footer .lattice-group {
                right: auto;
                left: 0;
                top: 10%
        }

        .footer .video-bg {
                top: 60%
        }

        .footer-cont {
                flex-direction: column;
                justify-content: flex-start;
                margin-bottom: 0;
                padding-bottom: 80px
        }

        .footer-cont .infor-box {
                width: 100%;
                padding-top: 100px
        }

        .footer-cont .infor-box .WX-code {
                display: none
        }

        .bot-logo {
                width: 122px;
                margin: 0 auto
        }

        .form-box {
                width: 100%
        }

        .form-box .form-item {
                width: 48%;
                padding-right: 0
        }
}

@media screen and (max-width: 480px) {
        :root {
                --f-size-18: 12px;
                --f-size-20: 12px;
                --f-size-25: 13px;
                --f-size-30: 16px;
                --f-size-48: 20px;
                --f-size-50: 20px;
                --f-size-60: 24px;
                --f-size-80: 36px
        }

        .lattice-1,
        .lattice-2,
        .lattice-3,
        .lattice-4,
        .lattice-5,
        .lattice-6,
        .lattice-7,
        .lattice-8,
        .lattice-group {
                transform: scale(0.5)
        }

        .mb80 {
                margin-bottom: 7.5vw !important
        }

        .top-banner .lattice-1 {
                transform-origin: left center
        }

        .top-banner .lattice-2 {
                transform-origin: right center
        }

        .top-banner.case-details-banner {
                height: 60vh;
                min-height: 0
        }

        .inner-cont {
                font-size: 20px
        }

        .footer-cont .infor-box {
                padding-top: 50px
        }

        .form-box .form-item {
                width: 100%
        }
}

@media screen and (max-width: 375px) {
        :root {
                --f-size-25: 12px;
                --f-size-30: 14px
        }
}

@media screen and (max-width: 320px) {
        :root {
                --f-size-18: 11px;
                --f-size-20: 11px;
                --f-size-25: 11px;
                --f-size-30: 13px;
                --f-size-48: 16px;
                --f-size-50: 16px;
                --f-size-60: 20px;
                --f-size-80: 30px
        }

        .paging-box .item {
                padding: 10px 4px
        }
}

.index-cont2 {
        padding-top: 160px;
        padding-bottom: 150px
}

.index-cont2 h3 {
        opacity: .3;
        transform: scale(0);
        transition: all .75s ease;
        padding-bottom: 2em
}

.index-cont2.active h3 {
        opacity: 1;
        transform: scale(1)
}

.index-cont2.active .webp-group ul li {
        transform: translate3d(0, 0, 0);
        opacity: 1
}

.index-cont2 .lattice-item1 {
        position: absolute;
        top: 130px;
        left: 17.5%
}

.index-cont2 .lattice-item2 {
        position: absolute;
        top: 100px;
        right: -260px
}

.align-c {
        text-align: center
}

.cont-til50 {
        font-size: var(--f-size-50);
        color: #fff;
        padding-bottom: 1em;
        font-weight: bold
}
.cont-til47 {
        font-size: 24px;
        color: #fff;
        padding-bottom: 1em;
        font-weight: bold
}

.webp-group {
        position: relative;
        z-index: 20
}

.webp-group ul {
        position: relative;
        z-index: 25;
        display: flex;
        justify-content: space-between
}

.webp-group ul li {
        opacity: 0;
        transition: all .5s ease-in .5s
}

.webp-group ul li:nth-child(1) {
        transform: translate3d(-100%, 0, 0)
}

.webp-group ul li:nth-child(2) {
        transform: translate3d(-50%, 0, 0)
}

.webp-group ul li:nth-child(3) {
        transform: translate3d(50%, 0, 0)
}

.webp-group ul li:nth-child(4) {
        transform: translate3d(100%, 0, 0)
}

.webp-group ul li .thumb {
        position: relative
}

.webp-group ul li .thumb-nor {
        opacity: 1;
        transition: opacity .275s linear
}

.webp-group ul li .thumb-hover {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .275s linear
}

.webp-group ul li:hover .thumb-nor {
        opacity: 0
}

.webp-group ul li:hover .thumb-hover {
        opacity: 1
}

.webp-group ul li:hover .lattice-3 {
        opacity: 1;
        transform: translate(-50%, 0) scale(1)
}

.webp-group ul li:hover h4 {
        color: #fff
}

.webp-group ul li h4 {
        font-size: var(--f-size-30);
        text-align: center;
        transition: color .275s linear;
        position: relative;
        z-index: 100;
        margin-top: -30px
}

.webp-group ul li .lattice-3 {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0) scale(0);
        z-index: -1;
        opacity: 0;
        transition: all .275s linear
}

.index-cont3 {
        padding-bottom: 85px
}

.index-cont3 h3 {
        opacity: .3;
        transform: scale(0);
        transition: all .75s ease
}

.index-cont3 ul {
        display: flex;
        position: relative;
        z-index: 10
}

.index-cont3 ul li {
        width: 33.33%;
        box-sizing: border-box;
        opacity: 0;
        padding: 0 18px;
        transition: all 1.25s ease
}

.index-cont3 ul li .thumb {
        position: relative
}

.index-cont3 ul li .txt {
        padding-top: 14px
}

.index-cont3 ul li .name {
        font-size: var(--f-size-60);
        color: #fff;
        font-weight: bold;
        line-height: 1;
        position: absolute;
        bottom: 0;
        left: 14px
}

.index-cont3 ul li:nth-child(1) {
        transform: translate3d(-60px, 100px, 0)
}

.index-cont3 ul li:nth-child(2) {
        transform: translate3d(0, 120px, 0)
}

.index-cont3 ul li:nth-child(3) {
        transform: translate3d(60px, 100px, 0)
}

.index-cont3.active h3 {
        opacity: 1;
        transform: scale(1)
}

.index-cont3.active ul li {
        opacity: 1
}

.index-cont3.active ul li:nth-child(1),
.index-cont3.active ul li:nth-child(2),
.index-cont3.active ul li:nth-child(3) {
        transform: translate3d(0, 0, 0)
}

.index-cont3 .lattice-4 {
        right: 15%;
        top: -25px
}

.index-cont3 .lattice-5 {
        bottom: 0;
        right: -160px
}

.index-cont3 .staggering-grid-2 {
        position: absolute;
        top: 0;
        left: -144px
}

.index-case-item {
        max-width: 2560px;
        display: flex;
        justify-content: flex-end;
        margin: 160px auto 300px auto;
        position: relative
}

.index-case-item .tilt-mask {
        width: 50%;
        background-color: rgba(255, 255, 255, 0);
        position: absolute;
        z-index: 103;
        top: 0;
        bottom: 0;
        right: 0;
        transform: scale(1.2) translate3d(-100%, 0, 0);
        transition: transform .75s linear
}

.index-case-item .kv-img-group {
        width: 50%;
        position: relative;
        z-index: 10;
        transform-style: preserve-3d
}

.index-case-item .kv-img-group .inner {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform .75s linear;
        transform: translate3d(100%, 0, 0)
}

.index-case-item .kv-img-group .C_screen {
        width: 24.108%;
        left: 25.89%;
        top: -2.5%
}

.index-case-item .kv-img-group .C_words {
        width: 91.444%;
        left: 3.4375vw;
        bottom: -10.975%
}

.index-case-item .kv-img-group .C_person {
        width: 84.99%;
        right: -23%;
        top: -3.5%;
        z-index: 100
}

.index-case-item .kv-img-group .V_words {
        width: 69.512%;
        left: 4.69%;
        top: -7.475%
}

.index-case-item .kv-img-group .V_screen {
        width: 64.727%;
        top: 0;
        right: 0;
        z-index: 101
}

.index-case-item .kv-img-group .V_person {
        width: 58.12%;
        top: 28.5%;
        left: -5.5%;
        z-index: 100
}

.index-case-item .kv-img-group .D_screen {
        width: 52.9%;
        top: -22.8%;
        right: 0
}

.index-case-item .kv-img-group .D_words {
        width: 48%;
        right: 0;
        bottom: -15.975%
}

.index-case-item .kv-img-group .D_person {
        width: 62.851%;
        left: 0;
        top: -21.86%;
        z-index: 100
}

.index-case-item .kv-img-group .bg {
        box-shadow: 20px 20px 50px rgba(0, 0, 0, .3);
        transform: translateZ(-1px);
        transition: transform .25s ease-in
}

.index-case-item .kv-img-group .abs {
        transform: translateZ(0);
        transition: transform .25s ease-in
}

.index-case-item .kv-img-group.hover .C_screen {
        transform: translateZ(120px)
}

.index-case-item .kv-img-group.hover .C_person {
        transform: translateZ(10px)
}

.index-case-item .kv-img-group.hover .V_screen {
        transform: translateZ(160px)
}

.index-case-item .kv-img-group.hover .V_person {
        transform: translateZ(30px)
}

.index-case-item .kv-img-group.hover .D_screen {
        transform: translateZ(100px)
}

.index-case-item .kv-img-group.hover .D_person {
        transform: translateZ(60px)
}

.index-case-item .kv-img-group.hover .words {
        transform: translateZ(-80px)
}

.index-case-item .kv-img-group.hover .bg {
        transform: translateZ(-180px)
}

.index-case-item .wrap-box {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: 0;
        height: 100%;
        z-index: 101;
        display: flex;
        align-items: center
}

.index-case-item .wrap-box .inner-content {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
        transition: all .75s linear
}

.index-case-item .wrap-box .inner-content h3 span {
        display: inline-block
}

.index-case-item .wrap-box .logo_group-box {
        max-width: 590px;
        margin-top: 35px
}

.index-case-item .wrap-box .txt {
        max-width: 580px;
        padding-right: 20px;
        padding-bottom: 2em
}

.index-case-item .mobile-show-box {
        display: none
}

.index-case-item:nth-child(1) {
        z-index: 40
}

.index-case-item:nth-child(1) .staggering-grid-1 {
        left: -260px;
        top: 0
}

.index-case-item:nth-child(1) .lattice-6 {
        bottom: -100px;
        left: 37.275%
}

.index-case-item:nth-child(2) {
        z-index: 80
}

.index-case-item:nth-child(2) .staggering-grid-1 {
        right: 27.75%;
        top: -90px
}

.index-case-item:nth-child(2) .staggering-grid-2 {
        bottom: -200px;
        right: 40.75%;
        z-index: 0
}

.index-case-item:nth-child(2) .lattice-6 {
        top: 120px;
        right: 4.25%
}

.index-case-item:nth-child(3) {
        z-index: 100
}

.index-case-item:nth-child(3) .lattice-6 {
        left: -100px;
        top: 0
}

.index-case-item:nth-child(3) .staggering-grid-1 {
        bottom: -30.5%;
        left: 26.385%
}

.index-case-item:nth-child(2n) {
        justify-content: flex-start
}

.index-case-item:nth-child(2n) .tilt-mask {
        left: 0;
        transform: scale(1.2) translate3d(100%, 0, 0)
}

.index-case-item:nth-child(2n) .kv-img-group .inner {
        transform: translate3d(-100%, 0, 0)
}

.index-case-item:nth-child(2n) .wrap-box {
        width: 100%;
        justify-content: flex-end
}

.index-case-item:nth-child(2n) .wrap-box .inner-content {
        width: 49%;
        box-sizing: border-box;
        min-width: 600px;
        padding: 0 40px 0 30px;
        transform: translate3d(100%, 0, 0)
}

.index-case-item.active .tilt-mask {
        transform: scale(1.2) translate3d(0, 0, 0)
}

.index-case-item.active .kv-img-group .inner {
        transform: translate3d(0, 0, 0)
}

.index-case-item.active .wrap-box .inner-content {
        opacity: 1;
        transform: translate3d(0, 0, 0)
}

.abs {
        position: absolute
}

.more-btn {
        padding: 6px 25px;
        position: relative;
        margin-left: 1px;
        display: inline-block;
        color: #fff
}

.more-btn .text {
        position: relative;
        z-index: 21
}

.more-btn .dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #fff;
        display: inline-block;
        z-index: 10;
        position: absolute
}

.more-btn .dot:nth-child(2) {
        top: -2px;
        left: -2px
}

.more-btn .dot:nth-child(3) {
        top: -2px;
        right: -2px
}

.more-btn .dot:nth-child(4) {
        bottom: -2px;
        right: -2px
}

.more-btn .dot:nth-child(5) {
        bottom: -2px;
        left: -2px
}

.more-btn .line-group {
        position: absolute;
        top: -1px;
        right: -1px;
        bottom: -1px;
        left: -1px;
        overflow: hidden;
        z-index: 0
}

.more-btn .line-group::before {
        content: "";
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -100%;
        width: 200%;
        height: 300%;
        background-color: rgba(255, 255, 255, .3);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(transparent, var(--main-color), transparent 30%);
        -webkit-animation: rotate 3s linear infinite;
        animation: rotate 3s linear infinite
}

.more-btn .line-group::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 1px;
        top: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        background: #383e4c;
        border-radius: 0；
}

.more-btn:hover {
        animation: bounceAni 1s var(--bezier-bounce)
}

button.more-btn {
        padding: 8px 25px
}

@keyframes rotate {
        0% {
                transform: rotate(0deg)
        }

        100% {
                transform: rotate(360deg)
        }
}

@keyframes bounceAni {
        0% {
                transform: translate3d(0, 0, 0)
        }

        25% {
                transform: translate3d(0, -4px, 0)
        }

        50% {
                transform: translate3d(0, 3px, 0)
        }

        75% {
                transform: translate3d(0, -2px, 0)
        }

        90% {
                transform: translate3d(0, 1px, 0)
        }

        100% {
                transform: translate3d(0, 0, 0)
        }
}

@media screen and (max-width: 1635px) {
        .index-case-item .wrap-box .inner-content h3 span {
                display: inline
        }
}

@media screen and (max-width: 1440px) {
        .index-cont2 .lattice-item2 {
                right: 0
        }

        .index-cont3 {
                padding-bottom: 55px
        }

        .index-case-item {
                margin: 120px auto 220px auto
        }

        .index-case-item:nth-child(1) .staggering-grid-1 {
                left: -120px
        }
}

@media screen and (max-width: 1200px) {
        .index-cont3 .staggering-grid-2 {
                left: 10px
        }

        .index-case-item:nth-child(1) .staggering-grid-1 {
                left: 0
        }
}

@media screen and (max-width: 768px) {
        .index-cont2 {
                padding-top: 30px;
                padding-bottom: 50px
        }

        .webp-group ul {
                flex-wrap: wrap
        }

        .webp-group ul li {
                width: 50%;
                margin-bottom: 8px
        }

        .webp-group ul li h4 {
                margin-top: -12px
        }

        .webp-group ul li:hover .lattice-3 {
                opacity: 1;
                transform: translate(-50%, 0) scale(0.5)
        }

        .index-cont3 {
                padding-bottom: 10px
        }

        .index-cont3 ul li {
                padding: 0 5px
        }

        .index-cont3 ul li .txt {
                padding-top: 6px
        }

        .index-cont3 .staggering-grid-2 {
                left: 0;
                transform-origin: left center
        }

        .index-cont3 .lattice-4 {
                right: 0;
                transform-origin: right top
        }

        .index-case-box {
                width: 100%;
                overflow: hidden
        }

        .index-case-item {
                margin-top: 8vw;
                margin-bottom: 16.53vw;
                justify-content: flex-start;
                align-items: flex-end;
                flex-direction: column
        }

        .index-case-item .wrap-box {
                position: static;
                left: 0;
                transform: translate(0, 0);
                padding-bottom: 8vw
        }

        .index-case-item .wrap-box .inner-content .more-btn {
                display: none
        }

        .index-case-item .wrap-box .inner-content h3 span {
                display: inline-block
        }

        .index-case-item .wrap-box .logo_group-box {
                margin-top: 4.8vw
        }

        .index-case-item .wrap-box .txt {
                padding-bottom: 0
        }

        .index-case-item .wrap-box .cont-til50 {
                padding-bottom: 0
        }

        .index-case-item .tilt-mask {
                display: none
        }

        .index-case-item .kv-img-group {
                width: 89%
        }

        .index-case-item .mobile-show-box {
                width: 100%;
                box-sizing: border-box;
                padding-left: 25px;
                padding-top: 24vw;
                display: block;
                text-align: left
        }

        .index-case-item:nth-child(1) .staggering-grid-1 {
                top: -20px;
                transform-origin: left top
        }

        .index-case-item:nth-child(1) .lattice-6 {
                bottom: 30px;
                left: auto;
                right: 0
        }

        .index-case-item:nth-child(1) .mobile-show-box {
                padding-top: 17.35vw
        }

        .index-case-item:nth-child(2) .staggering-grid-2 {
                bottom: -140px;
                right: 30px
        }

        .index-case-item:nth-child(2n) {
                align-items: flex-start
        }

        .index-case-item:nth-child(2n) .wrap-box {
                justify-content: flex-start;
                padding-bottom: 12vw
        }

        .index-case-item:nth-child(2n) .wrap-box .inner-content {
                width: 100%;
                min-width: auto;
                box-sizing: border-box;
                padding: 0
        }

        .index-case-item:nth-child(3) .wrap-box {
                padding-bottom: 12vw
        }
}

@media screen and (max-width: 480px) {
        .webp-group ul li .lattice-3 {
                transform: translate(-50%, 0) scale(0.5)
        }

        .index-cont3 ul {
                flex-wrap: wrap
        }

        .index-cont3 ul li {
                width: 100%;
                padding: 0 0 15px 0
        }

        .index-cont3 ul li .thumb {
                height: 45vw
        }

        .index-cont3 ul li .thumb img {
                height: 100%;
                object-fit: cover;
                object-position: bottom center
        }

        .index-cont3 ul li .name {
                font-size: 20px
        }
}

.about-cont1 {
        position: relative
}

.about-cont1 .staggering-grid-1 {
        left: 6.85%;
        top: 16%
}

.about-cont1 .lattice-5 {
        right: 6.125%;
        top: 48%
}

.about-cont1 .scrolling-bg-box {
        overflow: hidden;
        position: relative
}

.about-cont1 .scrolling-bg-box .swiper-wrapper {
        transition-timing-function: linear !important
}

.anime-scrolling {
        width: 200%;
        display: flex;
        position: relative;
        transform: translate(-50%, 0)
}

.anime-scrolling .scrolling-item {
        width: 50%;
        opacity: .5
}

.anime-scrolling::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1
}

.anime-scrolling:first-child::after {
        background: linear-gradient(to bottom, rgb(76, 110, 187) 10%, rgba(36, 40, 49, 0) 100%)
}

.anime-scrolling:nth-last-child(2)::after {
        background: linear-gradient(to top, rgb(76, 110, 187) 71%, rgba(36, 40, 49, 0.6) 100%)
}

.anime-scrolling:last-child {
        display: none
}

.anime-scrolling:last-child::after {
        background: linear-gradient(to top, rgb(36, 40, 49) 58%, rgba(36, 40, 49, 0) 100%)
}

.culture-box {
        margin-top: -12vw;
        margin-bottom: 10vw;
        position: relative;
        z-index: 100
}

.culture-box .static {
        left: -100px;
        bottom: -40px
}

.culture-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 65px
}

.culture-list li {
        width: 33.33%;
        padding-right: 80px;
        box-sizing: border-box;
        color: rgba(255, 255, 255, .6)
}

.culture-list li h4 {
        font-size: 1.5em;
        padding-bottom: 15px
}

.culture-list li:last-child {
        padding-right: 0
}

.about-cont2 {
        position: relative
}

.about-cont2 .staggering-grid-1 {
        left: -30px;
        top: -20px
}

.about-cont2 .lattice-5 {
        bottom: 50px;
        right: -100px
}

.about-cont2 .lattice-6 {
        bottom: 20%;
        left: 10%
}

.history-swiper-box {
        position: relative
}

.history-swiper-box::after {
        content: "";
        width: 200vw;
        height: 1px;
        background-color: rgba(63, 198, 255, .2); 
        position: absolute;
        left: -50vw;
        top: 295px;
        z-index: 0
}

.history-swiper {
        width: calc(100vw - (100vw - 1440px)/2);
        box-sizing: border-box;
        z-index: 32;
        overflow: visible;
        padding: 70px 220px 240px 0
}

.history-swiper .swiper-slide:hover .til .year {
        transform: translate(0, -4%);
        opacity: 1
}

.history-swiper .swiper-slide:hover .til .year::after {
        transform: translate3d(0, 100%, 0)
}

.history-swiper .swiper-slide:hover .til::after {
        background-color: var(--main-color)
}

.history-swiper .swiper-slide .til {
        position: relative;
        z-index: 30;
        height: 230px;
        box-sizing: border-box;
        padding-bottom: 35px;
        font-size: 40px;
        color: #fff;
        display: flex;
        justify-content: flex-end;
        flex-direction: column
}

.history-swiper .swiper-slide .til .year {
        font-size: 2em;
        color: var(--main-color);
        display: inline-block;
        position: relative;
        z-index: 10;
        line-height: 1;
        transform: translate(0, 49%);
        opacity: .5;
        overflow: hidden;
        transition: all .275s ease-in
}

.history-swiper .swiper-slide .til .year::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(to top, #2c53ac, transparent);
        z-index: 1;
        transition: all .275s ease-in;
        
}

.history-swiper .swiper-slide .til h4 {
        position: relative;
        z-index: 20;
        font-size: 1em;
        line-height: 1.2
}

.history-swiper .swiper-slide .til::after {
        content: "";
        width: 8px;
        height: 8px;
        background-color: var(--color-blue);
        border-radius: 50%;
        position: absolute;
        bottom: 0px;
        left: 2px;
        transition: background-color .275s ease-in;
}

.history-swiper .swiper-slide .till::after {
        content: "";
        width: 12px;
        height: 12px;
        background-color: var(--color-blue);
        border-radius: 50%;
        position: absolute;
        bottom: -5px;
        left: 2px;
        transition: background-color .275s ease-in;
        border: 4px solid var(--main-color);
}

.history-swiper .swiper-slide .content {
        color: rgba(255, 255, 255, .6);
        padding-top: 25px
}

.about-cont3 {
        margin-bottom: 70px
}

.about-cont3 .staggering-grid-1 {
        top: -20px;
        left: -120px
}

.about-cont3 .lattice-5 {
        bottom: 50px;
        right: -40px
}

.about-cont4 .lattice-5 {
        top: -80px;
        left: -50px
}

.about-cont4 .staggering-grid-1 {
        top: 43%;
        right: -120px
}

.about-cont4 .staggering-grid-2 {
        bottom: -100px;
        left: 12.5%
}

.honour-swiper {
        margin-top: 50px
}

.honour-list {
        display: flex;
        flex-wrap: wrap
}

.honour-list li {
        width: 33.33%;
        text-align: center;
        position: relative;
        margin-bottom: 70px
}

.honour-list li .icon {
        max-width: 320px;
        margin: 0 auto;
        position: relative
}

.honour-list li .icon .num {
        position: absolute;
        left: 50%;
        top: 14.0625%;
        transform: translate(-50%, 0);
        font-weight: bold;
        font-size: var(--f-size-80);
        line-height: 1.0875em;
        color: var(--main-color);
        background-image: linear-gradient(to bottom, var(--color-blue), var(--main-color), #fff, var(--main-color), var(--color-blue));
        background-size: 100% 200%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.honour-list li .icon .num i {
        font-size: .3125em;
        font-weight: normal
}

.honour-list li .icon .num::after {
        content: "";
        width: 2px;
        position: absolute;
        top: 0;
        right: -1px;
        bottom: 0;
        background: var(--color-dark)
}

.honour-list li .icon .default {
        opacity: 1;
        transition: opacity .275s linear
}

.honour-list li .icon .hover {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 21;
        opacity: 0;
        transition: opacity .275s linear
}

.honour-list li .text {
        color: #fff;
        font-size: var(--f-size-25)
}

.honour-list li:nth-child(4) .icon .hover {
        top: -3px
}

.honour-list li:nth-child(5) .icon .hover {
        top: 3px
}

.honour-list li:nth-child(6) .icon .hover {
        top: 2px
}

.honour-list li:hover .icon .num {
        animation: bgp 3s infinite linear
}

.honour-list li:hover .icon .default {
        opacity: 0
}

.honour-list li:hover .icon .hover {
        opacity: 1
}

@keyframes bgp {
        0% {
                background-position: 0 0
        }

        100% {
                background-position: 0 -100%
        }
}

.header-til {
        display: flex;
        justify-content: space-between;
        align-items: center
}

.swiper-btn-group {
        display: flex;
        align-items: center
}

.swiper-btn-group .swiper-pagination {
        width: 100px;
        color: rgba(255, 255, 255, .6);
        position: static;
        padding: 0 15px;
        font-size: var(--f-size-30)
}

.swiper-btn-group .swiper-pagination .swiper-pagination-current {
        color: #fff
}

.see-more-btn {
        font-size: var(--f-size-25);
        color: rgba(255, 255, 255, .6);
        display: flex;
        align-items: center
}

.see-more-btn .txt {
        padding-right: 8px
}

.see-more-btn:hover {
        color: var(--color-blue)
}

.news-list {
        position: relative;
        z-index: 30;
        margin-top: 50px
}

.news-list ul {
        margin-left: -18px;
        margin-right: -18px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
}

.news-list ul li {
        width: 33.33%;
        box-sizing: border-box;
        padding: 0 18px;
        margin-bottom: 40px
}

.news-list ul li a .thumb {
        overflow: hidden
}

.news-list ul li a .thumb img {
        object-fit: cover;
        transition: transform .5s linear
}

.news-list ul li a .txt {
        text-align: left;
        font-weight: normal;
        font-size: var(--f-size-30);
        color: #fff;
        padding-top: 15px;
        margin-bottom: 15px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 3em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical
}

.news-list ul li a .date {
        color: rgba(255, 255, 255, .6)
}

.news-list ul li a:hover .thumb img {
        transform: scale(1.05)
}

.news-list ul li a:hover .txt {
        color: var(--color-blue)
}

.crumbs-bar a.back-link {
        background: url(../images/icon-back.png) no-repeat left center;
        display: inline-block;
        padding-left: 40px
}

.crumbs-bar a.back-link:hover {
        background: url(../images/icon-back-hover.png) no-repeat left center
}

.news-list-box {
        padding-bottom: 100px
}

.news-list-box .paging-box {
        margin-top: 50px
}

.news-list-box .staggering-grid-1 {
        right: -200px;
        top: 35%
}

.news-list-box .staggering-grid-2 {
        left: 200px;
        bottom: 10%
}

.detais-cont {
        color: rgba(255, 255, 255, .6);
        padding-top: 20px;
        padding-bottom: 30px
}

.detais-cont .article-header {
        margin-bottom: 40px;
        padding-bottom: 20px;
        border-bottom: 1px rgba(255, 255, 255, .2) solid
}

.detais-cont .article-header h3 {
        font-size: 40px;
        color: #fff;
        padding-bottom: 20px
}

.detais-cont .article-header .date {
        color: rgba(255, 255, 255, .4)
}

.detais-cont .article-content p {
        padding: 15px 0
}

.detais-cont .article-content img {
        max-width: 1190px;
        margin: 20px auto;
        display: block
}

.join-box {
        margin-top: 150px;
        position: relative
}

.join-box .txt {
        padding: 0 25px;
        position: relative;
        z-index: 30;
        font-size: var(--f-size-30);
        color: #e1e1e3;
        padding-top: 10px
}

.join-box .lattice-5 {
        right: 8.325%;
        top: 100px
}

.join-box .staggering-grid-1 {
        bottom: 0;
        left: 9.375%
}

.join-swiper {
        padding: 120px 0;
        z-index: 100
}

.join-swiper .swiper-slide {
        transition: 300ms;
        overflow: hidden;
        opacity: .5;
        cursor: pointer
}

.join-swiper .swiper-slide .content {
        position: absolute;
        z-index: 30;
        bottom: 30px;
        left: 40px;
        right: 40px;
        transform: translate3d(0, 50px, 0);
        transition: all .3s ease-in
}

.join-swiper .swiper-slide .content h4 {
        background: url(../images/icon_location.png) no-repeat left center;
        padding-left: 60px;
        color: rgba(255, 255, 255, .6);
        font-size: 36px;
        font-weight: normal;
        transform: translate3d(80px, 0, 0);
        transition: transform .275s linear .1s
}

.join-swiper .swiper-slide .content .job-list {
        padding: 0 45px;
        display: flex;
        flex-wrap: wrap;
        opacity: 0;
        transition: all .3s ease-in
}

.join-swiper .swiper-slide .content .job-list a {
        padding: 5px 15px;
        font-size: 16px;
        color: #fff
}

.join-swiper .swiper-slide .bg {
        position: relative
}

.join-swiper .swiper-slide .bg::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(81, 81, 92, 0) 0%, #181822 100%);
        opacity: 0;
        transition: all .375s linear
}

.join-swiper .swiper-slide.swiper-slide-prev .content h4 {
        transform: translate3d(-8px, 0, 0)
}

.join-swiper .swiper-slide.swiper-slide-active {
        transform: scale(1.25);
        z-index: 900;
        opacity: 1;
        box-shadow: 0 20px 30px rgba(0, 0, 0, .25)
}

.join-swiper .swiper-slide.swiper-slide-active .content {
        transform: translate3d(0, 0, 0) !important
}

.join-swiper .swiper-slide.swiper-slide-active .content h4 {
        color: #fff;
        font-weight: bold;
        background: url(../images/icon_location_highlight.png) no-repeat left center;
        transform: translate3d(0, 0, 0)
}

.join-swiper .swiper-slide.swiper-slide-active .content .job-list {
        opacity: 1
}

.join-swiper .swiper-slide.swiper-slide-active .bg::after {
        opacity: 1;
        transform: scaleY(1)
}

.swiper-pagination-bullet {
        opacity: .75;
        background: none;
        border: 1px #fff solid
}

.swiper-pagination-bullet-active {
        background: #fff;
        opacity: 1
}

@media screen and (max-width: 1440px) {
        .history-swiper {
                width: calc(100vw - (100vw - 1200px)/2)
        }

        .history-swiper .swiper-slide .til {
                font-size: 28px
        }

        .detais-cont .article-header h3 {
                font-size: 36px
        }

        .swiper-btn-group .swiper-pagination {
                width: 64px
        }

        .join-swiper .swiper-slide .content {
                bottom: 15px;
                left: 30px;
                right: 30px
        }

        .join-swiper .swiper-slide .content h4 {
                font-size: 24px;
                background-size: 40px 40px !important;
                padding-left: 40px;
                transform: translate3d(50px, 0, 0)
        }

        .join-swiper .swiper-slide .content .job-list {
                padding: 0 0 0 30px
        }

        .join-swiper .swiper-slide .content .job-list a {
                padding: 2px 10px;
                font-size: 13px
        }
}

@media screen and (max-width: 1200px) {
        .history-swiper {
                width: calc(100% + 25px)
        }

        .history-swiper .swiper-slide .til {
                font-size: 26px
        }
}

@media screen and (max-width: 768px) {
        .culture-box .static {
                left: 0
        }

        .detais-cont .article-header h3 {
                font-size: 28px
        }

        .anime-scrolling:nth-last-child(2)::after {
                display: none
        }

        .anime-scrolling:last-child {
                display: flex
        }

        .culture-list {
                padding-top: 32px
        }

        .culture-list li {
                width: 100%;
                padding-right: 0;
                margin-bottom: 15px
        }

        .culture-list li h4 {
                padding-bottom: 8px
        }

        .m-break {
                display: block
        }

        .news-list-box {
                padding-bottom: 40px
        }

        .news-list-box .paging-box {
                margin-top: 20px
        }

        .news-list-box .staggering-grid-1 {
                right: -50px
        }

        .news-list-box .staggering-grid-2 {
                left: -40px
        }

        .about-cont2 .staggering-grid-1 {
                top: 200px
        }

        .about-cont2 .lattice-5 {
                right: 0;
                bottom: 20%
        }

        .about-cont2 .swiper-btn-group {
                display: none
        }

        .history-swiper-box {
                transform: translate(-5px, 0)
        }

        .history-swiper-box::after {
                width: 2px;
                height: auto;
                left: 8px;
                top: 75px;
                bottom: 40px
        }

        .history-swiper {
                --left-spacing: 25px;
                width: 100%;
                padding: 50px 0
        }

        .history-swiper .swiper-wrapper {
                flex-direction: column
        }

        .history-swiper .swiper-slide .history-item {
                width: 100%
        }

        .history-swiper .swiper-slide .til {
                font-size: 20px;
                height: auto;
                padding-bottom: 10px;
                padding-left: var(--left-spacing)
        }

        .history-swiper .swiper-slide .til .year {
                transform: translate3d(0, 0, 0);
                opacity: 1
        }

        .history-swiper .swiper-slide .til .year::after {
                display: none
        }

        .history-swiper .swiper-slide .til h4.f30 {
                font-size: inherit
        }

        .history-swiper .swiper-slide .til::after {
                left: 5px;
                top: 18px
        }

        .history-swiper .swiper-slide .content {
                padding-left: var(--left-spacing);
                padding-top: 0;
                padding-bottom: 30px
        }

        .news-list {
                margin-top: 20px
        }

        .news-list ul {
                margin-left: 0;
                margin-right: 0
        }

        .news-list ul li {
                width: 100%;
                margin-bottom: 20px;
                padding: 0
        }

        .news-list ul li a {
                display: flex;
                align-items: center
        }

        .news-list ul li a .thumb {
                width: 36.5%;
                height: 21.5vw
        }

        .news-list ul li a .thumb img {
                height: 100%
        }

        .news-list ul li a .content {
                width: 63.5%;
                height: 100%;
                box-sizing: border-box;
                padding-left: 20px
        }

        .news-list ul li a .txt {
                padding-top: 0
        }

        .crumbs-bar a.back-link {
                background-size: 20px 20px !important;
                padding-left: 20px
        }

        .honour-swiper {
                margin-top: 20px
        }

        .honour-list li {
                width: 50%;
                margin-bottom: 35px
        }

        .honour-list li .icon .num {
                background-image: none;
                -webkit-text-fill-color: var(--main-color)
        }

        .honour-list li .icon .default {
                opacity: 0
        }

        .honour-list li .icon .hover {
                opacity: 1
        }

        .swiper-btn-group .swiper-pagination {
                width: 44px;
                padding: 0
        }

        .join-box {
                margin-top: 30px
        }

        .join-box h3 {
                padding: 0 25px;
                display: inline-block
        }

        .join-box h3,
        .join-box .txt {
                text-align: left
        }

        .join-swiper {
                padding: 30px 25px 50px 25px;
                margin-bottom: 20px
        }

        .join-swiper .swiper-wrapper {
                flex-wrap: wrap
        }

        .join-swiper .swiper-slide {
                opacity: 1;
                margin-bottom: 4.265vw
        }

        .join-swiper .swiper-slide .content {
                transform: translate3d(0, 0, 0)
        }

        .join-swiper .swiper-slide .content h4 {
                color: #fff;
                background: url(../images/icon_location_highlight.png) no-repeat left center;
                transform: translate3d(0, 0, 0);
                padding-left: 30px;
                background-size: 30px 30px !important;
                font-size: 20px;
                margin-bottom: 5px
        }

        .join-swiper .swiper-slide .content .job-list {
                opacity: 1;
                padding: 0 0 0 20px
        }

        .join-swiper .swiper-slide .content .job-list a {
                padding: 5px 10px;
                font-size: 14px
        }

        .join-swiper .swiper-slide .bg::after {
                opacity: 1
        }
}

@media screen and (max-width: 480px) {
        .honour-list {
                justify-content: space-between
        }

        .honour-list li {
                max-width: 160px;
                margin-bottom: 5.325vw
        }

        .history-swiper-box::after {
                top: 55px;
                bottom: 30px
        }

        .history-swiper {
                padding: 30px 0
        }

        .history-swiper .swiper-slide .til {
                font-size: 18px
        }

        .news-list ul li {
                margin-bottom: 10px
        }

        .news-list ul li a .content {
                padding-left: 10px
        }

        .news-list ul li a .txt {
                margin-bottom: 5px
        }

        .news-list ul li a .date {
                font-size: 10px
        }

        .detais-cont {
                padding-bottom: 10px
        }

        .detais-cont .article-header {
                margin-bottom: 15px;
                padding-bottom: 10px
        }

        .detais-cont .article-header h3 {
                font-size: 20px;
                padding-bottom: 10px
        }

        .detais-cont .article-content p {
                padding: 8px 0
        }

        .detais-cont .article-content img {
                margin: 10px auto
        }

        .join-swiper .swiper-slide .content {
                bottom: 10px;
                left: 20px;
                right: 20px
        }

        .join-swiper .swiper-slide .content h4 {
                font-size: 18px
        }

        .join-swiper .swiper-slide .content .job-list a {
                padding: 2px 10px;
                font-size: 10px
        }
}

.service-container {
        width: 100%;
        padding: 80px 0;
        position: relative;
        z-index: 22;
        display: flex;
        align-items: center;
        justify-content: space-between
}

.service-container .service-infor {
        max-width: 460px;
        order: 2;
        padding-right: 20px
}

.service-container .service-infor h3 {
        font-size: var(--f-size-48);
        color: #fff;
        padding-bottom: 30px
}

.service-container .service-infor .text {
        color: var(--color-grey)
}

.service-container .service-img {
        width: 580px;
        height: 625px;
        position: relative;
        z-index: 31;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        order: 3
}

.service-container .service-img .item {
        max-width: 332px;
        position: inherit;
        z-index: 20
}

.service-container .service-img .item:nth-child(1) {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 21;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .5)
}

.service-container .lattice-group {
        top: 55%;
        left: -130px
}

.service-container .lattice-7 {
        top: 72px;
        right: 124px
}

.service-container .lattice-8 {
        bottom: 90px;
        left: 22px
}

.service-container:last-child {
        padding-bottom: 160px
}

.service-container:nth-child(2n) .service-infor {
        padding-right: 0;
        padding-left: 20px
}

.service-container:nth-child(2n) .service-img {
        order: 1;
        justify-content: flex-start
}

.service-container:nth-child(2n) .service-img .item:nth-child(1) {
        left: auto;
        right: 0
}

.service-container:nth-child(2n) .lattice-group {
        top: auto;
        left: auto;
        right: 54px;
        bottom: 13%
}

.service-container:nth-child(2n) .lattice-7 {
        right: 330px
}

.service-container:nth-child(2n) .lattice-8 {
        bottom: 40px;
        left: 332px
}

.motivation-swiper {
        height: 100vh
}

.motivation-swiper .motivation-slide .video-bg {
        transition: all .75s linear .25s;
        opacity: 0
}

.motivation-swiper .motivation-slide .top-banner {
        height: 100% !important
}

.motivation-swiper .motivation-slide .wrap-box {
        height: 100%;
        display: flex;
        align-items: center
}

.motivation-swiper .motivation-slide .wrap-box .inner-content {
        padding-bottom: 20%
}

.motivation-swiper .motivation-slide .wrap-box .inner-content .cont-til50 {
        padding-bottom: .5em
}

.motivation-swiper .motivation-slide .wrap-box .inner-content .txt {
        max-width: 740px;
        color: var(--color-grey)
}

.motivation-swiper .motivation-slide .wrap-box .lattice-group {
        right: 16.25%;
        top: 20%
}

.motivation-swiper .motivation-slide .wrap-box .lattice-5 {
        right: -166px;
        bottom: 15%
}

.motivation-swiper .motivation-slide .wrap-box .lattice-6 {
        left: -120px;
        top: 30%
}

.motivation-swiper .motivation-slide:first-child .wrap-box .lattice-group {
        right: auto;
        left: 16.805%
}

.motivation-swiper .motivation-slide .top-banner .inner-cont h3 {
        transform: translate3d(0, 100%, 0);
        transition-duration: .75s;
        opacity: 0;
        transition-timing-function: ease-in
}

.motivation-swiper .motivation-slide .top-banner .inner-cont .en {
        transform: translate3d(0, 200%, 0);
        transition-duration: .75s;
        opacity: 0;
        transition-timing-function: ease-in
}

.motivation-swiper .motivation-slide.swiper-slide-active .video-bg {
        opacity: 1
}

.motivation-swiper .motivation-swiper-navigation {
        display: none;
        position: absolute;
        right: calc((100vw - 1440px)/2);
        top: 50%;
        transform: translate(0, -50%);
        z-index: 9000
}

.motivation-swiper .motivation-swiper-navigation .item {
        height: 40px;
        color: var(--color-grey);
        cursor: pointer;
        position: relative;
        transition: all .275s ease-in
}

.motivation-swiper .motivation-swiper-navigation .item .text {
        padding-right: 90px;
        display: inline-block
}

.motivation-swiper .motivation-swiper-navigation .item .num {
        display: inline-block;
        transition: all .275s ease-in
}

.motivation-swiper .motivation-swiper-navigation .item::after {
        content: "";
        height: 0;
        position: absolute;
        top: 35px;
        right: 11px;
        left: 0;
        border-right: 1px #fff dashed;
        transition: all .275s ease-in
}

.motivation-swiper .motivation-swiper-navigation .item:last-child::after {
        top: auto;
        bottom: 35px
}

.motivation-swiper .motivation-swiper-navigation .item.active {
        height: 180px;
        color: #fff
}

.motivation-swiper .motivation-swiper-navigation .item.active .num {
        transform: scale(1.25)
}

.motivation-swiper .motivation-swiper-navigation .item.active::after {
        height: 145px
}

.motivation-swiper .motivation-swiper-navigation .item:last-child.active {
        height: 40px
}

.motivation-swiper .motivation-swiper-navigation .item:last-child.active::after {
        height: 0
}

.video-bg-swiper {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        transition: opacity .25s linear
}

.video-bg-swiper.hide {
        opacity: 0
}

.video-bg-swiper .swiper-slide .video-bg::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 20%;
        left: 0;
        bottom: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(36, 40, 49, 0) 3%, #242831 94%)
}

.footer-scroll-swiper {
        height: calc(100% - 100px);
        margin-top: 100px
}

.footer-scroll-swiper .swiper-slide {
        height: auto
}

.footer-scroll-swiper .swiper-slide .footer {
        height: calc(100vh - 100px);
        min-height: 0
}

.footer-scroll-swiper .swiper-slide .footer .wrap-box {
        display: block;
        height: auto
}

.case-cont-item {
        margin-top: 100px;
        position: relative
}

.case-cont-item h3 {
        margin-bottom: 15px
}

.case-cont-item .sub-til {
        color: var(--color-grey);
}

.case-cont-item .lattice-group {
        left: 10.416%;
        top: -20px
}

.case-cont-item .lattice-5 {
        right: -70px;
        top: 14.565%
}

.case-cont-item .lattice-6 {
        left: -56px;
        bottom: -80px
}

.case-list {
        display: flex;
        margin-top: 86px;
        flex-wrap: wrap;
        justify-content: space-between
}

.case-list li {
        width: 23%;
        margin-bottom: 26px;
        box-sizing: border-box
}

.case-list li a {
        display: block
}

.case-list li .icon {
        max-width: 160px
}

.case-list li .thumb {
        overflow: hidden
}

.case-list li .thumb img {
        transition: all .75s linear
}

.case-list li .content h4 {
        font-size: var(--f-size-30);
        color: #fff;
        padding: 16px 0 8px 0
}

.case-list li .content .txt {
        color: var(--color-grey);
        font-weight: 300
}

.case-list li:hover .thumb img {
        transform: scale(1.05)
}

.case-list li:hover h4 {
        color: var(--color-blue)
}

.case-list.case-icon-group li {
        position: relative;
        text-align: center
}

.case-list.case-icon-group li a {
        position: relative;
        z-index: 30
}

.case-list.case-icon-group li .icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .275s ease-in
}

.case-list.case-icon-group li .infor {
        color: var(--color-grey);
        overflow: hidden;
        width: 0;
        transition: all .275s ease-in
}

.case-list.case-icon-group li .infor .inner {
        width: 100px
}

.case-list.case-icon-group li .infor span {
        display: block;
        text-align: left
}

.case-list.case-icon-group li .content h4 {
        padding: 0 0 15px 0
}

.case-list.case-icon-group li::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: url(../images/case/icon-bg_hover.jpg) no-repeat;
        background-size: cover !important;
        transition: all .275s ease-in;
        opacity: 0;
        transform: scale(0)
}

.case-list.case-icon-group li:hover::after {
        opacity: 1;
        transform: scale(1)
}

.case-list.case-icon-group li:hover .infor {
        width: 100px
}

.case-details-cont {
        position: relative
}

.case-details-cont p {
        padding-bottom: 10px;
        font-weight: 300
}

.case-details-cont .lattice-5 {
        right: -120px;
        top: 0
}

.introduce-cont {
        display: flex;
        justify-content: space-between
}

.introduce-cont h4 {
        font-size: 1.4em;
        color: #fff;
        padding-bottom: 20px
}

.introduce-cont .infor-box {
        width: 65%
}

.solution-list,
.more-solution-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: -18px;
        margin-right: -18px
}

.solution-list li,
.more-solution-list li {
        box-sizing: border-box;
        padding: 18px
}

.solution-list li .thumb,
.more-solution-list li .thumb {
        overflow: hidden
}

.solution-list li .thumb img,
.more-solution-list li .thumb img {
        transition: transform 1s ease-out
}

.solution-list li:hover .thumb img,
.more-solution-list li:hover .thumb img {
        transform: scale(1.05)
}

.solution-list {
        margin-top: 20px
}

.solution-list li {
        width: 50%
}

.solution-list li h4 {
        font-size: 1.2em;
        padding-top: 10px
}

.more-solution-list li {
        width: 33.33%
}

.more-solution-list li a {
        display: block
}

.more-solution-list li h4 {
        font-size: var(--f-size-30);
        color: #fff;
        padding-top: 20px
}

@media screen and (max-height: 730px) {
        .footer-scroll-swiper .swiper-slide .footer {
                height: auto
        }
}

@media screen and (max-width: 1440px) {
        .motivation-swiper .motivation-swiper-navigation {
                right: calc((100vw - 1200px)/2)
        }

        .footer-scroll-swiper {
                height: calc(100% - 68px);
                margin-top: 68px
        }

        .footer-scroll-swiper .swiper-slide .footer .footer-cont {
                margin-bottom: 80px;
                padding-bottom: 0
        }
}

@media screen and (max-width: 1200px) {
        .motivation-swiper .motivation-swiper-navigation {
                right: 25px
        }
}

@media screen and (max-width: 768px) {
        .service-container {
                padding: 30px 0;
                flex-direction: column
        }

        .service-container .service-infor {
                max-width: 480px;
                text-align: center;
                margin-bottom: 30px
        }

        .service-container .service-img {
                width: 480px
        }

        .service-container:nth-child(2n) .service-img {
                order: 3
        }

        .service-container:nth-child(2n) .lattice-group {
                right: -30px;
                bottom: 45%
        }

        .service-container:last-child {
                padding-bottom: 90px
        }

        .motivation-swiper .swiper-slide .bg {
                background-size: 100% auto;
                background-position: center 70%
        }

        .motivation-swiper .swiper-slide .bg.bg-item1 {
                background-image: url(../images/motivation-bg1@2x.jpg)
        }

        .motivation-swiper .swiper-slide .bg.bg-item2 {
                background-image: url(../images/motivation-bg2@2x.jpg)
        }

        .motivation-swiper .swiper-slide .bg.bg-item3 {
                background-image: url(../images/motivation-bg3@2x.jpg)
        }

        .motivation-swiper .swiper-slide .wrap-box {
                align-items: flex-start
        }

        .motivation-swiper .swiper-slide .wrap-box .inner-content {
                padding-top: 100px
        }

        .motivation-swiper .swiper-slide .wrap-box .lattice-group {
                right: 0;
                top: 60px
        }

        .motivation-swiper .swiper-slide .wrap-box .lattice-5 {
                right: -30px;
                bottom: 5%
        }

        .motivation-swiper .swiper-slide .wrap-box .lattice-6 {
                left: 0;
                top: 60%
        }

        .motivation-swiper .motivation-swiper-navigation {
                right: auto;
                left: 25px
        }

        .motivation-swiper .motivation-swiper-navigation .item {
                height: 30px
        }

        .motivation-swiper .motivation-swiper-navigation .item .text {
                padding-right: 20px
        }

        .motivation-swiper .motivation-swiper-navigation .item::after {
                top: 22px;
                right: 7px;
                left: 0
        }

        .motivation-swiper .motivation-swiper-navigation .item:last-child::after {
                bottom: 25px
        }

        .motivation-swiper .motivation-swiper-navigation .item.active {
                height: 60px
        }

        .motivation-swiper .motivation-swiper-navigation .item.active::after {
                height: 35px
        }

        .motivation-swiper .motivation-swiper-navigation .item:last-child.active {
                height: 30px
        }

        .motivation-swiper .motivation-swiper-navigation .item:last-child.active::after {
                height: 0
        }

        .video-bg-swiper .swiper-slide .video-bg {
                height: 110vw;
                top: auto;
                bottom: 11.675vw
        }

        .video-bg-swiper .swiper-slide .video-bg::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 11vw;
                left: 0;
                top: 0;
                z-index: 2;
                background: linear-gradient(to top, rgba(36, 40, 49, 0) 3%, #242831 94%)
        }

        .video-bg-swiper .swiper-slide .video-bg::after {
                display: none
        }

        .case-cont-item {
                margin-top: 80px
        }

        .case-cont-item:last-child {
                margin-bottom: 50px
        }

        .case-list {
                margin-top: 30px
        }

        .case-list li {
                width: 100%
        }

        .case-list li a {
                display: flex;
                align-items: center
        }

        .case-list li a .thumb {
                width: 36.5%
        }

        .case-list li a .thumb img {
                height: 100%;
                object-fit: cover
        }

        .case-list li a .content {
                width: 63.5%;
                box-sizing: border-box;
                padding-left: 20px
        }

        .case-list li a .content h4 {
                padding: 0 0 5px 0
        }

        .case-list.m-col-2 li {
                width: 46%
        }

        .case-list.m-col-2 li a {
                display: block
        }

        .case-list.m-col-2 li a .thumb {
                width: 100%
        }

        .case-list.m-col-2 li a .content {
                width: 100%;
                padding-left: 0
        }

        .case-list.m-col-2 li a .content h4 {
                padding: 10px 0 0 0
        }

        .case-list.case-icon-group li {
                text-align: left
        }

        .case-list.case-icon-group li a {
                display: flex;
                flex-direction: column;
                padding: 8vw 0 2vw 0
        }

        .case-list.case-icon-group li .icon-box {
                width: 85%;
                justify-content: space-between;
                align-items: flex-start;
                order: 2;
                margin-top: -10.25vw
        }

        .case-list.case-icon-group li .icon {
                order: 2
        }

        .case-list.case-icon-group li .infor {
                width: auto;
                padding-top: 12.5vw;
                font-size: 12px;
                order: 1
        }

        .case-list.case-icon-group li .infor .inner {
                width: auto
        }

        .case-list.case-icon-group li .content {
                width: 85%;
                padding: 0;
                order: 1
        }

        .case-list.case-icon-group li .content h4 {
                padding: 0
        }

        .case-list.case-icon-group li::after {
                background: url(../images/case/icon-bg_hover@2x.jpg) no-repeat;
                opacity: 1;
                transform: scale(1)
        }

        .introduce-cont {
                flex-direction: column;
                align-items: flex-start
        }

        .introduce-cont .infor-box {
                width: 100%;
                padding-bottom: 5px
        }

        .solution-list,
        .more-solution-list {
                margin-left: -10px;
                margin-right: -10px
        }

        .solution-list li,
        .more-solution-list li {
                padding: 10px
        }
}

@media screen and (max-width: 480px) {
        .footer-scroll-swiper .swiper-slide .footer {
                height: auto
        }

        .footer-scroll-swiper .swiper-slide .footer .lattice-6 {
                left: auto;
                right: 20px;
                top: 10px
        }

        .service-container {
                padding: 25px 0
        }

        .service-container .service-infor h3 {
                padding-bottom: 10px
        }

        .service-container .service-img {
                width: 90%;
                height: 85vw
        }

        .service-container .service-img .item {
                width: 57.75%
        }

        .service-container .lattice-7 {
                right: 0;
                top: 0
        }

        .service-container .lattice-8 {
                left: 0;
                bottom: 0
        }

        .service-container .lattice-group {
                left: -100px;
                top: 30%
        }

        .service-container:nth-child(2n) .lattice-7 {
                right: auto;
                left: 0
        }

        .service-container:nth-child(2n) .lattice-8 {
                left: auto;
                right: 0;
                bottom: 20px
        }

        .service-container:nth-child(2n) .lattice-group {
                right: -60px
        }

        .service-container:last-child {
                padding-bottom: 50px
        }

        .case-cont-item {
                margin-top: 60px
        }

        .case-list li {
                margin-bottom: 4.266vw
        }

        .case-list li a .thumb {
                height: 25.5vw
        }

        .case-list li a .content {
                padding-left: 15px
        }

        .case-list li:last-child {
                margin-bottom: 0
        }

        .solution-list {
                margin-left: -5px;
                margin-right: -5px
        }

        .solution-list li {
                padding: 5px
        }

        .solution-list li h4 {
                font-size: 1em
        }

        .more-solution-list li {
                width: 100%
        }

        .more-solution-list li h4 {
                padding-top: 10px
        }
}

@media screen and (max-width: 320px) {
        .case-list li .icon {
                max-width: 140px
        }
}