*{margin: 0;padding: 0; outline: none;}
img, a:link, a:visited, a:hover ,a:active{text-decoration: none; outline: none;}
ul, li, a{margin: 0; padding: 0; text-decoration: none}
ul, li, ul >li{list-style: none}
a:hover{ text-decoration: none }
html, body{height: 100%;font-size: 14px;color: #212b36; font-family: "Microsoft YaHei","微软雅黑","宋体",helvetica,"Hiragino Sans GB"; line-height: 24px;}
.pointer {cursor: pointer;}

/* 设置滚动条的样式 */
::-webkit-scrollbar {width:6px;}
/* 滚动槽 */
::-webkit-scrollbar-track {-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:10px;}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {border-radius:10px;background:rgba(0,0,0,0.1);-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);}
::-webkit-scrollbar-thumb:window-inactive {background: #c1c1c1;}

#containter{width: 100%;height: 100%;position: relative;box-sizing: border-box;overflow: hidden;display: flex;justify-content: space-between;}


/* 聊天部分 */
.leftBox{height: 100%;width: 23.6rem;border-right: 0.1rem solid #e6e6e6;box-sizing: border-box;position: relative;}
.serviceIn{background-image: url("/public/chat/images/sbg.png");background-size: 100% 100%;height: 290px;padding: 0;box-sizing: border-box;text-align: center;}
.serviceIn img{width: 150px;height: 150px;box-shadow: 0.1rem 0.2rem 0.5rem 0rem rgba(0, 46, 87, 0.2);border-radius: 1.6rem;background: #fff;margin-top: 40px;}
.serviceName{color: #354052;margin: 20px 0 0 0;font-size: 1.3rem;text-align: center;}
/*.evaluateForm, .evaluateSuccess{color: #333333;display: block;box-sizing: border-box;overflow-y: scroll;overflow-x: hidden;height: calc(100% - 290px);position: relative;background: #FFFFFF;}*/
.evaluateForm, .evaluateSuccess{color: #333333;display: block;box-sizing: border-box;overflow-y: scroll;overflow-x: hidden;height: calc(100% - 230px);position: relative;background: #FFFFFF;}
.evaluateForm .pingFen{position: relative;overflow: hidden;box-sizing: border-box;padding-left: 10px;padding-right: 10px;}
.pingFen li.levelLi{width: 19.4rem;height: 2.9rem;line-height: 2.9rem;background-color: #ffffff;box-shadow: 0.1rem 0.2rem 0.3rem 0rem #d3dee5;border-radius: 1rem;border: solid 0.1rem #f4f6f7;margin: 0 auto 0.5rem;box-sizing: border-box;cursor: pointer;}
.pingFen li.levelLi.active{border: solid 0.1rem #00c9d1;}
.pingFen li.levelLi .pfName{color: rgb(95, 184, 120); display: -webkit-box; float: left;font-size: 0.9rem;width: 6rem; text-align: left; padding-left: 0.8rem;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;line-height: 2.9rem;white-space: nowrap;}
.pingFen li.levelLi .xingJi{color: #c9c9c9;margin-left: 10px;}
.pingFen li.levelLi .xingJi img{width: 1.8rem;margin-right: 0.5rem;position: relative;top: -0.2rem;vertical-align: middle;display: inline-block;}

.evaluateForm .tit3{line-height: 30px !important;height: 30px !important;color: rgb(95, 184, 120);text-align: center;font-size: 13px;}
.commentBox{position: relative;width: 19.4rem;box-sizing: border-box;text-align: left;padding-bottom: 10px;margin: auto;margin-top: 10px !important;padding-left: 10px;padding-right: 10px;}
.commentBox p{font-size: 0.9rem;font-weight: normal;font-stretch: normal;letter-spacing: 0.1rem;color: #666666;margin-top: 30px;}
#commentText{width: 100%;height:60px;background-image: linear-gradient( #f4f8fb, #f4f8fb), linear-gradient( #ffffff, #ffffff);background-blend-mode: normal, normal;box-shadow: inset 0rem 0.2rem 0.4rem 0rem #d9dfe4;border-radius: 1rem;border: solid 0.1rem rgba(0, 201, 209, 0.5);margin-top: 1rem;display: block;line-height: 1.3;color: #565656;padding: 7px 12px;padding-left: 10px;}
.subCommBox{margin-top: 8%;box-sizing: border-box;position: relative;overflow: hidden;text-align: center;padding-left: 10px;padding-right: 10px;}
.evaluateForm .subComment{background: rgb(95, 184, 120) none repeat scroll 0% 0%;width: 80%;height: 41px;background-blend-mode: normal, normal;box-shadow: 0.1rem 0.2rem 0.7rem 0rem #d9dfe4;border-radius: 25px;font-size: 16px;display: inline-block;line-height: 38px;padding: 0 18px;color: #fff;white-space: nowrap;text-align: center;border: none;cursor: pointer;margin-bottom: 50px;}
#commentText:hover, #commentText:focus{border-color: #D2D2D2 !important;box-shadow: 0px 3px 10px 0px rgba(204, 222, 255,1);}
.evaluateSuccess{display: none;}

/* 右侧信息 */
.contentBox{width: calc(100% - 23.6rem);margin: 0;position: relative;height: 100%;box-sizing: border-box;overflow: hidden;display: flex;justify-content: space-between;}

/* 中间消息部分 */
.chatBox{width: calc(100% - 18rem);height: 100%;background-image: linear-gradient( #f4f8fb, #f4f8fb), linear-gradient( #e6e6e6, #e6e6e6);background-blend-mode: normal, normal;position: relative;overflow: hidden;}
.chatBox .chatMeassge{width: 100%;height: calc(100% - 6.3rem);padding: 5px 0 30px;position: relative;overflow-y: auto;overflow-x: hidden;}
.chatMeassge .messageTop{width: 80%;padding: 10px 10px;background: #FFFFFF;border-radius: 50px;position: relative;margin: 20px auto;text-align: center;font-size: 14px;}

/* 消息编辑 */
.chatBox .chatTextBox, .chatBox .chatFinishTextBox{width: 100%;right: 0;padding: 15px 0;box-sizing: border-box;background: #fff;min-height: 6.3rem;position: relative;display: flex;align-items: flex-end;justify-content: center;}
.chatTextBox .optionBtn{background: rgb(95, 184, 120) none repeat scroll 0% 0%;width: 4.1rem;height: 4.1rem;position: relative;box-sizing: border-box;margin-left: 15px;overflow: hidden;text-align: center;display: flex;align-items: center;border-radius: 100%;cursor: pointer;}
.optionBtn input{position: absolute;top: 0;right: 0;bottom: 0;left: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';cursor: pointer;}
.chatTextBox .TextBox{width: calc(100% - 4.1rem * 2 - 15px * 3 - 15%);box-sizing: border-box;height: 4.1rem;
    background-image: linear-gradient( #f4f8fb, #f4f8fb), linear-gradient( #ffffff, #ffffff);background-blend-mode: normal, normal;
    box-shadow: inset 0rem 0.2rem 0.4rem 0rem rgba(185, 205, 210, 0.35);
    border-radius: 2.1rem;border: solid 0.1rem rgba(0, 201, 209, 0.5);
    /*padding: 0 3.8rem;*/padding:  0 3.8rem 0 2rem;position: relative;margin-left: 15px;overflow: hidden;display: flex;align-items: center;}
.TextBox .iconfont{color: #5fb878;font-size: 28px;position: absolute;bottom: 15px;cursor: pointer;}
.TextBox .icon-biaoqing{left: 15px;}
.TextBox .icon-fasong{right: 15px;}
.TextBox textarea{width: 100%;height: 4rem;border: none;background: none;padding: 15px 0;box-sizing: border-box;position: relative;overflow-y: auto;display: block;resize:none;line-height: 26px;}
.optionBtn .icon-charutupian{color: #FFFFFF; font-size: 28px; margin: auto;}
.optionBtn .icon-lianjie1{color: #FFFFFF; font-size: 28px; margin: auto;}
.optionBtn .icon--tuichu{color: #FFFFFF; font-size: 28px; margin: auto;}

/* 消息列表 */
.chat-block{padding: 0.4rem 1.3rem;margin-top: 10px;position: relative;overflow: hidden; zoom: 1; display: block;}
.chat-block.chatL .inside{max-width: 85%;display: inline-block;float: left;font-size: 12px;}
.chat-block.chatR .inside{max-width: 85%;display: inline-block;float: right;font-size: 12px;}

.chat-block .userImage {width: 2.2rem;height: 2.2rem;background-color: #ffffff;box-shadow: 0.1rem 0.1rem 0.3rem 0rem #d9dfe4;margin-top: 6px;border-radius: 50%;vertical-align: middle;display: inline-block;}
.chat-block.chatL .userImage{float: left;}
.chat-block.chatR .userImage{float: right;margin-top: 0;}

.chat-block .chat-name{margin-left: 3rem;display: block;text-align: left;color: #354052;font-size: 12.4px;line-height: 30px;letter-spacing: 0.2px;font-weight: 400;}
.chat-block .chatting-left{margin-left: 3rem;display: block;position: relative;}
.chat-block .chat-content{margin-top: 2px;border: 0;color: #333;min-width: 30px;background-color: #EDEDED !important;float: left;word-break: break-word;background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#1e61c4, #1e61c4);background-blend-mode: normal, normal;box-shadow: 0rem 0.1rem 0.3rem 0rem #d9dfe4;border-radius: 0rem 1.3rem 1.3rem 1.3rem;font-size: 1.1rem;font-weight: normal;font-stretch: normal;line-height: 2.3rem;letter-spacing: 0rem;padding: 0.4rem 1rem;position: relative;overflow: hidden;box-sizing: border-box;}
.chat-content p{margin-bottom: 0;}
.chat-content .leftText{float: left;font-family: MicrosoftJhengHeiRegular;font-size: 1.1rem;font-weight: normal;font-stretch: normal;line-height: 2.3rem;letter-spacing: 0rem;word-break: break-word;}
.chat-content .time{color: #b9c3c9;font-family: ArialMT;font-size: 0.7rem;font-weight: normal;font-stretch: normal;letter-spacing: 0rem;position: relative;float: right;margin-left: 10px;}
.chat-block .chatting-right{font-size: 0.7rem;font-weight: normal;font-stretch: normal;letter-spacing: 0rem;color: #fff8fb;margin-left: 0.6rem;margin-right: 3rem;display: block;position: relative;}
.chat-block.chatR .chat-content{float: right;border-radius: 15px 0px 15px 15px;color: #fff;letter-spacing: 0.2px;font-size: 12px;min-width: 30px;font-weight: 500;border: 0;background-image: linear-gradient(90deg, #00c8d1 0%, #00a1d6 100%) !important;border-radius: 1.3rem 0rem 1.3rem 1.3rem !important;}

.chat-content .rightText{float: right;font-family: MicrosoftJhengHeiRegular;font-size: 1.1rem;font-weight: normal;font-stretch: normal;line-height: 2.3rem;letter-spacing: 0rem;word-break: break-word;}
.chat-block.chatR .chat-content .time{color: #b9c3c9;font-family: ArialMT;font-size: 0.7rem;font-weight: normal;font-stretch: normal;letter-spacing: 0rem;position: relative;float: left;margin-right: 10px;color: #fff8fb; margin-left: 0;}

.chat-block.chatR .chat-content-img, .chat-block.chatL .chat-content-img{background: #FFFFFF !important;padding: 0;height: auto;border: 0;border-radius: 10px 0px 10px 10px !important;color: #fff;letter-spacing: 0.2px;font-size: 12px;min-width: 150px;font-weight: 500;cursor: pointer;max-width:300px;min-height: 80px;}
.chat-block.chatR .chat-content-img{border-radius: 15px 0px 15px 15px;}
.chat-block.chatL .chat-content-img{border-radius: 0px 15px 15px 15px !important;}
.chat-block .chat-content-img img{display: inline-block;width: 100%;}
.chat-block .chat-content.chat-content-img .time{position: absolute;background-color: #0b2e13;color: #eeeeee;line-height: 15px;font-size: 9px !important;text-align: center;padding: 0 8px;display: inline-block;;border-radius: 10px;}
.chat-block.chatR .chat-content.chat-content-img .time{bottom: 5px;left: 3px;}
.chat-block.chatL .chat-content.chat-content-img .time{bottom: 5px;right: 3px;}
.chat-content-img img.loading{display: block; width: 50px;margin: auto; top: 15px; position: relative;}
.chat-block.chatL .chatFile{position: relative;display: flex;justify-content: space-between;align-items: center;}
.chat-block.chatL .chatFile .downloadBtn{position: absolute; line-height: 20px; height: 20px; width: 40px;right: 2px; bottom: 3px; color: #FFFFFF; text-align: center; cursor: pointer;font-size: 12px; background-color: #c8cbcf; border-radius: 10px; overflow: hidden; display: none;}
.chat-block.chatL .chatFile:hover .downloadBtn{display: inline-block;}

.chat-block.chatR .chatFile{position: relative;display: flex;justify-content: space-between;align-items: center;}
.chat-block.chatR .chatFile .downloadBtn{position: absolute; line-height: 20px; height: 20px; width: 40px;right: 2px; bottom: 3px; color: #FFFFFF; text-align: center; cursor: pointer;font-size: 12px; background-color: #FFFFFF; border-radius: 10px; overflow: hidden; display: none;}
.chat-block.chatR .chatFile:hover .downloadBtn{display: inline-block;}


::-webkit-scrollbar {width: 6px;height: 6px}
::-webkit-scrollbar-thumb {border-radius: 40px;background-color: rgba(0,0,0,.22)}
::-webkit-scrollbar-track {background-color: transparent;width: 12px}

/* 问题 */
.problemBox{box-sizing: border-box;width: 18rem;border-left: 0.1rem solid #e6e6e6;position: relative;height: 100%;padding: 0px; overflow: hidden;}
.advertisement{position: relative;width: 100%;overflow: hidden;box-sizing: border-box;display: flex;justify-content: center; height: 100%}
.advertisement img{max-width: 100%;position: relative;display: block; height: 100%;}

.blockScreen{position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999999999; background: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.blockScreen img{width: 12rem; position: relative; display: block;}

.LeaveMessage{width: 100%;height: 100%;position: relative;box-sizing: border-box;overflow: hidden;display: flex; justify-content: center; align-items: center;background: #cdd1dc;}
.LeaveMessageBox{width: 800px;max-width: 1200px;height: 700px;box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 10%);background: #fff;margin: auto;font-size: 12px;box-sizing: border-box;overflow: hidden;}

.head_tit{background: #5fb878;position: relative;height: 100px;overflow: hidden;color: #FFFFFF;font-size: 20px;display: flex; justify-content: center; align-items: center;}
.LeaveMessageBox .messageForm{position: relative;overflow: hidden;width: 100%;box-sizing: border-box;height: calc(100% - 100px - 60px);text-align: center;}
.subMessageBox{position: relative;box-sizing: border-box;overflow: hidden;height: 60px;border-top: 1px solid #eee;text-align: center;line-height: 60px;}
.subLeaveBtn{background: #5fb878;position: relative;overflow: hidden;box-sizing: border-box;font-size: 15px;color: #FFFFFF;padding: 8px 18px;border-radius: 3px;cursor: pointer;}
.subLeaveBtn:hover{opacity: .8;}
.messageForm .promptText{width: 80%;background: #f3f7ff;border-radius: 20px;text-align: center;margin: 20px auto;padding: 10px 0;font-size: 14px;}

.list-group-item{border: none;color: #545b62;font-size: 12px; width: 80%; margin: 0px auto 8px; padding: 0.75rem 0;}
.list-group-item input, .list-group-item textarea {font-size: 12px;}
.list-group-item select{font-size: 12px;}


/* 评分 */
#diaShade{position: fixed;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 100000;background-color: rgba(0,0,0,0.5); display: none; text-align: center;}

.dialogWrapDanFu{width: 660px;height: auto;display: block;box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 10%);border-radius: 1px;position: absolute;left: 50%;top: 20%;z-index: 100001;margin-top: 10px;margin-left: -270px;background-color: #f7f7f7;color: #323232;}
.dialogWrapDanFu .head{background: #5fb878;position: relative;box-sizing: border-box;overflow: hidden;padding: 20px 25px;color: #FFFFFF;display: flex;align-items: center;justify-content: space-between;}
.dialogWrapDanFu .head h2{margin: 0;font-size: 16px;}
.dialogWrapDanFu .danFenCon{position: relative;box-sizing: border-box;overflow: hidden;padding: 20px;background-color: #FFFFFF;}
.dialogWrapDanFu .danFenCon .pfLevel{margin-bottom: 30px;}
.dialogWrapDanFu .danFenCon .pfLevel .iconfont{color: #FFB800;cursor: pointer;font-size: 16px;}
.dialogWrapDanFu .danFenCon .pfLevel .iconfont:not(:last-child){margin-right: 5px;}
.pinLunBox{position: relative;box-sizing: border-box;margin: 20px 0;}
.pinLunBox textarea{height: 120px;border: solid 1px #eeeeee;display: block;width: 100%;background-color: #fff;border-radius: 2px;line-height: 1.3;color: #565656;padding: 7px 12px;font-family: inherit;font-style: inherit;font-weight: inherit;font-size: 12px;}
.danFenCon .subBox{display: block;text-align: center;position: relative;box-sizing: border-box;}
.danFenCon .subBox .subPingLunBtn{padding: 7px 20px; background: rgb(95, 184, 120); color: #FFFFFF; font-size: 14px; border-radius: 3px; cursor: pointer;}

.confirmModal{position: relative;top: 25%; background-color: #FFFFFF;border-radius: 5px;z-index: 999999;margin: auto;display: inline-block;box-sizing: border-box;overflow: hidden;}
.confirmModal .promptBox{padding: 20px 20px 50px;color: #333333;font-size: 18px;text-align: center; position: relative; overflow: hidden;}
.confirmModal .btnModalBox{position: relative;box-sizing: border-box;overflow: hidden;display: flex;align-items: center;justify-content: space-between;}
.confirmModal .btnModalBox .cancelBtn, .confirmModal .btnModalBox .confirmBtn{display: flex;justify-content: center;color: #FFFFFF;width: 50%; padding: 10px;position: relative;box-sizing: border-box;overflow: hidden;text-align: center;cursor: pointer;}
.confirmModal .btnModalBox .cancelBtn{background-color: rgb(52, 86, 175);}
.confirmModal .btnModalBox .confirmBtn{background-color: rgb(0, 201, 209);}

#site_announcement p{
    margin-bottom: 0px;
}

#fastBox{width: 800px;position: relative;box-sizing: border-box;overflow: hidden;margin: 200px auto 0;display: none;}
#fastBox .head{display: block;background-color: #fafafa;border-left: 3px solid #00c9d1;padding: 10px 0 10px 20px;margin-bottom: 20px;}
/* 文件上传按钮美化 */
.file-button {position: relative;display: inline-block;overflow: hidden;}
.file-button input{position:absolute;right: 0;top: 0;bottom: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';cursor: pointer;}
.form-check-label{margin-left: 5px}

@media screen and (max-width: 1200px){
    /* 发送消息 */
    .chatTextBox .optionBtn{background-size: 20px 20px;background-position: 10px 10px;width: 40px;height: 40px;}
    .optionBtn .iconfont{font-size: 22px}
    .TextBox .iconfont{font-size: 22px;}

    .leftBox{height: calc(100% + 90px);margin-top: -90px;z-index: 9;position: relative;width: 245px;}
    .serviceIn{height: 290px;}
    .serviceIn img{width: 90px;height: 90px; margin-top: 110px;}
    .pingFen li{width: 100%;height: 35px;line-height: 35px;}
    .pingFen li.levelLi .xingJi img{width: 8%;}

    /* 右侧 */
    .contentBox{width: calc(100% - 246px);}

    /* 中间消息 */
    .chatBox{width: 70%;}
    /* 问题 */
    .problemBox{width: 30%;}

    .advertisement img{width: 100%}
}
@media screen and (max-width: 800px){
    .leftBox{display: none;}
    .contentBox{width: 100%;}
    .chatBox{width: 100%;}
    .problemBox{display: none;}
    .chatTextBox .TextBox{height: 40px;}
    .TextBox textarea{height: 40px;}

    .chatBox .chatTextBox{min-height: 70px;}
    .chatBox .chatMeassge{height: calc(100% - 70px);}
    .TextBox textarea{padding: 7px 0 5px;}
    .TextBox .iconfont{bottom: 5px}
    .TextBox .icon-biaoqing{left: 12px;}
    .TextBox .icon-fasong{right: 12px;}
    .chatTextBox .TextBox{padding: 0 3rem;}
    .chatTextBox .TextBox{width: calc(100% - 4.1rem * 2 - 15px * 3 - 3%)}

    #fastBox{width: 95%;margin-top: 20px; margin-bottom: 50px;}
    .list-group-item{margin: 0 5px !important;width: 100% !important; padding-bottom: 0!important;}
    .list-group-item span{display: block;text-align: left !important;width: 100%;}
    #account, #txTme, #czTime, #cjhdText{display: block;width: 90% !important;margin: 10px;}
    .list-group-item .subBtn, .list-group-item .enterBtn{text-align: center !important;}
    .demoImageBox{display: block !important;margin: 15px 0 0 10px;}
    .problemCheck{display: block!important; width: 98%; padding: 10px 0 10px 20px;}

    .problemCheckGroup, .cjhdTextGroup, .problemImageGroup{display: block !important;}
    .problemImageGroup{margin-bottom: 20px;}

    .dialogWrapDanFu{
        border-radius: 1px;
        background-color: #f7f7f7;
        color: #323232;
        margin: auto;
        width: 95%;
        position: relative;
        top: 20%;
    }
}