.home-banner { position: relative; } .home-banner .slides-home { height: calc(100vh - 110px); } .home-banner .slides-home a { background-size: cover; } .home-banner .slides-feature-toggle { width: 50px; height: 350px; background: #00000099; position: absolute; z-index: 2; left: 0; bottom: 64px; font-size: 60px; font-weight: normal; color: #fdfffe; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .home-banner .slides-feature { position: absolute; bottom: 0; left: 0; width: 865px; height: 477px; background: #1f1f1f99; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .home-banner .slides-feature .slides-feature-nav { background: #74747480; color: #ffffff; font-size: 26px; padding: 10px; height: 54px; position: absolute; bottom: 0; left: 143px; } .home-banner .slides-feature .slides-feature-content { height: 100%; width: 90%; border-left: solid 4px #ffffff33; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 2; padding: 6px; } .home-banner .slides-feature .slides-feature-content .feature-subtitle { line-height: 100px; font-size: 14px; font-weight: normal; color: #ffffff; z-index: 2; text-align: left; } .home-banner .slides-feature .slides-feature-content .feature-title { line-height: 160px; font-size: 54px; font-weight: bold; color: #ffffff; text-align: left; letter-spacing: 6px; } .home-banner .slides-feature .slides-feature-content .feature-button-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 20px; position: relative; } .home-banner .slides-feature .slides-feature-content .feature-button-wrapper .feature-button { font-size: 18px; color: #ffffff; background: #33b2d9; text-align: center; padding: 8px 12px; margin-right: 30px; position: relative; } .home-banner .slides-feature .slides-feature-content .feature-button-wrapper .feature-qrcode { display: none; height: 110px; width: 110px; position: absolute; bottom: -110px; } .home-banner .slides-feature .slides-feature-content .feature-nav { position: absolute; bottom: 10px; font-size: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: 20px; width: 100px; } .home-banner .slides-feature .slides-feature-content .feature-nav a { color: #ffffffaa; } .home-vr-about { padding: 60px 0; } .home-vr-about .sec-vr { height: 346px; } .home-vr-about .sec-vr .title-vr { background-image: url("../img/title-vr.png"); background-size: contain; background-repeat: no-repeat; height: 100px; width: 40%; position: absolute; left: 0; top: 19px; } .home-vr-about .sec-vr .bg-vr { background-image: url("../img/vr-bg.png"); background-size: contain; background-repeat: no-repeat; height: 331px; width: 66%; position: absolute; right: 14px; top: 9px; } .home-vr-about .sec-vr .button-vr { background-image: url(../img/btn-bg-blue.png); background-size: contain; background-repeat: no-repeat; height: 60px; width: 219px; position: absolute; bottom: 0; left: 200px; font-size: 22px; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .home-vr-about .sec-about { height: 340px; } .home-vr-about .sec-about .text-about { width: 88%; font-size: 14px; line-height: 24px; text-indent: 24px; letter-spacing: 1px; margin-left: 30px; } .home-vr-about .sec-about .button-about { display: block; background-image: url("../img/btn-bg-blue.png"); background-size: contain; background-repeat: no-repeat; height: 60px; width: 219px; position: absolute; bottom: 0; right: 36px; font-size: 22px; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .home-moments { padding: 30px 0; } .home-moments .moments-links { background-image: url("../img/moments-title.png"); background-size: contain; background-repeat: no-repeat; height: 92px; width: 30%; margin: 30px 0 60px; } .home-moments .moments-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .home-moments .moments-list .moments-item { float: left; position: relative; color: #ffffff; } .home-moments .moments-list .moments-item:nth-child(1) { width: calc(34vw - 20px); height: 42.59vw; background: #925757; } .home-moments .moments-list .moments-item:nth-child(2) { width: 36vw; height: 21.29vw; background: #558a2a; } .home-moments .moments-list .moments-item:nth-child(3) { width: 30vw; height: 21.29vw; background: #1d3a9b; } .home-moments .moments-list .moments-item:nth-child(4) { width: 26vw; height: 21.29vw; background: #ac188c; } .home-moments .moments-list .moments-item:nth-child(5) { width: 40vw; height: 21.29vw; background: #333333; } .home-moments .moments-list .moments-item:hover { color: #33b2d9; } .home-moments .moments-list .moments-item:hover .title-wrapper { background: #1f1f1f; opacity: 0.86; } .home-moments .moments-list .moments-item .title-wrapper { position: absolute; bottom: 0; text-align: left; padding: 25px; width: 100%; } .home-moments .moments-list .moments-item .title-wrapper .title, .home-moments .moments-list .moments-item .title-wrapper .subtitle { font-size: 28px; font-weight: normal; line-height: 40px; } .home-moments .flash4 { height: 300px; position: relative; } .home-moments .flash4 ul li { width: 46px; height: 260px; position: relative; overflow: hidden; float: left; } .home-moments .flash4 ul li:last-child { width: 480px; } .home-moments .flash4 ul li .imgTop img { width: 480px; height: 260px; opacity: 0.4; } .home-moments .flash4 ul li .imgTop img.tm { opacity: 1; } .home-moments .flash4 ul li .imgCen { width: 480px; height: 50px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; line-height: 50px; position: absolute; left: 0px; bottom: 0px; text-indent: 20px; display: none; } .home-links { padding: 30px 0; } .home-links .title-links { background-image: url("../img/links-title.png"); background-size: contain; background-repeat: no-repeat; height: 92px; width: 20%; } .home-links .sec-links { width: 100%; height: 146px; padding-top: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; } .home-links .sec-links a { border-right: 2px solid #333333; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .home-links .sec-links a:last-child { border-right: none; } .home-links .sec-links a img { max-height: 64px; max-width: 100%; } @media screen and (max-width: 1350px) { .home-vr-about .sec-vr { height: 400px; } .home-vr-about .sec-about { height: 400px; } .home-vr-about .sec-about .text-about { font-size: 10px; } } /*# sourceMappingURL=index.min.css.map */