* {padding: 0;margin: 0;box-sizing: border-box;}
fieldset,img,input,button,textarea {border: 0;}
:focus {outline: 0;}

input,button,textarea,select,optgroup,option,.vc-chat-popup-mini-mode1, .vc-chat-popup-mini-mode2, .vc-chat-second-welcome, #vc-model, #vmModel{font-family: Arial, calibri, sans-serif;font-size: inherit;font-style: inherit;font-weight: inherit;}
@-webkit-keyframes dot_color {
    0% {opacity: 0.8;}
    50% {opacity: 0.4;}
    100% {opacity: 0.8;}
}

@keyframes dot_color {
    0% {opacity: 0.8;}
    50% {opacity: 0.4;}
    100% {opacity: 0.8;}
}

body {background: #f6f6f6;min-height: 100vh;}
/*默认展示第一个表单 */
#vc-model {
    /*height: 100px;*/
    transition: 0.33s ease;position: fixed;right: 1%;bottom: 2%;z-index: 9999990;line-height: normal;
}
.cookie-policy{z-index:999999!important;}
#vc-model .chat-box {background: #fff;overflow: hidden;position: relative;width: 323px;margin: 20px auto;box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);}
#vc-model .chat-title{background:#204ce3;height:80px;padding:0 20px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:left;-webkit-align-items:center;align-items:center;position:relative}
#vc-model .wlx3_whatapp{text-decoration:none;color:#fff}
#vc-model .chat-title .tit{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
#vc-model .chat-title .tit img{width:45px;height:45px;border-radius:50%}
#vc-model .chat-title .tit .t{margin-left:10px}
#vc-model .chat-title .tit .t h5{color:#fff;font-size:15px;font-weight:bold;font-family:Arial,sans-serif;line-height:normal;margin:0}
#vc-model .chat-title .tit .t span{color:rgba(255,255,255,0.6);margin:6px 0 0;font-size:14px;display:inline-block;font-family:Arial,sans-serif;line-height:normal}
#vc-model .chat-title .tit .t span::after{content:"";width:7px;height:7px;background:#36b70a;opacity:0.8;border-radius:50%;display:inline-block;margin-left:5px;-webkit-animation:dot_color 1.5s infinite linear;-ms-animation:dot_color 1.5s infinite linear}
#vc-model .chat-title .close{position:absolute;right:20px;top:25px;color:#fff;width:16px;height:16px}
#vc-model .chat-content{padding:35px 20px 20px}
#vc-model .chat-content2{padding:20px 20px}
#vc-model #chat-messages{height:215px;overflow-x:hidden;overflow-y:auto;position:relative}
#vc-model #chat-messages h6{font-size:17px;color:#c3bfc6;text-align:center;font-family:Arial,sans-serif}
#vc-model #chat-messages-inner > div{margin:15px 0 0;padding:15px;background:#f5f7fb;border-radius:0 15px 0 15px}
#vc-model #chat-messages-inner > div .msg{display:block;font-size:16px;color:#28305d;font-family:Arial,sans-serif}
#vc-model .chat-content .btns{margin:20px 0 0}
#vc-model .chat-content .btns button{width:100%;height:45px;line-height:45px;border-radius:7px;background:#f5f7fb;color:#111;font-size:17px;cursor:pointer;font-family:Arial,sans-serif}
#vc-model .chat-content .btns button.btn1{background:#36b70a;color:#fff}
#vc-model .chat-content .btns button.btn1,#vc-model .chat-content .btns button.btn2,#vc-model .chat-content p{opacity:0}
#vc-model .chat-content .btns button.btn1{animation:btn 1s linear 2s forwards}
#vc-model .chat-content .btns button.btn2{animation:btn 1s linear 2.5s forwards}
#vc-model .chat-content p{animation:btn 1s linear 2.8s forwards}

@keyframes btn {
    from {opacity: 0;transform: translateY(100%);}
    to {opacity: 1;transform: none;}
}

