.banner {
  position: relative;
  z-index: 9;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 900px;
  background: url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/banner-bg.png) no-repeat center;
}



.banner-introduce {
  width: 600px;
  margin-top: 210px;
}

.banner-animate {
  position: absolute;
  top: 180px;
  left: 48.96%;
}

.banner-animate .banner-main {
  position: absolute;
  z-index: 12;
  top: -80px;
  left: 161px;
  width: 472px;
  height: 313px;
  background: url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/banner-main.png) no-repeat center;
  background-size: contain;
}

.banner-animate .banner-left {
  position: absolute;
  z-index: 10;
  top: -20px;
  left: 160px;
  width: 420px;
  height: 173px;
  animation: up-down-move 1.5s ease-in-out infinite;
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/wave1.png) no-repeat center;
}

.banner-animate .banner-right {
  position: absolute;
  z-index: 10;
  top: 68px;
  left: 207px;
  width: 420px;
  height: 174px;
  animation: up-down-move 1.5s ease-in-out infinite;
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/wave2.png) no-repeat center;
}

.banner-animate .banner-ellipse {
  position: absolute;
  z-index: 11;
  top: -7px;
  left: 160px;
  width: 465px;
  height: 236px;
  transform: skewY(-6deg);
}





.banner-title .title-img {
  width: 636px;
  height: 71px;
  margin: auto 3px auto -10px;
}

.banner-desc {
  width: 640px;
  margin-top: 36px;
  color: #5f5f5f;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 4px;
  line-height: 40px;
  text-align: justify;
}

.banner-guide {
  position: relative;
  z-index: 10;
  width: 1160px;
  margin: 0 auto;
  margin-top: -237px;
}



.banner-guide-li {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

.banner-guide-li li {
  overflow: hidden;
  width: 361px;
  height: 228px;
  backdrop-filter: blur(1px);
  background: rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.04);
}

.banner-guide-li li>img {
  width: 100px;
  height: 100px;
  margin: 23px auto 0 auto;
}

.banner-guide-desc {
  margin: 9px auto 0 auto;
  color: #5f5f5f;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}

.guide-title {
  color: #333;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 50px;
  text-align: center;
}

.guide-desc {
  color: #5f5f5f;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}

/* main内容 */


.main-section-box {
  width: 1160px;
  margin: 0 auto;
}

.main-section-box .section-title {
  display: inline-block;
  overflow: hidden;
  height: 50px;
  color: #333;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
}

.main-section-1 {
  width: 1160px;
  margin: 180px auto;
}

.main-section-1 .section-title {
  display: inline-block;
  overflow: hidden;
  height: 50px;
  color: #333;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
}

.main-section-1 .section-box {
  display: flex;
  width: 1160px;
  justify-content: space-between;
  margin-top: 60px;
}

.section-box-item {
  width: 273px;
  height: 209px;
  background: url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section1-bg.png) no-repeat center;
  background-size: cover;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 74px;
  text-align: center;
}

.section-box-item>p {
  margin-top: 10px;
}

.section-box-item>img {
  width: 104px;
  height: 104px;
  margin: 0 auto;
}

.main-section-2 {
  height: 800px;
  background: url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section2-block.png) no-repeat center;
  background-size: cover;
}

.main-section-2 .main-section-box {
  width: 1160px;
  margin: 0 auto;
}

.main-section-2 .main-section-box .section-title {
  display: inline-block;
  overflow: hidden;
  height: 50px;
  margin-top: 120px;
  margin-bottom: 35px;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
}

.main-section-2 .main-section-box .section-main {
  display: flex;
  height: 180px;
  justify-content: space-between;
  padding-left: 40px;
  margin-top: 8px;
  margin-bottom: -100px;
}

.main-section-2 .section-main .section-main-item {
  height: 180px;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 36px;
  text-align: center;
  vertical-align: text-bottom;
}

.main-section-2 .section-main .section-main-item:first-child {
  width: 310px;
}

.main-section-2 .section-main .section-main-item:first-child>p:first-child {
  margin-top: 60px;
}

.main-section-2 .section-main .section-main-item:nth-child(2n) {
  line-height: 150px;
}

.main-section-2 .section-main .section-main-item:last-child {
  width: 300px;
}

.main-section-3 .main-section-box {
  width: 1160px;
  margin: 0 auto;
}

.main-section-3 .main-section-box .section-title {
  display: inline-block;
  overflow: hidden;
  height: 50px;
  color: #333;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
}

.main-section-3 .section-title {
  margin-top: 180px;
}

.main-section-3 .section-guide {
  display: flex;
  height: 710px;
  justify-content: space-between;
  margin: 60px 0;
}

