body { opacity:0; } body.front { opacity:1; } body.make { opacity:1; } .banner_text_effect .swiper-button-next, .banner_text_effect .swiper-button-prev { color:#fff; } .banner_text_effect .swiper-button-next:after, .banner_text_effect .swiper-button-prev:after { color:#fff; font-size:20px; } .banner_text_effect.no-prev-next .swiper-button-prev { /* display:none !important;*/ } .banner_text_effect.no-prev-next .swiper-button-next { /* display:none !important;*/ } .banner_text_effect img { filter:brightness(1); } .banner_text_effect span { opacity:0; display:inline-block; min-width:0.5em; letter-spacing:0.1em; text-transform:uppercase; } .banner_text_effect .swiper-slide-active span { animation:fadeIn 1.5s 0.3s both; } .banner_text_effect.fadeInUp .swiper-slide-active span { animation:fadeInUp 1.5s 0.3s both; } .banner_text_effect.fadeInDown .swiper-slide-active span { animation:fadeInDown 1.5s 0.3s both; } .banner_text_effect.fadeInLeft .swiper-slide-active span { animation:fadeInLeft 1.5s 0.3s both; } .banner_text_effect.fadeInRight .swiper-slide-active span { animation:fadeInRight 1.5s 0.3s both; } .auto-category { background-color: #fff; } .auto-category .auto-category-container { width: 100%; display: flex; margin-left: auto; margin-right: auto; } .auto-category .auto-category-container .category-item { flex:1; max-width: 200px; } .auto-category .auto-category-container .category-item a { line-height: 65px; font-size:16px; color:#333; text-align: center; border-left:1px solid #ddd; display: block; position: relative; overflow: hidden; text-indent:-2222em; } .auto-category .auto-category-container .category-item:last-child a { border-right:1px solid #ddd; } .auto-category .auto-category-container .category-item a:before{ content: attr(data-text); display: block; position: absolute; top:0; color:#333; transition:1s; width:100%; text-indent:0; background: var(--geb); } .auto-category .auto-category-container .category-item a:after { content:attr(data-text); display:block; position:absolute; top:100%; color:red; transition:1s; width:100%; background-color:var(--gege); color:#fff; text-indent:0; } .auto-category .auto-category-container .category-item a:before { transition:1s; } .auto-category .auto-category-container .category-item a:after { transition:1s; } .auto-category .auto-category-container .category-item a:hover:before { top:-100%; } .auto-category .auto-category-container .category-item a:hover:after { top:0; transition:1s; } .auto-category .auto-category-container .category-item a.category-current:before { top:-100%; transition:1s 0.1s; } .auto-category .auto-category-container .category-item a.category-current:after { top:0; transition:1s 0.1s; } @media only screen and (max-width: 768px) { .auto-category .auto-category-container{ padding: 0 !important; width: 100% !important; flex-wrap: wrap !important; } .auto-category .auto-category-container .category-item{ flex: 0 0 50% !important; border-left: rgba(255, 255, 255, 0.1) 1px solid !important; border-bottom: rgba(255, 255, 255, 0.1) 1px solid !important; } .auto-category{ padding: 0 !important; width: 100% !important; flex-wrap: wrap !important; } .auto-category .auto-category-container .category-item a { line-height: 3; font-size: 16px; color: #333; text-align: center; border-left: 1px solid #ddd; display: block; position: relative; overflow: hidden; text-indent: -2222em; } } .zhuan { max-width: 1600px; width: 96%; margin: auto; position: relative; } .swiper-next, .swiper-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color,var(--swiper-theme-color)); }