html,body{height:100%;}

@media (max-width:767px){

	.banner{background-color:#222; padding-left:20px; height:260px;}
	.banner .title{ padding-top:100px; color:#fff; font-size:20px;}
	.banner .ftitle{ padding-top:20px; color:#fff; font-size:18px;}
	.banner .content{ padding-top:20px; color:#fff; font-size:14px;}

	#point{position:relative; top:13px;}

	.floor .box{ padding-top:20px;}
	.floor .box .title{ font-size:20px;font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Tahoma, sans-serif;margin-bottom:5px;}


	.f1 .title{color: #333; }
	.f1 .info .left{ width:100%;}
	.f1 .info img{ max-width:100%;}
	.f1 .info .left span{ display:block; padding:0px 20px !important;}
	.f1 .info .line{ border-right:1px solid #eee;}
	.f1 .info .tit{ color:#009944; font-size:20px; margin-top:20px;}
	.f1 .info .desc{ padding-top:10px; line-height:25px; font-size:14px; color:#666;}


	.f2{ padding:50px 0px;}
	.f2{ background-color:#222; background-image:url(/images/about/bg_f2.jpg); background-position:bottom;}
	.f2 .title{color: #fff; padding-left:20px;}
	.f2 .info{ margin-top:40px;}
	.f2 .info li{ float:left; width:50%; display:block; color:#fff; cursor:pointer;}
	.f2 .info li div{ padding:0px 20px;height:250px;}
	.f2 .info span{ display:block;}
	.f2 .info .icon { padding-top:30px;}
	.f2 .info .icon em{ width:80px; height:80px; line-height:80px; text-align:center; display:block;font-size:30px; margin: 0 auto; margin-bottom:30px; border:3px solid #ccc; border-radius: 100%;}
	.f2 .info li:hover { color:#ABCD03;-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;transition: all .4s ease;}
	.f2 .info li:hover em{ color:#ABCD03;border:3px solid #ABCD03;-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;transition: all .4s ease;}
	.f2 .info .tit{ text-align:center; font-size:18px;}
	.f2 .info .txt{ text-align:center; font-size:12px; line-height:25px;}


	.f3{ padding:50px 0px;}
	.f3{ background-color:#222; background-image:url(/images/about/bg_f2.jpg); background-position:bottom;}
	.f3 .title_en{ font-size:14px; margin-bottom:20px;}
	.f3 .txt{ padding:0px; font-size:14px; line-height:50px;}
	.f3 .pic{ padding:20px;}
	.f3 .pic img{ width:100%;}
	.f3 .info{ line-height:25px; padding:20px; color:#fff;}
	.f3 b{ font-size:16px; display:block;  border-top: 1px dashed #eee; padding-top:10px;}
	.f3 b span{ font-size:14px; font-weight:normal;}

	.f4{ background-color:#222; background-image:url(/images/about/bg_f4.jpg); background-position:center; padding:50px 0px;}
	.f4 .title{color: #fff; padding-bottom:10px;}
	.f4 ul{ color:#fff; width:100% !important}
	.f4 ul li{line-height:20px; margin:0 20px; border-top:1px dashed #6478B8; padding:15px 0px; display:block;}
	.f4 ul li h3{ font-size:14px; margin:0px; padding:0px;}


	.f5{ padding:50px 0px;}
	.f5 ul{ margin-top:30px;}
	.f5 li{ width:100%; display:block;}
	.f5 li span{ display:block; padding:20px 20px;}
	.f5 .line{ border-right:1px solid #eee;}
	.f5 .tit{ font-size:18px; text-align:center; padding-bottom:20px;}
	.f5 .txt{ font-size:14px; line-height:25px; color:#666;}

	.tag{font-size:12px; margin-bottom:10px; padding-left:0px; margin-bottom:20px;}
	.tag em{ font-size:12px;}
	.tag font{  padding-right:5px; line-height:24px; float:left;color:#666; }
	.tag font a{ color:#666; padding-left:5px; padding-right:5px; margin-left:3px;border-radius: 4px; background:#666; color:#fff;}
}

@media(min-width:767px){




	.floor{height:100%;}
	.banner{background-color:#222; }
	.banner .center{display: table;height: 100%;}
	.banner .box{display: table-cell;vertical-align: middle; min-height: 300px;}
	.banner .title{ color:#fff; font-size:50px !important;font-weight: bold;}
	.banner .ftitle{ padding-top:50px; color:#fff; font-size:30px;}
	.banner .content{ padding-top:30px; color:#fff; font-size:20px;}



	#point{position:relative; top:13px;}

	.floor .box{ padding-top:50px;}
	.floor .box .title{ font-size:50px;font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Tahoma, sans-serif;margin-bottom:20px;}


	.floor .center{display: table;height: 100%;}
	.floor .box{display: table-cell;vertical-align: middle;}

	.f1 .title{color: #333; }
	.f1 .info .left{ width:49%; height:400px;}
	.f1 .info .left span{ display:block; padding:0px 50px;}
	.f1 .info .line{ border-right:1px solid #eee;}
	.f1 .info .tit{ color:#004C20; font-size:50px;font-weight: bold;}
	.f1 .info .desc{ padding-top:30px; line-height:30px; font-size:15px; color:#666;}


	.f2{ background-color:#222; background-image:url(/images/about/bg_f2.jpg); background-position:bottom;}
	.f2 .title{color: #fff; }
	.f2 .info{ margin-top:80px;}
	.f2 .info li{ float:left; width:25%; display:block; color:#fff; cursor:pointer;}
	.f2 .info li div{ border-left:1px solid #666; padding:0px 20px;height:300px;}
	.f2 .info span{ display:block;}
	.f2 .info .icon { padding-top:50px;}
	.f2 .info .icon em{ width:100px; height:100px; line-height:100px; text-align:center; display:block;font-size:50px; margin: 0 auto; margin-bottom:30px; border:3px solid #ccc; border-radius: 100%;}
	.f2 .info li:hover { color:#ABCD03;-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;transition: all .4s ease;}
	.f2 .info li:hover em{ color:#ABCD03;border:3px solid #ABCD03;-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;transition: all .4s ease;}
	.f2 .info .tit{ text-align:center; font-size:20px;}
	.f2 .info .txt{ text-align:center; font-size:13px; line-height:40px;}


	.f3{background-color:#222; background-image:url(/images/about/bg_f2.jpg); background-position:center; background-attachment: fixed;background-size: cover;}
	.f3 .center{vertical-align: middle;}


	.f3 .title{color: #fff; font-weight: bold;}
	.f3 .title_en{ font-size:18px; margin-bottom:30px;}
	.f3 .pic,.f3 .info{ float:left;}
	.f3 .pic{ width:400px;}
	.f3 .txt{ padding:0px; font-size:14px; line-height:50px;}
	.f3 .info{ line-height:57px; width:800px; color:#fff;  border-bottom: 1px dashed  rgba(255,255,255,0.3);}
	.f3 b{ font-size:18px; display:block; color:#fff; border-top: 1px dashed  rgba(255,255,255,0.3);;}
	.f3 b span{ font-size:14px; font-weight:normal;}
	.f4{ background-color:#222; background-image:url(/images/about/bg_f4.jpg); background-position:center;}
	.f4 .title{color: #fff; }

	.f4 .time-line *{margin:0;padding:0;}

	.time-line{width:1200px;margin:20px auto; color:#fff;position: relative; margin-top:100px;}
	.time-line .left-btn,.time-line .right-btn{width: 30px;height: 30px;background: url(/images/about/lc/arrow.png) no-repeat;position: absolute;margin-top:-15px;cursor: pointer;}
	.time-line .left-btn{left:0;top:50%;}
	.time-line .right-btn{right:0;top:50%;transform: rotate(180deg);}
	.time-line .right-btn:hover{background: url(/images/about/lc/arrow-hover.png) no-repeat;transform: rotate(180deg);}
	.time-line .left-btn:hover{background: url(/images/about/lc/arrow-hover.png) no-repeat;}
	.time-line .time-box{width: 1140px;margin: 0 auto;overflow: hidden;}
	.time-line .time-box ul{overflow: hidden;position: relative;}
	.time-line .time-box ul:after{content: "";background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;top:50%;}
	.time-line .time-box h3{ font-size:18px; margin-bottom:10px;}
	.time-line .time-box li{width:285px;float: left;padding: 15px 10px; height:130px; line-height:24px; font-size:13px;box-sizing: border-box;border: 1px dotted #d2d2d2;position: relative; cursor: pointer;}
	.time-line .time-box li:nth-child(2n){margin-top: 207px;}
	.time-line .time-box li:before{content: "";border-left: 1px solid #d2d2d2;border-bottom: 1px solid #d2d2d2;position: absolute;width: 16px;height: 16px;background: #fff;   bottom: -9px; transform: rotate(-45deg);left: 50%;margin-left: -8px;}
	.time-line .time-box li:after{content: "";width: 15px;height: 15px;background: url(/images/about/lc//point.png) no-repeat;position: absolute;left:50%;margin-left:-7px;bottom: 0;    bottom: -48px; z-index: 1;}
	.time-line .time-box li:nth-child(2n):before{bottom: auto;top: -10px;transform: rotate(-225deg);}
	.time-line .time-box li:nth-child(2n):after{bottom: auto;top:-46px;}
	.time-line .time-box li:hover,.time-line .time-box li.active{background: #fff;color:#666;border-color: #fff;}
	.time-line .time-box li:hover:before,.time-line .time-box li.active:before{border-color: #fff;background: #fff;}
	.time-line .time-box li:hover:after,.time-line .time-box li.active:after{background: url(/images/about/lc/point-hover.png) no-repeat;}


	.f5 ul{ margin-top:30px;}
	.f5 li{ width:49%; height:430px; float:left; display:block;}
	.f5 li span{ display:block; padding:20px 30px;}
	.f5 .line{ border-right:1px solid #eee;}
	.f5 .tit{ font-size:20px; text-align:center; padding-bottom:20px;}
	.f5 .txt{ font-size:14px; line-height:25px; color:#666;}

	.tag{font-size:13px; margin-bottom:10px; padding-left:30px; margin-bottom:20px;}
	.tag em{ font-size:12px;}
	.tag font{ white-space:nowrap; padding-right:5px; line-height:24px; float:left; width:400px;color:#666; }
	.tag font a{ color:#666; padding-left:5px; padding-right:5px; margin-left:3px;border-radius: 4px; background:#666; color:#fff;}

}