@charset "utf-8";  /*格式化样式*/
/*公共压缩样式，处理各个浏览器兼容性所写，可以无视*/html,body{height:100%;  font-family:Arial;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}ul,ol{list-style:none}s{text-decoration:none}img{border:0}table{border-collapse:collapse;border-spacing:0}caption,cite,code,dfn,th,var{text-align:left;font-weight:normal;font-style:inherit;}body{background-color:#fff;}/* 表单 */label{display:inline-block;*display:inline;*zoom:1}button,input,select,textarea{vertical-align:baseline;*vertical-align:middle}input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]  input[type="button"]::-moz-focus-inner{border:none;padding:0}/* 字体 */h1{font-size:24px;margin:0 0 12px}h2{font-size:24px;margin:0 0 10px}h3{font-size:20px;margin:0 0 8px}h4{font-size:16px;margin:0 0 5px}h5{font-size:14px;margin:5px 0}h6{font-size:14px;margin:0 0 5px;}
.clearfix{overflow:hidden;zoom:1;clear: both;}
.clearfix{overflow:hidden;zoom:1;clear: both;}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(../css/boxsizing.htc);
}
div,body,p,h1,h2,h3,h4,h5,ul,li,dl,dd,dt{
margin:0;
padding:0;
list-style: none;
box-sizing:border-box;
}
a:focus{outline:none;}
a{color:#333; text-decoration: none; cursor:pointer; outline:none;}
a:hover{ color:#0d4381; text-decoration: none; }
body{font-size:14px; color:#666;}
input[type=text],textarea {border: 1px solid #e3e3e3; background: #fff; -webkit-appearance: none;font-family: Microsoft YaHei;  -webkit-appearance: none;
    font-family: Microsoft YaHei;
    outline: none;}
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;  font-family: Microsoft YaHei;}
input{font-family: Microsoft YaHei;}
textarea { -webkit-appearance: none;}
input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
    font-family: Microsoft YaHei;
    outline: none;
}
*{scrollbar-color:#e1e4ea transparent;scrollbar-width: thin;}
img{width:auto; max-width:100%;vertical-align: bottom;}
select{outline: none;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.liveChatbox{background:#fff; height:100vh; padding:50px 10% 10px;}
.liveChatContent{background:#f2f3f5; position: relative; height: calc(100vh - 84px);display:flex;flex-direction: column;flex: 1;height: 100%;}
.liveChatContent .chatsendbox .box{background:#eff0f2;display: flex;flex: 1;align-items: end;  gap:10px; z-index: 2; justify-content: space-between; position: relative;padding:10px 12px;}
.liveChatContent .chatsendbox .chatsend{ width:calc(100vh - 60px); max-height:20vh; position: relative;overflow-y: auto; }
.liveChatContent .chatsendbox  textarea{border:none; resize:none; width:100%; font-size:14px; font-family: Arial;  background:#fff;line-height:24px; color:#111; width:100%;}
.liveChatContent .chatsendbox  .senbutton{width:60px;}
.liveChatContent .chatsendbox  .senbutton img{width:16px; height:16px;}
.bottomqueit{padding:8px 12px 0; display:flex; gap:10px;}
.bottomqueit img{width:18px; height:18px;}
.bottomqueit .uploadImg{border:none;padding: 0 10px; color:#1e1e1e; gap:5px; font-size:13px; border-radius:3px; background:#fff; display:flex; cursor: pointer; align-items:center; justify-content:center; position: relative;line-height:26px; text-align:center;}
.bottomqueit .file{position:absolute; opacity:0;width:100%; height:100%; cursor: pointer; position:absolute; top:0; left:0; z-index: 2; cursor: pointer;}
.liveChatContent .chatsendbox .senbutton button{border:none;padding: 0; overflow: hidden; border-radius:3px; background:#ff8370; display:flex; cursor: pointer; align-items:center; justify-content:center; position: relative; width:60px; height:34px; line-height:34px; text-align:center;}
.liveChatContent .chatsendbox .senbutton .el-button--primary.is-disabled,
.liveChatContent .chatsendbox .senbutton .el-button--primary.is-disabled:active,
.liveChatContent .chatsendbox .senbutton .el-button--primary.is-disabled:focus,
.liveChatContent .chatsendbox .senbutton .el-button--primary.is-disabled:hover{color: #FFF; background-color: #ffc4bc; border-color: #ffc4bc; cursor: pointer;}
.liveChatContent .chatsendbox .senbutton button span{display:flex;}
.liveChatContent .content{height: calc(100vh - 84px); padding:20px; overflow-y: auto;}
.liveChatContent .content .welcome{margin-bottom:20px;}
.liveChatContent .content .welcome .logo img{width:65px;}
.liveChatContent .content .welcome .ti{font-size:20px; font-weight:bold; color:#111;}
.liveChatContent .content .welcome .dis{margin-top:12px; font-size:14px; color:#333; line-height:1.5;}
.liveChatContent .content .welcome .quickList{display:flex; padding-top:20px; flex-wrap: wrap; gap:15px; justify-content: flex-start;}
.liveChatContent .content .welcome .quickList li{width:30%; font-size:12px; cursor: pointer; display:flex; flex-direction: column; justify-content: space-between; height:100px; align-items:center; padding:20px 10px; max-width:100px; background:#c9e4ff; color:#707070; border-radius:5px; text-align:center;}
.liveChatContent .content .welcome .quickList li img{width:35px; margin-bottom:3px;}
.liveChatContent .content .welcome .quickList li:nth-child(1){background:#c9e4ff; box-shadow:0 0 10px rgba(24, 178, 252, .2);}
.liveChatContent .content .welcome .quickList li:nth-child(2){background:#f4e3c5; box-shadow:0 0 10px rgba(243, 145, 12, .2);}
.liveChatContent .content .welcome .quickList li:nth-child(3){background:#caf3e5; box-shadow:0 0 10px rgba(1, 207, 124, .2);}
.liveChatContent .content .welcome .quickList li:nth-child(4){background:#ffcece; box-shadow:0 0 10px rgba(245, 108, 108, .2);}
.liveChatContent .content .welcome .quickList li:nth-child(5){background:#f5f5f5; box-shadow:0 0 10px rgba(153, 153, 153, .2);}
.chatHistory .frist_status{margin-bottom: 10px; text-align:center;}
.chatHistory .frist_status span{font-size: 12px;display: inline-block; background: #ccc; color: #fff; border-radius: 5px; padding: 3px 10px; line-height: 12px;}
.chatHistory .customer .info{display:flex; justify-content: flex-end;justify-content: flex-end; word-break: break-word;white-space: pre-line;}
.chatHistory .customer .title{display:flex; gap:8px; align-items:flex-start; justify-content: flex-end; color:#3d3d3d; font-size: 14px; font-weight: 600; padding-bottom:15px;}
.chatHistory .customer .title>img{width:28px; height:28px; border-radius:100%;}
.chatHistory .customer .title .img{width:28px; height:28px;flex: 0 0 28px; border-radius:100%; background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/default.jpg) no-repeat center; background-size:100% 100%;}
.chatHistory .customer .answer{padding: 10px 12px; line-height:24px;flex:1; border-radius:3px; background:#c9e7ff; color:#0e1d24; margin-bottom:12px;}
.chatHistory .service .info{display:flex;justify-content: flex-start; word-break: break-word;white-space: pre-line;}
.chatHistory .service .title{display:flex; gap:8px; align-items:flex-start; justify-content: flex-start; color:#3d3d3d; font-size: 14px; font-weight: 600;padding-bottom:15px;}
.chatHistory .service .title>img{width:28px; height:28px; border-radius:100%; background:#fff; background: (214deg, rgba(255, 118, 141, .1) 1%, rgba(45, 106, 226, .1) 58%, rgba(120, 171, 245, .1) 86%);}
.chatHistory .service .title .img{width:28px; height:28px;flex: 0 0 28px; border-radius:100%; background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/service.png) no-repeat center; background-size:100% 100%;}
.chatHistory .service .answer{padding: 10px 12px; flex:1; line-height:24px; border-radius:3px; background:#FFF; color:#0e1d24; margin-bottom:12px;}
.phonemask{position: relative; font-weight:bold; margin-top:20px; display:flex; flex: 1; z-index:1; width:100%; padding:10px 15px; background:#c9e4ff;}
.phonemask input{background:#fff; border:none; font-size:16px; padding-left:40px; font-weight:bold; color:#333; outline:none; line-height:45px; border-radius:3px 0 0 3px; width:calc(100vh - 135px);}
.phonemask button{width:135px; background:#ff8370; color:#fff; border:none; cursor: pointer; border-radius:0 3px 3px 0; text-align:center; height:45px;}
.phonemask span{position:absolute; left:22px; font-size:16px; top:10px;color:#333; display: block; line-height:45px;}
.closemask{position:absolute; gap:4px;align-items:center; display:flex; justify-content:center; display:flex; flex: 1; color:#3d86fc; bottom:85px; z-index:1; width:100%; padding:10px 20px; background:#c9e4ff;}
.closemask button{font-size:12px; color:#fff; border:none; background:#f88539; border-radius:3px; height:24px; padding:0 5px;}
.closemask button.next{background:#3d86fc;}
.el-message{min-width:280px;}
.tipsSelect{display:flex; align-items:center; justify-content:center;}
.tipsSelect span{background:#caf3e5; color:#377c00; border-radius:3px; padding:5px 10px; font-size:12px; gap: 5px;display: flex; align-items: center;}
.tipsSelect span img{width:16px;}
.errorbox{font-size:18px; padding:5%;display: flex;align-items: center;justify-content: center;height: 50vh;}
.cardbox{background:#fff; padding:10px 0 0; border-radius:5px; min-width:240px;}
.cardbox h3{margin:0; font-size:15px; color:#333; font-weight:normal; border-bottom:1px solid #e9e9e9; padding:0 10px 12px;}
.cardbox .info{padding:10px 10px; cursor:pointer; font-size:14px; display:flex; align-items:center;}
.cardbox .info .bankimg{width:65px; margin-right:10px; box-shadow:0 0 5px rgba(0,0,0,0.1);}
.cardbox .info .bankimg img{width:100%;}
.cardbox .info p{display:flex; align-items:center; gap:5px; color:#333; margin:0;line-height: 1.6;}
.cardbox .info p span{display:block;width:60px;}
.cardbox .info p b{color:#333; font-weight:normal;}
.cardbox .info p i{color:#f60;}
.cardbox .guide a{display:flex; justify-content: space-between; color:#666; font-size:14px; align-items:center; border-top:1px solid #e9e9e9; padding:10px 10px;font-weight: normal;}
.guideinform{position:absolute; width:100%; height:100%; z-index:10; top:0; padding-bottom:60px; background:#fff;}
.guideinform iframe{border:none;width:100%; height:100%}
.guideinform .back{position:absolute; bottom:10px; width:100%; left:0; text-align:center;}
.guideinform .back button{background:#4ca1ff; color:#fff; cursor:pointer; border-radius:5px; border:none;width: 210px;height: 40px;font-size: 16px;}
.chatHistory img{max-width:320px;}
.mocash .service .title .img{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/mocash_d.png) no-repeat center; background-size:100% 100%;}
.fastkredit .service .title .img{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/fastkredit_d.png) no-repeat center; background-size:100% 100%;}
.yokdana .service .title .img{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/yokdana_d.png) no-repeat center; background-size:100% 100%;}
.sinar .service .title .img{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/sinar_d.png) no-repeat center; background-size:100% 100%;}
.ciptaFin .service .title .img{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/ciptaFin_d.png) no-repeat center; background-size:100% 100%;}
.kilatCicil .service .title .img{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/kilatCicil_d.png) no-repeat center; background-size:100% 100%;}
.service .title .lkimg{width:28px; height:28px; border-radius:100%; background:#fff; background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/kf.png) no-repeat center; background-size:100% 100%;}
.service .title .ma{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/mage.png) no-repeat center; background-size:100% 100%;}
.service .title .avt{background:url(https://loanpal.oss-ap-southeast-5.aliyuncs.com/static/chat/avt.png) no-repeat center; background-size:100% 100%;}

@media only screen and (max-width:768px){
    .liveChatbox{padding:0;}
    .liveChatContent .content .welcome .quickList li img{height:28px; margin-bottom:5px;}
    .liveChatContent .content .welcome .quickList li{padding:18px 10px; height:85px;}
    .liveChatContent .content{padding:20px 15px;}
    .chatHistory img{max-width:240px;}
    .chatsendbox{position:fixed; bottom:0; left:0; width:100%; z-index:10;}
}