﻿.story{
    padding:15rem 0 15rem 25%
}
.product-detail .desc {
    margin: 2rem 0;
}
.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;
}
.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{height:11rem}
.nav-item img{width:auto;height:100%;}
.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%}