#dot_wrap {
	position: fixed;
	top: 35%;
	left: 40px;
	z-index: 200;
	text-align: right;
}
#dot_wrap .dot li {
	margin-bottom: 18px;
	text-align: center;
	cursor: pointer;
	opacity: 0.7;
}
#dot_wrap .dot li.active {
	opacity: 1;
}
#dot_wrap .dot li img {
	width: 60%;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
}

#dot_wrap .dot li.active img {
	width: 100%;
}
#dot_wrap .dot li:after {
	content: '';
	display: block;
	width: 1px;
	height: 0px;
	margin: 0 auto;
	background-color: #fff;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	margin-top: 3px;
}
#dot_wrap .dot li.active:after {
	height: 40px;
}
#dot_wrap .dot li.active2:after {
	background-color: #010101;
}
#dot_wrap .dot li:last-child:after {
	display: none;
}






#video {
	position: relative;
	overflow: hidden;
	font-size: 0;
}
#video #player {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1940px;
	height: 1091px;
}
#video .player-ctrl{
	position: absolute;
	z-index: 200;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	text-align: center;	
}
#video .play_btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	background-color: rgba(0,0,0,0);
	border: none;
	outline: none;
	cursor: pointer;
}
#video .align-center{
	position: absolute;
	left: 50% !important;
	top: 50% !important;
	transform: translateX(-50%) translateY(-50%) !important;
	z-index: 30;
}







#about {
	background: url(/img/about_bg.jpg) 0 0 no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
	display: table;
	background-attachment: fixed;
}
#about .container {
	display: table-cell;
	vertical-align: middle;
}
#about .content {
	width: 55%;
}
#about .s_tit {
	color: #fff;
	font-size: 22px;
	letter-spacing: 20px;
}
#about h2 {
	margin: 2.5% 0 4.5% 0;
}
#about h2 img {
	width: 74.7%;
}
#about .text {
	color: #fff;
	font-size: 18px;
	line-height: 34px;
	margin-bottom: 6%;
}
#about .more {
	border: 1px solid #fff;
	padding: 1.5% 5% 1%;
	display: inline-block;
	transition: all 0.4s;
}
#about .more:hover {
	background-color: #18cac2;
	border: 1px solid #18cac2;
}
#about .ani {
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	transition: transform 1s, opacity 1s;
	-webkit-transition: transform 1s, opacity 1s;
	opacity: 0;
}
#about .title {
	transition-delay: 0.2s;
}
#about .text {
	transition-delay: 0.4s;
}
#about .more {
	transition-delay: 0.6s;
}
#about .ani.active {
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	opacity: 1;
}






#room {
	position: relative;
}
#room .bg {
	width: 100%;
	height: 100%;
}
#room .content {
	position: absolute;
	bottom: 2.5%;
	right: 1%;
	background-color: rgba(0,0,0,0.6);
	width: 25%;
	overflow: hidden;
	padding: 2.5% 2.1%;
}
#room .content .title_wrap {
	margin-bottom: 11%;
}
#room .content .title_wrap .title {
	opacity: 0;
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	-moz-transform: translate(0,20px);
	-ms-transform: translate(0,20px);
	transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
}
#room .content .title_wrap .title.active {
	opacity: 1;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-ms-transform: translate(0,0);
}
#room .content .title_wrap .title1 {
	margin-bottom: 2%;
}
#room .content .title_wrap .title1 img {
	width: 35%;
}
#room .content .title_wrap .title2 {
	transition-delay: 0.2s;
}
#room .content .title_wrap .title2 img {
	width: 93.9%;
}
#room .content .type {
	font-size: 20px;
	color: #14aca5;
	font-weight: bold;
}
#room .m_title {
	display: none;
}
#room .content .tab {
	font-size: 0;
	margin-bottom: 3%;
}
#room .content .tab li {
	display: inline-block;
	font-size: 20px;
	color: #fff;
	padding: 0 2%;
	line-height: 36px;
	cursor: pointer;
	transition: all 0.4s;
	position: relative;
}
#room .content .tab li:hover,
#room .content .tab li.active {
	background-color: #14aca5;
}
#room .content .tab li:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 17px;
	background-color: #fff;
	position: absolute;
	top: 15px;
	right: 0;
}
#room .content .tab li:last-child:after {
	display: none;
}
#room .room_name .name {
	position: absolute;
	display: none;
}
#room .room_name .name1 {
	top: 25%;
	left: 21%;
}
#room .room_name .name2 {
	top: 23%;
	left: 28%;
}
#room .room_name .name3 {
	top: 16%;
	left: 40%;
}
#room .room_name .name4 {
	top: 16%;
	left: 45%;
}
#room .room_name .name5 {
	top: 44%;
	left: 24%;
}
#room .room_name .name6 {
	top: 42%;
	left: 28.5%;
}
#room .room_name .name7 {
	top: 32%;
	left: 44.5%;
}
#room .room_name .name8 {
	top: 32%;
	left: 40%;
}
#room .room_name .name9 {
	top: 37%;
	left: 38%;
}
#room .room_name .name10 {
	top: 51%;
	left: 42%;
}
#room .room_name .name11 {
	top: 33%;
	left: 56.5%;
}
#room .room_name .name12 {
	top: 53%;
	left: 57%;
}
#room .room_name .name13 {
	top: 39%;
	left: 34.5%;
}
#room .room_name .name14 {
	top: 51%;
	left: 47%;
}
#room .room_name .name15 {
	top: 51%;
	left: 63%;
}
#room .room_name .name16 {
	top: 20%;
	left: 51.5%;
}
#room .room_name .name17 {
	top: 29%;
	left: 12%;
}
#room .m_room {
	display: none;
}
#room .m_room ul {
	overflow: hidden;
	text-align: center;
}
#room .m_room li {
	width: 49%;
	float: left;
	margin-right: 2%;
	margin-bottom: 3%;
}
#room .m_room li:nth-child(2n) {
	margin-right: 0;
}
#room .m_room li img {
	width: 100%;
}
#room .m_room li .text {
	font-size: 14px;
}











