
.top {
  width: 100%;
  /* height: 1035px; */
  background: url(../image/home/topBg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  margin-bottom: calc(100vw * 100 / 1920);
}
.top-main {
  margin: auto;
}
.top-title {
  color: #fff;
  font-size: calc(100vw * 48 / 1920);
  font-weight: 700;
  text-align: center;
  line-height: calc(100vw * 72 / 1920);
  margin: calc(100vw * 58 / 1920) auto calc(100vw * 20 / 1920);
}
.top-subTitle {
  font-size: calc(100vw * 18 / 1920);
  color: #fff;
  line-height: calc(100vw * 27 / 1920);
  text-align: center;
  margin-bottom: calc(100vw * 43 / 1920);
}
.top-computer {
  position: relative;
  width: calc(100vw * 1300 / 1920);
  margin:auto
}
.top-computer .top-computer-wrap {
  display: block;
  width: 100%;
}
.top-computer-content {
  position: absolute;
  width: 78.58%;
  top: calc(100vw * 20 / 1920);
  left: 0;
  right: 0;
  margin: auto;
}
.top-computer-content-img {
  display: block;
  width: 100%;
}
.play-icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: calc(100vw * 48 / 1920);
  width: calc(100vw * 48 / 1920);
  background: url(../image/home/playIocn.png) no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.play-icon:hover {
  background: url(../image/home/playIocnHover.png) no-repeat;
  background-size: 100% 100%;
}


.plan {
  height: calc(100vw * 900 / 1920);
  background: linear-gradient(90deg, #0064b5 0%, #00b5d4 50%, #00be8b 100%);
  color: #fff;
  padding: calc(100vw * 110 / 1920) 0 calc(100vw * 110 / 1920) calc(100vw * 159 / 1920);
  display: flex;
  box-sizing: border-box;
}
.plan-info {
  width: calc(100vw * 366 / 1920);
  text-align: left;
  padding-top: calc(100vw * 60 / 1920);
  flex-shrink: 0;
}
.plan-info-tip {
  color: #b5e3ff;
  font-size: calc(100vw * 18 / 1920);
  font-style: normal;
  font-weight: 500;
  line-height: calc(100vw * 27 / 1920);
}
.plan-info-title {
  margin: calc(100vw * 12 / 1920) 0 calc(100vw * 20 / 1920);
  color: #fff;
  font-family: 'Source Han Sans CN';
  font-size: calc(100vw * 40 / 1920);
  font-style: normal;
  font-weight: 500;
  line-height: calc(100vw * 60 / 1920);
}
.plan-info-desc {
  color: #fff;
  font-family: 'Source Han Sans CN';
  font-size: calc(100vw * 14 / 1920);
  font-style: normal;
  font-weight: 400;
  line-height: calc(100vw * 32 / 1920); /* 228.571% */
}
.plan-info-btn {
  width: calc(100vw * 160 / 1920);
  line-height: calc(100vw * 40 / 1920);
  text-align: center;
  color: #ffff;
  font-size: calc(100vw * 14 / 1920);
  border-radius: calc(100vw * 30 / 1920);
  border: 2px solid #fff;
  margin-top: calc(100vw * 20 / 1920);
  cursor:pointer
}
.plan-info-btn:hover {
  opacity: 0.8;
}
.plan-list {
  flex: 1;
  margin-left: calc(100vw * 60 / 1920);
}
/* .swiper-slide {
  width: calc(100vw * 500 / 1920);
} */
.plan-item {
  width: calc(100vw * 500 / 1920);
  height: calc(100vw * 680 / 1920);
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  margin-right: calc(100vw * 60 / 1920);
}
.plan-item-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.plan-item-main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  text-align: left;
  cursor: pointer;
}
.plan-item-main:hover .plan-item-main-title{
  background: linear-gradient(90deg, #0064b5 0%, #00b5d4 50%, #00be8b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.plan-item-main:hover .plan-item-go {
  background: url(../image/home/goIconActive.png) no-repeat;
  background-size: 100% 100%;
}
.plan-item-main-title {
  text-align: left;
  line-height: 30px;
  font-size: 20px;
  font-weight: 500;
  padding: calc(100vw * 40 / 1920) calc(100vw * 40 / 1920) calc(100vw * 14 / 1920);
}
.plan-item-go {
  width: calc(100vw * 21 / 1920);
  height: calc(100vw * 14 / 1920);
  background: url(../image/home/goIcon.png) no-repeat;
  background-size: 100% 100%;
  margin-left: calc(100vw * 40 / 1920);
  cursor: pointer;
}
.strengths-box {
  margin: calc(100vw * 100 / 1920) auto;
}
.strengths {
  display: flex;
  border: 1px solid #6d797c;
  border-radius: 10px;
  margin-top: calc(100vw * 50 / 1920);
}
.strengths-left {
  padding: calc(100vw * 75 / 1920);
  width: calc(100vw * 250 / 1920);
}
.strengths-item-img {
  display: block;
  width: 100%;
  /* height: calc(100vw * 250 / 1920); */
}
.strengths-item-first {
  margin: 0 auto calc(100vw * 212 / 1920);
}
.strengths-item-title {
  font-size: calc(100vw * 32 / 1920);
  font-weight: 500;
  line-height: calc(100vw * 48 / 1920);
  color: #fff;
  margin-bottom: calc(100vw * 20 / 1920);
}
.strengths-item-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(100vw * 16 / 1920);
  line-height: calc(100vw * 32 / 1920);
}
.strengths-center {
  padding: calc(100vw * 130 / 1920) calc(100vw * 45 / 1920) calc(100vw * 73 / 1920);
  border-left: 1px solid #6d797c;
  border-right: 1px solid #6d797c;
  width: calc(100vw * 330 / 1920);
}
.strengths-center .strengths-item-info {
  width: calc(100vw * 260 / 1920);
}
.strengths-right-item {
  display: flex;
  align-items: center;
}
.strengths-right-first {
  padding: calc(100vw * 30 / 1920) calc(100vw * 60 / 1920);
  border-bottom: 1px solid #6d797c;
}
.strengths-right-first .strengths-item-img {
  width: calc(100vw * 385 / 1920);
}
.strengths-right .strengths-item-info {
  text-align: left;
  margin-left: calc(100vw * 50 / 1920);
}
.strengths-right-second {
  padding: calc(100vw * 50 / 1920) calc(100vw * 37 / 1920);
}
.strengths-right-second .strengths-item-img {
  width: calc(100vw * 490 / 1920);
}

