/*--general--*/
body {
    font-family: Microsoft JhengHei,Verdana,sans-serif;
    font-size:15px;
    line-height: 23px;
    letter-spacing: 1px;
    color: rgba(255,255,255,1);
}
h1,h2,h3,h4 {
    display: block;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 29px;
    width: 0;
    height: 0;
    visibility: hidden;
}
h2 {
    font-size: 21px;
}
h3 {
    font-size: 17px;
}
#overlay{
    width: 100%;
    height: 100%;
    display: none;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 99999;
    background: rgba(27,19,16,0.95);
    -webkit-filter: blur(2px); 
    -moz-filter: blur(2px); 
    -o-filter: blur(2px); 
    -ms-filter: blur(2px); 
    filter: blur(2px);
}
#back{
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 10px;
    text-align: center;
    background: rgba(27,19,16,.7);
    z-index: 9000;
    vertical-align: middle;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}
#back a, #back a:visited{
    color: rgba(245,238,173,1);
    text-decoration: none;
}
#back a:hover, #back a:active{
    color: rgba(245,238,173,1);
    text-decoration: none;
    -webkit-filter: drop-shadow(0px 0px 5px rgba(44,44,44,1));
    filter: drop-shadow(0px 0px 5px rgba(44,44,44,1));
}
header, nav, section, article, footer{
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    text-align: center;
}
#continue{
    padding: 20px 0;
    margin-top: 20px;
    border-radius: 5px;
    text-align: center;
}
#continue a, #continue a:visited{
    color: rgba(234,234,234,1);
    text-decoration: none;
}
#continue a:hover, #continue a:active{
    color: rgba(234,234,234,1);
    text-decoration: underline;
}
img{
    max-width: 100%;
    padding: 0;
    border: 0;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    display: block;
}
audio{
    position: fixed;
    z-index: 9999;
    vertical-align: middle;
    display: inline-block;
    max-width: 150px;
    bottom: 0px;
    left: 0px;
}
/*--header--*/
header{
    position: relative;
    z-index: 9999;
    vertical-align: middle;
}
#logoandnav{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 4px;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 3px 5px 1px rgba(27,19,16,.8);
    background-image: url(../fimgs/navbg.png);
    background-position: left bottom;
    background-size: contain;
    background-repeat: repeat-x;
    vertical-align: middle;
}
#logo{
    padding: 0px 0;
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 0px 24px;
    line-height: 0;
}
nav{
    font-family: PMingLiU,Verdana,sans-serif;
    max-width: 100%;
    display: inline-block;
    padding: 8px 0;
    margin: 0 auto;
    vertical-align: middle;
}
nav a, nav a:visited{
    color: rgba(188,188,188,1);
    text-decoration: none;
}
nav a:hover, nav a:active{
    color: rgba(255,255,255,1);
    text-decoration: none;
}
#navbutton, #navbutton:visited{
    cursor: pointer;
    font-family: Microsoft JhengHei,Verdana,sans-serif;
    font-size: 37px;
    padding: 16px;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    color: rgba(245,238,173,1);
    z-index: 9999;
}
#navbutton:hover, #navbutton:active{
    cursor: pointer;
    border:none;
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255,255,255,.5));
    filter: drop-shadow(0px 0px 3px rgba(255,255,255,.5));
    z-index: 9999;
}
#navbar{
    display: block;
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
}
#navbar li{
    max-width: 100%;
    display:block;
    margin:0 auto;
    padding: 0px 4px;
    text-align: center;
    position: relative;
}
#navbar li:hover, #navbar li:active, #menu li:hover, #menu li:active, #subnav li:hover, #subnav li:active{
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255,255,255,.5));
    filter: drop-shadow(0px 0px 3px rgba(255,255,255,.5));
}
#navbar li a{
    white-space: nowrap;
}
#navbar > li{
    position: relative;
}
#navbar #subnav{
    position: absolute;
    top: 69px;
    left: 0;
    box-shadow: 0px 3px 3px -1px rgba(27,19,16,.8);
    background-image: -webkit-linear-gradient(rgba(20,20,20,.5),rgba(20,20,20,0)),-webkit-linear-gradient(rgba(20,20,20,0),rgba(20,20,20,.5));
    background-image: -o-linear-gradient(rgba(20,20,20,.5),rgba(20,20,20,0)),-o-linear-gradient(rgba(20,20,20,0),rgba(20,20,20,.5));
    background-image: -moz-linear-gradient(rgba(20,20,20,.5),rgba(20,20,20,0)),-moz-linear-gradient(rgba(20,20,20,0),rgba(20,20,20,.5));
    background-image: linear-gradient(rgba(20,20,20,.5),rgba(20,20,20,0)),linear-gradient(rgba(20,20,20,0),rgba(20,20,20,.5));
    background-repeat: no-repeat;
    vertical-align: middle;
}
#navbar #subnav li{
    padding: 8px 4px;
    background-image: url(../fimgs/navbg.png);
    background-position: left bottom;
    background-size: contain;
    background-repeat: repeat-x;
    vertical-align: middle;
}
#subnav li{
    top: 0;
    left: 0;
    display: block;
}
#menu { 
    position: fixed;
    top: 0;
    right: 0;
    max-width: 80%;
    height: 100%;
    background: rgba(27,19,16,0.95);
    z-index: 9999;
    box-shadow: -3px 0px 5px -1px rgba(27,19,16,.8);
    overflow-x: hidden;
    overflow-y: auto;
}
#menu #subnav li{
    padding-left: 30px;
}
#menu img{max-width: 80%;}
#menu ul {
    list-style: none;
    text-align: center;
    white-space: nowrap;
}
#menu > ul > li {
    display: block;
    margin: 0 auto;
    width: 72%;
    border-bottom: 1px solid rgba(245,268,173,1);
}
#menu > ul > li:last-of-type{
    border-bottom: none;
}
#menu > ul > li > a{
    padding: 8px 0;
    display: block;
}
#firstnewslist{
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-shadow: 0px 3px 5px -2px rgba(27,19,16,.8),0px -3px 5px -2px rgba(27,19,16,.8);
    background-image: url(../fimgs/indexnewsbg.png);
    background-position: left bottom;
    background-size: contain;
    background-repeat: repeat-x;
    vertical-align: middle;
}
#firstnewslist #newslist{
    display: inline-block;
    padding: 0px 8px;
    max-width: 100%;
    margin: 0 auto;
    vertical-align: middle;
}
#firstnewslist > div{
    display: inline-block;
    padding: 0px 8px;
    max-width: 100%;
    margin: 0 auto;
    vertical-align: middle;
}
#firstnewslist img{
    vertical-align: middle;
}
#dothr{
    background:none;
    border:0;
    max-width: 100%;
    width: 100%;
    border-bottom:1px rgba(255,255,255,1) dotted;
    font-size: 0;
    padding: 0 0 2px 0;
}
/*--footer--*/
footer{
    border-top: 2px solid rgba(255,255,255,1);
    margin: 0 auto;
    padding: 20px 0;
}
footer .col12-5{
    text-align: left;
    color: rgba(255,255,255,1);
    line-height: 30px;
    vertical-align: top;
}
footer p{
    font-size: 17px;
    display: block;
    max-width: 100%;
}
#footerdata{
    text-align: left;
    line-height: 48px;
    color: rgba(255,255,255,1);
    padding: 20px 0px;
    background-image: url(../fimgs/footerbg.jpg);
    background-position: left top;
    background-size: cover;
    vertical-align: middle;
    width: 100%;
}
#qrcode{
    max-width: 96px;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    padding: 5px 5px 5px 0;
    text-align: left;
}
#qrcode img{
    max-width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
    font-size: 0;
    border: 0;
}
#footerlink{
    font-size: 13px;
    display: block;
    max-width: 100%;
    padding: 0 5px;
}
#footerlink a, #footerlink a:visited{
    color: rgba(255,255,255,1);
    text-decoration: none;
}
#footerlink a:hover, #footerlink a:active{
    color: rgba(255,255,255,1);
    text-decoration: underline;
}
.line img{
    display: inline-block;
}
img[name=counter]{
    vertical-align: middle;
    display: inline-block;
}
/*--index--*/
#indexbody{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/indexbg.jpg);
    background-position: right center;
    background-size: cover;
    vertical-align: middle;
}
#indexbody::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 12px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#indexbody .col3-1 > img{
    padding: 8px 0;
    text-align: center;
    margin: 0 auto;
}
#indexbody a img{
    padding: 0;
    transform:scale(1);
    -webkit-transform:scale(1);
    transition: transform 0.8s;
    -webkit-transition: transform 0.8s;
}
#indexbody a{
    color: rgba(245,238,173,1);
    text-decoration: none;
    padding: 4px;
    transform:scale(1);
    -webkit-transform:scale(1);
    transition: transform 0.8s;
    -webkit-transition: transform 0.8s;
}
#indexbody a:hover, #indexbody a:active, #indexbody a img:hover, #indexbody a img:active{
    color: rgba(255,255,255,1);
    text-decoration: none;
    transform:scale(1.1);
    -webkit-transform:scale(1.1);
}
#indexbody .more{
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    margin: 16px auto;
    box-shadow: 0px 0px 3px 1px rgba(27,19,16,.8);
}
/*--about--*/
#aboutbody{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/aboutbg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#aboutbody::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#aboutbody .col1-1{
    display: block;
    text-align: left;
}
/*--booking--*/
#bookingbody{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/bookingbg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#bookingbody::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#remit{
    box-shadow: 0px 3px 3px -1px rgba(27,19,16,.8);
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,1),rgba(20,20,20,0));
    background-image: -o-linear-gradient(left, rgba(255,255,255,1),rgba(20,20,20,0));
    background-image: -moz-linear-gradient(left, rgba(255,255,255,1),rgba(20,20,20,0));
    background-image: linear-gradient(to right, rgba(255,255,255,1),rgba(20,20,20,0));
    background-repeat: no-repeat;
    border-radius: 15px;
    text-align: left;
    color: rgba(44,44,44,1);
}
#vgrid > div{
    width: 450px;
    max-width: 90%;
    padding: 16px 8px;
    margin: 16px 8px;
    display: inline-block;
    text-align: left;
    background: rgba(245,238,173,.8);
    color: rgba(85,85,85,1);
    border-radius: 3px;
}
/*--location--*/
#locationbody{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/locationbg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#locationbody::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#locationbody .col2-1{
    vertical-align: middle;
    color: rgba(44,44,44,1);
}
#locationbody .col3-1{
    color: rgba(85,85,85,1);
    text-align: left;
    vertical-align: middle;
}
#locationbody .col3-1 img{
    margin: 16px auto;
    padding: 0;
    border: 3px solid rgba(255,255,255,1);
    border-radius: 5px;
    box-shadow: 0px 3px 2px -1px rgba(44,44,44,.8), 0px -3px 2px -1px rgba(44,44,44,.8);
    max-width: 95%;
}
#locationbody .whitebg80{
    margin: 16px auto 80px;
    display: inline-block;
    max-width: 100%;
}
#map {
    max-width: 100%;
    height: 400px;
    width: 300px;
    margin: 16px auto;
    vertical-align: middle;
    position: relative;
}
#map > iframe {
    max-width: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/*--msg--*/
