#header-wrap {
    width: 100%;
    /* height: 120px; */
    background-size: cover;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    box-shadow: 0 4px 18px 0 rgba(0,0,0,.1);
    /* margin-bottom: 70px; */
}
#header-wrap .header-content {
    font-size: 12px;
    display: block;
    width: 100%;
    margin: auto;
    position: relative;
    color: #fff;
    background-color: #2a1e17;
}
#header-wrap .header-content .header-tip {
    background: #271813;
    color: #fff;
}
#header-wrap .header-content .header-tip-wrapper {
    height: 37px;
    /* line-height: 25px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1100px;
    margin: 0 auto;
}
#header-wrap .header-content .header-tip-wrapper .link-container ul{
    display: flex;
}
#header-wrap .header-content .header-tip-wrapper .link-container li a.flashRed {
    animation: flashRed 1s infinite;
}
#header-wrap .header-content .header-tip-wrapper .link-container li a.flashYellow {
    animation: flashYellow 1s infinite;
}
#header-wrap .header-content .header-tip-wrapper .link-container li a.flashPeach {
    animation: flashPeach 1s infinite;
}
#header-wrap .header-content .header-tip-wrapper .link-container li a.flashBlue {
    animation: flashBlue 1s infinite;
}
#header-wrap .header-content .header-tip-wrapper .link-container li:not(:first-child):not(:nth-child(2))::before {
    content: "|";
    color: #87543b;
    display: inline-block;
    margin: 0 5px;

}
@keyframes flashRed 
{
    0% {
        color: #fff;
    }
    50% {
        color: red;
    }
}
@keyframes flashYellow 
{
    0% {
        color: #fff;
    }
    50% {
        color: #fffc00;
    }
}
@keyframes flashPeach 
{
    0% {
        color: #fff;
    }
    50% {
        color: #ff00d8;
    }
}
@keyframes flashBlue 
{
    0% {
        color: #fff;
    }
    50% {
        color: #3565ff;
    }
}
#header-wrap .header-content .header-tip-wrapper .amt_user {
    flex: 1;
    display: none;
}
#header-wrap .header-content .header-tip-wrapper .time-container {
    margin-right: 30px;

    #clock{
        color: #b86c30;
    }
}
#header-wrap .header-content .header-tip-wrapper .time-container img {
    width:12px;
    margin-right: 5px;
    margin-bottom: 3px;
    vertical-align: middle;
    filter: brightness(0);
}
#header-wrap .header-content .header-tip-wrapper .lang-container {
    display:flex;
    align-items:center;
    display: none;
}
#header-wrap .header-content .header-tip-wrapper .lang-container img {
    margin-right: 5px;
}
#header-wrap .header-content .header-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 107px;
    width:1100px;
    margin: 0 auto;
    background-color: #2a1e17;

    .left-content{
        flex: 1;

        .main-nav{
            display: flex;
            gap: 10px;
            margin-left: 100px;

            .nav {
                position: relative;

                a{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 60px;
                    gap: 5px;
                }
            }
        }
    }
}
#header-wrap .left-content .main-nav{
    justify-content: flex-end;
}
#header-wrap .header-content .header-mid .logo {
    width: 254px;
    height: 41px;
}
#header-wrap .account-fullwidth {
    background: #160b07;
}
#header-wrap .account-wrap {
    position: relative;
    width: 1100px;
    margin: 0 auto;
}
#header-wrap #account-box{
    width: 100%;
    margin: 0;
    background-color: #160b07;

    &.home{
        background: url('/image/web/header/loginbg.png');
        height: 310px;
        width: 232px;
        /* left: calc(2% + 150px); */
        font-size: 14px;
        position: absolute;
        background-size: 100%;
        margin-top: 5%;

        .wrapper{
            margin-top: 60px;
            color: #fff;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            #LoginForm{
                padding-top: 8px;
                width: 184px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                gap: 8px;

                input{
                    height: 33px;
                    width: 184px;
                    color: #d2d2cc;
                    box-sizing: border-box;
                    background: rgba(0, 0, 0, .1);
                    border-radius: 2px;
                    cursor: text;
                    border: 1px solid #cba052;
                    padding-left: 25px;
                    font-size: 12px;
                    outline: none;
                    position: relative;
                }

                #check-code-wrapper{
                    position:relative;

                    #captcha{
                        position: absolute;
                        right: 0;
                        height: 33px;
                    }
                }

                #login-box,#reg-box{
                    color: #fff;
                    background-color: #3e2317;
                    height: 34px;
                    font-size: 14px;
                    font-weight: 600;
                    border-radius: 5px;
                    display: inline-block;
                    text-align: center;
                    border: unset;
                }

                #reg-box{
                    color: #ffeb00;
                    background-color: #d11313;
                }
            }

            #account-info{
                width: 90%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                gap:5px;

                li{
                    width: 70%;
                    justify-content: space-between;
                    display: flex;
                    align-items: center;
                    position: relative;
                    
                    .info-account{
                        .account{
                            color: #f1eb73;
                        }
                    }

                    .memberbalance{
                        background-color: #ab8641;
                        color: #f1eb73;
                        padding: 2px 5px;
                        border-radius: 20px;
                    }

                    #mailbox{
                        position: absolute;
                        background: red;
                        top: -15px;
                        right: -15px;
                        border-radius: 50%;
                        height: 20px;
                        width: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }

            #account-nav{

                ul{
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 20px;
                    gap: 5px;

                    li{
                        flex: 0 0 48%;
                        text-align: center;
                    }
                }
                
            }

            #action-box{
                .login-btn{
                    width: 184px;
                    height: 34px;
                    line-height: 34px;
                    font-size: 14px;
                    font-weight: 600;
                    border-radius: 5px;
                    display: inline-block;
                    text-align: center;
                    color: #fff;
                    background-color: #3e2317;
                    margin-top: 10px;
                }
            }
        }

    }

    &.common{
        #LoginForm{
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            gap: 10px;

            input{
                height: 33px;
                width: 184px;
                color: #d2d2cc;
                box-sizing: border-box;
                background: rgba(0, 0, 0, .1);
                border-radius: 2px;
                cursor: text;
                border: 1px solid #cba052;
                padding-left: 25px;
                font-size: 12px;
                outline: none;
            }
            #check-code-wrapper{
                position:relative;

                #captcha{
                    position: absolute;
                    right: 0;
                    height: 100%;
                }
            }

            button{
                width: 87px;
                height: 34px;
                line-height: 34px;
                font-size: 14px;
                font-weight: 600;
                border-radius: 5px;
                display: inline-block;
                text-align: center;
                color: #ffeb00;
                background-color: #d11313;
                border: unset;
                cursor:pointer;

                &#login-box{
                    color: #fff;
                    background-color: #3e2317;
                }
            }
        }

        /* after login */
        .wrapper{
            display: flex;
            gap: 20px;
            font-size: 14px;
            line-height: 2.4;
            justify-content: center;
            align-items: center;
            height: 54px;

            #account-info{
                display: flex;
                gap: 20px;

                .info-account{
                    position: relative;

                    #mailbox{
                        background: red;
                        border-radius: 99%;
                        padding: 6px;
                        height: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        top: -5px;
                        right: -10px;
                    }
                }
                .info-balance{
                    display:flex;
                }
            }

            #account-nav ul{
                display: flex;
                gap: 20px;
            }
        }
    }
}
li.nav:hover .header_icon{
    transform: rotate(1turn);
    transition: transform .5s ease-out;
}
/* SecondNav */
li.nav:hover ol.secondNav {
    /* display: block; */
    max-height: 500px;
    transition: max-height .2s ease-in;
    visibility: visible;
    opacity: 1;
}

ol.secondNav {
    z-index: 99;
    padding-bottom: 5px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 50px;
    border-radius: 6px;
    max-height: 0;
    transition: all .5s;
    padding: unset;
    visibility: hidden;
    opacity: 0;
    left:0;
    display: grid;
    grid-template-rows: repeat(6,1fr);
    grid-auto-flow: column;
    grid-column-gap: 1px;
}

ol.secondNav>li.subnav-item {
    background: rgba(0, 0, 0, .8);
    transition: all .5s;
    font-size: 14px;
    line-height: 40px;
    width: 150px;
    height: 40px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: rotateY(90deg);
    transition: opacity .4s, transform .5s;
}
li.nav:hover ol.secondNav>li.subnav-item {
    opacity: 1;
    transform: none;
}
li.nav:hover ol.secondNav>li.subnav-item:first-child{
    transition-delay: 0ms;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(2){
    transition-delay: 50ms;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(3){
    transition-delay: .1s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(4){
    transition-delay: .15s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(5){
    transition-delay: .2s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(6){
    transition-delay: .25s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(7){
    transition-delay: .3s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(8){
    transition-delay: .35s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(9){
    transition-delay: .4s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(10){
    transition-delay: .45s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(11){
    transition-delay: .5s;
}
li.nav:hover ol.secondNav>li.subnav-item:nth-child(12){
    transition-delay: .55s;
}
ol.secondNav>li.subnav-item img{
    width: 30px;
    height: 30px;
    margin: 0 14px;
}
ol.secondNav>li.subnav-item:first-child {
    border-top: 0;
    border-radius:5px 5px 0 0;
}
ol.secondNav>li.subnav-item:last-child {
    border-radius:0 0 5px 5px;
}
ol.secondNav>li.subnav-item:nth-child(6) {
    border-radius:0 0 5px 5px;
}
ol.secondNav>li.subnav-item:nth-child(7) {
    border-top: 0;
    border-radius:5px 5px 0 0;
}
ol.secondNav>li.subnav-item .more 
{
    width: 100% !important;
    text-align: center;
}
ol.secondNav>li.subnav-item a {
    color: #fff;
    display:block !important;
}
ol.secondNav>li.subnav-item:hover a {
    color: #bc9954;
}
.nav.hot:after {
    content: '';
    position: absolute;
    top: 0px;
    right: -5px;
    width: 23px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url('/image/web/flag/hot_game.gif');
}

#header-wrap .header-navigation ul li a:hover,
#header-wrap .header-navigation ul li a.active{
    color: #424242;
}
#header-wrap .header-navigation ul li a.active{
    background-color: #116c50;
    border: 1px solid #10634a;
    border-radius: 3px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    height: 22px;
    padding: 0px 7px;
    color: #424242;
}
#header-wrap .header-navigation ul li ul li a.active{
    border: none;
}
#header-wrap .header-bottom .bottom-content .time {
    width: 11%;
    color: #7fbfac;
}
#header-wrap #login {
    align-items: center;
}
#header-wrap #login .submit-item button {
    display: inline-block;
    width: 46px;
    height: 26px;
    background-image: none;
    background-color: #fad910;
    border: 1px solid #005e3c;
    border-radius: 4px;
    cursor: pointer;
}
#header-wrap #login .submit-item button:hover {
   background-color: #ddd;
}
#header-wrap #login .login-item2 {
    padding-top: 3px;
}
#login .login-item2 .header-register {
    float: left;
    color: #424242;
    font-size: 11px;
    line-height: 22px;
}
#login .login-item2 .header-forget {
    float: right;
    color: #80BFAC;
    font-size: 11px;
    line-height: 22px;
}
#header-wrap #login .login-item input {
    width: 100px;
    height: 25px;
    line-height: 25px;
    margin: 0 5px 0 0;
    padding: 0 5px;
    border: 1px solid #ff5151;
    background-color: #10694d;
    color: #60a692;
    border-radius: 3px;
    font-size: 12px;
    box-shadow: 0 1px 0 #288b6c;
}
#header-wrap #login .login-item {
    display: flex;
}
/*#header-wrap .header-bottom .bottom-content .announcement {
    width: 80%;
}*/
.headerNavRight {
    float: right;
    border-left: 1px solid #046F50;
}
.headerNavRight table{
    height: 100%;
}
.headerNavRight tr td {
    position: relative;
}
.headerNavRight a {
    display: block;
    height: 28px;
    padding: 0px 9px 0px 10px;
    color: #7FBFAC;
    background-repeat: no-repeat;
    background-position: 10px 1px;
    position: relative;
    text-decoration: none;
    cursor: pointer;
}
.headerNavRight .VIP .vip {
    font-size: 14px;
    background: linear-gradient(#ff9e9e,#ff0000);
    height: 22px;
    margin: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    float: left;
    line-height: 23px;
    padding: 0 10px;
    color: #fff;
}
.headerNavRight tr td {
    border-right: 1px solid #046F50;
    position: relative;
}
#HeaderReskin_Chat:hover,
#HeaderReskin_ServicesSelectorHeader:hover .bai{
    color: #424242;
    background-color: #047B58;
}
#HeaderReskin_Chat:hover .bai{
    color: #424242;
}
#HeaderReskin_Chat .livechat{
    color: #424242;
}
.bai {
    color: #fff;
}
.fa {
    font-size: 14px;
    /* line-height: 14px; */
    margin: 0px 3px;
}
.fa-mobile {
    font-size: 20px;
    vertical-align: middle;
}
#HeaderReskin_ServicesSelectorHeader {
    padding: 0 20px 0 10px;
    border-left: 1px solid #228767;
    cursor: pointer;
}
.service_fname {
    position: absolute;
    z-index: 10000;
    right: 245px;
    display: none;
}
.langageinco {
    background: url(/image/web/header/Drop-Down-Arrow.png) no-repeat;
    position: absolute;
    top: 11px;
    right: 5px;
    height: 6px;
    width: 9px;
}
.service_fname .icondic {
    background: url(/image/web/header/Arrow1.png) no-repeat;
    display: block;
    width: 14px;
    position: absolute;
    z-index: 1001;
    height: 8px;
    right: -240px;
    top: 3px;
}
#service {
    position: absolute;
    width: 70px;
    border: 1px solid #333333;
    font-family: verdana;
    background: #bbbbbb;
    border-radius: 6px;
    overflow: hidden;
    right: -260px;
    top: 10px;
}
#service li {
    width: 68px;
    float: left;
    color: #333;
    font-size: 12px;
    line-height: 28px;
    height: 28px;
    padding: 0px;
    background: none;
    border-top: 1px solid #c8c8c8;
    border-bottom: 1px solid #a4a4a4;
    border-right: 1px solid #a4a4a4;
    border-left: 1px solid #c8c8c8;
    text-align: center;
}
#service li a {
    color: #333;
    display: block;
}
.login-after {
    position: relative;
    float: right;
}
.login-after .login-wrap {
    min-width: 260px;
    height: 48px;
    margin: 0px 0 0 0;
    background-color: #ffffff;
    color: #ff5151;
    border: 1px solid #ff5151;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    font-size: 11px;
    box-shadow: 0 1px 0 #ff5151;
}
.login-after .login-wrap .topline {
    display: flex;
    height: 23px;
    line-height: 22px;
    border-bottom: 1px solid #ff5151;
}
.login-after .login-wrap .topline .user-id {
    display: flex;
    padding-left: 8px;
    width: 75%
}
.login-after .login-wrap .topline .user-id>a {
    color: #424242;
    margin: 0 20px 0 10px;
}
.login-after .login-wrap .topline .user-profile {
    width: 40%;
}
.login-after .login-wrap .topline .user-profile>a:first-child {
    display: inline-block;
    border-left: 1px solid #ff5151;
    padding-left: 7px;
    color: #424242;
}
.login-after .login-wrap .topline .user-profile>a:last-child {
    float: right;
    font-size: 15px;
}
.login-after .login-wrap .bottomline {
    display: flex;
    height: 23px;
    line-height: 22px;
    border-top: 1px solid #ff5151;
}
.login-after .login-wrap .bottomline .id-balance {
    display: flex;
    justify-content: space-around;
    min-width: 123px;
    padding: 0 5px 0 8px;
    border-right: 1px solid #ff5151;
}
.login-after .login-wrap .bottomline .id-balance span {
    color: #424242;
    height: auto;
    display: inline-flex;
    font-family: verdana;
}
#header-wrap .header-content .login-after .Refresh-icon>i {
    font-size: 15px;
    cursor: pointer;
}
.login-after .login-wrap .bottomline .nav-icon {
    border-left: 1px solid #ff5151;
    padding: 0 8px 0 11px;
}
.login-after .login-wrap .bottomline .nav-icon>a {
    color: #ff5151;
    margin-right: 7px;
}

.fa.fa-spinner {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-moz-keyframes spin {
    100% {
      -moz-transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }