/* container */
.container {
    width: 100%;
    position: relative;
    background-color: #F3F3F3;
    overflow: hidden;
}

.container .banner {
    width: 100%;
    height: 29.375rem;
}

.banner-item {
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.banner-item:nth-child(1) {
    background-image: url(../images/index/img_banner.png);
}

.banner-item:nth-child(2) {
    background-image: url(../images/index/img_banner2.png);
}

.banner-item:nth-child(3) {
    background-image: url(../images/index/img_banner3.png);
}

.banner-item img {
    width: 100%;
    height: 100%;
}

.work-section {
    width: 100%;
    /* height: 15.375rem; */
    background: #056DDC;
    /* padding: 0.625rem 0 3.75rem 0; */
}

.work-section .section-item {
    flex: 0 0 20%;
    text-align: center;
    padding: 1.625rem 2.5rem;
    opacity: 1;
    animation: fade-in;
    animation-duration: .8s;
    -webkit-animation: fade-in .8s;
    animation-delay: 200ms;
    -webkit-animation-delay: 200ms;
    /* Safari 和 Chrome */
}

.work-section .section-icon {
    display: block;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5625rem auto;
    overflow: hidden;
    background-size: 98%;
    background-repeat: no-repeat;
    background-position: center;
}

.work-section h5 {
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: rgba(255, 255, 255, .6);
    word-break: keep-all;
    font-weight: 500;
}

.section-item:nth-child(2) .section-icon {
    background-image: url('../images/index/icon_tixian1.png');
}

.section-item:nth-child(3) .section-icon {
    background-image: url('../images/index/icon_tixian2.png');
}

.section-item:nth-child(4) .section-icon {
    background-image: url('../images/index/icon_tixian3.png');
}

.section-item:nth-child(5) .section-icon {
    background-image: url('../images/index/icon_tixian4.png');
}

.container .about-us {
    display: flex;
    overflow: hidden;
}

.container .title-box {
    height: 4.25rem;
    padding-left: 1rem;
    font-size: 2.25rem;
    line-height: 4.25rem;
    color: #0D1326;
    font-weight: 600;
    position: relative;
}

.container .title-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: .5rem;
    background: url(../images/index/img_line.png) no-repeat center center;
}

.container .check-more-btn {
    display: block;
    width: 10.625rem;
    height: 2.75rem;
    font-size: 1rem;
    line-height: 2.75rem;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #056DDC;
    transition: ease .3s;
}

.check-more-btn:hover {
    background: #0D1326;
}

.about-us .left-box {
    flex: 0.55;
    overflow: hidden;
    background: #EBEEF0;
}

.left-box .text-container {
    float: right;
    width: 28rem;
    margin-right: 13.625rem
}

.about-us .right-box {
    flex: 0.45;
}

.about-us .right-box img {
    width: 100%;
    height: 100%;
    display: block;
}

.left-box .title-box {
    margin-top: 2.875rem;
}

.left-box p {
    margin-top: 0.75rem;
    line-height: 1.875rem;
    color: #2A3040;
    word-break: keep-all;
}

.left-box .check-more-btn {
    display: block;
    margin-top: 1rem;
    margin-bottom: 2.25rem;
}