#msgbody{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/msgbg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#msgbody::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#mgrid > div{
    width: 450px;
    max-width: 90%;
    padding: 0px;
    margin: 16px 8px;
    display: inline-block;
    text-align: left;
    background: rgba(245,238,173,.8);
    color: rgba(85,85,85,1);
    box-shadow: 0px 3px 3px -1px rgba(27,19,16,.8);
    border-radius: 3px;
}
#mgrid > div:first-of-type{
    padding: 16px 8px;
    border-style: solid; border-width: 0px 0px 12px; 
    -moz-border-image: url(../fimgs/msgboxbg.jpg) 12 round; 
    -webkit-border-image: url(../fimgs/msgboxbg.jpg) 12 round;
    -o-border-image: url(../fimgs/msgboxbg.jpg) 12 round;
    border-image: url(../fimgs/msgboxbg.jpg) 12 fill round;
    box-shadow: 0px 3px 3px -1px rgba(255,255,255,.8);
    color: rgba(245,238,173,1);
}
#mgrid p{
    padding: 8px;
}
#captcha{
    padding: 8px 0;
}
input[type=button]{
    text-align: center;
    vertical-align: middle;
    color: rgba(44,44,44,1);
    margin: 0 auto;
}
check,input,textarea{
    text-align: center;
    font-size: 15px;
    font-family: Microsoft JhengHei,Verdana,sans-serif;
    color: rgba(44,44,44,1);
    padding: 8px 4px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    border: 1px solid rgba(51,51,51,0.5);
}
input,textarea{
    max-width: 95%;
    text-align: left;
    font-size: 15px;
    font-family: Microsoft JhengHei,Verdana,sans-serif;
    color: rgba(44,44,44,1);
}
textarea{
    width: 95%;
    resize: none;
    display: block;
    min-height: 100px;
    margin: 0 auto;
}
#warning, #warning1{
    color: rgba(165,0,0,1);
    font-size: 13px;
}
/*--news--*/
#newsbody{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/newsbg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#newsbody::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
/*--roomdetail--*/
#room01body{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/room01bg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#room01body::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#room02body{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/room02bg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#room02body::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#room03body{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/room03bg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#room03body::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#room04body{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/room04bg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#room04body::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#room05body{
    padding: 40px 0 0 0;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    display: block;
    background-image: url(../fimgs/room05bg.jpg);
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0px 5px 5px rgba(55,55,55,.8);
    -webkit-box-shadow: 0px 5px 5px rgba(55,55,55,.8);
}
#room05body::after{
    content:"";
    background-image: -moz-radial-gradient(center top,ellipse farthest-side ,  rgba(55,55,55,.8) , transparent);
    background-image: -webkit-radial-gradient(center top,ellipse farthest-side , rgba(55,55,55,.8) , transparent);
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
#roomphoto{
    vertical-align: top; 
}
#roomphoto span{
    max-width: 100%;
    width: 170px;
    height: 113px;
    margin: 4px;
    padding: 0;
    line-height: 0;
    display: inline-block;
    overflow: hidden;
}
#roomdata{
    text-align: left;
    line-height: 24px;
    margin: 0 auto;
    vertical-align: top;
    padding-bottom: 80px;
}
#roomphoto img{
    transform:scale(1);
    -webkit-transform:scale(1);
    transition: transform 0.8s;
    -webkit-transition: transform 0.8s;
}
#roomphoto img:hover, #roomphoto img:active{
    transform:scale(0.95);
    -webkit-transform:scale(0.95);
}
/*--news--*/
#newslist a{
    color: rgba(255,255,255,1);
    text-decoration: none;
}
#newslist a:hover, #newslist a:active {
    color: rgba(255,255,255,1);
    text-decoration: underline;
}

