.header-component {
    background: #fff;
    -webkit-box-shadow: 0 12px 8px -12px #eee;
    box-shadow: 0 12px 8px -12px #eee;
    /*position: fixed;
    top: 0;
    left: 0;*/
    width: 100%;
    z-index: 15
}

    .header-component .header-tel {
        width: 100%;
        background: #3b3b3b;
        height: 40px
    }

        .header-component .header-tel .header-tel-wraper {
            width: 1200px;
            margin: 0 auto;
            height: 40px;
            padding-right: 20px
        }

            .header-component .header-tel .header-tel-wraper p {
                height: 40px;
                line-height: 40px;
                color: #fff;
                font-size: 12px
            }

                .header-component .header-tel .header-tel-wraper p .header-tel-wraper-text-one {
                    font-size: 20px
                }

    .header-component .header-content {
        width: 1200px;
        height: 106px;
        margin: 0 auto;
        padding-right: 20px
    }

        .header-component .header-content .img-wraper {
            height: 106px;
            padding-top: 27.5px;
            width: 459px
        }

            .header-component .header-content .img-wraper img {
               /* width: 225px;
                height: 51px*/
               float:left;
            }

      .header-component .header-content ul {
        list-style: none;
        height: 106px;
        line-height: 106px;
        margin-left: 80px;
      }

            .header-component .header-content ul li {
                height: 106px;
                line-height: 106px;
                cursor: pointer;
                font-size: 16px;
                width: 90px;
                text-align: center;
                position: relative
            }

                .header-component .header-content ul li .header-component-text-wraper {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    bottom: -204px;
                    z-index: 12;
                    background: #fff;
                    border-left: 1px solid #bfbfbf;
                    border-right: 1px solid #bfbfbf
                }

                    .header-component .header-content ul li .header-component-text-wraper .header-component-text-one {
                        width: 100%;
                        height: 51px;
                        text-align: center;
                        line-height: 51px;
                        font-size: 14px;
                        color: #3b3b3b;
                        border-bottom: 1px dashed #bcbcbc
                    }

                        .header-component .header-content ul li .header-component-text-wraper .header-component-text-one:hover {
                            background: #e74c3b;
                            color: #fff
                        }

                    .header-component .header-content ul li .header-component-text-wraper .border-top {
                        border-top: 1px solid #bfbfbf
                    }

                    .header-component .header-content ul li .header-component-text-wraper .border-bottom {
                        border-bottom: 1px solid #bfbfbf
                    }

                .header-component .header-content ul li .header-component-text-wraper-one {
                    bottom: -255px
                }

            .header-component .header-content ul .active {
                color: #e74c3b
            }

.footer-use-item {
    color: #fff
}

    .footer-use-item .header {
        font-size: 18px;
        height: 55px;
        line-height: 55px
    }

    .footer-use-item .footer-use-item-content {
        height: 26px;
        line-height: 26px;
        font-size: 14px
    }

        .footer-use-item .footer-use-item-content p {
            cursor: pointer
        }

.footer-component {
    width: 100%;
    height: 375px;
    background: #3b3b3b;
    padding-top: 25px
}

    .footer-component .footer-component-content {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        height: 295px
    }

        .footer-component .footer-component-content .item {
            height: 210px
        }

            .footer-component .footer-component-content .item img {
                width: 148px;
                height: 148px;
                display: block
            }

            .footer-component .footer-component-content .item .item-p {
                font-size: 12px;
                color: #fff;
                width: 100%;
                text-align: center;
                height: 34px;
                line-height: 34px
            }

        .footer-component .footer-component-content .item-margin-left {
            margin-left: 100px
        }

    .footer-component .footer-component-footer {
        width: 100%;
        height: 55px;
        border-top: 1px solid #5a5a5a;
        text-align: center;
        line-height: 55px;
        color: #fff;
        font-size: 16px
    }

