@function px2rem($px) {
    @return $px / 75+rem;
}

// body,
// html {
//     width: 100%;
//     height: 100%;
//     font-family: "Heiti SC", "Microsoft Sans Serif";
// }

// pc端
@media screen and (min-width:769px) {

    .h5 {
        display: none;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #302286 0%, #0E0B24 100%);
        font-family: Avenir, Avenir;
        cursor: pointer;

        // .pc {
        //     width: 100%;
        //     height: 100%;
        //     // background: url(../images/pcBg.png) no-repeat center;
        //     // background-size: px2rem(1920) px2rem(1080);
        //     position: relative;
        //     // display: block;
        //     display: none;

        //     .header {
        //         width: 1400px;
        //         height: 108px;
        //         position: absolute;
        //         left: 50%;
        //         top: 0;
        //         transform: translateX(-50%);

        //         .logo {
        //             width: px2rem(54);
        //             height: px2rem(54);
        //             position: absolute;
        //             top: px2rem(27);
        //             // left: px2rem(360);
        //             left: 3.8rem;
        //         }

        //         .name {
        //             height: 100%;
        //             line-height: px2rem(108);
        //             font-size: px2rem(40);
        //             color: #FFFFFF;
        //             font-weight: 800;
        //             position: absolute;
        //             top: 0;
        //             // left: px2rem(430);
        //             left: 4.73333rem;
        //         }

        //         .index {
        //             height: 100%;
        //             line-height: px2rem(108);
        //             font-family: PingFangSC, PingFang SC;
        //             font-weight: 500;
        //             position: absolute;
        //             top: 0;
        //             left: 7.76rem;
        //             font-size: px2rem(28);
        //             color: #fff;

        //             span {
        //                 width: px2rem(28);
        //                 height: px2rem(6);
        //                 background: #9168FA;
        //                 border-radius: px2rem(6);
        //                 position: absolute;
        //                 left: 50%;
        //                 transform: translateX(-50%);
        //                 top: px2rem(76);
        //             }
        //         }

        //         .diamound {
        //             width: px2rem(118);
        //             height: px2rem(48);
        //             line-height: px2rem(48);
        //             color: #FFFFFF;
        //             font-size: px2rem(24);
        //             text-align: center;
        //             background: rgba(255, 255, 255, 0.2);
        //             border-radius: px2rem(48);
        //             box-sizing: border-box;
        //             border: 1px solid #fff;
        //             position: absolute;
        //             right: 3.06667rem;
        //             top: px2rem(30);
        //             vertical-align: middle;

        //             img {
        //                 display: inline-block;
        //                 width: px2rem(30);
        //                 height: px2rem(30);
        //                 vertical-align: middle;
        //             }
        //         }
        //     }

        //     .Box {
        //         position: relative;
        //         // width: px2rem(2720);
        //         width: 28.08rem;
        //         height: px2rem(1506);
        //         overflow: hidden;
        //         top: px2rem(140);
        //         left: 50%;
        //         transform: translateX(-50%);
        //     }

        //     .pcMarket1 {
        //         width: px2rem(1542/2);
        //         height: px2rem(1506/2);
        //         position: absolute;
        //         left: px2rem(0);
        //         top: px2rem(0);
        //     }

        //     .pcText {
        //         width: px2rem(1060/2);
        //         height: px2rem(320/2);
        //         position: absolute;
        //         // left: px2rem(1092);
        //         right: px2rem(0);
        //         top: px2rem(400/2);
        //     }

        //     .pcIos {
        //         width: px2rem(284);
        //         height: px2rem(64);
        //         position: absolute;
        //         // left: px2rem(1091);
        //         right: px2rem(484/2);
        //         top: px2rem(816/2);
        //     }

        //     .pcAnd {
        //         width: px2rem(284);
        //         height: px2rem(64);
        //         position: absolute;
        //         // left: px2rem(1091);
        //         right: px2rem(484/2);
        //         top: px2rem(1000/2);
        //     }

        //     .code {
        //         width: px2rem(160);
        //         height: px2rem(166);
        //         position: absolute;
        //         // left: px2rem(1373);
        //         right: px2rem(100/2);
        //         top: px2rem(806/2);
        //     }

        //     .bottom {
        //         text-align: center;
        //         color: #B7B6BE;
        //         font-size: px2rem(16);
        //         width: 100%;
        //         padding: px2rem(29) 0;
        //         position: fixed;
        //         left: 0;
        //         bottom: 0;
        //         background: #0E0B24;
        //         min-height: 1rem;

        //         p {
        //             margin-bottom: px2rem(16);
        //         }
        //     }
        // }

        .container {
            position: relative;
        }
        .pc-bg{
            display: none;
        }
        .homePc {
            width: 100%;
            height: 10rem;
            background: url(../images/pcBgBig.png) no-repeat;
            background-size: 100% 100%;
            position: relative;

            .diamound {
                width: 1.2rem;
                height: 0.5rem;
                line-height: px2rem(35);
                color: #FFFFFF;
                font-size: 0.25rem;
                text-align: center;
                background: rgba(255, 255, 255, 0.2);
                border-radius: px2rem(40);
                box-sizing: border-box;
                border: 1px solid #fff;
                position: absolute;
                right: px2rem(260);
                top: 0.3rem;
                vertical-align: middle;

                img {
                    display: inline-block;
                    width: 0.33rem;
                    height: 0.33rem;
                    vertical-align: middle;
                    margin-top: -0.01rem;
                }
            }

            .pcIos {
                width: 2.9rem;
                height: 0.64rem;
                position: absolute;
                right: 5rem;
                top: 5.855rem;
                // background: url(../images/pcIos.png) no-repeat;
                // background-size: 100% 100%;
            }

            .pcAnd {
                width: 2.9rem;
                height: 0.64rem;
                position: absolute;
                right: 5rem;
                top: 6.79rem;
                // background: url(../images/pcAnd.png) no-repeat;
                // background-size: 100% 100%;
            }
        }
        .bootom {
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            background: #0F0B27;
            text-align: center;
            color: #fff;
            padding-bottom: 0.2rem;
            padding-top: 0.1rem;
            p{
                margin-bottom: 0.1rem;
                font-size: 0.15rem;
                color: #B8B7BF;
            }
        }
    }
}