.product,
.application {
    padding-top: 6.875rem;
    overflow: hidden;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

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

.product-list {
    margin-top: 4.6875rem;
    display: grid;
    grid-template-columns: repeat(3, calc(33.33% - .375rem));
    grid-template-rows: repeat(3, 17rem);
    grid-row-gap: .75rem;
    grid-column-gap: .5rem;
}

.product-list .product-item {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
}

.product-list .product-item img {
    display: block;
    width: 100%;
    height: 100%;
}

.product-list .product-item .product-name {
    position: absolute;
    width: 100%;
    padding-left: 2.5rem;
    font-size: 1rem;
    line-height: 1.125rem;
    color: rgba(255, 255, 255, .6);
    word-break: break-all;
    bottom: 3rem;
    left: 0;
    z-index: 1;
}

.product-list .product-item .check-btn {
    display: none;
    position: absolute;
    left: 2.5rem;
    bottom: -2.5rem;
    width: 112px;
    height: 2.25rem;
    background: rgba(4, 79, 159, 0);
    border: 1px solid rgba(243, 243, 243, 0.6);
    text-align: center;
    font-size: .875rem;
    line-height: 2.25rem;
    color: #fff;
    z-index: 1;
}

.product .mobile-btn {
    display: none;
    margin-top: 1.5rem;
}

.product-item .product-name::after {
    content: '';
    position: absolute;
    width: 2.25rem;
    height: .25rem;
    background: #E35359;
    bottom: -1rem;
    left: 2.5rem;
}

.product-list .product-item:nth-child(1) {
    grid-column: 34rem;
    grid-row: 1 / 3;
}

.product-list .product-item .mask {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    /* transition: ease .5s; */
    background: rgba(5, 109, 220, .8);
    animation: fade-in;
    /*动画名称*/
    animation-duration: .5s;
    /*动画持续时间*/
    -webkit-animation: fade-in .5s;
    /*针对webkit内核*/
}

.product-list .product-item:hover .mask {
    display: block;
}

.product-list .product-item:hover .check-btn {
    display: block;
    bottom: 1.875rem;
    z-index: 5;
    animation: fade-up;
    /*动画名称*/
    animation-duration: .35s;
    /*动画持续时间*/
    -webkit-animation: fade-up .35s;
    /*针对webkit内核*/
}

.product-list .product-item:hover .product-name {
    /* animation: fade-InUp;
    animation-duration: .5s;
    -webkit-animation: fade-InUp .5s;
    bottom: 6.25rem;
    z-index: 5; */
    display: none;
}

.product-list .product-item:hover .mask-product-name {
    position: absolute;
    width: 100%;
    padding-left: 2.5rem;
    font-size: 1rem;
    line-height: 1.125rem;
    color: rgba(255, 255, 255, 1);
    word-break: break-all;
    bottom: 3rem;
    left: 0;
    z-index: 1;
    animation: fade-InUp;
    animation-duration: .5s;
    -webkit-animation: fade-InUp .5s;
    bottom: 6.25rem;
    z-index: 5;
}

.mask-product-name::after {
    content: '';
    position: absolute;
    width: 2.25rem;
    height: .25rem;
    background: #E35359;
    bottom: -1rem;
    left: 2.5rem;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    /*初始状态 透明度为0*/
    40% {
        opacity: 0.3;
    }

    /*过渡状态 透明度为0*/
    100% {
        opacity: 0.7;
    }

    /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in {

    /*针对webkit内核*/
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.7;
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        bottom: -100%;
    }

    /*初始状态 透明度为0*/
    40% {
        opacity: 0.45;
        bottom: -50%;
    }

    /*过渡状态 透明度为0*/
    100% {
        opacity: 0.7;
        bottom: 0;
    }

    /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

    /*初始状态 透明度为0*/
    40% {
        opacity: 0.5;
        transform: translateY(-25%);
    }

    /*过渡状态 透明度为0*/
    100% {
        opacity: 1;
        transform: translateY(0);
    }

    /*结束状态 透明度为1*/
}

@keyframes fade-InUp {
    0% {
        opacity: 0;
        bottom: 0;
    }

    40% {
        opacity: 0.45;
        bottom: 3rem;
    }

    100% {
        opacity: 0.7;
        bottom: 6.25rem;
    }
}

@-webkit-keyframes fade-InUp {
    0% {
        opacity: 0;
        bottom: 0;
    }

    40% {
        opacity: 0.45;
        bottom: 3rem;
    }

    100% {
        opacity: 0.7;
        bottom: 6.25rem;
    }
}

.container .application {
    margin-bottom: 8.25rem;
}

.application-list {
    margin-top: 4.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.application-item {
    width: calc(25% - .9375rem);
    height: 12.875rem;
    overflow: hidden;
}

.application-item img {
    display: block;
    width: 100%;
    height: 100%;
}

.swiper-pagination-bullet {
    width: 4rem !important;
    height: .25rem !important;
    border-radius: 0 !important;
}

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

.swiper-pagination-bullet-active {
    background: rgba(227, 83, 89, 1) !important;
}


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

@media screen and (max-width: 1200px) {
    .container .banner {
        height: 25rem;
    }

    .work-section {
        padding: 1rem 0;
        height: auto;
    }

    .work-section .section-item {
        padding: .5rem;
        max-width: calc(25% - .25rem);
    }

    .work-section .section-icon {
        width: 3rem;
        height: 3rem;
        margin-bottom: 1rem;
    }

    .container .about-us {
        flex-direction: column;
    }

    .about-us .left-box {
        flex: 1;
    }

    .left-box .text-container {
        float: none;
        width: 100%;
        margin-right: 0;
        padding: 0 1.5rem;
    }

    .container .title-box {
        margin-top: 0;
        font-size: 1.5rem;
        height: 3.25rem;
        line-height: 3.25rem;
    }

    .left-box .title-box {
        margin-top: 2.66rem;
    }

    .left-box p {
        margin-top: 2rem;
        font-size: 1.1667rem;
        line-height: 2rem;
    }

    .left-box .check-more-btn {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .about-us .right-box {
        flex: 1;
    }

    .product-title .check-more-btn {
        display: none;
    }

    .product,
    .application,
    footer {
        padding-top: 2.66rem;
    }

    .product .mobile-btn {
        display: block;
    }

    .product-list .product-item {
        display: block;
        margin-bottom: 1rem;
    }

    /* .product-list .product-item:nth-child(1) {
        display: block;
    }

    .product-list .product-item:nth-child(2) {
        display: block;
    }

    .product-list .product-item:nth-child(3) {
        display: block;
    } */

    .banner-item {
        background-size: auto 100%;
    }

    .banner-item:nth-child(1) {
        background-image: url(../images/index/mobile-banner1.png);
    }

    .banner-item:nth-child(2) {
        background-image: url(../images/index/mobile-banner2.png);
    }

    .banner-item:nth-child(3) {
        background-image: url(../images/index/mobile-banner3.png);
    }

    .container .product-list {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
    }

    .container .application {
        margin-bottom: 2rem;
    }

    .application-list {
        margin-top: 2rem;
        flex-wrap: wrap;
    }

    .application-item {
        width: calc(50% - .16rem);
        height: 10.58rem;
        margin-bottom: .16rem;
    }

    .return-top {
        display: none;
    }

    .work-section h5 {
        font-size: 1.1667rem;
        word-break: break-all;
    }

    .product-list .product-item .product-name {
        font-size: 1.167rem;
        line-height: 1.5rem;
    }
}