/* styles esspecial for index */ /** * part1: common styles */ html, body { width: 100%; height: 100%; overflow: hidden; } .pages { width: 100%; height: 100%; position: relative; top: 0; left: 0; } .page { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; opacity: 0; } .page-wrap { width: 1200px; margin: 0 auto; position: relative; } .page2-wrap { margin: -200px auto 0; } .page5-wrap { transform: scale(1); } .page6-wrap { padding-top: 60px; transform-style: preserve-3d; perspective: 800px; transform: scale(1); } .page-title { font-size: 50px; color: #fff; text-align: center; padding: 80px 0 18px; position: relative; font-weight: normal; } .example-title { padding: 70px 0 28px; } .chain-title { padding: 172px 0 18px; } .resources-title { padding: 20px 0 18px; } .page-title2 { width: 132px; margin: 0 auto; font-size: 22px; line-height: 78px; color: #fff; text-align: right; position: relative; font-weight: normal; } .page-decr { font-size: 16px; color: #ccc; text-align: center; position: relative; } .page2-decr-top { margin-top: 70px; } .page2-decr-set { font-size: 20px; line-height: 34px; } .page-decr2 { padding: 15px 0 40px; text-align: center; color: #fff; font-size: 22px; font-weight: normal; } .example-decr { margin-bottom: 10px; } .page-next { position: fixed; bottom: 60px; display: block; width: 57px; height: 21px; left: 50%; margin-left: -28px; background: url(/assets/img/201712/icons.png) no-repeat -148px -5px; cursor: pointer; z-index: 10; animation: pageNextMove 2s ease-in infinite alternate; } @keyframes pageNextMove { 0% { transform: translateY(0); } 100% { transform: translateY(30px); } } .page-nav { position: fixed; display: block; right: 26px; top: 50%; height: 312px; width: 12px; margin-top: -106px; z-index: 10; } .page-nav li { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid #fff; margin: 20px 0; border-radius: 50%; cursor: pointer; transition: all .3s; } .page-nav li.active { background-color: #e86c16; border: 1px solid #e86c16; } .small-shape { width: 10px; height: 10px; background-color: #191b24; } /** * part2: special styles */ /* logo */ .page1 { background: #0a0e19 url(/assets/img/201712/page1-bg.jpg) center top no-repeat; background-size: cover; transform-style: preserve-3d; perspective: 800px; } .page1-bg-top, .page1-bg-bottom { position: absolute; z-index: 3; zoom: .75; } .page1-bg-top { left: 0; top: 0; } .page1-bg-bottom { right: 0; bottom: 0; } .page1-overflow-wrap { position: absolute; height: 100%; left: 50%; width: 100%; transform: translateX(-50%); } .page1-title { position: absolute; z-index: 3; width: 850px; height: 478px; left: 50%; top: 50%; margin: -246px 0 0 -440px; opacity: 0; } .page1-title-decr { color: #fff; font-size: 14px; position: absolute; z-index: 3; text-align: center; letter-spacing: 20px; font-weight: normal; width: 230px; left: 50%; top: 50%; margin: 150px 0 0 -115px; opacity: 0; } .page1-draft { position: absolute; width: 332px; line-height: 66px; text-align: center; font-size: 30px; color: #fff; background-color: #ea6d35; left: 50%; top: 50%; z-index: 4; margin: 230px 0 0 -166px; opacity: 0; } .page1-persons { position: absolute; width: 100%; height: 100%; margin-top: 80px; } .page1-person { position: absolute; } .page1-person1 { left: -130px; bottom: 264px; } .page1-person2 { right: -132px; top: 0; } .page1-person3 { bottom: 278px; left: 0; } .page1-person4 { right: -174px; top: 130px; } .page1-person5 { bottom: 0; left: 0; } .page1-person6 { top: 288px; right: 124px; } /* page2 */ .page2 { background-color: #0a0e19; padding-top: 100px; box-sizing: border-box; } .container { position: relative; padding-top: 1px; width: 100%; height: 1080px; background: #0a0e19 url("/assets/img/201712/cube-bg.jpg") no-repeat center; } .boxs-box { position: relative; width: 1200px; height: 400px; margin: 300px auto 0; /*perspective:700px;*/ } .cube { position: absolute; transform-style: preserve-3d; width: 200px; height: 200px; transform: rotateX(-30deg) rotateY(45deg); } .cube .face { position: absolute; top: 0; left: 0; height: 140px; width: 140px; background: #0a0e19; border: 3px solid #057d83; opacity: 0; transition: transform .8s ease-in-out, opacity 0.3s; } .on .cube .face { opacity: 1; } .cube .face:nth-child(1) { transform: rotateY(0deg) translateZ(72px) scaleY(0); transform-origin: bottom; } .cube .face:nth-child(2) { transform: rotateX(0deg) translateZ(-72px) scaleY(0); transform-origin: bottom; } .cube .face:nth-child(3) { transform: rotateY(90deg) translateZ(72px) scaleY(0); transform-origin: bottom; } .cube .face:nth-child(4) { transform: rotateY(-90deg) translateZ(72px) scaleY(0); transform-origin: bottom; } .cube .face:nth-child(5) { transform: rotateX(90deg) translateZ(-72px); } .cube .face:nth-child(6) { transform: rotateX(-90deg) translateZ(72px); } .on .cube .face:nth-child(1) { transform: rotateY(0deg) translateZ(72px) scaleY(1); } .on .cube .face:nth-child(2) { transform: rotateX(0deg) translateZ(-72px) scaleY(1); } .on .cube .face:nth-child(3) { transform: rotateY(90deg) translateZ(72px) scaleY(1); } .on .cube .face:nth-child(4) { transform: rotateY(-90deg) translateZ(72px) scaleY(1); } .on .cube .face:nth-child(5) { transform: rotateX(90deg) translateZ(72px); } /*内容日均PV*/ .cube.c1 { left: 530px; top: -133px; } .cube.c1 .face { height: 280px; border-color: #00ffff; transition-duration: 2s, 0.5s; } .cube.c1 .face:nth-child(5) { height: 140px; transform: rotateX(90deg) translateZ(-212px); } .cube.c1 .face:nth-child(6) { height: 140px; transform: rotateX(-90deg) translateZ(212px); } /*动画*/ .on .cube.c1 .face:nth-child(5) { transform: rotateX(90deg) translateZ(72px); } /*资金支持*/ .cube.c2 { left: 350px; top: 43px; } .cube.c2 .face { transition-duration: 1.4s, 0.5s; } /*游戏IP*/ .cube.c3 { left: 695px; top: 80px; } .cube.c3 .face { transition-duration: 1.2s, 0.5s; } .cube.c3 .face:nth-child(1) { width: 210px; height: 120px; transform: rotateY(0deg) translateZ(52px) scaleY(0); } .cube.c3 .face:nth-child(2) { width: 210px; height: 120px; transform: rotateX(0deg) translateZ(-52px) scaleY(0); } .cube.c3 .face:nth-child(3) { width: 100px; height: 120px; transform: rotateY(90deg) translateZ(162px) scaleY(0); } .cube.c3 .face:nth-child(4) { width: 100px; height: 120px; transform: rotateY(-90deg) translateZ(52px) scaleY(0); } .cube.c3 .face:nth-child(5) { width: 210px; height: 100px; transform: rotateX(90deg) translateZ(-72px); } .cube.c3 .face:nth-child(6) { width: 210px; height: 100px; transform: rotateX(-90deg) translateZ(72px); } /*动画*/ .on .cube.c3 .face:nth-child(1) { transform: rotateY(0deg) translateZ(52px) scaleY(1); } .on .cube.c3 .face:nth-child(2) { transform: rotateX(0deg) translateZ(-52px) scaleY(1); } .on .cube.c3 .face:nth-child(3) { transform: rotateY(90deg) translateZ(162px) scaleY(1); } .on .cube.c3 .face:nth-child(4) { transform: rotateY(-90deg) translateZ(52px) scaleY(1); } .on .cube.c3 .face:nth-child(5) { transform: rotateX(90deg) translateZ(52px); } /*注册作者*/ .cube.c4 { left: 610px; top: 105px; } .cube.c4 .face { transition-duration: 1.5s, 0.5s; } .cube.c4 .face:nth-child(1) { height: 170px; transform: rotateY(0deg) translateZ(142px) scaleY(0); } .cube.c4 .face:nth-child(2) { height: 170px; transform: rotateX(0deg) translateZ(-142px) scaleY(0); } .cube.c4 .face:nth-child(3) { height: 170px; width: 280px; transform: rotateY(90deg) translateZ(0) scaleY(0); } .cube.c4 .face:nth-child(4) { height: 170px; width: 280px; transform: rotateY(-90deg) translateZ(142px) scaleY(0); } .cube.c4 .face:nth-child(5) { height: 280px; transform: rotateX(90deg) translateZ(-32px); } .cube.c4 .face:nth-child(6) { height: 280px; transform: rotateX(-90deg) translateZ(32px); } /*动画*/ .on .cube.c4 .face:nth-child(1) { transform: rotateY(0deg) translateZ(142px) scaleY(1); } .on .cube.c4 .face:nth-child(2) { transform: rotateX(0deg) translateZ(-142px) scaleY(1); } .on .cube.c4 .face:nth-child(3) { transform: rotateY(90deg) translateZ(0) scaleY(1); } .on .cube.c4 .face:nth-child(4) { transform: rotateY(-90deg) translateZ(142px) scaleY(1); } .on .cube.c4 .face:nth-child(5) { transform: rotateX(90deg) translateZ(142px); } /*合作媒体*/ .cube.c5 { left: 410px; top: 180px; } .cube.c5 .face { transition-duration: 1.2s, 0.5s; } .cube.c5 .face:nth-child(1) { height: 120px; } .cube.c5 .face:nth-child(2) { height: 120px; } .cube.c5 .face:nth-child(3) { height: 120px; } .cube.c5 .face:nth-child(4) { height: 120px; } .cube.c5 .face:nth-child(5) { transform: rotateX(90deg) translateZ(-52px); } .cube.c5 .face:nth-child(6) { transform: rotateX(-90deg) translateZ(52px); } /*动画*/ .on .cube.c5 .face:nth-child(5) { transform: rotateX(90deg) translateZ(72px); } /*左小方块*/ .cube.c6 { left: 865px; top: 130px; } .cube.c6 .face { width: 50px; height: 50px; } .cube.c6 .face:nth-child(1) { height: 60px; transform: rotateY(0deg) translateZ(27px) scaleY(0); } .cube.c6 .face:nth-child(2) { height: 60px; transform: rotateX(0deg) translateZ(-27px) scaleY(0); } .cube.c6 .face:nth-child(3) { height: 60px; transform: rotateY(90deg) translateZ(27px) scaleY(0); } .cube.c6 .face:nth-child(4) { height: 60px; transform: rotateY(-90deg) translateZ(27px) scaleY(0); } .cube.c6 .face:nth-child(5) { transform: rotateX(90deg) translateZ(-37px); } .cube.c6 .face:nth-child(6) { transform: rotateX(-90deg) translateZ(37px); } /*动画*/ .on .cube.c6 .face:nth-child(1) { transform: rotateY(0deg) translateZ(27px) scaleY(1); } .on .cube.c6 .face:nth-child(2) { transform: rotateX(0deg) translateZ(-27px) scaleY(1); } .on .cube.c6 .face:nth-child(3) { transform: rotateY(90deg) translateZ(27px) scaleY(1); } .on .cube.c6 .face:nth-child(4) { transform: rotateY(-90deg) translateZ(27px) scaleY(1); } .on .cube.c6 .face:nth-child(5) { transform: rotateX(90deg) translateZ(27px); } /*右小方块*/ .cube.c7 { left: 273px; top: 140px; } .cube.c7 .face { width: 50px; height: 50px; } .cube.c7 .face:nth-child(1) { height: 30px; transform: rotateY(0deg) translateZ(27px) scaleY(0); } .cube.c7 .face:nth-child(2) { height: 30px; transform: rotateX(0deg) translateZ(-27px) scaleY(0); } .cube.c7 .face:nth-child(3) { height: 30px; transform: rotateY(90deg) translateZ(27px) scaleY(0); } .cube.c7 .face:nth-child(4) { height: 30px; transform: rotateY(-90deg) translateZ(27px) scaleY(0); } .cube.c7 .face:nth-child(5) { transform: rotateX(90deg) translateZ(-7px); } .cube.c7 .face:nth-child(6) { transform: rotateX(-90deg) translateZ(7px); } /*动画*/ .on .cube.c7 .face:nth-child(1) { transform: rotateY(0deg) translateZ(27px) scaleY(1); } .on .cube.c7 .face:nth-child(2) { transform: rotateX(0deg) translateZ(-27px) scaleY(1); } .on .cube.c7 .face:nth-child(3) { transform: rotateY(90deg) translateZ(27px) scaleY(1); } .on .cube.c7 .face:nth-child(4) { transform: rotateY(-90deg) translateZ(27px) scaleY(1); } .on .cube.c7 .face:nth-child(5) { transform: rotateX(90deg) translateZ(27px); } /*文字*/ .cube .c-slogan { position: absolute; bottom: 100%; left: 30px; color: #fff; padding-bottom: 20px; font-size: 20px; font-weight: normal; text-align: center; transform: scale(0, 0); text-shadow: #0d1221 0px 0px 10px, #0d1221 0px 0px 10px, #0d1221 0px 0px 10px, #0d1221 0px 0px 10px, #0d1221 0px 0px 10px; line-height: 1.1; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275); } .cube .c-slogan strong { font-weight: 300; font-size: 70px; color: #07fdff; } .cube .c-logo { position: relative; display: block; margin: 20px auto 0; background: url(/assets/img/201712/spr-logo.png); width: 60px; height: 60px; transform: scale(0); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275); } .on .cube .c-logo { transform: scale(1); } .cube:nth-child(2) .c-logo { background-position: -91px; } .cube:nth-child(3) .c-logo { background-position: -361px; left: 45px; } .cube:nth-child(4) .c-logo { background-position: -271px; } .cube:nth-child(5) .c-logo { background-position: -181px; } .on .cube .c-slogan { transform: scale(1.2, 1); transition-delay: 0.5s; } .cube.c4 .c-slogan { left: 80px; } .cube.c5 .c-slogan { left: -20px; } .on .cube.c1 .c-slogan, .on .cube.c1 .c-logo { transition-delay: 1.3s; } .on .cube.c2 .c-slogan, .on .cube.c2 .c-logo { transition-delay: 0.8s; } .on .cube.c3 .c-slogan, .on .cube.c3 .c-logo { transition-delay: 0.5s; } .on .cube.c4 .c-slogan, .on .cube.c4 .c-logo { transition-delay: 1s; } .on .cube.c5 .c-slogan, .on .cube.c5 .c-logo { transition-delay: 0.5s; } .flying li { list-style: none; position: absolute; display: block; } .flying .i1 { left: 985px; top: 95px; width: 52px; height: 200px; background: url(/assets/img/201712/icons.png) no-repeat -531px -5px; position: relative; } .flying .i1:after { content: ""; position: absolute; left: 13px; top: 12px; width: 27px; height: 28px; background-color: #0a0e19; } .flying .i1 i { position: absolute; z-index: 2; left: 13px; top: 12px; width: 27px; height: 28px; background: url(/assets/img/201712/icons.png) no-repeat -544px -17px; animation: rotateCircle 10s linear infinite; } @keyframes rotateCircle { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } .flying .i2 { left: 778px; top: -80px; width: 23px; height: 23px; background: url(/assets/img/201712/icons.png) no-repeat -531px -210px; } .flying .i3 { left: 925px; top: -10px; width: 19px; height: 161px; background: url(/assets/img/201712/icons.png) no-repeat -588px -5px; } .flying .i4 { left: 950px; top: 72px; width: 18px; height: 92px; background: url(/assets/img/201712/icons.png) no-repeat -588px -171px; } .flying .i5 { left: 250px; top: -20px; width: 22px; height: 194px; background: url(/assets/img/201712/icons.png) no-repeat -612px -5px; } .flying .i6 { left: 182px; top: 168px; width: 62px; height: 238px; background: url(/assets/img/201712/icons.png) no-repeat -639px -5px; position: absolute; } .flying .i6 i { position: absolute; width: 100%; height: 62px; border: 2px dotted #e86c16; border-radius: 50%; animation: rotateCircle 10s linear infinite; box-sizing: border-box; } .flying .i7 { left: 135px; top: 95px; width: 19px; height: 161px; background: url(/assets/img/201712/icons.png) no-repeat -588px -5px; } .lowIe { margin: 100px 0 0; display: none; } /* page3 */ .page3 { background-color: #0a0e18; } .circle-3d-room { margin-top: 174px; position: relative; zoom: 1.02; z-index: 2; } .circle-yellow { width: 986px; height: 320px; margin: 0 auto; position: relative; background: url(/assets/img/201712/circle-yellow.png) no-repeat; } .circle-yellow:after { content: ""; position: absolute; top: 10px; left: -31px; width: 1048px; height: 339px; background: url(/assets/img/201712/circle-yellow-dash.png) no-repeat; } .circle-blue { position: relative; } .circle-ico { position: absolute; background-image: url(/assets/img/201712/icons.png); background-repeat: no-repeat; z-index: 3; transition: all .1s; } .circle-ico:after { content: attr(data-text); position: absolute; top: -24px; width: 100%; text-align: center; line-height: 100%; font-size: 16px; color: #fff; font-style: normal; } .circle-ico:hover { transform: scale(1.05); } .circle-ico:after:hover { transform: scale(1); pointer-events: none; } .hot-testing:after { top: 60px; width: 80px; left: -18px; color: #fb9357; } .effect:after { width: 80px; text-align: left; } .circle-blue-item1 { width: 718px; height: 228px; bottom: 24px; left: 50%; margin-left: -359px; z-index: 3; background: url(/assets/img/201712/circle-blue-item-full.png) no-repeat; } .circle-blue-item1:after { content: ""; position: absolute; left: -24px; width: 766px; height: 243px; background: url(/assets/img/201712/circle-blue-itembg.png) no-repeat; } .circle-blue-item2 { width: 386px; height: 131px; position: absolute; left: 50%; margin-left: -193px; z-index: 4; } .circle-blue-item2.layer1 { background: url(/assets/img/201712/circle-blue-item21.png) no-repeat; bottom: 74px; } .circle-blue-item2.layer2 { background: url(/assets/img/201712/circle-blue-item22.png) no-repeat; bottom: 80px; } .circle-blue-item2.layer3 { background: url(/assets/img/201712/circle-blue-item23.png) no-repeat; bottom: 86px; } .circle-blue-item2.layer4 { background: url(/assets/img/201712/circle-blue-item24.png) no-repeat; bottom: 92px; } .circle-blue-item3 { width: 196px; height: 66px; position: absolute; left: 50%; margin-left: -98px; bottom: 166px; z-index: 5; background: url(/assets/img/201712/circle-blue-item3.png) no-repeat; } .hot-testing { width: 58px; height: 52px; left: 50%; margin-left: -29px; z-index: 2; background-position: -263px -172px; position: absolute; } .hot-testing span { position: absolute; /* animation: xAxis 1s infinite ease-in; */ } .hot-testing span b { /* 渲染小黑点儿*/ position: absolute; left: -2px; top: 4px; /* animation: yAxis 1s infinite ease-out; */ width: 50px; height: 50px; background: url(/assets/img/201712/icons.png) no-repeat -533px -257px; } @keyframes xAxis { 50% { animation-timing-function: ease-in; transform: translateX(15px); -transform-origin: center center; } } @keyframes yAxis { 50% { animation-timing-function: ease-out; transform: translateY(13px); } } .novel { width: 44px; height: 44px; background-position: -263px -59px; left: 52px; top: 28px; } .video { width: 63px; height: 51px; background-position: -263px -105px; left: 82px; top: 168px; } .cartoon { width: 71px; height: 57px; background-position: -260px -228px; left: 574px; top: 160px; } .article { width: 42px; height: 45px; background-position: -263px -295px; left: 640px; top: 28px; } .effect { width: 56px; height: 56px; background-position: -263px -343px; left: 68px; top: -32px; opacity: 0; } .up-ico { position: absolute; width: 2px; background-image: url(/assets/img/201712/icons.png); background-repeat: no-repeat; } .up-ico1 { height: 60px; background-position: -211px -418px; bottom: -140px; left: 122px; z-index: 2; } .up-ico2 { height: 80px; background-position: -218px -418px; bottom: -64px; left: 790px; z-index: 2; } .track { width: 980px; height: 920px; -background-color: rgba(255, 255, 255, .1); position: absolute; top: -302px; left: 4px; border-radius: 50%; transform: rotateX(70deg); transform-style: preserve-3d; overflow: hidden; } .dot { width: 300px; height: 890px; background: url(/assets/img/201712/yellow-seaning.png) no-repeat left top; position: absolute; left: 50%; top: 50%; margin: -280px 0 0 0; transform-origin: left top; -animation: seaning 4s linear infinite; z-index: 3; opacity: 0; } .track2 { width: 712px; height: 650px; -background-color: rgba(255, 255, 255, .1); position: absolute; top: -210px; left: 4px; border-radius: 50%; transform: rotateX(70deg); transform-style: preserve-3d; overflow: hidden; } .dot2 { width: 300px; height: 490px; background: url(/assets/img/201712/blue-seaning.png) no-repeat left top; position: absolute; left: 50%; top: 50%; margin-top: -82px; -transform: rotateZ(-90deg); transform-origin: left top; -animation: seaning2 4s 2s linear infinite; z-index: 10; opacity: 0; } /* 扫描 */ @keyframes seaning { 0% { opacity: 1; transform: rotateZ(-90deg); } 50% { transform: rotateZ(90deg); opacity: 1; } 100% { transform: rotateZ(270deg); opacity: 0; } } @keyframes seaning2 { 0% { opacity: 1; transform: rotateZ(90deg); } 20% { transform: rotateZ(-90deg); } 50% { transform: rotateZ(-180deg); opacity: 0; } 100% { transform: rotateZ(-270deg); opacity: 0; } } /* page4 */ .page4 { background-color: #090c16; } .circle-bg { width: 1236px; height: 172px; position: absolute; left: 50%; top: 50%; margin: 412px 0 0 -618px; background: url(/assets/img/201712/page4-circle.png) no-repeat; } .circle, #c1 { width: 100%; height: 100%; border-radius: 50%; position: absolute; } /* 画圆轨迹 */ /* .circle-line { position: absolute; width: 50px; height: 50px; top: -50px; left: 1000px; } */ .circle-item { width: 96px; height: 96px; text-align: center; color: #fff; font-size: 24px; border: 2px solid #fff; position: absolute; border-radius: 50%; opacity: 1; left: 50%; top: -600px; margin: -128px 0 0 -50px; cursor: pointer; } .circle-item:after { content: ""; display: block; position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; bottom: -40px; left: 50%; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); } .circle-item:hover { transform: scale(1.2) translateY(-5%); transform-origin: center bottom; background-color: #ea7518; box-shadow: 0 0 0 14px #1a1e2a; } .circle-item:hover:after { background-color: #ee881c; } .circle-item a { position: absolute; width: 100px; height: 100px; margin-left: -50px; z-index: 2; } .circle-item i { position: absolute; top: 50%; left: 50%; } .circle-item1 i { background: url(/assets/img/201712/icons.png) no-repeat -210px -88px; margin-left: -19px; width: 38px; height: 52px; margin: -26px 0 0 -19px; } .circle-item2 i { background: url(/assets/img/201712/icons.png) no-repeat -210px -145px; width: 44px; height: 45px; margin: -22.5px 0 0 -22px; } .circle-item3 i { background: url(/assets/img/201712/icons.png) no-repeat -210px -195px; margin: -25px 0 0 -20px; width: 40px; height: 50px; } .circle-item4 i { background: url(/assets/img/201712/icons.png) no-repeat -210px -250px; width: 45px; height: 48px; margin: -24px 0 0 -22.5px; } .circle-item5 i { background: url(/assets/img/201712/icons.png) no-repeat -210px -303px; width: 43px; height: 53px; margin: -26.5px 0 0 -21.5px; } .circle-item6 i { background: url(/assets/img/201712/icons.png) no-repeat -210px -361px; width: 43px; height: 47px; margin: -23.5px 0 0 -21.5px; } .circle-item6:hover { top: 94px; } .circle-item h4 { pointer-events: none; font-size: 22px; position: relative; top: 180px; left: -14px; width: 130px; text-align: center; opacity: 0; font-weight: bold; } .circle-item p { pointer-events: none; font-size: 14px; color: #a0a1a2; width: 140px; position: relative; top: 190px; left: -14px; opacity: 0; text-align: center; margin-left: -2px; } /* page5 */ .page5 { background-color: #0a0e19; transform-style: preserve-3d; perspective: 800px; } .resources-wrap { perspective: 800px; position: relative; } .resources-list-wrap { width: 904px; height: 564px; margin: 0 auto; overflow: hidden; zoom: 1; } .resources-list { width: 890px; margin-left: 10px; height: 552px; transform-style: preserve-3d; } .fixed-left, .fixed-right { width: 100%; height: 552px; background-color: #0a0e19; z-index: 10; position: absolute; margin-top: -550px; } /* -1714 970 */ /* -1167 938*/ .fixed-left { margin-left: -1201px; } .fixed-right { margin-left: 902px; } .resources-item { width: 261px; height: 511px; position: absolute; left: 50%; margin-left: -134px; opacity: 1; } .resources-item a { position: absolute; width: 100%; height: 100%; background: url(/assets/img/201712/resources-item-bg.png) no-repeat; } .resources-item-img { padding: 48px 0 0 8px; width: 226px; height: 418px; } .resources-item-decr { position: relative; width: 240px; line-height: 100%; font-size: 16px; color: #fff; bottom: -530px; text-align: center; } .resources-item1 a { -margin-left: -134px; /* -454 */ transform-origin: left; transform: rotateY(0) translateZ(0); /* 30 -260 */ } .resources-item2 a { -margin-left: -134px; /* -294 */ transform-origin: left; transform: rotateY(0) translateZ(0); /* 30 -130 */ } .resources-item4 a { -margin-left: -134px; /* -26 */ transform-origin: right; transform: rotateY(0) translateZ(0); /* -30 -130 */ } .resources-item5 a { -margin-left: -134px; /* 186 */ transform-origin: right; transform: rotateY(0) translateZ(0); /* -30 -260px */ } .resources-prev, .resources-next { display: block; position: absolute; top: 233px; width: 55px; height: 54px; cursor: pointer; z-index: 11; } .resources-prev { left: 30px; background: url(/assets/img/201712/icons.png) no-repeat -210px 0; } .resources-next { right: 30px; background: url(/assets/img/201712/icons.png) no-repeat -269px 0; } .platform-ico, .resources-ico { line-height: 39px; margin: -10px auto 10px; } .resources-ico { margin: 10px auto; } .resources-ico:after, .platform-ico:after { content: ""; position: absolute; display: block; width: 27px; height: 27px; top: 6px; left: 4px; } .resources-ico:after { background: url(/assets/img/201712/icons.png) no-repeat -5px -5px; } .platform-ico:after { background: url(/assets/img/201712/icons.png) no-repeat -37px -5px; } .platform-wrap { width: 1200px; height: 70px; margin: 0 auto; overflow: hidden; position: relative; } .platform-list { width: 1400px; /* 333 */ position: relative; left: 0; top: 0; } .platform-item { width: 192px; height: 70px; float: left; margin: 0 4px; } .platform-bg { display: block; width: 100%; height: 100%; cursor: default; } .platform-bg1 { background: url(/assets/img/201712/icons.png) no-repeat -5px -37px; } .platform-bg2 { background: url(/assets/img/201712/icons.png) no-repeat -5px -112px; } .platform-bg3 { background: url(/assets/img/201712/icons.png) no-repeat -5px -187px; } .platform-bg4 { background: url(/assets/img/201712/icons.png) no-repeat -5px -262px; } .platform-bg5 { background: url(/assets/img/201712/icons.png) no-repeat -5px -337px; } .platform-bg6 { background: url(/assets/img/201712/icons.png) no-repeat -5px -412px; } .platform-bg7 { background: url(/assets/img/201712/icons.png) no-repeat -334px -5px; } .platform-bg8 { background: url(/assets/img/201712/icons.png) no-repeat -334px -80px; } .platform-bg9 { background: url(/assets/img/201712/icons.png) no-repeat -334px -155px; } .platform-bg10 { background: url(/assets/img/201712/icons.png) no-repeat -334px -230px; } .platform-bg11 { background: url(/assets/img/201712/icons.png) no-repeat -334px -305px; } .platform-bg12 { background: url(/assets/img/201712/icons.png) no-repeat -334px -380px; } .platform-prev, .platform-next { position: absolute; display: block; width: 15px; height: 25px; margin-top: -48px; cursor: pointer; } .platform-prev { background: url(/assets/img/201712/icons.png) no-repeat -88px -5px; position: absolute; left: -28px; } .platform-prev-active { background: url(/assets/img/201712/icons.png) no-repeat -68px -5px; } .platform-next { background: url(/assets/img/201712/icons.png) no-repeat -128px -5px; position: absolute; right: -28px; } .platform-next-active { background: url(/assets/img/201712/icons.png) no-repeat -108px -5px; } /* page6 */ .page6-bg { position: absolute; top: 0; left: 0; width: 100%; height: 110%; background: url(/assets/img/201712/page6-bg.jpg) no-repeat; background-size: cover; animation: move 10s linear infinite alternate; } @keyframes move { 0% { transform: translateY(0); } 100% { transform: translateY(-9%); } } .example-title2:after { content: ""; position: absolute; left: 0; top: 27px; width: 26px; height: 26px; background: url(/assets/img/201712/icons.png) no-repeat -210px -59px; } .example-item { width: 380px; height: 270px; float: left; margin-right: 30px; position: relative; overflow: hidden; } .example-item:last-child { margin-right: 0; } .example-item a, .example-item img { display: block; position: absolute; width: 100%; height: 100%; } .example-item i, .example-item span { display: block; position: absolute; height: 50px; width: 100%; } .example-item i { height: 50px; background-color: #fff; font-style: normal; bottom: 0; transition: height .1s; } .example-item img { width: 380px; height: 270px; transition: all .3s; } .example-item:hover i { height: 80px; } .example-item:hover img { transform: scale(1.1); } .example-item span { line-height: 50px; font-size: 20px; color: #222222; text-align: center; top: 0; } .example-item span.decr { top: 50px; line-height: 100%; font-size: 14px; color: #444; } .see-more { font-size: 16px; line-height: 40px; text-align: center; /* border: 1px solid #fff; */ box-sizing: border-box; color: #fff; font-style: normal; width: 140px; /* display: block; */ margin: 20px auto 0; cursor: pointer; } .page6-btn-group { font-size: 0; width: 180px; margin: 0 auto; margin-top: 70px; } .page6-login, .page6-draft { width: 180px; line-height: 40px; box-sizing: border-box; font-size: 18px; color: #ed6f37; text-align: center; border: 1px solid #ed6f37; display: inline-block; } .page6-draft { background-color: #ed6f37; color: #fff; }