/* 页面初始化 */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
    font-family: 微软雅黑, Arial, 宋体;
}

html {
    height: 100%;
    overflow-y: auto;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

div, dl, dt, dd, div, p, form, h1, h2, h3 {
    margin: 0;
    padding: 0;
}

.message {
    margin: 10px 0;
}

b, em, i {
    font-style: normal;
    font-weight: normal;
}

img:not(.avatar, .qqemoji, .standard-emoji, .location, .thumb, .emot, .tb-img, .ke-emoji, .custom-emoji) {
    border: none;
    width: 100%;
}

a, a:visited {
    color: #333;
    outline: none;
    text-decoration: none;
}

pre {
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
}

.clearfix .content a, a:visited {
    color: blue;
}

.left {
    float: left;
}

.right {
    float: right;
}

.hidden {
    display: none;
}

.relative {
    position: relative;
}

.sel70 {
    width: 70px;
}

.mr10 {
    margin-right: 10px;
}

/*清除浮动*/
.clearfix {
    *zoom: 1
}

.clearfix:after {
    content: '\20';
    display: block;
    clear: both;
}

/* 主界面 */
.main {
    position: relative;
    color: #333;
    font-size: 14px;
    min-width: 1000px;
    min-height: 600px;
}

.main .body {
    position: relative;
}

.updown {
    height: 100%;
    float: left;
}

.isShowTImeTip {
    height: 100%;
    float: right;
}

/* 整体颜色定位 */
body.df-bg {
    background: #dfdfdf;
}

body.overhidden {
    overflow: hidden;
    *overflow: hidden;
}

.chat-window {
    width: 1000px;
    height: 640px;
    margin: 60px auto 0 auto;
    background: #fff;
    border-radius: 5px;
}

.chat-content {
    position: relative;
}

/* 按钮样式 */
.gray-btn, .red-btn {
    width: 90px;
    margin-left: 10px;
    border-radius: 2px;
    text-align: center;
}

/* 聊天对话框 */
.c-main-con {
    min-height: 220px;
    padding: 20px;
    background: #fff;
    *position: relative;
}

.c-main-con .time {
    margin-bottom: 10px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.c-main-con .message {
    margin-bottom: 10px;
}

.c-main-con .message .avatar {
    position: relative;
}

.c-main-con .message .avatar img {
    width: 100%;
}

.c-main-con .message .content {
    max-width: 70%;
    padding: 15px;
    border: 1px solid #eff3f6;
    border-radius: 5px;
}

.c-main-con .message .content img:not(.avatar, .qqemoji, .standard-emoji, .location, .thumb, .emot, .tb-img, .ke-emoji, .custom-emoji) {
    display: block;
}

.c-main-con .lele .avatar {
    float: left;
}

.c-main-con .me .avatar {
    float: right;
}

/* 输入框 */
.c-main-btn {
    padding: 15px;
    height: 130px;
    position: relative;
    *padding: 10px 15px 0 15px;
}

.c-main-btn textarea { /* width:620px; */
    width: 99%;
    height: 58px;
    margin-bottom: 10px;
    border: 1px solid #fff;
    resize: none;
}

/* 发送按钮区域 */
.c-p a {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    *height: 30px;
    height: 30px \9;
}

.c-p .sen-div {
    position: relative;
    z-index: 199;
}

.c-p .sen-div .way {
    position: absolute;
    right: 0px;
    bottom: 38px;
    width: 250px;
    background: #fff;
    border: 1px solid #dfdfdf;
    border-top: none;
    font-size: 12px;
    z-index: 200;
}

.c-p .sen-div .way li {
    line-height: 22px;
    padding: 10px 14px 10px 35px;
    border-top: 1px solid #dfdfdf;
    cursor: pointer;
    background: url(../image/radio.png) no-repeat 8px 12px
}

.c-p .sen-div .way li:hover {
    background-color: #f5f5f5;
}

.c-p .sen-div .way li.checked {
    background: #f5f5f5 url(../image/radio-check.png) no-repeat 8px 12px;
}

/* 客服提示 */
.no-bg {
    padding: 3px 0;
    color: #888;
    font-size: 13px;
}

.no-bg + .no-bg {
    margin-top: 10px;
}

.notice {
    height: auto;
    line-height: 25px;
    padding: 0 35px;
    background: url(../image/select.png) no-repeat 7px 3px;
    text-align: center;
}

.no-yel .notice {
    background: url(../image/volume.png) no-repeat 10px center;
}

.notice a {
    color: #1790FD;
    margin-left: 5px;
}

/** 跑马灯*/
.scroll {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
}

ul.marquee {
    display: block;
    line-height: 30px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

ul.marquee li {
    position: absolute;
    top: -999em;
    left: 0;
    display: block;
    white-space: nowrap;
    text-indent: 20px;
}


/*头部*/
.mylink {
    text-decoration: underline;
}

.main .head .head-btn-container {
    float: right;
    height: 100%;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.head .title {
    padding-left: 2em;
    overflow: hidden;
    float: left;
    height: 100%;
}

.head span {
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 1.5em;
}

.chat-container {
    overflow: hidden;
    height: 100%;
    z-index: 11;
}

/*sidebar隐藏*/
.chat-hisTop-container {
    float: right;
    width: 35em;
    padding: 20px;
    border-left: 1px solid #dfdfdf;
    height: 90%;
    overflow: auto;
}

/*sidebar隐藏*/
chat-hisTool-container {
    position: absolute;
    right: 0;
    width: 35em;
    padding: 20px;
    border-left: 1px solid #dfdfdf;
    height: 90%;
    overflow: auto;
}


/* 侧边栏 */
.menu-container .side-nav a {
    display: inline-block;
    width: 113px;
    height: 51px;
    line-height: 54px;
    padding-bottom: 3px;
    text-align: center;
    font-size: 14px;
}

.menu-container {
    position: absolute;
    right: 0;
}

.left-container {
    width: 200px;
    position: absolute;
    left: 0;
}

.menu-container .side-main .side-tab .service {
    padding: 5px 10px;
}

.menu-container .side-main .side-tab .service a {
    margin: 15px 0;
    display: block;
    height: 40px;
}

.menu-container .side-main .side-tab .service a img {
    float: left;
    margin-right: 10px;
}

.menu-container .side-main .side-tab .service a span {
    float: left;
    margin-top: 10px;
}

/* 满意度进入弹框  */
.confirm-container {
    position: absolute;
    display: block;
    z-index: 300;
    width: 300px;
    height: 150px;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}

.confirm-container .msg {
    padding: 10px 30px;
    *padding: 10px 0;
    padding: 10px 0 \9;
    font-size: 14px;
}

.confirm-container .btn-container {
    /*margin: 68px auto;*/
    /* margin-bottom: 10px; */
    margin: 25px 0;
    margin: 25px 0 \9;
    text-align: center;
}

.confirm-container .btn-container .confirm-btn {
    margin-right: 30px;
}

/* 轮播  */
.menu-container .carousel .adbox {
    width: 400%;
    height: 100%;
}

.menu-container .carousel .ad {
    width: 25%;
    height: 100%;
    float: left;
    display: block;
    overflow: hidden;
}

.menu-container .carousel .btnbox {
    position: absolute;
    width: 96px;
    height: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 10px;
}

.menu-container .carousel .btnbox li {
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background: #ccc;
    float: left;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid #ccc;
}

.lt, .rt {
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    display: none !important;
}

.lt {
    left: 0;
}

.rt {
    right: 0;
}


/* question */
.questions {
    width: 100%;
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    padding: 10px;
}

.questions p {
    color: #333;
    font-size: 16px;
    padding: 3px 0 10px;
    padding-left: 30px;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/img/icon_sprites.png) no-repeat -53px -83px;
    border-bottom: 1px solid #E6E6E6;
}

.questions li {
    margin: 10px 0;
    float: left;
    width: 50%;
}

.questions li a {
    color: #4e649a;
}


/* 显示时间 */
.time {
    width: 100%;
    text-align: center;
    height: 20px;
}

/* 头部链接 */
/* vienna */
.main .head:after {
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#navBox {
    float: right;
    height: 100%;
}

ul.item-list {
    overflow: hidden;
    height: 100%;
    width: auto;
    display: block;
}

.item-list li a {
    display: inline-block;
    line-height: 1;
    padding: 5px 0;
    max-height: 100%;
    height: auto;
}

.item-list li img {
    width: 50px;
    display: block;
}

.item-list li span {
    color: #fff;
    font-size: 16px;
    display: inline-block;
    line-height: 1;
}

.item-list li {
    margin-left: 15px;
    text-align: center;
    padding: 0;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

#navBox .icon {
    width: 60px;
    height: 50px;
    background-image: url(../image/link.png);
    background-repeat: no-repeat;
    display: block;
}

#navBox .icon.home {
    background-position: -2px 0px;
}

#navBox .icon.reserve {
    background-position: -77px 0px;
}

#navBox .icon.vipquery {
    background-position: -152px 0px;
}

