@charset "utf-8";
/* CSS Document */

/****************************pc*********************************/
@media only screen and (min-width: 1180px) {
    #top{    width: 1160px;
        margin: 0 auto;
        padding: 0px 20;}

}
@media only screen and (min-width: 1180px) {
	/********top*****/
	#top_bg{
		width:100%;
		height:34px;
		background:#363636;
	}
	#top{
		width:1140px;
        padding-right: 20px;
		margin:0 auto;
	}
	#top_left{
		float:left;
		font-size:14px;
		color:#fff;
		line-height:34px;
	}
	#top_right{
		float:right;
		font-size:14px;
		color:#fff;
		line-height:34px;
	}
	#top_right a{
		color:#fff;
		padding:0 5px;
	}
	#top_right a:hover{
		color:#e00024;
	}

	/*******header*********/
	.header{
		width:1160px;
		margin:0 auto;
		padding:20px 0;
	}
	.header_left{
		float:left;
	}
	.iphone_header_right{
		display:none;
	}

	.header_right{
		width:870px;
		float:right;
		margin-top:17px;
	}
	.header_right li{
        margin-right: 11px;
		float:left;
		font-size:14px;
		height:40px;
		line-height:40px;
	}
    .header_right li:last-child{margin-right: 0px !important;}
	.header_right li a{
		display:block;
		height:40px;
		padding:0 14px;
		color:#333;
	}
	.header_right li a:hover{
		color:#df0023;
	}
	.header_right li.curr>a{

		color:#df0023;
	}

}

/************************************* iPhone********************************/
@media only screen and (max-width: 960px) {
	/*********top******/
	#top_bg{
		width:100%;
		#height:68px;
		background:#363636;
	}
	#top{
		width:90%;
		margin:0 auto;
	}

	#top_left{
		float:left;
		font-size:11px;
		color:#fff;
		line-height:34px;
	}
	#top_right{
		float:right;
		text-align: right;
		font-size:14px;
		color:#fff;
		line-height:34px;
	}
	#dispear{
		display:none;
	}

	#top_right a{
		color:#fff;
		padding:0 5px;
	}
	#top_right a:hover{
		color:#e00024;
	}

	/****header****/
	.header{
		width:95%;
		margin:0 auto;
		padding:20px 0;
		min-width: 320px;

	}
	.header_left{
		#float:left;
	}
	.header_right{
		display: none;
		width:80%;
		#float:right;
		margin-top:8px;
	}
	.header_right li{
		float:left;
		font-size:14px;
		height:20px;
		line-height:20px;
	}
	.header_right li a{
		display:block;
		height:20px;
		padding:0 8px;
		color:#333;
	}
	.header_right li a:hover{

		color:#df0023;
	}
	.header_right li.curr a{

		color:#df0023;
	}
	#logo_right{
		float:right;
		margin-right:25px;
	}
	#manu{
		height:60px;
		margin-top:20px;
		margin-left:10px;
		float: left;

	}
	#manu span{
		color:#c5c5c5;
		font-size:30px;
		cursor:pointer;
		transition: font-size 0.3s ease ;

	}



	#manu span:hover{
		font-size: 40px;
	}

	.nav-menu{
		#display: none;
		height:0px;
		overflow:hidden;
		font-family: 'Audiowide', cursive;
		text-transform: uppercase;
		font-weight: bold;
		transition: height 0.4s ease 0.2s;
	}
	#manu_li li{
		font-size:14px;
		height:30px;
		line-height:30px;
	}
	#manu_li li a{
		height:30px;
		padding:0 10px;
		color:#333;
	}
	#manu_li li a:hover{
		background:#df0023;
		color:#fff;
	}

