@charset "utf-8";
@import url(all.css);
/****index content style****/
div#main_content {
	width: 100%;
	text-align: center;
	background: url(../../company/img/content_full_bg.jpg) repeat-x center top;
}
div#main_content div#main_content_in {
	width: 980px;
	margin: 0 auto 0 auto;
	text-align: left;
	padding-top: 17px;
	padding-bottom: 20px;
}
#main_sns_box{
	height: 280px;
	width: 980px;
	margin: 0 auto;
	text-align: left;
}
#main_sns_box li{width: 25%; padding-top: 20px; float: left;}
#main_sns_box h4{border-bottom: 1px solid #CfCfCf; height: 60px; line-height: 60px; margin-right: 40px; margin-left: 40px; text-indent: 40px; font-size: 16px;  font-family: "微软雅黑";}
#main_sns_box h4.weibo{background: url(../img/icon/weibo.png) left center no-repeat;}
#main_sns_box h4.weixin{background: url(../img/icon/weixin.png) left center no-repeat;}
#main_sns_box h4.douyin{background: url(../img/icon/douyin.png) left center no-repeat;}
#main_sns_box h4.xiaohongshu{background: url(../img/icon/xiaohongshu.png) left center no-repeat;}
#main_sns_box em{display: block; font-style: normal; font-size: 12px; line-height: 50px; color: #aaa}
#main_sns_box .imgbox{padding: 20px 0; text-align: center;}
#main_sns_box .imgbox img{border:1px solid #eee;transition: all 0.5s ease-in-out; box-shadow: 10px 10px 15px rgba(0,0,0,0.1);}
#main_sns_box .imgbox img:hover{box-shadow: 1px 1px 10px rgba(0,0,0,0.2); }

#content_len_01 {width: 900px; height: 150px; padding:0 40px;position: relative; overflow: hidden;}
#content_len_01 .swiper{width: 900px; height: 150px; position: relative; overflow: hidden;}
#content_len_01  ul { margin: 10px auto; display:block; }
#content_len_01  li { float: left; width: 120px; margin:0 8px; font-size: 14px; line-height: 36px; text-align: center; display: block; letter-spacing: -1px; }
#content_len_01  li img { width: 100%;border-radius: 100%; 
	box-shadow: 10px 10px 15px rgba(0,0,0,0.1); 
  	transition: all 0.5s ease-in-out;
  	border: 1px solid rgba(91,195,198,0.3);
  	background-color: #EEF9FB; 
  	background-image: radial-gradient(farthest-corner at top left, rgba(255,255,255,1), rgba(91,195,198,0.15)); 
   }
#content_len_01 li:hover img { background: #51C5DA; box-shadow: 10px 10px 15px rgba(77,192,213,0.35); }
#content_len_01 li a {color: #333;display: block; width: 90%; height: 90%; margin: 5%; transition: all 0.3s ease-in-out; text-decoration: none; }
#content_len_01 li:hover a { color: #00abe4; text-decoration: none;}

