/* Index1  Start*/

/* Banner  Start*/
.index_banner{width:100%;height:710px;position:relative;background-color:#111}
.index_banner .swiper-container{width:100%;height:100%; position: relative;}
.index_banner .swiper-slide{position:relative}
.index_banner .swiper-slide .text{width:1200px; position:absolute; top:50%; left:48%;transform:translate(-50%,-55%);cursor:pointer}
.index_banner .swiper-slide img{transform:translateY(100px);transition:all .3s;opacity:0}
.index_banner .swiper-slide h3{color:#fff;font-size:50px;line-height:1;text-transform:uppercase;font-family:montserrat-medium; 
	text-align:center;}
.index_banner .swiper-slide h3 span{color:#fff;font-size:66px;text-transform:uppercase;font-family:montserrat-medium;}
.index_banner .swiper-slide h2{color:#ffff00;font-size:38px;line-height:1;margin:65px 0 35px;transform:translateY(100px);opacity:0;
	transition:all .3s;transition-delay:.2s;font-family:"microsoft yahei,????";text-align:center;}
.index_banner .swiper-slide h2 span{color:#fff;font-size:38px;font-family:dinpro-bold}
.index_banner .swiper-slide p{color:#fff;font-size:18px;line-height:1;margin:0;transform:translateY(100px);opacity:0;
	transition:all .5s;transition-delay:.4s;
	text-align:center;
}
.swiper-pagination{ position: absolute; bottom: 40px!important;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    left: 0;
    width: 100%;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius:10px;
	border: 2px solid #fff;
	opacity:1;
	background: none;
}
/*分页器选中*/
.swiper-pagination-bullet-active {
	background: #fff!important;
	border: 2px solid #37b4e0;
}
.swiper-containerc{ text-align: center;}
.swiper-containerc .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius:10px;
	border: 2px solid #ccced0!important;
	opacity:1;
	background: #ccced0!important;
}
/*分页器选中*/
.swiper-containerc .swiper-pagination-bullet-active {
	background: #20217d!important;
	border: 2px solid #20217d!important;
}

.swiper-containerd{ text-align: center;}
.swiper-containerd .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius:10px;
	border: 2px solid #ccced0!important;
	opacity:1;
	background: #ccced0!important;
}
/*分页器选中*/
.swiper-containerd .swiper-pagination-bullet-active {
	background: #20217d!important;
	border: 2px solid #20217d!important;
}

.swiper-containere{ text-align: center;}
.swiper-containere .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius:10px;
	border: 2px solid #ccced0!important;
	opacity:1;
	background: #ccced0!important;
}
/*分页器选中*/
.swiper-containere .swiper-pagination-bullet-active {
	background: #20217d!important;
	border: 2px solid #20217d!important;
}


.swiper-containerf .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius:10px;
	border: 2px solid #fff!important;
	opacity:1;
	background: #fff!important;
}
/*分页器选中*/
.swiper-containerf .swiper-pagination-bullet-active {
	background: #ccced0!important;
	border: 2px solid #ccced0!important;
}

.swiper-paginationf{ position: absolute; bottom: 90px!important;  padding-left: 15px;z-index: 999;}



.swiper-button-prev, .swiper-button-next{ width: 52px!important; height: 53px!important;}
.swiper-button-prev:after, .swiper-button-next:after{
    content: ''!important;
	display: block;
	width: 52px;
	height: 53px;
}
.swiper-button-prev:after{
	background: url(/home/static/images/left.png) no-repeat;
}
.swiper-button-next:after{
	background: url(/home/static/images/right.png) no-repeat;
}

@media screen and (max-width:1580px){.index_banner .swiper-slide img{width:1000px}
	.index_banner .swiper-slide h2{font-size:58px}
	.index_banner .swiper-slide p{font-size:28px}
	.index_banner .swiper-slide h3{font-size:40px}
}

@media screen and (max-width:1460px){
	.index_banner .swiper-slide img{width:880px}
	.index_banner .swiper-slide h2{font-size:50px}
	.index_banner .swiper-slide p{font-size:22px}
	.index_banner .swiper-slide h3{font-size:28px}
}

