.box_header {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 56px;
    justify-content: space-between;
    z-index: 1;
    background: #503f32;
    text-transform: uppercase;
}

.btn_home {
    display: inline-block;
    width: 48px;
    height: 100%;
    padding: 16px 12px;
    flex: 0 0 48px;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn_home.off {
    pointer-events: none;
}

.btn_home svg {
    width: 24px;
    height: 24px;
    fill: rgba(255, 255, 255, 0.64);
}

.btn_home.on svg {
    fill: #debb69;
}

.btn_home.off svg {
    fill: rgba(255, 255, 255, 0.4);
}

.btn_acc {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    background-image: url('../images/hg/icon_account.svg');
    background-repeat: no-repeat;
    background-position: center;
    transition: background 0.3s ease;
}

.dot_green {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3DB893;
}

.dot_red {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #e53c50;
}

.btn_acc .dot_green,
.btn_acc .dot_red {
    position: absolute;
    top: 16px;
    right: 12px;
    display: none;
}

.btn_acc .dot_green.on,
.btn_acc .dot_red.on {
    display: block;
}

.num_betslip.on {
    display: flex;
}

.box_scroll.header_scroll {
    height: 56px;
}

.header_scroll .box_slide {
    display: inline-block;
    width: 100%;
    height: 72px;
    padding: 0 4px;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.shadow_l:before {
    left: 48px;
    background-image: linear-gradient(to left, rgba(72, 57, 45, 0), #48392d);
}

.shadow_r:after {
    right: 56px;
    background-image: linear-gradient(to right, rgba(72, 57, 45, 0), #48392d);
}

.btn_header {
    position: relative;
    display: inline-block;
    height: 100%;
    line-height: 56px;
    padding: 0 12px;
    vertical-align: top;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.64);
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn_header.on {
    color: #debb69;
}

.btn_header.off {
    color: rgba(255, 255, 255, 0.24);
    pointer-events: none;
}

.btn_header.mygame_off {
    color: rgba(255, 255, 255, 0.24);
}

.btn_header.on_ani,
.btn_header.off_ani {
    color: #fff;
}

.btn_header .num_betslip {
    top: 8px;
    left: calc(100% - 12px);
    margin-left: 2px;
}

.btn_header .text_new {
    position: absolute;
    top: 2.5px;
    left: 12px;
    display: block;
    line-height: 16px;
    font-size: 12px;
    font-weight: 400;
    color: #FF6767;
}

.btn_header.off .text_new,
.btn_header.mygame_off .text_new {
    color: rgba(255, 103, 103, 0.375);
}

.btn_header .dot_green {
    position: absolute;
    top: -4px;
    right: 8px;
    transition: top 0.3s cubic-bezier(0.68, -0.55, 0.265, 1);
}

.btn_header .dot_green.on {
    top: 16px;
}

.btn_header .ani_mygame {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    opacity: 0;
}

.btn_header.on_ani .on_wave,
.btn_header.on_ani .on_wave2,
.btn_header.off_ani .off_wave {
    opacity: 1;
}

.on_ani .on_wave {
    animation: circle_ani 500ms ease both;
}

.on_ani .on_wave2 {
    animation: circle_ani 800ms 200ms ease both;
}

.off_ani .off_wave {
    animation: circle_ani 500ms ease both;
}

@keyframes circle_ani {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}


.btn_header span {
    display: inline-block;
    vertical-align: middle;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.btn_special {
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-transform: uppercase;
}


/* PC hover effect */
@media (pointer: fine) and (max-resolution: 2dppx), screen and (pointer: fine) and (-webkit-max-device-pixel-ratio: 2),
(-moz-touch-enabled: 0), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box_scroll.header_scroll .btn_go_l,
    .box_scroll.header_scroll .btn_go_r {
        background: #685241;
    }

    .box_scroll.header_scroll .btn_go_l svg,
    .box_scroll.header_scroll .btn_go_r svg {
        fill: rgba(255, 255, 255, 0.72);
    }

    .box_scroll.header_scroll .btn_go_l:hover,
    .box_scroll.header_scroll .btn_go_r:hover {
        background: #9d7c62;
    }

    .box_scroll.header_scroll .btn_go_l:active,
    .box_scroll.header_scroll .btn_go_r:active {
        background: #352a21;
    }

    .btn_home:hover,
    .btn_acc:hover {
        background-color: #5d4e42;
    }

    .btn_header:not(.mygame_off):hover {
        color: #debb69;
    }

    .btn_header:not(.mygame_off):hover .icon_SP {
        background: url('../images/hg/icon_sp_go.svg') no-repeat center center;
    }
}


/* All active effect */
.btn_home:active,
.btn_acc:active {
    background-color: #3c2f26;
}

.btn_header:not(.mygame_off):active {
    color: #debb69;
    background: #3c2f26;
}

.btn_header:not(.mygame_off):active .icon_SP {
    background: url('../images/hg/icon_sp_go.svg') no-repeat center center;
}

.nav_header {
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex: none;
}

.time_header {
    margin: 0 20px 0 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
}

.money_header {
    height: 100%;
    line-height: 56px;
    margin: 0 8px 0 16px;
    font-size: 14px;
    color: #debb69;
    cursor: pointer;
}

@media screen and (min-width: 1024px) {
    .nav_header {
        display: flex;
    }
}

@media screen and (max-width: 1279px) {
    .time_header {
        display: none;
    }
}