@charset "utf-8";
/* CSS Document */
html {
	height: 100%;
	overflow-y: visible;
}
body, ul, li, p, h1, h2, h3, h4, h5, h6, form {
	margin: 0;
	padding: 0;
	line-height: inherit
}
header, footer {
	display: block;
}

li {
	list-style: none;
}
a {
	text-decoration: none;
	color: #363839;
	border: none;
}
img {
	max-width: 100%;
	vertical-align: middle;
	border: none;
}
input[type="button"],input[type="submit"],input[type="reset"],input[type="text"],input[type="tel"],button,textarea{
	-webkit-appearance:none;
}
body {
	background: #ffffff;
	height: 100%;
	color: #363839;
	overflow-x: hidden;
	font-size: 14px;
	word-wrap: break-word;
	word-break: break-word;
	line-height: 1.5;
	-khtml-user-select: none;
    user-select: none;
}
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1001;
	transition: all 0.2s ease-out;
}
.none{
	display: none
}
.opacity{
	opacity: 0
}
.flex-box{
	display: flex;
	align-items: center;
}
.flex-between{
	display: flex;
	align-items: center;
	justify-content: space-between
}
.container{
	max-width: 1380px;
	margin: 0 auto;
	position: relative;
}
.poster{
	position: relative;
	width: 100%;
	height: 100%;
}
.poster img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.header-inner{
	padding: 24px 0
}
.navbar{
	display: flex;
	align-items: center;
}
.navbar li{
	padding-left: 40px;
}
.navbar a{
	color: rgba(255,255,255,0.8);
	font-size: 16px;
	position: relative;
	display: block;
	line-height: 24px;
	padding: 10px 0;
}
.navbar a::after{
	content: "";
	height: 0;
	width: 100%;
	bottom: 0;
	left: 0;
	position: absolute;
	z-index: 1;
	background: #ffffff;
	transition: all 0.3s ease-out;
	opacity: 0
}
.navbar .active a{
	color: rgba(255,255,255,1);
}
.navbar .active a::after,.navbar li:hover a::after{
	opacity: 1;
	height: 4px;
	border-radius: 4px;
}
.logo{
	display: block;
	background: url(../images/logo.png) no-repeat;
	width: 173px;
	height: 42px;
}
.head-bg{
	background: #ffffff;
}
.head-bg .logo{
	background: url(../images/f_logo.png) no-repeat;
	background-size: contain;
}
.head-bg .navbar a{
	color: #363839
}
.head-bg .navbar .active a::after,.head-bg .navbar li:hover a::after{
	background: #333;
}
.banner-video{
	position: relative;
    height: clamp(630px,47vw,920px);
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4addeb 0%, #c1eafa 100%) repeat scroll 0 0;
    overflow: hidden;
}
.banner-video::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	background: linear-gradient(to left,rgba(0,0,0,0.9),rgba(0,0,0,0));
	width: 80%;
	height: 100%;
}
.video-background{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    object-fit: cover;
    min-height: 800px;
}
.video-layer{
	position: absolute;
	top: clamp(100px,11vw,189px);
	left: 0;
	width: 100%;
	z-index: 2;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 2
}
.video-layer h2{
	font-size: clamp(24px,2.6vw,36px);
}
.left-tools{
	padding-top: 12px;
	align-items: flex-start;
}
.left-tools li{
	text-align: center;
	padding-right: 24px;
}
.video-layer .links{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3
}
.video-layer .links li{
	padding-top: 16px;
	text-align: center;
	position: relative
}
.video-layer .links .arrowL{
	position: relative;
	margin-top: clamp(16px,1.74vw,24px)
}
.video-layer .links .arrowL img{
	height: clamp(280px,25.87vw,357px)
}
.video-layer .links .arrowL::before{
	content: 'SCROLL';
	display: block;
	position: absolute;
	transform: rotate(-90deg);
	white-space: nowrap;
	top: 50%;
	right: 8px;
	letter-spacing: 2px;
}
.video-layer .links a{
	background: rgba(0,0,0,0.2);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-layer .phone{
	position: absolute;
	top: 36px;
	right: 86px;
  animation-name: float-bob;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes float-bob {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.abbg{
	background: url(../images/abbg.jpg) no-repeat center;
	background-size: cover;
}
.title-group{
	font-size: 16px;
	color: #000000;
	text-align: center;
	padding-top: clamp(72px,4.2vw,86px)
}
.title-group h2{
	font-size: clamp(24px,2.32vw,32px);
	font-weight: 500;
	padding-bottom: 8px;
}
.about-box{
	display: flex;
	align-items: center;
	padding-top: clamp(42px,3.13vw,60px);
	padding-bottom: clamp(130px,9.38vw,180px)
}
.about-video{
	position: relative;
	line-height: 0;
	flex-shrink: 0;
	width: clamp(600px,55.8vw,770px)
}
.about-video .iplay{
	position: absolute;
	bottom: 0;
	right: 0;
}
.about-intro{
	font-size: 16px;
	padding-left: clamp(60px,4.69vw,90px)
}
.about-intro .intro{
	padding-top: 12px;
}
.advantage{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:24px;
	padding-top: 40px;
}
.advantage li{
	display: flex;
	align-items: flex-start;
	font-weight: bold
}
.advantage li .icon{
	flex-shrink: 0;
	margin-right: 16px;
	width: clamp(36px,4.06vw,56px);
}
.advantage li h3{
	line-height: 32px;
	font-size: clamp(16px,1.26vw,18px);
	padding: 12px 0;
}
#popVideo{
	display: none;
}
.popmask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 1002;
}
.pop-video{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 1200px;
	height: 675px;
	z-index: 1005;
	border: 20px solid #ffffff;
	border-radius: 12px;
}
.pop-video video{
	width: 100%;
	height: 100%;
}
.pclose{
	position: absolute;
	top: -20px;
	right: -60px;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	z-index: 1;
	cursor: pointer;
}
.pclose::before{
	content: "";
	width: 32px;
	height: 3px;
	background: #ffffff;
	position: absolute;
	top: 15px;
	right: 0;
	transform: rotate(45deg);
	z-index: 2;
}
.pclose::after{
	content: "";
	width: 32px;
	height: 3px;
	background: #ffffff;
	position: absolute;
	top: 15px;
	right: 0;
	transform: rotate(-45deg);
	z-index: 2;
}
.popular-swiper{
	padding-top: clamp(56px,4.17vw,80px);
	padding-bottom: clamp(110px,7.6vw,146px);
	position: relative
}
.popular-swiper .swiper-slide{
	width: auto !important;
}
.popular-swiper .swiper-pagination{
	bottom: clamp(56px,4.17vw,80px);
	right: 106px;
	left: auto;
	box-sizing: border-box;
	line-height: 46px;
	width: 68px;
	text-align: center;
}
.popular-swiper .swiper-button-next::after,.popular-swiper .swiper-button-prev::after{
	display: none
}
.popular-swiper .swiper-button-next{
	background: #ffffff url(../images/arrow.png) no-repeat center;
	background-size: 63px 14px;
	border: 1px solid rgba(0,0,0,0.08);
	width: 104px;
	height: 44px;
	border-radius: 24px;
	bottom: clamp(56px,4.17vw,80px);
	top: auto;
	right: 0;
}
.popular-swiper .swiper-button-prev{
	background: #ffffff url(../images/arrow.png) no-repeat center;
	background-size: 63px 14px;
	border: 1px solid rgba(0,0,0,0.08);
	width: 104px;
	height: 44px;
	border-radius: 24px;
	bottom: clamp(56px,4.17vw,80px);
	top: auto;
	left: auto;
	right: 174px;
	transform: rotateY(180deg)
}
.popular{
	width: clamp(1000px,88vw,1278px);
	overflow: hidden;
	padding-top: 6px;
}
.popular .poster{
	height: 100%;
	height: clamp(480px,45vw,626px);
	border-radius: 16px;
}
.popular-info{
	position: absolute;
	top: clamp(120px,11vw,158px);
	left: clamp(60px,5.22vw,72px);
	z-index: 5;
	color: #fff;
}
.popular-info .name{
	font-size: clamp(24px,2.6vw,36px);
	font-weight: bold;
}
.popular-info .stars{
	display: flex;
	align-items: center;
}
.popular-info .advs{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding-top: 24px;
	padding-bottom: 32px;
}
.popular-info .advs li{
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
	padding-right: 24px;
}
.popular-info .advs li .icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px dashed #ffffff;
	border-radius: 50%;
	flex-shrink: 0;
	margin-right: 16px;
}
.popular-info .advs li .icon img{
	width: auto;
	height: auto;
}
.capita-price{
	display: flex;
}
.capita-price .price{
	background: #D7AF8F;
	display: flex;
	align-items: flex-end;
	font-size: 14px;
	padding: 16px 16px;
	position: relative;
	z-index: 1
}
.capita-price .price::after{
	content: '';
	border-bottom: 1px solid #D7AF8F;
	border-right: 1px solid #D7AF8F;
	position: absolute;
	bottom: -5px;
	right: -5px;
	top: 6px;
	left: 0px;
}
.capita-price .price .num{
	font-size: 26px;
	font-weight: bold;
	line-height: 1.1;
}
.rank{
	position: absolute;
	top: 0;
	left: clamp(64px,3.75vw,72px);
	background: url(../images/rkbg.png) no-repeat;
	width: 94px;
	height: 91px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 8px;
	box-sizing: border-box;
	font-size: clamp(24px,2.32vw,32px);
	font-weight: bold;
	color: #6F3E1E;
	font-family: Arial," sans-serif"
}
.sdtd-box{
	position: relative;
	background: url(../images/sdbg.jpg) no-repeat center;
	background-size: cover;
	overflow: hidden;
}
.sdtd{
	display: flex;
	align-items: center;
	padding: 0 24px;
	padding-top: 48px;
	padding-bottom: clamp(80px,6vw,100px);
}
.promotion{
	display: flex;
	align-items: stretch;
	padding-top: clamp(56px,4.17vw,80px);
}
.promotion li{
	padding-right: clamp(56px,4.17vw,80px);
	text-align: center
}
.sdtd .left h2{
	font-size: 20px;
	font-weight: bold;
}
.sdtd .right{
	flex-shrink: 0
}
.statistics{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding-right: 80px;
	margin-top: 40px;
}
.statistics::before{
	content: '';
	background: url(../images/symbol.png) no-repeat;
	background-size: contain;
	width: 66px;
	height: 66px;
	position: absolute;
	top: 0;
	left: -80px;
}
.statistics::after{
	content: '';
	background: url(../images/symbol.png) no-repeat;
	background-size: contain;
	width: 66px;
	height: 66px;
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(180deg)
}
.statistics li{
	text-align: center;
}
.statistics li .num{
	font-size: clamp(24px,2.32vw,32px);
	font-weight: bold
}
.statistics .line{
	width: 1px;
	height: 32px;
	background: #D9D9D9;
	transform: rotate(8deg)
}
.sdimg{
	position: relative;
	z-index: 10;
	padding-right: 200px;
}
.sdimg .sdimg2{
	position: absolute;
	top: 40px;
	right: 0;
	z-index: -1
}
.orn{
	position: absolute;
	z-index: 0;
}
.orn1-1{
	position: absolute;
	top: clamp(56px,4.17vw,80px);
	right: clamp(56px,4.17vw,80px);
}
.orn1-2{
	position: absolute;
	bottom: clamp(56px,4.17vw,80px);
	left: clamp(12px,1.5vw,20px);
	transform: scale(0.7)
}
.orn2-1{
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(0.8) translate(-50%,-50%);
}
.orn2-2{
	position: absolute;
	top: 100%;
	left: 22%;
	transform:  translateY(-40%);
}
.orn1-1 img{
	display: block;
	animation-name: float-bob;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.orn1-2 img{
	display: block;
	animation: shake 12s linear infinite;
	animation-fill-mode: both;
	animation-delay:1s;
}
.orn2-1 img{
	display: block;
	animation: shake 15s linear infinite;
	animation-fill-mode: both;
	animation-delay:0s;
}
.orn2-2 img{
	display: block;
	animation-name: float-bob;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay:-1s;
}
.fbg{
	background: #F7F8FA;
}
.footer{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: clamp(36px,3.5vw,48px) 0;
	font-size: 16px;
	color: rgba(0,0,0,0.7)
}
.footer a{
	color: rgba(0,0,0,0.7);
	transition: all 0.2s ease-out
}
.footer a:hover{
	color: rgba(0,0,0,1)
}
.f-tools{
	display: flex;
	padding-top: clamp(24px,8.4vw,32px)
}
.copyright{
	padding-top: clamp(24px,8.4vw,32px)
}
.icp{
	padding-top: clamp(24px,8.4vw,32px)
}
.f-tools li{
	padding: 0 12px;
}
.ftbar{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(54,56,57,1);
	border-radius: 50%;
}
.tabs-box{
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	padding-top: clamp(52px,4.64vw,64px);
	z-index: 0;
}
.tabs-box::after{
	content: '';
	border-bottom: 1px solid rgba(0,0,0,0.08);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%
}
.tabs{
	display: flex;
	align-items: center;
	white-space: nowrap;
	justify-content: center;
}
.tabs li a{
	display: block;
	padding: 0 clamp(16px,1.5vw,24px);
	font-size: 16px;
	color: rgba(54,56,57,0.6);
	cursor: pointer;
	position: relative;
	line-height: clamp(40px,3.48vw,48px);
}
.tabs .active a{
	color: rgba(54,56,57,1);
}
.tabs .active a::after{
	content: '';
	border-left: 1px solid rgba(0,0,0,0.08);
	border-top: 1px solid rgba(0,0,0,0.08);
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: rotate(45deg);
	z-index: 10;
	background: #ffffff
}
.tab-filter{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 8px;
}
.tab-filter li{
	padding: 6px 16px;
}
.tab-filter a{
	display: block;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 4px;
	padding: 4px 32px;
	cursor: pointer;
}
.tab-filter .active a{
	background: #FF5B77;
	color: #ffffff;
}
.subtabs{
	display: none
}
.filter-selected{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 16px;
}
.selected{
	display: flex;
	align-items: center;
	white-space: nowrap;
	background: #FF5B77;
	font-size: 16px;
	border-radius: 24px;
	padding: 4px 16px;
	color: #fff;
	margin-right: clamp(8px,1vw,12px);
	margin-bottom: 6px;
}
.selected .del{
	width: 16px;
	height: 16px;
	position: relative;
	margin-left: 8px;
	cursor: pointer;
}
.selected .del::before{
	content: "";
	width: 16px;
	height: 2px;
	background: #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 1
}
.selected .del::after{
	content: "";
	width: 16px;
	height: 2px;
	background: #fff;
	transform: rotate(-45deg);
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 1
}
.filter-selected .clear{
	background: url('../images/idel.png') no-repeat left;
	padding-left: 28px;
	cursor: pointer;
}
.hotel-box{
	padding-bottom: clamp(56px,4.17vw,80px);
}
.tagfire{
	display: inline-block;
	background: url(../images/ifire.png) no-repeat center;
	width: 22px;
	height: 22px;
}
.tagvideo{
	display: inline-block;
	background: url(../images/ivid.png) no-repeat center;
	width: 22px;
	height: 22px;
}
.tagvr{
	display: inline-block;
	background: url(../images/ivr.png) no-repeat center;
	width: 22px;
	height: 22px;
}
.hotel-list{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	column-gap: 24px;
	row-gap:8px;
	margin-top: 24px;
}
.hotel-list .title{
	display: flex;
	align-items: center;
}
.filter-tips{
	margin-top: 32px;
	color: rgba(54,56,57,0.6);
	font-size: 16px;
}
.filter-tips strong{
	color: rgba(54,56,57,1)
}
.taggle{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	background: #ffffff;
	margin-top: 24px;
}
.taggle::after{
	content: '';
	height: 1px;
	background: #d9d9d9;
	position: absolute;
	bottom: 50%;
	left: 0;
	width: 100%;
	z-index: -1;
}
.taggle .btn{
	display: flex;
	align-items: center;
	padding: 0 20px;
	cursor: pointer;
	background: #fff;
	position: relative;
	z-index: 10
}
.taggle .btn .arr{
	background: url(../images/arrD.png) no-repeat;
	width: 24px;
	height: 24px;
}
#scrollHotel{
	overflow: hidden
}
/*
.sdimg1{
  animation-name: float-bob;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.sdimg2{
	animation-delay: 0.5s;
  animation-name: float-bob;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
*/
.detail-banner{
	position: relative;
    height: clamp(630px,47vw,920px);
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4addeb 0%, #c1eafa 100%) repeat scroll 0 0;
    overflow: hidden;
}
.detail-banner::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	background: linear-gradient(to left,rgba(0,0,0,0.9),rgba(0,0,0,0));
	width: 80%;
	height: 100%;
}
.thumbsSwiper{
	position: absolute;
	bottom: clamp(36px,3.48vw,48px);
	right: 0;
	z-index: 10;
	width: 800px;
	padding-bottom: clamp(16px,1.74vw,24px) !important
}

