﻿#wrapper .font{position:absolute;top:310px;width:100%;text-align:center;left:0;z-index:9999;}

.about{padding:120px 0 120px 0;background:url(../images/about-bg.jpg) no-repeat center top;margin:100px 0;}
.about h1{font-size:26px;color:#333;line-height:36px;font-family: 'OPPOSans-M';letter-spacing:-1px;padding-bottom:30px;}
.about .content{position:relative;}
.about .text{margin-right:500px;}
.about .text p{font-size:16px;color:#666;line-height:28px;text-align:justify;margin-bottom:10px;font-family: 'OPPOSans-R';}
.about img{width:415px;position:absolute;top:0;right:0;}
.about .text a{display:block;width:260px;height:60px;background:#0f42af;font-size:17px;color:#fff;line-height:60px;text-indent:30px;border-radius:5px;margin-top:30px;}
.about .text a i{font-family:iconfont;padding-left:70px;font-size:20px;}
.about .text a:hover i{padding-left:100px;}
.about *{transition-duration: 0.5s;}
@media screen and (max-width:820px){
    #wrapper .font{top:23rem;}
    #wrapper .font img{width:80%;}
    .about{padding:9rem 0;background-size:auto 100%;margin:9rem 0;}
    .about h1{font-size:3.5rem;text-align:justify;line-height:5.2rem;}
    .about .text{margin:0;width:100%;}
    .about .text p{font-size:3rem;line-height:5rem;margin-bottom:4rem;}
    .about .text p:nth-child(2){display:none;}
    .about img{position:relative;width:80%;margin:0 8% 0 12%;}
    .about .text a{display:none;}
}

.category{width:96%;height:auto;overflow:hidden;margin:0 2%;}
.category li{width:25%;height:0;float:left;background:#fff;border-right:3px solid #fff;box-sizing:border-box;background-repeat:no-repeat;background-position:center top;background-size:auto 100%;padding-bottom:25%;}
.category li:last-child{border:none;}
.category li:nth-child(1){background-image:url(../images/category/cate1.jpg);}
.category li:nth-child(2){background-image:url(../images/category/cate2.jpg);}
.category li:nth-child(3){background-image:url(../images/category/cate3.jpg);}
.category li:nth-child(4){background-image:url(../images/category/cate4.jpg);}
.category li:nth-child(1) .info .parent h2::after{content:"Cauliflower and Cabbage";}
.category li:nth-child(2) .info .parent h2::after{content:"solanaceous vegetable";}
.category li:nth-child(3) .info .parent h2::after{content:"leaf vegetable";}
.category li:nth-child(4) .info .parent h2::after{content:"Beans";}
.category li .info{width:100%;height:100%;text-align:center;color:#fff;box-sizing:border-box;padding-top:13.5vw;}
.category li .info .parent{padding:16% 0 5% 0;}
.category li .info .parent a{color:#fff;}
.category li .info .parent a:hover{color:#edad27;}
.category li .info .parent p{font-family:iconfont;font-size:3.2vw;padding-bottom:10px;}
.category li .info .parent h1{font-size:1.6vw;line-height:2.5vw;}
.category li .info .parent h2{font-family:Rubik;text-transform:uppercase;font-size:0.9vw;}
.category li .info .list{display:none;width:50%;margin:0 auto;height:30%;padding-bottom:1vw;}
.category li .info .list a{display:block;width:50%;line-height:2vw;font-size:1.2vw;color:#fff;text-align:center;float:left;}
.category li .info .list a:hover{text-decoration:underline;}
.category li .info .more{display:none;width:3.5vw;height:3.5vw;border-radius:50%;border:2px solid #fff;text-align:center;font-family:iconfont;line-height:3.5vw;font-size:1.8vw;color:#fff;margin:0 auto;}

.category *{transition-duration: 0.5s;}
@media screen and (min-width:820px){ 
    .category{padding-top:2rem;}   
    .category li .info .more:hover{background:#fff;color:#0f42af;}
    .category li .info:hover{background:rgba(15,66,175,0.9);padding-top:0;}
    .category li .info:hover .list{display:block;}
    .category li .info:hover .more{display:block;}
    .category li .info:hover .parent{padding-top:10%;}
}
@media screen and (max-width:820px){   
    .category{padding:3vw 3vw;box-sizing:border-box;width:100%;margin:0;}
    .category li{width:50%;height:0;margin-bottom:3px;padding-bottom:50%;}
    .category li:nth-child(2){border:none;}
    .category li .info{padding-top:25vw;}
    .category li .info .parent{padding-top:14%;}
    .category li .info .parent p{font-size:6rem;padding-bottom:10px;}
    .category li .info .parent h1{font-size:3rem;line-height:5rem;}
    .category li .info .parent h2{font-size:1.8rem !important;}
    .category li .info .more{width:5rem;height:5rem;}
}

.titbar{text-align:center;height:auto;padding:80px 0 60px 0;}
.titbar h2{font-size:40px;color:#333;line-height:55px;font-weight:bold;}
.titbar h3{font-size:20px;color:#ccc;font-family:'Rubik';text-transform:uppercase;}

.product *{transition-duration: 0.5s;}
.product{width:96%;height:auto;margin:0 2%;}
.product .list{width:100%;padding-top:50px;}
.product .list ul{display: flex;}
.product .list li{width:25%;flex: 1;overflow: hidden;transition: .5s;margin: 0 3px;line-height: 0;float:left;box-sizing:border-box;height:600px;}
.product .list li:hover{flex: 1 1 25%;}
.product .list li:hover > img{width: 100%;height: 100%;}
.product .list li a{display:block;width:100%;height:100%;box-sizing:border-box;padding:530px 10% 0 10%;color:#fff;}
.product .list li a h1{font-size:24px;line-height:35px;padding-bottom:7px;font-family: Noto Sans SC;font-style: normal;font-weight: 500;}
.product .list li a p{font-size:14px;line-height:24px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow:hidden;opacity:0;font-family: 'OPPOSans-R';}
.product .list li:hover a{padding-top:480px;}
.product .list li:hover a p{opacity:1;}

@media screen and (max-width:820px) {
    .titbar{height:auto;padding:4rem 0;}
    .titbar h3{font-size:3rem;}
    .titbar h2{font-size:5rem;line-height:6.5rem;}    
    .product{background:#fff;}
    .product .list{padding-top:2rem;}
    .product .list ul{display:block;}
    .product .list li{width:50%;flex: 1;overflow: hidden;transition: .5s;line-height: 0;float:left;box-sizing:border-box;height:80vw;background-size:auto 100% !important;border:3px solid #fff;margin:0;}
    .product .list li:hover{flex: 1 1 25%;}
    .product .list li:hover > img{width: 100%;height: 100%;}
    .product .list li a{display:block;width:100%;height:100%;box-sizing:border-box;padding:65vw 10% 0 10%;color:#fff;}
    .product .list li a h1{font-size:3.5rem;line-height:35px;padding-bottom:7px;font-family: 'PingFang-SC';text-align:center;}
    .product .list li a p{font-size:14px;line-height:24px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow:hidden;opacity:0;display:none;}
    .product .list li:hover a{padding-top:65vw;}
    .product .list li:hover a p{opacity:1;}
}

.news{padding:50px 0 100px 0;}
.news *{transition-duration: 0.5s;}
.news .top{width:48%;float:left;background:#fff;box-shadow: 0 0 30px #eee;}
.news .top .info{box-sizing:border-box;padding:30px 50px;position:relative;}
.news .list{width:48%;float:right;}
.news .top li{width:100%;}
.news .top li .img{width:100%;height:auto;}
.news .top li .img img{width:100%;}
.news .top li h1{white-space:normal;overflow:initial;line-height:36px;font-size:20px;color:#353535;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family: OPPOSans-M;font-style: normal;font-weight: 500;}
.news .top li p{font-size:16px;color:#999;margin:0px 0 10px 0;line-height:26px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.news .top li h5{font-size:16px;font-family: Rubik;color:#ccc;color:#d4c5b1;}
.news .top li span{position:absolute;font-size:16px;bottom:30px;right:50px;color:#343434;font-family: 'PingFang-SC';}
.news .top li span i{font-family:iconfont;font-size:20px;}
.news .top li .more{display:block;float:right;width:40%;line-height:45px;font-size:16px;color:#fff;background:#00664b;box-sizing:border-box;padding-left:5%;}
.news .top li .more i{font-family:iconfont;padding-left:30%;}
.news .top li .more:hover i{padding-left:40%;}

.news .list li{width:100%;padding:35px 40px;background:#fafafa;margin-bottom:30px;height:100px;box-sizing:border-box;position:relative;}
.news .list li p{font-size:14px;color:#999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin:10px 0 20px 0;line-height:24px;opacity:0;}
.news .list li h1{font-family: OPPOSans-M;font-style: normal;font-weight: 500;font-size:18px;color:#333;line-height:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.news .list li div span:first-child{font-size:16px;color:#d4c5b1;font-family:Rubik;}
.news .list li div span:last-child{font-family:iconfont;float:right;color:#343434;}
.news .list li div span:last-child i{font-family:iconfont;font-size:20px;}
.news .list li div{display:none;}
.news .list li b{position:absolute;right:40px;top:40px;font-family:iconfont;color:#333;font-size:18px;}
.news .list li:hover,.news .list li.active{height:220px;border-left:4px solid #2e2d4f;box-shadow: 0 0 30px #eee;background:#fff;}
.news .list li:hover div,.news .list li.active div{display:block;}
.news .list li:hover p,.news .list li.active p{opacity:1;}


@media screen and (max-width:820px){
    .news .top{width:100%;margin-bottom:3rem;}
    .news .top .info{padding:3rem 3.5rem;}
    .news .top li h1{font-size:3rem;line-height:5rem;}
    .news .top li p{font-size:2.8rem;line-height:3.5rem;margin-bottom:1.5rem;}
    .news .top li span{font-size:2.5rem;}
    .news .top li h5{font-size:3rem;}
    .news .top .info span{bottom:3rem;right:3.5rem;}
    .news .top li span i{font-size:3rem;}
    .news .list{width:100%;}
    .news .list li{padding:3rem 4rem;margin-bottom:1.5rem;height:11rem;}
    .news .list li p{font-size:2.8rem;line-height:4rem;}
    .news .list li h1{font-size:3rem;line-height:5rem;padding-right:2rem;}
    .news .list li div span:first-child{font-size:3rem;}
    .news .list li:hover,.news .list li.active{height:auto;}
    .news .list li div span:last-child {font-size:2.5rem;}
    .news .list li b{font-size:3rem;top:4rem;right:3rem;}
}
@media screen and (min-width:680px) and (max-width:820px){
    .news .list li h2{font-size:2.4rem;}
}