div#main_content div#content_len_02 {
	clear: both;
	padding: 20px 0 0px 0;
}
div#main_content div#content_len_02 h2 {
	font-size: 16px;
	border-bottom: solid 1px #D2D2D2;
	border-top: solid 1px #D2D2D2;
	background-color: #D9E7EA;
	color: #4c4c4c;
	height: 30px;
	clear: both;
	padding-right: 9px;
	padding-left: 13px;
	line-height: 30px;
}
div#main_content div#content_len_02 h2 a {
	float: right;
	font-size: 12px;
	color: #767676;
}
div#main_content div#content_len_02 div#left_box_02 {
	float: left;
	width: 480px;
}
div#main_content div#content_len_02 div#left_box_02 div#left_box_02_list {
	width: 100%;
	float: left;
}
div#main_content div#content_len_02 div#left_box_02 div#left_box_02_list div#left_box_02_list_in {
	padding-top: 13px;
}
div#main_content div#content_len_02 div#left_box_02 dl {
	padding: 0 0 10px 12px;
	height: 106px;
	clear: both;
	color: #3d3d3d;
}
div#main_content div#content_len_02 div#left_box_02 dl dt {
	float: left;
	width: 106px;
	height: 106px;
	font-size: 0;
	padding-right: 17px;
}
div#main_content div#content_len_02 div#left_box_02 dl dd p {
	padding: 0;
	margin: 6px 0 0 0;
	height: 40px;
	color: #999;
}
div#main_content div#content_len_02 div#left_box_02 dl dt img {
	border: solid 1px #B9B9B7;
	padding: 1px;
}
div#main_content div#content_len_02 div#left_box_02 dl dd {
	float: left;
	width: 140px;
	line-height: 19px;
	width: 335px;
	_width: 330px;
	padding-right: 10px;
}
div#main_content div#content_len_02 div#left_box_02 dl dd.bor {
	border-bottom: solid 1px #B9B9B7;
	font-size: 14px;
}
div#main_content div#content_len_02 div#left_box_02 h3 {
	font-size: 14px;
	padding-left: 4px;
}
div#main_content div#content_len_02 div#left_box_02 dl dd span {
	display: block;
	padding: 1px 0 4px 4px;
}
div#main_content div#content_len_02 div#left_box_02 dl dd span a {
	color: #5BC2DC;
}
div#main_content div#content_len_01 ul#center_box_02 {
	float: left;
	width: 980px;
}
div#main_content div#content_len_02 div#right_box_02 {
	float: right;
	width: 480px;
}
div#main_content div#content_len_02 div#right_box_02 h3 {
	font-family: "微软雅黑", "宋体";
	text-align: center;
	color: #00abe4;
	font-size: 16px;
	padding: 16px 0 0 0;
}
div#main_content div#content_len_02 div#right_box_02 .right_box_02_title {
	padding-top: 15px;
	height: 408px;
}
div#main_content div#content_len_02 div#right_box_02 .right_box_02_title img {
	border: solid 1px #5BC2DC;
}
div#main_content div#content_len_02 div#right_box_02 .right_box_02_title p {
	font-size: 14px;
	text-align: center;
	margin: 0;
	color: #606060;
}
.right_box_02_title .lenr01title1 img {
	width: 478px;
	height: 378px;
}
.right_box_02_title .lenr01title1 p {
	padding: 15px 0 20px 0;
}
.right_box_02_title .lenr01title2 img {
	width: 478px;
	height: 157px;
}
.right_box_02_title .lenr01title2 p {
	padding: 15px 0 30px 0;
}
.right_box_02_title .lenr01title3 img {
	width: 478px;
	height: 92px;
}
.right_box_02_title .lenr01title3 p {
	padding: 15px 0 20px 0;
}
div#main_content div#content_len_03 {
	clear: both;
	padding: 0;
}
div#main_content div#content_len_03 div#left_box_03 {
	float: left;
	width: 484px;
}
div#main_content div#content_len_03 div#left_box_04 {
	float: left;
	width: 213px;
	margin-left: 5px;
}
div#main_content div#content_len_03 div#left_box_03 ul#left_box_03_title {
	width: 484px;
	height: 33px;
	background: url(../img/main_lenl03title.html) no-repeat left top;
}
div#main_content div#content_len_03 div#left_box_03 ul#left_box_03_title li.box_03_left_text {
	float: left;
	padding: 10px 0 0 15px;
}
div#main_content div#content_len_03 div#left_box_03 ul#left_box_03_title li.box_03_right_button1 {
	float: right;
	padding-top: 8px;
	padding-right: 18px;
}
div#main_content div#content_len_02 div#left_box_03 ul#left_box_03_title li.box_03_right_button2 {
	float: right;
	padding-top: 8px;
	padding-right: 3px;
}
div#main_content div#content_len_02 div#left_box_03 div#box_03_list {
	width: 445px;
	height: 190px;
	background: url(../img/main_lenl03bg.html) no-repeat left top;
	padding: 13px 19px 20px 20px;
	_padding-right: 5px !important;
}
div#main_content div#content_len_02 div#left_box_02 #box_03_list_box {
	width: 480px;
	float: left;
}
div#left_box_02 .left_box_02_list_img {
	float: left;
	margin-top: 17px;
}
div#left_box_02 .left_box_02_list_img p {
	margin: 0;
	padding-bottom: 13px;
}
div#main_content div#content_len_02 div#box_03_list_box div {
	float: left;
}
div#main_content div#content_len_02 div#box_03_list_box ul {
	float: left;
	line-height: 22px;
	padding-left: 12px;
	padding-top: 5px;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notstyle1 {
	display: block;
	float: left;
	padding-left: 20px;
	padding-right: 10px;
	background: url(../img/icon/icon_001.gif) no-repeat left center;
	font-size: 12px;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notstyle2 {
	display: block;
	float: right;
	font-size: 14px;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notstyle3 {
	display: block;
	float: left;
	padding-left: 20px;
	padding-right: 10px;
	background: url(../img/icon/icon_003.gif) no-repeat left center;
	font-size: 12px;
}
div#main_content div#content_len_02 #box_03_list_box ul li {
	clear: both;
	line-height: 22px;
	float: left;
	width: 460px;
	padding: 3px 0 2px 0;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notlnkstyle1 a:link {
	color: #E43D45;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notlnkstyle1 a:visited {
	color: #E43D45;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notlnkstyle1 a:active {
	color: #E43D45;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notlnkstyle1 a:hover {
	color: #E43D45;
	text-decoration: underline;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notlnkstyle1, div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notlnkstyle2 {
	/*float:right;
	display:block;
	background:url(/common/img/icon/dot_r.gif) no-repeat left 6px; */
	/*width:415px;   */display: block;
	font-size: 14px;
	line-height: 22px;
	width: 380px;
	overflow:hidden;
}
div#main_content div#content_len_02 div#box_03_list_box ul span.box_03_notlnkstyle2{
	height:25px;
}
div#main_content div#content_len_03 div#right_box_03 {
	float: right;
	width: 252px;
}
div#main_content div#content_len_03 div#right_box_03 div#box_03_content {
	background: url(../img/main_lenr03bg.html) no-repeat left bottom;
	width: 216px;
	height: 192px;
	padding: 14px 19px 0 19px;
	text-align: center;
}
div#main_content div#content_len_03 div#right_box_03 div#box_03_content ul {
	padding-top: 15px;
}
div#main_content div#content_len_03 div#left_box_04 div#box_04_content {
	background: url(../img/main_lenr04bg.html) no-repeat;
	width: 175px;
	height: 190px;
	padding: 14px 19px 0 19px;
	text-align: center;
}

/* 20211027 homepage video */

#normal-broswer {
	display: block;
  	display: none\9; /* For IE8+ */
  	*display: none;  /* For IE7 and earlier */
  	_display: none;  /* For IE6 and earlier */
	display: block\9\0; /* For IE9、10 */
}
#ie-low-broswer {
  	display: none;
  	display: block\9; /* For IE8+ */
  	*display: block;  /* For IE7 and earlier */
  	_display: block;  /* For IE6 and earlier */
  	display: none\9\0; /* For IE9、10 */
}

/* ---- 404 ---- */
.error_content {
	width: 980px;
	margin: 0 auto;
}
.error_content_box {
	background: url(../img/bg_404_top.jpg) no-repeat left top;
	width: 642px;
	margin: 100px auto;
	padding: 10px 0 0;
	text-align: center;
}
.error_content_box h2 {
	font-size: 14px;
	font-weight: bold;
}
.error_content_box_bottom {
	background: url(../img/bg_404_bottom.jpg) no-repeat left bottom;
	width: 642px;
	padding: 40px 0;
	line-height: 1.5;
}
.mt10 {
	vertical-align: middle;
	padding-top: 10px;
	padding-right: 5px;
}
.ht920 {
	height: 920px;
}
.pb5 {
	padding-bottom: 5px;
}
.pl3 {
	padding-left: 3px;
}
.pr0 {
	padding-right: 0px !important;
}
.content_len_flv {
	border: 1px solid #5bc3c4;
	margin-top: 13px;
	width: 478px;
    height: 282px;
}
#main_content_box {
	width: 100%;
	height: 320px;
	background-color: #f6f6f6;
	border-top: 1px solid #e0e0e0;
}
#main_content_in .content_left ,#main_content_in .content_middle,#main_content_in .content_right{
	width: 310px;
	overflow: hidden;
	float: left;
}
#main_content_in .content_left{
	width:540px;
}
#main_content_in .content_left ,#main_content_in .content_middle{
	margin-right: 25px;
}
.content_left {
	display:block;
}

