@charset 'utf-8';
body { font-family: "微软雅黑", Arial; background: #fff; }
.scale_img dl dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s; }
.scale_img dl:hover dt img, .scale_img li:hover img { -webkit-transform: scale(1.05) rotate(0deg) translateY(0); -ms-transform: scale(1.05) rotate(0deg) translateY(0); transform: scale(1.05) rotate(0deg) translateY(0); }

/*字体*/
@font-face { font-family: 'PangMen'; src: url('../font/PangMenZhengDaoBiaoTiTi.ttf') format('truetype'); }
@font-face { font-family: 'ACaslonPro'; src: url('../font/ACaslonPro.otf') format('truetype'); }
h2.main_title a { width: 1200px; margin: 0 auto; overflow: hidden; display: block; text-align: center; line-height: 0; font-size: 0; font-weight: normal; }
h2.main_title a > i { display: block; font-family: 'ACaslonPro'; font-size: 30px; line-height: 35px; color: rgba(0, 0, 0, 0.35); text-transform: uppercase; }
h2.main_title a strong { display: block; font-family: 'PangMen'; font-size: 60px; line-height: 100%; color: #131F2D; font-weight: normal; }
h2.main_title a strong span { display: inline-block; font-size: 72px; line-height: 100%; color: #131F2D; }
h2.main_title a strong i { color: #D01418; }
h2.main_title a > span { display: block; font-size: 20px; line-height:22px; color: #9A9A9A; margin-top: 8px; }

/**/
.intro { padding-top: 80px; text-align: center; }
.intro ul { margin: 62px auto 0; width: 1284px; }
.intro li { width: 25%; height: 294px; background: #FFFFFF url(../img/ii.png) no-repeat 300px 273px; border: 1px solid #DCDCDC; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-transition: all 0.3s ease; transition: all 0.3s ease; padding: 40px 37px; float: left; border-right-color: transparent; }
.intro li i { display: block; width: 52px; height: 48px; overflow: hidden; position: relative; margin: 0 auto; }
.intro li i img { position: absolute; left: 0; top: 0; }
.intro li h3 { font-size: 27px; line-height: 100%; color: #343434; margin: 24px 0 26px; font-weight: normal; }
.intro li p { font-size: 16px; line-height: 28px; color: #666; }
.intro li:last-child { border-right-color: #dcdcdc; }
.intro li:hover { background-color: #324256; border-color: #324256; }
.intro li:hover i img { animation: flipInY 1.5s; top: -48px; }
.intro li:hover h3, .intro li:hover p { color: #fff; }

/**/
.prospect { padding-top: 118px; max-width: 1920px; overflow: hidden; margin: 0 auto; }
.prospect ul { margin-top: 38px; }
.prospect li { width: calc((100% - 3px) / 4); margin-right: 1px; float: left; position: relative; }
.prospect li img { max-width: 100%; width: 100%; }
.prospect li .desc { position: absolute; bottom: 10.5%; left: 10%; width: 80%; }
.prospect li h3 { font-size: 34px; line-height: 100%; color: #fff; padding-bottom: 19px; position: relative; }
.prospect li h3:after { position: absolute; content: ""; width: 35px; height: 4px; background: #CC0000; left: 0; bottom: 0; }
.prospect li p { font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, 0.7); margin-top: 11px; }
.prospect li:last-child { margin-right: 0; }

/**/
.power { padding-top: 112px; overflow: hidden; }
.power1 { background: url(../img/power1.jpg) no-repeat center top; height: 880px; margin-top: 53px; }
.power1 .power_con { width: 592px; height: 243px; background: rgba(50, 66, 86, 0.9); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 50px; margin-top: 335px; float: right; }
.power1 h3 { font-family: 'PangMen'; font-size: 48px; line-height: 100%; color: #fff; font-weight: normal; position: relative; padding-bottom: 18px; }
.power1 h3:after { position: absolute; content: ""; width: 212px; height: 1px; background: rgba(255, 255, 255, 0.2); left: 0; bottom: 0; }
.power1 p { font-size: 14px; line-height: 28px; color: #fff; margin-top: 16px; }
.power2 { background: url(../img/power2.jpg) no-repeat center top; height: 789px; }
.power2 .power_con { width: 381px; float: left; margin-top: 254px; }
.power2 h3 { font-family: 'PangMen'; font-size: 48px; line-height: 52px; color: #fff; font-weight: normal; margin-bottom: 14px; }
.power2 h3 span { display: block; }
.power2 p { font-size: 14px; line-height: 24px; color: #fff; margin-bottom: 6px; }
.power2 .pic { margin-top: 20px; }
.power2 .pic img { width: 190px; float: left; }

/**/
.system { background: url(../img/support_bg.jpg) no-repeat center top; padding-top: 102px; height: 1097px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.system .pic { margin: 44px auto; width: 1200px; position: absolute; }
.system .pic img { width: 693px; height: 693px; border: 6px solid #fff; box-shadow: 0 18px 30px 0 rgba(0, 0, 0, 0.1); border-radius: 50%; overflow: hidden; margin: 0 auto; display: block; }
.system ul { margin-top: 138px; }
.system li {float: left;width: 600px;margin-bottom: 78px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;position: relative;}
.system li em { display: block; font-weight: bold; font-size: 38px; line-height: 100%; color: #CC3434; padding-top:93px;}
.system li em i { font-size: 36px; line-height: 100%; color: #343434; margin-left: 16px; }
.system li span {font-size: 22px;line-height: 2.2rem;color: rgba(52, 52, 52, 0.7);margin-top: 20px;display: block;margin-left: 63px;position: absolute;z-index: 8;}
.system li:nth-child(even) { float: right; }
.system li:nth-child(1){padding-left: 40px;}
.system li:nth-child(2){padding-left: 329px;margin-bottom: 78px;}
.system li:nth-child(4){padding-left: 370px;margin-bottom: 80px;}
.system li.jme01 span{left: -275px;display: block;width: 430px;text-align: right;}
.system li.jme03 span{left: -342px;width: 496px;display: block;text-align: right;}
.system li.jme02 span{left: 306px;display: block;width: 416px;text-align: left;}
.system li.jme04 span{left: 342px;width: 462px;display: block;text-align: left;}
.system li:nth-child(7) { padding-left: 40px; }
.system li:nth-child(8) {padding-left: 329px;margin-bottom: 45px;}
.system li:nth-child(6) {padding-left: 370px;margin-bottom: 78px;}
.system li:nth-child(9) {padding-left: 177px;float: right;margin-bottom: 50px;}

/**/
.product { background: url(../img/product_bg.jpg) no-repeat center top; padding-top: 79px; padding-bottom: 106px; }
.product h2 a i { color: rgba(255, 255, 255, 0.35); }
.product h2 a strong { color: #fff; }
.product h2 a strong span { color: #DD2633; }
.product h2 a strong i { color: #fff; }
.product h2 a > span { color: #EAEAEA; }
.pro_con { margin-top: 54px; }
.pro_con ul { width: 230px; float: left; }
.pro_con ul li { width: 230px; height: 174px; background: #2A2A2A; margin-bottom: 1.5px; font-family: 'PangMen'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 27px; padding-left: 32px; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.pro_con ul li strong { font-weight: normal; display: block; font-size: 72px; line-height: 100%; color: #fff; }
.pro_con ul li span { font-size: 44px; line-height: 100%; color: #fff; }
.pro_con ul li:last-child { padding-top: 44px; }
.pro_con ul li:last-child strong { font-size: 44px; line-height: 100%; color: #fff; }
.pro_con ul li:last-child span { letter-spacing: -1px; }
.pro_con ul li:hover { background: #B81C28; }
.pro_con .video_box { width: 970px; height: 525px; float: right; background: #000; }
.pro_con .video_box img { width: 970px; cursor: pointer; }

/*扶持政策*/
.policy { padding-top: 92px; padding-bottom: 85px; }
.policy ul { margin-top: 40px !important; }
.policy ul li { width: 182px; margin-right: 72px; margin-bottom: 23px; float: left; }
.policy ul li img { width: 145px; height: 145px; border-radius: 50%; display: block; margin-bottom: 24px; }
.policy ul li h3 { position: relative; font-weight: bold; }
.policy ul li h3 span { display: block; font-size: 28px; line-height: 32px; color: #454545; position: relative; z-index: 2; }
.policy ul li h3 span:last-child { display: inline-block; background: #fff; }
.policy ul li h3 i { display: block; font-size: 70px; color: #efefef; line-height: 100%; position: absolute; left: 60px; top: -8px; height: 39px; overflow: hidden; }
.policy ul li p { font-size: 14px; line-height: 20px; color: #666; margin-top: 19px; }
.policy ul li:nth-child(5n) { margin-right: 0; }
.policy ul li:nth-child(1), .policy ul li:nth-child(2), .policy ul li:nth-child(6), .policy ul li:nth-child(7), .policy ul li:nth-child(10) { width: 168px; }

/**/
.case { background: url(../img/case_bg.jpg) no-repeat center top; padding-top: 106px; padding-bottom: 46px; overflow: hidden; }
.case h2 a i { color: rgba(255, 255, 255, 0.35); }
.case h2 a strong { color: #fff; }
.case h2 a strong span { color: #DD2633; }
.case h2 a strong i { color: #fff; }
.case h2 a > span { color: rgba(255, 255, 255, 0.8); }
.case .case_con { width: 1405px; background: #FFFFFF; margin: 69px auto 0; padding: 100px 102px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.case .case_con li { width: 390px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin-right: 15px; margin-bottom: 38px; overflow: hidden; }
.case .case_con li .pic { height: 294px; overflow: hidden; }
.case .case_con li .pic img { width: 100%; }
.case .case_con li h4 { border: 1px solid #ebebeb; border-top: none; height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 17px; line-height: 50px; color: #666; text-align: center; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.case .case_con li:nth-child(3n) { margin-right: 0; }
.case .case_con li:hover h4 { background: #0E345C; border-color: #0E345C; color: #fff; }

/*品牌历程*/
.brand { background: url(../img/brand_bg.jpg) no-repeat center bottom; height: 871px; }
.brand h2 a > i { color: #fff; }
.brand h2 a strong { color: #0E345C; }
.brand .content {padding-top: 28px;position: relative;width: 1600px;}
.brand li { position: absolute; }
.brand li:after {position: absolute;content: "";width: 1px;height: 100%;background: #E8D1B3;left: 50%;bottom: 0;}
.brand li strong { display: block; font-size: 25px; line-height: 100%; color: #fff; background: url(../img/brand_icon.png) no-repeat center top; background-size: 100% auto; position: relative; z-index: 2; text-align: center; font-weight: normal; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.brand li span {display: block;width: 23px;font-size: 23px;line-height: 25px;color: #666;padding-left: calc(50% + 20px);padding-bottom: 31px;padding-top: 76px;writing-mode: vertical-lr;}
.brand li:nth-child(1) {width: 82px;left: 0;top: 359px;}
.brand li:nth-child(1) strong { height: 82px; font-size: 22px; line-height: 82px; padding-bottom: 8px; }
.brand li:nth-child(2) { width: 91px; left: 100px; top: 305px; }
.brand li:nth-child(2) strong {height: 91px;padding-bottom: 8px;line-height: 91px;}
.brand li:nth-child(2) span { padding-top: 66px; padding-bottom: 95px; }
.brand li:nth-child(3) {width: 78px;left: 204px;top: 380px;}
.brand li:nth-child(3) strong { height: 78px; padding-bottom: 6px; line-height: 78px; }
.brand li:nth-child(3) span { padding-top: 32px; padding-bottom: 55px; }
.brand li:nth-child(4) {width: 93px;left: 290px;top: 286px;}
.brand li:nth-child(4) strong { height: 93px; font-size: 25px; padding-bottom: 9px; line-height: 93px; }
.brand li:nth-child(4) span {padding-top: 28px;padding-bottom: 78px;}
.brand li:nth-child(5) {width: 88px;left: 405px;top: 254px;}
.brand li:nth-child(5):after {height: 350px;bottom: auto;top: 96px;}
.brand li:nth-child(5) strong { height: 88px; line-height: 88px; padding-bottom: 8px; }
.brand li:nth-child(5) span {padding-left: calc(5% + 58px);margin-top: 37px;padding-top: 0;}
.brand li:nth-child(6) {width: 97px;left: 500px;top: 193px;}
.brand li:nth-child(6) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(6) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:hover strong { background: url(../img/brand_hover.png) no-repeat center top; background-size: 100% auto; }
.brand li:nth-child(7) {width: 97px;left: 611px;top: 260px;}
.brand li:nth-child(7) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(7) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(8) {width: 97px;left: 715px;top: 215px;}
.brand li:nth-child(8) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(8) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(9) {width: 97px;left: 838px;top: 204px;}
.brand li:nth-child(9) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(9) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(10) {width: 97px;left: 958px;top: 154px;}
.brand li:nth-child(10) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(10) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(11) {width: 97px;left: 1080px;top: 200px;}
.brand li:nth-child(11) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(11) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(12) {width: 97px;left: 1200px;top: 247x;}
.brand li:nth-child(12) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(12) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(13) {width: 97px;left: 1326px;top: 181px;}
.brand li:nth-child(13) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(13) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(14) {width: 97px;left: 1449px;top: 159px;}
.brand li:nth-child(14) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(14) span { padding-top: 20px; padding-bottom: 56px; }
.brand li:nth-child(15) {width: 97px;left: 1575px;top: 193px;}
.brand li:nth-child(15) strong { height: 97px; line-height: 97px; font-size: 28px; padding-bottom: 10px; }
.brand li:nth-child(15) span { padding-top: 20px; padding-bottom: 56px; }

/*首页表单2*/
.join { background: url(../img/join_bg.jpg) no-repeat center top; padding-top: 65px; height: 400px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.join h2 { text-align: center; }
.join h2 strong { display: block; font-family: PangMen; font-size: 60px; line-height: 100%; color: #fff; font-weight: normal; }
.join h2 span { display: block; font-size: 30px; line-height: 100%; color: #FFDC72; font-weight: normal; margin-top: 9px; }
.join_form { width: 916px; height: 138px; border: 1px solid rgba(255, 255, 255, 0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 38px auto 0; padding: 26px 54px 0 47px; }
.join_form li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 318px; margin-bottom: 19px; font-size: 14px; line-height: 32px; color: #fff; height: 32px; float: left; margin-right: 32px; }
.join_form li label { display: block; width: 75px; float: left; }
.join_form li input,.join_form li textarea { float: left; display: block; width: 243px; height: 32px; background: #FFFFFF; padding-left: 1rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; line-height: 32px; color: #333; border: none; outline: none; }
.join_form li:nth-child(1) label { letter-spacing: 29px; white-space: nowrap; }
.join_form .form_btn { float: right; }
.join_form .form-btn-submit { margin-top: -49px; display: block; width: 98px; height: 81px; float: right; font-size: 20px; line-height: 23px; color: #fff; background: url(../img/join_btn.png) no-repeat center; border: none; outline: none; font-weight: bold; cursor: pointer; }
.join_form li span{
    display: none
}
.join_form li textarea{
    resize: none;
}
.join_form .form-btn-reset{
    display: none;
}
.join_form .submit b{
    display: none !important
}

@-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(3%, 0, 0); transform: translate3d(3%, 0, 0); opacity: 0; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes fadeInRight2 {
  from { -webkit-transform: translate3d(3%, 0, 0); transform: translate3d(3%, 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, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); opacity: 0; }
  50% { opacity: 1; }
}
@keyframes zoomLeft {
  from { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.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; }
}