@charset "UTF-8";
.icon {
  width: 88px;
  height: 88px;
  fill: currentColor;
  overflow: hidden;
  margin: auto auto;
}
.hotelCloudPage .hotelCloudBanner{
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.hotelCloudPage .hotelCloudBanner .img-banner-link {
  display: block;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.hotelCloudPage .hotelCloudBanner .hotelCloudText {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #FFFFFF;
  line-height: normal;
  letter-spacing: 0.25px;
}
.hotelCloudPage .hotelCloudBanner .hotelCloudText .hotelCloud_h3 {
  font-weight: 400;
  font-size: 48px;
  margin-bottom: 15px;
}
.hotelCloudPage .hotelCloudBanner .hotelCloudText .hotelCloud_p {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 30px;
}

.hotelCloudPage .hotelCloudBanner .hotelCloudText .banner-btn {
  display: block;
  margin : 68px auto 0 auto;
  width: 144px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  border-radius: 2px;
  background: -webkit-linear-gradient(86.68deg, #3F7BAB 0%, #73B2D5 100%);
  background: -moz-linear-gradient(86.68deg, #3F7BAB 0%, #73B2D5 100%);
  background: -ms-linear-gradient(86.68deg, #3F7BAB 0%, #73B2D5 100%);
  background: -o-linear-gradient(86.68deg, #3F7BAB 0%, #73B2D5 100%);
  background: linear-gradient(86.68deg, #3F7BAB 0%, #73B2D5 100%);
}

.hotelCloudPage .hotelCloudBanner .hotelCloudText .banner-btn:hover{
  background: -webkit-linear-gradient(86.68deg, #73B2D5 0%,#3F7BAB 100%);
  background: -moz-linear-gradient(86.68deg, #73B2D5 0%,#3F7BAB 100%);
  background: -ms-linear-gradient(86.68deg, #73B2D5 0%,#3F7BAB 100%);
  background: -o-linear-gradient(86.68deg, #73B2D5 0%,#3F7BAB 100%);
  background: linear-gradient(86.68deg, #73B2D5 0%,#3F7BAB 100%);
}

/*专业的酒店方案*/
.hotelProgramContainer{
  position: sticky;
  margin: -130px 5.8% 0;
  z-index: 1000;
  background: #F7F7F8;
  padding: 0 6.5%;
}

.hotelProgramContainer .hotelProgramHeader .title{
  color: #333;
  font-size: 36px;
  margin-bottom: 50px;
  padding-top: 80px;
}

.hotelProgramContainer .hotelProgramContent{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
  padding-bottom: 80px;
}
.hotelProgramContainer .hotelProgramContent li{
  width: 30.8%;
  background: #fff;
  margin-left: 3.7%;
  margin-bottom: 70px;
}

.hotelProgramContainer .hotelProgramContent .programItem{
  margin-bottom: 0;
}

.hotelProgramContainer .hotelProgramContent li:nth-child(3n+1){
  margin-left: 0;
}

.hotelProgramContainer .hotelProgramContent li .icon-center{
  display: flex;
  margin-top: 73px;
  margin-bottom: 36px;
}

.hotelProgramContainer .hotelProgramContent li .programTitle{
  color: #333;
  font-size: 28px;
  margin-bottom: 16px;
  font-weight: 500;
}

.hotelProgramContainer .hotelProgramContent li .programContent{
  color: #666;
  font-size: 14px;
  margin-bottom: 74px;
}

/*精准的私域转化*/
.convertContainer{
  padding: 0 12.3%;
  margin-top: 80px;
}
.convertContainer .title{
  color: #333;
  font-size: 36px;
  margin-bottom: 50px;
}

.convertContent{
  display: flex;
  text-align: center;
  margin-bottom: 80px;
}

.convertContent li{
  margin-left: 1.7%;
  background: #F7F7F8;
  padding: 33px 1.5% 40px 1.6%;
}

.convertContent li:first-child{
  margin-left: 0;
}

.convertContent li .textContent{
  margin-top: 36px;
}
.convertContent li .textContent .textTitle{
  color: #333;
  font-size: 28px;
  margin-bottom: 16px;
}
.convertContent li .textContent .explain{
  color: #666;
  font-size: 16px;
}
.convertContent li .textContent .explain1{
  margin-bottom: 10px;
}

/*专业小程序解决方案*/
.appletsSolutionBackBox {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.bannerCenter {
  width: 100%;
}
.appletsSolutionBackBox .bannerCenter img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0);
}
.appletsSolutionBackBox .bannerText {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 150px;
}
.appletsSolutionBackBox .bannerText p:nth-of-type(1){
  color: #fff;
  font-weight: 400;
  font-size: 32px;
  margin-bottom: 15px;
}
.appletsSolutionBackBox .bannerText p:nth-of-type(2){
  color: #fff;
  font-weight: 500;
  font-size: 20px;
}

.appletsSolutionBackBox .bannerText .bannerBtn{
  display: block;
  margin : 68px auto 0 auto;
  width: 144px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  border-radius: 2px;
  background: linear-gradient(86.68deg, #3F7BAB 0%, #73B2D5 100%);
}

.solutionContentBox{
  height: 100%;
  z-index: 1;
  position: sticky;
  margin: -305px 12.3% 0;
}

.solutionContent{
  display: flex;
  width: 100%;
}

.solutionContent li{
  width: 22.975%;
  margin-left: 2.7%;
  text-align: center;
}
.solutionContent li:first-child{
  margin-left: 0;
}

.solutionContent li p{
  color: #FFFFFF;
  font-size: 16px;
  margin-bottom: 30px;
}

/*多样化的营销工具*/
.marketingToolsContainer{
  margin-top: 80px;
  margin-bottom: 100px;
  position: relative;
}

.marketingToolsContainer .marketingToolsBox{
  display: flex;
  width: 100%;
  height: 747px;
}

.marketingToolsContainer .marketingToolsBox .leftContent{
  width: 50%;
  height: 100%;
  background: linear-gradient(180deg, #3F7BAB 0%, #003350 100%);
  padding-left: 12.3%;
}


.marketingToolsContainer .marketingToolsBox .leftContent .line{
  margin-top: 249px;
  margin-bottom: 30px;
  width: 85px;
  height: 2px;
  background: #fff;
}

.marketingToolsContainer .marketingToolsBox .leftContent .title{
  color: #fff;
  font-size: 36px;
}

.marketingToolsContainer .marketingToolsBox .rightContent{
  width: 50%;
  background: url('../img/scenicArea/marketBack.png') no-repeat;
  height: 747px;
}

.contentBox{
  width: 50%;
  height: 65%;
  opacity: 0.8999999761581421;
  border: 11px solid #fff;
  position: absolute;
  left: 44.5%;
  top: 118px;
}

.contentBox .contentVal{
  margin-left: 157px;
  margin-top: 131px;
}

.contentBox .contentVal .title{
  color: #fff;
  font-size: 32px;
  margin-bottom: 40px;
}

.contentBox .contentVal .line{
  margin-bottom: 30px;
  width: 85.5px;
  height: 2px;
  background: #fff;
}

.contentBox .contentVal .describeContent{
  width: 355px;
  color: #fff;
  font-size: 24px;
  text-align: left;
}
.contentBox .contentVal .describeContent div{
  margin-bottom: 20px;
}
.contentBox .contentVal .describeContent div:last-child{
  margin-bottom: 0;
}

/*强大的会员管理系统，精细化营销*/
.memberContainer{
  padding: 0 12.3%;
}
.memberContainer .title{
  color: #333;
  font-size: 36px;
  margin-top: 80px;
  margin-bottom: 50px;
}

.memberBox{
  display: flex;
  text-align: center;
  margin-bottom: 80px;
  width: 100%;
}

.memberBox .listBox{
  width: 33.3%;
  margin-left: 1.8%;
  background: #F7F7F8;
  position: relative;
  padding-bottom: 68px;
}
.memberBox .listBox .img{
  display: flex;
  margin-top: 73px;
  margin-bottom: 36px;
}

.memberBox .listBox:first-child{
  margin-left: 0;
}

.memberBox .listBox .memberContent{
  margin-top: 30px;
}
.memberBox .listBox .memberContent .memberTitle{
  margin-bottom: 19px;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.memberBox .listBox .memberContent .memberList li{
  margin-bottom: 24px;
  color: #666;
  font-size: 16px;
}

.memberBox .listBox .memberContent .memberList li:last-child{
  margin-bottom: 0;
}

.memberBox .listBox .boxLine {
  width: 100%;
  height: 2px;
  background: #3F7BAB;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {
  .hotelProgramContainer{
    margin: -75px 5.8% 0 !important;
  }
  .convertContainer{
    padding: 0 6.5% !important;
  }
  .convertContainer .textTitle{
    font-size: 24px !important;
  }
}

@media screen and (max-width: 820px) {
  .hotelCloudPage .hotelCloudBanner .hotelCloudText .hotelCloud_h3 {
    font-size: 36px !important;
    margin-bottom: 20px !important;
  }

  .hotelCloudPage .hotelCloudBanner .hotelCloudText .hotelCloud_p {
    font-size: 16px !important;
    margin-bottom: 20px !important;
  }

  .hotelCloudPage .hotelCloudBanner .hotelCloudText .banner-btn {
    width: 120px !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 auto !important;
  }

  .hotelProgramContainer{
    margin: 0 !important;
    position: static !important;
    padding: 10px 10px !important;
  }

  .hotelProgramHeader .title{
    font-size: 24px !important;
    padding-top: 40px !important;
    margin-bottom: 10px !important;
  }

  .hotelProgramContent{
    display: block !important;
  }
  .hotelProgramContent li{
    width: 100% !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
  }

  .middle-box_center{
    padding: 20px 0 !important;
  }

  .hotelProgramContent li .icon-center{
    margin-top:0 !important;
    margin-bottom:20px !important;
  }

  .marketingToolsContainer{
    margin-bottom: 40px !important;
  }

  .marketingToolsBox{
    display: block !important;
    height: auto !important;
  }

  .marketingToolsBox .leftContent{
    width: 100% !important;
    padding-top: 30px !important;
    height: 200px !important;
    padding-left: 20px !important;
  }

  .marketingToolsBox .leftContent .line{
    margin-top: 0 !important;
  }

  .marketingToolsBox .rightContent{
    width: 100% !important;
    padding-top: 30px !important;
    height: 400px !important;
  }

  .contentVal{
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  .contentBox{
    width: 100% !important;
    height: auto !important;
    top: 220px !important;
    left: 0 !important;
    border: none !important;
    padding-left: 20px;
  }

  .hotelProgramContent{
    padding-bottom: 40px !important;
  }
  .convertContainer{
    margin-top: 40px !important;
    padding: 0 !important;
  }

  .convertContainer .title{
    font-size: 24px !important;
    margin-bottom: 0 !important;
    padding-left: 10px !important;
  }

  .convertContent{
    display: block !important;
    margin-bottom: 40px !important;
  }

  .convertContent li{
    margin-left: 0 !important;
    width: 100% !important;
    background: #fff !important;
  }

  .convertContent li:first-child{
    padding-top: 20px !important;
  }

  .memberContainer{
    padding: 0 !important;
  }

  .memberContainer .title{
    font-size: 24px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    padding-left: 10px !important;
  }

  .memberBox{
    display: block !important;
    margin-bottom: 40px !important;
  }

  .memberBox li{
    margin-left: 0 !important;
    width: 100% !important;
  }

  .memberBox li .img{
    margin-top: 20px !important;
  }
}

@media screen and (max-width: 568px) {
  .hotelCloudPage .hotelCloudBanner .hotelCloudText .hotelCloud_h3 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  .hotelCloudPage .hotelCloudBanner .hotelCloudText .hotelCloud_p {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  .hotelCloudPage .hotelCloudBanner .hotelCloudText .banner-btn {
    width: 100px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
  }

  .marketingToolsContainer .marketingToolsBox .title{
    font-size: 24px !important;
  }
  .marketingToolsContainer .contentBox .title{
    font-size: 22px !important;
  }
  .marketingToolsContainer .contentBox .describeContent{
    font-size: 16px !important;
  }
}