@import './default/index.scss';
@import './var.scss';

@font-face {
    font-family: PingFang;
    src: url('font/PingFang-Regular.otf');
}
@font-face {
    font-family: PingFang SC;
    src: url('font/PingFang-Regular.otf');
}
@font-face {
    font-family: PingFangSC-Medium;
    src: url('font/PingFangSC-Medium.otf');
}
@font-face {
    font-family: PingFangSC-Semibold;
    src: url('font/PingFangTC-Semibold.ttf');
}
@font-face {
    font-family: SFProDisplay-Bold;
    src: url('font/SF-Pro-Display-Bold.otf');
}
@font-face {
    font-family: SFProDisplay;
    src: url('font/SF-Pro-Display-Regular.otf');
}
@font-face {
    font-family: toppan;
    src: url('font/toppan.otf');
}
@font-face {
    font-family: ProximaNova;
    src: url('font/ProximaNova-Regular.otf');
}
@font-face {
    font-family: AlimamaShuHeiTi-Bold;
    src: url('font/AlimamaShuHeiTi-Bold.otf');
}

[v-cloak] {
    display: none;
}
.site-en {
    font-family: SFProDisplay;
}
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    width: 5px;
    border-radius: 6px;
    background: #d7d7d7;
}
.main {
    .view {
        // min-width: $min-width;
        min-height: calc(100vh - 90px);
        margin: 0 auto;
        background-color: #fff;
    }
    .content {
        width: 1512px;
        padding: 40px 0;
        margin: 0 auto;
    }
}
.l-title {
    position: relative;
    padding-bottom: 20px;
    font-size: 1rem;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #000;
    line-height: 1.6;
    border-bottom: 1px solid #ddd;
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 2px;
        background-color: #156ceb;
    }
}
.pagination {
    margin: 20px 0;
    text-align: center;

    button,
    .number {
        color: rgba(0, 0, 0, 0.65) !important;
        background-color: transparent !important;
        border: 1px solid #dcdee0 !important;
        border-radius: 4px !important;
    }

    button i {
        color: #333;
    }

    .active {
        color: #fff !important;
        background-color: $--color-primary !important;
    }
}
.el-menu--popup {
    min-width: 128px;
    margin-top: 0;
    text-align: center;
    .el-submenu__title,
    .el-menu-item,
    .menu-child {
        width: 220px !important;
        min-width: 0;
    }
    span {
        font-size: 0.8rem;
        color: #333;
    }
    .active > .el-submenu__title span,
    .active > span {
        color: #1583ff;
    }
}
.home-menu-popup {
    .el-menu {
        background-color: #fff !important;
    }
}
.iasf-menu-popup {
    & > .el-menu {
        &:before {
            content: '';
            position: absolute;
            top: -16px;
            left: 50px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-left-width: 6px;
            border-right-width: 6px;
            border-bottom-color: rgba(74, 79, 81, 0.71);
        }
        .el-menu:before {
            display: none;
        }
    }
    .el-menu {
        padding: 0;
        text-align: left;
        background-color: rgba(74, 79, 81, 0.71) !important;
        box-shadow: 0px 4px 8px 0px rgba(2, 39, 74, 0.27);
        border-radius: 4px;
        .el-menu-item {
            padding: 0 16px;
            &:first-child {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
            &:last-child {
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
            &:hover,
            &.is-active {
                background-color: #fff !important;
                span {
                    color: #057ff0;
                }
            }
        }

        .el-submenu__title,
        .el-menu-item,
        .menu-child {
            width: 160px !important;
            min-width: 0;
        }
        .menu-child {
            border-radius: 4px;
            overflow: hidden;
        }
        .el-submenu {
            // background-color: rgba(74, 79, 81, 0.71) !important;
            // box-shadow: 0px 4px 8px 0px rgba(2, 39, 74, 0.27);
            &:first-child {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
            &:last-child {
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
            .el-submenu__title {
                padding: 0 0 0 16px;
                background-color: transparent !important;
                &:hover,
                &.is-active {
                    background-color: #fff !important;
                    span {
                        color: #057ff0;
                    }
                }
            }
        }
    }
    span {
        font-size: 14px;
        color: #fff;
    }
}

.party {
    .l-title:after {
        background-color: $partyTheme;
    }
    .list .text:hover {
        color: $partyTheme !important;
    }
}