﻿@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
	/*通栏banner*/
	.page_banner{width:100%; height:auto;}
	.pbimg{width:100%; height:160px; position:relative;}
	
	.pbimg .posi{
		position: absolute;
		bottom: 30px;
		left: 0;
		width:100%;
		height:auto;
		z-index: 1;
	}
	.pbimg .posi em{ display:block; color:#FFFFFF; font-family: 'syh_b'; font-size:0.2rem; text-transform: uppercase; position:relative}
	.pbimg .posi em:before{content: ""; width:60px; height:3px; background-color:#fff; position:absolute; left:0; top:36px}
	.pbimg .posi i{display:block; color:#FFFFFF; font-size:0.14rem; margin-top:25px}
	
	.bannerPic{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		transform: translate(-50%,-50%);
		object-fit: cover;
	}
	
	/*logo*/
	.logo{width:100%; height:auto; overflow:hidden}
	.logo .l_pc{display:none}
	.logo .l_mobile{ float:left; width:80%; height:auto; padding:10px 0; text-indent:15px; overflow:hidden}
	.logo .l_mobile img{max-width:100%; height:auto;}
	
	.logo .r{float:right; width:14%; height:auto;}
	.logo .r>.tel{display:none}
	.logo .r>.sosou{display:none}
	.logo .r>.donghua_menu{width:30px; height:20px; display:block; margin:0 auto; margin-top:35px}
	
	.dh {width: 100%; height:3px; position: relative;}
	.dh:before {animation: dhxgdhxg 1s linear 0s infinite alternate; position: absolute; left:0; top:0; width: 100%; height:4px; background:#999999; content: ""; display: block; opacity: 0; }
	.dh:nth-child(2):before {animation-delay: 0.5s; margin-top:5px}
	.dh:nth-child(3):before {animation-delay: 0.2s; margin-top:10px}
	@keyframes dhxgdhxg {
		0%{width:30%; opacity: 1;}
		50%{width:100%; opacity:0.5;}
	}
	
	/*首页菜单*/
	.menu{width:100%; height:auto; overflow:hidden; background: #0067b8; display:none;}
	.menu li{
		width:100%;
		height:0.46rem;
		line-height: 0.46rem;
		color: #fff;
		font-size: 0.14rem;
		text-indent:20px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		border-top: 0.5px solid rgba(255, 255, 255, 0.05);
		position:relative
	}
	.menu li a{display: block; color: #fff;}
	.menu li:hover a,.menu li.active a{text-decoration:none; color:#fff; background:linear-gradient(to bottom,#0274ce,#00579b);}
	.menu li:before {
		content: "";
		right: 3%;
		top: 18px;
		position: absolute;
		border: 8px solid #FFFFFF;
		border-top:7px solid rgba(0, 0, 0, 0);
		border-bottom:7px solid rgba(0, 0, 0, 0);
		border-right:7px solid rgba(0, 0, 0, 0);
	}
	.allpage_close{ position:fixed; width:14%; height:0.55rem; line-height:0.55rem; top:15px; right:0; z-index:99999; background:#fff url(../images/cl.png) no-repeat right 15px center; display:none}
	
	/*分类菜单*/
	.fl_menu{width:100%; height:60px; background-color:#0b308e}
	.menu_fl {display: -webkit-box;/*启用横列布局*/ overflow-x: scroll;/*裁剪内容提供滚动条*/}
	.menu_fl::-webkit-scrollbar{width:0; height:0; display: none;}/*去掉滚动条*/
	.menu_fl li {line-height:60px; margin-right:23px;}
	.menu_fl li a{display:block; font-size:16px; color:#fff; font-weight:400; position:relative}
	.menu_fl li a:after{content: ""; width:0px; height:3px; background-color:#fff; position:absolute; left:0; bottom:10px; transition:all 0.5s;}
	.menu_fl li:hover a,.menu_fl li.active a,.menu_fl li:hover a:after,.menu_fl li.active a:after{text-decoration:none; color:#fff; width:100%;}
}

/*当页面大于992px时候*/
@media screen and (min-width:992px){
	/*通栏banner*/
	.page_banner{width:100%; height:auto; position:relative; text-align: center}
	.page_banner:before{content: ""; position:absolute; left:0; top:0; width:100%; height:100px; background: rgba(255,255,255,0.8); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); z-index:1;}
	
	.pbimg{width:100%; height:auto; position:relative;}
	.pbimg>img{max-width:100%; height:auto; object-fit:none; /*保留原有元素内容的长度和宽度，图片不会变模糊*/}
	
	.pbimg .posi{
		position: absolute;
		bottom: 140px;
		left: 0;
		width:100%;
		height:auto;
		z-index: 1;
	}
	.pbimg .posi em{ display:block; color:#FFFFFF; font-family: 'syh_b'; font-size:36px; text-transform: uppercase; position:relative}
	.pbimg .posi em:before{content: ""; width:60px; height:3px; background-color:#fff; position:absolute; left:0; top:60px}
	.pbimg .posi i{display:block; color:#FFFFFF; font-size:18px; margin-top:30px}
	
	/*logo*/
	.logo{position:absolute; left:0; right:0; top:0; z-index:99999; width:90%; height:100px; margin:0 auto; color:#333}
	.logo .l_pc{position:absolute; left:0; top:0; width:400px; height:100px; display:flex; align-items:center;}
	.logo .l_pc img{max-width:100%; height:auto;}
	.logo .l_mobile{ display:none}
	
	.logo .r{position:absolute; right:0; top:0; width:240px; height:100px; overflow:hidden;}
	.logo .r>.tel{ float:left; width:210px; height:100px; line-height:100px; text-indent:46px; font-size:20px; color:#515151; background:url(../images/toptel2.png) no-repeat left center}
	.logo .r>.sosou{ float:right; width:30px; height:100px; background:url(../images/sosou.png) no-repeat center; cursor:pointer }
	.logo .r>.donghua_menu{ display:none}
	
	/*导航菜单start*/
	.menu {display:table; margin:0 auto; overflow:hidden; }
	.menu li{display:inline-block; line-height:100px;}
	.menu li a{display:block; padding:0 23px; font-size:16px; color:#333; font-weight:400; position:relative}
	.menu li a:after{content: '';display: block; width: 60px; height:1px; background:#0067b8; position:absolute; bottom:30px; left:50%; margin-left:-30px; transition: 0.4s ease-out; transform: scaleX(0);}
	.menu li:hover a,.menu li.active a,.menu li:hover a:after,.menu li.active a:after{text-decoration:none; color:#0067b8; transform: scaleX(1);}
	
	.allpage_close{display:none}
	
	/*分类菜单*/
	.fl_menu{ position:absolute; left:0; right:0; bottom:0; width:100%; height:80px; background-color: rgba(0,0,0,0.4);}
	.menu_fl {text-align:left; overflow:hidden}
	.menu_fl li {display:inline-block; line-height:80px; margin-right:30px;}
	.menu_fl li a{display:block; font-size:16px; color:#fff; font-weight:400; position:relative}
	.menu_fl li a:after{content: ""; width:0px; height:3px; background-color:#fff; position:absolute; left:0; bottom:17px; transition:all 0.5s;}
	.menu_fl li:hover a,.menu_fl li.active a,.menu_fl li:hover a:after,.menu_fl li.active a:after{text-decoration:none; color:#fff; width:100%;}
}