@import url("http://www.w3cplus.com/demo/css3/base.css");
	/**任务一：引入本地字体文件**/
	@font-face {
		font-family: 'sansationregular';
		src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
		src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
		url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
		url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
		url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	/* basic menu styles */
	.nav-menu {
		display: block;
		background: #74adaa;
		#width:950px;
		width:100%;
		margin: 20px auto 20px;
	}
	.nav-menu > li {
		margin:10px;
		display: block;
		#sfloat:left;
		#border-right:1px solid #94c0be;
	}
	.nav-menu > li:last-child {
		border-right: none;
	}
	.nav-menu li a {
		color: #fff;
		display: block;
		text-decoration: none;
		/*调用本地字体*/
		font-family: 'sansationregular';
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		font-smoothing: antialiased;
		text-transform: capitalize;
		overflow: visible;
		line-height: 20px;
		font-size: 20px;
		padding: 15px 30px 15px 31px;
	}

	/* animation domination */
	.three-d {
		/* 任务三、设置3D舞台布景 */
		-webkit-perspective: 200px;
		-moz-perspective: 200px;
		-ms-perspective: 200px;
		-o-perspective: 200px;
		perspective: 200px;

		/*任务四、设置3D舞台布景过渡效果*/
		-webkit-transition: all .07s linear;
		-moz-transition: all .07s linear;
		-ms-transition: all .07s linear;
		-o-transition: all .07s linear;
		transition: all .07s linear;
		position: relative;
	}

	.three-d:not(.active):hover {
		cursor: pointer;
	}
	/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
	.three-d:not(.active):hover .three-d-box,
	.three-d:not(.active):focus .three-d-box {
		-wekbit-transform: translateZ(-25px) rotateX(90deg);
		-moz-transform: translateZ(-25px) rotateX(90deg);
		-o-transform: translateZ(-25px) rotateX(90deg);
		-ms-transform: translateZ(-25px) rotateX(90deg);
		transform: translateZ(-25px) rotateX(90deg);
	}

	.three-d-box {
		/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-ms-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		-webkit-transform: translatez(-25px);
		-moz-transform: translatez(-25px);
		-ms-transform: translatez(-25px);
		-o-transform: translatez(-25px);
		transform: translatez(-25px);
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-pointer-events: none;
		-moz-pointer-events: none;
		-ms-pointer-events: none;
		-o-pointer-events: none;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
	/*任务七、给导航设置3D前，与3D后变形效果*/
	.front {
		-webkit-transform: rotatex(0deg) translatez(25px);
		-moz-transform: rotatex(0deg) translatez(25px);
		-ms-transform: rotatex(0deg) translatez(25px);
		-o-transform: rotatex(0deg) translatez(25px);
		transform: rotatex(0deg) translatez(25px);
	}

	.back {
		-webkit-transform: rotatex(-90deg) translatez(25px);
		-moz-transform: rotatex(-90deg) translatez(25px);
		-ms-transform: rotatex(-90deg) translatez(25px);
		-o-transform: rotatex(-90deg) translatez(25px);
		transform: rotatex(-90deg) translatez(25px);
		color: #FFE7C4;
	}

	.front, .back {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #74adaa;
		padding: 15px 30px 15px 31px;
		color: white;
		-webkit-pointer-events: none;
		-moz-pointer-events: none;
		-ms-pointer-events: none;
		-o-pointer-events: none;
		pointer-events: none;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
	.nav-menu li .active .front,
	.nav-menu li .active .back,
	.nav-menu li a:hover .front,
	.nav-menu li a:hover .back {
		#background-color: #51938f;

		-webkit-background-size: 5px 5px;
		background-size: 5px 5px;
		background-position: 0 0, 30px 30px;
		background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	}
	.nav-menu ul {
		position: absolute;
		text-align: left;
		line-height: 40px;
		font-size: 14px;
		width: 200px;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
		-webkit-transform-origin: 0px 0px;
		-moz-transform-origin: 0px 0px;
		-ms-transform-origin: 0px 0px;
		-o-transform-origin: 0px 0px;
		transform-origin: 0px 0px;
		-webkit-transform: rotateX(-90deg);
		-moz-transform: rotateX(-90deg);
		-ms-transform: rotateX(-90deg);
		-o-transform: rotateX(-90deg);
		transform: rotateX(-90deg);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
	.nav-menu > li:hover ul {
		display: block;
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}
}
/************************************* iPad ******************************/
@media only screen and (min-width: 961px) and (max-width: 1179px) {
	/******top*****/
	#top_bg{
		width:100%;
		background:#363636;
	}
	#top{
		width:80%;
		margin:0 auto;
	}
	#top_left{
		float:left;
		font-size:14px;
		color:#fff;
		line-height:34px;
	}
	#top_right{
		float:right;
		font-size:14px;
		color:#fff;
		line-height:34px;
	}
	#top_right a{
		color:#fff;
		padding:0 5px;
	}
	#top_right a:hover{
		color:#e00024;
	}
	#dispear{
		display:none;
	}

	/*******header******/
	.header{

		width:100%;
		margin:0 auto;
		padding:20px 0;
	}
	.header_left{
		float:left;
		margin-left:5px;
	}
	.header_right li{
		float:left;
		font-size:14px;
		height:40px;
		line-height:40px;
	}
	.header_right li a{
		display:block;
		height:40px;
		padding:0 8px;
		color:#333;
	}
	.header_right li a:hover{
		background:#df0023;
		color:#df0023;
	}
	.header_right li.curr>a{
		background:#df0023;
        color: #df0023;
	}

	.iphone_header_right{
		display:none;
	}
}
/******************************ptpp******************************/
#ptpp_bghui{
	width:100%;
	height:auto;
	background:#eee;
}
#ptpp{
	width:1134px;
	margin:0 auto;
	padding:30px 0;
}
.ptpp_dan{
	width:230px;
	float:left;
}
.ptpp_dan_left{
	width:61px;
	float:left;
}
.ptpp_dan_right{
	width:160px;
	float:right;
}
.ptpp_dan_right_title{
	font-size:18px;
	font-weight:bold;
	margin-top:5px;
}
.ptpp_dan_right_txt{
	margin-top:8px;
}
.ptpp_kong{
	width:70px;
	height:10px;
	float:left;
}