.max_w {
    width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.app_download_box .down_pic {
    width: 1122px
}

.downloadBody {
    background: linear-gradient(225deg, #3AABDE 0%, #5686FE 42%, #306AFF 100%)
}

    .downloadBody .blogroll_box {
        display: none
    }

.elip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.downloadPage {
    background: #F7F8FB
}

    .downloadPage .dbanner {
        width: 100%;
        min-width: 1200px;
        height: 468px;
        background: url(../images/down_banner_bg.png) top center / 100% no-repeat;
        overflow: hidden
    }

        .downloadPage .dbanner .darea {
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
            height: 468px;
            position: relative
        }

            .downloadPage .dbanner .darea .dleft {
                position: absolute;
                left: -23px;
                bottom: -1px;
                width: 662px;
                height: 486px;
                background: url(../images/down_banner_app.png) 0 0/100% 100% no-repeat
            }

            .downloadPage .dbanner .darea .dright {
                position: absolute;
                right: 0;
                top: 125px;
                width: 616px
            }

                .downloadPage .dbanner .darea .dright h1, .downloadPage .dbanner .darea .dright h2, .downloadPage .dbanner .darea .dright .h1 {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 100%;
                    height: 42px;
                    font-size: 40px;
                    color: white;
                    line-height: 42px
                }

                .downloadPage .dbanner .darea .dright h3, .downloadPage .dbanner .darea .dright h4, .downloadPage .dbanner .darea .dright .h3 {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-top: 26px;
                    width: 100%;
                    height: 26px;
                    font-size: 24px;
                    font-weight: 400;
                    color: white;
                    line-height: 26px
                }

                .downloadPage .dbanner .darea .dright .codeRow {
                    width: 100%;
                    min-height: 146px;
                    overflow: hidden;
                    margin: 30px 0 0 -20px
                }

                    .downloadPage .dbanner .darea .dright .codeRow .btns {
                        float: left;
                        width: 200px;
                        margin-top: 6px
                    }

                        .downloadPage .dbanner .darea .dright .codeRow .btns p {
                            width: 200px;
                            height: 114px;
                            position: relative
                        }

                            .downloadPage .dbanner .darea .dright .codeRow .btns p a, .downloadPage .dbanner .darea .dright .codeRow .btns p b {
                                position: absolute;
                                left: 20px;
                                top: 17px;
                                display: inline-block;
                                width: 160px;
                                height: 48px;
                                overflow: hidden;
                                cursor: pointer
                            }

                            .downloadPage .dbanner .darea .dright .codeRow .btns p.tandroid {
                                background: url(../images/down_banner_sys_android.png) 0/100% no-repeat
                            }

                            .downloadPage .dbanner .darea .dright .codeRow .btns p.tios {
                                background: url(../images/down_banner_sys_ios.png) 0/100% no-repeat
                            }

                            .downloadPage .dbanner .darea .dright .codeRow .btns p:nth-child(2) {
                                margin-top: -42px
                            }

                    .downloadPage .dbanner .darea .dright .codeRow .codes {
                        float: left;
                        width: 166px;
                        height: 179px;
                        margin-left: 38px;
                        background: url(../images/down_banner_code.png) 0/100% no-repeat;
                        box-sizing: border-box;
                        padding: 28px 35px 55px 36px
                    }

                        .downloadPage .dbanner .darea .dright .codeRow .codes img, .downloadPage .dbanner .darea .dright .codeRow .codes svg {
                            width: 100%;
                            height: 100%
                        }

    .downloadPage .downExp {
        width: 100%;
        min-width: 1200px;
        height: 150px;
        background: url(../images/down_exp_bg.png) top center / 100% no-repeat;
        overflow: hidden
    }

        .downloadPage .downExp .exarea {
            width: 100%;
            height: 150px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center
        }

            .downloadPage .downExp .exarea li {
                width: 252px;
                height: 84px;
                padding: 33px 2%;
                position: relative
            }

                .downloadPage .downExp .exarea li .htc {
                    width: 100%;
                    height: 22px;
                    position: relative
                }

                    .downloadPage .downExp .exarea li .htc::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -3px;
                        width: 118px;
                        height: 6px;
                        background: linear-gradient(270deg, rgba(0,182,255,0) 0%, #0080FF 100%);
                        opacity: .5
                    }

                    .downloadPage .downExp .exarea li .htc .phc {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 22px;
                        font-size: 22px;
                        font-weight: 400;
                        color: #30363D;
                        line-height: 22px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis
                    }

                .downloadPage .downExp .exarea li p {
                    margin-top: 22px;
                    width: 100%;
                    height: 40px;
                    font-size: 14px;
                    color: #666;
                    line-height: 20px;
                    overflow: hidden
                }

                .downloadPage .downExp .exarea li + li::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -18px;
                    width: 1px;
                    height: 36px;
                    background: #E9ECEF
                }

    .downloadPage .mainList {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 80px;
        background: white;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between
    }

        .downloadPage .mainList .leftMenu {
            width: 198px;
            align-self: stretch;
            background: #454A56
        }

            .downloadPage .mainList .leftMenu .mubox {
                width: 198px
            }

                .downloadPage .mainList .leftMenu .mubox li {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 100%;
                    height: 60px;
                    font-size: 16px;
                    color: white;
                    line-height: 60px;
                    text-align: center;
                    cursor: pointer
                }

                    .downloadPage .mainList .leftMenu .mubox li.sel {
                        color: #30363D;
                        background: white;
                        font-weight: bold
                    }

                .downloadPage .mainList .leftMenu .mubox.iup {
                    position: fixed;
                    top: 0;
                    left: 50%;
                    margin-left: -600px
                }

        .downloadPage .mainList .rightList {
            flex: 1;
            align-self: stretch;
            padding-top: 20px
        }

            .downloadPage .mainList .rightList dl {
                float: left;
                width: 100%;
                padding: 0 0 30px 30px;
                box-sizing: border-box
            }

                .downloadPage .mainList .rightList dl dt {
                    float: left;
                    width: 100%;
                    height: 20px;
                    font-size: 18px;
                    font-weight: bold;
                    color: #30363D;
                    line-height: 20px;
                    position: relative
                }

                    .downloadPage .mainList .rightList dl dt::before {
                        content: "";
                        position: absolute;
                        left: -12px;
                        top: 50%;
                        width: 4px;
                        height: 12px;
                        margin-top: -5px;
                        background: #3296FA
                    }

                    .downloadPage .mainList .rightList dl dt.sel::before {
                        background: #FF2C6D
                    }

                .downloadPage .mainList .rightList dl dd {
                    float: left;
                    width: 300px;
                    height: 116px;
                    box-sizing: border-box;
                    background: #F7F8FB;
                    margin: 20px 20px 0 0;
                    padding: 21px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center
                }

                    .downloadPage .mainList .rightList dl dd .appLogo {
                        width: 74px;
                        height: 74px;
                        margin-right: 20px
                    }

                        .downloadPage .mainList .rightList dl dd .appLogo img {
                            width: 100%;
                            height: 100%;
                            border-radius: 16px
                        }

                    .downloadPage .mainList .rightList dl dd .info {
                        flex: 1;
                        height: 74px
                    }

                        .downloadPage .mainList .rightList dl dd .info .appName {
                            width: 100%;
                            max-width: 164px;
                            height: 18px;
                            font-size: 16px;
                            font-weight: bold;
                            color: #30363D;
                            line-height: 18px;
                            overflow: hidden;
                            white-space: nowrap
                        }

                        .downloadPage .mainList .rightList dl dd .info .appTime {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            width: 100%;
                            height: 12px;
                            font-size: 10px;
                            color: #999;
                            line-height: 12px;
                            margin-top: 6px
                        }

                        .downloadPage .mainList .rightList dl dd .info .dwbox {
                            width: 100%;
                            height: 28px;
                            margin-top: 10px;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between
                        }

                            .downloadPage .mainList .rightList dl dd .info .dwbox a, .downloadPage .mainList .rightList dl dd .info .dwbox b {
                                width: 72px;
                                height: 28px;
                                border-radius: 4px;
                                border: 1px solid #333333;
                                font-size: 12px;
                                color: #333;
                                line-height: 28px;
                                text-shadow: 0 6px 16px rgba(48,54,61,0.2);
                                text-align: center;
                                position: relative
                            }

                                .downloadPage .mainList .rightList dl dd .info .dwbox a span, .downloadPage .mainList .rightList dl dd .info .dwbox b span {
                                    display: none;
                                    position: absolute;
                                    left: 50%;
                                    top: 28px;
                                    transform: translateX(-50%);
                                    width: 159px;
                                    height: 175px;
                                    background: url(../images/bgCodeLayer.png) 0/100% no-repeat;
                                    box-sizing: border-box;
                                    padding: 32px 32px 46px 32px;
                                    z-index: 9;
                                    text-align: center;
                                    overflow: hidden
                                }

                                    .downloadPage .mainList .rightList dl dd .info .dwbox a span img, .downloadPage .mainList .rightList dl dd .info .dwbox b span img, .downloadPage .mainList .rightList dl dd .info .dwbox a span svg, .downloadPage .mainList .rightList dl dd .info .dwbox b span svg {
                                        width: 95px;
                                        height: 95px
                                    }

                                    .downloadPage .mainList .rightList dl dd .info .dwbox a span::after, .downloadPage .mainList .rightList dl dd .info .dwbox b span::after {
                                        position: absolute;
                                        left: 0;
                                        bottom: 27px;
                                        display: inline-block;
                                        width: 100%;
                                        height: 16px;
                                        font-size: 11px;
                                        font-weight: normal;
                                        color: #666;
                                        line-height: 16px;
                                        text-align: center;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        content: "手机扫码下载APP"
                                    }

                                .downloadPage .mainList .rightList dl dd .info .dwbox a:hover, .downloadPage .mainList .rightList dl dd .info .dwbox b:hover {
                                    position: relative;
                                    cursor: pointer
                                }

                                    .downloadPage .mainList .rightList dl dd .info .dwbox a:hover span, .downloadPage .mainList .rightList dl dd .info .dwbox b:hover span {
                                        display: inline-block
                                    }

                                .downloadPage .mainList .rightList dl dd .info .dwbox a + a, .downloadPage .mainList .rightList dl dd .info .dwbox b + b {
                                    margin-left: 16px
                                }

                    .downloadPage .mainList .rightList dl dd:hover {
                        position: relative;
                        box-shadow: 0 6px 16px 0 rgba(48,54,61,0.2);
                        transform: scale(1.03);
                        z-index: 9
                    }

@media screen and (min-width:1439px) {
    .downloadPage .downExp .exarea li {
        padding: 33px 3%
    }
}

@media screen and (min-width:1599px) {
    .downloadPage .downExp .exarea li {
        padding: 33px 4%
    }
}

@media screen and (min-width:1920px) {
    .downloadPage .downExp .exarea li {
        padding: 33px 77px
    }
}