@charset "UTF-8";
.component-container--olympic-stadium { 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/olympic-stadium/bg.png); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.component-container--olympic-stadium .mod-title.en { font-size: 72px; font-family: "BebasNeueBold"; color: #007a4d; line-height: 1; }
.component-container--olympic-stadium .mod-title.cn { font-size: 48px;/* font-family: "PangMenZhengDao";*/ color: #FFFFFF; line-height: 1; margin-top: 0.2em; margin-bottom: 1.4em; }
.component-container--olympic-stadium .wrapper { max-width: 1200px; width: 100%; height: 402px; overflow: hidden; }
.component-container--olympic-stadium .grid-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100%; margin: 0 -11px; }
.component-container--olympic-stadium .item { padding: 0 11px; width: 20%; }
.component-container--olympic-stadium .link { color: #FFFFFF; /*font-family: "PangMenZhengDao";*/ border: 1px solid rgba(255,255,255,0.6); border-radius: 2px; 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; font-size: 20px; line-height: 1; height: 100%; }
.component-container--olympic-stadium .link:hover { text-decoration: none; background: #007a4d; }
.component-container--olympic-stadium .icon-wrap { height: 4.2em; 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--olympic-stadium .icon { display: block; max-width: 100%; max-height: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0; -webkit-transform: scale(0); transform: scale(0); width: 0; height: 0; }
.component-container--olympic-stadium .icon-default { opacity: 1; -webkit-transform: scale(1); transform: scale(1); width: auto; height: auto; }
.component-container--olympic-stadium .icon-active { opacity: 0; -webkit-transform: scale(0); transform: scale(0); width: 0; height: 0; }
.component-container--olympic-stadium .link:hover .icon-default { opacity: 0; -webkit-transform: scale(0); transform: scale(0); width: 0; height: 0; }
.component-container--olympic-stadium .link:hover .icon-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); width: auto; height: auto; }
.component-container--olympic-stadium .name { font-size: 1.1em; margin-top: 1.09em; }
.component-container--olympic-stadium .arrow { 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; font-size: 1.5em; width: 0; height: 0; border-radius: 50%; background: #FFFFFF; color: #007a4d; opacity: 0; -webkit-transform: scale(0); transform: scale(0); overflow: hidden; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--olympic-stadium .link:hover .arrow { width: 2em; height: 2em; -webkit-transform: scale(1); transform: scale(1); opacity: 1; margin-top: 1.9em; }
.component-container--olympic-stadium .more { display: block; font-size: 18px; padding: 1.55em 3.22em; color: #FFFFFF; border: 1px solid #CFCFCF; margin-top: 3.33em; -webkit-transition: all 0.4s; transition: all 0.4s; line-height: 1; }
.component-container--olympic-stadium .more:hover { border-color: #007a4d; text-decoration: none; }


/**
* 2022-03-04
* 模块添加swiper
* levi
*/

.component-container--olympic-stadium .grid-wrapper { padding: 0 10px; margin: 0; }
.component-container--olympic-stadium .swiper-container { width: 100%; }
.component-container--olympic-stadium .swiper-button-next, 
.component-container--olympic-stadium .swiper-button-prev { color: #fff; }
.component-container--olympic-stadium .item { padding: 0; }

.component-container--olympic-stadium .swiper-button-next:after,
.component-container--olympic-stadium .swiper-button-prev:after { font-size: 30px; }


@media screen and (max-width: 1200px) {
  .component-container--olympic-stadium { padding: 60px 50px; }
  .component-container--olympic-stadium .mod-title.en { font-size: 58px; }
  .component-container--olympic-stadium .mod-title.cn { font-size: 38px; }
  .component-container--olympic-stadium .wrapper { height: 380px; }
  .component-container--olympic-stadium .grid-wrapper { margin: 0 -8px; }
  .component-container--olympic-stadium .item { padding: 0 8px; }
  .component-container--olympic-stadium .link { font-size: 18px; }
  .component-container--olympic-stadium .link:hover .arrow { margin-top: 1.7em; }
  .component-container--olympic-stadium .more { padding: 1em 2.4em; }
}

@media screen and (max-width: 992px) {
  .component-container--olympic-stadium { padding: 40px 50px; }
  .component-container--olympic-stadium .mod-title.en { font-size: 50px; }
  .component-container--olympic-stadium .mod-title.cn { font-size: 32px; }
  .component-container--olympic-stadium .wrapper { height: 340px; }
  .component-container--olympic-stadium .grid-wrapper { margin: 0 -5px; }
  .component-container--olympic-stadium .item { padding: 0 5px; }
  .component-container--olympic-stadium .link { font-size: 16px; }
  .component-container--olympic-stadium .link:hover .arrow { margin-top: 1.5em; }
  .component-container--olympic-stadium .more { font-size: 14px; }
}

@media screen and (max-width: 768px) {
  .component-container--olympic-stadium { padding: 40px 20px; }
  .component-container--olympic-stadium .wrapper { height: auto; }
  .component-container--olympic-stadium .grid-wrapper { margin: -5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .component-container--olympic-stadium .item { width: 50%; padding: 5px; height: 240px; }
  .component-container--olympic-stadium .link { font-size: 14px; }
  .component-container--olympic-stadium .link:hover .arrow { margin-top: 1.2em; }




  .component-container--olympic-stadium .swiper-container { 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; }
}