#navBox .icon.discount {
    background-position: -227px 0px;
}

#navBox .icon.join {
    background-position: -302px 0px;
}


/* 头部 */
.head .head-btn-container a {
    float: left;
    height: 100%;
    margin-left: 1em;
}

/* 音视频 */
.head .head-btn-container a.audioBtn {
    display: flex;
    align-items: center;
    /*display: none;*/
}

.head .head-btn-container a.manual {
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
    background-color: #3a6be2;
    color: #fff;
    padding: 0 10px;
}

.head .head-btn-container a.large {
    display: none;
}

.head .head-btn-container i {
    width: 55px;
    height: 100%;
    float: left;
}

.head .head-btn-container .barcode i {
    background: url(../image/u2.png) no-repeat center;
}

.head .head-btn-container .manual i {
    display: none;
    background: url(../image/u14.png) no-repeat center;
}

.head .head-btn-container .manual span {
    font-size: 14px;
}


/* sfjy 身份校验*/
.show-sfjy {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.show-sfjy iframe {
    position: relative;
    left: 20%;
    top: 20%;
}

/* notice */
.show-notice {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.show-notice label {
    display: inline-block;
}


.notice-supply-info {
    width: 500px;
    height: auto;
    margin: 100px auto 0;
    background-color: #fff;
    border-radius: 5px;
    padding: 60px 20px 20px;
    position: relative;
}

.notice-supply-info .notice-box {
    display: block;
    margin-bottom: 10px;
    height: auto;
}

.notice-supply-info .notice-box:last-child {
    margin-bottom: 0;
}

.notice-supply-info .notice-box .notice-input {
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding-left: 5px;
    min-width: 200px;
}

.notice-supply-info .notice-box li {
    display: inline-block;
    padding: 5px 0;
}

.notice-supply-info .notice-box li input[type="checkbox"] {
    height: 16px;
    width: 16px;
    margin: -3px 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.notice-supply-info .notice-box li input[type="radio"] {
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin: -3px 10px;
}

.notice-supply-info select.type {
    min-width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    margin-bottom: 10px;
}

.notice-title {
    background: #f3f3f3;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    border-radius: 3px 3px 0 0;
}

i.notice-close {
    height: 100%;
    position: absolute;
    right: 10px;
    width: 20px;
    text-align: center;
    background: url(../image/close.png) no-repeat center center;
}

.notice-box button.btn {
    padding: 6px 14px;
    background: #fcfcfc;
    border: 1px solid #ccc;
    font-size: 14px;
    border-radius: 3px;
}

.likes {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}

.likes p {
    line-height: 26px;
    margin-bottom: 10px;
}

.likes .like {
    display: inline-block;
    line-height: 40px;
    width: 130px;
    text-align: center;
}

.likes .step {
    display: inline-block;
    line-height: 40px;
    width: 130px;
    text-align: center;
}

.likes .like i {
    background: url(../image/like.png) no-repeat 0 center;
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    vertical-align: top;
    margin-right: 10px;
}

.likes .step i {
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    vertical-align: top;
    margin-right: 10px;
    background: url(../image/like.png) no-repeat -50px center;
}

.likes .like .active {
    background-position: -108px center;
}

.likes .step .active {
    background-position: -158px center;
}

.relate_body .relate_body_li {
    color: #2c8ff3;
}

/** 机器人模式的图文模式**/
.tb-view {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    min-width: 300px;
    background-color: #fff;
}

.tb-view .tb-cell {
    position: relative;
    overflow: hidden;
    padding: 11px 15px;
    border-bottom: 1px dotted #ccc;
    font-size: 14px;
    background-color: #fff;
}

.tb-cell > a {
    position: relative;
    display: block;
    overflow: hidden;
    margin: -11px -15px;
    padding: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
}

.tb-cell > a .tb-img {
    line-height: 42px;
    max-width: 42px;
    height: 42px;
    float: right;
    margin-right: 10px;
}

.tb-cell_first .first-img {
    width: 100%;
    height: 200px;
}

.tb-cell_first a .tb-img {
    width: 100%;
    max-width: 100%;
    height: initial;;
    float: none;
    margin: 0;
}

.tb-cell_first a .tb-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 5px 10px;
}

.tb-cell_first .tb-body .tb-content {
    color: #fff;
    margin-top: 0;
}

.tb-cell > a .tb-body {
    overflow: hidden;
}

.tb-cell .tb-body .tb-content {
    white-space: normal;
    margin-top: 5px;
    line-height: 20px;
    color: #a7a7a7;
}

/*弹框聊天记录*/
.chat-container a.hischat {
    position: absolute;
    right: 10px;
    top: 8px;
    color: #b11f1f;
    font-weight: bold;
}

.chat-container .bar {
    position: relative;
    height: 30px;
}

.his_box {
    display: none;
    position: fixed;
    width: 600px;
    height: 600px;
    right: 50%;
    top: 50%;
    border: 1px solid #aaa;
    z-index: 99;
    background-color: #fff;
    box-shadow: -5px -1px 9px -5px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    transform: translate(50%, -50%);
    padding: 20px 20px 30px;
    box-sizing: border-box;
}

.his_box a.closeHis {
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url(../image/close.png) no-repeat;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.his_box .his-title {
    padding: 15px 0 20px;
    line-height: 30px;
    font-size: 30px;
    font-weight: 500;
    margin: 0;
}

.his_box .his-body {
    height: 485px;
    box-sizing: border-box;
    overflow: auto;
    background: #fff;
}

/* tool链接 */

.main .tool-link {
    display: none;
    position: absolute;
    width: 94%;
    height: 81px;
    top: -85px;
    left: 3%;
    border: 1px solid #FCCF3E;
    border-radius: 4px;
}

.main .tool-link .tool-list {
    overflow: hidden;
    width: 100%;
    display: block;
    padding: 5px 10px;
}

.main .tool-link .tool-list .tool-item {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
}

.main .tool-link .tool-list .tool-item a {
    display: inline-block;
    height: auto;
    color: #333;
}

.main .tool-link .tool-list .tool-item img {
    height: 50px;
}

.main .tool-link .tool-list .tool-item span {
    display: block;
}

.dialog {
    position: absolute;
    z-index: 10003;
    display: block;
    background: white;
}

.dialog .dialog-header {
    position: relative;
    padding: 0 50px 0 15px;
    *line-height: 50px;
    *height: 50px;
    background-color: #f4f5f9;
    background-image: -moz-linear-gradient(top, #f4f5f9 0, #f4f5f9 100%);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f5f9), to(#f4f5f9));
    background-image: -webkit-linear-gradient(top, #f4f5f9 0, #f4f5f9 100%);
    background-image: -o-linear-gradient(top, #f4f5f9 0, #f4f5f9 100%);
    background-image: linear-gradient(to bottom, #f4f5f9 0, #f4f5f9 100%);
    border-bottom: 1px solid #e7e7eb;
}

.dialog .dialog-header .title {
    color: #666;
    line-height: 45px;
    font-size: 1.2em;
    font-style: normal;
    text-shadow: 1px 1px #fff;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dialog .dialog-body {
    position: relative;
    padding: 20px;
    overflow: auto;
    min-width: 200px;
}

.dialog .dialog-footer {
    position: relative;
    padding: 10px 20px;
    text-align: center;
}

.dialog .dialog-footer .close-btn {
    display: inline-block;
    height: 28px;
    line-height: 28px;
}

.pop-judge {
    max-height: 60%;
    overflow: auto;
}

#capturecontainer {
    position: absolute;
    top: 0;
    z-index: -1;
}

.load-chathis {
    font-size: 14px;
    text-align: center;
    color: #888;
    padding: 5px;
}

.hr-left, .hr-right {
    display: inline-block;
    width: 140px;
    height: 1px;
    vertical-align: middle;
}

.hr-left {
    background: linear-gradient(to right, rgb(234, 234, 234) 0%, rgb(136, 136, 136) 40%, rgb(136, 136, 136) 100%);
}

.hr-right {
    background: linear-gradient(to left, rgb(234, 234, 234) 0%, rgb(136, 136, 136) 40%, rgb(136, 136, 136) 100%);
}

.load-chathis .txt i {
    margin-right: 0.16rem;
}

.transfer-message {
    padding: 10px 0;
    width: 100%;
    background-color: #cccccc;
}

.transfer-message p {
    text-align: center;
}

/*
    star的样式
 */
ul.star-list {
    display: inline-block;
    height: 30px;
    vertical-align: top;
}

.star-list .star-li {
    height: 20px;
    width: 20px;
    float: left;
    background: url(../image/star.png) no-repeat 0 0;
    margin: 2px 5px;
}

.star-list .star-li.active {
    background-position: 0 -25px;
}

label.reason-box {
    min-height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
}

label.reason-box span {
    display: inline-block;
    /*width: 100px;*/
    width: auto;
}

.message-notice {
    padding-left: 0;
}

/*.message-notice .transfer-notices {
    margin-top: 20px;
    width: 80%;
    background-color: #808080cc;
    color: white;
    padding: 5px;
    border-radius: 5px;
}*/

.message-notice .transfer-notice {
    color: #2684D0;
    display: block;
    border-bottom: 1px dotted #e0e0e0;
    padding: 7px 5px;
    cursor: pointer;
}

.robot-ques {
    position: absolute;
    top: -500px;
    left: 20px;
    background-color: #f6fbff;
    max-width: 700px;
    min-width: 300px;
    padding: 20px;
    border-radius: 10px;
    overflow-y: auto;
    box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.3);
}

.robot-ques h4 {
    margin: 0;
    padding: 0 10px 10px;
    font-size: 15px;
}

.robot-ques ul {
    padding: 2px 0px;
}

.robot-ques ul li {
    border-radius: 5px;
    margin: 0;
    border-bottom: 1px solid #e5f2f6;
}

.robot-ques > ul > li > span {
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 500;
    display: block;
    cursor: pointer;
}

.robot-ques > ul > li:hover > span > a {
    color: #0092FF;
}

.robot-ques > ul > li > span > a {
    color: #575655;
}

.clearfix .content .msg-text {
    line-height: 22px;
    font-size: 15px;
    color: #434344;
    margin-bottom: 10px;
}

.clearfix .content .send-message {
    color: blue;
    display: block;
    border-bottom: 1px dotted #e0e0e0;
    padding: 7px 5px;
    cursor: pointer;
}

.robot-btn {
    color: blue;
    display: block;
    border-bottom: 1px dotted #e0e0e0;
    padding: 7px 5px;
    cursor: pointer;
}

.people-txt {
    height: 100%;
    margin: 0;
    padding: 5px;
    border-top: #f1f1f1 1px solid;
    outline: none;
}


.control_panel {
    height: 39px;
    border-top: 1px solid #f1f1f1;
}

.toolbar {
    height: 100%;
}

.toolbar a.chat-face {
    height: 39px;
    width: 40px;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/img/icon-face.jpg) no-repeat center;
    display: inline-block;
    background-size: 50%;
}

.toolbar a.chat-screencut {
    height: 39px;
    width: 40px;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/img/icon-cut.jpg) no-repeat center;
    display: inline-block;
    background-size: 50%;
}

.toolbar a.chat-pic {
    height: 39px;
    width: 40px;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/img/icon-img.png) no-repeat center;
    display: inline-block;
    background-size: 50%;
}

.toolbar a.chat-fontName {
    height: 39px;
    width: 40px;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/img/icon-img.png) no-repeat center;
    display: inline-block;
    background-size: 50%;
}

.toolbar a.chat-hisTop {
    line-height: 50px;
    height: 39px;
    width: 40px;
    display: inline-block;
    float: right;
    color: #848484;
}

.toolbar a.chat-navBox {
    height: 39px;
    width: 40px;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/img/icon-img.png) no-repeat center;
    display: inline-block;
    background-size: 50%;
}

