@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",SimSun;
    font-weight: normal;
	font-size:14px;
	letter-spacing:1px;
}
*{ padding:0 ; margin:0 ; font-size:14px;}
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}



.f1 { position:absolute;left:0;top:220px; z-index:1}
.f2 { position:absolute;left:700px;top:-80px;z-index:3;}












.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;}
.mar-top{ margin-top:20px;}
.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;}
.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;}

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

/*TOP*/
.H-TOP01{ height: 35px; width: 100%; border-bottom:1px dotted #ccc; background:url(/img/t2.png)}
.H-TOP01-01{ width: 1200px; height: 35px; line-height: 35px; margin: 0 auto; text-align: left; font-size: 14px; color:#7c7c7c; }
.H_menu_bg{ width: 100%; height:50px;background:url(/img/t4.png); position:absolute;left:0;top:0 }

  /*menu样式*/
.navbox{height:50px;position:relative;z-index:9; margin:auto;filter:alpha(opacity=90);-moz-opacity:0.90;opacity:0.90;font-family:'微软雅黑';}
.nav{width:1160px;margin:0 auto;height:50px; list-style:none;}
.nav li{float:left;height:25px; margin-top:10px;padding-top:5px; padding-bottom:3px;position:relative; list-style:none; transition:border-radius 2s}
.nav li.last{background:none;}
.nav li a{text-decoration:none;}
.nav li a span{float:left;display:block;font-size:16px;color:#fff; font-weight:bold;cursor:pointer;width:125px;text-align:center; }
.nav li:hover {border-radius:100px !important; }
.tsd{ width:125px; background:url(/Img/t1.png);border-radius:100px !important;}
.mj_hover_menu{text-decoration:none; width:125px; background:url(/Img/t1.png);border-radius:100px !important;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:50px;left:-9px;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 0px #BEBEBE;}
.mj_menu_pro_bg{width:825px; height:235px; background:url(/Img/menu_pro_bg.png) no-repeat;}
.mj_menu_pro_main{width:765px; margin:auto; padding-top:12px;}
.mj_menu_pro_li{ float:left;}
.mj_menu_li_txt{line-height:22px; font-size:12px; color:#696969;}
.mj_menu_li_txt font{font-size:14px; color:#bb1721;}
.mj_menu_li_txt a{color:#696969; text-decoration:none;}
.mj_menu_li_txt a:hover{color:#696969; text-decoration:underline;}

.mj_menu_news_bg{width:480px; height:185px; background:url(/Img/menu_news_bg.png) no-repeat;}
.mj_menu_news_main{width:440px; margin:auto; padding-top:12px;}
.mj_menu_news_li{padding:0px 30px; margin-right:30px; height:150px; float:left; border-right:solid 1px #cccccc; }
.mj_menu_news_img{float:left; text-align:left; color:#bb1721; line-height:30px; font-size:14px;}
.mj_menu_news_li2{padding:0px 30px; height:150px; float:right; border-left:solid 1px #cccccc; }
.mj_menu_news_img2{float:left; margin-left:30px; text-align:left; color:#bb1721; line-height:30px; font-size:14px;}
.mj_menu_news_li3{padding:0px 25px; height:150px; float:right; border-left:solid 1px #cccccc; }
.mj_menu_news_img3{float:left; margin-left:10px; text-align:left; color:#bb1721; line-height:30px; font-size:14px;}
  /*end menu*/
/*END TOP*/ 

/*HOME MIDDLE*/
.H-TIT001{ width:100%; height: 146px;}
.H-TIT001 p{ display: block; height: 33px; line-height: 33px; font-size: 26px; color: #6c6c6c; text-align: center; text-transform: uppercase; }
.H-TIT001 h3{ display: block; height: 30px; line-height: 30px; font-size: 20px; color: #404040; text-align: center; }
.H-TIT001 span{ display: block; margin-top:15px; height: 49px; line-height: 45px; text-align: center; font-size: 16px; color: #404040; background-image: url(/Img/tit_bg.jpg); background-position: top center; background-repeat: no-repeat; }

.H-TIT002{ height: 45px; line-height: 45px; background-image: url(/Img/bg009.jpg); text-align: center; color: #ffffff; font-size: 20px; text-transform: uppercase; }

.H-PROC001{ margin:0px 20px;*text-align:center; padding-top:12px;}
.H-PROC001 ul{display:table;margin-left:auto;margin-right:auto; position:relative;}
.H-PROC001 ul li{float:left;*float:none;*display:inline;*zoom:1; background:#efefef; text-align:center; margin-left:3px; margin-right:3px;margin-bottom:6px;width:170px;height:50px;background-image: url(/Img/proclass_01.png); background-position: top left; background-repeat: no-repeat; line-height:50px; position:relative;border:1px dotted #ccc; /* position:relative; z-index:10;*/ 
transition:text-indent 0.5s}
.H-PROC001 ul li a{color:#999;}

.H-PROC001 ul li:hover {border:1px dotted #ea9413; text-indent:-20px;}
.H-PROC001 ul li:hover a{color:#ea9413; }





.H-PROC001-hover{ background-color:#ff2801 !important; border:#ff2801 1px solid !important; background-image: url(/Img/proclass_02.png) !important;}

.H-M001{ width: 100%; background-color:#ff2801; background-image:url(/Img/bg001.jpg); overflow: hidden; }
.H-M001-more{ width: 100%; height: 39px; line-height: 39px; background-image: url(/Img/bg010.jpg); }
.H-M001-more a{ display: block; margin: 0 auto; width: 276px; height: 39px; line-height: 39px; text-align: center; background-color: #ff2801; color: #fff; font-size: 15px;
-moz-border-radius: 10px;      /* Gecko browsers */   -webkit-border-radius: 10px;   /* Webkit browsers */    border-radius:10px;            /* W3C syntax */ 
 }
.H-M001-more:hover a{ background-color: #ffffff; color: #666666; }
.H-PHONE01{ color:#1b1b1b; width:100%; height:35px; line-height:38x; font-size:26px; color:#313131; text-align:center; letter-spacing:0px;padding-bottom:50px; padding-top:90px; background-color:#ffffff;
background-image:url(/Img/bg011.jpg); background-position:top center; background-repeat:no-repeat;
}
.H-M002{ width: 100%; height: 560px; background-image: url(/Img/bg002.jpg); overflow:visible !important; }
.H-M002-l{ float: left; width:600px; height:450px; padding-bottom:20px; margin-left:-100px;color:#FFF; border-radius:10px; margin-top:30px; }
.H-M002-l01{ float: left; margin:20px 50px 0 50px;}
.H-M002-l01 h4{ display: block;  height: 25px; line-height: 25px; text-align:left; font-size: 18px; color: #fff;}
.H-M002-l01 p{ display: block; height: 41px; line-height: 41px; text-align: LEFT; font-size: 40px; color: #fff; margin-bottom:10px; text-transform: uppercase; font-family: "宋体";}
.H-M002-l01 .anr{ width:100%; height:250px; margin-top:10px; position: relative; z-index: 1; text-align: left; line-height: 170%; font-size: 15px; color: #fff; }
.H-M002-l01 .anr .more01 a{ display: block; position: absolute; z-index: 10; bottom: -60px; left: -120px; width: 113px; height: 113px; line-height: 113px; text-align: center; color: #ffffff; font-size: 23px; background-image: url(/Img/more01.png); }
.H-M002-l01 .anr .more01 a:hover{ background-image: url(/Img/more02.png); }
.H-M002-r{ float: right; margin-top:220px; margin-right:240px; text-align:center;color:#FFF; font-size:15px; position:relative;}
.H-M002-r img { border:3px dotted #ffb100; box-shadow:0 0 10px #333; overflow:hidden;
 -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.H-M002-r:hover img{ -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; transition: all 0.6s ease-out;;}









.pro-1{ width:85%; height:auto; overflow:hidden; margin:0 auto;}
.pro-1 ul{ width:99%; margin:0 auto;}
.pro-1 ul li{ float:left; width:19%; border:3px solid #fff; height:0px;padding-bottom:20%; background-color: #ff2801; list-style:none; overflow:hidden; position:relative;}
.pro-1 ul li .tu{ width:100%; position:absolute; top:0px; left:0px; z-index:10;}
.pro-1 ul li .tu img{width:100%;height:20vw;}
.pro-1 ul li .up{ width:100%; height:100%; background-color:#F60; 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, 0, 0, 0.53);
	-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
	}
.pro-1 ul li:hover .up{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;
	}
.pro-1 ul li .up .tit01{
   position:absolute;  
   left:0px;  
   top:30%;  
   width:100%;
   }
.pro-1 ul li .up .tit01 a h4{ display:block; width:90%; margin:0 auto; line-height:50px; text-align:center; font-size:26px; color:#ffffff; border:#ffffff 1px solid;}
.pro-1 ul li .up .tit01 p{ display:block; width:90%; margin:0 auto; padding-top:15px; text-align:center; font-size:14px; color:#ffffff; letter-spacing:0px;}











.H-CASE01{ margin:0px; padding:0px; width:1200px; overflow:hidden;}
.H-CASE01 ul{ width:1300px;}
.H-CASE01 ul li{ float:left; width:380px; height:500px; margin-right:16px;}
.H-CASE01 ul li .tu{ width:380px; height:380px; border:#ff2801 2px solid; overflow:hidden; margin-bottom:20px;border:#ff2801 2px solid;
-moz-border-radius: 10px;       -webkit-border-radius: 10px;     border-radius:10px;        
}

.H-CASE01 ul li .tu .tu01 a{ width:380px; height:380px;  overflow:hidden;
 -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
.H-CASE01 ul li:hover .tu .tu01{ width:380px; height:380px;
 -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; transition: all 0.6s ease-out;
}
.H-CASE01 ul li a{display:block; width:170px; height:38px; line-height:38px; font-size:16px; text-align:center; color:#110e0e; margin:0 auto; border-top:#535353 1px solid; border-bottom:#535353 1px solid;
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
.H-CASE01 ul li:hover a{width:287px; border:0px; background-color:#ff2801; color:#fff;
-moz-border-radius: 20px;     
-webkit-border-radius: 20px;   
border-radius:20px;           
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}

.H-M003{ width: 100%; height: 1288px; background-image: url(/Img/bg005.jpg); }
.H-M003-L{ width: 600px; height: auto; }
.H-M003-L .l01{ float: left; width: 88px; height: 88px; line-height: 88px; text-align: center; font-size: 50px; color: #ffffff; border-radius: 50%;      -moz-border-radius: 50%;      -webkit-border-radius: 50%; background-color: #1b1b1b; }
.H-M003-L .r01{ float: right; width: 476px; height: auto; }
.H-M003-L .r01 h6{ display: block; height: 43px; line-height: 43px; text-align: left; margin-top:10px; font-size: 20px; color: #1b1b1b; letter-spacing: 0px; font-weight: bold; }
.H-M003-L .r01 p{ display: block; height: 43px; text-align: left; font-size: 18px; color: #fd8107; }
.H-M003-L .r01 span{ display: block; width: 100%; height:auto; font-size: 15px; color: #1b1b1b; line-height: 130%;}

.H-M004{ width: 100%; background-color: #eeeeee; padding:50px 0px; }
.H-NEWS01{ width: 1200px; height: auto; margin: 0 auto; background-image: url(/Img/news_bg01.jpg); padding-bottom: 30px; }
.H-NEWS01 ul{ margin: 0px; padding:0px; }


.H-M005{ width: 100%; padding-bottom:50px;position:relative;}
.H-M005-l{ position:absolute; width: 350px; height: auto; top:0; z-index:2; left:350px; }
.H-M005-l p{ display: block; margin-top:55px; height: 58px; line-height: 58px; text-align: left; color: #ffffff; font-size: 42px; }
.H-M005-l h4{ display: block; height: 109px; line-height: 109px; font-size: 62px; text-align: left; color: #ffffff;}
.H-M005-l span{ display: block; height: auto; padding:23px 0px; text-align: left; font-size: 16px; color: #ffffff; line-height: 170%;}

.jm_left,.jm_right {float:left;}
.jm_left {width:500px; margin-top:20px;}
.jm_left .jm_news a{color:#FFF;}
.jm_left .jm_news a:hover .jm_txt{bottom:0;}
.jm_left .jm_news:hover img { width:600px; height:430px;}

.jm_left .jm_news { position:relative; height:330px; overflow:hidden; width:100%;}
.jm_left .jm_news img { width:500px; height:330px; transition:width 0.5s,height 0.5s}
.jm_left .jm_txt { position:absolute;color:#FFF;left:0;bottom:-45px; transition:bottom 0.5s; padding:10px; background:url(/img/t1.png); width:100%;}
.jm_left .jm_txt h3 { font-size:18px; line-height:35px;color:#fff;}
.jm_left .jm_txt p{ text-indent:20px !important; padding-right:20px; display:block;}
.jm_left ul li a{color:#333; transition:color 0.5s; float:left;}
.jm_left ul li:hover a,.jm_left ul li:hover span{color:#F60;}
.jm_left ul li:hover { border-bottom:1px dotted #F60;}
.jm_left ul li {line-height:35px; border-bottom:1px dotted #333; transition:border 0.5s}
.jm_left ul li span {float:right; transition:color 0.5s;}
.jm_left ul {padding-top:20px;}


#demo_1 {overflow:hidden;height:350px; overflow:hidden; width:1200px; margin:0 auto;position:relative;}
#indemo_1 {float: left;width: 800%;}
#demo1_1 {float: left;}
#demo2_1 {float: left;}
#demo_1 li {float:left; width:340px; text-align:center; margin-right:10px; transition: box-shadow 0.5s}
#demo_1 li:hover {box-shadow:0 0 20px #000;}
#demo_1 .title { background:#8cc751;color:#fff; text-align:center; font-size:18px; font-weight:normal; line-height:35px;}
#demo_1 li:hover .title { background:#4a647d;}
#demo_1 img {width:340px; height:280px;}

#marquee4 { width:100%; height:400px; margin-top:20px; overflow:hidden;}
#marquee4 a{color:#333;}
#marquee4 a:hover { color:#f39801}
.jm_right ul { padding-top:20px;}
.jm_right {width:500px; margin-top:20px;margin-left:50px;}
.jm_right h2 {font-size:20px;color:#000;}
.jm_right h2 span {font-family:Arial;color:#999; font-size:20px; padding-left:10px;}
.jm_right li {position:relative; padding-top:15px; padding-left:50px; padding-bottom:30px;border-bottom:1px dotted #999; }
.jm_right li div span{ position:absolute;left:0;top:20px; background:#7db447;color:#FFF; padding:7px; font-size:18px;}
.jm_right li p span {position:absolute;left:0;top:60px; background:#333;color:#FFF; padding:7px;font-size:18px;}
.jm_right li p { display:block; margin-top:15px}
.jm_right li div {margin-top:10px;}

/*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-B-01 .left { float:left; margin-top:20px;}
.H-B-01 .right {float:right; width:100px; text-align:center; margin-right:20px; display: none;}
.H-B-01 .right img {width:100px; margin-top:30px;}
.H-B-01{ width: 100%;background:#4a647d; }
.H-B-01-m{ width: 1200px; height: 40px; background-image: url(/Img/b-01.png); -moz-border-radius: 10px;      /* Gecko browsers */   -webkit-border-radius: 10px;   /* Webkit browsers */    border-radius:10px;            /* W3C syntax */ }
.H-B-01-m01{ width:1050px; margin: 0 auto; height: auto; overflow: hidden; }
.H-B-01-m01 a{ display: block; float: left; height: 40px; line-height: 40px; width: 113px; text-align:center; font-size: 15px; color: #ffffff; }

.H-B-01-m01 a:visited{ color: #fff; }
.H-B-02{ width: 100%; border-bottom: #494847 1px solid; height: 36px; padding-top:38px; }

.H-B-03{ height: 65px; line-height: 65px; BORDER-TOP:1px solid #5b81a6; margin-top:20px; text-align: center; font-size: 14px; color: #fff; }
.H-B-03 a{ font-size: 14px; color: #fd8107; }
/*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;
}


/*首页渐出效果*/
.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 首页渐出效果*/