﻿
/*main-title*/

.main-title {

	overflow: hidden;

	border-bottom: 1px solid #e9e9e9;

	margin-bottom: 30px;

	padding-bottom: 15px;

	padding-top: 54px;

}

.main-title b {

	font-size: 30px;

	color: #2f2f2f;

	border-bottom: 1px solid #00bb83;

	padding-bottom: 15px;

}

.main-title small {

	font-size: 14px;

	color: #8c8c8c;

	padding-left: 10px;

	display: inline-block;

}

.main-title a {

	float: right;

	width: 120px;

	line-height: 37px;

	text-align: center;

	border: 1px solid #c9c9c9;

	border-radius: 20px;

	display: block;

	font-size: 12px;

	margin-top: 2px;

	transition: 300ms ease;

	-webkit-transition: 300ms ease;

}

.main-title a:hover {

	background: #00bb83;

	color: #fff;

	border: 1px solid #00bb83;

}


/*news*/

.news {

	background: url("../images/cbg.jpg") center;

	padding: 60px 0;

}

.news h4 {

	text-align: center;

	margin-bottom: 70px;

}

.news h4 small {

	font-size: 22px;

	color: #323232;

	display: block;

	margin-bottom: 5px;

}

.news h4 span {

	font-size: 50px;

	color: #5e1b6b;

	display: block;

}

.news h4 b {

	font-size: 38px;

	color: #2f2f2f;

	font-weight: 400;

	margin-top: 10px;

	display: block;

}

.news ul {

	overflow: hidden;

}

.news ul li {

	margin-bottom: 15px;

}

.news ul li:nth-of-type(1) p span {

	background: #00bb83;

}

.news ul li:nth-of-type(2) p span {

	background: #d62745;

}

.news ul li:nth-of-type(3) p span {

	background: #006bb2;

}

.news ul li p {

	position: relative;

	width: 100%;

	height: 100%;

	overflow: hidden;

}

.news ul li p span {

	position: absolute;

	top: 28px;

	left: -33px;

	height: 20px;

	line-height: 20px;

	text-align: center;

	color: #fff;

	width: 140px;

	transform: rotateZ(-45deg);

}

.news ul li div {

	background: #f6f6f6;

	border: 1px solid #c9c9c9;

	border-top: 0;

	padding: 15px 20px;

}

.news ul li div span {

	display: block;

	font-size: 16px;

	color: #1f1f1f;

	transition: 300ms ease;

	-webkit-transition: 300ms ease;

}

.news ul li div small {

	font-size: 14px;

	color: #a9a9a9;

}

.news ul li:nth-of-type(1) div span {

	color: #00bb83;

}

.news ul li:nth-of-type(2) div span {

	color: #d62745;

}

.news ul li:nth-of-type(3) div span {

	color: #006bb2;

}

.news .container > a {

	margin: 20px auto;

	width: 120px;

	line-height: 37px;

	text-align: center;

	border: 1px solid #c9c9c9;

	border-radius: 20px;

	display: block;

	font-size: 12px;

	transition: 300ms ease;

	-webkit-transition: 300ms ease;

}

.news .container > a:hover {

	background: #5E1B6B;

	color: #fff;

	border: 1px solid #5E1B6B;

}


/*friends*/

.friend {

	margin-bottom: 50px;

}

.friend .main-title a {

	background: #5E1B6B;

	color: #fff;

	border: 1px solid #5E1B6B;

}

.friend .main-title a:hover {

	border: 1px solid #c9c9c9;

	color: #333;

	background: none;

}

.friend .friend-left {

	padding: 0;

}

.friend .friend-left img {

	width: 100%;

}

.friend .friend-right {

	border: 1px solid #e5e5e5;

	position: relative;

}

.friend .friend-right .friend-list {

padding-top:50px;

	top: 50%;

	transform: translateY(-50%);

	left: 0;

	width: 100%;

}

.friend .friend-right .friend-list li {

	margin-bottom:40px;

	padding: 0 10px;

}

.friend-ol {

	position: absolute;

	left: 50%;

	bottom: 12px;

	margin-left: -20px;

}

.friend-ol li {

	width: 10px;

	height: 10px;

	background: #7B7B7B;

	border-radius: 50%;

	margin: 0 5px;

	float: left;

}

.friend-ol li.li_active {

	background: #5E1B6B;

}