.thumbsSwiper .swiper-slide {
	width: 252px;
	background-size: cover;
	background-position: center;
	transform-origin: bottom;
	transform: scale(0.94);
	border-radius: 8px;
	border: 1px solid #ffffff;
	overflow: hidden;
	opacity: 0.6;
	transition: all 0.15s ease-out;
	position: relative;
}
.thumbsSwiper .swiper-slide-thumb-active {
	transform: scale(1);
	opacity: 1
}
.thumbsSwiper .swiper-pagination-progressbar{
	top: auto;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: rgba(255,255,255,0.3)
}
.thumbsSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
	background: #ffffff !important;
	border-radius: 2px;
}
.thumbsSwiper .tip-video{
	position: absolute;
	background: url(../images/tip_vid.png) no-repeat;
	background-size: contain;
	width: 32px;
	height: 32px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: all 0.15s ease-out;
	z-index: 10
}
.thumbsSwiper .swiper-slide-thumb-active .tip-video{
	opacity: 0
}
.bigSwiper {
  height: 100%;
  width: 100%;
}

.thumbsSwiper {
  height: 20%;
  box-sizing: border-box;
  padding-right: 30px;
} 
.thumbsSwiper .swiper-slide {
	width: 33.333%;
	height: 100%;
	transition: all 0.3s ease;
	cursor: pointer;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-banner-layer{
	position: absolute;
	top: clamp(100px,11vw,189px);
	left: 0;
	width: 100%;
	z-index: 20;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 2
}
.detail-banner-layer h3{
	font-size: 20px;
	color: #FBD87E;
	font-family: Arial," sans-serif";
	font-weight: normal;
}
.detail-banner-layer h2{
	font-size: clamp(24px,2.6vw,36px);
	line-height: 1.2
}
.detail-banner-layer .tags{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 12px;
}
.detail-banner-layer .tags li{
	border: 1px solid rgba(255,255,255,0.5);
	background: rgba(0,0,0,0.05);
	backdrop-filter: blur(6px);
	border-radius: 4px;
	line-height: 32px;
	padding: 0 12px;
	margin-right: 12px;
}
.detail-banner-layer .layer-advantage{
	border: 1px solid rgba(255,255,255,0.5);
	background: rgba(0,0,0,0.02);
	backdrop-filter: blur(4px);
	padding: 20px 24px;
	margin-top: 24px;
	border-radius: 8px;
	width: clamp(430px,34vw,480px);
	box-sizing: border-box;
}
.layer-advantage .price-explain{
	display: flex;
	align-items: flex-end;
}
.color1{
	color: #FBD87E;
}
.layer-advantage .price-explain .num{
	color: #FBD87E;
	font-size: clamp(22px,1.88vw,26px);
	font-weight: bold;
	line-height: 36px;
}
.mgl10{
	margin-left: 10px;
}
.layer-advantage .adv-list{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: 12px;
	row-gap:5px;
	padding-top: 8px
}
.layer-advantage .adv-list li{
	display: flex;
	align-items: flex-start;
}
.layer-advantage .adv-list li .label{
	white-space: nowrap;
	margin-right: 8px;
}
.layer-advantage .adv-list li .value{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 32px;
}
.layer-advantage .adv-list li .value img{
	margin-right: 4px;
	width: auto !important;
	height: auto !important;
	max-height: 18px;
}
.hotel-intro{
	position: relative;
	font-size: clamp(14px,1.16vw,16px);
	padding-top: 24px;
}
.hotel-intro::before{
	content: '';
	background: url(../images/symbol.png) no-repeat;
	background-size: contain;
	width: 66px;
	height: 66px;
	position: absolute;
	top: -24px;
	left: -72px;
	filter: grayscale(100%)
}
.hotel-intro::after{
	content: '';
	background: url(../images/hinimg.png) no-repeat;
	background-size: contain;
	width: 437px;
	height: 222px;
	position: absolute;
	bottom: 0;
	right: 0;
	filter: grayscale(100%);
	animation-name: float-bob;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.bgf7{
	background: #F7F8FA;
}
.borbm{
	border-bottom: 1px solid #D9D9D9;
}
.pbm80{
	padding-bottom: clamp(68px,4.17vw,80px);
}
.hotel-essential{
	display: flex;
	align-items: stretch;
	padding-top: 32px;
}
.essent-img{
	position: relative;
	width: clamp(420px,39.86vw,550px);
	height: clamp(340px,28.99vw,400px);
	border-radius: 8px;
	overflow: hidden
}
.essent-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.essent-tool{
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: flex;
}
.essent-tool .ivr{
	position: relative;
	margin-right: 12px;
}
.essent-tool .ivideo{
	position: relative;
}
.essent-zoom{
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 2;
	background: rgba(0,0,0,0.6);
	border-radius: 8px;
	padding: 8px 12px;
	color: #ffffff;
}
.essent-infos{
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	column-gap: 32px;
	padding-left: clamp(68px,4.17vw,80px);
}
.intro-cells{
	display: flex;
	align-items: flex-start;
	padding: 5px 0;
	font-size: 14px;
}
.essent-title{
	font-size: clamp(16px,1.7vw,20px);
	font-weight: bold;
	margin-bottom: 8px
}

.intro-cells .label{
	color: rgba(54,56,57,0.5);
	width: 6em;
}
.intro-cells .value a{
	color: #427BD0;
	cursor: pointer
}
.intro-cells .value a:hover{
	text-decoration: underline
}
.tools{
	position: fixed;
	right: 16px;
	top: 35%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	z-index: 106
}
.tobar{
	background: #ffffff;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	border-radius: 6px;
	width: 48px;
}
.tobar li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 12px 0;
	position: relative;
	cursor: pointer;
}
.tobar li::after{
	content: '';
	background: rgba(0,0,0,0.08);
	position: absolute;
	height: 1px;
	left: 16px;
	right: 16px;
	bottom: 0;
}
.tobar li:last-child::after{
	display: none;
}
.bwechat{
	padding-top: clamp(16px,1.7vw,24px);
	text-align: center
}
.bwechat img{
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	margin-bottom: 6px;
	color: #000
}
/*
.ctabs-box{
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	z-index: 0;
	padding-top: clamp(24px,2.32vw,32px)
}
.ctabs-box::after{
	content: '';
	border-bottom: 1px solid rgba(0,0,0,0.08);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%
}
.ctabs{
	display: flex;
	align-items: center;
}
.ctabs li{
	padding: 0 clamp(16px,1.71vw,24px)
}
.ctabs li a{
	white-space: nowrap;
	display: block;
	font-size: 16px;
	color: rgba(54,56,57,0.6);
	cursor: pointer;
	position: relative;
	line-height: clamp(40px,3.48vw,48px);
	border-bottom: 3px solid #ffffff
}
.ctabs .active a{
	border-bottom: 3px solid #363839;
	color: #363839;
}
*/
.ctabs-card{
	display: flex;
	align-items: stretch;
	padding-top: 20px;
}
.card-video{
	flex-shrink: 0;
	margin-right: 12px;
	border-radius: 8px;
	overflow: hidden;
}
.card-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-video .poster{
	width: clamp(800px,68.61vw,988px);
	height: clamp(450px,38.61vw,556px);
	position: relative;
}
.card-video .poster .ivideo{
	position: absolute;
	right: 32px;
	bottom: 32px;
	z-index: 10;
	width: 52px;
	height: 52px;
}
.card-pictures{
	height: clamp(450px,38.61vw,556px);
	overflow: hidden;
	flex: 1;
}
.card-pictures .roomSwiper{
	height: 100%;
	width: 100%;
}
.card-pictures .roomSwiper .swiper-slide{
	height: auto;
	width: 100% !important;
}
.card-pictures .picture{
	height: clamp(160px,14.56vw,230px);
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
}
.picture .barVR{
	width: 52px;
	height: 52px;
}
.picture .name{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #ffffff;
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2));
	box-sizing: border-box;
	padding: 6px;
}
.card-pictures .picture .ivr{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: 52px;
	height: 52px;
}
.card-pictures .picture .poster img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pop-room{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 1400px;
	z-index: 1005;
	border: 20px solid #ffffff;
	border-radius: 12px;
	background: #ffffff;
}
.pop-room-title{
	text-align: center;
	padding-bottom: clamp(16px,1.5vw,20px)
}
.pop-room-title h3{
	font-size: clamp(16px,1.5vw,20px)
}
.pop-room-flex{
	display: flex;
	align-items: stretch;
}
.pop-room-swiper{
	width: 62%;
	flex-shrink: 0;
	margin-right: 20px;
}
.pop-room-infos{
	flex: 1;
}
.pop-room-infos table{
	border-collapse: collapse;
	width: 100%
}
.pop-room-infos th{
	border: 1px solid #363839;
	padding: 8px 12px;
	width: 4em;
	background: #F7F8FA
}
.pop-room-infos td{
	border: 1px solid #363839;
	padding: 8px 12px;
}
.pop-room-infos .intro{
	margin-top: 16px;
}
.pop-room-img{
	height: clamp(400px,32vw,484px);
}
.show-swiper{
	margin-top: clamp(24px,2.32vw,32px);
	position: relative;
}
.roomPopSwiper .swiper-pagination{
	left: auto;
	right: 66px;
	z-index: 100;
	width: 80px;
	font-size: clamp(16px,1.5vw,20px);
	color: #ffffff;
	font-weight: bold;
	line-height: 46px;
	bottom: 20px;
}
.roomPopSwiper .swiper-button-next:after,.roomPopSwiper  .swiper-button-prev:after{
	color: #ffffff;
	font-size: 24px;
}
.roomPopSwiper .swiper-button-next{
	top: auto;
	right: 20px;
	font-size: 20px;
	width: 46px;
	height: 46px;
	bottom: 20px;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	transition: all 0.15s ease-out;
}
.roomPopSwiper .swiper-button-prev{
	top: auto;
	left: auto;
	right: 146px;
	font-size: 20px;
	width: 46px;
	height: 46px;
	bottom: 20px;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	transition: all 0.15s ease-out;
}
.roomPopSwiper .swiper-button-next:hover,.roomPopSwiper .swiper-button-prev:hover{
	background: rgba(0,0,0,0.4);
}
.show-poster{
	height: clamp(240px,19.71vw,272px);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}