#newsdetail{
    box-shadow: 0px 5px 5px -1px rgba(27,19,16,.8);
    background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(27,19,16,.8));
    background-image: -o-linear-gradient(rgba(0,0,0,0),rgba(27,19,16,.8));
    background-image: -moz-linear-gradient(rgba(0,0,0,0),rgba(27,19,16,.8));
    background-image: linear-gradient(rgba(0,0,0,0),rgba(27,19,16,.8));
    background-repeat: no-repeat;
    vertical-align: middle;
}
#newscontent{
    text-align: left;
}
.topic, .newsdate{
    display: block;
    text-align: left;
}
.newsline{
    max-width: 45%;
    width: 400px;
}
.backnewslist{
    display: inline-block;
    margin: 32px auto 16px;
    padding: 8px;
    background-image: -webkit-linear-gradient(rgba(215,172,0,1),rgba(255,255,255,1));
    background-image: -o-linear-gradient(rgba(215,172,0,1),rgba(255,255,255,1));
    background-image: -moz-linear-gradient(rgba(215,172,0,1),rgba(255,255,255,1));
    background-image: linear-gradient(rgba(215,172,0,1),rgba(255,255,255,1));
    background-repeat: no-repeat;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    border-radius: 7px;
}
.backnewslist a{
    color: rgba(27,19,16,1);
    text-decoration: none;
}
.backnewslist a:hover, .backnewslist a:active{
    color: rgba(27,19,16,1);
    text-decoration: underline;
}
.backnewslist::after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 40%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
    background: -webkit-linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
    background: -o-linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
    background: -moz-linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}
