.oc-high .ohw-pagination .pagination-item, .oc-high .ohw-pagination .pagination-item a, .oc-high .ohw-pagination .pagination-item a b, .oc-high .ohw-pagination .pagination-item a i, .ohigh-wrapper .ohw-banner-list, .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn { -webkit-transform: translateZ(0); transform: translateZ(0) } .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg, .ohigh-wrapper .ohw-banner-list .banner-item[data-reverse="title"] .banner-title-wrapper .banner-title section, .ohigh-wrapper .ohw-banner-list .banner-item.item-reverse-title .banner-title-wrapper .banner-title section, .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper .banner-figure, .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list, .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box a, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box a, .shop-footer-services .services-wrapper .services-views, .shop-footer-services .services-wrapper .services-views ul { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-pack: center } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-title-wrapper { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-pack: center } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper .banner-figure { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: vertical; -webkit-box-pack: center } .oc-high { position: relative; overflow: hidden; min-height: 320px; height: 100vh } .oc-high .ohw-pagination { position: absolute; z-index: 9; left: 0; right: 0;z-index: 111; text-align: center; width: 100%; bottom: 30px } @media (min-width: 1921px) { .oc-high .ohw-pagination { bottom: 30px } } @media (max-width: 1440px) { .oc-high .ohw-pagination { bottom: 20px } } @media (max-width: 1024px) { .oc-high .ohw-pagination { bottom: 26px } } @media (max-width: 768px) { .oc-high .ohw-pagination { bottom: 5px } } .oc-high .ohw-pagination .pagination-item { display: inline-block } .oc-high .ohw-pagination .pagination-item a { height: 30px; margin: 0 .5em; line-height: 30px; padding: 0 12px; position: relative } @media (max-width: 768px) { .oc-high .ohw-pagination .pagination-item a { padding: 0 5px; pointer-events: none } } .oc-high .ohw-pagination .pagination-item a:hover b { opacity: .5 } .oc-high .ohw-pagination .pagination-item a b { position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; overflow: hidden; margin: -5px 0 0 -5px; border-radius: 50%; -webkit-transition: opacity 0.3s ease, border 0.2s ease, background 0.2s ease; transition: opacity 0.3s ease, border 0.2s ease, background 0.2s ease } @media (max-width: 768px) { .oc-high .ohw-pagination .pagination-item a b { width: 8px; height: 8px; margin: -4px 0 0 -4px } } .oc-high .ohw-pagination .pagination-item a i { width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease } @media (max-width: 768px) { .oc-high .ohw-pagination .pagination-item a i { width: 12px; height: 12px; margin: -6px 0 0 -6px } } .oc-high .ohw-pagination .pagination-item a i:before { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; display: inline-block; border: 2px #fff solid; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-transition: border 0.2s ease; transition: border 0.2s ease } .oc-high .ohw-pagination .pagination-item a i svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 10; -webkit-transform: rotate(-90deg) translateZ(0); transform: rotate(-90deg) translateZ(0) } .oc-high .ohw-pagination .pagination-item a i svg circle { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 37 37; stroke-dashoffset: 37; -webkit-transition: stroke-dashoffset 5s linear; transition: stroke-dashoffset 5s linear } .oc-high .ohw-pagination .pagination-item.active a b, .oc-high .ohw-pagination .pagination-item.swiper-pagination-bullet-active a b { opacity: 0 } .oc-high .ohw-pagination .pagination-item.active a i, .oc-high .ohw-pagination .pagination-item.swiper-pagination-bullet-active a i { opacity: 1 } .oc-high .ohw-pagination .pagination-item.active a i svg circle, .oc-high .ohw-pagination .pagination-item.swiper-pagination-bullet-active a i svg circle { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0s linear; transition: stroke-dashoffset 0s linear } .oc-high.ohigh-theme-black .pagination-item a b { background-color: rgba(51, 51, 51, 0.5); border-color: #333 } .oc-high.ohigh-theme-black .pagination-item a i:before { border-color: rgba(51, 51, 51, 0.3) } .oc-high.ohigh-theme-black .pagination-item a i svg circle { stroke: #333 } .oc-high.ohigh-theme-white .pagination-item a b { background-color: rgba(255, 255, 255, 0.5) } .oc-high.ohigh-theme-white .pagination-item a i:before { border-color: rgba(255, 255, 255, 0.3) } .oc-high.ohigh-theme-white .pagination-item a i svg circle { stroke: #fff } @-webkit-keyframes dashanimate { to { stroke-dashoffset: 0 } } @keyframes dashanimate { to { stroke-dashoffset: 0 } } .ohigh-wrapper { position: relative; z-index: 1; width: 100%; height: 100% } .ohigh-wrapper .ohw-banner-list { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; overflow: hidden; width: 100%; height: 100% } .mobile .ohigh-wrapper .ohw-banner-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; overflow: visible } .ohigh-wrapper .ohw-banner-list .banner-item { position: absolute; top: 0; left: 0; overflow: hidden; text-align: center; background-color: #fff; z-index: 9; will-change: transform; width: 100%; height: 100%; display: none } .mobile .ohigh-wrapper .ohw-banner-list .banner-item { display: inline-block; position: relative; -ms-flex-negative: 0; flex-shrink: 0 } .ohigh-wrapper .ohw-banner-list .banner-item.jumpin { z-index: 8; display: block } .ohigh-wrapper .ohw-banner-list .banner-item ._title, .ohigh-wrapper .ohw-banner-list .banner-item ._figure { will-change: transform, opacity } .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background-repeat: no-repeat; background-size: auto 100%; background-position: center; z-index: 1; text-align: center; min-height: 770px } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg { min-height: 890px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg { min-height: 600px } } @media (max-width: 1024px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg { min-height: 600px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg { min-height: 400px } } .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg picture { -webkit-box-sizing: border-box; box-sizing: border-box; width: auto; height: 100% } .lt-10 .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg picture { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg picture img, .ohigh-wrapper .ohw-banner-list .banner-item .banner-bg picture source { height: 100%; width: auto } .ohigh-wrapper .ohw-banner-list .banner-item .banner-img-wrapper { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 2; position: absolute; top: 0 } .ohigh-wrapper .ohw-banner-list .banner-item .banner-figure { position: relative; display: block; will-change: transform } .ohigh-wrapper .ohw-banner-list .banner-item .banner-figure picture { position: relative; display: inline-block; height: 100%; width: auto } .ohigh-wrapper .ohw-banner-list .banner-item .banner-figure img { height: 100%; width: auto } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title-wrapper { position: relative; top: 0; z-index: 3 } .ohigh-wrapper .ohw-banner-list .banner-item .mobile-banner-link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; z-index: 9 } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .mobile-banner-link { display: block } } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title { position: relative; text-align: left; margin: 0 auto;width: 100%; height: 100%; /* display: inline-block */ } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h2 { font-family: "OPPOFont-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; line-height: 1; font-size: .52rem; font-size: .6rem; margin-bottom: 26px } .win .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h2 { font-family: "OPPOFont-Bold W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h2 { font-size: .56rem } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h2 { font-size: 28px } } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h2 { margin-bottom: 24px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h2 { margin-bottom: 16px } } @media (max-width: 1024px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h2 { margin-bottom: 12px } } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h3 { font-family: "Myriad Pro","PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial; line-height: 1; white-space: nowrap; font-size: .26rem; margin-bottom: 14px } .win .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h3 { font-family: "OPPOFont-Regular W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h3 { font-size: 16px } } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h3 { margin-bottom: 24px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h3 { margin-bottom: 16px } } @media (max-width: 1024px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h3 { margin-bottom: 16px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title h3 { margin-bottom: 10px } } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link { padding-top: 16px } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link { padding-top: 16px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link { padding-top: 14px } } @media (max-width: 1024px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link { padding-top: 14px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link { padding-top: 10px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link { display: none } } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn { position: relative; display: inline-block; overflow: hidden; text-align: center; font-family: "Myriad Pro","PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px transparent solid; line-height: 34px; width: 130px; height: 36px; border-radius: 22px; margin: 0 12px; font-size: 18px; -webkit-transition: color 0.35s ease, border-color 0.3s ease, background-color 0.35s ease; transition: color 0.35s ease, border-color 0.3s ease, background-color 0.35s ease } .win .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn { font-family: "OPPOFont-Regular W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn { line-height: 42px; width: 150px; height: 44px; border-radius: 22px; margin: 0 15px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn { line-height: 34px; width: 124px; height: 36px; line-height: 36px; border-radius: 20px; margin: 0 15px; font-size: 16px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn { margin: 0 8px; width: 108px; height: 36px } } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="master"], .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-master { color: #fff; background-color: #05B570 } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="master"]:hover, .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-master:hover { background-color: #059157 } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="sub"], .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-sub { color: #666; background-color: #fff } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="sub"]:hover, .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-sub:hover { color: #333; background-color: #f5f5f5 } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="light"], .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-light { color: #fff; border-color: #fff } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="light"]:hover, .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-light:hover { color: #333; background-color: #fff; border-color: #fff } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="dark"], .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-dark { border-color: #999; color: #333; background-color: #fff } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="dark"]:hover, .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-dark:hover { border-color: #333; color: #333; background-color: #f8f8f8 } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="white"], .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-white { color: #333; background-color: #fff } .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn[data-btn="white"]:hover, .ohigh-wrapper .ohw-banner-list .banner-item .banner-title .banner-link a.ban-btn.item-btn-white:hover { color: #333; background-color: rgba(255, 255, 255, 0.9) } .ohigh-wrapper .ohw-banner-list .banner-item[data-video] .banner-bg:before, .ohigh-wrapper .ohw-banner-list .banner-item.item-type-video .banner-bg:before { content: ''; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(26, 26, 26, 0.7); z-index: 9 } .ohigh-wrapper .ohw-banner-list .banner-item[data-video] .banner-bg .banner-video, .ohigh-wrapper .ohw-banner-list .banner-item.item-type-video .banner-bg .banner-video { height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: 8; width: 2560px; margin-left: -1280px; background-color: #fff; text-align: center } .ohigh-wrapper .ohw-banner-list .banner-item[data-video] .banner-bg video, .ohigh-wrapper .ohw-banner-list .banner-item.item-type-video .banner-bg video { width: auto; height: 100% } .ohigh-wrapper .ohw-banner-list .banner-item[data-reverse="title"] .banner-title-wrapper .banner-title section, .ohigh-wrapper .ohw-banner-list .banner-item.item-reverse-title .banner-title-wrapper .banner-title section { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse } .ie .ohigh-wrapper .ohw-banner-list .banner-item[data-reverse="title"] .banner-title-wrapper .banner-title section, .ie .ohigh-wrapper .ohw-banner-list .banner-item.item-reverse-title .banner-title-wrapper .banner-title section { -ms-flex-wrap: wrap; flex-wrap: wrap } .ohigh-wrapper .ohw-banner-list .banner-item[data-reverse="title"] .banner-title-wrapper .banner-title section h2, .ohigh-wrapper .ohw-banner-list .banner-item[data-reverse="title"] .banner-title-wrapper .banner-title section h3, .ohigh-wrapper .ohw-banner-list .banner-item.item-reverse-title .banner-title-wrapper .banner-title section h2, .ohigh-wrapper .ohw-banner-list .banner-item.item-reverse-title .banner-title-wrapper .banner-title section h3 { width: 100%; display: block } .ohigh-wrapper .ohw-banner-list .banner-item[data-theme="black"] .banner-title h2, .ohigh-wrapper .ohw-banner-list .banner-item.item-theme-black .banner-title h2 { color: #333 } .ohigh-wrapper .ohw-banner-list .banner-item[data-theme="black"] .banner-title h3, .ohigh-wrapper .ohw-banner-list .banner-item.item-theme-black .banner-title h3 { color: #666 } .ohigh-wrapper .ohw-banner-list .banner-item[data-theme="white"] .banner-title h2, .ohigh-wrapper .ohw-banner-list .banner-item.item-theme-white .banner-title h2 { color: #fff } .ohigh-wrapper .ohw-banner-list .banner-item[data-theme="white"] .banner-title h3, .ohigh-wrapper .ohw-banner-list .banner-item.item-theme-white .banner-title h3 { color: #fff } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-bg, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-bg { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .android .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-bg, .ie .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-bg, .android .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-bg, .ie .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-bg { width: 300%; left: -100% } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-title-wrapper { position: absolute; top: 0;z-index: 111; right: 0;left: 0; /* width: 50%; */ height: 100% } .lt-9 .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-title-wrapper, .lt-9 .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-title-wrapper { display: block; top: 45%; text-align: left; left: 45%; right: auto } @media (max-width: 768px) { } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-title-wrapper .banner-title, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-title-wrapper .banner-title { text-align: left; margin: 0; margin-left: 120px } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-title-wrapper .banner-title, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-title-wrapper .banner-title { margin-left: 90px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-title-wrapper .banner-title, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-title-wrapper .banner-title { margin-left: 100px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-title-wrapper .banner-title, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-title-wrapper .banner-title { margin: 0 auto } } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper { position: absolute; top: 0; left: 0; width: 50%; height: 100%; padding-top: 150px } .lt-9 .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper, .lt-9 .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper { display: block; right: 40%; left: auto } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper { position: absolute; width: 100%; left: auto; padding-top: 200px; padding-bottom: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .android .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper, .android .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper { width: 300%; left: -100% } } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper .banner-figure { height: 100%; margin-right: -50px; max-height: 900px } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper .banner-figure { max-height: 1200px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper .banner-figure { max-height: 744px } } @media (max-width: 1024px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper .banner-figure { max-height: 624px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper .banner-figure { margin-right: 0 } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="right"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-left .banner-img-wrapper .banner-figure { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 } } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-title-wrapper { padding-top: 160px } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-title-wrapper { padding-top: 200px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-title-wrapper { padding-top: 120px } } @media (max-width: 1024px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-title-wrapper { padding-top: 120px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-title-wrapper { padding-top: 110px } } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-bg, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-bg { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .android .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-bg, .ie .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-bg, .android .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-bg, .ie .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-bg { width: 300%; left: -100% } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper { text-align: center; width: 100%; padding-top: 380px; padding-bottom: 80px; height: 100% } @media (min-width: 1024px) and (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper { padding-top: 290px; padding-bottom: 50px } } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper { padding-top: 100px; padding-bottom: 20px } .android .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper, .android .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper { width: 300%; left: -100% } } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper .banner-figure { height: 100%; text-align: center; max-height: 675px } @media (min-width: 1921px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper .banner-figure { max-height: 900px } } @media (max-width: 1440px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper .banner-figure { max-height: 558px } } @media (max-width: 1024px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="top"] .banner-img-wrapper .banner-figure, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-top .banner-img-wrapper .banner-figure { max-height: 468px } } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-bg, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-bg { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .android .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-bg, .ie .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-bg, .android .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-bg, .ie .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-bg { width: 300%; left: -100% } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-title-wrapper { padding: 0 } @media (max-width: 768px) { .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-title-wrapper, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-title-wrapper { margin: 0 65px } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-title-wrapper h2, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-title-wrapper h2 { line-height: 42px } .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-title-wrapper h3, .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-title-wrapper h3 { line-height: 20px; margin-bottom: 12px } } .lt-10 .ohigh-wrapper .ohw-banner-list .banner-item[data-layout="center"] .banner-title-wrapper, .lt-10 .ohigh-wrapper .ohw-banner-list .banner-item.item-layout-center .banner-title-wrapper { display: block; top: 45%; right: auto } .shop-content-floor { position: relative; padding-top: .7rem; padding-bottom: .95rem; background-color: #f4f4f4 } @media (max-width: 1440px) { .shop-content-floor { padding-top: .6rem } } @media (max-width: 768px) { .shop-content-floor { padding-bottom: .45rem; padding-top: 0 } } .shop-content-floor .shop-content-wrapper { position: relative; width: 1200px; margin: 0 auto } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper { width: 1350px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper { width: 900px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper { width: 100% } } .shop-content-floor .shop-content-wrapper .shop-product-floor { margin: -20px; margin-top: .5rem } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .shop-product-floor { margin: -.1rem; margin-top: .35rem } } .ie.lt-9 .shop-content-floor .shop-content-wrapper .shop-product-floor { display: inline-block; position: relative; width: 100%; height: 100% } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data { position: relative; width: 100%; height: 100% } .ie.lt-9 .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data, .ie.lt-9 .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data { float: left } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-views-box, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-views-box { position: relative; display: block; margin: 20px; background-color: #fff; -webkit-transition: -webkit-box-shadow .3s ease; transition: -webkit-box-shadow .3s ease; transition: box-shadow .3s ease; transition: box-shadow .3s ease, -webkit-box-shadow .3s ease; overflow: hidden; will-change: transform } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-views-box, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-views-box { margin: 10px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-views-box, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-views-box { margin: 0; height: 290px } } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-views-box:hover, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-views-box:hover { -webkit-box-shadow: 0 6px 70px rgba(0, 0, 0, 0.05); box-shadow: 0 6px 70px rgba(0, 0, 0, 0.05) } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-views-box:hover, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-views-box:hover { -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0 } } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .product-model-views, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .product-model-views { position: absolute; width: 100%; height: 100% } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .product-model-views .product-view, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .product-model-views .product-view { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 0; visibility: hidden; -webkit-transition: visibility 0.35s ease, opacity 0.3s ease; transition: visibility 0.35s ease, opacity 0.3s ease } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .product-model-views .product-view.current, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .product-model-views .product-view.current { opacity: 1; visibility: visible } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .product-model-views picture, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .product-model-views picture { width: 100%; height: 100% } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .product-model-views picture img, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .product-model-views picture img { width: auto; height: 100% } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title { position: relative; text-align: center; color: #333; z-index: 1 } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable { position: relative } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list { position: relative; z-index: 1 } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item { position: relative; display: inline-block; width: 16px; height: 16px; padding: 12px 12px; border-radius: 50%; margin: 0 -2px; cursor: pointer } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item { padding: 8px 8px; width: 20px; height: 20px; margin: 0 6px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item { padding: 5px 9px; width: 14px; height: 14px; overflow: visible } } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item .color-block, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item .color-block { position: relative; display: inline-block; background-color: transparent; border-radius: 50%; width: 100%; height: 100% } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item .color-circle, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item .color-circle { position: absolute; display: inline-block; visibility: hidden; opacity: 0; width: 28px; height: 28px; top: 50%; left: 50%; margin-left: -14px; margin-top: -14px; border-radius: 50%; overflow: hidden; border: 2px solid; border-color: #494B4D; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: visibility 0.35s ease-out, opacity 0.3s ease; transition: visibility 0.35s ease-out, opacity 0.3s ease; will-change: transform } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item .color-circle, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item .color-circle { display: inline-block; width: 36px; height: 36px; margin-left: -18px; margin-top: -18px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item .color-circle, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item .color-circle { margin-top: -12px; margin-left: -13px; width: 26px; height: 26px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item .color-circle, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item .color-circle { border: 1px solid; margin-top: -11px; margin-left: -12px; width: 24px; height: 24px } } .shop-content-floor .shop-content-wrapper .shop-product-floor .no-effet-product-data .pro-model-title .color-switchable .color-list .color-item.current .color-circle, .shop-content-floor .shop-content-wrapper .shop-product-floor .product-data .pro-model-title .color-switchable .color-list .color-item.current .color-circle { visibility: visible; opacity: 1 } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor { margin-top: 0 } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor { margin: 0; padding-top: 7px; background-color: #fff } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box { height: 660px } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box { height: 720px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box { height: 480px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box { height: 540px; min-height: 540px; margin: 0 } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-model-views { -webkit-transition: background-color .35s linear; transition: background-color .35s linear } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-model-views .product-view { width: 100%; height: 100% } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-model-views .product-view { display: none } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views { display: none } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views { display: block; position: relative; height: 335px; width: auto; overflow: hidden } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views * html { height: 1px } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li { position: relative; width: 310px; height: 100%; float: left; display: inline-block; will-change: transform } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li.swiper-slide-active picture { -webkit-transition: all cubic-bezier(0.33, 0, 0, 1) 0.8s 0.3s; transition: all cubic-bezier(0.33, 0, 0, 1) 0.8s 0.3s } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li.swiper-slide-active picture:nth-child(1) { opacity: 1; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0) } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li.swiper-slide-active picture:nth-child(3) { -webkit-transform: translate3d(32px, 0, 0); transform: translate3d(32px, 0, 0) } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li.swiper-slide-active picture:nth-child(2) { -webkit-transform: translate3d(-32px, 0, 0); transform: translate3d(-32px, 0, 0) } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li picture { position: absolute; left: 50%; margin-left: -155px; height: 100%; -webkit-transition: all cubic-bezier(0.33, 0, 0, 1) 0.5s 0s; transition: all cubic-bezier(0.33, 0, 0, 1) 0.5s 0s } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li picture:nth-child(1) { opacity: 0 } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li picture:nth-child(2) { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li picture:nth-child(3) { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li picture img { height: 100% } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .product-mobile-views li a { position: absolute; width: 100%; height: 100%; left: 0 } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title { position: absolute; width: 590px; height: 100%; text-align: center; color: #333; -webkit-transition: color 0.35s ease; transition: color 0.35s ease } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title { width: 400px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title { margin: 0 auto; width: 100% } } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title { width: 600px } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-pos="left"] { left: 0 } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-pos="left"] { left: auto } } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-pos="left"] { left: 75px } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-pos="right"] { right: 0 } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-pos="right"] { right: auto } } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-pos="right"] { right: 75px } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-color="white"] { color: #fff } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title[data-color="gray"] { color: #333 } .ie.lt-9 .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title { display: block; padding-top: 200px } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box { position: relative; display: inline-block; width: 100% } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box { width: 63% } } @media (max-width: 375px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box { width: 65% } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box .product-title-list { min-height: 1.28rem } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box .product-title-list { min-height: .9rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box .product-title-list { min-height: 0; width: 120%; margin-left: -10% } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box .product-title-list .product-title { display: none; opacity: 0; visibility: hidden; -webkit-transition: visibility 0.35s ease, opacity 0.3s ease; transition: visibility 0.35s ease, opacity 0.3s ease } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box .product-title-list .product-title.current { display: inline-block; opacity: 1; visibility: visible } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box h3 { font-size: .28rem; line-height: .28rem; margin-bottom: .2rem } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box h3 { margin-bottom: .15rem; line-height: .34rem; margin-bottom: .16rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box h3 { font-size: .48rem; line-height: .48rem; margin-bottom: .28rem; margin-top: .6rem } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box h4 { font-family: "OPPOFont-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; font-size: .46rem; line-height: .46rem; margin-bottom: .3rem; margin-bottom: 36px } .win .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box h4 { font-family: "OPPOFont-Bold W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box h4 { margin-bottom: .43rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-model-title .title-box h4 { font-size: .65rem; line-height: .65rem; margin-bottom: .4rem } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-price { font-size: .28rem; font-weight: bold; margin-top: .65rem; margin-top: 70px } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-price { margin-top: .72rem } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-price { margin-top: .7rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .pro-price { margin-top: .3rem; font-size: .48rem; font-weight: normal; line-height: .63rem; margin-top: .56rem } } .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .oc-btn { width: 148px; height: 44px; border-radius: 22px; line-height: 42px; margin-top: 16px; font-size: 18px; border: 1px transparent solid } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .flagship-floor.shop-product-floor .pro-views-box .oc-btn { display: none } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor { margin: 0; margin-top: 11px } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box { height: 740px } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box { height: 840px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box { height: 580px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box { display: block; height: 540px; margin: 4px 15px !important } } @media (max-width: 540px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box { height: 495px } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1 } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views { position: relative; margin-top: 30px; margin-bottom: 20px; height: 440px; max-height: 440px; text-align: center } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views { height: 520px; max-height: 520px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views { margin-top: 50px; margin-bottom: 40px; height: 280px; max-height: 280px; z-index: 9 } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; height: 240px; max-height: 240px; width: auto } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views .product-view { width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views .product-view { display: inline-block; position: relative; visibility: visible; opacity: 1; text-align: center; min-width: calc( 100vw - 30px) } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views .product-view picture { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; width: auto } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views .product-view picture { width: auto; position: relative; display: block; text-align: center; height: 100%; width: 200%; left: 50%; margin-left: -100% } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views .product-view picture img { position: relative; display: inline-block } } @media (max-width: 540px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .product-model-views .product-view picture { width: 200%; left: 50%; margin-left: -100% } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title .color-switchable { margin-bottom: 40px } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title .color-switchable { margin-bottom: 30px } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h3 { font-family: "OPPOFont-Bold", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; font-size: .32rem; line-height: .34rem; margin-bottom: .16rem } .win .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h3 { font-family: "OPPOFont-Bold W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h3 { font-size: .34rem; line-height: .36rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h3 { font-size: .55rem; line-height: .55rem; margin-bottom: .28rem } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h4 { font-size: .2rem; line-height: .22rem; margin-bottom: .2rem } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h4 { font-size: .22rem; line-height: .22rem; margin-bottom: .29rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h4 { margin-bottom: 30px; font-size: .44rem; line-height: .44rem } } .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h5 { font-size: .26rem; line-height: .26rem } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h5 { font-size: .3rem; line-height: .3rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .main-floor.shop-product-floor .pro-views-box .pro-model-title h5 { font-size: .46rem; line-height: .46rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor { margin: -4px 11px; margin-top: 0 } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor a { position: absolute; width: 100%; height: 100% } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box { height: 440px } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box { height: 450px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box { height: 380px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box { height: 320px; margin: 4px } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h4 { font-size: .21rem; margin-bottom: .12rem } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h4 { font-size: .22rem; margin-bottom: .1rem } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h4 { font-size: .23rem; line-height: .23rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h4 { font-size: .39rem; line-height: .39rem; margin-bottom: .28rem } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h5 { font-size: .21rem } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h5 { font-size: .2rem } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h5 { font-size: .23rem; line-height: .23rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .pro-model-title h5 { font-size: .39rem; line-height: .39rem } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .product-model-views { position: relative; width: 100%; height: 203px; margin: 90px auto 50px auto; text-align: center; overflow: hidden } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .product-model-views { margin: 0 6px; text-align: center; margin-top: 1.03rem; margin-bottom: .64rem; width: auto; height: 183px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .product-model-views { margin: 0 12px; margin-top: 1.97rem; margin-bottom: 1rem; width: auto; height: 133px } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .pro-views-box .product-model-views picture { position: relative; width: 200%; left: 50%; margin-left: -100% } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box { height: 290px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box a, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box a { position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title { display: inline-block; width: 50%; left: -25% } .ie.lt-9 .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title, .ie.lt-9 .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title { top: 40%; left: 0 } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h4, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h4 { font-size: .3rem; margin-bottom: .15rem } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h4, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h4 { font-size: .32rem } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h4, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h4 { font-size: .34rem; line-height: .34rem; margin-bottom: .22rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h4, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h4 { font-size: .49rem; line-height: .49rem; margin-bottom: .41rem } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h5, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h5 { font-size: .26rem } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h5, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h5 { font-size: .28rem } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h5, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h5 { font-size: .31rem; line-height: .31rem } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .pro-model-title h5, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .pro-model-title h5 { font-size: .49rem; line-height: .49rem } } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .product-model-views, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .product-model-views { position: absolute; width: 100%; height: 105.5%; margin: 0 } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .product-model-views, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .product-model-views { margin: 0; width: 100%; height: 100% } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .product-model-views picture, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .product-model-views picture { display: inline-block; text-align: center } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .product-model-views, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .product-model-views { margin: 0; width: 100%; height: 100%; left: 0 } .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .product-model-views picture, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .product-model-views picture { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center } } @media (max-width: 768px) and (max-width: 540px) { .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .product-model-views picture, .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .product-model-views picture { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } } .ie.lt-10 .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .nice-pro .pro-views-box .product-model-views, .ie.lt-10 .shop-content-floor .shop-content-wrapper .secondary-floor.shop-product-floor .no-effet-nice-pro .pro-views-box .product-model-views { left: 0; top: 0 } .shop-content-floor .shop-content-wrapper .sup-parts.shop-product-floor { margin-top: 0; display: none } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts.shop-product-floor { margin: -4px 11px; margin-top: 0 } } .shop-content-floor .shop-content-wrapper .sup-parts.current-parts { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .ie.lt-9 .shop-content-floor .shop-content-wrapper .sup-parts.current-parts:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .ie.lt-9 .shop-content-floor .shop-content-wrapper .sup-parts.current-parts * html { height: 1px } .shop-content-floor .shop-content-wrapper .sup-parts-container { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; z-index: 99; height: 34px; color: #666666; font-family: "Myriad Pro","PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial; margin: 65px 0 22px 0 } .win .shop-content-floor .shop-content-wrapper .sup-parts-container { font-family: "OPPOFont-Regular W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .sup-parts-container { margin: 88px 0 26px 0 } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .sup-parts-container { margin: 32px 0 23px 0 } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts-container { margin: 31px 0 32px 0 } } .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-name { font-family: "OPPOFont-Medium", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; position: absolute; left: 0; bottom: -13px; color: #333333; font-size: 26px } .win .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-name { font-family: "OPPOFont-Medium W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-name { display: none } } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-name { font-size: 28px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-name { font-size: 22px } } .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container { position: absolute; padding: 15px 0; width: 80%; right: 0; z-index: 99; overflow: auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container { right: auto; left: 0; overflow: hidden; width: 100%; padding: 8px 0 } } .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-wrapper { width: 100%; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: center; font-size: 17px } .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-wrapper .parts-slide { color: #06B570; background: #ffffff; font-family: "OPPOFont-Medium", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial"; border-radius: 18px } .win .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-wrapper .parts-slide { font-family: "OPPOFont-Medium W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-wrapper { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start } } .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; cursor: pointer; line-height: 34px; padding: 0 16px; display: inline-block; font-size: 16px } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide { line-height: 35px } } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide { font-size: 18px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide { font-size: 15px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide { font-size: 15px } } .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide:not(:last-child) { margin: 0 18px } @media (min-width: 1921px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide:not(:last-child) { margin: 0 18px } } @media (max-width: 1440px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide:not(:last-child) { margin: 0 4px } } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container .swiper-slide:not(:last-child) { margin: 0 } } .shop-content-floor .shop-content-wrapper .sup-parts-container .sup-swiper-container-fiexed { position: fixed; top: 0; background: #F5F5F5; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) } .shop-content-floor .shop-content-wrapper .product-tag { position: absolute; left: 40px; top: 40px; width: 77px; height: 28px; line-height: 28px; border-radius: 3px; font-size: 14px; text-align: center; z-index: 9; display: inline-block } @media (max-width: 768px) { .shop-content-floor .shop-content-wrapper .product-tag { font-size: 12px; left: 17.5px; top: 17.5px; width: 58px; height: 21px; line-height: 21px; border-radius: 2px } } .shop-content-floor .shop-content-wrapper .product-tag.theme-1 { color: #00c678; border: 1px solid #00c678; background-color: rgba(0, 198, 120, 0.15) } .shop-content-floor .shop-content-wrapper .product-tag.theme-2 { color: #f79a47; border: 1px solid #f79a47; background-color: rgba(247, 154, 71, 0.15) } .shop-content-floor .shop-content-wrapper .product-tag.theme-3 { color: #fff; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.15) } .shop-footer-services { position: relative; width: 100%; height: 205px; background-color: #fff } @media (min-width: 768px) and (max-width: 1024px) { .shop-footer-services { height: auto } } @media (max-width: 768px) { .shop-footer-services { height: auto } } .shop-footer-services .services-wrapper { position: relative; width: 1200px; height: 100%; margin: 0 auto; border-bottom: 1px solid rgba(153, 153, 153, 0.4); -webkit-box-sizing: border-box; box-sizing: border-box } @media (max-width: 1230px) { .shop-footer-services .services-wrapper { width: auto; margin: 0 15px } } @media (max-width: 768px) { .shop-footer-services .services-wrapper .services-views { padding: 40px 55px 50px 55px } } @media (min-width: 768px) and (max-width: 1024px) { .shop-footer-services .services-wrapper .services-views ul { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: .6rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 100% } } @media (max-width: 768px) { .shop-footer-services .services-wrapper .services-views ul { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 0; margin-bottom: -.6rem } } .ie.lt-9 .shop-footer-services .services-wrapper .services-views ul { display: block } .shop-footer-services .services-wrapper .services-views ul li { position: relative; margin: 0 20px; color: #666; text-align: center } @media (max-width: 1250px) { .shop-footer-services .services-wrapper .services-views ul li { margin: 0 15px } } @media (min-width: 768px) and (max-width: 1024px) { .shop-footer-services .services-wrapper .services-views ul li { margin: 0; margin-bottom: 60px; width: 16% } } @media (max-width: 768px) { .shop-footer-services .services-wrapper .services-views ul li { margin: 0; margin-bottom: .96rem } } .shop-footer-services .services-wrapper .services-views ul li .oc-link { display: block; -webkit-transition: opacity 0.3s ease, color 0.35s ease; transition: opacity 0.3s ease, color 0.35s ease } .shop-footer-services .services-wrapper .services-views ul li .oc-link:hover { opacity: .6 } @media (max-width: 768px) { .shop-footer-services .services-wrapper .services-views ul li .oc-link:hover { opacity: 1 } } .ie.lt-9 .shop-footer-services .services-wrapper .services-views ul li { float: left; margin-top: 60px } .shop-footer-services .services-wrapper .services-views ul li i { display: inline-block; width: 100%; height: 100%; font-size: .4rem; max-height: 1em; margin-bottom: .2rem } @media (max-width: 768px) { .shop-footer-services .services-wrapper .services-views ul li i { font-size: .85rem; margin-bottom: .56rem } } .shop-footer-services .services-wrapper .services-views ul li i:before { font-weight: bold } @media (max-width: 768px) { .shop-footer-services .services-wrapper .services-views ul li i:before { font-weight: normal } } .shop-footer-services .services-wrapper .services-views ul li span { font-size: .18rem } @media (max-width: 768px) { .shop-footer-services .services-wrapper .services-views ul li span { font-size: .39rem } } .quickapp #oc-footer { margin-bottom: 55px } .oc-footer-tabbar { border-top: 1px solid rgba(0, 0, 0, 0.1); position: fixed; background: #fff; width: 100%; bottom: 0; z-index: 99; left: 0; right: 0; font-size: 13px; font-family: "OPPOFont-Regular", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } .win .oc-footer-tabbar { font-family: "OPPOFont-Regular W", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial" } .oc-footer-tabbar .active .tabbar-name { color: #FF5344 } .oc-footer-tabbar .col-3 { text-align: center } .oc-footer-tabbar .col-3 .tabbar-name { padding-bottom: 5px; font-size: 12px; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95) } .oc-footer-tabbar .tabbar-icon { padding-top: 5px; text-align: center; line-height: 0 } .oc-footer-tabbar .tabbar-icon.tabbar-icon-large { padding-top: 3px } .oc-footer-tabbar .tabbar-icon.tabbar-icon-large svg { width: 44px; height: 44px } .oc-footer-tabbar .tabbar-icon svg { width: 26px; height: 26px } .screen-ad { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 890; display: none } .screen-ad .screen-ad-mask { position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6) } .screen-ad .screen-ad-content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; width: 77.77% } .screen-ad .screen-ad-img { width: 100% } .screen-ad .algin-center { text-align: center } .screen-ad .screen-ad-close { width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("../images/close-cf9a19b4e9.png"); display: inline-block } .oc-header-guide { padding: 0 15px 0 17px; background-color: #fff; position: relative } .miniprogram .oc-header-guide { display: none } .oc-header-guide .oc-header-guide-wrapper { height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex } .oc-header-guide .oc-header-guide-close { width: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; float: right; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .oc-header-guide .header-guide-close { color: #333 } .oc-header-guide .oc-header-guide-content { padding-left: 10%; margin-top: 7px; display: -webkit-box; display: -ms-flexbox; display: flex } .oc-header-guide .oc-header-guide-img { width: 34px; height: 34px } .oc-header-guide .oc-header-guide-text { -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 10px } .oc-header-guide .oc-header-guide-text p { font-size: 14px; color: #1a1a1a } .oc-header-guide .oc-header-guide-text p:last-child { font-size: 13px; color: #666; padding-top: 2px } .oc-header-guide .oc-header-guide-btn { width: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end } .oc-header-guide .btn-master { width: 60px; height: 24px; line-height: 24px; font-size: 12px; background-color: #05b570 } .oc-header-guide .oc-header-guide-link { position: absolute; top: 0; right: 0; bottom: 0; width: calc(100% - 50px) } #oc-header { background-color: transparent } .is_simple #oc-notice { top: 0 } .oc-high { height: 100% !important } @media (min-width: 1921px) { } @media (min-width: 1024px) and (max-width: 1440px) { } @media (min-width: 768px) and (max-width: 1024px) { } @media (max-width: 768px) { }