@charset "UTF-8";
.hidePop { display: none !important; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.onlinePop .nicescroll-rails, .showQuest .nicescroll-rails { z-index: 1000000003 !important; }

.online-icon { width: 30px; height: 30px; cursor: pointer; position: fixed; top: 300px; right: 20px; background: url("../images/customerService-iocn.png"); background-size: 100% 100%; }

.online-unreadNum { width: 20px; height: 20px; text-align: center; line-height: 20px; background-color: red; color: #ffffff; position: fixed; top: 290px; right: 15px; border-radius: 50%; }

/* 在线客服样式开始 */
.onlineChat { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; z-index: 1000000002; overflow-y: hidden; }

.onlinePop { width: 1000px; height: 600px; background-color: #ffffff; position: absolute; top: 50%; left: 50%; z-index: 1000000003; margin-left: -500px; margin-top: -300px; overflow: hidden; display: flex; border-radius: 8px; }

.onlinePop-left { width: 300px; height: 100%; box-sizing: border-box; border-right: 1px solid #cccccc; }

.onlinePop-right { width: 700px; height: 100%; }

.onlinePop-left-opt { width: 100%; height: 40px; box-sizing: border-box; padding: 0 0 0 30px; display: flex; align-items: center; border-bottom: 1px solid #cccccc; background-color: #006ADA; position: relative; }

.onlinePop-left-opt-input { width: 220px; height: 26px; margin: 0 0 0 25px; padding: 0 30px 0 10px; color: #9d9696; font-size: 12px; border-radius: 6px; box-sizing: border-box; }

.onlinePop-left-opt-search { width: 20px; height: 20px; cursor: pointer; position: absolute; top: 9px; right: 30px; }

.onlinePop-left-opt-item { width: 24px; height: 24px; cursor: pointer; position: absolute; top: 8px; left: 15px; }

.chatList { width: 100%; height: 560px; }

.chatList.hasPage { height: 504px; }

.chatList .chatList-li { width: 100%; height: 56px; box-sizing: border-box; border-bottom: 1px solid #cccccc; cursor: pointer; padding: 0 25px 0 10px; position: relative; }

.chatList .chatList-li.active { background-color: #C4C4C6; }

.chatList .chatList-li.active .chatList-li-tit { color: #525252; }

.chatList .chatList-li.active .chatList-li-time { color: #525252; }

.chatList .chatList-li.active .chatList-li-num { background-color: red; }

.chatList .chatList-li:hover { background-color: #E4E4E4; }

.chatList .chatList-li:hover .chatList-li-tit { color: #525252; }

.chatList .chatList-li:hover .chatList-li-time { color: #525252; }

.chatList .chatList-li:hover .chatList-li-num { background-color: red; }

.chatList .chatList-li .chatList-li-tit { width: 100%; height: 56px; line-height: 50px; font-size: 14px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.chatList .chatList-li .chatList-li-time { display: block; color: #9d9696; font-size: 12px; position: absolute; right: 10px; bottom: 1px; }

.chatList .chatList-li .chatList-li-num { width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 50%; background-color: red; font-size: 12px; color: #ffffff; position: absolute; right: 8px; top: 50%; margin: -18px 0 0 0; }

.leftPage { width: 299px; height: 56px; background-color: #ffffff; position: absolute; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }

.leftPage .leftPage-item { height: 24px; line-height: 24px; background: #FFFFFF; border: 1px solid #D7D7D7; color: #595959; box-sizing: border-box; margin: 0 6px 0 0; text-align: center; cursor: pointer; }

.leftPage .leftPage-item.disabled { background: #f2f2f2; }

.leftPage .leftPage-item.widFirst { width: 30px; }

.leftPage .leftPage-item.widSecond { width: 35px; }

.leftPage-opt { margin: 0 8px 0 8px; }

.leftPage .leftPage-opt .leftPage-opt-input { width: 28px; height: 24px; box-sizing: border-box; border: 1px solid #D7D7D7; text-align: center; }

.leftPage .leftPage-opt .leftPage-opt-input:focus { border: 1px solid #1890FF; }

.leftPage .leftPage-btn { width: 40px; height: 22px; text-align: center; line-height: 22px; background: #FFFFFF; border: 1px solid #D7D7D7; color: #595959; cursor: pointer; }

.onlinePop-right-opt { width: 100%; height: 40px; box-sizing: border-box; padding: 0 60px 0 10px; display: flex; align-items: center; border-bottom: 1px solid #cccccc; position: relative; background-color: #006ADA; }

.onlinePop-right-title { width: 100%; height: 100%; box-sizing: border-box; line-height: 40px; font-weight: bolder; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ffffff; }

.onlinePop-right-opt-item { width: 24px; height: 24px; cursor: pointer; position: absolute; right: 16px; top: 8px; }

.onlinePop-right-con { width: 100%; height: 560px; box-sizing: border-box; position: relative; }

.chatMask { width: 100%; height: 100%; position: absolute; z-index: 1000000004; background-color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; }

.newMessage { width: 100%; height: 24px; box-sizing: border-box; background-color: #FFC000; cursor: pointer; text-align: center; line-height: 24px; color: #ffffff; position: absolute; left: 0; bottom: 170px; z-index: 1000000005; display: flex; justify-content: center; align-items: center; overflow: hidden; }

.newMessage .newMessage-iocn { margin: 0 0 0 3px; }

.messageList { width: 100%; height: 392px; box-sizing: border-box; border-bottom: 1px solid #cccccc; padding: 20px 20px 20px 20px; background: url(../images/chatBg.jpg) 100% 100%; }

.messageList-li { position: relative; }

.messageList-li.systemMessage { width: 100%; text-align: center; color: #9d9696; font-size: 11px; margin-bottom: 15px; }

.messageList-li .message-data { margin-bottom: 15px; width: 100%; box-sizing: border-box; }

.messageList-li .message-data .message-data-name { float: left; padding: 0 6px 0 0; }

.messageList-li .message-data .message-data-time { color: #a8aab1; float: left; }

.messageList-li .message { color: white; padding: 18px 20px; line-height: 26px; font-size: 16px; border-radius: 7px; margin-bottom: 30px; width: 400px; position: relative; background: #86BB71; float: left; word-break: break-all; }

.messageList-li .message:after { bottom: 100%; left: 30px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #86BB71; border-width: 10px; margin-left: -10px; }

.messageList-li .unReadMessage { width: 40px; height: 20px; font-size: 11px; color: #9d9696; text-align: center; line-height: 20px; position: absolute; top: 50%; right: 170px; margin: -10px 0 0 0; }

.messageList-li .readMessage { width: 40px; height: 20px; font-size: 11px; text-align: center; line-height: 20px; position: absolute; top: 50%; right: 170px; margin: -10px 0 0 0; }

.messageList-li .picture { color: white; width: 85%; height: 180px; padding: 18px 20px; margin-bottom: 30px; position: relative; background: #86BB71; float: left; display: flex; align-items: center; justify-content: center; }

.messageList-li .picture:after { bottom: 100%; left: 30px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #86BB71; border-width: 10px; margin-left: -10px; }

.messageList-li .picture .picture-img { width: 260px; height: 160px; cursor: pointer; }

.messageList-li.isRight .message-data .message-data-name { float: right; padding: 0 0 0 6px; }

.messageList-li.isRight .message-data .message-data-time { float: right; }

.messageList-li.isRight .message { background: #94C2ED; float: right; }

.messageList-li.isRight .message:after { left: 408px; border-bottom-color: #94C2ED; }

.messageList-li.isRight .picture { background: #94C2ED; float: right; }

.messageList-li.isRight .picture:after { left: 570px; border-bottom-color: #94C2ED; }

.messageList-li.isRight .unReadMessage { left: 170px; }

.messageList-li.isRight .readMessage { left: 170px; }

.sendMessage { width: 100%; height: 168px; box-sizing: border-box; overflow: hidden; padding: 0 20px 0 20px; position: relative; }

.sendMessage-tool { width: 100%; height: 20px; box-sizing: border-box; padding: 0 0 0 10px; margin: 5px 0 5px 0; display: flex; align-items: center; }

.sendMessage-tool .sendMessage-tool-item { width: 20px; height: 20px; margin: 0 10px 0 0; cursor: pointer; }

.sendMessage-con { width: 100%; height: 95px; box-sizing: border-box; border: 1px solid #cccccc; border-radius: 8px; padding: 10px 10px 10px 10px; font-size: 14px; overflow-y: auto; }

.sendMessage-con:focus-visible { outline: none; outline-width: 0; border: 1px solid #006ADA; }

.sendMessage-opt { position: absolute; bottom: 8px; right: 20px; display: flex; }

.sendMessage-opt .sendMessage-opt-item { cursor: pointer; display: inline-block; margin: 0 0 0 10px; border: 1px solid #dcdee3; border-radius: 5px; font-size: 13px; color: #a8aab1; padding: 2px 18px; background-color: #E9E9E9; }

.sendMessage-opt .sendMessage-opt-item.sendMessage-opt-pointRole { color: #006ADA; }

.sendMessage-opt .sendMessage-opt-item.sendMessage-opt-sendMessage { color: #07C160; }

.sendMessage-opt .sendMessage-opt-item:hover { background-color: #006ADA; color: #ffffff; border: none; border-radius: 5px; }

/* 在线客服样式结束 */
/* 图片放大的样式开始 */
.showPic { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; z-index: 4000000002; overflow-y: hidden; }

.showPicPop { width: 1000px; height: 600px; background-color: #ffffff; position: absolute; top: 50%; left: 50%; z-index: 4000000003; margin-left: -500px; margin-top: -300px; overflow: hidden; border-radius: 8px; }

.showPicPop .showPicPop-top { width: 100%; height: 40px; box-sizing: border-box; padding: 0 16px 0 0; display: flex; align-items: center; justify-content: flex-end; }

.showPicPop .showPicPop-top .showPicPop-top-close { width: 24px; height: 24px; cursor: pointer; }

.showPicPop .showPicPop-con { width: 100%; height: 560px; display: flex; align-items: center; justify-content: center; }

.showPicPop .showPicPop-con img { max-width: 1000px; max-height: 560px; }

/* 图片放大的样式结束 */
/* 问题展示的样式开始 */
.showQuest { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; z-index: 4000000002; overflow-y: hidden; }

.showQuestPop { width: 1000px; height: 600px; background-color: #ffffff; position: absolute; top: 50%; left: 50%; z-index: 4000000003; margin-left: -500px; margin-top: -300px; overflow: hidden; border-radius: 8px; }

.showQuestPop .showQuestPop-top { width: 100%; height: 40px; box-sizing: border-box; padding: 0 0 0 16px; background-color: #006ADA; position: relative; }

.showQuestPop .showQuestPop-top .showQuestPop-top-title { width: 100%; height: 100%; line-height: 40px; color: #ffffff; font-size: 14px; font-weight: bolder; }

.showQuestPop .showQuestPop-top .showQuestPop-top-close { width: 24px; height: 24px; cursor: pointer; position: absolute; top: 8px; right: 16px; }

.showQuestPop .showQuestPop-con { width: 100%; height: 560px; box-sizing: border-box; }

.commonQuest { border: none; width: 100%; height: 520px; margin: 0; overflow-y: auto; box-sizing: border-box; padding: 20px 40px 20px 40px; }

.commonQuest .tableCommonCon .tableCommonUl { width: 100%; margin: 0 0 10px 0; cursor: pointer; }

.commonQuest .tableCommonCon .tableCommonUl li { font-size: 13px; }

.commonQuest .tableCommonCon .tableCommonUl li.answer { text-indent: 2em; margin: 5px 0 0 0; }

.commonQuest .tableCommonCon .tableCommonUl li.answer .answer_file { text-decoration: underline; color: #006ADA; cursor: pointer; }

.otherQuest { border: none; width: 100%; height: 520px; margin: 0; box-sizing: border-box; }

.otherQuest-con .otherQuest-con-item { width: 100%; box-sizing: border-box; padding: 20px 0 0 0; margin: 0 auto; }

.otherQuest-con .otherQuest-con-item .otherQuest-con-item-label { display: inline-block; width: 120px; height: 32px; line-height: 32px; text-align: right; margin: -10px 8px 0 0; font-size: 13px; }

.otherQuest-con .otherQuest-con-item .otherQuest-con-item-textarea { width: 805px; height: 100px; resize: none; box-sizing: border-box; border: 1px solid #D7D7D7; padding: 0 10px; vertical-align: top; color: #595959; box-sizing: border-box; padding: 5px 10px; font-size: 13px; }

.otherQuest-con .otherQuest-con-item .otherQuest-con-item-textarea:focus { outline: none; border: 1px solid #1890FF; }

.otherQuest-opt { width: 100%; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; padding: 20px 43px 0 0; }

.otherQuest-opt .otherQuest-opt-item { padding: 2px 18px; background-color: #108EE9; color: #FFFFFF; font-size: 13px; text-align: center; cursor: pointer; border: 1px solid #108EE9; border-radius: 5px; }

.otherQuest-opt .otherQuest-opt-item:hover { background-color: #49A9EE; border: 1px solid #49A9EE; }

.otherQuest-list { width: 805px; height: 310px; box-sizing: border-box; box-sizing: border-box; margin: 20px 0 0 130px; }

.otherQuest-list.hasPage { height: 254px; }

.otherQuest-list .otherQuest-li { width: 100%; height: 40px; line-height: 40px; display: flex; box-sizing: border-box; cursor: pointer; font-size: 14px; border-bottom: 1px solid #cccccc; }

.otherQuest-list .otherQuest-li.singular { background-color: #ffffff; }

.otherQuest-list .otherQuest-li.lose { background-color: #ffffff; }

.otherQuest-list .otherQuest-li .otherQuest-index { width: 22px; }

.otherQuest-list .otherQuest-li .otherQuest-title { width: 780px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.otherPage { width: 299px; height: 56px; background-color: #ffffff; position: absolute; bottom: 0; right: 43px; display: flex; align-items: center; justify-content: center; }

.otherPage .otherPage-item { height: 24px; line-height: 24px; background: #FFFFFF; border: 1px solid #D7D7D7; color: #595959; box-sizing: border-box; margin: 0 6px 0 0; text-align: center; cursor: pointer; }

.otherPage .otherPage-item.disabled { background: #f2f2f2; }

.otherPage .otherPage-item.widFirst { width: 30px; }

.otherPage .otherPage-item.widSecond { width: 35px; }

.otherPage-opt { margin: 0 8px 0 8px; }

.otherPage .otherPage-opt .otherPage-opt-input { width: 28px; height: 24px; box-sizing: border-box; border: 1px solid #D7D7D7; text-align: center; }

.otherPage .otherPage-opt .otherPage-opt-input:focus { border: 1px solid #1890FF; }

.otherPage .otherPage-btn { width: 40px; height: 22px; text-align: center; line-height: 22px; background: #FFFFFF; border: 1px solid #D7D7D7; color: #595959; cursor: pointer; }

/* 单独处理tab页签的样式开始 */
.showQuest .tabMenu-four { background: none; border: none; border-bottom: 1px solid #e4e4e4; width: 100%; font-size: 14px; height: 40px; box-sizing: border-box; padding-left: 12px; background-color: #FFFFFF; }

.showQuest .tabMenu-four li.current, .showQuest .tabMenu-four li.tabTitLi { border-top: none; border-bottom: 2px solid #006ADA; color: #006ADA; margin: 0 0 0 0; background-color: unset; border-right: none; border-left: none; height: 38px; }

.showQuest.tabMenu-four li.current span, .showQuest .tabMenu-four li.tabTitLi span { margin-top: 10px; color: #006ADA; }

.showQuest .tabMenu-four li span { min-width: 90px; padding: 0px 20px; box-sizing: border-box; text-align: center; height: 20px; display: block; border-right: none; margin-bottom: 10px; margin-right: -1px; }

/* WebKit,Edge,Blink、 */
.showQuest textarea::-webkit-input-placeholder { color: #cccccc; }

/* Internet Explorer 10-11 */
.showQuest textarea:-ms-input-placeholder { color: #cccccc; }

/* Microsoft Edge */
.showQuest textarea::-ms-input-placeholder { color: #cccccc; }

/* 单独处理tab页签的样式结束 */
/* 问题展示的样式结束 */
/* 选择角色的样式开始 */
.chooseRole { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; z-index: 4000000002; overflow-y: hidden; }

.chooseRolePop { width: 800px; height: 500px; background-color: #ffffff; position: absolute; top: 50%; left: 50%; z-index: 4000000003; margin-left: -400px; margin-top: -250px; overflow: hidden; border-radius: 8px; }

.chooseRolePop .chooseRolePop-top { width: 100%; height: 40px; box-sizing: border-box; padding: 0 16px 0 0; display: flex; align-items: center; justify-content: flex-end; }

.chooseRolePop .chooseRolePop-top .chooseRolePop-top-close { width: 24px; height: 24px; cursor: pointer; }

.chooseRolePop .chooseRolePop-con { width: 100%; height: 460px; box-sizing: border-box; padding: 20px 20px 80px 20px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: absolute; }

.chooseRolePop .chooseRolePop-con .showContainer { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; border: 1px solid #dee3e6; }

.showContainer .roleHeader { width: 100%; height: 40px; box-sizing: border-box; display: flex; border-bottom: 1px solid #dee3e6; }

.showContainer .roleHeader li { text-align: center; line-height: 40px; color: #262626; background-color: #F3F3F3; font-weight: bold; }

.showContainer .roleBody { width: 100%; height: 320px; overflow-y: auto; }

.showContainer .roleBody .roleBody-li { width: 100%; height: 40px; box-sizing: border-box; display: flex; border-bottom: 1px solid #dee3e6; }

.showContainer .roleBody .roleBody-li span { display: block; text-align: center; line-height: 40px; }

.roleHeader li:nth-child(1), .roleBody .roleBody-li span:nth-child(1) { width: 20%; box-sizing: border-box; border-right: 1px solid #dee3e6; }

.roleHeader li:nth-child(2), .roleBody .roleBody-li span:nth-child(2) { width: 80%; }

.chooseRolePop .chooseRolePop-con .chooseRolePop-opt { width: 100%; height: 60px; background-color: #F5F5F5; text-align: center; position: absolute; left: 0; bottom: 0; }

.chooseRolePop .chooseRolePop-con .chooseRolePop-opt .chooseRolePop-opt-item { display: inline-block; width: 77px; height: 32px; line-height: 32px; margin: 14px 0 0 0; color: #FFFFFF; font-size: 14px; text-align: center; font-family: PingFangSC-Medium; cursor: pointer; }

.chooseRolePop .chooseRolePop-con .chooseRolePop-opt .chooseRolePop-opt-item.sureOpt { background-color: #006ADA; border: 1px solid #006ADA; margin-right: 20px; }

.chooseRolePop .chooseRolePop-con .chooseRolePop-opt .chooseRolePop-opt-item.cancelOpt { background-color: #BFBFBF; border: 1px solid #BFBFBF; color: #FFFFFF; }

/* 选择角色的样式结束 */