/* body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
} */

video {
    display: none;
    width: 100%;
    height: 2.06rem;
    margin-bottom: .05rem;
}

@media screen and (max-width: 768px) {
    .content {
        margin: .1rem .21rem .21rem;
    }
}

.article-page p, .content p {
    word-break: break-all;
}

.article-page img, .content img {
    width: 100% !important;
    height: auto !important;
}

.content-title, .person-title, .article-title {
    position: relative;
}

.content-title {
    margin-bottom: .15rem;
}

.content-title >div, .person-title >div {
    position: absolute;
    height: 100%;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    background: rgb(45, 112, 174);
}

.content-title h2, .person-title h2 {
    font-weight: bold;
    color: rgb(45, 112, 174);
}

@media screen and (min-width: 769px) {
    .content-title >div, .person-title >div {
        width: 10px;
    }

    .content-title h2, .person-title h2 {
        margin-left: 19px;
        font-size: 16px;
    }
}

.rich-box {
    font-size: 14px;
    padding-left: 15px;
    box-sizing: border-box;
}

.rich-box ul {
    font-size: 14px;
    padding-left: 22px;
}

.rich-box ul li {
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .content-title >div, .person-title >div {
        width: .1rem;
    }

    .content-title h2, .person-title h2 {
        margin-left: .18rem;
        font-size: .16rem;
    }

    .rich-box {
        font-size: .14rem;
        padding-left: .15rem;
    }

    .rich-box ul {
        font-size: .14rem;
        padding-left: .2rem;
    }

    .rich-box ul li {
        font-size: .14rem;
    }
}

.person {
    margin: 0 .21rem;
}

.article-page {
    margin: .25rem .2rem .2rem;
}

.article-title {
    margin-bottom: .16rem;
}

.article-title >div {
    position: absolute;
    width: .04rem;
    height: 100%;
    border-radius: .02rem;
    -webkit-border-radius: .02rem;
    -moz-border-radius: .02rem;
    -ms-border-radius: .02rem;
    -o-border-radius: .02rem;
    background: #2d70ae;
}

.article-title h2 {
    margin-left: .11rem;
    font-size: .22rem;
    font-weight: bold;
}

.person-avatar {
    flex: 0 0 auto;
    margin-right: .09rem;
    width: .48rem;
    height: .48rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.person-list {
    margin-top: 16px;
    padding-left: 15px;
    box-sizing: border-box;
}

.person-list .person-user {
    align-items: center;
}

.person-list h2 {
    font-size: 15px;
    margin: 2px 0 3px;
}

.person-list p {
    font-size: 13px;
    color: #999;
}

@media screen and (max-width: 768px) {
    .person-list {
        margin-top: .16rem;
        padding-left: .15rem;
    }

    .person-list h2 {
        font-size: .15rem;
        margin: .02rem 0 .03rem;
    }

    .person-list p {
        font-size: .13rem;
        color: #999;
    }
}

.person-content {
    font-size: 14px;
    line-height: 22px;
    color: rgb(74, 74, 74);
}

@media screen and (max-width: 768px) {
    .person-content {
        font-size: .13rem;
        line-height: .2rem;
    }
}

.finish {
    position: relative;
}

.finish img {
    display: block;
    width: 1.1rem;
    margin: 0 auto;
}

.finish p {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: .23rem;
    font-size: .13rem;
    color: #fff;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.sign {
    margin: .45rem 0;
    text-align: center;
}

.sign h2 {
    margin-top: .1rem;
    font-size: .12rem;
    text-align: center;
}

.unfinish p {
    color: #c8c8c8;
}

#t-button {
    display: inline-block;
}

.header {
    width: 100%;
    height: 54px;
    box-shadow: 0 1px 5px 1px #d4d4d4;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .3s;
    overflow: hidden;
}

.logo-box {
    display: flex;
}

.logo-box .close {
    width: 20px;
    height: 20px;
    margin: auto 0;
    margin-right: 10px;
}

.logo-box img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.logo .title{
    font-size: 14px;
}

