.story{
    padding:15rem 0 15rem 25%
}
.product-detail .desc {
    margin: 2rem 0;
}
.title {
    width: 34%;
    bottom: 34%;
    left: 33%;
}
.stage-title {
    font-size: 3rem;
    color: #e70310;
    font-family: 'PingFang Heavy';
    margin-bottom:2rem;
}
.date {
    color: #e70310;
    font-family: 'PingFang Heavy';
    font-size:1.25rem
}
.stage{display:flex;margin-bottom:20rem}
.leaf{margin-left:10%;position:relative}
.leaf img{height:100%;position:absolute}
.video{position:absolute;overflow:hidden;line-height:0;height:100%;}
.video-play-btn, .video-pause-btn {
    color: #fff;
    position: absolute;
    top: 50%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -2rem;
    z-index: 10;
}
.thirty-play-btn {
    position: absolute;
    bottom: 17%;
    left: 50%;
    width: 6rem;
    margin-left: -3rem;
}
.stage-2{position:relative}
.stage-2 .stage-content{margin-left:35%}
.year{margin-bottom:5rem}
.stage-2 .stage-title {
    position: sticky;
    top: 10rem;
    float: left;
}
.brilliant {
    display: flex;
    justify-content: center;
    padding:15rem 0;
}
.video-play-btn:hover+.cover,.video.active:hover .cover{opacity:0.3}
.video .hover-btn{display:none;}
.video-play-btn:hover .hover-btn{display:block}
.video-play-btn:hover .show-btn{display:none}
.show-video {
    width: 100%;
    height: auto;
    position:relative;
    z-index:2;
    opacity:0
}
.show-video.active{opacity:1}
.video-pause-btn {
    display:none;
}
.video.active:hover  .video-pause-btn{display:inline-block}
.cover{opacity:0;position:absolute;width:100%;height:100%;background:#000;top:0;left:0;z-index:2}
.nav-item{width:12%}
.more-video {
    display: inline-block;
    border: 2px solid #e70310;
    padding: 5px 0 5px 2.25rem;
    width: 10rem;
    color: #e70310;
    font-family: PingFang Heavy;
    text-align:left
}
.more-video > span {
    vertical-align: middle;
}
.arrow-line {
    height: 2px;
    width: 0;
    display: inline-block;
    background: #fff;
    margin-right: -13px;
    margin-left: 10px;
    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);
}
.more-video:hover {
    background: #e70310;
    color: #fff;
}
.more-video:hover .arrow-line {
    width: 20px;
}
.video-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9;
    background: #000;
    display: none;
}
.video-container video {
    width: 80%;
    margin: 5% 10%;
    height: 80%;
    opacity:1
}
.close-btn {
    position: absolute;
    right: 7em;
    top:7em;
    width: 3.5em;
    cursor:pointer;
}
.text-left{padding-left:10%}
.product-wrap .swiper-slide {
        width: 45%;
        line-height: 0;
        padding-bottom: 1rem;
    }
    .product-wrap img{width:100%}
    .product-wrap {
        padding: 0px 8%;
        background: #fff;
        padding-bottom:25rem;

    }
    .more-explore {
        position: absolute;
        left: 50%;
        margin-left: -4rem;
        z-index: 30;
        background: red;
        color: #fff;
        padding: 10px 1.3rem;
        cursor: pointer;
        bottom: -1rem;
    }
.more-explore > span{
    vertical-align: middle
}
.more-explore:hover .arrow-line {
    width: 20px
}
.explore:hover {
    background: #fff;
    color: red
}
.more-explore .arrow-line {
    background: #fff
}
.arrow-line {
    height: 2px;
    width: 0;
    display: inline-block;
    background: #fff;
    margin-right: -11px;
    margin-left: 10px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
    .product-box {
        position: absolute;
        height: calc(100% - 1rem);
        width: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        opacity: 0;
    }
    .product-box p{
        font-size:1.25rem
    }
    .swiper-slide.swiper-slide-active:hover .product-box{opacity:1}
.product-wrap .cover {
    background: rgba(255,255,255,0.5);
    opacity: 1
}
    .swiper-slide.swiper-slide-active .cover{display:none;}
.cover {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
    z-index: 2;
}