body{margin: 0; padding: 0;font-family: "Microsoft YaHei","宋体", Arial, "新宋体";border:0;font:inherit;vertical-align:baseline;}
input:focus, textarea:focus{outline: none; outline-offset: 0;}
a{text-decoration:none; color:inherit;}
*{outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}

/* 修改滚动条轨道的样式 */
::-webkit-scrollbar {
width: 2px;
height:2px;
}

/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
width: 2px;
height:2px;
background-color: rgba(0,0,0,0.2);
border-radius: 10px;
}

/* 修改滚动条轨道的背景色 */
::-webkit-scrollbar-track {
width: 2px;
height:2px;
background-color: none;
}

/* 修改滚动条轨道的样式 */
::-ms-scrollbar {
width: 2px;
height:2px;
width: 10px;
}

/* 修改滚动条滑块的样式 */
::-ms-scrollbar-thumb {
width: 2px;
height:2px;
background-color: #333;
border-radius: 10px;
}


.content{position:fixed;z-index:0;top:0;left:0;width:100%;height:100%;overflow:hidden;background:white;}

.contentTop{padding:0 5px;height:60px;line-height:60px;text-align:center;font-size:18px;font-weight:bold;background:linear-gradient(to right,#3366ff,purple);color:black;overflow:hidden;}
.contentTopP{float:left;margin:10px;width:40px;height:40px;border-radius:5px;}
.contentTopP2{position:absolute;top:3px;right:10px;width:52px;height:52px;}
.contentTopView{float:left;width:calc(100% - 60px);height:60px;line-height:40px;text-align:left;color:white;}
.contentTopView1{width:100%;height:40px;line-height:40px;font-size:15px;font-weight:bold;text-overflow:ellipsis;}
.contentTopView2{width:100%;height:15px;line-height:15px;font-size:13px;text-overflow:ellipsis;}

.contentView{width:100%;height:calc(100% - 60px);overflow:hidden;}
.chatContent{width:100%;height:calc(100% - 170px);padding-bottom:30px;overflow:auto;background:#e7e7e7;}

.questionView{width:calc(100% - 10px);white-space:nowrap;margin:0 5px;height:30px;background:#f8f8f8;overflow-x:auto;overflow-y:hidden;}
.contentMiddle2_bt{display:inline-block;white-space:nowrap;margin:5px 5px 0 5px;padding:2px 5px 2px 5px;border:1px solid #ccc;border-radius:5px;line-height:15px;font-size:14px;box-sizing:border-box;cursor:pointer;}
.contentMiddle2_bt:hover{box-sizing:border-box;box-shadow:0 0 5px 1px red;background:linear-gradient(to right,orange,purple);color:white;}

.part1_pc{position:relative;float:left;width:calc(100% - 300px);height:100%;border-right:1px solid #ccc;box-sizing:border-box;}
.part1_mb{width:100%;height:100%;}

.part2_pc{float:left;width:300px;height:100%;}
.part2_mb{display:none;}

.part2Top{width:100%;height:40px;line-height:50px;text-align:center;border-bottom:1px solid #ccc;box-sizing:border-box;font-size:17px;font-weight:bold;}
.part2Content{padding:10px;height:80px;overflow:auto;font-size:14px;font-weight:bold;}

.part2V1{height:40px;line-height:40px;font-size:20px;font-weight:bold;text-align:center;color:red;}
.part2V3{height:calc(100% - 530px);overflow:auto;}
.part2V4{height:50px;line-height:50px;font-size:20px;font-weight:bold;text-align:center;color:red;}
.part2V4P{width:100%;height:60px;}
.part2V3V1{overflow:hidden;}
.part2V3V1:hover{color:red;}
.part2V3V1P{float:left;width:40px;height:40px;}
.part2V3V2{float:left;width:calc(100% - 40px);height:40px;line-height:50px;font-size:15px;font-weight:bold;}


.part2Bottom{width:100%;height:140px;border-top:1px solid #ccc;box-sizing:border-box;text-align:center;overflow:hidden;}
.part2BottomP{margin:20px 0 0 0;width:80px;height:80px;border-radius:5px;}
.part2BottomT{width:100%;height:40px;line-height:40px;font-size:14px;font-weight:bold;}



.sendView{width:100%;height:70px;background:white;overflow:hidden;}
.textView{float:left;width:calc(100% - 60px);height:70px;overflow:hidden;text-align:center;}
.textViewContent{margin:0 5px 0 5px;padding:5px;width:calc(100% - 10px);height:70px;border:1px solid #ccc;box-sizing:border-box;border-radius:5px;resize:none;font-size:14px;}

.sendBtnView{float:left;position:relative;width:60px;height:70px;}
.sendText{margin:0 5px 0px 0px;width:55px;height:70px;line-height:70px;text-align:center;background:linear-gradient(to right,royalblue,purple);color:White;font-size:14px;font-weight:bold;overflow:hidden;border-radius:5px;cursor:pointer;}
.sendPicture{position:absolute;bottom:5px;right:80px;width:60px;height:30px;line-height:30px;text-align:center;background:linear-gradient(to right,pink,orange);;color:White;font-size:14px;font-weight:bold;overflow:hidden;border-radius:5px;cursor:pointer;}
.sendPictureBtn{position:absolute;bottom:0;right:0;cursor:pointer;}
.sendVoiceButton{position:absolute;bottom:5px;right:5px;width:60px;height:30px;line-height:30px;text-align:center;background:linear-gradient(to right,lightgreen,royalblue);;color:White;font-size:14px;font-weight:bold;overflow:hidden;border-radius:5px;cursor:pointer;}
.sendText:hover,.sendPicture:hover,.sendVoice:hover{background:linear-gradient(to right bottom,grey,black);}	    
			    




.messageStyle{margin:10px;height:auto;overflow:hidden;/* 初始状态：完全透明 */  opacity: 0;  /* 定义动画 */  animation: fadeIn 0.5s ease-in-out forwards;}

.messageView1_left{width:auto;height:30px;line-height:30px;text-align:left;}
.messageView1_right{width:auto;height:30px;line-height:30px;text-align:right;}
.messageView1T1{font-size:14px;font-weight:bold;}
.messageView1T2{margin-left:10px;font-size:12px;color:grey;}

.messageView2{width:100%;height:auto;overflow:hidden;}
.messageContent{padding:10px;max-width:95%;min-height:20px;border-radius:5px;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;font-size:14px;background:white;}
.messagePicture{padding:10px;max-width:80%;min-height:20px;border-radius:5px;background:white;}
.pictureStyle{width:100%;border-radius:5px;}
.fl{float:left;}
.fr{float:right;}

.bg1{background:royalblue;color:white;}
.bg2{background:red;color:white;}
.bg3{background:purple;color:white;}
.bg4{background:green;color:white;}

/* 定义关键帧动画 */  
@keyframes fadeIn {  
    from {  
        opacity: 0;  
    }  
    to {  
        opacity: 1;  
    }  
}


.chatLink{position:relative;width:100%;height:40px;overflow:hidden;}
.chatLinkView{width:calc(100% - 145px);height:40px;overflow-y:hidden;overflow-x:scroll;white-space: nowrap;}
.clickItem{display: inline-block;margin:3px 5px;width:34px;height:34px;overflow:hidden;border-radius:10px;cursor:pointer;}
.clickItemP{width:34px;height:34px;overflow:hidden;}


.marqueeView{position:relative;height:160px;}
/* 设置Swiper容器的大小 */
.swiper-container {
width: 100%; 
height: 100%;
overflow: hidden;
}

/* 样式*/
.swiper-slide {
width:100%;height:100%;
font-size: 24px;
color: #fff;
background-color: #000;
}

/* 图片的样式 */
.responsive-image {
width:100%;height:100%;
overflow:hidden;/*object-fit: cover; object-position: center;*/
}

.linkView{display:none;position:absolute;z-index:2;top:0;left:0;width:100%;height:100%;overflow:hidden;background:rgba(0,0,0,0.2);}
        	    .linkViewV{width:100%;height:100%;}
.linkViewTop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;padding:10px;height:auto;background:white;border-radius:20px;text-align:center;font-size:14px;}
.linkViewTop2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;padding:15px 12px;height:auto;background:white;border-radius:20px;text-align:center;font-size:14px;}
.linkViewTop3{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250px;padding:15px 12px;height:auto;background:white;border-radius:20px;text-align:center;font-size:14px;}
.djtp{width:100%;height:100%;border-radius:10px;width:100%;height:100%;border-radius:10px;}
.djwz{width:100%;height:30px;line-height:30px;overflow:hidden;text-overflow:ellpisis;font-size:14px;font-weight:bold;}
.djwz2{width:100%;height:auto;line-height:30px;overflow:hidden;font-size:16px;font-weight:bold;color:#555555;}
.djwz3{width:100%;height:auto;line-height:25px;overflow:hidden;font-size:14px;font-weight:bold;}
.linkViewContent{margin:5px 0 0 0;width:100%;height:auto;overflow:hidden;}
.linkViewContentItem{float:left;width:33.33%;height:30px;}
.linkViewContentItemS{padding:3px 5px;line-height:30px;border-radius:5px;border:1px solid #ccc;}

.sendVoiceView{display:none;position:fixed;z-index:5;top:0px;left:0px;width:100%;height:100vh;overflow:hidden;background:none;}
.sendVoiceViewBg{width:100%;height:100%;background:rgba(0,0,0,0.5);}
.sendVoiceViewContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:310px;height:auto;}
.sendVoiceViewContentTop{/*margin:10px 0 10px 0;*/width:100%;height:auto;font-size:11px;text-align:center;color:white;}
.sendVoiceViewContentBt{position:absolute;z-index:2;top:40px;left:0;right:0;margin:0 auto 0 auto;width:100px;height:100px;color:white;line-height:100px;background:radial-gradient(circle,royalblue,purple);border:1px solid #ccc;border-radius:50px;text-align:center;}
.sendVoiceViewContentMidle{margin-top:60px;width:100%;height:auto;border-radius:10px;background:white;overflow:hidden;}
.sendVoiceViewContentMidlek1{margin:60px 30% 0 30%;height:auto;text-align:center;font-size:13px;font-weight:bold;border-bottom:1px solid black;}
.sendVoiceViewContentMidlek2{margin:0 30% 0 30%;height:auto;text-align:center;font-size:12px;border-bottom:1px solid black;color:grey;}
.sendVoiceViewContentMidlek3{margin:0 15px 0 15px;height:35px;line-height:35px;text-align:left;font-size:13px;}
.sendVoiceViewContentMidlek4{width:100%;height:auto;line-height:35px;text-align:center;}
.sendVoiceViewContentMidlek5{margin:10px 0 20px 0;width:100%;height:40px;text-align:center;overflow:hidden;font-size:13px;}
.sendVoiceStatus{float:left;width:50%;height:40px;}
.sendVoice{display:none;background:#00c080;margin:0 25% 0 25%;;border-radius:5px;height:35px;line-height:35px;color:white;}
.sendVoiceReady{background:grey;margin:0 25% 0 25%;;border-radius:5px;height:35px;line-height:35px;color:white;}
.sendingVoice{display:none;background:gold;margin:0 25% 0 25%;;border-radius:5px;height:35px;line-height:35px;color:white;}
.closeSendVoiceStatusBt{background:white;margin:0 30% 0 30%;;border-radius:5px;height:35px;line-height:35px;color:black;border:1px solid black;}



.animated-glow {
  font-size: 48px;
  color: red;
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #e60073, 0 0 5px #e60073;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px gold, 0 0 5px gold;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #e60073, 0 0 5px #e60073;
  }
}


.colorChange {
  font-size: 18px;
  font-weight: bold;
  animation: colorChange_1 11s infinite;
  transition: color 0.5s ease-in-out;
}

@keyframes colorChange_1 {
  0% { color: orange; }
  25%  { color: #40c080; }
  50%  { color: #6040c0; }
  75%  { color: #9966ff; }
  100% { color: orange; }
}

.colorChange2 {
  font-size: 18px;
  font-weight: bold;
  animation: colorChange_2 8s infinite;
}

@keyframes colorChange_2 {
  0% { color: green; }
  25%  { color: gold; }
  50%  { color: red; }
  75%  { color: #40c080; }
  100% { color: green; }
}