@charset "UTF-8";
.component-container--index-about-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-image: url(../../static/components/index-about-olympic/bg.png); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.component-container--index-about-olympic .mod-title.en { font-size: 72px; font-family: "BebasNeueBold"; color: #007a4d; line-height: 1; }
.component-container--index-about-olympic .mod-title.cn { font-size: 48px; font-family: "PangMenZhengDao"; color: #333333; line-height: 1; margin-top: 0.2em; margin-bottom: 0.64em; }
.component-container--index-about-olympic .wrapper { max-width: 1200px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.component-container--index-about-olympic .gap { width: 10%; -ms-flex-negative: 0; flex-shrink: 0; }
.component-container--index-about-olympic .left-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; 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: start; -ms-flex-align: start; align-items: flex-start; overflow: hidden; }
.component-container--index-about-olympic .details { color: #666666; font-size: 18px; line-height: 1.8; text-align: justify; width: 100%; }
.component-container--index-about-olympic .right-wrapper { width: 51.56%; -ms-flex-negative: 0; flex-shrink: 0; }
.component-container--index-about-olympic .media-wrapper { position: relative; min-height: 100px; }
.component-container--index-about-olympic .cover { display: block; width: 100%; height: auto; }
.component-container--index-about-olympic .btn-play { font-size: 30px; position: absolute; left: 50%; top: 50%; z-index: 4; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255,255,255,0.6); width: 3em; height: 3em; padding: 0.4em; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--index-about-olympic .btn-play:hover { border-color: rgba(2,152,97,0.6); }
.component-container--index-about-olympic .btn-play .icon { font-size: inherit; background: rgba(2,152,97,0.85); display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; color: #FFFFFF; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -webkit-transition: all 0.4s; transition: all 0.4s; line-height: 1; }
.component-container--index-about-olympic .btn-play:hover .icon { background: #007a4d; }
.component-container--index-about-olympic .more { display: block; font-size: 18px; padding: 1.55em 3.22em; color: #FFFFFF; border: 1px solid #007a4d; margin-top: 1.6em; -webkit-transition: all 0.4s; transition: all 0.4s; line-height: 1; background: #007a4d; }
.component-container--index-about-olympic .more:hover { opacity: 0.8; text-decoration: none; }
.component-container--index-about-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--index-about-olympic .video-modal-container.transition { -webkit-transition: all 0.2s; transition: all 0.2s; }
.component-container--index-about-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--index-about-olympic .video { width: 100%; height: 100%; }
.component-container--index-about-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--index-about-olympic .btn-close:hover { opacity: 0.8; }

@media screen and (max-width: 1200px) {
  .component-container--index-about-olympic { padding: 60px 50px; }
  .component-container--index-about-olympic .mod-title.en { font-size: 58px; }
  .component-container--index-about-olympic .mod-title.cn { font-size: 38px; }
  .component-container--index-about-olympic .more { padding: 1em 2.4em; }
  .component-container--index-about-olympic .details { font-size: 16px; }
  .component-container--index-about-olympic .btn-play { font-size: 24px; }
  .component-container--index-about-olympic .video-modal-container { font-size: 18px; }
}

@media screen and (max-width: 992px) {
  .component-container--index-about-olympic { padding: 40px 50px; }
  .component-container--index-about-olympic .mod-title.en { font-size: 50px; }
  .component-container--index-about-olympic .mod-title.cn { font-size: 32px; }
  .component-container--index-about-olympic .more { font-size: 14px; }
  .component-container--index-about-olympic .details { font-size: 14px; }
  .component-container--index-about-olympic .btn-play { font-size: 22px; }
  .component-container--index-about-olympic .video-modal-container { font-size: 16px; }
}

@media screen and (max-width: 768px) {
  .component-container--index-about-olympic { padding: 40px 20px; }
  .component-container--index-about-olympic .wrapper { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  .component-container--index-about-olympic .gap { height: 40px; }
  .component-container--index-about-olympic .left-wrapper { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 100%; }
  .component-container--index-about-olympic .right-wrapper { width: 100%; }
  .component-container--index-about-olympic .video-modal-container { font-size: 14px; }
  .component-container--index-about-olympic .btn-play { font-size: 20px; }
}