@font-face {
    font-family: 'Alimama_ShuHeiTi_Bold';
    src: url('AlimamaShuHeiTi-Bold.ttf');
}

@font-face {
    font-family: 'Alibaba_PuHuiTi_Regular';
    src: url('Alibaba-PuHuiTi-Regular.ttf');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;

    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;

    #toggle-checkbox-right-to-nav {
        display: none;
    }
}


.icon {
    fill: none;
}


.header {
    background-color: #161515;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: fixed;
    border-radius: 12px;
    padding: 16px 32px 18px 60px;
    margin: 0 auto;
    height: 68px;
    max-width: 1440px;
    top: 20px;
    left: 40px;
    right: 40px;

    color: #FFFFFF;

    .left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 30px;
        height: 100%;
        font-family: 'Alimama_ShuHeiTi_Bold';
        user-select: none;
        .logo {
            font-size: 34px;
            text-decoration: none;
            line-height: 34px;
        }
        .nav {
            display: flex;
            flex-direction: row;
            gap: 26px;
            height: 100%;
            transition: all 0.3s ease;
            #toggle-checkbox-nav-info,
            #toggle-checkbox-nav-community,
            #toggle-checkbox-nav-about {
                display: none;
            }
            .mt-line {
                display: none;
            }
            .title {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: 7px;
                height: 100%;
                text {
                    font-size: 22px;
                    text-decoration: none;
                    line-height: 22px;
                }
                .icons {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #414141;
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;

                    svg {
                        width: 12px;
                        height: 12px;
                        transition: all 0.3s ease;
                    }
                }
            }
            .nav-son {
                transition: all 0.3s ease;
                    .nav-sub {
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    flex-direction: column;
                    position: absolute;
                    border-radius: 6px;
                    gap: 8px;
                    height: 0;
                    overflow: hidden;
                    background-color: #202020;
                    transition: all 0.3s ease;
                    a {
                        font-size: 12px;
                        line-height: 12px;
                        color: #FFFFFF;
                        height: 0;
                        overflow: hidden;
                        text-decoration: none;
                        transition: all 0.3s ease;
                        font-family: 'Alibaba_PuHuiTi_Regular';
                    }
                }
            }
            .nav-info {
                .icon-to_top_one {
                    display: none;
                }
            }
            #toggle-checkbox-nav-info:checked ~ .nav-info {
                .icons {
                    .icon-to_bottom_one {
                        display: none;
                    }
                    .icon-to_top_one {
                        display: block;
                    }
                }
                .nav-sub {
                    height: auto;
                    padding: 10px;
                    a {
                        height: auto;
                    }
                }
            }
            .nav-community {
                .icon-to_top_one {
                    display: none;
                }
            }
            #toggle-checkbox-nav-community:checked ~ .nav-community {
                .icons {
                    .icon-to_bottom_one {
                        display: none;
                    }
                    .icon-to_top_one {
                        display: block;
                    }
                }
                .nav-sub {
                    height: auto;
                    padding: 10px;
                    a {
                        height: auto;
                    }
                }
            }
            .nav-about {
                .icon-to_top_one {
                    display: none;
                }
            }
            #toggle-checkbox-nav-about:checked ~ .nav-about {
                .icons {
                    .icon-to_bottom_one {
                        display: none;
                    }
                    .icon-to_top_one {
                        display: block;
                    }
                }
                .nav-sub {
                    height: auto;
                    padding: 10px;
                    a {
                        height: auto;
                    }
                }
            }
        }
    }
    .right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 40px;
        font-family: 'Alibaba-PuHuiTi_Regular';
        .search {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36px;
            width: auto;
            padding: 0 17px 0 24px;
            background-color: #414141;
            border-radius: 31px;

            .input {
                height: 14px;
                width: 240px;
                background-color: transparent;
                border: none;
                font-size: 16px;
                color: #FFFFFF4D;
            }

            .input:focus {
                border: none;
                outline: none;
            }

            .input::placeholder {
                border: none;
                font-family: 'Alibaba-PuHuiTi';
                font-size: 14px;
                line-height: 14px;
                color: #FFFFFF4D;
            }

            a {
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    width: 18px;
                    height: 18px;
                }
            }
        }
        .icons {
            display: none;
        }
        .login {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            width: 56px;
            height: 32px;
            color: #FFFFFF;
            font-size: 14px;
            line-height: 14px;
            user-select: none;
            background: linear-gradient(0deg, #F85606 -82.81%, #FA671E 118.75%);
        }
    }
}

