.game-container{
    padding: 0 30px;
    margin-bottom: .66rem;
}

.game-item{
    position: relative;
    display: block;
    margin-top: .66rem;
    overflow: hidden;
}

.game-item .left-con{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 23%;
    display: -moz-box;  
    display: -ms-flexbox;   
    display: -webkit-box;    
    display: -webkit-flex;  
    display: flex;


    align-items:center;
    -webkit-align-items:center;
    box-align:center;
    -moz-box-align:center;
    -webkit-box-align:center;


    justify-content: center;
    -webkit-Box-pack: center;  
    -webkit-justify-content:center;
    -moz-box-pack:center;
}



a:-webkit-any-link:focus-visible {
    outline-offset: 0px;
}
a:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.game-item1 .left-con{
    background: url("../images/game1-leftimg.jpg") no-repeat center;
    background-size: cover;
}
.game-item2 .left-con{
    background: url("../images/game2-leftimg.jpg") no-repeat center;
    background-size: cover;
}
.game-item3 .left-con{
    background: url("../images/game3-leftimg.jpg") no-repeat center;
    background-size: cover;
}
.game-item4 .left-con{
    background: url("../images/game4-leftimg.jpg") no-repeat center;
    background-size: cover;
}

.game-item .game-img{
    text-align: right;
    width: 77%;
    margin-left: 23%;
}
.game-item .game-img img{
    width: 100%;
    height: 100%;
}

.game-item .game-logo{
    display: inline-block;
    border-radius: 35px;

    transition: all .3s ease-in-out;
}
.game-item .game-title{
    font-size: .62rem;
    margin-top: .4rem;
    margin-bottom: .1rem;

    text-transform: capitalize;
}

.game-item .game-intro{
    font-size: 14px;
    text-align: center;
    color: #333;
}

.game-item .game-intro .game-intros{
    color: #666;
}

.game-item .layui-btn{
    margin-top: 3.7rem;
    background: transparent;
    /* width: 2.53rem; */
    width: auto;
    height: 1rem;
    line-height: 1rem;
    border: 1px solid #3C3C3C;
    
    border-radius: 4px;
    color: #3C3C3C;
}


@media (max-width: 1440px) {
    .game-item .game-logo img{
        width: 90px;
        height: auto;
    }
    .game-item .layui-btn{
        margin-top: 2rem;
        width: auto;
    }
    
}

@media (max-width: 1080px) {
    .game-item .game-logo img{
        width: 70px;
    }
    .game-item .game-title{
        font-size: .52rem;
    }
    .game-item .layui-btn{
        margin-top: 1rem;
    }
}

@media (max-width: 992px) {
    .game-item .left-con{
        width: 30%;
    }
    
}

@media (max-width: 768px) {
    .game-container{
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 15px;
    }
    .game-item{
        margin-top: 15px;
    }
    .game-item .game-img{
        width: 100%;
        margin-left: 0;
    }
    .game-item .left-con{
        width: 100%;
        position: static;
        background-size: cover!important;
        padding-bottom: .9rem;
        margin-top: -35px;
    }
    .game-item .layui-btn{
        width: auto;
    }
    .game-item .game-title{
        margin-top: .5rem;
    }
}


@media (max-width: 480px) {
    .game-item .layui-btn {
        margin-top: .6rem;
        font-size: 12px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .game-item .game-title{
        font-size: 18px;
    }

    .game-item .game-intro{
        font-size: 11px;
    }

    .game-item .left-con{
        padding-bottom: .7rem;
    }
    
}

@media (min-width: 768px) {

    .game-item:hover .game-title{
        color: #ec2725;
    
    }
    .game-item:hover .game-intro{
        color: #666;;
    }
    .game-item:hover .layui-btn{
        background: #e74039;
        border-color: #e74039;;
        color: #fff;
    }
    
    .game-item:hover .game-logo{
        box-shadow: 5px 10px 21px #e74039;
    
    }
    
}

@media (max-width: 768px) {
    .game-item .game-title{
        color: #333;
    
    }
    .game-item .game-intro{
        color: #666;;
    }
    .game-item .game-intro br{
        display: none;
    }

    .game-item .layui-btn{
        background: #e74039;
        border-color: #e74039;;
        color: #fff;
    }
    .game-item .game-logo{
        box-shadow: 5px 10px 21px #e74039;
    
    }
    
}






/* gamedetail */
.video{
    max-width: 100%;
    height: 100%;
    width: 100%;
    position: absolute;    
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}


.layui-game-detail{
   
    margin: 0 auto;
    background: #000;
    height: 100%;

}





#video4{
    width: auto;
    height: 100%;
}


/* layer */
.layui-layer{
    background: #000!important;
    border-radius: 0!important;
}

.layui-layer-content{
    height: 100%!important;
    overflow: hidden!important;
}
@media (max-width: 992px) {
    .layui-layer{
        width: 94%!important;
    }
    
   
}


@media (max-width: 480px) {
    .layui-layer{
        width: 88%!important;
        height: 240px!important;
    }

    /* .layui-layer-setwin .layui-layer-close2{
        display: none;
    } */
    
}
.layui-layer-setwin{
    width: .5rem;
    height: .5rem;
    /* position: fixed!important; */
    right: -.5rem!important;
    top: 0!important;
    display: none;
    

}

.layui-layer-setwin .layui-layer-close2{
    background: url("../images/icon-close.png") no-repeat center !important;
    position: static!important;
    width: 100%!important;
    height: 100%!important;
    background-size: 40px auto;
}
.layui-layer-setwin:hover .layui-layer-close2{
    animation-name: example;
    animation-duration: 1s;
}


@keyframes example {
    from {transform:rotate(0)}
    to {transform:rotate(1turn)}
}