.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.main .app_l {
  flex: 1;
  width: 0;
  background-color: #666;
}

.main .app_l .swiper {
  width: 100%;
  height: 100%;
}

.main .app_l .swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide {
  width: 100%;
  height: 100%;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .logo {
  position: absolute;
  top: calc(100vh * 89 /1080);
  left: calc(100vh * 40 /1080);
  width: calc(100vh * 562 /1080);
  height: calc(100vh * 179 /1080);
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: calc(100vh * 80 /1080);
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box .cell {
  width: calc(100vh * 370 /1080);
  height: calc(100vh * 109 /1080);
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #FFFFFF;
  margin-right: calc(100vh * 19 /1080);
  background: url(../images/cell_bg.jpg) no-repeat;
  background-size: 100% 100%;
  padding: calc(100vh * 24 /1080) calc(100vh * 31 /1080);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box .cell:hover {
  background: url(../images/cell_bg_ac.png) no-repeat;
  background-size: 100% 100%;
  border: 1px solid transparent;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box .cell:hover .name {
  color: white;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box .cell:hover .skip {
  background: url(../images/skip3.png) no-repeat;
  background-size: 100% 100%;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box .cell:last-child {
  margin-right: 0;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box .cell .name {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: calc(100vh * 22 /1080);
  color: #333333;
}

.main .app_l .swiper .swiper-wrapper .swiper-slide .list_box .cell .skip {
  margin-top: calc(100vh * 7 /1080);
  width: calc(100vh * 38 /1080);
  height: calc(100vh * 38 /1080);
  min-height: calc(100vh * 38 /1080);
  background: url(../images/skip2.png) no-repeat;
  background-size: 100% 100%;
}

.main .app_r {
  width: calc(100vh * 450 /1080);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: end;
}

.app-b {
  width: 100%;
  padding-left: calc(100vh * 50 /1080);
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(100vh * 20 /1080);
  color: #666;
}

.app-b ul li {
  line-height: calc(100vh * 30 /1080);
  display: flex;
  align-items: center;
}

.app-b ul li a {
  color: #666;
  text-decoration: underline
}

.app-b ul li div {
  width: calc(100vh * 28 /1080);
  height: calc(100vh * 28 /1080);
  min-height: calc(100vh * 38 /1080);
  background: url(../images/beian-icon.svg) no-repeat;
  background-size: 100% 100%;
}

.main .app_r .title_logo {
  margin: calc(100vh * 190 /1080) auto calc(100vh * 50 /1080);
  width: calc(100vh * 307 /1080);
  height: calc(100vh * 61 /1080);
}

.main .app_r .swiper_r {
  height: calc(100vh * 420 / 1080);
  width: calc(100vh * 540 /1080);
}

.main .app_r .swiper_r .swiper {
  height: 100%;
}

.main .app_r .swiper_r .swiper .swiper-wrapper {
  align-items: end;
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide {
  display: flex;
  align-items: center;
  width: calc(100vh * 450 /1080);
  padding-left: calc(100vh * 71 /1080);
  cursor: pointer;
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100vh * 450 /1080);
  height: calc(100vh * 140 /1080);
  background-color: rgba(229, 234, 241, 0.5);
  z-index: -1;
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide.swiper-slide-thumb-active::before {
  width: calc(100vh * 540 /1080);
  height: calc(100vh * 140 /1080);
  background: url(../images/swiper-slide-active_bg.png) no-repeat;
  background-size: 100% 100%;
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .text {
  color: #FFFFFF;
  flex: 1;
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .skip {
  width: calc(100vh * 38 /1080);
  height: calc(100vh * 38 /1080);
  background: #FFFFFF;
  background: url(../images/skip.png) no-repeat;
  background-size: 100% 100%;
  margin-right: calc(100vh * 60 /1080);
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide .icon {
  width: calc(100vh * 36 /1080);
  height: calc(100vh * 36 /1080);
  margin-right: calc(100vh * 21 /1080);
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide .icon img {
  width: 100%;
  height: 100%;
}

.main .app_r .swiper_r .swiper .swiper-wrapper .swiper-slide .text {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: calc(100vh * 24 /1080);
  color: #303D70;
}