/** * Swiper 3.4.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2017, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: March 10, 2017 */ .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}} .beianinfo{ color: #673200; font-size: 16px; position: absolute; z-index: 3; bottom: 5px; width: 100%; text-align: center; } .coderightdown{ position: fixed; z-index: 99; right: 5%; bottom: 7%; height: 17.6%; } @keyframes spin { 0% { transform: rotate(0deg); /* 动画起始点 */ } 25%{ transform: rotate(36deg); /* 动画结束点 */ } 50%{ transform: rotate(0deg); /* 动画结束点 */ } 75%{ transform: rotate(-36deg); /* 动画结束点 */ } 100% { transform: rotate(0deg); /* 动画结束点 */ } } .swiper3-leftlight{ animation: shan 0.5s both infinite; } .swiper3-rightlight{ animation: shan 0.3s both infinite; } .swiper3-rightlight.animated,.swiper3-leftlight.animated{ animation-delay: 0.6s; } .animated { animation-duration: 1s; animation-fill-mode: both } .swiper4-hi.animated{ animation-delay: 0.5s; } .swiper5-heart1.animated{ animation-delay: 0.5s; } .swiper4-heart1.animated,.swiper4-heart2.animated,.swiper5-coin3.animated{ animation-delay: 0.8s; } .spin{ animation: spin 5s infinite; animation-duration: 10s !important; } .swiper3-ren.animated{ animation-delay: 0.7s; animation-duration: 0.5s; } .swiper3-ts.animated{ animation-delay: 0.5s; } .swiper2-light.animated{ animation: pulse 1.5s alternate infinite; } .swiper2-rlna.animated,.swiper2-xxms.animated,.swiper2-cycs.animated,.swiper2-sgzs.animated{ animation-delay: 0.8s; } .fadeInRight { animation-name: fadeInRight; } .fadeInLeft { animation-name: fadeInLeft; } .bounceIn { animation-name: bounceIn; animation-duration: .75s; } .fadeIn { animation-name: fadeIn; } .fadeInUp { animation-name: fadeInUp; } .orderMove { animation: orderMove .8s alternate infinite; } .swiper1-tsup.animated { animation-delay: 0.5s; } .swiper1-tsdown.animated { animation-delay: 0.5s; } .swiper1-finger.animated { animation: updonwMove 1s infinite alternate ease-in-out; } .swiper1-phoneimg.animated { animation: updonwMove1 1s alternate infinite ease-in-out; } .content { width: 100%; background: url("@/static/images/index/index1(5).png") no-repeat; background-size: cover; } .header { position: fixed; z-index: 100; top: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; padding: 30px 0px 20px; width: 1200px; height: 54px; } .logoimg { height: 54px; } .swiper-box { transform-origin: 0 0; overflow: hidden; } .swiper { width: 100%; height: 100%; overflow: hidden; min-width: 1400px; } .swiper-item { position: relative; width: 100%; height: 100%; z-index: 1; } .codeswiper{ position: absolute !important; z-index: 99; height: 17.6%; width:226px ; left: 50%; top:51.5%; margin-left: -113px; } .swiper-download { max-width: 240px; width: 9.4%; height: 6.25%; position: absolute !important; left: 50%; top: 74%; margin-left: -4.7%; z-index: 4; } .swiper1-iconr { position: absolute !important; max-width: 248px; height: 19.3%; left: 70.9%; top: 58.5%; z-index: 3; } .swiper1-iconl { position: absolute !important; max-width: 265px; height: 22.7%; left: 18.5%; top: 34.6%; z-index: 3; } .swiper1-finger { position: absolute !important; max-width: 410px; height: 23.4%; top: 78%; left: 53%; z-index: 5; } .swiper1-phone { width: 24%; max-width: 616px; height: 82.2%; position: absolute !important; bottom: 0; left: 50%; margin-left: -12%; background: url('../../static/images/index/index1(7).png') no-repeat center bottom; background-size: contain; } .swiper1-phoneimg { height: 40%; width: 19.4%; // max-width: 495px; position: absolute !important; left: 50%; margin-left: -9.7%; bottom: 0; } .swiper1-title { position: absolute !important; max-width: 938px; width: 36.6%; height: 26.5%; left: 30.9%; top: 27.3%; } .swiper1-tsup { position: absolute !important; max-width: 519px; height: 5%; left: 50.6%; top: 24.5%; } .swiper1-tsdown { position: absolute !important; max-width: 922px; width: 36%; height: 6.6%; left: 31.5%; top: 56%; z-index: 9; } .swiper2-ren { position: absolute !important; max-width: 524px; width: 20.5%; height: 43.6%; left: 52.5%; top: 53.3%; } .swiper2-phone { position: absolute !important; max-width: 472px; width: 18.4%; height: 77.2%; left: 24.8%; top: 15%; } .swiper2-txt1 { position: absolute !important; max-width: 810px; width: 31.6%; height: 18.9%; left: 48%; top: 23.9%; } .swiper2-rlna { position: absolute !important; max-width: 160px; width: 6.25%; height: 5%; left: 38.5%; top: 36.8%; } .swiper2-xxms { position: absolute !important; max-width: 234px; width: 9.1%; height: 6.25%; left: 20.2%; top: 56.4%; } .swiper2-cycs { position: absolute !important; max-width: 190px; width: 7.4%; height: 5.5%; left: 39.9%; top: 61.5%; } .swiper2-sgzs { position: absolute !important; max-width: 148px; width: 5.7%; height: 4.3%; left: 34.6%; top: 76.9%; } .swiper2-txt2 { position: absolute !important; max-width: 805px; width: 31.4%; height: 7.6%; left: 48%; top: 43.9%; } .swiper2-cd { position: absolute !important; max-width: 332px; width: 13%; height: 4.3%; left: 48.8%; top: 29.5%; } .swiper2-light { position: absolute !important; max-width: 230px; width: 9%; height: 7.4%; left: 55.8%; top: 68.2%; } .swiper3-cd{ position: absolute !important; max-width: 332px; width: 13%; height: 4.3%; left: 23%; top: 30%; } .swiper3-ren { position: absolute !important; max-width: 356px; width: 13.9%; height: 33%; left: 63.4%; top: 13.4%; z-index: 2; } /deep/ .uni-swiper-dot-active { background-color: #FF7042; } .swiper3-phone { position: absolute !important; max-width: 472px; width: 18.4%; height: 77.2%; left: 56.6%; top: 15%; } .swiper3-txt1 { position: absolute !important; max-width: 720px; width: 28.1%; height: 18.9%; background: transparent; left: 21.8%; top: 23.9%; } .swiper3-txt2 { position: absolute !important; max-width: 690px; width: 26.9%; height: 7.6%; background: transparent; left: 22%; top: 43.9%; } .swiper3-rightlight{ position: absolute !important; width: 35.7%; height: 23.9%; background: transparent; left: 72%; top:20%; } .swiper3-leftlight{ position: absolute !important; width: 35.7%; height: 23.9%; background: transparent; left: -5.7%; top: 6%; } .swiper3-ts { position: absolute !important; max-width: 521px; width: 20.4%; height: 31.4%; background: transparent; left: 57.7%; top: 41.4%; z-index: 3; } .swiper3-ren2 { position: absolute !important; max-width: 630px; width: 24.6%; height: 44.3%; background: transparent; left: 22.7%; top: 55.7%; background: url('@/static/images/swiper3/swiper3(6).png') no-repeat; background-size: contain; } .swiper4-hi { position: absolute !important; max-width: 343px; width: 13.4%; height: 22.3%; left: 48%; top: 58%; z-index: 2; opacity: 0; } .swiper4-phone { position: absolute !important; width: 18.4%; height: 77.2%; background: transparent; max-width: 472px; left: 24.8%; top: 15%; } .swiper4-cd { position: absolute !important; max-width: 315px; width: 13%; height: 4.3%; background: transparent; left: 49%; top: 30%; } .swiper4-txt1 { position: absolute !important; max-width: 540px; width: 21%; height: 18.9%; background: transparent; left: 48%; top: 23.9%; } .swiper4-txt2 { position: absolute !important; max-width: 806px; width: 31.4%; height: 12.6%; background: transparent; left: 48%; top: 43.7%; } .swiper4-heart1 { position: absolute !important; max-width: 79px; width: 3%; height: 6.6%; left: 41.4%; top: 55%; } .swiper4-heart2 { position: absolute !important; max-width: 140px; width: 5.5%; height: 11.8%; left: 21.5%; top: 26.8%; } .swiper4-ren { position: absolute !important; max-width: 640px; width: 25%; height: 38.9%; background: transparent; left: 48%; top: 58.2%; } .swiper5-cd { position: absolute !important; max-width: 315px; width: 13%; height: 4.3%; background: transparent; left: 22.5%; top: 30%; } .swiper5-coin1 { position: absolute !important; width: 5.7%; height: 11.4%; background: transparent; max-width: 146px; left: 71.5%; top: 27.3%; z-index: 3; } .swiper5-coin2 { position: absolute !important; max-width: 176px; width: 6.8%; height: 13.7%; left: 71.5%; top: 27.2%; z-index: 4; display: none; } .swiper5-coin3 { position: absolute !important; max-width: 559px; width: 21.8%; height: 17.2%; background: transparent; left: 54.8%; top: 40.2%; z-index: 2; } .swiper5-ren1 { position: absolute !important; max-width: 444px; width: 17.3%; height: 40.9%; background: transparent; left: 27.6%; top: 56.6%; } .swiper5-heart1 { position: absolute !important; max-width: 151px; width: 5.8%; height: 12.7%; left: 38.2%; top: 78.4%; opacity: 0; } .swiper5-phone { position: absolute !important; max-width: 472px; width: 18.4%; height: 77.3%; background: transparent; left: 56.5%; top: 15%; } .swiper5-txt2 { position: absolute !important; max-width: 810px; width: 31.6%; height: 12.5%; background: transparent; left: 21.8%; top: 43.7%; } .swiper5-txt1 { position: absolute !important; max-width: 630px; width: 24.6%; height: 18.9%; background: transparent; left: 21.8%; top: 23.9%; } @keyframes shan{ 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes pulse { 0% { left:55.8%; opacity: 1; } 100% { left:58.8%; opacity: 0; } } @keyframes updonwMove { 0% { top: 89%; } 100% { top: 80%; } } @keyframes updonwMove1 { 0% { bottom: 0; } 100% { bottom: 50px; } } @keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translate3d(0, 80%, 0); -ms-transform: translate3d(0, 80%, 0); transform: translate3d(0,80%, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } @keyframes orderMove { 0% { opacity: 1; transform: scale(0.8) } 100% { opacity: 1; transform: scale(1) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); -ms-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); -ms-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); -ms-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } }