body {background:#fff}
.banner {
    height: 100vh;
    background: url('../../Images/activity/springtea/banner.jpg')no-repeat center;
    background-size:cover;
    position:relative;
}
.banner .slogan{position:absolute;width:35%;top:30%;left:32.5%;}
.section{position:relative;background:#fff}
.section .section-title {
    font-size: 3rem;
    color: #51cff2;
}
.desc > p {
    margin-bottom: 2rem;
    line-height: 2;
}
.part1{
    padding:10rem 0 5rem
}
.part1 >.desc{margin-left:50%}
.part1 >.section-title{position:absolute;left:25%}
.joy {
    display: flex;
    padding: 0 15%;
    justify-content: space-around;
    margin: 10rem 0;
}
.joy div{width:20%;transition:all .35s linear}
.joy img{width:100%}
.joy div:nth-child(1){transform: translateY(-30px);transition-duration:0.2s}
.joy div:nth-child(2){transform: translateY(-90px);}
.joy div:nth-child(3){transform: translateY(85px);}
.joy div:nth-child(4){transform: translateY(-15px);transition-duration:0.15s}
.joy div.homing{transform:translateY(0)}
.part2 .section-title{margin: 0 0 2rem 25%;position:relative;z-index:1}
.part2>.desc{margin-left:25%;position:relative;z-index:1}
.activity{margin-top: -15%;line-height:0;background:#f5f5f5;position:relative}
.activity img{width:100%;}
.activity .swiper-container{margin-top: calc((4rem - 25%) * 0.75);padding-bottom: 20rem;}
.activity .swiper-slide{padding-right:4rem;line-height:1}
.activity .swiper-slide .desc{    
    background: #fff;
    padding: 4rem;
    height:17rem;
}
.activity .swiper-slide h3{font-family: PingFang Heavy;margin-bottom: 2rem;}
.activity .remind{    
    position: absolute;
    right: 4rem;
    text-align: right;
    bottom: 2rem;
    line-height: 1.5;
    font-size: 1.25rem;
}
.part3{padding:10rem 0}
.part3 .section-title,.part3 .desc{margin-left:25%;}
.experience{font-size:0}
.experience >div{display:inline-block}
.experience .ex-left{   
    width: 58%;
    text-align: right;
    margin-right: 1rem;
}
.experience .ex-right{width: 33%;vertical-align: top;}
.experience img{margin-bottom:1rem;width:100%;}
.experience .ex-left img:nth-child(2){width:57%;margin-bottom:5rem}
.part4 .enter{position:absolute;left:25%}
.part4 .code{margin-left:50%;width:30rem}
.part5 .section-title, .nav .section-title {
    padding: 10rem 25% 5rem;
}
.nav-wrap{display:flex;justify-content:space-around;padding:0 10% 10rem;align-items:center}
.nav-item{position:relative}
.nav-hover{position:absolute;top:0;left:0;opacity:0}
.nav-item:hover .nav-hover{opacity:1}
.news-list{width:75%;display:flex;justify-content:space-between;margin:auto}
.news-list .picture{background-size:cover;background-repeat:no-repeat;background-position:center;height:13vw}
.news-list .news{width:32%}
.news-content{background:#f6f6f6;padding:2rem;}
.news-content h2{
    font-size:1.25rem;
    font-weight:bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom:2rem;
    color:#000;
}
.news>a{position:relative;display:block;}
.cover {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
}
.news:hover h2{text-decoration:underline}
.news:hover .cover{opacity:.5}
.news-More>span{color:#51cff2;font-weight:bold}
.news-More:hover .arrow-line{width:20px}
.arrow-line {
    height: 2px;
    width: 0;
    background: #51cff2;
    margin-right: -13px;
    margin-left: 3px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.arrow-right,.arrow-line{display:inline-block;vertical-align:middle;}
.fade{opacity:0}
.activity .swiper-button-next, .activity .swiper-button-prev {
    margin-top: 0;
    background-image: none;
    height: auto;
    width: auto;
    padding: .75rem;
    background-color: #51cff2;
    top: auto;
    bottom: 10rem
}
.activity .swiper-button-next {
    left: calc(25% + 4rem);
    right: auto;
    padding-left: 1.15rem;
}
.activity .swiper-button-prev {
    right: calc(100% - 25% - 2.5rem);
    padding-right: 1.5rem;
    padding-left: 1rem;
    left: auto;
}
.swiper-button-prev .arrow-right {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin-right: -16px;
}
.activity .arrow-line{background:#fff}
.activity .arrow-right{color:#fff}
.swiper-button-next:hover .arrow-line, .swiper-button-prev:hover .arrow-line {
    width: 20px;
}
.part2 .code {
    width: 8rem;
    position: relative;
    z-index: 1;
    margin: 5rem 0 -20% 25%;
}