@charset "UTF-8";
.component-container--stadium-information-olympic { padding: 100px 20px; 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/stadium-information-olympic/bg.png); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.component-container--stadium-information-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--stadium-information-olympic .mod-title.en { font-size: 72px; font-family: "BebasNeueBold"; color: #007a4d; line-height: 1; text-align: center; }
.component-container--stadium-information-olympic .mod-title.cn { font-size: 48px; font-family: "PangMenZhengDao"; color: #FFFFFF; line-height: 1; margin-top: 0.2em; margin-bottom: 1.4em; text-align: center; }
.component-container--stadium-information-olympic .items-wrapper { font-size: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 412px; width: 100%; }
.component-container--stadium-information-olympic .gap { width: 4px; height: 4px; -ms-flex-negative: 0; flex-shrink: 0; }
.component-container--stadium-information-olympic .gap:last-child { display: none; }
.component-container--stadium-information-olympic .item-wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: block; background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; color: #FFFFFF; overflow: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; }
.component-container--stadium-information-olympic .item-wrap:hover { text-decoration: none; }
.component-container--stadium-information-olympic .item-content { 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; height: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--stadium-information-olympic .icon-box { height: 4em; overflow: hidden; 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; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--stadium-information-olympic .icon { display: block; max-width: 100%; max-height: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; overflow: hidden; }
.component-container--stadium-information-olympic .icon-default { width: auto; height: auto; opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.component-container--stadium-information-olympic .icon-active { width: 0; height: 0; opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
.component-container--stadium-information-olympic .line { width: 1.5em; height: 1px; background: #FFFFFF; display: block; margin-top: 1.5em; margin-bottom: 1.4em; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--stadium-information-olympic .name { width: 90%; text-align: center; line-height: 1; font-size: 1.4em; font-family: "PangMenZhengDao"; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; -webkit-transition: all 0.4s; transition: all 0.4s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.component-container--stadium-information-olympic .details { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; font-size: 0.9em; -webkit-transition: all 0.4s; transition: all 0.4s; overflow: hidden; height: 0; opacity: 0; -webkit-transform: scale(0); transform: scale(0); width: 100%; padding: 0 1.6em; line-height: 1.7; text-align: justify; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; min-height: 8.5em; }
.component-container--stadium-information-olympic .item-wrap.active { -webkit-box-flex: 2.68; -ms-flex: 2.68; flex: 2.68; }
.component-container--stadium-information-olympic .item-wrap.active .item-content { background: rgba(2,152,97,0.4); }
.component-container--stadium-information-olympic .item-wrap.active .icon-default { width: 0; height: 0; opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
.component-container--stadium-information-olympic .item-wrap.active .icon-active { width: auto; height: auto; opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.component-container--stadium-information-olympic .item-wrap.active .line { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-bottom: 0; margin-top: 1em; margin-bottom: 1em; }
.component-container--stadium-information-olympic .item-wrap.active .name { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: 0.6em; }
/* .component-container--stadium-information-olympic .item-wrap.active .details { height: auto; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } */


/**
  2022-03-04
*/

.component-container--stadium-information-olympic .item-wrap.active .details { height: 7em; opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

@media screen and (max-width: 1200px) {
  .component-container--stadium-information-olympic { padding: 60px 20px; }
  .component-container--stadium-information-olympic .mod-title.en { font-size: 58px; }
  .component-container--stadium-information-olympic .mod-title.cn { font-size: 38px; }
  .component-container--stadium-information-olympic .items-wrapper { font-size: 18px; height: 380px; }
}

@media screen and (max-width: 992px) {
  .component-container--stadium-information-olympic { padding: 40px 20px; }
  .component-container--stadium-information-olympic .mod-title.en { font-size: 50px; }
  .component-container--stadium-information-olympic .mod-title.cn { font-size: 32px; }
  .component-container--stadium-information-olympic .items-wrapper { font-size: 14px; height: 320px; }
  .component-container--stadium-information-olympic .icon-box { height: 3em; }
}

@media screen and (max-width: 768px) {
  .component-container--stadium-information-olympic .items-wrapper { font-size: 13px; height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .component-container--stadium-information-olympic .item-wrap { height: auto; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
  .component-container--stadium-information-olympic .item-wrap.active { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
  .component-container--stadium-information-olympic .item-content { padding-top: 3em; padding-bottom: 3em; height: auto; }
}