/* 英文默认字体 */

@font-face {
	font-family: openSans;
	src: url('../fonts/OPEN-SANS-2.woff2')
}

* {
	font-family: 微软雅黑, Arial, Helvetica, sans-serif;
}

html,
body {
	font-size: 16px;
	background-color: #f6f6f6;
}

body,
div,
a,
li,
ul,
ol,
dl,
img,
span,
input {
	padding: 0px;
	margin: 0px;
	list-style: none;
	border: 0px;
}

a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #000;
}

a:hover {
	text-decoration: none;
	color: #000;
}

a:active {
	text-decoration: none;
	color: #000;
}

/* 外边距和后台一致 */

p {
	margin: 5px 0;
}

ul {
	list-style-type: none;
}

img {
	max-width: 100%;
}

.clear {
	clear: both;
}

.f-l {
	float: left;
}

.f-r {
	float: right;
}

.after:after {
	content: '';
	display: block;
	clear: both;
}

.mr-0 {
	margin-right: 0px !important;
}

.this-1200 {
	margin: 0 auto;
	width: 1200px;
}

.this-400 {
	margin: 0 20px;
	width: calc(100% - 40px);
}

/* 表格初始化 */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td {
	border: 1px solid #eee;
	padding: 7px;
	font-size: 14px;
}

.o-v {
	overflow-y: hidden;
}

/* 头部 */
#header {
	background-color: #0379b9;
	position: fixed;
	bottom: 0;
	text-align: center;
	width: 100%;
	padding: 16px 0;
}

#nav li {
	width: 25%;
	float: left;
}

#nav li a:hover span,
#nav li a.active {
	color: #fff;
}

#nav a {
	font-size: 12px;
	color: #fff;
	text-align: center;
	width: 24px;
}

#nav img {
	margin: auto;
	height: 28px;
}

#nav img:nth-of-type(1) {
	display: block;
}

#nav img:nth-of-type(2) {
	display: none;
}

#nav li a:hover img:nth-of-type(2),
#nav li a.active img:nth-of-type(2) {
	display: block;
}

#nav li a:hover img:nth-of-type(1),
#nav li a.active img:nth-of-type(1) {
	display: none;
}

#nav span {
	display: block;
	margin-top: 4px;
}

/* #home,
#main {
	padding-bottom: 81px;
} */

#home .one {
	margin-top: 10px;
	padding: 16px 0 6px 0;
	background: linear-gradient(#2f3fd2, #8ad088);
}

#home .one li {
	float: left;
	width: calc(50% - 5px);
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}

#home .one li:nth-of-type(2n) {
	margin-right: 0;
}

#home .one li .one_l {
	float: left;
	width: calc(60% - 20px);
	padding: 20px 10px 20px 10px;

}

#home .one li .one_l span {
	display: block;
	width: 100%;
	color: #098bd6;
	font-size: 15px;
}

#home .one li .one_l span:nth-of-type(2n) {
	color: #999;
	font-size: 12px;
	line-height: 20px;
}

#home .one li .one_r {
	float: left;
	width: 40%;
	padding-top: 50%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

}

#home .two {
	padding: 20px 0;
}

#home .two a {
	display: block;
}

#home .three {
	background-color: #fff;
	padding: 10px 0;
}

#home .s_bt {
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
}

#home .s_bt span {
	float: left;
	font-size: 16px;
	color: #333;
	font-weight: bold;
}

#home .s_bt a {
	float: right;
	color: #999;
	font-size: 12px;
}

#home .three li {
	float: left;
	width: calc(50% - 5px);
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 2px 2px 4px #dbdbdb;
}

#home .three li:nth-of-type(2n) {
	margin-right: 0;
}

#home .three li .three_img {
	padding-top: 70%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#home .three li .three_title {
	font-size: 14px;
	line-height: 40px;
	padding: 0 10px;
	width: calc(100% - 20px);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

#home .three li:hover .three_title {
	color: #098bd6;
}

#home .four {
	background-color: #fff;
	padding: 10px 0;
	margin-top: 10px;
}

#home .four li {
	width: 100%;
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

#home .four li:last-child {
	border: 0;
	padding: 0;
	margin: 0;
}

#home .four li .four_title {
	font-size: 15px;
	line-height: 30px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #333;
}