.footer-calculation-component {
    width: 1346px;
    height: 161px;
    background-size: 100% 100%;
    padding-top: 30.5px;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -673px;
    background: transparent;
    z-index: 3
}

    .footer-calculation-component .content {
        height: 120px;
        width: 1312px;
        margin: 0 auto
    }

        .footer-calculation-component .content .content-content {
            width: 1200px;
            margin: 0 auto
        }

            .footer-calculation-component .content .content-content .content-content-right {
                padding-top: 16px;
                margin-left: 68px
            }

                .footer-calculation-component .content .content-content .content-content-right .text-one {
                    font-size: 24px;
                    color: #fff
                }

                    .footer-calculation-component .content .content-content .content-content-right .text-one img {
                        width: 31px;
                        height: 34px;
                        margin-right: 16px
                    }

                .footer-calculation-component .content .content-content .content-content-right .text-two {
                    font-size: 30px;
                    color: #e74c3b
                }

            .footer-calculation-component .content .content-content .content-content-top {
                overflow: hidden;
                padding-left: 126px;
                padding-top: 16px
            }

                .footer-calculation-component .content .content-content .content-content-top .text-one {
                    font-size: 16px;
                    color: #fff;
                    margin-left: 24px;
                    margin-top: 8px
                }

                .footer-calculation-component .content .content-content .content-content-top .text-two {
                    font-size: 22px;
                    color: #e74c3b
                }

                .footer-calculation-component .content .content-content .content-content-top .top-img-wraper img {
                    width: 356px;
                    height: 32px
                }

            .footer-calculation-component .content .content-content .content-content-bottom {
                margin-top: 20px
            }

                .footer-calculation-component .content .content-content .content-content-bottom .item-margin-left {
                    margin-left: 10px
                }

                .footer-calculation-component .content .content-content .content-content-bottom .item {
                    width: 184px;
                    height: 30px
                }

                    .footer-calculation-component .content .content-content .content-content-bottom .item .el-input__inner {
                        border-color: #888;
                        height: 30px
                    }

                .footer-calculation-component .content .content-content .content-content-bottom .btn {
                    margin-left: 10px;
                    width: 127px;
                    height: 30px;
                    background: #e74c3b;
                    border: none;
                    color: #fff;
                    font-size: 16px
                }

