/* 通用 */
@media only screen and (min-width: 1200px) {
    .page-wrap .main-block {
    max-width: 1280px;
    }
    .modal-xl{
        max-width: 940px;
    }
    .swiper-container:not(.banner) .swiper-slide img {
        width: 85%;
    }
}
@media only screen and (max-width: 1024px){
    .main-block-right{
        margin: 0;
        padding: 0;
    }
    .banner .container img {
        width: 34%;
    }
    .page-wrap .main-block{
        grid-template-columns: 19% 2% 79%;
    }
    .main-left-charges {
        top: 283px;
    }
    .main-left-charges picture{
        width: 75%;
        margin-left: 0.5rem;
    }
    .main-block-left{
        transform: translateX(8px);
        max-width: 190px;
        top: 435px;
        font-size: 14px;
    }
    .login > a:first-child img{
        width: 80px;
        margin: 0.5rem auto;
    }
    .login img{
        width: 90;
    }
    .swiper-container .swiper-slide img {
        width: 100%;
    }
    .swiper-container:not(.banner) .swiper-slide img {
        width: 85%;
    }
    .swiper-award-info div{
        width: 100%;
        text-align: start;
    }
    .fixed-function-block {
        transform: translateX(193px);
        transition: 0.5s;
        right: 10px;
    }
    .fixed-function-block.active {
        transform: translateX(0);
    }
    .fixed-function-block label{
        width: 20px;
        height: 80px;
        background: linear-gradient(180deg,#42016f 0%, #600899 2%,#240042 89%, #390042 100%);
        color: #686666;
        position: absolute;
        right: 182px;
        top: 0;
        bottom: 0;
        margin: auto;
        line-height: 80px;
        text-align: center;
        border-radius: 5px 0 0 5px;
        z-index: 9999;
        box-shadow: -5px 0 5px rgb(23 23 54 / 60%);
    }
    .fixed-function-block i::after{
        position: absolute;
        width:1px;
        bottom: 40px;
        right: 5px;
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-left: 3px solid #b336ff;
        border-bottom: 3px solid #b336ff;
        transform: rotate(45deg);
    }
    .fixed-function-block.active i::after{
        transform: rotate(225deg);
        border-left: 3px solid #FFFFFF;
        border-bottom: 3px solid #FFFFFF;
    }
    .footer-tip{
        padding-left: 1rem;
    }
}
@media only screen and (min-width: 1200px) and (max-height: 840px)  {
    .main-left-charges picture{
        width: 55%;
        margin-left:1.5rem;
    }
    .main-left-charges picture:nth-child(1){
        display: none;
    }
    .main-left-charges picture:nth-child(2){
        display: block;
    }
    .download-icon{
        display: flex;
        flex-wrap: wrap;
    }
    .banner .container img {
        width: 28%;
    }
    .main-block-left{
        max-width: 220px;
        top: 380px;
    }
    .login-success-wrap .login-success-info{
        margin: auto;
    }
    .login-success-wrap .info{
        font-size: 90%;
    }
    .login-success-info img{
        height: 30px;
    }
    .btn{
        padding: 0px;
    }
    .main-block-left-qrcode .main-block-left-icon{
        margin: auto 0.25rem;
    }
    .login > a:first-child img{
        margin: 0.25rem auto;
    }
    .login-success-wrap{
        margin: 0 0 5px;
    }
    .main-block-left-qrcode{
        display: flex;
        justify-content: space-around;
    }
    .main-block-left-qrcode > a:first-child img{
        margin: 0.25rem auto;
    }
    .main-block-left-qrcode img{
        width: 100px;
        margin: 0.5rem auto;
    }
    .fixed-function-block {
        transform: translateX(193px);
        transition: 0.5s;
        right: 10px;
    }
    .fixed-function-block.active {
        transform: translateX(-10px);
    }
    .fixed-function-block {
        transform: translateX(80px);
        width: 65px;
        right: 15px;
        transition: 0.5s;
    }
    .fixed-function-block a:not(:first-child) img:nth-child(1){
        display: inline-block;
    }
    .fixed-function-block a:not(:first-child) img:nth-child(2){
        display: none;
    }
    .fixed-function-block label{
        width: 20px;
        height: 80px;
        background: linear-gradient(180deg,#42016f 0%, #600899 2%,#240042 89%, #390042 100%);
        color: #686666;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        line-height: 80px;
        text-align: center;
        border-radius: 5px 0 0 5px;
        z-index: 9999;
        box-shadow: -5px 0 5px rgb(23 23 54 / 60%);
        right: 65px;
        cursor: pointer;
    }
    .fixed-function-block i::after{
        position: absolute;
        width:1px;
        bottom: 40px;
        right: 3px;
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-left: 3px solid #b336ff;
        border-bottom: 3px solid #b336ff;
        transform: rotate(45deg);
    }
    .fixed-function-block.active i::after{
        transform: rotate(225deg);
        border-left: 3px solid #FFFFFF;
        border-bottom: 3px solid #FFFFFF;
    }
}

@media only screen and (min-width: 992px) {
    .modal-lg{
        max-width: 623px;
    }
}
@media only screen and (max-width: 991.98px) {
    body.active {
        overflow: hidden;
    }
    body:before {
        background: url(/img/mobile/MB_IMG_HOT168_BG.png) top center no-repeat;
        background-size: cover;
    }
    .page-wrap{
        background: url(/img/mobile/MB_IMG_HOT168_BG.png) top center no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
    .main-header.mobile {
        display: block;
        height: 80px;
        color: #ffffff;
    }
    .mobile-login-icon{
        background: url("/img/mobile/MB_UI_HOT168_login.png");
        display: inline-block;
        width: 172px;
        height: 50px;
        margin-top: 1rem;
        background-size: contain;
    }
    .mobile .container {
        height: 80px;
        text-align: center;
    }
    .mobile-ham-icon {
        position: absolute;
        border-radius: 5px;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 5.5vw;
        width: 3rem;
        height: 10px;
        display: block;
        background: #7538ae;
    }
    .mobile-ham-icon:before,
    .mobile-ham-icon:after {
        content: "";
        position: absolute;
        width: 3rem;
        height: 10px;
        right: 0px;
        transition: all 0.2s ease-out;
        background: #7538ae;
        border-radius: 5px;
    }
    .mobile-ham-icon:before {
        top: -15px;

    }
    .mobile-ham-icon:after {
        top: 15px;
    }
    .mobile-ham-icon.show {
        background: transparent;
        border: none;
    }
    .mobile-ham-icon.show:before,
    .mobile-ham-icon.show:after {
        top: 0;
    }
    .mobile-ham-icon.show:before {
        transform: rotate(45deg);
    }

    .mobile-ham-icon.show:after {
        transform: rotate(-45deg);
    }

    .mobile-drop-main-block.show {
        height: 100vh;
        display: block;
    }
    .mobile-drop-main-block > a {
        color: #ffffff;
        display: block;
        text-align: center;
        font-size: 30px;
        margin: 20px;
        font-weight: 900;
    }
    .mobile-drop-main-block > a.active {
        background: linear-gradient( #ffff00,#ffb400,#ffff00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    .main-block-right{
        order:0;
    }

    .page-wrap .main-block{
        grid-template-columns:  minmax(100px, auto);
        grid-template-rows: auto;
        grid-template-areas:
            "charge"
            "main"
            "menu-l";
    }
    .main-block-left{
        position: unset;
        margin-top: 1rem;
        transform: none;
        padding: 0px 0.5rem;
        max-width: 100%;
        z-index: 1;
    }
    .main-left-charges{
        position: unset;
        
    }
    .main-left-charges picture:nth-child(1){
        display: none;
    }
    .main-left-charges picture:nth-child(2){
        display: inline-block;
        margin: auto;
        width: auto;
    }
    .main-left-charges picture:nth-child(2)[firstBuyBonus="on"]::after{
        content:'';
        width: 150px;
        height: 150px;
        background-image: url(/img/common/IMG_HOT168_firstBuyBonus_1.gif);
        background-size: 100%;
        display: block;
        position: absolute;
        top: -93px;
        left: -50px;
    }
    .login-status{
        display: none;
    }
    .mobile-login-status{
        display: none;
        justify-content: center;
    }
    .mobile-login-status > img{
        margin: auto 0;
    }
    .mobile .info{
        margin: auto 2rem;
        text-align: left;
    }
    
    .mobile .info img{
        width: 40px;
    }
}
@media only screen and (max-width: 768px) {
    .banner .container img{
        width:auto ;
    }
    .main-block-left-qrcode {
        display: flex;
        justify-content:center;
    }
    .download-icon{
        margin: auto 0.5rem;
    }
    .main-block-left-icon  img{
        width: auto;
        margin: 0.5rem auto;
    }
    .login > a:first-child img{
        width: auto;
    }
    .login .download-icon{
        display: block;
    }

    .fixed-function-block {
        transform: translateX(95px);
        width: 80px;
        right: 15px;
        transition: 0.5s;
    }
    .fixed-function-block a:not(:first-child) img:nth-child(1){
        display: inline-block;
    }
    .fixed-function-block a:not(:first-child) img:nth-child(2){
        display: none;
    }
    .fixed-function-block label{
        right: 80px;
    }
    .page-wrap > .banner{
        margin-top: 80px;
    }

    .main-block-right{
        padding: 0px 0.5rem;
    }

    .footer-tip{
        padding: 0;
        font-size: 14px;
    }
    .footer-tip img{
        position: relative;
        transform: translateX(-50%);
        left: 50%;
        }
}
@media only screen and (min-width: 577px) {
    #awardslider1 .swiper-button-next {
        display: none;
    }
    #awardslider2 .swiper-button-prev {
        display: none;
    }
 

}
@media only screen and (max-width: 576px) {
    .main-header.mobile{
        font-size: 14px;
    }
    .banner .container img {
        width: 75%;
    }
    .main-left-charges  picture:nth-child(2){
        width: 65%;
    }
    .mobile-login-status{
        justify-content: unset;
    }
    .mobile .info{
        margin: auto 5px;
    }
    .mobile-login-status>img{
        margin: auto .25rem;
    }
    #awardslider1 .swiper-button-next {
        display: flex;
    }
    .main-block .row{
        margin: 0;
    }
    .swiper-award-info{
        display: block;
    }

    #awardslider2{
        display: none;
    }
    #awardslider1{
    width: 100%;
    }
    #loginModal .modal-body img{
        width: 100%;
    }
    .page-wrap .main-block{
        padding-bottom: 30px;
    }
    .page-wrap .footer{
        position: relative;
    }
    .footer-tip div {
    text-align: justify;
    padding: 0 15px;
    }
    .footer-tip img{
    position: relative;
    }
    .index-main-container:not(#bulletins) .main-menu li{
        width: 33.333333%;
        margin: 0;
    }
    .main-menu{
        background: url(/img/mobile/MB_UI_HOT168_TOPBAR.png);
        flex-wrap: wrap;
        background-size: cover;
        margin: 0 1.5px;
    }
    
    .tab-wrap .pic {
        width: 50%;
        margin: 15px 0;
    }
    #gameinfoModal .modal-dialog{
        margin: 5rem 0.5rem;
    }
    #gameinfoModal .wrap{
        top: 0.87%;
        width: 91.20%;
        left: 4.7%;
    }
    .table-rwd{
        border: none;
    }
    .table-rwd thead{
        display: none;
    }
    .table-rwd tr{
        display: flex;
        flex-wrap: wrap;
        border:1px solid #8600c9;
        border-radius :5px;
        margin-bottom:  1rem;
    }
    .table-rwd td{
        display: block;
        width: 100%;
        border: none;
        text-align: left;
        padding: 0px;
    }

    .table-rwd td:only-child{
        display: table-cell;
        padding: 0.75rem;
    }
    .table-rwd td + td{
        border-top:1px solid #8600c9;    
    }
    .table-rwd td::before{
        content: attr(data-title);
        color: #b336ff;
        display: inline-block;
        width: 6.5rem;
        background: #490088;
        padding: 1rem;
        margin-right: 0.25rem;
        text-align: center;
    }
    td:only-child:before{
        padding: 0;
        content: '';
        width: 0;
    }
}

@media only screen and (max-width: 375px) {
    .mobile-ham-icon {
        right: 2.5vw;
        width: 2.5rem;
    }
    .mobile-ham-icon:before,
    .mobile-ham-icon:after {
        width: 2.5rem;
    }

    .mobile .container {
        padding: 0;
    }
    .mobile .info .name{
        width: 100px;
        word-break: break-all;
    }
}
@media only screen and (max-width: 320px) {
    .btn{
        font-size: 16px;
    }
    .mobile .info{
        margin: auto 0.25rem;
    }
    .mobile .info .name{
        width: 60px;
    }
    .main-header.mobile{
        font-size: 12px;
    }
    #rankboard .table-set{
        font-size: 14px;
    }
    #block-list .table-set{
        font-size: 14px;
    }
}/* iis7 .co m */