.content_left p, .content_middle p,.content_right p {
	margin: 0;

}
.content_left ul {
	width: 540px;
	padding-top:15px;
}
.content_left ul li {
	float: left;
	display:block;
	height:75px;
	padding-bottom:25px;
}
.content_right p,.content_middle p {
	font-size:12px;
	text-align:center;
	width: 77px;
}
.content_right ul,.content_middle ul {
	width: 290px;
	padding:15px 0 0 15px;
}
#main_content_in .content_middle,.content_middle ul{
	width: 410px;
	margin-right:0;
}
.content_right ul li,.content_middle ul li {
	float: left;
	vertical-align: middle;
	width:100px;
	color: #414141;
	font-size: 14px;
	padding: 5px 15px 6px 5px;
	text-align: left;
}
.content_middle img,.content_right img{
	margin-bottom: 5px;
}
#main_content_in .content_sns_text{
	width: 100%;
	border-bottom: 1px solid #fff;
	text-align: left;
}
#main_content_in .content_sns_text img{
	margin:0 0 -1px;
}

.w140{
	width:140px !important;
	padding-top:0 !important;
}
.w77{
	width:77px !important;
}
.pt40 {
	padding-top: 40px !important;
	height: 30px !important;
}
.content_footer {
	height: 220px;
	width: 980px;
	margin: 0 auto;
	padding-top: 2px;
}
.content_footer dl {
	width: 122px;
	float: left;
	text-align: center;
	color: #1b1b1b;
}
.content_footer dl dt a {
	color: #1b1b1b;
}
.content_footer dl dd {
	color: #5bc3c5;
	padding-top: 9px;
}
.content_footer dl dd a {
	color: #5bc3c5;
}
.pr100{
	padding-right:100px !important;
}
html .video-js .vjs-big-play-button {
    line-height: 3em;
    height: 3em;
    width: 3em;
    top: 50%;
    left: 50%;
    margin: -1.5em 0 0 -1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* 20200619 Video mp4*/

.psVideo {
    width: 478px;
    position: relative;
    margin: 14px auto 0;
    text-align: center;
    transition: all .5s;
    overflow: hidden
}

.my-psVideo {
    position: relative;
    margin: 0 auto;
    width: 478px;
    height: 282px;
    cursor: pointer;
    transition: all .5s;
    background: #000
}

.full {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: #000
}

.psVideo-play-one {
    width: 70px;
    height: 70px;
    background: url(../img/icon/playone.png) no-repeat;
    opacity: .7;
    background-size: cover;
    position: absolute;
    bottom: 50%;
    right: 50%;
    margin: 0 -35px -35px 0;
    cursor: pointer
}

.psVideo-play-footer {
    position: absolute;
    width: 100%;
    height: 36px;
    bottom: 0
}

.psVideo-shade {
    position: absolute;
    height: 60px;
    width: 100%;
    bottom: 4px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
    transition: opacity .3s
}

.psVideo-shade-full {
    bottom: 0
}

.psVideo-shade-on {
    opacity: 1
}

.psVideo-shade-off {
    opacity: 0
}

.psVideo-play-footer .psVideo-play-btn {
    width: 23px;
    height: 23px;
    float: left;
    margin-left: 3%;
    cursor: pointer;
    z-index: 3
}

.psVideo-stop {
    background: url(../img/icon/stop.png) no-repeat;
    background-size: cover
}

.psVideo-play {
    background: url(../img/icon/play.png) no-repeat;
    background-size: cover
}

.psVideo-time {
    float: left;
    font-size: 15px;
    line-height: 23px;
    color: #fff;
    margin-left: 10px;
    z-index: 2
}

.psVideo-dan {
    position: absolute;
    margin-left: 230px;
    margin-top: -1px;
    z-index: 10;
    transition: all .5s
}

.psVideo-dan-input {
    height: 25px;
    background: rgba(245, 245, 245, .8);
    line-height: 25px;
    width: 200px;
    float: left;
    border-right: 1px solid #5f9ea0;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    outline: none;
    text-indent: 2px
}

.psVideo-dan-btn {
    display: inline-block;
    height: 25px;
    font-size: 15px;
    width: 50px;
    text-align: center;
    line-height: 25px;
    float: left;
    color: #454545;
    font-weight: 700;
    background: rgba(245, 245, 245, .9);
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer
}

.psVideo-dan-value {
    position: absolute;
    z-index: 20;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    white-space: nowrap;
    animation: danOnFull 7s linear;
    transform: translateX(-100%)
}

.psVideo-dan-value-full {
    position: absolute;
    z-index: 20;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    white-space: nowrap;
    animation: danOnFull 10s linear;
    transform: translateX(-100%)
}

@keyframes danOn {
    from {
        left: 100%;
        transform: translateX(0)
    }
    to {
        left: 0;
        transform: translateX(-100%)
    }
}

@keyframes danOnFull {
    from {
        left: 100%;
        transform: translateX(0)
    }
    to {
        left: 0;
        transform: translateX(-100%)
    }
}

.psVideo-dan-input-full {
    width: 300px
}

.psVideo-dan-full {
    margin-left: calc(50% - 175px)
}

.psVideo-right-btn {
    float: right;
    margin-right: 3%;
    z-index: 4
}

.psVideo-btn {
    width: 23px;
    height: 23px;
    float: right;
    margin-left: 20px;
    cursor: pointer
}

.all {
    background: url(../img/icon/all.png) no-repeat;
    background-size: cover
}

.loop {
    background: url(../img/icon/loop.png) no-repeat;
    background-size: cover
}

.loop-ture {
    background: url(../img/icon/1loop.png);
    background-size: cover
}

.set {
    position: relative;
    background: url(../img/icon/set.png) no-repeat;
    background-size: cover
}

.set-list {
    display: none;
    background: #000;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 40px;
    left: -85px;
    opacity: .7;
    border-radius: 4px
}

.konge1 {
    display: none;
    position: absolute;
    width: 200px;
    height: 17px;
    bottom: 23px;
    left: -85px;
    text-align: center;
    z-index: 4
}

.set:hover .set-list,
.set:hover .konge1 {
    display: block
}

.play-speed {
    color: #fff;
    font-weight: bolder;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center
}

.play-speed-list {
    padding-top: 5px;
    font-weight: bolder;
    font-size: 17px;
    color: azure;
    text-align: center
}

.play-speed-list span {
    margin-left: 15px;
    margin-right: 15px
}

.play-speed-list span:hover {
    color: #7969ff
}

.moren {
    color: #7969ff
}

.huazhi {
    width: 50px;
    font-size: 15px;
    line-height: 23px;
    color: #fff
}

.sound {
    position: relative;
    background: url(../img/icon/sound.png) no-repeat;
    background-size: cover
}

.jinyin {
    position: relative;
    background: url(../img/icon/jinyin.png) no-repeat;
    background-size: cover
}

.psVideo-progress {
    width: 95%;
    background: #fff;
    height: 2px;
    position: absolute;
    bottom: 50px;
    left: 2.5%;
    cursor: pointer;
    transition: bottom .1s;
    border-radius: 3px
}

.psVideo-progress:hover {
    height: 6px;
    bottom: 48px
}

.psVideo-progress .psVideo-timeBar {
    height: 100%;
    position: absolute;
    top: 0;
    display: block;
    z-index: 2;
    width: 0;
    background: #f9d43a;
    border-radius: 3px
}

#soundBtn:hover .sound-list,
#soundBtn:hover .konge {
    display: block
}