.index_banner .swiper-slide-active img{transform:translateY(0);opacity:1}
.index_banner .swiper-slide-active h2{transform:translateY(0);opacity:1}
.index_banner .swiper-slide-active p{transform:translateY(0);opacity:1}

@media (min-width: 767px) and (max-width: 991px){
	.index_banner{width:100%;height:410px;position:relative;background-color:#111}
	.index_banner .swiper-slide h2{display: none;}
	.index_banner .swiper-slide p{display: none;}
	.index_banner .swiper-slide h3{display: none;}
}

@media screen and (max-width:767px) {
	.index_banner{width:100%;height:420px;position:relative;background-color:#111}
	.index_banner .swiper-slide h2{font-size: 20px; width: 300px; margin: 0px auto;}
	.index_banner .swiper-slide p{font-size: 14px; width: 300px; margin: 0px auto; line-height: 24px;}
	.index_banner .swiper-slide h3{display: none;}
	.logo a img {width: 160px; height: 40px;}
	.nav {height: 80px;}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev { display:none!important;}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next { display:none!important;}
}




.about{ background: url(/home/static/images/aboutbg.png) no-repeat center top; padding-top: 30px; padding-bottom: 30px;}
.about .aboutcon{ width: calc(55% - 30px);}
.about .aboutcon h2{ color: #20217d; font-size: 22px; font-weight: 600;}
.about .aboutcon dd{ color: #666666; font-size: 14px; line-height: 25px; margin-top: 10px;}
.about .aboutcon ul {display: flex; justify-content: center; margin-top: 20px;}
.about .aboutcon ul li{ 
	width: 25%; text-align: center; margin-right: 30px; padding:15px 20px;
	border-radius: 10px; border: #cccccc 1px solid;
}
.about .aboutcon ul li p{ font-size: 15px; color: #999999; line-height: 24px;}
.about .aboutcon ul li p span{ font-size: 28px; color: #20217d; font-weight: bold; margin-right: 5px;}
.about .aboutcon dl{ margin: 20px 0px;}
.about .aboutcon dl a{ 
	display: block; height: 40px; line-height: 40px; border-radius: 40px; width: 120px; 
	text-align: center; border: 1px solid #20217d; color: #20217d; font-size: 14px;
}
.about .aboutcon dl a:hover{ 
	background-color:#20217d; color:#fff;
}
.about .aboutvide{ width: 45%; padding: 0; border-radius: 8px;}
.about .aboutvide video{ width: 100%; border-radius: 8px;}
@media (min-width: 991px) and (max-width: 1100px){
	
}

@media (min-width: 767px) and (max-width: 991px){
	.about{ background: url(/home/static/images/aboutbg.png) center top; padding-top: 30px; padding-bottom: 30px;}
	.about .aboutcon{ width: 100%;}
	.about .aboutcon dl a{ 
		display: none;
	}
	.about .aboutcon ul li p{ font-size: 12px; color: #999999; line-height: 30px;}
	.about .aboutvide{ width: 100%; background: #17242b; padding: 0; border-radius: 8px;}
}

@media screen and (max-width:767px) {
	.about{ background: url(/home/static/images/aboutbg.png) center top; padding-top: 30px; padding-bottom: 30px;}
	.about .aboutcon{ width: 100%;}
	.about .aboutcon dl a{ 
		display: none;
	}
	.about .aboutcon ul li{
		width: 30%; text-align: center; margin-right: 20px; padding: 20px 10px;
		border-radius: 10px; border: #cccccc 1px solid;
	}
	.about .aboutcon ul li p{ font-size: 12px; color: #999999; line-height: 30px;}
	.about .aboutcon ul li p span{ font-size: 22px; color: #20217d; font-weight: bold; margin-right: 0px;}
	.about .aboutvide{ width: 100%; background: #17242b; padding: 0; border-radius: 8px;}
	.about .aboutvide video{ width: 100%; border-radius: 8px;}
	.product ul li { padding: 0 10px!important;}
	.yewulist .swiper-slide div h4{line-height: 24px!important;}
}



.yewu{ background: url(/home/static/images/yewubg.png) no-repeat center top; padding-top: 30px; padding-bottom: 30px;}
.ylist2{display: none;}
.yewulist{overflow: hidden; padding-bottom: 30px;}
.yewulist .swiper-wrapper{ margin-bottom: 30px;}
.yewulist .swiper-slide{position: relative;}
.yewulist .swiper-slide img{ width: 100%; transition: all 0.5s;}
.yewulist .swiper-slide:hover img{ transform: scale(1.05);}
.yewulist .swiper-slide:hover div img{filter: blur(0px); -webkit-filter: blur(0px); transform: scale(1);}

.yewulist .swiper-slide div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center;}
.yewulist .swiper-slide div img{ height: 50px; width: auto; margin-top: calc(50% - 70px);}
.yewulist .swiper-slide div h4{ color: #fff; font-size: 18px; line-height: 40px;}

@media (min-width: 991px) and (max-width: 1100px){
	
}

@media (min-width: 767px) and (max-width: 991px){
	.yewu{padding-bottom: 0px;}
	.ylist1{display: none;}
	.ylist2{display: block;}
	.yewulist{overflow: initial; padding-bottom: 0px;}
	.yewulist .swiper-slide{ width: 49%; float: left;}
	.yewulist .swiper-slide:nth-child(2n){margin-left: 2%;}
}

@media screen and (max-width:767px) {
	.yewu{padding-bottom: 0px;}
	.ylist1{display: none;}
	.ylist2{display: block;}
	.yewulist{overflow: initial; padding-bottom: 0px;}
	.yewulist .swiper-slide{ width: 49%; float: left; margin-bottom: 2%;}
	.yewulist .swiper-slide:nth-child(2n){margin-left: 2%;}
}


.service{ padding-top: 30px; padding-bottom: 30px;}
.serlist{overflow: hidden; padding-bottom: 30px;}
.serl2{display: none;}
.serlist .swiper-wrapper{ margin-bottom: 30px;}
.serlist .swiper-slide{position: relative; /*padding: 0 10px;*/}
.serlist .swiper-slide dl{ background: #f7f7f7; border-radius: 10px; margin-top: 20px; overflow: hidden;transition: all 0.5s; box-shadow:2px 2px 2px #ddd; width: 32.33333%;
    float: left;
    margin-right: 1%;}
.serlist .swiper-slide dl:hover{ transform: scale(1.02); box-shadow:5px 5px 5px #ddd; }
.serlist .swiper-slide dl:nth-child(3n){ width: 32.33333%; margin-right:0;}
.serlist .swiper-slide dl dd:nth-child(1){background: #20217d; float: left;}
.serlist .swiper-slide dl dd:nth-child(1) div{ width: 107px; height: 107px; background: #20217d; display: table-cell;
vertical-align:middle;text-align:center;}
.serlist .swiper-slide dl dd:nth-child(1) div img{vertical-align:middle;}
.serlist .swiper-slide dl dd:nth-child(2){ width: calc(100% - 115px); height: 107px; float: right; text-align: left; padding: 10px;}
.serlist .swiper-slide dl dd:nth-child(2) h4{ font-size: 16px; line-height: 30px; font-weight: bold;}
.serlist .swiper-slide dl dd:nth-child(2) p{ font-size: 14px; line-height: 25px; overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;}
@media (min-width: 991px) and (max-width: 1100px){
	
}

@media (min-width: 767px) and (max-width: 991px){
	.service{ padding-top: 30px; padding-bottom: 0px;}
	.serlist{overflow: initial; padding-bottom: 0px;}
	.serl1{display: none;}
	.serl2{display: block;}
}

@media screen and (max-width:767px) {
	.service{ padding-top: 30px; padding-bottom: 30px;}
	.serlist{overflow: initial; padding-bottom: 0px;}
	.serl1{display: none;}
	.serl2{display: block;}
}

.product{ background: url(/home/static/images/probg.png) no-repeat center top; padding-top: 30px; padding-bottom: 30px;}
.pro2{display: none;}
.product ul{ display: flex; justify-content: center; width: 100%; border-bottom: 1px solid #ccc; margin: 0 auto; margin-bottom: 20px;}
.product ul li{ text-align: center; font-size: 16px; line-height: 50px; padding: 0 30px;}
.product ul li:hover,.product ul li.active{ border-bottom:1px solid #20217d; color: #20217d;}
.product ul li:hover a{color: #20217d;}
.prolist{overflow: hidden; padding-bottom: 30px;}
.prolist .swiper-wrapper{ margin-bottom: 30px;}
.prolist .swiper-slide{background: #ffffff; border-radius: 10px; box-shadow:5px 5px 5px #ddd; transition: all 0.5s; overflow:hidden;}
.prolist .swiper-slide:hover{background: #20217d; transform: scale(1.05);}
.prolist .swiper-slide a:hover{ color:#fff;}
.prolist .swiper-slide img{ width: 100%;}
.prolist .swiper-slide h4{font-size: 14px; line-height: 40px; height: 40px; text-align: center;}

@media (min-width: 991px) and (max-width: 1100px){
	
}

@media (min-width: 767px) and (max-width: 991px){
	.product{padding-bottom: 0px;}
	.pro1{display: none;}
	.pro2{display: block;}
	.prolist{overflow: initial; padding-bottom: 0px;}
	.prolist .swiper-slide{ width: 49%; float: left; margin-bottom: 20px;}
	.prolist .swiper-slide:nth-child(2n){margin-left: 2%;}
}

@media screen and (max-width:767px) {
	.product{padding-bottom: 0px; background: url(/home/static/images/probg.png);}
	.pro1{display: none;}
	.pro2{display: block;}
	.prolist{overflow: initial; padding-bottom: 0px;}
	.prolist .swiper-slide{ width: 49%; float: left; margin-bottom: 20px;}
	.prolist .swiper-slide:nth-child(2n){margin-left: 2%;}
}
.news{padding-top: 30px; padding-bottom: 30px;}
.newtop{overflow: hidden; padding-bottom: 30px; width: 50%; position: relative;}
.newtop .swiper-wrapper{}
.newtop .swiper-slide{position: relative; overflow: hidden;}
.newtop .swiper-slide a{ display: block;}
.newtop .swiper-slide img{ width: 100%; height: 350px; transition: all 0.5s;}
.newtop .swiper-slide img:hover{ transform: scale(1.1);}
.newtop .swiper-slide div{ position: absolute; bottom: 0; left: 0; width: 100%; height:50px; line-height: 50px; padding-left: 20px; 
background: rgba(79, 79, 79, 0.7); overflow: hidden;}
.newtop .swiper-slide div h4{ color: #fff; font-size: 14px; float: left;}
.newtop .swiper-slide div span{ color: #fff; font-size: 14px; float: right; margin-right: 10px;}
.newlist{ width: calc(50% - 30px);}
.newlist li {overflow: hidden;border-bottom: 1px solid #cccccc; padding: 12px 0 12px 0px;}
.newlist li dd:nth-child(1){ width: 80px; float: left; text-align: center; padding-top: 10px; border-right: 1px solid #ccc;}
.newlist li dd:nth-child(1) span{ font-size: 24px;}
.newlist li dd:nth-child(1) p{ font-size: 14px;}
.newlist li dd:nth-child(2){ width: calc(100% - 100px); float: right;}
.newlist li dd:nth-child(2) h4{ font-size: 16px; line-height: 40px; height: 40px; overflow: hidden;}
.newlist li dd:nth-child(2) p{ font-size: 14px; line-height: 25px; color: #999999; overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;}
.newlist li:hover{ background: url(/home/static/images/newsbg.png) no-repeat left top; background-size: 100% 100%;}
.newlist li:hover a{ color: #fff;}

@media (min-width: 991px) and (max-width: 1100px){
	
}

@media (min-width: 767px) and (max-width: 991px){
	.newtop{overflow: hidden; padding-bottom: 30px; width: 100%; position: relative;}
	.newlist{ width: 100%;}
}

@media screen and (max-width:767px) {
	.newtop{overflow: hidden; padding-bottom: 30px; width: 100%; position: relative;}
	.newlist{ width: 100%;}
}