.page-header{
    height: calc(480 * var(--rpx));
}

.page-header .wrapper{
    height: calc(400 * var(--rpx));
}

.page-header .page-header-back::before{
    background: linear-gradient(to top, rgba(28, 28, 28, 1) 5%,rgba(28, 28, 28, 0) 80%);
}

.page-inner-nav-placeholder{
    position: relative;
    margin-top: calc(-80 * var(--rpx));
    z-index: 300;
}

.page-inner-nav{
    border-top-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.page-inner-nav .inner-nav-link.active{
    color: #fff;
    border-top-color: var(--theme-crimson);
}
.page-inner-nav .inner-nav-link{
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
}
.page-inner-nav .inner-nav-link:hover{
    color: #fff;
}

.page-inner-nav.fixed{
    color: #000;
}

.page-inner-nav.fixed .inner-nav-link.active{
    color: var(--theme-crimson);
    border-top-color: var(--theme-crimson);
}

.page-inner-nav.fixed .inner-nav-link{
    color: rgba(0, 0, 0, .7);
}
.page-inner-nav.fixed .inner-nav-link:hover{
    color: var(--theme-crimson);
}

section.docs{
    background-color: #F6F6F6;
    padding-top: calc(72 * var(--rpx));
    padding-bottom: calc(160 * var(--rpx-50));
}

.docs-split{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.docs-split .left{
    width: calc(320 * var(--rpx));
}

.docs-split .right{
    width: clamp(666.66px, calc(55.5552vw + 133.33px), 1200px);
}

.left .lineup{
    position: relative;
    cursor: pointer;
    height: 2em;
    display: flex;
    align-items: center;
    margin-bottom: .5em;
    padding-bottom: calc(2 * var(--rpx));
    color: rgba(0, 0, 0, .7);
    transition: color .2s ;
}

.left .lineup::before{
    content: "";
    position: absolute;
    width: 100%;
    height: calc(2 * var(--rpx));
    bottom: 0;
    left: 0;
    background: #000;
    transition: .2s;
    transform: scaleX(.5);
    opacity: 0;
    transform-origin: left;
}

.left .lineup.active{
    color: #000;
}

.left .lineup:hover{
    color: #000;
    transition: color .4s;
}

.left .lineup.active::before{
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
    opacity: 1;
    transform: none;
}

.left .lineup::after{
    content: "";
    width: calc(14em / 16);
    height: calc(12em / 16);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateX(-50%);
    opacity: 0;
    transition: .2s;
    background: url("../images/icon_arr_right.svg") center/contain no-repeat;
    filter: url(#crimson-overlay);
}

.left .lineup.active::after{
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
    opacity: 1;
    transform: none;
}

@media (min-width: 829px) {
    .left .lineup:hover::after{
        transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
        opacity: 1;
        transform: none;
    }
}

.doc-file{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: calc(24 * var(--rpx)) calc(60 * var(--rpx));
    margin-bottom: calc(10 * var(--rpx));
}

.doc-file::before{
    content: "";
    position: absolute;
    width: calc(10 * var(--rpx));
    height: 100%;
    top: 0;
    left: 0;
    background: var(--theme-crimson);
    transform: scaleX(0);
    transition: .2s;
    transform-origin: left;
}

.doc-file:hover::before{
    transform: none;
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
}

.doc-file .line1{
    position: relative;
    color: var(--theme-crimson);
    font-size: calc(24 * var(--rpx));
    margin-bottom: calc(18 * var(--rpx));
}

.doc-file .line1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: -1em;
    width: .6em;
    height: .6em;
    background: url("../images/icon_angle_right_white.svg") center/contain no-repeat;
    filter: url(#crimson-overlay);
}

.download-hint{
    position: absolute;
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rpx));
    height: 100%;
    margin: auto;
    top: 0;
    right: calc(40 * var(--rpx));
    color: rgba(0, 0, 0, .5);
}

.hint-icon{
    width: calc(40 * var(--rpx-75));
    height: calc(40 * var(--rpx-75));
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: #f2f2f2;
    position: relative;
    transition: .2s;
}

.hint-icon::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/icon_download.svg") center/contain no-repeat;
}

.doc-file:hover .hint-icon{
    background-color: var(--theme-crimson);
    transition: .4s;
}

