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

body{letter-spacing: 0;}
header nav ul li{ padding:0 10px;}
header nav ul li a{ font-size:16px;}
header nav a.booking{ font-size:16px; padding: 30px 30px 15px 60px;}
.indexabout .main .text h2{ writing-mode:horizontal-tb; height: auto;}
.titlebox p{ writing-mode:horizontal-tb; text-align: center;}
.servicenav .main ul li h3{ background: #687b43 url("../images/service_icon_en.png") no-repeat calc(100% - 20px) center; writing-mode:horizontal-tb; letter-spacing: 0; text-transform: uppercase; padding: 15px 80px 15px 25px; border-radius: 3px 50px 50px 3px; bottom: 50px; right: -30px;}
.servicenav .marqee > ul > li h3{ font-size: 18px;}

.aboutbanner .titlebox p{ max-width: 300px; height: auto;}
.aboutpart1 .main .text h2{ line-height: 30px; margin: 0 0 8px 0;}

.roombanner h1{ writing-mode:horizontal-tb; padding: 50px 0 0 0; background: url("../images/title_icon.png") no-repeat right top; bottom: calc(15% + 160px); text-transform: uppercase;}
.roombanner .en{ bottom: calc(15% + 110px); right: 10%; letter-spacing: 3px;}

.roompart1 .main .right .titlebox p{ width: 80%; height: auto; margin: 0 auto 50px auto;}

.roompart3 .main .left .titlebox p{ font-size: 20px; line-height: 26px; }
.newsother .main .left .titlebox p{ font-size: 20px; line-height: 26px; }
.facilitymain ul li .text .titlebox p{ width: 90%; height: auto; margin: 0 auto 50px auto; font-size: 18px;}
.massagemain ul li .left .plan{ padding: 150px 0 140px 0;}
.massagemain ul li .left .plan h2{ font-size: 30px; line-height: 36px; font-weight: 900; writing-mode:horizontal-tb; width: calc(100% + 250px); margin: 0 0 0 -250px; text-align: right; position: relative;}
.massagemain ul li .left .plan h2 span{ position: relative; z-index: 2;}
.massagemain ul li .left .plan h2::after{ width: 100%; font-size: 30px; line-height: 36px; font-weight: 900; font-family: "Noto Serif TC", serif; position: absolute; top: 0; left: 0px; z-index: 0;-webkit-text-stroke: 5px #f8f7f1;
    -ms-text-stroke: 5px #f8f7f1;
    text-stroke:  5px #f8f7f1;}
.massagemain ul li#part1 .left .plan h2::after{content: 'Full-body/Half-body Acupressure';}
.massagemain ul li#part2 .left .plan h2::after{content: 'Full Body Aromatherapy Massage';}
.massagemain ul li#part3 .left .plan h2::after{content: 'Foot Massage';}
.massagemain ul li#part4 .left .plan h2::after{content: 'Foot and Full Body Acupressure';}

.facilitybanner h1{writing-mode:horizontal-tb; font-size: 46px;}

.locationinfor .time,.contactmain .main .left .tel .time{ font-size: 16px; letter-spacing: 0;}

.facilitybanner .nav a{ height: auto; font-size: 18px; line-height: 24px; vertical-align:  middle; padding: 8px 10px;}
.contactmain .main .left .titlebox p{ height: inherit; font-size: 18px; line-height: 28px;}

.aboutbanner .titlebox h1,
.titlebox h2,
.roompart1 .main .right .titlebox h2,
.roompart2 .main .text h3,
.roompart3 .main .left .titlebox h2,
.facilitymain ul li .text .titlebox h2,
.locationmain .part2 .titlebox h2,
.contactmain .main .left .titlebox h2
{text-transform: uppercase;}

@media screen and (min-width: 1024px) {
    .servicenav .main ul li:hover h3{  padding: 15px 60px 15px 25px; border-radius: 50px; background: #c4a289 url("../images/service_icon_en.png") no-repeat calc(100% - 20px) center;}
}
@media screen and (max-width: 900px) {
    .massagemain ul li .left .plan{ padding: 0px 0 100px 5%;}
    .massagemain ul li .left .plan h2{ font-size: 25px;}
    .contactmain .main .left .titlebox p{ height: inherit;}
}
@media screen and (max-width: 450px) {
    header nav a.booking{ font-size:16px; padding: 0 0 0 30px;}
    .servicenav .main ul li h3{ display: inline-block; right: inherit; left: -8px; padding: 10px 70px 10px 25px}
    .servicenav .marqee > ul > li h3{ left: -25px; font-size: 13px; padding: 0 30px 0 40px}
    .titlebox p, .newsother .main .left .titlebox p, .locationmain .part2 .titlebox p, .contactmain .main .left .titlebox p{ font-size: 18px; line-height: 24px;}
    .aboutbanner .titlebox p{ padding: 0 0 80px 0;}
    .roombanner h1{ font-size: 30px; bottom: 75px;}
    .roombanner .en{ bottom: 50px; font-size: 16px;}
    .roompart3 .main .left .titlebox p{ height: inherit;}
    .facilitybanner h1{ font-size: 32px;}
    .massagemain ul li .left .plan h2{ width: 100%; margin: 0; min-height: inherit; text-align: left;}
    .massagemain ul li .left .plan{ padding: 0;}
}