.swiper {

    width: 1200px;

    height: 800px;

    margin: 0 auto 30px;

}



.swiper-container {

    width: 100%;

    height: 100%;

}



.swiper-slide {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.swiper-image {

    display: block;

}



.swiper-text {

    width: 100%;

    text-align: center;

    margin: 106px 0 36px 0;

}



.swiper-pagination {

    width: 100% !important;

    height: 4px;

    bottom: 120px !important;

    margin: 0 !important;

}



.swiper-pagination .swiper-pagination-bullet {

    width: 88px;

    height: 4px;

    border-radius: 0px;

    background-color: var(--black15);

}



.swiper-pagination .swiper-pagination-bullet-active {

    border-radius: 0px;

    background-color: var(--main);

}



.pros {

    width: 100%;

    background-color: var(--light);

}



.pro-wrap {

    width: 1200px;

    padding: 44px 0;

    margin: 0 auto;

}



.pros-wrap {

    margin-top: 72px;

}



.pro-item {

    width: 310px;

    height: 300px;

    background: #FFFFFF;

    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.16);

    border-radius: 16px 16px 16px 16px;

    margin: 8px;

    padding: 47px 35px;

    box-sizing: border-box;

    color: var(--black);

}



.pro-item:hover {

    cursor: pointer;

    /* 浮动 */

    transform: translateY(-6px) !important;

}



.pro-title {

    margin: 16px 0 8px;

}



.pro-text {

    line-height: 30px;

}



.pro-more {

    margin: 70px 0;

}



.pro-more a span:hover {

    cursor: pointer;

    /* color: var(--main); */

}



.pro-more a:hover > .arrow {

    opacity: 1;

    margin-left: 6px;

  }



.sols {

    width: 100%;

}



.sol-wrap {

    width: 1200px;

    padding: 44px 0;

    margin: 0 auto;

}



.sol-title {

    margin: 16px 0 60px;

}



.sol-switch {

    width: 100%;

    position: relative;

    padding: 0 60px;

    box-sizing: border-box;

}



.sol-switch-item {

    width: 64px;

    height: 85px;

    line-height: 85px;

    text-align: center;

    cursor: pointer;

}



.sol-active {

    color: var(--main);

}



.sol-slider {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 64px;

    height: 4px;

    background-color: var(--main);

    transition: all 0.3s ease-in-out;

}



.line {

    width: 100%;

    height: 1px;

    background-color: var(--black15);

}



.sol-contents {

    width: 100%;

    height: 590px;

    overflow: hidden;

    /* overflow-x: scroll; */

    /* white-space: nowrap; */

    position: relative;

}



.sol-content {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    box-sizing: border-box;

    padding: 10px 0;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    white-space: wrap;

}



.sol-content:nth-child(2) {

    left: calc(100% * 1);

}

.sol-content:nth-child(3) {

    left: calc(100% * 2);

}

.sol-content:nth-child(4) {

    left: calc(100% * 3);

}

.sol-content:nth-child(5) {

    left: calc(100% * 4);

}

.sol-content:nth-child(6) {

    left: calc(100% * 5);

}

.sol-content:nth-child(7) {

    left: calc(100% * 6);

}

.sol-content:nth-child(8) {

    left: calc(100% * 7);

}

.sol-content:nth-child(9) {

    left: calc(100% * 8);

}



.sol-left {

    width: 340px;

    margin-right: 30px;

}



.sol-right {

    padding: 30px 60px 0;

    box-sizing: border-box;

}



.sol-right > img {

    width: 98%;

}



.sol-content-title {

    width: 100%;

}



.sol-content-desc {

    width: 100%;

    margin: 32px 0;

    white-space: wrap;

    line-height: 30px;

}



.sol-content-link a span:hover {

    cursor: pointer;

    /* color: var(--main); */

}



.sol-content-link a:hover > .arrow {

    opacity: 1;

    margin-left: 6px;

}



.wins {

    width: 100%;

}



.win-wrap {

    width: 100%;

    height: 510px;

    position: relative;

}



.win-bands-list {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.win-bands-list-wrap {

    position: absolute;

    left: 0px;

    right: 0px;

    top: 0;

    bottom: 0;

    z-index: 5;

    overflow: hidden;

    display: flex;

    flex-direction: row;

    justify-content: start;

    align-items: center;

    flex-wrap: wrap;

}



.win-item {

    position: absolute;

    top: 0;

    left: 0;

    padding: 25px 50px;

    box-sizing: border-box;

    filter: grayscale(100%);

}



/* .win-item:hover {

    background-color: var(--white);

    filter: none;

    z-index: 15;

    border-radius: 4px;

    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.16);

} */



.win-mask {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 10;

    background-color: #3662ECF2;

    pointer-events: none;

}



.win-content {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    z-index: 15;

    pointer-events: none;

}



.win-button {

    display: block;

    width: 188px;

    height: 57px;

    line-height: 57px;

    margin-top: 70px;

    text-align: center;

    border-radius: 40px 40px 40px 40px;

    border: 1px solid var(--white);

    pointer-events: auto;

}



.win-button:hover {

    cursor: pointer;

    /* color: var(--main); */

}



.certs {

    width: 100%;

}



.cert-wrap {

    width: 1200px;

    padding: 44px 0;

    margin: 0 auto;

    background-color: var(--white);

}



.cert-title {

    margin: 20px 0 70px;

}



.cert-list {

    width: 100%;

}



.cert-item {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

}



.cert-logo {

    width: 48px;

    height: 48px;

    filter: grayscale(100%);

}



.cert-item:hover > .cert-logo {

    filter: none;

}



/* .cert-item:nth-child(1):hover > .cert-logo {

    content: url('../images/certs/gx.png');

}



.cert-item:nth-child(2):hover > .cert-logo {

    content: url('../images/certs/qybq.png');

}



.cert-item:nth-child(3):hover > .cert-logo {

    content: url('../images/certs/cmmi.png');

}



.cert-item:nth-child(4):hover > .cert-logo {

    content: url('../images/certs/3aj.png');

}



.cert-item:nth-child(5):hover > .cert-logo {

    content: url('../images/certs/iso.png');

} */



@media all and (max-width: 750px) {

    .swiper {

        width: 96%;

        height: 600px;

    }



    .swiper-image {

        width: 100%;

    }



    .swiper-pagination {

        bottom: 90px !important;

    }



    .pro-wrap {

        width: 96%;

    }



    .sol-wrap {

        width: 98%;

    }



    .sol-switch {

        padding: 0 0px;

        flex-wrap: nowrap;

    }

    

    .sol-switch-item {

        font-size: 14px;

        width: 46px;

        overflow: hidden;

    }

    

    .sol-slider {

        width: 46px;

    }



    .sol-contents {

        width: 98%;

        height: 850px;

    }



    .sol-content {

        padding: 2px 0;

        flex-direction: column;

    }



    .sol-left {

        width: 100%;

        margin-right: 0px;

    }

    

    .sol-right {

        padding: 2px 2px;

    }



    .cert-wrap {

        width: 96%;

    }



    .cert-list {

        flex-direction: column;

    }



    .cert-item {

        margin: 10px 0;

    }

}