.doc-file:hover .hint-icon::after{
    filter: url(#white-overlay);
}

.doc-file .line2{
    font-size: calc(14em / 16);
    color: #0008;
    display: flex;
    gap: calc(40em / 14);
}

.docs .btn-ctn{
    margin-top: calc(50 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * var(--rpx));
    font-size: calc(14em / 16);
}

.docs .btn-more{
    width: calc(240 * var(--rpx));
}


.docs .btn-more::after{
    content: "";
    width: calc(12em / 16);
    height: calc(14em / 16);
    position: absolute;
    top: 0;
    bottom: calc(2em / 16);
    margin: auto;
    right: calc(24em / 16);
    background: url("../images/icon_arr_down.svg") center/contain no-repeat;
}

.docs .btn-more:hover::after{
    filter: url(#white-overlay);
}

section.inquiries{
    margin-top: 0;
    padding-top: calc(100 * var(--rpx-50));
    padding-bottom: calc(160 * var(--rpx-50));
}

.no-content-hint{
    font-size: calc(18em / 16);
    color: rgba(0, 0, 0, .7);
}

@media (max-width: 828px) {
    .docs-split{
        display: flex;
        flex-direction: column;
    }

    .docs-split .left{
        width: 100%;
        overflow: auto;
        display: flex;
        gap: calc(10 * var(--rpx));
        padding-bottom: calc(4 * var(--rpx));
    }

    .docs-split .lineup{
        border-radius: 1em;
        background-color: rgba(0, 0, 0, .1);
        white-space: nowrap;
        flex: 0 0 auto;
        padding-left: .75em;
        padding-right: .75em;
    }
    .left .lineup::after{
        right: .5em;
        transform: rotate(90deg) translateX(-50%);
    }
    .left .lineup::before{
        content: none;
    }
    .left .lineup.active{
        color: #fff;
        background-color: var(--theme-crimson);
        padding-right: 2em;
    }

    .left .lineup.active::after{
        transform: rotate(90deg);
        filter: url(#white-overlay);
    }
 
    .docs-split .right{
        width: 100%; 
        margin-top: calc(20 * var(--rpx));
    }

    .doc-file{
        padding: calc(40 * var(--rpx)) calc(60 * var(--rpx));
        margin-bottom: calc(20 * var(--rpx));
    }

    .doc-file .line1{
        font-size: 1.25em;
    }
    .doc-file .line2{
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .hint-icon{
        width: calc(80 * var(--rpx));
        height: calc(80 * var(--rpx));
    }

    .page-inner-nav-placeholder{
        display: none;
    }
    
    .docs-dropdown-select{
        display: block;
        margin-top: calc(30 * var(--rpx));
        margin-bottom: calc(30 * var(--rpx));
    }
    
    /* 调整 dropdown 样式以适应浅灰色背景 */
    .docs-dropdown-select.mobile-dropdown-ctn {
        background-color: #fff;
        color: #000;
        border: 1px solid rgba(0, 0, 0, .1);
        height: calc(80 * var(--rpx));
        border-radius: calc(40 * var(--rpx));
    }

    .docs .section-title{
        display: none;
    }
    
    .docs-dropdown-select.mobile-dropdown-ctn:hover {
        background-color: #f9f9f9;
    }
    
    .docs-dropdown-select.mobile-dropdown-ctn.active {
        background-color: #fff;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .docs-dropdown-select .mobile-dropdown-current {
        color: #000;
        min-height: calc(80 * var(--rpx));
        line-height: calc(80 * var(--rpx));
    }
    
    .docs-dropdown-select.mobile-dropdown-ctn.active .mobile-dropdown-current {
        color: #000;
    }
    
    .docs-dropdown-select .mobile-dropdown-options {
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, .1);
        border-top: none;
        top: 100%;
        bottom: auto;
        border-radius: 0 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
        box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    }
    
    .docs-dropdown-select .mobile-dropdown-option {
        color: #000;
        padding: calc(18 * var(--rpx)) calc(36 * var(--rpx));
        line-height: 1.5;
    }
    
    .docs-dropdown-select .mobile-dropdown-option:hover {
        background-color: rgba(0, 0, 0, .05);
    }
    
    /* 调整箭头图标颜色和方向 */
    .docs-dropdown-select.mobile-dropdown-ctn::after {
        filter: none;
        opacity: 0.6;
        transform: rotate(0deg);
    }
    
    .docs-dropdown-select.mobile-dropdown-ctn.active::after {
        transform: rotate(180deg);
    }
    
    .no-content-hint{
        text-align: center;
        margin-top: calc(40 * var(--rpx));
    }

    .docs .btn-more{
        width: calc(320 * var(--rpx));
        padding-right: calc(42em / 14);
    }
}

/* 桌面端隐藏 dropdown-select */
@media (min-width: 829px) {
    .docs-dropdown-select{
        display: none;
    }
}