.hidden { display: none } .swiper-container-desktop { display: flex; margin: 0 auto; position: relative; overflow: hidden; height: auto; width: 100%; z-index: 1; background-size: cover; background-position: center center; background-repeat: no-repeat } .swiper-container-mobile { display: none } .swiper-container-no-flexbox .swiper-slide { float: left } .swiper-container-vertical>.swiper-wrapper { flex-direction: column } .swiper-wrapper { position: relative; z-index: 1; display: flex; align-self: stretch; align-items: stretch; width: 100%; height: auto; min-height: inherit; transition-property: transform; box-sizing: content-box } .swiper-container { flex-shrink: 0 } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0, 0, 0) } .swiper-container-multirow>.swiper-wrapper { flex-wrap: wrap } .swiper-container-free-mode>.swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-wp8-horizontal { touch-action: pan-y } .swiper-wp8-vertical { touch-action: pan-x } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out } .swiper-container-fade .swiper-slide { pointer-events: none } .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-slide>.parallax_cnt, .swiper-slide>.vide__body { height: 100% } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; transform: translateY(-50%); display: none; font-size: 26px; line-height: 1; color: #fff; text-align: center; cursor: pointer; transition: .2s ease-in; will-change: transform; z-index: 10 } .swiper-button-next:hover, .swiper-button-prev:hover { color: #cef1ea } @media (min-width:992px) { .swiper-button-next, .swiper-button-prev { display: block } } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-button-prev { left: 30px } .swiper-button-prev:before { font-family: FontAwesome; content: "\f175" } .swiper-button-next { right: 30px } .swiper-button-next:before { font-family: FontAwesome; content: "\f176" } .swiper-slider.swiper-container-rtl .swiper-button-prev::before { content: "\f061" } .swiper-slider.swiper-container-rtl .swiper-button-next::before { content: "\f060" } .swiper-pagination { position: absolute; display: block; text-align: center; transition: .6s; transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-pagination .swiper-pagination-bullet { position: relative; width: 15px; height: 15px; display: inline-block; border-radius: 100%; border: 2px solid #b7b7b7; background: 0 0; overflow: hidden; transition: .2s } .swiper-pagination .swiper-pagination-bullet:before { position: absolute; content: ''; width: 150%; height: 150%; top: -3px; left: -3px; background: #cef1ea; transform: translateX(-200%); transition: all .3s } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-pagination .swiper-pagination-bullet:hover { border-color: #cef1ea } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before, .swiper-pagination .swiper-pagination-bullet:hover:before { transform: translateX(0) } .swiper-pagination.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-black .swiper-pagination-bullet { background: rgba(0, 0, 0, .6) } .swiper-pagination-black .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #000 } .swiper-container-vertical>.swiper-pagination { right: 10px; top: 50%; transform: translate3d(0, -50%, 0) } .swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet { margin: 5px 0; display: block } .swiper-container-horizontal>.swiper-pagination { bottom: 20px; left: 0; width: 100% } .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin: 0 5px } .swiper-slide { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; height: 100%; white-space: nowrap } .swiper-slide-caption { width: 100%; white-space: normal; padding-left: 35% } .swiper-slide-caption h1+* { margin-top: 20px } .swiper-slide-caption .lead { display: none } .swiper-slide .heading-decorate .divider:after { width: 60px } @media (min-width:992px) { .swiper-slide-caption .lead { display: block } .swiper-slide-caption *+.lead { margin-top: 25px } .swiper-slide .heading-decorate .divider:after { width: 90px } } .swiper-slide .slider-logo { display: inline-block } .swiper-slide .slider-logo svg>* { stroke: #cef1ea } .swiper-slide .slider-logo svg { width: 70px; height: 70px } @media (min-width:576px) { .swiper-slide .slider-logo svg { width: 125px; height: 125px } } .swiper-slide .slider-logo+* { margin-top: 10px } @media (min-width:992px) { .swiper-slide .slider-logo+* { margin-top: 20px } } .swiper-counter { display: none; position: absolute; top: 50%; right: 22px; font-size: 18px; line-height: 24px; padding: 12px 2px; text-align: center; z-index: 2; width: 53px; height: 53px; border-radius: 50%; border: 1px solid rgba(147, 147, 147, .7); transform: translateY(-50%); color: rgba(147, 147, 147, .7); letter-spacing: 0 } @media (min-width:1200px) { .swiper-counter { display: block } .swiper-slider-1 .swiper-button-next, .swiper-slider-1 .swiper-button-prev { display: block } .swiper-slider-1 .swiper-pagination-bullet { display: none } .slider-pagination-vertical.swiper-slider-1 .swiper-pagination-bullet { display: block } .swiper-slider-2 .swiper-pagination { display: none } .swiper-slider-2 .swiper-button-next, .swiper-slider-2 .swiper-button-prev { display: block } .swiper-block-info { bottom: 40px } .swiper-white-filter:before { display: none } } .swiper-slider-1 { min-height: 360px } @media (min-width:768px) { .swiper-slider-1 { min-height: 40.10417vw } .slider-pagination-vertical.swiper-slider-1 .swiper-pagination { top: 50% } .swiper-slider-2 { min-height: 40.10417vw } } .swiper-slider-1 .swiper-button-next, .swiper-slider-1 .swiper-button-prev { right: 40px; left: auto; display: none } .swiper-slider-1 .swiper-button-next:before, .swiper-slider-1 .swiper-button-prev:before { display: none } .swiper-slider-1 .swiper-button-next svg>*, .swiper-slider-1 .swiper-button-prev svg>* { stroke: rgba(147, 147, 147, 0.7); transition: all .3s } .swiper-slider-1 .swiper-button-next:hover svg>*, .swiper-slider-1 .swiper-button-prev:hover svg>* { stroke: #151515 } .swiper-slider-1 .swiper-button-prev { top: calc(50% + 50px) } .swiper-slider-1 .swiper-button-next { top: calc(50% - 50px) } .slider-pagination-vertical.swiper-slider-1 .swiper-pagination { right: 30px; bottom: inherit; left: inherit; top: 80%; width: auto; transform: translateY(-50%) } .slider-pagination-vertical.swiper-slider-1 .swiper-pagination .swiper-pagination-bullet { display: block; margin: 5px 0 } @media (min-width:1800px) { .slider-pagination-vertical.swiper-slider-1 .swiper-pagination { right: 40px } } .slider-scale-effect .swiper-slide:before { position: absolute; content: ''; top: 0; bottom: 0; left: 0; right: 0 } .slider-scale-effect .swiper-slide.slide-bg-1:before { background: url(https://www.pixtrans.cn/images/website-slider/Agricultural-Belts-Ch.webp); background-size: cover } .slider-scale-effect .swiper-slide.slide-bg-2:before { background: url(https://www.pixtrans.cn/images/website-slider/Industrial-Belts-Ch.webp); background-size: cover } .slider-scale-effect .swiper-slide.slide-bg-3:before { background: url(https://www.pixtrans.cn/images/website-slider/Automotive-Belts-Ch.webp); background-size: cover } .slider-scale-effect .swiper-slide.slide-bg-4:before { background: url(https://www.pixtrans.cn/images/website-slider/Lawn-and-garden-Belts-Ch.webp); background-size: cover } @media (max-width:767px) { .swiper-container-desktop { display: none } .swiper-container-mobile { display: flex; margin: 0 auto; position: relative; overflow: hidden; height: 360px; width: 100%; z-index: 1; background-size: cover; background-position: center center; background-repeat: no-repeat } .swiper-slide { width: 100%; height: 100%; background-size: cover; background-position: center } .swiper-slide { transition-duration: 3s !important; opacity: 1 } .swiper-slide-next, .swiper-slide-prev { opacity: .5 } .swiper-pagination { bottom: 10px; text-align: center } .slide-bg { width: 100%; height: 100%; background-size: cover; background-position: center; animation: zoomEffect 30s ease-in-out infinite } @keyframes zoomEffect { 0% { transform: scale(1) } 50% { transform: scale(1.1) } 100% { transform: scale(1) } } } .slider-scale-effect .slide-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: 1.5s ease-out; transform: scale(1.08); background-size: cover } .desktop .slider-scale-effect .swiper-slide:first-child .slide-bg { transform-origin: 0 0 } .desktop .slider-scale-effect .swiper-slide:nth-child(2) .slide-bg { transform: scale(1); transform-origin: 100% 100% } .desktop .slider-scale-effect .swiper-slide:nth-child(3) .slide-bg { transform-origin: 50% 50% } .slider-scale-effect .swiper-slide.swiper-slide-active .slide-bg { transform: scale(1) } .slider-scale-effect .swiper-slide:nth-child(2).swiper-slide-active .slide-bg { transform: scale(1.08) } .swiper-slider-2 { min-height: 360px } .swiper-slider-2 .swiper-button-next, .swiper-slider-2 .swiper-button-prev { display: none; width: 40px; height: 120px; padding: 40px 0; background: rgba(0, 0, 0, .15); color: #fff } .swiper-slider-2 .swiper-button-next:before, .swiper-slider-2 .swiper-button-prev:before { font-family: FontAwesome; font-size: 40px } .swiper-slider-2 .swiper-button-next:hover, .swiper-slider-2 .swiper-button-prev:hover { background: #cef1ea } .swiper-slider-2 .swiper-button-prev { left: 0 } .swiper-slider-2 .swiper-button-prev:before { content: '\f104' } .swiper-slider-2 .swiper-button-next { right: 0 } .swiper-slider-2 .swiper-button-next:before { content: '\f105' } .swiper-arrow-white.swiper-slider-2 .swiper-button-next, .swiper-arrow-white.swiper-slider-2 .swiper-button-prev { background: rgba(255, 255, 255, .2) } .swiper-arrow-white.swiper-slider-2 .swiper-button-next:hover, .swiper-arrow-white.swiper-slider-2 .swiper-button-prev:hover { background: #cef1ea } .swiper-white-content .swiper-slide-caption h1 { color: #fff } .swiper-white-content .swiper-slide-caption p { color: #c5c5c5 } .swiper-white-content .swiper-slide-caption .button-default-outline { color: #fff } .swiper-slider-with-info .swiper-slide-caption { padding-bottom: 140px } .swiper-block-info { position: absolute; display: flex; flex-direction: column; text-align: center; width: 100%; bottom: 60px; left: 50%; font-size: 14px; transform: translateX(-50%); z-index: 10 } .swiper-block-info .swiper-block-info-item a, .swiper-block-info .swiper-block-info-item span { color: #fff; padding: 0 2px } .swiper-block-info .swiper-block-info-item a:hover { color: #cef1ea } @media (min-width:992px) { .swiper-block-info { flex-direction: row; justify-content: space-around; max-width: 600px } } .swiper-caption-inner { overflow: hidden } .swiper-white-filter:before { position: absolute; content: ''; top: 0; bottom: 0; left: 0; right: 0 } .swiper-filter-overlay { position: relative } .swiper-filter-overlay>* { position: relative } .swiper-filter-overlay:before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .45) }