.mt40 {



	margin-top: 40px;



}







.focusBox {



	position: relative;



	width: 100%;



	height: 560px;



	overflow: hidden;



}



#a1 {

	height: 318px;

	width: 510px;

}





.focusBox .pic {



	position: relative;



	z-index: 0;



}







.focusBox .pic img {



	width: 100%;



	height: 560px;



	display: block;



}







.focusBox .prev, .focusBox .next {



	width: 60px;



	height: 90px;



	margin: -60px 0 0;



	display: none;



	background: url(../images/ad_ctr.png) no-repeat 0 0;



	position: absolute;



	top: 50%;



	z-index: 10;



	cursor: pointer;



	text-indent: -9999px;



	filter: alpha(opacity=20);



	opacity: 0.2;



}







.focusBox .prev {



	left: 0;



}







.focusBox .next {



	background-position: 0 -90px;



	right: 0;



}







.focusBox .prev:hover, .focusBox .next:hover {



	filter: alpha(opacity=50) !important;



	opacity: 0.5 !important;



}







.nav_dbg {



	background: url(../images/nav_bg.png) no-repeat top center;



	height: 119px;



	position: relative;



	z-index: 8;



	margin-top: -19px;



}







.nav {



	width: 900px;



}







.nav li {



	float: left;



	width: 90px;



	height: 119px;



	margin: 0px 3px;



}







.nav li a {



	background: url(../images/nav_zi.png) no-repeat 30px 32px;



	width: 90px;



	height: 119px;



	display: block;



}







.nav li.another, .nav li:hover {



	background: url(../images/nav_hover.jpg) no-repeat  0 0px;



	width: 90px;



	height: 119px;



	display: block;



}







.nav ul {



	width: 1200px;



}







.nav li.nav1 a {



	background-position: -60px 32px;



}







.nav li.nav2 a {



	background-position: -144px 32px;



}







.nav li.nav3 a {



	background-position: -238px 32px;



}







.nav li.nav4 a {



	background-position: -324px 32px;



}







.nav li.nav5 a {



	background-position: -411px 32px;



}







.nav li.nav6 a {



	background-position: -503px 32px;



}







.nav li.nav7 a {



	background-position: -586px 32px;



}







.nav li.nav8 a {



	background-position: -677px 32px;



}







.nav li.nav9 a {



	background-position: -680px 32px;



}







/*search*/



.search_left {



	width: 320px;



	font-size: 13px;



	color: #FFF;



	margin-top: 22px;



}







.search_zi {



	height: 40px;



	color: #FFF;



	line-height: 40px;



}







.search_zi a {



	color: #FFF;



	margin: 0 2px;



}







.search1 {



	width: 293px;



	height: 32px;



	line-height: 32px;



	margin: 4px 0px 0 0;



	border: 1px solid #f68f92;



}







.search1 .text {



	width: 246px;



	height: 32px;



	float: right;



	background: none;



	line-height: 32px;



	color: #FFF;



	font-size: 12px;



	font-family: "Microsoft YaHei";



	border: 0px;



}







.search1 .submit {



	width: 40px;



	height: 32px;



	cursor: pointer;



	float: right;



	background: url(../images/search_tag.png) no-repeat center center;



}







h4, h3 {



	font-weight: normal;



}







.pro_dbg1 {



	background: url(../images/pro_dbg1.jpg) no-repeat top center;



	height: 709px;



	overflow: hidden;



}







.pro_t {



	padding-top: 40px;



}







.pro_right li {



	position: relative;



	width: 390px;



	height: 245px;



	overflow: hidden;



	margin-bottom: 10px;



}







.pro_right li .info {



	position: absolute;



	top: 0;



	bottom: 0;



	left: 0;



	right: 0;



	text-align: center;



	-webkit-backface-visibility: hidden;



	backface-visibility: hidden;



}







.pro_right li .info {



	background: #1a4a72;



	background: rgba(26, 74, 114, 0.6);



}







.pro_right li .pic img {



	width: 390px;



	height: 245px;



}







.pro_right li .pic {



	-webkit-transition: all 0.35s ease-in-out;



	-moz-transition: all 0.35s ease-in-out;



	transition: all 0.35s ease-in-out;



	-webkit-transform: scale(1);



	-moz-transform: scale(1);



	-ms-transform: scale(1);



	-o-transform: scale(1);



	transform: scale(1);



}







.pro_right li .info {



	background: #333333;



	background: rgba(0, 0, 0, 0.6);



	visibility: hidden;



	opacity: 0;



	-webkit-transition: all 0.35s ease-in-out;



	-moz-transition: all 0.35s ease-in-out;



	transition: all 0.35s ease-in-out;



}







.pro_right li .info .t {



	text-transform: uppercase;



	color: #fff;



	text-align: center;



	font-size: 15px;



	margin: 90px 0 0 0;



	-webkit-transition: all 0.35s ease-in-out;



	-moz-transition: all 0.35s ease-in-out;



	transition: all 0.35s ease-in-out;



	height: 40px;



	line-height: 40px;



}







.pro_right li .info .k {



	border: 1px solid #494645;



	display: block;



	width: 365px;



	height: 218px;



	position: absolute;



	top: 10px;



	left: 10px;



	background: url(../images/p_hover.png) no-repeat center 40px;



}







.pro_right li .info .m {



	font-size: 12px;



	position: relative;



	color: #FFF;



	width: 105px;



	height: 28px;



	line-height: 28px;



	text-align: center;



	-webkit-transition: all 0.35s 0.1s linear;



	-moz-transition: all 0.35s 0.1s linear;



	transition: all 0.35s 0.1s linear;



	border: 1px solid #bbbbbc;



	margin: 10px auto;



}







.pro_right li a:hover .pic {



	-webkit-transform: scale(1.2);



	-moz-transform: scale(1.2);



	-ms-transform: scale(1.2);



	-o-transform: scale(1.2);



	transform: scale(1.2);



}







.pro_right li a:hover .info {



	visibility: visible;



	opacity: 1;



}







.pro_right li .info .t {



	-webkit-transform: translateY(-100%);



	-moz-transform: translateY(-100%);



	-ms-transform: translateY(-100%);



	-o-transform: translateY(-100%);



	transform: translateY(-100%);



}







.pro_right li .info .m {



	-webkit-transform: translateY(100%);



	-moz-transform: translateY(100%);



	-ms-transform: translateY(100%);



	-o-transform: translateY(100%);



	transform: translateY(100%);



}







.pro_right li a:hover .info .t, .pro_right li a:hover .info .m {



	-webkit-transform: translateY(0);



	-moz-transform: translateY(0);



	-ms-transform: translateY(0);



	-o-transform: translateY(0);



	transform: translateY(0);



}







.pro_left_up {



	top: 550px;



	left: 28px;



	height: 100px;



	width: 720px;



	background: rgba(0, 0, 0, .8);



}







.pro_left_up li {



	float: left;



	position: relative;



	margin: 9px 0 0 11px;



	width: 138px;



	height: 80px;



}







.pro_left_up li p {



	display: none;



}







.pro_left_up li img {



	width: 138px;



	height: 80px;



}







.pro_left_up li:hover p {



	width: 138px;



	height: 80px;



	background: rgba(0, 0, 0, .8);



	display: block;



	position: absolute;



	top: 0px;



	left: 0px;



	line-height: 80px;



	text-align: center;



}







.pro_left_up li:hover p a {



	color: #d7d7d7;



}







.pro_more {



	width: 115px;



	height: 100px;



	background: url(../images/p_hover.png) no-repeat center 20px #d5171d;



	text-align: center;



}







.pro_more a {



	color: #FFF;



	margin-top: 56px;



	display: block;



	height: 30px;



	line-height: 30px;



	display: block;



	overflow: hidden;



}







.pro_left li:hover p {



	display: block;



}







.pro_left li:hover p a {



	color: #FFF;



}







