@charset "UTF-8";


body { background-color: #E4F2E9; }

table tr th, table tr td { background-color: #cdeed1; }
table tr th, table tr td { border: 2px solid #ffffff; }

h1, .h1 { color: #00531d; font-size: 2rem; }
h2, .h2 { color: #00531d; font-size: 2rem; }
h3, h4, h5, .h3, .h4, .h5 { color: #00531d; }

.wrapper { color: #555756; }
.wrapper { background-color: #ffffff; }
.wrapper { border-bottom: 10px solid #2d8f59; }
.wrapper { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, .1); }
.remark { line-height: 1.5; font-size: .9em; }


/* shared part */
.style-title-s1 { display: flex; justify-content: center; margin: 3rem 0; color: #00531d; font-size: 2rem; font-weight: 100; }
.style-title-s1 span { padding-bottom: .5rem; text-align: center; }
.style-title-s1 span { border-bottom: 6px solid #00531d; }


.style-btn-s1 { display: block; padding: 1rem; position: relative; overflow: hidden; text-align: center; color: #2d8f59; text-decoration: none!important; } 
.style-btn-s1 { border: 1px solid #2d8f59; }
.style-btn-s1:hover { color: #ffffff; }
.style-btn-s1 span { position: relative; z-index: 2; }
.style-btn-s1::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: -100%; top: 0; z-index: 1; }
.style-btn-s1::before { background-color: #2d8f59; }
.style-btn-s1::before { transition: left .3s; }
.style-btn-s1:hover::before { left: 0; }
.style-btn-s1.auto-width { display: inline-block; padding-left: 3.1rem; padding-right: 3.1rem; }


.collapse-list { margin-top: 1rem; }
.collapse-list > div { margin: 1rem 0; }
.collapse-list button { display: inline-flex; justify-content: center; align-items: center; position: relative; }
.collapse-list button[data-toggle="collapse"] { min-width: 260px; padding: .2rem 1rem; color: #ffffff; font-weight: bold; }
.collapse-list button[data-toggle="collapse"] { border-radius: 0; }
.collapse-list button[data-toggle="collapse"][aria-expanded="false"] { background-color: #eeeeee; }
.collapse-list button[data-toggle="collapse"][aria-expanded="true"] { background-color: #eeeeee; }
.collapse-list button > span { text-align: center; }
.collapse-list button.bi { justify-content: space-between; }
.collapse-list button.bi > span { order: 1; width: calc(100% - 30px); }
.collapse-list button.bi::before { order: 2; }
.collapse-list button.bi[aria-expanded="false"]::before { transform: rotate(90deg); }
.collapse-list button.bi[aria-expanded="true"]::before { transform: rotate(180deg); }

.plugin-slick .case .slick-autoplay-toggle-button { bottom: 0; }
.plugin-slick .case .slick-dots li.slick-active button .slick-dot-icon { color: #eeeeee; }


/* --- header --- */
header { display: block; width: 100%; margin: 0; padding: 0; position: relative; z-index: 3; }
header { display: flex; justify-content: center; position: fixed; left: 0; top: 0; }
header .inner-container { width: 100%; max-width: 1024px; padding: 10px 0; }
header .inner-container { background-color: #2d8f59; }

header .logo-website { display: block; position: relative; }
header .logo-website { background-size: 100% auto; background-position: left top; background-repeat: no-repeat; }

:lang(en) header .logo-website { background-image: url(../image/common/header_logo-website_en.svg); }
:lang(zh-hk) header .logo-website { background-image: url(../image/common/header_logo-website_tc.svg); }
:lang(zh-cn) header .logo-website { background-image: url(../image/common/header_logo-website_sc.svg); }

@media (min-width: 768px) {
    header .logo-website { width: 53%; margin-left: 3%; margin-top: 3%; margin-bottom: .8%; padding-top: 7%; }
    
    header .nav { display: block; width: 100%; position: absolute; left: 0; top: calc((100vw * .106) + 19px); }
    header .nav { background-color: #9dd0a2; }
    header .nav .navbar-nav { flex-direction: row; align-items: center; justify-content: space-between; width: 85%; margin: auto; }
    header .nav .navbar-nav > li { padding: .6% 1.6%; }
    header .nav .navbar-nav > li .nav-link { text-align: center; color: #009043; }
}
@media (min-width: 1024px) {
    header .nav { top: 130px; }
}
@media (max-width: 767.98px) {
    header .inner-container { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, .1); }
    
    header .logo-website { width: 330px; margin-left: 5%; padding-top: 40px; }
    
    header .nav { display: none; }
}


/* --- nav --- */
nav { display: block; width: 100%; margin: 0; padding: 0; position: relative; z-index: 4; }
nav { display: flex; justify-content: center; height: 0; position: fixed; left: 0; top: 0; }
nav .inner-container { width: 100%; max-width: 1024px; }

nav .nav-main .navbar-nav { padding-top: 70px; position: relative; }
nav .nav-main .navbar-nav .nav-item { display: block; width: 100%; padding: 1% 6%; position: relative; }
nav .nav-main .navbar-nav .nav-item:hover { background-color: #00531d; }
nav .nav-main .navbar-nav .nav-item .nav-link { width: 85%; text-align: left; color: #ffffff; font-size: 1.2rem; }

nav .nav-sub ul.social-bar { display: none; }

@media (min-width: 768px) {
    nav .navbar-offcanvas .nav-main { width: 0; height: 100vh; position: absolute; right: 0; top: 0; z-index: 2; overflow: hidden; }
    nav .navbar-offcanvas .nav-main { transition: width .8s; }
    nav .navbar-offcanvas.hiding .nav-main,
    nav .navbar-offcanvas.open .nav-main { width: calc(50% + 10px); }
    
    nav .navbar-offcanvas .nav-main .navbar-nav { display: block; width: calc(100vw / 2); height: 100vh; max-height: 100vh; position: absolute; right: calc(100vw / 2 * -1); top: 0; overflow-y: auto; visibility: hidden; }
    nav .navbar-offcanvas .nav-main .navbar-nav { background-image: url(../image/common/nav_bg-01.png); background-repeat: repeat; }
    nav .navbar-offcanvas .nav-main .navbar-nav { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, .3); }
    nav .navbar-offcanvas .nav-main .navbar-nav { transition: visibility .8s, right .8s; }
    nav .navbar-offcanvas.open .nav-main .navbar-nav { right: 0; visibility: visible; }
    
    nav .nav-main .navbar-toggler-last { display: block; }
    
    nav .nav-sub { position: absolute; right: 9%; top: calc(100vw * .5 * .21 - 25px); z-index: 1; }
    nav .nav-sub { color: #2d8f59; }
    nav .nav-sub .nav-link { color: #ffffff; }
    nav .nav-sub form.gov-search input[type="search"] { width: calc(100vw * .1171); }
    nav .nav-sub form.gov-search { order: 3; }
    nav .nav-sub ul.lang-bar { order: 1; }
    nav .nav-sub ul.lang-bar > li { border-color: #ffffff; }
    nav .nav-sub .btn-text-size { order: 2; }
    nav .nav-sub ul.social-bar { order: 4; }
    
    /* CSS hacks IE11 */
    /*
    _:-ms-fullscreen, :root nav .nav-main.navbar-fixed-scroll { padding-top: 64px; }
    _:-ms-fullscreen, :root nav .nav-main.navbar-fixed-scroll .navbar-nav .nav-item { min-height: 64px; }
    */
}
@media (min-width: 1024px) {
    nav .navbar-offcanvas .nav-main .navbar-nav { width: 512px; right: -512px; }
    
    nav .nav-sub { top: 80px; }
    
    /* CSS hacks IE11 */
    /*
    _:-ms-fullscreen, :root nav .nav-main.navbar-fixed-scroll { padding-top: 40px; }
    _:-ms-fullscreen, :root nav .nav-main.navbar-fixed-scroll .navbar-nav .nav-item { min-height: 40px; }
    */
}
@media (max-width: 767.98px) {
    nav { height: 0; position: fixed; left: 0; top: 0; }
    
    nav .navbar-offcanvas { background-image: url(../image/common/nav_bg-01.png); background-repeat: repeat; }
    
    nav .nav-main .navbar-toggler-last { display: none; }
    
    nav .nav-sub { justify-content: center; width: 90%; margin: auto; padding: 2rem 0; position: relative; color: #2d8f59; }
    nav .nav-sub .nav-link { color: #ffffff; }
    nav .nav-sub ul.lang-bar > li { border-color: #ffffff; }
}


/* --- nav .navbar-toggler --- */
nav .navbar-toggler { right: 20px; top: 20px; }
nav .navbar-toggler { background-color: #2d8f59; }
nav .navbar-toggler { border: 1px solid #ffffff; }
nav .navbar-toggler[aria-expanded="false"] { border-color: transparent; }
nav .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

@media (min-width: 768px) {
    nav .navbar-toggler { display: block; top: calc(100vw * .5 * .21 - 33px); }
}
@media (min-width: 1024px) {
    nav .navbar-toggler { right: calc((100vw - 1024px - var(--scrollbar-width)) / 2 + 20px); top: 73px; }
}
@media (max-width: 767.98px) {
    nav .navbar-toggler { right: 5%; top: 10px; }
}


/* --- main --- */
main { display: block; width: 100%; margin: 0; padding: 0; position: relative; z-index: 2; }
main { padding-bottom: 1.5rem; }
main .no-content { text-align: left; }

main .btn-list { margin: auto; }
main .btn-list > li { margin: .5rem 0; }

main .dataset { margin-top: 3rem; }

@media (min-width: 768px) {
    main { padding-top: var(--fixed-height-offset); }
    main .inner-container { width: 80%; }
    
    main ul.btn-list { width: 80%; }
}
@media (max-width: 767.98px) {
    main { padding-top: 60px; }
    main .inner-container { width: 90%; }
}


/* --- footer --- */
footer { display: block; width: 100%; margin: 0; padding: 0; padding-bottom: 1rem; position: relative; z-index: 1; }
footer { padding-top: 1.5rem; }
footer .inner-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

footer ul.logo-bar > li:nth-child(2),
footer ul.logo-bar > li:nth-child(3) { display: none; }
footer ul.nav-bar a { color: #212529; }

@media (min-width: 768px) {
    footer .inner-container { width: 95%; }
}
@media (max-width: 767.98px) {
    footer .inner-container { width: 90%; }
}


/* --- .modal --- */
.modal .modal-content { background-color: #cdeed1; }