/* CSS Document */
.header .logo{
	margin-top:1.4rem;
}
.col_top_right {
	width:74.50%;
}

.col_top h3{
	position:absolute;
	left:2rem;
	top:2rem;
	font-weight:400;
	z-index:1;
}
.clo_top_left{
	background:#f2f6ff;
	padding:3rem 2rem;
}
.col_top_right  .active h3:after{
	content:"";
	display:block;
	width:3.2rem;
	height:3.2rem;
	margin-top:2rem;
	background:url(../image/ico_more.webp) no-repeat center;
	background-size:100% auto;
}
.col_top li:hover h3:after {
	display:block;
}
 .customize a,.aboutus-info .text li:nth-child(1) a {
        display: block;
     line-height: 6rem;
     position: relative;
    padding-left: 2rem;
    color: #fff;
 	background:#f90 url(../image/more_r_bai.webp) no-repeat 96% center;
	font-size:2rem
    }
.mask,.aboutus-info .text li:nth-child(2) a {
     width: 100%;
    height: 60px;
    line-height: 60px;
    display: block;
    font-size: 2rem;
    padding-left: 2rem;
    color: #3671cf;
    transition: all .5s ease-out;
    border-bottom: #3671cf 3px solid;
 	background:url(../image/more_r_lan.webp) no-repeat 96% center;
	position:relative;
	z-index:1;
}
.view::after ,.aboutus-info .text li:nth-child(2):after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    background: #3671cf;
    transition: all .5s ease-out;
 }
  .view:hover::after ,.aboutus-info .text li:hover:nth-child(2):after{
    height: 100%;
}
.view:hover .mask ,.aboutus-info .text li:hover:nth-child(2)  a{
    color: #fff;
	background:url(../image/more_r_bai.webp) no-repeat 96% center;
}
.col_top_right .swiper-slide{
	position:relative;
}
.col_top_right .swiper-slide::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    transition: all .6s ease;
}
.col_top_right  .active::after{
    background: rgba(0, 0, 0, 0);
}
.products .swiper-slide{
	overflow:hidden;
}
.products .pro-item .left-x {
    position: absolute;
    top: 20%;
    left: 9%;
	display:none;
}
.products .pro-item .right-x {
    position: absolute;
    z-index: 9;
    top: 48%;
    right: 5%;
	display:none;
}
 .products  .pro-pagination {
    position: absolute;
    width: 100%;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 666;
    text-align: center;
}
.products .pro-item .left-x.active,.products .pro-item .right-x.active{
	display:block;
}
.pro-pagination li{
	display:inline-block;
	width:14rem;
	height:4rem;
     vertical-align: middle;
	 text-align:left;
	position:relative;
	z-index:1;
 }
.pro-pagination  span{
	width:4rem;
    line-height: 4rem;
    font-size: 2.4rem;
	background:none;
	display:inline-block;
	text-align:center;
}
.pro-pagination  .active span{
	background:#f90;
	border-radius:50%;
	color:#fff;
}
.pro-pagination  li::after , .products  .pro-pagination li:first-child:after{
    content: "";
    width: 8rem;
    height: 0.2rem;
    background-color: #d5d5d5;
    display: inline-block;
    vertical-align: middle;
	margin-left:1rem;
 }
.products .pro-pagination li:last-child:after{
	display:none;
}
.products  .pro-pagination li:first-child{
	width:22rem;
	display:none;
}
 .products  .pro-pagination li:first-child span {
    width: 12rem;
	line-height:4rem;
    border-radius: 0.2rem;
    border: solid 1px #d5d5d5;
    text-align: center;
    color: #757575;
    font-size: 2.4rem;
    display: inline-block;
}
 .products  .pro-pagination  li:last-child {
    width: 14.4rem;
	line-height:4rem;
    background-color: #ff9800;
    border-radius: 0.2rem;
    font-size: 2.4rem;
    cursor: pointer;
	text-align:center;
 }
 .pro-pagination  li:last-child a{
	color:#fff;
}
.products h2{
	color:#003f98;
	font-weight:500;
	line-height:1.2em;
}
.products h3{  
    color: #3671cf;
    vertical-align: middle;
    margin-bottom: 1rem;
}
.products h3::after {
    content: "";
    background-color: #3671cf;
    height: 0.2rem;
    width: 9rem;
    display: inline-block;
    vertical-align: middle;
	margin-left:1rem;
}
.products p{
	font-size:2.4rem;
	margin:2rem 0;
}
.products .left-x .zixun a {
    width: 26rem;
     display: inline-block;
     line-height: 7rem;
    text-align: center;
    vertical-align: top;
    font-size: 2.4rem;
	border-radius:0.2rem;
}
.products .left-x .zixun .getprice {
    background-color: #ff9800;
        border: solid 2px #ff9800;
    color: #fff;
    margin-right: 3rem;
}
.products .left-x .zixun .specification {
        border: solid 2px #3671cf;
		color:#3671cf;
     }

