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

li {
    list-style: none;
}

html {
    /* font-size: 100px; */
}

body {
    /* font-size: 0.14rem; */
    width: 100vw;
    height: 100vh;
}

.page {
    width: 100%;
    height: 100vh;
    max-width: 600px;
    margin: 0 auto;
    background: #333;
    box-shadow: 0 0 0 1px rgba(136, 136, 136, .12);
    margin-right: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 顶部 ================================================== 0 */
header {
    height: min(9.067vw, 54.4px);
    background-color: #1a1a18;
    box-shadow: 0 0 min(3.2vw, 19.2px) min(0.267vw, 1.6px) #000;
    border-radius: min(1.333vw, 8px);
    border: min(0.267vw, 1.6px) solid #000;
    display: flex;
    padding: min(1.067vw, 6.4px) min(2.133vw, 12.8px);
    align-items: center;
    justify-content: space-between;
}

header .timer {
    display: flex;
    padding: min(1.067vw, 6.4px);
    width: min(21.333vw, 128px);
    background-color: #282d31;
    border-radius: min(1.333vw, 8px);
    border: min(0.267vw, 1.6px) solid #000;
    justify-content: space-between !important;
    align-items: center;
    z-index: 996;
    color: #fff;
}

header .timer .brazil {
    margin-left: min(1.333vw, 8px);
    font-size: min(2.667vw, 16px);
    font-weight: 700;
    white-space: nowrap;
}

header .btns {
    display: flex;
    gap: 5.333vw;
}

header .btns .download_btn {
    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

header .btns .close_btn {
    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

/* 顶部 ================================================== 1 */

main {
    flex: 1;
    overflow-y: auto;
}

main::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
}

/* 导航项 ================================================== 0 */
.nav_list {
    display: flex;
    justify-content: space-around;
    padding: min(4.267vw, 25.6px) min(3.2vw, 19.2px);
}

.nav_list .nav_item {
    width: 18%;
    max-width: min(18.667vw, 112px);
    background: #202020;
    margin-right: 2.5%;
    cursor: pointer;
    border: min(0.267vw, 1.6px) solid #111;
    border-top: min(0.533vw, 3.2px) solid #454749;
    border-radius: min(2.133vw, 12.8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
}

/* 导航项 ================================================== 1 */

/* 搜索框 ================================================== 0 */
.search_box {
    position: relative;
    background: #1c1c1c;
    width: calc(100% - min(3.2vw, 19.2px) * 2);
    height: min(8.533vw, 51.2px);
    margin: 0 min(3.2vw, 19.2px);
    border-radius: min(1.6vw, 9.6px);
    border-bottom: min(0.533vw, 3.2px) solid #444;
    display: flex;
    align-items: center;
}

.search_box .search_icon {
    width: min(4.8vw, 28.8px);
    height: min(4.8vw, 28.8px);
    margin: 0 min(2.133vw, 12.8px);
}

.search_box input {
    flex: 1;
    background: transparent;
    height: 100%;
    font-size: min(3.733vw, 22.4px);
    color: #fff;
    outline: none;
    border: none;
}

/* 搜索框 ================================================== 1 */

/* 下拉框 ================================================== 0 */
.select_line {
    padding: min(4.267vw, 25.6px) min(3.2vw, 19.2px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.select_box {
    padding: min(1.067vw, 6.4px) min(3.2vw, 19.2px);
    background: #1b1b1b;
    box-shadow: 0 min(.533vw, 3.2px) min(.533vw, 3.2px) inset #070707 !important;
    border-radius: min(1.067vw, 6.4px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.select_box input {
    color: #606266;
    line-height: min(6.4vw, 38.4px);
    min-height: min(6.533vw, 51.2px);
    background: #1b1b1b;
    pointer-events: none;
}

.select_box.open input {
    color: #a9abb1;
}

.select_box .select_icon {
    width: 1em;
    height: 1em;
    color: #a9abb1;
    transition: all 0.3s linear;
}

.select_box.open .select_icon {
    transform: rotate(180deg);
}

.options_box {
    width: 46vw;
    background: #fff;
    font-size: 4vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + 10px));
    border-radius: 4px;
    z-index: 999;
}

.options_box::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    width: 0;
    height: 0;
    border: 2vw solid transparent;
    border-top: none;
    border-bottom-color: #fff;
}

.options_box .options_item {
    color: rgba(0, 0, 0, .6);
    padding: 2vw 5vw;
}

.options_box .options_item.active {
    color: #5a9cf8;
}

/* 下拉框 ================================================== 1 */

/* 游戏列表 ================================================== 0 */
.game_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.game_list .game_item {
    position: relative;
    width: 50%;
    padding: min(3.2vw, 19.2px);
    transition: .2s;
    display: block;
    box-sizing: border-box;
}

.game_list .game_item .game_top {
    width: 100%;
    position: relative;
}

.game_list .game_item .game_top .game_img {
    width: 100%;
}

.game_list .game_item .game_top .game_icon {
    position: absolute;
    right: min(1.333vw, 8px);
    bottom: min(2.667vw, 16px);
    z-index: 10;
    width: min(4.267vw, 25.6px);
    height: min(5.333vw, 32px);
}

.game_content {
    padding: min(1.333vw, 8px) min(1.333vw, 8px) 0;
    box-sizing: border-box;
    gap: min(2.133vw, 12.8px);
    display: flex;
    flex-direction: column;
}

.game_content .schedule_box {
    height: 16px;
    font-size: min(2.667vw, 16px);
    font-weight: 800;
    color: #070707;
    background: #ebeef5;
    padding: 0 min(1.067vw, 6.4px);
    border-radius: min(1.067vw, 6.4px);
    position: relative;
    overflow: hidden;
}

.game_content .schedule_val {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.game_content .schedule_box .schedule {
    width: 0%;
    height: 100%;
    border-radius: min(1.067vw, 6.4px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    transition: all .5s linear;
}

.game_content .schedule_box .schedule.green {
    background: rgb(92, 184, 122);
}

.game_content .schedule_box .schedule.blue {
    background-color: rgb(98, 149, 191);
}

.game_content .schedule_box .schedule.grey {
    background-color: rgb(147, 147, 147);
}

.game_content .schedule_box .schedule_bg {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 0, transparent 50%, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .1) 75%, transparent 0, transparent);
    background-size: 1.25em 1.25em;
    animation: striped-flow 20s linear infinite;
}

@keyframes striped-flow {
    0% {
        background-position: -100%;
    }

    100% {
        background-position: 100%;
    }
}

.game_foot {
    text-align: center;
    margin-top: min(2.667vw, 16px);
}

.game_foot .game_score {
    height: min(8.533vw, 51.2px);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.game_foot .game_score .star_icon {
    font-size: min(4.8vw, 28.8px);
    width: 1em;
    height: 1em;
    color: #f7ba2a;
}

.game_foot .game_score .countdown {
    width: min(5.867vw, 35.2px);
    height: min(5.867vw, 35.2px);
    line-height: min(5.867vw, 35.2px);
    font-size: min(3.2vw, 19.2px);
    color: #eef302;
    border: min(.267vw, 1.6px) solid #08f806;
    border-radius: min(26.667vw, 160px);
}

.game_foot .game_name {
    font-size: min(3.2vw, 19.2px);
    position: relative;
    top: max(-1.067vw, -6.4px);
    margin: 0;
    color: #fff;
}

/* 游戏列表 ================================================== 1 */

/* 公告页面 ================================================== 0 */
.bulletin_page {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: min(2.667vw, 16px) min(3.2vw, 19.2px) min(8vw, 48px) !important;
}

.bulletin_content {
    border: min(.267vw, 1.6px) solid #414141;
    border-radius: min(2.667vw, 16px);
    margin-top: min(2.667vw, 16px);
    margin-bottom: min(15.2vw, 91.2px);
}

.bulletin_item {
    width: 100%;
    font-size: min(3.2vw, 19.2px);
    color: #fff;
    padding: min(2.667vw, 16px) min(2.667vw, 16px) min(5.333vw, 32px);
    cursor: pointer;
    list-style: none;
}

.bulletin_img {
    width: 100%;
    min-height: min(13.333vw, 80px);
    border-radius: min(2.133vw, 12.8px);
    padding-bottom: min(1.333vw, 8px);
    vertical-align: middle;
}

.bulletin_title {
    margin: 4vw 0;
}

.bulletin_describe {
    padding: min(1.333vw, 8px) 0;
    margin: 3vw 0;
}

.bulletin_btn {
    font-size: min(3.2vw, 19.2px);
    color: #f3d009;
}

/* 公告页面 ================================================== 1 */

.mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}