.toolbar a.chat-push-rating {
    height: 39px;
    width: 40px;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/img/icon-rate.jpg) no-repeat center;
    display: inline-block;
    background-size: 70%;
}

.c-main-btn2 textarea.people-txt {
    height: 129px;
    border: 0;
    border-top: 1px solid #f1f1f1;
}


.mmpop {
    position: absolute;
    background-color: #fff;
    z-index: 99;
    outline: 0;
    display: none;
    bottom: 180px;
    left: 15px;
}

.slide-top {
    -webkit-transition: all 0 cubic-bezier(0.25, .46, .45, .94);
    transition: all 0 cubic-bezier(0.25, .46, .45, .94);
}

.expression {
    border: 1px solid #dedede;
}

.exp_hd {
    padding: 8px 20px 0;
    overflow: hidden;
    background-color: #f2f2f2;
}

.exp-hd-item.active {
    background-color: #fff;
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
}

.exp-hd-item {
    float: left;
}

.exp-hd-item a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 5px 20px;
    font-size: 14px;
}

.exp-bd {
    overflow: auto;
    background-color: #fff;
    height: 232px;
    width: 551px;
}

.exp_cont.active {
    display: block;
}

.exp_cont {
    display: none;
    overflow: hidden;
    margin: 15px 20px;
}