.backnewslist:hover, .backnewslist:active{
    background-image: -webkit-linear-gradient(rgba(228,141,11,1),rgba(255,255,255,1));
    background-image: -o-linear-gradient(rgba(228,141,11,1),rgba(255,255,255,1));
    background-image: -moz-linear-gradient(rgba(228,141,11,1),rgba(255,255,255,1));
    background-image: linear-gradient(rgba(228,141,11,1),rgba(255,255,255,1));
}
/*--user setting - general--*/
.bodytitle{
    display: block;
    max-width: 100%;
    padding: 40px 0;
    margin: 0 auto;
}
.roomtitle{
    display: block;
    max-width: 100%;
    padding: 40px 0 0 8px;
    margin: 0 auto;
    text-align: left;
}
.eng{
    font-size: 13px;
    color: rgba(215,172,0,1);
    text-transform: uppercase;
    display: block;
    text-align: left;
    max-width: 100%;
    white-space: nowrap;
    padding: 8px 0;
    margin: 0 auto;
}
.line{
    color: rgba(0,191,0,1);
    padding: 8px 0;
}
.lh48px{
    line-height: 48px;
}
.lh32px{
    line-height: 32px;
}
.he200{
    height: 200px;
    display: block;
}
.fcolor{
    color: rgba(245,238,173,1);
}
.ycolor{
    color: rgba(215,172,0,1);
}
.fs13{
    font-size: 13px;
}
.fs17{
    font-size: 17px;
}
.fs19{
    font-size: 19px;
}
.fstylei{
    font-style: italic;
}
.fw700{
    font-weight: 700;
}
.width85{
    display: block;
    margin: 0 auto;
    padding: 20px 8px;
}
.whitebg80{
    background: rgba(255,255,255,.8)
}
.first{
    padding-top: 40px;
}
.last{
    border-bottom: none;
}
.imgshadow{
    box-shadow: 0px 0px 8px 1px rgba(55,55,55,1);
    padding: 0;
}
.more{
    width: 56px;
    height: 56px;
    text-align: center;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    vertical-align: middle;
    background: rgba(27,19,16,.7);
}
.col12-5{
    max-width: 90%;
    padding: 8px;
    width: 380px;
    margin: 0 auto;
    display: inline-block;
}
.col1-1{
    max-width: 90%;
    padding: 8px;
    width: 984px;
    margin: 0 auto;
    display: block;
}
.col2-1{
    max-width: 90%;
    padding: 8px;
    width: 450px;
    margin: 0 auto;
    display: inline-block;
}
.col3-1{
    max-width: 100%;
    padding: 8px;
    width: 300px;
    margin: 0 auto;
    display: inline-block;
}
.col3-2{
    max-width: 90%;
    padding: 8px;
    width: 580px;
    margin: 0 auto;
    display: inline-block;
}
/*--debug - big width for safari and chrome--*/
@media screen and (min-width: 1001px) and (-webkit-min-device-pixel-ratio:0){ 
    #subnav {top: 68px;}
}
/*--min 1001px--*/
@media only screen and (min-width: 1001px){
    #navbar > li{display: inline-block;vertical-align: middle;}
    #navbutton{display: none;}
    footer, .width85{max-width: 95%;}
    footer .col12-5{padding: 8px 4px;}
    footer .col12-5:nth-of-type(2){font-weight: 900;}
    #menu{display: none;}
    #newslist #newstopic{padding-right: 80px;}
    #firstnewslist > div{padding: 20px 8px;}
    #firstnewslist #newstopic{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .col1-1, .col12-5, .col3-2{max-width: 100%;}
    #aboutbody .col1-1{padding-top: 120px;}
    #aboutbody .col1-1{max-width: 85%;}
    #roomphoto{padding-bottom: 40px;}
    #vgrid > div{margin: 16px;}
    #mgrid > div{margin: 16px;}
    #vgrid{padding: 8px 8px 80px 8px;}
    #mgrid{padding: 8px 8px 80px 8px;}
    #map{display: inline-block;margin: 16px;}
    #newslist.col1-1{display: flex;display:-webkit-flex;align-items: center;-webkit-align-items: center;justify-content: space-between;-webkit-justify-content: space-between;}
}
/*--min 1201px--*/
@media only screen and (min-width: 1201px){
    footer .col12-5{padding: 8px;}
    footer .col12-5:nth-of-type(2){padding: 8px 40px;}
    footer, .width85{max-width: 85%;}
    #indexbody .col3-1{padding: 8px 80px;}
    #aboutbody .col1-1{max-width: 100%;}
    #vgrid > div{margin: 16px 64px;}
    #mgrid > div{margin: 16px 64px;}
}
/*--max 1000px--*/
@media only screen and (max-width: 1000px){
    header{text-align: center;background-size: auto;}
    #logoandnav{padding: 0;}
    #logo{padding: 0px;max-width: 40%;}
    nav{padding: 0;display: none;}
    #closemenu{display: block;text-align: center;padding: 40px 0;max-width: 100%;color: rgba(255,255,255,1);}
    #closemenu:hover, #closemenu:active{text-decoration: underline;}
    #firstnewslist{display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;justify-content: space-between;-webkit-justify-content: space-between;padding: 8px 0;}
    #firstnewslist #newsdate{display: none;}
    #firstnewslist #newstopic{display: block;text-align: left;line-height: 15px;font-size: 13px;}
    #firstnewslist > div:first-of-type{width: 40px;}
    #footerdata{max-width: 100%; padding: 20px 0px;}
    footer, .width85{max-width: 95%;}
    footer .col12-5{padding: 8px 0;max-width: 100%;}
    .col12-5, .col3-1, .col3-2{display: block;}
    #aboutbody .col1-1{padding-top: 40px;}
    #indexbody a:hover, #indexbody a:active, #indexbody a img:hover, #indexbody a img:active{transform:scale(0.9);-webkit-transform:scale(0.9);}
    #roomphoto span{width: 140px;}
    #roomphoto span{margin: 0 auto;}
    #locationbody .col2-1{font-size: 15px;}
    #newslist.col1-1 #newstopic{text-align: left;display: block;}
    #newslist.col1-1 #newsdate{text-align: right;display: block;}
}