.pro_left li p {



	position: absolute;



	top: 0px;



	left: 0px;



	height: 40px;



	line-height: 40px;



	background: rgba(0, 0, 0, .7);



	display: none;



	width: 100%;



	text-align: center;



}







.pro_left  img {



	wdith: 780px;



	height: 500px;



}







.pro_dbg2 {



	background: url(../images/pro_dbg2.jpg) no-repeat top center;



	height: 717px;



}







.pro_c {



	width: 262px;



	height: 625px;



	background: #f1f1f1;



	float: left;



	margin-top: 30px;



	display: inline;



	overflow: hidden;



}







.pro_c_nav {



	height: 72px;



	background: #1e1818;



	display: block;



	padding: 15px 0 0 20px;



}







.pro_c_nav h2 {



	font-size: 24px;



	color: #FFF;



}







.pro_c_nav h2 a {



	color: #FFF;



}







.pro_c_nav p {



	font-size: 13px;



	font-family: arial;



	text-transform: uppercase;



	margin-top: 5px;



}







.pro_n li dl {



	clear: both;



}







.pro_n li dl {



	margin-left: 26px;



}







.pro_n li {



	clear: both;



	padding-top: 4px;



}







.pro_n li dl dd {



	height: 36px;



	line-height: 36px;



	width: 100px;



	font-size: 14px;



	float: left;



}







.pro_n li dl dd a {



	color: #333;



}







.pro_n li dl dd a:hover {



	font-weight: bold;



}







.pro_n li span {



	height: 38px;



	width: 210px;



	border: 1px solid #c1c1c1;



	line-height: 38px;



	overflow: hidden;



	margin: 10px  auto;



	clear: both;



	display: block;



	text-indent: 20px;



}







.pro_n li span a {



	font-size: 16px;



	color: #212121;



}







.pro_n li span:hover {



	background: #1c1c1c;



	cursor: pointer;



}







.pro_n li span:hover a {



	color: #FFF;



}







.pro_cp {



	background: url(../images/p_left.jpg) no-repeat;



	width: 96px;



	height: 624px;



	margin-top: 30px;



}







.product .pro-l ul {



	width: 1000px;



}







.product .pro-l {



	width: 810px;



	height: 770px;



	overflow: hidden;



}







.product .pro-l .pro-l-tit {



	height: 48px;



	line-height: 48px;



	margin-top: 27px;



}







.product .pro-l .pro-l-tit a {



	color: #fff;



	font-size: 18px;



}







.product .pro-l .pro-l-tit h4 {



	float: left;



	width: 199px;



	text-align: center;



	background: #1c1c1c;



	margin-right: 31px;



}







.product .pro-l .major-list-outer {



}







.product .pro-l .major-list {



	margin-top: 20px;



}







.product .pro-l .major-list li {



	float: left;



	width: 261px;



	height: 201px;



	margin: 10px 10px 0px 0;



	overflow: hidden;



	border: 1px #000 solid;



	position: relative;



}







.product .pro-l .major-list li a, .major-list li a span {



	width: 100%;



	height: 100%;



	display: block;



	position: absolute;



	left: 0;



	top: 0



}







.product .pro-l .major-list .front-face img {



	width: 261px;



	height: 201px;object-fit: contain;



}







.product .pro-l .front-face {



	z-index: 2;



}







.product .pro-l .major-list li a span.back-face {



	z-index: 3;



	background: url(../images/bg8.png) no-repeat;



	color: #fff;



	text-align: center;



	display: none;



}







.product .pro-l .major-list li a {



	overflow: hidden



}







.product .pro-l .major-list li a:hover span.back-face {







	/*z-index:3;*/ display: block;



}







.product .pro-l .major-list li a span em {



	display: block;



	margin-top: 5px;



	padding: 0 10px;



	height: 30px;



	line-height: 30px;



	display: block;



	font-size: 15px;



	white-space: nowrap;



	overflow: hidden;



	text-overflow: ellipsis;



	color: #FFF;



}







.product .pro-l .major-list li a span p {



	margin: 10px auto;



	line-height: 28px;



	overflow: hidden;



	height: 28px;



	display: block;



	font-size: 14px;



	border: 1px solid #FFF;



	color: #FFF;



	width: 105px;



}







.product .pro-l .major-list li a span i {



	display: block;



	width: 37px;



	height: 37px;



	background: url(../images/p_hover.png) no-repeat;



	margin: 50px auto 0;



}







.product .pro-l .animated {



	-webkit-animation-duration: 1s;



	-moz-animation-duration: 1s;



	-ms-animation-duration: 1s;



	animation-duration: 1s;



	-webkit-animation-fill-mode: both;



	-moz-animation-fill-mode: both;



	-ms-animation-fill-mode: both;



	animation-fill-mode: both;



}







.gg1 {



	background: url(../images/gg1.jpg) no-repeat top center;



	height: 180px;



}







.gg1_tel {



	font-size: 14px;



	color: #FFF;



	margin: 50px 0 0 500px;



}







.gg1_tel p {



	background: url(../images/gg1_tel.jpg) no-repeat left center;



	padding-left: 60px;



	float: left;



}







.gg1_tel span {



	font-size: 30px;



	font-family: impact;



	display: block;



	margin-top: 2px;



}







.gg1_tel a {



	float: left;



	margin: 10px 0 0 30px;



}







.ys_toppic {



	background: url(../images/ys_toppic.jpg) no-repeat top center;



	height: 305px;



}







.ys_toppic a {



	display: block;



	height: 305px;



}







.ys_dbg {



	background: url(../images/ys_dbg.jpg) no-repeat top center;



	height: 786px;



	overflow: hidden;



}







.ys_t {



	margin-top: -20px;



}







.ys_tel {



	font-size: 14px;



	color: #FFF;



	margin: 30px 0 0 20px;



}







.ys_tel p {



	background: url(../images/gg_tel.jpg) no-repeat left center;



	padding-left: 60px;



	float: left;



}







.ys_tel span {



	font-size: 24px;



	font-family: impact;



	display: block;



	margin-top: 2px;



}







.ys_nav li {



	background: url(../images/ys_tx.png) no-repeat 0 0;



	width: 141px;



	height: 133px;



	display: block;



	position: absolute;



}







.ys_nav  li em {



	background: url(../images/ys_zi.png) no-repeat 45px -84px;



	display: block;



	height: 60px;



	margin-top: 25px;



}







.ys_nav  li.ys_nav2 em {



	background-position: -125px -84px;



}







.ys_nav  li.ys_nav3 em {



	background-position: -296px -84px;



}







.ys_nav  li.ys_nav4 em {



	background-position: -464px -84px;



}







.ys_nav  li.ys_nav5 em {



	background-position: -638px -84px;



}







.ys_nav  li.ys_nav6 em {



	background-position: -804px -84px;



}







.ys_nav  li.tag_ys {



	background: url(../images/ys_tx.png) no-repeat left bottom;



}







.ys_nav  li.tag_ys em {



	background: url(../images/ys_zi.png) no-repeat 45px 10px;



}







.ys_nav  li.ys_nav2.tag_ys em {



	background-position: -125px 10px;



}







.ys_nav  li.ys_nav3.tag_ys em {



	background-position: -296px 10px;



}







.ys_nav  li.ys_nav4.tag_ys em {



	background-position: -464px 10px;



}







.ys_nav  li.ys_nav5.tag_ys em {



	background-position: -638px 10px;



}







.ys_nav  li.ys_nav6.tag_ys em {



	background-position: -804px 10px;



}







.ys_pic {



	margin-top: -30px;



}







.ys4 .ys_pic {



	margin-top: 0px;



}







.ys6 .ys_pic {



	margin-top: 0px;



}







.ys_righnr {



	width: 520px;



	margin: 50px 0 0 0;



}







.ys_righnr dt {



	background: url(../images/ys_em1.png) no-repeat left center;



	padding-left: 100px;



	height: 80px;



}







.ys2 .ys_righnr dt {



	background: url(../images/ys_em2.png) no-repeat left center;



}







