@charset "UTF-8";
.component-container--surrounding-environment-olympic { font-size: 20px; padding: 100px 0; background-image: url(../../static/components/surrounding-environment-olympic/bg.png); background-position: right bottom; background-repeat: no-repeat; background-size: 32% auto; }
.component-container--surrounding-environment-olympic .titles-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 4em; }
.component-container--surrounding-environment-olympic .titles-wrap { width: 81.25%; padding-right: 20px; -ms-flex-negative: 0; flex-shrink: 0; }
.component-container--surrounding-environment-olympic .titles-content { width: 100%; max-width: 1200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.component-container--surrounding-environment-olympic .title.en { font-size: 3.6em; font-family: "BebasNeueBold"; color: #007a4d; line-height: 1; }
.component-container--surrounding-environment-olympic .title.cn { font-size: 2.4em; font-family: "PangMenZhengDao"; color: #333333; line-height: 1; margin-top: 0.2em; }
.component-container--surrounding-environment-olympic .slides-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.component-container--surrounding-environment-olympic .slides-wrap { width: 81.25%; -ms-flex-negative: 0; flex-shrink: 0; position: relative; }
.component-container--surrounding-environment-olympic .swiper-container { height: auto; }
.component-container--surrounding-environment-olympic .swiper-wrapper { height: auto; }
.component-container--surrounding-environment-olympic .swiper-slide { width: auto; height: auto; 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; }
.component-container--surrounding-environment-olympic .swiper-slide .img { display: block; width: auto; height: auto; }
.component-container--surrounding-environment-olympic .indicator-wrapper { position: absolute; z-index: 4; left: 0; top: 50%; width: 100%; height: 0; max-width: 1200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.component-container--surrounding-environment-olympic .indicator-wrap { width: 3.5em; height: 3.5em; 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; border-radius: 50%; margin-top: -1.75em; cursor: pointer; position: relative; }
.component-container--surrounding-environment-olympic .indicator-wrap:active { opacity: 0.92; }
.component-container--surrounding-environment-olympic .indicator { display: block; width: 100%; height: 100%; }
.component-container--surrounding-environment-olympic .indicator-wrap .arrow { position: absolute; width: 50%; height: 100%; top: 0; z-index: 4; }
.component-container--surrounding-environment-olympic .indicator-wrap .arrow-prev { left: 0; }
.component-container--surrounding-environment-olympic .indicator-wrap .arrow-next { right: 0; }
.component-container--surrounding-environment-olympic .pagination-wrapper { padding-right: 20px; margin-top: 100px; }
.component-container--surrounding-environment-olympic .pagination-wrap { width: 100%; max-width: 1200px; height: 2px; background: #ebebeb; position: relative; }
.component-container--surrounding-environment-olympic .swiper-pagination-progressbar-fill { background: #FF9900; }

@media screen and (max-width: 1200px) {
  .component-container--surrounding-environment-olympic { font-size: 18px; padding: 80px 0; }
  .component-container--surrounding-environment-olympic .title.en { font-size: 2.9em; }
  .component-container--surrounding-environment-olympic .title.cn { font-size: 1.9em; }
  .component-container--surrounding-environment-olympic .pagination-wrapper { margin-top: 80px; }
}

@media screen and (max-width: 992px) {
  .component-container--surrounding-environment-olympic { font-size: 16px; padding: 60px 0; }
  .component-container--surrounding-environment-olympic .title.en { font-size: 2.5em; }
  .component-container--surrounding-environment-olympic .title.cn { font-size: 1.5em; }
  .component-container--surrounding-environment-olympic .pagination-wrapper { margin-top: 60px; }
}

@media screen and (max-width: 768px) {
  .component-container--surrounding-environment-olympic { padding: 40px 0; }
  .component-container--surrounding-environment-olympic .titles-wrap { width: 100%; padding-left: 20px; }
  .component-container--surrounding-environment-olympic .slides-wrap { width: 100%; padding-left: 20px; }
  .component-container--surrounding-environment-olympic .swiper-slide .img { max-width: 50vw; }
  .component-container--surrounding-environment-olympic .pagination-wrapper { margin-top: 40px; }
}