.ivideo{
	background: url(../images/tip_vid.png) no-repeat;
	width: 52px;
	height: 52px;
	position: absolute;
}
.ivr{
	background: url(../images/tip_vr.png) no-repeat;
	width: 52px;
	height: 52px;
	position: absolute;
}
.show-poster .ivideo{
	top:50%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%,-50%)
}
.show-title{
	text-align: center;
	font-size: clamp(16px,1.7vw,20px);
	margin-top: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.show-swiper .swiper-button-next:after,.show-swiper  .swiper-button-prev:after{
	color: #ffffff;
	font-size: 24px;
}
.show-swiper .swiper-button-next{
	right: -20px;
	width: 46px;
	height: 46px;
	bottom: 20px;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	transition: all 0.15s ease-out;
}
.show-swiper .swiper-button-prev{
	left: -20px;
	width: 46px;
	height: 46px;
	bottom: 20px;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	transition: all 0.15s ease-out;
}
.show-swiper .swiper-button-next:hover,.show-swiper .swiper-button-prev:hover{
	background: rgba(0,0,0,0.4);
}
.show-swiper .swiper-button-next.swiper-button-disabled,.show-swiper .swiper-button-prev.swiper-button-disabled{
	opacity: 0;
}
.show-poster .name{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #ffffff;
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2));
	box-sizing: border-box;
	padding: 6px;
	text-align: center
}
.roomTypePopSwiper .roomtype-next.swiper-button-next{
	right: -60px;
}
.roomTypePopSwiper .roomtype-prev.swiper-button-prev{
	left: -60px;
}
.roomTypePopSwiper .roomtype-next.swiper-button-next:after,.roomTypePopSwiper  .roomtype-prev.swiper-button-prev:after{
	color: #ffffff;
	font-size: 32px;
}
#scrollAbout,#scrollProbe{
	line-height: 0;
	transform: translateY(-80px)
}
.vid-type{
	display: none;
}
.vid-type.show{
	display: block;
}