/*为空时显示 element attribute content*/
#clientMessageBox:empty:before {
    content: attr(placeholder);
    color: #c1c1c1
}


/* 历史消息展示*/
.chat-hisTop-container .avatar {
    width: 30px;
    height: 30px;
}

.chat-hisTop-container .lele-time {
    padding-left: 0;
!important;
    color: blue;
    font-weight: 600;
}

.chat-hisTop-container .me-time {
    padding-left: 0;
!important;
    text-align: left;
!important;
    color: #0cce15;
    font-weight: 600;
}

.chat-hisTop-container .avatar {
    display: none;
}

.chat-hisTop-container .message {
    padding: 10px 0;
}

.chat-hisTop-container .message pre {
    padding: 10px 0 0 0;
}

.chat-hisTop-container .likes .like {
    display: none;
}

.chat-hisTop-container .likes .step {
    display: none;
}

.message-card {
    background-color: #fafafa;
    max-width: 300px;
    border-radius: 5px;
    overflow: hidden;
}

.message-card .card-image img {
    width: 100%;
}

.message-card .card-content {
    padding: 10px;
    font-size: 14px;
}

.message-card .card-price {
    color: #C2392B;
    font-size: 1.5em;
    padding: 0;
}

.message-card .card-title {
    padding: 0;
    font-size: 1.2em;
    color: #333;
    font-weight: bolder;
}