.bigboard {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: 0 40px 0 40px;

    .left {
        display: flex;

        .bigboard-pic {
            img {
                width: min(100%, 650px);
            }
        }
    }
    .right {
        display: flex;
        flex-direction: column;
        user-select: none;
        .right-top {
            display: flex;
            flex-direction: column;
            gap: 17px;
            font-family: 'Alimama_ShuHeiTi_Bold';
            .bigboard-text {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                gap: 21px;

                .t-1 {
                    color: #FA671E;
                    font-size: 70px;
                    line-height: 70px;
                }

                .t-2 {
                    color: #161515;
                    font-size: 70px;
                    line-height: 70px;
                }
            }
            .bigboard-button {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                gap: 8px;
                height: 153px;
                .use-web {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 0 3px 0 12px;
                    height: 47px;
                    width: 184px;
                    border-radius: 0 10px 0 0;
                    border-bottom: 4px solid #FFB48F;
                    background-color: #2E2D2D;
                    .title {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex-direction: row;
                        margin: 6px 0 7px 0;
                        width: 100%;
                        .text {
                            display: flex;
                            flex-direction: column;
                            gap: 2px;
                            color: #FFFFFF;
                            .zn {
                                font-size: 20px;
                                line-height: 20px;
                                strong {
                                    font-size: 20px;
                                    line-height: 20px;
                                }
                            }
                            .en {
                                font-size: 8px;
                                line-height: 8px;
                                font-weight: 400;
                                letter-spacing: 2.99px;
                            }
                        }
                        .placeholder-box {
                            flex-grow: 1;
                            min-width: 0;
                            transition: all 0.3s ease;
                        }
                        svg {
                            width: 26px;
                            height: 26px;
                            transform-origin: center;
                            transition: all 0.3s ease;
                        }
                    }
                    .title:hover {
                        .text {
                            .zn {
                                strong {
                                    color: #ffb48f;
                                }
                            }
                            .en {
                                strong {
                                    color: #ffb48f;
                                }
                            }
                        }
                        .placeholder-box {
                            flex-grow: 0;
                        }
                        svg {
                            transform: rotate(-135deg);
                        }
                    }
                }
                #toggle-checkbox-bigboard-d-app {
                    display: none;
                }
                .d-app {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 0 3px 0 12px;
                    height: 47px;
                    width: 184px;
                    border-radius: 0 10px 0 0;
                    border-bottom: 4px solid #73D8F1;
                    background-color: #2E2D2D;
                    overflow: hidden;
                    transition: all 0.3s ease;
                    .title {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex-direction: row;
                        margin: 6px 0 7px 0;
                        width: 100%;
                        .text {
                            display: flex;
                            flex-direction: column;
                            gap: 2px;
                            color: #FFFFFF;
                            .zn {
                                font-size: 20px;
                                line-height: 20px;
                                strong {
                                    font-size: 20px;
                                    line-height: 20px;
                                }
                            }
                            .en {
                                font-size: 8px;
                                line-height: 8px;
                                font-weight: 400;
                                letter-spacing: 2.12px;
                            }
                        }
                        .placeholder-box {
                            flex-grow: 1;
                            min-width: 0;
                            transition: all 0.3s ease;
                        }
                        svg {
                            width: 26px;
                            height: 26px;
                            transform-origin: center;
                            transition: all 0.3s ease;
                        }
                    }
                    .title:hover {
                        .text {
                            .zn {
                                strong {
                                    color: #73d8f1;
                                }
                            }
                            .en {
                                strong {
                                    color: #73d8f1;
                                }
                            }
                        }
                        .placeholder-box {
                            flex-grow: 0;
                        }
                        svg {
                            transform: rotate(-135deg);
                        }
                    }
                    .line {
                        width: 160px;
                        height: 0.4px;
                        background-color: #FFFFFF33;
                    }
                    .expand-box {
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        overflow: hidden;
                        transition: all 0.3s ease;
                        .option {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            gap: 6px;
                            transition: all 0.2s ease;
                            .left-identification {
                                background-color: #FFFFFF;
                                height: 38px;
                                width: 0;
                                position: absolute; 
                            }
                            .text {
                                display: flex;
                                flex-direction: column;
                                gap: 2px;
                                .en {
                                    font-size: 16px;
                                    line-height: 16px;
                                    color: #FFFFFF;
                                }
                                .zn {
                                    font-size: 10px;
                                    line-height: 10px;
                                    font-family: 'Alibaba_PuHuiTi_Regular';
                                    color: #FFFFFF80;
                                }
                            }
                            svg {
                                margin-left: 2px;
                                width: 28px;
                                height: 28px;
                                transition: all 0.2s ease;
                            }
                        }
                        .option-1:hover {
                            .left-identification {
                                width: 4px;
                            }
                            svg {
                                margin-left: 6px;
                            }
                        }
                        .option-2:hover {
                            .left-identification {
                                width: 4px;
                            }
                            svg {
                                margin-left: 6px;
                            }
                        }
                    }
                    .line {
                        display: none;
                    }
                }
                #toggle-checkbox-bigboard-d-app:checked ~ .d-app {
                    height: auto;
                    .title {
                        .placeholder-box {
                            flex-grow: 1;
                        }
                        svg {
                            transform: rotate(90deg);
                        }
                    }
                    .line {
                        display: block;
                    }
                    .expand-box {
                        margin: 8px 0 18px 0;
                    }
                }
            }
        }

        .bigboard-info {
            display: flex;
            flex-direction: column;
            gap: 14px;
            font-family: 'Alibaba-PuHuiTi_Regular';

            .info-item {
                display: flex;
                align-items: center;
                flex-direction: row;

                .line-v {
                    height: 76px;
                    width: 1.4px;
                    margin-right: 11px;
                    background-color: #C4F600;
                }

                .text {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 6px;
                    margin-right: 57px;

                    .text-1 {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 4px;

                        .text-1-t {
                            font-size: 16px;
                            line-height: 18px;
                            color: #161515;
                        }

                        svg {
                            width: 12px;
                            height: 12px;
                        }
                    }

                    .text-2 {
                        font-size: 18px;
                        line-height: 18px;
                        color: #161515;
                    }

                    .line-h {
                        height: 1px;
                        width: 14px;
                        margin: 8px 0 2px 0;
                        background-color: #000000;
                    }

                    .text-3 {
                        font-size: 12px;
                        line-height: 12px;
                        color: #6E6E6E;
                    }
                }

                .qr {
                    width: 93px;
                    height: 94px;
                    border-radius: 2px;
                    border: 1px solid rgba(110, 110, 110, 0.53);
                }
            }

            .info-link {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 14px;

                .link-text {
                    font-size: 12px;
                    line-height: 12px;
                    color: #6E6E6E;
                }

                .link-icons {
                    display: flex;
                    flex-direction: row;
                    gap: 18px;

                    .qq-1 {
                        width: 21px;
                        height: 21px;
                    }

                    .icon-bilibili svg {
                        width: 42px;
                        height: 19px;
                    }
                }
            }
        }
    }
}

