* {
    margin: 0;
    padding: 0
}

ul, li {
    list-style: none
}

body, html {
    width: 100%
}

img {
    display: block;
    width: 100%
}

a {
    text-decoration: none
}

#content {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto
}

    #content .anit {
        height: 617px;
        width: 100%;
        overflow: hidden;
        position: relative
    }

    #content .back {
        width: auto;
        height: auto;
        pointer-events: none;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        margin-left: 50%
    }

    #content .warapp {
        width: 306px;
        height: 380px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        overflow: hidden
    }

        #content .warapp .logo {
            width: 273px;
            height: 117px;
            margin: 0 auto;
            background: url(../img/logo.png) no-repeat;
            background-size: 100% 100%
        }

        #content .warapp .form {
            margin-top: 87px
        }

            #content .warapp .form .form-item {
                height: 43px;
                line-height: 41px;
                font-size: 18px;
                border: 1px solid #fff;
                margin-bottom: 34px
            }

                #content .warapp .form .form-item input {
                    border: none;
                    outline: none;
                    background: none;
                    text-align: center;
                    display: block;
                    height: 100%;
                    color: #fff;
                    text-transform: uppercase;
                    letter-spacing: 3px
                }

                #content .warapp .form .form-item .input {
                    width: calc(100% - 40px);
                    padding: 0 20px
                }

                #content .warapp .form .form-item .submit {
                    width: 100%;
                    cursor: pointer
                }

                #content .warapp .form .form-item input::-ms-input-placeholder {
                    color: #d8dbd8;
                    letter-spacing: 3px;
                    text-align: center
                }

                #content .warapp .form .form-item input::-webkit-input-placeholder {
                    color: #d8dbd8;
                    letter-spacing: 3px;
                    text-align: center
                }

                #content .warapp .form .form-item .product {
                    color: #fff;
                    text-align: right;
                    font-size: 14px;
                    letter-spacing: 1px;
                    vertical-align: middle
                }

            #content .warapp .form .m-b {
                margin-bottom: 19px
            }

            #content .warapp .form .bor {
                border: none;
                text-align: right;
                line-height: 18px
            }

                #content .warapp .form .bor .icon {
                    margin-left: 4px;
                    vertical-align: middle
                }

            #content .warapp .form .form-item:last-child {
                margin-bottom: 0
            }

    #content .shuoming {
        width: 1200px;
        margin-top: 105px;
        pointer-events: none;
        margin-left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%)
    }

        #content .shuoming img {
            display: block;
            width: 100%
        }

    #content .dtitle {
        color: #fff;
        font-size: 18px;
        line-height: 23px;
        letter-spacing: 30px;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 50px;
        z-index: 100
    }

    #content .mBottom {
        height: 160px;
        margin-top: 30px;
        background: rgba(35,24,21,0.8);
        padding-top: 30px;
        width: 100%;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        font-size: 12px;
        z-index: 10
    }

#mask {
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none
}

    #mask .brandError {
        width: 355px;
        height: 355px;
        position: relative;
        background: #ffffff;
        left: 50%;
        top: 50%;
        display: none;
        font-size: 20px;
        line-height: 32px;
        border-radius: 8px;
        transform: translate(-50%, -50%) scale(0);
        -webkit-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
        -moz-transform: translate(-50%, -50%) scale(0);
        transition: all .5s;
        -webkit-transition: all .5s;
        -ms-transition: all .5s;
        -moz-transition: all .5s;
        overflow: hidden
    }

        #mask .brandError .body-img {
            width: 152px;
            height: 108px;
            background: url(../img/loing.png) no-repeat;
            margin: 32px auto
        }

        #mask .brandError .msg {
            margin: 20px 70px 0 70px;
            color: #555;
            text-align: center
        }

        #mask .brandError .btn {
            background: #555555;
            color: #FFF;
            text-align: center;
            line-height: 44px;
            height: 44px;
            width: 152px;
            border-radius: 22px;
            font-size: 18px;
            margin: 36px auto;
            cursor: pointer
        }

    #mask .active {
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
        -moz-transform: translate(-50%, -50%) scale(1)
    }

.mask-img {
    width: 100%;
    height: 1144px;
    max-width: 1920px;
    margin: 0 auto;
    background: #f5f7fa;
    overflow: hidden;
    display: none
}

    .mask-img .cxbor {
        width: 700px;
        height: 930px;
        margin: 0px auto;
        background: url(../img/kuang.png) no-repeat;
        background-size: 100% 100%;
        position: relative
    }

        .mask-img .cxbor .cxbor-img {
            width: 544px;
            height: 775px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%)
        }

    .mask-img .axbor {
        width: 700px;
        height: 930px;
        margin: 0px auto;
        background: url(../img/kuang.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        transform: rotate(90deg)
    }

        .mask-img .axbor .cxbor-img {
            width: 775px;
            height: 544px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            -ms-transform: translate(-50%, -50%) rotate(-90deg);
            -moz-transform: translate(-50%, -50%) rotate(-90deg)
        }