@import '../../common/css/index.css';

.article-wrapper {
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    background: #fff;
}

.iphone-x-compitable {
    box-sizing: border-box;
    padding-bottom: 34px;
}

.iphone-x-compitable.margin {
    margin-bottom: 34px;
}
.iphone-x-compitable.fixed {
    bottom: 34px;
}

.iphone-x-compitable .main-container {
    min-height: calc(100vh - 34px);
}

.article-wrapper .main-container {
    min-height: 100vh;
    display: flex;
    flex-flow: nowrap column;
    background: #fff;
}

.article-wrapper .main-container .main-content {
    flex: 1 0;
}


.article-wrapper .content {
    box-sizing: border-box;
    padding: 3.623188vw 4.10628vw 11.594203vw;
}

.article-wrapper .content .article-title {
    font-size: 6.445312vw;
    line-height: 7.729469vw;
    color: #000;
    font-weight: 700;
}


.article-wrapper .content .article-info {
    margin-top: 2.57649px;
    margin-bottom: 5.958132vw;
}

.article-wrapper .content .article-info.nomargin {
    margin-bottom: 0;
}

.article-wrapper .content .info-item {
    display: flex;
}

.article-wrapper .info-item .info-name {
    color: #999;
    font-size: 3.884734vw;
    line-height: 7.246377vw;
    max-width: 23.5vw;
    white-space: normal;
    word-break: break-all;
}

.article-wrapper .info-item .info-value {
    flex: 1;
    padding-right: 6.135266vw;
    margin-left: 4.830918vw;
    white-space: normal;
    word-break: break-all;
    color: #666;
    font-size: 3.884734vw;
    line-height: 7.246377vw;
}

.article-wrapper .article-desc {
    position: relative;
}

.article-wrapper .expand-area {
    height: 0;
    transition: height 180ms ease-out;
    margin-bottom: 5.958132vw;
    overflow: hidden;
}

.article-wrapper .expand-icon {
    position: absolute;
    right: 0;
    bottom: 1.97504vw;
    font-size: 0;
}

.article-wrapper .subscribe .custom-list {
    padding-left: 0;
    padding-right: 0;
}

.article-wrapper .content .subscribe {
    margin-top: 5.636071vw;
}

.article-wrapper .content .paragraph,
.article-wrapper .content .title {
    font-size: 4.589372vw;
    color: #000;
    line-height: 7.165862vw;
    padding-bottom: 3.703704vw;
    background: #fff;
}

.article-wrapper .content .title {
    font-weight: 700;
}


.article-wrapper .footer {
    background: #fff;
    position: fixed;
    bottom: 0;
    padding-bottom: 0;
}

.article-wrapper .footer.iphone-x-compitable {
    padding-bottom: 34px;
}

.article-wrapper .footer.border::after {
    left: 0;
    right: 0;
}

.article-wrapper .footer-inner {
    display: flex;
    align-items: center;
    height: 11.594203vw;
    width: 100vw;
}
.article-wrapper .footer-inner .actions-list {
    width: 50%;
    padding: 0 4.10628vw;
}
.article-wrapper .footer-inner .action {
    height: 11.594203vw;
    font-size: 3.864734vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article-wrapper .footer-inner .action:active {
    opacity: .6;
}

.article-wrapper .footer-inner .action .icon {
    margin-right: 2.415459vw;
    margin-top: 1vw;
}