@charset "utf-8";
/* CSS Document */
html{color:#333;background:#fff}
body,div,p,h1,h2,h3,h4,h5,h6,img,ul,li,a,strong,span,p,dl,dt,dd,input,textarea{
    margin:0;
    padding:0;
    list-style:none;
    border:0;
    text-decoration:none;
    font-family:"microsoft yahei";
    font-weight: normal;
	font-size:14px;
	letter-spacing:1px;
	/*text-align: left;*/
}
*{ padding:0 ; margin:0 ; font-size:14px;/*text-align: left;*/}
table{border-collapse:collapse;border-spacing:0}
a{ text-decoration:none;}
fieldset,img{border:0}
ol,ul{list-style:none}
caption,th{text-align:left}

.w-100{width:100%; height:auto; overflow:hidden;}
.w-1100{width:1100px; margin:0 auto; overflow:hidden;}
.w-1200{width:1200px; margin:0 auto; overflow:hidden;}
.w-1200-1{width:1200px; margin:0 auto;}
.w-1236{width:1236px; margin:0 auto; overflow:hidden;}
.w-1280{width:1280px; margin:0 auto;}
.mar-top{ margin-top:20px;}
.line01{ width: 100%; border-top:#d8d8d8 1px solid; }
.fl{ float:left;}
.fr{ float:right;}
.clear{ clear:both;}
.MT-4{ margin-top:4px;}
.MT-6{ margin-top:6px;}
.MT-8{ margin-top:8px;}
.MT-10{ margin-top:10px;}
.MT-15{ margin-top:15px;}
.MT-20{ margin-top:20px;}
.MT-30{ margin-top:30px; padding-bottom:30px;}
.MT-35{ margin-top:35px;}
.MT-40{ margin-top:40px;}
.MT-50{ margin-top:50px;}
.MT-60{ margin-top:60px;}
.MT-65{ margin-top:65px;}
.MT-70{ margin-top:70px;}
.MT-80{ margin-top:80px;}
.MT-90{ margin-top:90px;}
.MT-100{ margin-top:100px;}
.MT-110{ margin-top:110px;}
.MT-120{ margin-top:120px;}
.MT-130{ margin-top:130px;}
.MT-140{ margin-top:140px;}
.MT-150{ margin-top:150px;}
.MT-160{ margin-top:160px;}
.MT-170{ margin-top:170px;}
.MT-180{ margin-top:180px;}
.MT-250{ margin-top:250px;}

.MB-10{ margin-bottom:10PX;}
.MB-20{ margin-bottom:20PX;}
.MB-30{ margin-bottom:30px;}
.MB-40{ margin-bottom:40px;}
.MB-50{ margin-bottom:50px;}
.MB-60{ margin-bottom:60px;}

.BG-TC{ background-position:top center; background-repeat:no-repeat;}
.BG-TL{ background-position:top left; background-repeat:no-repeat;}
.BG-TR{ background-position:top right; background-repeat:no-repeat;}
.f-s13{ font-size:13px;}
.f-s14{ font-size:14px;}
.f-s15{ font-size:15px;}
.f-s16{ font-size:16px;}
.f-s17{ font-size:17px;}
.f-s18{ font-size:18px;}
.f-s20{ font-size:20px;}
.f-s22{ font-size:22px;}
.f-s24{ font-size:24px;}
.f-s26{ font-size:26px;}
.t-align-r{ text-align:right;}
.t-align-l{ text-align:left;}
.t-align-c{ text-align:center;}

.t-color-w{ color: #ffffff; }
.f-s18{ font-size: 18px; }
.f-s14{ font-size: 14px; }

.liuyan{ margin:0 auto;}
.liuyan input{ border:1px solid #999;}
.liuyan textarea{ border:1px solid #999;}

/*TOP*/
.H-menu{ width: 100%; height: 65px; background-color:#ce0000; }
.H-search01{ width: 100%; height: 48px; line-height: 48px; margin-top:27px; font-size: 17px; color: #969696; text-transform: uppercase; }
.H-search02{ width: 315px; margin: 0 auto; }
.H-input01{ float: left; width: 266px; height: 32px; border: #ebebeb 1px solid; text-indent: 15px; font-size: 14px; color: #666; }
.H-submit01{ float: left; width: 47px; height: 34px; background-image: url(../images/search-01.jpg);}
/*END TOP*/ 

/*HOME MIDDLE*/
.H-class01{ width: 100%; border-top:#efefef 1px solid; border-bottom: #efefef 1px solid;}
.H-c01-1{ width: 1200px; margin: 0 auto; height: auto; overflow: hidden; }
.H-c01-1 ul{ width: 1300px; }
.H-c01-1 ul li{ float: left; width: 240px;border: #efefef 1px solid; }
.H-c01-1 ul li a{ display: block; width: 100%; height: 47px; line-height: 47px; text-align: center; font-size: 16px; color: #2b2b2b; letter-spacing: 0px;  }
.H-c01-1 ul li:hover a{ background-color: #e32235; color: #fff; }

.H-pro001{ width: 1200px; margin: 0 auto; height: auto; overflow: hidden; }
.H-pro001 ul{ width: 1230px; padding:10px 0px; }
.H-pro001 ul li{ float: left; width: 292px; height: 402px; margin-right: 10px; }
.H-pro001 ul li .tu{ width: 290px; height: 280px; overflow: hidden; position: relative; border: #c9c9c9 1px solid; }
.H-pro001 ul li .tu .tu01{ width: 290px; height: 280px; position:absolute; top:0px; left:0px; z-index:10;}
.H-pro001 ul li .tu .uptu{ width: 290px; height: 280px; position:absolute; top:0px; left:0px; z-index:30;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  
  background-color: rgba(0, 71, 157, 0.53);
  -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}

.H-pro001 ul li:hover .tu .uptu{ top:0px; left:0px;
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
  -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
.H-pro001 ul li .tu .uptu .tit001{ width: 238px; height: 165px; margin: 0 auto; padding-top: 20px; }
.H-pro001 ul li .tu .uptu .tit001 a h3{ display: block; height: 50px; line-height: 50px; text-align: center; font-size: 20px; color: #fff; border-bottom: #b7c9e0 1px dashed; }
.H-pro001 ul li .tu .uptu .tit001 p{ display: block; height: 50px; line-height: 50px; font-size: 14px; color: #bac9dd; text-align: center; }
.H-pro001 ul li .tu .uptu .tit001 .more a{ display: block; margin: 0 auto; width: 154px; height: 31px; line-height: 31px; text-align: center;background-color: rgba(0, 160, 233, 0.53); font-size: 14px; color: #fff;-moz-border-radius: 10px;    -webkit-border-radius: 10px;  border-radius:10px;   }
.H-pro001 ul li .tit-01{ width: 289px; height: 111px; border: #c9c9c9 1px solid; }
.H-pro001 ul li .tit-01 a h3{ display: block; height: 45px; line-height: 45px; text-align: center; margin-top:7px; font-size: 17px; color: #3b3b3b; }
.H-pro001 ul li .tit-01 .line01{ width: 55px;  height: 15px; border-top:#bfbfbf 1px solid; margin: 0 auto; }
.H-pro001 ul li .tit-01 .phone01{ height: 22px; line-height: 22px; text-align: center; font-size: 14px; color: #a19e9e; text-transform: uppercase; }

.H-M02{ width: 100%; height: 688px; background-image: url(../images/bg01.jpg); background-position: top center; background-repeat: no-repeat; }
.HM2-1 a{ display: block; float: left; margin-right: 10px; width: 139px; height: 43px; line-height: 43px; text-align: center; font-size: 17px; color: #000; background-color: #ffffff; }
.HM2-1 a:hover{ color: #fff; background-color: #e32235; }
.HM2-1-hover{color: #fff !important; background-color: #e32235 !important;}
.HM2-l{ float: left; width: 858px; height: auto; }
.HM2-l h3{ display: block;margin-top:60px; height: 38px; line-height: 38px; font-size: 26px; color: #fff; }
.HM2-l .e-zi{ height: 22px; line-height: 22px; font-size: 13px; color: #cacaca; text-transform: uppercase; }
.HM2-l p{ display: block; margin-top: 20px; width: 670px; height: 130px; line-height: 170%; font-size: 15px; color: #dedede; letter-spacing: 0px; overflow: hidden; }
.HM2-l .more01 a{ display: block; float: left; margin-top:10px; width: 142px; height: 31px; background-color: #fb2f2f; line-height: 31px; text-align: center; color: #fff; font-size: 15px; }
.HM2-l-1{ width: 858px; height: auto; overflow: hidden; }
.HM2-l-1 ul{ width: 900px; }
.HM2-l-1 ul li{ float: left; width: 202px; height: 255px; margin-right: 17px; position: relative; overflow: hidden; }
.HM2-l-1 ul li a{ display: block; width: 100%; height: 39px; line-height: 39px; font-size: 18px; color: #fff; text-align: center;  background-color: rgba(0, 0, 0, 0.6); position: absolute; z-index: 10; bottom: 48px; left:0px;}
.HM2-l-1 ul li:hover a{
animation:mymove01 1s infinite;
-moz-animation:mymove01 1s infinite; /* Firefox */
-webkit-animation:mymove01 1s infinite; /* Safari and Chrome */
-o-animation:mymove01 1s infinite; /* Opera */
animation-iteration-count: 1;
}

.HM2-r{ float: right; width: 328px; height: 406px; background-color: #f5f5f5; margin-top:135px; position: relative; }
.HM2-r-1{ position: absolute;top:-87px; left:-108px; width: 130px; height: 57px; }
.HM2-r-1 h4{ height: 37px; line-height: 37px; color: #000; font-size: 20px; }
.HM2-r-1 p{ height: 19px; line-height: 19px; color: #c9c9c9; font-size: 17px; }
.HM2-r-2 a{ display: block; width: 65px; height: 65px; line-height: 60px; letter-spacing: 0px; text-align: center; background-color: #e32235; color: #fff; font-size: 17px; position: absolute; top:-55px; left:106px;  }
.HM2-r-nr{ width: 265px; margin: 0 auto; padding-top: 60px; height: auto; }
.HM2-r-nr .tit01 h5{ display: block; height: 36px; width: 100%; font-size: 20px; color: #000; }
.HM2-r-nr .tit01 p{ display: block; height: 50px; line-height: 100%; font-size:15px; color: #323232; border-bottom: #ababab 1px solid; text-transform: uppercase; letter-spacing: 0px; }
.HM2-r-nr span{ display: block; margin-top: 20px; line-height: 170%; font-size: 15px; color: #000; }

.H-M03{ width: 100%; height: 448px; background: url(../images/bg02.jpg) no-repeat top center #eee; padding:40px 0 20px; }
.H-M03-R{ float: right; width: 772px; height: auto; margin-top:10px; }
.H-M03-R1{ height: 77px; }
.H-M03-R1 .num01{ float: left; height: 77px; line-height: 77px; width: 59px; font-size: 74px; color: #fb2f2f; font-family: "Impact"; }
.H-M03-R1 .r01{ float: left; width: 580px; height: 77px; overflow: hidden;}
.H-M03-R1 .r01 h4{ display: block; height: 35px; line-height: 38px; color: #fb2f2f; font-size: 20px; margin-top: 8px; }
.H-M03-R1 .r01 p{ display: block; height: 22px; line-height: 22px; color: #7f7f7f; font-size: 16px; letter-spacing: 0px; }

.H-M04-T{ width: 100%; height: 160px; line-height: 170px; text-align: center; background-image: url(../images/bg03.jpg); background-position: top center; background-repeat:no-repeat; font-size: 42px; color: #fff;  }




/*首页图片效果*/
.img-bg{position:relative; height:300px; background-color:#181818; /*background-image: url(../images/bg04.jpg); background-position: top center; background-repeat: no-repeat;*/}
.img-bg a{ color:#fff; display:block; text-align:center;}
/*#imageFlow {
    position: absolute;
    width: 100%;
    height: 300px;;
    left: 0%;
    top: 0px;
    background: #000;
  }*/
 /* #imageFlow .diapo {
    position: absolute;
    left: -1000px;
    cursor: pointer;
    -ms-interpolation-mode: nearest-neighbor;
  }
  #imageFlow .link {
    border: dotted #fff 1px;
    margin-left: -1px;
    margin-bottom: -1px;
  }
  #imageFlow .bank {
    visibility: hidden;
  }
  #imageFlow .top {
    position: absolute;
    width: 100%;
    height: 40%;
    background: #181818;
  }
  #imageFlow .text {
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: 16%;
    text-align: center;
    color: #FFF;
    font-family: verdana, arial, Helvetica, sans-serif;
    z-index: 1000;
  }
  #imageFlow .title {
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
  }
  #imageFlow .legend {
    font-size: 0.8em;
    text-align: center;
  }
  #imageFlow .scrollbar {
    position: absolute;
    left: 10%;
    bottom: 10%;
    width: 80%;
    height: 16px;
    z-index: 1000;
  }
  #imageFlow .track {
    position: absolute;
    left: 1%;
    width: 98%;
    height: 16px;
    filter: alpha(opacity=30);
    opacity: 0.3;
  }
  #imageFlow .arrow-left {
    position: absolute;
  }
  #imageFlow .arrow-right {
    position: absolute;
    right: 0px;
  }
  #imageFlow .bar {
    position: absolute;
    height: 16px;
    left: 25px;
  }*/
/*end首页图片效果*/

.H-tit002{ height: 43px; line-height: 43px; text-align: center; color: #585858; font-size: 25px; text-transform: uppercase; }
.H-news001{ width: 1200px; height: auto; overflow: hidden; }
.H-news001 ul{width: 1300px;}
.H-news001 ul li{ float: left; width: 374px; height: 430px; margin-right: 39px; }
.H-news001 ul li .tu{width: 374px; height: 209px; overflow: hidden; margin-top:15px;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.H-news001 ul li:hover .tu{margin-top:0px;-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.H-news001 ul li .n1-nr{width: 374px; }
.H-news001 ul li .n1-nr a h3{ display: block; height: 60px; line-height: 60px; text-align: center; color:#7f7f7f; font-size: 16px; font-family:Microsoft YaHei; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.H-news001 ul li:hover .n1-nr a h3{ background-color:#fb2f2f; color: #fff;-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.H-news001 ul li .n1-nr .line{ width: 40px; height: 18px; border-top: #fb2f2f 3px solid; margin: 0 auto;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.H-news001 ul li:hover .n1-nr .line{ width: 374px;-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.H-news001 ul li .n1-nr p{ display: block; margin: 0 auto; width: 355px; height: 65px; line-height: 150%;color: #8d8d8d; font-size: 14px; text-align: center; overflow: hidden; }
.H-news001-more a{ display: block; margin: 0 auto; width: 209px; height: 48px; line-height: 48px; text-align: center; color: #fff; background-color: #fb2f2f; font-size: 16px;-moz-border-radius: 10px; -webkit-border-radius: 10px;  border-radius:10px;  -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;  }
.H-news001-more a:hover{ width: 300px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
/*END HOME MIDDLE*/

/*内页*/
.NY-title001{ width:100%; height: 450px; background-position: top center; }
/*end内页*/


/*BOTTOM*/
.B-LINK{ height: 36px; width: 1200px; margin: 0 auto; }
.B-LINK h5{ display: block; float: left; height: 36px; line-height: 36px; font-size: 14px; color: #959494; margin-right: 15px; }
.B-LINK a{ display: block; float: left; height: 36px; line-height: 36px; font-size: 14px; color: #959494; margin-right: 10px; }

.H-B1{ width: 100%; height: auto; padding: 40px 0px; background-color: #333333; }
.H-B1-l1{ float: left; width: 492px; height: auto; overflow: hidden; }
.H-B1-l1 h4{ display: block; height: 38px; font-size: 18px; color: #bfbfbf; }
.H-B1-l1 .line001{ float: left; width: 30px; height: 20px; border-top: #adadad 3px solid; }
.H-B1-l1 a{ display: block; float: left; width: 225px; height: 28px; line-height: 28px; font-size: 15px; color: #919191; margin-right: 15px; letter-spacing: 0px;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.H-B1-l1 a:hover{ color: #fff; background-color: #c92627; text-indent: 10px;-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

.H-B1-l2{ float: left; width: 149px; height: auto; overflow: hidden; }
.H-B1-l2 h4{ display: block; height: 38px; font-size: 18px; color: #bfbfbf; }
.H-B1-l2 .line001{ float: left; width: 30px; height: 20px; border-top: #adadad 3px solid; }
.H-B1-l2 a{ display: block; margin-right: 20px; height: 23px; line-height: 23px; font-size: 15px;  color: #919191; letter-spacing: 0px;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.H-B1-l2 a:hover{ color: #fff; background-color: #c92627; text-indent: 10px;-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

.H-B1-l3{ float: left; width: 395px; height: auto; overflow: hidden; }
.H-B1-l3 h4{ display: block; height: 38px; font-size: 18px; color: #bfbfbf; }
.H-B1-l3 .line001{ float: left; width: 30px; height: 20px; border-top: #adadad 3px solid; }
.H-B1-l3 p{ display: block; height: 42px; line-height: 42px; font-size: 15px;  color: #919191; letter-spacing: 0px; padding-left:35px;background-image:url(../images/b-tu01.jpg); background-repeat: no-repeat;  }
.H-B1-l3 p:hover{ color: #fff;}
.B1-rbg1{background-position:0px 0px;}
.B1-rbg2{background-position:0px -41px;}
.B1-rbg3{background-position:0px -80px;}
.B1-rbg4{background-position:0px -115px;}
.H-B1-r{ float: right; width: 145px; }
.H-B1-r p{ display: block; height: 38px; line-height: 38px; font-size: 15px; color: #bfbfbf; text-align: right;}
.H-B2{ background-color: #1a1a1a; width: 100%; color: #bbbbbb; height: 50px; line-height: 50px; text-align: center; }
.H-B2 a{color: #bbbbbb; }
/*END BOTTOM*/






/*首页渐出效果*/

.js .animate-box {
  opacity: 0;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/*END 首页渐出效果*/

/*效果*/
@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

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

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

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

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

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

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

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

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

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

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

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

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

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

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

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

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

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

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}


@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

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

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

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

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}


/*首页渐出效果*/
.js .animate-box {
  opacity: 0;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    /*-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/*END 首页渐出效果*/

/*my动画*/
@keyframes mymove01
{
30%  {top:130px; left:0px; height: 100px; line-height: 100px;background-color: rgba(227, 34, 53, 0.6);}
70%  {top:50px; left:0px; height: 50px; line-height: 50px; background-color: rgba(9,93,178,0.6);}
100% {height: 38px;}
}

@-moz-keyframes mymove01 /* Firefox */
{
30%  {top:130px; left:0px; height: 100px; line-height: 100px;background-color: rgba(227, 34, 53, 0.6);}
70%  {top:50px; left:0px; height: 50px; line-height: 50px; background-color: rgba(9,93,178,0.6);}
100% {height: 38px;}

@-webkit-keyframes mymove01 /* Safari and Chrome */
{
30%  {top:130px; left:0px; height: 100px; line-height: 100px;background-color: rgba(227, 34, 53, 0.6);}
70%  {top:50px; left:0px; height: 50px; line-height: 50px; background-color: rgba(9,93,178,0.6);}
100% {height: 38px;}
}

@-o-keyframes mymove01 /* Opera */
{
30%  {top:130px; left:0px; height: 100px; line-height: 100px;background-color: rgba(227, 34, 53, 0.6);}
70%  {top:50px; left:0px; height: 50px; line-height: 50px; background-color: rgba(9,93,178,0.6);}
100% {height: 38px;}
}
/*end my动画*/