#vc-model .chat-content .btns button + button {margin-top: 10px;}
#vc-model .chat-content .form-chat .input-box ~ .input-box {margin-top: 20px;}
#vc-model .chat-content .form-chat input,
#vc-model .chat-content .form-chat textarea {display: block;width: 100%;padding: 10px 15px;box-sizing: border-box;border-radius: 6px;font-size: 15px;line-height: 22px;color: #555;background-color: #f5f7fb;border: none;transition: border linear 0.2s, box-shadow linear 0.2s;}
#vc-model .chat-content .form-chat .submit{margin:68px 0 0;width:100%;height:45px;line-height:45px;border-radius:7px;background:#36b70a;color:#fff;font-size:17px;cursor:pointer;font-family:Arial,sans-serif}
#vc-model .chat-history{padding:0 10px 0 0;overflow-y:scroll;overflow-x:hidden;height:300px}
#vc-model .chat-history::-webkit-scrollbar{width:5px !important}
#vc-model #chat-messages::-webkit-scrollbar{width:5px !important}
#vc-model .chat-history .message-data{margin-bottom:15px}
#vc-model .chat-history .message-data-time{color:#a8aab1;padding-left:6px}
#vc-model .chat-history .message-data i{width:8px;height:8px;border-radius:50%;display:inline-block;background:#86bb71}
#vc-model .chat-history .message{color:#fff;padding:12px 15px;line-height:22px;font-size:14px;border-radius:7px;margin-bottom:30px;width:90%;position:relative;display:flex;align-items:center}
#vc-model .chat-history .message .type-product {max-width: 80px;border-radius: 0;margin-right: 10px;}
#vc-model .chat-history .message .type-image {max-width: 210px;border-radius: 0;margin-right: 10px;}
#vc-model .chat-history .message .type-video {max-width: 210px;border-radius: 0;margin-right: 10px;}
#vc-model .chat-history .message:after{bottom:100%;left:20px;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-bottom-color:#86bb71;border-width:6px;margin-left:-6px}
#vc-model .chat-history .my-message{background:#86bb71}
#vc-model .chat-history .other-message{background:#94c2ed}
#vc-model .chat-history .other-message:after{border-bottom-color:#94c2ed;left:auto;right:20px}
#vc-model .chat-message-form{padding:15px 20px;background:#e8f2fa}
#vc-model .chat-message-form textarea{width:100%;padding:10px 10px;font-size:14px;margin-bottom:0px;border-radius:0 0 5px 5px;resize:none;background:#fff}
#vc-model .chat-message-form button.send-btn{color:#94c2ed;font-size:16px;text-transform:uppercase;cursor:pointer;font-weight:bold;background:#e8f2fa;display:inline-block;padding:10px 10px}
#vc-model .chat-message-form button.send-btn:hover{color:#75b1e8}
#vc-model .online,#vc-model .offline,#vc-model .me {margin-right: 3px;font-size: 10px;}
#vc-model .online {color: #86bb71;}
#vc-model .offline {color: #e38968;}
#vc-model .me {background: #94c2ed !important;}
#vc-model .align-left {text-align: left;}
#vc-model .align-right,#vc-model .text-right {text-align: right;}
#vc-model .float-right {float: right;}
#vc-model .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
#vc-model .clearfix img{border-radius:52px;overflow:hidden}
#vc-model .vc-warp .vc-inner{display:none}
#vc-model.active-one .vc-warp .vc-inner:nth-of-type(1){display:block}
.active-two{height:540px!important}
#vc-model.active-two .vc-warp .vc-inner:nth-of-type(2){display:block}
#vc-model.active-three .vc-warp .vc-inner:nth-of-type(3){display:block}
#vc-model.active-four .vc-warp .vc-inner:nth-of-type(3){display:block}
#vc-model.active-one .vc-warp .vc-inner:nth-of-type(1) .user-{animation:moveDown 1s ease-in-out forwards;opacity:0}
#vc-model.active-one .vc-warp .vc-inner:nth-of-type(1) #msg-2{animation-delay:0.5s}
#vc-model.active-two .vc-warp .vc-inner:nth-of-type(2){}
#vc-model.active-three .vc-warp .vc-inner:nth-of-type(3){animation:move 1s ease-in-out}
#vc-model.active-four .vc-warp .vc-inner:nth-of-type(3){animation:move 1s ease-in-out}
#vc-model .vc-warp{margin:0}
#vc-model .vc-content{display:flex;flex-direction:row}
#vc-model .vc-content .chat-title{display:none}

