/* 
################## 
800p 屏幕自适应 
##################
*/

@media (max-width: 800px) {

    /* 
    ################### 首页 ###################
     */
    .home_page {
        width: 95%;
        margin: 120px 0 0 35px;
        display: block;
    }

    .character_illu {
        display: none;
    }

    /* 
    首页文字
     */
    .home_page_text {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: start;

        /* background-color: #000; */
    }

    .logo_cover {
        display: none;
    }

    .typing {
        width: 60%;
        min-height: 50%;
        margin-left: 0px;
    }

    #typing-text {
        font-size: 5em;
    }

    .home_page_text_title {
        text-align: left;
        padding-bottom: 30px;
    }

    .home_page_text_p {
        width: 50%;
        margin: 10px;
        text-align: left;

    }

    .home_page_text button {
        margin: 90px 0 0 20px;
        align-self: flex-start;
    }

    /* 
    ################### 标签 ###################
    */
    .container {
        width: 100%;
    }

    .tab-container {
        top: 0px;
        height: 100%;
        padding-top: 150px;
        /* background-color: rgba(0, 0, 0, 0.4); */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    }

    /* 单个标签样式 */
    .tab {
        border-radius: 0;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0);
    }

    .tab:nth-child(1) {
        background-color: rgba(0, 0, 0, 0);
    }

    .tab:nth-child(2) {
        background-color: rgba(0, 0, 0, 0);
    }

    .tab:nth-child(3) {
        background-color: rgba(0, 0, 0, 0);
    }

    .tab:nth-child(4) {
        background-color: rgba(0, 0, 0, 0);
    }

    .tab:nth-child(5) {
        background-color: rgba(0, 0, 0, 0);
    }

    /* 弹出活动标签页 */
    .tab.active {
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        transform: translateX(0);
    }

    /* 抽屉 */
    .drawer {
        border-radius: 0;
        backdrop-filter: blur(10px);
    }

    #tab1 {
        background-color: rgba(0, 0, 0, 0);
    }

    #tab2 {
        background-color: rgba(0, 0, 0, 0);
    }

    #tab3 {
        background-color: rgba(0, 0, 0, 0);
    }

    #tab4 {
        background-color: rgba(0, 0, 0, 0);
    }

    #tab5 {
        background-color: rgba(0, 0, 0, 0);
    }

    .drawer-content {
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.8);
        flex-direction: column;
        padding: 24px 20px;
        gap: 24px;
        border-radius: 32px;

    }

    /* 
    ################### 关于页 ###################
    */

    #tab1 .drawer-content {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .character-left {
        display: none;
    }

    .character-portrait {
        max-width: 320px;
        /* 适中大小，依然居中 */
        width: 100%;
    }

    .portrait-thumbnails {
        gap: 14px;
    }

    .thumb-btn {
        width: 58px;
        height: 58px;
    }

    .character-right {
        width: 100%;
        flex: auto;
        padding: 8px 8px 8px 8px;
    }

    .character-info h2 {
        font-size: 1.9rem;
        padding-left: 16px;
    }

    .subtitle {
        padding-left: 24px;
    }

    .info-details {
        padding: 16px 20px;
        gap: 14px 22px;
    }

    .external-links {
        justify-content: flex-start;
        margin-top: 20px;
    }

    .link-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    /* 
    ################### 导航页 ###################
    */

    .nav-item {
        padding: 5px;
    }

    .nav-item i,
    .nav-item img {
        font-size: 24px;
    }
    .group-title {
        font-size: 10px;
    }
    /* 
    ################### 联系页 ###################
    */
    .contact-container {
        padding: 1rem;
    }

    .contact-title {
        font-size: 2rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-card {
        padding: 1.5rem;
    }
}


/* 
################## 
480p 屏幕自适应 
##################
*/

@media (max-width: 480px) {
    /* 
    ################## 关于页 ##################
    */
    .drawer-content {
        padding: 18px;
    }

    .character-left {
        padding: 16px 10px;
    }

    .thumb-btn {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .character-info h2 {
        font-size: 1.7rem;
    }

    .info-details {
        flex-direction: column;
        gap: 10px;
    }

    .link-btn {
        width: 100%;
        justify-content: center;
    }

    /* 
    ################## 当前页 ##################
    */
    .now-page {
        padding: 1rem;
    }

    .now-grid {
        gap: 1rem;
    }

    .now-card {
        padding: 1.25rem;
    }
    /* 
    ################### 联系页 ###################
    */
    .contact-title {
        font-size: 1.8rem;
    }

    .contact-subtitle {
        font-size: 1rem;
    }

    .contact-card {
        padding: 1rem;
    }
}