﻿@charset "utf-8";
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  color:#b9bfc9;
}
input::-moz-placeholder,textarea::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color:#b9bfc9;
}
input:-moz-placeholder,textarea:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color:#b9bfc9;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color:#b9bfc9;
}
.nav{height: 36px;background:url(../images/whitebg.png) repeat;margin-bottom: 20px;}
.nav .cot{margin: 0 auto;width:1140px;position: relative;}
.nav a{color: #3C4353;display: inline-block;height: 36px; line-height: 36px;padding:0 10px;}
.nav a:hover,.nav .reg-login a:hover{color:#1AAAFD;}
.nav a i{display: inline-block;vertical-align: -2px;margin-right: 10px;width:16px;height: 16px;background: url(../images/index.png) no-repeat;}
.nav a.back-index:hover i {background-position:0 -16px;}
.chat-wrap{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background:url(../images/bodybg.png) repeat-x;}
.chat-content{width: 1140px; position: absolute;top: 60px;left: 50%;margin-left: -560px; bottom: 80px;background-color:#F6F8FA;
box-shadow: 0px -1px 16px 0px rgba(67, 154, 198, 0.11);border-radius: 16px;}
.chat-hd{height: 100px;background:#fff;position: relative;border-radius: 16px 16px 0 0;
box-shadow: 0px 0 20px 0px #f6fcff;z-index: 5;}
.chat-hd .cartoon{ position: absolute;right: 40px;height: 80px;width: 70px; background:url(../images/backboyimg.png) no-repeat;top: 0px;-webkit-animation: top 1.5s linear infinite;}
.chat-hd .textlogo{float: right;margin-right: 130px;font-size: 18px;color: #738CA2;height: 100px;line-height: 100px;font-family: PingFang-SC-Regular, PingFang-SC;}
.chat-hd .cartoonshadow{position: absolute;width: 36px;height: 8px;right: 58px;bottom: 0; background: url(../images/tybg.png) no-repeat;-webkit-animation: bottom 1.5s linear infinite;}
.chat-hd .logo{float: left;width:280px;height:60px;background:url(../images/logo.png) no-repeat;margin-left: 30px; margin-top: 20px;}
.chat-left{right: 440px;position: absolute;left: 0;top: 100px;bottom: 0;}
.chat-left .tips{background: #FFF9ED;padding: 15px;color: #FF6010;}
.chat-left .tips .icon-horn{width: 22px;height: 22px;float: left;background:url(../images/horn.png) no-repeat;}
.chat-left .tips p{margin-left: 35px;line-height: 22px;}
.chat-left .tips p+p{margin-top: 5px;}
.chat-left .chat-main{position: absolute;top: 125px;bottom: 170px;left: 0;right: 0;}
.chat-talkitem{margin:20px; zoom:1;font-size: 16px;position: relative;}
.chat-talkitem:first-child{margin-top: 30px;}
.chat-talkitem .chat-colmain{float:left; width:100%;}
.chat-talkitem .chat-mainwrap .chat-time{padding:8px 0 0 10px; color: #999; color: rgba(0,0,0,.5); font-size: 12px;}
.chat-talkl .chat-mainwrap{float:left; margin-left:50px;max-width: 70%; padding-left:10px;  _float:none; _padding-left:26px;}
.chat-talkr .chat-mainwrap{float:right; margin-right:50px; padding:0 10px 0 0; max-width:80%;}
.chat-talkitem .chat-msg{position:relative; padding:14px 20px;letter-spacing: 1px; min-height:20px;min-width: 50px;line-height: 22px;}
.chat-talkl .chat-msg{background: #fff;position: relative; color: #5a5c5f;box-shadow: 0px 1px 16px 0px rgba(56, 95, 163, 0.09);border-radius: 0px 22px 22px 22px;}
.chat-talkr .chat-msg{background: #1AAAFD; color: #fff;background: linear-gradient(90deg, #38D5FF 0%, #1AAAFD 100%);border-radius: 22px 0px 22px 22px;}
.chat-talkitem .chat-infotx{width:50px; height:50px; float: left;}
.chat-talkitem .chat-infotx img{width:100%; height:100%; border-radius:50%; display: block;}
.chat-talkr .chat-infotx{margin-left:-36px;position: absolute;right: 0;top: 0;}
.chat-talkl .chat-infotx{margin-left:-100%;}
.chat-talkitem.chat-time{text-align: center;margin:20px 0;}
.chat-talkitem.chat-time .time{display: inline-block; background:#ecf1f7;color: #fff;border-radius: 10px;padding: 5px 15px;font-size: 14px;max-width: 70%;line-height: 20px;}
.chat-talkitem.chat-time .time.tips-text{color: #899aa5;}
.chat-left .chat-ft{position: absolute;bottom: 0;left: 0;right: 0;height: 170px;padding: 0 30px;}
.chat-left .chat-ft .editor-box{border-radius: 8px;border:1px solid #35d0ff;background:#fff;height: 140px;}
.chat-left .chat-ft .editor-box .editor-area{border:0;height: 100px;padding:15px 20px;box-sizing: border-box;background:none;width: 100%;}
.chat-left .chat-ft .send-btn,.chat-left .chat-ft .end-btn{position: absolute; height: 34px;line-height: 34px;background: #F6F8FA;right: 45px;bottom: 45px;padding: 0 15px;border-radius: 8px;font-size: 16px;}
.chat-left .chat-ft .send-btn:hover{background: #1AAAFD;background: linear-gradient(90deg, #38D5FF 0%, #1AAAFD 100%);color: #fff;}
.chat-left .chat-ft .send-btn.disabled,.chat-left .chat-ft .send-btn.disabled:hover{cursor: not-allowed;color: #999;background:#F6F8FA;color: #c8d4de;}
.chat-right{width: 440px;position: absolute;top: 100px;bottom: 0;right: 0; background: linear-gradient(270deg, #FFFFFF 0%, #E9F6FF 100%);}
.chat-right .imgbg{width: 100%;height: 100%;background:#fff;border-radius: 1000px 0 0 1000px;}
.chat-right .girl-img{width: 390px;height: 460px;background:url(../images/girlimg.png) center no-repeat;position: absolute;top: 50%;margin-top: -230px;right: 10px;}
.chat-right .doubt-icon{position: absolute;width: 45px;height: 44px;background:url(../images/doubt-icon.png) no-repeat;top:200px;right: 50px;-webkit-animation: bubble 2s 1s linear infinite;}
.chat-right .bubble{position: absolute;}
.chat-right .bubble-icon1{width: 70px;height: 70px;background:url(../images/bubble1.png);left: 80px;top: 150px;
	-webkit-animation: bubble2 2s linear infinite;
}
.chat-right .bubble-icon2{width: 70px;height: 50px;background:url(../images/bubble2.png);left: 60px;top:80px;
	-webkit-animation: bubble2 2s .5s linear infinite;
}
.chat-right .bubble-icon3{width: 43px;height: 51px;background:url(../images/bubble3.png);left: 120px;top: -20px; }
.chat-btm{height: 50px; position: absolute;bottom: 0;left: 0;width: 100%;background:#ededed;text-align: center;line-height: 50px;color: #969797; }
.btn{display: inline-block;height: 24px;line-height: 24px;padding: 0 10px;background: #1AAAFD; background: linear-gradient(90deg, #38D5FF 0%, #1AAAFD 100%);border-radius: 3px;color: #fff;margin-left: 5px;}
.btn i{display: inline-block;width: 20px;height: 16px;background:url(../images/arrow.png) no-repeat;vertical-align: middle;margin-right: 5px;}
.btn:hover{opacity: .9;}
.btn-text{color: #1AAAFD;}
.btn-text .blue-arrow{display: inline-block;width: 14px;height: 14px;vertical-align: middle;margin-right: 5px;background:url(../images/blue-arrow.png) no-repeat;}
.btn-text:hover{font-weight: 600;}
/*评价*/
.star-box .star{display: inline-block;width: 30px;height: 30px;background:url(../images/star.png) no-repeat;margin:10px ;cursor: pointer;vertical-align: middle;}
.star-box .star.on{background-position:0 -30px;}
.pj-text{color: #FF6010;display: inline-block;text-align: center;vertical-align: middle;line-height: 30px;margin:10px 20px;}
/*排队*/
.sort-box{width: 350px;background:#fff;border-radius: 15px; margin:20px auto;padding: 15px;text-align: center;color: #454647;box-sizing: border-box;box-shadow: 0px 1px 10px 0px rgba(56, 95, 163, 0.09)}
.sort-box .sort-num{font-size: 30px;color: #FFB236;font-weight: 600;}
.sort-box .sub-text span{color: #999;}
/*图片消息*/
.chat-left .chat-ft .end-btn{right: 130px;position: absolute; height: 34px;line-height: 34px;bottom: 45px;padding: 0 15px;border-radius: 8px;font-size: 16px;    background: #1AAAFD;
    background: linear-gradient(90deg, #38D5FF 0%, #1AAAFD 100%);color: #fff;}
    .chat-left .chat-ft .end-btn:hover{opacity: .9;}
.chat-msg .img-box{width: 100%;margin:10px auto; }
.chat-msg .img-box img{width: 100%;}
/* 动画 */
@-webkit-keyframes top
{
	0%    {top:0;}
	50%  {top:-10px;}
	100%  {top:0;}
}
@-webkit-keyframes bottom
{
	0%    {bottom:11px;}
	50%  {bottom:5px;}
	100%  {bottom:11px;}
}
@-webkit-keyframes bubble
{
	0%    {transform:scale(0.9,0.9);opacity:.7;}
	50%  {transform:scale(1.2,1.2);opacity:1;}
	100%  {transform:scale(0.9,0.9);opacity:.7;}
}
@-webkit-keyframes bubble2
{
	0%    {transform:scale(0.8,0.8);opacity:.7;}
	50%  {transform:scale(1,1);opacity:1;}
	100%  {transform:scale(0.8,0.8);opacity:.7;}
}
