.moto360-nav-box{ height: 1.8rem} .moto360-head{position: relative; width: 100%; height: 1.8rem; background: rgba(255,255,255,.96); z-index: 11; box-shadow: 0 3px 3px rgba(0,0,0,.2)} .moto360-head .moto360-logo{ position: absolute; top: .6rem; left: .675rem; width: 3.9rem; height: .64rem; z-index: 3; background: url(../images/overview/s5pro-logo.png) no-repeat; -webkit-background-size: 3.875rem .625rem; background-size: 3.875rem .625rem; font-size: 0} .moto360-head-fixed{position: fixed; top: 44px; left: 0; opacity: 1; -wekbit-transform: translate3d(0,0,0); transform: translate3d(0,0,0)} .moto360-nav{float: right; margin-right: .45rem} .moto360-nav li{float: left; font-size: .45rem; height: 1.8rem; line-height: 1.9rem; margin-left: .75rem} .moto360-nav li.cur a{ color: #10bad1} .moto360-nav li .buyBtn{ display: inline-block; width: 2.7rem; height: 1rem; background-color: #10bad1; color: #fff; font-size: .45rem; line-height: 1.1rem; text-align: center; border-radius: 2px; z-index: 4} .mz-section{ position: relative; background-position: top center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; overflow: hidden} .o-bottom{ height: 16rem} .o-bottom .text-box{ position: relative; padding-top: 1.75rem; text-align: center} .o-bottom a{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99} .o-bottom .title{font-size: 1rem; font-weight: normal} .o-bottom .text{ margin-top: .125rem; } .text-box .title{ font-size: 1.1rem; line-height: 1.5rem; font-weight: bold; color: #333} .text-box .text{ margin-top: .5rem; font-size: .55rem; line-height: 1rem; word-break: break-all; color: #333} .text-box .link{ display: inline-block; margin-top: .6rem; color: #fde9b9; font-size: .45rem; line-height: .6rem} .txt-item li{ float: left; width: 50%; box-sizing: border-box} .txt-item li sup{ vertical-align: top} .txt-item li h4{ font-size: .9rem; line-height: 1.1rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #000} .txt-item li p{ font-size: .55rem; line-height: .8rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #000} .no-float li{ float: none; text-align: left} .o-swiper .swiper-pagination{ bottom: .5rem; left: 0; height: .25rem; width: 100%; text-align: center; } .o-swiper .swiper-pagination-bullet { width: .175rem; height: .175rem; display: inline-block; vertical-align: top; margin: .025rem .125rem 0; border-radius: 0; background-color: #fff; opacity: .5} .o-swiper .swiper-pagination-bullet-active {width: .225rem; height: .225rem; opacity: 1; margin-top: 0} .o-swiper img { width: 100%; } .o-bg1{ background-color: #007aa4; height: 25.375rem} .o-bg1 .pic1{ display: block; margin: 1.85rem auto 0; width: 10.775rem; } .o-bg1 p{ margin-top: .875rem; font-size: .45rem; line-height: .75rem; text-align: center; color: #fff; } .o-bg2{ background-color: #fff} .o-bg2 .txt-item{ position: relative; padding: .3rem 0 1.9rem} .o-bg2 .txt-item li{ padding-top: 1.575rem} .o-bg2 .txt-item li:nth-child(odd){ padding-left: 1.35rem; } .o-bg2 .txt-item li:nth-child(even){ padding-left: 1.25rem; } .o-bg3{ height: 12.5rem; background-color: #000; } .o-bg3 .play-icon{ position: absolute; left: 50%; top: 50%; text-align: center; -webkit-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0) } .o-bg3 .play-icon img{ width: 2rem; } .o-bg3 .play-icon p{ margin-top: .5rem; font-size: .6rem; color: #fff; } .o-bg3 video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -2} .o-bg4{ background-color: #f1f1f1; height: 22.075rem} .o-bg4 .text-box{ padding: 1.6rem .75rem 0; text-align: center; } .o-bg5{ background-color: #fff; height: 14rem; } .o-bg5 .text-box{ padding: 1.7rem .9rem 0; text-align: center} .o-bg5 img{ position: absolute; left: 0; bottom: -2.7rem; width: 100%; } .o-bg6{ background-color: #fff; } .o-bg6 .txt-item{ padding: 1.4rem 0; } .o-bg6 .txt-item li{ width: 33.333%; text-align: center; } .o-bg6 .txt-item h4{ font-size: .75rem; font-weight: bold; } .o-bg6 .txt-item p{ font-size: .5rem; margin-top: .05rem} .o-bg7{ height: 12rem; } .o-bg8{ background-color: #fff; } .o-bg8 .text-box1{ padding: 1.75rem .75rem 0; text-align: center} .o-bg8 .swiper2{ position: relative; margin-top: .9rem; padding: 0 .75rem 1.2rem; } .o-bg8 .swiper2 .swiper-pagination{ top: 12.5rem; } .o-bg8 .swiper-pagination-bullet { background-color: #333; } .o-bg8 .swiper2 .text-box {margin-top: 1.75rem} .o-bg8 .swiper2 .text-box .title{ line-height: 1.1rem; font-size: .75rem; } .o-bg8 .swiper2 .text-box .text{ margin-top: .3rem; line-height: 1rem; } .style-list li{ float: left; margin-top: .35rem; width: 20%; text-align: center; vertical-align: top} .style-list li img{ width: 1.1rem; } .style-list li span{ display: block; margin-top: .175rem; font-size: .45rem; line-height: .6rem; } .o-bg9{ background-color: #f7f7f7; padding-bottom: 1.65rem; } .o-bg9 .text-box{ padding: 1.8rem .75rem 0; text-align: center; } .o-bg9 .swiper3{ margin-top: 1.25rem; padding: 0 .25rem; } .gallery-thumbs{ position: static; margin-top: .75rem; padding: 0 .75rem; } .gallery-thumbs li{ float: left; width: 16.667%; height: auto; text-align: center; background: transparent; opacity: 1} .gallery-thumbs li img{ width: 2rem; opacity: .5} .gallery-thumbs li span{ display: block; margin-top: .175rem; line-height: .75rem; font-size: .45rem; height: .75rem; overflow: hidden; } .gallery-thumbs .swiper-pagination-bullet-active img{ opacity: 1; } .o-bg10{ height: 28.75rem; background-color: #000; } .o-bg10 .text-box{ padding: 2rem .75rem 0; } .o-bg10 .text-box .title{ color: #fff; } .o-bg10 .text-box .text{ width: 7.25rem; color: #c1c1c1; } .o-bg11{ background-color: #fff; height: 23.7rem; background-color: #f7f7f7} .o-bg11 .text-box{ padding: 2.3rem .75rem 0; text-align: center; } .o-bg11 .img1{ position: absolute; left: 0; width: 100%; bottom: 1rem} .o-bg11 .txt-item{ padding: .85rem .25rem 0; } .o-bg11 .txt-item li{ width: 25%; text-align: center; } .o-bg12{ background-color: #f7f7f7; height: 21.5rem; } .o-bg12 .text-box{ padding: 1.8rem .75rem 0; text-align: center; } .o-bg12 .pic-box{ position: relative; width: 15.675rem; height: 7.7rem; margin: 1.3rem auto 0; } .o-bg12 .pic-box .pic1{ position: absolute; top: 0; left: 0; width:100%; z-index: 10} .o-bg12 .pic-box .styleswiper{ position: absolute; top: .4rem; left: .4rem; width: 14.65rem; height: 6.975rem; } .styleswiper div{ position: relative; } .styleswiper div span{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; transition: width .8s linear} .styleswiper .slider1 span{ background: url(../images/overview/s6-1-1.jpg) no-repeat top right; -webkit-background-size: cover; background-size: cover} .styleswiper .slider2 span{ background: url(../images/overview/s6-2-1.jpg) no-repeat top right; -webkit-background-size: cover; background-size: cover} .styleswiper .slider3 span{ background: url(../images/overview/s6-3-1.jpg) no-repeat top right; -webkit-background-size: cover; background-size: cover} .styleswiper .slider4 span{ background: url(../images/overview/s6-4-1.jpg) no-repeat top right; -webkit-background-size: cover; background-size: cover} .swiper-slide-active div span{ width: 50%; } .style-point li{ float: left; width: 50%; padding-top: .9rem} .style-point li .active{ background-color: #666; border-color: #666; color: #fff} .style-point li span{ display: block; margin: .5rem .15rem 0 .35rem; float: left; width: 2rem; height: 1.05rem; border: 1px solid #333; box-sizing: border-box; font-size: .45rem; line-height: 1rem; text-align: center; border-radius: .55rem} .style-point li:first-child{ position: relative; } .style-point li:first-child:after{ position: absolute; top: 1.4rem; right: .17rem; content: ""; height: 1rem; width: 1px; background-color: #333; overflow: hidden; } .o-bg13{ background-color: #fff; } .o-bg13 .text-box{ padding: 1.6rem .75rem 0; text-align: center; } .compare-img{ position: relative; width: 15.525rem; height: 9.5rem; margin: 1.3rem auto 0} .compare-img img{ width:100% } .compare-img .pic{ position: absolute; top: 0; left: 0; width: 50%; height: 100%; background:url(../images/overview/o-pic2.jpg) no-repeat; -webkit-background-size: 15.525rem 9.5rem; background-size: 15.525rem 9.5rem; } .compare-img .compare-tools{ position: absolute; top: 0; left: 50%; margin-left: -.375rem; width: .75rem; height: 9.5rem; } .compare-img .compare-tools .compare-bar{ position: absolute; top: 0; left: 50%; margin-left: -.375rem; width: .75rem; height: 100%; } .compare-img .compare-tools .compare-bar:before{ position: absolute; content:""; top: 0; left: 50%; margin-left: -1px; width: 1px; height: 100%; background: #fff} .compare-img .compare-tools .compare-bar:after{ position: absolute; content: ""; top: 50%; left: 50%; width: .5rem; height: .5rem; background-color: #e5e5e5; border: .125rem solid #fff; border-radius: .5rem; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0)} .compare-img .compare-tools .text{ position: absolute; top: 50%; margin-top: -.5rem; width: 4rem; font-size: .55rem; line-height: 1rem; color: #fff} .compare-img .compare-tools .text1{ text-align: right; right: 1rem; } .compare-img .compare-tools .text2{ left: 1rem; } .o-bg14{ background-color: #fff; height: 27.9rem; } .o-bg14 .text1{ padding: 1.8rem .75rem 0; } .zn-silder-wrap{ position: relative; } .swiper6{ margin: 2.4rem auto 0; width: 15.5rem; } .zn-silder{ position: absolute; top: 7.2rem; left: 50%; margin-left: -3.9rem; width: 7.8rem; height: 15.775rem; padding: .325rem 0 0 .25rem; box-sizing: border-box; } .ai-silder .swiper-prev,.ai-silder .swiper-next,.zn-silder-wrap .swiper-next,.zn-silder-wrap .swiper-prev{ position: absolute; width: 1.65rem; height: 1.65rem; top: 7.5rem; z-index: 7} .ai-silder .swiper-prev,.zn-silder-wrap .swiper-prev{ right: -2.3rem; background: url(../images/overview/right-icon.png) no-repeat; -webkit-background-size: 1.65rem 1.65rem; background-size: 1.65rem 1.65rem; } .ai-silder .swiper-next,.zn-silder-wrap .swiper-next{ left: -2.3rem; background: url(../images/overview/left-icon.png) no-repeat; -webkit-background-size: 1.65rem 1.65rem; background-size: 1.65rem 1.65rem; } .zn-silder-wrap .swiper-prev{ top: 5.425rem; right: .8rem; } .zn-silder-wrap .swiper-next{ top: 5.425rem; left: .8rem; } .zn-silder .pic1{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6} .zn-silder .swiper8{ width: 7.25rem; } .swiper6 .text-box{ margin-top: 5.1rem; text-align: center; } .swiper6 .text-box .title{ font-size: .75rem; line-height: 1.1rem; } .swiper6 .text-box .text{ margin-top: .15rem; font-size: .5rem; line-height: .75rem; } .o-bg15{ background-color: #031024; height: 20.325rem; } .o-bg15 .text-box,.o-bg17 .text-box{ padding: 1.8rem .75rem 0; text-align: center} .o-bg15 .text-box .title,.o-bg15 .text-box .text{ color: #fff; } .o-bg16{ background-color: #fff; height: 22.75rem} .o-bg16 img{ position: absolute; bottom: 0; left: 0; width: 100%; } .o-bg16 .text-box{ padding: 1.8rem .5rem 0; text-align: center; } .o-bg17{ background-color: #fff; height: 21.95rem} .o-bg18{ height: 8.525rem; background-color: #000; } .o-bg18 .txt-item{ padding: 0 .75rem; } .o-bg18 .txt-item li{ margin-top: 1.625rem; } .o-bg18 .txt-item li:nth-child(even){ text-align: right; } .o-bg18 .txt-item li h4,.o-bg19 .text-box .title{ color: #fff; } .o-bg18 .txt-item li p,.o-bg19 .text-box .text{ color: #bcbbbb; } .o-bg19{ background-color: #000; height: 19.55rem; } .o-bg19 .text-box{ padding: 0 .75rem; } .o-bg20{ background-color: #f5f5f5; height: 16.25rem} .o-bg20 .text-box{ padding: 4rem .75rem 0; text-align: center; } .o-bg20 .text-box .text{ padding: 0 2.25rem; } .o-bg21{ background-color: #fff; height: 27.225rem; } .o-bg21 .text1{ padding: 1.8rem 0 0 .75rem; } .o-bg21 .text1 .text{ width: 6.75rem; } .o-bg21 .text2{ position: absolute; right: .75rem; top: 21.75rem; text-align: right; } .o-bg21 .text2 .title{ font-size: .85rem; line-height: 1.1rem; } .o-bg22{ background-color: #0a517d; height: 15rem; overflow: visible; z-index: 2} .o-bg22 .text-box{ padding: 2.35rem .75rem 0; text-align: center; } .o-bg22 .text-box .title,.o-bg22 .text-box .text{ color: #fff; } .o-bg22 img{ position: absolute; bottom: -3.25rem; left: .125rem; width: 15.775rem; } .o-bg23{ background-color: #fff; } .o-bg23 .text-box{ padding: 4.375rem .75rem 1.375rem; } .o-bg23 .text-box .title{ font-size: .75rem; } .o-bg24{ background-color: #ebebeb; height: 19.15rem; } .o-bg24 .text-box{ padding: 1.75rem .75rem 0; text-align: center; } .o-bg24 img{ position: absolute; bottom: 0; left: 0; width: 100%; } .o-bg25{ background-color: #fff; padding: .45rem 0 1.75rem; } .o-bg25 ul{ text-align: center; } .o-bg25 li{ margin-top: 1.55rem; display: inline-block; text-align: center; padding: 0 .65rem} .o-bg25 li img{ height: 2rem; } .o-bg25 li p{ margin-top: .375rem; font-size: .55rem; line-height: .85rem; } .o-bg26{ background-color: #f2f2f2; height: 17rem; z-index: 2; overflow: visible} .o-bg26 .text-box{ padding: 1.85rem .5rem 0; text-align: center; } .o-bg26 img{ position: absolute; left: 0; bottom: -3.3rem; width: 100%; } .o-bg27{background:-webkit-linear-gradient(#fff,#f7f7f7); background:-o-linear-gradient(#fff,#f7f7f7); background:-moz-linear-gradient(#fff,#f7f7f7); background:linear-gradient(#fff,#f7f7f7); padding-bottom: 1.5rem; } .o-bg27 .text1{ padding: 4.2rem .75rem 0; text-align: center; } .ai-silder{ position: relative; width:7.95rem; margin: 1.1rem auto 0; padding-top: .48rem; box-sizing: border-box; } .ai-silder .pic1{ position: absolute; top: 0; left: 0; width: 100%; z-index: 6} .ai-silder .swiper7{ width: 7.175rem; } .ai-silder .swiper-slide img{ width: 100%; } .ai-silder .swiper-slide .text-box{ margin-top: 1.6rem; text-align: center; } .ai-silder .swiper-slide .text-box .title{ font-size: .75rem; line-height: 1.1rem; } .ai-silder .swiper-slide .text-box .text{ margin-top: .1rem; font-size: .5rem; line-height: .8rem; } .o-bg28{ background-color: #fff; padding: .25rem .75rem 1.5rem; } .o-bg28 .tips-box{ margin-top: 1.1rem; line-height: 1rem} .o-bg28 .tips-box h3{ font-size: .6rem; font-weight: bold; color: gray; } .o-bg28 .tips-box p{ font-size: .5rem; color: #9a9a9a; } .g-bg1{ background-color: #bde3ee; height: 21.15rem; background-image: url(../images/gallery/g-bg1.jpg); } .g-bg2{ background-color: #fff; } .g-bg2 .text-box{ padding: 1.85rem .75rem 0; text-align: center; } .g-bg2 img{ width: 100%; margin-top: .75rem; } .g-bg2 img:nth-of-type(1){ margin-top: 1.75rem; } .g-bg3{ background-color: #fff; } .g-bg3 .text-box{ padding: 1.8rem .75rem 0; text-align: center; } .g-bg3 .pic1{ margin-top: 1.8rem; width: 100%; } .g-bg3 .swiper-container{ margin-top: .75rem; } .g-bg3 .o-swiper{ position: relative; padding-bottom: .75rem} .g-bg3 .swiper-pagination{ bottom: 0; } .g-bg3 .swiper-pagination-bullet { background-color: #333; } .parameter-top{ padding: 3rem 0 1.65rem 0} .parameter-top .specs-top-parameter li{ float: left; margin: .95rem 0 0; text-align: center; width: 50%} .parameter-top .specs-top-parameter li .title{ display: block; line-height: 1.15rem; height: 1.15rem; font-size: .8rem; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden} .parameter-top .specs-top-parameter li p{ height: 1.5rem; line-height: .75rem; color: #666; font-size: .5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden} .motozplay-parameters .goods-desc{ padding: 1.4rem 0 .65rem 1.25rem; padding-bottom: 1rem; border-top: 1px solid #e4e4e4; color: #121212; height: .8rem; line-height: .8rem; font-size: .65rem} .motozplay-parameters .goods-img{display: block; margin: 0 auto 1.25rem; width: 15.275rem} .motozplay-parameters .goods-info-box{ padding: 0 .75rem 1.2rem 1.7rem; overflow: hidden; font-size: .5rem} .s-mt-10{ margin-top: .75rem} .goods-pic{ padding: 1.5rem 0; text-align: center; border-top: 1px solid #e4e4e4} .goods-pic li{ width: 33%; float: left} .goods-pic li img{ width: 3.7rem; display: block; margin: 0 auto} .goods-pic li span{ display: inline-block; margin-top: .7rem; color: #121212; font-size: .5rem} .motozplay-parameters .goods-info-box .goods-ifno{ line-height: .9rem; font-size: .5rem; color: #333; min-height: .9rem; font-weight: normal} .size-parameter{ position: relative; overflow: inherit  !important} .size-parameter .float-box{ padding:0 0 1.8rem 0} .size-parameter .mz-size{ position: absolute; top: -2.2rem; right: .75rem; width: 7.625rem} .size-parameter .mz-md1{ position: absolute; top: .5rem; right: 1.5rem; width: 2.45rem} .size-parameter .mz-md2{ position: absolute; top: 1rem; right: 1.5rem; width: 2.525rem} .size-parameter .mz-md3{ position: absolute; top: -.5rem; right: .5rem; width: 7.525rem} .goods-ifno a{ color: #10bad0} .mz-box{ width: 12.325rem; display: block}