﻿@charset "utf-8";

/*内容部分*/


/*第一个模块*/

.conten-one {
	width: 100%;
	height: auto;
	background: #535353;
	padding: 2% 0;
}

.conten-one-box {
	max-width: 1200px;
	margin: auto;
}

.one-box-header p {
	font-size: 3rem;
	color: #ff751c;
	text-align: center;
	margin: auto;
}

.one-box-header span {
	display: block;
	font-size: 1.6rem;
	color: #fdf8f8;
	text-align: center;
	margin: auto;
}

.one-box-header small {
	display: block;
	font-size: 1.4rem;
	text-align: center;
	line-height: 23px;
	color: #fdf8f8;
	margin: auto;
}

.one-conten-left {
	position: relative;
}

.one-conten-left img {
	width: 100%;
	/*height: 100%;*/
}

.one-conten-left-text {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


/*左边第一个*/

.one-conten-left-text .one {
	width: 16%;
	font-size: 1.4rem;
	color: #fcfefc;
	position: absolute;
	top: 50%;
	left: 0.1%;
}

.one-conten-left-text .one p {
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 38%;
}

.one-conten-left-text .one small {
	display: block;
	text-align: center;
	font-size: 1.2rem;
}


/*左边第二个*/

.one-conten-left-text .two {
	width: 16%;
	font-size: 1.4rem;
	color: #fcfefc;
	position: absolute;
	top: 11.4%;
	left: 22.7%;
}

.one-conten-left-text .two p {
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 38%;
}

.one-conten-left-text .two small {
	display: block;
	text-align: center;
	font-size: 1.2rem;
}


/*左边第三个*/

.one-conten-left-text .three {
	width: 16%;
	font-size: 1.4rem;
	color: #fcfefc;
	position: absolute;
	top: 77%;
	left: 38.2%;
}

.one-conten-left-text .three p {
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 38%;
}

.one-conten-left-text .three small {
	display: block;
	text-align: center;
	font-size: 1.2rem;
}


/*左边第四个*/

.one-conten-left-text .four {
	width: 16%;
	font-size: 1.4rem;
	color: #fcfefc;
	position: absolute;
	top: 26%;
	left: 63.6%;
}

.one-conten-left-text .four p {
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 38%;
}

.one-conten-left-text .four small {
	display: block;
	text-align: center;
	font-size: 1.2rem;
}


/*左边第五个*/

.one-conten-left-text .fif {
	width: 16%;
	font-size: 1.4rem;
	color: #fcfefc;
	position: absolute;
	top: 83%;
	left: 83%;
}

.one-conten-left-text .fif p {
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 38%;
}

.one-conten-left-text .fif small {
	display: block;
	text-align: center;
	font-size: 1.2rem;
}

.one-conten-right p {
	width: 80%;
	font-size: 1.6rem;
	color: #ff751c;
	text-indent: 30px;
	margin: 30% 0 29% 47px;
}


/*第二个模块*/

.conten-two {
	width: 100%;
	height: auto;
	background: #eeeeee;
	padding: 2% 0;
}

.conten-two-box {
	max-width: 1200px;
	margin: 20px auto;
}

.two-conten-left {
	padding: 3% 0;
}

.two-conten-left p {
	width: 85%;
	font-size: 1.4rem;
	color: #5a5958;
	text-indent: 30px;
	line-height: 25px;
	margin: auto;
}

.one-conten-right img{
	margin: auto;
}

/*第三个模块*/

.conten-three {
	width: 100%;
	height: auto;
	background: #535353;
	padding: 2% 0;
}

.conten-three-box {
	max-width: 1200px;
	margin: auto;
}

.three-box-header {
	padding: 0 25px;
}

.three-box-header p {
	font-size: 3rem;
	color: #ff751c;
	text-align: center;
	margin: auto;
}

.three-box-header span {
	display: block;
	font-size: 1.6rem;
	color: #fdf8f8;
	text-align: center;
	margin: 11px auto;
}

.three-box-header small {
	display: block;
	font-size: 1.4rem;
	text-align: center;
	line-height: 23px;
	color: #fdf8f8;
	margin: auto;
}

.three-box-conten {
	width: 100%;
}

.three-conten-header p {
	font-size: 1.4rem;
	text-align: center;
	line-height: 23px;
	color: #ff751c;
	margin: 23px auto 57px auto;
}

.three-bottom {
	position: relative;
}

.three-bottom p {
	width: 95%;
	height: 1px;
	border-bottom: 1px solid #ffffff;
	margin: auto;
}

.three-bottom .row {
	margin-left: 30px;
}



.text {
	width: 57px;
	height: 57px;
	margin: auto;
	line-height: 57px;
	border-radius: 50%;
	margin-bottom: 15px;
	overflow: hidden;
	background: url(../images/pinpai-bg_03.png) no-repeat;
}

.text h5 {
	width: 114px;
	position: absolute;
	top: 0;
	left: -29px;
}

.text span {
	width: 114px;
	height: 57px;
	display: block;
	float: left;
	background: #ff751c;
	background: transparent\9;
	display: none;
}

.bg {
	text-align: center;
	line-height: 57px;
	color: #535252;
	position: absolute;
	left: 38%;
	top: 0;
}

small {
	display: block;
	text-align: center;
	color: #fefdfc;
}

.three-bottom-one:hover .text span {
	display: block;
}

.three-bottom-two:hover .text span {
	display: block;
}

.three-bottom-three:hover .text span {
	display: block;
}

.three-bottom-four:hover .text span {
	display: block;
}

.three-bottom-fif:hover .text span {
	display: block;
}

.three-bottom-one:hover small {
	color: #ff751c;
}

.three-bottom-two:hover small {
	color: #ff751c;
}

.three-bottom-three:hover small {
	color: #ff751c;
}

.three-bottom-four:hover small {
	color: #ff751c;
}

.three-bottom-fif:hover small {
	color: #ff751c;
}

.conten-four {
	width: 100%;
	height: auto;
	background: #ffffff;
	padding: 2% 0;
}

.conten-four-box {
	max-width: 1200px;
	margin: auto;
	padding: 2% 0;
}

.conten-four-box p {
	width: 80%;
	margin: auto;
	font-size: 1.4rem;
	color: #5c5b5b;
	text-indent: 3rem;
	line-height: 3rem;
}



@media (min-width: 765px) {
	.three-bottom-one {width: 19%;font-size: 1.4rem;top: -27px;}
	.three-bottom-two {width: 19%;font-size: 1.4rem;top: -27px;}
	.three-bottom-three {width: 19%;font-size: 1.4rem;top: -27px;}
	.three-bottom-four {width: 19%;font-size: 1.4rem;top: -27px;}
	.three-bottom-fif {width: 19%;font-size: 1.4rem;top: -27px;}
}

@media screen and (max-width: 990px) {
	 .bg{left: 35%;}
}

@media screen and (max-width: 764px) {
	.one-conten-left-text p {font-size: 1.2rem;}

.three-bottom .row {margin-left: 10%;}

	.three-bottom p{display: none;}
	
	.bg{left: 42%;}
}


@media screen and (max-width: 560px) {
	.one-conten-left-text p {font-size: 1.2rem;}

	 .bg{left: 38%;}
}

@media screen and (max-width: 450px) {
	.one-conten-left img {display: none;}
	.one-conten-left-text{margin-top: 5%;}
	.one-conten-right p{margin-top: 70%;margin-bottom: 13%;}
	.one-conten-left-text .one{left: 2%;}
	.one-conten-left-text .two{left: 20%;}
	.one-conten-left-text .three{left: 40%;}
	.one-conten-left-text .four{left: 60%;}
	.one-conten-left-text .fif{left: 80%;}
	.one-conten-left-text .one p {width: 4rem;height: 4rem;margin: auto;line-height: 4rem;border-radius: 50%;background: #ff751c;}
	.one-conten-left-text .two p {width: 4rem;height: 4rem;margin: auto;line-height: 4rem;border-radius: 50%;background: #ff751c;}
	.one-conten-left-text .three p {width: 4rem;height: 4rem;margin: auto;line-height: 4rem;border-radius: 50%;background: #ff751c;}
	.one-conten-left-text .four p {width: 4rem;height: 4rem;margin: auto;line-height: 4rem;border-radius: 50%;background: #ff751c;}
	.one-conten-left-text .fif p {width: 4rem;height: 4rem;margin: auto;line-height: 4rem;border-radius: 50%;background: #ff751c;}
	
}

@media screen and (max-width: 415px) {
	.one-conten-left-text p {font-size: 1rem;}
	
	.one-conten-left-text .one{left: 2%;width: 100%;}
	.one-conten-left-text .two{left: 2%;width: 100%;margin-top: 20%;}
	.one-conten-left-text .three{left: 2%;width: 100%;margin-top: 40%;}
	.one-conten-left-text .four{left: 2%;width: 100%;margin-top: 60%;}
	.one-conten-left-text .fif{left: 2%;width: 100%;margin-top: 80%;}
	
	.one-conten-right p {margin-top: 123%;}
}


@media screen and (max-width: 370px) {
	 .bg{left: 35%;}
}