.footer {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-bottom: 18px;
    bottom: 0;
    width: 100%;
    font-family: 'Alibaba-PuHuiTi';
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.24px;
    color: #16151566;

    .footer-line {
        width: 96%;
        height: 0.4px;
        margin-bottom: 14px;
        background-color: #E5E7E9;
    }

    .footer-top {
        display: flex;
        align-items: center;
        flex-direction: row;

        a {
            color: #16151566;
            text-decoration: none;
        }
    }
    .footer-bottom {
        display: flex;
        align-items: center;
        flex-direction: row;

        strong {
            font-weight: 400;
            color: #16151599;
        }
    }
    .footer-bottom-b {
        display: flex;
        align-items: center;
        flex-direction: row;
    }
    .footer-bottom-b {
        display: none;
    }
}

@media (min-width: 1134px) {
    .header {
        .left {
            .nav {
                .nav-info:hover {
                    .icons {
                        .icon-to_bottom_one {
                            transform: rotate(-90deg);
                        }
                    }
                }
                .nav-community:hover {
                    .icons {
                        .icon-to_bottom_one {
                            transform: rotate(-90deg);
                        }
                    }
                }
                .nav-about:hover {
                    .icons {
                        .icon-to_bottom_one {
                            transform: rotate(-90deg);
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1134px) {
    .header {
        background-color: #161515E5;
        backdrop-filter: blur(6.1px);
        transition: all 0.3s ease;
        .left {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            .nav {
                height: 0;
                overflow: hidden;
                gap: 20px;
                .title {
                    display: flex;
                    justify-content: space-between;
                    height: auto;
                    margin-right: 7px;
                }
                .line {
                    margin: 12px 0 0 0;
                    width: clamp(160px, 20vw, 210px);
                    height: 0.4px;
                    background-color: #FFFFFF33;
                }
                .nav-sub {
                    position: unset !important;
                    gap: 18px !important;
                    padding: 0 !important;
                    background-color: unset !important;
                    a {
                        font-size: 14px;
                        line-height: 14px;
                    }
                    a::before {
                        content: "· ";
                    }
                }
            }
        }
        .right {
            position: absolute;
            gap: 18px;
            right: 32px;

            .search {
                width: 36px;
                padding: 0;
                .input {
                    display: none;
                }
            }

            .icons {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #414141;
                width: 36px;
                height: 36px;
                margin-right: 12px;
                border-radius: 50%;
                
                .icon-system {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 18px;
                    height: 18px;
                }
                
                .icon-close-small {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 30px;
                    height: 30px;
                    display: none;
                }
            }
        } 
    }
    #toggle-checkbox-right-to-nav:checked ~ .header {
        height: auto;
        .left {
            .nav {
                /* display: flex; */
                height: auto;
                #toggle-checkbox-nav-info:checked ~ .nav-info {
                    .nav-sub {
                        margin: 14px 0 18px 0;
                    }
                }
                #toggle-checkbox-nav-community:checked ~ .nav-community {
                    .nav-sub {
                        margin: 14px 0 18px 0;
                    }
                }
                #toggle-checkbox-nav-about:checked ~ .nav-about {
                    .nav-sub {
                        margin: 14px 0 18px 0;
                    }
                }
            }
        }
        .right {
            .icons {
                .icon-system {
                    display: none;
                }
                .icon-close-small {
                    display: block;
                }
            }
        }
    }
    .bigboard {
        .left {

        }
        .right {

        }
    }
}

@media (max-width: 961px) {
    .bigboard {
        .right {
            .right-top {
                .bigboard-text {
                    .t-1, .t-2 {
                        font-size: 60px;
                        line-height: 60px;
                    }
                }
            }
        }
    }
}

@media (max-width: 782px) {
    .header {
        padding-left: 32px;
        .left {
            .nav {
                .line {
                    width: clamp(100px, 20vw, 160px);
                }
            }
        }
    }
}

@media (max-width: 647px) {
    .header {
        
    }
    
    .bigboard {
        flex-direction: column;
        .left {
            .bigboard-pic {
                img {
                    width: 80vw;
                    height: auto;
                    /* aspect-ratio: 192/139; */
                }
            }
        }
        .right {
            .right-top {
                gap: 36px;
                .bigboard-text {
                    flex-direction: row;
                    justify-content: center;
                    gap: 0px;
                    .t-1 {
                        font-size: 28px;
                        line-height: 28px;
                    }
                    .t-2 {
                        font-size: 28px;
                        line-height: 28px;
                    }
                }
                .bigboard-button {
                    flex-direction: column;
                    align-items: center;
                    gap: 15px;
                    .use-web {
                        width: 234px;
                        border-radius: 0 9px 0 0;
                    }
                    .d-app {
                        width: 234px;
                        border-radius: 0 9px 0 0;
                        .title {
                            pointer-events: none;
                        }
                    }
                }
            }
            .bigboard-info {
                display: none;
            }
        }
    }
    .footer {
        .footer-bottom {
            .f-b-1, .f-b-2, .f-b-4, .f-b-5 {
                display: none;
            }
        }
        .footer-bottom-b {
            display: flex;
        }
    }
}

@media (max-width: 469px) {
    .header {
        padding: 17px 22px 17px 18px;
        height: 68px !important;
        top: 18px;
        left: 18px;
        right: 18px;
        .left {
            .nav {
                position: absolute;
                flex-direction: column;
                align-items: flex-start;
                gap: 0px;
                width: 100%;
                left: 0;
                top: 76px;
                border-radius: 12px;
                background-color: #161515E5;
                overflow: hidden;
                backdrop-filter: blur(6.1px);
                .title {
                    text {
                        color: #FFFFFF;
                    }
                }
                .line {
                    display: none;
                }
                .mt-line {
                    display: block;
                    width: 100%;
                    height: 0.4px;
                    margin: 16px 0 16px 0;
                    background-color: #FFFFFF33;
                }
            }
        }
        .right {
            .search {
                display: none;
            }
            .icons {
                margin-right: 0;
            }
            .login {
                display: none;
            }
        }
    }
    #toggle-checkbox-right-to-nav:checked ~ .header {
        .left {
            .nav {
                height: auto;
                padding: 18px 20px 24px 20px;
                #toggle-checkbox-nav-info:checked ~ .nav-info {
                    .nav-sub {
                        margin: 20px 0 0 0;
                    }
                }
                #toggle-checkbox-nav-community:checked ~ .nav-community {
                    .nav-sub {
                        margin: 20px 0 0 0;
                    }
                }
                #toggle-checkbox-nav-about:checked ~ .nav-about {
                    .nav-sub {
                        margin: 20px 0 0 0;
                    }
                }
            }
        }
    }

    .bigboard {
        padding: 0 18px 0 18px;
    }
}