.products  .right-x ul {
        padding: 16px;
        border: 4px solid rgba(0, 63, 152, .2);
    }
 

 .products   .right-x ul {
    background-color:rgba(0, 63, 152, .3);
    padding: 1rem 3rem;
    border: 0.8rem solid rgba(0, 63, 152, .2);
}

.products .right-x ul li::before {
    content: "";
    width: 2.3rem;
    height: 2.6rem;
    background:url(../image/3p_ico.webp) center no-repeat;
	background-size:100% auto;
     display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
}
.products .right-x ul li{
	color:#fff;
 	font-size:2.4rem;
}
.cases .tab-pane li .more{
	background:url(../image/more_r_bai.webp) no-repeat right center;
	background-size:2.4rem auto;
	padding-right:4rem;
	display:none;
}
.cases .tab-pane li:hover .more{
	display:inline-block;
}
.cases-nav li,.cases-nav .more,.materials-nav li a,.news-nav .more{
	border:1px solid #ddd;
	margin-left:2rem;
	padding:0 1rem;
	line-height:4.8rem;
	border-radius:0.2rem;
}
.cases-nav li h2,.materials-nav h2{
	line-height:1;
}
.cases-nav li.active{
	color:#fff;
	background:#1976d2;
}
.cases-nav .more,.materials-nav .more,.news-nav .more{
	color:#fff;
	background:#f90;
	border-color:#f90;
}
.materials-more{
	display:inline-block;
 	color:#fff;
	padding-right:4.4rem;
	background:url(../image/ico_more.png) no-repeat right center;
	background-size:1.6rem auto;
	font-size:2.4rem;
	margin-top:1rem;
}
.materials-list_top h3 a,.materials-list_top h3{
	line-height:1.2;
}
.materials-list_bottom .swiper-slide:hover img{
	border-radius:7rem;
}
.materials-nav li a {
    display: block;
    border-radius: 0.4rem;
}
.materials-nav,.news-nav{
	margin-bottom:4rem;
}
 
.box_width_index .f_online_chat {
	width:17%;
}
.aboutus-info .text{
	width:52%;
}
.aboutus-info_right{
	width:46%;
}
.aboutus-info .text li{
	position:relative;
}
.aboutus-info .text ul{
	width:40%;
}
.cooperators .swiper-slide{
	background:#f2f6ff;
	text-align:center;
}
.cooperators  img{
	margin:auto;
}
.cooperators h2{
 	line-height:1;
	width:18%;
}
.cooperators span{
	width:28%;
	line-height:4.8rem;
	vertical-align:middle;
}
  .cooperators .bgf0f0f4 {
	display:inline-block;
    height: 1.8rem;
	width:54%;
    background-color: #f0f0f4;
	margin-top:1.4rem;
}
.cooperators .text span:before{
	content:'/ ';
}
.cooperators .swiper-button-prev,.cooperators .swiper-button-next{
	width: 4rem;
	height: 10rem;
	position: absolute;
	top:50%;
	transform:translateY(-50%);
}
.cooperators .swiper-button-prev{
	left:0;
	background:url(../image/l_1.webp) no-repeat left center;
	background-size:100% auto;
}
.cooperators .swiper-button-next{
	right:0;
	background:url(../image/r_1.webp) no-repeat left center;
	background-size:100% auto;
}
.news-list_left .swiper-slide{
	background:#f2f6ff;
	position:relative;
 }
 .news-list_left .swiper-slide .text{
	 padding:2rem 2rem 4rem;
 }
