/* 页面全局 */
#app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.container-main {
  position: relative;
  background-color: #fff;
  overflow: auto;
}
.container-content {
  z-index: 10;
}
.container-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 775px;
  background-color: #F7F7F7;
}
.container-effect-bg {
  position: absolute;
  top: 380px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.container-effect-bg img {
  width: 2840px;
  height: 1288px;
  object-fit: cover;
}
.container-footer-bg {
  position: absolute;
  top: 2226px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.container-footer-bg img {
  width: 2560px;
  height: 756px;
  object-fit: cover;
}
/* 第一层 */
.container-header {
  height: 382px;
  position: relative;
}
.header-nav {
  height: 104px;
  display: flex;
  align-items: center;
}
.header-nav .logo-icon {
  margin-left: 44px;
  width: 172px;
  height: 34px;
}
.header-nav .logo-text {
  margin-left: 44px;
  font-size: 20px;
  font-weight: bold;
  color: #6f48ff;
}
.header-nav .login-btn {
  margin-right: 44px;
  width: 128px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #979797;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-header .left-info {
  position: absolute;
  top: 250px;
  left: 152px;
  z-index: 10;
}
.container-header .left-info .left-info-title {
  font-size: 38px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
.container-header .left-info .left-info-desc {
  margin-top: 16px;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.75);
}
.container-header .right-icon {
  position: absolute;
  top: 154px;
  right: 176px;
  width: 516px;
  height: 416px;
}
.container-header .reserve-btn {
  margin-top: 40px;
  width: 240px;
  height: 56px;
  border-radius: 4px;
  background-color: #6F48FF;
  font-size: 22px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 第二层 */
.container-effect {
  position: relative;
  height: 1288px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container-effect .effect-title {
  margin-top: 474px;
  font-size: 32px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.container-effect .effect-list {
  margin-top: 48px;
  display: flex;
  align-items: center;
}
.container-effect .effect-list li {
  width: 366px;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
}
.container-effect .effect-list li:hover {
  transform: scale(1.1);
}
.container-effect .effect-list li:not(:last-child) {
  margin-right: 80px;
}
.container-effect .effect-list li img {
  margin-top: 40px;
  width: 128px;
  height: 128px;
}
.container-effect .effect-list li .effect-item-title {
  margin-top: 24px;
  font-size: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.75);
}
.container-effect .effect-list li .effect-item-desc {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.65);
  width: 274px;
  text-align: center;
}
/* 第三层 */
.container-carousel {
  height: 730px;
  display: flex;
}
.container-carousel .left-info {
  margin-left: 88px;
  padding-top: 118px;
}
.container-carousel .left-info .left-info-title {
  font-size: 32px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
.container-carousel .left-info-list {
  margin-top: 24px;
  width: 514px;
}
.container-carousel .left-info-list .left-info-item {
  position: relative;
  padding: 24px 20px;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}
.left-info-list .item-header {
  display: flex;
  align-items: center;
}
.left-info-list .left-info-item img {
  display: block;
  width: 24px;
  height: 24px;
}
.left-info-list .left-info-item .item-title {
  margin-left: 20px;
  font-size: 20px;
  font-weight: 500;
}
.left-info-list .left-info-item .item-desc {
  margin-top: 12px;
  padding-left: 44px;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.65);
  display: none;
}
.container-carousel .left-info-list .left-info-item.active {
  background-color: #fff;
  box-shadow: 0px -2px 24px 0px rgba(0, 0, 0, 0.07);
}
.container-carousel .left-info-list .left-info-item.active .item-desc {
  display: block;
}
.container-carousel .item-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
}
.container-carousel .item-progress-value {
  width: 0%;
  height: 100%;
  background-color: #6F48FF;
}
.container-carousel .item-progress-value.carousel-progress {
  animation: CarouselProgress 5s linear forwards;
}
@keyframes CarouselProgress {
  100% {  width: 100%; }
}
.container-carousel .right-info {
  position: relative;
  margin-top: 80px;
  margin-left: 98px;
  width: 675px;
  height: 588px;
}
.container-carousel .right-info-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.container-carousel .right-info-bg-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.container-carousel .swiper-container {
  position: absolute;
  margin-left: 32px;
  margin-top: 122px;
  width: 520px;
  height: 385px;
}
.container-carousel .swiper-slide img {
  width: 450px;
}
/* 第四层 */
.container-footer {
  position: relative;
  height: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container-footer .footer-hint {
  margin-top: 292px;
  font-size: 32px;
  font-weight: 500;
  color: #fff;
}
.container-footer .footer-hint span {
  color: #FF66A9;
}
.container-footer .reserve-btn {
  margin-top: 40px;
  width: 240px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid #fff;
  font-size: 22px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-footer .web-info {
  position: absolute;
  bottom: 20px;
  color: rgba(255, 255, 255, 0.45);
}
/* 第五层 */
.container-footer-info {
  position: absolute;
  top: 580px;
  left: 0;
  width: 100vw;
  height: 200px;
  background-color: #201937;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  box-sizing: border-box;
  z-index: 10;
}
.container-footer-info .web-info {
  position: relative;
  bottom: auto;
  color: #a9a5b6;
  text-align: center;
  line-height: 2.2;
  font-size: 14px;
  letter-spacing: 0.3px;
  font-family: "SimSun", "宋体", serif;
}
/* vue */
.modal-content {
  padding: 0 16px;
}
.modal-hint {
  color: #949499;
  line-height: 21px;
}
.form-item {
  margin-top: 24px;
  display: flex;
}
.form-item-title {
  margin-right: 20px;
  width: 66px;
  text-align-last: justify;
  line-height: 32px;
}
.modal-btn-ok {
  border-color: #6F48FF !important;
  background-color: #6F48FF !important;
}