@keyframes moveIocn{
  from{-webkit-transform:translateX(0);transform: translateX(0);}
  50%{-webkit-transform:translateX(-5px);transform: translateX(-5px);}
  to{-webkit-transform:translateX(0);transform:translateX(0)}
}
@-webkit-keyframes moveIocn{
  from{-webkit-transform:translateX(0);transform: translateX(0);}
  50%{-webkit-transform:translateX(-5px);transform: translateX(-5px);}
  to{-webkit-transform:translateX(0);transform:translateX(0)}
}
.game-iframe-container{overflow: hidden; max-width: 1200px;margin:0 auto;}
.game-iframe-container .game-play-box{width: 100%;height:480px;position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;border-radius: 20px;overflow: hidden;}
.game-iframe-container .game-play-box .game-bg{width: 100%;height:100%;position: absolute;left: 0;top:0;filter: blur(20px);z-index: -1;}
.game-iframe-container .game-play-box .game-img{width: 180px;height:180px;border-radius: 30px;}
.game-iframe-container .game-play-box .game-title{font-size:16px;margin-top:15px;color:#fff}
.game-iframe-container .game-play-box .start-game-btn{margin-top:30px;background:linear-gradient(180deg,#fd0,#ff9012);box-shadow:12px 14px 15px -1px #0003,-20px -11px 15px -1px #fff6;color:#0a0a0a;height:60px;box-sizing:border-box;font-weight:700;width:290px;border-radius:30px;display:inline-flex;font-size:16px;align-items:center;justify-content:center;outline:none;cursor:pointer;border:3px solid #fff}
.game-iframe-container .game-play-box .start-game-btn .triangle-icon{margin-right:15px;display: inline-block;height:8px;width:8px;position:relative;top:-8px;animation: moveIocn 0.8s infinite linear;}
.game-iframe-container .game-play-box .start-game-btn:hover{background:#fd0;color:#4a4a4a}
.game-iframe-container .game-description{margin:15px 0;font-size:18px;line-height:25px;color: #333;}

@media screen and (min-width:768px) {
  .moregame {
      max-width: 1230px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 50px;
  }
  .moregame-tite {
      text-align: center;
      font-size: 40px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #01a9f0;
  }
  .list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 230px));
      width: 100%;
      gap: 20px;
      justify-content: center;
  }
  .list-item {
      position: relative;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
  }
  .list-item-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      border-radius: 10px;
      overflow: hidden;
      box-sizing: border-box;
      border: 5px solid #fff;
  }
  .list-item-wrapper:hover .wrapper-img {
      transform: translate(-50%, -50%) scale(1.1);
  }
  .wrapper-img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10px;
      transition: transform 200ms linear ;
  }
  .list-item-name {
      display: flex;
      align-items: center;
      height: 30px;
      padding: 0 5px;
  }
  .list-item-name__text {
      max-width: 230px;
      min-width: 160px;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #000;
  }
}

@media screen and (max-width:767px) {
  .moregame {
      width: 6.2rem;
      margin: .1rem auto;
  }
  .moregame-tite {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 0.1rem;
      color: #01a9f0;
  }
  .list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .2rem;
      justify-content: center;
  }
  .list-item {
      position: relative;
      border-radius: .1rem;
      background-color: #fff;
      box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
  }
  .list-item-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      border-radius: .1rem;
      overflow: hidden;
      box-sizing: border-box;
      border: .05rem solid #fff;
  }
  .list-item-wrapper:hover .wrapper-img {
      transform: translate(-50%, -50%) scale(1.1);
  }
  .wrapper-img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: .1rem;
      transition: transform 200ms linear ;
  }
  .list-item-name {
      display: none;
  }
}