@charset "UTF-8";

* {
margin: 0;
border: none;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: initial;
}
html[lang="zh-CN"], html[lang="zh-HK"],
html[lang="zh-CN"] body[class], html[lang="zh-HK"] body[class] {   }
:lang(zh) {  }
body[class] {
font-family: 'Quicksand';
font-size: 1rem;
font-weight: 400;
font-stretch: normal;
font-style: normal;
line-height: 1.5625;
letter-spacing: 0;
color: #000;
background-color: #fff;
}
.page-main-title {
text-align: center;
padding-top: 50px;
margin-bottom: 15px;
}
.page-main-title .submenu.h5 {
margin: 0 0 9px;
}
.page-main-title .main-title.h2 {
margin: 0;
}
.container {
max-width: 1190px;
padding: 0 20px;
margin: 0 auto;
}
.main-content {
margin-top: 100px;
}
.row {
margin-right: -20px;
margin-left: -20px;
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
padding-right: 20px;
padding-left: 20px;
}
body a {
font-weight: 500;
color: #145f37;
transition: 0.3s all;
text-decoration: none;
}
a:active,
a:hover {
color: #5EB581;
text-decoration: none;
}
a.link-u,
.link-u {
color: #808080;
text-decoration: underline;
}
a.link-u:hover,
.link-u:hover,
a.link-u:active,
.link-u:active {
color: #000; }
a.link-f,
.link-f {
color: #808080;
}
a.link-f:hover,
.link-f:hover,
a.link-f:active,
.link-f:active {
color: #000;
}
h1,
.h1 {
font-family: 'Lora';
font-size: 4.06rem;
font-weight: 500;
font-stretch: normal;
line-height: 1;
letter-spacing: 0;
color: #145F37;
}
h2,
.h2 {
font-family: 'Lora';
font-size: 2.8rem;
font-weight: 500;
font-stretch: normal;
line-height: 1.17;
letter-spacing: 0;
color: #145F37;
}
h3,
.h3 {
font-family: 'Lora';
font-size: 2.375rem;
font-weight: 500;
font-stretch: normal;
line-height: 1.39;
letter-spacing: 0;
color: #145F37;
}
h4,
.h4 {
font-family: 'Lora';
font-size: 1.625rem;
font-weight: 500;
font-stretch: normal;
line-height: 1.3;
letter-spacing: 0;
color: #145F37;
}
h5,
.h5 {
font-weight: bold;
font-size: 1.125rem;
font-stretch: normal;
line-height: 1.22;
letter-spacing: 0;
color: #000;
}
h6,
.h6 {
font-family: 'Lora';
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
letter-spacing: 0;
color: #145F37;
text-transform: none;
}
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] h4,
html[lang="zh-CN"] h5,
html[lang="zh-CN"] h6,
html[lang="zh-HK"] h1,
html[lang="zh-HK"] h2,
html[lang="zh-HK"] h3,
html[lang="zh-HK"] h4,
html[lang="zh-HK"] h5,
html[lang="zh-HK"] h6 { }
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3,
:lang(zh) h4,
:lang(zh) h5,
:lang(zh) h6 { }
@-moz-document url-prefix() {
h1,h2,h3,h4,h5,h6 {
font-family: 'Lora' !important;
}
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin: 30px 0 20px;
}
ul {
padding-left: 17px;
margin-bottom: 0;
}
ul li {
font-size: 1rem;
line-height: 1.93;
}
ul li a {
font-size: 1rem;
color: #808080;
font-weight: 500;
line-height: 1.5625;
}
.list-link li::marker {
color: #808080;
}
.btn,
input.btn {
font-size: 0.9375rem;
font-weight: 700;
padding: 5px 43.5px;
text-transform: capitalize;
line-height: 1.33;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid transparent;
outline: none; transition: 0.3s all;
letter-spacing: 0.02px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
text-decoration: unset;
}
.btn.btn-primary {
border: 1px solid #5F143C;
color: #5F143C;
background: #fff;
border-color: #5F143C;
text-decoration: none;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
background: #5F143C;
color: #fff;
outline: none;
}
.btn.btn-secondary,
input.btn.btn-secondary,.button {
border: 1px solid #5F143C;
background: #5F143C;
color: #fff;
border-color: #5F143C;
text-decoration: unset;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,.button:hover{
background: #fff;
color: #5F143C;
outline: none;
text-decoration: unset;
}
.btn.btn-primary2 {
border: 1px solid #3E3E3E;
background: #fff;
color: #3E3E3E;
text-decoration: none;
box-shadow: none;
}
.btn.btn-primary2:hover,
.btn.btn-primary2:focus,
.btn.btn-primary2:active {
border: 1px solid #3E3E3E;
background: #3E3E3E;
color: #fff;
}
.btn.btn-secondary2 {
border: 1px solid #3E3E3E;
background: #3E3E3E;
color: #fff;
text-decoration: none;
box-shadow: none;
}
.btn.btn-secondary2:hover,
.btn.btn-secondary2:focus,
.btn.btn-secondary2:active {
border: 1px solid #3E3E3E;
background: #fff;
color: #3E3E3E;
}
.tag-category {
font-size: 1rem;
font-family: 'Quicksand';
padding: 1px 20px;
line-height: 1.31;
display: inline-block;
width: auto;
font-weight: bold;
}
.tag-category.tc-green,
.tc-green .tag-category {
border: 1px solid #145F37;
color: #145F37;
transition: 0.3s all;
}
.tag-category.tc-green:hover,
.tc-green .tag-category:hover {
background-color: #145f37;
color: #fff;
}
.tag-category.tc-violet,
.tc-violet .tag-category {
border: 1px solid #5F143C;
color: #5F143C;
transition: 0.3s all;
}
.tag-category.tc-violet:hover,
.tc-violet .tag-category:hover {
background-color: #5F143C;
color: #FFF;
}
.tag-category.tc-blue,
.tc-blue .tag-category {
border: 1px solid #0F62AD;
color: #0F62AD;
transition: 0.3s all;
}
.tag-category.tc-blue:hover,
.tc-blue .tag-category:hover {
background-color: #0F62AD;
color: #FFF;
}
.tag-category.tc-orange,
.tc-orange .tag-category {
border: 1px solid #B65224;
color: #B65224;
transition: 0.3s all;
}
.tag-category.tc-orange:hover,
.tc-orange .tag-category:hover {
background-color: #B65224;
color: #FFF;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
background: #5F143C;
color: #fff;
outline: none;
border-color: #5F143C;
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0px 2px 4px 0 rgba(99, 99, 99, 0.5);
}
.btn-primary.focus,
.btn-primary:focus {
box-shadow: 0px 2px 4px 0 rgba(99, 99, 99, 0.5);
}
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
background: #fff;
color: #5F143C;
outline: none;
border-color: #5F143C;
}
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show>.btn-secondary.dropdown-toggle:focus,
input[type="button"]:focus,
input[type="submit"]:focus{
box-shadow: 0px 2px 4px 0 rgba(99, 99, 99, 0.5);
}
.btn-secondary.focus,
.btn-secondary:focus {
box-shadow: 0px 2px 4px 0 rgba(99, 99, 99, 0.5);
}
.pagination.mobile {
display: none;
}
.pagination ul {
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
}
.pagination ul li:not(:last-child) {
margin-right: 5px;
}
.pagination li.action.prev {
margin-right: 20px;
}
.pagination li.action.next {
margin-left: 15px;
}
.pagination ul li a {
text-decoration: none;
padding: 4px 7px;
border: 1px solid transparent;
transition: 0.5s all;
color: #000;
font-weight: bold;
}
.pagination ul li.active a {
border: 1px solid #5F143C;
background: #5F143C;
border-radius: 4px;
color: #fff;
}
.pagination ul li:hover a {
border: 1px solid #5F143C;
background: #5F143C;
border-radius: 3px;
color: #fff;
text-decoration: none;
}
.pagination ul li:first-child:hover a,
.pagination ul li:last-child:hover a {
background: transparent;
border: 1px solid transparent;
}
.pagination ul li:hover a i {
border: 1px solid #5F143C;
background: #5F143C;
}
.pagination ul li {
margin-top: 0;
margin-left: 0;
}
.pagination ul li.action a {
width: 30px;
height: 30px;
background: #545454;
border-radius: 50%;
padding: 0;
display: block;
position: relative;
}
.pagination ul li.action:hover a {
border: 1px solid #545454;
}
.pagination .action a::before {
content: '';
background-repeat: no-repeat;
position: absolute;
background-repeat: no-repeat;
background-image: url(//www.eoc.org.hk/compass/wp-content/themes/compass/assets/images/pagination-left.svg);
left: 9px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 14px;
}
.pagination .action.next a::before {
transform: translateY(-50%) rotateY(180deg);
left: 11px;
}
.pagination ul li.action:hover a::before {
background-image: url(//www.eoc.org.hk/compass/wp-content/themes/compass/assets/images/pagination-left-hover.svg);
}
form legend {
font-size: 1.625rem;
font-family: 'Lora';
font-weight: 500;
line-height: 1.31;
color: #145F37;
}
form label {
font-weight: bold;
line-height: 1.5625;
font-size: 1rem;
color: #000;
display: block;
margin-bottom: 15px;
}
input[type="text"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="datetime"],
input[type="email"],
input.input-text,
textarea,
select {
padding: 5px 15px;
height: 45px;
outline: none;
border: 1px solid #c2c2c2;
box-shadow: none;
border-radius: 7px;
background: #fff;
filter: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 1rem;
font-weight: 600;
color: #808080;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
border-color: #5F143C;
}
select {
background: linear-gradient(180deg, #FEFEFE, #EDEDED);
background-size: 45px;
background-repeat: no-repeat;
background-position: right;
background-image: url(//www.eoc.org.hk/compass/wp-content/themes/compass/assets/images/minus.svg);
}
select.wpcf7-select {
display: none;
}
input:-webkit-autofill {
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
.custom-select {
position: relative;
background-color: #FFF;
border-radius: 7px;
}
.custom-select select {
padding-right: 50px;
z-index: 1;
position: relative;
background: transparent;
}
.custom-select .expand {
background: linear-gradient(180deg, #FEFEFE, #EDEDED);
position: absolute;
width: 45px;
height: 43px;
right: 1px;
border-left: 1px solid #e5e5e5;
border-radius: 0 7px 7px 0;
top: 1px;
}
.custom-select .expand::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(//www.eoc.org.hk/compass/wp-content/themes/compass/assets/images/select-down.svg);
background-repeat: no-repeat;
width: 14px;
height: 9px;
} form .text-muted {
font-family: 'Quicksand';
color: #808080 !important;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
}
.form-control:focus,
.form-control:active,
.form-control:not(:placeholder-shown) {
box-shadow: none;
outline: none;
border-color: #c2c2c2;
}
.form-control::placeholder {
font-size: 1rem;
font-weight: 600;
color: #808080;
}
form .form-check {
padding-left: 0;
}
textarea {
min-height: 90px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {  }
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #000;
font-size: 1rem;
font-weight: 500;
line-height: 1.5625;
}
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 15px;
height: 15px;
border: 1px solid #3e3e3e;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked+label:before {
border: 1px solid #3e3e3e;
}
[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
content: '';
width: 9px;
height: 9px;
background: #93587a;
position: absolute;
top: 8px;
left: 3px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.wpcf7-not-valid-tip {
color: #ff0000;
font-family: "Quicksand";
font-size: 0.875rem;
font-weight: 500;
line-height: 1.785;
}
label,
.label {
font-weight: bold;
font-size: 1rem;
line-height: 1.5625;
}
.custom-checkbox input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.custom-checkbox label:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #979797;
padding: 6.5px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 13px;
}
.custom-checkbox input:checked+label:after {
content: '';
display: block;
position: absolute;
top: 7px;
left: 5px;
width: 5px;
height: 10px;
border: solid #5F143C;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
p {
line-height: inherit;
}
@media (min-width:1680px) {
.container {
max-width: 1720px;
}
}
@media (min-width:1680px) {
.qa-content .container {
max-width: 1375px;
}
}
@media (max-width:999px) {
.main-content {
margin-top: 71px;
}
.page-main-title {
padding-top: 17px;
}
}
@media (max-width: 767px) {
body[class] {
line-height: 1.5625;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 20px;
}
.container {
max-width: 100%;
padding: 0 20px;
}
h1,
.h1 {
font-size: 1.875rem;
line-height: 1.33;
}
h2,
.h2 {
font-size: 1.875rem;
line-height: 1.33;
}
h3,
.h3 {
font-size: 1.625rem;
line-height: 1.3;
}
h4,
.h4 {
font-size: 1.4375rem;
line-height: 1.3;
}
h5,
.h5 {
line-height: 1.33;
}
h6,
.h6 {
line-height: 1.33;
}
.tc-green .filter-list {
border: 1px solid #145F37;
background: #145F37;
color: #fff;
border-color: #145F37;
} .vertical-table th,
.vertical-table td {
padding-left: 20px;
}
.pagination.mobile {
display: block;
}
.pagination.desktop {
display: none;
}
.pagination .guide-hide {
display: none;
}
}
@media (max-width:350px) {
.pagination li.action.next {
margin-left: 0px;
}
.pagination li.action.prev {
margin-right: 5px;
}
}