@charset "UTF-8";

*{
	padding: 0;
	margin: 0;
	font-family: "微软雅黑"
}

li{
	list-style: none;
}

a{
	text-decoration: none;
}

input,select{
	outline: none;
	border: none;
}

html{
	font-size: calc(100vw / 192);
	width: 100vw;
	height: 100vh;
}

.mid94{
	width: 94vw;
	margin: 0 auto;
}

.left{
	float: left;
}

.right{
	float: right;
}

body{
	background: url(../images/bg.jpg) center top no-repeat;
	background-size: cover
}

.header{
	width: 100%;
	height: 6rem;
	background: rgba(255,255,255,.07);
}

.header .left{
	color: #fff;
	font-size: 1.6rem;
	line-height: 6rem;
}

.header .left span{
	margin-right: 4.6rem;
}

.header .right li{
	float: left;
	margin-left: 4.6rem;
}

.header .right li a{
	color: #fff;
	font-size: 1.6rem;
	line-height: 6rem;
	padding-left: 2.4rem;
	background-size: 1.7rem 1.8rem;
}

.header .right li:nth-of-type(1) a{
	background: url(../images/icon_06.png) left center no-repeat;
	background-size: 1.7rem 1.8rem;
}

.header .right li:nth-of-type(2) a{
	background: url(../images/rz.png) left center no-repeat;
	background-size: 1.7rem 1.8rem;
}

.header .right li:nth-of-type(3) a{
	background: url(../images/icon_03.png) left center no-repeat;
	background-size: 1.7rem 1.8rem;
}

.header .right li:nth-of-type(4) a{
	background: url(../images/icon_08.png) left center no-repeat;
	background-size: 1.7rem 1.8rem;
}

.logo{
	text-align: center;
	margin: 3rem 0;
}

.logo img{
	width: 99.7rem;
}

.search{
	width: 103rem;
	height: 5.8rem;
	background: #fff;
	border-radius: 3rem;
	margin: 0 auto;
	line-height: 6.2rem;
}

.search input,.search select{
	color: #666;
	font-size: 2rem;
	background: none;
}

.search select{
	margin-left: 4.2rem;
	height: 5.8rem;	
	padding-right: 1.2rem;
}

.search input[type="text"]{
	border-left: solid 1px #999;
	text-indent: 2.6rem;
	margin-left: 3rem;
	width: 60rem;
}

.search input[type="button"]{
	width: 2.3rem;
	height: 2.3rem;
	background: url(../images/icon_18.png);
	float: right;
	margin: 1.6rem 3.4rem 0 0;
	background-size: contain;
	cursor: pointer;
}

.search a{
	color: #fff;
	float: right;
	margin-right: -15rem;
	font-size: 1.6rem;
	text-decoration: underline;
}

.mode{
	height: calc(100vh - 52rem);
	background: #333;
	margin-top: 4rem;
}

.mode ul{
	float: left;
	height: 100%;
}



.special_banner,.mode li {
	overflow: hidden;
	transition: background-size .3s;
}

.mode li a:hover{
	/*font-size: 3.3rem!important;*/
	/*background: none!important;*/
}

.special_banner,.mode ul li:hover{
	background-size: 120% 120%!important;
}

.mode li a{
	color: #fff;
	font-size: 3.2rem;
	font-weight: bold;
	width: 100%;
	height: 100%;
	display: block;
	padding-left: 4rem;
	box-sizing: border-box;
}

.mode li a.black{
	background-color: rgba(0,0,0,.57);
}

.mode li a.blue{
	background-color: rgba(30,58,151,.72);
}

.mode li a.green{
	background-color: rgba(10,91,46,.7);
}

.mode li a.skyblue{
	background-color: rgba(30,144,151,.7);
}

.mode li a.lh100{
	height: 100%;
	line-height: calc((100vh - 54rem) / 4);
}

.mode li a.lh10{
	height: 100%;
	line-height: calc(100vh - 52rem);
	text-align: center;
	padding:0;
}

