@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: 480px; // temp width: 3600px; left: calc(100% - 300px); left: -moz-calc(100% - 300px); height: 50px; line-height: 50px; color: #fff; text-align: center; 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 { float: right; width: 300px; height: 50px; font-size: 0; // temp right: 50px; border-bottom-left-radius: 50px; }*/ .nav-wrap { z-index: 1; position: fixed; width: 410px; left: calc(100% - 410px); left: -moz-calc(100% - 410px); height: 50px; line-height: 50px; color: #fff; text-align: center; 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 { float: right; width: 400px; height: 50px; font-size: 0; right: 100px; border-bottom-left-radius: 50px; } .nav-version-item { opacity: 0.6; width: auto; display: inline-block; font-size: 14px; padding: 0 15px; } .nav-version-item:hover { opacity: 1; } .nav-lang { /* display: none; */ position: relative; float: right; width: 60px; height: 50px; overflow: hidden; font-size: 14px; 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: 144px; } .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: 14px; 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('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E5%85%B1%E9%80%9A/subnav_logo.jpg') 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: 12px; 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-main-item { font-size: 12px; } .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: url('../../static/subnav_bg.jpg'); */ 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 { font-size:12px; width: 200px; overflow: visible; } .subnav-thr-wrap { width: 0; position: absolute; overflow: hidden; top: 0; left: 160px; background-color: rgba(19,19,19,0.85); -webkit-transition: width 0.5s; transition: width 0.5s; } .subnav-sub-item:hover > .subnav-thr-wrap { width: 160px; } @media (max-width: 1600px) { .header-logo { width: 140px; height: 140px; /* //left: 120px; */ } .nav-wrap { height: 42px; line-height: 42px; font-size: 12px; } .nav-lang { height: 42px; } .nav-lang:hover { height: 126px; } .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, .subnav-thr-wrap { left: 140px; } .submenu:hover > .subnav-sub-wrap, .subnav-sub-item: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: 108px; } .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, .subnav-thr-wrap { left: 120px; } .submenu:hover > .subnav-sub-wrap, .subnav-sub-item:hover > .subnav-thr-wrap { width: 160px; } .video-tv > img{ width: 70%; } } .subnav-sub-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; text-align: center; 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 { display: table; float: right; width: calc(100% - 1rem); height: 1rem; font-size: 0; border-radius: 0; } .nav-version a { display: table-cell; vertical-align: middle; } .nav-version-item { display: table-cell; vertical-align: middle; width: 33.33%; height: 1rem; line-height: 0.3rem; opacity: 0.6; /* // width: auto; */ /* // display: inline-block; */ font-size: 12px; text-align: center; padding: 0 5px; /* // padding: 0 0.2rem 0 0; */ } .nav-lang { /* // display: none; */ width: 0.8rem; height: 1rem; font-size: 12px; } .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: 12px; 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 { width: 100%; text-align: center; padding: 0; margin: 0; height: 1rem; line-height: 1rem; border-bottom: 1px solid #333; font-size: 12px; /* // background-color: rgba(0,0,0,0.8); */ } .subnav-main-item:hover, .subnav-sub-item:hover { color: #8D8C8A; } .subnav-main-item:after, .subnav-sub-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 { display: none; } .subnav-thumb { display: none; } .subnav-sub-wrap { display: none; width: 100%; position: fixed; top: 1rem; left: 100%; padding: 0; margin: 0; } .submenu:hover > .subnav-sub-wrap { width: 100%; } .subnav-sub-back { color: #8D8C8A; display: block; width: 100%; text-align: center; padding: 0; height: 1rem; line-height: 1rem; border-bottom: 1px solid #333; font-size: 12px; /* //background-color: rgba(0,0,0,0.8); */ } .nav-version-current { background-color: rgba(222,222,222,0.3); opacity: 1; } .version-maofm { /*display: none;*/ } } @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%; } }