body{background-color:#e47777;margin:0px;padding:0px;} .bottom-text{margin-top: 8px; padding: 2px 6px;background-color: #fff;border-radius: 12px;line-height: 22px;font-size: 16px;}
.box-outer{padding: 2px 0px; width: 80%; max-width: 400px; margin: 0 auto;} .box-outer .grid-container{display: inline-grid;grid-template-columns: auto auto auto;}

.box1,.box2{display: grid;grid-template-rows: repeat(auto-fill,94px);grid-template-columns:repeat(3, 94px); grid-gap: 14px; justify-content: space-between} .box1 .game-name{grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 4; background-color: white;border-radius: 16px;padding: 10px 10px 0;box-sizing: border-box;word-break: break-all; display: flex;flex-direction: column;align-items: flex-start;font-size: 14px;box-shadow: 0 6px 12px 0 rgba(0,0,0,.24)} .box1 .game-name .title{font: 500 20px / 24px Torus, sans-serif;font-weight: bold;color: #002b50; overflow: hidden;display: inline-block;width: 180px;white-space: nowrap;text-overflow: ellipsis;} .box1 .game-name .sub-title{color: #5d6b84; font-size: 12px;line-height: 15px;margin: 5px 0 0;overflow: hidden;display: inline-block;width: 180px;white-space: nowrap;text-overflow: ellipsis;}
     .box1 .game-name .function-box{border-top: 1px solid #e9eff5; margin-top: 5px;width: 100%; text-align: right;}
     .box1 .game-name .function-box .right-box{display: flex;margin-top: 5px;}
     .box1 .game-name .function-box .right-box .img-box{display: flex;font-size: 12px;flex: 1;justify-content: center;}
     .box1 .game-name .function-box .right-box .img-box .like{display: flex;}
     .box1 .game-name .function-box .right-box .img-box img{width: 17px; height: 17px;}
     .box1 .game-name .function-box .right-box .img-box span{margin: 2px 20px 0 2px;}
     .box1 .game-name .function-box .right-box .img-box .disLikeBox{display: flex;}
     .box1 .game-name .function-box .right-box .img-box .dislike{height: 20px; transform: rotate(180deg) translateY(0);}
     .box1 .game-name .function-box .right-box .right-download{min-width: 50px; display: flex;}
     .box1 .game-name .function-box .right-box .download-box img{width: 30px; height: 22px;}
     .el-divider--vertical{display: inline-block;width: 1px;height: 1em;margin: 0 8px; vertical-align: middle;position: relative; background-color: #dcdfe6}

     .box1 .game-play{grid-row-start: 2; grid-row-end: 5; grid-column-start: 1; grid-column-end: 4;display: flex;justify-content: center; height: 314px;}
     .box1 .game-play .game-img-box{display: block;width: 100%;height: 100%;border-radius: 16px;box-shadow: 0 6px 12px 0 rgba(0,0,0,.24);position: relative;cursor: pointer;}
     .box1 .game-play .game-img-box .svg{position: absolute;z-index: 3;top: 50%;left: 50%;border-radius: 100px;background-color: #fff;height: 64px;width: 64px;box-shadow: 0 6px 12px 0 rgba(0,0,0,.24);transform: translate(-50%, -50%);box-sizing: border-box;}
     .box1 .game-play .game-img-box .svg img{width: 24px; height: 24px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
     .box1 .game-play .game-img-box h2{color: #fff;position: absolute;left: 50%;top: 50%;margin-top: 40px;z-index: 2;transform: translateX(-50%);font-size: 28px;}
     .box1 .game-play .game-img-box .img{width: 100%;height: 100%;position: absolute;z-index: 1;border-radius: 16px;}
     .box2{margin-top: 12px; margin-bottom: 6px}
     .box2 img{border-radius: 12px; width: 94px}
     .box-play-game .iframe-back{z-index: 1;position: fixed;top: 20px;border-radius: 0 1.125rem 1.125rem 0;overflow: hidden;width: 70px;height: 45px;text-align: center;background-color: #fff;transform: translateY(24px,24px);display: flex;align-items: center;justify-content: center;}
     .box-play-game .iframe-back img{width: 60px;height: 39px;}
      @keyframes breath-3f0035bc {
        0% {
            opacity: .1
        }
        50% {
            opacity: 1
        }
        to {
            opacity: .1
        }
     }
     .box-play-game .tap-game .img-tap-game{left: 0; z-index: 100; top: 200px;height: 50px;width: 50px;position: fixed;border-radius: 25px;opacity: 3;overflow: hidden;-webkit-animation-name:breath-3f0035bc;-webkit-animation-duration:1.2s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;transform: translateY(150px, 150px);}
     .bottom-text {padding-top: 12px; padding-bottom: 12px;margin-bottom: 16px;}
     .bottom-text #type{color: #5d6b84;font-size: 16px;}
     .bottom-text #game-name{color: black;font:500 24px Torus,sans-serif;font-weight: bold;margin-top: 8px; margin-bottom: 8px;}
     .bottom-text #score-box{margin: 4px 0;}
     .bottom-text #score-box span{display: flex;align-items: center;width: 30px;justify-content: center;font-size: 12px;line-height: 22px;font-weight: 700;padding: 0 8px;color: #5d6b84;background: #f0f5fc;border-radius: 10px;height: 20px;margin-right: 4px;}
     .bottom-text #desc{font: 400 16px/24px Proxima Nova,Open Sans,Gill Sans MT,Gill Sans,Arial,sans-serif;line-height: 20px;}
     .bottom-text #game-types{margin-top: 12px; margin-bottom: 8px;padding-left:0px;}
     .bottom-text #game-types li{display: inline-block;margin: 4px 4px 0 0;padding: 0 10px;border: 2px solid #bac9de;border-radius: 100px;color: #bac9de;font-size: 12px;font-weight: 700;cursor: pointer;}
     .bottom-text #game-types li a{color: #bac9de; text-decoration: none;}

     .logo {width: 94px; height: 94px;position: fixed;z-index: 10;display: flex;align-items: center;background: #fff;border-radius: 16px;flex-direction: column;}
     .logo .top-icon{height: 28px;margin: 10px auto 20px;line-height: 28px;text-align: center;}
     .logo .top-icon-2{height: 40px;display: flex;align-items: center;justify-content: space-around;width: 100%;border-radius: 0 0 16px 16px;}

.topline{display:block;position:absolute;right:-10px;top:-5px;width:70px;height:35px;z-index:999999}.adv{position:relative;width:100%;margin-top:8px;margin-bottom:8px}