.header-section {
    width: 100%;
    height: .8rem;
    flex-shrink: 0;
    background: #000;
    box-shadow: 0 .04rem .1rem 0 rgba(0, 0, 0, .302);
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000
}

.header-section > .inner-nav {
    width: 12rem;
    min-width: 1200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header-section > .inner-nav .line {
    width: 1px;
    height: .3rem;
    background-color: rgba(204, 204, 204, .5);
    margin: 0 .2rem
}

.header-section > .inner-nav > .top-left {
    display: flex;
    align-items: center
}

.header-section > .inner-nav > .top-left > .logo {
    font-size: 0;
    width: auto;
    height: .3rem
}

.header-section > .inner-nav > .top-left > .game {
    height: .3rem;
    border-radius: .08rem;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 .16rem;
    position: relative;
    flex-shrink: 0
}

.header-section > .inner-nav > .top-left > .game > .game-btn {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header-section > .inner-nav > .top-left > .game > .game-btn > .icon-game {
    width: .2rem;
    height: .15rem;
    font-size: 0;
    margin-right: .1rem
}

.header-section > .inner-nav > .top-left > .game > .game-btn > span {
    font-size: .12rem;
    font-family: Helvetica Neue LT Pro-55 Roman, Helvetica Neue LT Pro;
    font-weight: 400;
    color: #fff
}

.header-section > .inner-nav > .top-left > .game > .game-list {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    padding: .1rem;
    background: rgba(0, 0, 0, .9);
    box-shadow: 0 .04rem .1rem 0 rgba(0, 0, 0, .4);
    border-radius: 0 0 .04rem .04rem;
    display: grid;
    gap: .1rem;
    grid-template-columns:repeat(3, 1fr);
    z-index: 10000
}

.header-section > .inner-nav > .top-left > .game > .game-list > .game-item {
    cursor: pointer;
    width: 2.98rem;
    height: .56rem;
    background: linear-gradient(270deg, #363e68 3%, rgba(53, 61, 102, .5) 100%);
    border-radius: .04rem;
    display: flex;
    align-items: center;
    padding: 0 .3rem;
    position: relative
}

.header-section > .inner-nav > .top-left > .game > .game-list > .game-item > .icon-game {
    width: .24rem;
    height: .24rem;
    font-size: 0;
    margin-right: .3rem
}

.header-section > .inner-nav > .top-left > .game > .game-list > .game-item > span {
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #fff
}

.header-section > .inner-nav > .top-left > .game > .game-list > .game-item.hot::after {
    width: .4rem;
    height: .4rem;
    content: "";
    background-image: url(../images/new-img/hot.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 0
}

.header-section > .inner-nav > .top-right {
    display: flex;
    align-items: center
}

.header-section > .inner-nav > .top-right > .user-oprate {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: .3rem;
    flex-shrink: 0
}

.header-section > .inner-nav > .top-right > .user-oprate > .icon-logo {
    width: .26rem;
    height: .26rem;
    font-size: 0
}

.header-section > .inner-nav > .top-right > .user-oprate > span {
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #ccc;
    line-height: .2rem;
    margin-left: .15rem
}

.header-section > .inner-nav > .top-right > .user-info {
    display: flex;
    align-items: center
}

.header-section > .inner-nav > .top-right > .user-info > .avatar {
    width: .24rem;
    height: .24rem;
    margin-right: .12rem
}

.header-section > .inner-nav > .top-right > .user-info > .username {
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #fff
}

.header-section > .inner-nav > .top-right > .language {
    position: relative
}

.header-section > .inner-nav > .top-right > .language > .curr-lang {
    display: flex;
    align-items: center;
    cursor: pointer
}

.header-section > .inner-nav > .top-right > .language > .curr-lang > span {
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #fff
}

.header-section > .inner-nav > .top-right > .language > .curr-lang > img {
    width: .2rem;
    height: .2rem;
    margin-left: .12rem
}

.header-section > .inner-nav > .top-right > .language > .language-list {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    background: rgba(0, 0, 0, .9);
    box-shadow: 0 .04rem .1rem 0 rgba(0, 0, 0, .4);
    border-radius: 0 0 .08rem .08rem;
    z-index: 10000
}

.header-section > .inner-nav > .top-right > .language > .language-list > .language-item {
    width: 1.2rem;
    height: .56rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #fff
}

.header-section > .inner-nav > .top-right > .language > .language-list > .language-item:last-child {
    border-bottom: none
}

.header-section > .inner-nav > .top-right > .language > .language-list > .language-item:hover {
    background: #353d65
}

.header-section > .inner-nav > .top-right > .currency {
    position: relative
}

.header-section > .inner-nav > .top-right > .currency > .curr-currency {
    display: flex;
    align-items: center;
    cursor: pointer
}

.header-section > .inner-nav > .top-right > .currency > .curr-currency > span {
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #fff
}

.header-section > .inner-nav > .top-right > .currency > .curr-currency > img {
    width: .2rem;
    height: .2rem;
    margin-left: .12rem
}

.header-section > .inner-nav > .top-right > .currency > .currency-list {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    background: rgba(0, 0, 0, .9);
    box-shadow: 0 .04rem .1rem 0 rgba(0, 0, 0, .4);
    border-radius: 0 0 .08rem .08rem;
    z-index: 10000
}

.header-section > .inner-nav > .top-right > .currency > .currency-list > .currency-item {
    width: 1.2rem;
    height: .56rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.header-section > .inner-nav > .top-right > .currency > .currency-list > .currency-item > img {
    width: .27rem;
    height: .18rem;
    margin-right: .12rem
}

.header-section > .inner-nav > .top-right > .currency > .currency-list > .currency-item > span {
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #fff
}

.header-section > .inner-nav > .top-right > .currency > .currency-list > .currency-item:last-child {
    border-bottom: none
}

.header-section > .inner-nav > .top-right > .currency > .currency-list > .currency-item:hover {
    background: #353d65
}

.header-section > .inner-nav > .top-right > .menu {
    cursor: pointer;
    margin-left: .2rem;
    position: relative;
    font-size: .15rem;
}

.header-section > .inner-nav > .top-right > .menu > img {
    width: .2rem;
    height: .2rem
}

.header-section > .inner-nav > .top-right > .menu > .menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + .25rem);
    background: rgba(0, 0, 0, .9);
    box-shadow: 0 .04rem .1rem 0 rgba(0, 0, 0, .4);
    border-radius: 0 0 .08rem .08rem;
    z-index: 10000
}

.header-section > .inner-nav > .top-right > .menu > .menu-list > .menu-item {
    width: 1.2rem;
    height: .56rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .14rem;
    font-family: Helvetica Neue-Bold, Helvetica Neue;
    font-weight: 700;
    color: #fff
}

.header-section > .inner-nav > .top-right > .menu > .menu-list > .menu-item:last-child {
    border-bottom: none
}

.header-section > .inner-nav > .top-right > .menu > .menu-list > .menu-item:hover {
    background: #353d65
}