﻿
body{
  background-color: #fff;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #fff;

}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #fff;

}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}
a{
	transition:all 500ms ease;
}

.index-main{
  position: relative;
  height:520px;
  overflow: hidden;
  background: #f3f6fb;
}
.index-main .bg{

}
.index-main .bg img{
  display: block;
}
.banner{
  width:1300px;
  min-width: 1300px;
  position:absolute;
  left: 50%;
  margin-left: -650px;
  color: #fff;
  top: 0;
  height: 100%;
  
}
.banner .start{
  background: #70fafb;
  border-radius: 50px;
  width: 5px;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: 0 0 4px #70fafb;
  -webkit-filter: blur(1px);
filter: blur(1px);

}
.earth{
  display: none;
}
.banner-active{
  display: block;
}
.banner-media{
  width:1920px;
  position: absolute;
  top: 0;
  text-align: right;
  right: 0;
  margin-left: -960px;
}
.earth{
  width:1920px;
  position: absolute;
  bottom: 0;
  text-align: right;
  left: 50%;
  margin-left: -960px;
}
.earth img{
  float: right;
}
.rotate{
  position: absolute;
  right:0;
  width:626px;
  height: 533px;
  transform-origin:center;
  animation:turn 30s linear infinite;
  top: 60px;
}
.line-btn{
  width: 76px;
  height: 25px;
  border-radius: 2px;
  border:1px solid #fff;
  line-height: 26px;
  text-align: center;
  color:#fff;
  float: left;
  margin-right:30px;
  margin-left:20px;
  cursor: pointer;
}
@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
.title-line{
  padding-top:200px;
  position: relative;
  z-index: 2;
}
.title-line p{
  color:#666;
  font-size: 14px;
}
.title-line .title-line-fir{
  font-size:36px;
  line-height: 60px;
  opacity: 1;
  color: #000;
}
.title-line-sec{
  font-size:18px;
  margin-top:10px;
}
.title-line-link{
  border-radius: 2px;
  width:120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin-top:25px;
  display: block;
  font-size: 14px;
  color: #fff;
  background: #2468f2;
}
.title-line-link:hover{
  color: #fff;
  background: #3675f3;
}
.index-footer{
  height: 62px;
  width: 100%;
  background-color: #fff;
  box-shadow:0px 4px 8px 0px rgba(184, 184, 184, 0.22) ;
  position: relative;
  z-index: 100;
  padding-top:23px;
}
.index-footer ul{
  width:1200px;
  margin: auto;
  height: 30px;
}
.index-footer ul li{
  float: left;
  color: #333;
  width: calc(25% - 99px);
  padding-left: 99px;
}
.index-footer ul li.llast{
  background:none;
}
.index-footer ul li .media{
  float: left;
  margin-right:10px;
  margin-top: 5px;
}
.index-footer ul li .info{
  float: left;
  line-height: 18px;
  font-size: 14px;
  
}
.index-footer ul li .info .tt{
  font-size: 14px;
}
.index-footer ul li .info .num{
	color: #666;
}
/* å†…å®¹åŒº */
.main{
  
}
.mainbox{
  width: 1200px;
  margin: auto;
}
.main-nav{
  display: flex;
  height: 110px;
  padding-top:0px;
}
.main-nav li{
  flex: 1;
  display: flex;
  padding:20px 0;
  /*background-color: #fff;*/
  /*box-shadow:0px 3px 13px 0px rgba(184, 184, 184, 0.22);*/
}
.main-nav li img{
  width:40px;
  height: 40px;
  margin-left:30px;
  margin-right:15px;
  margin-top: 10px;
}
.main-nav li div{
  flex: 1;
  padding-left: 35px;
}
.main-nav li div p{
  font-size:12px;
  color: #888;
}
.main-nav li div .title{
  font-size:16px;
  line-height: 16px;
  color:#000;
  font-weight: 600;
  margin-top:0px;
  margin-bottom: 10px;
}
.main-nav li div .title .mark{
	background: #ff791a;
	border-radius: 2px;
	color: rgba(255,255,255,0.85);
	font-weight: normal;
	font-size: 14px;
	padding: 0 3px;
}
.main-title{
  text-align: center;
}
.main-title-h{
  font-size: 18px;
  padding-top:50px;
}
.main-title .exp{
  font-size: 14px;
  margin-top: 5px;
  color: #888;
}
.room{
  display:flex;
  margin-top:30px;
}
.room-left{
  width:188px;
  height: 380px;
  padding:20px;
  border-radius: 2px;
  border:1px solid #ffffff;
  background: #2a3496 url(../image/roomleftbg.png) no-repeat right bottom;
  color:#fff;
}
.room-type{
  overflow: hidden;
  opacity: 0.8;
}
.room-area{
  padding-bottom: 10px;
  border-bottom: 1px #363f9b solid;
  margin-bottom: 10px;
}
.room-area-llast{
  border-bottom: none;
}
.room-left-title{
  font-size:16px;
  line-height: 30px;
  font-weight: 600;
}
.room-left-title a{
  color: #fff;
}
.room-left-title a:hover{
  padding-left: 10px;
}
.room-left-title span{
  margin-left:12px;
}
.room-type a{
  line-height: 22px;
  color: #fff;
  margin-right: 10px;
  overflow: hidden;
  display: block;
  height: 22px;
  float: left;
  width: 52px;
}
.room-type a:hover{
  color: #fff;
  text-decoration: underline;
}
.room-right{
  flex: 1;
  margin-left:25px;
  display: flex;
  flex-wrap: wrap;
}
.right-type{
  width:calc((100% - 196px) / 3);
  height: 160px;
  border-radius: 2px;
  margin-right:20px;
  box-shadow: 0px 3px 13px 0px rgba(184, 184, 184, 0.22) ;
  background-color: #fff;
  position: relative;
  padding:20px 26px;
  margin-bottom: 20px;
  transition: all ease 500ms;
}
.right-type:hover{
  box-shadow: 0px 3px 13px 0px rgba(184, 184, 184, 0.52) ;
}
.right-type:nth-child(3n+3){
  margin-right:0;
}
.type-line{
  line-height: 25px;
  font-size:12px;
  color:#888;
}
.type-line span{
  margin-right:20px;
  display: inline-block;
}
.type-line span:last-child{
  margin-right: 0;
}
.type-title{
  font-size:16px;
  line-height: 30px;
  color:#000000;
  font-weight: 400;
  margin-bottom: 10px;;
}
.type-title span{
  color:rgba(0,0,0,0.85);
  font-size:12px;
  font-weight: 400;
}
.price{
  padding-top:15px;
  margin-top:10px;
  border-top:1px solid #f0f0f0;
  display: flex;
}
.price-text{
  flex: 1;
  font-size:14px;
  line-height: 24px;
  color:rgba(0,0,0,0.65);
}
.price-text span{
  color:#2a3496;
  font-size: 16px;
}
.pay-btn a{
  display: block;
  width:76px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border:1px solid #f6f6f6;
  border-radius: 2px;
  cursor: pointer;
  color:rgba(0,0,0,0.65)
}
.pay-btn a:hover{
  background-color:#2a3496 ;
  color:#fff;
}
.advantage{
  background:#fafbfe url(../image/scrbg.jpg) no-repeat bottom center;
  margin-top: 40px;
  padding-bottom: 50px;
  background-size: cover;
}
.advantagebox{
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.items{
  width: 100%;
  box-shadow: 0px 3px 13px 0px rgba(184, 184, 184, 0.22) ;
  height:200px ;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  margin-top:30px;

}
.item{
  flex: 1;
  padding:30px;
  text-align: center;
}
.item img{
margin-bottom: 5px;;
}
.item-title{
  font-size:16px;
  line-height: 36px;
  color:#000
}
.item-text{
  font-size:12px;
  line-height:24px ;
  color:#888;
}
.show-deal{
  width:100%;
  height: 500px;
  padding-top:45px;
  background: url('../image/bg.jpg') no-repeat center bottom;
  background-size: 100% 350px;
}
.show-main{
  width: 1200px;
  margin: 0 auto;
}
.show-main-title{
  text-align: center;
  font-size:18px;
  line-height: 30px;
  color:#000;
}
.show-next-title{
  font-size:14px;
  color:#888;
  line-height: 30px;
  text-align: center;
}
.show-list{
  width: 700px;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  border-radius: 2px;
  margin: 30px auto 0;
}
.show-list li{
  float: left;
  height:50px;
  line-height: 50px;
  font-size:14px;
  color:000;
  padding:0 20px;
  margin-left:10px;
  margin-right:10px;
  cursor: pointer;
  position: relative;
}
.show-list li.active{
  
}
.show-list li.active::after{
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #2468f2;
  position: absolute;
  bottom: 0px;
  left: 0;
}
.show-item-title{
  font-size:18px;
  line-height: 30px;
  color:#000;
  margin-top:50px;
}
.show-item-text{
  font-size:12px;
  color:#888;
  opacity: 0.8;
}
.show_next-title{
  font-size:16px;
  color:#000;
  margin-top:50px;
}
.show-item-texts{
  display: flex;
}
.show-item-text-text{
  color:#888;
  flex: 1;
  opacity: 0.8;
}
.show-item-text_imgs{
  width:526px;
  margin-left:85px;
  display: flex;
  flex-wrap: wrap;
  display: none;
}
.show-item-text_imgs img{
  width: 120px;
  height: 40px;
  margin-right: 50px;
  margin-bottom: 10px;
}
.rules{
  background: #fff;
  height: 265px;
  padding-top:50px;
  padding-bottom: 30px;
}
.rules .main{
  background: none;
  width: 1200px;
  margin: 0 auto;
}
.rules .main-title-h,.hours .main-title-h,.map .main-title-h{
  padding-top: 0;
}
.rule-items{
  display: flex;
  margin-top:30px;
}
.rule-item{
  flex: 1;
  text-align: center;
  border-radius: 2px;
  margin-right: 20px;
  padding:20px 0;
  box-shadow: 0px 3px 13px 0px rgba(184, 184, 184, 0.22);
  transition: all ease 500ms;
}
.rule-item:hover{
  box-shadow: 0px 3px 13px 0px rgba(184, 184, 184, 0.42);
  transform: translateY(-10px);
}
.rule-item:last-of-type{
  margin-right: 0;
}
.rule-item img{
  width:120px;
  height: 60px;
}
.rule-item p{
  line-height: 36px;
  font-size:12px;
  color:rgba(0,0,0,0.85)
}
.hours{
  padding-top:50px;
  background:#fafbfe;
  padding-bottom: 50px;
  overflow: hidden;
  position: relative;
  background-size: cover;
}

.hours .main{
  background: none;
  width: 1200px;
  margin: 0 auto;
}
.hour-items-line{
  display: flex;
  margin-top:30px;
}
.hour-item-line{
  flex: 1;
  display: flex;
  padding:30px;
  background-color: #fff;
  position: relative;
  box-shadow: 0px 3px 13px 0px rgba(184, 184, 184, 0.22)
}
.hour-item-line-text{
	position: relative;
	z-index: 1;
}
.hour-item-line-img{
  position: absolute;
  right:10px;
  bottom: 0;
}
.hour-item-line-img img{
	display: block;
}
.hour-item-line-text-title{
  font-size:16px;
  line-height: 30px;
}
.hour-item-line-text_t{
  color: #666;
  font-size: 14px;
  padding-right: 50px;
}
.map{
  background: #fff;
  padding-top:50px;
}
.map .main{
  background: none;
  width: 1200px;
  margin: 0 auto;
}
.map-show{
  height: 520px;
  margin-top:50px;
}

.c-map-wrap{
  position: relative;
  width: 1000px;
  margin: 0 auto;
}
.c-map-dot-list{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  left: 0;
}
.c-map-dot{
  position: absolute;
  width: 20px;
  height: 20px;
  -webkit-box-shadow: inset #2468f2 0 0 5px;
  box-shadow: inset #2468f2 0 0 5px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f7f8fa;
}
.c-map-dot, .c-map-dot-explain-txt{
  display: inline-block;
  vertical-align: middle;
}
.c-map-dot-layer {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4px 0 0 -4px;
  background-color: #2468f2;
  border-radius: 300px;
  cursor: pointer;
  opacity: 1;
}
.c-map-dot-layer:after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  -webkit-box-shadow: inset #2468f2 0 0 5px;
  box-shadow: inset #2468f2 0 0 5px;
  border-radius: 300px;
  top: 0;
  left: 0;
  opacity: 0;
}
.c-map-dot-text {
  position: absolute;
  left: 100%;
  top: 0;
  padding-left: 5px;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  white-space: nowrap;
}
.c-map-dot-text.left {
  left: auto;
  right: 100%;
  padding-left: 0;
  padding-right: 5px;
}
.c-bubble {
  position: absolute;
  color: #404A58;
  z-index: 6;
}
.c-map-bubble {
  left: 50%;
  bottom: 100%;
  margin-left: -100px;
  margin-bottom: 10px;
  width: 200px;
  text-align: center;
  -webkit-transition: .3s all ease-out;
  transition: .3s all ease-out;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
  cursor: default;
  pointer-events: none;
}
.c-bubble-inner {
  font-size: 12px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #b3b7bf;
  border-radius: 2px;
  background-color: #fff;
  line-height: 18px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.15);
  position: static !important;
  left: 50%;
  top: 50%;
}
.c-map-bubble .c-bubble-inner {
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  text-align: left;
  border-color: #555dab;
  font-size: 14px;
  line-height: 24px;
  color: #333;
}
.c-bubble .c-bubble-inner:after, .c-bubble .c-bubble-inner:before {
  font-size: 0;
  position: absolute;
  width: 0;
  height: 0;
  content: '';
  border: 8px dashed transparent;
}
.c-bubble-bottom .c-bubble-inner:after, .c-bubble-bottom .c-bubble-inner:before {
  top: 100%;
  left: inherit;
  right: inherit;
  margin-top: -1px;
  border-top-style: solid;
}
.c-bubble-bottom .c-bubble-inner:before {
  margin-left: -8px;
  border-top-color: #b3b7bf;
}
.c-map-bubble .c-bubble-inner:before {
  border-top-color: #555dab;
}
.c-map-bubble .title {
  margin-bottom: 5px;
  color: rgba(51,51,51,.8);
  font-weight: 400;
}
.c-bubble .c-bubble-inner:after {
  border: 7px dashed transparent;
}
.c-bubble-bottom .c-bubble-inner:after {
  margin-left: -7px;
  border-top-color: #fff;
}
.c-map-dot.animate.select .c-map-dot-layer:after {
  -webkit-animation: warn-2 ease-out 1s infinite;
  animation: warn-2 ease-out 1s infinite;
}
.c-map-dot.animate:hover .c-map-dot-layer:after {
  -webkit-animation: warn-2 ease-out 1s infinite;
  animation: warn-2 ease-out 1s infinite;
}
@-webkit-keyframes warn-2{
  0%{
    opacity:0;

  }
  5%{
    opacity:8
  }
  to{
    opacity:0;
    -webkit-transform:scale(20);
    transform:scale(20)
  }
}
@keyframes warn-2{
  0%{
    opacity:0;

  }
  5%{
    opacity:8
  }
  to{
    opacity:0;
    -webkit-transform:scale(20);
    transform:scale(20)
  }
}
#stars{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  background:rgba(255,255,255,0);/*å…³é”®ç‚¹*/
}
.type-l{
  width: 45%;
}
.productlist{
  margin-top: 30px;
  margin-bottom: 40px;
}
.productlist .list{
  display: none;
  box-shadow:0px 0px 8px rgba(228, 228, 228, 0.35);
}
.productlist .lists{
  display: block;
}
.productlist .list li{
  float: left;
  width: 300px;
  padding: 30px;
  cursor: pointer;
  position: relative;
  background-size: 100% 100%;
  margin-left: -1px;
  background: #fff;
  box-shadow:0px 3px 13px 0px rgba(184, 184, 184, 0.22);
}
.productlist .list li .mark{
  position: absolute;
  right:-4px;
  z-index: 10;
  top: -4px;
}
.productlist .list li:hover{
  float: left;
  padding: 30px;
  box-shadow:0px 0px 30px 0px rgba(184, 184, 184, 0.5);
  z-index: 11;
  position: relative;
}
.productlist .list li .title{
  font-size: 16px;
}
.productlist .list li .exp{
  color: #888;
}
.productlist .list li .con{
  line-height: 30px;
  margin-top: 15px;
}
.productlist .list li .iprice{
  margin-top: 16px;
  padding-top: 20px;
  font-size: 14px;
  color: #666;
  border-top: 1px #efefef solid;
}
.productlist .list li .iprice .num{
  font-size: 16px;
  color: #ff791a;
}
.productlist .list li .iprice .num .c{
	font-size: 12px;
}
.productlist .list li .handdle{
  text-align: center;
  float: right;
}
.productlist .list li .handdle a{
  background: #fff;
  border: 1px #efefef solid;
  border-radius: 2px;
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  color: #333;
}
.productlist .list li .handdle a:hover{
 background: #ffa723;
  color: #fff;
  /*border: 1px #4d86ff solid;*/
}
.producttab
{
		text-align: center;
		margin-top: 30px;
		color: #666;
}
.producttab .li
{
		border: 1px #dfdfdf solid;
		background: #fff;
		border-radius: 2px;
		display: inline-block;
		cursor: pointer;
		width:120px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		margin-right: 7px;
		font-size: 14px;
		color: #000;
}
.producttab .lis
{
		color: #fff;
		/*border: 1px #4d86ff solid;*/
		background: #ffa723;
}

.show-item-box{
  display: none;
}
.show-item-boxs{
  display: block;
}
@media screen and (max-width: 768px) {
    .main-nav{
        display: none;
    }
    .main-title{
        display: none;
    }
    .producttab{
        text-align: justify;
        padding: 10px;
        margin-top: 0px
    }
    .productlist .list li{
            float: none;
            width: 373px;
            margin: 0 10px;
    }
}