@charset "utf-8";

/* CSS Document */

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,select,th,td,figure,figcaption{padding: 0px; margin: 0px; color:#333; font-size:12px; font-family:Arial;}

h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%}

body{ line-height:1.8;}

address,cite,dfn,em,var{ font-style:normal}

small { font-size:12px}

ul,ol{ list-style-type:none; list-style-image:none}

a { color:#333; text-decoration:none; outline:none;}
header{
	margin-bottom:5px;
}



#onlineService{ position:fixed; right:0; top:20%; z-index:120;}

.offside{ width:50px;}

.offside li{ width:50px; height:50px; position:relative; background:#fff; overflow:hidden; text-align:center; transition:all .7s; -webkit-transition:all .7s;}

.offside .code{ position:absolute; top:0; right:50px; display:none; margin:0;}

.offside a,

.offside div{ color:#333; position:absolute; z-index:11; display:block; top:0; right:0; bottom:0; cursor:pointer;}

.offside p{ float:left; line-height:50px; font-size:16px; font-weight:700; padding:0 0 0 10px; color:#fff; opacity:0;}

.offside .icon{ font-size:28px; height:100%; line-height:50px; text-align:center; display:block; color:#fff;}
.offside .icon img{/*width:100%;*/height:100%; display:block;}

.offside li:not(.li_3) a,

.offside li:not(.li_3) div{ left:0;}

.offside .li_3 a,

.offside .li_3 div{ width:50px; }
.offside li:nth-child(1){ background:#408ed6;}

.offside li:nth-child(2){ background:#ff6800;}

.offside li:nth-child(3){ background:#62ad44;}

.offside li:nth-child(4){ background:#ff6550;}

.offside li:nth-child(5){ background:#b1b1b1;}

.offside li:nth-child(6){ background:#d3d3d3;}

.offside li:nth-child(7){ background:#b1b1b1;}

.offside li:nth-child(8){ background:#d3d3d3;}

.offside li:nth-child(9){ background:#6FF; height:20px;}

.offside li:nth-child(9) .icon{ line-height:20px;}

.offside li:hover a,

.offside li:hover div,

.offside li:hover .icon{ color:#fff;}

.offside li:hover p{ opacity:1;}

.offside li:not(.li_3):hover{ width:60px; transform:translateX(-10px); -webkit-transform:translateX(-10px);}

.offside .tel{ width:200px; transform:translateX(-150px); -webkit-transform:translateX(-150px);}

.offside .back_none{ height:0; border:0 !important;}

.offside .li{ transform:translateX(100%); -webkit-transform:translateX(100%);}

.offside .unfold{ width:30px; transform:translateX(20px); -webkit-transform:translateX(20px);}
.offside .unfold .icon img{ margin-left:-10px;}