:root { --main-color: #01875f; --main-hover-color: #01533b; } :root[data-type='google'] { --main-color: #01875f; --main-hover-color: #01533b; } html, body { width: 100%; height: 100%; } html, body, div, iframe, ul, li, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } ul, li { list-style: none; } h1, h2, h3, h4, h5, h6, em, strong, a { font-size: inherit; font-weight: inherit; font-style: inherit; font-family: inherit; } a { text-decoration: none; } button { background: none; border: none; } body { font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 0.875rem; line-height: 1.25rem; color: #5f6368; } /* -------------------- */ .main-body { overflow: hidden; background: no-repeat center; background-size: cover; } #iframe-main { width: 100vw; height: 100vh; overflow: hidden; } .iframe-box { width: 100%; height: 100%; overflow: auto; border: none; } /* -------------------- */ .main-up, .information-list, .btn-box, .banner-imgs-box, .introduce { margin: 24px 24px 0; } /* */ .main-up { display: flex; align-items: center; } .main-up .logo { position: relative; width: 72px; height: 72px; margin-right: 24px; border-radius: 20%; } .main-up .logo.ami { overflow: hidden; } .main-up .logo img { display: block; width: 100%; } .main-up .logo .box, .loading-ci .box { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 2px solid transparent; border-left: 2px solid var(--main-color); border-right: 2px solid var(--main-color); border-radius: 50%; animation: turn 1s linear infinite; transform-origin: 50% 50%; } @keyframes turn { 100% { transform: rotateZ(-1turn); } } .main-up .logo.ami img { width: 50%; margin: 18px auto; animation: all 0.3; } .main-up .logo.ami .box { display: block; } .main-up .info h1 { color: #202124; font-size: 24px; } .main-up .info h2 { margin-top: 5px; color: var(--main-color); font-size: 16px; } .main-up .info p { font-size: 12px; } /* */ .information-list { display: flex; align-items: center; } .information-list li { position: relative; flex: 1; text-align: center; } .information-list li img { width: 12px; } .information-list li img.large { width: 28px; } .information-list li strong { display: block; height: 28px; line-height: 28px; font-weight: 600; color: #202124; } .information-list li p { font-size: 12px; } .information-list li:before { background-color: rgb(232, 234, 237); content: ''; display: block; height: 24px; left: 0; position: absolute; top: calc(50% - 12px); width: 1px; } .information-list li:first-child:before { display: none; } /* */ .btn-box { position: relative; overflow: hidden; } .shiny:after { animation: shiny-btn-anim 4s ease-in-out infinite; background-color: #fff; content: ''; display: inline-block; height: 100%; left: 0; position: absolute; top: -180px; width: 30px; } @keyframes shiny-btn-anim { 0% { opacity: 0; transform: scale(0) rotate(45deg); } 80% { opacity: 0.5; transform: scale(0) rotate(45deg); } 81% { opacity: 1; transform: scale(4) rotate(45deg); } 100% { opacity: 0; transform: scale(50) rotate(45deg); } } .btn { display: block; width: 100%; padding: 10px 8px; background: var(--main-color); border-radius: 8px; color: #fff; cursor: pointer; gap: 8px; } .btn.btn-img { display: flex; align-items: center; justify-content: center; } .btn.btn-img img { width: 20px; } .btn.big { padding: 15px 8px; font-size: 18px; } .btn:hover { background: var(--main-hover-color); } .btn.btn-border { color: var(--main-color); border: var(--main-color) 1px solid; background: transparent; } .btn.btn-border:hover { border-color: var(--main-hover-color); color: var(--main-hover-color); background: transparent; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn:disabled:hover { background: var(--main-color); } .btn:active { background: var(--main-color); } .btn .con { display: flex; flex-direction: column; } .btn .con p { display: flex; justify-content: center; margin-bottom: 3px; gap: 5px; font-size: 15px; color: #ffe336; } .btn .con img { width: 12px; } .btn + .btn { margin-top: 8px; } #installing { position: relative; width: 100%; background: none; border: var(--main-color) 1px solid; box-sizing: border-box; color: #ffe336; text-align: center; overflow: hidden; } #installing #proess { z-index: 0; position: absolute; left: 0; top: 0; height: 100%; background: var(--main-color); } #installing > * { z-index: 1; position: relative; } /* */ .banner-imgs-box { overflow-x: auto; overflow-y: hidden; } .banner-imgs { display: flex; flex-wrap: nowrap; width: fit-content; height: 224px; } .banner-imgs li { border-radius: 8px; height: 224px; margin-right: 11px; overflow: hidden; } .banner-imgs li img { display: block; height: 100%; } .banner-imgs-box.landscape .banner-imgs, .banner-imgs-box.landscape .banner-imgs li { height: 168px; transition: all 0.5s; } /* */ .introduce { padding-bottom: 16px; } .introduce h2 { margin-bottom: 20px; color: #202124; } .introduce > div { white-space: pre-wrap; } /* */ #loading, #reInstall, #play, #installing { display: none; } body[data-type='BEFORE_LOADING'] #loading { display: block; } body[data-type='BEFORE_LOADING'] #reInstall, body[data-type='BEFORE_LOADING'] #play, body[data-type='BEFORE_LOADING'] #installing { display: none; } body[data-type='LOADING'] #reInstall, body[data-type='INSTALL'] #reInstall { display: block; } body[data-type='LOADING'] #play, body[data-type='LOADING'] #installing, body[data-type='LOADING'] #loading, body[data-type='INSTALL'] #play, body[data-type='INSTALL'] #installing, body[data-type='INSTALL'] #loading { display: none; } body[data-type='PLAY'] #play { display: block; } body[data-type='PLAY'] #reInstall, body[data-type='PLAY'] #installing, body[data-type='PLAY'] #loading { display: none; } body[data-type='INSTALLING'] #installing { display: block; } body[data-type='INSTALLING'] #reInstall, body[data-type='INSTALLING'] #play, body[data-type='INSTALLING'] #loading { display: none; } /* */ .show-logo, .sold-out { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .show-logo img, .sold-out img { display: block; width: 80px; height: 80px; border-radius: 8px; } .show-logo p, .sold-out p { margin-top: 15px; font-weight: 600; } .show-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* */ #user-choose-show, .show-btn, #pop-show, #loading-box, #deferredprompt-loading-box, #open-chrome { display: none; } #pop-show, #loading-box, #deferredprompt-loading-box, #open-chrome, #user-choose-show { z-index: 1000; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; } #pop-show .bd, #loading-box .bd, #deferredprompt-loading-box .bd, #open-chrome .bd, #user-choose-show .bd { position: fixed; top: 50%; left: 50%; padding: 15px; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; text-align: center; box-sizing: border-box; } #loading-box .bd, #deferredprompt-loading-box .bd { padding: 30px 50px; text-align: center; } #loading-box .bd p, #deferredprompt-loading-box .bd p { margin: 15px 0 0; } #pop-show .bd, #user-choose-show .bd { width: 70vw; } #pop-show .bd strong { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 20px; font-weight: 600; } #pop-show .bd p { display: inline-block; margin: 10px 0 0; padding: 0 10px; font-size: 14px; color: #666; border: #666 1px solid; border-radius: 3px; } #pop-show .bd .active-box { margin: 20px 0; } #pop-show .bd .active-box span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 20px; border-radius: 20px; background: rgba(119, 250, 73, 0.3); color: #01875f; font-weight: 600; font-size: 16px; } #user-choose-show .user-btn-box { margin-top: 20px; display: flex; gap: 20px; } #user-choose-show .bd p { font-weight: 600; color: #000; } #user-choose-show .user-btn-box .btn + .btn { margin: 0; } .mask { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); } .loading-ci { display: flex; align-items: center; justify-content: center; position: relative; width: 72px; height: 72px; margin: 15px auto 0; color: #01875f; } .loading-ci .box { display: block; } .rotate { animation: loadingCircle 1s infinite linear; } @keyframes loadingCircle { 100% { transform: rotate(-360deg); } } /* -------------template---------------------- */ .template-head { position: fixed; top: 0; left: 0; width: 100%; z-index: 3; background-color: #fff; transition: box-shadow 0.2s ease-in-out; } .template-head.scroll { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .template-head .box { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 56px; padding: 0 24px; box-sizing: border-box; } .template-head .box .l a { display: flex; align-items: center; font-size: 22px; color: rgb(95, 99, 104); font-family: 'Google Sans', Roboto, Arial, sans-serif; gap: 8px; white-space: nowrap; } .template-head .box .l a svg { width: 40px; height: 40px; } .template-head .box .l img { width: 40px; height: 40px; } .template-head .box .r { display: flex; align-items: center; } .template-head .box .r a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; border-radius: 100%; transition: background 0.2s ease-in-out; } .template-head .box .r a:hover { background: #eee; } .template-footer { position: fixed; bottom: 0; left: 0; z-index: 3; width: 100%; height: 56px; background-color: #fff; border-top: 1px solid rgb(218, 220, 224); } .template-footer ul { display: flex; height: 56px; align-items: center; justify-content: center; } .template-footer ul li { flex: 1; text-align: center; overflow: hidden; } .template-footer ul span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .template-footer ul li p { width: 24px; height: 24px; margin: 0 auto 2px; overflow: hidden; } .template-footer ul li a { color: rgb(95, 99, 104); } .template-footer ul li a:hover, .template-footer ul li.active a { color: var(--main-color); } .template-footer ul li a:hover img, .template-footer ul li.active a img { filter: drop-shadow(var(--main-color) 80px 0); border-left: 1px solid transparent; border-right: 1px solid transparent; transform: translateX(-80px); } .template-bd { padding: 56px 0; } .google-share-btns { margin-top: 15px; display: flex; align-items: center; justify-content: center; color: var(--main-color); gap: 20px; } .google-share-btns li { display: flex; align-items: center; gap: 8px; } .google-share-btns svg { fill: var(--main-color); } :root[data-type='google'] .banner-imgs-box { margin-top: 70px; } :root[data-type='google'] .introduce h2 { font-size: 18px; font-weight: bold; } :root[data-type='google'] .main-up .logo img { border-radius: 20%; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); } .update-box { margin: 24px 24px 0; } .update-box h3 { font-weight: bold; color: rgb(32, 33, 36); } .update-box p { margin-top: 4px; } .data-safety-list { margin: 20px 24px; border: rgb(218, 220, 224) 1px solid; border-radius: 8px; padding: 20px; } .data-safety-list li { display: flex; align-items: flex-start; } .data-safety-list li + li { margin-top: 20px; } .data-safety-list li img { margin-right: 20px; } .data-safety-list li p { font-size: 12px; } .data-safety-list li p span { text-decoration: underline; } .data-safety-list > p { margin-top: 20px; color: var(--main-color); } /* */ .pop-box { display: flex; flex-direction: column; z-index: 4; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.85); } .pop-box .pop-top { padding: 1px 0 10px; background: #fff; } .pop-box .pop-top .template-head { position: static; } .pop-box .pop-top .main-up, .pop-box .pop-top .information-list, .pop-box .pop-top .btn-box { margin-top: 10px; } .pop-box .pop-bd { position: relative; flex: auto; overflow-y: auto; } .pop-box .pop-bd .inbd { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 20px; } .pop-box .pop-bd .closed-btn { z-index: 10; position: absolute; top: 10px; right: 5px; width: 30px; } .pop-box .pop-bd .app-items { display: flex; margin-top: 20px; align-items: center; font-size: 13px; color: #fff; font-weight: bold; } .pop-box .pop-bd .app-items img { width: 25px; margin-left: 5px; } .pop-box .pop-bd .intro { margin-top: 20px; width: 85%; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #ababab; } .turntable-container { padding-top: 80px; text-align: center; width: 100%; /* overflow: hidden; */ } .turntable-container .turntable-title { width: 624px; max-width: 83%; height: auto; } .turntable-container .turntable-content, .turntable-container .turntable-content .turntable-main { position: relative; z-index: 1; width: 572px; overflow: visible; margin: 20px auto; } .turntable-container .turntable-bg { position: absolute; left: -5%; bottom: 0; z-index: 0; width: 650px; /*max-width: calc(624 * (1vw / 7.5));*/ height: auto; } .turntable-container .turntable-halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; width: 650px; /*max-width: calc(624 * (1vw / 7.5));*/ height: auto; } .turntable-container .turntable-coin { position: absolute; right: 14%; bottom: -1%; z-index: 2; width: 117px; /*max-width: calc(624 * (1vw / 7.5));*/ height: auto; } .turntable-container .turntable-content .turntable-main .turntable-bottom { position: relative; z-index: 0; width: 572px; height: auto; transition: all 4s cubic-bezier(0.5, 0.93, 0.43, 1); /*max-width: calc(572 * (1vw / 7.5));*/ } .turntable-container .turntable-content .turntable-main .turntable-light { position: absolute; left: 1%; top: 1%; z-index: 1; width: 562px; height: auto; animation: light-rotate 3s steps(2) infinite forwards; /*max-width: calc(562 * (1vw / 7.5));*/ } .turntable-container .turntable-content .turntable-main .turntable-pointer { position: absolute; left: 50%; bottom: 50%; z-index: 1; transform: translate(-50%, 4%); width: 250px; height: auto; /*max-width: calc(562 * (1vw / 7.5));*/ } .turntable-container .turntable-content .turntable-main .turntable-button { position: absolute; left: 36%; top: 36%; z-index: 2; /*transform: translate(-50%, -50%);*/ width: 160px; height: auto; transition: all linear 0.2s; /*max-width: calc(160 * (1vw / 7.5));*/ } .turntable-container .turntable-content .turntable-main .turntable-button:active { transform: scale(0.9); } .turntable-container .turntable-content .turntable-main .turntable-button img { width: 100%; height: auto; } .turntable-container .turntable-content .turntable-main .turntable-button span { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); font-size: 48px; color: #ffffff; font-weight: bold; text-shadow: -2px -2px 0 #a40106, 2px -2px 0 #a40106, -2px 2px 0 #a40106, 2px 2px 0 #a40106; } @keyframes light-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(30deg); } } @media (max-width: 750px) { .turntable-container { padding-top: calc(80 * (1vw / 7.5)); } .turntable-container .turntable-content, .turntable-container .turntable-content .turntable-main { width: calc(572 * (1vw / 7.5)); } .turntable-container .turntable-bg, .turntable-container .turntable-halo { width: calc(650 * (1vw / 7.5)); } .turntable-container .turntable-coin { width: calc(117 * (1vw / 7.5)); } .turntable-container .turntable-content .turntable-main .turntable-bottom { width: calc(572 * (1vw / 7.5)); } .turntable-container .turntable-content .turntable-main .turntable-light { width: calc(562 * (1vw / 7.5)); } .turntable-container .turntable-content .turntable-main .turntable-pointer { width: calc(250 * (1vw / 7.5)); } .turntable-container .turntable-content .turntable-main .turntable-button { width: calc(160 * (1vw / 7.5)); } .turntable-container .turntable-content .turntable-main .turntable-button span { font-size: calc(48 * (1vw / 7.5)); } } /* */ .statement { /* display: flex; justify-content: space-between; align-items: center; */ padding: 7px; background: #fafbfc; font-size: 12px; color: #333; text-align: center; } .statement a { color: #333; height: 24px; } .statement span { margin: 0 5px; } /* */ .game-bd { padding: 40px 15px 20px; height: 100%; overflow-y: auto; } .game-bd h2, .game-bd h4, .game-bd p { text-align: center; } .game-bd h2, .game-bd h4 { color: #fff; font-weight: bold; } .game-bd h2 { font-size: 25px; } .game-bd h4 { margin: 20px 0 10px; font-size: 21px; } .game-bd p { line-height: 1.5; font-size: 16px; color: #d1d1d1; } .game-bd .img-list { max-width: 750px; display: flex; flex-flow: row wrap; row-gap: 30px; padding-left: -8px; padding-right: -8px; margin: 20px auto 0; box-sizing: border-box; } .game-bd .img-list li { position: relative; flex: 0 0 50%; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } .game-bd .img-list img { display: block; width: 100%; } .game-bd .img-list .in-box { position: relative; } .game-progress-box { position: absolute; bottom: -14px; left: 0; right: 0; height: 14px; line-height: 14px; background: #cecece; font-size: 10px; color: #000; font-weight: bold; } .game-progress-box div { position: absolute; left: -2px; top: -2px; bottom: -2px; background: #ff2e2e; } .game-progress-box div:before { position: absolute; content: ''; left: 0; bottom: 100%; border-style: solid; border-color: transparent transparent #891f1d transparent; border-width: 2px 0 2px 2px; } .game-progress-box div:after { position: absolute; content: ''; left: 100%; top: 0; border-style: solid; border-color: transparent transparent transparent #ff2e2e; border-width: 10px 0 9px 9px; } .game-progress-box span { z-index: 4; position: absolute; left: 15px; } .game-progress-box.green div { background: #11cd30; } .game-progress-box.green div:before { border-color: transparent transparent #0c6b39 transparent; } .game-progress-box.green div:after { border-color: transparent transparent transparent #11cd30; } #open-chrome .bd { width: 90%; padding: 35px 35px 35px 50px; text-align: left; word-wrap: break-word; } #open-chrome .bd .closed-btn { position: absolute; top: 0; right: 0; width: 30px; transform: translateY(-35px); cursor: pointer; } #open-chrome .bd strong { font-weight: bold; } #open-chrome .bd p { color: #1f2024; text-indent: -1.5em; } #open-chrome .bd p:nth-of-type(2) { margin: 30px 0 12px; } #open-chrome .bd #open-chrome .bd .btn { text-align: center; } #open-chrome .bd .btn { margin-top: 12px; text-align: center; } #open-chrome .bd .url-show { display: block; width: 100%; padding: 10px 8px; border: #e0e0e0 1px solid; border-radius: 8px; color: #5f6268; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; } #succeed-con { display: none; padding: 5px 20px; position: fixed; z-index: 1001; left: 50%; top: 20px; transform: translateX(-50%); background: #318269; color: #fff; border-radius: 20px; } /* */ .tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 24px; } .tags span { padding: 10px 12px; border: #e0e0e0 1px solid; color: #5f6268; border-radius: 22px; } .score-box { margin: 24px 24px 0; } .score-box .tit { position: relative; } .score-box .tit:after { content: ''; position: absolute; top: 0; right: 0; width: 14px; height: 14px; background-image: url('../imgs/arrow.svg'); background-size: 100% 100%; } .score-box .tit h3 { color: #1f2024; font-weight: bold; } .score-box .tit p { color: #5f6268; font-size: 10px; } .score-main { display: flex; justify-content: space-between; margin-top: 20px; } .score-main .l em { display: block; line-height: 1.2; font-size: 35px; color: #1f2024; font-weight: bold; } .score-main .l .star { margin: 5px 0; } .score-main .l > span { color: #5f6268; font-size: 10px; } .star { position: relative; width: 65px; height: 12px; background-image: url('../imgs/star.svg'); background-size: 100% 100%; } .star span { width: 50%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('../imgs/star_full.svg'); background-size: auto 100%; } .score-main .r { display: flex; flex-direction: column; flex: 1; max-width: 235px; gap: 8px; } .score-main .r .item { display: flex; align-items: center; gap: 5px; line-height: 1; } .score-main .r .item span { color: #5f6268; font-size: 10px; } .score-main .r .item div { position: relative; flex: 1; height: 5px; background: #e0e0e0; border-radius: 3px; } .score-main .r .item div em { position: absolute; top: 0; left: 0; height: 100%; width: 50%; background: #008a60; border-radius: 3px; } .score-list li { margin-top: 24px; color: #5f6268; } .score-list li .top { display: flex; align-items: center; } .score-list li .top .img { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 100%; overflow: hidden; } .score-list li .top .img img { display: block; width: 100%; height: 100%; object-fit: cover; } .score-list li .top > img { width: 2px; height: 10px; } .score-list li .top em { flex: 1; margin: 0 10px; font-weight: bold; } .score-list li .time { display: flex; align-items: center; margin: 8px 0; font-size: 10px; } .score-list li .time .star { width: 43px; height: 8px; margin-right: 8px; } .score-list li .detail { font-size: 12px; word-wrap: break-word; overflow: hidden; } .show-more { display: block; margin-top: 24px; font-size: 12px; color: #008a60; } .block-img { max-width: 750px; width: 100%; display: block; margin: 0 auto; } /* PC-Game */ .pc-game-hd { background: #212123; } .pc-game-hd .contain { position: relative; max-width: 1200px; padding: 0 20px; margin: 0 auto; overflow: hidden; } .pc-game-hd-banner { max-width: 1125px; position: absolute; top: 0; right: 0; bottom: 0; } .pc-game-hd-banner img { display: block; max-width: 100%; max-height: 100%; } .pc-game-hd .contain .box { padding-top: 50%; padding-bottom: 10%; z-index: 1; position: relative; color: #fff; } .pc-game-hd .app-info { display: none; } .pc-game-hd .app-info h1 { color: #fff; font-size: 54px; line-height: 1.5; font-weight: 900; } .pc-game-hd .app-info h2 { margin-top: 5px; color: #6df378; font-size: 16px; } .pc-game-hd .app-info p { font-size: 16px; color: #c8c8c8; } .pc-game-hd .app-logo { margin: 30px 0; display: block; align-items: center; } .pc-game-hd .app-logo .main-up { margin: 0 0 20px; } .pc-game-hd .app-logo .main-up .info h1 { color: #fff; } .pc-game-hd .app-logo .main-up .info h2 { color: #6df378; } .pc-game-hd .app-logo .main-up .info p { font-size: 12px; color: #c8c8c8; } .pc-game-hd .information-list { display: inline-flex; margin: 0; } .pc-game-hd .information-list li { padding: 0 25px; } .pc-game-hd .information-list li:first-child { padding-left: 0; } .pc-game-hd .information-list li:before { background-color: #3c4043; } .pc-game-hd .information-list li strong { color: #fff; } .pc-game-hd .information-list li p { color: #c8c8c8; white-space: nowrap; } .app-tool { display: block; align-items: center; gap: 35px; } .app-tool .btn-box, .app-tool .btn-box .btn { margin: 0; } .app-tool .btn { padding: 10px; min-width: 250px; background: #6df378; color: #000; font-size: 14px; } .app-tool .google-share-btns { margin-top: 25px; font-size: 14px; color: #6df378; } .app-tool .google-share-btns svg { fill: #6df378; } .pc-game-hd-banner::after { content: ' '; position: absolute; bottom: 0; right: 0; top: 0; left: 0; background: linear-gradient(to right, rgb(33, 33, 35) 0, rgba(0, 0, 0, 0) 56%), linear-gradient(to top, rgb(33, 33, 35) 0, rgba(0, 0, 0, 0) 56%), linear-gradient(to left, rgb(33, 33, 35) 0, rgba(0, 0, 0, 0) 56%); } .pc-game-bd { max-width: 1200px; padding: 0 20px; margin: 0 auto; } .pc-game-bd .introduce h2 { font-size: 24px; font-weight: bold; } .pc-game-bd .main-up, .pc-game-bd .information-list, .pc-game-bd .btn-box, .pc-game-bd .banner-imgs-box, .pc-game-bd .introduce { margin: 40px 0 0 !important; } .pc-game-bd .update-box, .pc-game-bd .data-safety-list { margin-inline: 0; } .pc-game-bd .introduce > div { /* white-space: normal; */ } @media screen and (min-width: 750px) { .pc-game-bd .banner-imgs-box.landscape .banner-imgs, .pc-game-bd .banner-imgs-box.landscape .banner-imgs li { height: 300px; } .app-tool, .pc-game-hd .app-logo { display: flex; } .app-tool .google-share-btns { font-size: 16px; margin: 0; } .pc-game-hd .contain .box { padding-top: 20%; padding-bottom: 5%; } .app-tool .btn { font-size: 16px; padding: 15px; } .pc-game-hd .app-logo .main-up, .pc-game-hd .app-logo .main-up .logo { margin: 0; } .pc-game-hd .app-logo .main-up .info { display: none; } .pc-game-hd .app-info { display: block; } .pc-game-hd .information-list li:first-child { padding-left: 25px; } }