.ys3 .ys_righnr dt {



	background: url(../images/ys_em3.png) no-repeat left center;



}







.ys4 .ys_righnr dt {



	background: url(../images/ys_em4.png) no-repeat left center;



}







.ys5 .ys_righnr dt {



	background: url(../images/ys_em5.png) no-repeat left center;



}







.ys6 .ys_righnr dt {



	background: url(../images/ys_em6.png) no-repeat left center;



}







.ys_righnr dt h4 {



	font-size: 30px;



	color: #FFF;



	padding-top: 10px;



}







.ys_righnr dt p {



	font-size: 14px;



	text-transform: uppercase;



	font-family: arial;



	color: #FFF;



	padding-top: 4px;



}







.ys_righnr  dd {



	line-height: 30px;



	font-size: 15px;



	color: #FFF;



	width: 450px;



	margin: 20px 0 0 10px;



}







.ys_nav .ys_nav1 {



	top: 500px;



	left: 17px;



}







.ys_nav .ys_nav2 {



	top: 530px;



	left: 214px;



}







.ys_nav .ys_nav3 {



	top: 590px;



	left: 413px;



}







.ys_nav .ys_nav4 {



	top: 590px;



	left: 610px;



}







.ys_nav .ys_nav5 {



	top: 530px;



	left: 810px;



}







.ys_nav .ys_nav6 {



	top: 500px;



	left: 1014px;



}







.td_dbg {



	background: url(../images/td_dbg.jpg) no-repeat top center;



	height: 587px;



}







.td_r li {



	width: 194px;



	float: left;



	text-align: center;



	margin: 0px  30px 40px 0;



}







.td_r li h5 {



	font-size: 24px;



	color: #d5171d;



	font-weight: normal;



	margin: 10px 0;



}







.td_r li p {



	font-size: 16px;



	color: #3f3f3f;



	line-height: 30px;



}







.td_r {



	width: 680px;



	margin: 20px 0 0 40px;



}







.gg2 {



	background: url(../images/gg2.jpg) no-repeat top center;



	height: 205px;



}







.gg2_tel {



	font-size: 14px;



	color: #FFF;



	margin: 30px 0 0 800px;



}







.gg2_tel p {



	background: url(../images/gg_tel.jpg) no-repeat left center;



	padding-left: 60px;



}







.gg2_tel span {



	font-size: 25px;



	font-family: impact;



	display: block;



	margin-top: 2px;



}







.gg2_tel a {



	margin: 20px 0 0 30px;



	display: block;



}







.fw_n {



	background: url(../images/fw_pic.jpg) no-repeat top center;



	height: 90px;



	padding-top: 170px;



}







.fw_n li {



	width: 220px;



	float: left;



	text-align: center;



	margin: 0 17px 0 50px;



}







.fw_n h5 {



	font-size: 18px;



	color: #d5171d;



	font-weight: normal;



}







.fw_n p {



	line-height: 24px;



	color: #525252;



}







.fw_n li a {



	width: 200px;



	height: 40px;



	display: block;



	background: #d5171d;



	line-height: 40px;



	font-size: 18px;



	color: #FFF;



	text-align: center;



	margin: 0 auto;



}







.about_dbg {



	background: url(../images/about_dbg.jpg) no-repeat top center;



	height: 679px;



}







.kehu_left {



	width: 670px;



}







.kehu_left  ul {



	width: 750px;



}







.kehu_left  li {



	width: 334px;



	height: 310px;



	float: left;



	margin-right: 30px;



}







.kehu_left  li .pic img {



	width: 334px;



	height: 256px;



}







.kehu_left  li .info {



	background: #ebebeb;



	text-align: center;



	height: 48px;



	text-align: center;



	display: block;



}







.kehu_left  li .info a {



	line-height: 48px;



	height: 48px;



	margin: 0 auto;



	display: block;



	overflow: hidden;



}







.kehu_right {



	width: 454px;



}







.kehu_right  li {



	height: 82px;



	margin-bottom: 28px;



}







.kehu_right .info {



	width: 366px;



	float: left;



	border-bottom: 1px solid #ebebeb;



	height: 82px;



}







.kehu_right .da {



	background: #ebebeb;



	width: 85px;



	height: 78px;



	float: right;



	padding-top: 4px;



}







.kehu_right .info a {



	height: 30px;



	line-height: 30px;



	display: block;



	overflow: hidden;



	color: #000;



}







.kehu_right .info p {



	line-height: 22px;



	height: 44px;



	color: #686868;



	font-size: 13px;



	display: block;



	overflow: hidden;



}







.kehu_right li:hover .da {



	background: #1e1e1e;



}







.kehu_right li:hover .da {



	color: #FFF;



}







.kehu_right li:hover .da p {



	color: #FFF;



}







.kehu_right .da {



	font-size: 36px;



	color: #545454;



	text-align: center;



}







.kehu_right .da p {



	color: #545454;



	margin-top: 4px;



	font-size: 14px;



}







.about_left h3 a {



	font-size: 16px;



	line-height: 30px;



	color: #FFF;



	padding: 120px 0 0 40px;



	text-align: left;



	display: block;



}







.about_left h3 {



	margin: 90px 0 0 40px;



}







.about_nc {



	width: 510px;



	margin: 56px 35px 0 0;



}







.about_nc h3 a {



	height: 40px;



	line-height: 40px;



	display: block;



	overflow: hidden;



	background: url(../images/about_x.jpg) no-repeat bottom left;



	padding-bottom: 10px;



	font-size: 20px;



	margin-top: 10px;



}







.about_nnn {



	line-height: 30px;



	height: 180px;



	display: block;



	overflow: hidden;



	color: #383838;



	margin-top: 10px;



}







.about_nnn a {



	color: #d5171d;



}







.about_nc img {



	width: 510px;



	height: 318px;



}







.fc_n {



	margin-top: 20px;



	position: relative;



	height: 222px;



	overflow: hidden;



}







.fc_n .bd ul {



	overflow: hidden;



	zoom: 1;



}







.fc_n .bd ul li {



	margin-right: 35px;



	float: left;



	_display: inline;



	overflow: hidden;



	text-align: center;



	position: relative;



}







.fc_n .bd ul li img {



	width: 268px;



	height: 188px;



	display: block;



}







.fc_n .bd ul li p {



	line-height: 34px;



	height: 34px;



	display: block;



	overflow: hidden;



}







.fc_t {



	margin-top: 20px;



}







.fc_t h3 {



	float: left;



}







.fc_t a.fc_more {



	float: right;



	margin-top: 30px;



}







.news_nav h3 a {



	font-size: 18px;



	color: #2f2f2f;



}







.news_nav a.more {



	float: right;



	display: block;



	padding-top: 8px;



}







.news_nav {



	background: url(../images/news_x.jpg) no-repeat bottom center;



	height: 40px;



	line-height: 40px;



	display: block;



	padding-bottom: 6px;



}







.news_nav h3 {



	float: left;



	background: url(../images/news_t.jpg) no-repeat left center;



	padding-left: 50px;



}







.news_nav h3 span {



	font-size: 14px;



	color: #c2bcbc;



	text-transform: uppercase;



	padding-left: 5px;



}







.news_left {



	width: 570px;



}







.news_left_n {



	margin-top: 20px;



	height: 345px;



	overflow: hidden;



}







.news_left_n li {



	height: 90px;



	padding-bottom: 12px;



	border-bottom: 1px solid #e9e9e9;



	margin-top: 12px;



}







.news_left_n li .pic {



	width: 140px;



	height: 90px;



	border-radius: 6px;



	float: left;



}







.news_left_n li .pic img {



	width: 140px;



	height: 90px;



	border-radius: 6px;



}







.news_left_n li .info a {



	height: 24px;



	line-height: 24px;



	display: block;



	overflow: hidden;



	color: #272727;



}







.news_left_n li .info {



	width: 412px;



	float: right;



}







