/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2018年10月3日, 下午03:13:55
    Author     : daniel.chan
*/
body {
    font-family: 'Noto Sans TC', sans-serif;
    min-width: 370px;
    background-color: #FFFAB6;
}
table,tr,th,td {
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
    text-align: center;
    border-collapse: collapse;
}
a, a:hover {
    color: #000000;
    text-decoration: none;
}
#menubar {
    background-color: #FFFEE9;
    width: 100%;
    height: 110px;
    position: fixed;
    top: 0px;
    transition: 0.3s ease;
    z-index: 1;
}
#menubar-main {
    margin: auto;
    width: 1000px;
    height: 110px;
    display: flex;
    overflow: visible;
}
#menubar-logo-wrap {
    display: table;
    width: 240px;
    height: 110px;
}
#menubar-logo {
    cursor: pointer;
    width: 240px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 110px;
}
#menubar-link {
    width: 760px;
    display: flex;
}
.menubar-btn-yellow {
    background-color: #FFFAB6;
    width: 95px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 5px;
}
.menubar-btn-orange {
    background-color: #F6D86D;
    width: 95px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 5px;
}
.menu-btn-expand {
    width: 108px;
}
.menubar-btn-yellow, .menubar-btn-orange :hover {
    cursor: pointer;
}
.menubar-text-wrap {
    width: 100%;
    height: 45px;
    display: table;
}
/*.menubar-text {
    text-align: center;
    font-size: 11pt;
    display: table-cell;
    vertical-align: middle;
}*/
.menubar-onscroll {
    box-shadow: 0 1px 4px 0 rgba(99,114,130,0.15);
}
#header-separation-line {
    background-color: #EF7373;
    width: 100%;
    height: 15px;
    position: absolute;
    top: 110px;
}
#header {
    background-color: #FFFAB6;
    width: 100%;
    height: 560px;
    padding-top: 15px;
    margin-top: 125px;
}
#topbar {
    width: 100%;
    height: 76px;
}
#topbar-menu {
    margin: auto;
    width: 1000px;
}
#topbar-menu-lang {
    width: 151px;
    height: 76px;
    float: left;
}
.topbar-menu-lang-btn {
    float: left;
}
#topbar-menu-counter {
    width: 161px;
    height: 41px;
    float: right;
    background-color: #F9B041;
    display: table;
}
#topbar-menu-counter-text {
    color: #FFFFFF;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
#photo-slide {
    margin: auto;
    width: 1000px;
    height: 442px;
    display: flex;
}
#photo-slide-main {
    margin-top: -13px;
    width: 934px;
    height: 456px;
    position: relative;
    overflow: hidden;
}
/*#photo-slide-main-frame {
    width: 934px;
    height: 456px;
    position: absolute;
    margin-left: 16px;
}
.photo-slide-main-photos {
    width: 647px;
    height: 420px;
    position: absolute;
    left: 150px;
    top: 15px;
    display: none;
}*/
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
.photo-slide-btn {
    width: 33px;
    height: 423px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}
.photo-slide-btn :hover {
    cursor: pointer;
}
.right-menu {
    position: absolute;
    width: 100%;
    top: 700px;
    z-index: 1;
    pointer-events: none;
}
#right-menu-wrap {
    margin: auto;
    width: 1100px;
}
#right-menu-content {
    width: 60px;
    height: 302px;
    margin-left: 10px;
    margin-right: 10px;
    float: right;
    padding-top: 59px;
    pointer-events: auto;
}
.right-menu-btn {
    width: 60px;
    height: 62px;
    margin-top: -4.5px;
}
.right-menu-onscroll {
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 175px;
}
#footer-separation-line {
    background-color: #FFDD63;
    width: 100%;
    height: 15px;
}
#footer {
    background-color: #FFFFFF;
    width: 100%;
    height: 185px;
    padding: 20px 0px;
}
#footer-nav {
    margin: auto;
    width: 900px;
    height: 60px;
    font-size: 11pt;
    letter-spacing: 1pt;
    line-height: 20pt;
}
.footer-nav-link {
    cursor: pointer;
}
.footer-nav-slash {
    color: #EF7373;
    margin-left: 9px;
    margin-right: 9px;
    font-weight: 700;
}
#footer-logo-and-text {
    margin: auto;
    width: 900px;
    height: 85px;
    display: flex;
    font-size: 11pt;
    letter-spacing: 1pt;
    line-height: 24pt;
}
#footer-logo {
    width: 210px;
    height: 81px;
}
#footer-text {
    margin-top: 55px;
    margin-left: 20px;
}
#fb-like-box {
    width: 480px;
    height: 80px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin: auto;
    background-color: #FFFFFF;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10px;
    visibility: hidden;
}
#fb-logo {
    display: flex;
    margin-left: 15px;
    margin-right: 15px;
    border-bottom: 1px solid #CCC;
    height: 26px;
    margin-bottom: 9px;
}
#fb-logo-img {
    
}
#fb-logo-text {
    margin-left: 10px;
    font-size: 8pt;
    margin: auto;
    margin-left: 10px;
    color: #1d2129;
}
#fb-like-box-close {
    width: 80px;
    height: 80px;
    border-left: 1px solid #CCC;
    background-color: #EEE;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
