﻿@charset "utf-8";
/*当浏览器尺寸小于960px的时执行下面的CSS*/
@media screen and (max-width: 960px){
/*电脑隐藏悬浮菜单*/
.pc_menu{display:none}
/*电脑隐藏悬浮菜单end*/

/*logo*/
.logo{width:100%; height:auto; overflow:hidden}
.logo .l{height:auto; padding:12px; text-align:center}
.logo .l img{max-width:100%; height:auto;}
.logo .r{width:100%; height:auto}

/*首页菜单*/
.menu{width:100%; height:auto; overflow:hidden;}
.menu li{
	float: left;
	width:33.333333%;
	text-align: center;
	color: #fff;
	overflow: hidden;
	font-size: 0.16rem;
	height:0.43rem;
	line-height: 0.43rem;
	border-right: 1px solid #028984;
	white-space: nowrap;/*规定段落中的文本不进行换行*/
	text-overflow: ellipsis;/*当文本溢出包含元素时显示省略符号来代表被修剪的文本。*/
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	background:linear-gradient(to bottom,#037773,#026461);
}
.menu li a{display: block; color: #fff;}
.menu li:nth-of-type(3n+0){border-right:0;}

/*banner背景图片动画*/
.page_banner{width:100%; height:auto; overflow:hidden; position:relative}
.page_banner img{width:100%; height:auto}

@-webkit-keyframes scale-bg{
	from{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
	}
	to{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
@keyframes scale-bg{
	from{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
	}
	to{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
.scaleBg{
	visibility: visible; 
	-webkit-animation:scale-bg 6s linear forwards;
	animation:scale-bg 6s linear forwards;
}	
/*banner */

@keyframes title_text_donghua
{
	from {top:100%;}
	to {top:45%;}
}

@-webkit-keyframes title_text_donghua
{
	from {top:100%;}
	to {top:45%;}
}

.title_text{position:absolute; top:45%; right:0px; left:0px; color:#ffffff; animation:title_text_donghua 0.7s; -webkit-animation:title_text_donghua 0.7s; /* Safari and Chrome */}
.title_text span{display:block; font-size:0.14rem; text-align:center;}
.title_text h3{font-size:0.22rem; text-align:center; text-transform:uppercase; letter-spacing:3px;}

.red_xian{width:90%; height:auto; margin:0 auto; position:relative;}
.red_xian:after{
	content: "";
	display: inline-block;
	width:2px;
	height:40px;
	margin:0 auto;
	background:#ce0000;
	position:absolute;
	left:0;
	right:0;
	bottom:-20px;
	z-index:888;
}

/*产品分类*/
.pro_fl_u1{ width:100%; height:auto; display:flex; display: -webkit-flex; /* Safari */ flex-direction:row;/*从左到右排*/ flex-wrap: wrap;/*换行，第一行在上方*/}
.pro_fl_u1 li{width:50%;  height:0.45rem; line-height:0.45rem; text-align:center; border-right:1px solid #fff; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; background:linear-gradient(to bottom,#6e90be,#546fa6);}
.pro_fl_u1 li a{display: block; font-weight:400; font-size:0.14rem; color:#fff;}
.pro_fl_u1 li:hover a,.pro_fl_u1 li.active a{color:#fff; background:linear-gradient(to bottom,#d71f1f,#f03827);}
.pro_fl_u1 li:nth-child(2n){border-right:none}

/*产品框*/
.ul_product{ width:95%; height:auto; margin:0 auto; margin-top:20px; overflow:hidden}
.ul_product li{float:left; width:48%; height:auto; margin-right:4%; margin-bottom:10px; }
.ul_product li span{display:block; width:100%; height:auto; overflow:hidden;}
.ul_product li span img{width:100%; height:auto;}
.ul_product li:nth-child(2n){margin-right:0;}
.ul_product li p{text-align: center; color: #282828; height:0.4rem; line-height:0.4rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
/*产品框_end*/

/*以下是主体部分*/
.main_box{ width:100%; height:auto; overflow:hidden}
.main_box .left{width:100%; height:auto; overflow:hidden; background-color:#FFFFFF; padding:10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.main_box .right{width:100%; height:auto; background-color:#FFFFFF;}

/*左侧部分*/
.l_right_title{ display:none}

.ul_l_right{ width:100%; height:auto; overflow:hidden;}
.ul_l_right li{float:left; width:50%; height:0.45rem; line-height:0.45rem; text-align:center; border-right:1px solid #fff; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; background:linear-gradient(to bottom,#6e90be,#546fa6);}
.ul_l_right li a{display:block; font-weight:400; font-size:0.14rem; color:#fff;}
.ul_l_right li:hover a,.ul_l_right li.active a{color:#fff; background:linear-gradient(to bottom,#d71f1f,#f03827);}
.ul_l_right li:nth-child(2n){border-right:none;}

.pro_more{ display:none}

/*新闻*/
.ul_news{ padding:10px; height:auto; overflow:hidden; margin-top:10px;}
.ul_news li{ padding:15px; height:auto; border:1px solid #e7eaf1; box-shadow:0px 0px 10px #dddbdb; border-radius: 5px; margin-bottom:10px; background-color:#FFF}
.ul_news li a{display:block;}
.ul_news li h4{ font-size:0.18rem; font-weight:400; height:auto; line-height:0.32rem}
.ul_news li p{ font-size:0.14rem; color:#999999; margin-top:10px; height:auto; line-height:26px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}
.ul_news li span{color: #a3afb7; font-size:0.14rem; display:inline-table; margin-top:10px}
.ul_news li i{color: #a3afb7; font-size:0.14rem; display:inline-table; margin-top:10px; background:url(../images/click.png) no-repeat left center; padding-left:26px; margin-left:20px;}

/*产品详情标题*/
.product_list{height:0.36rem; border-bottom:1px solid #CCC; margin-top:0px;}
.product_list span{ font-size:0.16rem; font-weight:bold; line-height:0.36rem; position:relative;}
.product_list span:before{content: ""; width:150px; height:4px; background-color:#d13845; position:absolute; left:0; top:0.27rem}
/*通用内容盒子_end*/

/*********footer*********/
.foot_2021{margin-top:30px; padding:30px 0; background:url(../images/foot.jpg) no-repeat top center; color:#FFFFFF}
.foot_2021 a{color:#FFFFFF}
.foot_2021 a:hover{ color:#FFCC00}

.foot_2021_box{width:100%; height:auto; overflow:hidden}
.foot_2021_box .l{display:none}
.foot_2021_box .r{width:100%; height:auto; text-align:center}
.foot_2021_box .r img{width:150px; height:auto}
.foot_2021_box .r p{text-align:center; line-height:36px}

.foot_foot{width:100%; height:auto; background-color:#f5f5f5; line-height:30px; padding:20px 0}
.foot_foot li{text-align:center}
/*********footer*********/
}

/*当浏览器尺寸大于960px时候*/
@media screen and (min-width:960px){
/*电脑隐藏悬浮菜单*/
.pc_menu{width:100%; height:90px; background: rgba(0, 0, 0, 0.6); position:fixed; top:0; left:0; right:0; z-index:9999; display:none}
/*电脑隐藏悬浮菜单end*/

/*logo*/
.logo{position:fixed; left:0; right:0; top:0; z-index:99999; width:90%; height:auto; margin:0 auto; padding:15px 0; overflow:hidden;}
.logo .l{float:left; width:33%; height:auto;}
.logo .l img{max-width:100%; height:auto;}
.logo .r{float:right; width:65%; height:auto;}

/*导航菜单start*/
.menu {float:right; overflow:hidden;}
.menu li{float:left; line-height:60px; font-weight:400; margin-left:60px; position:relative}
.menu li:after {
	content: "";
	width:0;
	height:1px;
	background: #ffffff;
	position:absolute;
	bottom:29px;
	right:76px;
	transition: all 0.5s ease 0s;
}
.menu li:hover:after{width:30px;}
.menu li a {display:block; font-size:16px; color:#fff;}
.menu li:hover a,.menu li.active a{text-decoration:none; color:#fff; font-weight:bold}

/*banner背景图片动画*/
.page_banner{width:100%; height:460px; overflow:hidden; position:relative}
.page_banner img{width:100%; height:auto}

@-webkit-keyframes scale-bg{
	from{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
	}
	to{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
@keyframes scale-bg{
	from{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
	}
	to{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
.scaleBg{
	visibility: visible; 
	-webkit-animation:scale-bg 6s linear forwards;
	animation:scale-bg 6s linear forwards;
}	
/*banner */

@keyframes title_text_donghua
{
	from {top:100%;}
	to {top:50%;}
}

@-webkit-keyframes title_text_donghua
{
	from {top:100%;}
	to {top:50%;}
}

.title_text{position:absolute; top:50%; right:0px; left:0px; color:#ffffff; animation:title_text_donghua 0.7s; -webkit-animation:title_text_donghua 0.7s; /* Safari and Chrome */}
.title_text span{display:block; font-size:26px; text-align:center;}
.title_text h3{font-size:57px; text-align:center; text-transform:uppercase; letter-spacing:3px;}

.red_xian{width:90%; height:auto; margin:0 auto; position:relative;}
.red_xian:after{
	content: "";
	display: inline-block;
	width:3px;
	height:80px;
	margin:0 auto;
	background:#ce0000;
	position:absolute;
	left:0;
	right:0;
	bottom:-40px;
	z-index:888;
}

/*产品分类*/
.pro_fl_u1{width:86%; height:auto; margin:0 auto; text-align:center; margin-top:70px;}
.pro_fl_u1 li{display:inline-block; height:40px; line-height:40px; margin-right:10px; margin-bottom:20px; text-align:center; background:linear-gradient(to bottom,#ededed,#d9d9d9); border-radius:3px;}
.pro_fl_u1 li a{display: block; font-weight:bold; color:#666; padding:0 17px}
.pro_fl_u1 li:hover a,.pro_fl_u1 li.active a{color:#fff; background:linear-gradient(to bottom,#6e90be,#546fa6); border-radius:3px;}
.pro_fl_u1 li:last-child{border-right:none}

/*产品框*/
.ul_product{width:86%; height:auto; margin:0 auto; overflow:hidden}
.ul_product li{float:left; width:23.5%; height:auto; margin-right:2%; margin-bottom:20px; position:relative;}
.ul_product li span{width:100%; height:100%; display:block; overflow:hidden;}
.ul_product li span img{width:100%; height:100%;}
.ul_product li .mask{
	position:absolute; 
	top:0; 
	left:-250px;
	width:200px;
	height:350px;
	background:-webkit-linear-gradient(0deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0)); 
	-webkit-transform:skewx(-25deg); 
	-webkit-transition:all .9s; 
}
.ul_product li:hover .mask{left:500px;}
.ul_product li:nth-child(4n){margin-right:0;}
.ul_product li p{text-align: center; font-size:16px; color: #282828; height:40px; line-height:40px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
/*产品框_end*/

/*以下是产品主体部分*/
.main_box{ width:87%; height:auto; margin:0 auto; margin-top:80px; overflow:hidden}
.main_box .left{float:left; width:77%; height:auto; overflow:hidden; background-color:#FFFFFF; padding:50px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.main_box .right{float:right; width:20%; height:auto; background-color:#FFFFFF}

/*产品分类*/
.l_right_title{height:90px; background:linear-gradient(to bottom,#374f86,#283d6d); color:#fff; text-align:center;}
.l_right_title .span1{ display:block; font-size:31px; font-weight:700; padding-top:11px;}
.l_right_title .span2{ display:block; font-size:12px; color:#EFFCF7; padding-top:8px; text-transform:uppercase}

.ul_l_right{ width:100%; height:auto; overflow:hidden}
.ul_l_right li{height:54px; line-height:54px; font-size:15px; background-color:#f2f2f2; color:#000; position: relative; border-left:3px solid #ea6103;  border-top: 1px solid #ddd;}
.ul_l_right li a{display:block; color:#737373; z-index:1; position:absolute; left:0; top:0; width:100%; height:100%; padding-left: 24px;}
.ul_l_right li a:hover{ color:#FFF}
.ul_l_right li span{ display:inline-block; position: absolute;z-index: 10; right:20px; top:0; width:27px; height:100%; background:url(../images/classJT.png) left center no-repeat;}
.ul_l_right li em{ position: absolute; left:0; top:0; width: 0; height: 100%; background:#324776; -moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.3s; }
.ul_l_right li:hover em{ width:100%; }
.ul_l_right li.active a{color:#fff; background:#324776;}

.pro_more{ display: block; height:60px; line-height:60px; background:#ea6103; color:#fff!important; text-align:center; font-size:18px; margin-top:0px;}
.pro_more:hover{ background-color:#dc0000;}

/*产品详情标题*/
.product_list{height:36px; border-bottom:1px solid #CCC; margin-top:20px;}
.product_list span{ font-size:16px; font-weight:bold; line-height:36px; position:relative;}
.product_list span:before{content: ""; width:200px; height:4px; background-color:#d13845; position:absolute; left:0; top:27px}
/*通用内容盒子_end*/

/*新闻*/
.ul_news{width:86%; height:auto; margin:0 auto; margin-top:30px; overflow:hidden}
.ul_news li{ float:left; width:49%; height:auto; padding:50px; background-color:#FFF; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-right:2%; margin-bottom:35px; position: relative}
.ul_news li a{ display:block;}
.ul_news li h4{ font-size:22px; font-weight:100; height:auto}
.ul_news li p{ font-size:16px; color:#999999; margin-top:10px; height:auto; line-height:27px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}
.ul_news li span{color: #a3afb7; font-size: 16px; display:inline-table; margin-top:10px}
.ul_news li i{color: #a3afb7; font-size: 16px; display:inline-table; margin-top:10px; background:url(../images/click.png) no-repeat left center; padding-left:26px; margin-left:20px;}
.ul_news li em{ position: absolute; left:0; bottom:0; width: 0; height:3px; background:#324776; -moz-transition: all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.3s; }
.ul_news li:hover em{ width:100%; }
.ul_news li:nth-child(2n){margin-right:0;}

/*********footer*********/
.foot_2021{margin-top:30px; padding:60px 0; background:url(../images/foot.jpg) no-repeat top center; color:#FFFFFF}
.foot_2021 a{color:#FFFFFF}
.foot_2021 a:hover{ color:#FFCC00}

.foot_2021_box{width:86%; height:auto; margin:0 auto; overflow:hidden}
.foot_2021_box .l{ float:left; width:950px; height:auto;}
.foot_2021_box .r{ float:right; width:150px; height:auto;}
.foot_2021_box .r img{width:100%; height:auto}
.foot_2021_box .r p{text-align:center; line-height:36px}

.foot_text{width:100%; height:auto; display:flex; display: -webkit-flex; /*启用弹性布局*/ flex-direction:row;/*从左到右排*/}
.foot_text div{width:100%; height:auto; text-align:left; margin-right:10px;}
.foot_text h6{ color:#FFFFFF; font-size:18px; font-weight:400; position:relative;}
.foot_text h6:before{content: ""; width:40px; height:3px; background-color:#FFCC00; position:absolute; left:0; top:33px}

.foot_ul{width:100%; height:auto; color:#FFFFFF; margin-top:20px}
.foot_ul li{ line-height:27px; color:#FFFFFF}
.foot_ul li a{ display:block; color:#FFFFFF}

.foot_foot{width:100%; height:auto; background-color:#f5f5f5; overflow:hidden; padding:20px 0}
.foot_foot li{ line-height:30px; text-align:center}
/*********footer*********/
}

/* 移动端底部专用 */
.foot_height{height:0.67rem;}
.footer{width:100%; height:0.6rem; overflow:hidden; position:fixed; bottom:0; right:0; z-index:999; background: rgba(0, 0, 0, 0.8);}
.footer li{float:left; width:25%; height:auto; border-right:#4d5054 solid 1px; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */}
.footer li:nth-child(4){ border:none;}
.footer li a{display:block}
.footer li span{display:block; width:100%; height:0.26rem; padding-top:0.07rem; text-align:center;}
.footer li span img{height:100%}
.footer li p{width:100%; height:0.26rem; line-height:0.26rem; text-align:center; font-size:0.12rem; font-weight:100; color:#CCCCCC;}
/* 移动端底部专用_end */