﻿*{margin:0;padding:0}
html,body{ width:100%; height:100%;min-width:1200px}
ul, ol {list-style-type: none;margin:0;}
a{text-decoration:none;}
a:hover {text-decoration:none;}
p{margin:0;}
.mainview{
	width:100%;
	height:100%;
	overflow:hidden;
}
.navbars{
	width:100%;
	height:96px;
	background:#fff;
	position:fixed;
	top:0;
	z-index:3;
    box-shadow:0 0 4px #8a8a8a,0 0 6px #ddd
}
.navbarcenter{
    position:relative;
	width:14.4rem;
	height:96px;
	margin:0 auto;
	align-items:center;
	justify-content:space-between;
}
.logohref{
    position:absolute;z-index:1;left:0;top:25px;
	height:100%;
    width:176px;
	display:block;
    box-sizing:border-box;
    font-size:1px;
}
.logohref img{
    height:50%;
}
.navlink{
    width:100%;
	height:96px;
	display:flex;
    justify-content:flex-end;

}
.linkitem{
	height:100%;
	margin:0 5px;
	display:flex;
	align-items:center;
	position:relative;
}
.linkitem>a{
transition:all 0.5s;
    padding:0 20px;
	height:38px;
	line-height:38px;
	text-align:center;
	display:block;
	color:#333;font-size:18px;font-weight:bold
}
.linkitem:not(.activelink):hover>a{
	color:#000;
}
.activelink>a{
	/*background:#E60012;
	border-radius:4px;
	box-shadow: 0px 5px 14px 0px rgba(230, 0, 18, 0.6);*/
color:#fff;
}
.linkitem.activelink{background:#E60012}
.linkitem:not(.activelink):hover{background:#e8e3e3}
.navlist{
    box-sizing:border-box;
	width:550px;
    padding:15px;
	overflow:hidden;
	color:#333;
	background-color:#fff;
	border-radius:5px;
	position:absolute;
	top:0.96rem;
    opacity:0;
    left:-220px;
	display:none;
transition:all 0.5s;
box-shadow:0 0 3px #ddd,0 0 5px #CACBCA
}
.navlistinner{display:flex}
.navlist .navbox{
    box-sizing:border-box;
    width:160px;flex-shrink:0;flex-grow:0
}
.navlist .navimg{
    width:100%;flex-shrink:1;flex-grow:1;
    margin-left:20px;
    background-image:url(/img/navimg.png);
	background-position:center;
	background-repeat:no-repeat;
    background-size:cover;
}
.navlist .navimg.prodsimg{
    background-image:url(/img/prods.jpg) !important;
}
.navlist .navbox a{
	width:100%;
	height:60px;
	line-height:60px;
	color:#333;
	display:block;
	text-align:left;
	font-size:16px;
	border-bottom:1px solid #F5F5F5;
}
.navbox span{color:#8a8a8a;float:right}
.navlist a:hover{
	color:#E60012;
}
.linkitem:hover .navlist{
	display:block;
    opacity:1;
    animation:sublistani 0.5s ease;
}
@keyframes sublistani{
    from{opacity:0;top:0.6rem}
    to{opacity:1;top:0.96rem;}
}
/* 底部 */
.footerbox{
	width:100%;
	height:3.6rem;
	background:#050F07;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;font-size:16px
}
.footertop{
	width:12rem;
	height:2rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.footlogo{
	width:1.6rem;
	height:1.7rem;
	background:url(../img/logo.png) no-repeat;
	background-size:100% 100%;
}
.footcenter{
	flex:1;
	margin:0 0.3rem;
}
.centerlabel{
	width:100%;
	height:0.4rem;
	display:flex;
	align-items:center;
	color:#85919F;
}
.centerlabel>span{
	width:0.3rem;
	height:0.3rem;
	margin-right:0.1rem;
	background:#CACBCA;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.centerlabel>span>img{
	width:0.18rem;
	height:0.18rem;
	display:block;
	opacity:0.7;
}
.footcode{
	width:4rem;
	overflow:hidden;
	display:flex;
	justify-content:space-between;
}
.footcode>img{
	width:1.6rem;
	height:1.6rem;
}
.foottext{
	width:12rem;
	height:0.2rem;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	color:#85919F;
	font-size:0.12rem;
	margin-top:0.3rem;
}
.foottext a{
	color:#85919F;
}
.topcomponent{
	width:100%;
	height:3.02rem;
	display:flex;
	align-items:center;
	justify-content:center;
	background:url(/img/top_01.jpg) no-repeat;
	background-size:100% 100%;
	position:relative;
	margin-top:0.96rem;
	overflow:hidden;
}
.topcomponents{
	background:url(/img/top_02.jpg) no-repeat;
	background-size:100% 100%;
}
.topcomponentf{
	background:url(/img/top_03.jpg) no-repeat;
	background-size:100% 100%;
}
.topcomponentn{
	background:url(/img/top_04.jpg) no-repeat;
	background-size:100% 100%;
}
.topmasktxt{
	width:14.4rem;
	height:1.25rem;
	color:#fff;
	font-size:0.36rem;
	text-align:right;
	border-right:0.08rem solid #E60012;
	padding-right:0.15rem;
	animation:toptextanim 0.5s linear;
}
@keyframes toptextanim{
	from{margin-right:-100%;transform:scale(0);}
	to{margin-right:0;transform:scale(1);}
}
.topmasktxt>h3{
	margin:0;
	font-size:0.5rem;
	margin-bottom:0.2rem;
}
.topmasktxt>p{font-size:0.3rem;color:rgba(255,255,255,0.8)}
.childview{
	width:100%;
	height:100%;
	overflow:auto;
	background:#f6f6f6;
}
.centermainview{
	width:14.4rem;
	min-height:4rem;
	margin:0.4rem auto;
	overflow:hidden;
	display:flex;
}
.righticonbox{
	width:50px;
	position:fixed;
	right:20px;
	bottom:2rem;
	flex-direction:column;
	align-items:center;
	justify-content:center;
z-index:100
}
.iconboxitem{
    display:flex;align-items:center;justify-content:center;
	width:50px;
	height:50px;
    color:#fff;
	position:relative;
	background-color:rgba(255,0,0,0.8);
	background-repeat:no-repeat;
	background-size:100% 100%;
	margin-bottom:5px;
	cursor:pointer;
	border-radius:4px;
}
.iconboxitem span{
    font-size:30px
}
.iconboxitem:last-child{
margin-bottom:0;
}
.iconboxitemtop{
	display:none;
}
.iconboxitem:nth-child(2){
}
.iconboxitem>p{
    box-shadow:0 0 6px #ddd;
    color:#000;
    padding:0 30px;
	line-height:40px;
	background:#f5f3f3;
	border-radius:5px;
	position:absolute;
	right:63px;
	display:none;
	z-index:-1;
	font-size:18px;font-weight:bold;white-space:nowrap
}
.iconboxitem>p span{
    font-size:18px;font-weight:normal;color:#8a8a8a
}
.iconboxitem>p::after{
	content:'';
	width:0;
	height:0;
	border-top: 6px solid transparent;
	border-left: 12px solid #f5f3f3;
	border-bottom: 6px solid transparent;
	position:absolute;
	right:-12px;
	top:30px;
}
.iconboxitem>div{
box-sizing:border-box;
box-shadow:0 0 6px #ddd;
padding:10px;
	width:160px;
	height:160px;
	background:#f5f3f3;
	border-radius:5px;
	position:absolute;
    right:63px;
	top:-60px;
	z-index:-1;
	display:none;
}
.iconboxitem>div>img{
	width:100%;
	height:100%;
	display:block;
}
.iconboxitem>div:after{
	content:'';
	width:0;
	height:0;
	border-top: 6px solid transparent;
	border-left: 12px solid #fff;
	border-bottom: 6px solid transparent;
	position:absolute;
	right:-12px;
	top:75px;
}
.iconboxitem:hover>p{
	display:block;
	animation:leftanim 0.4s linear;
}
.iconboxitem:hover>div{
	display:block;
	animation:leftcodeanim 0.4s linear;
}
@keyframes leftanim{
	from{right:0;opacity:0;}
	to{right:63px;opacity:1;}
}
@keyframes leftcodeanim{
	from{right:0;opacity:0;}
	to{right:63px;opacity:1;}
}
.iconboxitem:nth-child(3){
}
.iconboxitem:nth-child(4){
}
.pagings{font-size:16px}