.submission {
    width: 388px;
    height: 403px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZQAAAGjCAYAAAALuuO1AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFwmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wOS0wNlQxNzoxNzo0MSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wOS0wNlQxNzoxNzo0MSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDktMDZUMTc6MTc6NDErMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZjA0ZGMxY2UtZjQ3Yy04NjQ0LWE1YTItNDg1ZDI0ZWUyNGFhIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6OGJhN2Q2MDMtMTQ2Ni1iMjQyLThmYWMtZWYxYmY2ZTRlY2M3IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NjRhODY1MGMtOTQwYi1lMTQ5LWE1MzktODIzZDM0NmJjZDkzIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NjRhODY1MGMtOTQwYi1lMTQ5LWE1MzktODIzZDM0NmJjZDkzIiBzdEV2dDp3aGVuPSIyMDE5LTA5LTA2VDE3OjE3OjQxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMDRkYzFjZS1mNDdjLTg2NDQtYTVhMi00ODVkMjRlZTI0YWEiIHN0RXZ0OndoZW49IjIwMTktMDktMDZUMTc6MTc6NDErMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DJPBswAAB+pJREFUeJzt3FFqG0kUQNFq2zBLmP0vMzCR5iPppF2qlhO4Dkg5Bxracknoy5dXJWsbv2f7zfUAPLbrry58u/O7VTwEBYBlZD6KxnbnMQCe23Vxv3psjHEbhzkg28n92fMBeGzz9HEd72Myh+XH+uOW11lEXu78DoDncxaQy2Ldtq+Zz1C2+bper18+490C8Fi2bftnvI/MON6/7Ovm542f0wkAjPFzx2p5/DFveR2vlzHG6x94gwA8hr0Jl/E+KqdbXi/TBQBjfGvCcbvrMhZbXmPcHrybUAA4eh23214/JpV5Apk/3WVCAWC3d2H5ad+3sf5fk22sD14A+HudNWIb4/6Wl095AXB03O76cMtrHBaYUAA4utuGVVBseQGwcrcPZ4fyZz8D8Pe624h7ZyRiAsDstA0O3QFICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoACUEBICEoACQEBYCEoACQEBQAEoICQEJQAEgICgAJQQEgISgAJAQFgISgAJAQFAASggJAQlAASAgKAAlBASAhKAAkBAWAhKAAkBAUABKCAkBCUABICAoAiXtBuf6xdwHAozhtwxyUeaGoALC724jVhHKdLgAY44M+nG15CQoAs7tteJkWzk+4fOpbA+CRXMZtVH7E5e3wwzZux5nrtm3/fl/3NsZ4Hd8itF/b579/AP6gfZjYr69jjP++XzeNODzn+rZ4obMX3B8/xkRQAJ7LcYdq//v/dbxvws10Msa3qeP4IscpZX+h7fD7yxAUgGc2B2UVltMtr/mFjucm2/g55uwROcZEUACey3yOfhww5sjcnVCO95fD/TEoc0xEBeA5rD6ctZpWlh8ffjs8+RiGfcExKpexDgoAz2V1+H6cWJb/4Hh2KL/fz1OIyQTg+c2Tyn4/H8i/C8schY8CcrYegOewmj7OAvNu/SoI2+J+9RgAz23etTp7bIxxPw4fxQaA57f6mpXlV6+8fvIbAeCx/fJ3Ov4P6GzDSz9xpBcAAAAASUVORK5CYII=) no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -194px;
    margin-top: -201.5px;
    z-index: 15
}

    .submission .submission-header {
        width: 374px;
        height: 85px;
        background: #e84d3b;
        padding-left: 118px;
        position: relative;
        margin: 0 auto;
        line-height: 85px
    }

        .submission .submission-header .submission-header-img {
            width: 30px;
            height: 30px;
            position: absolute;
            right: -5px;
            top: -5px
        }

        .submission .submission-header .submission-header-img-one {
            width: 40px;
            height: 40px;
            margin-top: 22.5px
        }

        .submission .submission-header .submission-header-text-one {
            color: #fff;
            font-size: 24px;
            height: 85px;
            line-height: 85px;
            margin-left: 10px
        }

    .submission .submission-erweima {
        width: 214px;
        height: 214px;
        display: block;
        margin: 0 auto;
        margin-top: 20px
    }

    .submission .submission-text-one {
        height: 27px;
        line-height: 27px;
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #3b3b3b
    }

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.bg-gray {
    position: fixed;
    height: 141px;
    background: #000;
    left: 0;
    bottom: 0;
    opacity: .8;
    width: 100%
}

.app-content {
    min-height: 1000px;
    width: 100%
}

.container {
    width: 100%;
    min-width: 1200px;
    padding-bottom: 141px;
    position: relative
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    to {
        -webkit-transform: scale3d(1.2,1.2,1.2);
        transform: scale3d(1.2,1.2,1.2)
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    to {
        -webkit-transform: scale3d(1.2,1.2,1.2);
        transform: scale3d(1.2,1.2,1.2)
    }
}

@-webkit-keyframes zoomOut {
    0% {
        -webkit-transform: scale3d(1.2,1.2,1.2);
        transform: scale3d(1.2,1.2,1.2)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes zoomOut {
    0% {
        -webkit-transform: scale3d(1.2,1.2,1.2);
        transform: scale3d(1.2,1.2,1.2)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@-webkit-keyframes top {
    0% {
        bottom: -210px
    }

    to {
        bottom: 0
    }
}

@keyframes top {
    0% {
        bottom: -210px
    }

    to {
        bottom: 0
    }
}

@-webkit-keyframes bottom {
    0% {
        bottom: 0
    }

    to {
        bottom: -210px
    }
}

@keyframes bottom {
    0% {
        bottom: 0
    }

    to {
        bottom: -210px
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.go-top {
    -webkit-animation-name: top;
    animation-name: top;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.go-bottom {
    -webkit-animation-name: bottom;
    animation-name: bottom;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes bounceInDown {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-3000px,0);
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,25px,0);
        transform: translate3d(0,25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInDown {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-3000px,0);
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,25px,0);
        transform: translate3d(0,25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: .1;
    animation-duration: .1
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    0%

{
    top: 0
}

to {
    top: 696px
}

}

.pattern-go-bottom {
    -webkit-animation-name: patternGoBottom;
    animation-name: patternGoBottom;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.hidden {
    display: none
}

.mask {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: .5;
    width: 100%;
    height: 100%
}