html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, dl, dd, p, hr { margin: 0; } button, option, textarea, td { padding: 0; } ul, ol, input { margin: 0; padding: 0; } ul, ol { list-style-type: none; } table { border-spacing: 0; border-collapse: collapse; } strong, b { font-weight: normal; } em, i { font-style: normal; } /* */ h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } body, button, input, select, textarea { } button { border: none; } /* */ img { border: 0; vertical-align: middle; } input, textarea, select { outline: none; } :focus{ outline:0; } a { color: #000; text-decoration: none; } textarea { resize: none; } /* ::-ms-clear ï ::-ms-revealï */ ::-ms-clear, ::-ms-reveal { display: none; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #999 !important; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999 !important; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999 !important; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999 !important; } /**/ a ,button, input, textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); } .l { float: left; } .r { float: right; } .clearfix { zoom: 1; } .clearfix:after, .container:after, .container01:after { content: "."; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } html, body { position: relative; height: 100%; } .container, .container01 { /*padding-right: 15px; padding-left: 15px;*/ margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container, .container01 { width: 750px; } } @media (min-width: 992px) { .container, .container01 { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } .container01 { width: 1053px; } } .container-fluid { /*padding-right: 15px; padding-left: 15px;*/ margin-right: auto; margin-left: auto; } /*swiper*/ .swiper-hd .swiper-slide img { width: 100%; } .swiper-hd { /*padding-top: 50px;*/ box-sizing: border-box; } .swiper-hd .swiper-pagination-bullet { border: 1px solid #fff;border-radius: 50%;box-sizing: border-box;cursor: pointer;display: inline-block;height: 10px;width: 10px; } .swiper-hd .swiper-pagination-white .swiper-pagination-bullet-active { background:#fff; } .swiper-hd.swiper-container-horizontal .swiper-pagination { text-align: center; bottom: 30px; right: 0; left: 0; } .swiper-hd.swiper-container { width: 100%; height: 100%; } @media (max-width: 768px) { .swiper-hd.swiper-container { height: 90%; } } .swiper-hd .swiper-slide { text-align: center; font-size: 18px; background: #000; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; /*transition-duration: 500ms!important;*/ } .swiper-hd .swiper-slide A.swiperA{ display:block; width:100%; height:100%; position: absolute; top:0; left:0;right:0; } .swiper-hd .swiper-button-next, .swiper-hd .swiper-button-prev { /*margin-top: 3px;*/ display: none; } .swiper-hd .swiper-button-prev { /*left: 5%;*/ } .swiper-hd .swiper-button-next { /*right: 5%;*/ } .swiper-hd .swiper-slide .inSw-inner { margin: 0 auto; } .swiper-hd .swiper-slide p { color: #fff; /*font-size: 22px;*/ font-size: 30px; line-height: normal; font-weight:bold; text-transform:uppercase; font-family: 'Ubuntu',"微软雅黑", Arial; } @media (min-width: 768px) { .swiper-hd { /*padding-top: 86px;*/ /*padding-top: 66px;*/ } .swiper-hd .swiper-slide p { font-size: 40px; } .swiper-hd .swiper-button-next, .swiper-hd .swiper-button-prev { display: block; } .swiper-hd .swiper-slide p { font-size: 45px; } } @media (min-width: 992px) { .swiper-hd { /*padding-top: 86px;*/ /*padding-top: 66px;*/ } .swiper-hd .swiper-slide p { font-size: 56px; } } /* */ .swiper-b2 { padding: 0 15px; } @media (min-width: 768px) { .swiper-b2 { padding: 0; } } .swiper-b2 .swiper-slide { position: relative; } .swiper-b2 .swiper-slide .swiper-vertical-div { position: absolute; /*padding: 40px 70px;*/ background: rgba(255, 255, 255, 0.5); width: auto; /*height: 350px;*/ left: 50%; top: 50%; /*margin-top: 20px;*/ transform: translate(-50%, -50%); text-align: center; padding: 20px 15px 20px; box-sizing: border-box; /*display: none;*/ opacity: 0; transition: all .6s ease-in; } .swiper-b2 .swiper-slide .swiper-vertical-div.h347 { height: auto; } .swiper-b2 .swiper-slide.swiper-slide-active .swiper-vertical-div { /*margin-top: 0;*/ opacity: 1; } .swiper-b2 .swiper-vertical-div p { /*max-height: 84px;*/ overflow: hidden; } @media (min-width: 768px) { .swiper-b2 .swiper-slide .swiper-vertical-div { width: 760px; padding: 40px 70px 40px; } .swiper-b2 .swiper-slide .swiper-vertical-div.h347 { height: 367px; } .swiper-b2 .swiper-vertical-div p { max-height: auto; } } .swiper-b2 .swiper-vertical-div img { width: 38px; height: 38px; } .swiper-b2 .swiper-vertical-div h5 { font-size: 28px; margin-top: 20px; font-family: 'granby_ef_lightregular'; } @media (min-width: 768px) { .swiper-b2 .swiper-vertical-div h5 { margin-top: 32px; } } .swiper-b2 .swiper-vertical-div p { font-size: 19px; line-height: 1.4; font-weight: 400; margin-top: 14px; font-family: 'granby_ef_lightregular'; } .swiper-b2 .swiper-vertical-div a { font-size: 15px; font-weight: 500; text-transform: uppercase; line-height: 1.6; display: block; width: 260px; height: 34px; line-height: 34px; background: #fff; text-align: center; margin: 30px auto 0; font-family: 'granby_ef_lightregular'; letter-spacing: 2px; } .swiper-b2 .swiper-container { height: 100%; } .swiper-b2 .swiper-vertical { margin-top: 30px; /*height: 300px;*/ /*height: 348px;*/ } @media (min-width: 768px) { .swiper-b2 .swiper-vertical { margin-top: 200px; /*height: 732px;*/ } } .swiper-b2 .swiper-container-vertical .swiper-pagination-bullet { width: 3px; height: 28px; background-color: rgba(255, 255, 255, .6); border-radius: 0; } .swiper-b2 .swiper-container-vertical .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fff; } .swiper-b2 .swiper-container-vertical>.swiper-pagination { right: 20px; display: none; } @media (min-width: 768px) { .swiper-b2 .swiper-container-vertical>.swiper-pagination { right: 50px; display: block; } } .swiper-slide,.swiper-wrapper { height: 100%; position: relative; transform-style: preserve-3d; width: 100% } .swiper-pagination,.swiper-wrapper { -webkit-transform: translate3d(0,0,0) } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1 } .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 { 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; -moz-transform: translate3d(0,0,0); -o-transform: translate(0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box } .swiper-slide,.swiper-wrapper { -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d } .swiper-container-multirow>.swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-fles-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 } .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 } .swiper-button-prev,.swiper-container-rtl .swiper-button-next { left: 10px; right: auto } .swiper-button-next,.swiper-container-rtl .swiper-button-prev { right: 10px; left: auto } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -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-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2 } .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 { 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 .swiper-pagination-bullet { margin: 5px 0; display: block } .swiper-container-horizontal>.swiper-pagination { bottom: 10px; left: 0; width: 100% } .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin: 0 5px } .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 { -ms-perspective: 1200px } .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 } .swiper-container-fade .swiper-slide-active { pointer-events: auto } .swiper-container-cube { overflow: visible } .swiper-container-cube .swiper-slide { pointer-events: none; visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; 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) } .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { z-index: 0 } .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 step-end infinite; -moz-animation: swiper-preloader-spin 1s step-end infinite; animation: swiper-preloader-spin 1s step-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 { 0% { -webkit-transform: rotate(0) } 8.33333333% { -webkit-transform: rotate(30deg) } 16.66666667% { -webkit-transform: rotate(60deg) } 25% { -webkit-transform: rotate(90deg) } 33.33333333% { -webkit-transform: rotate(120deg) } 41.66666667% { -webkit-transform: rotate(150deg) } 50% { -webkit-transform: rotate(180deg) } 58.33333333% { -webkit-transform: rotate(210deg) } 66.66666667% { -webkit-transform: rotate(240deg) } 75% { -webkit-transform: rotate(270deg) } 83.33333333% { -webkit-transform: rotate(300deg) } 91.66666667% { -webkit-transform: rotate(330deg) } 100% { -webkit-transform: rotate(360deg) } } @keyframes swiper-preloader-spin { 0% { transform: rotate(0) } 8.33333333% { transform: rotate(30deg) } 16.66666667% { transform: rotate(60deg) } 25% { transform: rotate(90deg) } 33.33333333% { transform: rotate(120deg) } 41.66666667% { transform: rotate(150deg) } 50% { transform: rotate(180deg) } 58.33333333% { transform: rotate(210deg) } 66.66666667% { transform: rotate(240deg) } 75% { transform: rotate(270deg) } 83.33333333% { transform: rotate(300deg) } 91.66666667% { transform: rotate(330deg) } 100% { transform: rotate(360deg) } } /*mousebtn*/ .swiper-container .mousebtn { position:absolute; bottom:20%;right:0 ;left:0; display:inline-block; width: 32px;height:62px;margin:0 auto; text-align:center;} .swiper-container .mouse { position: relative; width: 32px; height: 62px; margin: 0 auto 20px; background: none; /*border: 2px solid white;*/background:url(../images/dropdown.png) no-repeat 50% 50% ; border-radius:32px; z-index: 1; } .swiper-container .mouse:after { display: block; content: ""; position: absolute; top: 0px; left: 50%; /* width: calc(1px * 2); height: calc(4px * 2);*/width:6px;height:18px; background: none; /* border: 2px solid white;*/background:url(../images/dropdown2.png) no-repeat 50% 50% ; border-radius: 100%; -webkit-animation-name: scrollWheel; animation-name: scrollWheel; -webkit-animation-duration: 1.4s; animation-duration: 1.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; will-change: transform; } @-webkit-keyframes scrollWheel { from { -webkit-transform: translate(-50%, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate(-50%, 0); transform: translate3d(-50%, 0, 0); opacity: 1; } to { -webkit-transform: translate(-50%, 20px); -webkit-transform: translate3d(-50%, 20px, 0); transform: translate(-50%, 20px); transform: translate3d(-50%, 20px, 0); opacity: 0; } @media (min-width: 768px) { from { -webkit-transform: translate(-50%, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate(-50%, 0); transform: translate3d(-50%, 0, 0); opacity: 1; } to { -webkit-transform: translate(-50%, 40px); -webkit-transform: translate3d(-50%, 40px, 0); transform: translate(-50%, 40px); transform: translate3d(-50%, 40px, 0); opacity: 0; } } } @keyframes scrollWheel { from { -webkit-transform: translate(-50%, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate(-50%, 0); transform: translate3d(-50%, 0, 0); opacity: 1; } to { -webkit-transform: translate(-50%, 20px); -webkit-transform: translate3d(-50%, 20px, 0); transform: translate(-50%, 20px); transform: translate3d(-50%, 20px, 0); opacity: 0; } /* @media (min-width: 768px) { from { -webkit-transform: translate(-50%, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate(-50%, 0); transform: translate3d(-50%, 0, 0); opacity: 1; } to { -webkit-transform: translate(-50%, 40px); -webkit-transform: translate3d(-50%, 40px, 0); transform: translate(-50%, 40px); transform: translate3d(-50%, 40px, 0); opacity: 0; } }*/ } @media (min-width: 768px){ /*.swiper-container .mouse { width: 32px; height: 62px; margin: 0 auto 0px; background: none; border: 2px solid white; border-radius: 32px; }*/ }