html {
  font-size: 16px;
  font-family: '微软雅黑'
}
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
a:hover {
  text-decoration: none;
}
button {
  cursor: pointer;
}
h1,h2,h3,h4,h5 {
  font-weight: 700;
  margin: 0;
}
p {
  margin: 0;
}
a{ text-decoration:none;}
* {
	padding:0px; margin:0px;
  box-sizing: border-box;
}
.clear {
  clear: both;
}
.clear::after {
  content: '';
  display: block;
  clear: both;
}
.container {
	width: 1600px;
	margin:0 auto;
	position: relative;
}
/* width */
@media screen and (max-width: 1920px) {
  section {
    zoom: 1;
  }
}
@media screen and (max-width: 1560px) {
  section {
    zoom: .8;
  }
}
@media screen and (max-width: 1440px) {
  section {
    zoom: .8;
  }
}
@media screen and (max-width: 1180px) {
 section {
    zoom: .8;
  }
}
@font-face{
  font-family: "pf";
  src: url("../img/pf.ttf")
}
/* @font-face{
  font-family: "pfs";
  src: url("../img/pfs.ttf")
} */
.chat-box{
    font-family: "pf" !important;
}
section{ display:flex;justify-content : center; flex-direction:column; width:100%;position:fixed; height:100%; background-image:url(../img/bg.jpg); background-position:center; background-size:cover;}
section .container{ height:98%; display:flex;justify-content : space-between;}
.chat-box{zoom:0.4; width:1080px; position:relative; overflow:hidden;  height:2340px; background-repeat:no-repeat;background-position:center; background-size:cover;}
.foot-chat{ position:absolute;width:100%; bottom:0px;z-index: 1000;}
.chat-lst{overflow:auto; height:98%;}
.chat-lst .r.rec p{
    width:190px;
    background-image: url(../img/rec2.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-left:40px;
}

.chat-lst .l.rec p{
    width:190px;
    background-image: url(../img/rec1.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-left:40px;
}

.chat-L{ width:340px; padding:20px; background:#fff; height:100%;}
h3{ font-size:20px; line-height:54px;}
textarea { width:96%; height:50px; border:1px solid #ccc; font-size:16px; font-family:"微软雅黑"; padding:2%;}
.Chat-J{ overflow:hidden; margin-bottom:5px;}
.user-img,.user-img2{width:60px; border-radius:50%; overflow:hidden; margin-top:10px;height:60px; border:1px solid #333;margin-right:20px;}
.user-img img,.user-img2 img{ width:100%; border-radius:50%; height:100%;}
.Chat-J input::-webkit-input-placeholder { /* WebKit browsers */
  color: #fff;
}


.bg-img,.bg-img-video,.pay-img{ width:60px;  overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:cover; height:100px; border:1px solid #333;}
.bg-img img,.pay-img img{ width:100%;  height:100%;}
.Chat-J input[type='text'],.Chat-J input[type='button']{width:80px; margin-top:6px;  margin-right:5px; float:left; height:35px;  text-align:center; background:#666; border:1px solid #ccc; color:#fff; line-height:35px;font-size:16px;  }
button{ float:left; width:60px;  height:35px;  text-align:center; background:#666; color:#fff; line-height:35px; font-size:16px; margin:6px auto;}
input[type='submit']{ float:left; width:70px; height:30px; text-align:center; background:#999; color:#fff; line-height:30px; border:90px; font-size:16px; margin:10px 15px;}
.top-img{ position:relative;margin-bottom: 10px;height: 230px;}
.top-img h2 {
    font-weight: 500;
    font-size: 42px;
    width: 72px;
    line-height: 40px;
    position: absolute;
    right: 126px;
    top: 37px;
    text-align: center;
    color: #fff;
}
.top-img h4{ position:absolute; left:80px; font-size:42px; top:36px; line-height:42px; font-weight: bold; color: #fff;}
.top-img h3{ font-weight:500; position:absolute; left:44px; top:61px; font-size:16px; line-height:16px; text-indent:2px;}
.top-img h3 span{ font-size:16px; margin-right:10px;}

.az-top{
    background-color: rgba(0,0,0,0.08);height:90px;position:absolute;top:0;left:0;right:0;
    padding:0 80px;display: flex;align-items: center;justify-content: space-between;color: #FFFFFF;font-size: 42px;padding-top: 18px;
}
.az-top-right{display: flex;align-items: center;}
.az-top .az-time{font-weight: 500;}
.az-top .signal{position: inherit !important;}
.az-top .wifi{position: inherit !important;}
.az-top .dc{position: relative !important;top:unset !important;right: unset !important;
    width: 32px;
    height: 50px;
}
.az-top .dc .wrap {
    margin: 0px;
    width: 22px;
    height: 39px;
    position: relative;
    overflow: hidden;
    margin-top: 9px;
    margin-left: 5px;
    margin-bottom: 0px;
}
.az-top .dc .wrap div {
    width: 100%;
    height: 22px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 2px;
    left: 0px;
}
.Chat-J { position:relative;}

.Chat-J img{ height:100%; }
.showimg{max-width:220px; padding:0px !important; width:60%; position:relative; background:none !important;}
.r .showimg{ margin-right:-10px;}
.showimg::after{ content:""; top:calc(100% / 2 - 30px) !important; left:auto !important; width:40px !important; height:40px !important; background-image:url(../img/ico9.png) !important;background-position:center center;   position:absolute; right:-54px !important;}
.l .showimg img{width:100%; float:left;}
.r .showimg img{width:100%; float:right;}

.dc {
    width: 70px;
    height: 33px;
    position: absolute;
    right: 54px;
    top: 42px;
    background-size:100% 100%;
}
.dc img{position:absolute;width:100%;height:100%;left:0;top:0;}
.dc .wrap{margin:6px;width:52px;height:22px;}
.dc .wrap div{width:30%;height:22px;background-color:#fff;border-radius:5px;}
.wifi {
    width: 46px;
    position: absolute;
    right: 138px;
    z-index: 99;
    top: 42px;
}
.wifi img{ width:100%;}
.Chat-J input[type='checkbox']{ width:20px; height:20px;}
.Chat-J> label{ display:flex;align-items : center; }
.Chat-J> label input{ margin-left:5px;}
.Chat-J .tp{ overflow:hidden; display:none; width:100%; height:50px; position:absolute; top:55px; left:0px;}
.r .showimg::after{ left:-50px !important; right:auto !important;}
.signal{ width:50px; position:absolute; right:200px; top:42px;}
.signal img{ height:33px;}
/*滚动条样式*/
.chat-lst::-webkit-scrollbar {/*滚动条整体样式*/
        width:40px;/*高宽分别对应横竖滚动条的尺寸*/
        height:40px;
}
.chat-lst::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);
}
.chat-lst::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

.faceWrap,.faceWrap2 {
    display: none;
    position: absolute;
    z-index: 9999;
    background-color: #FFF;
    height:480px;
    border: 1px solid #9FA0A0;
    padding: 20px;
    top: 30%;
    margin-bottom: 88px;
    overflow-y: scroll;
    left: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -o-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -webkit-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -ms-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
}
.faceWrap3 {
    display: none;
    position: absolute;
    z-index: 9999;
    background-color: #FFF;
    height:80px;
    border: 1px solid #9FA0A0;
    padding: 20px;
    top: 30%;
    margin-bottom: 88px;
    overflow-y: scroll;
    left: 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -o-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -webkit-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -ms-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
}
.faceBox,.faceBox2 {
    position: relative;
    clear: both;
    width: 420px;
    overflow: hidden;
    cursor: pointer;
}
.faceBox3 {
    position: relative;
    clear: both;
    width: 350px;
    overflow: hidden;
    cursor: pointer;
}
.faceBox a,.faceBox2 a,.faceBox3 a {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    border-right: 1px solid #DFE6F6;
    border-bottom: 1px solid #dfe6f6;
    text-align: center;
    padding-top:5px;
}
.faceBox img,.faceBox2 img,.faceBox3 img{
  height: 40px;
}
.em{
    height:26px;
    margin-left:3px;
    vertical-align: -6px;
}

i{
    font-style:normal;
}

.hn{
    position: absolute;
    font-size: 48px;
    line-height: 48px;
    left:13%;
    top:54.8%;
    color: #fff;
}
.zs{
    position: absolute;
    font-size: 33px;
    line-height: 33px;
    left:13%;
    top:80%;
    color: #c6e1fb;
}
.dt{
  display:inline-block;
  font-size: 38px;
  padding:0 20px;
  height:60px;
  line-height: 60px;
  background-color: #b6babf;
  text-align: center;
  color: #fff;
  border-radius: 30px;
  margin-bottom: 20px;
}


.sr{
  width: 100%;
  /* overflow: hidden; */
}
.sr::after{
    content: "";
    clear: both;
    display: block;
}
.msg{
  position: relative;
  min-width: 200px;
  max-width: 776px;
  font-size: 46px;
  line-height: 56px;
  padding:26px;
  border-radius: 26px;
}
.left{
  float: left;
  background-color: #fff;
  margin-left: 110px;
  border:3px solid #d8d8d9;
}
.right{
  float: right;
  background-color: #d6effc;
  margin-right: 30px;
  border:3px solid #bccdd6;
}
.pinlun_msg .msg.selected{
    border: 3px solid rgb(10, 74, 252);
}
.pinlun_msg{
    overflow: unset;
}
.msg-emj-left{
    padding: 0 14px;height:58px;border-radius:58px;border:2px solid #bccdd6;background-color: #FFFFFF;
    display: flex;align-items: center;justify-content: center;position: absolute;bottom: -38px;right: 110px;
}
/* .pinlun_msg .left .msg-emj-left{
    left: 110px;flex-direction: row-reverse;
}
.pinlun_msg .right .msg-emj-left{
    right: 110px;
} */
.msg-emj-left img{
    height: 40px;
}
.msg-emj-left span{
    font-size: 30px; padding-left: 10px;
}
/* .pinlun_msg .left .msg-emj-left span{
    padding-right: 10px;
}
.pinlun_msg .right .msg-emj-left span{
    padding-left: 10px;
}
.pinlun_msg .left .msg-emj-left img~img{
    padding-right: 10px;
} */
.pinlun_msg  .msg-emj-left img~img{
    padding-left: 10px;
}
.msg-emj-right{
    width: 84px;height:84px;border-radius:84px;border:2px solid #bccdd6;position: absolute;bottom: -50px;background-color: #FFFFFF;
    display: flex;align-items: center;justify-content: center;right: 3px;
}
/* .pinlun_msg .left .msg-emj-right{
    left: 3px;
}
.pinlun_msg .right .msg-emj-right{
    right: 3px;
} */
.msg-emj-right img{
    width: 46px;
}
.mb{
  margin-bottom: 10px;
}
.mb2{
  margin-bottom: 56px;
}
.mb3{
  margin-bottom: 82px;
}
.mb4{
  margin-bottom: 146px;
}
.mt{
  font-size: 30px;
  line-height: 30px;
  color: #9b9b9b;
  margin-top: 26px;
}
.xin{
  display: block;
  position: absolute;
  width: 80px;
  right: 0;
  bottom: -50px;
}
.tx{
  display: block;
  position: absolute;
  width: 70px;
  height: 70px;
  top:0;
  left:-80px;
  border-radius: 35px;
}
.mp{
  width: 516px;
  height: 294px;
  padding:0;
  width: 730px;height: 466px;border-radius: 26px;
  border: 0;
}
.mp .pt{
  display: block;
  width: 120px;
  height: 120px;
  float: left;
  margin-left: 36px;
  margin-top: 36px;
  border-radius: 60px;
}
.mp .pn{
  float: left;
  font-size: 48px;
  line-height: 48px;
  margin-left: 38px;
  margin-top: 72px;
}

.mp .mp-top{
    height: 346px;background-color: #2a68df;position: relative;border-top-left-radius: 26px;border-top-right-radius: 26px;
}
.mp .mp-top::before{
    content: '';
    width: 187px;
    height: 187px;
    border-radius: 50px;
    background: linear-gradient(to right, rgba(53, 119, 241, 0), rgba(53, 119, 241, 0.4));
    position: absolute;
    top: 10px;
    left: 170px;
    z-index: 0;
    transform: rotate(45deg);
}
.mp .mp-top::after{
    content: '';
    width: 187px;
    height: 187px;
    border-radius: 50px;
    background: linear-gradient(to left, rgba(53, 119, 241, 0), rgba(53, 119, 241, 0.4));
    position: absolute;
    top: 90px;
    left: 320px;
    z-index: 0;
    transform: rotate(45deg);
}
.mp .mp-content{
    position: absolute;left: 0;top: 0;width: 730px;height: 346px;z-index: 10;padding:34px 32px 34px 40px;
}
.mp .mp-content .header-box{display: flex;align-items: center;z-index: 10;}
.mp .mp-content .header-box .header{width: 94px;height: 94px;border-radius: 94px;border: 8px solid #FFFFFF;box-sizing: border-box;margin-right: 34px;}
.mp .mp-content .header-box .header img{width: 100%;height: 100%;margin: 0;}
.mp .qr-img{position: absolute;right: 32px;bottom: 34px;z-index: 10;}
.mp .qr-img>img{width: 152px;height: 152px;border-radius: 10px;}
.mp .mp-bottom{
    height: 120px;background-color: #fff;display: flex;align-items: center;justify-content: center;gap: 110px;font-size: 37px;font-weight: 600;border-bottom-left-radius: 26px;border-bottom-right-radius: 26px;border: 3px solid #bccdd6;border-top: 0;
}
.mp .mp-bottom-left{color: #202020;}
.mp .mp-bottom-space{width: 2px;height:65px;background-color: #e0e0e0;}
.mp .mp-bottom-right{color: #1b5bda;}

.ms{
  position: absolute;
  width:258px;
  height:98px;
  border-top:1px solid #dee3e5;
  border-right:1px solid #dee3e5;
  left: -3px;
  bottom: 0px;
  font-size: 42px;
  color: #52a2f8;
  font-weight: bold;
  text-align: center;
  line-height: 98px;
}
.ms2{
  position: absolute;
  width:258px;
  height:98px;
  border-top:1px solid #dee3e5;
  right: -3px;
  bottom: 0px;
  font-size: 42px;
  color: #52a2f8;
  font-weight: bold;
  text-align: center;
  line-height: 98px;
}
.ht{
  max-width: none;
  width: 820px;
  padding:0;
}
.img{
  display: block;
  width: 100%;
  border-radius: 26px;
}
.video-img{
  display: block;
  width: 100%;
  border-radius: 26px;
}
.tt{
  width: 96px;
  height: 42px;
  background-color: #b9c0c7;
  border-radius: 21px;
  font-size: 28px;
  color: #fff;
  line-height: 42px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -52px;
}
.ct{
  width: 616px;
  padding:0;
}
.hd{
  position: absolute;
  display: block;
  width: 58px;
  left: 18px;
  top: 18px;
}
.tj{
  position: absolute;
  display: block;
  width: 84px;
  top:50%;
  margin-top: -42px;
}
.left .tj{
  right:-112px;
}
.right .tj{
  left:-112px;
}
.dp{
  max-width: none;
  border:0;
  padding:0;
  width: 818px;
  background-color: transparent;
}
.dp .lt{
  display: block;
  width: 406px;
  border-top-left-radius: 26px;
  border-bottom-left-radius: 26px;
}
.dp .rt{
  display: block;
  width: 406px;
  border-top-right-radius: 26px;
  border-bottom-right-radius: 26px;
}
.dp .tj{
  margin-top: -90px;
}
.hk .lt,.hk .rt{
  height: 306px;
}
.ck .lt,.ck .rt{
  height: 722px;
}
.rec{
  position: absolute;
  display: block;
  width: 172px;
  height: 42px;
  right:0;
}
.rb{
  bottom: -62px;
}
.rb2{
  bottom: -116px;
}
.wl{
  position: relative;
  float: left;
}
.wr{
  position: relative;
  float: right;
}

.rj{
  display: none;
  position: absolute;
  width: 108px;
  right:52px;
  bottom: 266px;
}
p{word-wrap:break-word;}
.fp{
  width: 300px;
  height: 66px;
  margin-bottom: 10px;
}
.fp li{
  float: left;
  width: 66px;
  height: 66px;
  margin-left: 12px;
}
.fp li img{
  display: block;
  width: 66px;
  height: 66px;
  cursor: pointer;
}
.em{
    height:46px;
    vertical-align: -6px;
    padding:0 6px;
}
.voice{
  width:310px;
  padding-left:0;
  padding-right:0;
}
.voice .yl{
  display: block;
  width: 110px;
  float: left;
  margin-left: 30px;
  margin-right: 36px;
}
.voice p{
  height: 50px;
  line-height: 50px;
  font-size: 40px;
}
.yr{
  position: absolute;
  width: 60px;
  display: block;
  right: -78px;
  top:25px;
}
.cxx{
  position: absolute;
  width: 88px;
  height:48px;
  background:url(../img/xin3.png);
  bottom:-32px;
  right:102px;
}
.cxx p{
  float: right;
  margin-right: 14px;
  font-size: 30px;
  line-height: 48px;
}
.ld{
  width: 382px;
  height: 238px;
  padding:0;
  font-size: 34px;
}
.ld .p1{
  margin-left: 30px;
  padding-top: 40px;
  line-height: 32px;
  font-weight: bold;
}
.ld .p2{
  margin-left: 30px;
  color:#7c798a;
  margin-top: 22px;
  height: 38px;
  line-height: 38px;
}
.ld .p2 img{
  display: block;
  float: left;
  margin-right: 24px;
}
.ld .ck{
  position: absolute;
  width:100%;
  height:80px;
  border-top:1px solid #dee3e5;
  left: 0;
  bottom: 0px;
  font-size: 30px;
  color: #4397fd;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}
.db{
  display: block;
  width: 346px;
}
.ref{
  display: none;
  position: absolute;
  font-size: 40px;
  right:-90px;
  top:30%;
  cursor: pointer;
}
.ym{
  padding:28px;
}
.ym .yt{
  height: 98px;
  border-left:6px solid #3d91f6;
  padding-left: 20px;
  font-size: 36px;
  line-height: 36px;
  margin-bottom: 36px;
}
.ym .yt .y1{
  font-weight: bold;
  padding-top: 6px;
  margin-bottom: 16px;
}
.ym .yt .y2{
  color:#728291;
  font-size: 34px;
}
.ym .yt .yi{
  float: left;
  width: 92px;
  height: 92px;
  overflow: hidden;
  margin-right: 28px;
}
.ym .yt .yi img{
  display: block;
  height: 92px;
}
.hd-position{
    position: absolute;top:25px;left:25px;background: rgba(0,0,0,.4);color: #FFFFFF;border-radius:20px;padding: 0px 15px;font-size: 36px;
    /* zoom: 0.8; */
}

.user-name-header{
    display: flex;
    align-content: center;
}
.header-user-info{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 20px;
}
#imgs5{
    width: 60px;
    height: 60px;
    border-radius: 100px;
}
#userName{
    width: 60%;
    font-size: 20px;
    padding:5px;
    margin-top: 10px;
}
#userContentText{
    width: 80%;
    font-size: 20px;
    padding:5px;
    margin-top: 10px;
}

/** 弹窗对话窗口 **/
.dialog-window{
    position: absolute;
    width: calc(100% - 60px);
    left: 30px;
    top: 120px;
    height: 220px;
    background: #b6dded75;
    z-index: 99;
    border-radius: 35px;
    box-shadow: 0px 0px 30px #9b9b9ba8;
    /*background-color: rgba(255, 255, 255, 0.2); !* 半透明背景 *!*/
    backdrop-filter: blur(50px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(50px); /* 兼容老版本 Safari */
    display: flex;
    align-items: center;
    padding-left: 40px;
}
.dialog-window-headerImage{
    width: 150px;
    height: 150px;
    border-radius: 100px;
}
.dialog-window-name{
    font-size:45px;
    font-weight: bold;
}

.dialog-window-content{
    font-size:42px;
    margin-top: 15px;
}