#home .four li a:hover .four_title {
	color: #098bd6;
}

#home .four li .four_jj {
	color: #999;
	font-size: 14px;
	line-height: 30px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.five {
	margin: 20px 0;
	text-align: center;
	color: #999;
	font-size: 12px;
	padding-bottom: 81px;
}

.five a {
	color: #999;
}

#main .main_list {
	background-color: #fff;
	height: 50px;
	line-height: 50px;
	padding: 0 10px;
	width: calc(100% - 20px);
	position: fixed;
	top: 0;
}

#main .main_list li {
	float: left;
	width: 33%;
	text-align: center;
}

#main .main_list li a {
	color: #333;
	display: block;
}

#main .main_list li.active {
	border-bottom: 2px solid #098bd6;
}

#main .main_list li.active a {
	color: #098bd6;
}

#main .main_list li:hover a {
	color: #098bd6;
}

#main .main_white {
	background-color: #fff;
	padding: 20px 0;
}

#main .main_hight {
	margin-top: 64px;
}

#main .search {
	text-align: center;
	margin-bottom: 20px;
}

#main .search input {
	outline: none;
	line-height: 40px;
	height: 40px;
	padding: 0 10px;
	margin-right: -34px;
	padding-right: 50px;
	border-radius: 8px;
	color: #ccc;
	font-size: 14px;
	box-sizing: border-box;
	border: 1px solid #eee;
}

#main .ser {
	border: none;
	color: #fff;
	line-height: 40px;
	outline: none;
	font-size: 16px;
	width: 100%;
}

#main .search button {
	color: #ccc;
	font-size: 16px;
	background-color: #fff;
	border: 0;
	outline: none;
	cursor: pointer;
}

#main .union,
.video {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

#main .main_title {
	text-align: center;
	font-size: 24px;
	color: #333;
	margin-bottom: 20px;
}

#main .main_title span {
	color: #098bd6;
}

#main .union li {
	float: left;
	margin-bottom: 20px;
	background-color: #fafafa;
	padding: 20px;
	width: calc(100% - 40px);
}

#main .union li:last-child {
	margin-bottom: 0 !important;
}

#main .union li:hover {
	background-color: #098bd6;
	color: #fff;
}

#main .union li:hover .union_title,
#main .union li:hover .union_jj,
#main .union li:hover .union_date {
	color: #fff;
}

#main .union li .union_title {
	font-size: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333;
	margin-bottom: 10px;
	font-weight: bold;
}

#main .union li .union_jj {
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	color: #666;
	margin-bottom: 10px;
}

#main .union li .union_date {
	font-size: 12px;
	color: #999;
}

#main .video li {
	float: left;
	width: calc(50% - 5px);
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 2px 2px 4px #dbdbdb;
}

#main .video li:nth-of-type(2n) {
	margin-right: 0;
}

#main .video li .video_img {
	padding-top: 70%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#main .video li .video_title {
	font-size: 14px;
	line-height: 40px;
	padding: 0 10px;
	width: calc(100% - 20px);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

#main .video li:hover .video_title {
	color: #098bd6;
}

.cooperate_jj {
	text-align: center;
	font-size: 14px;
	color: #333;
}

.bazaar_one {
	margin: 30px 0;
}

.bazaar_one_nr {
	color: #333;
	font-size: 16px;
	line-height: 30px;
}

#main .bazaar_two li {
	float: left;
	width: calc(50% - 5px);
	margin-right: 10px;
	margin-bottom: 10px;
}

#main .bazaar_two li:nth-of-type(2n) {
	margin-right: 0;
}

#main .bazaar_two li .bazaar_two_img {
	padding-top: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border: 1px solid #ccc;
}

#main .bazaar_two li .bazaar_two_title {
	font-size: 14px;
	line-height: 22px;
	padding: 0 10px;
	width: calc(100% - 20px);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 10px 0;
	text-overflow: ellipsis;
	text-align: center;
	height: 44px;
}

#main .bazaar_two li:hover .bazaar_two_title {
	color: #098bd6;
}

.bazaar_two_jg {
	color: #da251d;
	margin-bottom: 10px;
	text-align: center;
	font-size: 20px;
}

