@charset "UTF-8";
.component-container--video-center-olympic { padding: 100px 50px; 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; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #F3F9FA; }
.component-container--video-center-olympic .wrapper { max-width: 1200px; width: 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; }
.component-container--video-center-olympic .mod-title.en { font-size: 72px; font-family: "BebasNeueBold"; color: #007a4d; line-height: 1; text-align: center; }
.component-container--video-center-olympic .mod-title.cn { font-size: 48px; font-family: "PangMenZhengDao"; color: #333333; line-height: 1; margin-top: 0.2em; margin-bottom: 1.4em; text-align: center; }
.component-container--video-center-olympic .swiper-container-outer { width: 100%; overflow: hidden; }
.component-container--video-center-olympic .swiper-container-inner { margin: 0 -14px; }
.component-container--video-center-olympic .swiper-container { width: 100%; }
.component-container--video-center-olympic .swiper-slide { height: auto; }
.component-container--video-center-olympic .slide-content-outer { overflow: hidden; }
.component-container--video-center-olympic .slide-content-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.component-container--video-center-olympic .swiper-slide-item { width: 33.33333333%; padding: 14px; }
.component-container--video-center-olympic .item-inner { background: #FFFFFF; cursor: pointer; color: #333333; -webkit-transition: all 0.4s; transition: all 0.4s; position: relative; }
.component-container--video-center-olympic .item-inner::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 4; background: #FFFFFF; opacity: 0; }
.component-container--video-center-olympic .item-inner:hover { background: #007a4d; color: #FFFFFF; }
.component-container--video-center-olympic .inner { padding-bottom: 60%; overflow: hidden; background: #F8F8F8; position: relative; }
.component-container--video-center-olympic .cover { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--video-center-olympic .item-inner:hover .cover { -webkit-transform: scale(1.08); transform: scale(1.08); }
.component-container--video-center-olympic .name { font-size: 20px; padding: 1.5em 1em; text-align: center; line-height: 1.5; height: 4.5em; white-space: nowrap;  text-overflow: ellipsis; overflow: hidden; word-break: break-all; }
.component-container--video-center-olympic--swiper-pagination { font-size: 20px; 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; margin: 1.9em auto; }
.component-container--video-center-olympic .component-container--video-center-olympic--swiper-pagination .swiper-pagination-bullet { font-size: inherit; width: 0.6em; height: 0.6em; border: solid #7e989f; opacity: 0.45; background: transparent; margin: 0 0.4em; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--video-center-olympic .component-container--video-center-olympic--swiper-pagination .swiper-pagination-bullet:hover { border-color: #007a4d; opacity: 1; }
.component-container--video-center-olympic .component-container--video-center-olympic--swiper-pagination .swiper-pagination-bullet-active { background: #007a4d; border-color: #007a4d; opacity: 1; }
.component-container--video-center-olympic .video-modal-container { position: fixed; z-index: 400; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; background: #000000; opacity: 0; -webkit-transform: scale(0); transform: scale(0); font-size: 20px; padding: 2em 0; }
.component-container--video-center-olympic .video-modal-container.transition { -webkit-transition: all 0.2s; transition: all 0.2s; }
.component-container--video-center-olympic .video-modal-container.show { width: 100%; height: 100%; opacity: 1; background: url(/static/components/video-center-olympic/video-bg.jpg) center center no-repeat; background-size: cover; -webkit-transform: scale(1); transform: scale(1); }
.component-container--video-center-olympic .video { width: 100%; height: 100%; }
.component-container--video-center-olympic .btn-close { font-size: inherit; width: 2em; height: 2em; color: #FFFFFF; position: fixed; z-index: 800; right: 0; top: 0; border-radius: 0 0 0 70%; 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; line-height: 1; background: #007a4d; padding-left: 0.2em; padding-bottom: 0.2em; cursor: pointer; }
.component-container--video-center-olympic .btn-close:hover { opacity: 0.8; }


@media screen and (max-width: 1200px) {
  .component-container--video-center-olympic { padding: 60px 50px; }
  .component-container--video-center-olympic .mod-title.en { font-size: 58px; }
  .component-container--video-center-olympic .mod-title.cn { font-size: 38px; }
  .component-container--video-center-olympic .name { font-size: 18px; }
  .component-container--video-center-olympic--swiper-pagination { font-size: 18px; }
  .component-container--video-center-olympic .swiper-container-inner { margin: 0 -10px; }
  .component-container--video-center-olympic .swiper-slide-item { padding: 10px; }
}

@media screen and (max-width: 992px) {
  .component-container--video-center-olympic { padding: 40px 50px; }
  .component-container--video-center-olympic .mod-title.en { font-size: 50px; }
  .component-container--video-center-olympic .mod-title.cn { font-size: 32px; }
  .component-container--video-center-olympic .name { font-size: 16px; }
  .component-container--video-center-olympic--swiper-pagination { font-size: 16px; }
  .component-container--video-center-olympic .swiper-container-inner { margin: 0 -6px; }
  .component-container--video-center-olympic .swiper-slide-item { padding: 6px; }
}

@media screen and (max-width: 768px) {
  .component-container--video-center-olympic { padding: 40px 20px; }
  .component-container--video-center-olympic .swiper-slide-item { padding: 10px 6px; }
  .component-container--video-center-olympic .name { font-size: 16px; }
  .component-container--video-center-olympic--swiper-pagination { font-size: 14px; display: none; }
  .component-container--video-center-olympic .swiper-wrapper { height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transform: translate(0,0) !important; transform: translate(0,0) !important; }
  .component-container--video-center-olympic .slide-content-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .component-container--video-center-olympic .swiper-slide-item { width: 100%; }
}