#room_special {
	position: relative;
	background: url(/img/special_img1.jpg) 0 0 no-repeat;
	background-size: cover;
	background-position: center;
}
#room_special .owl-carousel {
	opacity: 0;	
	transition: all 2s;
	-webkit-transition: all 2s;
	-moz-transition: all 2s;
}
#room_special .owl-carousel.active {
	opacity: 1;	
}
#room_special .owl-carousel li {
	width: 100%;
	height: 100%;
}
#room_special .owl-carousel li div {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
}
#room_special .title_wrap {
	position: absolute;
	top: 29%;
	left: 8%;
	z-index: 10;
	width: 24.55%;
}
#room_special .title_wrap .title {
	opacity: 0;
	transform: translate(0,30px);
	-webkit-transform: translate(0,30px);
	transition: all 1s;
	-webkit-transition: all 1s;
}
#room_special .title_wrap .title.active {
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	opacity: 1;
}
#room_special .title_wrap .title1 {
	transition-delay: 0.2s;
	font-size: 20px;
	color: #fff;
}
#room_special .title_wrap .title2 {
	margin-bottom: 2%;
}
#room_special .title_wrap .title2 img {
	width: 100%;
}









#facilities {
	font-size: 0;
	position: relative;
}
#facilities .m_title {
	display: none;
}
#facilities .m_title img {
	width: 250px;
}
#facilities .title_wrap {
	text-align: center;
	background: url(/img/fac_bg.jpg) 0 0 no-repeat;
	background-size: cover;
	background-position: center bottom;
	padding-top: 10%;
}
#facilities .title_wrap .title {
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	opacity: 0;
	transition: all 1s;
	-webkit-transition: all 1s;
}
#facilities .title_wrap .title.active {
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	opacity: 1;
}
#facilities .title_wrap .title1 {
	margin-bottom: 1%;
	font-size: 20px;
	color: #fff;
}
#facilities .title_wrap .title2 {
	transition-delay: 0.2s;
}
#facilities .title_wrap .title2 img {
	width: 30.3%;
}
#facilities .container3 {
	margin-top: 6%;
	position: relative;
}
#facilities .list {
	opacity: 0;
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	transition: all 1s;
	-webkit-transition: all 1s;
	transition-delay: 0.4s;
}
#facilities .list.active {
	opacity: 1;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
#facilities .list li {
	position: relative;
	text-align: center;
}
#facilities .list li a {
	outline: none;
}
#facilities .list li .over {
	position: absolute;
	display: inline-block;
	color: #fff;
	font-size: 26px;
	top: 0;
	left: 3.5%;
	width: 93%;
	height: 47%;
	background-color: rgba(0,0,0,0.4);
	padding-top: 53%;
	opacity: 0;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}
