@font-face {
    font-family: 'cby';
    src: ,
         ,
         ,
         ;
}
body, div, p {
    margin: 0;
    padding: 0
}
video {
    display: block;
    width: 100%
}
img {
    display: block;
    width: 100%;
    height: 4.04rem
}
img[scr=""], img:not([src]) {
    opacity: 0
}
a {
    text-decoration: none
}
.body-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: .25rem;
    color: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}
header {
    position: relative;
    height: 8.86rem;
    background: #000
}
.wrap {
    position: relative;
    height: 100%;
    margin: 0 auto
}
.header-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center
}
.header-bg img:nth-child(2), .header-bg img:nth-child(3), .header-bg img:nth-child(4) {
    position: absolute;
    right: 0
}
.header-bg img:nth-child(2) {
    width: 3.25rem;
    bottom: 3.46rem
}
.header-bg img:nth-child(3) {
    width: 4.55rem;
    bottom: .1rem
}
.header-bg img:nth-child(4) {
    width: 2rem;
    height: .78rem;
    top: .42rem;
    right: .4rem;
    z-index: 10
}
.header-main {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 100%
}
.header-tit {
    line-height: .64rem;
    padding-top: 1.18rem;
    padding-left: .53rem;
    font-size: .64rem;
    font-weight: bold
}
.header-subtit {
    line-height: .48rem;
    padding-top: .1rem;
    padding-left: .53rem;
    font-size: .48rem;
    font-weight: bold
}
.header-content {
    position: relative;
    line-height: .35rem;
    font-size: .24rem
}
.header-content p {
    position: relative;
    z-index: 2;
    padding-left: .53rem
}
.header-content .video {
    position: absolute;
    min-width: 100%;
    top: 2.23rem;
    left: 0;
    z-index: 1;
    opacity: .9
}
.video::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.4);
}
.header-main img {
    position: relative;
    z-index: 2;
    width: 4.62rem;
    height: 1.07rem;
    margin: .46rem 0 0 .53rem
}
.main {
    padding-bottom: 1rem
}
.outer-item {
    padding: .2rem 0 .32rem 0
}
.timeline-box .outeritem-tit {
    display: inline-block;
    line-height: .7rem;
    padding: 0 .39rem 0 .35rem;
    margin-left: -.6rem;
    font-size: .48rem; 
    font-family: 'cby';
    background: #a62450;
    text-align: center
}
.outeritem-tit.short {
    width: 1.96rem;
    padding: 0
}
.item-content {
    margin-top: .4rem
}
.item-content > div {
    padding: .28rem .26rem .55rem .26rem;
    background: rgba(0,0,0,.8);
    border-bottom-left-radius: .1rem;
    border-bottom-right-radius: .1rem
}
.item-content > img {
    display: block;
    width: 100%;
    height: .3rem
}
.item-content video {
    width: 5.36rem;
    height: 3.02rem
}
.item-content > div  p {
    line-height: .35rem;
    padding-top: .23rem
}
.item-content div img:not(:first-child) {
    padding-top: .45rem
}
.item-content div video:not(:first-child) {
    margin-top: .4rem
}
.inner-item {
    margin: 0 .26rem 0 .76rem
}
.item-content {
    position: relative
}
.inneritem-tit {
    position: absolute;
    top: 0;
    left: -1.35rem;
    line-height: .7rem;
    padding: 0 .29rem 0 .3rem;
    font-size: .36rem;
    font-family: 'cby';
    background: rgba(0,0,0,.8)
}
.nav-box {
    z-index: 100
}
.inneritem-tit.long {
    padding: 0 .2rem 0 .1rem
}
@media screen and (min-width: 750px) and (max-width: 950px) {
    .timeline-box .outeritem-tit, .inneritem-tit {
        border-radius: .7rem
    }
}
@media screen and (max-width: 950px) {
    .body-box {
        background:  left center/auto 100%
    }
    .wrap {
        width: 7.5rem
    }
    .timeline-box .wrapper {
        margin-left: .56rem
    }
    .timeline-box .outeritem-tit, .inneritem-tit {
        border-top-right-radius: .7rem;
        border-bottom-right-radius: .7rem
    }
    .timeline-box .wrapper {
        padding-bottom: .2rem;
        border-left: solid .03rem #741a44
    }
    .header-content {
        padding-top: .38rem
    }
    .header-content article {
        padding-bottom: .1rem
    }
    .main {
        margin-top: .1rem
    }
    .nav-box {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: flex;
        align-items: flex-end
    }
    .nav-box > div {
        position: static!important
    }
    .nav-box a {
        display: block;
        width: 1.5rem;
        line-height: .7rem;
        margin-bottom: .02rem;
        font-size: .3rem;
        font-family: 'cby';
        font-weight: bold;
        color: #d31561;
        background: #fff;
        border-top-right-radius: .5rem;
        border-bottom-right-radius: .5rem;
        text-align: center;
        white-space: nowrap
    }
    .nav-box a.active {
        color: #fff;
        background: #a62450
    }
    .logo {
        display: none
    }
}
@media screen and (min-width: 950px) {
    .body-box {
        background:  bottom center/100%
    }
    .wrap {
        width: 9.5rem
    }
    .main {
        padding-top: .44rem
    }
    .timeline-box .outeritem-tit {
        border-radius: .7rem
    }
    .inneritem-tit {
        border-radius: .7rem
    }
    .outer-item {
        padding: 0 1.14rem 0 1.46rem
    }
    .item-content > div {
        padding-left: .35rem;
        padding-right: .35rem
    }
    .header-content .video {
        top: .2rem
    }
    .header-content {
        padding-top: .4rem
    }
    .header-content article {
        padding-bottom: .2rem
    }
    .timeline-box {
        padding-top: .62rem
    }
    .nav-box {
        position: relative;
        display: flex;
        justify-content: center;
        height: .6rem
    }
    .nav-box > div {
        display: flex;
        align-items: center;
        padding: 0 .1rem 0 .45rem;
        background: #fff;
        border-radius: .02rem;
        box-shadow: 0px 0.01rem 0.04rem rgba(0,0,0,.1)
    }
    #nav > div {
        display: flex
    }
    #nav a {
        display: block;
        line-height: .6rem;
        padding: 0 .2rem;
        font-size: .2rem;
        color: rgba(0,0,0,.5)
    }
    #nav a.active {
        position: relative;
        color: #ee7191;
        background: #160412;
        overflow: hidden
    }
    #nav a.active::before {
        position: absolute;
        top: 50%;
        left: -2.05rem;
        content: '';
        width: 2.1rem;
        height: 2.1rem;
        margin-top: -1.05rem;
        background: #fff;
        border-radius: 100%
    }
    .logo {
        width: 1.34rem;
        height: .3rem;
        margin-right: .4rem;
        background:  center/100% no-repeat
    }
}