.news_left_n li .info span {



	background: url(../images/news_d.jpg) no-repeat left center;



	padding-left: 14px;



	color: #a8a8a8;



}







.news_left_n li .info p {



	height: 40px;



	line-height: 20px;



	display: block;



	overflow: hidden;



	color: #6c6c6c;



	margin-top: 4px;



	font-size: 13px;



}







.news_right_n {



	background: #f1f1f1;



	width: 570px;



	height: 350px;



	margin-top: 30px;



}







.news_right {



	width: 570px;



}







.news_right_n ul {



	padding: 10px 20px 20px;



	font-size: 13px;



}







.news_right_n li {



	height: 34px;



	line-height: 34px;



	border-bottom: 1px solid #ddd;



}







.news_right_n li a {



	color: #363636;



	width: 390px;



	background: url(../images/news_tag.jpg) no-repeat left center;



	padding-left: 10px;



}







.news_right_n li span {



	float: right;



	color: #a8a8a8;



}







.news_right_n dl dt img {



	width: 215px;



	height: 108px;



	border-radius: 10px;



}







.news_right_n dl dt {



	float: left;



}







.news_right_n dl dd {



}







.news_right_n dl {



	height: 150px;



	border-bottom: 1px solid #FFF;



	padding: 15px 20px;



}







.news_right_n dl dd a {



	height: 30px;



	line-height: 30px;



	display: block;



	overflow: hidden;



	color: #272727;



}







.news_right_n dl dd {



	width: 300px;



	float: right;



}







.news_right_n dl dd span {



	color: #a8a8a8;



	margin: 5px 0;



	display: block;



}







.news_right_n dl dd p {



	height: 48px;



	line-height: 24px;



	display: block;



	overflow: hidden;



	color: #6c6c6c;



	margin-top: 4px;



	font-size: 13px;



}







.link {



	margin-top: 20px;



}







.link h4 {



	float: left;



}







.link_n {



	width: 980px;



	float: left;



	margin: 20px 0  0 20px;



}







.link_n a {



	background: url(../images/link_tag.jpg) no-repeat left center;



	padding: 0 20px 0 20px;



}







.none {



	display: none;



}







.block {



	display: block;



}







/* 动画特效 */