.main-section-3 .section-guide-sub,
.main-section-3 .section-guide-sub-hover {
  position: relative;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.main-section-3 .section-guide-sub-title {
  color: #fff;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.main-section-3 .section-guide-sub .section-guide-content .section-guide-sub-des {
  margin-top: 16px;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.main-section-3 .section-guide-sub .section3-guide-bg {
  opacity: 1;
}

.main-section-3 .section-guide-sub .section3-guide-bg-mask {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.main-section-3 .section-guide-sub {
  position: relative;
  overflow: hidden;
  width: 560px;
  height: 712px;
  border-radius: 8px;
}

.main-section-3 .section-guide-sub .video-warp {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
}

.main-section-3 .section-guide-sub .video-warp canvas {
  position: absolute;
  width: 100%;
  max-width: 560px;
  max-height: 315px;
  border: none;
  outline: none;
}

.main-section-3 .section-guide-sub .video-warp .canvas-mask {
  position: absolute;
  z-index: 10;
  max-width: 560px;
  max-height: 315px;
  background-color: rgba(0, 0, 0, 0.5);
}

.main-section-3 .section-guide-sub .video-warp .canvas-mask.top-mask {
  top: 0;
  left: 0;
  width: 100%;
}

.main-section-3 .section-guide-sub .video-warp .canvas-mask.bottom-mask {
  top: 127px;
  left: 0;
  width: 100%;
}

.default-video,
.plyr--video {
  position: absolute;
  z-index: 15 !important;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 560px;
  height: 100%;
  max-height: 315px;
  border: none;
  outline: none;
}

.default-video:focus {
  outline: none;
}

.plyr__video-wrapper {
  background: #d8d8d8 !important;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
  width: 120px;
  height: 120px;
  border: 1px solid #fff;
  background: #0000004d;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid:hover {
  border: 1px solid #fff;
  background: #0000004d;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid svg {
  left: 30px;
  width: 40px;
  height: 48px;
}

.main-section-3 .section-guide-sub img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-section-3 .section-guide-sub-hover .section3-guide-bg {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.main-section-3 .section-guide-sub-hover .section3-guide-bg-mask {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.section-guide-sub .section-guide-content {
  position: absolute;
  z-index: 10;
  top: 613px;
  left: 40px;
  transition: top 0.5s ease-in-out;
}

.section-guide-sub-hover .section-guide-content {
  position: absolute;
  top: 464px;
  left: 40px;
}

.main-section-3 .section-guide-sub-hover .section-guide-content .section-guide-sub-title {
  opacity: 1;
}

.main-section-3 .section-guide-sub-hover .section-guide-content .section-guide-sub-des {
  opacity: 1;
}

.section-guide-sub-des .des-item {
  width: 478px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 30px;
  text-align: justify;
}

.main-section-4 .logo-content {
  margin-top: 180px;
}

.main-section-4 .logo-content .logo-sub-title {
  color: #333;
  font-size: 36px;
  font-weight: 600;
}

.main-section-4 .logo-content .logo-sub-des {
  margin-top: 23px;
  color: #333;
  font-size: 16px;
  font-weight: 300;
}

.main-section-4 .logo-head {
  display: flex;
  width: 990px;
  justify-content: space-between;
  margin: 60px auto 46px;
}

.main-section-4 .logo-head .logo-li {
  width: 150px;
  height: 60px;
  border: 1px solid #e8f0fe;
  background: #f8f9fc;
  border-radius: 8px;
  color: #333;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.main-section-4 .logo-head .logo-li-active {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/logo-li-active-bg.png) no-repeat center;
  background-size: cover;
  color: #fff;
}

.main-section-4 .logo-wrap {
  position: relative;
  height: 244px;
}

.main-section-4 .logo-guide-content {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
}

.main-section-4 .logo-guide-content-active {
  position: absolute;
  z-index: 1;
  top: 0;
  opacity: 1;
}

.main-section-4 .logo-mask {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -10px;
  width: 1245px;
  height: 245px;
  background-image: linear-gradient(to right, transparent, #fff 5%);
}

.main-section-4 .section-guide-li {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.main-section-4 .section-guide-li-center {
  /* width: 1010px; */
  display: flex;
  justify-content: flex-start;
  margin: 0 auto;
}

.main-section-4 .section-guide-li>li {
  width: 178px;
  height: 100px;
  flex-shrink: 0;
  border: 1px solid #ddedff;
  margin-right: 16px;
  border-radius: 8px;
}

.main-section-4 .section-guide-li>li:last-of-type {
  margin-right: 0;
}

.main-section-4 .section-guide-li .guide1-li-1 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon1.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-2 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon2.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-3 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon3.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-4 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon4.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-5 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon5.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-6 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon6.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-7 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon7.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-8 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon8.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-9 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon9.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-10 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon10.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-11 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon11.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide1-li-12 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide1-icon12.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide2-li-1 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide2-icon1.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide2-li-2 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide2-icon2.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide2-li-3 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide2-icon3.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide2-li-4 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide2-icon4.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide2-li-5 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide2-icon5.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide3-li-1 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide3-icon1.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide3-li-2 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide3-icon2.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide3-li-3 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide3-icon3.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide3-li-4 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide3-icon4.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide3-li-5 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide3-icon5.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide4-li-1 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide4-icon1.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide4-li-2 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide4-icon2.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide4-li-3 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide4-icon3.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide4-li-4 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide4-icon4.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide4-li-5 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide4-icon5.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide5-li-1 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide5-icon1.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide5-li-2 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide5-icon2.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide5-li-3 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide5-icon3.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide5-li-4 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide5-icon4.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide5-li-5 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide5-icon5.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide6-li-1 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide6-icon1.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide6-li-2 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide6-icon2.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide6-li-3 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide6-icon3.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide6-li-4 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide6-icon4.png) no-repeat center;
  background-size: cover;
}

.main-section-4 .section-guide-li .guide6-li-5 {
  background:
    url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/saas/section3-guide6-icon5.png) no-repeat center;
  background-size: cover;
}

.free-service {
  margin-top: 100px;
}