@charset "UTF-8";
/**
 *
 * @authors Your Name (you@example.org)
 * @date    2020-09-27 14:49:15
 * @version $Id$
 */
section.banner{
	animation: myfirst 1s;
	-webkit-animation: myfirst 1s; /* Safari and Chrome */
	height: 600px;
	margin-top: 98px;
	background:url(../images/banner_ring.jpg) no-repeat center;
	position: relative;
	overflow: hidden;
}
@keyframes myfirst
{
from {width: 0;}
to {width: 100%;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {width: 0;}
to {width: 100%;}
}
section.banner .title{
	margin-top: 229px;
	overflow: hidden;
	width: 100%;
}
section.banner .title img{
	display: block;
	margin: 0 auto;
}
div.sai{
	border-bottom: 1px solid #eeeeee;
	padding: 26px 0 29px;
}
div.sai .left{

}
div.sai .left span.one{
	color: #3d3d3d;
	font-size:15px;
	line-height: 30px;

}
div.sai .left>ul{
	display: inline-block;
	vertical-align: top;
	margin-left: 20px;
}
div.sai .left>ul>li{
	float: left;
	width: 130px;
	position: relative;
}
div.sai .left>ul>li>span{
	font-size:14px;
	color: #c93400;
	margin-left: 20px;
}
div.sai .left>ul>li a{
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #c93400;
    display: inline-block;
    border: 1px solid #c93400;
    padding: 0 1.625rem;
    margin-right: 0.625rem;
    margin-bottom: 0.625rem;
    cursor: pointer;
}
div.sai .left>ul>li a:hover{
    
    background: #c93400;
    color: #ffffff;
}
div.sai .left>ul>li.on:after{
	transform: rotate(180deg);
}
div.sai .left>ul>li span{
	cursor: pointer;
}
div.sai .left>ul>li>ul{
	width: 100%;
	height: 0;
	border:1px solid #eeeeee;
	position: absolute;
	top:50px;
	left: 0;
	z-index: 99;
	overflow: hidden;
	transition:all 1s;
	background-color:#fff;
	overflow: hidden;
}
div.sai .left>ul>li.on>ul{
	padding: 10px 0 35px;
	height: auto;
}
div.sai .left>ul>li>ul li{
	margin-left: 42px;
	margin-top: 25px;
	position: relative;
}
div.sai .left>ul>li>ul li:after{
	content:'';
	width: 12px;
	height: 12px;
	border:1px solid #333333;
	position: absolute;
	top:5px;
	left: -20px;
	z-index: 1;
}
div.sai .left>ul>li>ul li.on:after{
	background-color:#404671;
}
div.sai .right a{
	color: #999999;
	font-size:14px;
}
div.sai .right a:last-of-type{
	color: #333;
}
div.sai .right span{
	color: #999999;
}
div.sai .right span:last-child{
	display: none;
}
.xin{
	margin-top: 33px;
}
.xin .bb{
	display: inline-block;
}
.xin .bb a{
	margin-left: 38px;
	padding-left: 26px;
	position: relative;
}
.xin .bb a:after{
	content:'';
	width: 16px;
	height: 16px;
	background:url(../images/x.png) no-repeat center;
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;
}
div.list{
	margin-bottom: 72px;
}
div.list li{
	width: 420px;
	margin-left: 70px;
	float: left;
	margin-top: 50px;
}
div.list li:nth-child(3n-2){
	margin-left: 0;
}
div.list li .pic{
	width: 360px;
	height:360px;
	position: relative;
	overflow: hidden;
	margin:0 30px;
}
div.list li .pic img{
	width: 100%;
	height: 100%;
	position: absolute;
	top:50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
	transition:all 1s;
}
div.list li:hover img{
	width: 110%;
	height: 110%;
}
div.list li span{
	display: block;
	margin-top: 21px;
	text-align: center;
	margin: 11px 30px;
    font-size: 18px;
	color: #eb4201;
}


/*article_ring*/
section.article_ring{
	margin-top: 149px;
}
#contain{
            width:816px;
            float: left;
            position: relative;
}
#contain .left{
            float:left;
}
#contain .right{
	position: absolute;
	top:100px;right: -350px;
	z-index: 1;
	width:350px;
	height:350px;
	overflow:hidden;/*超出部分隐藏*/
	padding:0px;
	display:none;/*默认先不显示*/
}
#contain .up{
            float: left;
            width: 650px;
            height: 460px;
            position: relative;
}
#contain .up img{
                max-width:100%;
                max-height:100%;
                position: absolute;
                top:50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                z-index: 1;
}
#contain .down{
                float: left;
}
#contain .down img{
    width: 152px;
    height: 152px;
	display: block;
	border:1px solid #fff;
}
#contain .down img.on{
	border:1px solid #404671;
}
.article_ring .right{
	width: 584px;
	float: left;
}
.article_ring .right h1{
	font-size:34px;
	color: #ff0f23;
}
.article_ring .right>span{
	display: inline-block;
	font-size:18px;
	background-color:#404671;
	color: #fff;
	padding: 10px 28px;
	margin-top: 20px;
}
.article_ring .right ul{
	margin-top: 10px;
}
.article_ring .right ul li{
	padding: 20px 0 17px 0;
	border-bottom: 1px solid #dddddd;
}
.article_ring .right ul li span{
	display: inline-block;
	width: 50px;
	font-size:14px;
	color: #ff6f03;
	font-weight:800;
}
.article_ring .right ul li span:last-child{
	width: 474px;
	font-weight:400;
}
.article_ring .right ul li:last-child{
	border-bottom: 0;
}
.article_ring .right ul li:last-child  span:last-child{
	width: 100%;
	margin-top: 20px;
	font-size:14px;
	line-height:30px;
}
.product .title,.more .title{
	text-align: center;
	margin-top: 100px;
}
.mian{
	margin-top: 80px;
}
.mian p{
	text-align: center;
}
.mian p img{
	max-width:100%;
	text-align: center;
}
.more .swiper-container{
	margin-top: 95px;
	margin-bottom: 100px;
}
.more .swiper-container .swiper-slide div.pic{
	width: 420px;
	height: 420px;
	overflow: hidden;
	position: relative;
	border:1px solid #fff;
}
.more .swiper-container .swiper-slide div.pic img{
	width: 100%;
	height: 100%;
	position: absolute;
	top:50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
	transition:all 1s;
}
.more .swiper-container .swiper-slide a:hover div.pic img{
	width: 110%;
	height: 110%;
}
.more .swiper-container .swiper-slide a span{
	display: block;
	text-align: center;
	font-size:15px;
	margin-top: 24px;
}
.more .swiper-container .swiper-button-next{
	background-image:url(../images/you.png);
}
.more .swiper-container .swiper-button-prev{
	background-image:url(../images/you.png);
	transform: rotate(180deg);
}
.more .swiper-button-next,.more  .swiper-button-prev{
	width: 48px;
	height: 88px;
	background-size:10px 18px;
}
.more .swiper-button-next:hover,.more  .swiper-button-prev:hover{
	background-color:rgba(0, 0, 0, 0.04);
}