@charset "UTF-8";
.component-container--tabs-and-contents-olympic { background: #EEF1F2; color: #333333;  font-size: 20px; padding: 100px 20px; }
.component-container--tabs-and-contents-olympic .wrapper { max-width: 1200px; margin: 0 auto; overflow: hidden; }
.component-container--tabs-and-contents-olympic .tabs-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.2em; color: #666666; line-height: 1; font-family: "PangMenZhengDao"; overflow: hidden; margin: 0 -1em 1.5em; }
.component-container--tabs-and-contents-olympic .tab { position: relative; padding: 0.58em 0; margin: 0 1em; cursor: pointer; }
.component-container--tabs-and-contents-olympic .tab::after { content: ""; width: 100%; height: 3px; position: absolute; left: 0; bottom: 0; z-index: 4; background: #007a4d; -webkit-transition: all 0.8s; transition: all 0.8s; -webkit-transform: scaleX(0); transform: scaleX(0); opacity: 0; }
.component-container--tabs-and-contents-olympic .tab.active::after { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; }

.component-container--tabs-and-contents-olympic .content-wrap { background: #FFFFFF; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, -webkit-transform 0.8s; transition: transform 0.8s, opacity 0.8s; transition: transform 0.8s, opacity 0.8s, -webkit-transform 0.8s; overflow: hidden; height: 0; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); }
.component-container--tabs-and-contents-olympic .content-wrap.active { height: auto; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.component-container--tabs-and-contents-olympic .title { font-size: 2.4em; color: #333333; font-family: "PangMenZhengDao"; text-align: center; line-height: 1; padding: 1.375em 0; border-bottom: 1px solid #E9E9E9; }
.component-container--tabs-and-contents-olympic .details { font-size: 0.9em; padding: 4.6em 5.6em; line-height: 1.7; text-align: justify; }
.component-container--tabs-and-contents-olympic .details p { padding: 0.4em 0; }
.component-container--tabs-and-contents-olympic .details img { display: block; max-width: 100% !important; width: 100%; height: auto; margin: 0.4em auto; }

@media screen and (max-width: 1200px) {
  .component-container--tabs-and-contents-olympic { padding: 60px 20px; font-size: 18px; }
  .component-container--tabs-and-contents-olympic .title { padding: 1.2em 0; }
  .component-container--tabs-and-contents-olympic .details { padding: 4em 5em; }
}

@media screen and (max-width: 992px) {
  .component-container--tabs-and-contents-olympic { padding: 40px 20px; font-size: 16px; }
  .component-container--tabs-and-contents-olympic .title { padding: 1em 0; }
  .component-container--tabs-and-contents-olympic .details { padding: 3em 4em; }
}

@media screen and (max-width: 768px) {
  .component-container--tabs-and-contents-olympic { font-size: 14px; }
  .component-container--tabs-and-contents-olympic .tabs-wrapper { margin-left: -0.5em; margin-right: -0.5em; font-size: 1.1em; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .component-container--tabs-and-contents-olympic .tab { margin: 0 0.5em; }
  .component-container--tabs-and-contents-olympic .details { padding: 1em 2em; }
}