#offline {  position: fixed;
  left:0; z-index:999;
  top:100%; width:310px; margin-top:-30px;
 }

* {
  margin:0;
  padding:0;
  font-family: "Arial", "Helvetica Neue", Helvetica, "Microsoft JhengHei", "微軟正黑體", Sans-serif;
  word-spacing:-2px;
}



.message {
position: absolute; opacity:0;
top: 250px;
left: 0;
width: 100%;
height: 280px; padding:0 5px 0 0;

transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
 
-moz-box-shadow: 0px -2px 5px #000;
-webkit-box-shadow: 0px -2px 5px #000;
box-shadow: 0px -2px 5px #000;
}


#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:0;
  top:0;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:5px;
  background:#5c962a;
width: 80px;
border-radius: 3px;
color: #FFF;
line-height:20px;
font-size:15px; letter-spacing:1px;
text-align:center;
-webkit-font-smoothing: antialiased;
  transition:all 500ms ease;
}

#toggle + label-sc {
  position:absolute;
  cursor:pointer;
  padding:5px;
  background:#6E862E;
width: 80px;
border-radius: 3px;
color: #FFF;
line-height:20px;
font-size:15px; letter-spacing:1px;
text-align:center;
-webkit-font-smoothing: antialiased;
  transition:all 500ms ease;
}

#toggle + label:after {
  content:"Offline ▲" ;
}

#toggle + label-sc:after {
  content:"离线咨询 ▲" ;
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: -280px;opacity:1;
}

#toggle:checked ~ .container {
  margin-top: 280px;
}

#toggle:checked + label {
  background:#41A88E;
}

#toggle:checked + label:after {
  content:"Offline ▼"; 
}

#toggle:checked + label-sc:after {
  content:"离线咨询 ▼"; 
}