a,img,button,input,textarea,p,span,ul,div{-webkit-tap-highlight-color:rgba(255,255,255,0);}
html,body,h1,h2,h3,h4,h5,p,form,button,dl,dd,dt {margin:0; padding:0; font-size:100%;}
html {overflow-x:hidden;moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}
img {height:auto; display:block; border:0;}
body {font-family:"Hiragino Sans GB","Helvetica Neue";background:#FFF; overflow-x:hidden;}
ul,ol,dl,dd,dt {list-style:none; margin:0; padding:0;}
a,img,button,input,textarea {outline:none; border:none; background:none; -webkit-appearance:none;}
i,em {font-style: normal;}
.fl{float:left;}
.fr{float:right;}
.temp{display:none!important;}
@media screen and (max-width: 320px) {html {font-size:12px;}}
@media screen and (min-width: 320px) and (max-width: 360px) {html {font-size:14px;}}
@media screen and (min-width: 360px) and (max-width: 400px) {html {font-size:16px;}}
@media screen and (min-width: 400px) and (max-width: 440px) {html {font-size:18px;}}
@media screen and (min-width: 440px) and (max-width: 480px) {html {font-size:20px;}}
@media screen and (min-width: 480px) and (max-width: 520px) {html {font-size:22px;}}
@media screen and (min-width: 520px) and (max-width: 560px) {html {font-size:24px;}}
@media screen and (min-width: 560px) and (max-width: 600px) {html {font-size:26px;}}
@media screen and (min-width: 600px) {html {font-size:28px;}}
.o{overflow:hidden;}
/*  */
#main{
	width:100%;
	max-width:860px;
	overflow:hidden;
	position:relative;
	margin:0 auto;
}
/* head start */
.head{
	width:100%;
	position:relative;
	background-color:#F9F9F9;
	border-bottom:1px solid #b2b2b2;
}
.head .img{
	width:10.67%;
	position:relative;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	margin:1% auto 0;
}
.head .img .prop{
	margin-top:100%;
}
.head .img img{
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
.head .name{
	text-align:center;
	color:#000;
	line-height:2;
	font-size:.857rem;
}
.head .line{
	width:1px;
	height:1px;
	background-color:#4DD570;
}
/* head end */
/* message start */
#message{
	background-color:#FFF;
	width:100%;
	position:relative;
	overflow:auto;
	height:200px;
}
#message ul{
	list-style:none;
	width:100%;
	overflow:hidden;
	padding-bottom:4rem;
}
#message ol{
	font-size:.7rem;
	color:#909095;
	text-align:center;
	line-height:3;
	clear:both;
}
#message li{
	clear: both;
	display: table;
	max-width: 65%;
	padding: 1% 3%;
	width: auto;
	-moz-border-radius:1rem;
	-webkit-border-radius:1rem;
	border-radius:1rem;
	position:relative;
	margin-top:2%;
}
#message li img{
	width:90%;
	margin:2% auto;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