// 移动端
@media screen and (max-width:768px) {

    .pc,
    .homePc {
        display: none;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        background: #0E0B24;

        .header {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: px2rem(90);
            box-sizing: border-box;
            padding: 0 px2rem(40);
            margin: px2rem(20) auto 0;
            z-index: 3;

            .line {
                width: 90%;
                height: px2rem(2);
                background: #fff;
                opacity: .3;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
            }

            .logo {
                display: block;
                width: px2rem(64);
                height: px2rem(64);
                margin-right: px2rem(16);
                float: left;
            }

            .name {
                font-size: px2rem(35);
                color: #FFFFFF;
                font-weight: 800;
                float: left;
                margin-top: 0.2rem;
            }

            .diamound {
                width: px2rem(140);
                height: px2rem(56);
                line-height: px2rem(56);
                box-sizing: border-box;
                border: 1px solid #fff;
                vertical-align: middle;
                color: #fff;
                font-size: px2rem(24);
                float: right;
                margin-top: px2rem(4);
                margin-right: px2rem(32);
                text-align: center;
                border-radius: px2rem(56);

                img {
                    vertical-align: middle;
                    width: px2rem(38);
                    height: px2rem(32);
                    display: inline-block;
                    margin-top: -0.1rem;
                }
            }

            .more {
                float: right;
                width: px2rem(40);
                height: px2rem(40);
                display: block;
                margin-top: px2rem(12);
            }
        }

        .h5 {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;

            .pagesBox {
                width: 100%;
                height: 100%;
                // overflow: hidden;
                transition: all .5s;
                transform: translateY(-0%);

                .page1 {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    background: url(../images/h51.png) no-repeat center;
                    background-size: px2rem(750) 100%;

                    .pageTxte1 {
                        width: px2rem(482);
                        height: px2rem(100);
                        position: absolute;
                        left: px2rem(108);
                        top: px2rem(376);
                    }

                    .pageTxte2 {
                        width: px2rem(482);
                        height: px2rem(100);
                        position: absolute;
                        right: px2rem(108);
                        top: px2rem(508);
                    }

                    .downioad {
                        width: px2rem(374);
                        height: px2rem(92);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: px2rem(222);
                        display: block;
                    }

                    .down {
                        width: px2rem(38);
                        height: px2rem(28);
                        position: absolute;
                        left: 48%;
                        // transform: translateX(-50%);
                        bottom: px2rem(20);
                    }

                }

                .page2 {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageText2 {
                        width: px2rem(750);
                        height: px2rem(814);
                        position: relative;
                        top: px2rem(258);
                        margin: 0 auto;
                        display: block;
                        display: none;
                    }

                    .page2_in {
                        width: px2rem(750);
                        height: px2rem(874);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        // bottom: px2rem(194);
                        top: px2rem(188);
                    }

                    .pagetx1 {
                        width: px2rem(476);
                        height: px2rem(308);
                        position: absolute;
                        left: px2rem(234);
                        top: px2rem(342);
                        // bottom: px2rem(620);
                    }

                    .pagetx2 {
                        width: px2rem(476);
                        height: px2rem(308);
                        position: absolute;
                        left: px2rem(40);
                        top: px2rem(688);
                        // bottom: px2rem(300);
                    }

                    .downioad {
                        width: px2rem(374);
                        height: px2rem(84);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: px2rem(125);
                        display: block;
                    }

                    .down {
                        width: px2rem(38);
                        height: px2rem(28);
                        position: absolute;
                        left: 48%;
                        // transform: translateX(-50%);
                        bottom: px2rem(20);
                    }
                }

                .page3 {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageText3 {
                        width: px2rem(512);
                        height: px2rem(114);
                        position: relative;
                        // left: 50%;
                        // transform: translateX(-50%);
                        display: block;
                        margin: 0 auto;
                        top: px2rem(210);
                        display: none;
                    }

                    .page3_in {
                        width: px2rem(750);
                        height: px2rem(874);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(188);
                        // bottom: px2rem(194);
                    }

                    .page3Icon1 {
                        width: px2rem(307);
                        height: px2rem(220);
                        position: absolute;
                        left: px2rem(426);
                        top: px2rem(424);
                        // bottom: px2rem(648);
                    }

                    .page3Icon2 {
                        width: px2rem(324);
                        height: px2rem(232);
                        position: absolute;
                        left: px2rem(0);
                        top: px2rem(364);
                        // bottom: px2rem(738);
                    }

                    .page3Icon3 {
                        width: px2rem(324);
                        height: px2rem(232);
                        position: absolute;
                        // left: px2rem(440);
                        right: px2rem(0);
                        top: px2rem(750);
                        // bottom: px2rem(376);
                    }

                    .page3Icon4 {
                        width: px2rem(284);
                        height: px2rem(204);
                        position: absolute;
                        left: px2rem(0);
                        top: px2rem(836);
                        // bottom: px2rem(284);
                    }

                    .downioad {
                        width: px2rem(374);
                        height: px2rem(84);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: px2rem(125);
                        display: block;
                    }

                    .down {
                        width: px2rem(38);
                        height: px2rem(28);
                        position: absolute;
                        left: 48%;
                        // transform: translateX(-50%);
                        bottom: px2rem(20);
                    }
                }

                .page4 {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageText4 {
                        width: px2rem(480);
                        height: px2rem(114);
                        position: relative;
                        top: px2rem(210);
                        display: block;
                        margin: 0 auto;
                        display: none;
                    }

                    .page4_in {
                        width: px2rem(750);
                        height: px2rem(874);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(188);
                        // bottom: px2rem(194);
                    }

                    .page4Icon1 {
                        width: px2rem(418);
                        height: px2rem(384);
                        position: absolute;
                        left: px2rem(0);
                        top: px2rem(384);
                        // bottom: px2rem(224);
                    }

                    .page4Icon2 {
                        width: px2rem(418);
                        height: px2rem(384);
                        position: absolute;
                        right: px2rem(0);
                        top: px2rem(644);
                        // bottom: px2rem(224);
                    }

                    .downioad {
                        width: px2rem(374);
                        height: px2rem(84);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: px2rem(125);
                        display: block;
                    }

                    .down {
                        width: px2rem(38);
                        height: px2rem(28);
                        position: absolute;
                        left: 48%;
                        // transform: translateX(-50%);
                        bottom: px2rem(20);
                    }
                }

                .page5 {
                    width: 100%;
                    height: 100%;
                    background: url(../images/h55.png) no-repeat center;
                    background-size: 100% px2rem(1344);
                    position: relative;
                    overflow: hidden;
                    // display: none;

                    .pageTxte5 {
                        width: px2rem(496);
                        height: px2rem(332);
                        position: relative;
                        top: px2rem(256);
                        display: block;
                        margin: 0 auto;
                    }

                    .contactUs {
                        width: px2rem(272);
                        height: px2rem(92);
                        position: absolute;
                        display: block;
                        margin: 0 auto;
                        left: 50%;
                        transform: translateX(-50%);
                        // top: 5rem;
                        bottom: px2rem(386);
                    }

                    .bootom {
                        width: 100%;
                        // height: 1.5rem;
                        position: absolute;
                        bottom: px2rem(24);
                        left: 0;
                        text-align: center;
                        color: #B4B4BA;
                        font-size: px2rem(24);

                        p {
                            margin-bottom: px2rem(8);
                        }
                    }


                    .downioad {
                        width: px2rem(374);
                        height: px2rem(92);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: px2rem(222);
                        display: block;
                    }

                    .down {
                        width: px2rem(38);
                        height: px2rem(28);
                        position: absolute;
                        left: 48%;
                        // transform: translateX(-50%);
                        bottom: px2rem(20);
                    }
                }
            }

            // 菜单
            .menu {
                width: 100%;
                height: 0%;
                background: #0E0B24;
                position: fixed;
                // z-index: 4;
                transition: all .2s;
                // display: none;
                left: 0;
                top: 0;
                overflow: hidden;

                .top {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: px2rem(90);
                    box-sizing: border-box;
                    padding: 0 px2rem(40);
                    margin: px2rem(20) auto 0;
                    z-index: 3;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);

                    .line {
                        width: 90%;
                        height: px2rem(2);
                        background: #fff;
                        opacity: .3;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                    }

                    .logo {
                        display: block;
                        width: px2rem(64);
                        height: px2rem(64);
                        margin-right: px2rem(16);
                        float: left;
                    }

                    .name {
                        font-size: px2rem(35);
                        color: #FFFFFF;
                        font-weight: 800;
                        float: left;
                        margin-top: 0.2rem;
                    }

                    .diamound {
                        width: px2rem(140);
                        height: px2rem(56);
                        line-height: px2rem(56);
                        box-sizing: border-box;
                        border: 1px solid #fff;
                        vertical-align: middle;
                        color: #fff;
                        font-size: px2rem(24);
                        float: right;
                        margin-top: px2rem(4);
                        margin-right: px2rem(32);
                        text-align: center;
                        border-radius: px2rem(56);

                        img {
                            vertical-align: middle;
                            width: px2rem(38);
                            height: px2rem(32);
                            display: inline-block;
                            margin-top: -0.1rem;
                        }
                    }

                    .close {
                        float: right;
                        width: px2rem(40);
                        height: px2rem(40);
                        display: block;
                        margin-top: px2rem(12);
                    }
                }

                ul {
                    width: 100%;
                    height: px2rem(90);
                    box-sizing: border-box;
                    padding: 0 px2rem(40);
                    margin: 1.6rem auto 0;

                    li {
                        width: 100%;
                        height: px2rem(116);
                        line-height: px2rem(116);
                        border-bottom: 1px solid rgba(255, 255, 255, .3);
                        display: flex;
                        justify-content: space-between;

                        span {
                            color: #FFFFFF;
                            font-size: px2rem(32);
                        }

                        img {
                            width: px2rem(32);
                            height: px2rem(32);
                            display: block;
                            margin-top: px2rem(44);
                        }
                    }
                }
            }
        }

        .contactUs_pub {
            position: fixed;
            z-index: 99;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .6);
            display: none;

            .contactUs_pub_in {
                width: 7.8rem;
                height: px2rem(480);
                left: 50%;
                top: 50%;
                position: relative;
                transform: translate(-50%, -50%);
                background: #fff;
                border-radius: px2rem(32);
                overflow: hidden;

                .sClose {
                    width: px2rem(32);
                    height: px2rem(32);
                    position: absolute;
                    right: px2rem(32);
                    top: px2rem(26);
                }

                .title {
                    text-align: center;
                    width: 100%;
                    margin-top: px2rem(36);
                    margin-bottom: px2rem(16);
                    color: #1F1B4F;
                    font-size: px2rem(32);
                    font-weight: 600;
                }

                ul {
                    width: 7.2rem;
                    margin: 0 auto 0;

                    li {
                        width: 100%;
                        height: px2rem(112);
                        line-height: px2rem(112);
                        border-bottom: px2rem(2) solid #EBECF0;

                        img {
                            display: block;
                            width: px2rem(48);
                            height: px2rem(48);
                            float: left;
                            margin-top: px2rem(32);
                            margin-right: px2rem(44);
                        }

                        span {
                            display: block;
                            float: left;
                            height: 100%;
                            color: #1F1B4F;
                            font-size: px2rem(28);
                            font-weight: 500;

                            b {
                                color: #1F1B4F;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }

    }
}