@charset "utf-8";
/* CSS Document */
* {margin:0; padding:0;}
body{font-family:'微软雅黑';font-size:16px; color:#555; background:#e8eff6;padding-top:7px; }
img {border:0; clear:both;}
ul {list-style:none;}
a,a:focus {text-decoration:none; outline:none;}
input,select,textarea {outline:none;}
.clearfix:after{content:"";height:0; line-height:0;  display:block; clear:both; visibility:hidden;}
.clearfix{zoom:1;}

.content{ width:72%; margin:0 auto; min-width:710px;}
.menu_list_name{ font-size:24px; height:78px; line-height:78px; color:#fff; border:1px solid #d9e5f1; background:#49f;}
.menu_list_name b{ display:inline-block; width:67px; height:67px; margin:0 20px 10px 16px; background:url(../pic/icons.png) no-repeat;
    background-position:-448px -117px; vertical-align:middle;}
.menu_list_name span{ font-size:16px; margin-left:4px;}
/*谈话*/
.main_box{ background:#e8eff6; margin-top:8px;  font-size:14px; text-align:center;}
/*左边*/
.talk_box{ float:left; box-sizing:border-box; min-height:480px; background:#fff; width:78%;border:1px solid #d9e5f1;}
.talk_box p{ line-height:26px;}
.see_chat_history{ color:#49f; cursor:pointer;padding-top: 30px;}
.date{ font-size:12px; color:#999;}
.conversation{ padding-bottom:20px;}
.conversation_top{ min-height:280px; max-height:330px; overflow-y:auto;}
.conversation dl{ padding:0 2.85% 2% 2.85%;}
.conversation dt{ float:left; width:64px; height:64px; margin-right:16px;  background:url(../pic/icons.png) no-repeat; background-position:-523px -116px; vertical-align:middle; }
.conversation dd{ float:left;word-break: break-all; position:relative; max-width:60%; padding:18px; border-radius:10px; font-size:14px;  background:#f7f7f7; text-align:left;}
.conversation .server{ clear:both; width:80%;}
.conversation .server dd:after {position: absolute;display: inline-block; border-top: 6px solid transparent;border-right: 6px solid #f7f7f7;
    border-bottom: 6px solid transparent;left: -6px;top: 21px;content: '';}
.conversation .customer{ float:right; width:80%;}
.conversation .customer dt{ float:right; margin-right:0; margin-left:16px;}
.conversation .customer dd{ float:right; background:#e5f3ff; color:#555;}
.conversation .customer dd:after{position: absolute;display: inline-block;width: 0;height: 0;border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid #e5f3ff;
    right:-6px; top: 21px;content: '';}
.tool_box{ height:40px; text-align:left; border-bottom:1px solid #e5e5e5; background:#f7f7f7; padding:0 18px;}
.tool_box div{ float:left; width:25px; height:25px;  background:url(../pic/icons.png) no-repeat; margin-top:8px; margin-right:18px; cursor:pointer;}
.tool_box .elong_box{ float:right; width:210px; height:auto; background:none; margin-top:0; margin-right:0;}
.tool_box .elong_app,.tool_box .elong_public{ position:relative; float:left; background-image:none; width:101px; margin-right:0;}
/*APP公众号弹窗*/
.tool_box b{ position:absolute; left:0; top:32px; width:220px; height:93px;
    background-image:url(../pic/icons.png);
    border:1px solid #d0d0d0; background-color:#fff; box-shadow:2px 3px 10px #d0d0d0; z-index:99; display:none;}

.tool_box .elong_app_img{ width:219px; height:95px; background-position:-370px -218px;}
.tool_box .elong_public_img{ background-position:-370px -318px;}
.tool_box div span{ display:inline-block; width:20px; height:20px; background:url(../pic/icons.png) no-repeat; vertical-align:middle; margin-right:4px;}
.tool_box .image{ background-position:-73px -367px ;}
.tool_box .screenshot{ background-position: -101px -367px ;}
.tool_box .satisfaction{position:relative; width:200px; background:none; margin-top:0;}
.tool_box .satisfaction .satisfaction_det { width:200px; background:none;}
.tool_box .satisfaction .satisfaction_det span{ width:25px; height:25px; background-position:-129px -367px ;}
/*满意度弹窗*/
.tool_box .satisfaction_degree{ position:absolute; left:50px; top:-110px; float:none; background-image:none; width:318px; height:498px;  border-radius:2px;margin-top: 0;
    margin-right: 0; background-color:#fff; border:1px solid #d0d0d0;box-shadow:2px 3px 10px #d0d0d0; z-index:99; cursor:auto;}
.tool_box .satisfaction_degree p{ font-size:18px; text-align:center; height:39px; line-height:40px; border-bottom:1px solid #d0d0d0; margin-bottom:0; background:#f8f8f8; margin-top:0;}
.tool_box .satisfaction_degree .degree{ height:131px; border-bottom:1px solid #d0d0d0; text-align:center; padding-left:0; margin:0; }
.tool_box .satisfaction_degree .degree li{ float:left; box-sizing:border-box; width:33.3%;  cursor:pointer;}
.tool_box .satisfaction_degree .degree li dl{ width:100%; margin:34px 0 0 0 ;}
.tool_box .satisfaction_degree .degree dt{ width:30px; height:30px; background:url(../pic/icons.png) no-repeat; margin:0 auto; margin-bottom:10px;}
.tool_box .satisfaction_degree .degree .satisfied dt{ background-position:-160px -359px;}
.tool_box .satisfaction_degree .degree .satisfied dd{ margin-left:0;}
.tool_box .satisfaction_degree .degree .noninductive dt{ background-position:-195px -359px;}
.tool_box .satisfaction_degree .degree .noninductive dd{ margin-left:0;}
.tool_box .satisfaction_degree .degree .sad dt{ background-position:-230px -359px;}
.tool_box .satisfaction_degree .degree .sad dd{ margin-left:0;}
.tool_box .satisfaction_degree .degree .satisfied_active dt{ background-position:-160px -391px;}
.tool_box .satisfaction_degree .degree .satisfied_active dd{ margin-left:0;}
.tool_box .satisfaction_degree .degree .noninductive_active dt{ background-position:-195px -391px;}
.tool_box .satisfaction_degree .degree .noninductive_active dd{ margin-left:0;}
.tool_box .satisfaction_degree .degree .sad_active dt{ background-position:-230px -391px;}
.tool_box .satisfaction_degree .degree .sad_active dd{ margin-left:0;}
.tool_box .satisfaction_degree .degree .satisfied:active dt{ background-position:-160px -391px;}
.tool_box .satisfaction_degree .degree .noninductive:active dt{ background-position:-195px -391px;}
.tool_box .satisfaction_degree .degree .sad:active dt{ background-position:-230px -391px;}

.tool_box .reason{ padding:0 20px;}
.tool_box .reason li{ height:36px; line-height:36px; cursor:pointer;}
.tool_box .reason input{ vertical-align:middle; margin-right:4px;}
.tool_box .write_qus,.tool_box .btn{height:auto !important; line-height:none !important; border-bottom:none !important; background:none !important;}
.tool_box .write_qus{ padding: 10px 22px 24px;}
.tool_box .write_qus textarea{ resize:none; width:252px; height:70px; padding:0 10px; line-height:20px; border:1px solid #d0d0d0; color:#555;}
.tool_box .btn span{ display:inline-block; height:30px; width:120px; line-height:30px; color:#fff; background:#49f; border-radius:3px; cursor:pointer;}
.tool_box .btn span:hover{ background:#37d;}


.tool_box .elong_app span{ background-position:-295px -380px ;}
.tool_box .elong_public span{ background-position:-269px -380px ;}

.tool_box .image:active{ background-position:-73px -394px ;}
.tool_box .screenshot:active{ background-position:-101px -394px ;}
.tool_box .satisfaction .satisfaction_det span:active{ background-position:-129px -394px ;}
.tool_box .elong_app:active span{ background-position:-295px -358px ;}
.tool_box .elong_public:active span{ background-position:-269px -358px ;}
.tool_box .elong_app:active b,.tool_box .elong_public:active b{ display:block;}
.tool_box .elong_app:hover b,.tool_box .elong_public:hover b{ display:block;}


.input_box textarea{ box-sizing:border-box; height:89px; width:100%; resize:none; border:none; padding:20px;}
.send_box{ color:#999; text-align:right; background:#f7f7f7; padding:16px 24px 15px 0;}
.send_box span{ display:inline-block; text-align:center; color:#555; width:88px; height:28px; border:1px solid #b2b2b2; line-height:28px; border-radius:3px; cursor:pointer;}
.send_box .end_session{ margin:0 19px 0 15px; }


.send_box .send{ position:relative; display:inline-block; text-align:left; text-indent:30px; width:88px;border:1px solid #b2b2b2;border-radius:3px;}
/*.send_box .send b{position:absolute; right:0; top:0; display:inline-block; width:25px; height:28px; border-left:1px solid #b2b2b2;}
.send_box .send b:after{
    position: absolute;
    display: inline-block;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #b2b2b2;
    left: 5px;
    top: 12px;
    content: '';
}*/
.send_box span:hover{ color:#49f; border:1px solid #49f;}
.send_box span:hover .send_tip{ color:#555;}
.send_box span:hover b{ border-left:1px solid #49f;}
.send_box span:hover b:after{border-top: 8px solid #49f;}
.send_tip{  position:absolute; left:-90px; top:40px;display:none; width:236px; text-indent:0; font-style:normal; font-weight:normal; padding:10px 12px; line-height:18px; border:1px solid #d0d0d0; background:#fff; box-shadow:2px 3px 10px #d0d0d0;}
.send_box .send:hover .send_tip{ color:#555; display:block;}


/*右边自助*/
.self_help_box{ min-height:503px; float:right; background:#fff; height:100%; box-sizing:border-box; width:20%; border:1px solid #d9e5f1; text-align:left; font-size:12px;}
.self_help_box .self_title{ background:url(../pic/icons.png) no-repeat; background-position:0 -306px; line-height:49px; color:#49f; font-size:18px; text-align:center;}
.self_help_list { padding-left: 16px; padding-right:4px; padding-bottom:20px;}
.self_help_list li{ color:#49f; line-height:24px; cursor:pointer;}
.self_help_list li:hover{ color:#555;}
.self_help_list .list_title{font-size:16px; color:#555; margin:20px 0 6px 0; line-height:none; cursor:auto;}
.self_help_list .list_title:hover{ color:#555;}
.self_help_list .list_title span{ display:inline-block; background:url(../pic/icons.png); vertical-align:middle; margin-right:4px;}
.self_help_list .list_title .psw{ width:12px; height:15px; background-position:-8px -378px ;}
.self_help_list .list_title .account{ width:15px; height:15px; background-position:-32px -372px;}
.self_help_list .list_title .order{ width:13px; height:15px; background-position:-58px -377px;}
.self_help_list .last{ padding-bottom:20px; border-bottom:1px solid #eee;}