body { font-family: 'Microsoft Yahei', Arial; background: #fff ; }
.scale_img dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 0.65s linear 0s }
.scale_img dl:hover dt img, .scale_img li:hover img { -webkit-transform: scale(1.08) rotate(0deg) translateY(0); -ms-transform: scale(1.08) rotate(0deg) translateY(0); transform: scale(1.08) rotate(0deg) translateY(0) }
/**/
.fullSlide { position: relative; z-index: 1; clear: both; width: 100% ;}
.fullSlide .bd { margin: 0 auto; position: relative; z-index: 0; overflow: hidden }
.fullSlide .bd .con { width: 100% !important; height: auto !important; display: block }
.fullSlide .bd .li { width: 100% !important; overflow: hidden; text-align: center; background: no-repeat center top; z-index: 0 }
.fullSlide .bd .li img { display: block; height: auto !important; width: 100% }
.fullSlide .hd {cursor: pointer; z-index: 55; width: 1200px;margin:-43px auto -79px; position: relative;}
.fullSlide .hd ul{ overflow: hidden;background: #333; width: 100px; height: 122px; box-sizing: border-box; padding: 39px 0 0 27px;}
.fullSlide .hd li { display: inline-block; float: left; position: relative; background: #fff; width: 8px;height: 22px; border-radius: 8px; margin-right: 11px; margin-top: 22px;transition: all 0.2s;}
.fullSlide .hd li.on { width: 8px; height: 44px; margin-top: 0;}
.fullSlide p { display: none; position: absolute; top: 45%; width: 80px; height: 80px; z-index: 99; opacity: 1; text-align: center; margin-top: -40px }
.fullSlide .prev2 { left: 3% }
.fullSlide .next2 { right: 3% ; }
/**/
.seach{ padding-top: 30px; height: 78px; position: relative;    z-index: 55;}
.seach i{ display: inline-block; float: left; padding: 15px 0 0 149px; line-height: 100%; font-size: 15px; color: #333333;}
.seach i a{ display: inline-block; line-height: 100%; font-size: 15px; color: #999999; transition: all 0.2s; margin-right: 22px;}
.seach i a:hover{ color: #000; text-decoration: underline;}
.seach p{ float: right; overflow: hidden; height: 46px; border-bottom: 1px solid #333; width: 315px;}
.seach p input{ display: inline-block; float: left;outline: none; border: none; width: 285px; color: #ccc; font-size: 15px;height: 45px; line-height: 100%; }
.seach p button{ display: inline-block; float: right; width: 28px; outline: none; height: 45px;background:url(../image/sea.png) no-repeat; border: none; cursor: pointer;}
/**/
.srf{background:url(../image/f74d4f2a0ecc41dd8106083c0645ffad_8.jpg) no-repeat center 0; height: 707px; margin-bottom: 101px; padding-top: 100px; box-sizing: border-box;}
.srf_r{ width: 50.4%;}
.srf_r ul li{ float: left; width: 32.73%; margin-left:0.6%; position: relative;}
.srf_r ul li img{ width: 100%;}
.srf_r ul li em{ display: block; position: absolute; left:11%; top:7%;}
.srf_r ul li em i{ display: block; line-height: 100%; font-size:24px; color: #fff; letter-spacing: 1px;}
.srf_r ul li em span{ display: block; line-height: 100%; padding: 10px 0 51px 0; position: relative; color: #fff; font-size: 12px; text-transform: uppercase; opacity: 0.76;background:url(../image/srf.png) no-repeat 0 bottom;}
.srf_l{ width: 27%; margin-left: 17%; padding-top: 25px;}
.srf_l h3{ position: relative;}
.srf_l h3 i{ display: block; line-height: 100%; color: #333333; font-size: 48px;  padding-bottom: 12px;font-weight: normal;}
.srf_l h3 span{ display: block; line-height: 100%; font-size:24px; color: #333;font-weight: normal;padding-bottom:77px;white-space: nowrap;text-overflow: ellipsis;}
.srf_l h3 em{ padding: 0 15px;}
.srf_l h3:before{ position: absolute; content: ""; left: -57px; width: 194px; height:2px; background: #1a55a3; top: 107px;}
.srf_l p{ height: 227px; font-size: 16px; color: #666666; line-height: 31px; letter-spacing: 1px;}
.btn{ display: inline-block; font-weight: normal; padding-left: 33px; padding-right:89px; height: 46px; line-height: 46px; font-size: 16px; color: #fff;background:url(../image/sf_mor.png) no-repeat  114px 19px #1a55a3; transition: all 0.2s;}
.btn:hover{ background-position: 121px 19px; color: #fff;}

.srf .btn:hover {
    background-position: 125px 19px;
    color: #fff;
}


@media screen and (max-width: 1600px) {
    .srf_l {    width: 34%;    margin-left: 11%;    padding-top: 28px;}
    .srf_l h3 span{    font-size: 37px;}
}

@media screen and (width: 1366px) {
    .srf{height: 610px;}
    .srf_l{padding-top: 10px;width: 37%;
        margin-left: 8%;}
    .srf_l h3 i {font-size: 42px;}
    .srf_l h3 span{font-size: 24px;}
    .srf_l p {height: 168px;font-size: 15px;line-height: 28px;}
}
/**/
h2{ position: relative; line-height: 100%; text-align: center;  padding:40px 0;background:url(../image/h2.png) no-repeat center 0;}
h2 i{ display: block; line-height: 100%;font-weight: normal;color: #333333;font-size: 44px; }h2 em{ padding: 0 12px;}
h2 span{ display: block; font-weight: normal; font-size:20px; color: #333333; line-height: 100%; padding-top: 14px;}
.product{ overflow: hidden; height: 1205px;}
.product ul li{ float: left; width: 380px; height: 465px; background: #f5f5f5; margin-bottom: 30px; margin-right: 30px; box-sizing: border-box; padding: 14px; text-align: center; position: relative; transition: all 0.2s;}
.product ul li:nth-of-type(3n){ margin-right: 0;}
.product ul li b{ display: block; overflow: hidden; border: 2px solid #fff8f6; font-size: 0; line-height: 0; margin-bottom: 30px; box-sizing: border-box;    height: 352px;}
.product ul li b img{ width: 352px;    transition: all 0.2s linear 0s;}
.product ul li b span{ display: inline-block; position: absolute; left: 14px; top: 14px; opacity: 0; transition: all 0.2s; overflow: hidden; width: 352px; height: 352px; border: 2px solid #fff8f6; box-sizing: border-box;}
.product ul li strong{ display: inline-block; position: absolute; right: 16px; top: 31px; z-index: 55; background: #333; color: #fff; text-align: center; font-size: 17px; width: 77px; height: 34px; line-height: 34px;font-weight: normal; }
.product ul li em{ display: block; text-align: center; line-height: 100%; font-size: 20px; color: #333333;}
.product ul li i{ display: block; line-height: 100%;position: relative; padding-top: 9px; color: #999; text-transform: uppercase;}
.product ul li i span{ display: inline-block; line-height: 100%; padding: 0 30px; position: relative;}
.product ul li i span:before{ width: 18px; height: 2px; position: absolute; left: 0; background: #ccc; top: 4px; content: "";}
.product ul li i span:after{ width: 18px; height: 2px; position: absolute; right: 0; background: #ccc; top: 4px; content: "";}
.product ul li:hover{ background: #1a55a3;}
.product ul li:hover strong{ background: #1a55a3;}
.product ul li:hover em{ color: #fff;}
.product ul li:hover span{ color: #a8b7d4;}
.product ul li:hover span:before{ background: #8daad1;}
.product ul li:hover span:after{ background: #8daad1;}
.product ul li:hover b span{ opacity: 1;}
.product ul li:hover b img{    transform: scale(1.08);}
/**/
.anli{ overflow: hidden;background:url(../image/anli.jpg) no-repeat center 0; padding-top: 100px; height: 1177px;}
.anli h2{background:url(../image/cas.png) no-repeat center 0; padding-top: 17px; padding-bottom: 76px;}
.anli h2 i{ font-size: 48px;}
.al_list{ overflow: hidden; height: 113px; margin-left: 287px;}
.al_list ul li{ float: left;  font-size: 18px;}
.al_list ul li a{ color: #333333;background:url(../image/cas1.png) no-repeat; display: inline-block; padding-left: 75px; height: 63px;width: 166px;}
.al_list ul li:nth-of-type(2) a{background:url(../image/cas2.png) no-repeat;}
.al_list ul li:nth-of-type(3) a{background:url(../image/cas3.png) no-repeat;}
.al_list ul li span{ display: block; font-size: 24px; line-height: 100%; padding-bottom: 9px;}
.al_list ul li a:hover{ color: #1a55a3;background:url(../image/cas11.png) no-repeat; }
.al_list ul li:nth-of-type(2) a:hover{ color: #1a55a3;background:url(../image/cas21.png) no-repeat; }
.al_list ul li:nth-of-type(3) a:hover{ color: #1a55a3;background:url(../image/cas31.png) no-repeat; }
.al_on{ overflow: hidden; background: #fff; margin-bottom: 21px; box-shadow: 0 0 15px rgba(0,0,0,0.05); height: 529px;}
.al_on dl dt{ float: left; font-size: 0; overflow: hidden;}
.al_on dl dt img{ width: 749px;}
.al_on dl dd{ float: right; width: 357px; padding: 53px 43px 0 0;}
.al_on dl dd  h3{ height: 58px;}
.al_on dl dd  h3 a{ display: block; line-height: 100%;font-weight: normal; font-size: 28px; color: #333333;}
.al_on dl dd p{ height: 313px; font-size: 16px; color: #666666; line-height: 28px;}
.al_on dl dd p em{ display: block; padding-bottom: 12px;}
.al_on dl dd p em b{ color: #333333;}
.al_on dl dd h4{ overflow: hidden;}
.al_on dl dd h4 a{ display: inline-block; width: 164px; height: 42px; line-height: 42px; text-align: center; background: #333; font-size: 16px;font-weight: normal; color: #fff;}
.al_on dl dd h4 a:last-of-type{ margin-left: 18px; background: #1a55a3;}

.al_bom ul li{ float: left; margin-right: 20px; width: 285px; background: #f5f5f5; height: 273px;}.al_bom ul li:last-of-type{ margin-right: 0;}
.al_bom ul li img{ width: 285px;}
.al_bom ul li b{ display: block; overflow: hidden; height: 213px;}
.al_bom ul li em{ display: block; line-height: 60px; font-size: 18px; color: #333333; margin: 0 20px; overflow: hidden;background:url(../image/al_bom.png) no-repeat right 28px;transition: all 0.2s;}
/**/
.shil{background:url(../image/shil.jpg) no-repeat center 0; height: 988px; margin-bottom: 100px; padding-top: 100px; box-sizing: border-box; overflow: hidden;}
.shil h2{background:url(../image/sl_h2.png) no-repeat center 0; padding-top: 17px; padding-bottom:56px;}
.shil h2 i{ font-size: 48px;}
.s_on{ margin-right: -360px;}
.s_on dl dt{ float: right;}
.s_on dl dd{ float: right; background: #fff; overflow: hidden; position: relative; width: 548px; height: 382px; margin-right: -300px; margin-top: 193px; box-sizing: border-box;padding: 55px 0 0 65px; box-shadow: 0 0 19px rgba(0,0,0,0.2);}
.s_on dl dd h3{ line-height: 100%; font-weight: normal; font-size: 36px; color: #333333; padding-bottom: 39px;}
.s_on dl dd p{ color: #333333; font-size: 16px; position: relative;z-index: 55;}
.s_on dl dd p span{ display: block; line-height: 100%; padding-bottom: 14px;}
.s_on dl dd em{ display: inline-block; position: absolute; right: 46px; top: 320px; color: #f3f3f3; font-size: 137px;font-weight: bold; line-height: 80%; letter-spacing: -9px;}
.sl_list{ margin-left: 8.3%; margin-top: 128px;}
.sl_list ul li{transition: all 0.2s; padding-top: 25px; height: 117px; overflow: hidden; position: relative; cursor: pointer;}
.sl_list ul li img{ display: inline-block; float: left; padding-right: 15px;}
.sl_list ul li em{ display: inline-block; float: left; font-size: 20px;color: #fff;font-weight: bold;}
.sl_list ul li em span{ display: block; line-height: 100%; font-weight: normal; font-family: Arial; font-size: 12px;text-transform: uppercase; color: #999; padding-top: 12px;}
.sl_list ul li.cur:before{ width: 0; height: 2px; background: #fff; content: ""; left: 0;top: 0; position: absolute; transition: all 0.2s;}
.sl_list ul li.cur:before{ width: 260px;}
/**/
.news{ overflow: hidden; height: 825px;}
.news h2{background:url(../image/n_h2.png) no-repeat center 0; padding-top: 17px; padding-bottom:59px;}
.news h2 i{ font-size: 48px;}
.n_r{ background: #f5f5f5; width: 450px; height: 601px; box-sizing: border-box; padding: 26px 28px 0 33px; overflow:hidden;}
.n_r h3{ height: 47px; border-bottom: 1px solid #dcdcdc; line-height: 100%; margin-bottom: 21px;font-weight: normal;background:url(../image/nr_h.png) no-repeat; padding-left: 37px; font-size: 24px; }
.n_r h3 a{color: #333333;}
.n_r h3 span{ display: inline-block; float: right; font-size: 16px; color: #999999; text-transform: capitalize; margin-top: 12px;}
.n_r ul li{ padding-bottom: 25px;}
.n_r ul li i a{ display: block; line-height: 100%; font-size: 18px; color: #333333; margin-bottom: 7px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.n_r ul li em{ display: block; line-height: 25px; font-size: 14px; color: #999999;}
.n_r ul li em span{ display: block; color: #666666; padding-top: 5px;}
.n_l{ overflow: hidden; margin-top: 25px; width: 682px;}
.n_l h3{ height: 47px; border-bottom: 1px solid #dcdcdc; line-height: 100%; margin-bottom: 21px;font-weight: normal;background:url(../image/n_l.png) no-repeat; padding-left: 37px; font-size: 24px; }
.n_l h3 a{color: #333333;}
.n_l h3 span{ display: inline-block; float: right; font-size: 16px; color: #999999; text-transform: capitalize; margin-top: 12px;font-weight: bold;}
.n_l dl{ overflow: hidden; height: 340px; float: left; width: 325px;}
.n_l dl:last-of-type{ float: right;}
.n_l dl dt{ overflow: hidden; height: 182px; margin-bottom: 25px;}
.n_l dl dt img{ width: 325px;}
.n_l dl dd h4 a{ display: block; line-height: 100%; font-size: 18px; color: #333333;font-weight: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.n_l dl dd h4 a:hover{color: #1a55a3;}
.n_l dl dd p{ padding: 8px 0 15px; color: #999999; font-size: 14px; line-height: 24px;}
.n_l dl dd em{ display: block; line-height: 100%; font-size: 14px; color: #666666;}
.n_l ul{ overflow: hidden; border-top: 1px solid #dcdcdc; padding-top: 35px;}
.n_l ul li a{ display: block; line-height: 100%; overflow: hidden; margin-bottom: 24px; font-size: 16px; color: #333333; padding-left: 17px; position: relative;}
.n_l ul li span{ display: inline-block; float: right; font-size: 14px; color: #666666;}
.n_l ul li a:before{ position: absolute; left: 0; content: ""; top: 6px; background: #333; width: 5px; height: 2px;}
.n_l ul li a:hover{ color: #1a55a3;}
.n_l ul li a:hover:before{ background: #1a55a3;}
.n_r ul li i a:hover{ color: #1a55a3; text-decoration: underline;}
/**/
.abo{ overflow: hidden;background:url(../image/abo.jpg) no-repeat center 0; height: 830px; margin-bottom: 89px; box-sizing: border-box;}
.abo h2{background:url(../image/a_h2.png) no-repeat center 0; padding-top: 17px; padding-bottom:17px; position: absolute; left: 0; top: 100px; width: 100%;}
.abo h2 i{ font-size: 48px; color: #fff;}
.abo p{ position: absolute; left: 147px; width: 909px; top: 212px; text-align: center; font-size: 15px; line-height: 30px; color: #fff;opacity: 0.85;}
.abo p em{ display: block; padding-top: 32px; line-height: 100%;}
.abo p em a{ display: inline-block; font-size: 16px; color: #fff; padding-right: 59px;background:url(../image/sf_mor.png) no-repeat right 3px; line-height: 100%; transition: all 0.2s;}
.abo p em a:hover{ padding-right: 65px;}
.abo ul li{background:url(../image/a_mp.png) no-repeat center 705px; float: left; width: 25%; height: 830px; border-right: 1px solid rgba(255,255,255,0.3); box-sizing: border-box; text-align: center; padding-top: 428px; }
.abo ul li i{ transition: all 0.2s; opacity: 0;}
.abo ul li em{ display: block; padding-top: 35px; line-height: 100%; font-size: 24px; color: #fff;}
.abo ul li em span{ display: block; padding-top: 12px;text-transform: uppercase; font-size: 12px; line-height: 100%; color: #939397;}
.abo ul li:hover{ background: none;}
.abo ul li:hover i{ display: block; font-size: 16px; color: #fff; margin-top: 41px; opacity: 1;}
.abo ul li:hover i span{ display: block; padding-bottom: 11px;}
.abo ul li img{transition: all 0.2s linear 0s;}
.abo ul li:hover img{animation: flipInY 1.5s;}
/**/
/**/
/**/

.zouj p b img:hover{transform: translateX(20px);}
.bz_uu img,.bz_dd img{transition: all .3s; border-radius: 35px;}
.bz_uu:hover img,.bz_dd:hover img{    box-shadow: 0 3px 5px 3px rgba(0,0,0,0.1); background: #fff;
    z-index: 2;
    -webkit-transform: translate(0,-2px);
    -webkit-transform: translate(0,-2px);}
/**/
/**/
.srf_r ul li{ overflow: hidden; font-size: 0; line-height: 0;}
.srf_r ul li img,.fank ul li b img,.al_on dl dt img,.al_bom ul li b img,.al_on dl dd h4 a,.n_l dl dt img{transition: all 0.2s linear 0s;}
.srf_r ul li:hover img,.fank ul li:hover b img,.al_on dl dt:hover img,.al_bom ul li b:hover img,.n_l dl dt:hover img{transform: scale(1.08);}
.al_on dl dd h4 a:hover{ width: 173px;}
/**/
/**/
.xl_u img,.xl_d img,.jix ul li{transition: all 0.3s linear 0s;}
.jix ul li:hover{transform: translateY(-7px);}
.xl_u:hover img{transform: translateX(-5px);}
.xl_d:hover img{transform: translateX(5px);}
.aboti em a,.case h4 a,.sli_o h3 a,.mppl dl dd em a,.pexl h4 a,.xl_on h4 a{transition: all 0.2s linear 0s;}

.pic img,.picl img,.pics img{-webkit-transition: -webkit-transform 0.8s; -moz-transition: -moz-transform 0.8s; -o-transition: -o-transform 0.8s; transition: transform 0.8s;}
.pic img:hover{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);  transform: scale(1.05);}
.picl img:hover{-moz-transform: translate(0,5px);-webkit-transform: translate(0,5px);-ms-transform: translate(0,5px);-o-transform: translate(0,5px);}
.pics img:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);}
.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;}

/**/
.pro-nav-list li:nth-of-type(1) span,.pro-nav-list li:nth-of-type(2) span´┐¢´┐¢.pro-nav-list li:nth-of-type(3) span{ display:none;}
/**/

@-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 fadeInRight2 {
    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 fadeInRight2 {
    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 }
}
.fadeInRight2 { -webkit-animation-name: fadeInRight2; animation-name: fadeInRight2 }
@-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 }
}