@charset "UTF-8"; /** * * @authors Your Name (you@example.org) * @date 2017-08-01 16:56:17 * @version $Id$ */ * { margin: 0; padding: 0; } html { font-family: "PingFang SC", "STXihei", "Microsoft YaHei"; font-size: 625%; } .footer-wrap { /*display: none;*/ } .subnav-logo { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/subnav_logo_fm.jpg'); } .m-maofm { font-size: 0; } .section { width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } .section-bg { width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } .maofm-1 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_01.jpg'); } .maofm-2 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_02.jpg'); } .maofm-3 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_03.jpg'); } .maofm-4 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_04.jpg'); } .maofm-5 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_05.jpg'); } .maofm-6 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_06.jpg'); } .maofm-7 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_07.jpg'); } .maofm-8 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_default.jpg'); } .maofm-product { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_slide_default.jpg'); } .section-title { display: inline-block; font-size: 0.6rem; color: #ffbc7b; text-align: center; font-weight: 400; position: absolute; top: 50%; letter-spacing: 0.04rem; } .content-title { display: inline-block; font-size: 0.6rem; color: #ffbe7e; text-align: center; font-weight: 600; position: absolute; top: 50%; pointer-events: none; } .section-content, .content-text { display: inline-block; font-size: 0.4rem; color: #fff; text-align: center; position: absolute; top: 50%; pointer-events: none; letter-spacing: 0.02rem; } .section-title, .content-title, .product-title { transition: all 0.7s cubic-bezier(0,0,.2,1); -webkit-transition: all 0.7s cubic-bezier(0,0,.2,1); } .section-content, .content-text, .section-content-wrap, .product-name, .product-img { transition: all 0.7s cubic-bezier(0,0,.2,1) 0.1s; -webkit-transition: all 0.7s cubic-bezier(0,0,.2,1) 0.1s; } .section-price-wrap, .product-content-wrap { transition: all 0.7s cubic-bezier(0,0,.2,1) 0.2s; -webkit-transition: all 0.7s cubic-bezier(0,0,.2,1) 0.2s; } .section-title, .section-content, .section-content-wrap, .product-title { opacity: 0; transform: translateY(0.5rem); -webkit-transform: translateY(0.5rem); } .fp-completely .section-title, .fp-completely .section-content, .fp-completely .section-content-wrap, .fp-completely .product-title { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); } .section-price-wrap, .product-img, .product-name, .product-content-wrap { opacity: 0; /*transform: translate(-50%, 0);*/ /*-webkit-transform: translate(-50%, 0);*/ } .fp-completely .section-price-wrap, .fp-completely .product-img, .fp-completely .product-name, .fp-completely .product-content-wrap { opacity: 1; /*transform: translate(-50%, -50%);*/ /*-webkit-transform: translate(-50%, -50%);*/ } .title-line { width: 1.4rem; height: 2px; background-color: #fff; } /* section-1 */ .maofm-1 .section-title { font-size: 0.9rem; width: 100%; text-align: center; left: 0; margin-top: -2.6rem; letter-spacing: 0.1rem; font-weight: 600; } .maofm-1 .section-content { width: 100%; text-align: center; left: 0; margin-top: -1.2rem; letter-spacing: 0.04rem; } .section-app .app-logo { width: 1.73rem; height: 0.42rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_logo.png') no-repeat center center; background-size: contain; position: absolute; top: 50%; left: 50%; margin: 0.75rem 0 0 -0.865rem; } .section-app .app-qrcode { width: 1.73rem; height: 1.73rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_qrcode.jpg') no-repeat center center; background-size: contain; position: absolute; top: 50%; left: 50%; margin: 1.32rem 0 0 -0.865rem; } .section-app .app-hint { width: 100%; color: #fff; font-size: 0.2rem; text-align: center; position: absolute; top: 50%; margin-top: 3.2rem; } /* section-2 */ .maofm-2 .section-title { width: 5rem; margin: -3.7rem 0 0 -5.6rem; text-align: left; left: 50%; } .maofm-2 .section-content-wrap { /*width: 8rem;*/ position: absolute; top: 50%; left: 50%; margin: -2.8rem 0 0 -5.6rem; } .maofm-2 .content-item { position: relative; margin: 0.45rem 0; } .maofm-2 .content-title { display: block; position: relative; top: 0; left: 0; text-align: left; font-size: 0.4rem; font-weight: normal; } .maofm-2 .content-text { position: relative; top: 0; left: 0; text-align: left; font-size: 0.24rem; margin-top: 0.15rem; line-height: 0.38rem; } /* section-3 */ .maofm-3 .section-title { text-align: right; margin: -1.5rem -1.9rem 0 0; right: 50%; } .maofm-3 .section-content { text-align: right; margin: 0.4rem -2rem 0 0; right: 50%; font-size: 0.2rem; line-height: 0.36rem; } .maofm-3 .section-img { width: 4.69rem; height: 8.06rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_phone_01.png') no-repeat center center; background-size: contain; position: absolute; top: 50%; left: 50%; margin: -4rem 0 0 1.9rem; } .maofm-3 .title-line { position: absolute; top: 50%; right: 50%; margin: -2rem -1.8rem 0 0; } /* section-4 */ .maofm-4 .section-title { width: 100%; margin-top: -4.2rem; } .maofm-4 .section-content { width: 100%; margin-top: -3rem; font-size: 0.2rem; line-height: 0.36rem; } /* section-5 */ .maofm-5 .section-title { left: 50%; margin: -2.5rem 0 0 -5.2rem; text-align: left; } .maofm-5 .section-content { left: 50%; margin: -0.6rem 0 0 -5.2rem; text-align: left; font-size: 0.2rem; line-height: 0.36rem; } .maofm-5 .title-line { position: absolute; top: 50%; left: 50%; margin: -3rem 0 0 -5.2rem; } /* section-6 */ .maofm-6 .section-title { width: 100%; margin-top: -1.2rem; } .maofm-6 .section-content { width: 100%; margin-top: -0.2rem; font-size: 0.2rem; line-height: 0.36rem; } /* section-7 */ .maofm-7 .section-title { text-align: left; margin: -2.3rem 0 0 -0.9rem; left: 50%; line-height: 0.72rem; } .maofm-7 .section-content { text-align: left; margin: -0.5rem 0 0 -0.9rem; left: 50%; font-size: 0.2rem; line-height: 0.36rem; } .maofm-7 .section-img { width: 4.69rem; height: 8.06rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_phone_02.png') no-repeat center center; background-size: contain; position: absolute; top: 50%; right: 50%; margin: -4.4rem 1.1rem 0 0; } .maofm-7 .title-line { position: absolute; top: 50%; left: 50%; margin: -3rem 0 0 -0.86rem; } /* section-8 */ .maofm-8 .section-title { width: 100%; margin-top: -3.8rem; } .maofm-8 .section-content { width: 100%; margin-top: -2.8rem; font-size: 0.2rem; line-height: 0.36rem; } .section-price-wrap { width: 12.3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); margin-top: 0.8rem; } .price { display: inline-block; width: 3.1rem; height: 3.1rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_price_bg.png') no-repeat center center; background-size: contain; position: relative; margin: 0 0.5rem; } .price-num { font-size: 0.8rem; width: 100%; text-align: center; line-height: 3.1rem; color: #ffc28b; font-family: Arial; } .price-middle span { letter-spacing: -0.1rem; } .price-num span { font-size: 1.1rem; color: #ffc28b; } .price-text { width: 100%; text-align: center; font-size: 0.4rem; position: absolute; top: 100%; margin-top: 0.2rem; color: #fff; } /* section-8 */ .maofm-product .product-title { font-size: 0.4rem; color: #ffc28b; text-align: center; position: absolute; top: 50%; width: 100%; margin-top: -4.3rem; } .maofm-product .product-name { font-size: 0.3rem; color: #ffc28b; text-align: center; position: absolute; top: 50%; width: 100%; margin-top: 2rem; } .product-img { width: auto; height: 40vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); margin-top: -0.4rem; } .product-content-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); margin-top: 3.5rem; } .product-content { font-size: 0.24rem; color: #fff; margin: 0.2rem 0; line-height: 0.36rem; letter-spacing: 0.02rem; position: relative; } .product-icon { display: inline-block; width: 0.35rem; height: 0.35rem; position: relative; top: 0.08rem; right: 0.04rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2_circle.png') no-repeat center center; background-size: contain; } /* common */ .scroll-hint { width: 0.2rem; height: auto; position: absolute; top: 90%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .mb-scroll-hint { display: none; } .mb-download-wrap { 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%; } .scroll-hint { display: none; } .mb-scroll-hint { display: inline-block; width: 0.4rem; height: auto; position: absolute; top: 92%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .maofm-1 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_01.jpg'); } .maofm-2 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_02.jpg'); } .maofm-3 { background-position: 50% 80%; background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_03.jpg'); } .maofm-4 { background-position: 50% 0; background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_04.jpg'); } .maofm-5 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_05.jpg'); } .maofm-6 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_06.jpg'); } .maofm-7 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_07.jpg'); } .maofm-8 { background-position: 50% 0; background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_08.jpg'); } .maofm-product { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_09.jpg'); } .product-2 { background-image: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/pindao2m_slide_10.jpg'); } .section-title, .content-title { display: none; } .section-content, .content-text { display: none; } .section-content-wrap { display: none; } .section-img { display: none; } .title-line { display: none; } .section-price-wrap { display: none; } .product-title { display: none; } .product-content { display: none; } .product-name { display: none; } .product-img { display: none; } /* section-1 */ .maofm-1 .section-title { display: none; } .maofm-1 .section-content { display: none; } .maofm-1 .section-app{ display: none; } .mb-download-wrap { display: block; } .download-ios { width: 2.25rem; height: 0.61rem; border-radius: 0.2rem; position: absolute; top: 50%; left: 50%; margin: 2rem 0 0 -1.125rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/btn_ios.png') no-repeat center center; background-size: contain; } .download-android { width: 2.25rem; height: 0.61rem; border-radius: 0.2rem; position: absolute; top: 50%; left: 50%; margin: 3.05rem 0 0 -1.125rem; background: url('http://airsmart-web.oss-cn-shanghai.aliyuncs.com/upload/images/%E9%A2%91%E9%81%93/btn_android.png') no-repeat center center; background-size: contain; } } @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: 345%; } } @media (max-device-width: 360px) { html { font-size: 325%; } } @media (max-device-width: 240px) { html { font-size: 305%; } } .ani-bgscale-x { -webkit-animation: bgscale-x 2s cubic-bezier(0,0,.2,1); animation: bgscale-x 2s cubic-bezier(0,0,.2,1); } .ani-bgscale-y { -webkit-animation: bgscale-y 2s cubic-bezier(0,0,.2,1); animation: bgscale-y 2s cubic-bezier(0,0,.2,1); } @-webkit-keyframes bgscale-x { 0% { -webkit-background-size: 115% auto; background-size: 115% auto; } 100% { -webkit-background-size: 115% auto; background-size: 100% auto; } } @keyframes bgscale-x { 0% { -webkit-background-size: 115% auto; background-size: 115% auto; } 100% { -webkit-background-size: 115% auto; background-size: 100% auto; } } @-webkit-keyframes bgscale-y { 0% { -webkit-background-size: auto 115%; background-size: auto 115%; } 100% { -webkit-background-size: auto 100%; background-size: auto 100%; } } @keyframes bgscale-y { 0% { -webkit-background-size: auto 115%; background-size: auto 115%; } 100% { -webkit-background-size: auto 100%; background-size: auto 100%; } }