#fb-like-box-close :hover {
    cursor: pointer;
}
#fb-like-box-content {
    width: 400px;
    height: 80px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
.fb-like-btn :hover {
    cursor: pointer;
}





#mobile-top-bar {
    display: none;
}
#menubar-menu-wrap {
    display: none;
}

#nav-menu {
    display: none;
}

#mobile-main, #blogpage-mobile-main, #blogpage-back {
    display: none;
}

@media screen and (max-width: 1100px) {
    .right-menu {
        display: none;
    }
    #right-pagetop {
        display: none;
    }
}

@media screen and (max-width: 999px) {
    #menubar, #header-separation-line, #header, #main-blog, #main-news, #main-vision, #main-environment, #main-services, #main-officehr, #main-contact, #main-weatherarrangement, #footer-separation-line, #footer {
        width: 1000px;
    }

}

@media screen and (max-width: 999px) {
    #blog-content-bg, #blog-cover-top, #blog-cover-bottom {
        width: 1120px;
    }

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .right-menu-onscroll {
        position: fixed;
    }
}

@media (max-width: 999px) {
    #header {
        width: 100%;
    }
    #photo-slide {
        width: 100%;
    }
    
    #photo-slide-main {
        margin-top: 20px;
        width: 100%;
    }
    .photo-slide-btn {
        display: none;
    }
}

