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; } .auto-category .title { display:none; } .auto-category-container-mo { display:none; } @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; } .auto-category-container { display:none !important; } .auto-category .title { display:flex; justify-content:space-between; padding:20px 20px; background-color:var(--gege); color:#fff; align-items:center; } .auto-category .title svg path { fill:#fff; } .auto-category-container-mo { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#fff; padding:20vw 5vw; z-index:1999; display:block; transform:translateX(100%); transition:1s; } .auto-category-container-mo.wd-show { transform:translateX(0%); } .auto-category-container-mo svg { width:auto; height:30px; position:absolute; top:20px; right:20px; animation:fadeOutRight 1s 1s both; } .auto-category-container-mo.wd-show svg { animation:fadeInRight 1s 1.4s both; } .auto-category-container-mo svg path { fill:var(--gege); } .auto-category-container-mo a { display:block; line-height:4; color:#333; font-size:18px; text-align:center; animation:fadeOutDown 1s 1s both; opacity:0; } .auto-category-container-mo.wd-show .category-item a { animation:fadeInUp 1s both; } .auto-category-container-mo.wd-show .category-item:nth-child(1) a { animation-delay:0.8s; } .auto-category-container-mo.wd-show .category-item:nth-child(2) a { animation-delay:0.9s; } .auto-category-container-mo.wd-show .category-item:nth-child(3) a { animation-delay:1s; } .auto-category-container-mo.wd-show .category-item:nth-child(4) a { animation-delay:1.1s; } .auto-category-container-mo.wd-show .category-item:nth-child(5) a { animation-delay:1.2s; } .auto-category-container-mo.wd-show .category-item:nth-child(6) a { animation-delay:1.3s; } .auto-category-container-mo.wd-show .category-item:nth-child(7) a { animation-delay:1.4s; } .auto-category-container-mo.wd-show .category-item:nth-child(8) a { animation-delay:1.5s; } }