#facilities .list li .over:hover {
	opacity: 1;
	padding-top: 50%;
	height: 50%;
}
#facilities .list li .img {
	width: 93%;
}
#facilities .list li .text {
	font-size: 16px;
	color: #333333;
	font-weight: bold;
	margin-top: 3%;
}
#facilities .slick-next, 
#facilities .slick-prev {
	width: 131px;
	height: 25px;
	top: 70%;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}
#facilities .slick-next {
	background: url(/img/fac_next.png) 0 0 no-repeat;
	right: -6.5%;
}
#facilities .slick-prev {
	background: url(/img/fac_prev.png) 0 0 no-repeat;
	left: -6%;
}
/*#facilities .slick-next:hover {*/
/*	transform: translate(12px,0);*/
/*	-webkit-transform: translate(12px,0);*/
/*}*/
/*#facilities .slick-prev:hover {*/
/*	transform: translate(-12px,0);*/
/*	-webkit-transform: translate(-12px,0);*/
/*}*/









#service {
	background: url(/img/service_bg.jpg) 0 0 no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	display: table;
}
#service .container {
	padding: 0 11.5%;
	display: table-cell;
	vertical-align: middle;
}
#service .item {
	position: relative;
	text-align: center;
}
#service .item:hover .img {
	transform: scale(1.1);
}
#service .item .img_wrap {
	overflow: hidden;
} 
#service .item .img {
	transition: all 0.6s;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	width: 100%;
} 
#service .item .content {
	position: absolute;
	top: 41%;
	left: 0;
	width: 100%;
}
#service .item .text {
	font-size: 20px;
	color: #fff;
	margin-top: 10px;
}
#service .service {
	float: left;
	padding-top: 4.2%;
	width: 61.4%;
	padding-bottom: 22px;
	font-size: 0;
}
#service .service .visual_title {
	display: inline-block;
	vertical-align: top;	
	width: 59.3%;
}
#service .service .visual_title .title1 img {
	width: 72.5%;
}
#service .service .visual_title .title,
#service .service .visual_title .text {
	opacity: 0;
	transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	-ms-transform: translate(0,20px);
}
#service .service .visual_title .title.active,
#service .service .visual_title .text.active {
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	opacity: 1;
}
#service .service .visual_title .title2 {
	margin: 2% 0 10% 0;
	transition-delay: 0.2s;
}
#service .service .visual_title .title2 img {
	width: 54.5%;
}
#service .service .visual_title .text {
	font-size: 20px;
	color: #fff;
	line-height: 32px;
	transition-delay: 0.4s;
	margin-top: 2%;
}
#service .service .item1 {
	display: inline-block;
	width: 40.5%;
}
#service .item1 .content img {
	width: 46.2%;
}
#service .item2 .content img {
	width: 45.3%;
}
#service .item3 .content img {
	width: 27.7%;
}
#service .item2 {
	float: right;
	width: 36.5%;
}
#service .item3 {
	float: right;
	padding-right: 1.7%;	
	width: 59%;
}








@media (max-width: 1600px) {
	#about .text,
	#room .title2, #cafe .content .text,
	#facilities .title_wrap .title1,
	#service .service .visual_title .text,
	#service .item .text {
		font-size: 16px;
	}
	#about .text {
		line-height: 26px;
	}
	#room .content .tab li {
		font-size: 16px;
		line-height: 26px;
	}
	#room .content .tab li:after {
		height: 14px;
		top: 7px;
	}
	#about .s_tit {
		font-size: 18px;
		letter-spacing: 15px;
	}
}
@media (max-width: 1280px) {
	#about .content {
		width: 100%;
	}

}

