@charset "UTF-8"; /** * * @authors Your Name (you@example.org) * @date 2017-07-04 19:05:07 * @version $Id$ */ * { margin: 0; padding: 0; } a { color: #fff; text-decoration: none; } ul, ol { list-style-type: none; } img { border: 0 none; } .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: 101; text-align: center; } .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 center; 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; } .img-preload { position: absolute; top: -9999px; left: -9999px; } .img-preload img { width: 1px; height: 1px; } @-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; } } .effect-layer { z-index: 9; width: 100%; height: 100vh; position: fixed; background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/noise.png'); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); pointer-events: none; -webkit-animation: noise 1s steps(10) infinite; animation: noise 1s steps(10) infinite; } @-webkit-keyframes noise { 0%,100%{background-position:0 0} 10%{background-position:-5% -10%} 20%{background-position:-15% 5%} 30%{background-position:7% -25%} 40%{background-position:20% 25%} 50%{background-position:-25% 10%} 60%{background-position:15% 5%} 70%{background-position:0% 15%} 80%{background-position:25% 35%} 90%{background-position:-10% 10%} } @keyframes noise { 0%,100%{background-position:0 0} 10%{background-position:-5% -10%} 20%{background-position:-15% 5%} 30%{background-position:7% -25%} 40%{background-position:20% 25%} 50%{background-position:-25% 10%} 60%{background-position:15% 5%} 70%{background-position:0% 15%} 80%{background-position:25% 35%} 90%{background-position:-10% 10%} } .m-header { /*position: fixed;*/ /*min-width: 960px;*/ font-family: "PingFang SC", "Arial", "STXihei", "Microsoft YaHei"; font-weight: 300; } .header-logo { z-index: 1; width: 160px; height: 160px; position: fixed; left: 1.4rem; top: 0; background: url('https://airsmart-web.oss-cn-shanghai.aliyuncs.com/maoking/maoking_guangwang/logo.png') no-repeat; background-size: cover; /* border-bottom-left-radius: 5px; */ /* border-bottom-right-radius: 5px; */ } .nav-wrap { z-index: 1; position: fixed; /* width: 350px; */ /* left: calc(100% - 350px); */ /* left: -moz-calc(100% - 350px); */ right: 0; height: 50px; line-height: 50px; color: #fff; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/nav_bg.png'); background-size: cover; } .nav-version { /* width: 270px; */ height: 50px; font-size: 0; padding-left: 30px; right: 100px; border-bottom-left-radius: 50px; } .nav-version-item { opacity: 0.6; width: auto; display: inline-block; font-size: 16px; padding: 0 15px; } .nav-version-item:hover { opacity: 1; } .nav-lang { pointer-events: none; opacity: 0; position: relative; float: right; width: 60px; height: 50px; overflow: hidden; font-size: 16px; background-color: rgba(17,17,17,0.7); -webkit-transition: height 0.3s; transition: height 0.3s; } .nav-lang::before { display: inline-block; content: ''; border: 5px solid #8D8C8A; border-color: #8D8C8A transparent transparent transparent; position: absolute; left: 50%; top: 85%; margin-top: -5px; margin-left: -5px; } .nav-lang:hover { height: 96px; } .nav-lang:hover::before { opacity: 0; } .nav-lang:hover > .nav-lang-hidden { z-index: 1; opacity: 1; background-color: rgba(17,17,17,0.7); } .nav-lang-show { z-index: 1; opacity: 1; background-color: rgba(17,17,17,0.7); } .nav-lang-current { } .nav-lang-hidden { position: relative; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .nav-lang-item { cursor: pointer; opacity: 0.5; } .nav-lang-item:hover { opacity: 1; } .nav-shop { /* // display: none; */ float: right; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #b32121; font-size: 16px; cursor: pointer; } /* // .nav-shop img { // position: relative; // top: 2px; // } */ .nav-shop:hover { background-color: #d34141; } .subnav-wrap { z-index: 1; position: fixed; /* // left: 140px; */ left: 1.4rem; top: 70px; width: 160px; line-height: 60px; } .subnav-logo { width: 160px; height: 90px; position: relative; /* background: url('https://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/logo16.png') no-repeat center center; */ /* background-size: cover; */ border-top-left-radius: 5px; border-top-right-radius: 5px; } .subnav-thumb { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 60px; background-color: #1a1a1a; position: absolute; z-index: 0; top: 100%; left: 0; color: #8D8C8A; font-size: 14px; text-align: right; line-height: 60px; padding: 0 0.45rem; } .subnav-thumb::before { display: inline-block; content: ''; width: 20px; height: 20px; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/subnav_thumb.png') no-repeat center center; background-size: contain; position: absolute; top: 50%; left: 0.45rem; margin-top: -10px; } .subnav-main-wrap { position: relative; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/subnav_bg.jpg') no-repeat; background-size: cover; background-position: top left; /* border-bottom-left-radius: 9px; */ /* border-bottom-right-radius: 9px; */ } .subnav-main-item, .subnav-sub-item, .subnav-thr-item { position: relative; /* // font-size: 14px; */ color: #8D8C8A; padding: 0 0.45rem; cursor: pointer; white-space: nowrap; } .subnav-sub-item:last-child > .subnav-thr-wrap{ /* margin-top: -4.05rem; */ /* margin-top: -240px; */ top: -400%; } .subnav-main-item { font-size: 14px; } .subnav-sub-item { text-align: center; padding: 0; } .subnav-main-item:hover, .subnav-sub-item:hover, .subnav-thr-item:hover { color: #fff; } .subnav-main-item:hover::before, .subnav-sub-item:hover::before, .subnav-thr-item:hover::before { display: inline-block; content: ''; border: 5px solid #fff; border-color: transparent transparent transparent #fff; position: absolute; left: 0.3rem; top: 50%; margin-top: -5px; } .subnav-sub-wrap { font-size: 0; width: 0; position: absolute; overflow: hidden; top: 0; left: 160px; background-color: rgba(19,19,19,0.85); -webkit-transition: width 0.5s, font-size 0.01s 0.25s; transition: width 0.5s, font-size 0.01s 0.25s; } .submenu:hover > .subnav-sub-wrap, .thrmenu:hover > .subnav-thr-wrap { font-size:14px; width: 200px; overflow: visible; } ::-webkit-scrollbar{ width: 10px; } ::-webkit-scrollbar-thumb{ background: #000; border-radius: 50px; border: 1px solid #FFF; } ::-webkit-scrollbar-track-piece{ background: #FFF; } .subnav-thr-wrap { width: 0; position: absolute; overflow: hidden; top: 0; left: 200px; background-color: rgba(19,19,19,0.85); -webkit-transition: width 0.5s; transition: width 0.5s; } .shop-qr { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 10; } .shop-qr > img { width: 200px; height: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; pointer-events: none; } @media (max-width: 1600px) { .header-logo { width: 140px; height: 140px; /* //left: 120px; */ } .nav-wrap { height: 42px; line-height: 42px; font-size: 14px; } .nav-lang { height: 42px; } .nav-lang:hover { height: 84px; } .nav-shop { height: 42px; line-height: 42px; } .subnav-wrap { width: 140px; /* //left: 120px; */ top: 60px; line-height: 60px; } .subnav-logo { width: 140px; height: 78.75px; } .subnav-sub-wrap { left: 140px; } .subnav-thr-wrap { left: 180px; } .submenu:hover > .subnav-sub-wrap, .thrmenu:hover > .subnav-thr-wrap { width: 180px; } .video-tv > img{ width: 85%; } } @media (max-width: 1280px) { .header-logo { width: 120px; height: 120px; /* //left: 100px; */ } .nav-wrap { height: 36px; line-height: 36px; font-size: 12px; } .nav-lang { height: 36px; } .nav-lang:hover { height: 72px; } .nav-shop { height: 36px; line-height: 36px; } .subnav-wrap { width: 120px; /* //left: 100px; */ top: 50px; line-height: 50px; } .subnav-main-item, .subnav-sub-item, .subnav-thr-item { font-size: 12px; } .subnav-logo { width: 120px; height: 67.5px; } .subnav-sub-wrap { left: 120px; } .subnav-thr-wrap { left: 160px; } .submenu:hover > .subnav-sub-wrap, .thrmenu:hover > .subnav-thr-wrap { width: 160px; } .video-tv > img{ width: 70%; } } .subnav-sub-back, .subnav-thr-back { 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%; } .nav-wrap { z-index: 1; position: fixed; width: 100%; height: 1rem; left: 0; line-height: 1rem; color: #fff; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/nav_bg.png') right center; background-size: 120% 100%; z-index: 2; } .nav-version { float: right; padding-left: 0 !important; width: calc(100% - 2rem); height: 1rem; font-size: 0; border-radius: 0; } .nav-version-item { width: 33.33%; opacity: 0.6; /* //width: auto; */ display: inline-block; font-size: 0.2rem; text-align: center; padding: 0; /* // padding: 0 0.2rem 0 0; */ } .nav-lang { /* // display: none; */ width: 0.8rem; height: 1rem; font-size: 0.2rem } .nav-lang:hover { height: 1rem; } .nav-lang:hover::before { opacity: 1; } .nav-lang:hover > .nav-lang-hidden { /* // z-index: 0; // opacity: 0; // background-color: rgba(17,17,17,0.7); */ background-color: rgb(17,17,17); } .nav-lang-item:hover { opacity: 0.5; } .nav-shop { font-size: 0.2rem; width: 0.8rem; height: 1rem; line-height: 1rem; } .nav-menu { float: left; display: inline-block; width: 1rem; height: 1rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/subnav_thumb.png') no-repeat center center; } .header-logo { width: 1rem; height: 1rem; left: 0; top: 1rem; } .subnav-wrap { width: 100%; top: 2.1rem; left: 0; } .subnav-logo { width: 1rem; height: 0.5rem; } .subnav-main-wrap { display: none; position: fixed; width: 100%; top: 1rem; background-color: rgba(0,0,0,0.8); background-image: none; border-radius: 0; z-index: 1; } .subnav-main-item, .subnav-sub-item, .subnav-thr-item { width: 100%; text-align: center; padding: 0; margin: 0; height: 1rem; line-height: 1rem; border-bottom: 1px solid #333; font-size: 0.28rem; /* // background-color: rgba(0,0,0,0.8); */ } .subnav-main-item:hover, .subnav-sub-item:hover, .subnav-thr-item:hover { color: #8D8C8A; } .subnav-main-item:after, .subnav-sub-item:after, .subnav-thr-item:after { content: ''; display: inline-block; width: 10px; height: 10px; border: 1px solid #fff; border-color: #fff #fff transparent transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 25px; top: 50%; margin-top: -6px; } .subnav-main-item:hover::before, .subnav-sub-item:hover::before, .subnav-thr-item:hover::before { display: none; } .subnav-thumb { display: none; } .subnav-sub-wrap, .subnav-thr-wrap { display: none; width: 100%; position: fixed; top: 1rem; left: 100%; padding: 0; margin: 0; } .submenu:hover > .subnav-sub-wrap, .thrmenu:hover > .subnav-thr-wrap { width: 100%; } .subnav-sub-back, .subnav-thr-back { color: #8D8C8A; display: block; width: 100%; text-align: center; padding: 0; height: 1rem; line-height: 1rem; border-bottom: 1px solid #333; font-size: 0.28rem; /* //background-color: rgba(0,0,0,0.8); */ } .nav-version-current { background-color: rgba(222,222,222,0.3); opacity: 1; } } @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%; } }