.message-card .card-from {
    color: #999;
    padding: 0;
    font-size: 1em;
}

.message-imgtext {
    background: #fafafa;
    max-width: 300px;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px;
}

.message-imgtext .title {
    font-size: 1.2em;
    font-weight: bolder;
    color: #333;
    margin-bottom: 10px;
}

.message-imgtext .content {
    display: flex;
}

.message-imgtext .content .desc {
    flex: 1;
    margin-right: 10px;
    width: 0;
    color: #888;
    font-size: 1em
}

.message-imgtext .content img {
    width: 24%;
}

/** 点踩之后的显示界面 **/
.popdis {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -235px 0 0 -225px;
    padding: 20px;
    width: 450px;
    font-size: 14px;
    letter-spacing: 1px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    border: 1px solid #eee;
    color: #666;
}

.popdis img {
    margin: 4px 0 10px 24px;
}

.popdis .sorrytext {
    display: table-cell;
    height: 110px;
    margin-top: 4px;
    vertical-align: middle;
    line-height: 1.5;
}

.popdis [class^=but] {
    margin: 6px 0;
    width: 200px;
    height: 44px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    color: #bbb;
}

.popdis [class^=but]:hover,
.popdis [class^=but]:focus {
    border: 1px solid #6391eb;
    color: #6391eb;
}

.popdis [class^=but]:active {
    border: 1px solid #4b76ca;
    color: #3f6ac2;
}

.popdis .texttitle {
    margin: 20px 0 10px 0;
    color: #666;
}

.popdis textarea {
    margin-bottom: 20px;
    width: 410px;
    height: 80px;
    padding: 10px;
    overflow: auto;
    resize: none;
    border: 1px solid #eee;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.popdis textarea:hover,
.popdis textarea:focus,
.popdis textarea:active {
    border: 1px solid #91a3c7;
}

.popdis .cancel {
    width: 140px;
    height: 44px;
    line-height: 36px;
    text-align: center;
    letter-spacing: 1px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #6391eb;
    background: #fff;
    color: #6391eb;
}

.popdis .cancel:hover,
.popdis .cancel:focus {
    background: #e7f3ff;
}

.popdis .cancel:active {
    background: #cee7ff;
}

.popdis .submit {
    margin-bottom: 10px;
    margin-left: 5px;
    width: 140px;
    height: 44px;
    line-height: 36px;
    text-align: center;
    letter-spacing: 1px;
    font-size: 14px;
    border-radius: 4px;
    border: none;
    background: #6391eb;
    color: #fff;
}

.popdis .submit:hover,
.popdis .submit:focus {
    background: #7ea5f3;
}

.popdis .submit:active {
    background: #4c78cf;
}

.popdis .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 16px;
    height: 16px;
    border: none;
    background: url(https://prod-cconline.life.ehuatai.com/webchat/jsp/standard/resource/image/close.png)
}

.popdis .close:hover,
.popdis .close:focus {
    background-position: -16px;
}

.popdis .close:active {
    background-position: -32px;
}

.popdis .active {
    border: 1px solid rgb(99, 145, 235);
    color: rgb(99, 145, 235);
}

.voiceBox {
    display: none;
    height: 30px;
    position: absolute;
    width: 100%;
    top: -30px;
    background: #DFE7ED;
    line-height: 30px;
}

.voiceBox .voiceBtn {
    float: right;
    margin-right: 10px;
    border: 1px solid #929395;
    background: #EFEFEF;
    border-radius: 3px;
    padding: 2px 10px;
    margin-top: 4px;
}

.voiceBox span.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #74E523;
    display: inline-block;
    border: 1px solid #68D515;
    margin-right: 5px;
}
.voiceProgress {
    position: absolute;
    left: 0;
    background: #BFE9F9;
    width: 0;
    height: 30px;
    z-index: 0;
    top: 0;
}