.mode li a.lh1{
	height: 100%;
	padding-top: 11%;
	background-image: url(../images/arrow.png);
	background-position: 4rem 72%;
	background-repeat: no-repeat;
	background-size: 13.4rem 1.4rem;
}

.mode .h50{
	height: 50%;
}

.mode .h100{
	height: 100%;
}

.mode .h25{
	height: 25%;
}

.rank{
	width: 102rem;
	margin-top: 3.8rem;
	overflow: hidden;
	height: 7.2rem;
}

.rank h1{
	font-size: 3rem;
	color: #4ae6ce;
	background: url(../images/rank.png) left center no-repeat;
	background-size: 2.8rem;
	padding-left: 3.6rem;
	float: left;
	margin-top: 1rem
}

.rank ul{
	float: left;
	width: 70rem;
	/*overflow: hidden;*/
	/*height: 8.6rem;*/
	/*margin: 2rem 0;*/
	box-sizing: border-box;
	height: 6.6rem;
	/*margin-top: -2rem;*/
}

.rank ul li{
	float: left;
	font-size: 1.8rem;
	color: #fff;
	margin:0 0 20px 4.2rem;
	line-height: 1;
	width: 9.6rem;
	line-height: 2.4rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rank ul li:first-child{
	clear: both;
}

.rank ul li span{
	font-size: 1.6rem;
	margin-right: 1rem;
	/*font-family: 'Gabriola','Aparajita';*/
	border-radius: 3.3rem;
	background-color: #4ae6ce;
	float: left;
	width:2.4rem;
	height: 2.4rem;
	color: #36579c;
	text-align: center;
	line-height: 2.4rem;
	/*opacity: .4*/
}

.news{
	width: 50rem;
	margin-top: 2.8rem;
}

.news a{
	border:solid 1px #eee;
	color: #eee;
	font-size: 1.6rem;
	line-height: 3.8rem;
	padding:0 6rem;
	float: left;
	margin: 0 .5rem .5rem 0;
}

.news a:hover{
	color: #4ae6ce;
	border:solid 1px #4ae6ce;
}

.headlines{
	width: 36.4rem;
	height: 8.6rem;
	margin-top: 2.8rem;
	background: rgba(255,255,255,.1);
	overflow: hidden;
}

.headlines ul{
	width: 100%
}

.headlines ul li{
	overflow: hidden;
}

.headlines ul .h_img{
	width: 12.6rem;
	height: 100%;
}

.headlines ul .h_img img{
	width: 100%;
	height: 100%;
}

.headlines ul .new{
	width: 22rem
}

.headlines ul .new h3 a{
	font-size: 1.6rem;
	color: #eee;
	font-weight: normal;
	padding: .8rem 0;
	display: block;
} 

.headlines ul .new h3 a:hover{
	text-decoration: underline;
	color:#4ae6ce;
}

.headlines ul .new p{
	color: #eee;
	font-size: 1.4rem;
}

.footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 5rem;
	background: rgba(7,45,107,.4);
	line-height: 5rem;
	color: #e5e5e5;
	font-size: 1.6rem;
}



.footer .mid94>p{
	float: left;
	width: 8rem;
}

.footer .wrap{
	width:170rem;
	overflow: hidden;
	float: right;
}

.footer .wrap p{
	float: left;
	width: 2000px
}

.footer p a{
	margin: 0 10px;
	color: #e5e5e5;
	float: left;
}

.footer p a:hover{
	color:#4ae6ce
}




.na{
	display: none;
}

