@charset "UTF-8";


body { background-color: #e8f8ff; }
.wrapper { background-color: #ffffff; }
.wrapper { border-bottom: 10px solid #2D8F59; }


/* --- header --- */
header { display: block; width: 100%; max-width: 1024px; margin: auto; padding: 10px 0; position: fixed; z-index: 3; }
header { background-color: #2D8F59; }
header .logo-website { display: block; position: relative; }
header .logo-website { background-size: 100% auto; background-position: center; background-repeat: no-repeat; }

:lang(en) header .logo-website { background-image: url(../image/common/logo-website_en.svg); }
:lang(zh-hk) header .logo-website { background-image: url(../image/common/logo-website_tc.svg); }
:lang(zh-cn) header .logo-website { background-image: url(../image/common/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 .header-nav { display: block; width: 100%; position: absolute; left: 0; top: calc((100vw * .0672) + 17px); }
    header .header-nav { background-color: #9DD0A2; }
    header .header-nav .navbar-nav { flex-direction: row; align-items: center; justify-content: space-between; width: 85%; margin: auto; }
    header .header-nav .navbar-nav > li { padding: .6% 1.6%; }
    header .header-nav .navbar-nav > li .nav-link { text-align: center; color: #009043; }
}
@media (min-width: 1024px) {
    header .header-nav { top: 90px; }
}
@media (max-width: 767px) {
    header { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 0.1); }
    header .logo-website { width: 73%; margin-left: 5%; padding-top: 10%; }
    
    header .header-nav { display: none; }
}


/* --- nav --- */
nav { display: block; width: 100%; height: 0; max-width: 1024px; margin: auto; padding: 0; position: fixed; z-index: 4; }

nav .nav-main .navbar-nav { padding-top: 3rem; }
nav .nav-main .navbar-nav > li { display: block; width: 100%; padding: 1% 6%; position: relative; }
nav .nav-main .navbar-nav > li:hover { background-color: #00531D; }
nav .nav-main .navbar-nav > li .nav-link { width: 85%; color: #ffffff; font-size: 1.2rem; }

nav form.gov-search .bi::before { color: #2D8F59; }
nav form.gov-search input[type="search"] { border: none; }

nav ul.lang-bar { border-right-color: #ffffff; }
nav ul.lang-bar > li { border-left-color: #ffffff; }
nav ul.lang-bar > li .nav-link { color: #ffffff; }

nav .nav-sub .btn-text-size { color: #ffffff; }

@media (min-width: 768px) {
    nav ul.lang-bar { order: 1; }
    nav .nav-sub .btn-text-size { order: 2; }
    nav form.gov-search { order: 3; }
    nav form.gov-search input[type="search"] { width: calc(100vw * .1171); }
}
@media (max-width: 767px) {    
}


/* --- nav .navbar-toggler --- */
nav .navbar-toggler { display: block; right: 2%; }
nav .navbar-toggler { background-color: #2D8F59; }
nav .navbar-toggler[aria-expanded="true"] { border: 1px solid #ffffff; }
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 { top: calc(100vw * .5 * .21 - 32px); }    
}
@media (min-width: 1024px) {
    nav .navbar-toggler { top: 75px; }
}
@media (max-width: 767px) {
    nav .navbar-toggler { top: 10px; }
}


/* --- nav .navbar-collapse --- */
nav .navbar-collapse.collapsing { min-height: 100vh; }

@media (min-width: 768px) {    
    nav .navbar-collapse { display: block!important; }
    nav .navbar-collapse .nav-main { width: 0; height: 100vh; position: absolute; right: 0; top: 0; z-index: 2; overflow: hidden; }
    nav .navbar-collapse .nav-main { transition: width .8s; }
    nav .navbar-collapse.collapsing .nav-main,
    nav .navbar-collapse.show .nav-main { width: calc(50% + 10px); }
    
    nav .navbar-collapse .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; }
    nav .navbar-collapse .nav-main .navbar-nav { background-image: url(../image/common/bg-navbar.png); background-repeat: repeat; }
    nav .navbar-collapse .nav-main .navbar-nav { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 0.3); }
    nav .navbar-collapse .nav-main .navbar-nav { transition: right .8s; }
    nav .navbar-collapse.show .nav-main .navbar-nav { right: 0; }
    
    nav .navbar-collapse.collapse:not(.show) .nav-main .navbar-nav { display: none; }
    nav .navbar-collapse.collapse.show-on .nav-main .navbar-nav { display: block; }

    nav .navbar-collapse .nav-sub { justify-content: flex-end; width: 50%; position: absolute; right: 9%; top: calc(100vw * .5 * .21 - 25px); z-index: 1; }
}
@media (min-width: 1024px) {
    nav .navbar-collapse .nav-main .navbar-nav { width: 512px; right: -512px; }
    
    nav .navbar-collapse .nav-sub { top: 82px; }
}
@media (max-width: 767px) {
    nav .navbar-collapse { display: block; height: 100vh; max-height: 100vh; position: absolute; right: -100%; top: 0; overflow-y: auto; }
    nav .navbar-collapse { background-image: url(../image/common/bg-navbar.png); background-repeat: repeat; }
    nav .navbar-collapse { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 0.3); }
    nav .navbar-collapse { transition: right .8s; }
    nav .navbar-collapse.show { right: 0; }
    
    nav .navbar-collapse.collapse:not(.show) { display: none; }
    nav .navbar-collapse.collapse.show-on { display: block; }
    
    nav .navbar-collapse .nav-sub { width: 90%; margin: auto; padding: 2rem 0; position: relative; }
}


/* --- main --- */
main { display: block; width: 100%; margin: auto; padding: 0; position: relative; z-index: 2; color: #555756; }

main h1 { display: flex; justify-content: center; }
main h1 span { margin: 3rem 0; padding-bottom: .5rem; text-align: center; color: #00531D; font-size: 2rem; font-weight: 100; }
main h1 span { border-bottom: 6px solid #00531D; }

main h3,
main h4 { margin: 1rem 0; color: #00531D; }

main .btn-link { display: block; padding: 1rem; position: relative; overflow: hidden; text-align: center; color: #2D8F59; text-decoration: none!important; }
main .btn-link { border: 1px solid #2D8F59; /*border-radius: 10px;*/ }
main .btn-link:hover { color: #ffffff; }
main .btn-link span { position: relative; z-index: 2; }
main .btn-link::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: -100%; top: 0; z-index: 1; }
main .btn-link::before { background-color: #2D8F59; }
main .btn-link::before { transition: left .3s; }
main .btn-link:hover::before { left: 0; }

main ul.btn-list { display: block; margin: auto; padding: 0; list-style: none; }
main ul.btn-list > li { margin: 1rem auto; }

main .webcast { display: block; width: 100%; padding-top: 66%; position: relative; }
main .webcast iframe { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

@media (min-width: 768px) {
    main .inner-container { width: 80%; }
    
    main ul.btn-list { width: 80%; }
}
@media (min-width: 1024px) {
    main { padding-top: 180px; }
}
@media (max-width: 767px) {
    main { padding-top: calc(100vw * .0976 + 18px); }
    main .inner-container { width: 90%; }
}


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

footer ul.logo-bar { justify-content: flex-start; }
footer ul.logo-bar > li:nth-child(2),
footer ul.logo-bar > li:nth-child(3) { display: none; }

footer ul.nav-bar > li { border-left-color: #000000; }
footer ul.nav-bar > li > span,
footer ul.nav-bar > li .nav-link { color: #000000; }

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