: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-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; } .btn.big { padding: 15px 8px; font-size: 18px; } .btn:hover { background: var(--main-hover-color); } .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; } /* */ .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; } /* */ .show-btn, #pop-show, #loading-box { display: none; } #pop-show, #loading-box { z-index: 1000; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; } #pop-show .bd, #loading-box .bd { position: fixed; top: 50%; left: 50%; padding: 15px; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; text-align: center; } #loading-box .bd { padding: 30px 50px; text-align: center; } #loading-box .bd p { margin: 15px 0 0; } #pop-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; } .mask { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); } .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.75); } .pop-box .pop-top { padding: 1px 13px 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: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pop-box .pop-bd .closed-btn { 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)); } }

/* Safari 特有的 hack，覆盖 transform */

  @media not all and (min-resolution: 0.001dpcm) {
    /* 触发 Safari Hack 区 */
    .template-footer ul li a:hover img,
    .template-footer ul li.active a img {
      transform: none !important;
    }
  }
  


  @supports (-webkit-hyphens: none) and (not (-ms-ime-align: auto)) {
    .template-footer ul li a:hover img,
    .template-footer ul li.active a img {
      transform: none !important;
    }
  }
  