@-webkit-keyframes flipInX {



	0% {



		-webkit-transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







	40% {



		-webkit-transform: perspective(400px) rotateX(-10deg);



	}







	70% {



		-webkit-transform: perspective(400px) rotateX(10deg);



	}







	100% {



		-webkit-transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







}







@-moz-keyframes flipInX {



	0% {



		-moz-transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







	40% {



		-moz-transform: perspective(400px) rotateX(-10deg);



	}







	70% {



		-moz-transform: perspective(400px) rotateX(10deg);



	}







	100% {



		-moz-transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







}







@-ms-keyframes flipInX {



	0% {



		-ms-transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







	40% {



		-ms-transform: perspective(400px) rotateX(-10deg);



	}







	70% {



		-ms-transform: perspective(400px) rotateX(10deg);



	}







	100% {



		-ms-transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







}







@keyframes flipInX {



	0% {



		transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







	40% {



		transform: perspective(400px) rotateX(-10deg);



	}







	70% {



		transform: perspective(400px) rotateX(10deg);



	}







	100% {



		transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







}







.flipInX {



	-webkit-backface-visibility: visible !important;



	-webkit-animation-name: flipInX;



	-moz-backface-visibility: visible !important;



	-moz-animation-name: flipInX;



	-ms-backface-visibility: visible !important;



	-ms-animation-name: flipInX;



	backface-visibility: visible !important;



	animation-name: flipInX;



}







@-webkit-keyframes flipOutX {



	0% {



		-webkit-transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







	100% {



		-webkit-transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







}







@-moz-keyframes flipOutX {



	0% {



		-moz-transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







	100% {



		-moz-transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







}







@-ms-keyframes flipOutX {



	0% {



		-ms-transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







	100% {



		-ms-transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







}







@keyframes flipOutX {



	0% {



		transform: perspective(400px) rotateX(0deg);



		opacity: 1;



	}







	100% {



		transform: perspective(400px) rotateX(90deg);



		opacity: 0;



	}







}







.flipOutX {



	-webkit-animation-name: flipOutX;



	-webkit-backface-visibility: visible !important;



	-moz-animation-name: flipOutX;



	-moz-backface-visibility: visible !important;



	-ms-animation-name: flipOutX;



	-ms-backface-visibility: visible !important;



	animation-name: flipOutX;



	backface-visibility: visible !important;



}







@-webkit-keyframes fadeIn {



	0% {



		opacity: 0;



	}







	100% {



		opacity: 1;



	}







}







@-moz-keyframes fadeIn {



	0% {



		opacity: 0;



	}







	100% {



		opacity: 1;



	}







}







@-ms-keyframes fadeIn {



	0% {



		opacity: 0;



	}







	100% {



		opacity: 1;



	}







}







@keyframes fadeIn {



	0% {



		opacity: 0;



	}







	100% {



		opacity: 1;



	}







}







.fadeIn {



	height: 100%;



	-webkit-animation-name: fadeIn;



	-moz-animation-name: fadeIn;



	-ms-animation-name: fadeIn;



	animation-name: fadeIn;



}







@-webkit-keyframes fadeOut {



	0% {



		opacity: 1;



	}







	100% {



		opacity: 0;



	}







}







@-moz-keyframes fadeOut {



	0% {



		opacity: 1;



	}







	100% {



		opacity: 0;



	}







}







@-ms-keyframes fadeOut {



	0% {



		opacity: 1;



	}







	100% {



		opacity: 0;



	}







}







@keyframes fadeOut {



	0% {



		opacity: 1;



	}







	100% {



		opacity: 0;



	}







}







.fadeOut {



	-webkit-animation-name: fadeOut;



	-moz-animation-name: fadeOut;



	-ms-animation-name: fadeOut;



	animation-name: fadeOut;



	height: 0;



}







@-webkit-keyframes tada {



	0% {



		-webkit-transform: scale(1);



	}







	10%, 20% {



		-webkit-transform: scale(0.9) rotate(-3deg);



	}







	30%, 50%, 70%, 90% {



		-webkit-transform: scale(1.1) rotate(3deg);



	}







	40%, 60%, 80% {



		-webkit-transform: scale(1.1) rotate(-3deg);



	}







	100% {



		-webkit-transform: scale(1) rotate(0);



	}







}







@-moz-keyframes tada {



	0% {



		-moz-transform: scale(1);



	}







	10%, 20% {



		-moz-transform: scale(0.9) rotate(-3deg);



	}







	30%, 50%, 70%, 90% {



		-moz-transform: scale(1.1) rotate(3deg);



	}







	40%, 60%, 80% {



		-moz-transform: scale(1.1) rotate(-3deg);



	}







	100% {



		-moz-transform: scale(1) rotate(0);



	}







}







@-ms-keyframes tada {



	0% {



		-ms-transform: scale(1);



	}







	10%, 20% {



		-ms-transform: scale(0.9) rotate(-3deg);



	}







	30%, 50%, 70%, 90% {



		-ms-transform: scale(1.1) rotate(3deg);



	}







	40%, 60%, 80% {



		-ms-transform: scale(1.1) rotate(-3deg);



	}







	100% {



		-ms-transform: scale(1) rotate(0);



	}







}







@keyframes tada {



	0% {



		transform: scale(1);



	}







	10%, 20% {



		transform: scale(0.9) rotate(-3deg);



	}







	30%, 50%, 70%, 90% {



		transform: scale(1.1) rotate(3deg);



	}







	40%, 60%, 80% {



		transform: scale(1.1) rotate(-3deg);



	}







	100% {



		transform: scale(1) rotate(0);



	}







}







@-webkit-keyframes flash {



	0%, 50%, 100% {



		opacity: 0;



	}







	25%, 75% {



		opacity: 1;



	}







}







@-moz-keyframes flash {



	0%, 50%, 100% {



		opacity: 0;



	}







	25%, 75% {



		opacity: 1;



	}







}







@-ms-keyframes flash {



	0%, 50%, 100% {



		opacity: 0;



	}







	25%, 75% {



		opacity: 1;



	}







}







@keyframes flash {



	0%, 50%, 100% {



		opacity: 0;



	}







	25%, 75% {



		opacity: 1;



	}







}







@-webkit-keyframes bounceInUp {



	0% {



		opacity: 0;



		-webkit-transform: translateY(2000px);



	}







	60% {



		opacity: 1;



		-webkit-transform: translateY(-30px);



	}







	80% {



		-webkit-transform: translateY(10px);



	}







	100% {



		-webkit-transform: translateY(0);



	}







}







@-moz-keyframes bounceInUp {



	0% {



		opacity: 0;



		-moz-transform: translateY(2000px);



	}







	60% {



		opacity: 1;



		-moz-transform: translateY(-30px);



	}







	80% {



		-moz-transform: translateY(10px);



	}







	100% {



		-moz-transform: translateY(0);



	}







}







@-ms-keyframes bounceInUp {



	0% {



		opacity: 0;



		-ms-transform: translateY(2000px);



	}







	60% {



		opacity: 1;



		-ms-transform: translateY(-30px);



	}







	80% {



		-ms-transform: translateY(10px);



	}







	100% {



		-ms-transform: translateY(0);



	}







}







@keyframes bounceInUp {



	0% {



		opacity: 0;



		transform: translateY(2000px);



	}







	60% {



		opacity: 1;



		transform: translateY(-30px);



	}







	80% {



		transform: translateY(10px);



	}







	100% {



		transform: translateY(0);



	}







}







.animated.bounceInUp {



	-webkit-animation-name: bounceInUp;



	-moz-animation-name: bounceInUp;



	-ms-animation-name: bounceInUp;



	animation-name: bounceInUp;



}







@-webkit-keyframes bounceInDown {



	0% {



		opacity: 0;



		-webkit-transform: translateY(-2000px);



	}







	60% {



		opacity: 1;



		-webkit-transform: translateY(30px);



	}







	80% {



		-webkit-transform: translateY(-10px);



	}







	100% {



		-webkit-transform: translateY(0);



	}







}







@-moz-keyframes bounceInDown {



	0% {



		opacity: 0;



		-moz-transform: translateY(-2000px);



	}







	60% {



		opacity: 1;



		-moz-transform: translateY(30px);



	}







	80% {



		-moz-transform: translateY(-10px);



	}







	100% {



		-moz-transform: translateY(0);



	}







}







@-ms-keyframes bounceInDown {



	0% {



		opacity: 0;



		-ms-transform: translateY(-2000px);



	}







	60% {



		opacity: 1;



		-ms-transform: translateY(30px);



	}







	80% {



		-ms-transform: translateY(-10px);



	}







	100% {



		-ms-transform: translateY(0);



	}







}







@keyframes bounceInDown {



	0% {



		opacity: 0;



		transform: translateY(-2000px);



	}







	60% {



		opacity: 1;



		transform: translateY(30px);



	}







	80% {



		transform: translateY(-10px);



	}







	100% {



		transform: translateY(0);



	}







}







.animated.bounceInDown {



	-webkit-animation-name: bounceInDown;



	-moz-animation-name: bounceInDown;



	-ms-animation-name: bounceInDown;



	animation-name: bounceInDown;



}







@-webkit-keyframes bounceInLeft {



	0% {



		opacity: 0;



		-webkit-transform: translateX(-2000px);



	}







	60% {



		opacity: 1;



		-webkit-transform: translateX(30px);



	}







	80% {



		-webkit-transform: translateX(-10px);



	}







	100% {



		-webkit-transform: translateX(0);



	}







}







@-moz-keyframes bounceInLeft {



	0% {



		opacity: 0;



		-moz-transform: translateX(-2000px);



	}







	60% {



		opacity: 1;



		-moz-transform: translateX(30px);



	}







	80% {



		-moz-transform: translateX(-10px);



	}







	100% {



		-moz-transform: translateX(0);



	}







}







@-ms-keyframes bounceInLeft {



	0% {



		opacity: 0;



		-ms-transform: translateX(-2000px);



	}







	60% {



		opacity: 1;



		-ms-transform: translateX(30px);



	}







	80% {



		-ms-transform: translateX(-10px);



	}







	100% {



		-ms-transform: translateX(0);



	}







}







@keyframes bounceInLeft {



	0% {



		opacity: 0;



		transform: translateX(-2000px);



	}







	60% {



		opacity: 1;



		transform: translateX(30px);



	}







	80% {



		transform: translateX(-10px);



	}







	100% {



		transform: translateX(0);



	}







}







.animated.bounceInLeft {



	-webkit-animation-name: bounceInLeft;



	-moz-animation-name: bounceInLeft;



	-ms-animation-name: bounceInLeft;



	animation-name: bounceInLeft;



}







@-webkit-keyframes bounceInRight {



	0% {



		opacity: 0;



		-webkit-transform: translateX(2000px);



	}







	60% {



		opacity: 1;



		-webkit-transform: translateX(-30px);



	}







	80% {



		-webkit-transform: translateX(10px);



	}







	100% {



		-webkit-transform: translateX(0);



	}







}







@-moz-keyframes bounceInRight {



	0% {



		opacity: 0;



		-moz-transform: translateX(2000px);



	}







	60% {



		opacity: 1;



		-moz-transform: translateX(-30px);



	}







	80% {



		-moz-transform: translateX(10px);



	}







	100% {



		-moz-transform: translateX(0);



	}







}







@-ms-keyframes bounceInRight {



	0% {



		opacity: 0;



		-ms-transform: translateX(2000px);



	}







	60% {



		opacity: 1;



		-ms-transform: translateX(-30px);



	}







	80% {



		-ms-transform: translateX(10px);



	}







	100% {



		-ms-transform: translateX(0);



	}







}







@keyframes bounceInRight {



	0% {



		opacity: 0;



		transform: translateX(2000px);



	}







	60% {



		opacity: 1;



		transform: translateX(-30px);



	}







	80% {



		transform: translateX(10px);



	}







	100% {



		transform: translateX(0);



	}







}







.animated.bounceInRight {



	-webkit-animation-name: bounceInRight;



	-moz-animation-name: bounceInRight;



	-ms-animation-name: bounceInRight;



	animation-name: bounceInRight;



}







@-webkit-keyframes slideInRight {



	0% {



		opacity: 0;



		-webkit-transform: translateX(2000px);



	}







	100% {



		opacity: 1;



		-webkit-transform: translateX(0);



	}







}







@-moz-keyframes slideInRight {



	0% {



		opacity: 0;



		-moz-transform: translateX(2000px);



	}







	100% {



		opacity: 1;



		-moz-transform: translateX(0);



	}







}







@-ms-keyframes slideInRight {



	0% {



		opacity: 0;



		-ms-transform: translateX(2000px);



	}







	100% {



		opacity: 1;



		-ms-transform: translateX(0);



	}







}







@keyframes slideInRight {



	0% {



		opacity: 0;



		transform: translateX(2000px);



	}







	100% {



		opacity: 1;



		transform: translateX(0);



	}







}







@-webkit-keyframes slideOutLeft {



	0% {



		opacity: 1;



		-webkit-transform: translateX(0);



	}







	100% {



		opacity: 0;



		-webkit-transform: translateX(-2000px);



	}







}







@-moz-keyframes slideOutLeft {



	0% {



		opacity: 1;



		-moz-transform: translateX(0);



	}







	100% {



		opacity: 0;



		-moz-transform: translateX(-2000px);



	}







}







@-ms-keyframes slideOutLeft {



	0% {



		opacity: 1;



		-ms-transform: translateX(0);



	}







	100% {



		opacity: 0;



		-ms-transform: translateX(-2000px);



	}







}







@keyframes slideOutLeft {



	0% {



		opacity: 1;



		transform: translateX(0);



	}







	100% {



		opacity: 0;



		transform: translateX(-2000px);



	}







}







/* Above all are from animate.css by daneden http://daneden.me/animate/ */



.from-top {



	-webkit-transform-origin: 0% 0%;



	-moz-transform-origin: 0% 0%;



	-ms-transform-origin: 0% 0%;



	transform-origin: 0% 0%;



}







.from-left {



	-webkit-transform-origin: 0% 100%;



	-moz-transform-origin: 0% 100%;



	-ms-transform-origin: 0% 100%;



	transform-origin: 0% 100%;



}







.from-top, .from-left {



	-webkit-animation: enter-clockwise 0.23s ease-out;



	-moz-animation: enter-clockwise 0.23s ease-out;



	-ms-animation: enter-clockwise 0.23s ease-out;



	animation: enter-clockwise 0.23s ease-out;



}







.from-right {



	-webkit-transform-origin: 100% 100%;



	-moz-transform-origin: 100% 100%;



	-ms-transform-origin: 100% 100%;



	transform-origin: 100% 100%;



}







.from-bottom {



	-webkit-transform-origin: 0% 100%;



	-moz-transform-origin: 0% 100%;



	-ms-transform-origin: 0% 100%;



	transform-origin: 0% 100%;



}







.from-right, .from-bottom {



	-webkit-animation: enter-anti-clockwise 0.23s ease-out;



	-moz-animation: enter-anti-clockwise 0.23s ease-out;



	-ms-animation: enter-anti-clockwise 0.23s ease-out;



	animation: enter-anti-clockwise 0.23s ease-out;



}







.to-top {



	-webkit-transform-origin: 0% 0%;



	-moz-transform-origin: 0% 0%;



	-ms-transform-origin: 0% 0%;



	transform-origin: 0% 0%;



}







.to-left {



	-webkit-transform-origin: 0% 100%;



	-moz-transform-origin: 0% 100%;



	-ms-transform-origin: 0% 100%;



	transform-origin: 0% 100%;



}







.to-top, .to-left {



	-webkit-animation: leave-anti-clockwise 0.23s ease-out;



	-moz-animation: leave-anti-clockwise 0.23s ease-out;



	-ms-animation: leave-anti-clockwise 0.23s ease-out;



	animation: leave-anti-clockwise 0.23s ease-out;



}







.to-right {



	-webkit-transform-origin: 100% 100%;



	-moz-transform-origin: 100% 100%;



	-ms-transform-origin: 100% 100%;



	transform-origin: 100% 100%;



}







.to-bottom {



	-webkit-transform-origin: 0% 100%;



	-moz-transform-origin: 0% 100%;



	-ms-transform-origin: 0% 100%;



	transform-origin: 0% 100%;



}







.to-right, .to-bottom {



	-webkit-animation: leave-clockwise 0.23s ease-out;



	-moz-animation: leave-clockwise 0.23s ease-out;



	-ms-animation: leave-clockwise 0.23s ease-out;



	animation: leave-clockwise 0.23s ease-out;



}







@-webkit-keyframes enter-clockwise {



	from {



		z-index: 3;



		-webkit-transform: rotate(-90deg);



	}







	to {



		z-index: 3;



		-webkit-transform: rotate(0deg);



	}







}







@-moz-keyframes enter-clockwise {



	from {



		z-index: 3;



		-moz-transform: rotate(-90deg);



	}







	to {



		z-index: 3;



		-moz-transform: rotate(0deg);



	}







}







@-ms-keyframes enter-clockwise {



	from {



		z-index: 3;



		-ms-transform: rotate(-90deg);



	}







	to {



		z-index: 3;



		-ms-transform: rotate(0deg);



	}







}







@keyframes enter-clockwise {



	from {



		z-index: 3;



		transform: rotate(-90deg);



	}







	to {



		z-index: 3;



		transform: rotate(0deg);



	}







}







@-webkit-keyframes enter-anti-clockwise {



	from {



		z-index: 3;



		-webkit-transform: rotate(90deg);



	}







	to {



		z-index: 3;



		-webkit-transform: rotate(0deg);



	}







}







@-moz-keyframes enter-anti-clockwise {



	from {



		z-index: 3;



		-moz-transform: rotate(90deg);



	}







	to {



		z-index: 3;



		-moz-transform: rotate(0deg);



	}







}







@-ms-keyframes enter-anti-clockwise {



	from {



		z-index: 3;



		-ms-transform: rotate(90deg);



	}







	to {



		z-index: 3;



		-ms-transform: rotate(0deg);



	}







}







@keyframes enter-anti-clockwise {



	from {



		z-index: 3;



		transform: rotate(90deg);



	}







	to {



		z-index: 3;



		transform: rotate(0deg);



	}







}







@-webkit-keyframes leave-clockwise {



	from {



		z-index: 3;



		-webkit-transform: rotate(0deg);



	}







	to {



		z-index: 3;



		-webkit-transform: rotate(90deg);



	}







}







@-moz-keyframes leave-clockwise {



	from {



		z-index: 3;



		-moz-transform: rotate(0deg);



	}







	to {



		z-index: 3;



		-moz-transform: rotate(90deg);



	}







}







@-ms-keyframes leave-clockwise {



	from {



		z-index: 3;



		-ms-transform: rotate(0deg);



	}







	to {



		z-index: 3;



		-ms-transform: rotate(90deg);



	}







}







@keyframes leave-clockwise {



	from {



		z-index: 3;



		transform: rotate(0deg);



	}







	to {



		z-index: 3;



		transform: rotate(90deg);



	}







}







@-webkit-keyframes leave-anti-clockwise {



	from {



		z-index: 3;



		-webkit-transform: rotate(0deg);



	}







	to {



		z-index: 3;



		-webkit-transform: rotate(-90deg);



	}







}







@-moz-keyframes leave-anti-clockwise {



	from {



		z-index: 3;



		-moz-transform: rotate(0deg);



	}







	to {



		z-index: 3;



		-moz-transform: rotate(-90deg);



	}







}







@-ms-keyframes leave-anti-clockwise {



	from {



		z-index: 3;



		-ms-transform: rotate(0deg);



	}







	to {



		z-index: 3;



		-ms-transform: rotate(-90deg);



	}







}







@keyframes leave-anti-clockwise {



	from {



		z-index: 3;



		transform: rotate(0deg);



	}







	to {



		z-index: 3;



		transform: rotate(-90deg);



	}







}







@-webkit-keyframes slideDown {



	from {



		-webkit-transform: translateY(-75px);



	}







	to {



		-webkit-transform: translateY(0px);



	}







}







@-moz-keyframes slideDown {



	from {



		-moz-transform: translateY(-75px);



	}







	to {



		-moz-transform: translateY(0px);



	}







}







@-ms-keyframes slideDown {



	from {



		-ms-transform: translateY(-75px);



	}







	to {



		-ms-transform: translateY(0px);



	}







}







@keyframes slideDown {



	from {



		transform: translateY(-75px);



	}







	to {



		transform: translateY(0px);



	}







}







@-webkit-keyframes slideUp {



	from {



		-webkit-transform: translateY(0px);



	}







	to {



		-webkit-transform: translateY(-75px);



	}







}







@-moz-keyframes slideUp {



	from {



		-moz-transform: translateY(0px);



	}







	to {



		-moz-transform: translateY(-75px);



	}







}







@-ms-keyframes slideUp {



	from {



		-ms-transform: translateY(0px);



	}







	to {



		-ms-transform: translateY(-75px);



	}







}







@keyframes slideUp {



	from {



		transform: translateY(0px);



	}







	to {



		transform: translateY(-75px);



	}







}







@-webkit-keyframes bounceStrenth {



	0% {



		opacity: 0;



		-webkit-transform: scale(0);



	}







	60% {



		opacity: 1;



		-webkit-transform: scale(1.2);



	}







	100% {



		-webkit-transform: scale(1);



	}







}







@-moz-keyframes bounceStrenth {



	0% {



		opacity: 0;



		-moz-transform: scale(0);



	}







	60% {



		opacity: 1;



		-moz-transform: scale(1.2);



	}







	100% {



		-moz-transform: scale(1);



	}







}







@-ms-keyframes bounceStrenth {



	0% {



		opacity: 0;



		-ms-transform: scale(0);



	}







	60% {



		opacity: 1;



		-ms-transform: scale(1.2);



	}







	100% {



		-ms-transform: scale(1);



	}







}







@keyframes bounceStrenth {



	0% {



		opacity: 0;



		transform: scale(0);



	}







	60% {



		opacity: 1;



		transform: scale(1.2);



	}







	100% {



		transform: scale(1);



	}







}







@-webkit-keyframes bounceBigStrenth {



	0% {



		opacity: 0;



		-webkit-transform: scale(0);



	}







	60% {



		opacity: 1;



		-webkit-transform: scale(1.4);



	}







	100% {



		-webkit-transform: scale(1);



	}







}







@-moz-keyframes bounceBigStrenth {



	0% {



		opacity: 0;



		-moz-transform: scale(0);



	}







	60% {



		opacity: 1;



		-moz-transform: scale(1.4);



	}







	100% {



		-moz-transform: scale(1);



	}







}







@-ms-keyframes bounceBigStrenth {



	0% {



		opacity: 0;



		-ms-transform: scale(0);



	}







	60% {



		opacity: 1;



		-ms-transform: scale(1.4);



	}







	100% {



		-ms-transform: scale(1);



	}







}







@keyframes bounceBigStrenth {



	0% {



		opacity: 0;



		transform: scale(0);



	}







	60% {



		opacity: 1;



		transform: scale(1.4);



	}







	100% {



		transform: scale(1);



	}







}







@-webkit-keyframes spin {



	from {



		-webkit-transform: rotate(0deg);



	}







	to {



		-webkit-transform: rotate(360deg);



	}







}







@-moz-keyframes spin {



	from {



		-moz-transform: rotate(0deg);



	}







	to {



		-moz-transform: rotate(360deg);



	}







}







@-ms-keyframes spin {



	from {



		-ms-transform: rotate(0deg);



	}







	to {



		-ms-transform: rotate(360deg);



	}







}







@keyframes spin {



	from {



		transform: rotate(0deg);



	}







	to {



		transform: rotate(360deg);



	}







}









/* DaTouWang URL: www.datouwang.com */

.clear::after {

  content: "";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

}

.animate {

  transition: all .5s;

}

.video-player {

  display: block;

  width: 100%;

  min-width: 800px;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  overflow: hidden;

  border: 5px solid #000;

  background-color: #000000;

}

.video-player > video {

  display: block;

  margin: 0 auto;

  transition: all .5s;

}

.video-player .video-prompt {

  display: block;

  width: 180px;

  height: 30px;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  color: #999;

  font-size: 16px;

  text-align: center;

  line-height: 25px;

  padding-left: 10px;

  background: url(img/loading.gif) left no-repeat;

  background-size: 30px 30px;

}

.video-player .videoStatus {

  transform: rotateY(180deg);

}

.video-player .video-title {

  width: 100%;

  height: 50px;

  position: absolute;

  left: 0;

  right: 0;

  top: -50px;

  margin: auto;

  color: #999;

  font-size: 18px;

  text-align: center;

  line-height: 50px;

  background-color: rgba(0, 0, 0, 0.5);

  transition: all .5s;

}

.video-player .video-controls {

  width: 100%;

  height: 60px;

  position: absolute;

  left: 0;

  right: 0;

  bottom: -60px;

  margin: auto;

  background-color: rgba(0, 0, 0, 0.5);

  transition: all .5s;

}

.video-player .video-controls .video-seek {

  width: 94%;

  height: 6px;

  position: absolute;

  top: 10px;

  left: 0;

  right: 0;

  margin: auto;

  cursor: pointer;

  border-radius: 2px;

  background-color: #999;

}

.video-player .video-controls .video-seek .seek-con {

  width: 0;

  height: 6px;

  position: absolute;

  top: 0;

  left: 0;

  pointer-events: none;

  border-radius: 2px;

}

.video-player .video-controls .video-seek .seek-buffer {

  width: 0;

  height: 6px;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 2px;

  background-color: #EEEEEE;

  opacity: .5;

}

.video-player .video-controls .video-seek .seek-slider {

  width: 16px;

  height: 16px;

  position: absolute;

  top: -5px;

  left: 0;

  cursor: pointer;

  border-radius: 16px;

}

.video-player .video-controls .video-seek > .viewBox {

  display: none;

  width: 100px;

  height: 70px;

  position: absolute;

  bottom: 15px;

  left: 50%;

  background-color: rgba(255, 255, 255, 0.2);

}

.video-player .video-controls .video-seek > .viewBox > video {

  display: block;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}

.video-player .video-controls .video-seek > .viewBox > span {

  display: block;

  width: 100%;

  position: absolute;

  left: 0;

  bottom: 0;

  color: #aaaaaa;

  font-size: 14px;

  line-height: 20px;

  text-indent: .25em;

}

.video-player .video-controls .video-seek > .viewBox > i {

  display: block;

  height: 0;

  width: 0;

  position: absolute;

  left: 44px;

  bottom: -6px;

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-top: 6px solid rgba(255, 255, 255, 0.2);

  border-bottom: none;

}

.video-player .video-controls .video-play {

  width: 20px;

  height: 20px;

  position: absolute;

  top: 30px;

  left: 3%;

  cursor: pointer;

  background: url(img/pause.png);

  background-size: 20px 20px;

}

.video-player .video-controls .video-pause {

  background: url(img/play.png);

  background-size: 20px 20px;

}

.video-player .video-controls .video-timer {

  width: 110px;

  height: 20px;

  position: absolute;

  top: 30px;

  left: calc(3% + 30px);

  color: #999999;

  font-size: 14px;

}

.video-player .video-controls .video-timer > span {

  line-height: 22px;

  pointer-events: none;

}

.video-player .video-controls .video-barrage {

  width: 20px;

  height: 20px;

  position: absolute;

  top: 30px;

  left: calc(3% + 150px);

  cursor: pointer;

  background: url(img/barrage.png);

  background-size: 20px 20px;

}

.video-player .video-controls .video-update {

  display: block;

  width: 20px;

  height: 20px;

  position: absolute;

  top: 30px;

  left: calc(3% + 180px);

  cursor: pointer;

  background: url(img/update.png);

  background-size: 20px 20px;

}

.video-player .video-controls .barrageClose::before {

  content: '';

  display: block;

  width: 8px;

  height: 8px;

  position: absolute;

  right: -2px;

  bottom: -2px;

  border: 2px solid rgba(255, 255, 255, 0.7);

  border-radius: 8px;

}

.video-player .video-controls .barrageClose::after {

  content: '';

  display: block;

  width: 8px;

  height: 2px;

  position: absolute;

  right: 0px;

  bottom: 3px;

  background-color: rgba(255, 255, 255, 0.7);

  transform: rotateZ(-120deg);

}

.video-player .video-controls .video-screen {

  width: 20px;

  height: 20px;

  position: absolute;

  top: 30px;

  right: 3%;

  cursor: pointer;

  background: url(img/enlarge.png);

  background-size: 20px 20px;

}

.video-player .video-controls .video-clarity {

  width: 60px;

  height: 30px;

  position: absolute;

  top: 25px;

  right: calc(3% + 30px);

}

.video-player .video-controls .video-clarity > p {

  color: #eee;

  font-size: 14px;

  text-align: center;

  line-height: 30px;

  cursor: pointer;

}

.video-player .video-controls .video-clarity > nav {

  display: none;

  width: 60px;

  padding: 5px 0;

  position: absolute;

  bottom: 25px;

  border-radius: 3px;

  background-color: rgba(0, 0, 0, 0.5);

}

.video-player .video-controls .video-clarity > nav > span {

  display: block;

  width: 60px;

  padding: 5px 0;

  color: #999999;

  font-size: 14px;

  text-align: center;

  line-height: 20px;

  cursor: pointer;

}

.video-player .video-controls .video-clarity > nav > span:hover {

  color: #eee;

}

.video-player .video-controls .video-clarity > nav .disabled,

.video-player .video-controls .video-clarity > nav .disabled:hover {

  cursor: auto;

}

.video-player .video-controls .video-clarity:hover > nav {

  display: block;

}

.video-player .video-controls .video-audio {

  display: block;

  width: 120px;

  position: absolute;

  top: 30px;

  right: calc(3% + 100px);

}

.video-player .video-controls .video-audio .audio-button {

  width: 30px;

  height: 20px;

  position: relative;

  float: left;

  cursor: pointer;

  background: url(img/audio.png);

  background-size: 30px 20px;

}

.video-player .video-controls .video-audio .audio-mute::before {

  content: '×';

  display: block;

  position: absolute;

  bottom: -2px;

  right: 5px;

  color: #ffffff;

  font-size: 20px;

}

.video-player .video-controls .video-audio .audio-box {

  width: 80px;

  height: 4px;

  position: relative;

  float: left;

  margin: 8px 0 0 10px;

  border-radius: 2px;

  background-color: #999;

}

.video-player .video-controls .video-audio .audio-box .audio-con {

  width: 0;

  height: 4px;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 2px;

}

.video-player .video-controls .video-audio .audio-box .audio-slider {

  width: 12px;

  height: 12px;

  position: absolute;

  top: -4px;

  left: 0;

  cursor: pointer;

  border-radius: 12px;

}

.video-player .video-controls .video-reversal {

  display: block;

  width: 20px;

  height: 20px;

  position: absolute;

  top: 30px;

  right: calc(3% + 230px);

  cursor: pointer;

  background: url(img/reversal.png);

  background-size: 20px 20px;

}

.video-player .video-controls .video-playSpeed {

  display: block;

  width: 30px;

  height: 20px;

  position: absolute;

  top: 30px;

  right: calc(3% + 260px);

  cursor: pointer;

  color: #eee;

  font-size: 14px;

  text-align: center;

  line-height: 20px;

}

.video-player .video-controls .video-status {

  display: none;

  width: 30px;

  height: 30px;

  position: absolute;

  top: -30px;

  left: 10px;

  background: url(img/loading.gif);

  background-size: 30px 30px;

}

.video-player .video-controls .video-comment {

  display: block;

  width: 280px;

  height: 30px;

  position: absolute;

  top: 25px;

  right: calc(3% + 300px);

  background-color: #eeeeee;

  border-radius: 3px;

}

.video-player .video-controls .video-comment > input[type=text] {

  display: block;

  width: 280px;

  height: 30px;

  padding: 5px 10px;

  position: relative;

  float: left;

  color: #666;

  font-size: 14px;

  line-height: 30px;

  border-radius: 3px;

  border: none;

  outline: none;

  background-color: #eeeeee;

  z-index: 10;

  transition: all .5s;

}

.video-player .video-controls .video-comment > div {

  width: 100%;

  height: 100%;

  position: absolute;

  bottom: 0;

  left: 0;

  z-index: 5;

}

.video-player .video-controls .video-comment > div > p {

  width: 20px;

  height: 20px;

  padding: 0;

  position: absolute;

  top: 5px;

  left: -30px;

  cursor: pointer;

  opacity: 0;

  background: url("img/setting.png") center no-repeat;

  background-size: 15px 15px;

  transition: all .5s;

}

.video-player .video-controls .video-comment > div > span {

  display: block;

  width: 35px;

  height: 20px;

  position: absolute;

  top: 5px;

  right: 5px;

  color: #333;

  font-size: 12px;

  text-align: center;

  line-height: 18px;

  border-radius: 2px;

  cursor: pointer;

  border: 1px solid #999;

  transition: all .5s;

}

.video-player .video-controls .video-comment .setBox {

  display: none;

  height: 110px;

  padding: 15px 20px 5px 20px;

  bottom: 31px;

  z-index: 200;

  background-color: #ffffff;

  border-top-left-radius: 5px;

  border-top-right-radius: 5px;

}

.video-player .video-controls .video-comment .setBox .group {

  width: 100%;

  height: 30px;

}

.video-player .video-controls .video-comment .setBox .group > label,

.video-player .video-controls .video-comment .setBox .group > span {

  float: left;

  color: #666666;

  font-size: 14px;

  line-height: 30px;

}

.video-player .video-controls .video-comment .setBox .group > span {

  font-size: 12px;

}

.video-player .video-controls .video-comment .setBox .group > input[type=color] {

  display: block;

  width: 23px;

  height: 26px;

  float: left;

  margin: 2px;

}

.video-player .video-controls .video-comment .setBox .group > input[type=number] {

  display: block;

  width: 45px;

  height: 22px;

  padding-left: 5px;

  margin: 3px 3px 3px 0;

  float: left;

  color: #666;

  font-size: 12px;

  line-height: 24px;

  border: 1px solid #999;

  border-radius: 2px;

  outline: none;

}

.video-player .video-controls .video-comment .setBox .group > input[type=radio] {

  display: block;

  width: 16px;

  height: 16px;

  margin: 7px;

  float: left;

  border: 1px solid #999;

  border-radius: 16px;

  outline: none;

}

.video-player .video-controls .video-comment .setBox .group:nth-child(2) > label:nth-child(4) {

  margin-left: 20px;

}

.video-player .video-controls .video-comment .setBox > i {

  display: block;

  width: 20px;

  height: 20px;

  position: absolute;

  top: 5px;

  right: 5px;

  color: #333;

  font-size: 18px;

  text-align: center;

  line-height: 20px;

  font-style: normal;

  cursor: pointer;

}

.video-player .video-controls .commentActive > input[type=text] {

  width: 215px;

  padding: 5px;

  margin-left: 25px;

}

.video-player .video-controls .commentActive > div > p {

  left: 5px;

  opacity: 1;

}

.video-player .screenShootBox {

  width: 100%;

  height: calc(100% - 110px);

  position: absolute;

  top: 50px;

  left: 0;

  z-index: 100;

  pointer-events: none;

  background: transparent;

}

.video-player .screenShootBox > .screenShoot {

  display: none;

  max-width: 40%;

  position: absolute;

  top: 0;

  pointer-events: none;

  background: transparent;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.video-player .screenShootBox > .screenShoot[data-action=marquee] {

  left: 110%;

}

.video-player .screenShootBox > .screenShoot[data-action=stay] {

  left: 0;

  right: 0;

  margin: auto;

  text-align: center;

}

.video-player:hover .video-title {

  top: 0;

}

.video-player:hover .video-controls {

  bottom: 0;

}

.fullScreen {

  height: 100vh;

  overflow: hidden;

}

.fullScreen .video-player {

  width: 100%;

  height: 100vh;

  position: fixed; 

  top: 0;

  left: 0;

  border: none;

}

.fullScreen .video-player .video-screen {

  background: url(img/micrify.png);

  background-size: 20px 20px;

}

.blue .video-controls .video-seek .seek-con {

  background-color: #00b4ed;

}

.blue .video-controls .video-seek .seek-slider {

  background-color: #00b4ed;

}

.blue .video-controls .video-clarity > nav .disabled,

.blue .video-controls .video-clarity > nav .disabled:hover {

  color: #00b4ed;

}

.blue .video-controls .video-audio .audio-box .audio-con {

  background-color: #00b4ed;

}

.blue .video-controls .video-audio .audio-box .audio-slider {

  background-color: #00b4ed;

}

* {

  margin: 0;

  padding: 0;

  border: 0;

  box-sizing: border-box;

}

section {

  position: fixed;

  width: 900px;

  height: 600px;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}