.news-list_left  .more{
	display:block;
    margin-top: 3rem;
    border: solid 1px #3671cf;
    line-height: 5.8rem;
    width: 24rem;
      color: #3671cf;
    transition: ease-out all .6s;
	padding-left:2rem;
	background:url(../image/more_r_lan.webp) no-repeat 96% center;
	background-size:2.4rem auto;
} 
  .news-list_left .swiper-slide:hover .more{
 	background:url(../image/more_r_bai.webp) no-repeat 96% center;
	background-size:2.4rem auto;
	border-color:#fff;
}
  .news-list_left .swiper-slide:hover a{
	color:#fff;
  }
  .news-list_left .swiper-slide::after {
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
     top: 0;
    left: 0;
    background-color: #3671cf;
    transition: all .6s ease-out;
}
  .news-list_left .swiper-slide:hover::after ,.news-list_right  .swiper-slide{
	  width:100%;
}
  .news-list_left a,  .news-list_left .text{
	  position:relative;
	  z-index:1; 
  }
.news-nav li{
	margin:0 0.4rem ;
}
.news-nav ul{
	margin-left:1rem;
	margin-top:1rem;
}
.news-nav h2{
	line-height:5rem;
}
.news-list_right{
	width:32.26%;
	margin-left:1.61%;
}
 .news-list_right {
    height:100%;
	padding-bottom:3.9rem;
	overflow:hidden;
	 max-height:57.6rem;
}
.news-list_right.swiper-vertical {
    touch-action: pan-x;
}
.news-list_right .swiper-wrapper{
 flex-wrap:wrap;
}
.news-list_right  .swiper-slide{
 	padding:1rem 2rem;
	border-bottom:1px dashed #ddd;
}
.news-list_right  .swiper-slide:hover{
	background:#f2f6ff;
}
.news-list .text h4{
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.tab-pane li{height: 35rem;}
.tab-pane li>a{ background-repeat: no-repeat;  display: block; width: 100%; height: 100%;   transition: transform 0.3s ease; background-size: 100% auto;}
.quarry li>a{background-image: url(../image/quarry.webp);}
.metal li>a{background-image: url(../image/metal.webp); }
.power li>a{background-image: url(../image/power.webp); }
.portable li>a{background-image: url(../image/portable.webp); }
.tab-pane li:hover>a{transform: scale(1.1);}
.tab-pane li{overflow: hidden;}
.tab-pane li:nth-child(1)>a{background-position: 0 0;  }
.tab-pane li:nth-child(2)>a{background-position: 0 -35.3rem; }
.tab-pane li:nth-child(3)>a{background-position: 0px -70.6rem; }
.tab-pane li:nth-child(4)>a{background-position: 0 -105.9rem;  }
.tab-pane li:nth-child(5)>a{background-position: 0 -141.3rem;}
.tab-pane li:nth-child(6)>a{background-position: 0px bottom;}
.materials-list_bottom .swiper-slide{width: 100%;  height: 12rem;}
.materials-list_bottom .swiper-slide a.mat {display: block; width: 100%;height: 100%; transition: all ease-out 0.4s; background-image: url(../image/materials.webp); background-repeat: no-repeat; background-size: 100% 96rem;}
.materials-list_bottom .swiper-slide:hover a {border-radius: 7rem;}
.copper {background-position: 0px 0px;}
.iron {background-position: 0px -16rem;}
.basalt {background-position: 0px -32rem;}
.golde {background-position: 0px -48rem;}
.coal {background-position: 0px -64rem;}
.gypsum{background-position: left bottom}
.aboutus-info_right li { height: 22.6rem;   }
.about_pic { display: block; width: 100%; height:100%; background-image: url(../image/about_pic.webp); background-size: 100% 98.9rem; background-repeat: no-repeat; transition: transform 0.3s ease;}
.about_pic:hover {transform: scale(1.1);}
.about_pic_1 {background-position: 0px 0px;}
.about_pic_2 {background-position: 0px -24.725rem;}
.about_pic_3 {background-position: 0px -49.45rem;}
.about_pic_4 {background-position: 0px -74.175rem;}
.cooperators .swiper-slide{height: 13rem;}
.cooperators .swiper-slide span {display: block; width: 100%; background-image: url(../image/cooperators.webp);background-repeat: no-repeat; background-size: 100% 260.3rem;height: 13rem;}
.cooperators-1 {background-position: 0px 0px;}
.cooperators-2 {background-position: 0px -13rem}
.cooperators-3 {background-position: 0px -26rem}
.cooperators-4 {background-position: 0px -39rem}
.cooperators-5 {background-position: 0px -52rem}
.cooperators-6 {background-position: 0px -65rem}
.cooperators-7 {background-position: 0px -78rem}
.cooperators-8 {background-position: 0px -91rem}
.cooperators-9 {background-position: 0px -104rem}
.cooperators-10 {background-position: 0px -117rem}
.cooperators-11 {background-position: 0px -130rem}
.cooperators-12 {background-position: 0px -143rem}
.cooperators-13 {background-position: 0px -156rem}
.cooperators-14 {background-position: 0px -169rem}
.cooperators-15 {background-position: 0px -182rem}
.cooperators-16 {background-position: 0px -195rem}
.cooperators-17 {background-position: 0px -208rem}
.cooperators-18 {background-position: 0px -221rem}
.cooperators-19 {background-position: 0px -234rem}
.cooperators-20 {background-position: 0px bottom }
@media all and (max-width:1640px) {
html {
	font-size: 0.625vw;
}
.box_width_index {
	padding-left: 2.4rem;
	padding-right: 2.4rem;
}
.news-list_right {max-height:55.3rem;}
.tab-pane li{height: 33.4rem;}
.tab-pane li:nth-child(2)>a{background-position: 0 -33.4rem;  }
.tab-pane li:nth-child(3)>a{background-position: 0px -66.8rem; }
.tab-pane li:nth-child(4)>a{background-position: 0 -100.1rem;  }
.tab-pane li:nth-child(5)>a{background-position: 0 -133.5rem; }
.cooperators .swiper-slide,.cooperators .swiper-slide span {height: 12rem;}
}
@media all and (max-width:1620px) and (min-width:1440px) {
 
}
@media all and (max-width:1439px) and (min-width:751px) {
 
}
@media all and (max-width:750px) {
html {
	font-size: 1.335vw
}
	.box_width_index .f_online_chat, .cooperators h2,.cooperators span, .aboutus-info .text, .aboutus-info_right,.news-list_left,.news-list_right ,.cases .tab-pane li ,.cases h2,.cases .tab-menu, .clo_top_left,.col_top_right ,.aboutus-info .text ul,.materials-nav ul,.materials-nav li ,.news-nav ul{
		width:100%;
	}
.cases .tab-pane li,.clo_top_left{
	margin-right:0;
}
.cooperators .swiper-button-prev, .cooperators .swiper-button-next, .cooperators .bgf0f0f4,.cooperators span:before, .aboutus-info .text li:nth-child(1) a,.materials-nav .more, .cases-nav .more ,.customize a,.cases .tab-pane li:nth-child(n+4),.news-nav .more,.news-nav li:nth-child(2),.zixun,.products .pro-pagination li:first-child,.products .pro-pagination li:last-child,.pro-pagination, .header .affix .nav_language{
	display:none;
}
.cooperators, .aboutus-info, .cases-nav .mor,.cases ,.clo_top_left,.materials h2,.news-nav h2,.news-nav ul{
	text-align:center;
}
.news-list{
	flex-wrap:wrap;
}
.news-list_left .swiper-slide .more{
	background:none;
	width:28rem;
	padding:0;
	text-align:center;
	border-radius:3rem;
	font-size:2.8rem;
}.cases h2,.cases .tab-menu, .aboutus-info .text, .aboutus-info_right,.materials h2,.materials-nav ul,.news-nav h2,.news-nav ul {
	float:none;
}
.body_index #header,.aboutus-info .text li,.col_top  li.view{
	position:static;
}
.header .nav_ul>li a, .header .affix .nav_ul .active>a, .header .affix .nav_ul>li:hover>a{
	color:#000f24;
}
.header .box_width_index,.clo_top_left{
	padding:0;
}
.clo_top_left{
	background:none;
}
.mask, .aboutus-info .text li:nth-child(2) a, .materials-nav li a {
width: 100%;
    line-height: 8rem;
    background: #3671cf;
    border-radius: 4rem;
    text-align: center;
    margin: 4rem auto 0;
	color:#fff;
	height:8rem;
	position:absolute;
	bottom:0;
	font-size:3.2rem;
}
.cases-nav li{
	line-height:6rem;
	border-radius:3rem;
	margin:0 2rem 0 0;
	padding:0 2rem;
	white-space:nowrap;
}
.cases-nav ul{
	overflow-x:auto;
	flex-wrap: nowrap;
        scrollbar-color: #fff #fff;
		padding-bottom:4px;
		margin-top:2rem;
}
.cases img{
	width:100%;
}
.aboutus-info,.col_top,.materials ,.news {
	position:relative;
	padding-bottom:10rem;
}
.aboutus-info .text ul,.col_top_right  {
	margin-top:2rem;
}
.mask,.materials-nav li, .materials-nav li a{
	width:calc(100% - 6rem)
}
.news-nav li:nth-child(1){
	width:65%;
	margin-right:4%;
    background: #3671cf;
}
.news-nav li:nth-child(3){
	width:31%;
	border:1px solid #3671cf;
}
.news-nav li:nth-child(3) a,.news-list_right  .swiper-slide .more{
	color:#3671cf;
}
 .news-nav li{
     line-height: 8rem;
    border-radius: 4rem;
    text-align: center;
    margin: 4rem auto 0;
	color:#fff;
	height:8rem;
 }
 .news-nav li a{
	color:#fff;
 	font-size:3.2rem;
}
.news-nav ul{
	width:calc(100% - 6rem);
	position:absolute;
	bottom:0;
}
.news-list_right  .swiper-slide{
	background:#f2f6ff;
	padding:1rem 2rem;
 }
 .news-list_right{
	 margin-left:0;
	 margin-top:2rem;
 }
 .products .pro-item .left-x{
	 top:4rem;
	 left:3rem;
 }
 .products .pro-item .right-x{
	 bottom:40rem;
	 left:3rem;
	 right:auto;
 }
 .products{
	 padding:0 3rem;
 }
 .header .logo{
	margin-top: 0;
}
 .materials-list_top h3 br{
	 display:none;
 }
 .materials-list_top h3 a{
	 font-size:3rem; }
.tab-pane li{height: 46rem;}
.tab-pane li:nth-child(2)>a{background-position: 0 -46.7rem;  }
.tab-pane li:nth-child(3)>a{background-position: 0px -93.5rem; }
.tab-pane li:nth-child(4)>a{background-position: 0 -140.1rem;  }
.tab-pane li:nth-child(5)>a{background-position: 0 -186.8rem; }
.cooperators .swiper-slide,.cooperators .swiper-slide span {height: 8rem;}
.cooperators .swiper-slide span{background-size: 100% 173rem;}
.cooperators-2 {background-position: 0px -9rem}
.cooperators-3 {background-position: 0px -18rem}
.cooperators-4 {background-position: 0px -26rem}
.cooperators-5 {background-position: 0px -35rem}
.cooperators-6 {background-position: 0px -43.4rem}
.cooperators-7 {background-position: 0px -52rem}
.cooperators-8 {background-position: 0px -61rem}
.cooperators-9 {background-position: 0px -69rem}
.cooperators-10 {background-position: 0px -78.4rem}
.cooperators-11 {background-position: 0px -87rem}
.cooperators-12 {background-position: 0px -95rem}
.cooperators-13 {background-position: 0px -104rem}
.cooperators-14 {background-position: 0px -113rem}
.cooperators-15 {background-position: 0px -122rem}
.cooperators-16 {background-position: 0px -130rem}
.cooperators-17 {background-position: 0px -139rem}
.cooperators-18 {background-position: 0px -147rem}
.cooperators-19 {background-position: 0px -156rem}
}
:root {
 --animate-duration: 1s;
 --animate-delay: 1s;
 --animate-repeat: 1
}
.animate__animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-duration: var(--animate-duration);
	animation-duration: var(--animate-duration);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
 @-webkit-keyframes slideInLeft {
 0% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 visibility: visible
}
to {
	-webkit-transform: translateZ(0);
	transform: translateZ(0)
}
}
 @keyframes slideInLeft {
 0% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 visibility: visible
}
to {
	-webkit-transform: translateZ(0);
	transform: translateZ(0)
}
}
.animate__slideInLeft {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft
}
 @-webkit-keyframes slideInRight {
 0% {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 visibility: visible
}
to {
	-webkit-transform: translateZ(0);
	transform: translateZ(0)
}
}
 @keyframes slideInRight {
 0% {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 visibility: visible
}
to {
	-webkit-transform: translateZ(0);
	transform: translateZ(0)
}
}
.animate__slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight
}