body{background-color:#03a3c7;margin:0px;padding:0px;} .bottom-text{padding: 2px 12px;background-color: #fff;border-radius: 12px;line-height: 22px;font-size: 18px;}.topline{height:5px;overflow:hidden}.topline:before{display:inline}.close2{display:none}#loading-img{display:none !important;width:100%;max-height:350px}.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: 16px; justify-content: space-between}.box1 img,.box2 img{border-radius: 12px; width: 94px} .box1 .game-name,.box2 .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: 18px 16px;box-sizing: border-box;display: flex;justify-content: center;flex-direction: column;align-items: center;font-size: 14px;width: 100%} .box1 .game-big,.box2 .game-big{grid-row-start: 2; grid-row-end: 4; grid-column-start: 2; grid-column-end: 4;} .box2{margin: 10px 0px;}.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;}

.adv{text-align:center}

.top-icon img{width: 90px; height: 40px;}
.top-icon-2 #home{width: 20px;height: 17px;}.top-icon-2 #search{width: 18px;height: 18px;}
.game-name h1{font-size: 18px}

.box3{padding-left: 0}
.box3 li{padding: 5px 0; width: 100%;color:#625e5e;background-color:rgba(255,255,255,0.9);height:38px;margin-top:3px;margin-bottom:3px;border-radius:8px;display:flex;align-items:center;padding-left:20px}
.box3 li a{font-size:20px;text-decoration:none;color:#625e5e;}

.adv:first-child{background-color: transparent;border-bottom: 2px solid rgb(255, 246, 246)}
.adv .desc{position:relative;bottom: -10px;padding-bottom: 0px;width: 100%;text-align: center;font-size: 9px;color: gray;margin-bottom: 0px;margin-top: 2px;}
.s2 .desc{display:block}
.close1{background-color: #fff6f6;padding: 5px 15px;font-size: 18px;left:18px; width: 25px; height: 14px;position: absolute;bottom: -24px}
.close1{border-radius: 0 0 4px 4px;text-align: center}
.close1::before,.close1::after{
  position: absolute;
  top: 0;
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0 0 0 40px #fff6f6;/*使用box-shadow不影响尺寸*/
  transition: .2s;
}
.close1::before{
  left: -20px;
  clip-path: inset(0 -10px 50% 50%);
}
.close1::after{
  right: -20px;
  clip-path: inset(0 50% 50% -10px);
}

@media screen and (orientation:portrait){
  .adv{position:relative;width:100%;margin-bottom: 8px;}.s2{margin-top:8px;}
}

@media screen and (min-width: 1000px){
  .adv{position:relative;width:100%;margin-bottom: 24px;}.s2{margin-top:8px}.box-outer{max-width: 800px}.box1 img, .box2 img{width: 244px}.box1, .box2{grid-template-rows: repeat(auto-fill,244px);grid-template-columns:repeat(3, 244px)}
  .logo{width: 244px; height: 244px}.logo .top-icon{height: 68px;margin-top: 80px}
   .box3 img{width:340px;height:340px}
  .top-icon img{width: 150px; height: 60px;}
  .top-icon-2 #home{width: 35px;height: 28px;}.top-icon-2 #search{width: 32px;height: 32px;}
  .game-name h1{font-size: 38px}
}

@media only screen and (max-width: 350px) {
    .box3 img{width:120px;height:120px}
}