.game-box, .game-box>.gg-bs {
    display: block;
    position: relative;
    height: 400px;
}
.game-box>.gg-bs {
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    top: 0;
    transition: all .3s ease;
}
.game-box>.gg-bs>.newgame {
    display: block;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
}

.game-box>.gg-bs>.newgame img {
    display: block;
    height: 22px;
}
img {
    border: 0;
    vertical-align: middle;
}
.game-box>.gg-bs>.g-cover, .game-box>.gg-bs>.g-reflect {
    display: block;
    width: 100%;
    height: 180px;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
    background-size: cover!important;
}
.game-box>.gg-bs>.g-cover {
    position: relative;
}
.game-box>.gg-bs>.g-reflect {
    position: absolute;
    top: 180px;
    left: 0;
    z-index: 1;
    transform: rotate(180deg) scaleX(-1);
    -webkit-mask-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,transparent),color-stop(.6,transparent),color-stop(.94,#000),color-stop(1,#000));
}
.game-box>.gg-bs>.g-cover, .game-box>.gg-bs>.g-reflect {
    display: block;
    width: 100%;
    height: 180px;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
    background-size: cover!important;
}
.game-box>.gg-bs>.g-bg, .game-box>.gg-bs>.g-detail {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.game-box>.gg-bs>.g-bg {
    height: calc(100% - 180px);
    transition: height .3s ease;
}
.game-box>.gg-bs .g-detail {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.game-box>.gg-bs>.g-detail {
    height: 220px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
    transition: bottom .3s ease;
    z-index: 5;
}
.game-box>.gg-bs .g-detail .g-blur {
    opacity: .3;
}
.game-box>.gg-bs>.g-detail>.g-blur>.coverimg {
    display: none;
    position: absolute;
    width: 100%;
    height: 240px;
    top: -180px;
    left: 0;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
    background-size: cover!important;
    transition: all .3s ease;
}
.game-box>.gg-bs>.g-detail>.detailtop {
    display: block;
    position: relative;
    z-index: 1;
    height: 60px;
}
.game-box>.gg-bs>.g-detail>.detailtop>.d-icon {
    display: block;
    float: left;
    width: 60px;
}
.game-box>.gg-bs>.g-detail>.detailtop>.d-icon>div {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
}
.game-box>.gg-bs>.g-detail>.detailtop>.d-icon>div>img {
    position: absolute;
    display: block;
    width: 60px;
    bottom: 0;
    left: 0;
}
.game-box>.gg-bs>.g-detail>.detailtop>.d-note {
    display: block;
    float: right;
    width: calc(100% - 80px);
    height: 60px;
    box-sizing: border-box;
    overflow: hidden;
}
.game-box>.gg-bs>.g-detail>.detailtop>.d-note>b {
    display: block;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0;
    line-height: 20px;
}
.game-box>.gg-bs>.g-detail>.detailtop>.d-note>span {
    display: -webkit-box;
    opacity: .5;
    font-size: 12px;
    color: #fff;
    letter-spacing: 0;
    line-height: 14px;
    height: 28px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 6px 0 0;
}
.game-box>.gg-bs>.g-detail>.detailbottom {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: calc(100% - 40px);
    height: calc(100% - 100px);
    bottom: 18px;
    padding-top: 26px;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>div>div.value {
    font-size: 16px;
    line-height: 16px;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>div>div.title {
    font-size: 12px;
    line-height: 12px;
    opacity: .5;
    padding-top: 4px;
}

.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>div>div {
    text-align: left;
    color: #fff;
    letter-spacing: 0;
}


.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow:last-child, .game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>.lang>.image>div:last-child {
    margin: 0;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>.cert>.image {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2px;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>.cert>.image>img {
    width: auto;
    height: 16px;
    filter: brightness(0) invert(1);
    margin-right: 16px;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>.lang>.image {
    display: flex;
    justify-content: flex-start;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>.lang>.image>div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    height: 18px;
}
.game-box>.gg-bs>.g-detail>.detailbottom>.detailrow>.lang>.image>div>img {
    width: auto;
    height: 100%;
}
.game-box>.gg-bs>.g-button {
    display: block;
    position: absolute;
    width: 101%;
    height: 50px;
    background: hsla(0,0%,100%,.1);
    bottom: -50px;
    left: 0;
    z-index: 1;
    transition: all .3s ease;
}
.game-box>.gg-bs>.g-button.onebutton>a, .game-box>.gg-bs>.g-button.onebutton>div {
    width: 100%;
    margin-left: 0;
}
.game-box>.gg-bs>.g-button>a, .game-box>.gg-bs>.g-button>div {
    display: block;
    float: left;
    text-align: center;
    width: 50%;
    height: 50px;
    box-sizing: border-box;
    font-size: 12px;
    color: #fff;
    letter-spacing: 0;
    line-height: 50px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}
/*
.game-box>.gg-bs>.g-button>a:hover, .game-box>.gg-bs>.g-button>div:hover {
    background: hsla(0,0%,100%,.2);
}

.game-box>.gg-bs>.g-button:before {
    display: block;
    content: "";
    position: absolute;
    width: 1px;
    height: 30px;
    background: hsla(0,0%,100%,.2);
    top: calc(50% - 15px);
    left: 50%;
}


.game-box>.gg-bs>.g-button:hover:before {
    background: hsla(0,0%,100%,0);
}
.game-box>.gg-bs>.g-button.onebutton:before {
    display: none;
}


.game-box>.gg-bs>.g-button>a:hover,.game-box>.gg-bs>.g-button>div:hover{
    background:hsla(0,0%,100%,.2)
}
.game-box:hover{cursor:pointer}
.game-box:hover>.gg-bs{top:-15px;box-shadow:0 30px 20px -20px rgba(14,6,23,.3)}
.game-box:hover.trynow{cursor:default}
.game-box:hover.trynow>.gg-bs>.g-detail{bottom:50px}
.game-box:hover.trynow>.gg-bs>.g-detail>.g-blur>.coverimg{top:-130px}
.game-box:hover.trynow>.gg-bs>.g-button{bottom:0}@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none){.game-box>.gg-bs .g-detail{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.game-box>.gg-bs .g-detail .g-blur{opacity:.3}}
@media screen and (max-width:575px){
    .game-box>.gg-bs .g-reflect{filter:blur(4px);-webkit-filter:blur(4px)}
    .game-box>.gg-bs .g-detail .g-blur{opacity:.9}
    .game-box>.gg-bs .g-detail>.detailbottom>.detailrow>.cert>.image>img{height:14px}
    .game-box:hover>.gg-bs{top:0;box-shadow:0 10px 20px 0 transparent}@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none){
        .game-box>.gg-bs .g-reflect{filter:blur(0);-webkit-filter:blur(0)}
        .game-box>.gg-bs .g-detail{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
        .game-box>.gg-bs .g-detail .g-blur{opacity:.3}
    }
}
*/