@charset "utf-8";
/* CSS Document */
/*------------------------reset------------------------*/
body,div,p,h1,h2,h3,h4,h5,h6,h7,table,td,ul,li,ol,hr,img{ margin:0px; padding:0px; border:0px; font-size:14px; font-family:Arial, Microsoft YaHei;}
.clear{ clear:both; font-size:0px; line-height:0px; height:0px; overflow:hidden;}
a{ text-decoration:none; color:#333; -webkit-transition:.4s ease-in-out; -moz-transition:.4s ease-in-out; -o-transition:.4s ease-in-out; -ms-transition:.4s ease-in-out; transition:.4s ease-in-out;}
a:hover{ color:#1280b5;}
li{ list-style-type:none;}
table{ border-collapse:collapse; width:100%;}
td{ vertical-align:top;}
.ziti{ font-family:SimSun;}

html{ -webkit-font-smoothing: antialiased; }
body{ margin:0px auto; color:#333;}


/* filter:alpha(opacity=70);opacity:0.7;*/
.dh{ -webkit-transition:.4s ease-in-out; -moz-transition:.4s ease-in-out; -o-transition:.4s ease-in-out; -ms-transition:.4s ease-in-out; transition:.4s ease-in-out;}
.ty{ box-shadow:0 2px 2px rgba(0,0,0,0.3); -moz-box-shadow:0 2px 2px rgba(0,0,0,0.3); -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);}
.yj{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.btm{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70ffffff',endColorstr='#70ffffff');/* IE6,IE7 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#70ffffff, endColorstr=#70ffffff)"; background:rgba(255,255,255,0.5);}
/*text-transform 值：Capitalize 英文拼音的首字母大写 Uppercase 英文拼音字母全大写 Lowercase 英文拼音字母全小写*/


/*------------------------header------------------------*/
.navbar .nav-item { position: relative;}
.navbar .nav-item .nav-link{ color: #333; font-size: 1rem;}
.navbar .nav-item .nav-link:after{ content:""; background:#1280b5; height:3px; width:50%; border-radius:2px; position:absolute; left:25%; bottom:0; transform:scaleX(0); transition:0.5s;}
.navbar .nav-item .nav-link:hover{ color: #1280b5;}
.navbar .nav-item .nav-link:hover:after{ transform:scaleX(1); transition:0.5s;}
.navbar-toggler{ background: #1280b5;}

/*------------------------index------------------------*/
.banner{ height: 600px; background: url(../images/banner.jpg) center no-repeat #1280b5; overflow: hidden;}
	.bTxtBox{ height: 100%; position: relative; overflow: hidden;}
		.bTxtBox .txt{ position: absolute; position: absolute; left: 0; top: 50%; right: 0; z-index: 2; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
		.bTxtBox .txt h2{ font-size: 3rem;}
		.bTxtBox .txt p{ font-size: 1.5rem;}

.title{ text-align: center;}
	.title h2{ color: #1280b5; font-size: 2.2rem; font-weight: 600;}
	.title p{ font-size: 1.2rem;}

.about{ background: url(../images/aboutBg.jpg) center top no-repeat #f5f5f5;}
	.about .content{ text-align: center; font-size: 1.2rem; line-height: 180%;}
	#demo .aboutTxt{ left: 10%; right: 10%; bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%);}
	#demo .aboutTxt1{ text-align: left;}
	#demo .aboutTxt2{}
	#demo .aboutTxt3{ text-align: right;}
	.aboutTxt h3{ font-size: 2rem;}
	.aboutTxt p{ font-size: 1.2rem;}
	.aboutBox{ text-align: center;}
		.aboutBox .name{ font-size: 1rem; -webkit-transition:.4s ease-in-out; -moz-transition:.4s ease-in-out; -o-transition:.4s ease-in-out; -ms-transition:.4s ease-in-out; transition:.4s ease-in-out;}
	.aboutBox a:hover{ background: #fed732; color: #333;}

.beiou{}
	.beiou .content{}
		.beiou .content .topic{ font-size: 2rem; color: #1280b5;}
		.beiou .content .subTopic{ font-size: 1.2rem;}
		.beiou .content .desc{ font-size: 1rem;}
		.beiou .content .more{}
		.beiou .content .more a{ border: 1px #333 solid; text-align: center;}
		.beiou .content .more a:hover{ background: #fed732; color: #333; text-indent: 4rem; }

.news{ background: url(../images/news.jpg) center no-repeat;}
	.news .title h2{ text-transform: uppercase; font-size: 3rem;}
	.newsBox{ -webkit-transition:.4s ease-in-out; -moz-transition:.4s ease-in-out; -o-transition:.4s ease-in-out; -ms-transition:.4s ease-in-out; transition:.4s ease-in-out;}
	.newsBox .pic{ overflow: hidden;}
		.newsBox .pic img{ transition: all 0.5s;}
		.newsBox .pic img:hover{ transform: scale(1.2) ;}
	.newsBox .name{ font-size: 1rem; -webkit-transition:.4s ease-in-out; -moz-transition:.4s ease-in-out; -o-transition:.4s ease-in-out; -ms-transition:.4s ease-in-out; transition:.4s ease-in-out;}
	.newsBox:hover{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30ffffff',endColorstr='#30ffffff');/* IE6,IE7 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff, endColorstr=#30ffffff)"; background:rgba(255,255,255,0.3); color: #333;}
	.newsBox a:hover{ color: #333;}
	.newsBox a:hover .name{ color: #1280b5;}
	.news .more a{ border: 1px #333 solid; text-align: center;}
	.news .more a:hover{ width: 20%; background: #fed732; color: #333; }


/*------------------------page------------------------*/
.nBanner{ height: 360px; background: url(../images/nbanner.jpg) center no-repeat #1280b5; overflow: hidden;}
		.nBanner .txt{ position: absolute; position: absolute; left: 0; top: 50%; right: 0; z-index: 2; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
		
.sort{ background: #f0f0f0;}
	.sort a{ border-right: 1px #fff solid; font-size: 1rem; text-align: center;}
	.sort a:first-child{ border-left: 1px #fff solid;}
	.sort a:hover{ background: #fed732; color: #333;}
		
.nMain{}
	.nMain .nTitle{ font-weight: 500; color: #1280b5; border-bottom: 5px #f0f0f0 solid;}
	.nMain .nNewsTitle{ border-bottom: 5px #f0f0f0 solid; overflow: hidden;}
	.nMain .nNewsTitle h2{ font-size: 2rem; font-weight: 500; color: #1280b5;}
	.nMain .nNewsTitle span{ color: #666;}
	.nMain .nPage{ font-size: 1rem;}
		.nMain .nPage p{ font-size: 1rem;}
		.nMain .nPage img{ max-width: 100%; height: auto;}

	.nNewsBox{ -webkit-transition:.4s ease-in-out; -moz-transition:.4s ease-in-out; -o-transition:.4s ease-in-out; -ms-transition:.4s ease-in-out; transition:.4s ease-in-out;}
		.nNewsBox .pic{ overflow: hidden;}
			.nNewsBox .pic img{ transition: all 0.5s;}
			.nNewsBox .pic img:hover{ transform: scale(1.2) ;}
		.nNewsBox .name{ font-size: 1rem; -webkit-transition:.4s ease-in-out; -moz-transition:.4s ease-in-out; -o-transition:.4s ease-in-out; -ms-transition:.4s ease-in-out; transition:.4s ease-in-out;}
		.nNewsBox:hover{ background: #fed732; color: #333;}
		.nNewsBox a:hover{ color: #333;}

.pageBox{ text-align: center;}
	.pageBox a{ border: 1px #ccc solid; padding:10px 15px; margin: 0 3px;}
	.pageBox a:hover{ border: 1px #ccc solid; background: #fed732; color: #333;}
	.pageBox .page-num-current{ background: #1280b5; color: #fff; border: 1px #1280b5 solid;}

.pageCut{ border-top: 5px #f0f0f0 solid;}

.contact{ background: #1280b5; color: #fff;}
	.contact h2{ font-size: 1.5rem;}
	.contact .p1{ font-size: 2.5rem;}
	.contact a{ color: #fff;}
	.contact p{ color: #fff;}
#maps{ height: 500px;}
		
/*------------------------footer------------------------*/
.footer{ background: url(../images/footer.jpg) center no-repeat; color: #bcbcbc;}
.footer a{ color: #bcbcbc;}
.footer a:hover{ color: #fed732;}
	.footer li h2{ font-size: 1.2rem;}
	.footer li h3{ font-size: 2rem;}
	.copy{ border-top: 1px #5b5b5b solid; color: #999;}
		.subLogo{ text-transform: uppercase; font-size: 1.5rem; font-weight: bold;}
		.copy a{ color: #999;}




@media screen and (max-width: 768px){
	.bTxtBox .txt h2{ font-size: 2.5rem;}
	.bTxtBox .txt p{ font-size: 1.5rem;}
	.nav-item{ border-bottom: 1px #ccc dotted;}
	.nBanner{ height: 300px;}
	#demo .aboutTxt1{ text-align: center;}
	#demo .aboutTxt2{ text-align: center;}
	#demo .aboutTxt3{ text-align: center;}
	.aboutTxt h3{ font-size: 1.5rem;}
	.aboutTxt p{ font-size: 1rem;}
.news .more a{ width: 30%;}
.nMain .nTitle{ font-size: 2rem;}
	.title h2{ font-size: 2rem;}
	.title p{ font-size: 0.8rem;}
	.about .content{ font-size: 1rem;}
	.about{ background: url(../images/aboutBg2.jpg) center top no-repeat #f5f5f5;}
	.beiou .content .topic{ font-size: 1.5rem;}
	.beiou .content .subTopic{ font-size: 1rem;}
	.beiou .content .desc{ font-size: 1rem;}
	.news .title h2{ font-size: 2rem;}
	.nMain .nNewsTitle h2{ font-size: 1.5rem;}
	.nMain .nTitle{ font-size: 1.5rem;}
	.navbar .navbar-brand img{ max-width: 80%;}
	.aboutBox .name{ font-size: 0.8rem;}
	.aboutBox .pic img{ max-width: 85%;}
}

@media screen and (max-width: 576px){
	.banner{ height: 500px;}
		.bTxtBox .txt h2{ font-size: 2rem;}
		.bTxtBox .txt p{ font-size: 1.5rem;}
	#demo .aboutTxt{ bottom: 10%;}
	.nBanner{ height: 240px;}
	.title h2{ font-size: 1.5rem;}
	.title p{ font-size: 1rem;}
	.about .content{ font-size: 0.8rem;}
	.about{ background: url(../images/aboutBg2.jpg) center top no-repeat #f5f5f5;}
	.beiou .content .topic{ font-size: 1.5rem;}
	.beiou .content .subTopic{ font-size: 1rem;}
	.beiou .content .desc{ font-size: 0.8rem;}
	.news .title h2{ font-size: 2rem;}
	.nMain .nNewsTitle h2{ font-size: 1.5rem;}
	.nMain .nTitle{ font-size: 1.5rem;}
	.navbar .navbar-brand img{ max-width: 70%;}
	.aboutBox .name{ font-size: 0.8rem;}
	.aboutBox .pic img{ max-width: 85%;}
}


@media screen and (max-width: 420px){
	.banner{ height: 500px;}
		.bTxtBox .txt h2{ font-size: 1.5rem;}
		.bTxtBox .txt p{ font-size: 1rem;}
	.nBanner{ height: 200px;}
	#demo .aboutTxt{ bottom: 10%;}
	.aboutTxt h3{ font-size: 1.5rem;}
	.aboutTxt p{ font-size: 0.8rem;}
	.title h2{font-size: 1.2rem;}
	.title p{ font-size: 0.8rem;}
	.navbar .navbar-brand img{ max-width: 60%;}
	.beiou .content .topic{ font-size: 1.2rem;}
	.aboutBox .name{ font-size: 0.8rem;}
	.aboutBox .pic img{ max-width: 85%;}
}

@media screen and (min-width: 992px){
	.nBanner{ height: 360px;}
	#demo .aboutTxt1{ text-align: left;}
	#demo .aboutTxt2{}
	#demo .aboutTxt3{ text-align: right;}
	.aboutTxt h3{ font-size: 2rem;}
	.aboutTxt p{ font-size: 1.2rem;}
.news .more a{ width: 20%;}
.nMain .nTitle{ font-size: 2.5rem;}
}
@media screen and (min-width: 1200px){
.news .more a{ width: 15%;}
.nMain .nTitle{ font-size: 3rem;}
}
@media screen and (min-width: 1400px){

}