@charset "utf-8";
@import url(./animate.css);

body {
    background-color: #fff;
    -webkit-touch-callout: none; /* -webkit-user-select: none; 禁止复制*/
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    overflow-x: hidden;
}

body, button, input, pre, select, textarea {
    font-size: 14px;
    font-family: "微软雅黑", "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1",'Arial';
}

* {
    box-sizing: border-box;
}

    *::before, *::after {
        box-sizing: border-box;
    }

    *:focus {
        outline: none;
    }

a, article, aside, b, audio, body, canvas, em, caption, div, footer, header, html, h1, h2, h3, h4, h5, h6, hr, iframe, img, mark, nav, object, section, span, summary, table, tbody, td, tfoot, thead, tr, video, dd, dl, dt, i, label, legend, li, ol, p, ul {
    margin: 0;
    padding: 0;
}

/*clearfix*/
.clearfix {
    *zoom: 1
}

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: ""
    }

    .clearfix:after {
        clear: both
    }

table {
    border-collapse: collapse;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

ol, ul, li {
    list-style: none;
}

a, a:active {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

img {
    border: 0;
    vertical-align: middle;
    max-width: 100%;
    object-fit: cover;
}

/*动画效果 所有属性获得过度*/
* {
    transition-property: all;
}

.com-img img {
    transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
    -webkit-transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
    -moz-transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
    -o-transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
}

.com-img:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}
/*图片去色处理，IE兼容较差*/
.photo-gray img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

    .photo-gray img:hover {
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        filter: grayscale(0%);
        filter: gray;
    }

.fl {
    float: left;
}

.fr {
    float: right;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.taC {
    text-align: center;
}

.taL {
    text-align: left;
}

.taR {
    text-align: right;
}

.ttU {
    text-transform: uppercase;
}

.ofH {
    overflow: hidden;
}

.bg1 {
    background-color: #f8f8f8 !important;
}

.bg2 {
    background: #F4F5F6;
}

.toPlace {
    position: relative;
    top: -105px;
    display: block;
    height: 0;
    overflow: hidden;
}

/* CSS Document */
.contain {
    max-width: 1400px;
    margin: 0 auto;
}

/* Map edit */
.bd_weixin_popup, .bd_weixin_popup * {
    box-sizing: content-box !important;
}

#dituContent img {
    max-width: none;
}

/*限制行数 -- 一行*/
.line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*限制行数 -- 当字号为12px,line-height为25时，限制高为50，如有改变，自行设置高度,为了兼容不支持line-clamp属性的浏览器*/
.line2 {
    height: 50px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -moz-line-clamp: 2;
    -o-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.line3 {
    height: 75px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -moz-line-clamp: 3;
    -o-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 指定文字禁止复制 */
.noSelect {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

/*分页*/
.pages {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin-top: 50px;
    color: #666;
}

    .pages a {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #eee;
        margin: 0px 4px;
        padding: 0 15px;
        background: #fff;
        border-radius: 3px;
    }

        .pages a.prev:hover span {
            transform: rotate(180deg);
        }

        .pages a span {
            font-size: 22px;
            vertical-align: middle;
        }

        .pages a.page-num-current, .pages a:hover {
            background: #150C67;
            color: #fff;
            border-color: #150C67;
        }

    .pages input[type="text"] {
        width: 50px;
        height: 40px;
        border: 1px solid #eee;
        padding: 5px;
    }

    .pages input[type="submit"] {
        width: 80px;
        height: 40px;
        border: 1px solid #999;
        background: #fff;
        margin-left: 10px;
        cursor: pointer;
        border-radius: 3px;
    }

        .pages input[type="submit"]:hover {
            background: #150C67;
            color: #fff;
        }

/* 子元素文字居中 */
/* display:-webkit-flex;display:flex;justify-content:center;align-items:center; */

/*阴影效果*/
.box-shadow {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

    .box-shadow:hover {
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

/* 背景图片滑动拉升效果 */
.bg-pic {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: matrix(1.1, 0, 0, 1.1, 0, 0);
    -webkit-transition: all 0.4s ease 1.2s;
    -moz-transition: all 0.4s ease 1.2s;
    -ms-transition: all 0.4s ease 1.2s;
    -o-transition: all 0.4s ease 1.2s;
    transition: all 0.4s ease 1.2s;
    object-fit: cover;
}

    .bg-pic.active {
        transition-delay: 0.4s !important;
        transform: matrix(1.0, 0, 0, 1.0, 0, 0);
        -webkit-transition: all 5.0s ease;
        -moz-transition: all 5.0s ease;
        -ms-transition: all 5.0s ease;
        -o-transition: all 5.0s ease;
        transition: all 5.0s ease;
    }

/*btn效果*/
.show-more {
    width: 100px;
    height: 42px;
    line-height: 42px;
    display: block;
    color: #409EFF;
    text-align: center;
    border: 1px solid #409EFF;
    position: relative;
}

    .show-more span {
        position: relative;
        z-index: 3;
    }

.show-more {
    overflow: hidden;
}

    .show-more:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #409EFF;
        position: absolute;
        top: 0px;
        left: -100%;
    }

    .show-more:hover {
        color: #fff;
        border-color: #409EFF !important;
    }

        .show-more:hover:after {
            left: 0px;
        }

    .show-more:after, .show-more {
        -moz-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

/*初始化按钮*/
.btn {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    outline: none;
    margin: 0;
    transition: .1s;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}

    .btn:hover {
        background-color: #409EFF;
        border-color: #409EFF;
        color: #fff;
    }

textarea.text {
    display: block;
    padding: 0px;
    width: 100%;
    border: 0px;
    background: none;
    margin: 0px;
    resize: none;
}

a {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/* ****************
Public Css
**************** */

/*--- Header ---*/
.Header-wrap {
    z-index: 99;
}

.header-container {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 90;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    background-color: rgba(225,225,225,0.5);
}

/*logo*/
.H-logo {
    height: 105px;
    line-height: 105px;
    font-size: 0px;
    float: left;
    position: relative;
    overflow: hidden;
    z-index: 5;
}

    .H-logo img.rollover {
        display: none;
    }

.H-action {
    float: right;
    margin: 0 1.16667% 0 0;
}

.H-lang, .H-user, .H-srch {
    height: 105px;
    float: left;
}

/*Hlang*/
.H-lang {
    position: relative;
}

    .H-lang .Hlang-menu {
        display: block;
        width: 24px;
        margin-left: 20px;
        height: 100%;
        line-height: 115px;
        transition: none;
        -webkit-transition: none;
    }

        .H-lang .Hlang-menu span {
            color: #999;
            font-size: 22px;
        }

.Hlang-box {
    padding: 20px 0px;
    width: 180px;
    box-shadow: 1px 1px 9px #666;
    background: #fff;
    position: absolute;
    top: 105px;
    left: -62px;
    display: none;
}

    .Hlang-box:before {
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 8px 8px;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        top: -8px;
        left: 50%;
        margin: 0 0 0 -4px;
    }

    .Hlang-box a {
        display: block;
        padding: 5px 9px 5px 50px;
        line-height: 30px;
        background-repeat: no-repeat !important;
        background-position: 20px center !important;
    }

        .Hlang-box a:hover {
            color: #fff;
            background: #409EFF;
        }
/*.Hlang-box a.CN{background-image:url(../images-cn.png);}
.Hlang-box a.EN{background-image:url(../images-en.png);}*/

/*Hsrch*/
.H-srch .Hsrch-menu {
    display: block;
    width: 24px;
    height: 100%;
    margin-right: 20px;
    line-height: 115px;
}

    .H-srch .Hsrch-menu span {
        color: #999;
        font-size: 30px;
    }

.Hsrch-box {
    width: 1400px;
    height: 105px;
    background: #fff;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -700px;
    display: none;
    position: absolute;
    z-index: 2;
}

.Hsrch-block {
    width: 50%;
    height: 32px;
    margin: 35px auto 0;
    margin-right: 70px;
    float: right;
}

    .Hsrch-block .top_btn {
        width: 30px;
        height: 40px;
        background: url(../images/icon_sq.svg) no-repeat center / contain;
        float: left;
        border: 0px;
        background-color: #fff;
    }

    .Hsrch-block .close {
        display: block;
        width: 28px;
        height: 28px;
        float: right;
    }

        .Hsrch-block .close span {
            font-size: 32px;
            color: #333;
        }

    .Hsrch-block .text {
        width: 70%;
        height: 40px;
        font-size: 16px;
        float: left;
        margin: 0 0 0 9px;
        border: 1px solid #eee;
        padding: 5px 10px;
    }

        .Hsrch-block .text::-webkit-input-placeholder {
            color: #6f6f6f;
        }

.Hsrch-menu.cur {
    display: none;
}

.Header-wrap.Header-searching .H-logo img {
    display: none;
}

    .Header-wrap.Header-searching .H-logo img.rollover {
        display: inline-block;
    }

/*Hnav*/
.H-nav {
    float: right;
}

    .H-nav li {
        padding: 0 30px;
        float: left;
        position: relative;
    }

    .H-nav .Hnav-menu {
        display: block;
        height: 105px;
        line-height: 115px;
        font-size: 16px;
        color: #333;
        position: relative;
    }

.Hnav-menu i {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/icon-dd1.svg) no-repeat center / 50% auto;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
    display: none;
}

.Hnav-menu.cur i {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.Hnav-sub {
    width: 200px;
    background: #fff;
    position: absolute;
    top: 105px;
    left: -35px;
    display: none;
}

.HnavSub-list li {
    width: 100%;
    padding: 0;
}

    .HnavSub-list li a {
        display: block;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333;
        background: #fff;
        border-top: 1px solid #e5e5e5;
    }

.H-nav li.cur .Hnav-menu, .H-nav li:hover .Hnav-menu {
    color: #e10600;
    background: url(../images/icon_ydx.png) no-repeat center 24px;
    transition: none;
}

.HnavSub-list li.cur a, .HnavSub-list li a:hover {
    background: #e10600;
    color: #fff;
}

@media all and (min-width:980px) {
    .H-lang:hover .Hlang-box {
        display: block;
        animation: fadeInUps .5s;
        -webkit-animation: fadeInUps .5s;
    }

    .H-nav > li:hover .Hnav-sub {
        display: block;
        animation: fadeInDowns .5s;
        -webkit-animation: fadeInDowns .5s;
    }
}

@keyframes fadeInUps {
    0% {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInDowns {
    0% {
        transform: translateY(20px);
        -webkit-transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}

/*--- Banner ---*/
#index-bnr {
    height: 822px; /* margin-top:105px; */
}

.bnr-img {
    display: block;
    width: 100%;
    height: auto;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative;
}

.index-bnr .bnr-img {
    height: 822px;
}

.index-bnr .swiper-pagination {
    bottom: 8% !important;
    text-align: left;
    margin: 0px auto;
    width: 80% !important;
    left: 10% !important;
}

.index-bnr .swiper-pagination-bullet {
    width: 5px;
    height: 8px;
    border-radius: 0px;
    background: #fff;
    position: relative;
    overflow: hidden;
    margin: 0 8px;
    opacity: 0.5;
    padding: 0px;
}

.index-bnr .swiper-pagination-bullet-active {
    width: 5px;
    opacity: 1;
    transition: width 3s linear;
    -moz-transition: width 3s linear;
    -webkit-transition: width 3s linear;
    -o-transition: width 3s linear;
    height: 18px;
}

.index-bnr .bnr-bg {
    width: 100%;
    height: 100%;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: absolute;
    top: 0px;
    left: 0px;
}

.iBnr1-box {
    text-align: center;
    color: #fff;
    z-index: 2;
    position: absolute;
    left: 50%;
    top: 40%;
    width: 1200px;
    margin-left: -600px;
    text-align: left;
}

    .iBnr1-box .t1 {
        line-height: 50px;
        font-size: 50px;
        margin-bottom: 30px;
        -webkit-transition: all .6s;
        -moz-transition: all .6s;
        -ms-transition: all .6s;
        -o-transition: all .6s;
        transition: all .6s;
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        -o-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
        background: rgba(22,20,43,0.4);
        font-size: 30px;
        padding: 25px;
        width: 700px;
        float: right;
    }

    .iBnr1-box .t2 {
        font-size: 24px;
        line-height: 36px;
        text-transform: uppercase;
        letter-spacing: 10px;
        opacity: 0;
        -webkit-transition: all .6s;
        -moz-transition: all .6s;
        -ms-transition: all .6s;
        -o-transition: all .6s;
        transition: all .6s;
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
        transform: translateY(50px);
    }

.swiper-slide.swiper-slide-active .iBnr1-box .t1, .swiper-slide.swiper-slide-active .iBnr1-box .t2 {
    transform: translate(0,0) scale(1);
    -webkit-transform: translate(0,0) scale(1);
    opacity: 1;
}

/*--- Footer ---*/
.footer-container {
    padding: 60px 0;
    background: #3d3d3d;
    color: #fff;
}

.F-nav {
    width: 15%;
    float: left;
}

    .F-nav dt, .F-ct .top {
        line-height: 25px;
        font-size: 18px;
        position: relative;
    }

        .F-nav dt i {
            display: block;
            width: 50px;
            height: 50px;
            background: url(../images/icon-dd2.svg) no-repeat center / 50% auto;
            position: absolute;
            right: 0px;
            top: 0px;
            display: none;
            transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
        }

        .F-nav dt.cur i {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }

    .F-nav dd {
        margin: 15px 0 0;
    }

        .F-nav dd a {
            display: block;
            padding: 5px 0;
            line-height: 25px;
            color: #bcbcbc;
        }

            .F-nav dd a:hover {
                color: #fff;
            }

.F-ct {
    width: 360px;
    float: right;
}

.F-time {
    position: relative;
}

.F-ct .consult {
    position: absolute;
    right: 0px;
    top: 0px;
    border: 2px solid #545454;
    width: 145px;
    height: 45px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 25px;
}

    .F-ct .consult:hover {
        border-color: #fff;
    }

.F-ct .time {
    color: #bcbcbc;
    font-size: 16px;
}

.F-ct .tel a {
    font-size: 26px;
    color: #fff;
    margin-bottom: 10px;
    display: block;
}

.F-ct .F-lx {
    border-top: 2px solid #515456;
    border-bottom: 2px solid #515456;
    padding: 15px 0;
    margin-top: 15px;
}

.F-ct .adr { /* height:20px; */
    line-height: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #bcbcbc;
    background: url(../images/icon_ftadd.png) no-repeat left center;
    padding-left: 30px;
}

.F-ct .email {
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #bcbcbc;
    background: url(../images/icon_ftfax.png) no-repeat left center;
    padding-left: 30px;
}

.F-share {
    margin-top: 25px;
}

    .F-share a {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0px 5px;
        line-height: 30px;
    }

        .F-share a span {
            font-size: 28px;
            color: #646464;
            transition: all 0.5s;
        }

        .F-share a.weibo {
            position: relative;
            top: -3px;
        }

        .F-share a:hover span {
            color: #fff;
        }

        .F-share a.wechat {
            position: relative;
        }

            .F-share a.wechat:hover .wechat_box {
                display: block;
            }

    .F-share .wechat_box {
        display: none;
        position: absolute;
        left: 0px;
        top: 35px;
        width: 120px;
        height: 120px;
        padding: 10px;
        background: #fff;
    }

        .F-share .wechat_box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.F-coyright {
    line-height: 24px;
    text-align: left;
    font-size: 14px;
    color: #999;
    background: #3d3d3d;
}

    .F-coyright .contain {
        border-top: 1px solid #3d3d3d;
        padding: 30px 0;
    }

/* 内页全局通用banner */
.pub-bann { /* margin-top:105px; */
    color: #fff;
}

    .pub-bann img {
        max-width: 100%;
        min-height: 220px;
        object-fit: cover;
    }

/* 手机端按钮 */
.Hmenu-btn {
    width: 25px;
    height: 50px;
    padding: 24px 0 0;
    cursor: pointer;
    display: none;
    float: right;
    margin: 0 0 0 9px;
}

    .Hmenu-btn a {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        position: relative;
    }

        .Hmenu-btn a:before,
        .Hmenu-btn a:after {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background-color: #333;
            position: absolute;
            left: 0px;
        }

        .Hmenu-btn a:before {
            top: -9px;
        }

        .Hmenu-btn a:after {
            bottom: -9px;
        }

    .Hmenu-btn.cur a {
        -moz-animation: buttonAnimation 0.3s ease forwards;
        -webkit-animation: buttonAnimation 0.3s ease forwards;
        animation: buttonAnimation 0.3s ease forwards;
    }

        .Hmenu-btn.cur a:before {
            -moz-animation: buttonAnimationBefore 0.3s ease forwards;
            -webkit-animation: buttonAnimationBefore 0.3s ease forwards;
            animation: buttonAnimationBefore 0.3s ease forwards;
        }

        .Hmenu-btn.cur a:after {
            -moz-animation: buttonAnimationAfter 0.3s ease forwards;
            -webkit-animation: buttonAnimationAfter 0.3s ease forwards;
            animation: buttonAnimationAfter 0.3s ease forwards;
        }

@-moz-keyframes buttonAnimationBefore {
    0% {
        -moz-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }

    50% {
        -moz-transform: translateY(9px) rotate(0);
        transform: translateY(9px) rotate(0);
    }

    100% {
        -moz-transform: translateY(9px) rotate(45deg);
        transform: translateY(9px) rotate(45deg);
    }
}

@-webkit-keyframes buttonAnimationBefore {
    0% {
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }

    50% {
        -webkit-transform: translateY(9px) rotate(0);
        transform: translateY(9px) rotate(0);
    }

    100% {
        -webkit-transform: translateY(9px) rotate(45deg);
        transform: translateY(9px) rotate(45deg);
    }
}

@keyframes buttonAnimationBefore {
    0% {
        -moz-transform: translateY(0px) rotate(0);
        -ms-transform: translateY(0px) rotate(0);
        -webkit-transform: translateY(0px) rotate(0);
        transform: translateY(0px) rotate(0);
    }

    50% {
        -moz-transform: translateY(9px) rotate(0);
        -ms-transform: translateY(9px) rotate(0);
        -webkit-transform: translateY(9px) rotate(0);
        transform: translateY(9px) rotate(0);
    }

    100% {
        -moz-transform: translateY(9px) rotate(45deg);
        -ms-transform: translateY(9px) rotate(45deg);
        -webkit-transform: translateY(9px) rotate(45deg);
        transform: translateY(9px) rotate(45deg);
    }
}

@-moz-keyframes buttonAnimationAfter {
    0% {
        -moz-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }

    50% {
        -moz-transform: translateY(-9px) rotate(0);
        transform: translateY(-9px) rotate(0);
    }

    100% {
        -moz-transform: translateY(-9px) rotate(-45deg);
        transform: translateY(-9px) rotate(-45deg);
    }
}

@-webkit-keyframes buttonAnimationAfter {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }

    50% {
        -webkit-transform: translateY(-9px) rotate(0);
        transform: translateY(-9px) rotate(0);
    }

    100% {
        -webkit-transform: translateY(-9px) rotate(-45deg);
        transform: translateY(-9px) rotate(-45deg);
    }
}

@keyframes buttonAnimationAfter {
    0% {
        -moz-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }

    50% {
        -moz-transform: translateY(-9px) rotate(0);
        -ms-transform: translateY(-9px) rotate(0);
        -webkit-transform: translateY(-9px) rotate(0);
        transform: translateY(-9px) rotate(0);
    }

    100% {
        -moz-transform: translateY(-9px) rotate(-45deg);
        -ms-transform: translateY(-9px) rotate(-45deg);
        -webkit-transform: translateY(-9px) rotate(-45deg);
        transform: translateY(-9px) rotate(-45deg);
    }
}

@-moz-keyframes buttonAnimation {
    0% {
        background: #aaaaaa;
    }

    50% {
        background: rgba(255, 255, 255, 0);
    }

    100% {
        background: rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes buttonAnimation {
    0% {
        background: #aaaaaa;
    }

    50% {
        background: rgba(255, 255, 255, 0);
    }

    100% {
        background: rgba(255, 255, 255, 0);
    }
}

@keyframes buttonAnimation {
    0% {
        background: #aaaaaa;
    }

    50% {
        background: rgba(255, 255, 255, 0);
    }

    100% {
        background: rgba(255, 255, 255, 0);
    }
}