@media (max-width: 999px) {
    #mobile-top-bar {
        background-color: #FFFAB6;
        width: 100%;
        height: 70px;
        position: fixed;
        top: 0px;
        transition: 0.3s ease;
        display: block;
        z-index: 1;
    }
    #topbar-menu-lang {
        width: 150px;
        padding-left: 15px;
    }
    #header {
        padding-top: 0px;
        margin-top: 159px;
    }
    #topbar {
        height: 30px;
    }
    #topbar-menu {
        display: none;
    }
    .topbar-menu-lang-btn {
        height: 55px;
    }
    #menubar {
        width: 100%;
        height: 80px;
        top: 70px;
    }
    #menubar-main {
        width: 100%;
        height: 100%;
    }
    #menubar-logo-wrap{
        height: 100%;
        width: 200px;
    }
    #menubar-logo{
        height: 100%;
    }
    #menubar-logo img {
        width: 75%;
    }
    #menubar-link {
        display: none;
    }
    #menubar-menu-wrap {
        display: block;
        text-align: right;
        text-align: -webkit-right;
        padding-right: 15px;
        width: -moz-calc(100% - 200px);
        width: -webkit-calc(100% - 200px);
        width: calc(100% - 200px);
    }
    
    #menubar-menu {
        height: 80px;
        display: table-cell;
        vertical-align: middle;
    }

    #menubar-menu i {
        padding: 8px 15px;
        border-radius: 8px;
        color: white;
        font-size: 30px;
        background: #F6D86D;
    }
    .menubar {
        display: flex;
        transition: 0.3s ease;
        background-color: #292929;
        top: 0;
        margin: auto;
        width: 100%;
        position: sticky;
        width: 100%;
        height: 50px;
        z-index: 1;
    }
    .menubar-nav-expanded {
        height: 450px;
    }

    #nav-menu {
        display: block;
    }
    .nav-menu {
        position: absolute;
        right: 0px;
        background-color: #FFFAB6;
        height: 0px;
        z-index: 1;
        line-height: 1.5em;
        color: #CCC;
        transition: 0.3s ease;
        /*padding: 5px 10px;*/
        visibility: hidden;
        box-shadow: 0 3px 4px 0 rgba(0,0,0,0.3);
        top: 80px;
        width: 100%;
        line-height: 5em;
    }

    .nav-menu-expand {
        height: 487px;
        visibility: visible !important;
    }

    #menu-list {
        display: none;
    }

    #menu-list div {
        display: block;
        color: #000000;
        text-align: center;
        font-size: 18px;
    }
    .menu-list-item-orange {
        background-color: #F6D86D;
    }
    
    .menu-list-item-yellow {
        background-color: #FFFAB6;
    }
    
    .menu-list-item-orange img {
        width: 30px;
    }
    .menu-list-item-yellow img {
        width: 30px;
    }
    #header-separation-line {
        width: 100%;
        position: absolute;
        top: 150px;
        height: 10px;
    }
    #main-body-blog, #main-blog, #main-news, #main-vision, #main-environment, #main-services, #main-officehr, #main-contact, #main-weatherarrangement, #footer-separation-line, #footer {
        display: none;
    }
    #header {
        height: fit-content;
        overflow: auto;
        overflow-x: hidden;
        min-height: 200px;
    }
    #photo-slide {
        /*min-height: 300px;*/
        height: 300px;
    }
    
    #photo-slide-main{
        height: fit-content;
        overflow: visible;
    }
    #photo-slide-main-frame {
        height: fit-content;
    }
    .photo-slide-main-photos {
        height: fit-content;
        background-color: #FFFAB6;
        padding-bottom: 20px;
    }
    #mobile-main, #blogpage-mobile-main, #blogpage-back {
        display: block;
    }
    .mobile-main-section-title {
        width: 100%;
        height: 50px;
        padding-left: 10px;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 20px;
        vertical-align: middle;
        display: flex;
        align-items: center;
    }
    #mobile-main-news-title {
        background-color: #33BAC0;
    }
    #mobile-main-news {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    .mobile-main-news-date {
        height: 30px;
        width: fit-content;
        border-bottom: 1px dotted #CCCCCC;
        margin-bottom: 5px;
    }
    .mobile-main-news-content {
        width: 100%;
        border-bottom: 1px solid #CCCCCC;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }
    .mobile-main-news-content a {
        /*color: #4287F5;*/
    }
    .mobile-main-section-content {
        width: 100%;
        padding-top: 15px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 18px;
        padding-bottom: 15px;

    }
    #mobile-main-blog {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    #mobile-main-blog-title {
        background-color: #F0AA43;
    }
    
    .mobile-main-blog-content-text{
        width: 100%;
        border-bottom: 1px solid #CCCCCC;
        margin-top: 5px;
        padding-bottom: 5px;
        margin-bottom: 5px;
        text-align: center;
    }
    
    #mobile-main-vision {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    #mobile-main-vision-title {
        background-color: #E46E70;
    }
    .mobile-main-vision-content-text {
        border-bottom: 1px dotted #CCCCCC;
    }
    .mobile-main-vision-content-text-special {
        padding-left: 0px !important;
        margin-left: 80px;
    }
    
    #main-vision-link-wrap {
        margin: auto;
        width: 100%;
        height: auto;
        text-align: center;
        margin-bottom: 35px;
        max-width: 100vh;
    }
    
    .main-vision-link{
        width: 85%;
        display: block;
        margin-bottom: 10px;
    }
    
    .main-vision-link-right{
        margin-left: 10%;
    }
    .fb-like-btn {
        margin-bottom: 25px;
    }
    #fb-like-box {
        width: fit-content;
    }
    #fb-like-box-content {
        width: 60%;
    }
    #fb-like-box-close {
        width: 20%;
    }
    #fb-content {
        width: 100%;
    }
    
    #mobile-main-environment {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    #mobile-main-environment-title {
        background-color: #F0AA43;
    }
    #mobile-main-environment-content {
        display: table;
    }
    .mobile-main-environment-arrow {
        display: table-cell;
    }
    #mobile-main-environment-content-photo {
        overflow-x: scroll;
        display: -webkit-box;
    }
    .mobile-main-environment-photo {
        width: 100%;
        text-align: center;
    }
    .mobile-main-environment-photo img {
        max-width: 85%;
    }
    
    #mobile-main-services {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    
    #mobile-main-services-title {
        background-color: #04BB9D;
    }
    
    .mobile-main-services-content-card {
        width: 90%;
        margin: auto;
        padding: 3%;
        margin-top: 20px;
        margin-bottom: 25px;
    }
    .mobile-main-services-content-card-title {
        padding-left: 10px;
        font-size: 20px;
    }
    .mobile-main-services-content-card-text {
        
    }
    
    .mobile-main-services-content-card-text ul {
        list-style-type: none;
    }
    
    .mobile-main-services-content-card-text li {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .mobile-main-services-content-card-text li::before {
        content: "■";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
        font-weight: bold; /* If you want it to be bold */
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 2em;
        margin-left: -2em;
        font-size: 12px;
    }
    
    .mobile-main-services-content-card-text-subtitle {
        padding-left: 1em;
        display: inline-block;
        margin-top: 5px;
        font-weight: bold;
    }
    
    #mobile-main-services-content-card1 {
        border: 3px solid #FBCEA5;
        background-color: #FFF5DC;
    }
    
    #mobile-main-services-content-card1-title {
        color: #F3A039;
        border-bottom: 3px solid #F3A039;
    }
    #mobile-main-services-content-card1-text li::before{
        color: #F3A039;
    }
    
    #mobile-main-services-content-card2 {
        border: 3px solid #77EFD9;
        background-color: #EAF5EF;
    }
    
    #mobile-main-services-content-card2-title {
        color: #0AE3B7;
        border-bottom: 3px solid #0AE3B7;
    }
    #mobile-main-services-content-card2-text li::before{
        color: #0AE3B7;
    }
    
    #mobile-main-services-content-card3 {
        border: 3px solid #FAC2B5;
        background-color: #FEEDE5;
    }
    
    #mobile-main-services-content-card3-title {
        color: #F17073;
        border-bottom: 3px solid #F17073;
    }
    #mobile-main-services-content-card3-text li::before{
        color: #F17073;
    }
    
    #mobile-main-services-content-card4 {
        border: 3px solid #55E3E7;
        background-color: #DEEFF6;
    }
    
    #mobile-main-services-content-card4-title {
        color: #0DA2B6;
        border-bottom: 3px solid #0DA2B6;
    }
    #mobile-main-services-content-card4-text li::before{
        color: #0DA2B6;
    }
    
    #mobile-main-officehr {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    #mobile-main-officehr-title {
        background-color: #E46E70;
    }
    
    #mobile-main-officehr-content {
        text-align: center;
        font-size: 24px;
    }
    
    #mobile-main-officehr-flag {
        background: url(../images/bg_col_flag.png) repeat-x;
        height: 30px;
        width: 100%;
        
    }
    #mobile-main-officehr-booking {
        margin: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    #mobile-main-contactus {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    #mobile-main-contactus-title {
        background-color: #F0AA43;
    }
    #mobile-main-contactus-content {
        text-align: center;
        font-size: 20px;
    }
    #mobile-main-contactus-content iframe {
        width: 90%;
        height: 80vw;
    }
    
    #mobile-main-contactus-transport {
        width: 90%;
        margin: auto;
        padding: 3%;
        margin-top: 20px;
        margin-bottom: 25px;
        background-color: #F9CEAE;
    }
    #mobile-main-contactus-transport-title {
        padding-left: 10px;
        font-size: 20px;
        color: #FA5B4E;
        border-bottom: 3px solid #FFFFFF;
        padding-bottom: 5px;
        text-align: left;
    }
    #mobile-main-contactus-transport-text {
        
    }
    
    #mobile-main-contactus-transport-text ul {
        list-style-type: none;
        font-size: 16px;
        text-align: left;
    }
    
    #mobile-main-contactus-transport-text li {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #mobile-main-contactus-transport-text li::before {
        content: "■";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
        font-weight: bold; /* If you want it to be bold */
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 2em;
        margin-left: -2em;
        font-size: 12px;
        color: #FFFFFF;
    }
    
    #mobile-main-weatherarrangement {
        width: 100%;
        background-color: #FFFFFF;
        height: fit-content;
        margin-bottom: 20px;
    }
    
    #mobile-main-weatherarrangement-title {
        background-color: #04BB9D;
    }
    #mobile-main-weatherarrangement-content {
        
    }
    #mobile-main-weatherarrangement-content table {
        margin-bottom: 20px !important;
        margin-top: 15px !important;
    }
    #mobile-main-weatherarrangement-content tr, th, td {
        height: 40px;
    }
    
    #mobile-main-weatherarrangement-content th {
        color: #FFFFFF; 
        height: 50px; 
        border: 3px solid #FFFFFF;
    }
    #mobile-main-weatherarrangement-content-i td {
        height: 40px;
        background-color: #FEEDE5;
        border: 3px solid #FFFFFF;
    }
    
    #mobile-main-weatherarrangement-content-g td {
        height: 40px;
        background-color: #DEEFF6;
        border: 3px solid #FFFFFF;
    }
    
    #mobile-main-weatherarrangement-disclaimer {
        width: 90%;
        margin: auto;
        padding: 3%;
        margin-top: 20px;
        margin-bottom: 25px;
        background-color: #9CF9E7;
    }
    #mobile-main-weatherarrangement-disclaimer-title {
        padding-left: 10px;
        font-size: 20px;
        color: #13B49A;
        border-bottom: 3px solid #FFFFFF;
        padding-bottom: 5px;
        text-align: left;
    }
    #mobile-main-weatherarrangement-disclaimer-text {
        
    }
    
    #mobile-main-weatherarrangement-disclaimer-text ul {
        list-style-type: none;
        font-size: 16px;
        text-align: left;
    }
    
    #mobile-main-weatherarrangement-disclaimer-text li {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #mobile-main-weatherarrangement-disclaimer li::before {
        content: "■";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
        font-weight: bold; /* If you want it to be bold */
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 2em;
        margin-left: -2em;
        font-size: 12px;
        color: #FFFFFF;
    }
    
    #mobile-main-footer {
        width: 100%;
    }
    
    #mobile-main-footer-gototop {
        padding-right: 5%;
        height: 100px;
        width: 100%;
        text-align: right;
    }
    
    #mobile-main-footer-icons {
        background-color: #FFFFFF;
        text-align: center;
        padding: 3vw;
        
    }
    
    #mobile-main-footer-icons img {
        vertical-align: top;
    }
    
    #mobile-main-footer-icons-chi {
        height: 50px;
        background-color: #F17074;
        border-radius: 10px;
        display: inline-table;
        width: 50px;
        font-size: 12px;
        color: #FFFFFF;
        margin-left: 10px;
    }
    #mobile-main-footer-icons span {
        display: table-cell;
        vertical-align: middle;
    }
    
    #mobile-main-footer-icons-eng {
        height: 50px;
        background-color: #04BB9D;
        border-radius: 10px;
        display: inline-table;
        width: 50px;
        font-size: 12px;
        color: #FFFFFF;
        margin-left: 10px;
    }
    
    #mobile-main-footer-icons i {
        font-size: 50px;
        color: #6475AB;
        text-align: center;
        vertical-align: bottom;
        margin-left: 10px;
    }
    
    #mobile-main-footer-text {
        background-color: #FFDE6A;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    #blogpage-mobile-main {
        position: absolute;
        width: 100%;
        top: 150px;
    }
    #blogpage-back {
        right: 3vw;
        position: absolute;
        top: 5px;
    }
    #blogpage-content {
        width: 100%;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    #menu-list div {
        font-size: 16px;
    }
    .mobile-main-section-content {
        font-size: 16px;
    }
}