.video_box {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    z-index: 100;
    transform: translateY(-30rem);
    // display: flex;

    .video {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
}

.nav-box {
    position: absolute;
    width: 100%;
    height: 1rem;
    top: 0;
    left: 0;
    z-index: 20;
}


.banner_box {
    width: 100%;
    margin: auto;
    height: 5.47rem;
    background: url('https://jdi.cocosbcx.net/image/cocosbcx/h5-banner24.jpg') no-repeat center;
    background-size: 7.5rem 5.47rem;
    overflow: hidden;
    position: relative;

    .wlogo {
        display: block;
        width: 1.22rem;
        height: .54rem;
        top: .22rem;
        left: .22rem;
        position: absolute;
    }

    .home_btn_box {
        width: 6.2rem;
        margin: auto;
        margin-top: 1.6rem;

        h5 {
            font-size: .6rem;
            color: #fff;
            font-weight: normal;
            font-family: FjallaOne;
        }

        h6 {
            color: #fff;
            font-weight: normal;
            font-size: .38rem;
            margin-top: .1rem;
        }

        .play_btn {
            overflow: hidden;
            margin-top: .16rem;

            img {
                display: block;
                width: 0.64rem;
                height: 0.64rem;
            }

            p {
                width: 4.8rem;
                margin-left: .3rem;
                color: #fff;
                font-size: .22rem;
                line-height: .3rem;

            }
        }
    }

    .home_btn_box_en {
        margin-top: 1.1rem;

    }

}

.banner_box_g {
    background: url('https://jdi.cocosbcx.net/image/cocosbcx/bannerggh5.png') no-repeat center;
    background-size: 7.5rem 5.47rem;

    .home_btn_box {
        width: 5.6rem;
        margin: auto;
        color: #fff;
        text-align: right;
        margin-top: 1.8rem;

        .til {
            font-size: .36rem;
        }

        .line {
            width: .5rem;
            height: 2px;
            background: rgba(255, 255, 255, 1);
            float: right;
            margin-top: .38rem;
        }

        .dh {
            font-size: .36rem;
            margin-top: .8rem;
        }

        .date {
            margin-top: .46rem;
            font-size: .32rem;
        }
    }
}

.bannern_box_g {
    background: url('../../images/banner-WAP.png') no-repeat center;
    background-size: cover;

    .home_btn_box_g {
        width: 5.9rem;
        margin: auto;
        margin-top: 2.15rem;
        color: #fff;

        .til {
            font-size: .45rem;
            font-family: ar;
            font-weight: 900;

            span {
                font-size: .33rem;
                font-family: PingFangSC-Regular;
                font-weight: normal;
            }
        }

        .text {
            // height: .5rem;
            font-size: .35rem;
            line-height: .5rem;
            margin-top: .14rem;
        }

        .line {
            width: .5rem;
            height: .04rem;
            background: rgba(255, 255, 255, 1);
            float: left;
            margin-top: .34rem;
        }
    }
}

.explane {
    overflow: hidden;

    .expplane_til {
        margin-top: .45rem;
        text-align: center;
        font-weight: bold;
        font-size: .30rem;
        color: #555555;
    }

    .expplane_main {
        width: 7.1rem;
        border: 1px solid rgba(226, 226, 226, 1);
        padding: .28rem .35rem 0.2rem .35rem;
        margin: auto;
        margin-top: .29rem;
        box-sizing: border-box;

        ul {
            li {
                list-style: none;
                font-size: .22rem;
                color: rgba(0, 0, 0, 1);
                line-height: .4rem;

                &:nth-child(2) {
                    color: #555;
                }
            }
        }
    }

    .fenge {
        display: block;
        width: .82rem;
        height: .07rem;
        margin: auto;
        margin-top: .7rem;
    }

    .explane_img {
        margin: auto;
        margin-top: .1rem;
        overflow: hidden;

        .ex_l_box {
            // width: 6.4rem;
            margin: auto;
            margin-top: .45rem;
            overflow: hidden;
            margin-left: .17rem;

            &:nth-child(1) {
                margin-top: .37rem;
            }

            .ex_l_w {
                margin-left: .28rem;
                width: 2.2rem;
                height: 1.17rem;
                transform: skewX(-25deg);
                border: 1px solid rgba(221, 221, 221, 1);

                img {
                    display: block;
                    width: .51rem;
                    height: .51rem;
                    margin: auto;
                    margin-top: .32rem;
                    transform: skewX(25deg);
                }


            }

            &:nth-child(2) {
                img {
                    width: .55rem;
                }
            }

            .ex_l_r {
                width: 3.8rem;
                margin-left: .5rem;
                opacity: 0;
                transform: translateX(4rem);
                transition: all .5s;

                .ex_img_til {
                    font-size: .3rem;
                    color: #555;
                    text-align: left;
                    height: .4rem;
                    overflow: hidden;
                }

                .ex_img_text {
                    margin-top: .17rem;
                    font-size: .22rem;
                    color: rgba(47, 47, 47, 1);
                    line-height: .3rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    height: .6rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
        }


    }
}

.news_box {
    margin: auto;
    width: 7.1rem;
    margin-top: .87rem;

    .news_til_box {
        height: .48rem;
        position: relative;

        .news_til {
            width: 1.45rem;
            height: .44rem;
            background: rgba(88, 88, 88, 1);
            transform: skewX(-20deg);
            position: relative;
            margin-left: .08rem;

            h3 {
                transform: skewX(20deg);
                letter-spacing: 2px;
                font-size: .3rem;
                color: rgba(255, 255, 255, 1);
                font-weight: normal;
                line-height: .44rem;
                text-align: center;
            }



            .news_line {
                width: 7.05rem;
                height: .04rem;
                background: rgba(42, 217, 254, 1);
            }
        }

        .news_til_mask {
            position: absolute;
            width: 1.2rem;
            height: .41rem;
            background: #2AD9FE;
            top: -.15rem;
            left: .93rem;
            z-index: -2;
            transform: skewX(-20deg);
        }

        .news_til_more {
            position: absolute;
            top: -.06rem;
            right: .11rem;
            width: 1rem;
            height: .39rem;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            transform: skewX(10deg);

            div {
                transform: skewX(-10deg);
                font-size: .22rem;
                font-weight: 400;
                color: rgba(170, 170, 170, 1);
                line-height: .39rem;
                text-align: center;
            }
        }

    }

    .news_main {

        .news_top {
            // overflow: hidden;
            height: 4.5rem;

            .news_top_box {
                // overflow: hidden;
                display: block;
                height: 1.23rem;
                margin-top: .45rem;
                overflow: hidden;

                .news_pic {
                    img {
                        width: 2.26rem;
                        height: 1.23rem;
                    }
                }

                .news_top_til {
                    width: 4.4rem;
                    margin-left: .27rem;

                    h5 {
                        font-size: .26rem;
                        font-weight: bold;
                        color: #555;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        transform: translate3d(0, 0, 0);
                    }

                    .news_top_content {
                        margin-top: .16rem;
                        font-size: .20rem;
                        color: #878787;
                        line-height: .28rem;
                        // height: .6rem;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }


            }
        }

        .news_bottom {
            margin-top: .3rem;
            overflow: hidden;

            li {
                width: 3.4rem;
                margin-left: .25rem;
                margin-top: .16rem;

                &:nth-child(1) {
                    margin-left: 0;
                }

                &:nth-child(3) {
                    margin-left: 0;
                }

                a {
                    display: block;

                    .img_box {
                        width: 1.02rem;
                        height: 0.68rem;
                        display: block;
                        position: relative;
                        z-index: 5;
                    }

                    .img_box_text {
                        width: 2.4rem;
                        height: .68rem;
                        border: 1px solid rgba(238, 238, 238, 1);
                        border-left: 0;
                        box-sizing: border-box;
                        transform: skewX(-12deg);
                        margin-left: -.05rem;

                        div {
                            transform: skewX(12deg);

                            h5 {
                                margin-top: .07rem;
                                margin-left: .18rem;
                                margin-right: .08rem;
                                font-size: .20rem;
                                font-weight: 400;
                                color: rgba(102, 102, 102, 1);
                                line-height: .17rem;
                                overflow: hidden;
                                line-height: .3rem;
                                height: .6rem;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                            }
                        }

                    }
                }
            }
        }
    }
}

.system {
    height: 3.07rem;
    background: rgba(51, 51, 51, 1);
    margin-top: .74rem;
    position: relative;

    .system_til_box {
        margin: auto;
        padding-top: .34rem;
        margin-left: .5rem;

        .sys_til_our {
            width: 2.5rem;
            height: .53rem;
            background: rgba(88, 88, 88, 1);
            transform: skewX(-22deg);

            h4 {
                transform: skewX(22deg);
                font-size: .26rem;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: .53rem;
                text-align: center;
            }
        }

    }

    .sys_logo {
        width: .98rem;
        height: 1.04rem;
        margin: auto;
        // margin-top: -.1rem;
        display: block;
        animation: m2 1.5s alternate infinite;

        @keyframes m2 {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(0, -.2rem);
            }
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .sys_line {
        width: 5.6rem;
        height: .27rem;
        margin: auto;
        margin-top: .23rem;
        display: block;
        margin-left: 1.1rem;
    }

    .sys_img {
        width: 7.5rem;
        margin: auto;
        margin-top: .05rem;
        overflow: hidden;

        .sys_img_box {
            width: 1.2rem;
            height: 1.21rem;
            transform: skewX(-17deg);
            background: #585858;
            margin-left: .18rem;

            p {
                line-height: .16rem;

            }

            &:nth-child(1) {
                margin-left: .38rem;

            }

            img {
                display: block;
                width: .36rem;
                height: .36rem;
                transform: skewX(17deg);
                margin: auto;
                margin-top: .3rem;
            }

            &:nth-child(2) {
                img {
                    width: .49rem;
                    height: .34rem;
                    margin-top: .3rem;
                }

            }

            &:nth-child(3) {
                img {
                    width: .35rem;
                    height: .31rem;
                    margin-top: .33rem;
                }

                p {
                    margin-top: .16rem;
                }

            }

            &:nth-child(4) {
                img {
                    width: .38rem;
                    height: .38rem;
                    margin-top: .28rem;
                }

                p {
                    margin-top: .16rem;
                }

            }

            &:nth-child(5) {
                img {
                    width: .31rem;
                    height: .37rem;
                    margin-top: .29rem;
                }

                p {
                    margin-top: .15rem;
                }

            }

            p {
                margin-top: .16rem;
                font-size: .15rem;
                font-weight: normal;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                transform: skewX(17deg);
                margin-left: .12rem;


            }
        }
    }
}

.map {
    margin: auto;
    margin-top: 1.35rem;
    width: 7.1rem;

    .news_til_box {
        height: .48rem;
        position: relative;

        .news_til {
            width: 2rem;
            height: .44rem;
            background: rgba(88, 88, 88, 1);
            transform: skewX(-20deg);
            position: relative;
            margin-left: .08rem;

            h3 {
                transform: skewX(20deg);
                letter-spacing: 2px;
                font-size: .3rem;
                color: rgba(255, 255, 255, 1);
                font-weight: normal;
                line-height: .44rem;
                text-align: center;
                overflow: hidden;
                height: .44rem;
            }



            .news_line {
                width: 7.05rem;
                height: .04rem;
                background: rgba(42, 217, 254, 1);
            }
        }

        .news_til_mask {
            position: absolute;
            width: 2rem;
            height: .41rem;
            background: #2AD9FE;
            top: -.15rem;
            left: 1rem;
            z-index: -2;
            transform: skewX(-20deg);
        }

        .news_til_more {
            position: absolute;
            top: -.06rem;
            right: .11rem;
            width: 1rem;
            height: .39rem;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            transform: skewX(10deg);

            div {
                transform: skewX(-10deg);
                font-size: .15rem;
                font-weight: 400;
                color: rgba(170, 170, 170, 1);
                line-height: .39rem;
                text-align: center;
            }
        }

    }

    .map_main_box {
        overflow: hidden;
        position: relative;

        .map_s_box {
            height: 1.39rem;
            background: rgba(238, 238, 238, 0);
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            margin-left: .1rem;
            margin-top: .24rem;

            h5 {
                font-size: .22rem;
                font-weight: bold;
                color: #555;
                line-height: 1.4rem;
            }

            p {
                width: 5.2rem;
                height: 1.39rem;
                margin-left: .56rem;
                font-size: .22rem;
                font-weight: 400;
                color: #555;
                line-height: .38rem;
                border: 1px solid rgba(221, 221, 221, 1);
                padding: .22rem .2rem 0 .2rem;
                box-sizing: border-box;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                transition: all .8s;
                opacity: 0;
                transform: translateX(5.6rem);
            }


        }


    }

    .line_box {
        position: absolute;
        width: .27rem;
        height: 6.57rem;
        top: 1.0rem;
        left: 1.38rem;
        background: url('../../images/cline.png') no-repeat center;

        img {
            display: block;
            width: .27rem;
            margin-top: 1.61rem;

            &:nth-child(1) {
                margin-top: 0;
            }
        }
    }

}

.hezuo {
    height: 6.3rem;
    margin-top: .54rem;
    background: #333333;

    .hezuo_box {
        margin: auto;

        .hezuo_head {
            height: .6rem;
            position: relative;

            .head_b {
                position: absolute;
                height: .81rem;
                width: 1.7rem;
                background: #2AD9FE;
                transform: skewX(-25deg);
                top: -.32rem;
                left: .4rem;

                img {
                    display: block;
                    width: 1.2rem;
                    transform: skewX(25deg);
                    margin: auto;
                    margin-top: .12rem;

                }
            }

            .head_til {
                position: absolute;
                width: 5rem;
                height: .59rem;
                background: #676767;
                transform: skewX(-25deg);
                bottom: .1rem;
                left: 2.1rem;

                .head_til_box {
                    transform: skewX(25deg);
                    font-size: .3rem;
                    height: .59rem;
                    font-weight: normal;
                    color: rgba(255, 255, 255, 1);
                    line-height: .59rem;
                    margin-left: .3rem;
                }

                .head_til_b {
                    position: absolute;
                    width: 4.3rem;
                    height: .03rem;
                    background: #2AD9FE;
                    left: .3rem;
                    bottom: -.03rem;
                }
            }
        }

        .hezuo_com {
            width: 7.05rem;
            margin: auto;

            .hezuo_top {
                overflow: hidden;
                margin-top: .06rem;

                a {
                    display: block;
                    width: 1.26rem;
                    height: .86rem;
                    margin-left: .18rem;
                    margin-top: .2rem;
                    transform: translateY(1rem);
                    opacity: 0;
                    transition: all .5s;

                    &:nth-child(1) {
                        margin-left: 0;
                    }

                    &:nth-child(6) {
                        margin-left: 0;
                    }
                }
            }

            .hezuo_middle {
                display: block;
                width: .17rem;
                height: .2rem;
                margin: auto;
                margin-top: .14rem;
            }

            .hezuo_bottom {
                overflow: hidden;

                a {
                    display: block;
                    width: 1.26rem;
                    height: .86rem;
                    margin-left: .18rem;
                    margin-top: .13rem;
                    transform: translateY(.5rem);
                    opacity: 0;
                    transition: all .5s;

                    &:nth-child(1) {
                        margin-left: 0;
                    }
                }
            }
        }

        .hezuo_sm {
            margin: auto;
            margin-top: .6rem;
            text-align: center;

            h6 {
                font-size: .3rem;
                font-weight: bold;
                color: rgba(42, 217, 254, 1);
            }

            p {
                margin-top: .26rem;
                font-size: .22rem;
                font-weight: normal;
                color: rgba(255, 255, 255, 1);
                opacity: 0.44;
            }
        }
    }
}