* { padding: 0; margin: 0 } .wiko-content a { color: inherit; text-decoration: none } .wiko-content .pc-block { display: block } .wiko-content .mob-block { display: none } .wiko-content .mob-block.pc-block { display: block } .wiko-content .img { display: block } .wiko-content sup { font-size: 0.4em; line-height: 1; cursor: pointer } .wiko-content .oneline { white-space: nowrap } .wiko-content .sec1-wrap { position: relative; height: 400vh; background-color: #000 } .wiko-content .sec1-wrap .trigger1 { position: absolute; top: 50vh } .wiko-content .sec1-wrap .trigger2 { position: absolute; top: 25vh } .wiko-content .isie { display: none } .wiko-content .isnotie { display: block } .wiko-content .sec1 { background-color: #fff; position: absolute; top: 0; height: 100vh; z-index: 22; width: 100% } .wiko-content .sec1 .img-wrap { width: 100%; position: relative; transition: transform .5s ease-in-out; will-change: transform } .wiko-content .sec1 .img-wrap .kv-banner { width: 100% } .wiko-content .sec1 .wiko { position: absolute; width: 21.145833vw; bottom: 8.760417vw; left: 5vw; transition: all .5s ease-in-out; opacity: 1; will-change: opacity } .wiko-content .sec1 .wiko .wiko-icon { width: 100% } .wiko-content .sec1 .wiko .wiko-text { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 0.9375vw; margin-top: 1.041667vw } .wiko-content .sec1 .wiko .wiko-text .wiko-line { display: inline-block; width: 2px; background-color: #000; height: 1.1em } .wiko-content .harmony { width: 26.875vw; z-index: 998; opacity: 0; transition: margin-top .5s ease-in-out, opacity .3s ease-in-out; will-change: margin-top; position: fixed; top: 0; left: 50%; margin-left: -13.4375vw; margin-top: 24.479167vw; pointer-events: none; will-change: transform, opacity, margin-top } .wiko-content .harmony .harmony-wrap>img { width: 100% } .wiko-content .harmony .harmony-wrap .harmony-b { position: absolute; left: 0; top: 0; z-index: 2; will-change: opacity } .wiko-content .harmony.active { position: absolute } .wiko-content .item2-arrow { width: 3.645833vw; height: 3.645833vw; border-radius: 999px; background-clip: padding-box; background-origin: padding-box; box-sizing: border-box; position: fixed; z-index: 9999; background-color: rgba(255, 239, 196, 0.4); pointer-events: none } .wiko-content .item2-arrow .arrow-wrap { width: 100%; height: 100%; background: url("/template/cn/zipFile/wiko_5g/img/arrow.svg") repeat-y; background-size: 1.635417vw 100%; background-position: center; transition: all 0.3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .wiko-content .item2-arrow svg { width: calc(100% + 2px); height: calc(100% + 2px) } .wiko-content .item2-arrow .arrow-svg { position: absolute; top: 0; left: 0 } .wiko-content .sec1-inner.active .kv-wrap { transform: translateY(-18.64583vw) } .wiko-content .sec1-inner.active .wiko { opacity: 0 } .wiko-content .sec1-inner.active .harmony { margin-top: 0; opacity: 1; position: absolute } .wiko-content .sec1-inner { position: sticky; top: 0; z-index: 90; height: auto } .wiko-content .sec2 { background-color: #000; width: 100%; position: relative; z-index: 25; transform: translateY(100vh); will-change: transform } .wiko-content .sec2 img { display: block } .wiko-content .sec2 .list { padding-top: 14.010417vw; width: 77.552083vw; margin: 0 auto; padding-bottom: 6.25vw } .wiko-content .sec2 .list .progressSvg { width: 100%; height: 100% } .wiko-content .sec2 .list .progressSvg rect { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1.1s linear } .wiko-content .sec2 .list .line { display: flex; justify-content: space-between } .wiko-content .sec2 .list .line1 .item1-wrap { width: 27.604167vw } .wiko-content .sec2 .list .line1 .item2-wrap { width: 48.385417vw; height: 22.760417vw } .wiko-content .sec2 .list .item-wrap { display: flex; justify-content: center; align-items: center; border-radius: 0.78125vw; overflow: hidden; position: relative } .wiko-content .sec2 .list .item-wrap .item-bgcor { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity .3s; z-index: 10 } .wiko-content .sec2 .list .item3-wrap { margin-top: 1.5625vw } .wiko-content .sec2 .list .item-wrap1:hover .progressSvg rect { animation: spin1 1s 1 forwards linear } .wiko-content .sec2 .list .item-wrap1:hover .item .arrow { opacity: 1 } .wiko-content .sec2 .list .item-wrap:hover .progressSvg rect { stroke-dashoffset: 0 !important } .wiko-content .sec2 .list .item-wrap:hover .item .arrow { opacity: 1 } @keyframes spin1 { 0% { stroke-dashoffset: 2444 } 100% { stroke-dashoffset: 0 } } .wiko-content .sec2 .list .item { position: relative; background-color: #161617; border-radius: 0.78125vw; overflow: hidden; transition: background-image .3s; cursor: pointer; opacity: 1; box-sizing: border-box; z-index: 11 } .wiko-content .sec2 .list .item .title-wrap { padding: 2.760417vw 0 0 3.125vw } .wiko-content .sec2 .list .item .title-wrap .title { font-size: 2.708333vw; display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #E5C2A0, #90755C); line-height: 1.25 } .wiko-content .sec2 .list .item .title-wrap .title-s { color: #E5C2A0; font-size: 1.145833vw; line-height: 1.25; margin-top: 0.833333vw } .wiko-content .sec2 .list .item .arrow { width: 3.645833vw; padding: 2px 0 0 2px; height: 3.645833vw; border-radius: 999px; background-clip: padding-box; background-origin: padding-box; box-sizing: border-box; position: absolute; z-index: 99; background-color: rgba(255, 239, 196, 0.4); bottom: 1.875vw; left: 3.28125vw; opacity: 0; transition: opacity .3s } .wiko-content .sec2 .list .item .arrow .arrow-wrap { width: 100%; height: 100%; background: url("/template/cn/zipFile/wiko_5g/img/arrow.svg") repeat-y; background-size: 1.635417vw 100%; background-position: center; transition: all 0.3s } .wiko-content .sec2 .list .item .arrow svg { width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; top: 0; left: 0; z-index: 999 } .wiko-content .sec2 .list .item1 { width: 27.345833vw; height: calc(100% - 4px); box-sizing: border-box } .wiko-content .sec2 .list .item1 .img-wrap { width: 23.177083vw; position: absolute; bottom: 0; right: 0 } .wiko-content .sec2 .list .item1 .img-wrap img { width: 100% } .wiko-content .sec2 .list .right-wrap { flex: 1; width: 48.385417vw; margin-left: 1.5625vw; position: relative } .wiko-content .sec2 .list .right-wrap .item2 { width: 48.177083vw; height: calc(100% - 4px); overflow: visible; z-index: 11; position: relative } .wiko-content .sec2 .list .right-wrap .item2 .isie { display: none } .wiko-content .sec2 .list .right-wrap .item2 .item2-wrap { width: 26.875vw; margin: 2.239583vw 0 0 7.604167vw } .wiko-content .sec2 .list .right-wrap .item2 .item2-wrap img { width: 100% } .wiko-content .sec2 .list .right-wrap .item2 .harmony { pointer-events: none } .wiko-content .sec2 .list .right-wrap .item2-bgcor { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background: linear-gradient(130deg, #E4C089, #E6D8B1, #3C3933); width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; border-radius: 0.78125vw; overflow: hidden; z-index: 2 } .wiko-content .sec2 .list .right-wrap .item3-wrap { height: 19.375vw; width: 100% } .wiko-content .sec2 .list .right-wrap .item3 { width: calc(100% - 4px); height: calc(100% - 4px) } .wiko-content .sec2 .list .right-wrap .item3 .title-wrap { position: relative; z-index: 5 } .wiko-content .sec2 .list .right-wrap .item3 .img-wrap { width: 100%; position: absolute; top: 0; left: 0 } .wiko-content .sec2 .list .right-wrap .item3 .img-wrap img { width: 100% } .wiko-content .sec2 .list .line2 { height: 24.010417vw; margin-top: 1.5625vw } .wiko-content .sec2 .list .line2 .item5-wrap, .wiko-content .sec2 .list .line2 .item6-wrap { width: 23.59375vw } .wiko-content .sec2 .list .line2 .item4-wrap { width: 27.8125vw } .wiko-content .sec2 .list .line2 .item { height: calc(24.010417vw - 4px) } .wiko-content .sec2 .list .line2 .item4 { width: calc(100% - 4px) } .wiko-content .sec2 .list .line2 .item4 .title-wrap { position: relative; z-index: 3 } .wiko-content .sec2 .list .line2 .item4 .img-wrap { width: 18.125vw; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) } .wiko-content .sec2 .list .line2 .item4 .img-wrap img { width: 100% } .wiko-content .sec2 .list .line2 .item5 { width: 23.279167vw } .wiko-content .sec2 .list .line2 .item5 .img-wrap .memory { font-size: 5.25vw; font-weight: 500; text-align: center; margin-right: 0.364583vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to bottom, #42464f, #17181a); line-height: 1; margin-top: 4.427083vw; font-weight: bold } .wiko-content .sec2 .list .line2 .item5 .img-wrap img { width: 100%; position: relative; z-index: 3; margin-top: -2.5vw } .wiko-content .sec2 .list .line2 .item6 { width: calc(100% - 4px) } .wiko-content .sec2 .list .line2 .item6 .img-wrap { width: 100%; position: absolute; left: 0; bottom: 0 } .wiko-content .sec2 .list .line2 .item6 .img-wrap img { width: 100% } .wiko-content .sec3-wrap { height: 800vh; position: relative; z-index: 2; background-color: #000 } .wiko-content .sec3-wrap .trigger1 { position: absolute; top: 200vh } .wiko-content .sec3-wrap .trigger2 { position: absolute; top: 225vh } .wiko-content .sec3-wrap .trigger3 { position: absolute; top: 3.125vw } .wiko-content .sec3-wrap .sec3 { height: 100vh; position: sticky; top: 0; z-index: 2; background: #000; overflow: hidden; transform: translateY(2px) } .wiko-content .sec3-wrap .sec3 img { display: block } .wiko-content .sec3-wrap .sec3 .title-l { position: absolute; top: 50%; transform: translateY(-50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); font-size: 2.5vw; left: 12.552083vw; line-height: 1.25; width: 21.145833vw; text-align: center } .wiko-content .sec3-wrap .sec3 .title-r { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.145833vw; color: #fff; width: 18.333333vw; left: 66.354167vw; line-height: 1.6 } .wiko-content .sec3-wrap .sec3 .ani0 { width: 100%; height: 100vh; font-size: 6.458333vw; color: #fff; display: flex; align-items: center; text-align: center; position: absolute; top: 0; left: 0; z-index: 20; will-change: opacity, transform } .wiko-content .sec3-wrap .sec3 .ani0 .title { display: inline-block; margin: 0 auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0) } .wiko-content .sec3-wrap .sec3 .ani1 { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; will-change: opacity } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap { width: 100% } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap img { width: 100% } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap video { display: none; width: 100% } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap .wx-img { display: none } .wiko-content .sec3-wrap .sec3 .ani2 { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); will-change: opacity } .wiko-content .sec3-wrap .sec3 .ani3-wrap { width: 100% } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 { width: 14.74375vw; height: 31.939583vw; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: -0.4vw; opacity: 0; display: flex; transition: width 0s linear, height 0s linear; will-change: opacity, transform, width, height } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .left { width: 44.8636%; height: 100%; display: flex; flex-direction: column; overflow: hidden; transition: width 0.8s } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .left .title-wrap { height: 37.968%; background-color: #F3F3F3 } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .left .title-wrap .title { width: 36.4583vw; display: flex; align-items: center; font-size: 13.020833vw; height: 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(120deg, #E0E0E0 0%, #9F9F9F 70%, #E0E0E0 100%); padding-left: 8.333333vw; transform: translateX(15vw); transition: transform .8s } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .left .title-s-wrap { margin-top: -3px; background-color: #fff; flex: 1 } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .left .title-s-wrap .title-s-inner-wrap { background-color: #E5E5E5; width: 100%; height: 100% } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .left .title-s-wrap .title-s-inner-wrap .title-s { font-size: 1.145833vw; width: 25vw; line-height: 1.6; color: #292627; padding: 5.989583vw 0 0 8.333333vw; transform: translateX(15vw); transition: transform .8s 0.2s } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .right { flex: 1; background-color: #fff; overflow: hidden; margin-left: -1px; z-index: 10 } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .right .right-img-wrap { height: 100%; width: 100%; opacity: 0; transition: opacity 0.8s } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 .right .right-img-wrap img { width: 100%; height: 100%; object-fit: cover } @keyframes title-s { 0% { transform: translateX(0) } 50% { transform: translateX(4vw) } 100% { transform: translateX(0) } } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3.active { width: 100vw !important; transition: width .5s linear, height .5s linear } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3.active .left { width: 36.458333% } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3.active .left .title-wrap .title { transform: translateX(0) } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3.active .left .title-s-wrap { animation: title-s 0.6s linear } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3.active .left .title-s-wrap .title-s-inner-wrap .title-s { transform: translateX(0) } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3.active .right .right-img-wrap { opacity: 1 } .wiko-content .sec3-wrap .sec3 .ani4 { display: flex; position: relative; height: 100%; z-index: 10; transform: translateY(1px) } .wiko-content .sec3-wrap .sec3 .ani4 .left { width: 36.458333vw; display: flex; flex-direction: column } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-wrap { transform: translateX(100vw); transition: transform 0.8s; width: 36.458333vw; height: 21.354167vw; background-color: #5B5B62; display: flex; align-items: center } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-wrap .title { padding-left: 8.333333vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #050506, #21242A); font-size: 13.020833vw; line-height: 1.25 } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-s-wrap { width: 100%; flex: 1; background-color: #222327; margin-top: -1px; transform: translateX(100vw); transition: transform 0.8s 0.15s } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-s-wrap .title-s { font-size: 1.145833vw; color: #fff; width: 24.6875vw; padding: 5.989583vw 0 0 8.333333vw; line-height: 1.6 } .wiko-content .sec3-wrap .sec3 .ani4 .right { flex: 1; overflow: hidden; margin-left: -1px; transform: translateX(100vw); transition: transform 0.8s 0.15s } .wiko-content .sec3-wrap .sec3 .ani4 .right .right-img-wrap { width: 100%; height: 100%; transform-origin: 27% 21% } .wiko-content .sec3-wrap .sec3 .ani4 .right .right-img-wrap img { width: 100%; height: 100%; object-fit: cover } .wiko-content .sec3-wrap .sec3 .ani4.active .left .title-wrap { transform: translateX(0) } .wiko-content .sec3-wrap .sec3 .ani4.active .left .title-s-wrap { transform: translateX(0) } .wiko-content .sec3-wrap .sec3 .ani4.active .right { transform: translateX(0) } .wiko-content .sec5-wrap { height: 500vh; position: relative } .wiko-content .sec5-wrap .sec5 { height: 100vh; position: sticky; top: 0; background: #000 } .wiko-content .sec5-wrap .sec5 .harmony-wrap, .wiko-content .sec5-wrap .sec5 .ani2, .wiko-content .sec5-wrap .sec5 .ani3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); will-change: margin-top, opacity } .wiko-content .sec5-wrap .sec5 .harmony-wrap { width: 34.114583vw } .wiko-content .sec5-wrap .sec5 .harmony-wrap img { width: 100% } .wiko-content .sec5-wrap .sec5 .ani2, .wiko-content .sec5-wrap .sec5 .ani3 { width: 58.020833vw; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap } .wiko-content .sec5-wrap .sec5 .ani2 .ani2-title, .wiko-content .sec5-wrap .sec5 .ani2 .ani3-title, .wiko-content .sec5-wrap .sec5 .ani3 .ani2-title, .wiko-content .sec5-wrap .sec5 .ani3 .ani3-title { display: inline-block; margin: 0 auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); font-size: 5.729167vw; font-weight: 500; line-height: 1.25; transform: translate(-1px, -1px) } .wiko-content .sec5-wrap .sec5 .ani2 .ani2-title-s, .wiko-content .sec5-wrap .sec5 .ani3 .ani2-title-s { font-size: 1.145833vw; text-align: center; margin-top: 3.125vw; color: #fff; line-height: 1.6 } .wiko-content .sec5-wrap .sec5 .ani3 { z-index: 3 } .wiko-content .sec5-wrap .sec5 .ani3 .ani3-title { font-size: 3.333333vw } .wiko-content .sec5-wrap .sec5 .ani3 .ani3-title-s { width: 40.104167vw; font-size: 1.145833vw; text-align: center; margin-top: 2.083333vw; color: #fff; line-height: 1.6 } .wiko-content .sec5-wrap .sec5 .ani3 .phone-wrap { width: 46.875vw; margin-top: 4.166667vw; transform-origin: center; position: relative } .wiko-content .sec5-wrap .sec5 .ani3 .phone-wrap img { width: 100%; transform-origin: center center } .wiko-content .sec5-wrap .sec5 .ani4 { z-index: 4; display: flex; align-items: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%); will-change: margin-top, opacity } .wiko-content .sec5-wrap .sec5 .ani4 .left { width: 22.5vw; color: #fff; margin-left: 15.625vw } .wiko-content .sec5-wrap .sec5 .ani4 .left .left-title { font-size: 2.5vw; line-height: 1.25 } .wiko-content .sec5-wrap .sec5 .ani4 .left .left-title-s { width: 18.333333vw; font-size: 1.145833vw; line-height: 1.6; margin-top: 2.291667vw } .wiko-content .sec5-wrap .sec5 .ani4 .right { margin-left: 1.302083vw; width: 49.375vw; height: 49.375vw; position: relative } .wiko-content .sec5-wrap .sec5 .ani4 .right .mob-wrap { width: 13.229167vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3 } .wiko-content .sec5-wrap .sec5 .ani4 .right .mob-wrap img { width: 100% } .wiko-content .sec5-wrap .sec5 .ani4 .right .circle-wrap { width: 100%; height: 100%; z-index: 2 } .wiko-content .sec5-wrap .sec5 .ani4 .right .circle-wrap .item { position: absolute; width: 100%; height: 100%; border-radius: 999px; background: radial-gradient(#010101 30%, #324254); transform-origin: center center } .wiko-content .sec5-wrap .sec5 .ani4 .right .circle-wrap .item1 { animation: circleAni 2.4s linear infinite 0.8s } .wiko-content .sec5-wrap .sec5 .ani4 .right .circle-wrap .item2 { animation: circleAni 2.4s linear infinite 1.6s } .wiko-content .sec5-wrap .sec5 .ani4 .right .circle-wrap .item3 { animation: circleAni 2.4s linear infinite 2.4s } @keyframes circleAni { 0% { transform: scale(0.3); opacity: 1 } 100% { transform: scale(1); opacity: 0 } } .wiko-content .sec15, .wiko-content .sec16 { overflow: hidden; background-color: #000; display: flex; flex-direction: column; justify-content: center } .wiko-content .sec15 .title, .wiko-content .sec16 .title { font-size: 3.333333vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); text-align: center; line-height: 1.25 } .wiko-content .sec15 .title-s, .wiko-content .sec16 .title-s { color: #fff; font-size: 1.145833vw; line-height: 1.6; text-align: center; margin: 2.083333vw auto 0 } .wiko-content .sec15 { padding-top: 6.25vw } .wiko-content .sec15 .title-s { width: 33.802083vw } .wiko-content .sec15 .img-wrap { width: 65.083333vw; margin: 4.166667vw auto 0 } .wiko-content .sec15 .img-wrap img { width: 100% } .wiko-content .sec15 .sec15-tips { color: rgba(255, 255, 255, 0.6); text-align: right; font-size: 0.833333vw; padding: 2.083333vw 16.927083vw 0 0 } .wiko-content .sec16 { padding: 13.729167vw 0 7.291667vw } .wiko-content .sec16 .title-s { width: 45.729167vw } .wiko-content .sec16 .img-wrap { width: 60.520833vw; margin: 4.166667vw auto 0 } .wiko-content .sec16 .img-wrap img { width: 100% } .wiko-content .sec16 .sec16-tips { color: rgba(255, 255, 255, 0.6); text-align: right; font-size: 0.833333vw; padding: 2.083333vw 16.927083vw 0 0 } .wiko-content .sec17-wrap { height: 200vh; position: relative; background: #000 } .wiko-content .sec17-wrap .sec17 { position: sticky; height: 100vh; background: #000; top: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.5vw 0 0; box-sizing: border-box } .wiko-content .sec17-wrap .sec17 img { display: block } .wiko-content .sec17-wrap .sec17 .title { font-size: 3.333333vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); text-align: center; line-height: 1.25 } .wiko-content .sec17-wrap .sec17 .title-s { width: 35.104167vw; color: #fff; font-size: 1.145833vw; line-height: 1.6; text-align: center; margin: 2.083333vw auto 0 } .wiko-content .sec17-wrap .sec17 .scroll { width: 100%; overflow: hidden; margin-top: 4.166667vw } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll-mob { display: none } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll { width: 117.395833vw; position: relative; will-change: transform; margin-left: -3.854167vw } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll .line1, .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll .line2 { display: flex } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll .line1 { justify-content: flex-end } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll .line1 .item { margin-left: 1.5625vw } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll .line2 { margin-top: 1.979167vw; justify-content: flex-start } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll .line2 .item { margin-right: 1.5625vw } .wiko-content .sec17-wrap .sec17 .item { border-radius: 1.614583vw; overflow: hidden } .wiko-content .sec17-wrap .sec17 .item1 .img-wrap, .wiko-content .sec17-wrap .sec17 .item3 .img-wrap, .wiko-content .sec17-wrap .sec17 .item4 .img-wrap, .wiko-content .sec17-wrap .sec17 .item6 .img-wrap, .wiko-content .sec17-wrap .sec17 .item7 .img-wrap, .wiko-content .sec17-wrap .sec17 .item8 .img-wrap, .wiko-content .sec17-wrap .sec17 .item9 .img-wrap, .wiko-content .sec17-wrap .sec17 .item10 .img-wrap { width: 14.583333vw } .wiko-content .sec17-wrap .sec17 .item1 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item3 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item4 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item6 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item7 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item8 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item9 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item10 .img-wrap img { width: 100% } .wiko-content .sec17-wrap .sec17 .item2 .img-wrap, .wiko-content .sec17-wrap .sec17 .item5 .img-wrap, .wiko-content .sec17-wrap .sec17 .item11 .img-wrap { width: 29.895833vw } .wiko-content .sec17-wrap .sec17 .item2 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item5 .img-wrap img, .wiko-content .sec17-wrap .sec17 .item11 .img-wrap img { width: 100% } .wiko-content .sec17-wrap .sec17 .item3 { overflow: visible; height: 14.583333vw } .wiko-content .sec17-wrap .sec17 .item3 .item3-overflow { width: 14.583333vw; overflow: hidden; border-radius: 1.614583vw; transform-origin: center top } .wiko-content .sec17-wrap .sec17 .item3 .item3-overflow .img-wrap { width: 100% } .wiko-content .sec6-wrap { height: 400vh; position: relative } .wiko-content .sec6-wrap .sec6 { min-height: 100vh; position: sticky; top: 0; background: #000; overflow: hidden } .wiko-content .sec6-wrap .sec6 .ani1 { height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; line-height: 1; transform: translate(0) scale(1); transition: all .5s; transform-origin: 62.9% 64%; position: absolute; left: 0; top: 0; z-index: 11 } .wiko-content .sec6-wrap .sec6 .ani1 .title { font-size: 5.729167vw; transition: all .5s; color: #fff } .wiko-content .sec6-wrap .sec6 .ani1 .title .color { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s { font-size: 5.729167vw; display: flex; align-items: center; margin-top: 2.65625vw; text-align: center; transform: translate(0); transition: all .5s } .wiko-content .sec6-wrap .sec6 .ani1 .title-s>div { display: inline-block } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .first, .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale { display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); transition: all .5s } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .first { transform: translate(0, 1px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap { position: relative; padding: 0 0.572917vw 0 1.666667vw; width: 4.739583vw; height: 5.208333vw; transition: all .5s; transform-origin: center center; z-index: 10 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .scale { opacity: 0; transform: scale(0); display: inline-flex; white-space: nowrap; transform-origin: center center; width: 0; height: 0; position: relative; z-index: 4 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border1, .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 { display: inline-block; width: 1.410417vw; height: 2.083333vw; will-change: transform, opacity } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border1 { vertical-align: super; margin-left: 1.354167vw; position: absolute; top: 0; left: 0 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border1 .line-top { width: 100%; height: 0.416667vw; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); position: absolute; top: 0; left: 0; z-index: 5 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border1 .line-left { position: absolute; top: 0; left: 0; width: 0.416667vw; height: 100%; background: #000; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); z-index: 3 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 { vertical-align: sub; margin-left: 0.416667vw; bottom: 0; position: absolute; right: 0 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 .line-bottom { width: 100%; height: 0.416667vw; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); position: absolute; bottom: 0; right: 0; z-index: 5 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 .line-right { position: absolute; bottom: 0; right: 0; width: 0.416667vw; height: 100%; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); transition: opacity .3s; transition: filter .5s .25s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 0.677083vw; opacity: 0; height: calc(100%); z-index: 6 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap { height: calc(100%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 0.677083vw; z-index: 10; clip-path: inset(2px 0) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll { transform: translate3d(0, 0, 0); opacity: 0; transition: opacity .5s .5s; transition: transform 1s; will-change: transform } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item { transition: opacity .5s; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(1) { filter: blur(3.5px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(2) { filter: blur(3px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(3) { filter: blur(2.5px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(4) { filter: blur(2px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(5) { filter: blur(1.5px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(6) { filter: blur(1px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(7) { filter: blur(0.5px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap .hz-scroll .item:nth-of-type(8) { filter: blur(0px) } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap.active .overlay-top { display: block; width: 100%; height: 1.1vw; position: absolute; left: 0; top: -0.4vw; background: linear-gradient(to bottom, #000 20%, transparent); z-index: 999 } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap.active .overlay-bottom { display: block; width: 100%; height: 1.1vw; position: absolute; left: 0; bottom: -0.4vw; background: linear-gradient(to top, #000 20%, transparent); z-index: 999 } .wiko-content .sec6-wrap .sec6 .ani2 { position: relative; width: 100%; height: 100vh; top: 0; left: 0; z-index: 9; display: flex; flex-direction: column; justify-content: center; align-items: center } .wiko-content .sec6-wrap .sec6 .ani2 .bg-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: .6 } .wiko-content .sec6-wrap .sec6 .ani2 .bg-wrap img { width: 100%; height: 100%; object-fit: cover } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap { width: 62.916667vw; margin: 0 auto; position: relative; z-index: 11 } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content { width: 51.40625vw; margin: 0 auto; position: absolute; left: 6.8125vw; top: 6.8125vw; z-index: 11; color: #fff; display: flex; align-items: center; will-change: opacity } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .ani2-title { font-size: 7.135417vw; font-weight: 500; position: relative; padding-right: 1vw; line-height: 1.25 } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .ani2-title sup { position: absolute; top: 0; right: 0; vertical-align: text-top; cursor: pointer; font-size: 1.75vw } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .two-imgs { will-change: opacity, width } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .ani-phone { will-change: opacity, width } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .phone-inner-wrap .sec6-logo { position: absolute; left: 0; bottom: -8.33333vw; width: auto; height: 8.33333vw; } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .right { margin-left: 7.34375vw; display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1 } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .right .row .item .item-title { font-size: 1.40625vw; color: rgba(255, 255, 255, 0.8) } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .right .row .item .item-title-s { font-weight: 500; font-size: 2.864583vw; margin-top: 0.677083vw } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content .right .row .item:nth-of-type(2) { margin-top: 2.03125vw } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .phone-innerbg { display: none } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap img { width: 100% } .wiko-content .sec6-wrap .sec6 .ani2 .sec6-tips { font-size: 0.833333vw; color: #fff; position: absolute; bottom: 1.041667vw; right: 9.6875vw } .wiko-content .sec6-wrap .sec6.active .ani1 .title-s .scale-wrap { width: 15.15625vw; height: 6.09375vw } .wiko-content .sec6-wrap .sec6.active .ani1 .title-s .scale-wrap .hz { transition: opacity 1s } .wiko-content .sec6-wrap .sec6.active .ani1 .title-s .scale { transform: scale(1); opacity: 1; width: auto; height: auto; transition: all .3s } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 { transform: scale(2) } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title { opacity: 0 } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .scale-wrap { width: 19.45625vw } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .scale { opacity: 0 } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .first { opacity: 0 } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .hz { filter: blur(0); animation: hzHidden 1s linear } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .hz-wrap .hz-scroll { transform: translate3d(0, -87.5%, 0); opacity: 1 } @keyframes hzHidden { 0% { opacity: 0 } 100% { opacity: 1 } } .wiko-content .sec7-wrap { height: 130vh; background: #000; position: relative; overflow: hidden } .wiko-content .sec7-wrap .sec7 { min-height: 100vh; position: sticky; top: 0; background: #000 } .wiko-content .sec7-wrap .sec7 .img-wrap { width: 110.364583vw; margin-left: -17.135417vw; position: absolute; top: 0; left: 0 } .wiko-content .sec7-wrap .sec7 .img-wrap img { width: 100%; display: block } .wiko-content .sec7-wrap .sec7 .all-line { display: flex; margin-bottom: 2vw } .wiko-content .sec7-wrap .sec7 .all-line .line-top { background: #fff; height: 1px } .wiko-content .sec7-wrap .sec7 .all-line .line-left { background: #fff; width: 1px } .wiko-content .sec7-wrap .sec7 .all-line .item { position: relative; white-space: nowrap } .wiko-content .sec7-wrap .sec7 .all-line .item .item-text { position: absolute; bottom: 0; left: 1.041667vw } .wiko-content .sec7-wrap .sec7 .all-line .item .item-title { color: #fff; line-height: 1; font-size: 1.979167vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #E5C2A0, #BF9F81); font-weight: 500 } .wiko-content .sec7-wrap .sec7 .all-line .item .item-title-s { color: #fff; margin-top: 1.302083vw; line-height: 1.6; font-size: 1.25vw } .wiko-content .sec7-wrap .sec7 .all-line .item .item-title-s .cm { margin-top: 0.260417vw } .wiko-content .sec7-wrap .sec7 .all-line .item1 { margin: 18.702083vw 0 0 10.9375vw; width: 11.875vw; height: 37.34375vw } .wiko-content .sec7-wrap .sec7 .all-line .item1 .line-top { width: 100%; position: absolute; right: 0 } .wiko-content .sec7-wrap .sec7 .all-line .item1 .line-left { height: 100% } .wiko-content .sec7-wrap .sec7 .all-line .item2 { margin: 13.5vw 0 0 1.302083vw; width: 1.197917vw; height: 33.4375vw } .wiko-content .sec7-wrap .sec7 .all-line .item2 .line-top { width: 0; position: absolute; right: 0 } .wiko-content .sec7-wrap .sec7 .all-line .item2 .line-left { height: 100% } .wiko-content .sec7-wrap .sec7 .all-line .item3 { margin: 16.729167vw 0 0 13.385417vw; width: 1.979167vw; height: 39.0625vw } .wiko-content .sec7-wrap .sec7 .all-line .item3 .line-top { width: 100%; position: absolute; left: -100% } .wiko-content .sec7-wrap .sec7 .all-line .item3 .line-left { height: 100% } .wiko-content .sec7-wrap .sec7 .all-line .item4 { width: 13.541667vw; margin: 12.041667vw 0 0 10.677083vw; height: 27.083333vw } .wiko-content .sec7-wrap .sec7 .all-line .item4 .line-top { width: 100%; position: absolute; left: -100% } .wiko-content .sec7-wrap .sec7 .all-line .item4 .line-left { height: 100% } .wiko-content .sec7-wrap .sec7 .sec-title { position: absolute; top: 35.3125vw; left: 68.177083vw; line-height: 1 } .wiko-content .sec7-wrap .sec7 .sec-title .title { font-size: 5.729167vw; transform: translate(0, -1px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #B8BABF, #E2E0D7, #E9EEF2, #E2E0D7, #E9EEF2) } .wiko-content .sec7-wrap .sec7 .sec-title .title-s { font-size: 2.708333vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #9B9B9B, #E2E0D7 20%, #E9EEF2, #CDCCC5); margin-top: 2.239583vw } .wiko-content .sec8-wrap { height: 700vh; position: relative } .wiko-content .sec8-wrap img { width: 100% } .wiko-content .sec8-wrap .sec8-trigger { position: absolute; top: 20vw } .wiko-content .sec8-wrap .sec8 { position: sticky; height: 100vh; top: 0; overflow: hidden; background-color: #000 } .wiko-content .sec8-wrap .sec8 .all-ani { width: 400vw; height: 100%; display: flex; position: relative; transition: all .8s, transform .8s } .wiko-content .sec8-wrap .sec8 .ani { width: 100% } .wiko-content .sec8-wrap .sec8 .ani1 { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; height: 100% } .wiko-content .sec8-wrap .sec8 .ani1 .ani1-inner { display: flex; height: 15.885417vw } .wiko-content .sec8-wrap .sec8 .ani1 .title-r, .wiko-content .sec8-wrap .sec8 .ani1 .title-l { font-size: 5.729167vw; margin-top: 3.489583vw; line-height: 1.45; -webkit-background-clip: text; -webkit-text-fill-color: transparent } .wiko-content .sec8-wrap .sec8 .ani1 .title-r { background-image: linear-gradient(to right, #6C6E74, #D7DAE5, #D7DAE5) } .wiko-content .sec8-wrap .sec8 .ani1 .title-l { background-image: linear-gradient(to right, #D7D9E3, #D0D0D0) } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap { margin: 0 3.90625vw; width: 15.885417vw } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .camera-wrap { clip-path: inset(0 round 7.94271vw); height: 32.291667vw; overflow: hidden; transition: all .5s; transform-origin: center 7.65625vw } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .camera-wrap img { width: 15.885417vw } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .show-hidden { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: circle(1px at 50.22693vw calc(50% - 4.06vw)); z-index: 10; overflow: hidden; width: 100%; height: 100vh } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .show-hidden .show-wrap { height: 100vh; width: 100vw; position: relative; top: 50%; margin: -50vh 0 0 -50vw; left: 50% } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .show-hidden .show-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; transform-origin: 100% 20%; display: block } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .show-hidden .show-wrap .overlay { background-image: linear-gradient(to top, #000 0%, transparent 35%); opacity: 0; height: 100%; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.4s } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .show-hidden .show-text { font-size: 1.145833vw; color: #fff; width: 17.96875vw; position: absolute; right: 21.875vw; bottom: 13.541667vw; transition: opacity 0.4s; opacity: 0; z-index: 20 } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .show-hidden .show-text-s { font-size: 0.833333vw; position: absolute; color: rgba(255, 255, 255, 0.8); right: 14.895833vw; bottom: 6.25vw; opacity: 0; z-index: 20 } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .show-hidden.active { clip-path: circle(100vw at 53.02929vw 23.75vw) } .wiko-content .sec8-wrap .sec8 .ani1 .img-wrap .camera-wrap.active { clip-path: inset(1.48458vw 1.51458vw 0 1.41458vw round 6.45833vw); height: 14.475vw } .wiko-content .sec8-wrap .sec8 .ani1 .title { font-size: 5.729167vw; line-height: 1.25; position: relative; z-index: -1; padding-top: 1vw; font-weight: 500; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #6C6E74, #D7DAE5, #D7DAE5, #D0D0D0) } .wiko-content .sec8-wrap .sec8 .ani2 .content, .wiko-content .sec8-wrap .sec8 .ani3 .content, .wiko-content .sec8-wrap .sec8 .ani4 .content { color: #fff; display: flex } .wiko-content .sec8-wrap .sec8 .ani2 .title, .wiko-content .sec8-wrap .sec8 .ani3 .title, .wiko-content .sec8-wrap .sec8 .ani4 .title { font-size: 2.5vw; line-height: 1.25 } .wiko-content .sec8-wrap .sec8 .ani2 .title-s, .wiko-content .sec8-wrap .sec8 .ani3 .title-s, .wiko-content .sec8-wrap .sec8 .ani4 .title-s { font-size: 1.145833vw; margin-top: 2.083333vw; line-height: 1.6 } .wiko-content .sec8-wrap .sec8 .ani2 .content-bottom, .wiko-content .sec8-wrap .sec8 .ani3 .content-bottom, .wiko-content .sec8-wrap .sec8 .ani4 .content-bottom { margin-top: 4.166667vw; display: flex } .wiko-content .sec8-wrap .sec8 .ani2 .content-bottom .item-title, .wiko-content .sec8-wrap .sec8 .ani3 .content-bottom .item-title, .wiko-content .sec8-wrap .sec8 .ani4 .content-bottom .item-title { display: inline-block; font-size: 2.708333vw; line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(115deg, #E5C2A0, #90755C) } .wiko-content .sec8-wrap .sec8 .ani2 .content-bottom .item-text, .wiko-content .sec8-wrap .sec8 .ani3 .content-bottom .item-text, .wiko-content .sec8-wrap .sec8 .ani4 .content-bottom .item-text { font-size: 1.145833vw; line-height: 1.6; opacity: 0.6; margin-top: 0.833333vw } .wiko-content .sec8-wrap .sec8 .ani2 .content-bottom .item:nth-of-type(2), .wiko-content .sec8-wrap .sec8 .ani3 .content-bottom .item:nth-of-type(2), .wiko-content .sec8-wrap .sec8 .ani4 .content-bottom .item:nth-of-type(2) { margin-left: 3.125vw } .wiko-content .sec8-wrap .sec8 .ani2 { display: flex; justify-content: center; align-items: center; padding-top: 3.125vw } .wiko-content .sec8-wrap .sec8 .ani2 .content { width: 72.916667vw; margin: 0 auto } .wiko-content .sec8-wrap .sec8 .ani2 .content .text { width: 19.895833vw; display: flex; flex-direction: column; justify-content: center } .wiko-content .sec8-wrap .sec8 .ani2 .content .right-wrap { width: 47.8125vw; margin: 0 0 0 5.208333vw; position: relative } .wiko-content .sec8-wrap .sec8 .ani2 .content .right-wrap .tips { position: absolute; font-size: 0.833333vw; right: 1.354167vw; bottom: 1.041667vw; color: rgba(255, 255, 255, 0.8) } .wiko-content .sec8-wrap .sec8 .ani2 .content .content-bottom { margin-top: 4.166667vw; display: flex } .wiko-content .sec8-wrap .sec8 .ani2 .content .content-bottom .item-title { display: inline-block; font-size: 2.708333vw; line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(115deg, #E5C2A0, #90755C) } .wiko-content .sec8-wrap .sec8 .ani2 .content .content-bottom .item-text { font-size: 1.145833vw; line-height: 1.6; opacity: 0.6; margin-top: 0.833333vw } .wiko-content .sec8-wrap .sec8 .ani2 .content .content-bottom .item:nth-of-type(2) { margin-left: 3.125vw } .wiko-content .sec8-wrap .sec8 .ani3 { display: flex; justify-content: center; align-items: center; padding-top: 3.125vw } .wiko-content .sec8-wrap .sec8 .ani3 .content { width: 72.916667vw } .wiko-content .sec8-wrap .sec8 .ani3 .content .left { margin-right: 3.125vw } .wiko-content .sec8-wrap .sec8 .ani3 .content .left .title { width: 25.46875vw } .wiko-content .sec8-wrap .sec8 .ani3 .content .left .title-s { width: 25.46875vw; margin-top: 1.875vw } .wiko-content .sec8-wrap .sec8 .ani3 .content .left .left-wrap { margin-top: 4.53125vw; position: relative } .wiko-content .sec8-wrap .sec8 .ani3 .content .left .left-wrap .tips { position: absolute; font-size: 0.833333vw; right: 1.354167vw; bottom: 1.041667vw; color: rgba(255, 255, 255, 0.8) } .wiko-content .sec8-wrap .sec8 .ani3 .content .right .right-wrap { width: 37.604167vw; position: relative } .wiko-content .sec8-wrap .sec8 .ani3 .content .right .right-wrap .tips { position: absolute; font-size: 0.833333vw; right: 1.354167vw; bottom: 1.041667vw; color: rgba(255, 255, 255, 0.8) } .wiko-content .sec8-wrap .sec8 .ani3 .content .right .content-bottom { margin-top: 5.208333vw; justify-content: center } .wiko-content .sec8-wrap .sec8 .ani4 { display: flex; align-items: center; justify-content: flex-start; padding-top: 3.125vw } .wiko-content .sec8-wrap .sec8 .ani4 .left { width: 20vw; margin: 0 6.041667vw 0 13.385417vw; color: #fff } .wiko-content .sec8-wrap .sec8 .ani4 .left .title-s { margin-top: 1.875vw } .wiko-content .sec8-wrap .sec8 .ani4 .left .icon-wrap { width: 6.354167vw; margin-top: 4.114583vw } .wiko-content .sec8-wrap .sec8 .ani4 .left .text { opacity: 0.6; margin-top: 0.9375vw; font-size: 0.9375vw } .wiko-content .sec8-wrap .sec8 .ani4 .img-wrap { width: 62.5vw; position: relative } .wiko-content .sec8-wrap .sec8 .ani4 .img-wrap .tips { position: absolute; font-size: 0.833333vw; right: 2.354167vw; bottom: 1.041667vw; color: rgba(255, 255, 255, 0.8) } .wiko-content .sec9-wrap { height: 300vh; position: relative } .wiko-content .sec9-wrap .sec9 { position: sticky; top: 0; height: 100vh; overflow: hidden; background-color: #000 } .wiko-content .sec9-wrap .sec9 .ani1 { display: flex; align-items: center; flex-wrap: wrap; position: absolute; top: 50%; transform: translateY(-50%); left: 0; margin-left: 23.645833vw } .wiko-content .sec9-wrap .sec9 .ani1 .title-l { font-size: 5.729167vw; margin-right: 2.604167vw; transition: transform 0.5s; line-height: 1.45; transform: translate(-1px, 0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(120deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0) } .wiko-content .sec9-wrap .sec9 .ani1 .ani1-wrap { transition: all .5s } .wiko-content .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap { width: 32.291667vw; margin: 0 auto; transform-origin: 24.322917vw center } .wiko-content .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap .inner-wrap-s { transform-origin: center; clip-path: inset(0 round 10vw); transition: clip-path 0.5s, height 0.5s } .wiko-content .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap .inner-wrap-s .isie { display: none } .wiko-content .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap .inner-wrap-s img { width: 100%; display: block } .wiko-content .sec9-wrap .sec9 .ani1 .title { font-size: 5.729167vw; line-height: 1.25; margin-left: 11.510417vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(120deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0) } .wiko-content .sec9-wrap .sec9 .show-hidden { width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%) } .wiko-content .sec9-wrap .sec9 .show-hidden .show-wrap { clip-path: circle(0 at 46.86875vw 19.465vw); transition: clip-path .5s; overflow: hidden; width: 72.916667vw; height: 45.833333vw; margin: 0 13.541667vw; position: relative } .wiko-content .sec9-wrap .sec9 .show-hidden .show-wrap img { width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover } .wiko-content .sec9-wrap .sec9 .show-hidden .last { position: absolute; bottom: 0; display: flex; width: 100%; justify-content: space-between; padding-bottom: 6.333333vw } .wiko-content .sec9-wrap .sec9 .show-hidden .last .left { margin-left: 13.541667vw; display: flex; align-items: flex-end } .wiko-content .sec9-wrap .sec9 .show-hidden .last .left .left-title { font-size: 5.729167vw; line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(120deg, #9B8361, #E3BE86, #FFEFC4) } .wiko-content .sec9-wrap .sec9 .show-hidden .last .left .left-title-s { font-size: 1.145833vw; color: #fff; line-height: 1.6 } .wiko-content .sec9-wrap .sec9 .show-hidden .last .right { margin-right: 13.541667vw; width: 19.6875vw; font-size: 1.145833vw; color: #fff; line-height: 1.6; display: flex; align-items: flex-end } .wiko-content .sec9-wrap .sec9 .show-hidden .sec9-tips { position: absolute; bottom: 1.666667vw; right: 6.25vw; font-size: 0.833333vw; color: rgba(255, 255, 255, 0.8) } .wiko-content .sec9-wrap .sec9 .show-hidden.active .show-wrap { clip-path: circle(100vw at 46.86875vw 20.165vw) } .wiko-content .sec9-wrap .sec9 .ani1.active .title-l { transform: translateX(11.51042vw) } .wiko-content .sec9-wrap .sec9 .ani1.active .ani1-wrap { transform: translateX(-7.29167vw) } .wiko-content .sec9-wrap .sec9 .ani1.active .ani1-wrap .ani1-inner-wrap .inner-wrap-s { clip-path: inset(2.39167vw 2.39167vw 2.29167vw 18.61167vw round 10vw) } .wiko-content .sec10-wrap { height: 400vh; position: relative } .wiko-content .sec10-wrap .sec10 { height: 100vh; position: sticky; top: 0; overflow: hidden; background: transparent; transition: background .5s ease-in; background-color: #000; display: flex; justify-content: center; align-items: center } .wiko-content .sec10-wrap .sec10 .ani1 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; transition: margin-top .5s ease-in; position: relative; flex-direction: column } .wiko-content .sec10-wrap .sec10 .ani1 .title-l { padding-top: 4.427083vw; font-size: 5.729167vw; padding-right: 2.760417vw; white-space: nowrap; line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); align-self: flex-start } .wiko-content .sec10-wrap .sec10 .ani1 .ani1-wrap { width: 15.885417vw; position: absolute; right: 14.6875vw; top: 0 } .wiko-content .sec10-wrap .sec10 .ani1 .ani1-wrap .ani1-inner-wrap { width: 100%; clip-path: inset(0 round 10vw); transition: clip-path .5s, transform .5s, margin .5s; transform-origin: 12.916667vw 16.458333vw } .wiko-content .sec10-wrap .sec10 .ani1 .ani1-wrap .ani1-inner-wrap img { width: 100% } .wiko-content .sec10-wrap .sec10 .ani1 .title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); font-size: 5.729167vw; text-align: center; padding-left: 16.09375vw; display: inline-block; margin-top: 4.010417vw; line-height: 1 } .wiko-content .sec10-wrap .sec10 .ani1.active .ani1-wrap .ani1-inner-wrap { clip-path: inset(15.37417vw 1.90667vw 14.75208vw 11.83833vw round 10vw); margin: -8.75vw 0 0 -8.75vw } .wiko-content .sec10-wrap .sec10 .ani2 { position: absolute; top: 100%; transition: top .5s ease-in; height: 100%; width: 100% } .wiko-content .sec10-wrap .sec10 .ani2 .img-wrap { transform-origin: 15.572% 26.827%; height: 100% } .wiko-content .sec10-wrap .sec10 .ani2 .img-wrap img { height: 100%; width: 100%; object-fit: cover } .wiko-content .sec10-wrap .sec10 .ani2 .ani2-text { width: 20.625vw; font-size: 1.145833vw; line-height: 1.6; position: absolute; bottom: 10.364583vw; right: 8.333333vw; color: #000 } .wiko-content .sec10-wrap .sec10 .ani2 .ani2-tips { font-size: 0.833333vw; color: rgba(0, 0, 0, 0.8); position: absolute; bottom: 1.041667vw; right: 6.25vw } .wiko-content .sec10-wrap .sec10.active { background: rgba(0, 0, 0, 0.5) } .wiko-content .sec10-wrap .sec10.active .ani1 { margin-top: -10vw } .wiko-content .sec10-wrap .sec10.active .ani2 { top: 0 } .wiko-content .sec11-wrap { height: 600vh; position: relative } .wiko-content .sec11-wrap .trigger { position: absolute; top: 100vh } .wiko-content .sec11-wrap .sec11 { height: 100vh; position: sticky; top: 0; overflow: hidden; background-color: #000 } .wiko-content .sec11-wrap .sec11 .all-ani { position: relative; height: 100% } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 { width: 52.40625vw; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 .title { font-size: 5.729167vw; line-height: 1.25; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); text-align: right } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 .title-s { font-size: 5.729167vw; font-weight: 500; line-height: 1; margin-top: 2.03125vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 .title-s .color { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to bottom, #BE8232 0%, #E3BE86 60%, #FFEFC4 100%) } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 .text { width: 21.114583vw; font-size: 1.145833vw; line-height: 1.6; margin-top: 4.010417vw; color: #fff; text-align: right } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 { position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; height: 100vh; display: flex; align-items: center; justify-content: flex-start } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 { width: 100%; position: relative; padding: 0 0 11.197917vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-wrapper { transform: translateX(0); align-items: flex-end; transition: transform .8s; transition-duration: 500ms !important; padding: 0 5.416667vw; display: flex; will-change: transform } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide { width: auto; margin: 0 1.041667vw; position: relative } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide .img-wrap { width: 26.041667vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide .img-wrap img { width: 100% } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide .slide-text { position: absolute; bottom: 1vw; right: 1vw; color: #fff; font-size: 0.833333vw; display: none } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide.swiper-slide-active .img-wrap { width: 31.25vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper2-pagination { width: 69.791667vw; height: 2px; position: absolute; bottom: 6.114583vw; left: 0; right: 0; margin: 0 auto; top: auto; background-color: #CFCFD1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-pagination-progressbar-fill { width: 20%; background-image: linear-gradient(to left, #BE8232, #FFEFC4); transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) !important; display: block; height: 2px } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text { width: 70.791667vw; height: 2px; bottom: 6.114583vw; left: 0; right: 0; margin: 0 auto; position: absolute; display: flex; justify-content: space-around } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item { text-align: center; position: relative; width: 14.28571%; transition: opacity .5s } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item .pagination-title { padding-bottom: 1.09375vw; transform: translateY(-100%); font-size: 2.5vw; color: #fff; line-height: 1; width: 100%; white-space: nowrap } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item .pagination-title-s { position: absolute; top: 0.833333vw; font-size: 1.145833vw; color: rgba(255, 255, 255, 0.6); left: 50%; transform: translateX(-50%); width: 14vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(1) .pagination-title { margin-left: 3vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(1) .pagination-title-s { margin-left: 3vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(2) .pagination-title { margin-left: -1vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(2) .pagination-title-s { margin-left: -1vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(3) .pagination-title { margin-left: -0.5vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(3) .pagination-title-s { margin-left: -0.5vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(4) .pagination-title { margin-left: 0.4vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(4) .pagination-title-s { margin-left: 0.4vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(5) .pagination-title { margin-left: 0.4vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(5) .pagination-title-s { margin-left: 0.4vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(6) .pagination-title { margin-left: 0.4vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(6) .pagination-title-s { margin-left: 0.4vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(7) .pagination-title { margin-left: -2.6vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(7) .pagination-title-s { margin-left: -2.6vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item:nth-of-type(1) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-wrapper { transform: translateX(0) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-pagination-progressbar-fill { width: calc(69.791667vw * 0.1428571) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .pagination-text .item:nth-of-type(1) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-slide:nth-of-type(1) .slide-text { display: block } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-slide:nth-of-type(1) .item { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-wrapper { transform: translateX(-22.16667vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-pagination-progressbar-fill { width: calc(69.791667vw * 0.1428571 * 2) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .pagination-text .item:nth-of-type(2) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-slide:nth-of-type(2) .slide-text { display: block } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-slide:nth-of-type(2) .item { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-wrapper { transform: translateX(-39.58333vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-pagination-progressbar-fill { width: calc(69.791667vw * 0.1428571 * 3) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .pagination-text .item:nth-of-type(3) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-slide:nth-of-type(3) .slide-text { display: block } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-slide:nth-of-type(3) .item { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-wrapper { transform: translateX(-56.5vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-pagination-progressbar-fill { width: calc(69.791667vw * 0.1428571 * 4) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .pagination-text .item:nth-of-type(4) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-slide:nth-of-type(4) .slide-text { display: block } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-slide:nth-of-type(4) .item { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-wrapper { transform: translateX(-74.66667vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-pagination-progressbar-fill { width: calc(69.791667vw * 0.1428571 * 5) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .pagination-text .item:nth-of-type(5) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-slide:nth-of-type(5) .slide-text { display: block } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-slide:nth-of-type(5) .item { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-wrapper { transform: translateX(-92.66667vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-pagination-progressbar-fill { width: calc(69.791667vw * 0.1428571 * 6) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .pagination-text .item:nth-of-type(6) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-slide:nth-of-type(6) .slide-text { display: block } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-slide:nth-of-type(6) .item { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-wrapper { transform: translateX(-113.66667vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-pagination-progressbar-fill { width: calc(69.791667vw * 1) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .pagination-text .item { opacity: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .pagination-text .item:nth-of-type(7) { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-slide:nth-of-type(7) .slide-text { display: block } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-slide:nth-of-type(7) .item { opacity: 1 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .ani2-tips { color: rgba(255, 255, 255, 0.6); position: absolute; right: 1.354167vw; bottom: 1.041667vw; font-size: 0.833333vw } .wiko-content .sec12 { background-color: #000; padding-left: 13.229167vw; position: relative; overflow: hidden; min-height: 100vh; padding-top: 6.25vw } .wiko-content .sec12>div { position: relative; z-index: 6 } .wiko-content .sec12 .title { font-size: 5.729167vw; color: #fff; line-height: 1.25; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0) } .wiko-content .sec12 .title-s { width: 25.78125vw; font-size: 1.145833vw; color: #fff; line-height: 1.6; margin-top: 2.916667vw } .wiko-content .sec12 .bottom { margin-top: 4.208333vw; padding-bottom: 1.875vw; opacity: 0; transition: opacity .3s } .wiko-content .sec12 .bottom .cpu { display: flex } .wiko-content .sec12 .bottom .cpu .item .item-title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to bottom, #E5C2A0, #90755C); font-size: 4.375vw; line-height: 1; display: flex; align-items: flex-end } .wiko-content .sec12 .bottom .cpu .item .item-title .text { display: flex; align-items: flex-end } .wiko-content .sec12 .bottom .cpu .item .item-title .last { font-size: 1.65vw } .wiko-content .sec12 .bottom .cpu .item .item-title .scroll { display: inline-block; height: 4.42038vw; overflow: hidden } .wiko-content .sec12 .bottom .cpu .item .item-title .scroll .inner-scroll { z-index: 999; transition: all .7s } .wiko-content .sec12 .bottom .cpu .item .item-title .scroll .inner-scroll .num { transform: translate(-1px, 0); display: block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to bottom, #E5C2A0, #90755C) } .wiko-content .sec12 .bottom .cpu .item .item-title .num1, .wiko-content .sec12 .bottom .cpu .item .item-title .num2, .wiko-content .sec12 .bottom .cpu .item .item-title .num3, .wiko-content .sec12 .bottom .cpu .item .item-title .num4, .wiko-content .sec12 .bottom .cpu .item .item-title .num5, .wiko-content .sec12 .bottom .cpu .item .item-title .num6 { transition: all .6s ease-out; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to bottom, #E5C2A0, #90755C) } .wiko-content .sec12 .bottom .cpu .item .item-title .num1, .wiko-content .sec12 .bottom .cpu .item .item-title .title-s-first { transform: translateY(0.5vw) } .wiko-content .sec12 .bottom .cpu .item .item-title .num2 { transform: translateY(1vw) } .wiko-content .sec12 .bottom .cpu .item .item-title .num3 { transform: translateY(1.5vw) } .wiko-content .sec12 .bottom .cpu .item .item-title .num4 { transform: translateY(2vw) } .wiko-content .sec12 .bottom .cpu .item .item-title .num5 { transform: translateY(2.5vw) } .wiko-content .sec12 .bottom .cpu .item .item-title .num6 { transform: translateY(3vw) } .wiko-content .sec12 .bottom .cpu .item .item-title-s { font-size: 0.9375vw; margin-top: 0.9375vw; line-height: 1.6; color: #78828D } .wiko-content .sec12 .bottom .cpu .item .item-title-s-1, .wiko-content .sec12 .bottom .cpu .item .item-title-s-2 { transition: all .6s ease-out } .wiko-content .sec12 .bottom .cpu .item .item-title-s-1 { transform: translateY(0.5vw) } .wiko-content .sec12 .bottom .cpu .item .item-title-s-2 { transform: translateY(2.5vw) } .wiko-content .sec12 .bottom .cpu .item:nth-of-type(2) { margin-left: 3.270833vw } .wiko-content .sec12 .bottom .other { display: flex; width: 21.291667vw; flex-direction: column } .wiko-content .sec12 .bottom .other .line1 { display: flex } .wiko-content .sec12 .bottom .other .item { margin-top: 2.03125vw } .wiko-content .sec12 .bottom .other .item .item-img { width: 4.6875vw } .wiko-content .sec12 .bottom .other .item .item-img img { width: 100% } .wiko-content .sec12 .bottom .other .item .item-title-s { font-size: 0.9375vw; color: #78828D; margin-top: 0.9375vw } .wiko-content .sec12 .bottom .other .item4, .wiko-content .sec12 .bottom .other .item5, .wiko-content .sec12 .bottom .other .item6 { transition: all .6s ease-out } .wiko-content .sec12 .bottom .other .item4 { transform: translateY(3vw) } .wiko-content .sec12 .bottom .other .item5 { transform: translateY(4.5vw) } .wiko-content .sec12 .bottom .other .item6 { transform: translateY(6vw) } .wiko-content .sec12 .bottom .other .item:nth-of-type(2n) { margin-left: 4.3125vw } .wiko-content .sec12 .bg-wrap { width: 71.5625vw; position: absolute; top: 17.1875vw; right: 0; z-index: 2; transform: translateY(5.20833vw); transition: all .6s ease-out } .wiko-content .sec12 .bg-wrap img { width: 100% } .wiko-content .sec12.active .bottom { opacity: 1 } .wiko-content .sec12.active .bottom .cpu .item .item-title .num1, .wiko-content .sec12.active .bottom .cpu .item .item-title .num2, .wiko-content .sec12.active .bottom .cpu .item .item-title .num3, .wiko-content .sec12.active .bottom .cpu .item .item-title .num4, .wiko-content .sec12.active .bottom .cpu .item .item-title .num5, .wiko-content .sec12.active .bottom .cpu .item .item-title .num6 { transform: translateY(0) } .wiko-content .sec12.active .bottom .cpu .item .item-title-s-1, .wiko-content .sec12.active .bottom .cpu .item .item-title-s-2 { transform: translateY(0) } .wiko-content .sec12.active .bottom .cpu .item .scroll .inner-scroll { transform: translateY(-80%) } .wiko-content .sec12.active .bottom .cpu .item .scroll .inner-scroll2 { transform: translateY(-66.666%) } .wiko-content .sec12.active .bottom .other .item4, .wiko-content .sec12.active .bottom .other .item5, .wiko-content .sec12.active .bottom .other .item6 { transform: translateY(0) } .wiko-content .sec12.active .bg-wrap { transform: translateY(0) } .wiko-content .sec13 { background: #000; padding-left: 13.541667vw; overflow: hidden; position: relative; min-height: 100vh; padding-top: 10.416667vw } .wiko-content .sec13 .title { font-size: 5.729167vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); font-weight: 500; line-height: 1.25 } .wiko-content .sec13 .title-s { color: #fff; font-size: 1.145833vw; line-height: 1.6; margin-top: 3.125vw; width: 27.8125vw } .wiko-content .sec13 .bottom { margin-top: 5.208333vw; padding-bottom: 5.208333vw } .wiko-content .sec13 .bottom .item .item-title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #E5C2A0, #90755C); font-size: 4.375vw; line-height: 1 } .wiko-content .sec13 .bottom .item .item-title span { font-size: 1.65vw } .wiko-content .sec13 .bottom .item .item-title sup { vertical-align: text-top } .wiko-content .sec13 .bottom .item .item-title-s { color: #fff; font-size: 0.9375vw; margin-top: 1.041667vw } .wiko-content .sec13 .bottom .item:nth-of-type(n+2) { margin-top: 3.125vw } .wiko-content .sec13 .bg-wrap { width: 52.916667vw; position: absolute; bottom: -2vw; right: 6.302083vw } .wiko-content .sec13 .bg-wrap img { width: 100% } .wiko-content .sec14 { background: #000; overflow: hidden; position: relative; padding-top: 12.5vw } .wiko-content .sec14 .title { font-size: 5.729167vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #6C6E74, #D7DAE5, #EAECEF, #D0D0D0); font-weight: 500; line-height: 1.25; padding-left: 13.541667vw } .wiko-content .sec14 .title-s { color: #fff; font-size: 1.145833vw; line-height: 1.6; margin-top: 3.125vw; width: 28.28125vw; padding-left: 13.541667vw } .wiko-content .sec14 .img-wrap { width: 52.864583vw; position: relative; left: 50%; transform: translateX(-50%); margin-top: 4.270833vw } .wiko-content .sec14 .img-wrap .img-text { display: inline-block; font-size: 10.458333vw; font-weight: 500; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #D9DCE6, #868992); left: 50%; position: relative; transform: translateX(-50%); line-height: 1.25 } .wiko-content .sec14 .img-wrap img { width: 100%; transform: translateY(-3.2vw) } .wiko-content .sec14 .bottom { display: flex; justify-content: space-between; width: 40.625vw; margin: 0.966667vw auto 0 } .wiko-content .sec14 .bottom .item { display: flex; flex-direction: column; justify-content: space-between } .wiko-content .sec14 .bottom .item .item-title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #E5C2A0, #90755C); font-size: 4.375vw; line-height: 1 } .wiko-content .sec14 .bottom .item .item-title span { font-size: 1.65vw } .wiko-content .sec14 .bottom .item .item-title .arrow-solid { display: inline-block; vertical-align: top; width: 0.9375vw } .wiko-content .sec14 .bottom .item .item-title .arrow-solid.down { transform-origin: center center; transform: rotate(180deg) } .wiko-content .sec14 .bottom .item .item-title-s { color: #fff; margin-top: 1.041667vw; font-size: 0.9375vw; padding-left: 1vw } .wiko-content .footernote { padding: 12.34375vw 13.541667vw 10.416667vw; background-color: #000; --footer-text-color: #6e6e73 } .wiko-content .footernote li { list-style: decimal; color: var(--footer-text-color); font-size: 0.9375vw; line-height: 1.6; list-style-position: inside } .wiko-content .footernote li:nth-of-type(n+2) { margin-top: 0.885417vw } .wiko-content.ie { font-family: sans-serif; overflow: hidden } .wiko-content.ie .isie { display: block } .wiko-content.ie .isnotie { display: none } .wiko-content.ie img { display: block } .wiko-content.ie .sec1-wrap { height: auto; background-color: #fff } .wiko-content.ie .sec1-wrap .sec1-inner { position: static } .wiko-content.ie .sec1-wrap .sec1-inner .sec1 { height: auto; position: relative } .wiko-content.ie .sec1-wrap .sec1-inner .harmony { opacity: 1; position: relative; padding-bottom: 7.479167vw; margin-top: 0; left: 50%; transform: translateX(-50%); top: 0; margin-left: 0 } .wiko-content.ie .sec1-wrap .sec1-inner .harmony .harmony-wrap .harmony-b { position: static; display: block } .wiko-content.ie .sec1-wrap .sec1-inner .harmony .harmony-wrap .harmony-w { display: none } .wiko-content.ie .sec1-wrap .sec1-inner .sec2 { position: static; transform: translateY(0) } .wiko-content.ie .sec1-wrap .sec1-inner .sec2 .list .item .title-wrap .title { background-image: none; color: #C4A486 } .wiko-content.ie .sec1-wrap .sec1-inner .sec2 .list .line2 .item5 .img-wrap .memory { background-image: none; color: #B1B4BE } .wiko-content.ie .item2-arrow { background-repeat: no-repeat; background-size: 2.135417vw auto } .wiko-content.ie .item2-arrow .arrow-wrap { background-repeat: no-repeat; background-size: 2.135417vw auto } .wiko-content.ie .sec2 .list .progressSvg rect { display: none } .wiko-content.ie .sec2 .list .right-wrap .item2 .item2-wrap .isie { display: block } .wiko-content.ie .sec2 .list .item .arrow .arrow-wrap { background-repeat: no-repeat; background-size: 2.135417vw auto } .wiko-content.ie .sec2 .list .line2 .item5 .img-wrap .memory { font-weight: 500 } .wiko-content.ie .sec3-wrap { height: auto } .wiko-content.ie .sec3-wrap .sec3 { height: auto } .wiko-content.ie .sec3-wrap .sec3 .ani0 { position: static } .wiko-content.ie .sec3-wrap .sec3 .ani0 .title { background-image: none; color: #fff } .wiko-content.ie .sec3-wrap .sec3 .ani1 { position: static; top: 0; transform: translateY(0) } .wiko-content.ie .sec3-wrap .sec3 .ani1 .sec3-bg-wrap video { display: none } .wiko-content.ie .sec3-wrap .sec3 .ani1 .sec3-bg-wrap .wx-img { display: block } .wiko-content.ie .sec3-wrap .sec3 .ani1 .sec3-bg-wrap .sec3-imgs { display: none } .wiko-content.ie .sec3-wrap .sec3 .ani2 { position: static; top: 0; transform: translateY(0) } .wiko-content.ie .sec3-wrap .sec3 .ani3-wrap .ani3 { opacity: 1; position: relative; left: 50%; transform: translate(-50%, 0) } .wiko-content.ie .sec3-wrap .sec3 .ani3-wrap .ani3 .right .right-img-wrap img { display: none } .wiko-content.ie .sec3-wrap .sec3 .title-l { background-image: none; color: #fff } .wiko-content.ie .sec3-wrap .sec3 .title-l2, .wiko-content.ie .sec3-wrap .sec3 .title-r2 { transform: translateY(100%); margin-top: 5vw } .wiko-content.ie .sec3-wrap .sec3 .ani4 .left .title-wrap .title { background-image: none; color: #0E0F12 } .wiko-content.ie .sec3-wrap .sec3 .ani4 .left .title-wrap { transform: translate(0) } .wiko-content.ie .sec3-wrap .sec3 .ani4 .left .title-s-wrap { height: 34.895833vw; flex: auto; transform: translate(0) } .wiko-content.ie .sec3-wrap .sec3 .ani4 .right { transform: translate(0) } .wiko-content.ie .sec3-wrap .sec3 .ani4 .right .right-img-wrap img { width: auto } .wiko-content.ie .sec3-wrap .sec3 .ani5 { display: flex; padding-top: 11.5625vw } .wiko-content.ie .sec3-wrap .sec3 .ani5 .left { width: 36.45vw } .wiko-content.ie .sec3-wrap .sec3 .ani5 .left .title-wrap { width: 36.45vw; height: 21.35vw; background-color: #F3F3F3; display: flex; align-items: center } .wiko-content.ie .sec3-wrap .sec3 .ani5 .left .title-wrap .title { font-size: 13.02vw; padding-left: 8.333333vw } .wiko-content.ie .sec3-wrap .sec3 .ani5 .left .title-s-wrap { background-color: #E5E5E5; height: 34.89vw } .wiko-content.ie .sec3-wrap .sec3 .ani5 .left .title-s-wrap .title-s { font-size: 1.66vw; color: #292627; width: 24.68vw; padding: 5.989583vw 0 0 8.333333vw; line-height: 1.6 } .wiko-content.ie .sec3-wrap .sec3 .ani5 .right { flex: 1 } .wiko-content.ie .sec3-wrap .sec3 .ani5 .right .right-img-wrap { width: 100%; height: 100% } .wiko-content.ie .sec3-wrap .sec3 .ani5 .right .right-img-wrap img { height: 100% } .wiko-content.ie .sec5-wrap { height: auto } .wiko-content.ie .sec5-wrap .sec5 { height: auto; position: static } .wiko-content.ie .sec5-wrap .sec5 .harmony-wrap { height: 100vh; position: static; transform: translate(0, 0); width: 100% } .wiko-content.ie .sec5-wrap .sec5 .harmony-wrap img { display: block; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34.114583vw } .wiko-content.ie .sec5-wrap .sec5 .ani2, .wiko-content.ie .sec5-wrap .sec5 .ani3, .wiko-content.ie .sec5-wrap .sec5 .ani4 { position: relative; left: 50%; transform: translate(-50%, 0); height: 100vh; box-sizing: border-box; flex-direction: column; align-items: center } .wiko-content.ie .sec5-wrap .sec5 .ani2 .ani2-title { background-image: none; color: #fff; width: 100%; text-align: center; font-weight: 500 } .wiko-content.ie .sec5-wrap .sec5 .ani2 .ani2-title-s { width: 100% } .wiko-content.ie .sec5-wrap .sec5 .ani3 .ani3-title { width: 100%; text-align: center; color: #fff; font-weight: 500; background-image: none } .wiko-content.ie .sec5-wrap .sec5 .ani3 .phone-wrap { transform: translateY(4.16667vw); margin: 0 } .wiko-content.ie .sec5-wrap .sec5 .ani4 { display: flex; min-height: 100vh; overflow: visible; width: 100%; align-items: center; flex-direction: row } .wiko-content.ie .sec5-wrap .sec5 .ani4 .right { width: 49.375vw; height: 49.375vw; flex: 1; position: relative; opacity: 1; transform: translate(0) } .wiko-content.ie .sec5-wrap .sec5 .ani4 .right .mob-wrap { width: 13.229167vw; position: absolute; left: 50%; right: 50%; transform: translate(0%, -50%); margin-left: -11.31vw } .wiko-content.ie .sec5-wrap .sec5 .ani4 .right .circle-wrap { position: relative; width: 49.37vw; height: 49.37vw } .wiko-content.ie .sec5-wrap .sec5 .ani4 .right .circle-wrap .item { width: 49.37vw; height: 49.37vw } .wiko-content.ie .sec15 { padding-top: 6.25vw } .wiko-content.ie .sec15 .title { background-image: none; font-weight: 500; color: #fff } .wiko-content.ie .sec16 { padding-top: 10.729167vw } .wiko-content.ie .sec16 .title { background-image: none; font-weight: 500; color: #fff } .wiko-content.ie .sec17-wrap { height: auto } .wiko-content.ie .sec17-wrap .sec17 .title { background-image: none; font-weight: 500; color: #fff } .wiko-content.ie .sec6-wrap { height: auto } .wiko-content.ie .sec6-wrap .sec6 { height: auto } .wiko-content.ie .sec6-wrap .sec6 .ani1 { height: 100vh; margin: 0; padding: 0; font-weight: 500; box-sizing: border-box; position: static } .wiko-content.ie .sec6-wrap .sec6 .ani1 .title { color: #fff } .wiko-content.ie .sec6-wrap .sec6 .ani1 .title .color { background-image: none } .wiko-content.ie .sec6-wrap .sec6 .ani1 .title-s .first, .wiko-content.ie .sec6-wrap .sec6 .ani1 .title-s .scale { background-image: none; color: #fff; opacity: 1; transform: scale(1) } .wiko-content.ie .sec6-wrap .sec6 .ani1 .title-s .scale { width: auto } .wiko-content.ie .sec6-wrap .sec6 .ani1 .title-s .scale-wrap { width: 13.73vw } .wiko-content.ie .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 { transform: translateY(1vw) } .wiko-content.ie .sec6-wrap .sec6 .ani2 { height: 100vh; position: relative } .wiko-content.ie .sec6-wrap .sec6 .ani2 .bg-wrap { height: auto } .wiko-content.ie .sec6-wrap .sec6 .ani2 .ani2-content { margin-top: 10.833333vw } .wiko-content.ie .sec6-wrap .sec6 .ani2 .ani2-content .ani2-title { font-weight: 500 } .wiko-content.ie .sec6-wrap .sec6 .ani2 .ani2-content .right .row .item .item-title-s { font-weight: 500 } .wiko-content.ie .sec6-wrap .sec6 .ani2 .phone-wrap { margin: 0; height: 29.010417vw } .wiko-content.ie .sec6-wrap .sec6 .ani2 .phone-wrap .ani2-content { margin-top: 1.86vw } .wiko-content.ie .sec7-wrap { height: auto } .wiko-content.ie .sec7-wrap .sec7 .all-line .item .item-title { background-image: none; color: #BC9D7F } .wiko-content.ie .sec7-wrap .sec7 .sec-title { font-weight: 500 } .wiko-content.ie .sec7-wrap .sec7 .sec-title .title { background-image: none; color: #fff } .wiko-content.ie .sec7-wrap .sec7 .sec-title .title-s { background-image: none; color: #fff } .wiko-content.ie .sec7-wrap .sec7 .all-line .item2 .line-top { width: 100% } .wiko-content.ie .sec7-wrap .sec7 .img-wrap { transform: translateY(-11.19792vw) } .wiko-content.ie .sec8-wrap { height: auto } .wiko-content.ie .sec8-wrap .sec8 { height: auto } .wiko-content.ie .sec8-wrap .sec8 .all-ani { height: auto; width: 100%; display: block } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani1 { height: 100vh } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani1 .img-wrap .show-hidden { display: none } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani1 .title-l, .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani1 .title-r, .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani1 .title { background-image: none; color: #fff } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani5 { height: 100vh; position: relative } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani5 .show-hidden { width: 72.916667vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani5 .show-hidden .show-wrap { width: 100% } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani5 .show-hidden .show-wrap img { width: 100% } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani5 .show-hidden .show-text { font-size: 1.145833vw; color: #fff; width: 17.96875vw; position: absolute; right: 5.052083vw; bottom: 8.28125vw } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani5 .show-hidden .show-text-s { font-size: 0.833333vw; position: absolute; color: rgba(255, 255, 255, 0.8); right: 1.354167vw; bottom: 1.041667vw } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani2 { height: 100vh; align-items: center; display: flex; justify-content: flex-start } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani2 .content { align-items: center } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani2 .content .right-wrap { margin: 0 0 0 5.208333vw } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani2 .content .content-bottom .item-title { background-image: none; color: #BC9D7F } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani3 { height: 100vh; align-items: center; justify-content: flex-start; display: flex } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani3 .content { margin: 0 auto } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani3 .content .content-bottom .item-title { background-image: none; color: #BC9D7F } .wiko-content.ie .sec8-wrap .sec8 .all-ani .ani4 { height: 100vh } .wiko-content.ie .sec9-wrap { height: auto } .wiko-content.ie .sec9-wrap .sec9 { height: auto; position: static } .wiko-content.ie .sec9-wrap .sec9 .ani1 { height: 100vh; position: relative; left: 50%; transform: translateY(0); transform: translateX(-50%) } .wiko-content.ie .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap .inner-wrap-s .isnotie { display: none } .wiko-content.ie .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap .inner-wrap-s .isie { display: block } .wiko-content.ie .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap .inner-wrap-s img { width: 9.0625vw } .wiko-content.ie .sec9-wrap .sec9 .ani1 .title { margin-left: 0; background-image: none; color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%) } .wiko-content.ie .sec9-wrap .sec9 .ani1 .title-l { background-image: none; color: #fff; transform: translateY(-100%) } .wiko-content.ie .sec9-wrap .sec9 .ani1 .ani1-wrap { transform: translateY(-100%) } .wiko-content.ie .sec9-wrap .sec9 .show-hidden { height: auto; position: relative; transform: translate(0) } .wiko-content.ie .sec9-wrap .sec9 .show-hidden .show-wrap { width: 100%; margin: 0 } .wiko-content.ie .sec9-wrap .sec9 .show-hidden .last .left .left-title { color: #BC9D7F; background-image: none } .wiko-content.ie .sec10-wrap { height: auto } .wiko-content.ie .sec10-wrap .sec10 { height: auto; display: block; position: relative } .wiko-content.ie .sec10-wrap .sec10 .ani1 { justify-content: center; height: 100vh; align-items: center } .wiko-content.ie .sec10-wrap .sec10 .ani1 .title-l { background-image: none; margin-top: 0; margin-left: 19.270833vw; color: #fff; transform: translateY(3vw) } .wiko-content.ie .sec10-wrap .sec10 .ani1 .ani1-wrap { width: 5.729167vw; position: static; transform: translate(4vw, -2vw) } .wiko-content.ie .sec10-wrap .sec10 .ani1 .title { background-image: none; color: #fff; position: static; text-align: left; transform: translateY(-3vw) } .wiko-content.ie .sec10-wrap .sec10 .ani2 { position: static; height: 100vh } .wiko-content.ie .sec11-wrap { height: auto } .wiko-content.ie .sec11-wrap .sec11 { height: auto } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani1 { height: 100vh } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani1 .title { background-image: none; color: #fff } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 { position: static; height: 100vh; padding: 0 } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-wrapper { width: 143.75vw; transition: all .3s; margin-left: 0 } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide { width: auto !important } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-wrapper { transform: translateX(0) !important; margin-left: 0 } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-wrapper { transform: translateX(0) !important; margin-left: -22.16667vw } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-wrapper { transform: translateX(0) !important; margin-left: -39.58333vw } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-wrapper { transform: translateX(0) !important; margin-left: -56.5vw } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-wrapper { transform: translateX(0) !important; margin-left: -74.66667vw } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-wrapper { transform: translateX(0) !important; margin-left: -92.66667vw } .wiko-content.ie .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-wrapper { transform: translateX(0) !important; margin-left: -113.66667vw } .wiko-content.ie .sec12 .title { background-image: none; color: #fff } .wiko-content.ie .sec12 .bottom .cpu .item .item-title { background-image: none; color: #BC9D7F } .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num1, .wiko-content.ie .sec12 .bottom .cpu .item .item-title .text { background-image: none; color: #BC9D7F } .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num1, .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num2, .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num3, .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num4, .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num5 { background-image: none; color: #BC9D7F } .wiko-content.ie .sec12 .bottom .cpu .item .item-title .scroll .inner-scroll .num { background-image: none; color: #BC9D7F } .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num6, .wiko-content.ie .sec12 .bottom .cpu .item .item-title .num5 { background-image: none; color: #BC9D7F } .wiko-content.ie .sec13 { padding-top: 12.5vw } .wiko-content.ie .sec13 .title { background-image: none; color: #fff } .wiko-content.ie .sec13 .bottom .item .item-title { background-image: none; color: #BC9D7F } .wiko-content.ie .sec14 .title { background-image: none; color: #fff } .wiko-content.ie .sec14 .img-wrap .img-text { background-image: none; color: #B1B4BE } .wiko-content.ie .sec14 .bottom .item .item-title { background-image: none; color: #BC9D7F } @media (max-aspect-ratio: 51 / 50) { .wiko-content { background-color: #000 } .wiko-content .pc-block { display: none } .wiko-content .mob-block { display: block } .wiko-content .sup { font-size: .6em } .wiko-content img { display: block } .wiko-content .sec1 .wiko { width: 60.305556vw; left: 50%; top: 16.666667vw; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center } .wiko-content .sec1 .wiko .wiko-text { font-size: 5vw; transform: scale(0.5); width: 200% } .wiko-content .sec1 .wiko .wiko-text .wiko-line { width: 1px } .wiko-content .harmony { width: 61.388889vw; margin-left: -30.6944445vw; top: 67.777778vw } .wiko-content .sec2 .list { padding: 8.333333vw 0 0; width: 88.888889vw } .wiko-content .sec2 .list .progressSvg rect { display: none } .wiko-content .sec2 .list .line { display: flex; flex-direction: column } .wiko-content .sec2 .list .item-wrap { margin: 2.777778vw 0 0 } .wiko-content .sec2 .list .item { width: 100%; border-radius: 1.805556vw } .wiko-content .sec2 .list .item .title-wrap { padding: 5.555556vw 0 0 5.555556vw; height: 13.416667vw; display: flex; flex-direction: column; justify-content: space-between } .wiko-content .sec2 .list .item .title-wrap .title { font-size: 6.111111vw } .wiko-content .sec2 .list .item .title-wrap .title-s { font-size: 3.055556vw } .wiko-content .sec2 .list .item .arrow { display: none } .wiko-content .sec2 .list .right-wrap { width: 100%; margin: 0 } .wiko-content .sec2 .list .right-wrap .item2 { height: 58.333333vw } .wiko-content .sec2 .list .right-wrap .item3 { height: 44.444444vw } .wiko-content .sec2 .list .item1-wrap { transform: translateY(100%); z-index: 999 } .wiko-content .sec2 .list .item2-wrap { transform: translateY(-100%); margin: -2.777778vw 0 0 } .wiko-content .sec2 .list .item3-wrap { margin: 5.555556vw 0 0 } .wiko-content .sec2 .list .line1 { flex-direction: column } .wiko-content .sec2 .list .line1 .item1-wrap { width: 100% } .wiko-content .sec2 .list .line1 .right-wrap .item2-wrap, .wiko-content .sec2 .list .line1 .right-wrap .item3-wrap { width: 100% } .wiko-content .sec2 .list .line1 .right-wrap .item2-wrap { height: 58.333333vw } .wiko-content .sec2 .list .line1 .right-wrap .item3-wrap { height: 44.444444vw } .wiko-content .sec2 .list .line1 .item { width: 100% } .wiko-content .sec2 .list .line2 { height: auto; margin: 0; flex-direction: row; flex-wrap: wrap } .wiko-content .sec2 .list .line2 .item-wrap { width: 100% } .wiko-content .sec2 .list .line2 .item-wrap .item { width: 100% } .wiko-content .sec2 .list .line2 .item-wrap .item6 { height: 44.444444vw } .wiko-content .sec2 .list .line2 .item-wrap .item4 { height: 44.444444vw } .wiko-content .sec2 .list .line2 .item-wrap .item4 .img-wrap { width: 32.222222vw } .wiko-content .sec2 .list .line2 .item-wrap .item5 { height: 44.444444vw } .wiko-content .sec2 .list .line2 .item-wrap .item5 .img-wrap { position: static; width: 100%; display: flex; flex-direction: column; align-items: flex-end } .wiko-content .sec2 .list .line2 .item-wrap .item5 .img-wrap .memory { margin-top: 5.555556vw; font-size: 15.666667vw; margin-right: 0; align-self: center } .wiko-content .sec2 .list .line2 .item-wrap .item5 .img-wrap .memory .memory-g { font-size: 11.666667vw } .wiko-content .sec2 .list .line2 .item-wrap .item5 .img-wrap img { width: 79.444444vw; margin-top: -3.5vw } .wiko-content .sec2 .list .line2 .item-wrap:nth-of-type(1), .wiko-content .sec2 .list .line2 .item-wrap:nth-of-type(2) { width: calc(50% - 1.388889vw) } .wiko-content .sec2 .list .item1 { height: 58.333333vw } .wiko-content .sec2 .list .item1 .img-wrap { width: 50.972222vw } .wiko-content .sec3-wrap .trigger3 { top: 23.33333vw } .wiko-content .sec3-wrap .sec3 { height: auto; transform: translate(0) } .wiko-content .sec3-wrap .sec3 .ani0 { height: 100vh; font-size: 11.666667vw } .wiko-content .sec3-wrap .sec3 .ani1 { height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; top: 0; transform: translate(0) } .wiko-content .sec3-wrap .sec3 .ani1 .title-l { width: 63.888889vw; position: relative; transform: translate(1px, 0); margin-bottom: 5.555556vw; font-size: 5vw; font-weight: bold; z-index: 999; top: 0; left: 0; margin-top: 136.917725vw } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap { position: absolute; width: 100%; top: 19.48717vw; left: 50%; transform: translatex(-50%) } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap video { display: block } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap .sec3-imgs { display: none } .wiko-content .sec3-wrap .sec3 .ani1 .title-r { position: static; width: 63.888889vw; transform: translate(0); font-size: 3.888889vw; text-align: center } .wiko-content .sec3-wrap .sec3 .ani2 { height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; opacity: 0; top: 0; transform: translate(0) } .wiko-content .sec3-wrap .sec3 .ani2 .title-l { width: 63.888889vw; position: static; transform: translate(1px, 0); margin-bottom: 5.555556vw; font-size: 5vw; font-weight: bold; margin-top: 136.917725vw } .wiko-content .sec3-wrap .sec3 .ani2 .title-r { position: static; width: 63.888889vw; transform: translate(0); font-size: 3.888889vw; text-align: center } .wiko-content .sec3-wrap .sec3 .ani3-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100vh } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 { width: 39.444444vw; height: 86.111111vw; top: 39.473281vw; margin-left: 0.4vw; transform: translate(-50%, 0) } .wiko-content .sec3-wrap .sec3 .ani5 { min-height: 100vh; margin-top: 100vh; display: flex; flex-direction: column } .wiko-content .sec3-wrap .sec3 .ani5 .left { padding: 17.222222vw 0 0 11.111111vw } .wiko-content .sec3-wrap .sec3 .ani5 .left .title { font-size: 15.277778vw; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(120deg, #E2E0D7 0%, #9F9F9F 70%, #E0E0E0 100%); line-height: 1 } .wiko-content .sec3-wrap .sec3 .ani5 .left .title-s { width: 66.111111vw; margin-top: 2.083333vw; font-size: 3.888889vw; color: #fff } .wiko-content .sec3-wrap .sec3 .ani5 .right { margin-top: 8.333333vw; width: 100% } .wiko-content .sec3-wrap .sec3 .ani5 .right .right-img-wrap { width: 100% } .wiko-content .sec3-wrap .sec3 .ani5 .right .right-img-wrap img { width: 100% } .wiko-content .sec3-wrap .sec3 .ani4 { min-height: 100vh; flex-direction: column; justify-content: space-between } .wiko-content .sec3-wrap .sec3 .ani4 .left { width: 100%; padding: 17.222222vw 0 0 11.111111vw } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-wrap { transform: translate(0); background-color: transparent; width: auto; height: auto } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-wrap .title { font-size: 15.277778vw; padding: 0; background-image: linear-gradient(120deg, #E2E0D7 0%, #9F9F9F 70%, #E0E0E0 100%) } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-s-wrap { transform: translate(0); background-color: transparent; width: auto; height: auto } .wiko-content .sec3-wrap .sec3 .ani4 .left .title-s-wrap .title-s { padding: 0; color: #fff; width: 66.111111vw; margin-top: 2.083333vw; font-size: 3.888889vw } .wiko-content .sec3-wrap .sec3 .ani4 .right { margin-top: 8.333333vw; transform: translate(0) } .wiko-content .sec5-wrap .sec5 .harmony-wrap { width: 77.777778vw; margin-top: 11vw } .wiko-content .sec5-wrap .sec5 .ani2 { width: 100%; opacity: 0 } .wiko-content .sec5-wrap .sec5 .ani2 .ani2-title { width: 100%; font-size: 11.111111vw; text-align: center } .wiko-content .sec5-wrap .sec5 .ani2 .ani2-title-s { width: 66.944444vw; margin-top: 8.333333vw; font-size: 3.888889vw } .wiko-content .sec5-wrap .sec5 .ani3 { opacity: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden } .wiko-content .sec5-wrap .sec5 .ani3 .ani3-title { font-size: 11.111111vw; text-align: center } .wiko-content .sec5-wrap .sec5 .ani3 .ani3-title-s { margin-top: 5.555556vw; font-size: 3.888889vw; width: 70vw } .wiko-content .sec5-wrap .sec5 .ani3 .phone-wrap { width: 75.138889vw; margin-top: 8.333333vw } .wiko-content .sec5-wrap .sec5 .ani4 { flex-direction: column; width: 100%; opacity: 0 } .wiko-content .sec5-wrap .sec5 .ani4 .left { margin: 24.111111vw auto 0; width: 100%; text-align: center } .wiko-content .sec5-wrap .sec5 .ani4 .left .left-title { font-size: 6.666667vw } .wiko-content .sec5-wrap .sec5 .ani4 .left .left-title-s { width: 70vw; font-size: 3.888889vw; margin: 5.555556vw auto 0 } .wiko-content .sec5-wrap .sec5 .ani4 .right { width: 74.888889vw; height: 74.888889vw; margin-top: 8.333333vw; margin-left: 0 } .wiko-content .sec5-wrap .sec5 .ani4 .right .mob-wrap { width: 28.027778vw } .wiko-content .sec15 { padding-top: 15.277778vw } .wiko-content .sec15 .title { font-size: 8.888889vw } .wiko-content .sec15 .title-s { font-size: 3.888889vw; margin: 5.555556vw auto 0; width: 82.777778vw } .wiko-content .sec15 .img-wrap { width: 88.888889vw; margin: 8.333333vw auto 0 } .wiko-content .sec15 .sec15-tips { padding: 5.555556vw 5.555556vw 0 0; width: 70vw; align-self: flex-end; font-size: 2.222222vw } .wiko-content .sec16 { padding: 27.777778vw 0 } .wiko-content .sec16 .title { font-size: 8.888889vw } .wiko-content .sec16 .title-s { font-size: 3.888889vw; margin: 5.555556vw auto 0; width: 82.777778vw } .wiko-content .sec16 .img-wrap { width: 93.472222vw; margin: 8.333333vw auto 0 } .wiko-content .sec16 .sec16-tips { padding: 5.555556vw 5.555556vw 0 0; width: 70vw; align-self: flex-end; font-size: 2.222222vw } .wiko-content .sec17-wrap { height: auto } .wiko-content .sec17-wrap .sec17 { padding: 0; height: auto; position: static } .wiko-content .sec17-wrap .sec17 .title { font-size: 8.888889vw } .wiko-content .sec17-wrap .sec17 .title-s { font-size: 3.888889vw; margin: 5.555556vw auto 0; width: 70vw } .wiko-content .sec17-wrap .sec17 .scroll { margin-top: 8.75vw } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll { display: none; width: 113.194444vw; left: 0 } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll-mob { display: block; width: 113.055556vw; position: relative; left: 50%; transform: translateX(-50%) } .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll-mob .line1, .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll-mob .line2, .wiko-content .sec17-wrap .sec17 .scroll .inner-scroll-mob .line3 { display: flex; justify-content: center } .wiko-content .sec17-wrap .sec17 .item1 .img-wrap, .wiko-content .sec17-wrap .sec17 .item3 .img-wrap, .wiko-content .sec17-wrap .sec17 .item4 .img-wrap, .wiko-content .sec17-wrap .sec17 .item6 .img-wrap, .wiko-content .sec17-wrap .sec17 .item7 .img-wrap, .wiko-content .sec17-wrap .sec17 .item8 .img-wrap, .wiko-content .sec17-wrap .sec17 .item9 .img-wrap, .wiko-content .sec17-wrap .sec17 .item10 .img-wrap { width: 20.416667vw } .wiko-content .sec17-wrap .sec17 .item2 .img-wrap, .wiko-content .sec17-wrap .sec17 .item5 .img-wrap, .wiko-content .sec17-wrap .sec17 .item11 .img-wrap { width: 41.805556vw } .wiko-content .sec17-wrap .sec17 .item2 { margin: 0 2.222222vw } .wiko-content .sec17-wrap .sec17 .item3 .item3-overflow { width: 20.416667vw } .wiko-content .sec17-wrap .sec17 .line2 { margin-top: 2.222222vw } .wiko-content .sec17-wrap .sec17 .line2 .item { margin-right: 2.222222vw } .wiko-content .sec17-wrap .sec17 .line3 { margin-top: 2.222222vw } .wiko-content .sec17-wrap .sec17 .line3 .item { margin-left: 2.222222vw } .wiko-content .sec6-wrap .sec6 .ani1 { transform-origin: 101.3% 33% } .wiko-content .sec6-wrap .sec6 .ani1 .title { font-size: 11.111111vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s { font-size: 11.111111vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap { width: 5.972222vw; height: 10.138889vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border1 { width: 2.916667vw; height: 4.75vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border1 .line-top { height: 1.111111vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border1 .line-left { width: 1.111111vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .scale { width: auto; height: auto; transform-origin: 25% 50% } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 { width: 2.916667vw; height: 4.75vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 .line-bottom { height: 1.111111vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .border2 .line-right { width: 1.111111vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap.active .overlay-top { height: 2.1vw; top: -1vw } .wiko-content .sec6-wrap .sec6 .ani1 .title-s .scale-wrap .hz-wrap.active .overlay-bottom { height: 2.1vw; bottom: -1vw } .wiko-content .sec6-wrap .sec6 .ani2 { opacity: 0 } .wiko-content .sec6-wrap .sec6.active .ani1 .title-s .scale-wrap { width: 28.15625vw; height: 11.09375vw } .wiko-content .sec6-wrap .sec6.active .ani1 .title-s .scale-wrap .hz { transition: opacity 1s } .wiko-content .sec6-wrap .sec6.active .ani1 .title-s .scale { transform: scale(1); opacity: 1; width: auto; height: auto; transition: all .3s; line-height: 11.09375vw } .wiko-content .sec6-wrap .sec6.active .ani2 { flex-direction: column-reverse } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap { width: 38.472222vw; height: 83.333333vw; position: relative; display: flex; align-items: center; justify-content: center; margin-top: 37.666667vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content { width: 82.777778vw; top: -35vw; left: 50%; transform: translateX(-50%) } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content .ani2-title { font-size: 11.944444vw; padding-right: 2vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content .right { margin-left: 8.333333vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content .right .row .item .item-title { font-size: 2.222222vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content .right .row .item .item-title-s { font-size: 4.722222vw; margin-top: 1.111111vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content .right .row .item:nth-of-type(2) { margin-top: 3.472222vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .phone-inner-wrap { position: relative; align-items: center; justify-content: center; flex: 1 } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .phone-inner-wrap .two-imgs { position: absolute; top: 50%; left: 50%; transform: translate(-10%, -50%); overflow: hidden; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 3.283333vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .phone-inner-wrap .two-imgs .phone-innerbg { display: block; width: 36.083333vw; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .phone-inner-wrap .ani-phone { display: block; position: relative; z-index: 999; width: 100%; left: 50%; transform: translateX(-10%) } .wiko-content .sec6-wrap .sec6 .ani2 .phone-wrap .phone-inner-wrap .sec6-logo { bottom: 50%; width: 30vw; height: auto; transform: translate(-80%, 50%); } .wiko-content .sec6-wrap .sec6.active .ani2 .sec6-tips { display: none } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 { transform: scale(1.3) } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title { opacity: 0 } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .scale-wrap { width: 38.45625vw } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .scale { opacity: 0 } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .first { opacity: 0 } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .hz { filter: blur(0); animation: hzHidden 1s linear } .wiko-content .sec6-wrap .sec6.active.active2 .ani1 .title-s .hz-wrap .hz-scroll { transform: translate3d(0, -87.5%, 0); opacity: 1 } @keyframes hzHidden { 0% { opacity: 0 } 100% { opacity: 1 } } .wiko-content .sec7-wrap { height: auto; padding-top: 36.527778vw } .wiko-content .sec7-wrap .sec7 { min-height: auto; overflow: hidden } .wiko-content .sec7-wrap .sec7 .img-wrap { top: 25vw; width: 100%; margin: 0 } .wiko-content .sec7-wrap .sec7 .all-line { padding: 67.777778vw 0 0 5.972222vw } .wiko-content .sec7-wrap .sec7 .all-line .item .item-text { left: 2.083333vw } .wiko-content .sec7-wrap .sec7 .all-line .item .item-text .item-title { font-size: 3.888889vw; background-image: linear-gradient(to right, #E5C2A0, #90755C) } .wiko-content .sec7-wrap .sec7 .all-line .item .item-text .item-title-s { margin-top: 3.472222vw } .wiko-content .sec7-wrap .sec7 .all-line .item .item-text .item-title-s div { font-size: 2.5vw } .wiko-content .sec7-wrap .sec7 .all-line .item1 { width: 20.555556vw; height: 88.888889vw; margin: 18.055556vw 0 0 } .wiko-content .sec7-wrap .sec7 .all-line .item2 { width: 6.527778vw; height: 78.194444vw; margin: 4.305556vw 0 0 4.861111vw } .wiko-content .sec7-wrap .sec7 .all-line .item2 .line-top { width: 100% } .wiko-content .sec7-wrap .sec7 .all-line .item3 { width: 0; height: 98.194444vw; margin: 15.277778vw 0 0 22.222222vw } .wiko-content .sec7-wrap .sec7 .all-line .item3 .line-top { width: 0 } .wiko-content .sec7-wrap .sec7 .all-line .item4 { width: 5.555556vw; height: 74.027778vw; margin: 0 0 0 13.75vw } .wiko-content .sec7-wrap .sec7 .sec-title { top: 0; left: 30.833333vw } .wiko-content .sec7-wrap .sec7 .sec-title .title { display: inline-block; font-size: 11.666667vw; line-height: 1.25 } .wiko-content .sec7-wrap .sec7 .sec-title .title-s { font-size: 4.444444vw; transform: translate(1vw) } .wiko-content .sec8-wrap { height: auto } .wiko-content .sec8-wrap .sec8 { position: static; height: auto } .wiko-content .sec8-wrap .sec8 .all-ani { width: 100%; flex-direction: column } .wiko-content .sec8-wrap .sec8 .all-ani .ani1 { padding: 30.277778vw 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani1 .ani1-inner { align-items: center } .wiko-content .sec8-wrap .sec8 .all-ani .ani1 .img-wrap { margin: 0 6.944444vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani1 .img-wrap .camera-wrap { height: auto } .wiko-content .sec8-wrap .sec8 .all-ani .ani1 .title-r, .wiko-content .sec8-wrap .sec8 .all-ani .ani1 .title-l { font-size: 8.888889vw; margin: 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani1 .title { font-size: 8.888889vw; z-index: 1; padding-top: 4.166667vw; margin: 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani5 { display: block } .wiko-content .sec8-wrap .sec8 .all-ani .ani5 .show-hidden { width: 88.888889vw; margin: 0 auto } .wiko-content .sec8-wrap .sec8 .all-ani .ani5 .show-hidden .show-text { color: #fff; width: 54.444444vw; font-size: 3.888889vw; margin: 5.555556vw auto 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani5 .show-hidden .show-text-s { display: none } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 { margin-top: 26.805556vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content { width: 88.888889vw; flex-direction: column } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text { width: 100%; overflow: hidden; display: block } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text .title { width: 45.722222vw; float: left; font-size: 6.666667vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text .title-s { width: 60.972222vw; float: left; font-size: 3.888889vw; margin-top: 5vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text .content-bottom { width: 27.777778vw; margin-top: 0; flex-direction: column-reverse; align-items: center } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text .content-bottom .item { margin: 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text .content-bottom .item .item-title { font-size: 5.277778vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text .content-bottom .item .item-text { font-size: 2.777778vw; margin-top: 2.083333vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .content .text .content-bottom .item:nth-of-type(1) { margin-top: 5.555556vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .right-wrap { margin: 5.555556vw auto 0; width: 100% } .wiko-content .sec8-wrap .sec8 .all-ani .ani2 .right-wrap .tips { font-size: 2.222222vw; right: 2.777778vw; bottom: 2.777778vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 { margin-top: 26.805556vw; position: relative } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content { width: 88.888889vw; flex-direction: column } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .left { margin: 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .left .title { width: 40.277778vw; font-size: 6.666667vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .left .title-s { width: 86.388889vw; font-size: 3.888889vw; margin-top: 5vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .left .left-wrap { width: 100%; margin-top: 8.333333vw; position: relative } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .left .left-wrap .tips { position: absolute; bottom: 2.777778vw; right: 2.777778vw; font-size: 2.222222vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .right .right-wrap { width: 100%; margin-top: 5.555556vw; position: relative } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .right .right-wrap .tips { position: absolute; bottom: 2.777778vw; right: 2.777778vw; font-size: 2.222222vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .right .content-bottom { position: absolute; top: 0; right: 5.555556vw; flex-direction: column; margin: 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .right .content-bottom .item { margin: 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .right .content-bottom .item .item-title { font-size: 4.444444vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani3 .content .right .content-bottom .item:nth-of-type(2) { margin-top: 2.777778vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 { flex-direction: column; position: relative; margin: 27.777778vw 0 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .left { margin: 0; width: 88.888889vw; margin: 0 auto } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .left .title { width: 54.444444vw; font-size: 6.666667vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .left .title-s { width: 54.444444vw; font-size: 3.888889vw; margin-top: 5.555556vw } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .left .bottom { position: absolute; right: 5.555556vw; top: 8.75vw; display: flex; flex-direction: column; align-items: flex-end } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .left .bottom .icon-wrap { width: 13.611111vw; margin: 0 } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .left .bottom .text { width: 17.666667vw; text-align: right; font-size: 2.5vw; color: #fff } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .img-wrap { width: 88.888889vw; margin-top: 8.333333vw; position: relative } .wiko-content .sec8-wrap .sec8 .all-ani .ani4 .img-wrap .tips { position: absolute; bottom: 2.777778vw; right: 2.777778vw; font-size: 2.222222vw } .wiko-content .sec9-wrap { height: auto } .wiko-content .sec9-wrap .sec9 { position: static; height: auto } .wiko-content .sec9-wrap .sec9 .ani1 { position: static; transform: translate(0); padding: 27.777778vw 0 23.333333vw; margin: 0 23.645833vw; justify-content: center } .wiko-content .sec9-wrap .sec9 .ani1 .title-l { font-size: 8.888889vw } .wiko-content .sec9-wrap .sec9 .ani1 .ani1-wrap .ani1-inner-wrap { width: 15.416667vw } .wiko-content .sec9-wrap .sec9 .ani1 .title { font-size: 8.888889vw; margin: 5.555556vw 0 0 } .wiko-content .sec9-wrap .sec9 .show-hidden { transform: translate(0); position: static } .wiko-content .sec9-wrap .sec9 .show-hidden .show-wrap { clip-path: none; width: 100%; height: 133.333333vw; margin: 0 } .wiko-content .sec9-wrap .sec9 .show-hidden .show-wrap img { position: static; transform: translate(0) } .wiko-content .sec9-wrap .sec9 .show-hidden .last { flex-direction: column; margin-left: 8.333333vw; bottom: 8.333333vw } .wiko-content .sec9-wrap .sec9 .show-hidden .last .left { margin: 0 } .wiko-content .sec9-wrap .sec9 .show-hidden .last .left .left-title { font-size: 11.666667vw } .wiko-content .sec9-wrap .sec9 .show-hidden .last .left .left-title-s { font-size: 3.055556vw } .wiko-content .sec9-wrap .sec9 .show-hidden .last .right { width: 57.916667vw; margin-top: 7.638889vw; font-size: 3.888889vw } .wiko-content .sec9-wrap .sec9 .show-hidden .sec9-tips { right: 4.166667vw; bottom: 2.777778vw; font-size: 2.222222vw } .wiko-content .sec10-wrap { height: auto } .wiko-content .sec10-wrap .sec10 { height: auto; position: static; display: block } .wiko-content .sec10-wrap .sec10 .ani1 { margin: 0; margin: 27.777778vw 0; height: auto; justify-content: flex-start; padding-left: 14.583333vw } .wiko-content .sec10-wrap .sec10 .ani1 .title-l { margin-right: 4.583333vw; font-size: 8.888889vw; padding-top: 3.427083vw } .wiko-content .sec10-wrap .sec10 .ani1 .title { position: static; margin-top: 9.722222vw; font-size: 8.888889vw; text-align: left; padding: 0; width: 100% } .wiko-content .sec10-wrap .sec10 .ani1 .ani1-wrap { right: 23.444444vw } .wiko-content .sec10-wrap .sec10 .ani2 { position: static } .wiko-content .sec10-wrap .sec10 .ani2 .ani2-text { width: 70vw; right: 4.166667vw; bottom: 8.333333vw; font-size: 3.888889vw; color: #fff } .wiko-content .sec10-wrap .sec10 .ani2 .ani2-tips { right: 4.166667vw; bottom: 1.388889vw; font-size: 2.222222vw; color: rgba(255, 255, 255, 0.8) } .wiko-content .sec11-wrap { background-color: #000 } .wiko-content .sec11-wrap .sec11 { height: auto; top: -75.64102vw } .wiko-content .sec11-wrap .sec11 .all-ani { position: static } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 { width: 80.166667vw; height: 75.64102vw; font-size: 5.729167vw; padding: 27.777778vw 0; height: auto } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 .title { font-size: 8.888889vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 .title-s { display: none } .wiko-content .sec11-wrap .sec11 .all-ani .ani1 .text { width: 68.111111vw; margin-top: 10.416667vw; font-size: 3.888889vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 { position: sticky; top: 0; height: auto } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 { padding: 0 0 26vw; margin-top: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-wrapper { padding: 0 2.777778vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-wrapper .swiper-pagination-progressbar-fill { position: absolute; top: 0; left: 0 } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide { margin: 0 2.777778vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide .img-wrap { width: 69.444444vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide .slide-text { font-size: 2.222222vw; color: rgba(255, 255, 255, 0.6); bottom: 2.638889vw; right: 1.666667vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide.swiper-slide-active .img-wrap { width: 83.333333vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper2-pagination { width: 88.888889vw; bottom: 7.25vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text { width: 88.888889vw; bottom: 7.25vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item { position: static } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item .pagination-title { font-size: 3.888889vw; white-space: nowrap; margin-left: 0 !important; padding-bottom: 2.777778vw; left: 0; position: absolute; display: inline-block; width: auto } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text .item .pagination-title-s { font-size: 3.055556vw; white-space: nowrap; margin-left: 0 !important; padding-top: 2.222222vw; left: 0; transform: translate(0) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-wrapper { transform: translateX(0) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-pagination-progressbar-fill { width: calc(100% * 0.142857) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-wrapper { transform: translateX(-74.86111vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-pagination-progressbar-fill { width: calc(100% * 0.142857 * 2) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-wrapper { transform: translateX(-150vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-pagination-progressbar-fill { width: calc(100% * 0.142857* 3) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-wrapper { transform: translateX(-225vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-pagination-progressbar-fill { width: calc(100% * 0.142857 * 4) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-wrapper { transform: translateX(-300vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-pagination-progressbar-fill { width: calc(100% * 0.142857 * 5) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-wrapper { transform: translateX(-375vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-pagination-progressbar-fill { width: calc(100% * 0.142857 * 6) } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-wrapper { transform: translateX(-450vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-pagination-progressbar-fill { width: calc(100% * 0.142857 * 7) } .wiko-content .sec12 { padding: 27.777778vw 0 0; display: flex; flex-direction: column; min-height: auto } .wiko-content .sec12 .title { order: 1; font-size: 11.666667vw; text-align: center } .wiko-content .sec12 .title-s { order: 2; width: 81.388889vw; margin: 7.777778vw auto 0; text-align: center; font-size: 3.888889vw } .wiko-content .sec12 .bottom { order: 4; display: flex; flex-direction: column; align-items: center; opacity: 1 } .wiko-content .sec12 .bottom .cpu .item .item-title { font-size: 8.888889vw; align-items: flex-start; justify-content: center } .wiko-content .sec12 .bottom .cpu .item .item-title .num2, .wiko-content .sec12 .bottom .cpu .item .item-title .num3, .wiko-content .sec12 .bottom .cpu .item .item-title .num4, .wiko-content .sec12 .bottom .cpu .item .item-title .num5 { transform: translate(0); line-height: 1 } .wiko-content .sec12 .bottom .cpu .item .item-title .num1, .wiko-content .sec12 .bottom .cpu .item .item-title .num6 { transform: translate(1px, 0) } .wiko-content .sec12 .bottom .cpu .item .item-title .scroll { height: 8.871794vw } .wiko-content .sec12 .bottom .cpu .item .item-title .scroll .inner-scroll .num { line-height: 1 } .wiko-content .sec12 .bottom .cpu .item .item-title .last { font-size: 5vw; align-self: flex-end } .wiko-content .sec12 .bottom .cpu .item .item-title-s-1, .wiko-content .sec12 .bottom .cpu .item .item-title-s-2 { transform: translate(0); margin-top: 2.083333vw } .wiko-content .sec12 .bottom .cpu .item .item-title-s { font-size: 2.777778vw } .wiko-content .sec12 .bottom .cpu .item:nth-of-type(2) { margin-left: 12.5vw } .wiko-content .sec12 .bottom .other { width: 100%; flex-direction: row; justify-content: center } .wiko-content .sec12 .bottom .other .item { transform: translate(0); margin-top: 10.694444vw; display: flex; flex-direction: column; align-items: center; justify-content: space-between } .wiko-content .sec12 .bottom .other .item .item-img { width: 12.5vw } .wiko-content .sec12 .bottom .other .item .item-title-s { margin-top: 2.361111vw; font-size: 2.777778vw } .wiko-content .sec12 .bottom .other .item:nth-of-type(2n) { margin: 10.694444vw 12.5vw 0 } .wiko-content .sec12 .bottom .other .item:nth-of-type(3) .item-img { margin-top: 0.833333vw } .wiko-content .sec12 .bottom .other .line2 { display: flex } .wiko-content .sec12 .bg-wrap { order: 3; position: static; width: 100%; margin-top: 1.388889vw } .wiko-content .sec13 { display: flex; flex-direction: column; padding: 33.333333vw 0 0; min-height: auto; align-items: center } .wiko-content .sec13 .title { order: 1; text-align: center; font-size: 11.666667vw; display: inline-block } .wiko-content .sec13 .title-s { width: 65vw; margin-top: 7.777778vw; font-size: 3.888889vw; text-align: center; order: 2 } .wiko-content .sec13 .bottom { order: 4; margin-top: 2.083333vw; display: flex; justify-content: center } .wiko-content .sec13 .bottom .item { display: flex; flex-direction: column; justify-content: space-between } .wiko-content .sec13 .bottom .item .item-title { font-size: 7.888889vw } .wiko-content .sec13 .bottom .item .item-title span { font-size: 5vw } .wiko-content .sec13 .bottom .item .item-title-s { margin-top: 2.083333vw; font-size: 2.777778vw } .wiko-content .sec13 .bottom .item:nth-of-type(2) { margin: 0 6.944444vw 0 9.722222vw } .wiko-content .sec13 .bottom .item:nth-of-type(n+2) { margin-top: 0 } .wiko-content .sec13 .bg-wrap { position: static; order: 3; width: 86.111111vw; margin-top: 8.333333vw } .wiko-content .sec14 { padding: 33.333333vw 0 0; display: flex; flex-direction: column; align-items: center } .wiko-content .sec14 .title { font-size: 11.666667vw; padding: 0; display: inline-block } .wiko-content .sec14 .title-s { padding: 0; width: 84.166667vw; margin-top: 8.333333vw; font-size: 3.888889vw; text-align: center } .wiko-content .sec14 .img-wrap { width: 74.166667vw; left: 0; transform: translate(0); margin-top: 11.111111vw } .wiko-content .sec14 .img-wrap .img-text { font-size: 16.666667vw; line-height: 1; font-weight: bold } .wiko-content .sec14 .img-wrap img { transform: translateY(-3vw) } .wiko-content .sec14 .bottom { width: 74.166667vw; justify-content: space-between } .wiko-content .sec14 .bottom .item .item-title { font-size: 7.888889vw } .wiko-content .sec14 .bottom .item .item-title span { font-size: 5vw } .wiko-content .sec14 .bottom .item .item-title .arrow-solid { width: 2.083333vw } .wiko-content .sec14 .bottom .item .item-title-s { font-size: 2.777778vw; margin-top: 2.083333vw } .wiko-content .footernote { padding: 33.333333vw 10.277778vw 43.194444vw 6.944444vw } .wiko-content .footernote li { font-size: 2.5vw } } @media screen and (max-width: 1200px) and (min-width: 767px) and (min-aspect-ratio: 51 / 50) { .wiko-content .sec6-wrap .sec6 .ani1 { transform-origin: 62.9% 61.5% } } @media screen and (max-width: 1200px) and (min-width: 769px) and (max-aspect-ratio: 51 / 50) { .wiko-content { background-color: #000 } .wiko-content .sec1-wrap .sec2 { padding: 0 } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap { width: 70vw; top: -4.51283vw } .wiko-content .sec3-wrap .sec3 .ani1 .title-l { margin-top: 79.917725vw } .wiko-content .sec3-wrap .sec3 .ani2 .title-l { margin-top: 79.917725vw } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 { top: 9.473281vw; width: 27.544444vw; height: 60.111111vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content { top: -29vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap { margin-top: 18vw; } .wiko-content .sec11-wrap .sec11 { top: -95vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide .img-wrap { width: 63.444444vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide.swiper-slide-active .img-wrap { width: 72.333333vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper2-pagination { bottom: 10.25vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text { bottom: 10.25vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-wrapper { transform: translateX(0) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-wrapper { transform: translateX(-68.86111vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-wrapper { transform: translateX(-138vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-wrapper { transform: translateX(-207vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-wrapper { transform: translateX(-277vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-wrapper { transform: translateX(-345vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-wrapper { transform: translateX(-398vw) !important } } @media screen and (max-width: 768px) and (min-width: 639px) and (max-aspect-ratio: 51 / 50) { .wiko-content { background-color: #000 } .wiko-content .sec3-wrap .trigger3 { top: 23.33333vw } .wiko-content .sec3-wrap .sec3 .ani1 .sec3-bg-wrap { width: 70vw; top: 17vw } .wiko-content .sec3-wrap .sec3 .ani1 .title-l { margin-top: 96.917725vw } .wiko-content .sec3-wrap .sec3 .ani2 .title-l { margin-top: 96.917725vw } .wiko-content .sec3-wrap .sec3 .ani3-wrap .ani3 { top: 30.873281vw; width: 27.444444vw; height: 60.111111vw } .wiko-content .sec6-wrap .sec6.active .ani1 { transform-origin: 101.3% 31% } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap { width: 31.472222vw; margin-top: 38.666667vw } .wiko-content .sec6-wrap .sec6.active .ani2 .phone-wrap .ani2-content { top: -20vw } .wiko-content .sec11-wrap .sec11 { top: -78.64102vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide .img-wrap { width: 62.444444vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper-slide.swiper-slide-active .img-wrap { width: 70.333333vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .swiper2-pagination { bottom: 12.25vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper2 .pagination-text { bottom: 12.25vw } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='0'] .swiper-wrapper { transform: translateX(0) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='1'] .swiper-wrapper { transform: translateX(-67.86111vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='2'] .swiper-wrapper { transform: translateX(-136vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='3'] .swiper-wrapper { transform: translateX(-204vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='4'] .swiper-wrapper { transform: translateX(-273vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='5'] .swiper-wrapper { transform: translateX(-340vw) !important } .wiko-content .sec11-wrap .sec11 .all-ani .ani2 .swiper[data-index='6'] .swiper-wrapper { transform: translateX(-392vw) !important } .wiko-content .sec17-wrap .sec17 { padding-top: 11.6vw; box-sizing: border-box } }