#message li em{
	position:relative;
	z-index:2;
}
#message .my{
	color:#000;
	background-color:#e5e5ea;
	float:left;
	left:-100%;
}
#message .you{
	color:#FFF;
	background-color:#037CFF;
	float:right;
	right:-100%;
}
/* message end */
/* input start*/
#input{
	width:100%;
	position:fixed;
	left:0;
	right:0;
	max-width:860px;
	bottom:-200%;
	overflow:hidden;
	margin:0 auto;
	background-color:#FFF;
}
#input input{
	border:1px solid #C7C7CC;
	width:100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding:0;
	font-size:1rem;
	line-height:1.8;
	-moz-border-radius:500px;
	-webkit-border-radius:500px;
	border-radius:500px;
	text-indent:1rem;
	width:96%;
	margin:1% auto;
	display:block;
}
/* keyboard start */
#keyboard{
	width:100%;
	overflow:hidden;
}
#keyboard .candidate{
	background-color:#F4F5F6;
	width:100%;
}
#keyboard .candidate ul{
	width:98%;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	word-break: keep-all;
	text-align:center;
	text-align:left;
}
#keyboard .candidate ol{
	color:#39393a;
	font-size:.6rem;
	line-height:1;
	margin-top:.2rem;
	display:block;
	text-align:left;
	text-indent:.8rem;
}
#keyboard .candidate li{
	color:#161616;
	line-height:1.3;
	font-size:1.1rem;
	padding:0 .8rem;
	display:inline-block;
}
#keyboard .candidate li:nth-child(2){
	color:#3091FB;
}
#keyboard .candidate li.on,#keyboard .candidate li:active{
	color:#FFF;
	background-color:#1181FC;
}
#keyboard .interface{
	width:100%;
	clear:both;
	position:relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-top:1px solid #BBBCBD;
}
#keyboard .interface .spell,#keyboard .interface .clavier,#keyboard .interface .action{
	width:20%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	position:absolute;
}
#keyboard .interface .max-prop{
	margin-top:55%;
}
#keyboard .interface .spell{
	background-color:#C1C6CA;
	left:0;
	height:100%;
}
#keyboard .interface .spell li{
	height:20%;
	text-align:center;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color:#202121;
	border-bottom:1px solid #B0B3B6;
	font-size:.9rem;
	display: flex;
	justify-content: center;
	align-items: center;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-box-pack:center;
}
#keyboard .interface .spell li:active{
	background-color:#FFF;
}
#keyboard .interface .spell .else{
	display:block;
}
#keyboard .interface .spell li p{
	width:50%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-box-pack:center;
}
#keyboard .interface .spell li .img{
	background-repeat:no-repeat;
	border-right:1px solid #B0B3B6;
	background-position:center;
	background-size:44%;
}
#keyboard .interface .clavier{
	left:20%;
	width:60%;
	height:100%;
	border-left:1px solid #BEC0C1;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#keyboard .interface .clavier li{
	height:25%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:33.33333%;
	float:left;
	text-align:center;
	border-right:1px solid #BFC0C1;
	border-bottom:1px solid #BFC0C1;
	position:relative;
}
#keyboard .interface .clavier li .number{
	color:#B0B3B8;
	font-size:.7rem;
	line-height:1.7;
}
#keyboard .interface .clavier li .letter{
	color:#0F0F10;
	font-size:1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-box-pack:center;
	position:absolute;
	left:0;
	top:5%;
	width:100%;
	height:100%;
}
#keyboard .interface .clavier .no-border{
	border-bottom:none;
}
#keyboard .interface .clavier .spacing{
	width:66.6666666%;
}
#keyboard .interface .clavier .spacing .letter{
	width:20%;
	border:2px solid #040404;
	border-top:none;
	height:10%;
	left:50%;
	margin-left:-10%;
	top:50%;
}
#keyboard .interface .clavier .on,#keyboard .interface .clavier li:active{
	background-color:#C5CACD;
}
#keyboard .interface .action{
	left:80%;
	height:100%;
	width:20%;
}
#keyboard .interface .action li{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	background-color:#C5CACD;
	display: flex;
	justify-content: center;
	align-items: center;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-box-pack:center;
	text-align:center;
	border-bottom:1px solid #9FA0A0;
}
#keyboard .interface .action .del{
	height:25%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:30%;
}
#keyboard .interface .action .letter{
	height:25%;
}
#keyboard .interface .action .enter{
	height:50%;
}
#keyboard .interface .action .on{
	background-color:#3993F6;
	color:#FFF;
}
#keyboard .interface .action li:active{
	background-color:#FFF;
}
#keyboard .interface .finger_left{
    background-position: right 0;
    background-repeat: no-repeat;
    background-size: 180% auto;
    height: 190%;
    left: 0;
    position: absolute;
    top: 0;
	display:none;
    width: 60%;
}
#keyboard .interface .finger_right{
	background-position: left 0;
	background-repeat: no-repeat;
    background-size: 180% auto;
    height: 190%;
    right: 0;
    position: absolute;
    top: 0;
    width: 60%;
	display:none;
}
/* keyboard end */
/* input end*/