@media (max-width: 768px) {
	#video #player {
		position: static;
		transform: none;
	}
	#top_visual .visual_title .title,
	#about .ani,
	#service .service .visual_title .title,
	#room_special .owl-carousel,
	#room_special .title_wrap .title,
	#facilities .list {
		opacity: 1;
		transform: translate(0,0);
		-webkit-transform: translate(0,0);
	}
	#dot_wrap {
		display: none;
	}
	#about .text, #room .title2, 
	#facilities .title_wrap .title1 {
		font-size: 14px;
	}
	#video .video_wrap #player {
		width: 1100px;
		height: 1100px;
	}
	#about {
		padding: 8% 0;
		background-attachment: scroll;
	}
	#about h2 img {
		width: 370px;
	}
	#about .text {
		line-height: 21px;
	}
	#about .s_tit {
		font-size: 14px;
		letter-spacing: 5px;
	}
	#facilities .title_wrap .title1,
	#service .service .visual_title .text, 
	#service .item .text {
		display: none;
	}
	#room {
		font-size: 0;
	}
	#room .m_room,
	#room .m_title {
		display: block;
		text-align: center;
	}
	#room .m_title {
		margin: 7% 0 2%;
	}
	#room .m_title img {
		width: 250px;
	}
	#room .content .title_wrap {
		display: none;
	}
	#room .content {
		position: static;
		width: 95.8%;
		background-color: rgba(0,0,0,0.8);
	}
	#room .content .tab {
		margin-bottom: 1%;
	}
	#room .content .tab li {
		font-size: 14px;
		line-height: 23px;
	}
	#room .content .type {
		font-size: 16px;
	}
	#room .room_name .name img {
		width: 50px;
	}
	#room .room_name .name1 {
		top: 9%;
		left: 18%;
	}
	#room .room_name .name2 {
		top: 9%;
		left: 23%;
	}
	#room .room_name .name3 {
		top: 5%;
		left: 36%;
	}
	#room .room_name .name4 {
		top: 5%;
		left: 40%;
	}
	#room .room_name .name5 {
		top: 24%;
		left: 21%;
	}
	#room .room_name .name6 {
		top: 22.5%;
		left: 24%;
	}
	#room .room_name .name7 {
		top: 19%;
		left: 40%;
	}
	#room .room_name .name8 {
		top: 19%;
		left: 36%;
	}
	#room .room_name .name9 {
		top: 21%;
		left: 34%;
	}
	#room .room_name .name10 {
		top: 26%;
		left: 37%;
	}
	#room .room_name .name11 {
		top: 20%;
		left: 53%;
	}
	#room .room_name .name12 {
		top: 27%;
		left: 53%;
	}
	#room .room_name .name13 {
		top: 22%;
		left: 31%;
	}
	#room .room_name .name14 {
		top: 26%;
		left: 43%;
	}
	#room .room_name .name15 {
		top: 26%;
		left: 59%;
	}
	#room .room_name .name16 {
		top: 7%;
		left: 48%;
	}
	#room .room_name .name17 {
		top: 11%;
		left: 10%;
	}

	.sub_room {
		margin-top: 70px;
	}
	#room_special .title_wrap {
		left: 50%;
		transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		width: 250px;
		top: 45%;
	}
	#room_special .title_wrap .title1 {
		font-size: 14px;
	}
	.sub_fac {
		margin-top: 7%;
	}
	#facilities {
		margin-bottom: 11%;
	}
	#facilities .container3 {
		margin-top: 4%;
		padding: 0 5%;
	}
	#facilities .title_wrap {
		background: none;
	}
	#facilities .m_title {
		display: block;
	}
	#facilities .title2 {
		display: none;	
	}
	#facilities .slick-prev,
	#facilities .slick-next {
		background-size: 90px;
		width: 90px;
		top: 104%;
	}
	#facilities .slick-next {
		right: 22%;
	}
	#facilities .slick-prev {
		left: 22%;
	}
	#facilities .list li .text {
		font-size: 14px;
	}
	#facilities .list li .over {
		display: none;
	}
	#service {
		padding: 5% 0;
		background-attachment: scroll;
	}
	#service .service {
		width: 45.4%;
	}
	#service .service .visual_title {
		margin-bottom: 5%;
	}
	#service .service .visual_title, 
	#service .item3 {
		width: 100%;
	}
	#service .service .item1 {
		width: 100%;
	}
	#service .item2 {
		width: 49%;
	}

}
@media (max-width: 479px) {
	#room .title2, 
	#cafe .content .text, 
	#facilities .title_wrap .title1,
	#facilities .list li .text {
		font-size: 12px;
	}
	#video .video_wrap #player {
		width: 600px;
		height: 676px;
	}
	#about h2 img {
		width: 270px;
	}
	#about .text {
		font-size: 10px;
		line-height: 17px;
	}
	#about .s_tit {
		font-size: 12px;
	}
	#about .more img {
		width: 150px;
	}
	#room .content .type {
		font-size: 14px;
	} 
	#room .content .tab li {
		font-size: 12px;
	}
	#room .m_title img,
	#room_special .title_wrap {
		width: 220px;
	}
	#room_special .title_wrap .title1 {
		display: none;
	}
	#service .service .visual_title .title1 img {
		width: 130px;
	}
	#service .item2 .content img {
		width: 110px;
	}
	#service .item3 .content img {
		width: 100px;
	}
}