.voiceBox .voiceInfo {
    position: absolute;
    left: 0;
    right: 0;
    padding-left: 20px;
}

.message-voice {
    height: 30px;
    padding: 0px;
    background: url('../image/voice-green.png');
    background-size: 30px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}
.message-voice.listened {
    background: url('../image/voice.png');
    background-size: 30px;
    background-repeat: no-repeat;
}
.message-voice.active{
    background: url('../image/voice.gif');
    background-size: 30px;
    background-repeat: no-repeat;
}
.message-voice:after {
    margin: 5px 0;
    display: block;
    content: attr(data-length);
    margin-left:100px;
}
.wechat-voice-recognition {
    margin-top: 5px;
}

.star-description {
    margin-left: 20px;
    font-size: 16px;
}
.queue-cancel {
    color: blue;
}

.serviceType {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 201;
}

.serviceType .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
}

.serviceType .serviceBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    background-color: #fff;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 3px 6px 7px 6px rgb(0 0 0 / 40%);
    box-sizing: border-box;
}

.serviceType .service-title {
    line-height: 60px;
    height: 60px;
    text-align: center;
    font-size: 18px;
    box-sizing: border-box;
    position: relative;
}

.serviceType .service-body {
    overflow: auto;
}

.serviceType .service-body .service-item {
    display: inline-block;
    width: 33.33%;
    text-align: center;
    float: left;
    box-sizing: border-box;
    padding: 10px 5px;
    cursor: pointer;
    line-height: 34px;
    position: relative;
    height: 125px;
}
.serviceType .service-body .service-item span {display: block;}
.serviceType .service-body .service-item:hover span {
    display: block;
    background: #012C5F;
    color: #fff;
}

.serviceType .service-body .service-item img {
    display: block;
    height: 60%;
    width: auto;
    margin: 0 auto 5px;
}

.message-orders {
    background: #fff;
}

.message-orders + .message-orders {
    margin-top: 10px;
}

.message-orders .order-head {
    line-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    padding: 0 20px;
    background-color: aliceblue;
}

.message-orders .orders-left {
    width: 103px;
    margin: 0 10px;
}

.message-orders .orders-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    text-align: left;
    padding-left: 10px;
}

.message-orders .orders-right .order-title {
    color: #333;
    line-height: 20px;
    margin-bottom: 10px;
}

.message-orders .order-container {
    display: flex;
    flex-direction: row;
    padding: 14px 0;
    border-bottom: 1px solid #dfdfdf;
}

.message-orders .order-content {
    line-height: 20px;
}

.message-orders .order-size {
    color: #666;
}

.message-orders .order-color {
    color: #666;
}

.message-orders .order-wrapper {
    color: #999;
}

.message-orders .order-price {
    color: #f00;
}

.message-orders .order-footer {
    line-height: 30px;
    padding: 0 20px;
    margin-top: 10px;
}

.message-orders .order-footer span {
    display: inline-block;
    background: #dcdcdc;
    padding: 0 20px;
    border-radius: 10px;
    float: right;
    color: #333;
}

.message-orders .order-footer .next {
    margin-left: 30px;
}

.orders-left > img.thumb {
    width: 100%;
}

.keys-space {
    width: 100%;
    top: -3.6em;
    height: 3.6em;
    background: #fff;
    align-items: center;
    padding: 0;
}

.keys-space ul {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    overflow-x: auto;
    padding: 5px;
}
.keys-space li {
    display: inline-block;
    margin-right: 6px;
    height: 2.6em;
    line-height: 2.6em;
    cursor: pointer;
    border: 1px solid #f8dda2;
    border-radius: 10px;
    padding: 0 10px;
}

.order-footer {
    line-height: 30px;
    padding: 0 20px;
    margin-top: 10px;
}

.order-footer span {
    display: inline-block;
    background: #dcdcdc;
    padding: 0 20px;
    border-radius: 10px;
    float: right;
    color: #333;
}

.order-footer .next {
    margin-left: 30px;
}

.order-footer .orders-button {
    cursor: pointer;
}

p.system-message {
    text-align: center;
    color: white;
    background-color: #c1c1c1;
    margin: 20px 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
}

/* 不满意原因弹出来的界面 */
.step-extend {
    text-align: center;
}

.step-reason {
    padding: 10px;
    margin: 5px;
}

.reason-title {
    margin: 10px 0px;
    padding: 5px 0 20px 0;
}

.reason-main {
    padding: 5px;
}

.reason-li {
    margin: 10px 0 0 0;
    padding: 5px 0 5px 0;
    border: solid;
    border-color: #b3daf5;
    border-radius: 5px;
}

.reason-li.active {
    background-color: #b2d9f4;
}

.typing-notice {
    display: inline-block;
    margin-left: 15px;
}

/*
    语音转文字
 */

