body{background:#f3f3f3}
.img-fill{width:100%;display:block}
.banner{position:relative;margin-top:5.3rem}
.banner_content {
    position: absolute;
    color: #ffffff;
    top: 40%;
    left: 0;
    width: 100%;
    text-align: center;
}
.banner_title {
    font-size: 4rem;
    font-family: 'SourceHanSerifCN-Heavy';
}
.intro {
    background: #ffffff;
    margin: -6rem 15% 5rem;
    position: relative;
    padding: 1rem 5rem 5rem;
}
.intro_head {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    height: 5rem;
    border-bottom: 1px solid;
    align-items: center;
}
.intro_head h2{font-size:1.75rem}
.intro_content{margin:3rem 0}
.intro_content p{font-size:1.15rem;margin-bottom:.75rem}
.c-cursor-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /*background: hsla(0,0%,100%,.4);*/
    border: 3px solid #fff;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-transform: scale(.8) translateZ(0);
    transform: scale(.8) translateZ(0);
    transition: opacity .3s cubic-bezier(.165,.84,.44,1),transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1);
    cursor:pointer;
}
.c-cursor-play:after {
        content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 20px 0 20px 30px;
}
.video {
    position: relative;
    margin: 3rem 0 2rem;
}

.garden{display:flex}
.garden_item {
    position: relative;
    width: calc(100% / 3);
}
.garden_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}
.garden_level{
    width:28%
}
.garden_item:first-child .garden_level{margin-top:10%}
.garden_item:nth-child(2) .garden_level{margin-top:5%}
.garden_txt {
    position: absolute;
    width: 40%;
    right: 10%;
    top: 50%;
    opacity:0
}
.garden_txt p{font-size:1rem;margin-bottom:.5rem}
.garden_item:hover .garden_content {
    backdrop-filter: blur(6px);
}
.garden_item:hover .garden_txt {
    opacity:1
}

.pic_show{margin:15rem 15%}
.show_between {
    display: flex;
    justify-content: space-between;
}
.show_between img{
    width: calc((100% - 2rem)/2);
    margin-top: 2rem;
}

@media screen and (max-width:700px) {
    body{background:#f3f3f3}
    .banner_content{display:none}
    .garden_item{display:none}
    .intro{margin:-6rem 8% 5rem;padding:1rem 3rem}
    .pic_show{margin:8rem 8%}
}