.sound-list {
    display: none;
    position: absolute;
    width: 30px;
    height: 85px;
    bottom: 40px;
    left: -6px;
    text-align: center;
    background: #000;
    border-radius: 3px
}

.konge {
    display: none;
    position: absolute;
    width: 30px;
    height: 17px;
    bottom: 23px;
    left: -6px;
    text-align: center;
    z-index: 4
}

.sound-number {
    position: relative;
    width: 100%;
    text-align: center;
    height: 20px;
    padding-top: 5px;
    line-height: 20px;
    font-size: 15px;
    color: #fff
}

.volume {
    position: relative;
    margin: auto;
    margin-top: 5px;
    width: 7px;
    height: 50px;
    background: aqua;
    border-radius: 2px;
    overflow: hidden
}

.volumeBar {
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    background-color: #fff;
    z-index: 2
}

.player-list {
    position: absolute;
    padding-left: 10px;
    width: 30px;
    height: 60px;
    top: 50%;
    margin-top: -30px;
    background: url(../img/icon/list.png) -10px 0 rgba(0, 0, 0, .1);
    background-size: cover;
    transition: opacity .3s
}

.player-list-on {
    opacity: 1
}

.player-list-off {
    opacity: 0
}

.player-list-bk {
    display: none;
    position: absolute;
    width: 160px;
    height: 250px;
    top: 50%;
    margin-top: -150px;
    background: rgba(0, 0, 0, .3)
}

