/**
 * yoyo页面
 */


/* yoyo main  start*/

.banner-fluid {
	margin-top: 80px;
	padding-left: 0;
	padding-right: 0;
}

.container-fluid .yoyo-banner {
	background: url(../img/banner-yoyo.jpg) no-repeat;
	background-size: cover;
	background-position: 50% 0;
	height: 450px;
}
.logo{
	width: 124px;
	height: 140px;
	margin-top: 50px;
}
.banner-fluid .banner-ct {
	padding-left: 60px;
	padding-right: 60px;
	text-align: center;
}
.banner-ct h1{
	font-weight: 600;
}
.banner-ct .yoyo-logo {
	width: 100px;
	height: 111px;
	margin-top: 40px;
}

.banner-ct p {
	font-weight: bold;
	font-size: 16px;
}

.feature-list .lists {
	display: block;
	padding-top: 40px;
	padding-bottom: 60px;
	text-align: center;
}

.feature-list .lists h4 {
	font-weight: 600;
}

.feature-list .lists h4,
.feature-list .lists p {
	color: #333;
}

.feature-list .lists h4 {
	font-size: 16px;
}

.feature-list .lists p {
	font-size: 13px;
}

.feature-list .lists .pic {
	display: inline-block;
	width: 70px;
	height: 70px;
	margin-bottom: 10px;
}

.lists .pic-1 {
	background-image: url(../img/yoyo-1.png);
}

.lists .pic-2 {
	background-image: url(../img/yoyo-2.png);
}

.lists .pic-3 {
	background-image: url(../img/yoyo-3.png);
}

.lists .pic-4 {
	background-image: url(../img/yoyo-4.png);
}

.list-1:hover .pic-1 {
	background-image: url(../img/yoyo-1-hover.png);
}

.list-2:hover .pic-2 {
	background-image: url(../img/yoyo-2-hover.png);
}

.list-3:hover .pic-3 {
	background-image: url(../img/yoyo-3-hover.png);
}

.list-4:hover .pic-4 {
	background-image: url(../img/yoyo-4-hover.png);
}

.chat-cont {
	padding-top: 70px;
	padding-bottom: 50px;
	background-color: #fafafa;
	text-align: center;
}

.iframe {
	max-width: 725px;
	margin: 0 auto;
}

.chat-cont .chat-box {
	width: 100%;
	height: 560px;
}
.form {
	padding: 30px;
	background-color: #efefef;
	overflow: hidden;
}

.form .input-group {
	display: block;
	margin-right: 135px;
}

.form #m {
	padding: 5px;
	border-radius: 40px;
}

.form .btn-primary {
	padding: 7px 25px;
	float: right;
	background-color: #0984f7;
	margin-left: 20px;
	border: none;
	border-radius: 40px;
}

.form .btn-primary .glyphicon {
	margin-right: 10px;
	font-size: 15px;
}

.wrap {
  	max-width: 720px;
	margin: 0 auto;
	box-shadow: 0px 0px 10px #E3E3E3;
}

#messages {
	padding-top: 50px;
}

.content {
	width: 40%;
}

#messages li:nth-child(odd) {
	background: #eee;
}

#chatwindow {
	position: relative;
	height: 460px;
	background-color: #FFFFFF;
	color: rgb(109, 109, 109);
	overflow-y: auto;
}

#messagesArea {
	max-height: 350px;
}

.chat-msg-line {
	width: 100%;
	margin-top: 10px;
}

.chat-msg-line .msg-container {
	margin-left: 10px;
	float: left;
	max-width: 60%;
}

.chat-msg-line .msg-container-self {
	margin-right: 10px;
	float: right;
}

.chat-msg-line .msg-container-self .msg-cont {
	background: #4e4f50;
	color: #fff;
}
.chat-msg-line .msg-name {
	display: block;
	color: #4e4e4e;
	text-align: left;
	padding: 0 10px 10px 0;
	float: left;
}

.bot {
	float: left;
}
.person{
	float: right;
}
.chat-msg-line .msg-name-right {
	display: block;
	color: #4e4e4e;
	text-align: left;
	padding: 0 10px 10px 0;
	float: right;
}

.chat-msg-line .msg-container-self .msg-name {
	text-align: right;
}

.chat-msg-line .msg-cont-wrap {
	margin-top: 25px;
	margin-left: 80px;
	position: relative;
	border-top-left-radius: 0px;
}
.chat-msg-line .msg-cont-wrap .msg-cont{
	border-top-left-radius: 0px;
}
.chat-msg-line .msg-cont-wrap:before {
	    content: "";
	    position: absolute;
	    top: 0px;
	    left: -15px;
	    width: 20px;
	    height: 30px;
	    background: #f3f3f3;
}
.chat-msg-line .msg-cont-wrap:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -20px;
    width: 20px;
    height: 31px;
    background: #fff;
    border-top-right-radius: 20px;
}

.chat-msg-line .msg-cont-wrap-right {
	    margin-top: 25px;
	    margin-right: 25px;
	    position: relative;
}
.chat-msg-line .msg-cont-wrap-right:before {
	    content: "";
	    position: absolute;
	    top: 0px;
	    right: -15px;
	    width: 20px;
	    height: 30px;
	    background: #4e4f50;
}
.chat-msg-line .msg-cont-wrap-right:after {
    content: "";
    position: absolute;
    top: -1px;
    right: -20px;
    width: 20px;
    height: 32px;
    background: #fff;
    border-top-left-radius: 20px;
}

.chat-msg-line .msg-cont {
	text-align: left;
	display: block;
	padding: 17px 16px;
	color: #313131; 
	border-radius: 10px 0 10px 10px;
	background: #f3f3f3;
	font-size: 14px;
}

.f-cb:before,
.f-cb:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.f-cb:after {
	clear: both;
}

.f-cb {
	*zoom: 1;
	w: auto;
}

/* yoyo main end*/

@media (max-width: 1000px) {
	.banner-fluid {
		margin-top: 50px;
	}
}