@charset "UTF-8";
.component-container--shop-introduction-olympic { width: 100%; overflow: hidden; font-size: 20px; position: relative; height: auto; }
.component-container--shop-introduction-olympic .swiper-container,
.component-container--shop-introduction-olympic .swiper-wrapper,
.component-container--shop-introduction-olympic .swiper-slide { height: auto; }
.component-container--shop-introduction-olympic .img-inner { padding-bottom: 33.28125%; position: relative; overflow: hidden; }
.component-container--shop-introduction-olympic .img-inner .img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 4; display: block; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 2s; transition: all 2s; opacity: 0; }
.component-container--shop-introduction-olympic .swiper-slide-active .img-inner .img { opacity: 1; }
.component-container--shop-introduction-olympic .context-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: -11vw; position: relative; z-index: 8; opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: opacity 2s, -webkit-transform 1s; transition: opacity 2s, -webkit-transform 1s; transition: opacity 2s, transform 1s; transition: opacity 2s, transform 1s, -webkit-transform 1s; }
.component-container--shop-introduction-olympic .swiper-slide-active .context-wrapper { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
.component-container--shop-introduction-olympic .context-wrap { width: 81.30208333%; -ms-flex-negative: 0; flex-shrink: 0; background-color: #FFFFFF; background-image: url(../../static/components/shop-introduction-olympic/bg.png); background-position: right center; background-repeat: no-repeat; background-size: auto 100%; padding-top: 4.4em; padding-bottom: 7.9em; padding-right: 20px; }
.component-container--shop-introduction-olympic .context-content { width: 100%; max-width: 1200px; display: -webkit-box; display: -ms-flexbox; display: flex; }
.component-container--shop-introduction-olympic .logo-wrapper { width: 15.4em; height: 12.3em; 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; overflow: hidden; border: solid 1px #ebebeb; margin-left: 5.2em; margin-right: 3.6em; }
.component-container--shop-introduction-olympic .shop-logo { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.component-container--shop-introduction-olympic .text-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; 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-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.component-container--shop-introduction-olympic .group { 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; }
.component-container--shop-introduction-olympic .label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #007a4d; position: relative; line-height: 1; }
.component-container--shop-introduction-olympic .label::after { content: ""; width: 1.25em; height: 2px; background: #999999; opacity: 0.6; margin-left: 0.5em; }
.component-container--shop-introduction-olympic .name { font-size: 1.8em; color: #333333; font-family: "PangMenZhengDao"; }
.component-container--shop-introduction-olympic .desc { color: #666666; font-size: 0.9em; line-height: 1.8; max-height: 5.4em; width: 100%; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; margin-top: 0.5em; text-align: justify; }
.component-container--shop-introduction-olympic .more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.8em; color: #878787; line-height: 1; }
.component-container--shop-introduction-olympic .more:hover { color: #007a4d; text-decoration: none; }
.component-container--shop-introduction-olympic .arrow-more { font-size: 1.2em; }
.component-container--shop-introduction-olympic .page-numbers-wrapper { font-family: "BebasNeueBold"; position: absolute; width: auto; top: 8vw; left: calc(100% - 81.30208333%); z-index: 12; color: rgba(255,255,255,0.3); line-height: 1; }
.component-container--shop-introduction-olympic .page-numbers-wrap { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; }
.component-container--shop-introduction-olympic .page-numbers-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; }
.component-container--shop-introduction-olympic .page-number-line { display: block; width: 100%; margin: 0.4em auto 0.5em; }
.component-container--shop-introduction-olympic .page-number-line::after { content: ""; display: block; font-size: 1.8em; width: 100%; border-top: 1px solid #FFFFFF; }
.component-container--shop-introduction-olympic .page-number-current { color: #FFFFFF; font-size: 2.4em; }
.component-container--shop-introduction-olympic .page-number-total { font-size: 1.8em; }
.component-container--shop-introduction-olympic .page-arrows-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: absolute; z-index: 12; width: 100%; top: 18.5vw; left: 0; height: 0; color: #FFFFFF; }
.component-container--shop-introduction-olympic .page-arrows-wrap { width: 81.30208333%; font-size: 0.8em; -ms-flex-negative: 0; flex-shrink: 0; padding-right: 20px; }
.component-container--shop-introduction-olympic .page-arrows-content { width: 100%; max-width: 1200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 0; }
.component-container--shop-introduction-olympic .page-arrow { display: -webkit-box; display: -ms-flexbox; display: flex; width: 2em; height: 2em; line-height: 1; -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%; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; }
.component-container--shop-introduction-olympic .page-arrow:hover { background: #007a4d; }
.component-container--shop-introduction-olympic .page-arrow-gap { width: 0.5em; }

@media screen and (max-width: 1200px) {
  .component-container--shop-introduction-olympic { font-size: 18px; }
  .component-container--shop-introduction-olympic .context-wrap { padding-top: 3.4em; padding-bottom: 6.8em; }
  .component-container--shop-introduction-olympic .logo-wrapper { margin-left: 2.6em; margin-right: 1.8em; }
  .component-container--shop-introduction-olympic .page-arrows-wrapper { top: 17vw; }
}

@media screen and (max-width: 992px) {
  .component-container--shop-introduction-olympic { font-size: 16px; }
}

@media screen and (max-width: 768px) {
  .component-container--shop-introduction-olympic .img-inner { height: 240px; padding-bottom: 0; }
  .component-container--shop-introduction-olympic .context-wrapper { margin-top: 0; }
  .component-container--shop-introduction-olympic .context-wrap { width: 100%;padding-right: 0; background-size: 100% auto; background-position: right bottom; }
  .component-container--shop-introduction-olympic .context-content { -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; padding-left: 20px; padding-right: 20px; }
  .component-container--shop-introduction-olympic .logo-wrapper { margin-left: 0; margin-right: 0; }
  .component-container--shop-introduction-olympic .text-wrapper { padding-left: 0; padding-right: 0; margin-top: 1.6em; }
  .component-container--shop-introduction-olympic .group { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .component-container--shop-introduction-olympic .more { margin-top: 1.2em; }
  .component-container--shop-introduction-olympic .page-numbers-wrapper { color: rgba(255,255,255,0.6); top: 200px; font-size: 0.7em; left: 20px; }
  .component-container--shop-introduction-olympic .page-numbers-wrap { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .component-container--shop-introduction-olympic .page-numbers-content { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
  .component-container--shop-introduction-olympic .page-number-line { margin: 0 0.5em; width: auto; }
  .component-container--shop-introduction-olympic .page-number-line::after { content: "/"; border: none; }
  .component-container--shop-introduction-olympic .page-arrows-wrapper { top: 200px; }
  .component-container--shop-introduction-olympic .page-arrows-content { padding-right: 20px; }
  .component-container--shop-introduction-olympic .page-arrow { background: rgba(0,0,0,0.3); }
}