@charset "utf-8";
     
.wrap {width:1200px;margin:0 auto;}
.w1400 .wrap {width:1400px;}

body {min-width: 1200px;overflow-x: hidden;}

a:hover {text-decoration: none;}
.tran02 {-moz-transition: all .2s;-webkit-transition: all .2s;transition: all .2s;}

/*头部导航*/
.header {position: absolute;left:0;top:0;right:0;font-size: 18px;color: #fff;z-index: 1000;line-height: 50px;background:none;font-weight: bold;}
.header .wrap {position: relative;text-align: center;}
.header, .header a {color: #fff;font-weight: bold;}
.header .logo {width:245px;position: absolute;left:0;top:0;float: none;text-align: left;}
.header .logo img {vertical-align: middle;margin: 0 5px 0 16px;}
.header .logo h1 {display: inline;vertical-align: middle;font-weight: bold;}
.header .nav {display: inline-block;float: none;}
.header .nav li {float: left;}
.header .nav li a {display: block;padding:0 32px; font-size:16px;}
.header .nav li a:hover, .header .nav li.active a {opacity: .5;filter:alpha(opacity=50);}

.header .loginstate {position: absolute;right:0;top:0;float: none; font-size: 16px;}
.header .loginBtn {display: inline-block;line-height: 28px;padding-left: 30px;}
.header .loginstate a{display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}
.header .loginstate img {width:20px; height:20px; vertical-align: middle;margin-right: 8px; margin-bottom: 4px; border-radius: 50%;}

.banner h2 {letter-spacing:2px;}


/*底部*/
.footer {padding-top: 50px;background: #e6ebf2;}
/*友情链接*/
.friendlink {padding-bottom: 20px; border-bottom: 1px solid #d8dde4;}
.friendlink h5 {font-size: 20px; color: #5c616d;padding-bottom: 15px;}
.friendlink ul {margin-top: 10px;}
.friendlink li {float: left; margin: 0 40px 5px 0;}
.friendlink li a {font-size: 16px; color: #828793;}
.friendlink li a:hover {text-decoration: none; color: #333;}

.morelink {margin-top: 50px;padding-bottom: 40px;}
.morelink dl {float: left;}
.morelink dl.m1 {width:200px;}
.w1400 .morelink dl.m1 {width:240px;}
.morelink dl.m2 {width:180px;}
.w1400 .morelink dl.m2 {width:200px;}
.morelink dl.m3 {width:240px;}
.w1400 .morelink dl.m3 {width:315px;}
.morelink dl.m4 {width:230px;}
.w1400 .morelink dl.m4 {width:290px;}
.morelink dt {font-size: 20px;color: #5c616d;padding-bottom: 25px;}
.morelink dd {padding-right: 30px;}
.morelink dd, .morelink dd a {font-size: 16px;color: #828793;line-height: 40px;}
.morelink dd a {display: inline-block;white-space: nowrap;text-overflow:ellipsis;overflow: hidden; vertical-align: middle;}
.morelink dd a:hover {text-decoration: none; color: #333;}

.morelink .wx {width:130px;text-align: center; float: right;}
.morelink .wx dt {padding-bottom: 0;}
.morelink .wx dd {padding-right: 0;}
.morelink .wx img {width:130px;height: 130px;}

.footer .copy {padding:40px 0 15px;border-top: 1px solid #d8dde4;}
.footer p {padding: 5px 0;text-align: center;font-size: 16px;color: #828793;}

/*右侧浮动菜单*/
.right_btn {position: fixed;right:10px;bottom:10px;z-index: 100;}
.right_btn ul {width:60px;border-radius:10px;}
.right_btn ul li {position: relative;margin-bottom: 4px;width:60px;height:60px;background-color: rgb(76, 82, 120);opacity: 0.45;filter:alpha(opacity=45);border-radius: 6px;cursor: pointer;}
.right_btn ul li:hover, .right_btn ul li.hover {opacity: 1;filter:alpha(opacity=100);}
.right_btn ul li .m {text-align: center;}
.right_btn ul li .m p {font-size: 12px;color: #fff;}
.right_btn ul li.gotop {background: url('/youmengcms/top.png') center no-repeat;}
.right_btn ul li.gotop:hover {background: url('/youmengcms/top.png') center no-repeat;}
.right_btn ul li.kf {background: #62a5ff;opacity: 1;filter:alpha(opacity=100);}
.right_btn ul li.kf:hover {background: #5490ff;}
.right_btn ul li.gotop i {display: inline-block;width:22px;height:14px;margin:15px auto 0;background: url('/youmengcms/icon_top.png') center no-repeat;}
.right_btn ul li.kf .m i {display: inline-block;width:28px;height:26px;margin:8px auto 0;background: url('/youmengcms/icon_service.png') center no-repeat;}
.right_btn ul li.tel .m i {display: inline-block;width:22px;height:22px;margin:8px auto 0;background: url('/youmengcms/icon_tell.png') center no-repeat;}
.right_btn ul li.qq .m i {display: inline-block;width:23px;height:24px;margin:8px auto 0;background: url('/youmengcms/icon_qq.png') center no-repeat;}
.right_btn ul li.wx .m i {display: inline-block;width:28px;height:23px;margin:8px auto 0;background: url('/youmengcms/icon_wx.png') center no-repeat;}
.right_btn ul li.shouhou i {display: inline-block;width:28px;height:23px;margin:8px auto 0;background: url('/youmengcms/icon_shouhou.png') center no-repeat;}
.right_btn ul li.demoweb i {display: inline-block;width:28px;height:23px;margin:8px auto 0;background: url('/youmengcms/icon_demo.png') center no-repeat;}

.right_btn ul li .d {display: none;position: absolute;top:0;right:100%;padding-right: 20px;margin-top: -61px;display: none;cursor: default;-moz-animation:leftFadeIn .3s;-webkit-animation:leftFadeIn .3s;animation:leftFadeIn .3s;}
.right_btn ul li .title {position: relative;padding:0 15px;height: 40px;line-height: 40px;background-color: rgb(255, 255, 255);box-shadow: 0px 0px 5px 0px rgba(0, 48, 255, 0.17);white-space: nowrap;border-top-left-radius:5px;border-top-right-radius:5px;z-index: 2;color: rgb(163, 166, 181);}
.ie8 .right_btn ul li .title {border:1px solid #eee;}
.right_btn ul li .d .con {position: relative;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding-top: 2px;background: #ece7e7;z-index: 2;}
.right_btn ul li .d em {position: absolute;right:8px;top:76%;display: block;width:0;height:0;border:6px solid transparent;border-left-color: #4c5278;}
.right_btn ul li:hover .d, .right_btn ul li.hover .d {display: block;}
.ie9 .right_btn ul li .d .hold {position: absolute;right:0;width:20px;bottom:0;top:0;background: rgba(255,255,255,.3)}

/*电话*/
.right_btn ul li.tel .d .con {width:100%;}
.right_btn ul li.tel .d p {position: relative;color: #fff;font-size: 16px;font-weight: bold;line-height: 36px;height: 36px;}
.right_btn ul li.tel .d p i {position: absolute;left:0;top:0;bottom:0;display: inline-block;width:36px;vertical-align: middle;}
.right_btn ul li.tel .d .con_left {position: absolute;left:0;top:2px;bottom:0;width:36px;box-shadow: 0px 5px 5px 0px rgba(0, 252, 255, 0.17);background:#4fd1d9;padding:6px 0;}
.right_btn ul li.tel .d .con_right {margin-left: 36px;box-shadow: 0px 5px 5px 0px rgba(0, 48, 255, 0.13);background: #4c5278;}
.right_btn ul li.tel .d .con_right p {padding-left: 20px}
.right_btn ul li.tel .d p.tel1 i {background:#4fd1d9 url('/youmengcms/1.png') center no-repeat;}
.right_btn ul li.tel .d p.tel2 i {background:#4fd1d9 url('/youmengcms/2.png') center no-repeat;}
.right_btn ul li.tel .d p.tel3 i {background:#4fd1d9 url('/youmengcms/3.png') center no-repeat;}


.right_btn ul li.tel .d em {margin-top: -65px;}
.right_btn ul li.tel .d .con .con_left {border-bottom-left-radius:5px;overflow: hidden;}
.right_btn ul li.tel .d .con .con_right {border-bottom-right-radius:5px;overflow: hidden;padding: 6px 0;}

/*QQ*/
.right_btn ul li.qq .d {margin-top: -59px;}
/* .right_btn ul li.qq .d .con {} */
.right_btn ul li.qq .d em {margin-top: -30px;}
.right_btn ul li.qq .d .con {color: #fff;width:270px;}
.right_btn ul li.qq .d .con .kf_item {float: left;width:90px;text-align: center;height:116px;background: #4c5278;box-shadow: 0px 5px 5px 0px rgba(0, 48, 255, 0.13);}
.right_btn ul li.qq .d .con .kf_item:hover {background: #4fd1d9;}
.right_btn ul li.qq .d .con .kf_item i {display: inline-block;width:28px;height:30px;background: url('/youmengcms/icon_qqservice.png') center no-repeat;margin:18px 0 8px;}
.right_btn ul li.qq .d .con .kf_item .kf_user {font-size: 14px;margin-bottom: 5px;}
.right_btn ul li.qq .d .con .kf_item .kf_no {font-size: 13px;font-weight: bold;}
.right_btn ul li.qq .d .con .kf_item a {color: #fff;}
.right_btn ul li.qq .d .con .kf_item .ewm {position: absolute;bottom:100%;left:0;margin-bottom: -2px;display: none;}
.right_btn ul li.qq .d .con .kf_item .ewm img {width:266px;display: block;border:2px solid #eee;}
.right_btn ul li.qq .d .con .kf_item:hover {box-shadow: 0px 5px 5px 0px rgba(0, 252, 255, 0.17);}
.right_btn ul li.qq .d .con .kf_item:hover .ewm {display: block;}
.right_btn ul li.qq .d .con .kf_item_1 .ewm , .right_btn ul li.qq .d .con .kf_item_3 .ewm {-webkit-animation-name: bottomFadeIn;animation-name: bottomFadeIn;-webkit-animation-duration: .3s;animation-duration: .3s;}
.right_btn ul li.qq .d .con .kf_item_2 .ewm {-webkit-animation-name: popup;animation-name: popup;-webkit-animation-duration: .3s;animation-duration: .3s;}
.right_btn ul li.qq .d .con .kf_item_4 .ewm{position: absolute;right:0;}

.right_btn ul li.qq .d .con .kf_item_1 {border-bottom-left-radius:5px;}
.right_btn ul li.qq .d .con .kf_item_3 {border-bottom-right-radius:5px;}

/*微信*/
.right_btn ul li.wx .d {margin-top: -250px;}
.right_btn ul li.wx .d em {margin-top: -35px;}
.right_btn ul li.wx .d .con {background: #4c5278;border-radius:2px;}
.right_btn ul li.wx .d img {width:250px;padding:15px 15px 8px;}
.right_btn ul li.wx .d .con p {color: #fff;font-size: 12px;text-align: center;padding-bottom: 12px;}


@-webkit-keyframes bgdPosBottomToTop{
  0%{background-position: center 30px;}
  100%{background-position: center -30px;}
}

@-moz-keyframes bgdPosBottomToTop{
  0%{background-position: center 30px;}
  100%{background-position: center -30px;;}
}

@keyframes bgdPosBottomToTop{
  0%{background-position: center 30px;}
  100%{background-position: center -30px;;}
}

/*遮罩层*/
.desk {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 1001;
    top: 0;
    left: 0;
    display: none;
}

.dialog {
    background: #FFFFFF;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1010;
    display: none;
}
.scaleOut {
    -webkit-animation: scaleOut 0.3s ease-in-out both;
    animation: scaleOut 0.3s ease-in-out both;
}
.scaleIn {
    -webkit-animation: scaleIn 0.3s ease-in-out both;
    animation: scaleIn 0.3s ease-in-out both;
}
.dialog a.close {
    font-size: 0;
    color: transparent;
    position: absolute;
    right: 30px;
    top: 33px;
    display: block;
    width: 14px;
    height:14px;
    background: url('/youmengcms/x.png') center no-repeat;
}
.dialog.dialog_login .dialog_title, .dialog.dialog_sendurl .dialog_title {font-size: 18px;text-align: center;padding:28px 15px 15px;color: #333;}
.dialog .dialog_body {padding:0 50px 35px;}

.dialog.dialog_login,
.dialog.dialog_sendurl {
  width: 500px;
  min-height: 300px;
  margin: -200px 0 0 -200px;
}
.dialog .login_type li {position: relative;float: left;font-size: 18px;line-height: 30px;color: #333;}
/*.dialog .login_type li.active {border-bottom: 2px solid #5f8ffd;top:2px;}*/
/*.dialog .login_type {border-bottom: 2px solid #bdbdbd;}*/
.dialog .fm {position: relative;margin:20px auto;}
.dialog .fm .txt {line-height: 28px;}
.dialog .fm .inp {padding:10px;width:378px;border:1px solid #e6e9ed;border-radius:3px;outline:0;font-size: 16px;color: rgb(152, 155, 171);}
.dialog .fm .inp:focus {border-color: #2f82ff;}
.dialog .fm .con {position: relative;}
.dialog .fm .con .sendcode {position: absolute;right:1px;top:1px;bottom:1px;display: block;line-height:44px;padding:0 20px;background: #eee;border-radius:3px;font-size: 16px;color: #4c5278;}
.dialog .fm .con .sendcode.disabled, .dialog .fm .con .sendcode.loading {cursor: no-drop;}
.dialog .info { display: none;font-size: 12px; color: #e63333;height: 25px; line-height: 26px; text-align: left; padding-left: 28px; margin-bottom: 5px; border: solid 1px #fdd3d3; background: #feefef url('/youmengcms/error.png') 8px center no-repeat; }
.dialog .submit {display: block;width:100%;height: 50px; line-height: 50px; color: #fff; text-align: center; font-size: 18px; cursor: pointer; background: #4c5278; margin-top: 50px; border-radius: 2px; border:none;outline:0;box-shadow: 0px 5px 5px 0px rgba(0, 48, 255, 0.13);border-radius:3px;}

.dialog .submit:active {background-color: rgb(79, 209, 217);box-shadow: 0px 5px 5px 0px rgba(0, 48, 255, 0.13);}

.dialog.dialog_sendurl .vcode_img {position: absolute;right:1px;top:1px;display: block;height:44px;border-top-right-radius:3px;border-bottom-right-radius:3px;}

.anim {-moz-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);position:absolute;top:50%;left:50%;z-index:-1}
.anim:before {position:relative;content:'';display:block;margin-top:100%;}
.anim:after {content:'';position:absolute;top:0;bottom:0;left:0;right:0;border-radius:50%;}


/* 新头部导航 */
.topHeader{height: 56px; background-color: #fff; position: sticky; z-index: 8; top: 0;}
.topHeader .topBox{display: flex; align-items: center; justify-content: space-between;}
.topHeader .topBox .logoBox{display: flex; align-items: center; height: 56px; font-size: 18px; font-weight: bold; color: #141933;}
.topHeader .topBox .logo{width: 22px; height: 22px; margin-right: 6px;}
.topHeader .topBox .logo img{display: block; width: 100%; height: 100%; object-fit: cover;}
.topHeader .loginBox{display: flex; align-items: center; color: #efefef;}
.topHeader .loginBox a{font-size: 16px; color: #141933; font-weight: bold;  display: inline-block; max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.topHeader .loginBox a s{width: 20px; height: 20px;display: inline-block; vertical-align: middle; margin-right: 8px; margin-bottom: 4px;}
.topHeader .loginBox a s img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.topHeader .linkBox li{float: left; line-height: 56px; font-size: 16px; margin: 0 33px;}
.topHeader .linkBox li a{color: #141933; font-weight: bold;}
.topHeader .linkBox li a:hover,.topHeader .linkBox li.on_chose a{color: #FC381E;}

.kefuPop::after{content: ''; display: block; width: 20px; position: absolute; right: -20px; top: 0; bottom: 0;}
.kefuPop{width: 420px; height: 500px; background-color: #fff; position: absolute; left: -438px; top: -120px; background: url(/youmengcms/pc/images/bg_kefu.png) no-repeat top center/100% auto; border-radius: 12px; display: none; animation: rightFadeIn .3s; }
.kefu:hover .kefuPop,.kefuPop.show{display: block;}
.kefuPop .pop_header{padding-bottom: 40px; padding-left: 161px; display: flex; flex-direction: column; justify-content: center; height: 140px;}
.kefuPop .pop_header::before{content: ''; width: 170px; height: 190px; background: url(/youmengcms/pc/images/kefu_people.png) no-repeat center /cover; position: absolute; left: -16px; top: -16px; }
.kefuPop .pop_header h4{font-size: 24px; color: #2E53E6; font-weight: bold;}
.kefuPop .pop_header p{color: #7A8199; font-size: 16px;}
.kefuPop .pop_con{height: 360px; background: #FFF; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1); border-radius: 40px 12px 12px 12px; margin-top: -40px; position: relative; z-index: 1; display: flex; align-items: center ; flex-direction: column; justify-content: center;}
.kefuPop .pop_con .qrCode{width: 216px; height: 216px; margin:0 auto; }
.kefuPop .pop_con .qrCode img{display: block; width: 100%; height: 100%; object-fit: cover;}
.kefuPop .pop_con p{color: #5C5E66; font-size: 14px; text-align: center; margin-top: 30px;}
.kf:hover .kefuPop {display: block;}

@-webkit-keyframes scaleOut {
    0% {
        -webkit-transform: scale(0.6);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1.00);
        opacity: 1.0;
    }
}

@keyframes scaleOut {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.00);
        opacity: 1.0;
    }
}
@-webkit-keyframes scaleIn {
    0% {
        -webkit-transform: scale(1.0);
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(0.6);
        opacity: 0;
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(1.0);
        opacity: 1.0;
    }

    100% {
        transform: scale(0.6);
        opacity: 0;
    }
}


@-webkit-keyframes anim-in {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@-moz-keyframes anim-in {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@-ms-keyframes anim-in {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes anim-in {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@-webkit-keyframes anim-out {
    0% {
        width: 0
    }
    50% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-moz-keyframes anim-out {
    0% {
        width: 0
    }
    50% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-ms-keyframes anim-out {
    0% {
        width: 0
    }
    50% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@keyframes anim-out {
    0% {
        width: 0
    }
    50% {
        width: 0
    }
    100% {
        width: 100%
    }
}
@-webkit-keyframes anim-out-pseudo {
    0% {
        background: rgba(0,0,0,0.25)
    }

    100% {
        background: transparent
    }
}

@-moz-keyframes anim-out-pseudo {
    0% {
        background: rgba(0,0,0,0.25)
    }

    100% {
        background: transparent
    }
}

@-ms-keyframes anim-out-pseudo {
    0% {
        background: rgba(0,0,0,0.25)
    }

    100% {
        background: transparent
    }
}

@keyframes anim-out-pseudo {
    0% {
        background: rgba(0,0,0,0.25)
    }

    100% {
        background: transparent
    }
}

@-webkit-keyframes anim-out-pseudo-two {
    0% {
        background: transparent
    }

    50% {
        background: rgba(255,255,255,.2)
    }

    100% {
        background: transparent
    }
}

@-moz-keyframes anim-out-pseudo-two {
    0% {
        background: transparent
    }

    50% {
        background: rgba(255,255,255,.2)
    }

    100% {
        background: transparent
    }
}

@-ms-keyframes anim-out-pseudo-two {
    0% {
        background: transparent
    }

    50% {
        background: rgba(255,255,255,.2)
    }

    100% {
        background: transparent
    }
}

@keyframes anim-out-pseudo-two {
    0% {
        background: transparent
    }


    50% {
        background: rgba(255,255,255,.2)
    }

    100% {
        background: transparent
    }
}



@-webkit-keyframes anim-out-pseudo-blk {
    0% {
        background: transparent
    }

    50% {
        background: rgba(0,0,0,.2)
    }

    100% {
        background: transparent
    }
}

@-moz-keyframes anim-out-pseudo-blk {
    0% {
        background: transparent
    }

    50% {
        background: rgba(0,0,0,.2)
    }

    100% {
        background: transparent
    }
}

@-ms-keyframes anim-out-pseudo-blk {
    0% {
        background: transparent
    }

    50% {
        background: rgba(0,0,0,.2)
    }

    100% {
        background: transparent
    }
}

@keyframes anim-out-pseudo-blk {
    0% {
        background: transparent
    }


    50% {
        background: rgba(0,0,0,.2)
    }

    100% {
        background: transparent
    }
}



/*banner动画*/·
@-webkit-keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  30% {
    -webkit-transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
@keyframes swap {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) translate(0px, 0px);
  }
}
@-webkit-keyframes swapleft {
  0% {
    opacity: 0;
    -webkit-transform: scale(.8, .8) rotate(360deg) translateY(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
@keyframes swapleft {
  0% {
    opacity: 0;
    transform: scale(.8, .8) translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) translate(0px, 0px);
  }
}
@-webkit-keyframes swapright {
  0% {
    opacity: 0;
    -webkit-transform: scale(.8, .8) rotate(360deg) translateY(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
@keyframes swapright {
  0% {
    opacity: 0;
    transform: scale(.8, .8) translate(100px, 0px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) translate(0px, 0px);
  }
}
@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(90px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}
@keyframes vanishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    -webkit-filter: blur(90px);
  }

  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}
@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(.9, .9);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes swashIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(.9, .9);
  }


  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(20px);
  }
}
@keyframes vanishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    -webkit-filter: blur(20px);
  }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

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

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-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: none;
        transform: none;
        opacity: 1;
    }
}

@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: none;
        transform: none;
        opacity: 1;
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}


@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}


/* 摆动 */
@-webkit-keyframes swing{
    0%{-webkit-transform:translate(0px,0px);}
    20%{-webkit-transform:translate(-2px,-3px);}
    40%{-webkit-transform:translate(-5px,0px);}
    60%{-webkit-transform:translate(0px,3px);}
    80%{-webkit-transform:translate(3px,5px);}
    100%{-webkit-transform:translate(1px,-1px);}
}

@-moz-keyframes swing{
    0%{-moz-transform:translateX(0px);-moz-transformtranslateY(0px);}
    20%{-moz-transform:translateX(-2px);-moz-transformtranslateY(-3px);}
    40%{-moz-transform:translateX(-5px);-moz-transformtranslateY(0px);}
    60%{-moz-transform:translateX(0px);-moz-transformtranslateY(3px);}
    80%{-moz-transform:translateX(3px);-moz-transformtranslateY(5px);}
    100%{-moz-transform:translateX(0px);-moz-transformtranslateY(0px);}
}

@keyframes swing{
    0%{transform:translate(0px,0px);}
    20%{transform:translate(-2px,-3px);}
    40%{transform:translate(-5px,0px);}
    60%{transform:translate(0px,3px);}
    80%{transform:translate(3px,5px);}
    100%{transform:translate(1px,-1px);}
}