@import url('../fonts/iconfont.css');

:root {
    --color: #1D5699;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    font-family: "Microsoft YaHei", "sans-serif";
    overflow-x: hidden;
    font-size: .16rem;
    font-weight: 400;
    color: #333;
    text-align: justify;
}

img {
    border: 0;
    max-width: 100%;
    line-height: 1.71;
}

ul,
li {
    list-style: none;
    margin: 0
}

em,
i {
    font-style: normal
}

a,
a:link {
    text-decoration: none;
    color: #333;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

a:active,
a:hover {
    outline: 0;
    color: var(--color);
    text-decoration: none
}

.clear {
    clear: both
}

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

.clearfix:after {
    clear: both
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

ul,
ol {
    padding: 0;
    margin: 0;
}

.al {
    text-align: left !important
}

.ac {
    text-align: center !important
}

.ar {
    text-align: right !important
}

.aj {
    text-align: justify !important
}

.fl {
    float: left
}

.fr {
    float: right !important
}

.rel {
    position: relative
}

.abl {
    position: absolute
}

.ovh {
    overflow: hidden
}

.upp {
    text-transform: uppercase
}

.fb {
    font-weight: bold;
}

input,
button,
textarea {
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: inherit
}

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

.ep2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.img-a {
    display: inline-block;
    max-width: 100%;
    height: auto
}

.h100 {
    height: 100%
}

.lineM {
    line-height: 1.7;
}

.lineB {
    line-height: 2;
}

.rd {
    background: red;
}

.lightbox {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 21;
    display: none;
}

/* flex */
.flex {
    display: flex
}

.flex-a {
    flex: 1;
    overflow: hidden;
}

.flex-b {
    display: flex;
    justify-content: space-between
}

.flex-c {
    display: flex;
    justify-content: center
}

.flex-e {
    display: flex;
    justify-content: flex-end
}

.flex-w {
    display: flex;
    flex-wrap: wrap;
}

.flex-ac {
    display: flex;
    align-items: center;
}

.flex-cb {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.flex-cc {
    display: flex;
    align-items: center;
    justify-content: center
}

.flex-ce {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.flex-ae {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start
}

.flex-cs {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-shr {
    flex-shrink: 0;
}

.flex-stretch {
    align-items: stretch;
}

::-webkit-scrollbar {
    width: 8px;
    height: 5px
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1)
}

::-webkit-scrollbar-thumb {
    background: #333
}
::-webkit-scrollbar {
    height: 12px;
}
.grid {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.x,
.x0,
.x1,
.x2,
.x3,
.x4,
.x5,
.x6,
.x7,
.x8,
.x9,
.x10,
.x11,
.x12,
.xl1,
.xl2,
.xl3,
.xl4,
.xl5,
.xl6,
.xl7,
.xl8,
.xl9,
.xl10,
.xl11,
.xl12,
.xs0,
.xs1,
.xs2,
.xs3,
.xs4,
.xs5,
.xs6,
.xs7,
.xs8,
.xs9,
.xs10,
.xs11,
.xs12,
.xm0,
.xm1,
.xm2,
.xm3,
.xm4,
.xm41,
.xm5,
.xm6,
.xm7,
.xm8,
.xm9,
.xm10,
.xm11,
.xm12,
.xb0,
.xb1,
.xb2,
.xb3,
.xb4,
.xb5,
.xb6,
.xb7,
.xb8,
.xb9,
.xb10,
.xb11,
.xb12,
.xg0,
.xg1,
.xg2,
.xg3,
.xg4,
.xg5,
.xg6,
.xg7,
.xg8,
.xg9,
.xg10,
.xg11,
.xg12 {
    position: relative;
    width: 100%
}

.x {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.x0,
.xl0,
.xs0,
.xm0,
.xb0,
.xg0 {
    max-width: 100%
}

.x0 {
    width: auto
}

.x1 {
    width: 8.33333333%
}

.x2 {
    width: 16.66666667%
}

.x20 {
    width: 20%
}

.x3 {
    width: 25%
}

.x4 {
    width: 33.33333333%
}

.x5 {
    width: 41.66666667%
}

.x6 {
    width: 50%
}

.x7 {
    width: 58.33333333%
}

.x8 {
    width: 66.66666667%
}

.x9 {
    width: 75%
}

.x10 {
    width: 83.33333333%
}

.x11 {
    width: 91.66666667%
}

.x12 {
    width: 100%
}

@media (min-width:572px) {
    .xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .xl0 {
        width: auto
    }

    .xl1 {
        width: 8.33333333%
    }

    .xl2 {
        width: 16.66666667%
    }

    .xl20 {
        width: 20%
    }

    .xl3 {
        width: 25%
    }

    .xl4 {
        width: 33.33333333%
    }

    .xl5 {
        width: 41.66666667%
    }

    .xl6 {
        width: 50%
    }

    .xl7 {
        width: 58.33333333%
    }

    .xl8 {
        width: 66.66666667%
    }

    .xl9 {
        width: 75%
    }

    .xl10 {
        width: 83.33333333%
    }

    .xl11 {
        width: 91.66666667%
    }

    .xl12 {
        width: 100%
    }
}

@media (min-width:762px) {
    .xs {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .xs0 {
        width: auto
    }

    .xs1 {
        width: 8.33333333%
    }

    .xs2 {
        width: 16.66666667%
    }

    .xs20 {
        width: 20%
    }

    .xs3 {
        width: 25%
    }

    .xs4 {
        width: 33.33333333%
    }

    .xs5 {
        width: 41.66666667%
    }

    .xs6 {
        width: 50%
    }

    .xs7 {
        width: 58.33333333%
    }

    .xs8 {
        width: 66.66666667%
    }

    .xs9 {
        width: 75%
    }

    .xs10 {
        width: 83.33333333%
    }

    .xs11 {
        width: 91.66666667%
    }

    .xs12 {
        width: 100%
    }
}

@media (min-width:981px) {
    .xm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .xm0 {
        width: auto
    }

    .xm1 {
        width: 8.33333333%
    }

    .xm2 {
        width: 16.66666667%
    }

    .xm20 {
        width: 20%
    }

    .xm3 {
        width: 25%
    }

    .xm4 {
        width: 33.33333333%
    }

    .xm41 {
        width: 25%
    }

    .xm5 {
        width: 41.66666667%
    }

    .xm6 {
        width: 50%
    }

    .xm7 {
        width: 58.33333333%
    }

    .xm8 {
        width: 66.66666667%
    }

    .xm9 {
        width: 75%
    }

    .xm10 {
        width: 83.33333333%
    }

    .xm11 {
        width: 91.66666667%
    }

    .xm12 {
        width: 100%
    }
}

@media (min-width:1232px) {
    .xb {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .xb0 {
        width: auto
    }

    .xb1 {
        width: 8.33333333%
    }

    .xb2 {
        width: 16.66666667%
    }

    .xb20 {
        width: 20%
    }

    .xb3 {
        width: 25%
    }

    .xb4 {
        width: 33.33333333%
    }

    .xb5 {
        width: 41.66666667%
    }

    .xb6 {
        width: 50%
    }

    .xb7 {
        width: 58.33333333%
    }

    .xb8 {
        width: 66.66666667%
    }

    .xb9 {
        width: 75%
    }

    .xb10 {
        width: 83.33333333%
    }

    .xb11 {
        width: 91.66666667%
    }

    .xb12 {
        width: 100%
    }
}

@media (min-width:1632px) {
    .xg0 {
        width: auto
    }

    .xg1 {
        width: 8.33333333%
    }

    .xg2 {
        width: 16.66666667%
    }

    .xg20 {
        width: 20%
    }

    .xg3 {
        width: 25%
    }

    .xg4 {
        width: 33.33333333%
    }

    .xg5 {
        width: 41.66666667%
    }

    .xg6 {
        width: 50%
    }

    .xg7 {
        width: 58.33333333%
    }

    .xg8 {
        width: 66.66666667%
    }

    .xg9 {
        width: 75%
    }

    .xg10 {
        width: 83.33333333%
    }

    .xg11 {
        width: 91.66666667%
    }

    .xg12 {
        width: 100%
    }
}

.grid-s>.grid {
    margin: -.1rem
}

.grid-s>.grid>[class*="x"] {
    padding: .1rem
}


.grid-m>.grid {
    margin: 0 -.13rem
}

.grid-m>.grid>[class*="x"] {
    padding: .13rem
}


.grid-b>.grid {
    margin: 0 -.18rem
}

.grid-b>.grid>[class*="x"] {
    padding: .15rem .18rem
}

.grid-l>.grid {
    margin: -.26rem -.3rem
}

.grid-l>.grid>[class*="x"] {
    padding: .26rem .3rem
}

.grid-lg>.grid {
    margin: 0 -.8rem
}

.grid-lg>.grid>[class*="x"] {
    padding: .22rem .8rem
}

.flex-item li {
    display: flex;
}

.flex-item li .item {
    flex: 1;
    overflow: hidden;
}


@keyframes anim1 {
    0% {
        stroke-dasharray: 0 190;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 190 0;
        stroke-dashoffset: 0;
    }

    ;
}

.anim2 {
    animation-name: anim2;
}

@keyframes anim2 {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }

    ;
}

/* wp */
.wp {
    width: 98%;
    max-width: 16.2rem;
    margin-left: auto;
    margin-right: auto;
}

.show-m {
    display: none;
}

@media (max-width:1620px) {
    .wp {
        padding: 0 .4rem
    }

    .grid-l {
        padding: .15rem 0
    }

    .grid-l>.grid {
        margin: -.15rem 0
    }

    .grid-l>.grid>[class*="x"] {
        padding: .15rem
    }

}

@media (max-width:980px) {
    .mgrid {
        flex-wrap: wrap !important;
    }

    .mgrid .flex-a {
        flex: auto !important;
    }

    .wp {
        width: 100%;
        padding: 0 15px;
        max-width: 100%;
    }

    .pzDiv {
        padding-left: 15px !important;
    }

    .mx12 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .show-d {
        display: none !important;
    }

    .show-m {
        display: block !important;
    }

    .grid-s {
        padding: .05rem 0
    }

    .grid-s>.grid {
        margin: -.05rem
    }

    .grid-s>.grid>[class*="x"] {
        padding: .05rem
    }

    .grid-m {
        padding: .1rem 0
    }

    .grid-m>.grid {
        margin: -.1rem
    }

    .grid-m>.grid>[class*="x"] {
        padding: .1rem
    }

    .grid-b {
        padding: .12rem 0
    }

    .grid-b>.grid {
        margin: -.12rem
    }

    .grid-b>.grid>[class*="x"] {
        padding: .12rem
    }

    .grid-l {
        padding: .2rem 0
    }

    .grid-l>.grid {
        margin: -.1rem 0
    }

    .grid-l>.grid>[class*="x"] {
        padding: .1rem
    }

    .grid-lg>.grid {
        margin: 0 -.1rem
    }

    .grid-lg>.grid>[class*="x"] {
        padding: .1rem
    }
}

/* family */

.radius,
.radius img {
    border-radius: .1rem;
}

.radius2,
.radius2 img {
    border-radius: .15rem;
}

/* font-size */
.fb {
    font-weight: bold
}

.iconfont {
    font-size: .16rem
}

.f12 {
    font-size: .12rem;
}

.f14 {
    font-size: .14rem;
}

.f16 {
    font-size: .16rem;
}

.f17 {
    font-size: .17rem;
}

.f18 {
    font-size: .18rem
}

.f20 {
    font-size: .2rem
}

.f21 {
    font-size: .21rem;
}

.f22 {
    font-size: .22rem
}

.f24 {
    font-size: .24rem
}

.f25 {
    font-size: .25rem;
}

.f26 {
    font-size: .26rem
}

.f28 {
    font-size: .28rem;
}

.f30 {
    font-size: .3rem;
}

.f32 {
    font-size: .32rem
}

.f34 {
    font-size: .34rem;
}

.f36 {
    font-size: .36rem
}

.f40 {
    font-size: .4rem;
}

.f42 {
    font-size: .42rem;
}

.f44 {
    font-size: .44rem;
}

.f45 {
    font-size: .45rem;
}

.f48 {
    font-size: .48rem;
}

.f55 {
    font-size: .55rem;
}

.f58 {
    font-size: .58rem;
}

.f60 {
    font-size: .6rem
}

.f64 {
    font-size: .64rem;
}

.f70 {
    font-size: .7rem;
}

.f84 {
    font-size: .4rem;
}

.f100 {
    font-size: 1rem;
}

.f164 {
    font-size: 1.64rem;
}

.p60 {
  
}

.p100 {
    padding: 1rem 0;
}

.pb100 {
    padding-bottom: 1rem
}

.p120 {
    padding: 1.2rem 0;
}

@media (max-width:980px) {
    .iconfont {
        font-size: .2rem;
    }

    body {
        font-size: .17rem;
    }

    .p60 {
        padding: .35rem 0
    }

    .p100 {
        padding: .55rem 0;
    }

    .p120 {
        padding: .65rem 0
    }

    .f12 {
        font-size: .15rem;
    }

    .f14 {
        font-size: .17rem;
    }

    .f16 {
        font-size: .18rem;
    }

    .f17 {
        font-size: .18rem;
    }

    .f18 {
        font-size: .19rem
    }

    .f20 {
        font-size: .2rem
    }

    .f22 {
        font-size: .21rem
    }

    .f24 {
        font-size: .22rem
    }

    .f25 {
        font-size: .23rem;
    }

    .f26 {
        font-size: .23rem
    }

    .f28 {
        font-size: .23rem;
    }

    .f30 {
        font-size: .24rem;
    }

    .f32 {
        font-size: .26rem
    }

    .f34 {
        font-size: .265rem;
    }

    .f36 {
        font-size: .28rem
    }

    .f40 {
        font-size: .3rem;
    }

    .f42 {
        font-size: .31rem;
    }

    .f44 {
        font-size: .31rem;
    }

    .f45 {
        font-size: .31.87rem;
    }

    .f48 {
        font-size: .32rem;
    }

    .f55 {
        font-size: .34rem;
    }

    .f58 {
        font-size: .35rem;
    }

    .f60 {
        font-size: .38rem
    }

    .f64 {
        font-size: .4rem;
    }

    .f70 {
        font-size: .45rem;
    }

    .f84 {
        font-size: .48rem;
    }

    .f100 {
        font-size: .55rem;
    }

    .f164 {
        font-size: .8rem;
    }

    .pb100 {
        padding-bottom: .55rem
    }

    .radius,
    .radius img {
        border-radius: .1rem;
    }
}

/* 动画重置 */
@keyframes anim1 {
    0% {
        stroke-dasharray: 0 190;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 190 0;
        stroke-dashoffset: 0;
    }

    ;
}

.anim2 {
    animation-name: anim2;
}

@keyframes anim2 {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }

    ;
}

.anim2 {
    animation-name: anim2;
}


/* vs-btn按钮 */
.vs-btn {
    position: relative;
    z-index: 1;
}

.vs-btn::before,
.vs-btn::after {
    width: 100%;
    height: 0;
    content: "";
    margin: auto;
    position: absolute;
    top: 0%;
    left: 0%;
    background: var(--color);
    transition: all ease 0.5s;
    z-index: -1;
    border-radius: inherit;
}

.vs-btn::before {
    transform: rotateX(90deg);
    height: 100%;
}

.vs-btn:after {
    transform: rotateY(90deg);
}

.vs-btn:hover {
    color: #fff;
}

.vs-btn:hover::before {
    transform: rotateX(0);
    width: 100%;
    height: 100%;
}

.vs-btn:hover::after {
    transform: rotateY(90deg);
}

/* 图片统一尺寸 */
.fitImg {
    position: relative;
    height: 0;
    padding-top: 67.85%;
    overflow: hidden;
}

.fitImg2 {
    position: relative;
    overflow: hidden;
}

.fitImg img,
.fitImg2 img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: .6s;
    -o-transition: .6s;
    -moz-transition: .6s;
    transition: .6s;
}

.fitImg:hover img,
.item:hover .fitImg img,
.fitImg2:hover img {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
}

.bimg {
    overflow: hidden;
}

.bimg img {
    object-fit: cover;
    display: block;
    transition: 1.5s;
    -moz-transition: 1.5s;
    -webkit-transition: 1.5s;
}

.bimg:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.transy {
    transition: all ease .3s;
}

.transy:hover {
    transform: translateY(-3px);
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@-moz-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@-o-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        -moz-transform: translate3d(-50px, 0, 0);
        -ms-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@-moz-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        -moz-transform: translate3d(-50px, 0, 0);
        -ms-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@-o-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        -moz-transform: translate3d(-50px, 0, 0);
        -ms-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        -moz-transform: translate3d(-50px, 0, 0);
        -ms-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -ms-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        -moz-transform: translate3d(50px, 0, 0);
        -ms-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@-moz-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        -moz-transform: translate3d(50px, 0, 0);
        -ms-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@-o-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        -moz-transform: translate3d(50px, 0, 0);
        -ms-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        -moz-transform: translate3d(50px, 0, 0);
        -ms-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    ;
}

@media (max-width:980px) {

    .fadeInLeft,
    .fadeInRight {
        -webkit-animation-name: fadeInUp;
        -moz-animation-name: fadeInUp;
        -ms-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }

    ;
}