@charset "UTF-8";

/*** 公共 ****/

.lg-con {
    width: 65em;
    margin: 0 auto;
}

/* .develop{
    background-image: url(/content/Img/images/mob-rice1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 9.16;
} */

.develop-more {
    width: 13em;
    height: 2.7em;
    border-radius: 27px;
    border: solid 2px #00a879;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    color: #00a879;
    background-color: #fff;
}

@media (max-width: 991.98px) {
    .develop-end-right-all a{
        display: -webkit-flex;
        justify-content: center;
    }
    .develop-more{
        width: 3rem;
        height: .8rem;
        border: solid 1px #00a879;
    }
}

.develop-more p{
    font-size: .9em;
}

@media (max-width: 991.98px) {
    .develop-more p{
        font-size: .3rem;
    }
    
}

@media (min-width: 991.98px) {
    .develop-more:hover {
        color: #fff;
        background-color: #00a879;
        transition: all .5s;
    }
}



/* 正式开始 */


/* 轮播 */

.swiper-home {
    margin-top: 4.5em;
    /* height: 39.5em !important; */
    width: 100%;
}



/* .swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-home-bck {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
} */

/* .swiper-home .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.swiper-home .banner-txt{
    position: absolute;
    top: 11.5em;
    left: 24.75em;
    width: auto;
    height: 14em;
    opacity: 1;
    top: 29.74%;
    left: 25.95%;
} */

.swiper-home .swiper-button-next,
.swiper-home .swiper-button-prev{
    top: 12%;
}

.swiper-home .swiper-button-next{
    width: 2em;
    height: 3.75em;
    background-image: url(/content/Img/images/home-banner-jr.png);
    background-repeat: no-repeat;
    right: 3.125%;
    top: 11.9%;
}

.swiper-home .swiper-button-prev{
    width: 2em;
    height: 3.75em;
    background-image: url(/content/Img/images/home-banner-jl.png);
    background-repeat: no-repeat;
    left: 3.125%;
    top: 11.9%;
}

.swiper-home .swiper-pagination {
    margin-top: -5.4em;
    /* 上下等同 */
    /* margin-top: -5.6%; */
    margin-left: 48.7%;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    
}

.swiper-home .swiper-pagination :first-child {
    margin-right: 1em;
}

.swiper-home .swiper-button-prev:after {
    color: #fff;
    opacity: 0;
}

.swiper-home .swiper-button-next:after {
    color: #fff;
    opacity: 0;
}

.swiper-home .swiper-pagination-bullet {
    background-color: #fff;
}

.swiper-home .swiper-pagination-bullet-active {
    width: 28px;
    height: 29px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url(/content/Img/images/banner-left.png);
}

