body {background:#fff}
.banner {
    height: 100vh;
    background: url('../../../../Images/activity/beatuy/banner.jpg')no-repeat center;
    background-size:cover;
    position:relative;
}
.section{position:relative;background:#fff;}
.section .section-title {
    font-size: 3rem;
    color: #ff2f47;
}
.desc > p {
    margin-bottom: 2rem;
    line-height: 2;
}
.part1,.part2{padding:17rem 0 10rem}
.part1 .desc,.part2 .desc{margin-left:50%;margin-bottom:16rem}
.part1 .section-title,.part2 .section-title{position:absolute;left:25%;}
.part1 .section,.part2 .section{padding:10rem 0}
.brewing{position:relative}
.brewing .alone{    
    width: 45%;
    position: relative;
    z-index: 1;
}
.brewing p{margin-left: 25%;padding: 1rem 0;}
.brewing .many{
    position: absolute;
    bottom: 0;
    width: 59%;
    right: 0;
}
.activity {
    line-height: 0;
    width: 58%;
    margin-left: 25%;
    display: flex;
    flex-wrap: wrap;
}
.activity .item{    
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f6f6f6;
    color: #ff2f47;
}
.activity img{width:100%;}
.activity .item:nth-child(2) {
    background-image: url('../../Images/activity/beatuy/icon1.png');
    background-repeat:no-repeat;
    background-position:center;
}
.activity .item:nth-child(7) {
    background-image: url('../../Images/activity/beatuy/icon2.png');
    background-repeat:no-repeat;
    background-position:center;
}
.part3 .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{vertical-align:middle;color:#ff2f47;font-weight:bold}
.news-More:hover .arrow-line{width:20px}
.arrow-line {
    height: 2px;
    width: 0;
    display: inline-block;
    background: #ff2f47;
    margin-right: -13px;
    margin-left: 3px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.fade{opacity:0}