/* banner */
.index-banner{ position: relative; background-color: #333;}
.index-banner .swiper-slide img{max-width: 100%;}
.index-banner .swiper-pagination-bullet {width: 12px;height: 12px;background-color: #ffffff;margin: 0 14px;opacity: 0.5;color: transparent;}
.index-banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .index-banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 14px;
}
.index-banner .swiper-pagination-bullet-active {opacity: 1;width: 42px;height: 42px;line-height: 42px;text-align: center;border: 2px solid rgba(255, 255, 255, 0.4);background-color: transparent;color: #fff;}
.index-banner .swiper-pagination-bullet-active .rightcircle {
    -webkit-animation: circleProgressLoad_right 6s linear infinite;animation: circleProgressLoad_right 6s linear infinite;}
.index-banner .swiper-pagination-bullet-active .leftcircle {
    -webkit-animation: circleProgressLoad_left 6s linear infinite;animation: circleProgressLoad_left 6s linear infinite;}
.index-banner .swiper-pagination-bullet-active .wrapper_con {display: block;}
.index-banner .swiper-pagination {font-size: 16px; bottom:25px;}
.index-banner .swiper-pagination > div { position: relative; display: inline-block; transition: none;}
.index-banner .swiper-pagination > div span{position: relative; top: -2px;}
.index-banner .swiper-container-horizontal > .swiper-pagination-bullets {bottom: 5%;}
.index-banner .right {right: -2px;}
.index-banner .left {left: -2px;}
.index-banner .circleProgress {width: 42px;height: 42px;border: 2px solid transparent;border-radius: 50%; position: absolute;top: 0;-webkit-transform: rotate(-135deg);}
.index-banner .rightcircle {border-bottom: 2px solid #fff;border-left: 2px solid #fff;right: 0;}
.index-banner .leftcircle {border-top: 2px solid #fff;border-right: 2px solid #fff;left: 0;}
.index-banner .wrapper_con {width: 21px;height: 42px;position: absolute;top: -2px;overflow: hidden;display: none;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 15px;}
@media (max-width:640px) {
    .index-banner .swiper-pagination-bullet {width: 10px;height: 10px;}
    .index-banner .swiper-pagination-bullet-active{width: 12px;height: 12px; line-height: 0;}
    .index-banner .swiper-pagination-bullet-active .rightcircle,
    .index-banner .swiper-pagination-bullet-active .leftcircle{display: none;}
    .index-banner .swiper-pagination-bullet{font-size: 0;}
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 8px;}
}
@media (max-width:768px) {
    .index-banner .swiper-pagination-bullet {width: 10px;height: 10px;}
    .index-banner .swiper-pagination-bullet-active{width: 12px;height: 12px; line-height: 0;}
    .index-banner .swiper-pagination-bullet-active .rightcircle,
    .index-banner .swiper-pagination-bullet-active .leftcircle{display: none;}
    .index-banner .swiper-pagination-bullet{font-size: 0;}
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 8px;}
    .index-banner .swiper-slide img{
        height: 400px;
        object-fit: cover;
    }
}
/* animation */ 
@keyframes circleProgressLoad_right { 
    0% { transform: rotate(45deg); } 
    50%, 100% { transform: rotate(225deg);} 
} 
@keyframes circleProgressLoad_left { 
    0%, 50% { transform: rotate(45deg); } 
    100% { transform: rotate(225deg); } 
}
.index-banner .index-content {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.index-banner .index-content img {
    max-width: 100%;
}
.index-banner .title {
    color: #fff;
}
.index-banner .title .title-text{
    font-size: .78rem;
    font-weight: bold;
    text-shadow: .01rem .01rem .02rem black;
}
@media (max-width: 768px){
    .index-banner .index-content{
        padding: 0 20px;
    }
    .index-banner .title .title-text{
        font-size: 20px;
        margin-bottom:10px;
    }
}
@media (max-width: 500px){
    .index-banner .title .title-text{
        font-size: 18px;
        margin-bottom:10px;
        white-space: nowrap;
    }
    .index-banner .title .title-abstract{
        font-size: 12px;
        line-height: 18px;
    }
}
/* 品牌产品 */
.index-brand{
    display: flex;
    position: relative;
}
.index-brand .brand-leaf01{
    width: .95rem;
    position: absolute;
    left: 4.83rem;
    top: 2.27rem;
}
.index-brand .brand-leaf02{
    width: .59rem;
    position: absolute;
    left: 9rem;
    bottom: 1.05rem;
}
.index-brand .brand-leaf03{
    width: 1.23rem;
    position: absolute;
    top: 1.2rem;
    right: 4.39rem;
}
.index-brand .brand-left{
    width: 73.9583%;
    background-image: url(./images/brand_leftbg.png);
    padding: .8rem 1rem 1.4rem 1.8rem;
    position: relative;
}
.index-title{
    margin-bottom: .4rem;
}
.index-title h2{
    color: #333;
    opacity: .15;
    font-size: 1rem;
    font-weight: bold;
    margin-left: .1rem;
}
.index-title h3{
    display: flex;
    align-items: flex-end;
    color: #333;
    font-size: .48rem;
    margin-top: -.62rem;
}
.index-title h3 img{
    width: .56rem;
    margin-right: .2rem;
    margin-bottom: .1rem;
}
.brand-left .left-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand-left .left-main .item-left{
    width: 23.13167%;
}

.brand-left .left-main .item-left ul{
    border-left: 1px solid #289458;
    padding: .14rem 0 .14rem .4rem;
}
.brand-left .left-main .item-left ul li{
    display: flex;
    align-items: center;
    color: #666;
    font-size: .18rem;
    margin: .46rem 0;
    position: relative;
}
.brand-left .left-main .item-left ul li img{
    width: .38rem;
    margin-right: .1rem;
}
.brand-left .left-main .item-left ul li::before{
    content: '';
    width: .09rem;
    height: .07rem;
    border-radius: .04rem 0 .04rem 0;
    background: #289458;
    position: absolute;
    top: 50%;
    left: -.4rem;
    transform: translate(-50%,-50%);
}
.brand-left .left-main .item-content{
    width: 40%;
}
.brand-left .left-main .item-content img{
    width: 100%;
}
.brand-left .left-main .item-right{
    width: 30%;
}
.brand-left .left-main .item-right h4{
    color: #289458;
    font-size: .36rem;
}
.brand-left .left-main .item-right p{
    color: #666;
    font-size: .16rem;
    margin: .3rem 0 .5rem;
    padding-right: .34rem;
}
.brand-left .left-main .item-right .button .btn{
    display: inline-block;
    width: 1.98rem;
    height: .58rem;
    border-radius: .58rem;
    background: #999;
    position: relative;
    transition: all .3s;
}
.brand-left .left-main .item-right .button .btn span{
    color: #fff;
    font-size: .18rem;
    line-height: .58rem;
    padding-left: .8rem;
    transition: all .3s;
}
.brand-left .left-main .item-right .button .btn .btn-round{
    width: .58rem;
    height: .58rem;
    color: #289458;
    text-align: center;
    line-height: .58rem;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 0;
    left: -1px;
    transition: all .3s;
}
.brand-left .left-main .item-right .button .btn .btn-round .iconfont{
    font-size: .16rem;
}
.brand-left .left-main .item-right .button .btn:hover{
    
    background: #289458;
}
.brand-left .left-main .item-right .button .btn:hover span{
    padding-left: .35rem;
}
.brand-left .left-main .item-right .button .btn:hover .btn-round{
    left: 1.41rem;
}
.brand-left .brand-you{
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}
.brand-left .brand-you img{
    width: .42rem;
}
.brand-left .brand-you .iconfont{
    color: #289458;
    font-size: .14rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.index-brand .brand-right{
    flex-grow: 1;
    background-image: url(./images/brand_rightbg.png);
    display: flex;
    justify-content: center;
    padding-top: 2.65rem;
}
.index-brand .brand-right .right-content>img{
    width: 3.67rem;
}
.index-brand .brand-right .right-content p{
    color: #333;
    font-size: .2rem;
    text-align: center;
    margin-top: .2rem;
}
/* 关于妙竹泉 */
.index-about{
    background-image: url(./images/about_bg1.jpg);
    position: relative;
}
.index-about .index-title{
    position: absolute;
    top: .8rem;
    left: 1.8rem;
}
.index-about .index-title h3{
    color: #fff;
}
/* .index-about .about-container{
    background-image: url(./images/line.png);
    background-repeat: no-repeat;
    background-position: center center;
} */
.about-container .about-content{
    color: #fff;
    max-width: 5.42rem;
    margin: 0 auto;
    padding-top: 2.6rem;
    padding-bottom: .8rem;
    position: relative;
}
.about-content .about-item{
    display: none;
}
.about-content .about-item.active{
    display: block;
}
.about-content .about-item h4{
    font-size: .36rem;
    text-align: center;
}
.about-content .about-item p{
    font-size: .16rem;
    text-align: justify;
    margin: .4rem 0 .6rem;
}
.about-content .about-item .button{
    display: flex;
    justify-content: center;
}
.about-content .about-item .button .btn{
    display: inline-block;
    width: 1.98rem;
    height: .58rem;
    border-radius: .58rem;
    background: #999;
    position: relative;
    transition: all .3s;
}
.about-content .about-item .button .btn span{
    color: #fff;
    font-size: .18rem;
    line-height: .58rem;
    padding-left: .8rem;
    transition: all .3s;
}
.about-content .about-item .button .btn .btn-round{
    width: .58rem;
    height: .58rem;
    color: #289458;
    text-align: center;
    line-height: .58rem;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 0;
    left: -1px;
    transition: all .3s;
}
.about-content .about-item .button .btn .btn-round .iconfont{
    font-size: .16rem;
}
.about-content .about-item .button .btn:hover{
    background: #289458;
}
.about-content .about-item .button .btn:hover span{
    padding-left: .35rem;
}
.about-content .about-item .button .btn:hover .btn-round{
    left: 1.41rem;
}
.about-content ul{
    display: flex;
    justify-content: space-between;
    margin-top: .8rem;
}
.about-content ul li{
    cursor: pointer;
}
.about-content ul li>img{
    width: .86rem;
}
.about-content ul li .img{
    display: none;
}
.about-content ul li.active .img,
.about-content ul li:hover .img{
    display: inline-block;
}
.about-content ul li.active .white,
.about-content ul li:hover .white{
    display: none;
}
.about-content ul li p{
    text-align: center;
    margin-top: .2rem;
}
/* 新闻资讯 */
.index-news{
    background-image: url(./images/news_bg.jpg);
    padding-bottom: 1.6rem;
    padding-top: .6rem;
}
.index-news .index-title{
    padding-left: 1.8rem;
    margin-bottom: .6rem;
}
.swiper {
    width: 100%;
    height: 100%;
  }

.index-news  .swiper .swiper-slide {
    text-align: center;
    font-size: .18rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .index-news  .swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
.index-news .swiper .swiper-slide {
    width: 3rem;
}
.index-news .swiper .swiper-slide .news-text{
    display: none;
    text-align: left;
}
.index-news .swiper .swiper-slide .news-text>span{
    color: #999;
}
.index-news .swiper .swiper-slide .news-text h4{
    width: 3.26rem;
    color: #333;
    font-size: .24rem;
    margin: .1rem 0 .4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.index-news .swiper .swiper-slide .news-text .button{
    display: flex;
}
.index-news .swiper .swiper-slide .news-text .button .btn{
    display: inline-block;
    width: 1.98rem;
    height: .58rem;
    border-radius: .58rem;
    background: #999;
    box-shadow: 0 0 .1rem .05rem rgba(40, 148, 88, .1);
    position: relative;
    transition: all .3s;
}
.index-news .swiper .swiper-slide .news-text .button .btn span{
    color: #fff;
    font-size: .18rem;
    line-height: .58rem;
    padding-left: .8rem;
    transition: all .3s;
}
.index-news .swiper .swiper-slide .news-text .button .btn .btn-round{
    width: .58rem;
    height: .58rem;
    color: #289458;
    text-align: center;
    line-height: .58rem;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 0;
    left: -1px;
    transition: all .3s;
}
.index-news .swiper .swiper-slide .news-text .button .btn .btn-round .iconfont{
    font-size: .16rem;
}
.index-news .swiper .swiper-slide .news-text .button .btn:hover{
    background: #289458;
}
.index-news .swiper .swiper-slide .news-text .button .btn:hover span{
    padding-left: .35rem;
}
.index-news .swiper .swiper-slide .news-text .button .btn:hover .btn-round{
    left: 1.41rem;
}
.index-news .swiper .swiper-slide.swiper-slide-active {
    width: 6.8rem;
}
.index-news .swiper .swiper-slide.swiper-slide-active .news-text {
    display: block;
    position: absolute;
    bottom: 0;
    right: -55%;
}
.index-news .swiper .swiper-pagination{
    width: 1rem;
    position: absolute;
    left: auto;
    top: auto;
    right: .6rem;
    bottom: .6rem;
}
.index-news .swiper .swiper-pagination .news-active{
    color: #333333;
    font-size: .18rem;
}
.index-news .swiper .swiper-pagination .news-num{
    color: #999999;
    font-size: .18rem;
}
.index-news .swiper .swiper-pagination::after{
    content: '';
    width: 2.40rem;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: absolute;
    left: -.8rem;
    top: -.5rem;
}
.index-news .swiper .swiper-pagination::before{
    content: '';
    width: 1px;
    height: 3rem;
    background: rgba(0, 0, 0, .1);
    position: absolute;
    left: -.8rem;
    top: -2rem;
}
.index-news .swiper .swiper-button-next:after, .index-news .swiper .swiper-button-prev:after{
    color: #289458;
    font-size: .16rem;
}
.index-news .swiper .swiper-button-next, .index-news .swiper .swiper-rtl .swiper-button-prev{
    top: 3rem;
    right: .5rem;
}
.index-news .swiper .swiper-button-prev, .index-news .swiper .swiper-rtl .swiper-button-next{
    top: 3rem;
    left: auto;
    right: 1.5rem;
}
@media (max-width: 786px){
    .index-title h2{
        font-size: 36px;
    }
    .index-title h3{
        font-size: 22px;
        margin-top:-28px;
    }
    .index-title h3 img{
        width: 30px;
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .index-brand .brand-right,
    .brand-left .brand-you{
        display: none;
    }
    .index-brand .brand-left{
        width: 100%;
        padding: 20px 15px 30px;
    }
    .brand-left .left-main{
        flex-wrap: wrap;
    }
    .brand-left .left-main .item-left{
        width: 100%;
    }
    .brand-left .left-main .item-left ul li{
        font-size: 14px;
        margin: 10px 0;
    }
    .brand-left .left-main .item-content{
        width: 100%;
    }
    .brand-left .left-main .item-right{
        width: 100%;
        text-align: center;
    }
    .brand-left .left-main .item-left ul{
        padding: 5px 0 5px 20px;
    }
    .brand-left .left-main .item-left ul li img{
        width: 20px;
    }
    .brand-left .left-main .item-left ul li::before{
        width: 9px;
        height: 7px;
        border-radius: 4px 0 4px 0;
        left: -20px;
    }
    .brand-left .left-main .item-content{
        text-align: center;
    }
    .brand-left .left-main .item-content img{
        width: 70%;
    }
    .brand-left .left-main .item-right h4{
        font-size: 20px;
    }
    .brand-left .left-main .item-right p{
        font-size: 16px;
        margin: 10px 0 15px;
    }
    .brand-left .left-main .item-right .button .btn{
        width: 120px;
        height: 35px;
        text-align: left;
        border-radius: 35px;
        background: #289458;
    }
    .brand-left .left-main .item-right .button .btn span{
        font-size: 14px;
        line-height: 35px;
        padding-left: 20px;
    }
    .brand-left .left-main .item-right .button .btn .btn-round{
        width: 35px;
        height: 35px;
        line-height: 35px;
        left: 86px;
    }
    .brand-left .left-main .item-right .button .btn .btn-round .iconfont{
        font-size: 12px;
    }
    .brand-left .left-main .item-right .button .btn:hover .btn-round{
        left: 86px;
    }
    .brand-left .left-main .item-right .button .btn:hover span{
        padding-left: 20px;
    }
    .index-brand .brand-leaf01{
        width: 30px;
        top: 35%;
        left: 24%;
    }
    .index-brand .brand-leaf02{
        width: 20px;
        top: 65%;
        left: 65%;
    }
    .index-brand .brand-leaf03{
        width: 40px;
        top: 27%;
        left: 70%;
    }
    .index-about .index-title{
        top: 20px;
        left: 15px;
    }
    .about-container .about-content{
        max-width: 100%;
        margin: 0 15px;
        padding-top: 100px;
        padding-bottom: 40px;
    }
    .about-content .about-item h4{
        font-size: 20px;
    }
    .about-content .about-item p{
        font-size: 14px;
        margin: 20px 0 30px;
    }
    .about-content .about-item .button .btn{
        width: 120px;
        height: 35px;
        text-align: left;
        border-radius: 35px;
        background: #289458;
    }
    .about-content .about-item .button .btn span{
        font-size: 14px;
        line-height: 35px;
        padding-left: 20px;
    }
    .about-content .about-item .button .btn .btn-round{
        width: 35px;
        height: 35px;
        line-height: 35px;
        left: 86px;
    }
    .about-content .about-item .button .btn .btn-round .iconfont{
        font-size: 12px;
    }
    .about-content .about-item .button .btn:hover .btn-round{
        left: 86px;
    }
    .about-content .about-item .button .btn:hover span{
        padding-left: 20px;
    }
    .about-content ul{
        margin-top: 30px;
    }
    .about-content ul li{
        text-align: center;
        margin: 0 20px;
    }
    .about-content ul li>img{
        width: 50px;
    }
    .about-content ul li p{
        font-size: 16px;
    }
    .index-news{
        padding-top: 20px;
        padding-bottom: 45px;
    }
    .index-news .index-title{
        margin-bottom: 30px;
    }
    .index-news .swiper .swiper-slide{
        width: 20%;
    }
    .index-news .swiper .swiper-slide.swiper-slide-active{
        width: 40%;
        margin-bottom: 50px;
    }
    .index-news .swiper .swiper-button-prev,
    .index-news .swiper .swiper-button-next{
        display: none;
    }
    .index-news .swiper .swiper-pagination::after,
    .index-news .swiper .swiper-pagination::before{
        display: none;
    }
    .index-news .swiper .swiper-pagination{
        width: 100px;
        left: 50%;
        right: auto;
        bottom: 15px;
        transform: translateX(-50%);
    }
    .index-news .swiper .swiper-pagination,
    .index-news .swiper .swiper-pagination .news-num,
    .index-news .swiper .swiper-pagination .news-active{
        font-size: 12px;
    }
    .index-news .swiper .swiper-slide .news-text h4{
        font-size: 12px;
    }
    .index-news .swiper .swiper-slide .news-text>span{
        font-size: 12px;
    }
    .index-news .swiper .swiper-slide.swiper-slide-active .news-text{
        margin-bottom: -40px;
    }
    .index-news .swiper .swiper-slide .news-text .button .btn{
        width: 70px;
        height: 25px;
        text-align: center;
        border-radius: 25px;
        background: #289458;
    }
    .index-news .swiper .swiper-slide .news-text .button .btn span{
        font-size: 12px;
        line-height: 25px;
        padding-left: 0;
        position: static;
    }
    .index-news .swiper .swiper-slide .news-text .button .btn .btn-round{
        display: none;
    }
    .index-news .swiper .swiper-slide .news-text .button .btn:hover span{
        padding-left: 0;
    }
    
}