.logo p:last-child {
    font-size: 10px;
    color: #999999;
    transform: scale(.9);
}

.header .download {
    background: #2d70ae;
    color: white;
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 40px;
}

@media screen and (min-width: 769px) {
    #vm {
        max-width: 375px;
        margin: 0 auto;
    }

    video {
        height: 210px;
    }

    .content {
        margin: 15px 11px 11px;
    }

    .person {
        margin: 0 10px;
        margin-top: 35px;
    }

    .person h2 {
        font-size: 18px;
    }

    .person-avatar {
        width: .28rem;
        height: .28rem;
    }

    .sign h2,
    .article-title h2 {
        font-size: .1rem;
    }

    .person-list p {
        font-size: .08rem;
    }

    .finish img {
        width: .6rem;
    }

    .finish p {
        bottom: .12rem;
        font-size: .08rem;
    }

    .article-page {
        margin: .15rem .1rem .2rem;
    }
}

.rich-box p {
    line-height: 28px;
}

@media screen and (max-width: 768px) {
    .rich-box p {
        line-height: .28rem;
    }
}

.harvest {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 20px;
}

.harvest .has-harvest {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 132px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid rgb(220, 220, 220);

}

.harvest .has-harvest:first-child {
    margin-right: 26px;
}

.harvest .has-harvest img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.harvest .has-harvest div {
    font-size: 14px;
    color: rgb(220, 220, 220);
}

.harvest .has-harvest.selected {
    border-color: #2d70ae;
}
.harvest .has-harvest.selected div {
    color: #2d70ae;
}

.set-bg-play {
    height: 30px;
    width: 100%;
    margin-top: 10px;
}

.set-bg-play .bg-play-box {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    padding: 8px 14px;
    margin-right: 8px;
    box-sizing: border-box;
    border-radius: 30px;
    background: rgba(45, 112, 174, .08);
}

.set-bg-play .bg-play-box img {
    width: 17px;
    margin-right: 4px;
}

.set-bg-play .bg-play-box .text {
    color: #333333;
    font-size: 12px;
}

@media screen and (min-width: 769px) {
    .share-user {
        width: calc(100% - 20px);
        padding: 12px 7px 19px 13px;
        box-sizing: border-box;
        margin: 0 auto 45px auto;
        background-color: rgb(248, 248, 248);
        border-radius: 5px;
    }

    .share-user .share-user-title {
        font-size: 19px;
        line-height: 26px;
        color: rgb(34, 34, 34);
        font-weight: 500;
        margin-bottom: 20px;
    }

    .share-user .share-user-tip {
        font-size: 12px;
        line-height: 17px;
        color: rgb(45, 112, 174);
        margin-bottom: 3px;
    }

    .share-user .share-user-name {
        font-size: 12px;
        line-height: 17px;
        color: rgb(34, 34, 34);
        font-weight: 500;
    }

    .person-position {
        font-size: 13px;
        color: #2c70ae;
        font-weight: 500;
        margin: 9px 0 20px 0;
    }
}

@media screen and (max-width: 768px) {
    .share-user {
        width: calc(100% - .42rem);
        padding: .12rem .13rem .19rem .13rem;
        box-sizing: border-box;
        margin: 0 auto .45rem auto;
        background-color: rgb(248, 248, 248);
        border-radius: .05rem;
    }

    .share-user .share-user-title {
        font-size: .19rem;
        line-height: .26rem;
        color: rgb(34, 34, 34);
        font-weight: 600;
        margin-bottom: .2rem;
    }

    .share-user .share-user-tip {
        font-size: .12rem;
        line-height: .17rem;
        color: rgb(45, 112, 174);
        margin-bottom: .03rem;
    }

    .share-user .share-user-name {
        font-size: .12rem;
        line-height: .17rem;
        color: rgb(34, 34, 34);
        font-weight: 500;
    }

    .person-position {
        font-size: .13rem;
        color: #2c70ae;
        font-weight: 500;
        margin: .09rem 0 .2rem 0;
    }
}