@media screen and (max-width: 750px){

html{
	font-size: calc(100vw / 75);
	width: 100vw;
	height: auto;
}

body{
	background: url(../images/bg.jpg) center top no-repeat;
	background-size: cover;
}

.na{
	display: block;
}

.header{
	width: 100%;
	height: 8rem;
	background: rgba(255,255,255,.07);
}

.header .left{
	color: #fff;
	font-size: 2.6rem;
	line-height: 8rem;
}

.header .left span{
	margin-right: 4.6rem;
}

.header ul.right{
	display: none;
	position: absolute;
	top: 8rem;
	background-color: rgba(0,0,0,.8);
	width: 100%;
	height: calc(100vh - 8rem);
	margin-left: calc(-3vw)
}

.header ul.right li{
	float: none;
	margin-left: 0;
	text-align: center;
	border-bottom:solid 1px #666;
}

.header ul.right li a{
	color: #fff;
	font-size: 3.6rem;
	line-height: 20rem;
	padding-left: 4.8rem;
	background-size: 1.7rem 1.8rem;
	width: 100%;
	height: 100%;
	display: block;
}

.header ul.right li:nth-of-type(1) a{
	background: url(../images/icon_06.png) 30rem center no-repeat;
	background-size: 3.4rem 3.6rem;
}

.header ul.right li:nth-of-type(2) a{
	background: url(../images/rz.png) 30rem center no-repeat;
	background-size: 3.4rem 3.6rem;
}

.header ul.right li:nth-of-type(3) a{
	background: url(../images/icon_03.png) 30rem center no-repeat;
	background-size: 3.4rem 3.6rem;
}

.header ul.right li:nth-of-type(4) a{
	background: url(../images/icon_08.png) 30rem center no-repeat;
	background-size: 3.4rem 3.6rem;
}

.logo{
	text-align: center;
	margin: 3rem auto;
	width: 94vw
}

.logo img{
	width: 100%!important;
}

.search{
	width: 94vw;
	height: 7.8rem;
	background: #fff;
	border-radius: 3rem;
	margin: 0 auto;
	line-height: 6.2rem;
	/*text-align: center;*/
	margin-bottom: 10rem
}

.search input,.search select{
	color: #666;
	font-size: 2.8rem;
	background: none;
}

.search select{
	margin-left: 1.6rem;
	height: 7.8rem;	
	padding-right: 0;
}

.search input[type="text"]{
	border-left: solid 1px #999;
	text-indent: 2.6rem;
	margin-left: 2rem;
	width: 20rem;
	height: 4.8rem;
}

.search input[type="button"]{
	width: 3.5rem;
	height: 3.5rem;
	background: url(../images/icon_18.png);
	float: right;
	margin: 2.1rem 3.4rem 0 0;
	background-size: contain;
	cursor: pointer;
}

.search a{
	color: #fff;
	float: none;
	/*margin-right: -15rem;*/
	font-size: 3rem;
	text-decoration: underline;
	width: 12rem;
	margin:1rem auto;
	display: block;
}

.mode{
	height: auto;
	background: #333;
	margin-top: 4rem;
	overflow: hidden;
}

.mode ul{
	float: left;
	width: 100%!important;
	height: auto;
}

.mode ul:nth-of-type(1) li:nth-of-type(1){
	width: 50%;
	background: url(../images/itbg_22.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(1) li:nth-of-type(2){
	width: 50%;
	background: url(../images/itbg_32.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(2) li:nth-of-type(1){
	width: 100%;
	background: url(../images/itbg_24.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(3) li:nth-of-type(1){
	width: 50%;
	background: url(../images/itbg_25.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(3) li:nth-of-type(2){
	width: 50%;
	background: url(../images/itbg_35.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(4) li:nth-of-type(1){
	width: 50%;
	background: url(../images/itbg_26.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(4) li:nth-of-type(2){
	width: 50%;
	background: url(../images/itbg_34.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(4) li:nth-of-type(3){
	width: 50%;
	background: url(../images/itbg_38.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(4) li:nth-of-type(4){
	width: 50%;
	background: url(../images/itbg.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(5) li:nth-of-type(1){
	width: 50%;
	background: url(../images/itbg_27.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(5) li:nth-of-type(2){
	width: 50%;
	background: url(../images/itbg_29.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(5) li:nth-of-type(3){
	width: 50%;
	background: url(../images/itbg_37.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.mode ul:nth-of-type(5) li:nth-of-type(4){
	width: 50%;
	background: url(../images/itbg_39.jpg) center center no-repeat;
	background-size: 101% 101%;
}

.special_banner,.mode li {
	overflow: hidden;
	float: left;
	transition: background-size .3s;
}

.mode li a:hover{
	/*font-size: 3.3rem!important;*/
	/*background: none!important;*/
}

.special_banner,.mode ul li:hover{
	background-size: 120% 120%!important;
}

.mode li a{
	color: #fff;
	font-size: 4.4rem;
	font-weight: bold;
	width: 100%;
	height: 100%;
	display: block;
	padding-left: 0;
	box-sizing: border-box;
	text-align: center;
}

.mode li a.black{
	background-color: rgba(0,0,0,.57);
}

.mode li a.blue{
	background-color: rgba(30,58,151,.72);
}

.mode li a.green{
	background-color: rgba(10,91,46,.7);
}

.mode li a.skyblue{
	background-color: rgba(30,144,151,.7);
}

.mode li a.lh100{
	height: 100%;
	line-height: 14rem;
}

.mode li a.lh10{
	height: 100%;
	line-height: 48rem;
	padding:0;
}

.mode li a.lh1{
	height: 100%;
	line-height: 24rem;
	padding-top: 0;
}

.mode .h50{
	height: 24rem;
}

.mode .h100{
	height: 48rem;
}

.mode .h25{
	height: 14rem;
}

.rank{
	width: 100%;
	margin-top: 3.8rem;
	overflow: hidden;
	height: 24.2rem;
	text-align: center;
	margin-bottom: .4rem
}

.rank h1{
	font-size: 4.4rem;
	color: #4ae6ce;
	background: url(../images/rank.png) 13rem center no-repeat;
	background-size: 4.2rem;
	float: none;
	margin-top: 1rem;
	margin-bottom: 3rem
}

.rank ul{
	float: none;
	width: 70rem;
	box-sizing: border-box;
	height: 9.4rem;
}

.rank ul li{
	float: left;
	font-size: 2.4rem;
	color: #fff;
	margin:0 2.1rem 10px 2.1rem;
	line-height: 3.4rem;
	width: 9.6rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rank ul li:first-child{
	clear: both;
}

.rank ul li span{
	font-size: 2.4rem;
	margin-right: 1rem;
	border-radius: 3.3rem;
	background-color: #4ae6ce;
	float: left;
	width:3.4rem;
	height: 3.4rem;
	color: #36579c;
	text-align: center;
	line-height: 3.4rem;
}

.news{
	width: 50rem;
	margin-top: 2.8rem;
}

.news a{
	border:solid 1px #eee;
	color: #eee;
	font-size: 1.6rem;
	line-height: 3.8rem;
	padding:0 6rem;
	float: left;
	margin: 0 .5rem .5rem 0;
}

.news a:hover{
	color: #4ae6ce;
	border:solid 1px #4ae6ce;
}

.headlines{
	width: 100%;
	height: 15.2rem;
	margin-top: 2.8rem;
	background: rgba(255,255,255,.1);
	overflow: hidden;
	clear: both;
}

.headlines ul{
	width: 100%
}

.headlines ul li{
	overflow: hidden;
}

.headlines ul .h_img{
	width: 23.6rem;
	height: 100%;
}

.headlines ul .h_img img{
	width: 100%;
	height: 100%;
}

.headlines ul .new{
	width: 44rem
}

.headlines ul .new h3 a{
	font-size: 3.2rem;
	color: #eee;
	font-weight: normal;
	padding: .9rem .2rem;
	display: block;
} 

.headlines ul .new h3 a:hover{
	text-decoration: underline;
	color:#4ae6ce;
}

.headlines ul .new p{
	color: #eee;
	font-size: 2.8rem;
}

.footer{
	position: static;
	overflow: hidden;
	/*bottom: 0;*/
	width: 100%;
	height: 6.8rem;
	background: rgba(7,45,107,.4);
	line-height: 6.8rem;
	color: #e5e5e5;
	font-size: 2.8rem;
	margin-top: 4rem
}

.footer .mid94>p{
	float: left;
	width: 16rem;
}

.footer .wrap{
	width:54rem;
	overflow: hidden;
	float: right;
}

.footer .wrap p{
	float: left;
	width: 2000px
}

.footer p a{
	margin: 0 10px;
	color: #e5e5e5;
	float: left;
}

.footer p a:hover{
	color:#4ae6ce
}

}