@keyframes moveDown {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes move {
    from {transform: translateX(100%);opacity: 0;}
    to {opacity: 1;transform: none;}
}
@keyframes moveOut {
    from {opacity: 1;}
    to {transform: translateX(0%);opacity: 0;transform: none;}
}

/*头像和文字的切换 */
.toggle-text{display:none}
#vc-model.show-left{left:1%}
#vc-model.show-left .toggle-text{display:block;padding:10px;border-radius:10px;box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);cursor:pointer;font-size:14px;font-family:Arial,sans-serif}
#vc-model.show-left .vc-title .toggle-head{justify-content:flex-start !important}
#vc-model.show-left .vc-title .toggle-head .left{right:auto;transform:translateY(-40%);left:20%;padding:0 0 0 20px}
#vc-model.show-left .chat-box{margin:0}
#vc-model .vc-title{user-select:none;display:none}
#vc-model .vc-title .toggle-head{width:400px;display:flex;justify-content:flex-end;position:relative}
#vc-model .vc-title .toggle-head .left,#vc-model .vc-title .toggle-head .right {cursor: pointer;}
#vc-model .vc-title .toggle-head .left{flex:0 0 80%;padding-right:30px;position:absolute;right:55px;bottom:0px;width:300px}
#vc-model .vc-title .toggle-head .left .move-text{padding:10px;margin:10px 0;border-radius:15px 15px 0 15px;box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);cursor:pointer;font-size:14px;animation:text 1s ease 2s 1 forwards;opacity:0;background-color:green;color:#fff;position:relative}
#vc-model .vc-title .toggle-head .left .move-text .close{width:25px;height:25px;border-radius:50%;background:#333;color:#fff;line-height:25px;text-align:center;position:absolute;right:-10px;top:-15px;font-size:13px;font-family:Verdana}
#vc-model.show-left .vc-title .toggle-head .left .move-text{border-radius:15px 15px 15px 0}

@keyframes text {
    from {opacity: 0;transform: translateY(100%);}
    to {opacity: 1;transform: none;}
}

#vc-model .vc-title .toggle-head .right{flex:0 0 20%;position:relative}
#vc-model .vc-title .toggle-head img{margin-left:auto;border-radius:50%;box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);width:100%}
#vc-model .vc-title .toggle-head .right .online{font-size:0;text-align:center;margin:5px 0 0}
#vc-model .vc-title .toggle-head .right .online em{width:5px;height:5px;background:rgba(54,183,10,1);opacity:0.8;border-radius:50%;display:inline-block;margin:0 2px;-webkit-animation:colors 2s infinite linear;-ms-animation:colors 1.5s infinite linear}
#vc-model .vc-title .toggle-head .right .online em:nth-child(2){animation-delay:0.5s}
#vc-model .vc-title .toggle-head .right .online em:last-child{animation-delay:1s}
#vc-model .vc-title .toggle-head .right span{background:#d22628;width:18px;height:18px;line-height:18px;border-radius:50%;display:block;text-align:center;position:absolute;right:0px;top:0px;color:#fff;font-size:12px;font-family:Verdana}

@keyframes colors {
    0% {opacity: 0.2;}
    50% {opacity: 1;}
    100% {opacity: 0.2;}
}

#vc-model .vc-content .chat-product-main{width:300px;margin:20px auto;background:#fff}
#vc-model .vc-content .chat-product-main .chat-product-head{display:flex;background-color:rgb(235,10,10);height:80px;padding:0 20px;align-items:center;justify-content:flex-end}
#vc-model .vc-content .chat-product-main .chat-product-head a{}
#vc-model .vc-content .chat-product-main .chat-product-list{display:flex;margin:10px 15px 10px;border-bottom:1px solid #eee;font-size:12px;align-items:center;flex-direction:row;padding-bottom:5px}
#vc-model .vc-content .chat-product-main .chat-product-list .chat-product-list-left img{width:45px;height:45px;margin-right:10px}
#vc-model .vc-content .chat-product-main .chat-product-list .chat-product-list-content{padding-bottom:10px}
#vc-model .vc-content .chat-product-main .chat-product-list .chat-product-list-btn{text-align:right;padding-left:15px}
#vc-model .vc-content .chat-product-main .chat-product-list .chat-product-list-btn button{display:inline-block;height:25px;line-height:25px;padding:0 10px;font-size:12px;border:1px solid #94c2ed;background-color:#94c2ed;color:#fff;white-space:nowrap;text-align:center;border-radius:2px;cursor:pointer}
#vc-model .vc-content .chat-product-main .chat-product-list .chat-product-list-btn input{display:inline-block;padding:0 10px;color:#fff;white-space:nowrap;text-align:center;cursor:pointer;right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid #d2d2d2;font-size:12px;border-radius:0px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}
#vc-model .vc-content .chat-product-main .chat-product-list .chat-product-list-btn button:hover{border-color:#009688}
.chat-box .chat-content #oneForm{height:calc(100% - 34px);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;animation:move 1s ease-in-out}
.chat-content > p{margin-top:15px;color:#999;font-size:14px;text-align:center;font-family:Arial,sans-serif;animation:move 1s ease-in-out 1s}
.chat-content > p a{color:#999;cursor:pointer}
.chat-input-text{position:relative;left:8px;bottom:162px;color:#a8aab1;display:none}
.chat-input-text-child{}
.chat-input-text-loading{display:inline-block;height:1em;line-height:1;text-align:left;vertical-align:-0.25em;overflow:hidden}
.chat-input-text-loading::before{display:block;content:"...\A..\A.";white-space:pre-wrap;animation:chat-input-text-loading 1s infinite step-start both}
#chat-product-main{z-index:999;width:323px;padding:10px;font-size:12px;background:#204ce3;overflow:hidden;position:absolute;border:1px solid #E8E8E8}
#chat-product-main .close{text-align:right}
#chat-product-main .close img{width:10px}
#chat-product-main .chat-product-title{background:#204ce3;padding:0 0 0 10px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;position:relative}
#chat-product-main .chat-product-title .tit{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
#chat-product-main .chat-product-title .tit img{width:50px;height:50px}
#chat-product-main .chat-product-title .tit .t{padding:0 10px}
#chat-product-main .chat-product-title .tit .t h5{color:#fff;font-size:13px;font-weight:100;line-height:18px;font-family:Arial,sans-serif}
#chat-product-main .chat-product-title .tit .t span{color:rgba(255,255,255,0.6);margin:6px 0 0;font-size:14px;display:inline-block;font-family:Arial,sans-serif}
#chat-product-main .chat-product-title .close{}
#chat-product-main .chat-product-title .close img{width:10px}
#chat-product-main .chat-product-footer{padding-top:5px;text-align:center}
#chat-product-main .chat-product-footer #chat-product-send-btn{color:#94c2ed;font-size:16px;cursor:pointer;font-weight:bold;background:#e8f2fa;display:inline-block;padding:3px 10px;border-radius:3px}

@keyframes chat-input-text-loading {
    33.3% {transform: translateY(-2em);}
    66.6% {transform: translateY(-1em);}
}

@media screen and (max-width: 500px) {
    #vc-model .vc-title .toggle-head {width: 100%;}
}
@media screen and (max-width: 480px) {
    #vc-model {
        /*height: 447px !important;*/
    }
    #vc-model .chat-box {width: 300px;margin: 0;}
    #vc-model .chat-title {height: 70px;padding: 0 15px;}
    #vc-model .chat-history {height: 220px;}
    #vc-model .chat-content2 {padding: 15px;}
    #vc-model .chat-message-form {padding: 15px;}
    #vc-model #chat-messages {height: 186px;}
    #vc-model .vc-title .toggle-head .right span {right: -4px;top: -15px;}
    /*手机端底部小窗口模式*/
    #vc-model.active-four, #vc-model.active-one, #vc-model.active-two {right: 0;bottom: 0;width: 100%;height: 460px;}
    #vc-model.active-four .vc-warp, #vc-model.active-one .vc-warp, #vc-model.active-two .vc-warp {width: 100% !important;;}
    #vc-model.active-four .chat-box, #vc-model.active-one .chat-box, #vc-model.active-two .chat-box {width: 100% !important;}
    .vc-chat-second-welcome {width: 100% !important;}
    #vc-model.active-two .vc-warp .vc-inner:nth-of-type(2) {height: 470px !important;}
}
.vc-model-dialog-content-main{position:fixed;z-index:9999990;top:0;left:0;z-index:19891014;background-color:rgb(0 0 0 / 35%);top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column-reverse;justify-content:center;align-items:center;animation:vc-model-right 0.4s ease-in-out}
@keyframes vc-model-right {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.2;
    }
    40% {
        opacity: 0.4;
    }
    60% {
        opacity: 0.6;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        /*transform: none;*/
    }
}
.vc-model-dialog-chat-box-width{width:450px !important;box-shadow:none !important}
.vc-model-dialog-close{display:none}
.vc-model-dialog-border{border-right:1px solid #eee}
.icon-second-welcome{color:#ff3333;width:1.6em !important;height:1.3em !important;vertical-align:-0.25em;fill:currentColor;overflow:hidden;border-radius:0;border-radius:inherit !important;box-shadow:0 3px 5px -1px rgb(0 0 0 / 0%),0 6px 10px 0 rgb(0 0 0 / 9%),0 1px 18px 0 rgb(0 0 0 / 12%) !important}
.chat-msg-numbers {animation: twinkle 0.7s infinite alternate;}
@keyframes twinkle {
    0% {opacity: 0.9;}
    30% {opacity: 0.7;}
    60% {opacity: 0.5;}
    100% {opacity: 0.3;}
}

/*小图标模式-1*/
.vc-chat-popup-mini-mode1{padding:15px 15px 15px 0;position:fixed;right:0;bottom:0;z-index:9999999}
.vc-chat-popup-mini-mode1 .vc-chat-popup-mini{}
.vc-chat-popup-mini-mode1 .vc-chat-popup-mini img{margin-left:auto;border-radius:50%;width:60px;height:60px;box-shadow:0 3px 5px -1px rgb(0 0 0 / 20%),0 6px 10px 0 rgb(0 0 0 / 14%),0 1px 18px 0 rgb(0 0 0 / 12%)}
.vc-chat-popup-mini-mode1 .vc-chat-popup-mini span{background:#d22628;width:18px;height:18px;line-height:18px;border-radius:50%;display:block;text-align:center;position:absolute;right:4px;top:0px;color:#fff;font-size:12px;font-family:Verdana}
.vc-chat-popup-mini-mode1 .vc-chat-popup-mini .online{font-size:0;text-align:center;margin:5px 0 0}
.vc-chat-popup-mini-mode1 .vc-chat-popup-mini .online em{width:5px;height:5px;background:rgba(54,183,10,1);opacity:0.8;border-radius:50%;display:inline-block;margin:0 2px;-webkit-animation:colors 2s infinite linear}
/*小图标模式-2*/
.vc-chat-popup-mini-mode2{width:100%;padding:15px 10px;box-shadow:0 3px 5px -1px rgb(0 0 0 / 20%),0 6px 10px 0 rgb(0 0 0 / 14%),0 1px 18px 0 rgb(0 0 0 / 12%);position:fixed;left:0;bottom:0;z-index:9999999;background:#fff}
.vc-chat-popup-mini-mode2-show{display:block !important;animation:fadeIn 1s ease-in-out}
.vc-chat-popup-mini-mode2-hide {
    /*display: none !important;*/
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
        opacity: 0; /*中间状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1; /*初始状态 透明度为0*/
    }
    50% {
        opacity: 0.5; /*中间状态 透明度为0*/
    }
    100% {
        opacity: 0; /*结尾状态 透明度为1*/
    }
}
.vc-chat-popup-mini-mode2 .vc-chat-popup-mini{display:flex;align-items:center;width:100%}
.vc-chat-popup-mini-mode2 .vc-chat-popup-mini-left{position:relative;width:150px}
.vc-chat-popup-mini-mode2 .vc-chat-popup-mini-left > img{width:60px!important;height:60px!important;border-radius:50%}
.vc-chat-popup-mini-mode2 .vc-chat-popup-mini-left span{background:red;width:18px;height:18px;line-height:18px;border-radius:50%;display:block;text-align:center;position:absolute;right:-6px;top:0px;color:#fff;font-size:12px;font-family:Verdana}
.vc-chat-popup-mini-mode2 .vc-chat-popup-mini-center{padding:0 20px}
.vc-chat-popup-mini-mode2 .vc-chat-popup-mini-right{width:200px}
.vc-chat-cus-btn{width:100%;height:26px;line-height:26px;border-radius:7px;background:#f5f7fb;color:#111;font-size:12px;cursor:pointer;font-family:Arial,sans-serif}
.vc-chat-popup-mini-mode2 .vc-chat-now-btn{background:#36b70a;color:#fff;width:70px}
.vc-chat-popup-mini-mode2 .vc-chat-price-btn{background:#0036ff;color:#fff;margin-top:10px;width:70px}

/*中间弹窗*/
.st-chat-product-dialog{font-size:18px}
.st-chat-product-dialog img{vertical-align:middle}
.st-chat-product-dialog button{height:22px;line-height:22px;border-radius:4px;font-size:12px;cursor:pointer;background:#36b70a;color:#fff;padding:0 10px}
.vc-chat-second-welcome{padding:15px 98px 15px 10px;position:fixed;right:0;bottom:0;z-index:9999990;width:400px}
.vc-chat-second-welcome > .move-text{padding:10px;margin:10px 0 0 0;border-radius:15px 15px 0 15px;box-shadow:0 3px 5px -1px rgb(0 0 0 / 20%),0 6px 10px 0 rgb(0 0 0 / 14%),0 1px 18px 0 rgb(0 0 0 / 12%);cursor:pointer;font-size:14px;animation:text 1s ease 2s 1 forwards;opacity:0;background-color:green;color:#fff;word-wrap:break-word}
.vc-chat-second-welcome > .move-text > .close{width:25px;height:25px;border-radius:50%;background:#333;color:#fff;line-height:25px;text-align:center;position:absolute;right:-10px;top:-15px;font-size:13px;font-family:Verdana}
.underline{text-decoration:underline;cursor:pointer}