/* CSS Document */
:root{
	--main_color:linear-gradientradient(to right,rgba(44,70,0), rgba(132,168,47));     /* 主色 */
	--main_color_rgb:50,152,255;  /* rgba */}
@font-face{ font-family:'alimama'; src: url('/images/alimama.ttf');}
@font-face{ font-family:'Beba'; src: url('/images/BebasNeue-Bold.ttf');}
a {
    text-decoration: none;
}
.t_left_center{ display: flex; flex-direction: column; justify-content: center;}
.flex_start{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.flex_space{ display: flex; justify-content: space-between; flex-wrap: wrap;align-items: center;}
.t_center{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
.width_1600{ width:1520px; margin:0 auto;}
.container-fluid{overflow:hidden;}
.titles{text-align: center;color:  var(--main_color);margin-bottom: 1%;}
.titles h3 {font-size: 1.2vw;text-transform: uppercase;line-height: 2;color: #555;margin-bottom: 1%;}
.titles h2 {font-size: 3vw;line-height: 1;margin-bottom: 1%;font-weight: bold;}
.swiper-button-next:after,.news_other .swiper-button-prev:after{ display:none;}
.swiper-button-next{ width:50px; height:50px; border-radius:50%; background:var(--main_color) url(/images/btn_jt.png) no-repeat center; top:inherit; bottom:0; right:41%;}
.swiper-button-prev{ width:50px; height:50px; border-radius:50%; background:var(--main_color) url(/images/btn_jt.png) no-repeat center; top:inherit; bottom:0; left:50%; transform:rotate(180deg);}


#mould87106{width: 1520px;border-radius: 50px;position:fixed;top: 2%;left: 10.6%;background:none;z-index:99;transition: .6s ease-in-out;display: flex;justify-content: flex-end;}
.navbars41{width: 96%;display: flex;flex-direction: row;align-items: center;line-height:80px;}
.navbars41 .logo{float:left;width: 200px;height: 100%;display: table;margin-top: -10px;background:url(/images/logo1.png) no-repeat;background-size:contain; background-position: center;}
.navbars41 .logo a{ display: table-cell; vertical-align: middle;}
.navbars41 ul{display: table;height:100%;margin:0 auto;}
.navbars41 li{ display: table-cell; vertical-align: middle; position:relative;}
.navbars41 li a{padding: 8px 30px;font-size:18px;color:#fff;transition: .4s ease-in-out;height: 52px;border-radius: 50px;}
.navbars41 li a:hover{ background: linear-gradient(to right, #2c4600, #84a82f);}
.navbars41 li .active a{ color: #fff;}
.navbars41 .phone{padding:0 6% 0 2%;}
.navbars41 .phone .pp p{ color:#fff; font-size:14px; line-height:2;}
.navbars41 .phone .pp{background:url(/images/phone.png) no-repeat left;padding-left: 32%;/* margin-left: 29%; */width: 100%;/* padding: 0 4%; */text-align: center;/* border-radius: 0 50px 50px 0; */display: flex;flex-direction: column;height: 80px;justify-content: center;align-items: flex-start;}
.navbars41 .phone .pp a{color:#fff;font-family:arial;font-size: 24px;line-height: 1;}


.header_active{ background: #fff!important;filter: drop-shadow(0px 0px 10px rgba(150, 190,36, 0.15));}
.header_active .navbars41{ height:80px;}
.header_active .navbars41 li a{ color:#333;}
.header_active .navbars41 li:nth-of-type(1) a{ background: linear-gradient(to right, #2c4600, #84a82f);color:#fff;}
.header_active .navbars41 li a:hover{background: linear-gradient(to right, #2c4600, #84a82f);  color:#fff;}
.header_active .navbars41 l i.active a{  color:#fff;}
.header_active .navbars41 .phone p{ color: #fff;}
.header_active .navbars41 .phone{background: linear-gradient(to right, #2c4600, #84a82f);}
.header_active .navbars41 .phone a{ color: #fff;}
.header_active .navbars41 .logo{ float:left; width: 200px; height: 100%; display: table;background:url(/images/logo.png) no-repeat;background-size:contain; background-position: center;margin-top: -10px;}
#mould86073{ position: relative;}
#mould86073 .swiper-pagination{ bottom:20px;}
#mould86073 .swiper-container .swiper-pagination .swiper-pagination-bullet{ width:38px; height:41px; background:url(/images/icon_btns.png) no-repeat; background-size:cover; opacity:0.3; border-radius:inherit;}
#mould86073 .swiper-container .swiper-pagination .swiper-pagination-bullet-active{ opacity:1;}
#mould86073 .swiper-slide {width: 100%!important;
    height: auto;}
#mould86073 .swiper-slide  video {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}




/* 关于我们 */
#box-1{padding: 5% 0;background: linear-gradient(90deg,     rgb(255 219 220 / 80%),     rgb(247 220 212 / 80%),     rgb(255 253 245 / 80%));background-size: cover;position: relative;}
#box-1 .container{position: relative;z-index: 2;}
#box-1 .pub_title:nth-child(1) p{color: #C78F6C;}
#box-1 .pub_title p{font-size: 60px;
    line-height: 1.35;
    text-align: center;}
#box-1 .desc{width: 69%;margin:30px auto 0 auto;text-align: center;}
#box-1 .desc p{font-size: 18px;color: #333;line-height: 2;}
#box-1 .box2{position: relative;margin-top: 65px;}
#box-1 .wz{position: absolute;width: 130%;top: 35%;z-index: 1;}
#box-1 .content_video{width:100%;position: relative;margin: auto;max-width: 1400px;}
#box-1 .content_video .video_img{overflow: hidden;border-radius: 20px;}
#box-1 .content_video .video_img img{height: 100%;}
.video_btn{position: absolute;left: calc(50% - 43px);top:calc(50% - 43px);}
.video_btn img{width: 85px;cursor: pointer;transition: all .5s;}
.video_btn img:hover {transform: scale(1.15);}
.video_btn p{font-size: 72px;color: #fff;width: 100%;text-align: center;margin-top: 20px;}
.fix_video {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;display: none;}
.fix_video .fix_bg {background: rgba(0, 0, 0, .7);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 99;}
.fix_video .fix_text {display: -ms-flexbox;display: flex;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-align: center;align-items: center;overflow: hidden;height: 100%;}
.fix_video .fix_text .video {width: 68%;max-width: 1050px;margin: 0 auto;position: relative;margin-top: 50px;}
.fix_video .fix_text .video video {width: 100%;position: relative;z-index: 100;}
.fix_video i img{width: 45px;height: 45px;position: absolute;z-index: 999;cursor: pointer;top: -60px;right: -60px;filter: invert(1);}
.wz .img {width: 100%;white-space: nowrap;overflow: hidden;top: 50%;}
.wz .img img {display: inline-block;height: 200px; animation: scroll 20s linear infinite;}
.wz .img img {display: inline-block;height: 200px;margin-right: 50px;}
@keyframes scroll {
  0% {
      transform: translateX(0%);
  }
  100% {
      transform: translateX(-50%);
  }
}

/* 背景 */

.product_q{ min-height: 100vh; position:relative; z-index:2;}
.mask{ position: absolute; height: calc(100% + 80px); left: 0; top: 0; width: 100%; background-color: var(--main_color); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: repeat; animation: mask linear 5s infinite;}
.mask .bg{ position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-size: cover;background-position: center center; background-blend-mode: soft-light; background-color: #000;}
.product_q .wrapper{ position: relative;padding: 120px 90px 70px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}
.title_top{ width: 458px; height: 164px; background: url(/images/title_bg.png) no-repeat center; background-size: 100% 100%; margin-bottom:80px;}
.title_top p{ font-size: 60px; line-height: 164px; color: #fff; text-align: center; font-family:'alimama';}
.product_q .wrapper .koubei{ width:100%; display: flex; justify-content: space-between; flex-wrap: wrap; overflow: hidden;}
.product_q .wrapper .koubei li{ flex: auto; display: flex; align-items: center;}
.product_q .wrapper .koubei li:nth-child(2){ justify-content: center;}
.product_q .wrapper .koubei li:nth-child(3){ justify-content: flex-end;}
.more_a{ margin-top:64px;}
.more_a a{ display: inline-flex; color: var(--main_color);}
.more_a p{ font-size: 36px;width: 64px;height: 64px;background-color: #f5e7ce;border: 6px solid #cd5249;border-radius: 50%;position: relative;display: flex;align-items: center;justify-content: center; font-family: 'alimama';}
.more_a a p::before{ content: ''; width: 56px; top: 50%; height: 56px; left: 50%; position: absolute; border: 1px solid #ede6d7; border-radius: 50%; transform: translate(-50%, -50%);}
.more_a a p+p{ margin-left: -18px;}




/*产品*/
.product_a {display: flex;flex-direction: column;align-items: center;justify-content: space-around;padding: 5% 0;}
.product_a .swiper-slide img{border: 1px solid #385307;}


/* 猫砂 */
#box-2{background: url(/images/ys-bg.jpg) no-repeat center top;background-size: cover;padding-top: 80px;padding-bottom: 120px;position: relative;}
#box-2 .box1{overflow: hidden;margin: 0 -15% 0 0;}
#box-2 .box1 li{padding: 30px 32px;height: auto;}
#box-2 .box1 li>div{border: 8px solid #fff;border-radius: 30px;overflow: hidden;height: 100%;box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.20);}
#box-2 .box1 li>div .img{-webkit-mask-image: url(/images/sy_ys_tp.png);-webkit-mask-position: left bottom;-webkit-mask-size: 100%;mask-image: url(/images/sy_ys_tp.png);mask-position: left bottom;mask-size: 101%;z-index: 2;position: relative;transition: 0.2s;transform-origin: bottom;margin-top: -5px;}
#box-2 .box1 li>div .img img{height: 100%;}
#box-2 .box1 li .content{margin: -15px 35px 25px 35px;display: flex;flex-direction: column;align-items: flex-start;}
#box-2 .box1 li .title{font-size: 36px;font-weight: bold;color: #fff;margin-bottom: 10px;}
#box-2 .box1 li .desc p{font-size: 16px;color: #fff;}
#box-2 .swiper-pagination-progressbar{width:100%;height: 4px;margin-top: 20px;background: rgba(255, 255, 255, 0.2);}
#box-2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #fff;border-radius: 0;margin: 0;opacity: 1;}
#box-2 .box1 .swiper-wrapper{width:100%;}
#box-2 .box1 .swiper-slide{width:31%!important;height:auto;}



/* news  url(/images/news-bg.jpg) no-repeat center top*/
.news_a {margin-top: 5%;background:linear-gradient(90deg,     rgb(255 219 220 / 80%),     rgb(247 220 212 / 80%),     rgb(255 253 245 / 80%));}
#box-4 .container{margin:0 auto;}
#box-4{display: flex;width: 100%;height: auto;padding: 5% 0;background-repeat: no-repeat;background-position: center;background-size: cover;overflow: hidden;flex-direction: column;align-items: center;}
#box-4 .btn{margin-bottom: 5px;}
#box-4 .box2{position: relative;overflow: hidden;}
.box2 ul {
    display: flex;
    justify-content: space-between;
}
#box-4 ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
#box-4 li {padding-right: 50px;width: 30%;}
#box-4 li:nth-child(3){padding-right:0;}
#box-4 .content_img{position: relative;border-radius: 50px 50px 0 50px;overflow: hidden;}
#box-4 .content_img .content{padding-top: 66%;position: relative;}
#box-4 .content .img{-webkit-mask-image: url(/images/xwtpbj.png);-webkit-mask-position: right bottom;-webkit-mask-size: 100%;mask-image: url(/images/xwtpbj.png);mask-position: right bottom;mask-size: 100%;z-index: 2;position: relative;transition: 0.2s;transform-origin: bottom;position: absolute;height: 100%;width: 100%;top: 0;}
#box-4 li>a:hover .content .img{transform: scaleY(1.06) scaleX(1.02);}
#box-4 .box2 .jt{width: 7.3vw;height: 7.3vw;background: #1D2939;border-radius: 50%;position: absolute;bottom: 0;right: 0;z-index: 3;transition: background 0.5s,bottom 0.3s;}
#box-4 .box2 li>a:hover .jt{bottom: 8px;background: var(--main_color);}
#box-4 .box2 .jt img{width: 35%;}
#box-4 .box2 .content_text{margin-top: 30px;}
#box-4 .box2 .text1 p{font-size: 18px;color: #666;min-width: 30%;}
#box-4 .box2 .text1 p::before{content: '';width: 7px;height: 7px;background: var(--main_color);border-radius: 50%;display: inline-block;margin-bottom: 3px;margin-right: 7px;}
.cz-center{align-items: center;align-content: center; display: flex;flex-wrap: wrap;}
#box-4 .box2 .title{font-size: 30px;color: #333;margin: 25px 0 10px 0;}
#box-4 .box2 li>a:hover .title{color: #2c4600;}
#box-4 .box2 .desc p{font-size: 16px;color: #999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}
.cs-center {align-items: center;align-content: center;display: flex;justify-items: center;justify-content: center;height: 100%;flex-wrap: wrap;}
.more a {display: flex;flex-direction: row;width: 160px;height: 54px;justify-content: center;align-items: center;color:#fff;}
.more {margin-top: 2%;background:var(--main_color);color: #fff;border-radius: 40px;width: 160px;height: 54px;display: flex;flex-direction: row;align-items: center;justify-content: center;}
.more span {margin-right: 13%;}
.more p {background:url(/images/more.png) no-repeat center;background-color: #fff;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;border-radius: 50px;}


/*底部*/
.box-5 .width_1600 {padding: 3% 0;display: flex;flex-direction: column;align-items: center;border: 1px solid #2c4600;border-radius:30px;}
.box-5 {padding: 5% 0;}
.box-5 .top {width: 80%;display: flex;justify-content: space-between;align-items: center;}
.box-5 p {font-size: 18px;line-height: 2;}
.boo {display: flex;width: 80%;margin: 4% 0 2%;}
.box-5 .boo .box2 {margin-right: 15%;flex: 1;}
.top .box1 {flex: 1.5;display: flex;flex-direction: column;max-width: 700px;}
.top .box3{flex:1;max-width:300px;}
.top .box1 .bb {display: flex;align-items: center;margin-bottom:2%;}
.top .box1 .bb:nth-child(2n) {margin-bottom:0;}
.top .box1 .bb span {margin-right: 2%;}

.bo {display: flex;align-items: center;margin-bottom:2%;}
.b0:nth-child(3n) {margin-bottom:0;}
.bo span {color:#fff;background: var(--main_color);width: 28px;height: 28px;display: flex;border-radius: 28px;font-size: 15px;margin-right: 2%;font-family: 'Arial';justify-content: center;align-items: center;}



.copyright .flex_space {
    display: flex;
    flex-direction: column;
    padding: 2% 0;
}
.copyright{background:url(/images/bot-bg.jpg) no-repeat center;border-top:solid 1px rgba(255,255,255,0.2);color:#fff;text-transform:uppercase;}
.copyright a{color: #333;}
.copyright p{line-height: 2.5;font-size: 18px;color: #333;}

@media (min-width: 1921px) and (max-width: 4000px){
  .about_a .width_1600 {margin:0 auto;}
}
@media (max-width: 1680px){
  #mould87106 {left: 4.5%;}
  .width_1600{width:94%;}.navbars41{width:94%;}.foott{width:94%;}.main_a{width:94%;}
}
@media (min-width: 1560px) and (max-width: 1679px){
 #mould87106 {width:90%;left: 5%;}
.box-5 .top { width: 86%;}
#box-4 ul li {max-width: 30%;}
}
@media (min-width: 1439px) and (max-width: 1559px){
  .navbars41 {
    width: 97%;
}
 #mould87106 {width:90%;left: 5%;}
  #box-1 .pub_title p {
    font-size: 50px;}
 .box-5 .top {
   width: 88%;} 
  .box-5 .boo .box2 {
    margin-right: 0;}
  
  
}

@media (min-width: 1360px) and (max-width: 1400px){
  #mould87106 {width: 90%;}
  .navbars41 {width: 97%;}
  .header_active .navbars41 .logo {width: 160px;}
  .navbars41 li a {padding: 8px 26px}
  #box-1 .pub_title p {
    font-size: 44px;}
  .box-5 .top {
   width: 94%;} 
  .box-5 .boo .box2 {
    margin-right: 0;}
}