.hotel-pack {
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.15s ease;
}

.hotel-pack.expanded {
    max-height: 100000px;
    overflow: visible;
}
.taggle .btn .arrU{
	background: url(../images/arrD.png) no-repeat;
	width: 24px;
	height: 24px;
	transform: rotate(180deg)
}
.relative{
	position: relative
}
.loading{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1) url(../images/loading.gif) no-repeat center;
	background-size: 80px 80px;
	z-index: 10
}
.roomTabs .swiper-slide{
	width: auto;
	padding-right:clamp(16px,1.71vw,24px)
}

.roomTabs{
	position: relative;
	z-index: 0;
	padding-top: clamp(24px,2.32vw,32px)
}
.roomTabs::after{
	content: '';
	border-bottom: 1px solid rgba(0,0,0,0.08);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
.roomTabs .tab{
	white-space: nowrap;
	display: block;
	font-size: 16px;
	color: rgba(54,56,57,0.6);
	cursor: pointer;
	position: relative;
	line-height: clamp(40px,3.48vw,48px);
	border-bottom: 3px solid #ffffff
}
.roomTabs .tab.active{
	border-bottom: 3px solid #363839;
	color: #363839;
}
#chooseIsland{
	display: none;
}
.pop-hotel{
	position: fixed;
	top: 15%;
	left: 10%;
	bottom: 0;
	width: 80%;
	z-index: 1005;
	box-sizing: border-box;
	padding: 20px;
	background: #fff;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.pop-hotel .tabs{
	padding-top: 0;
}
.pop-hotel .tabs li a{
	padding: 0 10px
}
.pop-scroll{
	height: 100%;
	overflow: auto;
}
.pop-hotel .hotel-box{
	padding-bottom: 0;
}
.pop-hotel .hotel-pack{
	max-height: none;
	overflow: visible
}
.popup-column{
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.popup-scroll{
	flex: 1;
	overflow-y: auto;
}
.popup-column h2{
	    font-size: clamp(24px, 2.32vw, 32px);
    font-weight: 500;
    padding-bottom: 8px;
	text-align: center;
}
#activePoster{
	display: none;
}
.popup-poster{
	position: fixed;
	top: 10%;
	right: 10%;
	left: 10%;
	bottom: 10%;
	z-index: 1005;
	display: flex;
	align-items: center;
	justify-content: center;
}
.poster-img{
	position: relative;
}
.popup-poster img{
	max-height: 100%;
	max-width: 100%;
}
.popup-poster .pclose{
	top: auto;
	bottom: -60px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
.sd-swiper{
	position: absolute;
	top:104px;
	left: 66px;
	z-index: 1;
	width: 268px;
	height: 454px;
	background: rgba(0,0,0,0.8);
	border-radius: 8px;
	overflow: hidden;
}
.phoneSwiper{
	height: 100%;
	border-radius:10;
	overflow: hidden;
}
.phoneSwiper .phimg{
	width: 268px;
	height: 454px;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}
.phoneSwiper .phimg::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(0deg,rgba(0,0,0,0.3),rgba(0,0,0,0));
	height: 50%;
	z-index: 1
}
.phoneSwiper .phimg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.phoneSwiper .swiper-slide .phtip{
	opacity: 0;
	transition: all 0.3s ease-out;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.phoneSwiper .swiper-slide-active .phtip{
	opacity: 1 !important;
}

.searchbar{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	height:32px;
    border-radius: 4px;
    background-color: #ffffff;
	overflow: hidden;
	border: 1px solid #f6f6f6;
	width: 160px;
	box-sizing: border-box;
	padding: 6px;
}
.searchbar .ssin{
	flex: 1;
	border: none;
	background-color: transparent;
	outline: none;
	line-height: 20px;
	width: 100px;
}
.searchbar .ssbtn{
	background: #ED5C75 url(../images/search.png) no-repeat center;
	background-size: 12px 12px;
	width: 20px;
	height: 20px;
	color: #ffffff;
	border: none;
    border-radius: 4px;
	cursor: pointer;
}
@media (max-width: 1440px) {
	.container{
		width: 100%;
		box-sizing: border-box;
		padding-left: 32px;
		padding-right: 32px;
	}
	.video-layer .links{
		right: 32px;
	}
	.video-layer .links .arrowL{
		transform-origin: top;
		transform: scale(0.65)
	}
	.pop-room{
		width: 80%;
		z-index: 30000000
	}
	.pop-video{
		width: 80%;
		height: clamp(400px,46.88vw,675px);
	}
}