.main-content{
    min-height:80vh;
    background:#e2e9e4 url(../images/bg-brand-story-mobile.png) no-repeat 50% 100%;
    background-size:100% auto;
    padding-bottom:0.46rem; 
}

.title-box{
    height:0.9rem;
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
            align-items:center;
}

.title-box span{
    color:#001c0b;
    font-size:0.48rem;
    font-weight:700;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#adc2bb));
    background-image:-webkit-linear-gradient(#adc2bb);
    background-image:linear-gradient(#adc2bb);
    background-repeat:repeat-x;
    background-position:50% 100%;
    background-size:auto 0.1rem;
    line-height:1;
    padding-right:0.13rem;
}

.brand-brief{
    padding:0.56rem 0 0;
    background-color:#fff;
}

.brand-brief .title-box{
    margin-left:0.32rem;
}

.brand-brief .img-desc{
    margin-top:0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
}

.brand-brief .img-desc .img-box{
    width:3.04rem;
    margin-right:0;
    -webkit-flex-shrink:0;
            flex-shrink:0;
}

.brand-brief .img-desc .img-box img{
    width:100%;
    height:100%;
    -o-object-fit:cover;
       object-fit:cover;
}

.brand-brief .desc{
    padding:0 0.37rem;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
       -moz-box-pack:justify;
            justify-content:space-between;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
       -moz-box-orient:vertical;
       -moz-box-direction:normal;
            flex-direction:column; 
    color:#ccc;
}

.brand-brief .desc,.brand-brief .desc .about-us{
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
}

.brand-brief .desc .about-us{
    margin-top:-0.9rem;
    height:0.9rem;
    color:#e8eeed;
    font-size:0.47rem;
    font-weight:700;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
            align-items:center;
    padding-right:0.2rem;
    -webkit-box-pack:end;
    -webkit-justify-content:flex-end;
       -moz-box-pack:end;
            justify-content:flex-end;
}

.brand-brief .desc .m-desc{
    line-height:1.4;
    font-size:0.3rem;
    color:#000;
    text-align:justify;
}

.developing-history{
    position:relative;
    overflow:hidden;
    -moz-box-sizing:border-box;
         box-sizing:border-box; 
    background-color:#fff;
}

.developing-history .bg{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    -o-object-fit:cover;
       object-fit:cover;
    -o-object-position:50% 0;
       object-position:50% 0;
}

.developing-history-inner{
    padding:0.5rem 0.32rem 0.42rem;
}

.developing-history-inner .events{
    margin-top:0.5rem;
}

.developing-history-inner .event .year{
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
            align-items:center;
    font-size:0.36rem;
    height:0.44rem;
    width:1.05rem;
    color:#2a5034;
}

.developing-history-inner .event:first-child dl .radius:before{
    top:0.5rem;
}

.developing-history-inner .event:last-child dl .radius:before{
    height:90%;  
}

.developing-history-inner .event dl{
    position:relative;
}

.developing-history-inner .event dd{
    padding-bottom:0.42rem; 
}

.developing-history-inner .event .month,.developing-history-inner .event dd{
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
}

.developing-history-inner .event .month{
    width:1.05rem;
    height:0.38rem;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
            align-items:center;
    -webkit-box-pack:end;
    -webkit-justify-content:flex-end;
       -moz-box-pack:end;
            justify-content:flex-end;
    padding-right:0.05rem;
    font-size:0.24rem; 
    color:#2a5034;
    -webkit-flex-shrink:0;
            flex-shrink:0;
}

.developing-history-inner .event .radius{
    width:0.16rem;
    height:0.16rem;
    margin:0.04rem 0.08rem 0;
    -webkit-flex-shrink:0;
            flex-shrink:0;
    background-color:#2a5034;
    border-radius:50%;
}

.developing-history-inner .event .radius:before{
    content:"";
    display:block;
    position:absolute;
    background-color:#2a5034;
    width:1px;
    height:100%;
    left:1.195rem;
    top:0;
}

.developing-history-inner .event .desc{
    padding:0.12rem 0.18rem;
    font-size:0.24rem;
    color:#fff;
    line-height:0.3rem;
    max-width:4.8rem;
    background-color:#2a5034;
    -moz-box-sizing:content-box;
         box-sizing:content-box;
}

.brand-events{
    margin:0.38rem auto 0;
    width:6.86rem;
}

.brand-events .title-box+.video-desc{
    margin-top:0.15rem;
}

.video-desc{
    margin:0.8rem auto 0;
}

.video-desc .title{
    font-size:0.36rem;
    color:#fff;
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
            align-items:center; 
    padding:0.18rem 0.44rem; 
    line-height:0.48rem;
    width:6.2rem;  
    background-color:#2a5034;
    letter-spacing:-1px;
    max-width:100%;
}

.video-desc .desc{
    line-height:0.3rem;
    font-size:0.24rem;
    padding:0.2rem 0;
    color:#172e21;
}

.video-desc .video-box{
    position:relative;
}

.video-desc .video{
    width:100%;
    height:100%; 
    left:0;
    top:0;
    position:absolute;
    -o-object-fit:cover;
       object-fit:cover;
}

.video-desc .video-mask{
    width:100%;
    position:relative;
    z-index:2;
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
            align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
       -moz-box-pack:center;
            justify-content:center;
    padding-top:56.25%;
    overflow:hidden;
}

.video-desc .video-mask:before{
    content:"";
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color:rgba(21, 23, 21, .24); 
    z-index:1;
}

.video-desc .video+.video-mask:before{
    display:block;
}

.video-desc .video-mask img{
    width:100%;
    display:block;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    -o-object-fit:cover;
       object-fit:cover;
}

.video-desc .video-mask .video-play{
    color:#fff;
    font-size:0.12rem;
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
       -moz-box-align:center;
            align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
       -moz-box-pack:center;
            justify-content:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
       -moz-box-orient:vertical;
       -moz-box-direction:normal;
            flex-direction:column;
    cursor:pointer; 
    position:absolute;
    z-index:2;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
}

.video-desc .video-mask .video-play:before{
    content:"";
    display:block;
    background:url(../images/btn-play.png) no-repeat;
    background-size:100% 100%;
    width:0.3rem;
    height:0.3rem;
    margin-bottom:0.09rem;
}

.brand-record-events{
    margin:0.62rem auto 0;
    width:6.86rem;
}

.brand-record-events .title-box+.video-desc{
    margin-top:0.15rem;
}

.brand-record-events .video-box{
    margin-top:0.35rem; 
}