@import "../font/iconfont.css";

.iconfont {
    font-size: 20px;
}

.opacity4 {
    opacity: .4;
}

:root {

    --blue: #0260b3;
}

.mask-white {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background: rgba(255, 255, 255, .2);
    content: '';
    -webkit-transition: -webkit-transform .6s;
    transition: transform .6s;
    -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
    transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0)
}

.maskBox:hover .mask-white {
    -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
    transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0)
}

.z5 {
    position: relative;
    z-index: 5;
}

.hidden {
    overflow: hidden;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.text-nowrap {
    white-space: nowrap;
}

.radius5 {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.radius8 {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.radius10 {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.radius15 {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.radius20 {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.radius40 {
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

.radius50 {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.transition6 {
    transition: all .6s;
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
}

.f12 {
    font-size: 12px;
}

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

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

.flex-center {
    display: flex;
    align-items: center;
}

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

.flex-between-start {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-end {
    display: flex;
    align-items: flex-end;
}

.flex-content-end {
    display: flex;
    justify-content: flex-end;
}

.flex-start {
    display: flex;
    align-items: flex-start;
}

.iflex {
    display: inline-flex
}

.block {
    display: block;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

@media screen and (max-width:750px) {
    .wapFlex {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .wapFlexF {
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
    }

}


.ConstructionSwiper .swiper-slide {
    border-radius: 10px;
    overflow: hidden;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.ConstructionSwiper .swiper-slide .desc {
    height: 7em;
}

.ConstructionSwiper .more {
    display: inline-flex;
    height: 50px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.ConstructionSwiper .more::after {
    width: 0;
    height: 100%;
    transition: all .36s;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--blue);
    display: block;
    content: '';
    -webkit-transition: all .36s;
    -moz-transition: all .36s;
    -ms-transition: all .36s;
    -o-transition: all .36s;
}

.ConstructionSwiper .swiper-slide:hover .title {
    color: var(--blue);
}

.ConstructionSwiper .more:hover {
    color: #fff;
    transform: scale(0.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}

.ConstructionSwiper .more:hover::after {
    width: 100%;
}

.ConstructionSwiper .swiper-slide:hover .img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}


.light {
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: skewx(-25deg);
    z-index: 2;
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

.light-tri:hover .light {
    left: 100%;
    transition: 1s;
}

.light-tri:hover {
    transform: scale(0.95);
    box-shadow: 0 0 10px rgba(43, 23, 110, .5);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
}

.params-container .text-nowrap {
    flex-shrink: 0;
}

.equipmentSwiper .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*   */
.equipmentSwiper .more {
    position: absolute;
    left: 40px;
    bottom: 30px;
    display: inline-flex;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

/*.equipmentSwiper .more::after{ width:0; height: 100%; transition: all .36s;   position: absolute; left: 0; top: 0; background: var(--blue); display: block; content: ''; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s;    }
.equipmentSwiper .more:hover{ color: #fff; transform: scale(0.9); box-shadow: 0 0 10px rgba(0, 0, 0, .15); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); }
.equipmentSwiper .more:hover::after{    width: 100%; } */
.salesBtn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.salesBtn:hover {
    background: var(--blue);
    color: #fff;
}

.hotSwiper .swiper-slide {
    background-color: #0261b5;
    position: relative;
}

.hotSwiper .swiper-slide::after {
    width: 24.6%;
    height: 60%;
    background: rgba(255, 255, 255, .1);
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    content: '';
    -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.hotSwiper .swiper-slide .img {
    width: 63%;
}

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

.hotSwiper .swiper-slide .text {
    width: 30%;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.hotSwiper .swiper-slide .text .title {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.hotSwiper .swiper-slide .text li {
    cursor: pointer;
    color: rgba(255, 255, 255, .3);
    line-height: 30px;
}

.hotSwiper .swiper-slide .text li::before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    transform: scale(0, 0);
    transition: all .36s;
    margin-top: -14px;
    left: -14px;
    width: 28px;
    height: 28px;
    background: url(../pic/hotSwiperIcon.png) no-repeat center center;
    background-size: 100% 100%;
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -webkit-transition: all .36s;
    -moz-transition: all .36s;
    -ms-transition: all .36s;
    -o-transition: all .36s;
}

.hotSwiper .swiper-slide .text li.on,
.hotSwiper .swiper-slide .text li:hover {
    color: #fff;
    font-size: 1.2em;
}

.hotSwiper .swiper-slide .text li.on::before,
.hotSwiper .swiper-slide .text li:hover:before {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
}

.hotSwiper .swiper-slide .text ul:hover>li:not(:hover) {
    color: rgba(255, 255, 255, .3);
    font-size: 1em;
}

.hotSwiper .swiper-slide .text ul:hover>li:not(:hover)::before {
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
}


.salesThere .salesBtn {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.salesThere .prev {
    left: -80px;
}

.salesThere .next {
    right: -80px;
}

.coreUl li {
    width: calc((100% - 60px)/3);
    margin-right: 30px;
}

.coreUl li::after {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: '';
    background: var(--blue);
    transition: all .36s;
    -webkit-transition: all .36s;
    -moz-transition: all .36s;
    -ms-transition: all .36s;
    -o-transition: all .36s;
}

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

.coreUl li .desc {
    height: 12.8em;
}

.coreUl li .con {
    border: 1px solid rgba(255, 255, 255, .2);
}

.coreUl li .f60 {
    color: rgba(2, 96, 179, .2);
    position: absolute;
    right: 0;
    bottom: 0;
}

.coreUl li:hover::after {
    width: 100%;
}

.coreUl li:hover {
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
}

.coreUl li:hover .f60 {
    color: rgba(255, 255, 255, .2);
}

.coreUl li:hover .desc {
    color: #fff;
}

.scenariosul li {
    width: 15.3%;
}

.scenariosul li .img img {
    height: 350px;
    width: 100%;
    object-fit: cover;
}

.scenariosul li .txt {
    height: 115px;
}

.scenariosul li .txt .desc {
    display: none;
    margin-top: 8px;
}

@media screen and (min-width:750px) {

    .scenariosul li.on,
    .scenariosul li:hover {
        width: 33.3%;
    }

    .scenariosul li.on .txt,
    .scenariosul li:hover .txt {
        background: var(--blue);
        color: #fff;
    }

    .scenariosul li.on .txt .desc,
    .scenariosul li:hover .txt .desc {
        display: -webkit-box;
    }

    .scenariosul:hover>li:not(:hover) {
        width: 15.3%;
    }

    .scenariosul:hover>li:not(:hover) .txt {
        background: #f5f5f5;
        color: #333;
    }

    .scenariosul:hover>li:not(:hover) .desc {
        display: none;
    }

}



.WorkshopUL li {
    width: calc((100% - 70px)/3);
    margin-right: 35px;
}

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

.WorkshopUL li:hover .img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.WorkshopUL li:hover .txt {
    background: var(--blue);
    color: #fff;
}

.f14 {
    font-size: 14px;
}

.studiesSwiper {
    padding-left: 10vw;
}

.studiesSwiper .swiper-slide {}

.studiesSwiper .swiper-slide .txt {
    align-items: flex-start;
}

.studiesSwiper .swiper-slide .txt .more {
    display: inline-block;
}

.studiesSwiper .swiper-slide:hover .txt .more {
    background: var(--blue);
    color: #fff;
    padding: 10px 25px;
}

.studiesSwiper .swiper-slide .img {
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 20% 0);
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 20% 0);
}

.studiesSwiper .swiper-slide .img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.salesSeven .button {
    width: 150px;
    position: absolute;
    right: 29%;
    top: 0;
    height: 400px;
    z-index: 10;
}

.systemOne {
    background: url(../pic/systemOneImg.png) no-repeat center right;
    height: 80vh;
    background-size: auto 100%;
}

.w40 {
    width: 40%;
}

.systemLine {
    width: 20px;
    height: 5px;
}

.diagramUl {
    width: 72%;
}

.diagramUl li {
    border: 1px solid #e5e5e5;
    width: 18.5%;
    background: url(../pic/diagram-bg.png) no-repeat center center;
    background-size: 86% auto;
}

.diagramUl li:hover img {
    filter: grayscale(100%) brightness(500%);
}

.diagramUl li:hover {
    background: var(--blue);
    color: #fff;
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
}

.diagramIcon {
    height: 30px;
}

.systemTwoCon {
    box-shadow: 0 0 20px rgba(2, 96, 179, .15);
}

.systemThere {
    background: url(../pic/systemTherebg.jpg) no-repeat center center;
    background-size: cover;
}

.color-white2 {
    color: rgba(255, 255, 255, .4);
}

.systemThereUl li {
    width: calc((100% - 140px)/3);
    margin-right: 70px;
    background: rgba(255, 255, 255, .2);
}

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

.systemThereUl li:hover {
    box-shadow: 0 0 30px rgba(255, 255, 255, .4);
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
}

.systemFour {
    background: url(../pic/systemFourbg.png) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.systemFourUl::after {
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    background: var(--blue);
    display: block;
    content: '';
}

.systemFourUl li {
    width: calc(100% / 5);
    position: relative;
}

.systemFourUl li .item {
    height: 212px;
}

.systemFourUl li .item::after {
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(2, 96, 179, .15), rgba(2, 96, 179, 1));
    display: block;
    content: '';
}

.systemFourUl li::after,
.systemFourUl li::before {
    width: 100%;
    height: 212px;
    display: block;
    content: '';
}

.systemFourUl li i {
    transition: all .36s;
    width: 15px;
    height: 15px;
    display: block;
    content: '';
    background: url(../pic/systemFourDian.png) no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 50%;
    margin-left: -7px;
    margin-top: -7px;
    -webkit-transition: all .36s;
    -moz-transition: all .36s;
    -ms-transition: all .36s;
    -o-transition: all .36s;
}

.systemFourUl li::before {
    display: none;
}

.systemFourUl li:nth-child(2n)::after {
    display: none;
}

.systemFourUl li:nth-child(2n):before {
    display: block;
}

.systemFourUl li:nth-child(2n) .item::after {
    background-image: linear-gradient(to bottom, rgba(2, 96, 179, 1), rgba(2, 96, 179, .15));
}

.systemFourUl li:hover i {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.systemFourUl li:hover .systemFourIcon {
    animation: jello 1.2s;
}

.systemFive:hover {
    background: url(../pic/systemFivebg.jpg) no-repeat center center;
    background-size: cover;
}

.systemFiveRight {
    width: 72%;
}

.line-height1 {
    line-height: 1;
}

.systemFiveConUl li {
    width: calc((100% - 72px)/4);
    margin-right: 24px;
}

.systemFiveConUl li .txt {
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}

.systemFiveConUl li:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.systemFiveConUl li:hover {
    box-shadow: 0 0 25px rgba(2, 96, 179, .15);
}

.posi-a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3
}

.bg-f7 {
    background: #f7f7f7;
}

.systemSixUl li {
    width: calc(25%);
}

.systemSixUl li:nth-child(2n) {
    flex-direction: column-reverse;
}

.systemSevenUl li {
    width: 23.8%;
}

.systemSevenUl li::after {
    background: rgba(255, 255, 255, .9);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: '';
    transition: all .36s;
    -webkit-transition: all .36s;
    -moz-transition: all .36s;
    -ms-transition: all .36s;
    -o-transition: all .36s;
}

/* .systemSevenUl li .txt{ height: auto;} */

.systemSevenUl li:hover .txt {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent);
}

.systemSevenUl li:hover {
    color: #fff;
    box-shadow: 0 0 25px rgba(2, 96, 179, .25);
}

.systemSevenUl li:hover .color-666 {
    color: #fff;
}

.systemSevenUl li:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.systemSevenUl li:hover::after {
    height: 0;
}

.border {
    border: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-left {
    border-left: 1px solid #e5e5e5;
}

.border-right {
    border-right: 1px solid #e5e5e5;
}

.systemEight {
    background: url(../pic/systemEightBg.jpg) no-repeat center center;
    background-size: cover;
}

.systemEightImg {
    width: 54vw;
    margin-left: -5vw;
    max-width: none;
}

.systemEight .txt {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
}

.systemEight .txt li {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.systemEight .txt li:last-child {
    border-bottom: none;
}

.systemEightIcon {
    flex-shrink: 0;
    width: 1px;
    height: 80px;
    opacity: 0;
}

.systemEight .txt li.on .systemEightIcon,
.systemEight .txt li:hover .systemEightIcon {
    width: 80px;
    opacity: 1;
}

.systemEight .txt:hover>li:not(:hover) .systemEightIcon {
    width: 1px;
    height: 80px;
    opacity: 0;
}


.systemEightTip {
    width: 50%;
}

.systemEightTip span {
    margin-right: 10px;
}

.systemNineUl li {
    width: calc((100% - 60px)/4);
    margin-right: 20px;
}

.systemNineUl li:nth-child(4n) {
    margin-right: 0;
}

.systemNineUl li:hover {
    box-shadow: 0 0 15px rgba(2, 96, 179, .15);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}

.systemNineUl li:hover .txt {
    background: var(--blue);
    color: #fff;
}

.systemNineUl li:hover .img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.systemTen .HeadquartersSwiper .swiper-slide .text {
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
}

.systemTen .HeadquartersSwiper .swiper-slide:hover .img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}


.systemTen .salesBtn {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.systemTen .prev {
    left: -80px;
}

.systemTen .next {
    right: -80px;
}