.content-extend {
    margin-top: 15px;
    margin-left: 10px;
}

.robot-card {
    margin: 10px;
    width: 400px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.card-title {
    flex: 3;
    line-height: 40px;
}

.card-content {
    flex: 4;
    background-color: #F2F5FB;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}

.card-button {
    flex: 2;
}
.card-buttonItem{
    width: 20%;
    height: 50px;
    margin: 9px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
}
.card-button{
    display: flex;
}
.card-flex1{
    flex: 1;
}
.card-btnSure{
    border: 1px solid #E9ECEF;
    border-radius: 5px;
    margin: 10px;
    text-align: center;
    line-height: 40px;
}
.card-buttonItem.active {
    background-color: cornflowerblue;
}

/*音视频弹窗*/
#audionode {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.meeting {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    background-color: rgba(0,0,0,.26);
    display: none;
}

.meeting .caller {
    z-index: 1000;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.meeting .caller .audio {
    width: 360px;
    height: 200px;
    padding-top: 30px;
    margin: auto;
    position: relative;
    font-size: 14px;
    color: #111;
    border-radius: 6px;
    background: #fafafc;
    text-align: center;
    z-index: 0;
    overflow: hidden;
    box-shadow: 1px 1px 11px #c2c2c2;
}

.meeting .caller .audio .setCon {
    padding: 0 30px;
    background: #fafafc;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.meeting .caller .setCon .img {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 14px;
    overflow: hidden;
    background-image: linear-gradient(rgb(255, 203, 76), rgb(255, 197, 123));
}

.meeting .caller .setCon p:first-of-type {
    font-size: 16px;
    line-height: 26px;
    color: #333;
}

.meeting .caller .setCon p:nth-of-type(2) {
    font-size: 14px;
    line-height: 22px;
    color: #333;
    margin-bottom: 20px;
}

.meeting .caller .audio .btnGroup {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 0 30px;
}

.meeting .caller .audio .btnGroup svg {
    cursor: pointer;
    margin-right: 15px;
}

.meeting .caller .btnGroup .confirm {
    width: 130px;
    height: 36px;
    background-color: #da4a4a;
    border: 0;
    border-radius: 6px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.meeting .caller .video .title, .meeting .caller .video {
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    background: #fff;
}

.meeting .caller .video {
    width: 600px;
    margin: auto;
    font-size: 14px;
    color: #111;
    border-radius: 6px;
    z-index: 0;
}

.meeting .caller .video .title {
    width: 100%;
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    color: #222;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.meeting .caller .video .setCon {
    display: flex;
}

.meeting .caller .video .setCon .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 389px;
    height: 398px;
    background: linear-gradient(to top, #272727 0%, #929292 100%);
    border-radius: 0 0 0 6px;
}

.meeting .caller .video .setCon .left p {
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
    color: #fff;
}

.meeting .caller .video .setCon .left .waitAccept {
    text-align: center;
    margin-top: 78px;
}

.meeting .caller .video .setCon .left .waitVideo {
    width: 100%;
    height: 100%;
    display: none;
}

.meeting .caller .video .setCon video {
    width: 100%;
    height: 100%;
}

.meeting .caller .video .setCon .right {
    width: 1px;
    flex: 1;
    position: relative;
}

.meeting .caller .video .setCon .right .videoBox {
    width: 100%;
    height: 115px;
    background: linear-gradient(to top, #272727, #929292);
}

.meeting .caller .video .setCon .right .btnGroup {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 25px;
}

.meeting .caller .video .setCon .right .btnGroup .iconBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.meeting .caller .video .setCon .right .btnGroup svg {
    cursor: pointer;
}

.meeting .caller .btnGroup svg:hover path {
    fill: #0c9f7b;
}


.quickcard {
    padding: 10px 0;
    margin: 10px 0;
    border-radius: 5px;
}

.quickcard .content{
    width: 100%;
    height: 162px;
}
.quickcard .content .ul{
    width: 100%;
    height: 100%;
    display: flex;
}
.quickcard .li{
    width: 120px;
    height: 100%;
    padding: 10px;
    position: relative;
}
.quickcard .item{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    text-align: center;
}
.quickcard .topImg{
    overflow: hidden;
}
.quickcard .topImg img{
    width: 105px;
    height: 100%;
}
.quickcard .font{
    flex: 1;
    position: absolute;
    border-radius: 0 0 6px 6px;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    /* background: #6498F1; */
    color: #fff;
    text-align: center;
    white-space: nowrap;
    /* padding-top: 0.1rem; */
    font-size: 12px;
}

#minutesBlock {
    background-color: #ffe94c;
}

#secondsBlock {
    background-color: #2bad30;
}

.progress_seconds {
    display: inline-block;
    width: 250px;
    background: #B9E5BC;
}

.send-result {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}

.send-success {
    background-color: forestgreen;
}

.send-fail {
    text-align: center;
    line-height: 20px;
    border: 1px solid #C60A2D;
    color: #C60A2D;
    font-weight: 900;
}

.hide {
    display: none;
}
.content .change-batch{
    color: #2684D0;
    text-align: right;
    cursor: pointer;
}

.orientation {
    display: flex;
}

/** 模板消息 **/
.moban-message {
    font-size: larger;
    font-weight: 900;
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom-color: #f8f8f8ff;
    border-bottom-style: groove;
}

.moban-title {
    font-size: 14px;
    font-weight: 900;
    padding: 5px 0;
}

.moban-item-name {
    font-size: 12px;
    font-weight: 900;
    margin-top: 10px;
}

/** 手机号码校验 **/
.signIn-content{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.3);
}
.signIn-content input{
    background:none;
    outline:none;
    border:1px solid #ccc;
}
.signIn-content input:focus{
    border:none;
}
.signIn-content input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
}
/* 火狐浏览器样式清除 */
.signIn-content input[type="number"]{
    -moz-appearance:textfield;
}
.signIn-content .pop-close{
    position: absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 0px;
    font-size: 20px;
    font-weight: 700;
    color: black;
}
.signIn-content {
    display: none;
}
.signIn-content .signIn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 20px 40px;
    display: flex;
    background: #FFF;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 1px 4px 16px 2px rgb(0 0 0 / 40%);
}

