@charset "UTF-8"; /** * * @authors Your Name (you@example.org) * @date 2017-07-08 19:32:19 * @version $Id$ */ @font-face { font-family: 'newFont'; src: url('/static/css/HYJKJ.ttf') format('truetype'); } * { margin: 0; padding: 0; } html { font-family: "PingFang SC", "STXihei", "Microsoft YaHei"; font-size: 625%; } .m-loading { width: 100%; height: 100vh; background-color: #202020; background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/loading_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top:0; left: 0; z-index: 1; } .loading-step { width: 282px; height: 220px; background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/loading_sprite2.png'); background-position: 0 0; background-size: auto 100%; position: absolute; top: 50%; left: 50%; margin: -110px 0 0 -141px; -webkit-animation: sprite 2s steps(25) infinite; animation: sprite 2s steps(25) infinite; } .loading-text { opacity: 0.8; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, 110px); transform: translate(-50%, 110px); color: #eaedd7; font-size: 0.16rem; } @-webkit-keyframes sprite { 0% { background-position: 0 center; } 100% { background-position: -7050px center; } } @keyframes sprite { 0% { background-position: 0 center; } 100% { background-position: -7050px center; } } .img-preload { font-family: 'newFont'; position: absolute; top: -9999px; left: -9999px; } .img-preload img { width: 1px; height: 1px; } .m-entry { width: 100%; height: 100vh; position: relative; transition: background-image 0.5s; -webkit-transition: background-image 0.5s; background-repeat: no-repeat; background-position: center 0; background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E8%BF%9B%E5%85%A5%E9%A1%B5/entry_bg_all_2022.jpg'); background-size: cover; overflow: hidden; } .entry-light { width: 100%; height: 100vh; position: absolute; left: 0; top: 0; -webkit-animation: bg-light 4s steps(1) infinite; animation: bg-light 4s steps(1) infinite; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E8%BF%9B%E5%85%A5%E9%A1%B5/entry_bg_lighton.png') no-repeat center 0; background-size: cover; pointer-events: none; } @-webkit-keyframes bg-light { 0% { visibility: hidden; } 10% { visibility: visible; } 13% { visibility: hidden; } 16% { visibility: visible; } 19% { visibility: hidden; } 22% { visibility: visible; } 25% { visibility: hidden; } 39% { visibility: visible; } 80% { visibility: visible; } 81% { visibility: hidden; } 100% { visibility: hidden; } } .entry-item { width: 1.8rem; height: 1.2rem; line-height: 1.2rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform 0.5s ease-out; transition: -webkit-transform 0.5s ease-out; cursor: pointer; text-align: center; } .entry-item img { width: auto; height: 0.5rem; position: absolute; top: 44%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .entry-icon { width: 14px; height: 14px; font-size: 12px; line-height: 16px; color: #e7e5d8; border: 1px solid #e7e5d8; border-radius: 8px; text-align: center; position: absolute; top: 55%; left: calc(50% - 8px); } .entry-icon span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .icon-maoking { margin: 0 -30%; } .icon-maofm { margin: 0 30%; } .entry-item:hover + .entry-icon { background-color: #e7e5d8; color: #000; } .entry-item:hover { -webkit-transform: scale(1.44) translate(-50%, -50%); transform: scale(1.44) translate(-50%, -50%); } .entry-item:hover + .entry-icon + .entry-text { top: 66%; opacity: 1; } .logo-maoking { margin: 0 -30%; } .logo-maoking img{ height: 0.3rem; } .logo-radiooo { margin: 0; } .logo-maofm { margin: 0 30%; } /*.logo-maofm img { height: 0.36rem; }*/ .entry-text { opacity: 0; font-size: 0.24rem; color: #e7e5d8; font-weight: 300; white-space: nowrap; position: absolute; top: 76%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity,top 0.5s,0.5s ease-out; transition: opacity,top 0.5s,0.5s ease-out; text-align: center; } .entry-text::before { display: inline-block; content: ''; width: 0.3rem; height: 4px; background-color: #e7e5d8; position: absolute; bottom: 0.5rem; } .text-maoking { margin: 0 -22%; } .text-radiooo { margin: 0; } .text-maofm { margin: 0 22%; margin-left: 30%; } .entry-lang { display: none; color: #fff; font-size: 0.2rem; opacity: 0.5; } .entry-lang-cn { color: #fff; font-size: 0.2rem; position: absolute; top: 90%; left: 48%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-decoration: none; } .entry-lang-en { color: #fff; font-size: 0.2rem; position: absolute; top: 90%; left: 52%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-decoration: none; } #nfooter { display: none; } @media (min-width: 959px) { html { font-size: 385%; } } @media (min-width: 1279px) { html { font-size: 465%; } } @media (min-width: 1599px) { html { font-size: 545%; } } @media (min-width: 1919px) { html { font-size: 625%; } } @media (max-device-width: 1081px) { html { font-size: 585%; } .m-entry { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E8%BF%9B%E5%85%A5%E9%A1%B5/entry_bg_all_mb.jpg'); } .entry-light { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E8%BF%9B%E5%85%A5%E9%A1%B5/entry_bg_lighton_mb.png'); } .entry-item { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .entry-item img{ height: 0.44rem; } .logo-maoking { margin: 0; top: 55%; } .logo-radiooo { margin: 0; top: 72.5%; } .logo-radiooo img { height: 0.7rem; } .logo-maofm { margin: 0; top: 90%; } .logo-maofm img{ height: 0.66rem; } .entry-icon { display: none; } .entry-item:after { content: ''; display: inline-block; width: 1rem; height: 1px; background-color: #aaa; position: relative; top: 0.27rem; } .entry-item:hover { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .entry-text { display: none; } .entry-lang { font-size: 0.4rem; } .entry-lang-cn { top: 95%; left: 45%; } .entry-lang-en { top: 95%; left: 55%; } } @media (max-device-width: 720px) { html { font-size: 465%; } } @media (max-device-width: 660px) { html { font-size: 445%; } } @media (max-device-width: 600px) { html { font-size: 425%; } } @media (max-device-width: 540px) { html { font-size: 405%; } } @media (max-device-width: 480px) { html { font-size: 385%; } } @media (max-device-width: 420px) { html { font-size: 365%; } } @media (max-device-width: 360px) { html { font-size: 345%; } } @media (max-device-width: 240px) { html { font-size: 305%; } }