@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;}
.white,.whites{position: relative;overflow: hidden;}
.white:after,.whites:after{content: ''; cursor: pointer; position: absolute; left: -100%; top: 0; width:100%; height:100%; background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); transform: skewx(-25deg); }
.white:hover:after{left:100%; -moz-transition:1s; -o-transition:1s; -webkit-transition:1s; transition:1s;}
.whites:hover:after {left:100%; -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s;}

/* -- 页面整体布局 -- */
.content{ width:1200px; margin:0 auto;font-family: "Microsoft Yahei";}
.footer_xia_nr p{display:block!important;
}

.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;}
.tit span{display:inline-block;font-size: 40px;color: #333;line-height:40px;}
.tit i{display:block;font-size: 18px;line-height:18px;color: #6b6b6b;margin-top: 18px;position: relative;}


/*banner*/
.banner{height: 719px;position: relative;}
.bdu{width: 100% !important;height: 719px;}
.bdu li{width: 100% !important;height: 719px;position:relative;}
.bdu li a{display: block;height: 719px;}
.bdu li img{height:719px;margin-left: -960px;position:absolute;left:50%;}
.hdu{position: absolute;width: 100%;height: 10px;right: 0;bottom: 44px;text-align: center;}
.hdu li{display: inline-block;width: 14px;height: 14px;background: #fff;margin:0 10px;border-radius: 7px;}
.hdu li.on{background: #3da83f;}


.search{height: 60px;border-bottom: 1px solid #e5eaef;}
.search p{float: left;height: 60px;line-height: 60px;font-size: 14px;color: #666666;}
.search p b{ color: #999999;float: left;font-weight: normal;margin-right: 20px;}
.search p a{ font-size:14px ;display: block;float: left;color: #999999;line-height: 60px;margin-right: 19px;}
.search p a:hover{color: #3da83f;}
.s_box{float: right;margin-top:13px;width: 355px;height: 35px;background: 0;}
.s_box .input1{float:left;width:286px;height:35px;line-height: 35px;font-size:14px;color:#333;outline: 0;padding-left: 20px;background: 0;border:1px solid #e5eaef;border-right: 0;box-sizing: border-box;}
.s_box .input2{float: left;width:42px;height: 35px;border: 0;background: url(../images/sea.png) no-repeat center;outline: 0;cursor: pointer;}

.yz{ padding-top: 100px;box-sizing: border-box;}

.yz li{ float: left;position: relative;transition:all 0.3s;margin-right: 130px;}
.yz li p{ padding-left: 28px;height: 145px;border-left: 3px solid #434343; padding-top: 10px;box-sizing:border-box;}
.yz li:last-child{ margin-right: 0; }
.yz li em{ display: block; width: 54px;height: 54px;overflow: hidden;}
.yz li img{ display: block;width: 54px;height: 54px;transition:all 0.3s;}
.yz li.cur em img:nth-child(1){margin-top: -54px;}

.yz li span{ display: block;font-size: 26px;color: #333333;line-height: 26px;margin-top:22px ;font-weight: bold;letter-spacing: 2px;}
.yz li i{ display: block;font-size: 18px;color: #333333;line-height: 18px;margin-top:14px ;opacity: 0.8;}
.yz li b{ padding-left: 28px; display: block;font-size: 20px;color: #333333;line-height: 20px;margin-top:45px ;}
.yz li:hover{ margin-top: -6px;}
.yz li.cur span{color: #3EA840; }
/*background: linear-gradient(0deg, #4EC85C 0%, #16B6C8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;*/


.pro{ background: #f7f7f7;padding-top: 80px;margin-top: 80px; padding-bottom: 80px;}
.pro_con{ margin-top: 50px;padding-bottom: 23px; }
.pro dl{ float: left;width:31.7%;margin-right: 2.45%;  box-shadow: 0 0 20px rgba(0,0,0,0.1);transition:all 0.5s;}
.pro dl:last-child{ margin-right: 0; }
.pro dt{display: block;width: 100%;overflow: hidden;  }
.pro dt img{ display: block;width: 100%;transition:all 0.5s;height: 297px;}
.pro dl:hover img{ transform: scale(1.05); }
.pro dl:hover{ margin-top: -6px; }
.pro dd{ padding: 0 34px;background: #fff;height: 320px;position: relative;}
.pro h3 b{display: inline-block;width: 25px;height: 5px;color: #3da83f;content: "";background: #3da83f;margin: 0 18px;vertical-align: middle;}
.pro h3 a{ display: block;text-align:center;font-size: 28px;font-weight: bold;line-height: 28px;padding-top: 10px;  }
.pro h4{ display: block;text-align:center;font-size: 14px;font-weight: normal;line-height: 14px;padding-top: 14px;color: #dddddd;height: 38px;border-bottom: 1px solid #e5e5e5;margin-bottom: 20px; text-transform: uppercase; }
.pro p{ font-size: 16px;line-height: 30px;color: #535353;text-align: center; }
.pro dl.cur dd:after{ position: absolute;left: 0;bottom: -2px;width:100%;height: 2px;background:#4EC85C;background: linear-gradient(-90deg, #16B6C8, #4EC85C);content: "";}
.pro dl.cur dd:before{ position: absolute;left: 50%;bottom: -43px;width:86px;height: 86px;background:url(../images/pro_yuan.png) no-repeat center;content: "";margin-left: -43px;z-index: 50; }

.case{ padding: 80px 0; }
.case_t{ margin-top: 50px; height: 51px;margin-bottom: 30px;}
.case_t li{ float: left;margin-right: 265px; }
.case_t li:last-child{ margin-right: 0; }
.case_t li p{ display:block;width:51px; height:51px;  text-align: center; position:relative;float: left;}
.case_t li p b{position:absolute;width:100%;height:100%;top:0;left:0;-webkit-transform: translateX(0) rotate(0deg);transform: translateX(0) rotate(0deg);-webkit-transition: all 0.35s ease-out;transition: all 0.35s ease-out;margin: 0 auto;}
.case_t li p em{position:absolute;width:100%;height:100%;top:0;left:0;opacity:1;visibility:hidden;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.1s ease 0.2s;transition: all 0.1s ease 0.2s;margin: 0 auto;}
.case_t li p b img,.case_t li p em img{ display: block;width: 51px;height: 51px;}
.case_t li.cur p b,.case_t li:hover p b{opacity: 0;visibility:hidden;-webkit-transform: translateX(100%) rotate(180deg);transform: translateX(100%) rotate(180deg);}
.case_t li.cur p em,.case_t li:hover p em{visibility:visible;opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.case_t li span{ display: block;font-size: 24px;color: #333333;line-height: 51px;margin-left: 20px;font-weight: bold;float: left;}

.case_s dl{ float: left;width: 398px;height: 560px;position: relative;}
.case_s dt{ display: block;width: 398px;height: 560px;overflow: hidden;}
.case_s dt img{display: block;width: 398px;height: 560px;transition:all 0.5s; }
.case_s dt:hover img{ transform:scale(1.05);}
.case_r{ float: right;width: 780px;}
.case_s li{ display: block;width: 376px;float: left;}
.case_s li:nth-child(2n){float: right;}
.case_s li i{display: block;width: 376px;height: 211px;overflow: hidden; }
.case_s li i>img{display: block;width: 376px;height: 211px;transition:all 0.5s; }
.case_s li:hover img{ transform:scale(1.05);}
.case_s li h4{ display: block;font-size: 18px;line-height: 50px;color: #333333;font-weight: normal;height: 50px;border-bottom: 2px solid #e5e5e5;margin-bottom: 37px;position: relative;background:url(../images/case_jt.png) no-repeat right 18px; }
.case_s li h4:after{ position: absolute;left: 0;bottom: -2px;width: 0;height: 2px;background:#4EC85C;background: linear-gradient(-90deg, #4EC85C, #16B6C8);content: "";transition:all 0.5s;}
.case_s li:hover h4{background:url(../images/case_jth.png) no-repeat right 18px; }
.case_s li:hover h4:after{ width: 100%;}
.case2{ margin-top: -20px;}

.pt{ padding-top: 80px;background: url(../images/pt_bg.jpg) no-repeat center;box-sizing: border-box;height: 817px; }
.pt_con{ margin-top: 48px; }
.pt_con dl{ float: left;width: 300px;padding: 0 76px;height:435px; }
.pt_con dl:first-child{ padding-left: 0;margin-left: -2px; }
.pt_con dl:nth-child(2){ background: url(../images/pt_line.png) no-repeat center;}
.pt_con dl:last-child{ padding-right: 0;margin-right: -2px; }
.pt_con dt{ display: block;width: 300px;height: 300px;overflow: hidden;}
.pt_con dt img{display: block;width: 300px;height: 300px;transition:all 0.5s; }
.pt_con dt:hover img{ transform:scale(1.05);}
.pt_con dl dd h3{ display: block;font-size: 20px;line-height: 20px;color: #333333;padding-top: 18px;font-weight: bold;text-align: center}
.pt_con dl dd p{ font-size: 14px;line-height: 26px;color: #666666;text-align: center;margin-top: 12px;}
.pt .more{ display: block;width: 178px;height: 46px;margin: 50px auto 0;transition: all 0.5s; }
.pt .more img{display: block;width: 178px;height: 46px;  }
.pt .more:hover{ margin: 44px auto 0; }

.ys{ padding: 80px 0; }
.ys_con{margin-top: 50px;}
.ys_con dt{position: relative;width: 935px;margin-right: -360px;overflow: hidden;height: 473px;}
.ys_con  dd{overflow: hidden; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:600px ;height:473px;}
.ys_con  h3 {position: relative;font-size: 14px;color: #dddddd ;padding-top: 90px;font-weight: 100;text-transform: uppercase;line-height: 14px;height: 84px;background: url(../images/ys_line.png) no-repeat left bottom;letter-spacing: 1.5px;}
.ys_con  h3 b{display: block;font-size: 30px;color: #333333 ;font-weight: bold;line-height: 30px;padding-bottom: 14px;letter-spacing: 0px;}
.ys_con ul{ margin-top: 72px; }
.ys_con li{ float: left;margin-right: 62px;transition: all 0.5s; }
.ys_con li:hover{ margin-top: -6px; }
.ys_con li:last-child{ margin-right: 0 }
.ys_con li img{ display: block;width: auto;height: 37px;}
.ys_con li span{ font-size: 20px;line-height: 20px;color: #333333;margin-top: 22px;display: block; }
.ys1{ height: 473px; }
.ys2{ height: 481px; }
.ys2 dt{ position: relative;width: 937px;margin-left: -360px;overflow: hidden;height: 481px;margin-top: -16px; }
.ys3 dt{ position: relative;width: 935px;margin-left: -360px;overflow: hidden;height: 472px;margin-top: -32px; }
.ys2 dd{background: url(../images/ys2_dd.jpg) no-repeat center;width: 990px;margin-right: -360px;padding-right: 360px;box-sizing: border-box;margin-top: -10px;padding-left: 30px;}
.ys2 dd li{ margin-right: 37px; }
.ys3 dd li{ margin-right: 58px; }
.zs{ margin-top: 20px; }
.zs li{ float: left;width:160px;margin-right: 47px;  }
.zs li i{ display: block;width: 160px;height:213px; overflow: hidden; }
.zs li img{ display: block;width: 160px;
/*height: 213px;*/
transition: all 0.5s; }
.zs li span{ display: block;font-size: 14px;color: #333333;text-align: center;line-height: 18px;padding-top: 14px; }

.xad{ height: 350px;background: url(../images/xad_bg.jpg) no-repeat center;}
.xad h2{ display: block;font-size:30px;line-height: 30px;color: #fff;padding-top: 70px;font-weight: normal;text-align: center;}
.xad h2 b{ font-size: 36px;line-height: 36px;display: block;padding-top: 20px;}
.xad h3{ display: block;font-weight: normal;padding-top: 40px;color: #fff;height: 32px; margin-left: 212px;}
.xad h3 span{ display: block;float: left;padding-left: 42px;margin-right: 60px; font-size: 20px;color: #fff;line-height: 26px;background: url(../images/xad_ic.png) no-repeat left;transition:all 0.5s;}
.xad h3 span:hover{ margin-top:-5px; }
.xad p{ display: block;font-size:20px;line-height: 44px;color: #fff;padding-top: 40px;}
.xad p a{ display: block;width: 133px;height: 43px;line-height: 43px;color: #fff;text-align: center;font-size: 18px;background: url(../images/zx.png) no-repeat right;border-radius: 22px;float: left;margin-right: 32px;transition:all 0.5s;margin-left: 398px;}
.xad p span{ transition: all 0.5s;
    display: block;
    float: left;}
.xad p a:hover{ margin-top:-5px;}
.xad p span:hover{ margin-top:-5px;}




/*news*/
.news{padding: 80px 0px;}
.new{padding-top: 80px;}
.new_con{margin-top: 45px;height: 520px;}
.new_l{width: 720px;padding: 0 30px;height: 520px;box-shadow: 0 0 20px rgba(0,0,0,0.10);}
.new_l h3{ display: block;padding-top: 40px;padding-bottom:20px ;}
.new_l h3 em a{height: 26px;line-height: 26px;font-size: 26px;color: #333333;display: block;float: left;font-weight: normal;}
.new_l h3 em a img{width:24px ;height: 26px;vertical-align: -3px;margin-right: 8px;}
.new_l h3 span a{float: right;}
.new_l h3 span a img{width:20px ;height: 13px; margin-top: 8px;}
.new_l dl{height: 160px;}
.new_l dt img{display:block;width: 320px;height: 160px;float: left;}
.new_l dd { padding-left: 35px;width: 350px;float:left;}
.new_l dd h5{margin:0 0 16px;display: block; }
.new_l dd h5 a{display:block;font-size: 22px;color: #333332;line-height: 22px;font-weight: normal;}
.new_l dd p{font-size: 16px;color: #666666;line-height: 30px;}
.new_l dd span{float: right;font-size:16px ;line-height: 16px;color:#888888 ;margin-top: 40px;}
.new_list{padding-top:25px; }
.new_list p{line-height: 36px;font-size: 14px;width:335px;float: left;margin-right: 10px;margin-bottom:10px;padding-left: 20px;height: 75px;padding-top: 20px;background:url(../images/news_jt.png) no-repeat 304px 30px #f5f5f5;}
.new_list p:nth-child(2n){margin-right: 0;}
.new_list p a{color: #333333;font-size: 18px;line-height: 18px;}
.new_list p span{display: block;font-size: 16px;line-height: 16px;color: #888888;}
.new_r{width:320px;padding: 0 35px;height: 520px;box-shadow: 0 0 20px rgba(0,0,0,0.10);}
.new_r h3{padding-top: 40px;padding-bottom: 22px;height: 26px;}
.new_r h3 a{height: 26px;line-height: 26px;font-size: 26px;color: #333333;display: block;font-weight: normal;}
.new_r h3 a img{width:26px ;height: 26px;vertical-align: -3px;margin-right: 8px;}
.new_r dt img{width: 320px;height: 160px;display: block;}
.new_r .tempWrap{margin-top: 30px!important;  }
.new_s p{ display: block; font-size: 16px; color: #333333;line-height:40px;}
.new_s p a{color: #333333;}
.new_l dd h5 a:hover,.new_list p a:hover,.new_s p a:hover{ color:#3da83f; }


/*abt*/

.abt{background: url(../resource/images/c6cb9f194a374dc39bc4eca85a1ecce9_2.png) no-repeat center 0;height: 865px;padding-top: 80px;box-sizing: border-box;}
.abt .tit span,.abt .tit i{ color: #fff; }
.abt .tit i:after{ position: absolute;left: 50%;top: 40px;width: 50px;height: 5px;margin-left: -25px;background:#3da83f;content:"";}
.abt p{ display: block;font-size: 16px;line-height: 36px;color: #ffffff;text-align: center;margin-top: 70px; }
.abt p a{ display: block;font-size: 16px;line-height: 36px;color: #ffffff; }
.abt .bo{margin-top: 75px;}
.abt .bo img{ display:block;width:81px;height:81px;margin:0 auto; }
.abt_t{ margin-top: 200px; }
.abt_t li{ float: left;position: relative;transition:all 0.3s;width: 400px;padding-left: 75px;box-sizing: border-box;}
.abt_t li:hover{ margin-top: -6px; }
.abt_t li em{ display: block; width: 72px;height: 54px;overflow: hidden;float: left;}
.abt_t li img{ display: block;width: 72px;height: 54px;transition:all 0.3s;}
.abt_t li.cur em img:nth-child(1){margin-top: -54px;}
.abt_t li span{ display: block;font-size: 24px;color: #333333;line-height: 24px;float: left;margin-left: 15px;margin-top: 4px;}
.abt_t li span i{ display: block;font-size: 14px;color: #d0d0d0;line-height: 14px;text-transform: uppercase;margin-top: 10px; }


@-webkit-keyframes bounce-circle {
    0% {
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:scale(1);
        transform:scale(1)
    }
    20% {
        opacity:1;
        filter:alpha(opacity=100)
    }
    80%,100% {
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:scale(1.3);
        transform:scale(1.3)
    }
}

.modal-backdrop{
    display:none;
    position: fixed !important;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background-color:rgba(0,0,0,0.5);
}
.modal-backdrop .vd{padding:50px;background: #fff;position:absolute;left:50%;top:0;margin-left:-450px;margin-top:-275px;border:1px solid #ccc;}
.modal-backdrop .vd .close{position:absolute;top:20px;right: 20px;}
.shipin{width:800px;height:450px;}
.shipin iframe{width:800px;height:450px;}


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