@charset 'utf-8';
.{ font-family: '黑体' !important; }
body { font-family: '黑体'; background: #fdfdfd ; }
.scale_img dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.scale_img dt:hover 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) }

h2.main_title a { display: block;font-weight: normal; font-size:2.8vw;letter-spacing: 0.35vw; line-height: 100%; color: #000; margin-top:1px; text-align: center;}
h2.main_title span { display:block; color: #888; font-size:1.2vw;font-weight: normal;letter-spacing: 0.05vw; line-height: 100%; padding-top:10px;  background: url(../images/h2.png) no-repeat center 60%; height: 81px;}

.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 { position: absolute; width: 100%; height: 12px; left: 0; bottom:35px; text-align: center; cursor: pointer }
.fullSlide .hd li { display: inline-block; width: 12px; height: 12px; background: #fff; margin: 0 19px; border-radius: 50%; opacity: .6; -o-transition: all .3s ease; transition: all .3s ease }
.fullSlide .hd li.on { width: 36px; height: 12px; opacity: 1; border-radius: 5px }
.fullSlide p { display: none; position: absolute; top: 50%; width: 80px; height: 80px; z-index: 99; opacity: 1; text-align: center; margin-top: -40px }
.fullSlide .prev2 { left: 3% }
.fullSlide .next2 { right: 3% }

.guw{ overflow: hidden;}
.guw ul li{ float: left; width: 24.2%; margin-right: 1%; background: #f2f2f2;}.guw ul li:last-of-type{ margin-right: 0;}
.guw ul li img{ display: inline-block; width: 100%;}
.guw ul li h3{ text-align: center; padding-top:10vh; height: 50px; line-height: 100%; background: url(../images/guw_h4.jpg) no-repeat center bottom;font-weight: normal; font-size: 1.86vw; color: #333; margin-bottom: 1.3vh; letter-spacing: 0.1vw; position: relative;}
.guw ul li h3 i { position: absolute; content: ""; width:6vw;left: 35.2%; top: -6vh; -o-transition: all .3s ease; transition: all .3s ease; z-index:1; }
.guw ul li p{ text-align: center; color: #333; font-size:0.95vw; line-height:4vh; height:20vh;}

.case{height: ; padding-bottom: 52px; overflow: hidden;}
.case .main_title{border-bottom: 1px solid #ddd;}
.case .main_title span{ color: #333; line-height:26px; padding-bottom: 2vh; height:115px;background: url(../images/h2.png) no-repeat center 79px; font-size: 1.05vw; padding-top: 15px;}
.case .content { position: relative }
.case_nav {overflow: hidden; height: 88px; padding-top:27px;}
.case_nav ul{ overflow: hidden; margin-left: 100px;}
.case_nav ul li{ float: left;padding-right: 44px;background: url(../images/c_tli.jpg) no-repeat right 11px;}
.case_nav ul li:last-of-type{ background: none;}
.case_nav ul li a{ display: block; font-size: 16px; color: #333; height:44px; background: url(../images/c_tio1.jpg) no-repeat 42px 0px;padding-left: 76px; line-height:185%; }
.case_nav ul li:nth-of-type(2) a{ background: url(../images/c_tio2.jpg) no-repeat 42px 0px;}
.case_nav ul li:nth-of-type(3) a{ background: url(../images/c_tio3.jpg) no-repeat 42px 0px;}
.case_nav ul li:nth-of-type(4) a{ background: url(../images/c_tio4.jpg) no-repeat 42px 0px;}
.case_nav ul li:nth-of-type(5) a{ background: url(../images/c_tio5.jpg) no-repeat 42px 0px;}
.case_nav ul li:nth-of-type(6) a{ background: url(../images/c_tio6.jpg) no-repeat 42px 0px;}
.case_nav ul li:nth-of-type(7) a{ background: url(../images/c_tio7.jpg) no-repeat 42px 0px;}
.case_nav li { float: left;position: relative; -o-transition: all .3s ease; transition: all .3s ease;}
/*.case_nav li.on img { box-shadow: 0 5px 35px 0 rgba(0, 0, 0, .11) }*/
.case_nav li.on a{color: #333; }
.case_nav div { width: 80px; height: 80px; float: left; margin-left: 32px; position: relative; -o-transition: all .3s ease; transition: all .3s ease; background: #fff; border-radius: 50% }
.case_nav div img { width: 80px; height: 80px; border-radius: 50%; position: relative; z-index: 2 }
.case_nav div:hover img { box-shadow: 0 5px 35px 0 rgba(0, 0, 0, .11) }
.case_con { overflow: hidden;}
.case_con ul{ overflow: hidden;height: ; margin-bottom: 36px;}
.case_con ul li{ float: left; font-size: 0; line-height: 0; margin: 0 0 10px  10px; overflow: hidden;position: relative;}
.case_con ul li em{ display: none; background:rgba(3,89,191,0.9); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.case_con ul li em i{ display: block; padding:10% 0 0 10%; line-height: 100%; font-size: 24px; color: #fff;}
.case_con ul li em span{ width: 500px; font-size: 16px; color: #fff; line-height: 26px; margin-left: 10%; display: block; padding-top: 15px; height: 108px;}
.case_con ul li em b{ display: block;background: url(../images/c_moe.png) no-repeat; width: 140px; height: 42px; line-height: 42px; color: #fff; font-size: 16px; padding-left:
20px;font-weight: normal; margin-left: 49px;}
.case_con ul li:hover em{ display: block;}
.case_prev1 { position: absolute; z-index: 3; width: 70px;left:-70px;top:354px;}
.case_next1 { position: absolute; z-index: 3; width: 70px;right:-70px;top:354px;}
.case h5{background: url(../images/c_bgm.png) no-repeat center bottom; height: 19px; text-align: center;}
.case h5 a{ display: inline-block; text-align: left;background: url(../images/c_m.png) no-repeat; width: 280px; height: 60px; line-height: 60px; color: #fff; padding-left: 75px; font-size: 20px;font-weight: normal;}

	





.casessss{height: 100%; overflow: hidden;}
.casessss .main_title{border-bottom: 1px solid #ddd;}
.casessss .main_title span{ color: #333; line-height:26px; padding-bottom: 2vh; height:115px;background: url(../images/h2.png) no-repeat center 79px; font-size: 1.05vw; padding-top: 15px;}
.casessss .content { position: relative }
.casessss_nav {overflow: hidden; height: 66px; padding-top:27px;}
.casessss_nav ul{ overflow: hidden; margin-left: 100px;}
.casessss_nav ul li{ float: left;padding-right: 73px;background: url(../images/c_tli.jpg) no-repeat right 11px;}
.casessss_nav ul li:last-of-type{ background: none;}
.casessss_nav ul li a{ display: block; font-size: 24px; color: #333; height:44px; background: url(../images/c_tio1.jpg) no-repeat 42px 0px;padding-left: 80px; line-height:100%; }
.casessss_nav ul li:nth-of-type(2) a{ background: url(../images/c_tio2.jpg) no-repeat 42px 0px;}
.casessss_nav ul li:nth-of-type(3) a{ background: url(../images/c_tio3.jpg) no-repeat 42px 0px;}
.casessss_nav ul li:nth-of-type(4) a{ background: url(../images/c_tio4.jpg) no-repeat 42px 0px;}
.casessss_nav li { float: left;position: relative; -o-transition: all .3s ease; transition: all .3s ease;}
/*.case_nav li.on img { box-shadow: 0 5px 35px 0 rgba(0, 0, 0, .11) }*/
.casessss_nav li.on a{color: #333; }
.casessss_nav div { width: 80px; height: 80px; float: left; margin-left: 32px; position: relative; -o-transition: all .3s ease; transition: all .3s ease; background: #fff; border-radius: 50% }
.casessss_nav div img { width: 80px; height: 80px; border-radius: 50%; position: relative; z-index: 2 }
.casessss_nav div:hover img { box-shadow: 0 5px 35px 0 rgba(0, 0, 0, .11) }
.casessss_con { overflow: hidden;}
.casessss_con ul{ overflow: hidden;height: 690px; margin-bottom: 36px;}
.casessss_con ul li{ float: left; font-size: 0; line-height: 0; margin: 0 0 10px  10px; overflow: hidden;position: relative;}
.casessss_con ul li em{ display: none; background:rgba(3,89,191,0.9); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.casessss_con ul li em i{ display: block; padding:81px 0 0 49px; line-height: 100%; font-size: 24px; color: #fff;}
.casessss_con ul li em span{ width: 500px; font-size: 16px; color: #fff; line-height: 26px; margin-left: 49px; display: block; padding-top: 15px; height: 108px;}
.casessss_con ul li em b{ display: block;background: url(../images/c_moe.png) no-repeat; width: 140px; height: 42px; line-height: 42px; color: #fff; font-size: 16px; padding-left:
20px;font-weight: normal; margin-left: 49px;}
.casessss_con ul li:hover em{ display: block;}
.casessss_prev1 { position: absolute; z-index: 3; width: 70px;left:-70px;top:354px;}
.casessss_next1 { position: absolute; z-index: 3; width: 70px;right:-70px;top:354px;}
.casessss h5{background: url(../images/c_bgm.png) no-repeat center bottom; height: 105px; text-align: center;}
.casessss h5 a{ display: inline-block; text-align: left;background: url(../images/c_m.png) no-repeat; width: 280px; height: 60px; line-height: 60px; color: #fff; padding-left: 75px; font-size: 20px;font-weight: normal;}

/**/
.shil ul{ overflow: hidden;}
.shil ul li{ float: left; width:16.6%; border-left: 3px solid #afafaf;height: 574px; position: relative;}
.shil ul li img{ display: none;transition: all 0.3s linear 0s;}
.shil ul li.on{ width: 32%;}
.shil ul li.on img{ display: inline-block; width: 100%;}
.shil ul li h4{ position: absolute; left: 20%; font-size: 18px; color: #666;font-weight: normal; line-height: 100%; z-index: 55;top: 0;transition: all 0.3s linear 0s;}
.shil ul li h4 i{ display: block; padding-top: 404px; font-size: 30px; color: #333;font-weight: normal;line-height: 100%; padding-bottom: 28px;background: url(../images/shil1.png) no-repeat 0 88px;}
.shil ul li h4 em{ display: block; padding-bottom: 9px;}
.shil ul li:nth-of-type(2) h4 i{background: url(../images/shil2.png) no-repeat 0 88px;}
.shil ul li:nth-of-type(3) h4 i{background: url(../images/shil3.png) no-repeat 0 88px;}
.shil ul li:nth-of-type(4) h4 i{background: url(../images/shil4.png) no-repeat 0 88px;}
.shil ul li:nth-of-type(5) h4 i{background: url(../images/shil5.png) no-repeat 0 88px;}
.shil ul li.on h4 i{padding-top: 88px; background: none; color: #fff;}
.shil ul li.on h4{ color: #fff; left: 14.5%;}
.shil ul li.on{ border-right: none;}
    /**/
.ns_fla{background: url(../images/ns_fla.jpg) repeat; overflow: hidden; padding-bottom: 50px;}
.ns_fl{float:left;width:33.5%;position: relative;line-height: 0;}
.ns_fl img{ display: inline-block; width: 100%;}
.ns_fl p{position: absolute;left:20px;bottom:20px;width:86%;padding-left:20px;background: #fff}
.ns_fl p span a {display: block;height:33px;line-height: 33px;padding-top:30px;font-size:20px;color: #333333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;background: url(../images/ns_ico1.png) no-repeat 93% 44px;}
.ns_fl p em {font-size:16px;color: #888;line-height: 28px;padding-top:9px;display: block; margin-right: 20px; height:85px;}
.ns_fr{float: right;width:64.75%;}
.ns_fr ul li{ float: left; width:48.75%; background: #fff; box-sizing: border-box; padding: 2.5%;transition: all 0.3s linear 0s; margin-bottom: 20px;}
.ns_fr ul li:nth-of-type(2n){ float: right;}
.ns_fr ul li:hover{transform: translateY(-3px);box-shadow:  0 5px 25px 0 rgba(0, 0, 0, .11);;}
.ns_fr ul li i{ display: block; line-height: 100%; color: #999; font-family: Arial; font-size: 18px; line-height: 100%; padding-bottom:0; border-bottom: 2px solid #cacaca; margin-bottom: 0; padding-top: 0;background: url(../images/n_mr.png) no-repeat right 26px;text-align:right;float:right;}
.ns_fr ul li em{ display: block;}
.ns_fr ul li em a{ display: block; color: #333; font-size: 20px; height: 100%; line-height: 100%;}
.ns_fr ul li em span{ display: block; color: #888; font-size: 16px; line-height: 28px; padding-top: 14px; height:75px;}
/**/
.about{ overflow: hidden;background: url(../images/abo.jpg) no-repeat center 0; height: 536px;}
.about .main_title a{ text-align: right; margin-right: 11.5%; color: #fff; font-size: 2.5vw; margin-top: 90px;}
.about .main_title a span{ color: #fff;background: url(../images/a_m2.png) no-repeat right 60%; font-size: 1.1vw;}
.about p{ text-align: left;float: right; margin-right: 11.5%; color: #fff;  width: 82%; font-size: 16px; line-height: 29px;}
.about p em{ display: block; margin-top: 46px;}
.about p em a{ display: block; color: #fff; padding-right: 32px;background: url(../images/a_m.png) no-repeat right 3px; line-height: 100%;}
/**/
.quick{ overflow: hidden; padding: 85px 0;}
.quick ul li{ float: left; width: 22%; box-sizing: border-box; overflow: hidden; border-right: 1px solid #e3e3e3; height: 70px; margin-right: 5%;}
.quick ul li:last-of-type{ border-right: none; margin-right: 0; width: 19%;}
.quick ul li i{ display: inline-block; float: left; width: 70px; height: 70px; border-radius: 25px; background: #005bc7; margin-right:5%;}
.quick ul li em{ display: inline-block; float: left; font-size: 28px; color: #333; padding-top: 12px;}
.quick ul li em span{ display: block; font-size: 14px; color: #808080; padding-top: 5px;}
.quick ul li:hover i{ background: #d9312f;}
/**/
.links { height: 90px; overflow: hidden; background: #1f1f1f; clear: both }
.links em { display: inline-block; font-style: normal; font-size: 14px; line-height: 90px; font-weight: 700; color: #a9a9a9; margin-right: 34px }
.links a { font-size: 14px; color: #a9a9a9; line-height: 72px; display: inline-block; margin-right: 26px; transition: .3s ease; -o-transition: .3s ease }
.links a:hover {text-decoration: underline;}
/**/
.tta{background: url(../images/tta.jpg) no-repeat center 0; height: 600px; margin-top: -42px; padding-top:240px; box-sizing: border-box; color: #fff;}
.tta h3{ float: left; width: 35%; margin-top: 30px;}
.tta h3 i{ display: inline-block; padding-left: 50px;background: url(../images/tt_tel.png) no-repeat; height: 63px; font-weight: normal; font-size: 18px; line-height: 39px;}
.tta h3 i span{font-family: 黑体; font-size: 40px;font-weight: normal;}
.tta h3 em{ display: block;}
.tta h3 em a{ display: block; width: 445px; height: 56px; line-height: 56px; text-align: center; border: 2px solid #fff; font-size: 26px; color: #fff;font-weight: normal; transition: all 0.2s;}
.tta h3 em a:hover{ background: #fff; color: #002f9f;}
.tta p{text-align: right; width:65%; float: right; text-shadow: 2px 2px 2px #222;}
.tta p i{ display: block; font-weight: bold; line-height: 100%; font-size: 48px; font-weight: bold;}
.tta p i span{ padding-left: 3.5%;}
.tta p em{ display: block;  font-size: 28px; padding-top: 22px;}
.tta p em span{ display: block; padding-top: 70px; font-size: 20px;}
/**/
.jijr ul{ overflow: hidden;}
.jijr ul li{ float: left; position: relative; font-size: 0; width:23.87%; margin-right: 1.5%; font-size: 0; line-height: 0; border-radius:4px; overflow: hidden;}
.jijr ul li img{ width: 100%; display: inline-block;}
.jijr ul li:last-of-type{ margin-right: 0;}
.jijr ul li em{ display: block; position: absolute; left:8%; top: 5%; color: #fff; font-size: 20px; transition: all 0.2s;}
.jijr ul li em b,.jijr ul li em strong{ display: none;}
.jijr ul li em i{ display: block; line-height: 100%; padding-bottom: 65px;background: url(../images/fa_m1.png) no-repeat left bottom;}
.jijr ul li em i span{ display: block; font-size: 32px; line-height: 100%; padding-bottom: 15px;}
.jijr ul li:hover em{background: rgba(5,87,184,0.9); left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding-left: 8%; padding-top: 20%; font-size: 37px;}
.jijr ul li:hover em i{ background: none; font-size: 20px; padding-bottom: 24px;}
.jijr ul li:hover em i b{ display: block;font-weight: normal; color: #3375c3; line-height: 100%; padding-bottom:12px; font-size: 32px;}
.jijr ul li:hover em strong{ display: block; font-size: 16px; color: #fff; line-height: 30px;font-weight: normal; padding-right: 5%;}
.jijr ul li:hover em strong span{ display: block; margin-top: 37px;background: url(../images/fa_m2.png) no-repeat; width: 160px; height: 42px; line-height: 42px; font-size: 16px; color: #fff; padding-left: 27px;}
/**/

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