@charset "utf-8";
.online{ position:fixed; top:50%; right:0; width:70px; z-index:99999; margin-top:-155px;}
.online li{ float:left; width:100%; color:#ffffff; position:relative; margin-top:10px; }
.online li:first-child{ margin-top:0; }
.online li a{ display:block; height:70px; padding:10px 0; background:#006dac; overflow:hidden; position:relative; z-index:100; border-radius:7px 0 0 7px;}
.online li:hover a{ background:#d10007; }
.online li .ico{ text-align:center; }
.online li .ico span{ font-size:24px; line-height:30px; }
.online li .title{ text-align:center; font-size:13px; line-height:20px; }
.hnlist li .txt{ transition: 0.5s;-o-transition: 0.5s;-ms-transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s; }
.online li .ontel{ position:absolute; z-index:1; text-align:center; right:-170px; top:0; width:170px; background:#d10007; font-size:18px; line-height:70px; -webkit-transition: all .5s ease-in;-o-transition: all .5s ease-in;-ms-transition: all .5s ease-in;-moz-transition: all .5s ease-in; border-radius:7px; }
.online li:hover .ontel{ right:80px; }

@media screen and (max-width: 768px) {
.footer{ margin-bottom:60px;}	
.online{ top:auto; left:0; bottom:0; width:100%; }
.online li{ float:left; width:25%;  border-left:1px solid #ffffff; margin:0; }
.online li a{border-radius:0;}
.online li:first-child{ border-left:none;}
.online li a{ height:60px; padding:5px 0; }
.online li .ico span{ font-size:20px; line-height:30px; }
.online li .ontel{ display:none;}
}