main[data-v-7a397088] {
  background-color: #fcfcfc;
}
.case-banner[data-v-7a397088] {
  background: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.case-banner img[data-v-7a397088] {
    width: 100%;
    height: calc(1920 / 500) vw;
}
@media screen and (max-width: 480px) {
.case-banner img[data-v-7a397088] {
        width: auto;
        height: 90vw;
}
}
.case-banner .banner-content[data-v-7a397088] {
    position: absolute;
    height: 64px;
    top: 50%;
    margin-top: -32px;
    width: 100%;
    text-align: center;
    z-index: 1;
}
.case-banner .banner-content h3[data-v-7a397088] {
      font-size: 48px;
      color: #eeeeee;
      line-height: 64px;
}
.case-list[data-v-7a397088] {
  width: 1200px;
  margin: 0 auto 196px;
}
@media screen and (max-width: 480px) {
.case-list[data-v-7a397088] {
      width: 100%;
}
}
.case-list .case-ul[data-v-7a397088] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.case-list .case-ul[data-v-7a397088] .el-tabs__header {
      margin: 24px 0 48px;
}
@media screen and (max-width: 480px) {
.case-list .case-ul[data-v-7a397088] .el-tabs__header {
          margin: 0 0 12px;
}
}
.case-list .case-ul[data-v-7a397088] .el-tabs__item {
      width: 120px;
      height: 64px;
      font-size: 16px;
      text-align: center;
      list-style: none;
      color: #333333;
      line-height: 64px;
      font-weight: normal;
}
@media screen and (max-width: 480px) {
.case-list .case-ul[data-v-7a397088] .el-tabs__item {
          height: 48px;
          width: 100px;
          font-size: 14px;
          line-height: 48px;
}
}
.case-list .case-ul[data-v-7a397088] .el-tabs__nav-wrap::after {
      height: 1px;
      background: #e4e4e4;
}
.case-list .case-ul[data-v-7a397088] .el-tabs__active-bar {
      background: #eb0028;
}
.case-list .case-ul .case-li[data-v-7a397088] {
      width: 200px;
      font-size: 16px;
      list-style: none;
      color: #333333;
      line-height: 21px;
}
.content-wrap[data-v-7a397088] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  cursor: pointer;
}
.content-wrap .item[data-v-7a397088] {
    width: 30%;
    margin-bottom: 48px;
    text-align: center;
}
@media screen and (max-width: 480px) {
.content-wrap .item[data-v-7a397088] {
        width: 320px;
        margin: 0 auto 48px;
}
}
.content-wrap .item h3[data-v-7a397088] {
      font-size: 18px;
      color: #333333;
      line-height: 21px;
      margin: 24px 0 12px;
}
.content-wrap .item p[data-v-7a397088] {
      font-size: 14px;
      color: #585858;
      line-height: 19px;
      text-align: justify;
}
.content-wrap .item .rotate-box[data-v-7a397088] {
      width: 100%;
      height: 240px;
      position: relative;
      perspective: 1000px;
}
.content-wrap .item .rotate-box .rotate-box-content[data-v-7a397088] {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
        transition: all 0.3s;
}
.content-wrap .item .rotate-box .rotate-box-content .img-wrap[data-v-7a397088],
        .content-wrap .item .rotate-box .rotate-box-content .img-wrap-back[data-v-7a397088] {
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
}
.content-wrap .item .rotate-box .rotate-box-content .img-wrap-back[data-v-7a397088] {
          transform: rotateY(180deg);
          padding: 16px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background-color: #f6f6f6;
          border: 1px solid #ccc;
          border-radius: 8px;
}
.content-wrap .item .rotate-box .rotate-box-content .img-wrap-back h4[data-v-7a397088] {
            margin-bottom: 10px;
}
.content-wrap .item .rotate-box .rotate-box-content .img-wrap-back p[data-v-7a397088] {
            font-size: 11px;
            text-align: center;
}
.content-wrap .item .rotate-box .rotate-box-content .img-wrap-back img[data-v-7a397088] {
            width: 180px;
            height: 180px;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
            box-shadow: 0px 3px 3px #c8c8c8;
            border-radius: 6px;
}
.content-wrap .item .rotate-box .flipped[data-v-7a397088] {
        transform: rotateY(180deg);
}
.content-wrap .item .img-wrap[data-v-7a397088] {
      width: 100%;
      height: 240px;
      overflow: hidden;
      background: #cccccc;
      border-radius: 8px;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
.content-wrap .item .img-wrap .img[data-v-7a397088] {
        display: inline-block;
        width: 100%;
        height: 240px;
        background-size: 100% 240px;
        transition: all 0.5s ease-in-out 0s;
}
.content-wrap .item .img-wrap .img[data-v-7a397088]:hover {
          transform: scale(1.1);
}
.content-wrap.mp-case[data-v-7a397088] {
    padding: 20px;
}
.content-wrap.mp-case .item[data-v-7a397088] {
      width: 300px;
}
.content-wrap.mp-case .img-wrap[data-v-7a397088] {
      width: 300px;
      height: 300px;
      background: none;
}
.content-wrap.mp-case .img-wrap img[data-v-7a397088] {
        width: 100%;
        height: 100%;
        transform: scale(0.8);
}
.content-wrap.mp-case .img-wrap img[data-v-7a397088]:hover {
          transform: scale(0.9);
}
@media screen and (max-width: 480px) {
[data-v-7a397088] #pane-third .el-tabs__header {
    width: 100vw;
    overflow: hidden;
}
[data-v-7a397088] #pane-third .el-tabs__header .el-tabs__item {
      height: 36px;
      line-height: 36px;
      color: #260b4b;
}
[data-v-7a397088] #pane-third .el-tabs__header .el-tabs__nav-scroll {
      margin: 0 6px;
}
[data-v-7a397088] #pane-third .el-tabs__header .el-tabs__nav-prev,[data-v-7a397088] #pane-third .el-tabs__header .el-tabs__nav-next {
      height: 36px;
      padding: 0 12px;
      background-color: #fcfcfc;
}
}
@media screen and (max-width: 480px) {
.mini-tab-pane .content-wrap[data-v-7a397088] .img-wrap {
    margin: 0 auto;
    width: 80%;
    height: 80%;
}
}