@charset "utf-8";
*{ margin:0; padding:0;}
body {font-family:"微软雅黑","times new roman";  margin:0 auto; padding:0px; font-size:12px; height:100%; line-height:22px; width:100%;}
ul,ul li,ol li,tr td,dl,dd{ list-style-type:none; margin:0; padding:0; }
p{ margin:0; padding:0}
.clear{ clear:both; height:0px; line-height:0px; font-size:0px;}
a{ text-decoration:none; cursor:pointer; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
img{ vertical-align:middle;}
.imgs{ vertical-align:top;}
.fl{ float:left;}
.fr{ float:right;}  
img{border:none;}
html{ overflow-x:hidden;} 
h1,h2,h3,h4,h5,h6,strong,span,b{ font-weight: normal;}
div:hover,li:hover,tr:hover,a:hover{ -webkit-transition: none; -moz-transition: none; transition: color 0.3s linear,
 background-color 0.3s linear, background-image 0.3s linear; -moz-transition: color 0.3s linear, background-color 0.3s linear,
 background-image 0.3s linear; -webkit-transition: color 0.3s linear, background-color 0.3s linear, 
 background-image 0.3s linear; -o-transition: color 0.3s linear,  background-color 0.3s linear,  background-image 0.3s linear;}
.text,textarea,select{ outline:none; font-family:微软雅黑; color:#666; font-size:12px; width:100%;}
.ul_lf li,.ul_js li{ position:relative;}
::-webkit-scrollbar{ width:8px;}
::-webkit-scrollbar-thumb{ background:#ccc;}
::-webkit-scrollbar-track{ background:#fff;}
.clearfix{*zoom:1;} 
.clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}
.box{ width: 1200px;   margin: 0 auto; -webkit-transition: all .3s;   -moz-transition: all .3s;    transition: all .3s; position: relative;}
    
[animation-name]{
	visibility: hidden;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@font-face{
	font-family:"times new roman";
	src: url('../fonts/times_1.ttf')/*,
	     url('../fonts/FETTE-ENGSCHRIFT.eot'),
		 url('../fonts/FETTE-ENGSCHRIFT.svg'),
		 url('../fonts/FETTE-ENGSCHRIFT.woff');*/
}
/*index样式*/
.top_bg{ background: #FFFFFF; *background: #FFFFFF; _background:#fff; background: rgba(255,255,255,0.8); filter: alpha(opacity=80); width: 100%;  height: 82px; overflow: hidden;
position: fixed; top: 0; left: 0; -webkit-transition: all .3s;   -moz-transition: all .3s;    transition: all .3s; z-index: 999;}
.top_bg .logo{ margin:17px 0;}
.pc_nav { margin-top:17px;  }
.pc_nav li{ float: left; position: relative;  width: 112px;  height: 46px; line-height: 46px; overflow: hidden; }
.pc_nav li a{ display: block; height: 46px; line-height: 46px; overflow: hidden; }
.pc_nav li span{ font-size: 14px;  color: #666666; position: absolute; display: block; text-align: center; width: 100%; height: 46px; line-height: 46px;}
.pc_nav li .span1{  top: 0px; left: 0px;  -webkit-transition: all .3s;   -moz-transition: all .3s;   transition: all .3s; }
.pc_nav li .span2{ top: 46px; left: 0px;  -webkit-transition: all .3s;   -moz-transition: all .3s;   transition: all .3s;  }
.pc_nav li:hover .span1{ top: -46px;}
.pc_nav li:hover .span2{ top: 0px; color:  #e60012;}

.bannerbox{ width: 100%; overflow: hidden; height: 830px; position: relative; }
.bannerbox .hd{ position: absolute; bottom: 15px; left: 40%; z-index: 0;  }
.bannerbox .hd li{ display: inline-block; width: 150px; height: 1px; background: #fff; position: relative; margin-left:10px; opacity: 0.6; }
.bannerbox .hd li.on{ background: #e60012; opacity: 1;}
.bannerbox .bd{ height: 830px; overflow: hidden;}
.bannerbox .bd li img{ width: 100%; height: 830px; overflow: hidden; display: block;  }
.bannerbox .bd li { width: 100%; height: 830px; overflow: hidden; display: block; cursor: pointer; }

.fuwu{ 	height: 167px;	background-color: #ffffff;	box-shadow: 1px 0px 15px 0px rgba(218, 218, 218, 0.32); margin-top: -83px;}
.fuwu ul li{ float: left; width: 24.9%; border-right: 1px solid #e9e9e9; margin-top: 25px; }
.fuwu ul li.last{ border-right: none;}
.fuwu li em{ display: block; height: 86px; width: 116px; margin:auto; }
.fuwu li em img{ display: inline-block; text-align: center; width: 116px; height: 86px; transition: all 0.6s; -moz-transition:all 0.6s;
-webkit-transition:all 0.6s;}
.fuwu li h3{ font-size: 16px; color: #333; text-align: center; padding-top: 15px;}
.fuwu li:hover  em img{  animation-name:tada;  animation-delay: 0.2s; animation-duration: 1s;
 animation-fill-mode: both; animation-iteration-count:1;  }
 
.tit{ margin-top: 50px; border-bottom: 1px solid #eeeeee; padding-bottom: 35px; cursor: pointer;}
.tit h1{color: #555555;font-size: 22px; position: relative;}
.tit h1::after{ display: block; content: ''; position: absolute; left: -50px; width: 0; height: 2px; background:#333;
top: 10px; transition: all 0.6s; -webkit-transition:all 0.6s; -moz-transition:all 0.6s; }
.tit:hover h1::after{ width: 30px;}
.tit h2{ font-family: times new roman;  font-size: 15px; color: #999999; padding-top: 15px;}
.tit a{ display: inline-block; color: #999;	font-size: 14px; margin:0 15px}
.tit a.active{ color: #333; margin-right: 35px; }
.tit a:hover{color: #E60012; }
.tit a.more{ background: url(../images/more.png) no-repeat right center; padding-right: 15px; font-family: times new roman; font-size: 12px;
margin-right:0px; transition: all 0.6s; -webkit-transition:all 0.6s; -moz-transition:all 0.6s; }
.tit a.more:hover{ transform: translateX(5px);}
.tit div.fr{ margin-top: 18px;}

.product_list{ margin-top: 30px;}
.product_list li{ float: left; width: 33.33%; text-align: center; margin-bottom: 30px;}
.product_list em{ display: block; width: 300px; height: 200px; overflow: hidden; text-align: center; margin:auto}
.product_list em img{ display: inline-block; width: 300px; height: 200px; overflow: hidden;  transition: all 0.6s; -moz-transition:all 0.6s;
-webkit-transition:all 0.6s;}
.product_list li a{ display: block;  transition: all 0.6s; -moz-transition:all 0.6s;-webkit-transition:all 0.6s; }
.product_list h3{ font-size: 16px; color: #333; line-height: 43px; transition: all 0.6s; -moz-transition:all 0.6s;
-webkit-transition:all 0.6s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.product_list h4{ font-size: 14px; color: #666;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.product_list li:hover a{ animation-name:bounce;  animation-delay: 0.2s; animation-duration: 1s;
 animation-fill-mode: both; animation-iteration-count:1; opacity: 0.8;}
.product_list li:hover h3{ color: #E60012;}

.about{ background: url(../images/about_bg.jpg) no-repeat top center; width: 100%; overflow: hidden; height: 443px; position: relative;}
.about_bg{ display: block; width: 570px;height: 260px; position: relative; background: #E60012; margin:100px auto; }
.about .cir{ display: block; position: absolute; top: 36%; left: 50%; width: 10px; height: 10px; border:2px solid #fff; border-radius: 100%;
 margin-left: -5px; margin-top: -5px;}
.about_bg h1{ font-size: 24px; line-height: 90px; color: #fff; text-align: center; font-weight: bold;
transition: all 0.6s; -moz-transition:all 0.6s;-webkit-transition:all 0.6s;}
.about_bg p{ color: #ffe9e8; line-height: 30px; font-size: 14px; padding:30px; transition: all 0.6s; -moz-transition:all 0.6s;-webkit-transition:all 0.6s;
}
.about h3.line{ background: #fff; opacity: 0.3; width: 100%; position: absolute; left: 0; right: 0; height: 1px; z-index: 9999; top: 44%; }
.about_bg i{ display: block;  height: 0; width: 1px; background: #fff; transition: all 0.6s; -webkit-transition:all 0.6s;
-moz-transition:all 0.6s; position: absolute; top: 39.5%;left: 50.2%; opacity: 0.6;}
.about_bg:hover i{ height: 20px;}
.about_bg:hover h1{ transform: translateY(-10px);}
.about_bg:hover p{ transform: translateY(12px);}

.news_list li{ float: left; width: 350px; }
.news_list li.l2{ margin:0 50px}
.news_list h1{ color: #333333; line-height: 27px; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
padding:15px 0 5px 0;}
.news_list p{ color: #999; line-height: 30px; font-size: 14px; height: 90px; padding-bottom: 10px; }
.news_list a.fl{ color: #959595; font-size: 14px; font-family: times new roman; transition: all 0.6s; 
-moz-transition:all 0.6s;-webkit-transition:all 0.6s;}
.news_list .time span{ font-size: 22px; color: #959595; line-height: 19px; display: inline-block; font-family: "times new roman"; font-weight: normal;}
.news_list .time b{ font-size: 14px; color: #959595; line-height: 19px; display: inline-block; font-family: "times new roman";  font-weight: normal;
margin-left: 3px;}
.news_list em{ display: block; ; overflow: hidden; hyphenate-limit-lines: 127px; width: 351px;}
.news_list .item{ margin-bottom:50px; padding-top: 25px;  border-top: 1px solid #EEEEEE; }
.news_list em{ display: block; ; overflow: hidden; hyphenate-limit-lines: 127px; width: 351px;}
.news_list em img{ display: block; width: 351px;	height: 127px; overflow: hidden; transition: all 0.6s; 
-moz-transition:all 0.6s;-webkit-transition:all 0.6s;}
.news_list a.fl strong{ transition: all 0.6s; -moz-transition:all 0.6s;-webkit-transition:all 0.6s; display: inline-block;  opacity: 0; visibility: hidden;}
.news_list li:hover strong{ color: #E60012; transform: translateX(5px); opacity: 1; visibility: visible; }
.news_list li:hover a.fl,.news_list li:hover h1{ color: #E60012;}
.news_list li:hover img{ transform: scale(1.1)}
.news_list li:hover .item{ border-color: #000;}
.news_list .l2 .item3,.news_list li .item4{ border-top: none;}

.num_youshi{ background: url(../images/num_bg.jpg) no-repeat top center; height: 155px; width: 100%; overflow: hidden; padding:70px 0 0 0;}
.num_youshi .number{ text-align: center;}
.num_youshi li{ border-right: 1px solid #403e3e; padding-top: 15px;}
.num_youshi li.last{ border-right: none;}

.num_youshi .number span{ font-size: 50px; color: #FFFFFF; font-family: Arial; font-weight: bold; display: inline-block; vertical-align: bottom;}
.num_youshi .number span.unit{ color: #999; font-size: 14px; font-weight: normal;  vertical-align: top; margin-top: -20px; display: inline-block;}
.num_youshi li{ float: left; width: 24.9%; }
.num_youshi li p.title{ font-size: 14px; color: #a9a9a9; text-align: center; padding:0 0 15px 0;}
.num_youshi li p.number{ height: 50px;}

.staff .tabcont h1 strong{font-size: 22px; color: #333; font-weight: normal;}
.staff .tabcont h1 span{font-size: 14px; color: #666; font-weight: normal;}
.staff .tabcont .item{ background: #f6f6f6; height: 250px; margin-top: 150px; display: none;}
.staff .item_txt{ float: left; margin-top: -50px; width: 700px; padding-left: 40px;}
.staff .dingyi{ overflow: hidden; height: 154px;  width: 700px;  margin-top:70px; position: relative; }
.scroll_block{ height: 154px; width: 2px; background: #BFC7D3; position: relative; right: 0; top: 0; z-index: 999;}
.scroll_bar{ width: 5px; height: 80px; background: #454545; position: relative; top: 0;}
.staff .item_txt p{ font-size: 14px; line-height: 36px;  color: #666;  padding-right: 10px; width: 680px; position: absolute; top: 0; left: 0;
transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition:all 0.6s;}
.staff .item_img{ float: left; display: block; width: 300px; height: 300px; border-radius: 100%; margin-top: -100px; margin-left: 20px;
transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition:all 0.6s;}
.staff .item_img img{display: block; width: 300px; height: 300px; border-radius: 100%; overflow: hidden; }
.staff .text_wrap{ position: relative; width: 680px; height: 154px; overflow: hidden;}
.staff .tabcont li.item{ display: none;}
.staff .tabcont li.item_block{ display: block;}

.staff .tabnav{  width: 1040px; margin: auto; margin-top: 50px; }
.staff .tabnav li{ float: left; width: 230px; height: 166px;  position: relative; cursor: pointer;  z-index: 9999;}
.staff .tabnav li.on div, .staff .tabnav li div{ margin:auto;  }
.staff .tabnav li em{ margin:auto; display: block; width: 100px; height: 100px; transition: all 0.6s; -webkit-transition:all 0.6s;
-moz-transition:all 0.6s}
.staff .tabnav li.on em{ display: block; width: 100px; height: 100px; overflow: hidden;  margin:auto;border:4px solid #E60012;}
.staff .tabnav em img{ display: block; width: 100px; height: 100px; overflow: hidden; border-radius: 100%;}
.staff .tabnav h3{ padding:10px 0 0 0 ; text-align: center;}
.staff .tabnav h3 span{ font-size: 14px; color: #333; display: inline-block;}
.staff .tabnav h3 b { font-size: 12px; color: #999; display: inline-block; margin-left: 5px; }
.staff .tabnav li .sanjiao{ display: block; position: absolute; left: 50%; margin-left: -25px; top: -100px; transition: all 0.6s;
-webkit-transition: all 0.6s; -moz-transition:all 0.6s; visibility: hidden; opacity: 0; }
.staff .tabnav li.on .sanjiao{  top: -50px; visibility: visible; opacity: 1; }



.footer{ background: #f2f2f2; padding:50px 0 45px 0;  margin-top: 40px;}
.link{ padding-bottom: 30px; border-bottom: 1px solid #e8e4e4; }
.link h3{ float: left; font-size: 18px; color: #333; }
.link h3 i{ display: inline-block; font-size: 14px; color: #666; margin-left: 15px; }
.link p{ float: left; margin-left: 25px; }
.link p a{ display: inline-block; margin:0 22px; color: #666; font-size: 14px; }
.link p a:hover{ color: #e60012; }
.infor{ margin-top: 40px; }
.infor h2 i{ font-size: 16px; color: #222; display: inline-block; margin-right: 22px; font-style: normal;  }
.infor p{ margin-top: 35px; font-size: 14px; color: #666; }
.infor p span{ display: inline-block; font-size: 14px; color: #666; width: 230px; text-align: left; margin-bottom: 15px; }
.code2 h3{ font-size: 16px; color: #222; margin-top:50px; padding-right: 5px; text-align: right;}
.code2 h1{ font-size: 36px; color: #e60012; padding-top: 15px; font-family: "arial"; padding-right: 5px;  }
.youlian h3{ float: left;  color: #222; font-size: 16px;}
.youlian { padding:50px 0 0px 0; }
.youlian ul{ float: left; padding-left: 10px; margin-top: 2px; }
.youlian ul li{ float: left; color: #aaa; margin:0 5px; }
.youlian ul li a{ display: inline-block; color: #aaa; font-size: 14px; vertical-align: middle; margin:0 10px; }
.youlian ul li a:hover{ color: #e60012; }
.copyright{ background: #d0cfcf; height: 64px; line-height: 64px;}
.copyright p{ font-size: 14px; color: #666; text-align: center; font-size: 14px ; }

.neibanner { height: 450px; overflow: hidden; width: 100%;}
.bread_crumb{ padding:30px 0;}
.target{ font-size: 14px; color: #999}
.category a{ font-size: 14px; color: #999; display: inline-block; padding:10px 20px}
.category a:hover,.category a.active{  color: #E60012;;}
.target a:hover{ color: #E60012;}
.target a{ font-size: 14px; color: #999; display: inline-block; padding:10px 5px}
.target i{ display: inline-block; margin:0 5px}

.case_page li{ width: 380px; position: relative;  transition: all 0.36s ease; 
height: auto; float: left; margin-right: 15px; margin-bottom: 20px; position: relative; box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);}
.case_page li em{ display: block; width: 380px; height: 410px; overflow: hidden; background: #F3F3F3;}
.case_page li em img{ display: block; width: 300px; height: 200px; overflow: hidden; margin:105px auto;}
.case_page li.l2{ margin:0 15px}

.case_page li .mask{ background: #fff;top: 50px;left: 25px;   padding: 44px;   width: 242px; height: 212px;  padding-top: 100px;opacity: 0;
transition: 0.56s ease;  position: absolute; filter: alpha(opacity=0);}
.case_page li .mask::after{ display: block; content: ''; position: absolute; left: 50%; width: 0; height: 3px; background: #E60012;
bottom: 0; transition:  0.56s ease-in-out;}
.case_page li .mask h4{ transition: all 0.36s ease; color: #E60012;font-size: 16px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
padding-bottom: 15px;}
.case_page li .mask p{transition: all 0.36s ease;font-size: 13px;line-height: 26px;height: 52px;overflow: hidden;color: #999;}
.case_page li span.more{display: inline-block;height: 25px;box-sizing: border-box; line-height: 25px;left: 45px; bottom: 42px;padding: 0 20px; background: #E60012;
color: #fff; font-family: "times new roman"; margin-top: 25px; transition: all 0.6s ease;  }
.case_page li:hover .mask{ top: 25px; opacity: 1; filter: alpha(opacity=100); }
.case_page li:hover .mask::after{ width: 100%; left: 0; right: 0;}

.case_page li .bt { transition: all 0.56s ease; height: 60px; padding: 24px 0;}
.case_page li .bt p{  transition: all 0.36s ease;    font-size: 13px;    line-height: 26px;     overflow: hidden; height: 26px;  color: #999; }
.case_page li .bt h4{ transition: all 0.36s ease; color: #333; font-size: 16px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.case_page li:hover .bt{ opacity: 0; filter: blur(14px); filter:alpha(opacity=0)}


.fenye{ text-align: center; margin-top: 25px; }
.fenye span{ display: inline-block; width: 60px; height: 40px; border:1px solid #eee; background: #fff;
color: #555; line-height: 40px; text-align: center; transition: all 1s; margin:0 5px; }

.fenye span a{ display: inline-block; width: 60px; height: 40px;  background: #fff;
color: #555; line-height: 40px; text-align: center; transition: all 1s; }

.fenye span a:hover{ display: inline-block; width: 60px; height: 40px;  background: #E60012; color: #fff; cursor: pointer;
line-height: 40px; text-align: center; transition: all 1s; }
.fenye span:hover,.fenye span.on{ background: #E60012; color: #fff; cursor: pointer; }


.newspage li a{ display: block; overflow: hidden; clear: both;}
.newspage li{ position: relative; transition: all .36s ease;position: relative; padding: 30px 0;border-bottom: 1px solid #e5e5e5;  
border-bottom-color: rgb(229, 229, 229);overflow: hidden; clear: both;  overflow: hidden;}
.newspage .news_img{ display: block; width: 290px; float: left; height: 160px;}
.newspage .news_img img{ display: block; width: 290px; height: 160px;}
.newspage .news_text{ width: 450px; float:left; margin-left: 30px;}
.newspage .news_text h2{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; color: #303030; line-height: 30px; padding-top: 15px;}
.newspage .news_text p{ width: 450px;padding-top: 11px;font-size: 13px;line-height: 26px;height: 52px;overflow: hidden;color: #888;}
.newspage .data_wrap{ position: absolute; top: 30px; right: 30px;}
.newspage .data_wrap span{ font-family: helveticaneuethn, Arial; font-size: 22px;line-height: 30px; color: #999;}
.newspage  span.detail{ position: absolute; top: 100px; right: 30px;  display: block; border-left: 1px solid #F1F1F1; padding-left: 20px; padding:10px 20px;
transition: all .36s ease; }
.newspage li:hover{box-shadow: 0 0 40px rgba(0, 0, 0, .08); padding-left: 20px; }
.newspage li:hover span.detail{ right: 10px;}


.details-page{ background: #fff; padding:0 30px; }
.de-tit{ padding:40px 0  20px 0;  }
.de-tit h1{ font-size: 20px; color: #333; text-align: center; padding:15px 0; }
.de-tit p{ text-align: center; border-bottom:1px solid #f5f5f5; padding:0 0 20px 0; } 
.de-tit p span{ display: inline-block; margin:0 15px; font-size: 14px; color: #888;  }
.de-cont p{ line-height: 38px; font-size: 14px; color: #666; text-indent: 2em; }

.fenpian{ padding:30px 0;  border-top: 1px solid #f6f6f6; margin-top: 40px;}
.fenpian>div{ padding:15x 0; }
.fenpian span{ display: block; font-size: 14px; color: #222; float: left;  vertical-align: middle; line-height: 30px; }
.fenpian p a{ font-size: 14px; color: #555; float: left; display: block; line-height: 30px; }
.fenpian a:hover{ color: #e60012; }
.de-img{ text-align: center; padding:20px 0; }
.de-img img{ display: inline-block; }

.fenpian .fanhui{ display: block; float: right; width: 150px; height: 40px; line-height: 40px; text-align: center; background: #e60012; border-radius: 10px;
 color: #fff; cursor: pointer;}
.biao{ text-align: center;}
.biao .text_input{ height: 36px; line-height: 36px; font-size: 14px; color: #333; background: none; border: none; background: #fff; border:1px solid #ccc;
 display: inline-block; width: 255px; margin-right: 15px; padding-left: 5px;}
.biao span{ display: inline-block; font-size: 14px; color: #333; margin-right: 5px; width: 80px;}
.biao .sub{ display: inline-block; background: none; border:none; background: #E60012; width: 80px; line-height: 36px; height: 36px; font-size: 14px; color: #fff; 
text-align: center; cursor: pointer;}

.biao_table{ margin-top: 30px; border-collapse: collapse; margin-bottom: 45px; }
.biao_table th{ font-size: 16px; height: 60px; color: #333; width: 25%; background: #D0CFCF }
.biao_table td{ font-size: 14px; height: 50px; color: #666; width: 25%; text-align: center; }
.biao_table td a{ display: block; color: #E60012; transition: all 0.36s ease; -webkit-transition:all 0.36s ease; -moz-transition: all 0.36s ease;}
.biao_table td a:hover{ transform: translateX(-5px);}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, 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);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

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

@keyframes bounce {
  from, 20%, 53%, 80%, 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);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

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

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}


@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

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



@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, 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: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes fadeInUp100 {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
	}
}
@keyframes fadeInUp100 {
	from {
		opacity: 0;
		transform: translate3d(0, 100px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 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);
  }

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

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