@charset "utf-8";
/* CSS Document */
body,html{ background-color:#fafbfc;font-size:100%; font-size:16px; color:#333; padding:0; margin:0;font-family: Roboto,"Helvetica Neue", Arial, sans-serif, sans-serif,"苹方";}
img{border:none; outline:none;}
*{ padding:0; margin:0;}
body,html{color:#333;}
a,a:visited{ color:inherit; text-decoration:none;}
input,button,select,option{ outline:none;border: none;}
h1,h2,h3,h4,h5,h6,ul,li,dl,dd,dt,p{ padding:0; margin:0; list-style:none;}
button{
	cursor: pointer;
}
textarea{
	 resize: none;
}
::-webkit-input-placeholder { /* WebKit browsers */ 
color: #999; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #999; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #999; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #999; 
}
input,select{-webkit-appearance:none;}
select{
	background: url(../images/down.png) no-repeat 97% center;
	background-size: 18px auto
}
.main{margin: 0 auto; overflow: hidden; width:750px;}
/*以上为全局*/

.chat_box{
	height: calc(100% - 1.5rem);
	overflow: auto;
}
.server {
display: flex;
padding: 2vh 11vw 2vh 2vw;
flex-direction: row;
justify-content: flex-start;
}
.serverIcon {
width: 10vw;
height: 10vw;
}
.serverIcon img {
	width: 140%;
	position: relative;
	left: -7px;
}
.serverContent {
width: 71vw;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9;
font-size: 0;
}
.left_box {
margin-left: 10px;
}
.right_liao_bg {
width: 100%;
}
.left_bg_top {
position: relative;
top: 1px;
}
.leftMsg {
padding: 0vh 5.5vw;
background-color: #f5f5f5;
z-index: 10;
font-size: 18px;
color: #3B3B3B;
line-height: 20px;
font-weight: 400;
word-break: break-all;
min-width: 590rpx;
box-sizing: border-box;
}
.customer {
display: flex;
justify-content: flex-end;
padding: 1vh 2vw 1vh 11vw;
}
.customerContent {
width: 71vw;
height: auto;
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 9;
font-size: 0;
}
.right_box {
margin-right: 10px;
}
.rightMsg {
font-size: 18px;
line-height: 20px;
padding: 1vh 5.5vw;
background: url(https://zyapi.xiquanapp.com/zy_img/right_liao2.jpg);
background-size: 100%;
min-width: 590rpx;
z-index: 10;
color: #3B3B3B;
font-weight: 400;
word-break: break-all;
box-sizing: border-box;
}
.serverIcon2 {
width: 10vw;
height: 10vw;
}
.serverIcon2 img {
width: 100%;
border-radius: 50%;
}

.chat_btm{
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chat_shu_box{
	height: 1.1rem;
	width: 90%;
	border-radius: .1rem;
	background-color: #635d4f;
	position: relative;
	overflow: hidden;
}
.chat_shu_box input{
	height: 100%;
	width: calc(100% - .8rem);
	background-color: transparent;
	padding: 0 .2rem;
	font-size: .3rem;
	color: #fff;
}
.chat_shu_box .speck_img{
	width: .6rem;
	position: absolute;
	right: .3rem;
	top: .25rem;
}
.chat_shu_box .fasong{
	width: .5rem;
	position: absolute;
	right: .3rem;
	top: .3rem;
}
.fasong{
	display: none;
}
.chat_btm .chat_speck_box {
	height: 1.1rem;
	width: 90%;
   display: none;
	position: relative;

}
.chat_btm .chat_speck_box button{
	height: 1.1rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: .1rem;
	background-color: #635d4f;
	color: #fff;
	font-size: .36rem;
	position: relative;

}
.chat_btm .chat_speck_box img{
	width: .6rem;
	position: absolute;
	right: .3rem;
	top: .25rem;
}
.speck_ti{
	text-align: center;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 1.5rem;
	font-size: .28rem;
	display: none;
	z-index: 999;
}
@keyframes fadeIn {  
from { opacity: 0; }  
to { opacity: 1; }  
}  

.animated-content {  
/* opacity: 0;   */
animation: none;  
}  

.animated-content.visible {  
animation: fadeIn 2s ease forwards;  
display: block !important;
}  

.text {  
display: none;
transition: opacity 2s ease 2s;  
white-space: pre-wrap; /* 保持空格和换行符 */  
font-family: monospace; /* 使用等宽字体以获得更好的打字效果 */  
line-height: .5rem;
}  

.text.show {  
display: block !important;  
}
.loading-dots {  
display: inline-block;  
font-size: 24px; /* 控制点的大小 */  
color: #3B3B3B; /* 点的颜色 */  
display: none;
position: relative;
top: -5px;
}  

.loading-dots span {  
animation: dotAnimation 1.5s infinite;  
display: inline-block;  
animation-delay: calc(var(--n) * -0.5s); /* 使用CSS变量和calc()来设置延迟 */  
}  

@keyframes dotAnimation {  
0%, 100% {  
transform: scale(1);  
}  
50% {  
transform: scale(1.5); /* 在中点放大点 */  
}  
}  

/* 使用CSS自定义属性（也称为CSS变量）为每个点设置不同的延迟 */  
.loading-dots span:nth-child(1) { --n: 0; }  
.loading-dots span:nth-child(2) { --n: 1; }  
.loading-dots span:nth-child(3) { --n: 2; }

.jiebox{
height: 1.1rem;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.1rem;
background-color: #3e90f6;
display: none;
}
/* 语音音阶------------- */
.prompt-loader {
width: 80%;
height: .6rem;
display: flex;
align-items: center;
justify-content: space-between;

}
.prompt-loader .em {
display: block;
background: #fff;
width: 4px;
height: 10%;

float: left;
}
.right_box .prompt-loader .em{
background: #fff;
}
.prompt-loader .em:last-child {
margin-right: 0px;
}
.prompt-loader .em:nth-last-child() {
animation: load 1.5s 1.4s infinite linear;
}
.prompt-loader .em:nth-child(2) {
animation: load 1.5s 1s infinite linear;
}
.prompt-loader .em:nth-child(3) {
animation: load 1.5s 0.6s infinite linear;
}
.prompt-loader .em:nth-child(4) {
animation: load 1.5s 0.2s infinite linear;
}
.prompt-loader .em:nth-child(5) {
animation: load 1.5s 0s infinite linear;
}
.prompt-loader .em:nth-child(6) {
animation: load 1.5s 0.4s infinite linear;
}
.prompt-loader .em:nth-child(7) {
animation: load 1.5s 0.8s infinite linear;
}
.prompt-loader .em:nth-child(8) {
animation: load 1.5s 1.2s infinite linear;
}
.prompt-loader .em:nth-child(9) {
animation: load 1.5s 1.4s infinite linear;
}
.prompt-loader .em:nth-child(10) {
animation: load 1.5s 1s infinite linear;
}
.prompt-loader .em:nth-child(11) {
animation: load 1.5s 0.6s infinite linear;
}
.prompt-loader .em:nth-child(12) {
animation: load 1.5s 0.2s infinite linear;
}
.prompt-loader .em:nth-child(13) {
animation: load 1.5s 0s infinite linear;
}
.prompt-loader .em:nth-child(14) {
animation: load 1.5s 0.2s infinite linear;
}
.prompt-loader .em:nth-child(15) {
animation: load 1.5s 0.6s infinite linear;
}
.prompt-loader .em:nth-child(16) {
animation: load 1.5s 0.2s infinite linear;
}
.prompt-loader .em:nth-child(17) {
animation: load 1.5s 0s infinite linear;
}
.prompt-loader .em:nth-child(18) {
animation: load 1.5s 0.4s infinite linear;
}
.prompt-loader .em:nth-child(19) {
animation: load 1.5s 0.8s infinite linear;
}
.prompt-loader .em:nth-child(20) {
animation: load 1.5s 1.2s infinite linear;
}
.prompt-loader .em:nth-child(21) {
animation: load 1.5s 1.4s infinite linear;
}
.prompt-loader .em:nth-child(22) {
animation: load 1.5s 1s infinite linear;
}
.prompt-loader .em:nth-child(23) {
animation: load 1.5s 0.6s infinite linear;
}
@keyframes load {
0% {
	height: 10%;
}
50% {
	height: 40%;
}
100% {
	height: 10%;
}
}
/* 语音音阶-------------------- */
.index3_top{

	width:4.8rem ;
	display: block;
	margin: 1rem auto 0 ;
	position: relative;
}
.index3_top_img{
	width: 100%;
}
.index3_load{
	width: 1.5rem;
	height: 1rem;
	background-color: #fff;
	border-radius: .4rem;
	position: absolute;
	top: -.3rem;
    right: -.6rem;
	display: none;
	justify-content: center;
	align-items: center;
}
.index3_speak{
	width: 1.5rem;
	height: 1rem;
	background-color: #fff;
	border-radius: .4rem;
	position: absolute;
	top: -.3rem;
    right: -.6rem;
   display: none;
	justify-content: center;
	align-items: center;
}
.index3_speak .prompt-loader .em{
	background-color: #3e90f6;

}
.index3_speak .prompt-loader{
	width: 40%;
}
.index3_cen{
	overflow: hidden;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 2.5rem;
}
.index3_cen_load{
	display: flex;
	justify-content: center;
	margin-bottom: .1rem;
	height: .56rem;
	align-items: center;
}
.index3_cen_text{
	text-align: center;
	
}
.index3_cen_text2{
	text-align: center;
	display: none;
}
.index3_btm{
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: .6rem;
	padding: 0 1.4rem;
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}
.index3_btm img{
	width: 1.2rem;
}
.daduan{
	width: .3rem;
	height: .3rem;
	background-color: #999;
	display: none;
}

/* 弹窗 */
.chat_tan_cont{
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
}
.chat_tan_box{
	width: 50%;
	padding: 0.8rem .4rem 0.6rem;
	background-color: #fff;
	border-radius: .1rem;
}
.chat_tan_text{
	text-align: center;
	font-size: 0.32rem;
	color: #000;
}
.chat_tan_btn{
	background-color: #635d4f;
	height: 0.8rem;
	width: 2rem;
	border-radius: .45rem;
	color: #fff;
	font-size: .26rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: .6rem auto 0;
}




















@media only screen and (min-width:321px) and (max-width:828px) {
.main{ width: 100%;}