.signIn-content .signIn > div {
    height: 40px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    position: relative;
}

.signIn-content .signIn .title {
    display: none;
    flex: 2;
    text-align: right;
}

.signIn-content .signIn .mobile-number input, .verification-image input {
    display: block;
    flex: 5;
    height: 40px;
    border: 1px solid #ccc;
    background-color: #FFF;
    padding-left: 10px;
}
.signIn-content .signIn .mobile-number input, .verification-image input:focus{
    border: 1px solid #E6C1C3;
}
.signIn-content .signIn .mobile-number input{width: 100%;background: #ECEEF0;border: 0 !important;}

.signIn-content .signIn .code {
    flex: 3;
    width: 100%;
    margin-right: 10px;
    background: #ECEEF0;
    border: 0;
    box-sizing: border-box;
}

.signIn-content .signIn .mobile-number {
    margin-top: 65px;
}

.signIn-content .signIn .imageCode {
    width: 125px;
}
.signIn-content .signIn .imageCode img{
    height: 100%
}
.signIn-content .signIn .mobileCode {
    display: flex;
    flex: 1;
    justify-content: space-between;
    text-align: left;
    height: 40px;
    /* border: 1px solid #ccc; */
}

.signIn-content .signIn .mobileCode .number {
    height: 40px;
    line-height: 40px;
    text-align: left;
    background: #ECEEF0;
    width: 0;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-right: 10px;
    border: 0;
    flex: 1;
}
.signIn-content .signIn .mobileCode .number:focus{
    border:1px solid #ECD9DB;
}
.signIn-content .signIn .mobileCode .number:focus-visible {
    outline: inherit;
}

.signIn-content .signIn .mobile-btn button.role {
    display: inline-block;
    width: 100px;
    height: 30px;
    border: none;
    background: #1A73E8;
    color: #fff;
}

.signIn-content .signIn .mobile-btn button.role:focus-visible {
    outline: inherit;
}
.signIn-content .imgCode-content{
    flex: 5;
    display: flex;
    height: 100%;
}
.signIn-content .input_content{
    flex: 5;
}
.signIn-content .count{
    line-height: 40px;
    width: 125px;
    text-align: center;
    background: #fff;
    border-radius: 7px;
    overflow: hidden;
}
.signIn-content .imgTest {color: #FFF;background: #6B9DFD;}

.signIn-content .signIn .mobile-btn{
    padding: 0 80px;
}
.signIn-content .signIn .mobile-btn div{
    width: 100%;
    height: 100%;
    line-height: 40px;
    background: #6B9DFD;
    color: #FFF;
    border-radius: 10px;
}
.signIn-content #mobile-numberMessage {
    position: absolute;
    left: 0;
    top: 42px;
    font-size: 12px;
    color: red;
}

.signIn-content #verification-imageMessage {
    position: absolute;
    left: 0;
    top: 42px;
    font-size: 12px;
    color: red;
}

.signIn-content #verification-codeMessage {
    position: absolute;
    left: 0;
    top: 42px;
    font-size: 12px;
    color: red;
}
.signIn-content .signIn .pop-close{
    position:absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 0px;
}

/*城市*/
.city-space{
    height: 100%;
    float: right;
}
.city-space >input{
    width: 60px;
    height: 30px;
    font-size: 16px;
    border:none;
    text-align: center;
    color: #FFF;
    background: rgba(0,0,0,0);
}

.city-space >input:focus-visible{
    outline: none;
}

.box-city{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99991;
    height: 100%;
    width: 100%;
    background-color:rgba(0,0,0,.3);
}
.box-city .input{
    font-size: 20px;
    position: absolute;
    width: 100px;
    height: 30px;
    top: 50%;
    text-align: center;
    left: 0;
    transform: translateY(-50%);
    color: black;
}
.box-city .input>input{
    width: 500px;
    height: 50px;
    font-size: 14px;
    border: none;
    padding:0 10px;
}
.box-city .select{
    position: absolute;
    width: 30%;
    max-width: 400px;
    min-width: 200px;
    /* height: 31%; */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: 10%;
    background: #FFF;
}
.box-city .select>ul{
    position: absolute;
    width: 100%;
    height: 77%;
    top: 45%;
    z-index: 999999;
    left: 0;
    transform: translateY(-50%);
    overflow: auto;
    display: flex;
    padding: 0 20px;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.box-city .select ul::-webkit-scrollbar{
    display: none;
}

.box-city .select>ul>li{
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
}

.box-city .select>ul>li{
    text-align: center;
    width: 60px;
}
.box-city .closePage{
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
}