.player-list:hover {
    background: 0 0
}

.player-list:hover .player-list-bk {
    display: block
}

.player-list-head {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 25px;
    color: #fff;
    background: #7c7d7f
}

.player-list-cotent {
    height: 220px;
    width: 160px;
    overflow: hidden
}

.player-list-box {
    height: 220px;
    width: 195px;
    text-align: center;
    overflow: auto
}

.player-list-video {
    padding-top: 5px;
    margin-left: -10px;
    width: 100%;
    height: 20px;
    text-align: center;
    line-height: 15px;
    font-size: 16px;
    color: #00f7de;
    cursor: pointer;
    font-weight: bolder;
    border-bottom: 1px #60bff2 dashed;
    transition: all .2s
}

.player-list-video:hover {
    height: 25px;
    font-size: 18px;
    line-height: 20px
}

.video-now,
.video-now:hover {
    height: 30px;
    font-size: 20px;
    line-height: 25px;
    background: rgba(139, 288, 255, .3);
    color: #6956ff
}

footer {
    width: 100%;
    height: 30px;
    text-align: center;
    color: #008b8b;
    font-size: 20px;
    line-height: 30px;
    margin-top: 10px;
    top: 0
}

.psVideo-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -35px;
    width: 70px;
    height: 60px;
    z-index: 30
}

.psVideo-loading span {
    display: inline-block;
    width: 10px;
    height: 0;
    position: absolute;
    background: rgba(96, 191, 242, .53);
    top: 50%;
    margin-top: 0;
    left: 0
}

.psVideo-loading span:nth-child(1) {
    animation: span1 1s linear infinite
}

.psVideo-loading span:nth-child(2) {
    height: 30px;
    top: 50%;
    margin-top: -15px;
    margin-left: 20px;
    animation: span2 1s linear infinite
}

.psVideo-loading span:nth-child(3) {
    height: 60px;
    top: 50%;
    margin-top: -30px;
    margin-left: 40px;
    animation: span3 1s linear infinite
}

@keyframes span1 {
    0% {
        height: 0;
        margin-top: 0
    }
    50% {
        height: 50px;
        margin-top: -25px
    }
    100% {
        height: 0;
        margin-top: 0
    }
}

@keyframes span2 {
    0% {
        height: 30px;
        margin-top: -15px
    }
    25% {
        height: 60px;
        margin-top: -30px
    }
    50% {
        height: 30px;
        margin-top: -15px
    }
    75% {
        height: 0;
        margin-top: 0
    }
    100% {
        height: 30px;
        margin-top: -15px
    }
}

@keyframes span3 {
    0% {
        height: 60px;
        margin-top: -30px
    }
    50% {
        height: 0;
        margin-top: 0
    }
    100% {
        height: 60px;
        margin-top: -30px
    }
}