.banner {
  padding: 0;
}
header{
  background: #01c1b4;
}
.banner {
  background: #09de9b;
  background: -webkit-linear-gradient(bottom, #02c1b7, #04cb95);
  background: linear-gradient(to bottom, #02c1b7, #04cb95)
}


.banner article {
  height: 703px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  max-width: 1242px;
  font-size: 0;
}

@media screen and (max-width:1080px) {
  .banner article {
    height: 530px
  }
}

.banner .slogen {
  position: absolute;
  left: 0px;
  top: 225px;
  z-index: 1;
  text-align: left
}

.banner .slogen .hidden-mb {
  display: initial
}

@media screen and (max-width:1340px) {
  .banner .slogen {
    left: 70px
  }
}

@media screen and (max-width:1080px) {
  .banner .slogen {
    position: static;
    text-align: center;
    padding-top: 40px
  }

  .banner .slogen .hidden-mb {
    display: none
  }
}

@media screen and (max-width:330px) {
  .banner .slogen {
    padding-top: 0
  }
}

.banner .slogen p {
  color: #fff
}

.banner .slogen p:nth-child(1) {
  font-size: 32px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFF;
  line-height: 48px
}

@media screen and (max-width:1080px) {
  .banner .slogen p:nth-child(1) {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
    line-height: 36px
  }
}

.banner .slogen p:nth-child(2) {
  margin-top: 20px;
  max-width: 480px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFF;
  line-height: 28px
}

@media screen and (max-width:1080px) {
  .banner .slogen p:nth-child(2) {
    margin-left: auto;
    margin-right: auto
  }
}

@media screen and (max-width:1080px) {
  .banner .slogen p:nth-child(2) {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFF;
    line-height: 28px
  }
}

.banner .slogen .buttons {
  margin-top: 52px
}

@media screen and (max-width:1080px) {
  .banner .slogen .buttons {
    margin-top: 30px
  }
}

.banner .slogen .buttons .btn {
  margin: 10px
}

.banner .banner-img {
  width: 554px;
  height: 502px;
  float: right;
  margin-top: 140px;
  /* margin-right: 150px; */
}

.demoPrice {
  padding-top: 65px;
  padding-bottom: 0
}
.demoPrice-container{
  width: 1365px;
  padding: 0 55px;
  margin: 0 auto;
  position: relative;
}

.demoPrice .swiper-container {
  padding: 80px 25px;
}

.demoPrice .demoPriceItems .demoPriceItem {
  min-height: 260px;
  box-shadow: 0 04px 20px #dfe0e3;
  border-radius: 2px;
  background: #FFF;
  box-sizing: border-box;
  padding: 30px 35px 0 30px;
  text-align: left;
  margin:0 auto;
}


.demoPrice .demoPriceItems .demoPriceItem .wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.demoPrice .demoPriceItems .demoPriceItem .wrap img {
  width: 52px
}

.demoPrice .demoPriceItems .demoPriceItem .wrap p:nth-of-type(1) {
  margin-top: 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 38px
}

.demoPrice .demoPriceItems .demoPriceItem>p:nth-of-type(1) {
  margin-top: 4px;
  line-height: 25px;
  font-size: 12px
}
.demoPrice .swiper-button-next,.demoPrice .swiper-button-prev{
  width: 50px;
  height: 50px;
  border-radius:50%;
  line-height: 50px;
  text-align: center;
  box-shadow: 0 0 20px #ccc;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
.demoPrice .swiper-button-next::after,.demoPrice .swiper-button-prev::after{
  font-size: 16px;
  color: #333;
}



.openBox{
  width: 100%;
  height: 230px;
  background: url('../images/douyin/main-footbj.jpg') no-repeat center center;
}
.openBox .openBox_title{
  padding: 60px 0 32px;
  text-align: center;
  font-size: 24px;
  color: #fff;
}
.openBox .btn{
  display: block;
  background: #fff;
  width: 193px;
  height: 43px;
  text-align: center;
  line-height: 43px;
  margin: 0 auto;
  font-size: 16px;
  color: #0ccc97;
  border-radius: 7px;
}
.openBox .btn a{
  color: #0ccc97;
}
#hotel .page1 {
  background: #fff;
  padding-top: 100px
}

#hotel .page1 .cards {
  padding: 60px 0;
  font-size: 0;
  text-align: center;
  position: relative;
  margin: 0 auto;
  max-width: 1242px
}

#hotel .page1 .cards .detail {
  height: 85px;
  text-align: justify !important
}

@media screen and (max-width:1300px) {
  #hotel .page1 .cards .detail {
    height: 85px
  }
}

@media screen and (max-width:1080px) {
  #hotel .page1 .cards {
    margin-top: 35px
  }
}

#hotel .page1 .cards li {
  background: #f8fbfd;
  width: 23%;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  padding-left: 3%;
  padding-top: 30px;
  padding-right: 3%;
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1%;
  margin-top: 0
}

#hotel .page1 .cards li .h2 {
  line-height: 32px
}

#hotel .page1 .cards li .h6 {
  line-height: 25px
}

#hotel .page1 .cards li:nth-of-type(6) {
  opacity: 0
}

#hotel .page1 .cards li:nth-of-type(6) .btn {
  display: none
}

@media screen and (max-width:1080px) {
  #hotel .page1 .cards li {
    width: 100%;
    padding: 30px 15px 30px 95px;
    min-height: auto;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 20px
  }
}

#hotel .page1 .cards li:nth-child(n) {
  border-left: 0
}

@media screen and (max-width:1080px) {
  #hotel .page1 .cards li:nth-child(n) {
    border-left: 0
  }
}

#hotel .page1 .cards li .icon {
  margin-top: 5px;
  width: 56px;
  height: 56px
}

@media screen and (max-width:1080px) {
  #hotel .page1 .cards li .icon {
    position: absolute;
    left: 20px;
    top: 30px;
    width: 50px;
    height: 50px;
  }
}

#hotel .page1 .cards li p {
  text-align: center
}

#hotel .page1 .cards li p:nth-of-type(1) {
  margin-top: 20px;
  font-weight: 500;
  line-height: 32px;
  color: #2e4446
}

#hotel .page1 .cards li p:nth-of-type(2) {
  margin-top: 18px;
  height: 85px;
  color: #6c7c7d;
  overflow: hidden;
  text-align: left;
  margin-bottom: 18px
}

@media screen and (max-width:1340px) {
  #hotel .page1 .cards li p:nth-of-type(1) {
    font-size: 15px;
    margin-top: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #2e4446
  }

  #hotel .page1 .cards li p:nth-of-type(2) {
    margin-top: 5px;
    color: #6c7c7d;
    text-align: left
  }
}

@media screen and (max-width:1080px) {
  #hotel .page1 .cards li p:nth-of-type(1) {
    margin-top: 0;
    font-weight: 500;
    line-height: 30px;
    color: #2e4446;
    text-align: left
  }

  #hotel .page1 .cards li p:nth-of-type(2) {
    margin-top: 5px;
    line-height: 28px;
    color: #6c7c7d;
    text-align: left
  }
}

#hotel .page1-m {
  background: #fff;
  display: none
}

@media screen and (max-width:1080px) {
  #hotel .page1-m {
    padding-top: 40px;
    display: block
  }
}

#hotel .page1-m .panel-group .panel {
  text-align: left;
  margin: 4%;
  background-color: #f8fbfd;
  border: 0
}

#hotel .page1-m .panel-group .panel .h3 {
  line-height: 30px;
  color: #2e4446;
  padding-top: 25px
}

#hotel .page1-m .panel-group .panel .h4 {
  line-height: 40px;
  margin-bottom: 30px;
  color: #6c7c7d
}

#hotel .page1-m .panel-group .panel .h6 {
  line-height: 28px;
  color: #6c7c7d
}

#hotel .page1-m .panel-group .panel .panel-heading {
  color: #333;
  background-color: #f8fbfd;
  border: 0
}

#hotel .page1-m .panel-group .panel .panel-heading .collapsed .title {
  width: 100%;
  height: 35px
}

#hotel .page1-m .panel-group .panel .panel-heading .collapsed .title span {
  width: 30%;
  float: right;
  text-align: right;
  padding-top: 10px
}

#hotel .page1-m .panel-group .panel .panel-heading .collapsed .title span i {
  width: 15px;
  height: 15px;
  background: url(../images/hotel/open_8c1af93.png);
  float: right;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 2px
}

#hotel .page1-m .panel-group .panel .panel-heading .collapsed .title .mtitle {
  float: left;
  font-size: 16px;
  font-weight: 300;
  padding-top: 5px;
  padding-left: 5px;
  line-height: 25px
}

#hotel .page1-m .panel-group .panel .panel-heading .collapsed .title .mtitle img {
  float: left;
  height: 25px;
  width: 25px;
  margin-right: 15px
}

#hotel .page1-m .panel-group .panel .panel-heading .title {
  width: 100%;
  height: 40px
}

#hotel .page1-m .panel-group .panel .panel-heading .title span {
  width: 30%;
  float: right;
  text-align: right;
  padding-top: 14px
}