/* 新增swiper 开始 */
.swiper-home-bck .imgs {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.swiper-home-bck .web .bg{
    width: 100%;
    display: block;
    position: relative;
    object-fit: cover;
    height: 39.5em;
}

.swiper-home-bck .web .txt {
    position: absolute;
    width: 87.5%;
    max-width: 1300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    display: block;
    
}

@media (max-width: 992px) {
    .swiper-home-bck .app .bg{
        width: 100%;
        display: block;
        position: relative;
        object-fit: cover;
        /* height: 960px; */
    }
    .swiper-home-bck .app .txt {
        position: absolute;
        width: 100%;
        display: block;
        left: 0;
        top: 0;
        object-fit: cover;
        /* height: 960px; */
    }
}

/* 动画 */
.swiper-home .txt{
    opacity: 0;
    margin-top: 50px;
    transition: all 1s .2s;
    -webkit-transition: all 1s .2s;
}

.swiper-home .swiper-slide-active .txt{
    opacity: 1;
    margin-top: 0;
    transition: all 1s .2s;
    -webkit-transition: all 1s .2s;
}
/* 新增swiper 结束 */

/* .swiper-home {
    .swiper-home
} */


/* 引领木糖行业 绿色可持续发展 开始 */

@media (min-width: 992px) {
    .develop {
        height: 100%;
        padding-top: 5.4em;
        background-color: #fff;
        padding-bottom: 18.65em;
        background-image: url(/content/Img/images/develop-bgk1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left center;
    }
}

@media (max-width: 992px) {
    .develop {
        /* height: 7.83rem; */
        background-image: url(/content/Img/images/mob-rice1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position:center top;
        padding-bottom: 1.2rem;
    }
}



.develop-border {
    width: 1340px;
    margin: 0 auto;
}

.develop-top-all {
    text-align: center;
}

.develop-top-title {
    font-weight: bold;
}

.develop-guide {
    font-size: 4.4em;
    color: #005185;
    line-height: 1.136em;
    font-weight: bold;
    padding-left: 3px;
    animation: delChange 1s;
    -webkit-animation: delChange 1s;
}

.develop-guide span{
    color: #009372;
    font-weight: bold;
}

@media (max-width: 992px) {
    .develop-guide span{
        line-height: .6rem;
        font-size: .6rem;
        font-family: HARMONYOS_SANS_BOLD;
    }
}

.develop-green {
    font-size: 4.4em;
    color: #009372;
}

.develop-economics {
    font-size: 1.6em;
    margin-top: 1.15em;
    color: #000000;
}

.develop-end {
    /* height: 780px; */
    display: -webkit-flex;
    margin-top: 5.9em;
    margin-left: -1.85em;
    margin-right:-1.85em ;
}

.develop-end-left {
    /* margin-right: 3.75em; */
    padding: 0;
    /* padding-right: 3.75em; */
    
}

.develop-left-img-all {
    position: relative;
    display: -webkit-flex;
    width: 100%;
}

.develop-forest {
    /* width: 27em; */
    width: 78.6%;
    /* height: 27em; */
    padding-top: 78.6%;
    margin-left: 5.5em;
    border-radius: 1.5em;
    /* overflow: hidden; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all 1s;
}



@media (min-width: 992px) {
    .develop-forest:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: all 1s;
    }
    .develop-forest img:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: all 1s;
    }
    .develop-soil:hover{
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: all 1s;
    }
}


.develop-soil {
    /* width: 27.05em; */
    /* width: 100%; */
    width: 66.95%;
    /* height: 100%; */
    padding-top: 64.77%;
    position: absolute;
    top: 16.65em;
    /* left: -1.85em; */
    border-radius: 1.5em;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all 1s;
}


@media (min-width: 992px) {
    .develop-soil img:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: all 1s;
    }
}


.develop-leaf {
    position: absolute;
    /* top: 25.75em; */
    top: 95.37%;
    /* left: 25.1em; */
    left: 78.89%;
    /* padding-top: .25%; */
    width: 7.5em;
}

.develop-leaf img{
    width: 100%;
}

.develop-end-right {
    margin-top: 8.15em;
    padding: 0;
    padding-left: 4.367%;
    /* margin-left: -2.55em; */
    /* padding-left: 2.78em; */
    /* margin-right: -1.25em; */
}

.develop-end-right-all {
    margin-left: 2.15em;
    /* width: 100%; */
}

.develop-promote {
    font-size: 2.39em;
    color: #005185;
}

.develop-zoology {
    /* width: 27em; */
    font-size: .9em;
    color: #000000;
    margin-top: 2em;
    line-height: 1.66em;
    margin-bottom: 4.05em;
}



/* 让减糖健康生活从创新变成标配 开始 */


.health {
    height: 46em;
    /* top: 5em; */
    width: 100%;
    position: relative;
}

.health-border{
    width: 100%;
    height: 46em;
    position: relative;
    left: 0;
    bottom: 0;
}

@media (max-width: 992px) {

    .health-border{
        width: 100%;
        height: 100%;
    }
}

.posFixedIndex .health-border{
    position: fixed;

    
}

.health-bgk-news{
    height: 100%;
    width: 0%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: all .5s;
    -webkit-transition: all .5s;
    background-image: url(/content/Img/images/health-bck.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.hel-all {
    position: absolute;
    padding-top: 18%;
    width: 54%;
    z-index: -111;
    opacity: 0;
    margin-top: 50px;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.hel-epoch {
    font-size: 1.2em;
    color: #fffefe;
    margin-bottom: 1.2em;
}

.hel-life {
    /* width: 10em; */
    font-size: 3.5em;
    line-height: 80px;
    color: #fff;
    /* margin-bottom: 1.143em; */
    margin-bottom: 1.1em;
}

.hel-carcle {
    position: absolute;
    bottom: 0;
    left: 0;
}

.health.is-active_after .health-bgk-news{
    width: 100%;
}
.health.is-active_after .hel-all{
    opacity: 1;
    margin: 0;
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
}

.together .develop-more {
    border: 2px solid #fff;
}

@media (min-width: 992px) {
    .together .develop-more:hover {
        transition: all .5s;
        border: 2px solid #00a879;
    }
}



/* 逐光纳才，未来等你来 */

.future {
    height: 32.5em;
    position: relative;
    background-image: url(/content/Img/images/future-bck.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.fur-all {
    text-align: center;
    /* position: absolute;
    top: 5.5em;
    left: 19.5em; */
    padding-top: 6.5em;
}

.fur-you {
    font-size: 2.4em;
    color: #fff;
    margin-bottom: 0.625em;
}

.fur-people {
    font-size: .9em;
    color: #fff;
    margin-bottom: 3.33em;
}

.together {
    display: -webkit-flex;
    justify-content: left;
}

.fur-all .together {
    display: -webkit-flex;
    justify-content: center;
}


/*去掉下拉箭头*/


/* select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.footer .layui-form-select dl {
    top: auto;
    bottom: unset;
} */


/* 首页结束 */


/* 手机 */

@media (max-width: 991.98px) {

    .lg-innerbox {
        width: 100%;
        max-width: 1300px;
        height: 100%;
        margin: 0 auto;
        position: relative;
        display: block;
        z-index: 4;
    }
    /* .swiper-home img {
        height: 11.5rem;
    } */
    .swiper-home .swiper-pagination{
        width: 100%;
        margin-left: 0;
    }
    .develop-border {
        width: 7.5rem;
    }
    .develop-guide {
        font-size: .6rem;
        margin-top: 1.2rem;
        line-height: 1.25em;
        font-family: HARMONYOS_SANS_BOLD;
        font-weight: 600;
    }
    .develop-green {
        font-size: .64rem;
    }
    .develop-economics {
        font-size: .3rem;
        line-height: .3rem;
        margin-left: -.1rem;
        margin-right: -.1rem;
    }
    .develop-soil img {
        height: 4.75rem;
    }
    .develop-left-img-all{
        flex-direction: row-reverse;
    }
    .develop-forest {
        /* position: static; */
        width: 57.1vw;
        height: 64.47vw;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: 0;
        padding-top: 0;
        -webkit-transform: translate(-9.27%, 2%);
        transform: translate(-9.27%, 2%);
        /* 原先设置 */
        /* transform: translateX(-6.73%); */
        margin-top: .45rem;
    }
    .develop-soil {
        /* position: static; */
        border-radius: .3rem;
        overflow: hidden;
        background-size: cover;
        background-position: 1em 0;
        width: 52.6vw;
        height: 63.47vw;
        margin-left: -15.5%;
        /* 原先设置 */
        /* transform: translateX(-33.78%); */
        /* transform: translateX(-87.78%);
        -webkit-transform: translateX(-87.78%); */
        top: 0;
        /* margin-right: 46%; */
        right: 46%;
    }
    .develop-end {
        /* width: 7.5rem; */
        /* display: -webkit-flex; */
        margin: 0 -.3rem;
        margin-top: 1.3rem;
    }
    .develop-end-left{
        margin-right: 0;
        padding-right: 0;
    }
    .develop-leaf {
        position: absolute;
        top: 4.7rem;
        left: 25.13%;
        width: 20%;
    }
    .develop-leaf img {
        width: 100%;
    }
    .develop-end-right-all{
        margin-left: 0.3rem;
    }
    .develop-end-right {
        margin-top: .68rem;
        margin-left: -.38rem;
    }
    
    .develop-promote {
        font-size: .44rem;
        text-align: center;
    }
    .develop-zoology {
        text-align: left;
        font-size: .3rem;
        margin-top: .28rem;
        margin-bottom: .6rem;
        margin-right: 0;
        /* width: 6.8rem; */
        line-height: .44rem;
        text-align: center;
    }
    /* 健康 */
    .health-b{
        height: 9.16rem;
    }
    .health {
        background-image: url(/content/Img/images/mob-health-bck.png);
        height: 9.96rem;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        /* margin-top: 1.2rem; */
        /* background-attachment: fixed; */
        /* position: fixed; */
        top: 0;
    }
    .health .global-inner{
        padding: 0;
    }
    .hel-carcle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
    }
    .hel-all {
        width: 100%;
        z-index: 9;
        margin-top: 0;
        padding-top: 1.1rem;
        top: 0;
    }
    .hel-epoch {
        font-size: .3rem;
        text-align: center;
        margin-bottom: .25rem;
    }
    .hel-life {
        font-size: .56rem;
        line-height: .64rem;
        text-align: center;
        padding-left: .68rem;
        padding-right: .68rem;
        margin-bottom: .6rem;
        font-family: HARMONYOS_SANS_BOLD;
        font-weight: bold;
       }
    .together {
        display: -webkit-flex;
        justify-content: center;
    }
    .future {
        height: 9.96rem;
        position: relative;
        background-image: url(/content/Img/images/mob-future-bck.png);
        /* background-size: cover;
        background-repeat: no-repeat;
        background-position: -300px 0; */
    }
    .fur-all {
        padding: 0 .3rem;
        padding-top: 1.32rem;
    }
    .fur-you {
        font-size: .44rem;
    }
    .fur-people {
        font-size: .3rem;
        text-align: center;
        margin-bottom: 0;
        line-height: .4rem;
    }
    .fur-all .together {
        display: -webkit-flex;
        justify-content: center;
        margin-top: .6rem;
    }
}

/* .swiper-home .is-banner-active .banner-txt{
    opacity: 1;
    transform: translateY(0);
    transition-delay: .4s;
    transition: all linear 5s;

    -webkit-transition: all .7s;
    -ms-transition: all .7s;
} */
/* .swiper-home .is-banner-active1 .banner-txt{
    top: 50%;
    transition: all 3s;
    -webkit-transition: all 3s;
    -ms-transition: all 3s;
    opacity: 1;
} */

/* .swiper-home .is-banner-active1 .aaa{
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transition: all 3s;
    -ms-transition: all 3s;
    transition: all 3s;
} */


/* 定义首页文字动画 */
@keyframes delChange {
    0% {
        transform: scale(5);
        -webkit-transform: scale(5);
        transform-origin: center;
        opacity: 0;
    }
    100%{
        transform: scale(1);
        -webkit-transform: scale(1);
        transform-origin: center;
        opacity: 1;
    }
}

@-webkit-keyframes delChange {
    0% {
        transform: scale(5);
        -webkit-transform: scale(5);
        transform-origin: center;
        opacity: 0;
    }
    100%{
        transform: scale(1);
        -webkit-transform: scale(1);
        transform-origin: center;
        opacity: 1;
    }
}

/* 健康动画 */

.ccc {
    animation: myfirst 3s;
    animation-fill-mode: forwards;
    z-index: 99;
}
.ddd {
    animation: myfirst 3s;
    animation-fill-mode: forwards;
    right: 0;
    z-index: 99;
}


@keyframes myfirst {
    from {
        width: 50%;
        position: absolute;
        bottom: 0;
        height: 100%;
        /* background-color: rgb(245, 241, 242); */
        background-color: #fff;
    }

    to {
        width: 0;
        position: absolute;
        bottom: 0;
        height:100%;
        /* background-color: rgb(245, 241, 242); */
        background-color: #fff;
    }
}

@-webkit-keyframes myfirst {
    from {
        width: 50%;
        position: absolute;
        bottom: 0;
        height: 100%;
        background-color: rgb(245, 241, 242);
    }

    to {
        width: 0;
        position: absolute;
        bottom: 0;
        height:100%;
        background-color: rgb(245, 241, 242);
    }
}

.healthBox .hel-all{
    opacity: 1;
    margin-top: 0px;
}







/* 健康动画 */
/* @keyframes jiank {
    0% {
        width: 1%;
        transform: translate(center);
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes jiank {
    0% {
        width: 1%;
        transform: translate(center);
    }
    100% {
        width: 100%;
        
    }
} */

/* .delChange {
    animation: delChange 5s;
    -webkit-animation: delChange 5s;
    transform: scale(1);
    -webkit-transform: scale(1);
    transform-origin: 50% 40%;
    transition: all 5s;

} */



/*  */
/* @keyframes delChange {
    0% {
    transform: translateY(0);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translateY(0);
    }
    100% {
        transform: translateY(-8000px);
    transform: translateZ(-8000px);
    -webkit-transform: translateZ(-8000px);
    -webkit-transform: translateX(-8000px);
    }
}

@-webkit-keyframes delChange {
    0% {
    transform: translateZ(0);
    transform: translateX(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translateX(0);
    }
    100% {
    transform: translateZ(-8000px);
    transform: translateX(-8000px);
    -webkit-transform: translateZ(-8000px);
    -webkit-transform: translateX(-8000px);
    }
}



.delChange {
    animation: delChange 6s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	-webkit-animation: delChange 6s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
} */