.banner {
    position: relative;
}
.page {
    width: 100%;
    height: 100vh;
}
.page .item{position:absolute;top:0;height:100%;width:100%;}
.item .bg {
    background-image: url('../../Images/brand/index/brand3.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    height: 100%;
    width: 100%;
}
.content-wrap {
    color: #fff;
    position: absolute;
    top: 55%;
    left: 20%;
    z-index: 100;
}
.slide-content p{font-size:3rem;width:max-content;}
.slide-content {position:absolute;top:0;width: max-content;}
.slide-desc {
    margin-top: 3rem;
    line-height: 2;
    font-size: 1.25rem;
    display: inline-block
}
.arrow-down {
    position: absolute;
    width: 2px;
    z-index: 10;
    left: 50%;
    height: 60px;
    border-radius: 10px;
    bottom: 0;
    background: rgba(255,255,255,.3);
    margin-left: -1px;
    overflow:hidden;
}
.down-line {
    display: inline-block;
    height: 60px;
    width: 2px;
    background: #fff;
    animation: arrow 1.5s ease-in-out infinite;
}
@keyframes arrow {
    0% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }
    to {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }
}
.section-nav {
    display: flex;
    justify-content: space-around;
    background: #f6f6f6;
    padding: 3rem 0;
}
.section-item {
    text-align: center;
    max-width: 15%;
    cursor: pointer;
    opacity:0.5;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}
.section-item:hover{opacity:1}
.section-item p{margin-top:1rem;}
.section{position:relative}
.section-title {
    font-size: 2.5rem;
    position: absolute;
    left: 25%;
    top: 10rem;
    font-family: PingFang Heavy;
}
.desc-title {
    color: red;
    font-family: PingFang Heavy;
    line-height: 1.5;
    margin-bottom: 4rem;
    font-size: 1.25rem;
}
.desc-content p{margin-bottom:1rem}
.garden {
    padding: 25rem 0 5rem 20%;
}
.garden .desc{margin-left:6%;}
.garden .desc-title{    
    display: inline-block;
    vertical-align: top;
    margin-right: 8.333%;
}
.garden .desc-content {
    display: inline-block;
    width: 43rem;
}
.garden-wrap {
    line-height: 0;
    overflow: hidden;
    margin-top: 6rem;
}
.garden-show {
    position: relative;
    float: left;
    width: 5%;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 70vh;
    min-height: 25rem;
}
.garden-show.active{width:80%;}
.garden-show:nth-child(1) {
    background-image: url('../../Images/brand/resoure/section-show1.jpg');
}
.garden-show:nth-child(2) {
    background-image: url('../../Images/brand/resoure/section-show3.jpg');
}
.garden-show:nth-child(3) {
    background-image: url('../../Images/brand/resoure/section-show2.jpg');
}
.garden-show:nth-child(4) {
    background-image: url('../../Images/brand/resoure/section-show4.jpg');
}
.garden-show:nth-child(5) {
    background-image: url('../../Images/brand/resoure/section-show5.jpg');
}
.picture .picture-desc{display:none;font-size:1.5rem}
.garden-show.active .picture-desc {
    display: inline-block
}
.garden-show.active .mask{display:none}
.garden-show .mask{display:block}
.garden-show:hover .mask{display:none}
.picture {
    position: absolute;
    top: 3rem;
    color: #fff;
    left: 2rem;
}
.picture p{display:inline-block;width:1rem;vertical-align:top;line-height:1.1;}
.picture-title{font-size:1rem;opacity:.8;margin-right:1rem}
.fire{position:absolute;left:0;bottom:0;width:15%;}
.institute {
    padding: 10rem 0 25rem 0;
}
.institute .desc{
    position: absolute;
    left: 50%;
    width: 33.333%;
    top: 10rem;
}
.institute-img1 {
    display: block;
    margin-top: 9rem;
    margin-left: 25%;
    width: 20%;
}
.institute-img2 {
    width: 45%;
    margin-top: 3rem;
}
.institute-img3 {
    position: absolute;
    left: 50%;
    width: 33.333%;
    bottom: 9rem;
}
.research {
    padding: 15rem 0 10rem;
    background: #f6f6f6;
}
.research .desc-content {
    width: 50%;
    margin: auto;
}
.research .desc-title {
    text-align: center;
    margin-left: 25%;
    display: inline-block;
    margin-top: 5rem;
    padding: 0 2rem;
    position: relative;
}
.research .desc-title::before,.research .desc-title::after {
    content: "";
    background: url('../../Images/brand/resoure/quotes.png')no-repeat center;
     width: 2rem;
    background-size: contain;
    height: 2rem;
    position: absolute;
    top: 50%;
    margin-top: -1rem;
}
.research .desc-title::before{
        left: 0;
}
.research .desc-title::after {
        right: 0;
}
.department {
    margin-left: 18.666%;
    margin-top: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    justify-content: space-between;
}
.department .detail{
         display: inline-block;
    width: 20rem;
}
.department .detail .name{    
    font-family: PingFang Heavy;
    margin-bottom: 1rem;
}
.department .duty{font-size: 1rem;}
.department-desc i {
    vertical-align: top;
    display: inline-block;
    margin-right: 4rem;
    width:4rem
}
.department-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.department-img {
    width: 60%;
}
.germplasm{padding: 25rem 0 15rem;}
.germplasm-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.germplasm-img{width:42%;margin-right:8.3333%}
.germplasm .desc{width:30%;position:relative}
.leaf{position:absolute;bottom:0;left:0}
.germplasm-show {
    width: 50%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    margin-top: 10rem;
    justify-content: space-between;
}
.germplasm-item{position:relative;width:30%;line-height:0}
.germplasm-item img{width:100%;}
.germplasm-item-content {
    position: absolute;
    top: 0;
    width: 80%;
    left: 10%;
    opacity: 0;
    z-index: 101;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}