.bazaar_two_an {
	text-align: center;
	color: #fff;
	font-size: 14px;
	background-color: #e77817;
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
}

.contact_one {
	margin: 30px 0;
}

.union_content .union_content_title {
	font-size: 18px;
	text-align: center;
	margin-bottom: 10px;
	color: #333;
	font-weight: bold;
}

.union_content .union_content_date {
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
	color: #999;
}

.union_content_nr {
	margin-bottom: 20px;
}

.union_content_nr p {
	margin: 0;
}

.union_content_nr video {
	width: 100%;
	height: auto;
}

.detail {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
}

#main .locality li {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

#main .locality li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

#main .locality li:hover .locality_title {
	color: #098bd6;
}

#main .locality li .locality_img {
	padding-top: 60%;
	margin-bottom: 16px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#main .locality li .locality_title {
	font-size: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333;
	margin-bottom: 16px;
	font-weight: bold;
}

#main .locality li .locality_jj {
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #666;
	margin-bottom: 10px;
}

#main .locality li .locality_date {
	font-size: 12px;
	color: #999;
}

.learning_one,
.learning_two {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

#main .learning_one li {
	float: left;
	margin-bottom: 10px;
	width: calc(50% - 5px);
	margin-right: 10px;
}

#main .learning_one li:nth-of-type(2n) {
	margin-right: 0;
}

#main .learning_one li:hover {
	color: #098bd6;
}

#main .learning_one li .learning_one_img {
	padding-top: 100%;
	margin-bottom: 16px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#main .learning_one li .learning_one_title {
	font-size: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333;
}

.search_list {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
}

#main .review_top {
	background-color: #fff;
	height: 50px;
	line-height: 50px;
	padding: 0 10px;
	width: calc(100% - 20px);
	position: fixed;
	text-align: center;
	font-size: 18px;
	top: 0;
}

#main .review_xx:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* 首页视频 */
.s_sp p {
	margin: 0;
}

.s_sp iframe {
	width: 100%;
	height: auto;
	min-height: 260px;
}

/* 远方有你-义工活动 */
#main .no_white {
	background-color: #f6f6f6;
}

#main .learning_list {
	line-height: 30px;
	width: 100%;
}

#main .learning_list li {
	float: left;
	/* width: calc(16% - 5px); */
	width: calc(14.2% - 7px);
	text-align: center;
	margin-right: 8px;
	border-bottom: 2px solid rgba(255, 255, 255, 0);
	margin-bottom: 10px;
}

#main .learning_list li:nth-of-type(7n) {
	margin-right: 0;
}


#main .learning_list li a {
	color: #333;
	display: block;
}

#main .learning_list li.active {
	border-bottom: 2px solid #098bd6;
}

/* 公益足迹回顾 */
#main .review li {
	float: left;
	width: calc(16% - 5px);
	text-align: center;
	margin-right: 8px;
	border-bottom: 2px solid rgba(255, 255, 255, 0);
	margin-bottom: 10px;
}

#main .review li:nth-of-type(6n) {
	margin-right: 0;
}

#main .learning_list li.active a {
	color: #098bd6;
}

#main .learning_list li:hover a {
	color: #098bd6;
}

#main .learning_list li .learning_one_img {
	padding-top: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 100px;
}

#main .learning_list li .learning_one_title {
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #333;
	font-weight: bold;
}

#main .learning_nr li {
	background-color: #fff;
	width: calc(100% - 20px);
	padding: 10px;
	border-radius: 8px;
	margin-top: 14px;
}

.learning_l {
	float: left;
	width: 150px;
	height: 80px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-right: 10px;
}

.learning_r {
	float: left;
	width: calc(100% - 160px);
}

.learning_r_bt {
	font-size: 14px;
	font-weight: bold;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 10px;
}

.learning_r_jj {
	font-size: 12px;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 20px;

}

/* 详情页 */
.learning_xqy {
	margin-top: 30px;
}

.jia {
	margin-top: 20px;
	background-color: #fff;
	width: calc(100% - 20px);
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
}

/* 联系我们语录 */
.yulu {
	border: 1px solid #000;
	padding: 20px;
	margin-top: 20px;
}

.yulu a {
	display: block;
}

.yulu p {
	margin: 0;
}