.story-221028-wrapper {
  overflow: visible;
  width: 100%;
  font-family: 'Microsoft Yahei', 'PingFang SC', Arial, sans-serif;
}
.story-221028-wrapper * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.story-221028-wrapper .story-core {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 400px;
}
.story-221028-wrapper .story-core .story-store {
  width: 714px;
  height: 350px;
  overflow: hidden;
}
.story-221028-wrapper .story-core .story-store img {
  display: block;
  width: 100%;
  height: 100%;
}
.story-221028-wrapper .story-core .story-logo {
  position: absolute;
  top: 55px;
  right: 0;
  z-index: 9;
}
.story-221028-wrapper .story-core .story-list-wrapper {
  position: absolute;
  right: 0;
  top: 145px;
  font-size: 18px;
  line-height: 32px;
  color: #cb2d20;
  width: 350px;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  height: 320px;
}
.story-221028-wrapper .story-core .story-list-wrapper:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 48px;
  right: 24px;
  background: url("./icon-about-lc.png") no-repeat;
  width: 25px;
  height: 27px;
  z-index: 88;
}
.story-221028-wrapper .story-core .story-list-wrapper .story-list {
  position: absolute;
  top: 48px;
  left: 0;
  width: 9999px;
  display: flex;
  transition: all 300ms;
}
.story-221028-wrapper .story-core .story-list-wrapper .story-list-item {
  width: 350px;
  background: #fff;
  padding: 48px 32px;
  flex-shrink: 0;
  position: relative;
  border-radius: 4px;
}
.story-221028-wrapper .story-core .story-list-wrapper .story-list-item h5 {
  position: absolute;
  top: -16px;
  font-size: 48px;
  color: #cb2d20;
  user-select: none;
}
.story-221028-wrapper .story-core .story-list-wrapper .story-list-item p {
  height: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.story-221028-wrapper .story-directory {
  display: flex;
  width: 100%;
  overflow: visible;
  position: relative;
  height: 120px;
  padding: 0 80px;
  margin-top: 32px;
}
.story-221028-wrapper .story-directory:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  height: 1px;
  left: -64px;
  right: -64px;
  background: #868e96;
  transform: translateY(-50%);
}
.story-221028-wrapper .story-directory .story-directory-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;
  transition: all 300ms;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cb2d20;
}
.story-221028-wrapper .story-directory .story-directory-btn svg {
  width: 40px;
}
.story-221028-wrapper .story-directory .story-directory-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;
  transition: all 300ms;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cb2d20;
  left: 4px;
}
.story-221028-wrapper .story-directory .story-directory-left svg {
  width: 40px;
}
.story-221028-wrapper .story-directory .story-directory-left:hover {
  left: -4px;
}
.story-221028-wrapper .story-directory .story-directory-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;
  transition: all 300ms;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cb2d20;
  right: 4px;
}
.story-221028-wrapper .story-directory .story-directory-right svg {
  width: 40px;
}
.story-221028-wrapper .story-directory .story-directory-right:hover {
  right: -4px;
}
.story-221028-wrapper .story-directory .story-directory-list-wrapper {
  overflow: hidden;
  height: 100%;
  position: relative;
  flex: 1;
  user-select: none;
  
  flex:  unset;
  width:  888px;
}
.story-221028-wrapper .story-directory .story-directory-runner {
  width: 34px;
  height: 50px;
  overflow: hidden;
  transition: all 500ms;
  position: absolute;
  top: 0;
  left: 35px;
}
.story-221028-wrapper .story-directory .story-directory-list {
  display: flex;
  width: 9999px;
  height: 100%;
  align-items: center;
  z-index: 100;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 500ms;
}
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a {
  display: block;
  padding-top: 24px;
  position: relative;
  margin-top: 44px;
  width: 111px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms;
}
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a:before {
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  background: #868e96;
  border-radius: 12px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  transition: all 300ms;
  z-index: 3;
}
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a:after {
  content: ' ';
  display: block;
  width: 0;
  height: 3px;
  background: #cb2d20;
  border-radius: 12px;
  position: absolute;
  top: 5px;
  left: 50%;
  transition: all 300ms;
  z-index: 2;
}
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a:hover,
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a.active {
  color: #cb2d20;
}
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a:hover:before,
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a.active:before {
  background: #cb2d20;
}
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a:hover:after,
.story-221028-wrapper .story-directory .story-directory-list .story-directory-list-item a.active:after {
  left: 0;
  width: 105px;
}
/*# sourceMappingURL=story.css.map */