#hotel .page1-m .panel-group .panel .panel-heading .title span i {
  width: 15px;
  height: 15px;
  background: url(../images/hotel/close_e081ee0.png);
  float: right;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 2px
}

#hotel .page1-m .panel-group .panel .panel-heading .title .mtitle {
  float: left;
  font-size: 16px;
  font-weight: 300;
  padding-top: 5px;
  padding-left: 5px;
  line-height: 25px
}

#hotel .page1-m .panel-group .panel .panel-heading .title .mtitle img {
  float: left;
  height: 25px;
  width: 25px;
  margin-right: 15px
}

#hotel .page1-m .panel-group .panel .panel-body {
  font-size: 14px;
  line-height: 25px;
  color: #6c7c7d;
  border: 0
}

#hotel .page1-m .collapse-icon {
  width: 15px;
  height: 15px;
  background: url(../images/hotel/open_8c1af93.png)
}
#hotel .page2{
  background:#f7fbfd;
  padding-bottom: 80px;
}
#hotel .page2 .swiper-select {
  margin-bottom: 30px
}
#hotel .page2 .swiper-navs {
  margin:55px auto 0;
  white-space: nowrap;
  font-size: 0;
  text-align: center
}

#hotel .page2 .swiper-nav {
  cursor: pointer;
  width: 245px;
  display: inline-block
}

#hotel .page2 .swiper-nav:hover span {
  color: #04cb94
}

#hotel .page2 .swiper-nav span {
  padding: 0 20px;
  font-size: 16px;
  line-height: 24px;
  color: #475669;
  -webkit-transition: all .1s;
  transition: all .1s
}

#hotel .page2 .swiper-nav .hr {
  margin-top: 15px;
  width: 100%;
  height: 1px;
  background-color: #c8d2e0;
  border-radius: 3px
}

#hotel .page2 .swiper-nav.active span {
  position: relative;
  color: #04cb94
}

#hotel .page2 .swiper-nav.active .hr {
  background-color: #04cb94;
  height: 3px;
  margin-top: 14px
}

#hotel .page2 .swiper-select{
  display: none !important;
}

#hotel .page2 .swiper-select .select_show {
  width: 120px;
  padding: 0 15px 5px;
  margin: 0 auto;
  border-bottom: 1px solid #C8D2E0;
  position: relative;
  font-size: 0;
  cursor: pointer
}

#hotel .page2 .swiper-select .select_show.open i {
  -webkit-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg)
}

#hotel .page2 .swiper-select .select_show.open ul {
  display: block
}

#hotel .page2 .swiper-select .select_show span {
  font-size: 14px;
  line-height: 28px;
  color: #1f2d3d
}

#hotel .page2 .swiper-select .select_show i {
  float: right;
  margin-top: 10px;
  width: 12px;
  height: 7px;
  background: url(../images/hotel/arrow-bottom_ed88b45.png) no-repeat center / contain;
  -webkit-transition: all .2s;
  transition: all .2s
}

#hotel .page2 .swiper-select .select_show ul {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: #fff;
  text-align: left;
  font-size: 14px;
  line-height: 28px;
  color: #1f2d3d;
  box-shadow: 0 0 20px 0 rgba(153, 169, 191, .21);
  z-index: 10;
  border-top: 1px solid #C8D2E0;
  padding: 3px 0;
  display: none
}

#hotel .page2 .swiper-select .select_show ul li {
  position: relative;
  padding: 7px 0;
  padding-left: 10px
}

#hotel .page2 .swiper-select .select_show ul li.active {
  background: #F8FBFD
}

#hotel .page2 .swiper-select .select_show ul li.active::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 10px;
  background: url(../images/hotel/select_9f138d2.png) no-repeat center / cover;
  right: 10px;
  top: 50%;
  margin-top: -5px
}
#hotel .page2 .nowrap-title{
  font-size: 24px;
  line-height: 1;
  color: #333;
  padding: 83px 0 54px 130px;
  text-align: center;

}
#hotel .page2 .nowrap ul{
  width: 980px;
  margin:0 auto ;
  display: flex;
  justify-content: space-between;
}
#hotel .page2 .nowrap ul li{
  height: 350px;
  border-radius: 10px;
  border: 2px dashed #04c99c;
  text-align: center;
  overflow: hidden;
}
#hotel .page2 .nowrap ul li .item-img{
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin: 50px auto 10px;
}
#hotel .page2 .nowrap ul li .item-img img{
  max-width: 100%;
  vertical-align: middle;
}
#hotel .page2 .nowrap ul li .item-title{
  font-size: 18px;
  color: #333;
  text-align: center;
}
#hotel .page2 .nowrap ul li .item-tips{
  padding: 30px 25px;
}
#hotel .page2 .nowrap ul li .item-tips p {
  font-size: 14px;
  line-height: 2;
  color: #333;
}
#hotel .page2 .nowrap ul.three li{
   width: 255px;
}
#hotel .page2 .nowrap ul.fore li{
  width: 212px;
}
#hotel .page2 .nowrap ul.fore li .item-title{
  text-align: center;
  padding:40px 25px 0;
}
#hotel .page2 .nowrap ul.five li{
  width: 212px;
}

