@charset "UTF-8";
.component-container--swiper-index-banner-olympic { height: 100vh; background: #F8F8F8; position: relative; }
.component-container--swiper-index-banner-olympic .swiper-container,
.component-container--swiper-index-banner-olympic .swiper-wrapper,
.component-container--swiper-index-banner-olympic .swiper-slide { height: 100%; }
.component-container--swiper-index-banner-olympic .slide-content { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #FFFFFF; background-position: center center; background-repeat: no-repeat; background-size: cover; padding-bottom: 15%; position: relative; }
.component-container--swiper-index-banner-olympic .title { max-width: 100%; -webkit-transition: all 0.8s 0.4s; transition: all 0.8s 0.4s; -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
.component-container--swiper-index-banner-olympic .swiper-slide-active .title { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
.component-container--swiper-index-banner-olympic .indicator-container { position: absolute; z-index: 20; width: 100%; left: 0; bottom: 8.8%; color: #FFFFFF; }
.component-container--swiper-index-banner-olympic .number-wrapper { font-family: "BebasNeueBold"; font-size: 58px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.component-container--swiper-index-banner-olympic .progress-wrapper { width: 300px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,0.2); margin: 40px auto 0; }
.component-container--swiper-index-banner-olympic .bar { background: #FFFFFF; height: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--swiper-index-banner-olympic .bottom-img { display: block; position: absolute; width: 100%; height: auto; bottom: 0; -webkit-transition: all 0.8s 0.8s; transition: all 0.8s 0.8s; opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center bottom; transform-origin: center bottom; }
.component-container--swiper-index-banner-olympic .bottom-left { left: 0; z-index: 3; }
.component-container--swiper-index-banner-olympic .bottom-right { right: 0; z-index: 2; }
.component-container--swiper-index-banner-olympic .swiper-slide-active .bottom-left { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); }
.component-container--swiper-index-banner-olympic .swiper-slide-active .bottom-right { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); }

.component-container--swiper-index-banner-olympic .swiper-button-next,
.component-container--swiper-index-banner-olympic .swiper-button-prev { width: 4em; height: 4em; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; }

.component-container--swiper-index-banner-olympic .swiper-button-next i.iconfont,
.component-container--swiper-index-banner-olympic .swiper-button-prev i.iconfont { font-size: 2em; }

.component-container--swiper-index-banner-olympic .swiper-button-next:after, 
.component-container--swiper-index-banner-olympic  .swiper-button-prev:after { display: none; }

.component-container--swiper-index-banner-olympic .swiper-button-prev, 
.component-container--swiper-index-banner-olympic .swiper-container-rtl .swiper-button-next { left: 10%; }
.component-container--swiper-index-banner-olympic .swiper-button-next, 
.component-container--swiper-index-banner-olympic .swiper-container-rtl .swiper-button-prev { right: 10%; }


@media screen and (max-width: 768px) {
  .component-container--swiper-index-banner-olympic .title { max-width: 80%; }
  .component-container--swiper-index-banner-olympic .swiper-button-prev, 
  .component-container--swiper-index-banner-olympic .swiper-container-rtl .swiper-button-next,.component-container--swiper-index-banner-olympic .swiper-button-next,.component-container--swiper-index-banner-olympic .swiper-container-rtl .swiper-button-prev { display: none; }
}