@charset "utf-8";
body , div , dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
table th , table td {padding:5px;}
fieldset , img {border:0;}
address , caption , cite , code , dfn , em  , th , var {font-style:normal; font-weight:normal;}
ception , th{text-align:left;}
q:before , q:after{content:'';}
abbr , acronym{border:0;}
a {color:#585858; text-decoration:none;}  /*for ie f6n.net*/
a:focus{outline:none;} /*for ff f6n.net*/
input{outline:none;font-size:14px;color:#585858;}
a:hover {text-decoration: none; color:#2c2c2c;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-table; } /* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
img{vertical-align:top;border:0;}
caption,th {text-align:left;}
/*定位*/
.tl {text-align:left;}
.tc {text-align:center;}
.tr {text-align:right;}
.bc {margin-left:auto; margin-right:auto;}
.fl {float:left; display:inline;}
.fr {float:right; display:inline;}
.zoom {zoom:1}
.hidden {visibility:hidden;}
.vam {vertical-align:middle;}
.clear{clear:both; height:0; line-height:0; font-size:0;}
p{ word-spacing:-1.5px;}

/*其他*/
.cur{cursor:pointer};
body{overflow-x:hidden; color:#585858; font-size:14px; font-family: "微软雅黑"; position:relative;}

/*banner*/
/*================= banne===================*/
.bg-img img{width:100%;height:100%;}

.bl{width:60%;height:auto;float:Left;}
.bl img{width:100%;}

.br{width:34%;height:auto;float:left;text-align:center;font-size:18px;color:#fff;line-height:32px;padding-top:200px;padding-right:3%;padding-left:3%;}
.br span{font-size:36px;font-weight:bold;}

#banner{ position:relative; margin-top:-15px; height:560px; overflow:hidden;background-color:#D52B1E;}

#banner .bd { position:relative;}

#banner .bd a{ display:block; width:100%; height:560px;}

#banner .hd{ position:absolute;margin:0 auto; width:100%;}

#banner .hd ul{ position:relative; z-index:9; display:inherit; margin:0 auto; margin-top:-50px; width:100%; height:40px;/* border-top:1px solid #56585c; */ text-align:center;  }

#banner .hd ul li{ display:inline-block; padding-top:13px;}

#banner .hd ul li a{ display:block; margin:0 3px; width:8px;height:8px; border-radius:4px; background:#000;   }

#banner .hd ul li a:hover{ width:30px; background:#ffd900;}

#banner .hd ul .on a{  width:30px;  background:#ffd900;}

#banner .hd a{-moz-transition: all 1s ease !important;

-webkit-transition: all 1s ease-in-out !important;

-o-transition: all 1s ease-in-out !important;

-ms-transition: all 1s ease-in-out !important;

transition: all 1s ease-in-out !important; }

#banner  .bnt{ position:absolute;  top:80%; z-index:3;width:30px;height:30px;}

#banner  .bnt:hover{ }

#banner .prev{ position:absolute; left:1040px; }

#banner .next{ position:absolute; right:240px; }

#banner:hover .prev{left:1040px;  opacity:1; filter:alpha(opacity=100);}

#banner:hover .next{right:240px; opacity:1; filter:alpha(opacity=100);}

.slide-main{height:580px;position:relative;}
.prev,.next{display:block;width:44px;height:44px;position:absolute;z-index:222;top:267px;overflow:hidden;cursor:pointer;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);_border:1px solid none;}
.prev{left:43px;}
.next{right:43px;}
.prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.item{display:block;width:100%;height:5px;position:absolute;z-index:124;top:540px;left:0;text-align:center;}
.item a{display:inline-block;width:24px;height:5px;margin-right:11px;background:#333;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);overflow:hidden;}
.item a.cur{background:#fff;}
.slide-box,.slide{display:block;width:100%;height:580px;overflow:hidden;}
.slide-box{position:relative;}
.slide{display:none;height:490px;padding-top:89px;background:#ff6900;position:relative;position:absolute;z-index:8;}
#bgstylea{background:#ff6900;}
#bgstyleb{background:#D52B1E;}
#bgstylec{background:#000;}
.slide a{display:block;width:100%;height:490px;cursor:pointer;}
.obj-a,.obj-b,.obj-c,.obj-d,.obj-e,.obj-f{position:absolute;z-index:9;left:50%;}
.obj-a,.obj-b{width:952px;margin-left:-476px;text-align:center;}
.obj-a{display:block;height:352px;top:100px;}
.obj-b{top:406px;height:100px;}
.obj-c{display:block;height:582px;top:0;margin-left:-540px;}
.obj-d{top:228px;height:164px;}
.obj-d p{display:block;padding-top:20px;font-size:16px;color:#fff;clear:both;}
.obj-e{width:366px;height:170px;margin-left:-460px;top:223px;z-index:12;}
.obj-f{width:692px;height:394px;top:158px;margin-left:-180px;}
.banAnimate .obj-a{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}
@-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
.banAnimate .obj-b{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}
@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }
@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }
@keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }
.watch-code.code-show{display:block;animation-name:scode;-webkit-animation:scode 0.3s linear 0s normal none;-moz-animation:scode 0.3s linear 0s normal none;animation:scode 0.3s linear 0s normal none;}
@-webkit-keyframes scode{from{opacity:0;-webkit-transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;-webkit-transform:scale(1,1); transform-origin: left bottom;} }
@-moz-keyframes scode{from{opacity:0;-moz-transform:scale(1,0); transform-origin:left bottom;} to{opacity:1;-moz-transform:scale(1,1);transform-origin:bottom bottom;} }
@keyframes scode{from{opacity:0;transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;transform:scale(1,1);transform-origin: left bottom;} }
.banAnimate .obj-c,.banAnimate .obj-e{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}
@-webkit-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
.banAnimate .obj-d,.banAnimate .obj-f{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}
@-webkit-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }

/*title*/
h1 { font-size:32px;}
h2 { font-size:26px;}
h3 { font-size:20px;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:10px;}

.left { width:230px; float:left; position: relative;}
/* CSS Document */
.header , .content , .footer , .container{margin-left:auto; margin-right:auto; width:1280px;}

.header{width:100%; overflow:hidden; background-color:#fff;}
.header_top { overflow:hidden; width:100%; height:33px; background-color:#f4f4f4}
.header_top .biaoyu{ float:left; line-height:33px; color:#636363; font-size:14px;max-width:800px}
.header_top ul{ overflow:hidden; float:right; margin-top:8px;}
.header_top li{ float:left; padding:0 10px; border-left:1px dotted #c8c8c8; font-size:14px;}
.header_top li a{ color:#636363;}
.header_top li.last{ padding-left:0; border:none}
.header_center { overflow:hidden; width:1280px; margin:0 auto; height:110px;}
.header_center h1{ float:left; margin-top:28px; }
.header_center .phone{ padding:5px 0; overflow:hidden; padding-right:55px; background:url(../images/bg.png) no-repeat 180px -880px; text-align:right; margin-top:25px;}
.header_center .phone em{ display:block; font-size:16px; color:#595959;}
.header_center .phone span{ display:block; font-size:22px; color:#3c3c3c; font-weight:bold}
.we{width:651px;height:80px;float:Left;text-align:right;padding-top:15px;}

.naver{ width:100%; height:62px; float:left; margin:0px; background-color:#2c2c2c;z-index:300;}
.nav{ width:1280px; height:62px; margin:0px auto;background-color:#2c2c2c;}
.nav-item  ul{ margin:0px; padding:0px; list-style-type:none;}
.nav-item  li{ width:163.66px; height:62px; line-height:62px; float:left; text-align:center;font-size:16px;}
.nav-item  li a{ color:#ffffff; text-decoration:none;}
.nav-item  li a:hover{ color:#f5f5f5; font-weight:bold; background-color: #585858;display: block;}

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2c2c2c;
  min-width:163.66px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:9999999999999;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content ul{
	margin:0px;
	padding:0px;
	list-style-type:none;
}

.dropdown-content li{ width:163.66px; height:45px; line-height:45px; float:left; text-align:center;font-size:16px;}
.dropdown-content li a{ color:#ffffff; text-decoration:none;}
.dropdown-content li a:hover{ color:#f5f5f5; font-weight:bold; background-color: #2c2c2c;display: block;background:#585858;}

.nav-form{width:280px;height:62px;float:Left;margin-left:18px;}
.nav-form-l{width:220px;height:auto;float:left;padding-top:10px;}
.nav-form-l input{width:210px;height:40px;float:left;border:#585858 1px solid;background-color:#2c2c2c;border-right:none;}
.nav-form-r{width:58px;height:40px;float:left;border:#585858 1px solid;margin-top:10px;border-left:none;}
.nav_btn_Submit{width:58px;height:40px;line-height:40px;float:left;background-color:#000;border:none;background: url(../images/so.jpg) no-repeat;}

.s01{ position: absolute; top: 0; left: 0;}
.s02{ position: absolute; top: 0; right: 0;}
.s03{ position: absolute; top: 166px; left: 0;}
.s04{ position: absolute; top: 166px; right: 0;}

/*footer*/
.footer{ overflow:hidden; width:100%; background-color:#2C2C2C;font-size:14px;}
.footer .f_btm { overflow:hidden; width:1280px; margin:0 auto 40px;}
.footer h1{ float:left; margin-top:55px;}
.footer .info{ overflow:hidden; padding:0px; float:left; margin:40px 0 0 0px; width:800px; color:#ffffff;line-height:27px;}
.footer .info p{ font-size:14px; line-height:24px; color:#ffffff;}
.footer .info a{ color:#ffffff}
.footer .phone{ overflow:hidden; margin-right:-50px; text-align:right; margin-top:58px; float:right}
.footer .phone p{ font-size:13px; color:#ffffff}
.footer .phone b{ display:block; font-size:25px; color:#ffffff;}
.footer .ewm{ overflow:hidden; float:right; margin-top:35px;text-align:center;color:#fff;line-height:27px;}
.footer .ewm span{ font-size:14px; color:#ffffff; margin-right:20px; position:relative; top:-20px;}
.footer .ewm img{ padding-left:11px; background:url(../images/bg.png) no-repeat -386px -273px;}

.rtTop{ width:43px; height:43px; overflow:hidden; position:fixed; top:85%; right:51%; margin-right:-675px; cursor:pointer;  display:none;}
.rtTop h4{ width:43px; height:43px; overflow:hidden; position:relative;}
.rtTop img{ display:block; position:absolute; top:0; left:0;}

.bgitem{height: 550px; width: 100%; cursor: pointer; overflow:hidden; position:relative;}

.title{ overflow:hidden; width:100%; text-align:center; position: relative; margin:40px 0;}
.title span{ display:block; text-transform:uppercase; font-weight:lighter; font-size:38px; color:#dad9d9;}
.title h2{ font-weight:normal; margin:5px 0; font-size:28px;color:#000;}
.title .sc{ display:block; width:196px; height:26px; text-align:center; line-height:26px; font-size:13px; color:#fff; position:relative; z-index:1; background-color:#D52B1E; margin:0 auto; border-radius:3px;}
.title i{ display:block; width:100%; height:1px; background-color:#d9d9d9; position:absolute; left:0; bottom:13px;}

/*about*/
.about { overflow:hidden; width:1280px; margin:40px auto 50px; }
.about .aboutleft{ overflow:hidden; float:left; width:970px;}
.about h3{ font-size:18px; margin-bottom:20px;}
.about h3 a{ color:#333;}
.about h3 span{ font-weight:normal; font-size:14px; color:#c1c1c1; margin-left:10px;}
.about .wenbox{ overflow:hidden; width:100%; height:291px; background:url(../images/bg.png) no-repeat 22px 19px}
.about .wenbox .aboutp{ float:left;}
.about .wenbox img{ display:block;border:#CCC solid 3px }
.about .wenbox .wen{ overflow:hidden; width:510px; float:right; margin-top:20px}
.about .wenbox h4{ font-size:16px; margin-bottom:15px; margin-top:5px;}
.about .wenbox h4 a{ color:#1b1b1b;}
.about .wenbox .wenzi { font-size:14px; line-height:24px; color:#585756; height:150px; overflow:hidden; margin-bottom:25px; text-align:justify;text-indent:2em}
.about .wenbox .more{ display:block; width:98px; height:32px; line-height:32px; text-align:center; font-size:14px; color:#646464; background-color:#e5e5e5; border-radius:3px;}
.about .rongyu{ float:right; width:218px; margin-right:22px;}
.about .rongyu .rybox { width:100%; height:277px; position:relative}
.about .rybox i{ display:block; z-index:2; width:40px; height:40px; cursor:pointer; position:absolute; top:123px;}
.about .rybox .btn01{ background:url(../images/bg.png) no-repeat 0 -496px; left:-20px;}
.about .rybox .btn02{ background:url(../images/bg.png) no-repeat -60px -496px; right:-20px;}
.about .rybox .btn01:hover{ background:url(../images/bg.png) no-repeat 0 -536px;}
.about .rybox .btn02:hover{ background:url(../images/bg.png) no-repeat -60px -536px;}
.about .ryWin{ overflow:hidden; position:relative; width:216px; height:275px; border:1px solid #c6c6c6;}
.about .ryWin ul{ overflow:hidden; position:absolute}
.about .ryWin li{ float:left; width:216px; height:270px; text-align:center;padding-top:5px;}
.about .ryWin li span{ display:block; width:100%; text-align:center; font-size:14px; color:#333; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; height:24px; line-height:24px}

.fengcai { overflow:hidden; width:1280px; margin:50px auto 50px;color:#585858;font-size:14px;}
.fengcai .fcbox{ overflow:hidden; width:1280px; height:211px; position:relative}
.fengcai .fcbox ul{}
.fengcai .fcbox li{ float:left; width:640px; height:211px;background-color:#f5f5f5;margin-right:20px;}
.fl{width:313px;height:211px;float:left;}
.fr{width:327px;height:211px;float:left; background-color:#f5f5f5;line-height:27px;}
.fr-top{width:297px;height:120px;float:left;line-height:27px;padding:10px 15px 0px 15px;}
.fr-top span{color:#2c2c2c;font-size:16px;font-weight:bold;}
.fr-bom{width:100px;height:40px;float:Left;border:#ccc 3px solid;margin-left:15px;font-size:14px; text-align:center;color:#ccc;line-height:40px;}
.fr-bom:hover{border:#D52B1E 3px solid;color:#585858;}

/*
.fengcai .fcbox li img{ display:block; margin:0 auto; margin-top:10px; margin-bottom:15px;}
.fengcai .fcbox li span{ display:block; font-size:14px; color:#585756; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
*/

/*news*/
.news { overflow:hidden; width:1280px; margin:0 auto; margin-bottom:0px;}
.news .newsleft{ overflow:hidden; width:778px; height:488px; background-color:#f6f6f6; float:left;}
.news .menu{ overflow:hidden; width:100%; height:58px; padding-bottom:7px; margin-bottom:25px;}
.news .menu li{ float:left; width:385px; height:54px; border:2px solid #D52B1E; text-align:center; line-height:54px; font-size:18px; color:#1b1b1b; background-color:#fff; position:relative}
.news .menu li a{ display:block; text-decoration:none;}
.news .menu li img{ display:none; position:absolute; left:50%; margin-left:-6px; bottom:-9px;}
.news .menu li.cur{ background-color:#D52B1E; font-weight: bold}
.news .menu li.cur a{ color:#fff;}
.news .menu li.cur img{ display:block}
.news .listbox { overflow:hidden; width:100%; height:385px; position:relative}
.news .list{ overflow:hidden; width:100%; height:100%;}
.news .list dl{ overflow:hidden; width:735px; margin:0 auto; height:166px; margin-bottom:25px;}
.news .list dt{ float:left; width:236px; height:153px; border:6px solid #fff;}
.news .list dd{ overflow:hidden; float:right; width:470px;}
.news .list h3{ font-size:16px; margin:14px 0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.news .list h3 a{ color:#1b1b1b;}
.news .list p{ font-size:13px; line-height:22px; color:#585657; height:88px; overflow:hidden; text-align:justify}
.news .list ul{ overflow:hidden; width:735px; margin:0 auto}
.news .list li{ overflow:hidden; width:100%; height:50px; margin-bottom:15px; background-color:#fff;}
.news .list li .time{ width:30px; height:50px;float:left; overflow:hidden;line-height:20px; background:url(../images/red.jpg) no-repeat; background-position:center;}
.news .list li .time span{ display:block; font-size:20px; font-family:Arial; margin-top:5px;}
.news .list li .time em{ display:block; font-size:12px; font-family:Arial;}
.news .list li a{ display:block; line-height:50px; font-size:14px; float:left}
.news .list li .title1{ width:560px; margin-left:0px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:#585657; font-size:14px}
.news .list li .more{ float:right; text-transform:uppercase; color:#c1c1c1; margin-right:20px;}
.news .list li:hover a.title{ color:#7baf10;}
.news .newsright { overflow:hidden; width:459px; height:488px; background-color:#f6f6f6; float:right}
.news .newsright h3{ font-weight:normal; padding:0 20px; width:419px; height:58px; background-color:#D52B1E; line-height:58px; overflow:hidden;}
.news .newsright h3 a{ text-decoration:none; color:#fff;}
.news .newsright h3 b{ float:left; font-size:18px;}
.news .newsright h3 span{ float:left; font-size:14px; font-family:Arial; margin-left:5px; line-height:65px;}
.news .newsright h3 em{ font-size:13px; float:right; text-transform:uppercase}
.news .wenda { overflow:hidden; width:420px; height:395px; margin:0 auto; margin-top:20px; position:relative}
.news .wenda ul{ overflow:hidden; width:100%; position:absolute}
.news .wenda li{ overflow:hidden; height:139px; border-bottom:1px dotted #ddd; margin-bottom:12px;}
.news .wenda li h5{ font-weight:normal; font-size:16px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-left:30px; background:url(../images/bg.png) no-repeat -383px -738px; line-height:24px; margin-bottom:18px; }
.news .wenda li h5 a{ color:#000;}
.news .wenda li p{ padding-left:30px; background:url(../images/bg.png) no-repeat -383px -794px; font-size:14px; line-height:24px; color:#585657; height:68px; overflow:hidden; text-align: justify}

/*新闻*/
.xinwentiao{ width:1280px; float:left; height:38px; float:left; border-bottom:1px dashed #6A6A6A; line-height:38px;}
.xwzi{ width:1100px; float:left; height:38px; line-height:38px; background-image:url(../images/hei.jpg); background-repeat:no-repeat; background-position:4px center; padding-left:20px; font-size:14px;}
.xwzi a{ color:#585858; text-decoration:none;}
.xwzi a:hover{ color:#000000; font-weight:bold;}
.time{ width:160px; height:38px; line-height:38px; text-align:right; float:left; color:#000;}
.danye{ width:1280px; height:24px; float:left; text-align:center; font-size:20px; font-weight:bold; line-height:24px;}
.nrk{ width:1280px; float:left; line-height:25px; padding-top:12px;}

/*企业文化*/
.main1280{width:100%;height:auto;margin:0px;padding:0px;float:left;}
.main1280_box{width:1280px;height:auto;margin:0 auto;}
#s_pro_type{width:1280px;height:200px;float:left;border:1px solid #e5e5e5; border-right:none; margin-right:-1px;overflow:hidden;}

#s_pro_type ul{ }

#s_pro_type li{ display:block; width:255px; padding:45px 0; float:left; border-right:1px solid #e5e5e5;}
#s_pro_type li:hover{background-color:#2c2c2c;color:#fff;}
#s_pro_type li a{ display:block;}
#s_pro_type li a:hover{ display:block;background-color:#2c2c2c;color:#fff;}

#s_pro_type li .pic_box{ height:51px; margin-bottom:25px;}

#s_pro_type li:hover .pic_box{ transform:rotateY(180deg);-webkit-transform:rotateY(180deg); /* Safari and Chrome */-moz-transform:rotateY(180deg); /* Firefox */}

#s_pro_type li span{font-size: 14px;color: #4c4e54; display:block; text-align:center; text-transform:uppercase; padding-bottom:3px;}

#s_pro_type li strong{font-size: 14px;color: #4c4e54; display:block; text-align:center;}

#s_pro_type li.li1 .pic_box{ background:url(../images/icon_type1.png) center no-repeat;}

#s_pro_type li.li1:hover .pic_box{background:url(../images/icon_type1_hover.png) center no-repeat;}

#s_pro_type li.li2 .pic_box{ background:url(../images/icon_type2.png) center no-repeat;}

#s_pro_type li.li2:hover .pic_box{background:url(../images/icon_type2_hover.png) center no-repeat;}

#s_pro_type li.li3 .pic_box{ background:url(../images/icon_type3.png) center no-repeat;}

#s_pro_type li.li3:hover .pic_box{background:url(../images/icon_type3_hover.png) center no-repeat;}

#s_pro_type li.li4 .pic_box{ background:url(../images/icon_type4.png) center no-repeat;}

#s_pro_type li.li4:hover .pic_box{background:url(../images/icon_type4_hover.png) center no-repeat;}

#s_pro_type li.li5 .pic_box{ background:url(../images/icon_type5.png) center no-repeat;}

#s_pro_type li.li5:hover .pic_box{background:url(../images/icon_type5_hover.png) center no-repeat;}

/*菱形布局开始*/
.main1140{ width:100%;margin:0 auto; overflow:hidden; background-color:#F5F5F5;padding:40px 0px;float:left;}
.process-box{ width: 1140px;height: 450px;margin:auto;}
.process-box ul{width: 1140px;}
.process-box ul li{
  width: 196px;
  height: 196px;
  float: left;
  cursor: pointer;
  position: relative;
}
.process-box ul li .kuang{
  position: absolute;
  width: 196px;
  height: 196px;
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  border:1px solid #ddd;
  margin-top: 42px;
  margin-left: 42px;
}
.process-box ul li .kuang1{
  top: 0;
  left: 0;
  z-index: 1;
}
.process-box ul li .kuang2{
  left: 5px;
  top: 0px;
  z-index: 2; 
}
.process-box ul li .text1{ width: 276px; height: 276px; text-align:center;z-index: 3; position: absolute; left: 7px; top:2px;}
.process-box ul li .text1 .bg{width: 276px; height: 276px; }
.process-box ul li .text1 .bg1{ background: url(../images/process-img1.png) no-repeat;}
.process-box ul li .text1 .bg2{ background: url(../images/process-img2.png) no-repeat;}
.process-box ul li .text1 .bg3{ background: url(../images/process-img3.png) no-repeat;}
.process-box ul li .text1 .bg4{ background: url(../images/process-img4.png) no-repeat;}
.process-box ul li .text1 .bg5{ background: url(../images/process-img5.png) no-repeat;}
.process-box ul li .text1 .bg6{ background: url(../images/process-img6.png) no-repeat;}
.process-box ul li .text1 .bg7{ background: url(../images/process-img7.png) no-repeat;}
.process-box ul li .text1 .num{ padding-top: 50px; font-size: 86px; color: #dacdc2; font-weight: 700; }
.process-box ul li .text1 .titles{ font-size: 15px; color: #422710; padding-top:120px;}
.process-box ul li .text1 .eng{ font-size: 12px; color: #585858; }
.process-box ul li .text2{ width: 276px; height: 276px; z-index: 4; position: absolute; left: 5px; top:0px;display: none; }
.process-box ul li .text2 .mengban{ border:1px solid #2C2C2C;
  position: absolute;
  z-index: 1;
  width: 196px;
  height: 196px;
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  background: #2C2C2C;
  margin-top: 42px;
  margin-left: 42px;
}
.process-box ul li .text2 .desc{ position: absolute; z-index: 2; width: 140px; height: 110px; top: 88px; left:70px; font-size: 12px; color: #fff; text-align: center; line-height: 24px;}
.process-box ul li{ margin-right: 89px; }
.process-box ul.two li{ margin-top: -40px;}
.process-box ul li:hover .text2{
  display: block;
}
/*菱形布局结束*/

.fengcai { overflow:hidden; width:1280px; margin:50px auto 50px;}
.fengcai  .fcbox_case { overflow:hidden; width:100%; height:210px;}
.fengcai  .fcbox_case ul{ overflow:hidden; position:absolute;}
.fengcai  .fcbox_case li{ float:left; width:257px; height:210px; margin-right:30px;font-size:14px;}
.case_pics{width:257px;height:170px;float:left;border:#ccc 1px solid;padding:3px;}
.case_name{width:257px;line-height:48px;text-align:center;height:48px;}


#demo {
overflow:hidden;
border:0px dashed #CCC;
width:1280px;
height:;
}
#demo img {
border: 0px solid #F2F2F2;
}
#indemo {
float: left;
width:1800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}

#demo3 {
overflow:hidden;
width:1280px;
}
#demo3 img {
}
#indemo4 {
float: left;
width:1800%;
}
#demo5 {
float: left;
}
#demo6 {
float: left;
}

.message { overflow:hidden; width:100%; height:auto; background-color:#f5f5f5;float:left;margin:0px;padding:50px 0px 20px 0px;border-top:#EFEFEF 5px solid;font-size:14px;}
.mes{width:1280px;height:auto;margin:0px auto;}
.mes_left{width:577px;height:auto;float:left;background: url(../images/contact.jpg) no-repeat;height:297px;line-height:27px;padding:40px 0px 0px 123px;}
.mes_right{width:550px;height:auto;float:Left;padding-left:30px;}
.mes_right_title{width:550px;height:auto;float:Left;line-height:27px;}
.mes_right_title span{color:#D52B1E;}
.mes_content{width:550px;height:auto;float:left;}
.mes_content_box{width:550px;height:auto;float:Left;padding-top:15px;}
.mes_icon_box{width:550px;height:auto;float:Left;margin-bottom:15px;}

.mes_icon i{
	width:100%;
	display:block;
	text-align:center;
	font-size:18px;
}
.mes_icon_xxx i{
	width:100%;
	display:block;
	text-align:center;
	font-size:18px;
}
.mes_icon{width:18px;height:18px;float:left;padding:5px;background-color:#fff;margin-right:5px;}
.mes_icon_xxx{width:18px;height:40px;float:left;padding:5px;background-color:#fff;margin-right:5px;padding-top:35px;}
.mes_icon_content{width:227px;height:28px;float:left;}
.mes_icon_content_xxx{width:517px;height:auto;float:left;}
.mes_input{height:28px;line-height:28px;border:0px;width:95%;padding-left:5%;}
.mes_input_box{height:80px;line-height:28px;border:0px;width:98%;padding-left:2%;}
.mes_margin_30{margin-right:30px;}
.mes_btn{width:100%;height:auto;float:left;padding-top:11px;}
.mes_btn_Submit{width:135px;height:35px;background-color:#828282;border:none;font-size:16px;font-weight:bold; color:#fff;float:left;}
.mes_btn_button{width:135px;height:35px;background-color:#D52B1E;border:none;font-size:16px;font-weight:bold; color:#fff;margin:0px 0px 0px 20px;}


/*焦点图*/
.focus{ position:relative; width:400px; height:257px;float: left;}  
.focus img{ width: 400px; height: 257px;} 
.focus .shadow .title{width: 260px; height: 65px;padding-left: 30px;padding-top: 20px;}
.focus .shadow .title a{ text-decoration:none; color:#fff; font-size:14px; font-weight:bolder; overflow:hidden; }
.focus .btn{ position:absolute; bottom:34px; left:510px; overflow:hidden; zoom:1;} 
.focus .btn a{position:relative; display:inline; width:13px; height:13px; border-radius:7px; margin:0 5px;color:#B0B0B0;font:12px/15px "\5B8B\4F53"; text-decoration:none; text-align:center; outline:0; float:left; background:#D9D9D9; }  
.focus .btn a:hover,.focus .btn a.current{  cursor:pointer;background:#fc114a;}  
.focus .fPic{ position:absolute; left:0px; top:0px; }  
.focus .D1fBt{ overflow:hidden; zoom:1;  height:16px; z-index:10;  }  
.focus .shadow{ width:100%; position:absolute; bottom:0; left:0px; z-index:10; height:32px; line-height: 32px; background:rgba(0,0,0,0.6);    
filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#80000000',endColorstr = '#80000000')\9;  display:block;  text-align:left; }  
.focus .shadow a{ text-decoration:none; color:#fff; font-size:14px; overflow:hidden; margin-left:10px;}  
.focus .fcon{ position:relative; width:100%; float:left;  display:none; background:#000  }  
.focus .fcon img{ display:block; }  
.focus .fbg{bottom:0px; right:5px; position:absolute; height:19px; text-align:center; z-index: 200; }  
.focus .fbg div{margin:4px auto 0;overflow:hidden;zoom:1;height:14px}    
.focus .D1fBt a{position:relative; display:inline; width:12px; height:12px; border-radius:7px; margin:0 5px;color:#B0B0B0;font:12px/15px "\5B8B\4F53"; text-decoration:none; text-align:center; outline:0; float:left; background:#D9D9D9; }    
.focus .D1fBt .current,.focus .D1fBt a:hover{background:#fc114a;}    
.focus .D1fBt img{display:none}    
.focus .D1fBt i{display:none; font-style:normal; }    
.focus .prev,.focus .next{position:absolute;width:40px;height:74px;background: url(../images/focus_btn.png) no-repeat;}
.focus .prev{top: 50%;margin-top: -37px; left: 3px;background-position:0 -74px; cursor:pointer; }  
.focus .next{top: 50%;margin-top: -37px; right: -3px;  background-position:-40px -74px;  cursor:pointer;}  
.focus .prev:hover{  background-position:0 0; }  
.focus .next:hover{  background-position:-40px 0;} 

/*产品*/ 
.home-chanpin-title { overflow:hidden; width:100%; height:auto;float:left; margin:0px;padding-top:40px;}
.home-chanpin-title-box{width:351px;height:60px;margin:0px auto;background: url(../images/title_bg.jpg) no-repeat;text-align:center; background-position:bottom;line-height:15px;padding-top:9px;}
.home-chanpin-title-box h2{color:#000;font-size:28px;font-weight:normal;}
.home-chanpin-title-box span{color:#585858;font-size:14px;font-weight:normal;}

.home-chanpin-content { overflow:hidden; width:100%; height:auto;float:left; margin:0px;padding-top:20px;}
.home-chanpin-content-wenzi{width:880px;height:auto;margin:0px auto;text-align:center;line-height:27px;font-size:14px;}

.home-container{width:100%;height:auto;float:Left;margin:0px;padding:40px 0px;font-size:14px;}
.home-content{width:1280px;height:auto;margin:0px auto;}
.home-content-box{width:1280px;height:auto;float:Left;}
.home-content-box-left{width:640px;height:430px;float:Left;}
.public-logo{width:600px;height:auto;float:Left;}
.public-left{text-align:left;}
.public-right{text-align:right;}
.public-content{width:600px;height:auto;float:left;line-height:27px;font-size:14px;padding:15px 0px;color:#585858;}
.public-content span{color:#000;font-weight:bold;}
.jiandang{width:600px;height:13px;float:left;}
.home-chanpin-list {width:auto;height:auto;float:Left;padding-top:15px;}
.home-chanpin-list ul{margin:0px;padding:0px;list-style-type:none;}
.home-chanpin-list li{width:;height:auto;float:Left;line-height:27px;text-align:right;}
.home-chanpin-list li a{color:#585858;}
.home-chanpin-list li a:hover{color:#D52B1E;}
.home-content-box-right{width:640px;height:430px;float:Left;}
.padding-top-30{padding-top:30px;}

.home-chanpin-list-l {width:auto;height:auto;float:Left;padding-top:15px;}
.home-chanpin-list-l ul{margin:0px;padding:0px;list-style-type:none;}
.home-chanpin-list-l li{width:;height:auto;float:Left;line-height:27px;text-align:left;}
.home-chanpin-list-l li a{color:#585858;}
.home-chanpin-list-l li a:hover{color:#D52B1E;}

/*搜索*/
.sousuo-box { overflow:hidden; width:100%; height:auto; background-color:#f5f5f5;float:left;margin:0px;font-size:14px;color:#585858;}
.sousuo{width:1280px;height:60px;margin:0px auto;}
.sl{width:909px;height:60px;line-height:60px;float:Left;}
.sl span{font-weight:bold;}
.sr{width:371px;height:60px;float:left;}
.sr-l{width:311px;height:38px;border:#000 1px solid;margin:10px 0px 0px 0px;float:Left;}
.sr-l input{width:311px; height:38px; line-height:38px;border:none;}
.sr-r{width:56px;height:40px;float:Left;margin-top:10px;}
.key_btn_Submit{width:58px;height:40px;line-height:40px;float:left;background-color:#000;border:none;background: url(../images/so.jpg) no-repeat;}

/*main*/
.layout-container{width:100%;height:auto;float:Left;margin:0px;padding:40px 0px;font-size:14px;color:#585858;}
.layout-main{width:1280px;margin:0px auto;height:auto;line-height:27px;}

/*左侧栏目*/
.left-naver{
	width:238px;height:auto;float:left;
}
.left-naver-title{
	width:238px;height:75px;float:left;background-color:#2c2c2c;color:#f5f5f5;font-size:28px;text-align:center;line-height:25px;padding-top:25px;
}
.left-naver-title span{
	color:#ccc;font-size:14px;
}
.left-naver-content{width:238px;height:auto;float:Left;}

/*菜单*/
.menu_list{font-size:14px;}
.menu_head{width:198px;height:47px;line-height:47px;padding-left:38px;font-size:14px;color:#525252;cursor:pointer;border:1px solid #e1e1e1;position:relative;font-weight:bold;background:#f1f1f1 url(../images/pro_left.png) center right no-repeat;margin:0;}
.menu_list .current{background:#f1f1f1 url(../images/pro_down.png) center right no-repeat;}
.menu_body{width:236px;height:auto;overflow:hidden;line-height:38px;border-left:1px solid #e1e1e1;backguound:#fff;border-right:1px solid #e1e1e1;}
.menu_body a{display:block;width:236px;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;background-color:#f5f5f5;color:#2c2c2c;}

/*右侧内容*/
.right-content{
	width:1012px;height:auto;float:left;line-height:27px;font-size:14px;margin-left:30px;
}
/*右侧内容,调整后的...*/
.right-contents{
	width:1280px;height:auto;float:left;line-height:27px;font-size:14px;
}

/*产品展示*/
.right-content-products{ overflow:hidden; width:100%; height:auto; position:relative;color:#585858;font-size:14px;}
.right-content-products ul{}
.right-content-products li{ float:left; width:410px; height:;background-color:#f5f5f5;margin-right:25px;margin-bottom:25px;}
.pfl{width:200px;height:200px;float:left;border:#f5f5f5 1px solid;border-right:none;}
.pfr{width:209px;height:200px;float:left; background-color:#f5f5f5;line-height:25px;}
.pfr-top{width:180px;height:140px;float:left;line-height:25px;padding:10px 15px 0px 15px;}
.pfr-top span{color:#2c2c2c;font-size:16px;font-weight:bold;}
.pfr-bom{width:100px;height:32px;float:Left;border:#ccc 2px solid;margin-left:15px;font-size:14px; text-align:center;color:#ccc;line-height:32px;}
.pfr-bom:hover{border:#D52B1E 2px solid;color:#585858;}

.right-content-info{ overflow:hidden; width:100%; height:auto; position:relative;color:#585858;font-size:14px;}
.right-content-info ul{}
.right-content-info li{ float:left; width:1280px; height:;background-color:#f5f5f5;margin-right:32px;margin-bottom:32px;}
.pfl-info{width:240px;height:240px;float:left;border:#f5f5f5 1px solid;border-right:none;}
.pfr-info{width:771px;height:240px;float:left; background-color:#f5f5f5;line-height:27px;}
.pfr-info-top{width:740px;height:136px;float:left;line-height:27px;padding:10px 15px 0px 15px;}
.pfr-info-top span{font-size:16px;color:#2c2c2c;font-weight:bold;}
/*==========以下部分是Validform.css===========*/
/*==============================amimate开始=======================================*/

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

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

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

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

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

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

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

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

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

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

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

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

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

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

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

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

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

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

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

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

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

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

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

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }


  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

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

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

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

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

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

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

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

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

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

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

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

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

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

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

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

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

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

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

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

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

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

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

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

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

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

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

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

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

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

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

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

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

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

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);

    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

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

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

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

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

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

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

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

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

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


#index .f1 .servie-li ul li a span.icon_seo{ background:url(../images/dark.png) center no-repeat; }
#index .f1 .servie-li ul li a:hover span.icon_seo{ background:url(../images/light.png) center no-repeat; }

/*===================================j_pop====================================*/
#fg_pop{ display:none; z-index:9999; position:fixed; top:50%; margin-top:-150px; left:50%; margin-left:-295px; background:url(../images/bg_pop.png) center no-repeat; height:300px; width:590px;}
#fg_pop .box{ padding-top:45px; color:#fff;}
#fg_pop .box h1{ display:block; font-size:32px;  text-align:center; color:#fff; }
#fg_pop .box .bnt_box{ text-align:center; display:inherit;}
#fg_pop .box .bnt_box a{ display:inline-block; margin:0 10px; border-radius:2px; overflow:hidden; width:178px; height:50px; border:1px solid #fff; font-size:18px; color:#fff; text-align:center; line-height:50px; }
#fg_pop .box a.on{ color:#e60012; background:#fff;}
#fg_pop .box strong{ display:block; font-size:14px;  text-align:center; margin-bottom:25px; padding-top:15px; color:#fff;}
#fg_pop .box p{ display:inherit; font-size:18px;  text-align:center; margin-top: 20px; color:#fff;}
#fg_pop .box p a{ display:inline-block; padding:0 16px; color:#fff; font-size:18px;}

/*===================================j_ewm====================================*/
#fix_ewm_box{position: fixed; top: 0px; right: 0; z-index: 9999999; display: none; width: 100%; height: 100%; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#D8000000', endColorstr='#D8000000');background:rgba(0,0,0,0.85); }

#fix_ewm_box .ewm img{ display: block; position: absolute; top: 50%; margin-top: -120px;  left: 50%; margin-left: -100px !important;  height: 200px; -moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out; }



@keyframes scaleToggleOne { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
50% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleTwo { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
20% {
transform:scale(1);
-webkit-transform:scale(1)
}
60% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleThree { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
33% {
transform:scale(1);
-webkit-transform:scale(1)
}
66% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { width: 62px; height: 62px; border-radius: 50%; position: fixed; bottom: 150px; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); z-index: 700; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl:focus { outline: 0 }
.livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }
.livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #f10000, #f10000); position: absolute; right: 1px; top: 1px; z-index: 50 }
.livechat-girl .girl { position: absolute;     top: -1px; left: -1px; width: 100%; height: auto; z-index: 50 }
.livechat-girl .animated-circles .circle { background: rgba(241,0,0,.25); width: 60px; height: 60px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) }
.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 }
.livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
@media only screen and (max-width:1599px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important }
}
@media only screen and (max-width:1309px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important }
}
@media only screen and (max-width:1124px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important }
}
.rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 }
.rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 }
.rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 }
.rd-notice-type-success { background-color: #f10000; -webkit-box-shadow: 0 5px 10px 0 rgba(241,0,0,.2); box-shadow: 0 5px 10px 0 rgba(241,0,0,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #f10000 }
.rd-notice-type-success:after { background-color: #f10000; -webkit-box-shadow: 0 5px 10px 0 rgba(241,0,0,.2); box-shadow: 0 5px 10px 0 rgba(241,0,0,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }

.click_box{
	width:90%;height;float:left;padding:5%;font-size:14px;
}
.click_input{
	width:95%;height:32px;float:left;margin-bottom:20px;
}
.click_input input{
	width:100%;height:32px;border:#ccc 1px solid;
}

.click_arr input{
	width:100%;height:60px;border:#ccc 1px solid;
}

.click_arr{width:95%;height:auto;float:left;margin-bottom:20px;}

.click_submit{
	width:67%;height:;float:left;padding-left:33%;
}
.product-info{
	width:1280px;height:;float:left;padding:20px 0px;font-size:14px;border-top:#f5f5f5 8px solid;
}
.pfr-info-top span{
	font-size:16px;color:#2c2c2c;
}

.nfanye{width:100%;margin:0 auto;text-align:center;overflow:hidden; background-color:#f5f5f5; padding:20px 0px; margin-top:30px; float:left;}
/*======分页=====*/
.viciao {margin-left:auto; margin-right:auto; }
.viciao A, .viciao SPAN.disabled{BORDER: #CAC7C7 1px solid;PADDING:5px 8px;COLOR:#7a7676; overflow:hidden;  MARGIN-RIGHT:7px; background:#F7F6F6; }
.viciao A:hover, .viciao A:active, .viciao a.current{BORDER:#FF9C01 1px solid; PADDING:5px 8px; MARGIN-RIGHT: 7px; background:#FF9C01; color:#ffffff;}

.fencai_box{width:100%; height:500px;float:Left; margin:0px;background:url(../images/fencai_banner.jpg) center no-repeat;}
.fencai_box .job_main_box{width:580px;margin:0px auto;height:268px;padding:116px 30px 116px 670px;color:#fff;}
.job_box{width:100%; height:500px;float:Left; margin:0px;background:url(../images/job_banner.jpg) center no-repeat;}
.job_box .job_main_box{width:580px;margin:0px auto;height:268px;padding:116px 30px 116px 670px;color:#fff;}
.job_main_box_title{width:100%;height:auto;float:Left;font-size:36px;}
.job_main_box_dis{width:100%;height:auto;float:Left;font-size:14px;line-height:25px;padding-top:15px;border-bottom:#f5f5f5 1px solid;padding-bottom:20px;}
.job_main_box_list{width:100%;height:auto;float:Left;padding-top:15px;}
.job_main_box_list ul{margin:0px;padding:0px;list-style-type:none;}
.job_main_box_list li{width:565px;height:32px;line-height:32px;float:Left;background:url(../images/bai.jpg) 0px center no-repeat;padding-left:15px;}
.job_main_box_list li a{color:#fff;}
.job_main_box_list li a:hover{color:#f5f5f5;}

.job_des_box{width:406.66px;height:auto;float:Left;}
.job_des_box_title{width:100%;height:45px;line-height:45px;float:Left;font-size:16px;color:#2c2c2c;font-weight:bold;}
.job_des_box_pic{width:406px;height:auto;float:Left;}
.job_des_box_zi{width:100%;height:auto;float:left;line-height:25px;padding-top:15px;}
.fencai_des_box{width:406.66px;height:auto;float:Left;margin-right:30px;margin-bottom:30px;}
.fencai_des_box_zi{width:406px;height:45px;min-height:45px;float:left;line-height:45px;padding:0px;background-color:#f5f5f5;text-align:center;}

.public-margin-right-30{margin-right:30px;}
.public-margin-top-30{margin-top:30px;}

.yeji{width:1280px;height:auto;float:Left;}

/*业绩与应用*/

div,ul,li,body,p{margin:0; padding: 0; font-size: 14px; font-family: "Microsoft Yahei", "微软雅黑", sans-serif;}
.clearfix::after{ clear: both; display: block; height: 0; content: '';}
ul,li{ list-style: none;}
#jcontainer{ width:1280px; margin: 0 auto;}
#jcontainer li{ position:relative;width: 303px;border: 0px solid #ccc; height: 198px; line-height: 198px; text-align: center; margin: 0px 22px 22px 0px; float: left; cursor: pointer;  overflow: hidden;}
#jcontainer li p{ height:198px; width: 100%; position: absolute; left: 0; top: -198px; color: #ffffff;
	z-index: 2; }
#jcontainer li .img{ width: 303px; height: 198px; display: block;
	-moz-transition:.5s ease-in;
	-webkit-transition:.5s ease-in;
	-o-transition:.5s ease-in;
	-ms-transition:.5s ease-in;
	transition:.5s ease-in;}
#jcontainer li:hover .img{ transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1)}
#jcontainer li p i{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0;z-index: -1;background: #000000; opacity: 0.7; -moz-opacity:0.7; filter:alpha(opacity=70); font-size:20px; }
#jcontainer li p span{ display: block; width: 94%; margin: 0 auto; line-height: 24px; font-size:16px; padding-top:80px;}
#jcontainer li p a{ display: block; position: absolute; width: 32px; height: 32px; left:50%; margin-left: -16px; top:20px; background:url("../images/link.png") no-repeat 0 0;}
.explain{ display: block; margin:0 auto;}
.public_margin_right_none{margin-right:0px;}

/*常见问题*/

.cjwt_dis{width:1280px;height:auto;float:left; border-bottom:#ccc 1px dashed;padding-bottom:35px;padding-top:15px;}
.cjwt_title{width:1280px;height:45px;line-height:45px;float:left;}
.cjwt_title_l{width:1000px;height:45px;line-height:45px;float:left;color:#2c2c2c;font-size:16px;}
.cjwt_title_l a{}
.cjwt_title_l a:hover{font-weight:bold;color:#000;}
.cjwt_title_r{width:280px;height:45px;line-height:45px;float:Left;text-align:right;}
.cjwt_nr{width:1280px;height:auto;float:left;padding:0px 0px;line-height:27px;}
.cjwt_more{width:1280px;height:auto;float:Left;padding-top:15px;text-align:right;}
.cjwt_more a{padding:10px 40px;color:#2c2c2c;border:#2c2c2c 1px solid;}
.cjwt_more a:hover{padding:10px 40px;color:#fff;background-color:#D52B1E;}

/*我们的服务*/
.services_container_fluid{width:100%;height:auto;float:Left;margin:0px;background-color:#D52B1E;padding:40px 0px;}
.services_container{width:1280px;height:auto;background-color:#D52B1E;margin:0px auto;}
.services_title{width:1280px;height:auto;float:left;font-size:18px;line-height:38px;}
.services_title span{font-size:36px;}

.services_main_fluid{width:100%;height:auto;float:Left;margin:0px;margin-top:30px;}
.services_main{width:1280px;height:auto;margin:0px auto;background-color:#fff;}
.services_main_item_box{width:305px;height:auto;float:Left;margin-right:20px;}
.services_main_item_title{width:305px;height:45px;line-height:45px;text-align:center;font-size:16px;background-color:#ccc;color:#2c2c2c;}
.services_main_item_pic{width:305px;height:auto;float:left;}
.services_main_item_bom{width:305px;min-height:80px;float:left;padding:20px 0px;background-color:#f5f5f5;}
.services_main_item_bom li{width:275px;height:27px;line-height:27px;float:Left;color:#2c2c2c;background:url(../images/hei.jpg) 10px center no-repeat;padding-left:30px;}
.services_main_item_bom li a{width:305px;height:27px;line-height:27px;float:Left;color:#2c2c2c;}
.services_main_item_bom li a:hover{width:305px;height:27px;line-height:27px;float:Left;color:#D52B1E;}

.fuwu_box{width:1280px;height:auto;float:Left;}
.fuwu_box_pic{width:538px;height:352px;float:Left;}
.fuwu_box_dis{width:720px;min-height:352px;float:Left;margin-left:22px;line-height:25px;}
.fuwu_box_dis span{font-size:16px;font-weight:bold;}

.richu{width:1280px;height:auto;float:left;font-size:16px;text-align:center;padding:30px 0px;}

.yeji-boxs{width:625px;height:;float:left;}
.yeji-boxs-pic{width:625px;height:469px;float:left;}
.yeji-boxs-title{width:625px;height:45px;line-height:45px;float:Left;background-color:#000;color:#fff;text-align:center;}


.containerxxx, .containerxxx *{margin:0; padding:0;}

.containerxxx{width:640px; height:430px; overflow:hidden;position:relative;}

.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:640px; height:430px; display:block;}

.slider2{width:2000px;}
.slider2 li{float:left;}


.num{ position:absolute; right:5px; bottom:5px;}
.num li{
	float: left;
	color: #fff;
	text-align: center;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	overflow: hidden;
	margin: 3px 1px;
	border: 0px solid #FF0000;
	background-color: #FE5500;
}
.num li.on{
	color: #000;
	line-height: 21px;
	width: 21px;
	height: 21px;
	font-size: 16px;
	margin: 0 1px;
	border: 0;
	background-color: #fff;
	font-weight: bold;
}

/* ÀÁÈËͼ¿â ËѼ¯ÕûÀí www.lanrentuku.com */
*{ margin:0; padding:0; list-style:none;}
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
#playBox{ width:640px; height:430px; margin:0px auto; background:#333; position:relative; overflow:hidden;}
#playBox .oUlplay { width:99999px; position:absolute; left:0; top:0;}
#playBox .oUlplay li{ float:left;}
#playBox .pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:140px; left:10px; z-index:10;}
#playBox .next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:140px; right:10px; z-index:10;}
#playBox .smalltitle {width:721px; height:10px; position:absolute; bottom:15px; z-index:10}
#playBox .smalltitle ul{ width:120px; margin:0 auto;}
#playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
#playBox .smalltitle .thistitle{ background:#69aaec;}