@charset "utf-8";
/*初始样式*/
body{ color:#333; font-size:14px;font-family: "Microsoft Yahei";} /*网站字体颜色*/
body,ul,ol,li,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,span,input{margin:0;padding:0;list-style:none;}
a { color:#333; text-decoration:none;font-family: "Microsoft Yahei";}  /*for ie f6n.net*/
a:focus{outline:0;} /*for ff f6n.net*/
/*a:hover { text-decoration:underline;}*/
img{border:none;}
.vam { vertical-align:middle;}
.clear{clear:both; height:0; line-height:0; font-size:0;}
p{ word-spacing:-1.5px;font-family: "Microsoft Yahei"; }
h1,h2,h3,h4,h5,h6{ font-family:"Microsoft Yahei";}

.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative;}
i,em{ font-style:normal;}
.clearfix:after{content:"";height:0;clear:both;display:block;visibility:hidden;}
.clearfix{zoom:1;}
/* -- 页面整体布局 -- */
.content{ width:1200px; margin:0 auto;font-family: "Microsoft Yahei";}


.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;}
.tit span{display:block;font-size: 42px;color: #333;line-height:42px;font-weight: bold;}
.tit i{display:block;font-size: 20px;line-height:20px;color: #666666;margin-top: 14px;letter-spacing: 2px;}


/*banner*/
.banner{position: relative;}
.banner li{width: 100%;}
.banner li img{display: block;width: 100%;}
.banner .content{position: relative;}
.ban_pg{position: absolute;left: 0;bottom: 40px;height: 5px;z-index: 10;width: 100%;text-align: center;}
.ban_pg i{display: inline-block;width: 150px;height: 5px;background: #daddda;margin: 0 8px;vertical-align: top;}
.ban_pg i.on{background: #014da1;opacity: 1;}


.search{height: 90px;background: url(../images/sea_bg.jpg) no-repeat center;box-sizing: border-box;position: relative;z-index: 50;}
.search h2{ display: block;float: left;font-weight: normal;width: 360px;font-size: 22px;line-height: 22px;color: #fff;padding-top: 27px;}
.search p b{float: left;height: 90px;line-height: 82px;font-size: 14px;color: #999999;font-weight: normal;}
.search p{float: left;height: 90px;line-height: 82px;font-size: 14px;color: #999999;}
.search p a{color: #999999;float: left;margin-right: 20px;}
.search p a:hover{color: #f08100;}
.s_box{float: right;width: 330px;height: 90px;box-sizing: border-box;position: relative;border-bottom: 1px solid #f08100;}
.s_box .txt{float:left;width:306px;height:90px;line-height: 90px;font-size:14px;color:#333;border:none;background: none;outline: 0;}
.s_box .btn{float: left;width:21px;height: 22px;border: 0;background: url(../images/sea.png) no-repeat center;outline: 0;cursor: pointer;margin-top: 29px;}

.yz{ padding-top: 100px;box-sizing: border-box;background: url(../images/yz_bg.jpg) no-repeat center;height: 800px;}
.yz h2{ display: block;font-size: 40px;color: #1a1a1a;line-height: 40px;font-weight: normal; text-align: center;}
.yz h2 i{ display: inline-block;font-size: 56px; }
.yz p{ display: block;font-size: 16px;color: #666666;line-height: 26px;font-weight: normal; text-align: center;padding-top: 32px;}
.yz .yz_t{ margin: 60px 50px 35px;}
.yz_t li{ float: left;position: relative;margin-right: 152px;height: 60px;position: relative;}
.yz_t li.cur{ border-bottom: 3px solid #014da1; }
.yz_t li.cur:after{ position: absolute;left:50%;margin-left: -15px;top: 60px;width: 0;height: 0;border-style: solid;border-width: 10px 15px 0 15px;border-color: #014ca1 transparent transparent transparent; content: "";}
.yz_t li:last-child{ margin-right: 0; }
.yz_t li em{ display: inline-block;width: auto;height: 32px;overflow: hidden;vertical-align: bottom; }
.yz_t li em img{ display: block;width: auto;height: 32px;margin: 0 auto;}
.yz_t li.cur em img:nth-child(1){margin-top: -32px;  }
.yz_t li span{ display: inline-block;font-size: 18px;color: #666666;line-height: 18px;margin-left: 8px;}

.yz_con{ position: relative; }
.yz_con .tempWrap{ width: 1200px!important; }
.yz_con li{ float: left; width: 377px;margin-right: 32px;}
.yz_con li img{ display: block;width: 377px;height: 282px; }
.yz_con li span{ display: block;font-size: 14px;color: #333333;line-height: 36px;text-align: center; }
.sprev,.snext{position: absolute;top:123px;width:39px ;height: 39px;z-index: 40;cursor: pointer;}
.sprev{left:-58px;background: url(../images/sprev.png) no-repeat center;}
.snext{right:-58px;background: url(../images/snext.png) no-repeat center;}
.sprev:hover{background: url(../images/sprevh.png) no-repeat center;  }
.snext:hover{background: url(../images/snexth.png) no-repeat center;  }



.pro{ padding-top: 85px;}
.kj{height: 502px;margin-top: 40px;}
.kj dt{ display: block;width: 569px;height: 502px;float: left;}
.kj dt img{ display: block;width: 569px;height: 502px;transition: all 0.5s; }
.kj dd{ float: right;width: 560px; }
.kj dd h3{ display: block;line-height: 80px;height: 80px;border-bottom: 1px solid #e5e5e5; font-size: 30px;color: #333;}
.kj dd p{ font-size: 15px;line-height: 30px;color: #666;padding-top: 24px;height: 118px;box-sizing: border-box; }
.kj dd ul{width: 520px;height: 304px;}
.kj dd li{ float: left;position: relative;width: 260px;height: 152px;border-right: 1px dashed #ededed;border-bottom: 1px dashed #ededed;box-sizing: border-box;}
.kj dd li:nth-child(2n){ border-right: 0; }
.kj dd li:nth-child(3),.kj dd li:nth-child(4){ border-bottom: 0; }
.kj dd li em{ display: block; width: 64px;height: 60px;overflow: hidden;margin: 26px auto 0;}
.kj dd li img{ display: block;width: 64px;height: 60px;transition:all 0.3s;}
.kj dd li.cur{ box-shadow: 0 0 16px rgba(0,0,0,0.12); border-right: 0;border-bottom: 0;}
.kj dd li.cur em img:nth-child(1){margin-top: -60px;}
.kj dd li span{ display: block;font-size: 18px;color: #333333;line-height: 18px;margin-top:18px ;text-align: center;font-weight: bold;text-align: center;position: relative;}
.kj dd li.cur span{ color: #014da1; }
/*.kj dd li span:after{position: absolute;left: 50%;top:28px;background:#5b70b0; width: 22px;height: 2px;content: "";margin-left: -11px;}*/


.pro_con{ margin-top: 70px;padding-bottom: 100px; }
.pro_con li{ float: left;width: 202px;height: 161px;border:2px solid #e5e5e5;box-sizing: border-box;  margin-right: 47.5px;position: relative;}
.pro_con li:last-child{ margin-right: 0; }
.pro_con li em{ display: block;font-size: 42px;color: #999999;height: 36px;padding-top:22px ;text-align: center;position: relative;overflow: hidden;}
.pro_con li b{ display: block;font-size: 18px;color: #333;padding-top:38px ;line-height:18px;text-align: center;position: relative;overflow: hidden;}
.pro_con li b:after{position: absolute;left: 50%;top:19px;background:#f08100; width: 20px;height: 2px;content: "";margin-left: -10px;}
.pro_con li span{ display: block;font-size: 12px;color: #999999;line-height: 12px;padding-top:6px ;text-align: center;text-align: center;font-family: Arial;text-transform: uppercase;}
.pro_con li img{ width: 202px;height: 0;display: block;transition: all 0.5s;position: absolute;left:0;bottom: 0; }
.pro_con li:hover{ border: 0; }
.pro_con li:hover img{ height: 161px;}


.lc{padding-top: 48px;height: 298px;background: url(../images/liu_bg.jpg) no-repeat center; box-sizing: border-box;}
.lc h2{ display: block;font-size: 32px;line-height: 32px;font-weight: bold;text-align: center;color: #fff; }
.lc ul{ margin-top: 36px;position: relative; }
.lc li{ float: left;position: relative;padding: 0 40px; }
.lc li:first-child{ padding-left: 0; }
.lc li:last-child{ padding-right: 0; }
.lc li:after{position: absolute;width: 23px;height: 15px;background: url(../images/lc_jt.png) no-repeat center;content: "";right: -11px;top: 27px;}
.lc li em{ display: block;width: 79px;height: 79px;overflow: hidden;margin: 0 auto; }
.lc li em img{ display: block;width: 79px;height: 79px; }
.lc li span{ display: block;font-size: 16px;line-height: 16px;color: #fff;text-align: center;font-weight: normal;padding-top:18px;  }
.lc li i{ display: block;font-size: 12px;line-height: 12px;color: #fff;text-align: center;font-weight: normal;padding-top:10px;text-transform: uppercase;opacity: 0.6;  }
.lc li.cur em img {animation-duration: 2s;animation-name: flipInY;}
.lc li.cur em img:nth-child(1){ margin-top: -79px; }
.lc li:last-child:after{ background: 0; }


.pz{ padding: 100px 0;background: #f5f5f5; }
.pz_con{ height: 527px;margin-top: 37px;border-left: 1px solid #e7e7e7;box-sizing: border-box; }
.pz_con li{ transition: all ease .5s }
.pz_con li .pz_s{ display: none;float: left; height: 527px;padding: 0 34px;border-right: 1px solid #e7e7e7; transition: all ease .5s;width: 0;}
.pz_con li .pz_s>img{ display: block;width: 527px;height: 339px; }
.pz_con li .pz_s h3{ margin-top: 30px; }
.pz_con li .pz_s h3 span{ display: block;width: 360px;float: left; font-size: 24px;font-weight: bold;color: #014DA1;line-height: 24px;}
.pz_con li .pz_s h3  em{ display: block;font-size: 24px;font-family: Candara;font-weight: bold;color: #014DA1;line-height: 24px;padding-bottom: 12px; }
.pz_con li .pz_s h3 img{ display: block;width: 48px;height: 50px;float: right; }
.pz_con li .pz_s p{ font-size: 14px;color: #666;line-height: 24px;padding-top: 20px;}
.pz_con li .pz_s em>img{display: block;width: 21px;height: 21px;margin-top: 12px;}

.pz_con li.cur .pz_s{ display: block;width: 527px; }
.pz_con li.cur .pz_t{ display: none;float: left; }
.pz_con li .pz_t{ width: 160px;padding: 0 20px;border-right: 1px solid #e7e7e7; float: left;height: 527px;transition: all ease .5s;}
.pz_con li .pz_t>img{ display: block;width: 160px;height: 238px; }
.pz_con li .pz_t b{ display: block;font-size: 20px;font-weight: bold;color: #333333;line-height: 32px;padding-top: 40px; }
.pz_con li .pz_t p{ font-size: 14px;color: #666;line-height: 24px;padding-top: 55px;height: 48px;display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2;  overflow: hidden; text-overflow: ellipsis;}
.pz_con li .pz_t em>img{display: block;width: 23px;height: 23px;margin-top: 60px;}

.dz{ padding-top: 88px; }
.dz_con{ margin-top: 40px; }
.dz dl{height: 690px;margin-bottom: 80px;}
.dz dt{ display: block;float: right;width: 551px;height: 700px; position: relative;}
.dz dt img{ display: block;width: 551px;height: 700px; position: relative;}
.dz dd{width: 588px;float: left;box-sizing: border-box;height: 700px;}
.dz_s li a{ display: block;font-size:16px;color: #333;font-weight: normal;text-align: center;height: 50px;line-height: 46px;width: 175px;border-radius: 30px;transition: all 0.5s;border:2px solid #dcdcdc;box-sizing: border-box;float: left;margin-right: 31px;margin-bottom: 27px;font-weight: bold;}
.dz_s li:nth-child(3n) a{ margin-right: 0; }
.dz_s li.cur a,.dz_s li:hover a{background: #f08100;color: #fff;border-color: #f08100;}
.dz dd .dz_d{ position: relative;margin-top: 18px; }
.dz dd .dz_d li{ float: left;width: 287px; }
.dz dd .dz_d li:nth-child(2n){ float: right; }
.dz dd .dz_d li i{ display:block;width: 287px;height: 214px;overflow:hidden;}
.dz dd .dz_d li img{ display: block;width: 287px;height: 214px;transition:all 0.5s;}
.dz dd .dz_d li:hover i img{ transform:scale(1.05);}
.dz dd .dz_d li span{ display: block;font-size: 14px;color: #333333;line-height: 52px;text-align: center;height: 52px; }

.xad{ height: 200px;background: url(../images/xad_bg.jpg) no-repeat center;margin-top: 90px;}
.xad_l{ float: left;width: 700px; }
.xad h2{ display: block;font-size:36px;line-height: 36px;color: #fff;padding-top: 50px;font-weight: bold;}
.xad h2 em{ font-size: 17px;color: #fff;line-height: 17px;padding-top: 6px;opacity: 0.2;text-transform: uppercase;display: block;font-weight: normal; }
.xad h3{ padding-top: 18px;font-weight: normal;}
.xad h3 span{ display: block;float: left;padding-left: 26px;padding-right: 32px;font-size: 20px;color: #fff;line-height: 20px;background: url(../images/xad_ic.png) no-repeat left; }
.xad_r{ padding-top: 58px;width: 260px;float: right; }
.xad p{ display: block;font-size:14px;line-height: 44px;color: #fff;text-align: right}
.xad p b{ font-size:24px;line-height: 50px;color: #fff; vertical-align: middle;font-family: Arial;}
.xad p a{ display: block;width: 140px;height: 40px;line-height: 40px;color: #fff;text-align: center;font-size: 14px;background: #f08100;border-radius: 22px;float: right;transition:all 0.5s;margin-bottom: 4px;}
.xad p span{ transition: all 0.5s;
    display: block;
    float: left;}
.xad p .zx:hover{ animation: shake 1.5s linear;}
.xad p span:hover{ margin-top:-5px;}




.ys{ padding-top: 96px; }
.ys_t{ margin-top: 25px;}
.ys_t li{ float: left;margin-right: 181px;}
.ys_t li:last-child{ margin-right: 0; }
.ys_t li i{ overflow: hidden;width: 50px;height: 52px;display: inline-block;vertical-align: -14px;}
.ys_t li i img{width: 50px;height: 52px;display: block;transition:all 0.5s;}
.ys_t li span{ display: inline-block;font-size:24px;color: #333333;line-height: 24px;margin-left: 15px;}
.ys_t li.cur span,.ys_t li.on span{ color: #014da1;}
.ys_con{position: relative;margin-top:30px; }
.ys_con .tempWrap{ overflow: visible!important; }
.ys_con dl{ position: relative; }
.ys_con dt,.ys_con dt img{ display: block;width: 100%; }
.ys_con dl dd{position: absolute;left: 50%;bottom:60px;height: 130px;overflow: hidden;width: 1200px;background:#fff;margin-left: -600px;}
.ys_con dl dd h3{display: block;font-size: 26px;line-height: 40px;color: #ffffff;padding-top: 24px;font-weight: normal;float: left;background: #014da1;width: 264px;height: 130px;text-align: center; }
.ys_con dl dd h3 b{ display: block;}
.ys_con dl dd p{ font-size: 14px;line-height: 30px;color: #666666;float: left;width: 760px;padding: 34px 30px 0;box-sizing: border-box;}
.ys_con dl dd .more{ display: block;width: 130px;height: 40px;line-height: 40px;color: #fff;text-align: center;font-size: 14px;background: #f08100;border-radius: 22px;float: right;transition:all 0.5s;margin-top: 45px;margin-right: 45px;}
.ys_con dl dd .more:hover{animation: shake 1.5s linear;}
.ys_pg{position: absolute;width: 100%;right: 0;bottom: -11px;z-index: 10;height: 22px;text-align: center;}
.ys_pg i{display: inline-block;width: 22px;height: 22px;border-radius: 100%;box-sizing: border-box;margin:0 66px;background: #014da1;}
.ys_pg i.cur{background: #ffffff;border:5px solid #f08100;box-sizing:border-box; }

.news{ padding-top: 100px; }
.news_con{ margin-top: 50px;}
.news1{ width: 376px;margin-right:36px; float: left; }
.news2{ width: 376px;margin-right:36px;  float: left; }
.news3{ width: 376px;  float: left; }
.news h3 a{ display: block;height: 28px;margin-bottom: 30px;font-weight: bold;font-size: 20px;color: #333333;text-transform: uppercase;line-height: 28px;font-family: Arial;padding-left: 16px;border-left:3px solid #014da1;position: relative;}
.news h3 a:after{ position: absolute;left: 111px;top: 14px;width: 265px;height: 1px;background: #d9d9d9;content: "";}
.news dt{width: 376px;height: 212px;overflow: hidden;}
.news dt img{width: 376px;height: 212px;transition: all 0.5s;}
.news dt:hover img{transform: scale(1.05);}
.news dd { height: 345px;border-bottom: 2px solid #e6e6e6;position: relative;padding-top: 36px;box-sizing: border-box; }
.news dd:after{ position: absolute;left:0;bottom: -2px;width: 0;height: 2px;background:#014da1;content: "";transition: all 0.5s; }
.news dd span{ display: block;font-size: 16px;color: #5f5f5f;height: 48px; }
.news dd span em{ display: inline-block;width: 48px;height: 48px;font-size: 28px;color: #fff;background: #014da1;margin-right:12px;text-align: center; line-height: 48px;vertical-align: bottom; }
.news dd span img{ display: block;width: 27px;height: 22px;float: right; }
.news dd h4 a{ display: block;margin-top: 36px;font-weight: bold;font-size: 16px;color: #333333;line-height: 16px;}
.news dd p{ display: block;margin-top: 24px;font-size: 14px;color: #555555;line-height: 26px;width: 354px;}
.news dd .more{display: block;width: 108px;height: 32px;line-height: 32px;border-radius: 16px;background: #f2f2f2;text-align: center;font-size: 14px;color: #555555;margin-top: 45px;transition: all 0.5s;}
.news dd .more:hover{ margin-top: 40px;background: #f08100;color: #fff; }
.news dd:hover:after{ width: 376px; }

/*abt*/
.abt{margin-top:90px;}
.abt dl{ position: relative;}
.abt dt img{display: block;width: 100%;} 
.abt dd{position: absolute;left:50%;width: 1066px;margin-left: -533px;top:110px; }
.abt dd .tit span,.abt dd .tit i{ color: #fff; }
.abt dd p{font-size: 15px;color: #fff;line-height: 36px;text-align: center;padding-top: 45px;letter-spacing: 1.5px;}
.abt dd .more img{display: block;width: 74px;height: 74px;margin: 50px auto 0;}

.abt  h3{height: 155px;font-weight: normal;padding-top: 40px;box-sizing: border-box;}
.abt  h3 a{float: left;margin-right: 299px;box-sizing: border-box;transition: all 0.3s;}
.abt  h3 a:last-child{margin-right: 0; }
.abt h3 a i{display: block;height: 75px;overflow: hidden;width: 75px;float: left;font-size:0;}
.abt  h3 a i img{position: relative;transition: all 0.5s;height: 75px;width: 75px;}
.abt  h3 a span{display: block;font-size: 22px;color: #333333;line-height: 22px;transition: all 0.3s;margin-top: 14px;display: block;float: left;margin-left: 21px;}
.abt  h3 a span em{ display: block;font-size: 14px;color: #999999;line-height: 14px;padding-top: 12px;text-transform: uppercase;font-family: Arial; }
.abt  h3 a.cur i img:nth-child(1){margin-top: -75px;}


html {font-size: 10px;}
@media screen and (min-width:800px) {
    html {
        font-size:11px;
    }
}
@media screen and (min-width:1024px) {
    html {
        font-size:13px;
    }
}
@media screen and (min-width:1280px) {
    html {
        font-size:14px;
    }
}
@media screen and (min-width:1440px) {
    html {
        font-size:16px;
    }
}
@media screen and (min-width:1600px) {
    html {
        font-size:18px;
    }
}
@media screen and (min-width:1920px) {
    html {
        font-size:20px;
    }
}

@-webkit-keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 }
@-webkit-keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 }
@-webkit-keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }
@-webkit-keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 }
@-webkit-keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }
@-webkit-keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
@keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
.zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
.zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
@-webkit-keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }
@-webkit-keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }
@keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-moz-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-webkit-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-o-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}