.page3 .container{
  border-bottom: 4px solid #03cb94;
  padding-top: 85px;
}
.page3 .container li{
  width: 25%;
  float: left;
  margin-bottom: 73px;
  height: 62px;
}
.page3 .container li img{
  margin-right: 18px;
  float: left;
}
.page3 .container li .page3_text{
  width: 184px;
  float: left;
}
.page3 .container li .page3_text p{
  font-size:18px;
  color: #333;
}
.page3 .container li .page3_text span{
  font-size: 14px;
  line-height: 2;
  color: #333;
}
.page3 .container li.btn{
  clear: both;
  display: block;
  text-align: center;
  width: 150px;
  height: 40px;
  line-height: 40px;
  float: none;
  margin: 85px auto 65px;
  color: #0ccc97;
  font-size: 16px;
  background: #e5faf4;
  border: 1px solid #03ce9a;
  border-radius: 2px;
}
.page3 .container li.btn:hover{
  background:#03ce9a;
}
.page3 .container li.btn a{
  color: #0ccc97;
}
.page3 .container li.btn:hover a{
  color: #fff;
}
.page4{
  background: #fff;
}
.page4 ul{
  width: 1242px;
  max-width: 100%;
  margin: 0 auto;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.page4 ul li{
  width: 123px;
  height: 123px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  background: #51c1f3;
}

.page4 ul li:nth-child(4){
  background: #47d38f;
}
.page4 ul li:nth-child(5){
  background: #47d38f;
}
.page4 ul li:nth-child(6){
  background: #47d38f;
}
@media screen and (max-width:768px) {
  .banner article {
    height: auto;
  }
  .banner .slogen{
    padding-top: 100px;
  }
  .banner .banner-img {
    width: 100%;
    height: auto;
    margin: 1.5rem auto 0;
    float: none;
  }
  #hotel .page1{
    padding-top: 1rem;
  }
  #hotel .page1 .cards{
    padding: 0;
  }
  .page3 .container{
    padding-top: 3rem;
  }
  .page3 .container li{
    width: 50%;
    text-align: center;
    height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .page3 .container li.btn a{
    font-size: 1.6rem;
  }
  .page4 ul {
    flex-wrap: wrap;
    padding: 3rem 15px;
     height: auto;
  }
  .page4 ul li{
    width: 28vw;
    height: 28vw;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }
  .openBox .openBox_title{
    font-size: 2rem;
  }
  .openBox .btn a{
    font-size: 1.4rem;
  }
  #hotel .page2 .swiper-nav{
    width: 20%;
  }
  #hotel .page2 .swiper-select .select_show{
    margin-top: 1.5rem;
  }
  .page2Box img{
    max-width: 100%;
  }
  #hotel .page2 .nowrap-title{
    font-size: 1.8rem;
    padding: 3rem 1rem 1rem;
    line-height: 1.6;
  }
  #hotel .page2 .nowrap{
    padding-bottom: 5rem;
  }
  #hotel .page2 .nowrap ul{
    flex-wrap: wrap;
    width: 100%;
  }
  #hotel .page2 .nowrap ul li,#hotel .page2 .nowrap ul.three li{
    margin-bottom:15px;
    width: 100%;
  }
  #hotel .page2 .nowrap ul.fore li,#hotel .page2 .nowrap ul.five li{
    width: 48%;
    margin-bottom:15px;
  }
  .page3 .container li img,.page3 .container li .page3_text{
    float: none;
    margin: 0;
  }
  .page3 .container li .item-img{
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  .page3 .container li .item-img img{
    vertical-align: middle;
  }
  .page3 .container li .page3_text{
    padding-top: 2rem;
  }
}
@media (max-width: 1300px) and (min-width: 770px){
	.page3 .container li{
		    display: flex;
		    align-items: center;
		    justify-content: center;
	}
	#hotel .page1 .cards{
		padding: 60px 33px;
	}
}