@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500;700&family=Noto+Serif+TC:wght@100;300;500;600;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap&family=Noto+Serif+JP:wght@200;500;700');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@font-face {
  font-family: BKANT;
  src: url("../fonts/BKANT.TTF");
}

html { width:100%; height: 100%; font-size:18px ;}
html, body { margin:0; padding:0;}
body {font-family:"微軟正黑體",Century Goth,Arial, Helvetica, sans-serif; font-weight:500; font-size:18px ; line-height:160%; color:#111; width:100%; padding:0 0 0 0;letter-spacing:1px; -webkit-text-size-adjust: none;}

input[type=text],textarea{ border-radius:0;  appearance:none; -moz-appearance:none; -webkit-appearance:none;}

::selection { background: #8d6c54; color: #FFF;}
::-moz-selection { background: #8d6c54;	color: #FFF;}

a{ text-decoration:none; color: inherit;}
p.img{ font-size:0; line-height:0; position:relative;}
p.img img{ width:100%; height:auto;}
p.img img.pimg{ max-width:100%; width:auto; max-height:100%; height:auto; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}

header nav ul li a::before,
header nav a.booking,
.indexabout .checkin .main .step ul li p,
.indexroom .main .room ul li a::after,
.indexroom .main .note a.booking,
.footermain .main .copytight .link p a.booking,
.facilities ul.list li,
.facilities ul.list li .icon,
.facilities ul.list li .title,
.pagestop .right .infor a.booking,
.contacmain .fromemain ul li input[type=submit],
.facilitymain .main p.text a
{ -moz-transition:all .8s ease; -o-transition:all .8s ease; -ms-transition:all .8s ease; transition:all .8s ease;}

header nav,
header .right h1,
header .right .news,
.point,
.indexabout .feature .main ul,
.indexabout .checkin .main .step ul,
.facilities ul.list,
.pagestop .right,
.aboutmain .main .text,
header .right ul.roomlist,
.roommain .roomamenities .text .note,
.facilitymain ul.nav,
.facilitymain .main,
.massagemain .price>ul,
.newsmain .morelist ul,
.locationmain .title,
.contacmain .fromemain ul
{ opacity: 0; transform: translateY(30px);}

header{ display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 18% 0; position: relative}
header.pages{ margin: 0 0 10% 0;}
header .left{ display: block; width: 60%; padding: calc(200px + 0vh) 0 0 0; position:  relative;}
header.pages .left{  width: calc(100% - 500px); padding: calc(200px + 0px) 0 0 0;}
header .left a.logo{ display: flex; flex-wrap: wrap; align-items: flex-end; width: 50%; max-width: 500px; position: absolute; top: 35px; left: 5%;}
header .left a.logo img{ display: block; width: 100%;}
header .left a.logo strong{ display: block; width: 55%; height: 100%; text-align:  right; font-family: "Noto Serif TC", serif;  font-size: 30px; font-weight: 300; position: relative;}
header .left a.logo strong::after{ content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background:  #e6c878; position: absolute; top: calc(100% - 5px); left: calc(100% - 100px);}
header .left a.logo strong::before{ content: ''; display: block; width:  calc(100% - 110px); height: 1px;  background:  #e6c878; position: absolute; top: calc(100% - 3px); left: 8px;}
header .left a.logo span{ display: block; width: 100%; margin: 10px 0 0 0; color: #01a5b8; font-family: 'Athelas'; text-transform: uppercase; letter-spacing: 18px; text-align: justify;}
header .left .banner{ display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0;}
header .left .banner .img{display: block; width: 100%; height: 80vh; min-height: 650px;  position: relative;}
header .left .banner .img .ad{ display:block; width:100%; height:100%; position:absolute;  z-index: 1 !important;}
header .left .banner .img .ad p{ display:block; width:100%; height:100%; background-position: center center; background-size:cover; position:absolute; top:0; transform: scale(1.1,1.1); -webkit-animation: bannerin 6.6s 1 both linear;	-moz-animation: bannerin 6.6s 1  both linear;	animation: bannerin 6.6s 1 both linear; -webkit-animation-delay: 0;}
header .left .banner.rooms .img{height: 70vh; min-height: 550px; }

.banner .bx-controls{ display: none;}
.banner .bx-wrapper{ width: 100%;}

header.pages  .left .banner{display: block; width: 100%;  position: relative;}
header.pages  .left .banner::after{ display: block;font-size: 100px; line-height: 100px; font-family: 'Athelas'; color: #298e92; position:  absolute; bottom:-30px; left: 6%; z-index: 99;}
header.pages  .left .banner.about{height: 30vh; min-height: 300px; background: url("../images/about/banner.jpg") no-repeat 50% 50%; background-size: cover;}
header.pages  .left .banner.facility{height: 30vh; min-height: 300px; background: url("../images/facility/banner.jpg") no-repeat 50% 50%; background-size: cover;}
header.pages  .left .banner.massage{height: 30vh; min-height: 300px; background: url("../images/massage/banner.jpg") no-repeat 50% 50%; background-size: cover;}
header.pages  .left .banner.news{height: 30vh; min-height: 300px; background: url("../images/news/banner.jpg") no-repeat 50% 50%; background-size: cover;}
header.pages  .left .banner.location{height: 30vh; min-height: 300px; background: url("../images/location/banner.jpg") no-repeat 50% 50%; background-size: cover;}
header.pages  .left .banner.contact{height: 30vh; min-height: 300px; background: url("../images/contact/banner.jpg") no-repeat 50% 50%; background-size: cover;}
header.pages  .left .banner.about::after{ content: 'ABOUT';}
header.pages  .left .banner.rooms::after{ content: 'ROOMS';}
header.pages  .left .banner.facility::after{ content: 'FACILITY';}
header.pages  .left .banner.massage::after{ content: 'MASSAGE';}
header.pages  .left .banner.news::after{ content: 'NEWS';}
header.pages  .left .banner.location::after{ content: 'LOCATION';}
header.pages  .left .banner.contact::after{ content: 'CONTACT';}

header .right{ display: block; width: 40%; padding: calc(200px + 0vh) 0 0 0; position: relative;}
header.pages .right{ width: 500px; padding: calc(200px + 0px) 0 0 0;}
header .right .bg{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; overflow: hidden;}
header .right .bg::after{ content: ''; width: 220%; height: 100%; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: absolute; top: 0; left: 0;}



header nav{ display:flex; flex-wrap: wrap; width: 80%; position: absolute; top: 15px; right: 10%; justify-content: flex-end;}
header nav ul{ display:flex; flex-wrap: wrap; width: 100%; margin: 15px 0 0 0; vertical-align:middle; }
header nav ul li{ display:block; width: calc(100% / 7); text-align: left;}
header nav ul li a{ display:inline-block; font-size:18px; line-height:26px; font-family: "Noto Serif TC", serif; color:#FFF; font-weight:500; position:relative;}
header nav ul li a::after{ content:''; display:block; width:2px; height:2px; background:#FFF; position:absolute; left: -8px; top: calc(50% - 1px);}
header nav ul li a::before{ content: ''; display: block; width: 0%; height: 1px; background: #FFF; position: absolute; bottom: -1px;}


header nav select{ display:block; width:120px; margin:0 30px 0 0;  background: url(../images/select_bg2.png) no-repeat right center;  border: none; font-size: 15px; line-height: 22px; color: #FFF; font-family: "微軟正黑體"; text-align: left; vertical-align:middle; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer;}
header nav select option{ color:#111; text-align:left;}
header nav a.booking{ display:block; width: 150px; height: 40px; font-size:19px; line-height:40px; text-align: center; color:#FFF; font-weight:500; text-indent: 30px; border-radius:3px; vertical-align:middle; background:rgba(255,255,255,.2) url(../images/booking_icon.png) no-repeat calc(50% - 45px) 50%;}


header .right h1{ width: 80%; margin: 0 0 30px 10%; color: #FFF; font-family: "Noto Serif TC", serif; font-weight:  normal;}
header .right .news{ display: flex; flex-wrap: wrap; width: 80%; margin: 0 0 0 10%; padding: 20px 0 0 0; color: #FFF; background: url("../images/line_h.png") repeat-x left top;}
header .right .news .date{ display: block; width: 100px; font-size: 16px;}
header .right .news .marquee-container {  width: calc(100% - 100px);  overflow: hidden; position: relative;}
header .right .news .marquee-container::after{ content: ''; display: block; width: 18px; height: 18px; background: #FFF; border-radius: 50%; position: absolute; right: 0; top:calc(50% - 9px);}
header .right .news .marquee-container::before{  content:'';  width: 0;  height: 0;  border-style: solid;  border-width: 2px 0 2px 4px;  border-color: transparent transparent transparent #1058aa;  position: absolute;  right: 7px;  top: calc( 50% - 2px ); z-index: 2}

header>.marquee-container {display: flex; width:100%;  overflow: hidden; position: absolute; right: 0; bottom: 0; z-index: 9; font-size: 100px; line-height: 100px; font-family: 'Athelas'; text-transform: uppercase; color: #FFF;}
.marquee-content {  display: inline-block;  white-space: nowrap;  animation: marquee 10s linear infinite;}

header>.marquee-container>.marquee-content{ animation: marquee 40s linear infinite;}
.marquee-content2 {  display: inline-block;  white-space: nowrap;  animation: marquee2 40s linear infinite;}
.marquee-content3 {  display: inline-block;  white-space: nowrap;  animation: marquee3 40s linear infinite;}

header::after{ content: ''; display: block; width: 48%; padding: 0 0 20% 0; background: url("../images/bg_clooud.png") no-repeat 0 0; background-size: auto 100%; position: absolute; right:0; bottom: -17%; z-index: 3;}
header.pages::after{ width: 550px; padding: 0 0 280px 0;}

/*首頁*/
.indexabout{ display: block; width: 100%; margin:  0 0 200px 0; overflow: hidden;}
.indexabout .feature{ display: block; width: 100%;}
.indexabout .feature .main{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto;}

.point{ display: flex; align-items: flex-end; width: 100%; margin: 0 0 100px 0;}
.point img{ display: inline-block;}
.point span{ display: inline-block; font-size: 12px; font-family: 'Athelas'; text-transform: uppercase; color: #02a2b8;}
.point span::before{ content: ''; display: inline-block; width: 45px; height: 45px; margin: 0 15px 0 0; background: #02a2b8;}

.indexabout .feature .main ul{ display: flex; flex-wrap: wrap; width: 85%; padding:5% 10% 7% 10%;}
.indexabout .feature .main ul li{ display: block; width: calc(100% / 3 - 10px); margin: 0 10px 0 0;}
.indexabout .feature .main ul li img{ display: block; margin: 0 0 15px 0;}
.indexabout .feature .main ul li h2{ display: block; margin: 0 0 15px 0; padding: 25px 0 0 0; border-top: 1px solid #cccccc; font-size: 28px; line-height: 32px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.indexabout .feature .main ul li p{ width: 90%; font-size: 17px; line-height:26px; color: #555;}
.indexabout .feature .main .text{ display: block; width: 85%; padding:5% 10% 7% 10%;}
.indexabout .feature .main .text h2{ display: block; margin: 0 0 15px 0; font-size: 28px; line-height: 32px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.indexabout .feature .main .text p{ width: 90%; font-size: 17px; line-height:26px; color: #555;}
.indexabout .feature .main p.img{ display: block; width: calc(50vw - 50% + 15%); margin: 0 calc(-50vw + 50%) 0 0; background: url("../images/checkin_img01.jpg") no-repeat; background-size: cover; position: relative;}
.indexabout .feature .main p.img::before{ content: ''; display: block; width: 200%; height: 100%; opacity: .8; position: absolute; top: 0; left: 0; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%);}
.indexabout .checkin{ display: block; width: 100%;}
.indexabout .checkin .main{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}
.indexabout .checkin .main::after{ content: 'CHECK IN'; display: block;font-size: 100px; line-height: 100px; font-family: 'Athelas'; color: #298e92; position:  absolute; bottom:40px; left: 0; z-index: 3;}
.indexabout .checkin.control .main::after{ content: 'CONTROL'}
.indexabout .checkin .main::before{ content: ''; display: block; width:70%; padding: 0 0 25% 0; background: url("../images/bg_clooud2.png") no-repeat; background-size: auto 100%; position: absolute; left: 50%; top: -10%; z-index: -1;}
.indexabout .checkin .main p.img{display: block; width: calc(50vw - 50% + 85%); margin: 0 0 0 calc(-50vw + 50%); background: url("../images/checkin_img02.jpg") no-repeat; background-size: cover; background-attachment: fixed; position: relative;}
.indexabout .checkin.control .main p.img{ background: url("../images/rooms/control_img.jpg") no-repeat;background-size: cover; background-attachment: fixed;}
.indexabout .checkin .main p.img::after{ content: ''; display: block; width: 100%; height: 80px; background: #FFF; position: absolute; right: 0; bottom: -1px;}
.indexabout .checkin .main .step{ display: flex; flex-wrap: wrap; width: 40%; margin:15% 0 0 -25%; padding: 50px 5% 0 5%; background: #FFF; position: relative; z-index: 2;}
.indexabout .checkin .main .step ul{ display: block;}
.indexabout .checkin .main .step ul li{ display: block; margin: 0 0 0 0; padding: 0 0 40px 0; position: relative;}
.indexabout .checkin .main .step ul li:last-child{ margin: 0; padding: 0;}
.indexabout .checkin .main .step ul li::after{ content: ''; display: block; width: 90%; height: 1px; background: #CCC; position: absolute; bottom: 0; left: 5%;}
.indexabout .checkin .main .step ul li:last-child::after{ content: inherit;}
.indexabout .checkin .main .step ul li .title{ display: flex; align-items: center; width: 80%; padding: 30px 0 0 0; margin: 0 auto;}
.indexabout .checkin .main .step ul li .title img{ margin: 0 20px 0 0;}
.indexabout .checkin .main .step ul li .title h2{font-size: 28px; line-height: 32px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.indexabout .checkin .main .step ul li .title h2 span{ display: block; font-size: 20px; color: #ccad5b; font-family: 'Adobe Caslon Pro';}
.indexabout .checkin .main .step ul li p{ display: block;  width: 100%; max-height: 0; margin: 0 auto; font-size: 18px; line-height: 28px; overflow: hidden;}
.indexabout .checkin .main .step ul li:first-child p{ max-height: 400px;}
.indexabout .checkin .main .step ul li p img{ display: block; width: 100%; margin: 0 0 15px -5%;}
.indexabout .checkin .main .step ul li p span{ display: block; width: 80%; margin: 0 auto;}

.indexroom{ display: block; width: 100%; padding: 0 0 8% 0; margin: 0 0 150px 0; overflow: hidden; position: relative;}
.indexroom::after{ content: ''; display: block; width: 32%; padding: 0 0 20% 0; background: url("../images/bg_clooud.png") no-repeat 100% 0; background-size: auto 100%; position: absolute; left:0; bottom: 0; z-index: 9;}

.indexroom .main{ display: block; width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}
.indexroom .point{ flex-flow:row-reverse;}
.indexroom .point span{ margin: 0 -20px -30px 0; position: relative; z-index: 2;}
.indexroom .point span::before{ content:inherit;}
.indexroom .point span::after{ content: ''; display: inline-block; width: 45px; height: 45px; margin: 0 0 0 15px; background: #02a2b8;}
.indexroom .main .room{ display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 50px 0; position: relative;}
.indexroom .main .room::after{ content: 'ROOMS'; display: block;font-size: 100px; line-height: 100px; font-family: 'Athelas'; color: #298e92; position:  absolute; bottom:-30px; right: 0; z-index: 99;}
.indexroom .main .room .colorbox{ width: calc(50vw - 50% + 8%); margin: 0 0 0  calc(-50vw + 50%); position: relative; overflow: hidden;}
.indexroom .main .room .colorbox::before{ content: ''; display: block; width: 220%; height: 100%; position: absolute; top: 0; left: 0; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%);}
.indexroom .main .room .list{ display: block; width: 27%; margin: 0 0 0 0; padding: 25vh 0 15vh 3%; background: #FFF; z-index: 9;}
.indexroom .main .room ul{ display: block; width: 100%;}
.indexroom .main .room ul li{ display: block; width: 100%;}
.indexroom .main .room ul li a{ display: block; padding: 20px 0 20px 40px; border-radius: 3px 0 0 3px; font-size: 19px; line-height: 19px;font-family: "Noto Serif TC", serif; }
.indexroom .main .room ul li a.current{ background: #298e92; color: #FFF;}
.indexroom .main .room ul li a span{ content: ''; display: none; width: 50px; height: 59px;background: #298e92;border-radius:0 3px 3px 0; position: absolute; left: 35%; z-index: 99;}
.indexroom .main .room ul li a span::after{ content: ''; display: block; width: 18px; height: 18px; background: #FFF; border-radius: 50%; position: absolute; right: calc(50% - 9px); top:calc(50% - 9px);}
.indexroom .main .room ul li a span::before{  content:'';  width: 0;  height: 0;  border-style: solid;  border-width: 2px 0 2px 4px;  border-color: transparent transparent transparent #1058aa;  position: absolute;  right: calc( 50% - 2px );  top: calc( 50% - 2px ); z-index: 2}
.indexroom .main .room ul li a.current span{ display: block;}
.indexroom .main .room ul li a::after{ content: ''; display: block; width: calc(50vw - 50% + 65%); height: 100%; position: absolute; z-index: 1; top: 0; left: 35%; opacity: 0;}
.indexroom .main .room ul li a.current::after{ z-index: 2}
.indexroom .main .room ul li:nth-child(1) a::after{ background:  url("../images/rooms/banner/banner01.jpg") no-repeat center center; background-size: cover;}
.indexroom .main .room ul li:nth-child(1) a span{ top: calc(25vh + 0px);}
.indexroom .main .room ul li:nth-child(2) a::after{ background: url("../images/rooms/banner/banner02.jpg") no-repeat center center; background-size: cover;}
.indexroom .main .room ul li:nth-child(2) a span{ top: calc(25vh + 59px * 1);}
.indexroom .main .room ul li:nth-child(3) a::after{ background: url("../images/rooms/banner/banner03.jpg") no-repeat center center; background-size: cover;}
.indexroom .main .room ul li:nth-child(3) a span{ top: calc(25vh + 59px * 2);}
.indexroom .main .room ul li:nth-child(4) a::after{ background: url("../images/rooms/banner/banner04.jpg") no-repeat center center; background-size: cover;}
.indexroom .main .room ul li:nth-child(4) a span{ top: calc(25vh + 59px * 3);}
.indexroom .main .room ul li:nth-child(5) a::after{ background: url("../images/rooms/banner/banner05.jpg") no-repeat center center; background-size: cover;}
.indexroom .main .room ul li:nth-child(5) a span{ top: calc(25vh + 59px * 4);}
.indexroom .main .room ul li:nth-child(6) a::after{ background: url("../images/rooms/banner/banner06.jpg") no-repeat center center;background-size: cover;}
.indexroom .main .room ul li:nth-child(6) a span{ top: calc(25vh + 59px * 5);}
.indexroom .main .room ul li:nth-child(7) a::after{ background: url("../images/rooms/banner/banner07.jpg") no-repeat center center;background-size: cover;}
.indexroom .main .room ul li:nth-child(7) a span{ top: calc(25vh + 59px * 6);}
.indexroom .main .room p.img{ width: calc(50vw - 50% + 65%); margin: 0 calc(-50vw + 50%) 0 0; background: url("../images/rooms/banner/banner01.jpg") no-repeat center center; background-size: cover;}
.indexroom .main .note{ display: flex; align-items: center; justify-content: space-between; padding:  0 0 0 35%; font-size: 18px; line-height: 32px; font-family: "Noto Serif TC", serif; }
.indexroom .main .note p.time{ padding: 0 0 0 30px; background: url("../images/time_icon.png") no-repeat left center;}
.indexroom .main .note p.time span{ display: inline-block; margin: 0 30px 0 0;}
.indexroom .main .note p.time span strong{ display: inline-block; margin: 0 0 0 10px;font-size: 30px; font-family: 'Calisto MT';}
.indexroom .main .note a.booking{ display: block; width: 23%; height: 60px; color: #FFF; text-indent: 30px; text-align: center; line-height: 60px; border-radius: 3px; background: #121212 url("../images/booking_icon.png") no-repeat 20px center;}

.facilities{ display: block; width: 100%; margin: 0 0 100px 0; padding: 0 0 13% 0; position: relative; overflow: hidden;}
.facilities::before{ content: ''; display: block; width:55%; padding: 0 0 25% 0; background: url("../images/bg_clooud2.png") no-repeat; background-size: auto 100%; position: absolute; right: 0%; bottom: 0%; z-index: -1;}

.facilities .main{ display: block;width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}

.facilities .point{ margin: 0 0 200px 0; flex-flow:row-reverse;}
.facilities .point span{ margin: 0 -20px -30px 0; position: relative; z-index: 2;}
.facilities .point span::before{ content:inherit;}
.facilities .point span::after{ content: ''; display: inline-block; width: 45px; height: 45px; margin: 0 0 0 15px; background: #02a2b8;}

.facilities .main::after{ content: 'FACILITIES'; display: block;font-size: 100px; line-height: 100px; font-family: 'Athelas'; color: #298e92; position:  absolute; bottom:-30px; left: 6%; z-index: 99;}
.facilities ul.list{ display: flex; width: 110%; margin: 0 -10% 0 0; position: relative;}
.facilities ul.list li{ display: block; width: calc(44% / 2 - 1px); margin: 0 1px 0 0;}
.facilities ul.list li:first-child{ width: calc(56% - 1px);}
.facilities ul.list li .icon{ display: block; opacity: 0; width: 15%; padding: 0 0 15% 0; transform: translateX(40%); background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: absolute; z-index: 9;}
.facilities ul.list li .icon:after{ content: ''; display: block; width: 100%; height: 100%; position: absolute;}
.facilities ul.list li:nth-child(1) .icon::after{ background: url("../images/facility/icon01.png") no-repeat 50% 50%;}
.facilities ul.list li:nth-child(2) .icon::after{ background: url("../images/facility/icon02.png") no-repeat 50% 50%;}
.facilities ul.list li:nth-child(3) .icon::after{ background: url("../images/facility/icon03.png") no-repeat 50% 50%;}

.facilities ul.list li .title{ display: flex; flex-wrap: wrap; margin: 0 0 50px 0;}
.facilities ul.list li:first-child .title{ margin: 0 0 50px 42%;}
.facilities ul.list li:first-child .icon{ opacity: 1;}
.facilities ul.list li .title .number{ display: block; width: 100%; font-size: 30px; line-height: 30px; color: #01a4b8; font-family: 'Calisto MT';}
.facilities ul.list li .title .line{ display: block; width: 30px; height: 1px; margin: 10px 0; background: #01a4b8;}
.facilities ul.list li:first-child .title .line{ width: 100%; background: #ccc;}
.facilities ul.list li .title h2{ display: block; width: 100%; font-size: 30px; line-height: 30px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.facilities ul.list li p.img{ display: block; width: 100%; height: 80vh; max-height: 650px; background: #333; background-size: cover;}
.facilities ul.list li:nth-child(1) p.img{ background: url("../images/facility/list01.jpg") no-repeat 50% 50%;}
.facilities ul.list li:nth-child(2) p.img{ background: url("../images/facility/list02.jpg") no-repeat 50% 50%;}
.facilities ul.list li:nth-child(3) p.img{ background: url("../images/facility/list03.jpg") no-repeat 50% 50%;}

.footermain{ display: block;}
.footermain .point{ width: 90%; max-width: 1400px; margin: 0 auto 100px auto;}
.footermain .point span{ margin: 0 0 -30px -20px}
.footermain .main{ display: block; padding: 0 0 60px 0; position: relative; overflow: hidden;}
.footermain .main::after{ content: ''; width: 70%; height: 100%; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: absolute; top: 0; left:75%; z-index: -1;}
.footermain .main .location{ display: flex; flex-wrap: wrap; align-items: center; width: 75%; padding: 20vh 0; background: url("../images/location/footer_bg.jpg") no-repeat; background-size: cover; position: relative;}
.footermain .main .location::after{ content: ''; display: block; width: 60%; padding: 0 0 26% 0; background: url("../images/bg_clooud.png") no-repeat 0 0; background-size: auto 100%; position: absolute; right:-45%; bottom: -17%; z-index: 5;}

.footermain .main .location .infor{ display: block; width: 60%; padding:  0 10% 0 15%; font-family: "Noto Serif TC", serif; color: #FFF;}
.footermain .main .location .infor p{ display: block; margin: 0 0 40px 0; padding: 0 0 30px 0; background: url("../images/line_h.png") repeat-x 0 100%; font-size: 20px; line-height: 26px;}
.footermain .main .location .infor ul{}
.footermain .main .location .infor ul li{ display: block; margin: 0 0 10px 0; font-size: 18px; line-height: 26px;}
.footermain .main .location .infor ul li img{ display: inline-block; margin: 0 10px 0 0; vertical-align:  middle;}
.footermain .main .location .infor ul li strong{ color: #e6c878;font-size: 30px; font-family: 'Calisto MT'; font-weight:  normal; letter-spacing: 3px;}
.footermain .main .location .map{ display: block; width:60%; margin: 0 -20% 0 0; padding: 0 0 25% 0; position: relative;}
.footermain .main .location .map iframe{ display: block; width: 100%; height: 100%; position: absolute;}
.footermain .main .copytight{ display: flex; flex-wrap: wrap; align-items: flex-end; width: 100%; padding:  200px 0 0 0;}
.footermain .main .copytight .link{ display: block; width: 75%; padding: 0 0 0 2.5%;}
.footermain .main .copytight .link p{ display: block; margin: 0 0 20px 0; padding: 0 0 20px 0; background: url("../images/line_h2.png") repeat-x 0 100%; font-size: 18px; line-height: 32px; font-family: "Noto Serif TC", serif; }
.footermain .main .copytight .link p a{ display: inline-block; margin: 0 5px;}
.footermain .main .copytight .link p a.fb{ display:  inline-block; width: 60px; height: 60px; margin: 0 30px 0 0;  background: url("../images/fb_icon.png") no-repeat 50% 50%; vertical-align:  middle;}
.footermain .main .copytight .link p a.booking{ display: inline-block; width: 240px; height: 60px; margin: 0 30px 0 0; border: 1px solid #ccc; font-size: 20px; line-height: 60px; vertical-align:  middle; text-align: center; background: url("../images/booking_icon.jpg") no-repeat 15px 50%;}
.footermain .main .copytight .link p a.booking:hover{ background: #298e92 url("../images/booking_icon.png") no-repeat 15px 50%; color: #FFF;; border: 1px solid #298e92;}
.footermain .main .copytight .link p:last-child{ background:  none; padding: 0; margin: 0; font-size: 15px; letter-spacing: 3px;}
.footermain .main .copytight .logo{ display: block; width: 25%; text-align: center;}
.footermain .main .copytight .logo a{ display: inline-block; text-align: center; position: relative;}
.footermain .main .copytight .logo a img{ width: 100%; max-width: 180px;}
.footermain .main .copytight .logo a strong{ display: block; margin: 60px 0 0 0; font-size: 30px; font-family: "Noto Serif TC", serif; color: #FFF; position: relative;}
.footermain .main .copytight .logo a strong::after{ content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background:  #e6c878; position: absolute; top: -20px; right: 5px;}
.footermain .main .copytight .logo a strong::before{ content: ''; display: block; width: 1px; height: 35px;  background:  #e6c878; position: absolute; top: -60px; right: 7px;}

.footermain .main .copytight .logo a span{ display: block; width: 100%; font-family: 'Athelas'; text-transform: uppercase; letter-spacing: 8px; position: absolute; top: 10px; left: calc(100% + 40px); color: #e6c878; transform: rotate(90deg); transform-origin:  left top;}

.pagestop{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto 150px auto;}
.pagestop .left{ display: block; width: 35%;}
.pagestop .left p.img{ display: block; width: 100%; margin: 0 0 50px 0; position: relative;}
.pagestop .left p.img::after{content: ''; display: block; width: 45px; height: 45px;background: #02a2b8; position: absolute; right: -22px; bottom: -22px;}
.pagestop .left p.icon{ display: block; text-align:  right;}
.pagestop .left p.icon img{ display: inline-block; margin: 0 0 0 10px;}
.pagestop .right{ display: block; width: 60%; margin: 0 0 0 5%; padding: 5% 0 0 0;}
.pagestop .right h1{ display: block; margin: 0 0 50px 0; font-size: 50px; line-height: 80px; font-family: "Noto Serif TC", serif; font-weight:  normal;}
.pagestop .right h1 span{font-size: 80px; line-height: 80px; font-family: 'Athelas'; font-weight:  normal;background: url("../images/text_bg.jpg") 50% 50%; -webkit-text-fill-color:transparent; -webkit-background-clip: text;}
.pagestop .right p{ display: block; font-size: 22px; line-height: 36px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.pagestop .right .infor{ display: flex; align-items: center;}
.pagestop .right .infor ul{ display: block; width: 100%; margin: 0 10% 0 0; font-size: 22px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.pagestop .right .infor ul li:first-child{ display: block; margin: 0 0 15px 0; padding: 0 0 15px 0; border-bottom: 1px solid #ccc;}
.pagestop .right .infor a.booking{ display: block; width: 100%; max-width: 200px; height: 65px; font-size: 18px; line-height: 65px; text-align: center; text-indent: 20px; color: #FFF; border-radius: 3px; background: #111 url("../images/booking_icon.png") no-repeat 30px 50%; }

.pagestop .right .infor .tel{ display: block; width: 100%; max-width: 300px; margin: 0 10% 0 0; padding: 0;}
.pagestop .right .infor .tel strong{ display: block; margin: 0 0 15px 0; font-size: 20px;}
.pagestop .right .infor .tel strong img{ display: inline-block; margin: 0 10px 0 0;}
.pagestop .right .infor .tel a{ display: block; margin: 0 0 15px 0; font-size: 50px; color: #8f733f; font-family:  serif;}
.pagestop .right .infor .tel .time{ display: block; width: 100%; margin: 0 auto; padding: 15px 0 0 0; border-top: 1px solid rgba(0,0,0,.3); position:  relative; font-size: 18px; line-height: 25px; letter-spacing: 3px; text-align: center;}

.pagestop.massage{ max-width: 1000px; margin: 0 auto 80px auto;}
.pagestop.massage .right h1{ font-size: 35px; line-height: 36px; margin: 0 0 30px 0;}
.pagestop.massage .right p{ font-size: 18px;}
.pagestop.massage .right p span{ display: block; margin: 0 0 20px 0; color: #333; font-family: '微軟正黑體';}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes marquee2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes marquee3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}



/*banner效果*/
@-webkit-keyframes bannerin { 0% { transform: scale(1.1,1.1); } 100% { transform:  scale(1.0,1.0);  } }
@-moz-keyframes bannerin { 0% { transform:  scale(1.1,1.1); } 100% { transform:  scale(1.0,1.0);  }}
@keyframes bannerin { 0% { transform:  scale(1.1,1.1); } 100% { transform:  scale(1.0,1.0);  } }




/*關於我們*/

.aboutmain{ display: block; width: 100%; margin: 0 auto 0 auto; padding: 0 0 15% 0; overflow: hidden; position: relative;}
.aboutmain .main{display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}
.aboutmain .main .text{ display: block; width: 40%;}
.aboutmain .main .text p{ display: block; margin: 0 0 150px 0; font-size: 18px; line-height: 32px;}
.aboutmain .main .text a{ display: block; width: 90%; height: 90px; font-size: 22px; line-height: 90px; text-align:  center; color: #FFF; font-family: "Noto Serif TC", serif; border-radius: 3px; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: relative;}
.aboutmain .main .text a::after{ content: ''; display: block; background: url("../images/outlink_icon.png"); width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); right:10%;}
.aboutmain .main p.img{ display: block; width: 70%; margin: 0 -10% 0 0;}
.aboutmain::after{ content: ''; display: block; width: 32%; padding: 0 0 20% 0; background: url("../images/bg_clooud.png") no-repeat 100% 0; background-size: auto 100%; position: absolute; left:0; bottom: 0; z-index: -1;}


/*房型*/
header .right ul.roomlist{ display: block; width: 80%; margin: 0 0 0 -65px; padding: 20vh 0 0 0; position: relative; z-index: 99;}
header .right ul.roomlist li{ display: block; width: 100%; font-size: 20px; line-height: 32px; color: #FFF;}
header .right ul.roomlist li a{ display: block; height: 40px; line-height: 40px; padding: 0 0 0 35%; border-radius: 3px;}
header .right ul.roomlist li.current{ margin: 0 0 10px 0;}
header .right ul.roomlist li.current a{  height: 65px; line-height: 65px; font-size: 26px; color: #0b72af; background: #FFF; position: relative;}
header .right ul.roomlist li a span{ content: ''; display: none; width: 65px; height: 65px;border-radius:0 3px 3px 0; position: absolute; top: 0; left: 0; z-index: 99;}
header .right ul.roomlist li.current a span{ display: block;}
header .right ul.roomlist li.current a span::after{ content: ''; display: block; width: 18px; height: 18px; background: #068bb3; border-radius: 50%; position: absolute; right: calc(50% - 9px); top:calc(50% - 9px);}
header .right ul.roomlist li.current a span::before{  content:'';  width: 0;  height: 0;  border-style: solid;  border-width: 2px 0 2px 4px;  border-color: transparent transparent transparent #FFF;  position: absolute;  right: calc( 50% - 2px );  top: calc( 50% - 2px ); z-index: 2}

.roommain{ display: block; width: 100%; margin: 200px auto 200px auto; overflow: hidden;}
.roommain .roombanner{ display: flex;  flex-wrap: wrap; align-items: flex-end; width: 90%; max-width: 1400px; margin: 0 auto 100px auto;}
.roommain .roombanner .imgb{ display: block; width: 80%;}
.roommain .roombanner .imgb .ad{ display:block; float:left;}
.roommain .roombanner .imgb .ad img{ width:100%;}
.roommain .roombanner .imgs{ display: block; width: 30%; margin: 0 -10% 0 0; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); }
.roommain .roombanner .imgs .ad{ display:block; float:left; opacity: 0.5;}
.roommain .roombanner .imgs .ad img{ width:100%;}
.roommain .roombanner .imgb .slick-arrow{ display:  none !important;}
.roommain .roombanner .imgs .slick-prev{ left: -250% !important; top: calc(50%- 46px) !important; width: 63px !important; height: 92px !important; background: url("../images/pre_icon.png") !important; z-index: 99;}
.roommain .roombanner .imgs .slick-prev:before{ content: inherit !important;}
.roommain .roombanner .imgs .slick-next{ left: 10%; right: inherit !important; top: calc(50%- 46px)  !important; width: 63px !important; height: 92px !important; background: url("../images/next_icon.png") !important;z-index: 99;}
.roommain .roombanner .imgs .slick-next:before{ content: inherit !important;}
.roommain .roomtitle{ display: flex; flex-wrap: wrap; align-items: flex-end; width: 90%; max-width: 900px; margin: 0 auto 150px auto;}
.roommain .roomtitle h1{ display: block; width: calc(100% - 160px); margin: 0 10px 50px 0; padding: 0 0 30px 0; border-bottom: 1px solid #CCC; font-size: 42px; line-height: 68px; font-family: "Noto Serif TC", serif; font-weight:  normal;}
.roommain .roomtitle h1 span{font-size: 68px; line-height: 62px; font-family: 'Athelas'; font-weight:  normal;background: url("../images/text_bg.jpg") 50% 50%; -webkit-text-fill-color:transparent; -webkit-background-clip: text;}
.roommain .roomtitle .type{ display: block; width: 150px; margin: 0 0 50px 0; padding: 0 0 30px 0; font-size: 18px; line-height: 26px; color: #0591b4; border-bottom: 1px solid #0591b4;}
.roommain .roomtitle p{ display: block; width: 100%; font-size: 20px; line-height: 32px; font-family: "Noto Serif TC", serif;}
.roommain .roomamenities{ display: block; width: 100%; padding: 6% 0 0 0; overflow: hidden; position: relative;}
.roommain .roomamenities::after{ content: ''; display: block; width: 28%; padding: 0 0 20% 0; background: url("../images/bg_clooud.png") no-repeat 100% 0; background-size: auto 100%; position: absolute; left:0; top: 0%; z-index: 2;}

.roommain .roomamenities p.img{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1300px; margin: 0 auto 0px auto; position: relative;}
.roommain .roomamenities p.img img{ display: block; width: calc(100% / 3 - 1px); margin: 0 1px 0 0;}
.roommain .roomamenities p.img::after{ content: 'AMENITIES'; display: block;font-size: 100px; line-height: 100px; font-family: 'Athelas'; color: #298e92; position:  absolute; bottom:-30px; left: 5%; z-index: 3;}
.roommain .roomamenities .text{ display: flex; flex-wrap: wrap; align-items: flex-end; width: 90%; max-width: 1000px; margin: -80px auto 50px auto; }
.roommain .roomamenities .text ul{ display: block; width: calc(90% - 260px); margin: 0 10% 0 0;}
.roommain .roomamenities .text ul li{ display: block; margin: 0 0 5px; padding: 0 0 0 10px; font-size: 18px; position: relative;}
.roommain .roomamenities .text ul li::before{ content: ''; display: block; width: 2px; height: 2px; border-radius: 2px; background: #111; position: absolute; top: 13px; left: 0;}
.roommain .roomamenities .text .note{ display: block; width: 260px; height: 100%; padding: 60px 0 0 0; position: relative;overflow: hidden;}
.roommain .roomamenities .text .note::after{ content: ''; display: block; width: 220%; height: 100%; position: absolute; top: 0; left: 0; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%);}
.roommain .roomamenities .text .note p.time{ display: block; width: 70%; margin: 0 auto 70px auto; padding: 35px 0 0 0; background: url("../images/time_icon2.png") no-repeat 100% 0; text-align:  right; position: relative; z-index: 2;}
.roommain .roomamenities .text .note p.time span{ display: block; font-size: 18px; line-height: 36px; color: #FFF; font-family: "Noto Serif TC", serif;}
.roommain .roomamenities .text .note p.time span strong{ font-size: 30px; font-family: 'Calisto MT'; font-weight:  normal;}
.roommain .roomamenities .text .note p.time span:last-child{ margin: 90px 0 0 0; position: relative;}
.roommain .roomamenities .text .note p.time span:last-child::after{content: ''; display: block; width: 1px; height: 80px; background: #FFF; opacity: .5; position: absolute; top: -85px; right: 8px;}
.roommain .roomamenities .text .note a{ display: block; width: 260px; height: 75px; font-size: 20px; line-height: 75px; text-align:  center; text-indent: 15px; color: #FFF; position: relative; z-index: 2;}
.roommain .roomamenities .text .note a.rnote{ background: url("../images/rooms/note_icon.png") no-repeat 30px 50%,url("../images/line_h.png") repeat-x 0 0; cursor: pointer}
.roommain .roomamenities .text .note a.booking{ background: #111 url("../images/booking_icon.png") no-repeat 35px 50%; border-top: 1px solid #FFF;}

.roomnote{ display:block; width:100vw; height:0vh; position:fixed; bottom:0; left:0; background:#918164 no-repeat bottom center; z-index:99; box-shadow: 80px 0 0px rgba(0,0,0,0); -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; -ms-transition:all .5s ease; transition:all .5s ease;}
.roomnote.open{ box-shadow: 80px 0 80px rgba(0,0,0,0.5); height:60vh;}
.roomnote a.close{ display:block; width:50px; height:50px; background: url(../images/close.png) no-repeat 60%  center; border-radius: 0 25px 25px 0; position:absolute; top:10px; right:20px; cursor: pointer; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; -ms-transition:all .5s ease; transition:all .5s ease;}
.roomnote h3{ display:inline-block; padding:0 0 0 0; font-size:20px; letter-spacing:2px; color:#FFF;  position: absolute; top:10vh; left:6%;}
.roomnote h3 img{ display:inline-block; margin:15px 0 0 0;}
.roomnote .text{ display:block; width:75%; height:40vh; position:absolute; top:10vh; left:20%; font-size:16px; line-height:200%; color:#FFF;}
.roomnote .text .mCSB_container{ width:90%;}

/*設施*/
.facilitymain{ display: block; width: 100%; margin: 0 auto 0 auto; padding: 0 0 30% 0; overflow: hidden;}
.facilitymain ul.nav{ display:flex; width: 90%; max-width: 900px; margin: 0 auto 80px auto;}
.facilitymain ul.nav li{ display: block; width: 100%; text-align: center; font-size: 25px; line-height: 32px; font-family: "Noto Serif TC", serif; font-weight: 300; border-right: 1px solid #ddd;}
.facilitymain ul.nav li:last-child{ border:  none;}
.facilitymain ul.nav li img{ display: block; width: 60px; height: auto; margin: 0 auto 20px auto;}
.facilitymain ul.nav li::after{  content:''; display: block; margin: 20px auto 0 auto;width: 0;  height: 0;  border-style: solid;  border-width: 4px 0 4px 8px;  border-color: transparent transparent transparent #cacaca; transform: rotate(90deg);}
.facilitymain .control{ display: block; width: 100%; margin: 0 0 200px 0; padding: 30vh 0; position: relative; background: url("../images/facility/img01_1.jpg") no-repeat; background-size: cover;}
.facilitymain .control::after{ content: ''; display: block; width: 28%; padding: 0 0 20% 0; background: url("../images/bg_clooud.png") no-repeat 100% 0; background-size: auto 100%; position: absolute; left:0; bottom: -20%; z-index: 2;}

.facilitymain .main{ display: block; width: 90%; max-width: 450px; margin: 0 auto; padding: 20px 20px 100px 20px; background: #FFF;}
.facilitymain .main p.img{ display: block; margin: 0 0 60px 0; position: relative;}
.facilitymain .main p.img .icon{ display: block; width: 40%; padding: 0 0 40% 0; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: absolute; top: -50%; left: calc(50% - 40% / 2); z-index: 9;}
.facilitymain .main p.img .icon:after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; background: url("../images/facility/icon01.png") no-repeat 50% 50%;}
.facilitymain .main h2{ display: block; width: 80%; margin: 0 auto 30px auto; padding: 0 0 30px 0; border-bottom: 1px solid #ccc; font-size: 40px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.facilitymain .main p.text{ display: block;width: 80%; margin: 0 auto 0px auto; font-size: 20px; line-height: 36px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.facilitymain .main p.text span{ display: block; margin: 25px 0 0 0; font-size: 18px; font-family: '微軟正黑體'; font-weight:  normal;}
.facilitymain .main p.text a{ display: block; width: 100%; height: 60px; margin: 40px 0 0 0; line-height: 60px; text-align: center; color: #FFF; background: #111; border-radius: 3px;}

.facilitymain ul.other{ display: block; width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}
.facilitymain ul.other::before{ content: ''; display: block; width:65%; padding: 0 0 28% 0; background: url("../images/bg_clooud2.png") no-repeat; background-size: auto 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50% ,-30%); z-index: -1;}
.facilitymain ul.other li{ display: flex; flex-wrap: wrap;}
.facilitymain ul.other li:last-child{ flex-direction: row-reverse;}
.facilitymain ul.other li>.img{ display: block; width: 60%; margin: 0 0 0 -10%;}
.facilitymain ul.other li:first-child>.img{ transform: translateY(25%);}
.facilitymain ul.other li:first-child p.img .icon:after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; background: url("../images/facility/icon02.png") no-repeat 50% 50%;}
.facilitymain ul.other li>.img img{ width: 100%;}
.facilitymain ul.other li:last-child>.img{  margin: 0 -10% 0 0;}
.facilitymain ul.other li>.text{ display: block; width: 50%;}
.facilitymain ul.other li:last-child>.text{ transform: translateY(60%);}
.facilitymain ul.other li:last-child p.img .icon:after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; background: url("../images/facility/icon03.png") no-repeat 50% 50%;}

.facilitymain ul.other li .main{ background: none;}

/*按摩*/
.massagemain{ display: block; width: 100%; margin: 0 auto 200px auto; overflow: hidden;}
.massagemain .topimg{ display: block; width:100%; margin: 0 auto 100px auto; position: relative;}
.massagemain .topimg::after{ content: ''; display: block; width: 28%; padding: 0 0 20% 0; background: url("../images/bg_clooud.png") no-repeat 100% 0; background-size: auto 100%; position: absolute; left:0; bottom: -40%; z-index: 2;}
.massagemain .topimg img{ display: block; width: 90%; max-width: 1400px; margin: 0 auto 0 auto; }
.massagemain .price{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}
.massagemain .price>ul{ display: block; width: 55%; margin: 100px -15% 0 0; padding: 50px; background: #FFF; z-index: 2;}
.massagemain .price>ul>li{ display: flex; flex-wrap: wrap; margin: 0 0 80px 0;}
.massagemain .price>ul>li .number{ display: block; width: 115px; height: 115px; position: relative; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%);}
.massagemain .price>ul>li .number span{ display: inline-block; font-size: 18px; color: #FFF; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%);}
.massagemain .price>ul>li .number span strong{ display: block; font-size: 40px; font-family: 'Calisto MT'; font-weight:  normal;}
.massagemain .price>ul>li .list{ display: block; width: calc(100% - 115px); padding: 20px 0 0 0;}
.massagemain .price>ul>li .list h2{ display: block; margin: 0 0 10px 0; padding: 0 0 0 5%; font-size: 28px; line-height: 32px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.massagemain .price>ul>li .list>p{ display: block; margin: 0 0 10px 0; padding: 0 0 0 5%; font-size: 18px; line-height: 26px; color: #b8964c;}
.massagemain .price>ul>li .list>ul{ display: block; padding: 30px 0 0 0; border-top: 1px solid #CCC;}
.massagemain .price>ul>li .list>ul>li{ display: flex;justify-content:space-between; padding: 20px;}
.massagemain .price>ul>li .list>ul>li:nth-child(2n){ background: #ececec;}
.massagemain .price>ul>li .list>ul>li h3{ display: block; font-size: 20px; line-height: 26px; padding: 0 0 0 20px;; position: relative;}
.massagemain .price>ul>li .list>ul>li h3::after{ content: ''; display: block; width: 5px; height: 5px; background: #01a3b8; position: absolute; top: calc(50% - 2.5px); left: 0;}
.massagemain .price>ul>li .list>ul>li p{ display: block; text-align: right; font-size: 16px; line-height: 19px; color: #555;}
.massagemain .price>ul>li .list>ul>li p strong{ font-size: 20px; color: #111;}

.massagemain .price p.img{ display: block; width: 70%; height: 100%; margin: 0 -10% 0 0; position: sticky; top: 0;}


/*消息*/
.newsmain{ display: block; width: 100%; overflow: hidden; margin: 0 auto 150px auto;}
.newsmain .title{ display: flex; align-items: flex-end; width: 90%; max-width: 1400px; margin: 0 auto 50px auto;}
.newsmain .title p.img{ display: block; width: 100%;}
.newsmain .title .text{ display: block; width: 250%}
.newsmain .title .text h1{ display: block; width: 100%; margin: 0 0 30px 0; padding: 0 0 30px 6%; font-size: 36px; line-height: 48px; font-family: "Noto Serif TC", serif; font-weight: 300; border-bottom: 1px solid #CCC;}
.newsmain .title .text .date{ display: block; margin: 0 0 30px 0; padding: 0 0 0 6%; font-size: 22px; font-family: "Noto Serif TC", serif; font-weight: 300; color: #02a2b7;}
.newsmain .textmain{ display: block; width: 90%; max-width: 1100px; margin: 0 auto 100px auto; font-size: 18px; line-height: 190%;}
.newsmain .textmain span{ line-height: normal;}
.newsmain .textmain img{ max-width: 100%; height: auto !important;}
.newsmain .pages{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}
.newsmain .pages a{ display: block; width: 38%; position: relative;}
.newsmain .pages a::after{ content: ''; display: block; width: 200%; height: 1px; background: #d7e3e5; position: absolute; top: 45px;}
.newsmain .pages a .btn{ display: block; margin: 0 0 30px 0;}
.newsmain .pages a .btn .icon{ display: inline-block; vertical-align: middle; width: 25px; height: 25px; margin: 0 15px 0 0; background: #25a4b7; border-radius: 50%; position: relative;}
.newsmain .pages a .btn .icon::before{  content:'';  width: 0;  height: 0;  border-style: solid;  border-width: 2px 0 2px 4px;  border-color: transparent transparent transparent #FFF;  position: absolute;  right: calc( 50% - 2px );  top: calc( 50% - 2px ); transform: rotate(180deg); z-index: 2}
.newsmain .pages a .btn span{ display: inline-block; font-size: 20px; vertical-align: middle;}
.newsmain .pages a .moretitle{ display: block; font-size: 23px; line-height: 32px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.newsmain .pages .prev{ display: block; width: 70%; padding: 80px 0; overflow: hidden;}
.newsmain .pages .next{ display: block; width: 30%; margin: 0; padding: 80px 0;position: relative;}
.newsmain .pages .next .bg{ display: block; width:calc( 50vw - 137% / 2); height: 100%; position: absolute; background-size: cover; top: 0; left: 0; z-index: -1;}
.newsmain .pages .next .bg::before{ content: ''; display: block; width: 200%; height: 100%; opacity: .8; position: absolute; top: 0; left: 0; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%);}
.newsmain .pages .next a{ width: 90%; margin: 0 0 0 10%;}
.newsmain .pages .next a .btn{ text-align: right;}
.newsmain .pages .next a .btn .icon{ margin: 0 0 0 15px; background: #FFF;}
.newsmain .pages .next a .btn .icon::before{border-color: transparent transparent transparent #25a4b7; transform: rotate(0deg);}
.newsmain .pages .next a .btn span{ color: #FFF;}
.newsmain .pages .next a .moretitle{ color: #FFF;}
.newsmain .pages .next a::after{ right: 0;}
.newsmain .morelist{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto 50px auto; position: relative;}
.newsmain .morelist::after{ content: 'MORE'; display: block;font-size: 100px; line-height: 100px; font-family: 'Athelas'; color: #298e92; position:  absolute; bottom:-30px; left: 0; z-index: 3;}
.newsmain .morelist::before{ content: ''; display: block; width:70%; padding: 0 0 25% 0; background: url("../images/bg_clooud2.png") no-repeat; background-size: auto 100%; position: absolute; left: 30%; top: -10%; z-index: -2;}

.newsmain .morelist p.img{ display: block; width: calc(50vw - 50% + 70%); margin: 0 0 0 calc(-50vw + 50%); background: url("../images/news/more_img.jpg") no-repeat; background-size: cover;}
.newsmain .morelist ul{ display: block; width: 60%; margin: 15% 0 0 -30%; padding: 100px 8% 80px 8%; background: #FFF; position: relative; z-index: 2;}
.newsmain .morelist ul li{ display: block; margin: 0 0 15px 0; padding: 0 0 15px 0; background: url("../images/line_h2.png") repeat-x 0 100%; position: relative;}
.newsmain .morelist ul li:last-child{ margin: 0; padding: 0; background:  none;}
.newsmain .morelist ul li::after{ content: ''; display: block; width: 3px; height: 3px; background: #25a4b7; position: absolute; top: 13px; left: -15px;}
.newsmain .morelist ul li a{ font-size: 18px; line-height: 28px;}

/*交通*/
.locationmain{ display: block; width: 100%; margin: 0 auto 100px auto; padding: 140px 0 0 0; overflow: hidden;}
.locationmain .train{ display: block; width: 90%; max-width: 1400px; margin: 0 auto 150px auto; position: relative;}
.locationmain .title{ display: block; width: 160px; height: 160px; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: absolute; top: -140px; left: 0;}
.locationmain .title h2{ display: block; width: 100%; padding: 60px 0 0 0; font-size: 20px; color: #FFF; text-align: center; background: url("../images/icon/train_icon.png") no-repeat 50% 0%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.locationmain .train .mian{display:block; width: 100%;}
.locationmain .train .mian .scroll{display: flex; flex-wrap: wrap; width: 100%;}
.locationmain .train .hotel{ display: block; width: 50%; position: relative;}
.locationmain .train .hotel .logo{ display: block; width: 50%; max-width: 130px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.locationmain .train .hotel .logo img{ width: 100%;}
.locationmain .train .hotel p.img{ display: block; width: 120%; height: 100%; margin: 0 -20% 0 0; background: url("../images/location/hotel.jpg") no-repeat; background-size: cover; position: absolute; top: 0; left: 0;}
.locationmain .train ul.type{ display: block; width: 50%; padding: 150px 0;}
.locationmain .train ul.type li{ display: flex; align-items: center; margin: 0 0 50px 0;}
.locationmain .train ul.type li:last-child{ margin: 0;}
.locationmain .train ul.type li p{ width: 100%; text-align:  center;}
.locationmain .train ul.type li p.station{ display: block; height: 100%; padding: 15px 0; border: 1px solid #b69677; border-radius: 3px; font-size: 18px; color: #a97c2e;}
.locationmain .train ul.type li p.method{ display: block; margin: 0 10px 0 0; position: relative;}
.locationmain .train ul.type li p.method::before{ content: ''; display: block; width: 100%; height: 1px; background: #b69677; position: absolute; top: 50%; left: 0;}
.locationmain .train ul.type li p.method::after{ content: ''; display: block; width: 20px; height: 1px; background: #b69677; position: absolute; top: calc(50% - 7px); right: -2px; transform: rotate(45deg)}
.locationmain .train ul.type li p.method strong{ display: block; font-size: 18px; line-height: 36px;}
.locationmain .train ul.type li p.method span{ display: block; height: 36px; font-size: 16px; line-height: 36px; color: #aa8443;}

.locationmain .drive{ display: block; width: 100%; margin: 0 auto 100px auto; position: relative;}
.locationmain .drive::after{ content: ''; display: block; width: 28%; padding: 0 0 20% 0; background: url("../images/bg_clooud.png") no-repeat 100% 0; background-size: auto 100%; position: absolute; left:0; top: -20%; z-index: 2;}
.locationmain .drive .main{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto;}
.locationmain .drive p.img{ display: block; width: 50%;}
.locationmain .drive .text{ display: block; width: 40%; margin: 0 0 0 10%; padding: 80px 0 0 0;}
.locationmain .drive .text .title{ margin: 0 0 60px 0; position: relative; top: inherit;}
.locationmain .drive .text .title h2{ padding: 60px 0 0 0;  background: url("../images/icon/drive_icon.png") no-repeat 50% 0%;}


.locationmain .drive .text p{ display: block; font-size: 18px;line-height: 32px;}

/*聯繫*/
.contacmain{ display: block; width: 100%; overflow: hidden; margin: 0 auto 150px auto;}
.contacmain .top{ display: flex; flex-wrap: wrap; width: 90%; max-width: 1400px; margin: 0 auto; position: relative;}
.contacmain .top .text{ display: block; width: 80%; padding:5% 10% 7% 10%;}
.contacmain .top .text h2{ display: block; margin: 0 0 15px 0; font-size: 28px; line-height: 32px; font-family: "Noto Serif TC", serif; font-weight: 300;}
.contacmain .top .text p{ width: 90%; font-size: 17px; line-height:26px; color: #555;}
.contacmain .top .img{ display: block; width: 20%; margin: 0; padding: 80px 0;position: relative;}
.contacmain .top .img .bg{ display: block; width:calc( 50vw - 137% / 2); height: 100%; position: absolute; background: url("../images/contact/img01.jpg"); background-size: cover; top: 0; left: 0; z-index: -1;}
.contacmain .top .img .bg::before{ content: ''; display: block; width: 200%; height: 100%; opacity: .8; position: absolute; top: 0; left: 0; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%);}
.contacmain .fromemain{ display: flex; width: 90%; max-width: 1400px; margin: 0 auto 75px auto; position: relative;}
.contacmain .fromemain::after{ content: ''; display: block;font-size: 100px; line-height: 100px; font-family: 'Athelas'; color: #298e92; position:  absolute; bottom:-30px; left: 0; z-index: 3;}
.contacmain .fromemain::before{ content: ''; display: block; width:70%; padding: 0 0 25% 0; background: url("../images/bg_clooud2.png") no-repeat; background-size: auto 100%; position: absolute; left: 40%; top: -10%; z-index: -2;}
.contacmain .fromemain p.img{ display: block; width: calc(50vw - 50% + 80%); margin: 0 0 0 calc(-50vw + 50%); background: url("../images/contact/img02.jpg") no-repeat; background-size: cover;}
.contacmain .fromemain ul{ display: block; width: 50%; margin: 10% 0 -75px -30%; padding: 50px 0 0 0; background: #FFF; position: relative; z-index: 2;}
.contacmain .fromemain ul li{ display:block; width:100%; margin: 0 0 20px 0; padding:  0 8%; position:relative;}
.contacmain .fromemain ul li:last-child{ margin:0 0 0 0; padding:15px 0 0 0;}
.contacmain .fromemain ul li select{ display:inline-block; width:100%; height:60px; padding: 0 25px; background: #FFF url(../images/select.png) no-repeat;  background-position: calc(100% - 10px) 50%; background-size: auto 80%; -ms-appearance: none; -webkit-appearance: none; -moz-appearance: none;  appearance: none;border: 1px solid #b0b0b0; font-size:16px; line-height:55px; color:#111; font-family:'微軟正黑體';}
.contacmain .fromemain ul li input{display:inline-block; width:100%; height:60px; padding: 0 25px; background:#FFF; border: 1px solid #b0b0b0; border-radius: 0px; font-size:16px; line-height:55px; color:#111; font-family:'微軟正黑體';}
.contacmain .fromemain ul li textarea{display:inline-block; width:100%; height:150px; padding:15px 25px; background:#FFF ; border: 1px solid #b0b0b0; border-radius: 0px; font-size:16px; line-height:29px; color:#111; font-family:'微軟正黑體';}
.contacmain .fromemain ul li input[type=submit]{ display:block; width: 100%; height:75px; margin:0 auto; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); font-size:20px; line-height:75px; text-align: center; font-weight:  bold; color: #FFF; border: none; cursor: pointer; position:relative;}
.contacmain .fromemain ul li .code{ display:inline-block; position:absolute; top:10px; right: calc(8% + 10px);}
.contacmain .fromemain ul li .code a{ display:inline-block; width:38px; height:38px; background:url(../images/reload.jpg) no-repeat;}

@keyframes marqee {
	0% {left: 0%;transform: translateX(0%);}
	100% {left: 0;transform: translateX(-50%);}
}

footer{ display: block; width:100%; padding:0; background:#FFF;}
footer .main{ display: flex; width:95%; margin:0 auto; padding:120px 0; flex-wrap: wrap; align-items:center;}
footer a.logo{ display:block; width:164px; margin:0 80px 0 0;}
footer a.logo img{ width:100%;}
footer nav{ display:block; width:250px; padding:0 130px 0 0; height:100%; border-right:1px solid #ddd;}
footer nav a{ display:block; font-size:18px; line-height:36px; color:#111;}
footer nav a::before{ content:''; display:inline-block; width:4px; height:4px; margin:0 15px 0 0; background:#c0a081; vertical-align: middle;}
footer .group{ display: block; width:calc(100% - 164px - 80px - 120px - 130px); text-align: right;}
footer .group ul{ display: inline-block; width:170px; margin:0 0 0 50px; padding:30px 0 0 0; vertical-align: top; position:relative;}
footer .group ul li{ text-align:left;}
footer .group ul li a{ font-size:18px; line-height:32px; color:#111;}
footer .group ul:nth-child(1)::before{ content:'HOTEL'; display:inline-block; font-size:12px; line-height:19px; color:#c0a081; position:absolute; top:0; left:0;}
footer .group ul:nth-child(3)::before{ content:'MASSAGE'; display:inline-block; font-size:12px; line-height:19px; color:#c0a081; position:absolute; top:0; left:0;}
footer .copyright{ display:block; padding:0 0 30px 0; font-size:12px; line-height:15px; text-align:center; color:#555;}

.navbtn{ display: none; width:50px; height:50px; background: rgba(15,88,170,0.8); border-radius: 3px; position:fixed; top:5px; right: 10px; z-index:999; cursor:pointer; transform:skewX(0deg);}
.navbtn a{ display:block; width:50px; height:50px; position:relative; float:right; border-radius:50%;}
.navbtn a .bar{ display:block; width:22px; height:3px; background:#FFF; border-radius:3px; position:absolute; top: calc(50% - 1.5px); left:calc(50% - 11px); z-index:2;}
.navbtn a .bar1{ top: calc(50% - 8px); z-index:2;}
.navbtn a .bar2{ top: calc(50% + 6px); size:2;}
.navbtn.open a{ }
.navbtn.open a .bar{background: #FFF;}
.navbtn.open a .bar1{ top: calc(50% - 1.5px); z-index:2;}
.navbtn.open a .bar2{ top: calc(50% - 1.5px);size:2;}

/*特效*/
.in,.in2,.in3{ transform: translateY(30px); opacity: 0;}
.animated {  -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;}
.animated2 { animation-delay: .5s;  -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;}
.animated3 { animation-delay: 1s;  -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;}
.fadeIn {  -webkit-animation-name: fadeIn;  -moz-animation-name: fadeIn;  animation-name: fadeIn;}
/*fadeIn*/
@keyframes fadeIn { 
0% { transform: translateY(30px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1;}
}
@-moz-keyframes fadeIn { 
0% { transform: translateY(30px); opacity: 0;  }
100% { transform: translateY(0px); opacity: 1;}
}
@-webkit-keyframes fadeIn{ 
0% { transform: translateY(30px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1;}
}



@media screen and (min-width: 1024px) {
    .indexabout .checkin .main .step ul:hover li p{ max-height: 0;}
    .indexabout .checkin .main .step ul li:hover p{ max-height: 400px;}
    
    .indexroom .main .room ul:hover li a.current{ background: #FFF; color: #111;}
    .indexroom .main .room ul:hover li a.current span{ display:  none;}
    .indexroom .main .room ul:hover li a:hover::after{ opacity: 1;  z-index: 2;}
    .indexroom .main .room ul:hover li a:hover { background: #298e92; color: #FFF;}
    .indexroom .main .room ul:hover li a:hover span{ display: block;}
    
    .facilities ul.list:hover li{ width: calc(44% / 2 - 1px);}
    .facilities ul.list:hover li .icon{ opacity: 0;}
    .facilities ul.list:hover li .title .line{ width: 30px; background: #01a4b8;}
    .facilities ul.list:hover li:hover{ width: calc(56% - 1px);}
    .facilities ul.list:hover li:hover .title{ margin: 0 0 50px 42%;}
    .facilities ul.list:hover li:hover .title .line{ width: 100%; background: #ccc;}
    .facilities ul.list:hover li:hover .icon{ opacity: 1;}
    
    header nav ul li a:hover::before{ width: 100%;}
header nav a.booking:hover{background:rgba(255,255,255,.5) url(../images/booking_icon.png) no-repeat calc(50% - 45px) 50%;}
.indexroom .main .note a.booking:hover{ background: #02a2b8 url("../images/booking_icon.png") no-repeat 20px center;}
.pagestop .right .infor a.booking:hover{ background: #02a2b8 url("../images/booking_icon.png") no-repeat 30px 50%;}
.pagestop .right .infor a.booking:hover{ background: #02a2b8 url("../images/booking_icon.png") no-repeat 30px 50%;}
.contacmain .fromemain ul li input[type=submit]:hover{background:conic-gradient(  rgb(1,165,184) 10%, rgb(21,59,165) 66%, rgb(21,59,165) 70%, rgb(1,165,184) 100%); }
    .facilitymain .main p.text a:hover{ background: #02a2b8}

}
@media screen and (max-width: 1360px) {
    

}
@media screen and (max-width: 1024px) {
    
    header nav{ opacity: 1!important; transform: translateY(0px) !important;}
    
	.navbtn{display: block;}
	header nav.open{ display: flex; flex-wrap: wrap;}
    header nav{ display: none; position: fixed; width: 60vw; height: 100%; padding: 100px 0; top: 0; right: 0; z-index: 999; background: #333; overflow: hidden;}
	header nav::before{ content: ''; width: 220%; height: 100%; background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: absolute; top: 0; left: 0; z-index: 1;}

	header nav select{ width: 70%; margin:  0 auto 30px auto; position:  relative; z-index: 2; order: 1;}
	header nav ul{ width: 70%; margin:  0 auto 30px auto; position:  relative; z-index: 2; order: 2;}
	header nav ul li{ width: 100%; padding:  0 15px; position: relative; z-index: 2;}
	header nav a.booking{ width: 70%; margin:  0 auto; position: relative; z-index: 2; order: 3;}
    
    header .left{ padding: calc(200px + 10vh) 0 0 0;}
    header .left a.logo{ width: 50%;}
    header .left .banner .img{ height: 50vh; min-height: inherit;}
    header .right{ padding: calc(200px + 10vh) 0 0 0;}
    header::after{ bottom: -8%;}
    header>.marquee-container,
    .indexabout .checkin .main::after
    { font-size: 60px; line-height: 60px;}
    
    
    header.pages .left{ width: calc(100% - 200px);}
    header.pages .left .banner.about,
    header.pages .left .banner.facility,
    header.pages .left .banner.massage,
    header.pages .left .banner.news,
    header.pages .left .banner.location,
    header.pages .left .banner.contact
    { height: 20vh; min-height: inherit;}
    header.pages .left .banner::after{ font-size: 70px; line-height: 70px;}
    header .left .banner.rooms .img{ height: 40vh; min-height: inherit;}
    header.pages .right{ width: 200px}
    header .right ul.roomlist{ width: calc(100% + 65px); padding: 50px 0 0 0;}
    header.pages::after{ width: 350px; padding: 0 0 180px 0; bottom: -17%;}
    
    .indexabout .feature .main ul{ padding: 5% 5% 7% 0%;}
    .indexabout .checkin .main .step{ width: 60%; margin: 15% 0 0 -45%}
    .indexroom::after{ bottom: 150px;}
    .indexroom .main .room .colorbox{ width: calc(50vw - 50% + 3%)}
    .indexroom .main .room .list{ width: 32%; padding: 8vh 0 5vh 3%;}
    .indexroom .main .room ul li a span{ left: 32%;}
    .indexroom .main .room ul li:nth-child(1) a span{ top: calc(8vh + 0px);}
    .indexroom .main .room ul li:nth-child(2) a span{ top: calc(8vh + 59px * 1);}
    .indexroom .main .room ul li:nth-child(3) a span{ top: calc(8vh + 59px * 2);}
    .indexroom .main .room ul li:nth-child(4) a span{ top: calc(8vh + 59px * 3);}
    .indexroom .main .room ul li:nth-child(5) a span{ top: calc(8vh + 59px * 4);}
    .indexroom .main .room ul li:nth-child(6) a span{ top: calc(8vh + 59px * 5);}
    
    .indexroom .main .note{ flex-wrap: wrap;}
    .indexroom .main .note p.time{ margin: 15px 0 30px 0;}
    .indexroom .main .note a.booking{ width: 50%;}
    
    .facilities .main{ width: 100%;}
    .facilities ul.list li{ width: calc(100% / 3 - 1px);}
    .facilities ul.list li p.img{ height: 40vh; min-height: 400px;}
    .facilities ul.list li .icon{ transform: translateX(10%);}
    
    .point{ width: 90%; margin: 0 auto 100px auto;}
    .facilities .point{ margin: 0 auto 100px auto;}
    .point img{ width: 40%;}
    
    .pagestop{ margin: 0 auto 80px auto;}
    .pagestop .right h1{ font-size: 30px; margin: 0 auto 30px auto;}
    .pagestop .right h1 span{ display: block; font-size: 60px; line-height: 60px;}
    
    .aboutmain .main .text p{ margin: 0 0 50px 0;}
    
    .roommain{ margin: 100px auto;}
    .roommain .roombanner{ margin: 0 auto 60px auto;}
    .roommain .roomtitle{ margin: 0 auto 60px auto;}
    .roommain .roomtitle h1{ font-size: 35px;}
    .roommain .roomtitle h1 span{display: block; font-size: 45px; line-height: 45px;}
    .roommain .roomamenities p.img::after{font-size: 60px; line-height: 60px;}
    
    .indexabout .feature .main .text{ padding: 5% 10% 7% 0%}
    
    .facilitymain{ padding: 0 0 80px 0;}
    .facilities .main::after{font-size: 60px; line-height: 60px;}
    .facilitymain .control{ padding: 20vh 0;}
    .facilitymain .control::after{ width: 40%; padding: 0 0 22% 0; bottom: -10%;}
    
    .facilitymain ul.other li:last-child>.text{ transform: translateY(10%);}
    
    .massagemain{ margin: 0 auto 60px auto;}
    .massagemain .price>ul{ width: 80%; margin: 100px -45% 0 0; padding: 30px 30px 0 0;}
    
    .newsmain .title .text h1{ font-size: 32px; line-height: 42px;}
    
    .locationmain{ margin: 0 auto 80px auto;}
    .locationmain .train ul.type{ width: 60%; padding: 50px 0;}
    .locationmain .train .hotel{ width: 40%;}
    
    .contacmain .fromemain ul{ width: 70%; margin: 10% 0 -75px -50%}
    
    .pagestop .right .infor{ flex-wrap: wrap;}
    .pagestop .right .infor ul{ margin: 0 0 30px 0;}
    .pagestop .right .infor .tel{ margin: 0 0 30px 0;}
    .pagestop .right .infor a.booking{ margin: 0px 0 0 0;}
    
    .footermain .main .copytight{ padding: 100px 0 0 0;}
    .footermain .main .copytight .link p a{ display: none;}
	.footermain .main .copytight .link p a.fb,.footermain .main .copytight .link p a.booking{display: inline-block;}
    .footermain .main .location{ padding: 10vh 0 5vh 0;}
    
}
@media screen and (max-width: 580px) {
	header::after{width: 75%;padding: 0 0 40% 0;right: 0;bottom: -5%;}
	header.pages::after {width: 50%;padding: 0 0 30% 0;right: 0;bottom: -15%;}
	header .left{ width: 100%; padding: calc(200px + 20vh) 0 0 0; overflow: hidden;}
	header.pages .left{ width: 100%; padding: 130px 0 0 0;}
	header .left::before{ content: ''; width: 100%; height: calc(200px + 30vh); background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); position: absolute; top: 0; left: 75%; z-index: -1;}

	header .left a.logo{ width: 60%; top: 20px;}
	header .left a.logo strong{ font-size: 25px}
	header .left a.logo span{ font-size: 13px; letter-spacing: 16px;}
	header .left .banner .img{ height: 50vh; min-height: inherit;}
	header.pages .left .banner.about,
	header.pages .left .banner.facility,
	header.pages .left .banner.massage,
	header.pages .left .banner.news,
	header.pages .left .banner.location,
	header.pages .left .banner.contact
	{ height: 20vh; min-height: inherit;}
	header.pages .left .banner::after{font-size: 50px; line-height: 50px; bottom: -10px;}
	header .right{ width: 80%; position: absolute; top: calc(200px + 20vh - 150px); padding: 0;}
	header.pages .right{ width: 100%; position: inherit; top: inherit; padding: 0;}
	header .right .bg{ display:  none;}
	header .right h1{ font-size: 14px; line-height: 19px; margin: 0 0 30px 5%;  color: #111;}
	header .right .news{ margin: 0 0 0 5%;  color: #111; background: url("../images/line_h2.png") repeat-x left top;}
    header .right .news .date{ width: 75px; font-size: 12px; letter-spacing: 0;}
    header .right .news .marquee-container{ width: calc(100% - 75px); padding: 0 22px 0 0; font-size: 15px;}
	header .right .news .marquee-container::after{ background: #1058aa;}
	header .right .news .marquee-container::before{ border-color: transparent transparent transparent #FFF;}
	header>.marquee-container{font-size: 50px; line-height: 50px;}
	
	header .right ul.roomlist{ display: flex; flex-wrap: wrap; width: 100%; margin:30px 0 0 0; padding: 0; position: absolute; z-index: 5;}
	header .right ul.roomlist li{ width: 46%; margin:  0 2% 6px 2%;}
	header .right ul.roomlist li a{ display: block; height: inherit; background: #ddd; padding: 12px 0; font-size: 18px; line-height: 18px; text-align: center;}
	header .right ul.roomlist li.current a{ height: inherit; font-size: 18px; line-height: 18px;background:conic-gradient( rgb(21,59,165) 10%, rgb(1,165,184) 66%, rgb(1,165,184) 70%, rgb(21,59,165) 100%); color: #FFF;}
	header .right ul.roomlist li.current{ margin:  0 2% 10px 2%; order: -1; width: 100%;}
	header .right ul.roomlist li.current a span{ display: none;}
	

	
    .indexabout .feature{ margin: 0;}
    .indexabout .feature .main ul{ width: 100%; padding: 0;}
    .indexabout .feature .main ul li{ width: 100%; padding: 0 0 15px 80px; position: relative;}
    .indexabout .feature .main ul li h2{ font-size: 22px; padding: 20px 0 0 0;}
    .indexabout .feature .main ul li img{ position: absolute; top: 0; left: 0;}
    .indexabout .feature .main p.img{ width: 100%; padding: 0 0 50% 0; transform: translateY(15%); overflow: hidden; position: relative; z-index: 2;} 
    
    .indexabout .checkin .main{ width: 100%;}
    .indexabout .checkin .main p.img{ width: 100%; height: 70vh; margin: 0; background-attachment: inherit;}
    .indexabout .checkin .main p.img::after{ content: inherit;}
    .indexabout .checkin .main .step{ width: 90%; margin:-20vh auto 0 auto; padding: 0px 5% 0 5%}
    .indexabout .checkin .main .step ul li{ padding: 0 0 20px 0;}
    .indexabout .checkin .main .step ul li .title{}
    .indexabout .checkin .main .step ul li .title img{ width: 60px;}
    .indexabout .checkin .main .step ul li .title h2{ font-size: 25px; line-height: 28px;}
    .indexabout .checkin .main .step ul li p{ margin: 15px auto 0 auto; max-height: inherit;}
    .indexabout .checkin .main::after{ font-size: 40px; line-height: 35px; top: calc(50vh - 25px); left: 10%; bottom: inherit;}
    
    .point img{ width: 45%;}
    .indexroom .point span{ margin: 0 -15px -20px 0;}
    .indexroom .point span::after{ width: 25px; height: 25px;}
    .footermain .point span{ margin: 0 0 -20px -15px}
    .point span::before{ width: 25px; height: 25px;}
	
	.indexroom{ margin: 0 0 80px 0; padding: 0 0 20% 0;}
	.indexroom::after { width: 60%; padding: 0 0 45% 0; bottom: 0%; z-index: -1;}
    .indexroom .main{ width: 100%;}
    .indexroom .main .room .colorbox{ width: 3%; margin: 0;}
    .indexroom .main .room .list{ width: 97%; padding: 0;}
    .indexroom .main .room ul li{ margin: 0 0 1px 0;}
    .indexroom .main .room ul li a{ padding: 60px 56% 60px 20px; position: relative; font-size: 18px;}
    .indexroom .main .room ul li:nth-child(2n) a{ padding: 60px 0px 60px calc(60% + 20px); }
    .indexroom .main .room ul li a::after{ width: 60%; height: 100%; opacity: 1; left: inherit; right: 0;}
    .indexroom .main .room ul li:nth-child(2n) a::after{ left: 0; right: inherit;}
    .indexroom .main .room ul li a.current{ color: inherit; background: inherit;}
    .indexroom .main .room ul li a.current span{ display:  none;}
    
    .indexroom .main .room::after{font-size: 40px; line-height: 35px; right: inherit; left: 10%; bottom: -20px;}
    .indexroom .main .note{ flex-wrap: nowrap; width: 80%; margin: 0 auto; padding: 0; padding: 0 0 100px 0; position: relative;}
    .indexroom .main .note p.time{ width: 100%; margin: 0 0 0 10%; text-align:  right;}
    .indexroom .main .note p.time span{ margin: 0;}
    .indexroom .main .note p.time span strong{ font-size: 26px;}
    .indexroom .main .note a.booking{ width: 100%; position: absolute; bottom: 0;}
    
    
    
	.facilities .main{ width: 100%;}
	.facilities .main::after{font-size: 40px; line-height: 35px; right: inherit; left: 10%; bottom: -20px;}
	.facilities ul.list{ flex-wrap: wrap;}
	.facilities ul.list li,.facilities ul.list li:first-child{ width: 100%; margin: 0 0 80px 0;}
	.facilities ul.list li:last-child{ margin: 0;}
	.facilities ul.list li p.img{ height: inherit; min-height: inherit; padding: 0 0 60% 0;}
	.facilities ul.list li:nth-child(1) p.img{ background-size: cover;}
	.facilities ul.list li .title{ margin: 0 0 30px 40%!important;}
    .facilities ul.list li .title h2{ font-size: 26px;}
	.facilities ul.list li .icon{ width: 30%; padding: 0 0 30% 0; transform: none; left: 5%; opacity: 1;}
    .facilities ul.list li:first-child .title .line{ width: 30px; background: #01a4b8;}
	.footermain .main .location{ display: block; padding: 80px 0;}
	.footermain .main .location .infor{ width: 100%; padding: 0 10% 0 10%; margin: 0 0 30px 0;}
	.footermain .main .location .infor ul li a{ display: block;}
	.footermain .main .location .map{ width: 115%; padding: 0 0 45% 0; margin: 0 -20% 0 10%;}
	.footermain .main .copytight .logo{ padding:  0 5% 0 3%;}
	.footermain .main .copytight .logo a img{ width: 100%;}
	.footermain .main .copytight .logo a strong{ font-size: 20px;}
	.footermain .main .copytight .logo a span{ font-size: 12px; left: calc(100% + 25px); letter-spacing: 7px;}
	.footermain .main .copytight .link p a{ display: none;}
	.footermain .main .copytight .link p a.fb,.footermain .main .copytight .link p a.booking{display: block;}
	
	.footermain .main .copytight{ padding: 60px 0 0 0;}
	.footermain .main .location::after { width: 100%; padding: 0 0 40% 0; right: -45%; bottom: -5%;}
	
.facilities .point{ margin: 0 auto 150px auto;}

.pagestop{ width: 80%; margin: 0 auto 60px auto;}
	.pagestop .left{ width: 100%;}
    .pagestop .left p.img{ margin: 0 auto 30px auto;}
    .pagestop .left p.img::after{ width: 30px; height: 30px; right: -15px; bottom: -15px;}
.pagestop .right{ width: 100%; margin: 0;}
.pagestop .right h1{ font-size: 30px; margin: 0 0 30px 0;}
.pagestop .right h1 span{ display: block; font-size: 45px; line-height: 45px;}
.aboutmain{ padding: 0 0 30% 0;}
.aboutmain .main{ flex-flow: column-reverse;}
.aboutmain .main p.img{ width: 100%; margin: 0 auto 15px auto;}
.aboutmain .main .text{ width: 100%;}
.aboutmain .main .text p{ margin:  0 0 60px 0;}
.aboutmain .main .text a{ width: 100%;}
.aboutmain::after{width: 60%; padding: 0 0 45% 0; bottom: 0%; z-index: -1;}

header .left .banner.rooms .img{ height: 25vh; min-height: inherit;}

.roommain{ margin: 250px auto 100px auto;}
.roommain .roombanner{ width: 100%; margin: 0 0 30px 0;}
.roommain .roomtitle{ display: block; margin:  0 auto 60px auto;}
.roommain .roomtitle h1{ width: 100%; margin: 0;font-size: 30px;}
.roommain .roomtitle h1 span{ display: block;font-size: 45px; line-height: 45px;}
.roommain .roomtitle .type{ display: inline-block; width: auto; margin: -1px 0 0 0; padding: 20px 0 0 0; border-bottom: none; border-top: 1px solid #0591b4;}
.roommain .roomamenities{ padding: 17% 0 0 0;}
.roommain .roomamenities .text{ margin:  0 auto;}
.roommain .roomamenities .text ul{ width: 90%; margin: 50px auto 50px auto;}
.roommain .roomamenities::after{width: 60%; padding: 0 0 45% 0;}
.roommain .roomamenities p.img{ width: 90%;}
.roommain .roomamenities p.img img{ width: calc(100% / 2 - 1px);}
.roommain .roomamenities p.img img:first-child{ width: 100%; margin:  0 0 1px 0;}
.roommain .roomamenities p.img::after{font-size: 40px; line-height: 35px; right: inherit; left: 10%; bottom: -20px;}
.roommain .roomamenities .text .note p.time{ margin: 0 auto 30px auto;}
.roommain .roomamenities .text .note{ width: 80%; margin: 0 auto; padding: 30px 0 0 0; }
.roommain .roomamenities .text .note a{ width: 100%;}
.indexabout .feature .main .text{ width: 100%; padding: 0;}
.indexabout .checkin.control .main p.img{ background-attachment: inherit;}

    .facilitymain{ margin: 0 auto 50px auto; padding: 0;}    
.facilitymain ul.nav{ width: 100%; margin: 0 0 30px 0; height: 120px;}
.facilitymain ul.nav li{ font-size: 18px;}
.facilitymain ul.nav li img{ margin: 0 auto;}

.facilitymain .control{ margin: 0 auto 0px auto; padding: 30vh 0 0 0; background-size: auto calc(30vh + 100px);}
.facilitymain ul.other{ width: 100%;}
.facilitymain ul.other li>.img{ width: 100%; margin: 0;}
.facilitymain ul.other li:last-child>.img{ margin: 0;}
.facilitymain ul.other li:first-child>.img{ transform: none;}
.facilitymain ul.other li>.text{ width: 100%; margin: -30% auto 0 auto; z-index: 2;}
.facilitymain ul.other li:last-child>.text{ transform: none;}
.facilitymain .main{ width: 90%;}
.facilitymain ul.other li .main{ background: #FFF;}
    .facilitymain .main p.img{ margin: 0 auto 30px auto;}
    .facilitymain .main h2{ font-size: 26px;}
.facilitymain .control::after{width: 50%; padding: 0 0 35% 0; bottom: -12%;}

.massagemain{ margin: 0 auto 80px auto;}
.massagemain .topimg{ margin: 0 auto 50px auto;}
.massagemain .topimg img{ width: 100%;}
.massagemain .topimg::after{ width: 45%; padding: 0 0 32% 0; bottom: -50%;}
.massagemain .price{ flex-direction: column-reverse;}
.massagemain .price>ul{ width: 100%; margin:-50px 0 0 0; padding: 0; background:  none;}
.massagemain .price>ul>li{ display: block;}
.massagemain .price>ul>li .number{ margin: 0 auto 30px auto;}
.massagemain .price>ul>li .list{ width: 100%; padding: 0;}
.massagemain .price p.img{ width: 100%;}

.newsmain .title{ display: block;}
.newsmain .title p.img{ width: 60%; margin: 0 auto 30px auto;}
.newsmain .title .text{ width: 100%;}
.newsmain .title .text h1{ font-size: 26px; line-height: 32px; margin: 0 0 20px 0; padding:  0 0 20px 0;}
.newsmain .title .text .date{ padding: 0; font-size: 20px; line-height: 29px;}
.newsmain .pages{ width: 100%;}
.newsmain .pages .prev{ width: 50%; padding: 50px 0;}
.newsmain .pages .next{ width: 50%; padding: 50px 0;}
.newsmain .pages .next .bg{ width: 100%;}
.newsmain .pages a .moretitle{ display:  none;}
.newsmain .pages a{ width: 90%;margin: 0 0 0 10%;}
.newsmain .pages .next a{ margin: 0 10% 0 0;}
.newsmain .morelist{ width: 100%; margin: 0;}
.newsmain .morelist p.img{ width: 100%; height: 30vh; margin: 0;}
.newsmain .morelist ul{ width: 90%; margin:-50px auto 0 auto; padding: 50px 50px 0 50px;}
.newsmain .morelist::after{ left: 15%; bottom: inherit; top: calc(30vh - 75px); font-size: 40px; line-height: 35px; }
.pagestop .right .infor{ display: block;}
.pagestop .right .infor ul{ width: 100%;}
.pagestop .right .infor a.booking{ max-width: inherit; margin:50px auto 0 auto;}
    .pagestop .right .infor .tel a{ font-size: 40px;}
    
.locationmain{ padding: 0;}
.locationmain .train{ position: relative;}
    .locationmain .train::after{ content: ''; display: block; width: 80px; height: 80px; background: rgba(0,0,0,0.3) url("../images/location/icon.png") no-repeat 50% 55%; background-size: 30px auto; border-radius: 50%; position:  absolute; top: calc(50% - 40px + 80px); left: calc(50% - 40px);}
.locationmain .train .mian{ overflow-x: scroll}
    .locationmain .train .mian .scroll{width: 900px;}
    .locationmain .title{ margin: 0 auto 50px auto; position: inherit; top: inherit; left: inherit;}
    .locationmain .train ul.type{ padding: 0;}
    .locationmain .drive{ margin: 0;}
.locationmain .drive::after{width: 45%; padding: 0 0 32% 0; top: -5%;}
.locationmain .drive p.img{ width: 100%;}
.locationmain .drive .text{ width: 100%; padding: 0; margin: -100px 0 0 0;}
.locationmain .drive .text .title{ margin: 0 auto 50px auto;}

.pagestop .right .infor .tel{ max-width: inherit; text-align: left;}
.contacmain .top{  width: 100%;}
.contacmain{ margin: 0 auto 80px auto;}
.contacmain .fromemain{ display: block; width: 100%;}
.contacmain .fromemain p.img{width: 100%; height: 30vh; margin: 0;}
.contacmain .fromemain ul{width: 90%; margin:-50px auto 0 auto; padding: 20px 20px 0 20px;}
.contacmain .fromemain ul li{ padding: 0;}
    .contacmain .fromemain ul li .code{ right: 10px;}
    
    footer .main{ flex-direction: column; padding:80px 0 50px 0;}
    footer a.logo{ width:120px; margin:0 auto 50px auto;}
    footer nav{ display: flex; flex-wrap:wrap; width:80%; text-align:center; padding:0 0 30px 0; border: none;}
    footer nav a{ display:inline-block; width:50%;}
    footer .group{ width:90%; margin:0 auto; padding:30px 0 0 0; border-top: 1px solid #ddd;}
    footer .group ul{ display:block; width:100%; margin:0 0 15px 0; padding:0; overflow:hidden;}
    footer .group ul li{ width:calc(50% - 1px); margin:0 1px 1px 0; float:left; background:#eee; padding:3px; border-radius:5px;}
    footer .group ul li::before{ content:''; display: inline-block; width:2px; height:2px; margin:0 5px; background:#111; vertical-align: middle;}
    footer .group ul:nth-child(1)::before,footer .group ul:nth-child(3)::before{ display:block; position:inherit; margin:15px 0 10px 0; text-align:left;}
    footer .copyright{ width:90%; margin:0 auto; padding:0 0 100px 0;}
    .roomnote h3{ top:5vh; left:10%;}
	.roomnote .text{ left:10%; width:80%;}

}