:root {
    --bg-color: #009586;
}
.js_mess{width:350px; background:#fff;box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); position:fixed; right:10px; bottom:10px; padding:0px; border-top-left-radius:5px; border-top-right-radius:5px; overflow:hidden; z-index:999;}
.js_mess .js_title{height:50px; line-height:50px; background:var(--bg-color); color:#fff; padding:0px 20px;}
.js_mess .js_title span{display:block; float:right; width:30px;height:100%; text-align:center; cursor:pointer;}
.js_mess .js_title span:after{content:'∨';}
.js_mess .js_cont{padding:10px 20px;}
.js_mess .js_cont textarea{width:100%; height:80px; border:1px solid #ddd;overflow-clip-margin: 0px; margin-bottom:30px; padding-left:5px;}
.js_mess .js_cont input{width:100%; border:1px solid #ddd; height:35px; margin-bottom:30px;padding-left:5px;}
.js_mess .js_cont button{border:0px; background:var(--bg-color);color:#fff; padding:5px 10px; margin:0px auto;}
.js_on .js_title span:after{content:'∧';}
.js_on .js_cont{display:none;}
@media (max-width: 468px){
   .js_mess{width:50px; height:50px; border-radius:50px; bottom:60px; right:20px;border:1px solid #fff; }
/*   .js_mess:before{content:'M'; color:#fff;position:absolute; top:10px; left:30%; font-size:20px; font-weight:bold;}*/
   .js_mess .js_title{overflow:hidden;width:50px; height:50px; padding:0px;margin:0px; position:relative;}
   .js_mess .js_title span{position:absolute;width:50px; height:50px;background:var(--bg-color);z-index:1; top:0px;left:0px;border-radius:50px; }
   .js_mess .js_title span:after{content:'M'; font-weight:bold;}
   .js_on{width:calc(100% - 20px); left:10px; right:10px;border-radius:10px; bottom:0px;height:auto;}
   .js_on .js_title{width:calc(100% - 40px); padding:0px 20px;}
   .js_on .js_title span{position:relative;}
   .js_on .js_title span:after{content:'∨'; }
   .js_on .js_cont{display:block;}
}