.complaint-box{ width:100%; margin:0 auto; clear: both;}
.complaint-box .head { width:100%; margin: 0 auto;}
.complaint-box .head h1 { width:92%; height:40px; margin:20px auto; margin-bottom:0; font-size:22px; color:#000; display: flex; flex-direction: row; align-items: center; justify-content: left; }
.complaint-box .head p { width:92%; margin:0 auto; line-height:22px; margin-bottom:0; font-size:15px; color:#999;}

.complaint-box .content { width:100%; height:150px; margin: 10px auto; margin-bottom:0; padding-bottom:10px; background:#FFF;}
.complaint-box .content h4{ width:92%; height:40px; margin:0 auto; margin-bottom:0; padding-top:10px; font-size:16px; color:#000; display: flex; flex-direction: row; align-items: center; justify-content: left; }
.complaint-box .content .textarea { width:92%; height:90px; margin:0 auto; margin-bottom:0; font-size:16px;}
.complaint-box .content .textarea textarea { width:100%; height:90px; border:none; padding:5px 0 0 0;}
.complaint-box .content .textarea textarea::-webkit-input-placeholder { font-size:15px; color:#999; font-weight:normal;}

.complaint-box .upload { width:100%; margin: 10px auto; margin-bottom:0; padding-bottom:10px; background:#FFF;}
.complaint-box .upload h4{ width:92%; height:40px; margin:0 auto; margin-bottom:0; padding-top:10px; font-size:16px; color:#000; display: flex; flex-direction: row; align-items: center; justify-content: left; }
.complaint-box .upload h4 i { font-size:15px; color:#999; padding-left:10px; font-weight:normal;}
.complaint-box .upload .text { width:92%; margin:0 auto; line-height:22px; margin-bottom:0; font-size:15px; color:#999;}

.complaint-box .upload .image { width:92%; margin:10px auto; margin-bottom:0;}
.complaint-box .upload .image .preview { float:left;}
.complaint-box .upload .image .preview .thumb { width:90px; height:90px; display:block; float:left; margin-right:10px; position:relative;}
.complaint-box .upload .image .preview .thumb img { width:90px; height:90px; position:absolute; top:0; left:0;}
.complaint-box .upload .image .preview .thumb i { width:20px; height:20px; display:block; position:absolute; top:-5px; right:-5px; z-index:2; border-radius:20px; background:#FFF url(image/reset.png) center center no-repeat; background-size: auto 20px;}

.complaint-box .upload .image .preload { width:90px; height:90px; float:left; position:relative; cursor:pointer;}
.complaint-box .upload .image .preload:after{content: ''; position: absolute; top: 0; left: 0; z-index:1; border:2px #e4e4e4 solid; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; z-index:1; border-radius:9px;}
.complaint-box .upload .image .preload i.icon{ width:90%; height:30px; display:block; margin:15px auto; margin-bottom:0; background:url(image/camera-black.png) center center no-repeat; background-size: auto 30px;}
.complaint-box .upload .image .preload i.text{ width:90%; height:20px; display:block; margin:10px auto; margin-bottom:0; text-align:center; font-size:13px; color:#999;}

.complaint-box .number { width:100%; height:50px; position:relative; margin: 10px auto; margin-bottom:0; background:#FFF;}
.complaint-box .number h4 { width:26%; height:50px; position:absolute; top:0; left:4%;  font-size:16px; color:#000; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.complaint-box .number .input { width:66%; height:50px; position:absolute; top:0; right:4%;}
.complaint-box .number .input input {width:100%; height:40px; line-height:40px; position:absolute; top:5px; left:0; z-index:5; margin:0; padding:0; border:none; font-size:16px; color:#000;}
.complaint-box .number .input input::-webkit-input-placeholder { font-size:15px; color:#999; font-weight:normal;}

.complaint-box .phone  { width:100%; height:50px; position:relative; margin: 10px auto; margin-bottom:0; background:#FFF;}
.complaint-box .phone h4 { width:26%; height:50px; position:absolute; top:0; left:4%;  font-size:16px; color:#000; display: flex; flex-direction: row; align-items: center; justify-content: left;}
.complaint-box .phone .input { width:66%; height:50px; position:absolute; top:0; right:4%;}
.complaint-box .phone .input input {width:100%; height:40px; line-height:40px; position:absolute; top:5px; left:0; z-index:5; margin:0; padding:0; border:none; font-size:16px; color:#000;}
.complaint-box .phone .input input::-webkit-input-placeholder { font-size:15px; color:#999; font-weight:normal;}


.complaint-box .button { width:92%; margin:20px auto; margin-bottom:0;}
.complaint-box .button .primary { width:100%; height:50px; margin:0 auto; background:linear-gradient(to right, #25d177, #07C160); border:1px #06af57 solid; color:#FFF; font-size:18px; border-radius:6px; font-weight:bold; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.complaint-box .button .default { width:100%; height:50px; margin:10px auto; margin-bottom:0; background:#FFF; border:1px #E5E5E5 solid; font-size:18px; color:#555; border-radius:6px; display: flex; flex-direction: row; align-items: center; justify-content: center;}


.kefu-box { width:100%; margin:0 auto; clear: both;}
.kefu-box .head { width:94%; height:90px; margin:10px auto; margin-bottom:0; background:#07C160; position:relative; border-radius:9px 9px 0 0;}
.kefu-box .head .number { width:50%; height:20px; line-height:20px; position:absolute; top:18px; left:5%; z-index:1; font-size:20px; font-weight:bold; color:#FFF; display: -webkit-box;  word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp:1;}
.kefu-box .head .text { width:60%; line-height:18px; position:absolute; top:45px; left:5%; z-index:1; font-size:14px; color:#FFF; display: -webkit-box;  word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp:2;}
.kefu-box .head .btn { width:110px; height:36px; line-height:36px; position:absolute; top:27px; right:10px; z-index:5; background:#FFF000; color:#663300; border-radius:30px; font-size:15px; text-align:center; font-weight:bold;}
.kefu-box .card { width:94%; margin:0 auto; margin-bottom:0; padding:20px 0 ; background:#FFF; border-radius:0 0 9px 9px;}
.kefu-box .card h4 { width:100%; height:20px; line-height:20px; margin:0 auto; text-align:center; font-size:20px; color:#000;}
.kefu-box .card .image {width:100%; height:200px; margin:0 auto; padding-top:20px;}
.kefu-box .card img { width:200px; height:200px; margin:0 auto;}
.kefu-box .card .desc { width:90%; line-height:20px; margin:10px auto; margin-bottom:0; text-align:center; font-size:15px;}
.kefu-box .card .worktime { width:90%; line-height:20px; margin:10px auto; margin-bottom:0; text-align:center; font-size:15px; color:#FF3300;}
.kefu-box .button { width:94%; height:50px; line-height:50px; text-align:center; font-size:16px; color:#555; margin:10px auto; margin-bottom:0; border-radius:5px; background:#FFF;}
.kefu-box .card-no-data { width:94%; margin:10px auto; margin-bottom:0; background:#FFF; border-radius:9px;}

.kefu-box .service { width:94%; margin:10px auto; margin-bottom:0; padding:20px 0 ; background:#FFF; border-radius:9px;}
.kefu-box .service h4 { width:100%; height:20px; line-height:20px; margin:0 auto; text-align:center; font-size:20px; color:#000;}
.kefu-box .service .image {width:100%; height:200px; margin:0 auto; padding-top:20px;}
.kefu-box .service img { width:200px; height:200px; margin:0 auto;}
.kefu-box .service .desc { width:90%; line-height:20px; margin:10px auto; margin-bottom:0; text-align:center; font-size:15px;}
.kefu-box .service .telphone { width:90%; line-height:20px; margin:10px auto; margin-bottom:0; text-align:center; font-size:15px;}
.kefu-box .service .worktime { width:90%; line-height:20px; margin:10px auto; margin-bottom:0; text-align:center; font-size:15px; color:#FF3300;}