@charset "UTF-8";


body { background-color: #523071; }

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

h1, .h1 { color: #00AFEC; font-size: 2rem; }
h2, .h2 { color: #ACCE12; font-size: 1.75rem; line-height: 2.2; }
h3, h4, h5, .h3, .h4, .h5 { color: #E94709; }

.wrapper { color: #FFFFFF; }
.wrapper { background-color: #ffffff; }
.remark { line-height: 1.5; font-size: .9em; }


/* shared part */
.btn-link { display: inline-flex; justify-content: center; align-items: center; padding: .5rem 2rem; position: relative; color: #ffffff; font-weight: bold; }
.btn-link { background-color: #62A527; }
.btn-link { border-radius: 1.5rem; }
.btn-link:hover { text-decoration: none; }
.btn-link > span { text-align: center; }
.btn-link.bi { justify-content: space-between; }
.btn-link.bi > span { order: 1; width: calc(100% - 30px); }
.btn-link.bi::before { order: 2; }
.btn-link.bi.bi-triangle-fill::before { transform: rotate(90deg); }


.style-title-s1 { display: inline-flex; flex-wrap: nowrap; padding: .8rem 3.2rem; z-index: 2; }
.style-title-s1::before,
.style-title-s1::after { width: 1rem; height: 1rem; margin-top: .1rem; }
.style-title-s1 span { margin: 0 .5rem; }
:lang(zh-hk) .style-title-s1 span,
:lang(zh-cn) .style-title-s1 span { letter-spacing: .3rem; }

:lang(zh-hk) .style-title-s1.title-01 { background-image: url(../image/common/event_bg_tc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:250px; height: 68px;}
:lang(zh-hk) .style-title-s1.title-02 { background-image: url(../image/common/news_bg_tc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:250px; height: 68px;}
:lang(zh-hk) .style-title-s1.title-03 { background-image: url(../image/common/video_bg_tc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:176px; height: 68px;}
:lang(zh-hk) .style-title-s1.title-04 { background-image: url(../image/common/photo_bg_tc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:218px; height: 68px;}
:lang(zh-hk) .style-title-s1.title-05 { background-image: url(../image/common/calendar_bg_tc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:503px; height: 68px;}
:lang(zh-hk) .style-title-s1.title-06 { background-image: url(../image/common/calendar-districts_bg_tc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:394px; height: 68px;}

:lang(zh-cn) .style-title-s1.title-01 { background-image: url(../image/common/event_bg_sc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:250px; height: 68px;}
:lang(zh-cn) .style-title-s1.title-02 { background-image: url(../image/common/news_bg_sc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:250px; height: 68px;}
:lang(zh-cn) .style-title-s1.title-03 { background-image: url(../image/common/video_bg_sc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:176px; height: 68px;}
:lang(zh-cn) .style-title-s1.title-04 { background-image: url(../image/common/photo_bg_sc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:218px; height: 68px;}
:lang(zh-cn) .style-title-s1.title-05 { background-image: url(../image/common/calendar_bg_sc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:503px; height: 68px;}
:lang(zh-cn) .style-title-s1.title-06 { background-image: url(../image/common/calendar-districts_bg_sc.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:394px; height: 68px;}

:lang(en) .style-title-s1.title-01 { background-image: url(../image/common/event_bg_en.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:176px; height: 68px;}
:lang(en) .style-title-s1.title-02 { background-image: url(../image/common/news_bg_en.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:254px; height: 68px;}
:lang(en) .style-title-s1.title-03 { background-image: url(../image/common/video_bg_en.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:160px; height: 68px;}
:lang(en) .style-title-s1.title-04 { background-image: url(../image/common/photo_bg_en.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:256px; height: 68px;}
:lang(en) .style-title-s1.title-05 { background-image: url(../image/common/calendar_bg_en.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:615px; height: 68px;}
:lang(en) .style-title-s1.title-06 { background-image: url(../image/common/calendar-districts_bg_en.png); background-size: contain; background-repeat: no-repeat; color: #FFFFFF; width:485px; height: 68px;}

:lang(en) .style-title-s1.title-01:lang(en), .style-title-s1.title-02:lang(en), .style-title-s1.title-03:lang(en), .style-title-s1.title-04:lang(en) { font-size: 1.2rem !important; }

@media (max-width: 680px) {
	:lang(en) .style-title-s1.title-05 { width:100%; height: 68px;}
}

@media (max-width: 560px) {
	:lang(zh-hk) .style-title-s1.title-05 { width:100%; height: 68px;}
	:lang(zh-cn) .style-title-s1.title-05 { width:100%; height: 68px;}
}

/*
.plugin-slick .case { margin: 10px 0; padding: 0 5px; position: relative; z-index: 1; }
.plugin-slick .case::before,
.plugin-slick .case::after { content: ""; display: block; width: 10px; height: calc(100% + 20px); position: absolute; top: -10px; z-index: 9; }
.plugin-slick .case::before,
.plugin-slick .case::after { background-color: #036EB8; }
.plugin-slick .case::before,
.plugin-slick .case::after { border-radius: 5px; }
.plugin-slick .case::before { left: 2.5px; }
.plugin-slick .case::after { right: 2.5px; }
*/
.plugin-slick .case .slick-list { border-top: 4px solid #FFFFFF; border-bottom: 4px solid #FFFFFF; }
.plugin-slick .case .slick-autoplay-toggle-button { left: 24px; bottom: 5px; }
.plugin-slick .case .slick-dots { bottom: 10px; }


figure.frame { margin: calc(10px + 1rem) 0; /*padding: 0 5px;*/ position: relative; z-index: 1; }
/*
figure.frame::before,
figure.frame::after { content: ""; display: block; width: 10px; height: calc(100% + 20px); position: absolute; top: -10px; z-index: 9; }
figure.frame::before,
figure.frame::after { background-color: #036EB8; }
figure.frame::before,
figure.frame::after { border-radius: 5px; }
figure.frame::before { left: 2.5px; }
figure.frame::after { right: 2.5px; }

figure.frame * { border-top: 4px solid #FFFFFF; border-bottom: 4px solid #FFFFFF; }
*/

figure.frame.small::before,
figure.frame.small::after { width: 5px; height: calc(100% + 10px); top: -5px; }
figure.frame * { border-top-width: 2px; border-bottom-width: 2px; }


.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: 1.5rem; }
.collapse-list button[data-toggle="collapse"][aria-expanded="false"] { background-color: #62A527; }
.collapse-list button[data-toggle="collapse"][aria-expanded="true"] { background-color: #E4007F; }
.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); }


/* --- header --- */
header { display: block; width: 100%; margin: 0; padding: 0; position: relative; z-index: 3; }
header { background-image: url(../image/common/header_menu_bg.png); background-repeat: no-repeat; background-color: #AC0082; }
_:-ms-fullscreen, :root header { margin-bottom: -1px; } /* CSS hacks IE11 */
header .inner-container { background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat; }


header.districts { background-image: none; background-repeat: no-repeat; background-color: #0089C5; }


header .logo-website { display: block; position: absolute; }
header .logo-districts-website { display: block; position: absolute; }

@media (min-width: 768px) {
    header { padding-top: 60px; }
    header .inner-container { padding-top: 50%; }
    header .inner-container { background-image: url(../image/common/header_bg-01.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
    header .logo-website { width: 38%; padding-top: 30%; left: 30%; top: 2%; }

    header.districts .inner-container { padding-top: 50%; }
    header.districts .inner-container { background-image: url(../image/common/header_districts_bg-01.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
    header.districts .logo-website { width: 34%; padding-top: 34%; left: 33%; top: 16%; }

	:lang(en) .home .style-title-s1.title-02 { background-position: center;}
	:lang(zh-hk) .home .style-title-s1.title-02 { background-position: center;}
	:lang(zh-cn) .home .style-title-s1.title-02 { background-position: center;}

	.style-title-s1.title-02 { padding: 0.8rem 2.5rem; }
}
@media (max-width: 767.98px) {
    header .inner-container { padding-top: 84%; }
    header .inner-container { background-image: url(../image/common/header_bg-01m.png); background-size: contain; background-repeat: no-repeat; }
    header .logo-website { width: 60%; padding-top: 57%; left: 20%; top: 4%; }

    header.districts .inner-container { padding-top: 84%; }
    header.districts .inner-container { background-image: url(../image/common/header_districts_bg-01m.png); background-size: contain; background-repeat: no-repeat; }
    header.districts .logo-website { width: 56%; padding-top: 57%; left: 22%; top: 16%; }
	
}


/* --- nav --- */
nav { display: block; width: 100%; margin: 0; padding: 0; z-index: 4; }

nav .nav-main .navbar-nav .nav-item .nav-link { text-align: center; font-weight: bold; }

@media (min-width: 768px) {
    nav { position: relative; }
    
    nav .nav-main { display: flex; justify-content: center; width: 100%; position: absolute; left: 0; top: calc((100vw * .48 + 60px) * -1); }
    nav .nav-main .navbar-nav { display: flex; flex-direction: row; align-items: center; /*padding: 0 2.5%; */}
    nav .nav-main .navbar-nav .nav-item { display: flex; flex-wrap: nowrap; align-items: center; }
    nav .nav-main .navbar-nav .nav-item:not(:last-child)::after { content: "\F287"; display: block; margin: 0 1rem; color: #BCD400; font-family: bootstrap-icons !important; }
    nav .nav-main .navbar-nav .nav-item:not(:last-child)::after { transform: scale(.4); }
    nav .nav-main .navbar-nav .nav-item .nav-link { color: #FFFFFF; }
    nav .nav-main .navbar-nav .nav-item .nav-link:hover { color: #B8CE00; }
    nav.districts .nav-main .navbar-nav .nav-item .nav-link:hover { color: #FABE00; }
    :lang(en) nav .nav-main .navbar-nav .nav-item .nav-link { line-height: 1rem; font-size: .9rem; }
    nav .nav-main.navbar-fixed-scroll.fixed .navbar-nav { justify-content: center; width: 100%; max-width: 1024px; padding-top: 1%; padding-bottom: 1%; }
    nav .nav-main.navbar-fixed-scroll.fixed .navbar-nav { background-image: url(../image/common/header_menu_bg.png); background-size: auto; background-color: #AC0082; background-repeat: no-repeat; }
    nav.districts .nav-main.navbar-fixed-scroll.fixed .navbar-nav { background-image: none; background-size: auto; background-color: #0089C5; background-repeat: no-repeat; }
    nav .nav-main.navbar-fixed-scroll.fixed .navbar-nav { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, .1); }
    
    nav .nav-sub { padding: 1rem 5%; position: relative; color: #FFFFFF; }
    nav .nav-sub { background-color: #330057; }
    nav.districts .nav-sub { background-color: #0089C5; }
	
    nav .nav-sub .nav-link { color: #FFFFFF; }
    
    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; }
}
@media (min-width: 1024px) {
    nav .nav-main { top: -562px; }
}
@media (max-width: 767.98px) {
    nav { height: 0; position: fixed; left: 0; top: 0; }
    
    nav .navbar-offcanvas { background-image: linear-gradient(rgba(29,32,136,0.9), rgba(171,0,129,0.9)); }
    
    nav .nav-main { padding-top: 70px; position: relative; }
    nav .nav-main .navbar-nav .nav-item:not(:last-child)::after { content: ""; display: block; width: 60%; margin: 0 auto; height: 1px; position: relative; }
    nav .nav-main .navbar-nav .nav-item:not(:last-child)::after { background-color: #ffffff; }
    nav .nav-main .navbar-nav .nav-item .nav-link { padding: 1rem 0; color: #ffffff; font-size: 1.2rem; }
    nav .nav-main .navbar-nav .nav-item .nav-link:hover { background-color: #E94709; }
    
    nav .nav-sub { justify-content: center; width: 90%; margin: auto; padding: 2rem 0; position: relative; }
    nav .nav-sub .nav-link { color: #ffffff; }
    nav .nav-sub ul.lang-bar > li { border-color: #ffffff; }
}

/* --- nav .navbar-toggler --- */
nav .navbar-toggler { left: 20px; top: 20px; }
nav .navbar-toggler { background-color: #AC0082; }
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"); }


/* --- main --- */
main { padding: 0.1rem 0; }
main { background-color: #330057; min-height: 300px;}

main.districts { background-color: #0089C5; min-height: 300px;}

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


/* --- footer --- */
footer { display: block; width: 100%; margin: auto; padding-bottom: 1rem; position: relative; z-index: 1; }
footer { background-color: #330057; background-image: url(../image/common/footer_bg-01.png); background-size: cover; background-position: bottom; background-repeat: no-repeat;}
footer.districts { background-image: url(../image/common/footer_districts_bg-01.png); background-color: #0089C5;}
footer::before { content: ""; display: block; width: 100%; margin-bottom: 1rem; position: relative; }
footer::before { background-size: 100% auto; background-position: center top; background-repeat: no-repeat; }
footer .inner-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
footer .inner-container .logo-bar { display: none; }
footer .inner-container .nav-bar a { color: #FFFFFF; }

@media (min-width: 768px) {
    footer .inner-container { width: 95%; }
    footer::before { padding-top: 11%; }
}
@media (max-width: 767.98px) {
    footer .inner-container { width: 90%; }
    footer::before { padding-top: 13%; }
	footer { background-image: url(../image/common/footer_bg-01m.png);}
	footer.districts { background-image: url(../image/common/footer_districts_bg-01m.png);}
}


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

.popup .slick-dots li button { margin-top: -400%; }
.popup .slick-slider.slick-dotted { margin-bottom:0; }
.popup .slick-slider { margin-bottom:0; }
.home .modal-footer { padding:0; }
.home .modal-body { padding:0.2rem; }

.modal.show .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin: 0 auto;
}

@media (min-width: 768px) {
	.home .modal-lg { max-width: 700px; }
}