.germplasm-item-content .item-title {
    font-family: PingFang Heavy;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,.5);
}
.mask{position:absolute;background:rgba(0,0,0,.5);display:none;top:0}
.germplasm-item:hover .germplasm-item-content {opacity:1}
.germplasm-item:hover .mask{display:block}
.park {
    height: 100vh;
    background: url('../../Images/brand/resoure/park.jpg')no-repeat center;
    background-size:cover;
}
.park .section-title{color:#fff;top:22%;}
.park-content {
    position: absolute;
    color: #fff;
    top: 22%;
    width: 33%;
    left: 50%;
}
.park .desc-title{color:#fff}
.server{padding: 20rem 0 15rem;}
.server .desc-content{margin-left:25%;font-size:1.125rem}
.slogan {
    position: absolute;
    right: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 17rem;
    color: #eee;
    text-transform: uppercase;
}
.slogan::after {
    content: "";
    display: block;
    border-bottom: 1px solid;
    position: absolute;
    width: 8rem;
    left: -5rem;
    bottom: -1rem;
}
.server-show {
    margin-top: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.server-part{width:50%;line-height:0}
.left-top-img{width:100%;}
.server-part:last-child{padding-left:5px;}
.left-bottom-img{width:50%;float:right;margin-top: 5px;}
.right-top-img{width:33.333%;display:block;margin-bottom: 5px;}
.right-bottom-img{width:66.666%;}
.wishing{padding-bottom:10rem;}
.wishing-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.wishing-img{width:50%}
.wishing-content {
    padding: 0 8.333%;
    width: 47%;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wishing-content > img {
    width: 20rem;
    padding-top: 19%;
}
.profession{color:#ccc;line-height: 1.7;font-size:.875rem}
.wishing-show {
    text-align: center;
    margin-top: 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    justify-content: center;
}
.wishing-part {
    margin-right: 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wishing-show>div{width:25%;}
.institute .desc.fix{position:fixed;top:16rem}
.develop {
    padding: 15rem 20% 10rem;
}
.develop .section-title{left:20%}
.develop .desc-content{width:80%}
.develop img{width:100%;margin-top:2rem}