/* layout.css 16:28 2019-03-15 default bullet point from 25px to 40px 10:03 2019-03-19 seasonal update - change Father and Mother to align EN TC SC, update cache date 14:42 2019-03-21 change for whatsapp and line desktop 17:01 2019-04-26 change bullet point with hyperlink 16:03 2019-07-16 adjust plus sign in cluster page 15:36 2019-09-13 for picnic cache 2019.10.15 remove externalLink icon again. 15:48 2020-01-20 change from fixed menu 11:24 2020-07-16 align writesup card with (from) cluster page card 17:20 2021-01-27 fix for gov dir bd tab 11:58 2021-01-29 adjust gov dir spacing 12:24 2021-01-29 try fix menu drop to right 16:23 2021-03-04 add a-span bold for multilang-menu 15:25 2021-03-24 For "table th", add "table thead th" (as Rich-Text setting) (Feature Article First) 16:42 2021-04-15 web acc fix */ @charset "UTF-8"; /*animation*/ @font-face { font-family: 'iconfont'; src: url("fonts/iconFonts/icon.eot?qyfze1"); src: url("fonts/iconFonts/icon.eot?qyfze1#iefix") format("embedded-opentype"), url("fonts/iconFonts/icon.ttf?qyfze1") format("truetype"), url("fonts/iconFonts/icon.woff?qyfze1") format("woff"), url("fonts/iconFonts/icon.svg?qyfze1#iconfont") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'iconfont' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-icon_extlink:before { content: "\65"; } body:after { display: none; content: url(../images/common_icons/black/icon_circleup_black.svg) url(../images/common_icons/orange/icon_arrow2_down_orange.svg) url(../images/common_icons/orange/icon_arrow2_left_orange.svg) url(../images/common_icons/orange/icon_arrow2_right_orange.svg) url(../images/common_icons/orange/icon_arrow2_up_orange.svg) url(../images/common_icons/orange/icon_arrow_down_orange.svg) url(../images/common_icons/orange/icon_arrow_left_orange.svg) url(../images/common_icons/orange/icon_arrow_right_orange.svg) url(../images/common_icons/orange/icon_arrow_up_orange.svg) url(../images/common_icons/orange/icon_btnplay_orange.svg) url(../images/common_icons/orange/icon_calendar_orange.svg) url(../images/common_icons/orange/icon_circledown_orange.svg) url(../images/common_icons/orange/icon_circleleft_orange.svg) url(../images/common_icons/orange/icon_circleright_orange.svg) url(../images/common_icons/orange/icon_circleup_orange.svg) url(../images/common_icons/orange/icon_email.svg) url(../images/common_icons/orange/icon_extlink_orange.svg) url(../images/common_icons/orange/icon_filter_orange.svg) url(../images/common_icons/orange/icon_icon_orange.svg) url(../images/common_icons/orange/icon_info_orange.svg) url(../images/common_icons/orange/icon_lang_orange.svg) url(../images/common_icons/orange/icon_login_orange.svg) url(../images/common_icons/orange/icon_right_orange.svg) url(../images/common_icons/orange/icon_search_orange.svg) url(../images/common_icons/orange/icon_service_BFI_orange.svg) url(../images/common_icons/orange/icon_service_communication_orange.svg) url(../images/common_icons/orange/icon_service_CSR_orange.svg) url(../images/common_icons/orange/icon_service_culture_orange.svg) url(../images/common_icons/orange/icon_service_DBIHK_orange.svg) url(../images/common_icons/orange/icon_service_DBWG_orange.svg) url(../images/common_icons/orange/icon_service_DBWM_orange.svg) url(../images/common_icons/orange/icon_service_education_orange.svg) url(../images/common_icons/orange/icon_service_EIS_orange.svg) url(../images/common_icons/orange/icon_service_employment_orange.svg) url(../images/common_icons/orange/icon_service_environment_orange.svg) url(../images/common_icons/orange/icon_service_govweb_orange.svg) url(../images/common_icons/orange/icon_service_GTIE_orange.svg) url(../images/common_icons/orange/icon_service_health_orange.svg) url(../images/common_icons/orange/icon_service_housing_orange.svg) url(../images/common_icons/orange/icon_service_HR_orange.svg) url(../images/common_icons/orange/icon_service_immigration_orange.svg) url(../images/common_icons/orange/icon_service_IM_orange.svg) url(../images/common_icons/orange/icon_service_IS_orange.svg) url(../images/common_icons/orange/icon_service_law_orange.svg) url(../images/common_icons/orange/icon_service_LIHK_orange.svg) url(../images/common_icons/orange/icon_service_MIS_orange.svg) url(../images/common_icons/orange/icon_service_RL_orange.svg) url(../images/common_icons/orange/icon_service_SFLF_orange.svg) url(../images/common_icons/orange/icon_service_SIHK_orange.svg) url(../images/common_icons/orange/icon_service_Taxes_orange.svg) url(../images/common_icons/orange/icon_service_tax_orange.svg) url(../images/common_icons/orange/icon_service_transport_orange.svg) url(../images/common_icons/orange/icon_service_VHK_orange.svg) url(../images/common_icons/orange/icon_service_WHK_orange.svg) url(../images/common_icons/white/icon_arrow2_down_white.svg) url(../images/common_icons/white/icon_arrow2_left_white.svg) url(../images/common_icons/white/icon_arrow2_right_white.svg) url(../images/common_icons/white/icon_arrow2_up_white.svg) url(../images/common_icons/white/icon_arrow_down_white.svg) url(../images/common_icons/white/icon_arrow_left_white.svg) url(../images/common_icons/white/icon_arrow_right_white.svg) url(../images/common_icons/white/icon_arrow_up_white.svg) url(../images/common_icons/white/icon_btnplay_white.svg) url(../images/common_icons/white/icon_calendar_white.svg) url(../images/common_icons/white/icon_circledown_white.svg) url(../images/common_icons/white/icon_circleleft_white.svg) url(../images/common_icons/white/icon_circleright_white.svg) url(../images/common_icons/white/icon_circleup_white.svg) url(../images/common_icons/white/icon_email.svg) url(../images/common_icons/white/icon_extlink_white.svg) url(../images/common_icons/white/icon_filter_white.svg) url(../images/common_icons/white/icon_icon_white.svg) url(../images/common_icons/white/icon_login_white.svg) url(../images/common_icons/white/icon_right_white.svg) url(../images/common_icons/white/icon_search_white.svg) url(../images/common_icons/white/icon_service_BFI_white.svg) url(../images/common_icons/white/icon_service_communication_white.svg) url(../images/common_icons/white/icon_service_CSR_white.svg) url(../images/common_icons/white/icon_service_culture_white.svg) url(../images/common_icons/white/icon_service_DBIHK_white.svg) url(../images/common_icons/white/icon_service_DBWG_white.svg) url(../images/common_icons/white/icon_service_DBWM_white.svg) url(../images/common_icons/white/icon_service_education_white.svg) url(../images/common_icons/white/icon_service_EIS_white.svg) url(../images/common_icons/white/icon_service_employment_white.svg) url(../images/common_icons/white/icon_service_environment_white.svg) url(../images/common_icons/white/icon_service_govweb_white.svg) url(../images/common_icons/white/icon_service_GTIE_white.svg) url(../images/common_icons/white/icon_service_health_white.svg) url(../images/common_icons/white/icon_service_housing_white.svg) url(../images/common_icons/white/icon_service_HR_white.svg) url(../images/common_icons/white/icon_service_immigration_white.svg) url(../images/common_icons/white/icon_service_IM_white.svg) url(../images/common_icons/white/icon_service_IS_white.svg) url(../images/common_icons/white/icon_service_law_white.svg) url(../images/common_icons/white/icon_service_LIHK_white.svg) url(../images/common_icons/white/icon_service_MIS_white.svg) url(../images/common_icons/white/icon_service_RL_white.svg) url(../images/common_icons/white/icon_service_SFLF_white.svg) url(../images/common_icons/white/icon_service_SIHK_white.svg) url(../images/common_icons/white/icon_service_Taxes_white.svg) url(../images/common_icons/white/icon_service_tax_white.svg) url(../images/common_icons/white/icon_service_transport_white.svg) url(../images/common_icons/white/icon_service_VHK_white.svg) url(../images/common_icons/white/icon_service_WHK_white.svg) url(../images/common_icons/white/icon_service_immigration_white.svg) url(../images/common_icons/white/icon_service_VHK_white.svg); } /**************variable for header****************/ /* 20221130 edited */ /**************style****************/ header { position: relative; overflow: visible; padding-bottom: 60px; } header .contentWrapper { position: relative; overflow: visible; } header #innerLogo { display: none; } header nav { float: right; margin-top: 20px; } header nav > .menuTab > .menuItem.now a { color: #cc4c02; } header nav.active .navMobile .navBtn.active { border: 1px solid #e1e1e1; border-width: 0 1px; } header nav.active .navMobile .navBtn.active#navSearch { background-color: #f8f8f8; } header nav.active .navMobile .navBtn.active#navLang { background-color: #f8f8f8; } header nav.active .navMobile .navBtn.active#navToggle { background-color: #f8f8f8; } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner span { background: transparent; } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner:before { -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner:after { -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } header nav .navMobile { display: none; } header nav .navMobile .navBtn { display: block; float: left; position: relative; width: 77px; height: 77px; } header nav .navMobile #navDoYouKnow { background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_info_black.svg) no-repeat scroll center center; background-size: 35% 35%; opacity: 0.7; } header nav .navMobile #navSearch { /* background: transparent url(../images/common_icons/orange/icon_search_orange.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_search_orange.svg) no-repeat center center; background-size: 40% 40%; } header nav .navMobile #navLang { background: transparent url(../images/common_icons/orange/icon_lang_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_lang_orange.svg) no-repeat center center; background-size: 40% 40%; } header nav .navMobile #navToggle .navToggleInner { position: absolute; display: block; width: 40%; height: 40%; top: 30%; left: 30%; padding: 4% 0; } header nav .navMobile #navToggle .navToggleInner span, header nav .navMobile #navToggle .navToggleInner:before, header nav .navMobile #navToggle .navToggleInner:after { content: ''; display: block; height: 4px; width: 100%; background: #cc4c02; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } header nav .navMobile #navToggle .navToggleInner:before { top: 0; } header nav .navMobile #navToggle .navToggleInner:after { bottom: 0; } header nav .navMobile #navToggle .navToggleInner span { margin: 4px auto; } header nav > .menuTab .menuItem { display: inline-block; float: none; } header nav > .menuTab .menuItem .QnaMenuItem { padding-right: 10px; padding-left: 10px; } header nav > .menuTab .menuItem a { color: #353535; margin-left: 25px; } header nav > .menuTab .menuItem a.menuItemColor { color: #990000; } /* 10:04 2018-02-06 highlight (now) got arrow */ header nav > .menuTab .menuItem.now a, header nav > .menuTab .menuItem:hover a, header nav > .menuTab .menuItem.active a { color: #cc4c02; position: relative; } header nav > .menuTab .menuItem.now a:after, header nav > .menuTab .menuItem:hover a:after, header nav > .menuTab .menuItem.active a:after { /* org small triangle 17:15 2018-02-05 */ content: ''; border-top: 5px solid #cc4c02; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; right: calc(50% - 6px); bottom: -14px; /* remark big triangle 16:56 2018-02-27 content: ''; border-top: 10px solid #cc4c02; border-bottom: 10px solid #0000; border-left: 20px solid #0000; border-right: 20px solid #0000; position: absolute; right: calc(50% - 20px); bottom: -21px; */ } header nav > .menuTab .menuItem.thematicItem { display: none; } @media screen and (min-width: 1201px) { header nav > .menuTab .menuItem.thematicItem { display: none !important; } } header nav > .menuTab .menuItem.thematicItem.now { display: block; } header nav > .menuTab .menuItem.menuSearchBtn { display: none; } header nav > .menuTab .menuItem.menuSearchBtn:hover a:after, header nav > .menuTab .menuItem.menuSearchBtn.active a:after { right: calc(50% - 6px); } header nav > .menuTab .menuItem.menuSearchBtn a { display: block; width: 22px; height: 22px; background: #FFF url("../images/common_icons/orange/icon_search_orange.svg") no-repeat scroll center center; background-size: 100% 100%; margin-left: 25px; margin-bottom: -5px; } header nav > .innerMenu { display: none; } header nav #searchTab, header nav #languagesTab { display: none; } header nav .subMenu { display: none; } header nav .subMenu .subMenuCol { display: block; float: left; width: 50%; overflow: hidden; border-top: 1px solid #e1e1e1; } @media screen and (max-width: 1200px) { header nav .subMenu .subMenuCol { border-right: 1px solid #e1e1e1; } } header nav .subMenu .subMenuCol .infoItem { border-right: 1px solid #e1e1e1; } header nav .subMenu .subMenuCol:last-child .infoItem { border-right: 1px solid #e1e1e1; } header nav .subMenu .infoItem a { display: block; width: 100%; border-bottom: 1px solid #e1e1e1; padding: 20px 6%; } header nav .subMenu .infoItem a:before { content: ''; width: 24px; height: 24px; background-size: 100% 100% !important; display: inline-block; margin-right: 15px; vertical-align: middle; } /* header nav .subMenu .infoItem a.infoCT:before { background: transparent url(../images/common_icons/orange/icon_service_communication_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_communication_orange.svg) no-repeat center center; width: 24px; height: 18px; } header nav .subMenu .infoItem a.infoEmployment:before { background: transparent url(../images/common_icons/orange/icon_service_employment_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_employment_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoHMS:before { background: transparent url(../images/common_icons/orange/icon_service_health_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_health_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoTD:before { background: transparent url(../images/common_icons/orange/icon_service_tax_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_tax_orange.svg) no-repeat center center; width: 24px; height: 26px; } header nav .subMenu .infoItem a.infoCLS:before { background: transparent url(../images/common_icons/orange/icon_service_culture_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_culture_orange.svg) no-repeat center center; width: 24px; height: 24px; margin-left: -1px; } header nav .subMenu .infoItem a.infoEnvironment:before { background: transparent url(../images/common_icons/orange/icon_service_environment_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_environment_orange.svg) no-repeat center center; width: 18px; height: 25px; margin-left: 5px; } header nav .subMenu .infoItem a.infoHSS:before { background: transparent url(../images/common_icons/orange/icon_service_housing_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_housing_orange.svg) no-repeat center center; width: 24px; height: 22px; } header nav .subMenu .infoItem a.infoTM:before { background: transparent url(../images/common_icons/orange/icon_service_transport_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_transport_orange.svg) no-repeat center center; width: 24px; height: 17px; } header nav .subMenu .infoItem a.infoET:before { background: transparent url(../images/common_icons/orange/icon_service_education_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_education_orange.svg) no-repeat center center; width: 24px; height: 17px; } header nav .subMenu .infoItem a.infoGLO:before { background: transparent url(../images/common_icons/orange/icon_service_law_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_law_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoIS:before { background: transparent url(../images/common_icons/orange/icon_service_immigration_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_immigration_orange.svg) no-repeat center center; width: 24px; height: 24px; } header nav .subMenu .infoItem a.infoGW:before { background: transparent url(../images/common_icons/orange/icon_service_govweb_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_govweb_orange.svg) no-repeat center center; width: 20px; height: 20px; margin-left: 2px; } header nav .subMenu .infoItem a.infoBFI:before { background: transparent url(../images/common_icons/orange/icon_service_BFI_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_BFI_orange.svg) no-repeat center center; width: 24px; height: 18px; } header nav .subMenu .infoItem a.infoCSR:before { background: transparent url(../images/common_icons/orange/icon_service_CSR_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_CSR_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoDBWM:before { background: transparent url(../images/common_icons/orange/icon_service_DBWM_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBWM_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoDBWG:before { background: transparent url(../images/common_icons/orange/icon_service_DBWG_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBWG_orange.svg) no-repeat center center; width: 24px; height: 26px; } header nav .subMenu .infoItem a.infoEIS:before { background: transparent url(../images/common_icons/orange/icon_service_EIS_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_EIS_orange.svg) no-repeat center center; width: 24px; height: 26px; } header nav .subMenu .infoItem a.infoGTIE:before { background: transparent url(../images/common_icons/orange/icon_service_GTIE_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_GTIE_orange.svg) no-repeat center center; width: 25px; height: 28px; margin-left: -2px; } header nav .subMenu .infoItem a.infoHR:before { background: transparent url(../images/common_icons/orange/icon_service_HR_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_HR_orange.svg) no-repeat center center; width: 24px; height: 22px; } header nav .subMenu .infoItem a.infoMIS:before { background: transparent url(../images/common_icons/orange/icon_service_MIS_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_MIS_orange.svg) no-repeat center center; width: 20px; height: 20px; margin-left: 2px; } header nav .subMenu .infoItem a.infoRL:before { background: transparent url(../images/common_icons/orange/icon_service_RL_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_RL_orange.svg) no-repeat center center; width: 24px; height: 17px; } header nav .subMenu .infoItem a.infoSFLF:before { background: transparent url(../images/common_icons/orange/icon_service_SFLF_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_SFLF_orange.svg) no-repeat center center; width: 26px; height: 20px; margin-left: -3px; } header nav .subMenu .infoItem a.infoTaxes:before { background: transparent url(../images/common_icons/orange/icon_service_Taxes_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_Taxes_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoGW.active:before { background: transparent url(../images/common_icons/white/icon_service_govweb_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_govweb_white.svg) no-repeat center center; width: 24px; height: 24px; } header nav .subMenu .infoItem a.infoVHK:before { background: transparent url(../images/common_icons/orange/icon_service_VHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_VHK_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoWHK:before { background: transparent url(../images/common_icons/orange/icon_service_WHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_WHK_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoSIHK:before { background: transparent url(../images/common_icons/orange/icon_service_SIHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_SIHK_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoIS:before { background: transparent url(../images/common_icons/orange/icon_service_immigration_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_immigration_orange.svg) no-repeat center center; width: 24px; height: 24px; } header nav .subMenu .infoItem a.infoLIHK:before { background: transparent url(../images/common_icons/orange/icon_service_LIHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_LIHK_orange.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .infoItem a.infoDBIHK:before { background: transparent url(../images/common_icons/orange/icon_service_DBIHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBIHK_orange.svg) no-repeat center center; width: 24px; height: 20px; } */ header nav .subMenu.thematicSubmenu .infoItem > a:before { display: none; } header nav .subMenu .iconWrapper { clear: both; overflow: hidden; text-align: right; padding: 0 20px; } header nav .subMenu .iconItem { display: inline-block; vertical-align: middle; margin-left: 55px; } header nav .subMenu .searchWrapper { display: block; width: 60%; margin: 0 auto; padding: 30px 0 10px; overflow: hidden; position: relative; } header nav .subMenu .searchWrapper .subSearchBar { -webkit-appearance: none; border-radius: 0; background: #FFF; border: 0; border-bottom: 1px solid #cc4c02; display: block; float: left; height: 48px; width: calc(100% - 48px); margin: 0; padding: 0 17px; } header nav .subMenu .searchWrapper .subSearchBtn { box-sizing: border-box; float: left; min-width: 0; display: block; margin: 0; border: 0; width: 48px; height: 48px; border-bottom: 1px solid #cc4c02; padding: 6px; -webkit-appearance: none; -moz-appearance: none; /* background: #FFF url(../images/common_icons/orange/icon_search_orange.png) no-repeat center center; */ background: white url(../images/common_icons/orange/icon_search_orange.svg) no-repeat center center; background-size: 45%; margin: 0; float: left; display: block; text-indent: -9999px; } header nav .toolBtns { display: none; } header nav .toolBtns a { padding: 15px 3%; display: inline-block; vertical-align: middle; } header nav .toolBtns a:before { content: ''; width: 16px; height: 16px; background-size: 100% 100% !important; display: inline-block; margin-right: 10px; vertical-align: middle; } header nav .toolBtns a.btnLogin:before { background: transparent url(../images/common_icons/black/icon_login_black.svg) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_login_black.svg) no-repeat center center; } header nav .toolBtns a.btnInfo:before { /* background: transparent url(../images/common_icons/black/icon_info_black.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_info_black.svg) no-repeat center center; } header nav .toolBtns a:hover, header nav .toolBtns a :active { color: #cc4c02; } header nav .toolBtns a:hover.btnLogin:before, header nav .toolBtns a :active.btnLogin:before { background: transparent url(../images/common_icons/orange/icon_login_orange.svg) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_login_orange.svg) no-repeat center center; } header nav .toolBtns a:hover.btnInfo:before, header nav .toolBtns a :active.btnInfo:before { /* background: transparent url(../images/common_icons/orange/icon_info_orange.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_info_orange.svg) no-repeat center center; } @media screen and (min-width: 1201px) { header nav { position: absolute; width: 100%; height: 100%; top: 46px; } header nav > .menuTab { position: absolute; width: 100%; height: 100%; text-align: right; z-index: 10; } header nav > .menuTab > .menuItem { text-align: left; float: none; display: inline-block; z-index: 1001; position: relative; } header nav > .menuTab > .menuItem.now a { color: #cc4c02; } header nav > .menuTab .subMenu.active { text-align: left; display: block; position: absolute; width: 100%; background: #FFF; overflow: visible; z-index: 1000; top: calc(100% + 34px); padding: 30px 0 40px; box-shadow: 0px 10px 5px -7px rgba(0, 0, 0, 0.1); } header nav > .menuTab .subMenu.active:before { left: -50%; z-index: -1; } header nav > .menuTab .subMenu.active .subMenuCol { display: block; float: left; width: 100%; overflow: hidden; border-top: 0; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem { border: 0; display: block; width: calc(100%/3); float: left; height: 60px; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem a { border: 0; height: 60px; padding: 0px 20px; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.active { /*background: $colorRS;*/ color: #cc4c02; text-decoration: underline; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.active span { /* color: #FFF; white */ color: #000; /* 15:48 2020-01-20 change to black */ } header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.linkBlock span { font-weight: normal; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.linkBlock:hover, header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.linkBlock:focus { background: #fff; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.linkBlock:hover span, header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.linkBlock:focus span { color: #cc4c02; font-weight: normal; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem a.linkBlock.hl span { font-weight: bold; } header nav > .menuTab .subMenu.active .subMenuCol .infoItem span { vertical-align: middle; max-width: 85%; } } header.subMenuOn nav { z-index: 1500; } header.subMenuOn nav #innerLogo { display: block; position: absolute; left: 0; top: 3px; width: 240px; height: 21px; background: transparent url(../images/logo_main.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/logo_main.svg) no-repeat center center; background-size: 100%; z-index: 100; } .homePage header { padding-bottom: 0; } .pageResidents #residentsChildDir a { color: #cc4c02; } .pageBusiness #businessTradeChildDir a { color: #cc4c02; } .pageNonResidents #nonResidentsChildDir a { color: #cc4c02; } #doYouKnow { display: none; visibility: hidden; background: #e9e9e9; padding-top: 35px; padding-bottom: 47px; } @media screen and (max-width: 767px) { #doYouKnow { padding-bottom: 35px; } } #doYouKnow.notReady { max-height: 0; overflow: hidden; padding: 0; } #doYouKnow h4 { margin: 0 auto 10px; } #doYouKnow h3 { margin: 10px auto 0; font-size: 1.8em; } @media screen and (max-width: 767px) { #doYouKnow h3 { margin: 0; } } #doYouKnow p { margin-top: 10px; margin-bottom: 5px; } @media screen and (max-width: 767px) { #doYouKnow p { margin-top: 10px; } } #doYouKnow .videoBtn { margin-top: 20px; z-index: 30; } #doYouKnow .videoThumb:before { width: 50px; height: 52px; } #doYouKnow .closeBtn { z-index: 30; right: 6px; } #doYouKnow .blockRow { background: #e9e9e9; padding: 0 6%; z-index: 10; } #doYouKnow .blockRow article, #doYouKnow .blockRow section { padding: 0 30px; } #doYouKnow .blockRow img { display: block; width: 100%; margin: 0 auto; border: 5px solid #FFF; } #doYouKnow .blockRow.current { z-index: 20; } #doYouKnow .controls .thu > a.on:before, #doYouKnow .controls .thu > a:hover:before { background: #000; } #doYouKnow .owl-controls { position: absolute; top: 100%; left: 50%; width: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 12px; } @media screen and (max-width: 767px) { #doYouKnow .owl-controls { padding-top: 5px; padding-bottom: 30px; } } #doYouKnow .owl-controls .owl-nav { position: relative; width: 100%; } #doYouKnow .owl-controls .owl-prev, #doYouKnow .owl-controls .owl-next { position: absolute; height: 100%; width: 40px; z-index: 20; } #doYouKnow .owl-controls .owl-prev:before, #doYouKnow .owl-controls .owl-next:before { position: absolute; top: 50%; height: 35px; width: 35px; margin-top: -40px; } @media screen and (max-width: 767px) { #doYouKnow .owl-controls .owl-prev, #doYouKnow .owl-controls .owl-next { position: relative; height: auto; width: auto; left: auto; right: auto; } #doYouKnow .owl-controls .owl-prev:before, #doYouKnow .owl-controls .owl-next:before { position: relative; top: initial; margin-top: 0; height: 10px; width: 10px; } } #doYouKnow .owl-controls .owl-prev { margin-top: -125px; left: 0; height: 100%; width: auto; -webkit-transform: translateX(-10%); -ms-transform: translateX(-10%); transform: translateX(-10%); text-align: left; } @media screen and (max-width: 1200px) { #doYouKnow .owl-controls .owl-prev { left: 5px; } } @media screen and (max-width: 767px) { #doYouKnow .owl-controls .owl-prev { margin: 0 5px 0 0; } } #doYouKnow .owl-controls .owl-prev:before { left: 0; background-image: url("../images/common_icons/grey/icon_arrow_thin_left_grey.svg"); } @media screen and (max-width: 767px) { #doYouKnow .owl-controls .owl-prev:before { background-image: url("../images/common_icons/grey/icon_arrow_left_grey.svg"); } } @media screen and (min-width: 1201px) { #doYouKnow .owl-controls .owl-prev:hover:before { background-image: url("../images/common_icons/orange/icon_arrow_thin_left_orange.svg"); } } #doYouKnow .owl-controls .owl-next { margin-top: -125px; right: 0; height: 100%; width: auto; -webkit-transform: translateX(-10%); -ms-transform: translateX(-10%); transform: translateX(-10%); text-align: right; } @media screen and (max-width: 1200px) { #doYouKnow .owl-controls .owl-next { right: 5px; } } @media screen and (max-width: 767px) { #doYouKnow .owl-controls .owl-next { margin: 0 0 0 5px; } } #doYouKnow .owl-controls .owl-next:before { right: 0; background-image: url("../images/common_icons/grey/icon_arrow_thin_right_grey.svg"); } @media screen and (max-width: 767px) { #doYouKnow .owl-controls .owl-next:before { background-image: url("../images/common_icons/grey/icon_arrow_right_grey.svg"); } } @media screen and (min-width: 1201px) { #doYouKnow .owl-controls .owl-next:hover:before { background-image: url("../images/common_icons/orange/icon_arrow_thin_right_orange.svg"); } } #doYouKnow .owl-pause { margin: 0 8px; } @media screen and (max-width: 767px) { #doYouKnow .owl-pause { margin-right: 0; } } @media screen and (max-width: 767px) { #doYouKnow { padding-top: 0; } #doYouKnow .blockRow img { width: 100%; margin: 0 auto; } #doYouKnow .controls .control { position: relative; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #doYouKnow .blockRowr { margin: 0 auto; width: 80%; } #doYouKnow .blockRowr .blockRow { padding: 10px 2px; } } @media screen and (max-width: 767px) and (max-width: 767px) { #doYouKnow .blockRowr .blockRow { padding-bottom: 0; } } @media screen and (max-width: 767px) { #doYouKnow .blockRowr .blockRow article { padding: 0; margin: 0 auto; } #doYouKnow .blockRowr .blockRow article h3 { margin: 5px auto; } #doYouKnow .blockRowr .blockRow article h4 { margin: 10px auto; } #doYouKnow .blockRowr .gridBlock { margin: 0 auto; } #doYouKnow .closeBtn { top: 10px; right: -15px; } #doYouKnow .controls.atBottom { padding: 25px 0 20px; } #doYouKnow .controls .control:before { content: ' '; height: 15px; width: 15px; display: inline-block; background: no-repeat center center; background-size: cover; } #doYouKnow .videoBtn { margin-top: 15px; min-width: 60%; } } .homePage header #toolBar #doYouKnowBtn { display: inline-block; } .homePage #doYouKnow { display: block; visibility: visible; } @media screen and (max-width: 1200px) { .homePage #doYouKnow { display: block; visibility: visible; padding-top: 0; } } .homePage #doYouKnow .mobileToggle { display: none; } @media screen and (max-width: 1200px) { .homePage #doYouKnow .mobileToggle { vertical-align: middle; height: 51px; width: 100%; text-align: right; } .homePage #doYouKnow .mobileToggle:before { content: ''; width: 0px; height: 100%; display: inline-block; vertical-align: middle; } .homePage #doYouKnow .mobileToggle:after { content: ''; /* background: transparent url(../images/common_icons/black/icon_up_black.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_up_black.svg) no-repeat center center; background-size: cover; display: inline-block; width: 18px; height: 18px; margin-left: 15px; margin-right: 5px; vertical-align: middle; } } @media screen and (max-width: 480px) { .homePage #doYouKnow .mobileToggle { height: 45px; } } @media screen and (max-width: 380px) { .homePage #doYouKnow .mobileToggle { height: 40px; } } .homePage #doYouKnow .blockRow { margin: 0 auto; font-size: 0; } @media screen and (max-width: 767px) { .homePage #doYouKnow .blockRow { top: 50%; width: 100%; } } .homePage #doYouKnow .blockRow .imgHolder, .homePage #doYouKnow .blockRow .contentHolder { position: relative; font-size: 1rem; display: inline-block; vertical-align: middle; z-index: 30; } @media screen and (max-width: 767px) { .homePage #doYouKnow .blockRow .imgHolder, .homePage #doYouKnow .blockRow .contentHolder { font-size: 0.8rem; } } .homePage #doYouKnow .blockRow .imgHolder { width: 35%; } @media screen and (max-width: 767px) { .homePage #doYouKnow .blockRow .imgHolder { width: 100%; padding: 0; } } .homePage #doYouKnow .blockRow .contentHolder { width: 65%; } @media screen and (max-width: 767px) { .homePage #doYouKnow .blockRow .contentHolder { width: 100%; padding: 10px 0; } } .homePage .doYouKnowOn header #topBar ul > li:nth-last-child(2), .homePage .doYouKnowOn header #topBar ul > li:last-child { padding-right: 0; margin-right: 0; } .homePage .doYouKnowOn .langBtnHolder:after { background-color: transparent !important; } .homePage .doYouKnowOn #topBar:after { content: ''; position: absolute; background: #e9e9e9; width: 44px; height: 60px; display: block; top: -15px; right: 0; z-index: -1; border-radius: 8px; } @media screen and (max-width: 1200px) { .homePage .doYouKnowOn #doYouKnow { padding-top: 30px; } .homePage .doYouKnowOn #doYouKnow.collapsed { padding-top: 0; padding-bottom: 0; } .homePage .doYouKnowOn #doYouKnow.collapsed .mobileToggle { display: inline-block; } .homePage .doYouKnowOn #doYouKnow.collapsed .closeBtn, .homePage .doYouKnowOn #doYouKnow.collapsed .blockRowr { display: none; visibility: hidden; } .homePage .doYouKnowOn #doYouKnow .mobileToggle { display: none; } .homePage .doYouKnowOn #doYouKnow .closeBtn, .homePage .doYouKnowOn #doYouKnow .blockRowr { display: block; visibility: visible; } } header #topBar { padding: 15px 0 12px; width: 100%; display: block; float: left; position: relative; font-size: 0; } @media screen and (max-width: 1200px) { header #topBar { display: none; } } .menuFixed header #topBar { display: none; } body.innerPage header #topBar ul > :nth-last-child(2) { padding-right: 0; margin-right: 0; } body.innerPage header #topBar ul > :nth-last-child(2):after { display: none; } body.innerPage header #topBar #todayWeather { display: none; } header #topBar li { font-size: 0; } header #topBar ul > li { padding-right: 10px; margin-right: 10px; position: relative; } header #topBar ul > li:after { background-color: #CCC; content: " "; display: block; width: 1px; height: 15px; position: absolute; right: 0; top: 3px; } header #topBar ul > li:last-child:after { display: none; } header #topBar #todayWeather { float: left; } header #topBar #todayWeather > * { display: block; float: left; padding-right: 10px; margin-right: 10px; position: relative; } header #topBar #todayWeather > *.access { position: absolute; } header #topBar #todayWeather > *:after { background-color: #CCC; content: " "; display: block; width: 1px; height: 15px; position: absolute; right: 0; top: 3px; } header #topBar #todayWeather > *:last-child { padding-right: 0; margin-right: 0; } header #topBar #todayWeather > *:last-child:after { display: none; } header #topBar #todayWeather #weatherIcon { padding-right: 0; } header #topBar #todayWeather #weatherIcon img { width: 19px; height: 19px; display: inline-block; position: relative; margin-top: 1px; margin-right: 2px; } header #topBar #todayWeather #weatherIcon img:last-child { margin-right: 10px; } header #topBar #todayWeather #weatherIcon :after { display: none; } header #topBar #todayWeather #weatherCurrentTop #tempTop { display: inline-block; } header #topBar #todayWeather #weatherTextTop { display: inline-block; } header #toolBar { float: right; } header #toolBar > * { display: inline-block; } header #toolBar .myGov a { margin-left: 8px; } header #toolBar .loginIcon { /* background: transparent url(../images/common_icons/black/icon_login_black.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_login_black.svg) no-repeat center center; background-size: cover; display: inline-block; width: 17px; height: 17px; margin-right: 5px; vertical-align: bottom; } header #toolBar #doYouKnowBtn { display: none; padding-right: 4px; margin-left: 0; } header #toolBar #doYouKnowBtn a { background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_circleup_black.svg) no-repeat center center; background-size: 100% !important; display: inline-block; width: 17px; height: 17px; vertical-align: -5px; } @media screen and (min-width: 1201px) { header #toolBar #doYouKnowBtn a:hover { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_circleup_orange.svg) no-repeat center center; } } header #toolBar #doYouKnowBtn a.active { background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_circledown_black.svg) no-repeat center center; } @media screen and (min-width: 1201px) { header #toolBar #doYouKnowBtn a.active:hover { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_circledown_orange.svg) no-repeat center center; } } header #toolBar .langBtn { margin-left: 8px; position: relative; } header #toolBar .langBtn:first-child { margin-left: 0; } header #toolBar .langOther:after { content: ''; display: inline-block; border-top: 5px solid #353535; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; margin-left: 8px; vertical-align: middle; } header #toolBar .langOther:hover:after { border-top: 5px solid #cc4c02; } header #toolBar .langOther.active { color: #cc4c02; } header #toolBar .langOther.active:after { border-top: 5px solid #cc4c02; } header #toolBar .langDropdown { position: absolute; background: #FFF; padding: 30px; z-index: 100; display: none; width: 200px; margin-left: -50px; border: 1px solid #aaaaaa; top: calc(100% + 10px); z-index: 1600; } header #toolBar .langDropdown > li { padding-right: 0; margin-right: 0; } header #toolBar .langDropdown > li:after { display: none; padding-right: 0; margin-right: 0; } header #toolBar .langDropdown > li a { padding: 4px 0; display: inline-block; } header #toolBar .langDropdown > li a:hover { color: #cc4c02; } header #toolBar .langDropdown.active { display: block; } header #toolBar ul li a { color: #000; vertical-align: bottom; } header #toolBar ul li a:hover { color: #353535; } /* body.firefox.innerPage header.subMenuOn nav #innerLogo { top: -6px; } body.firefox.innerPage header.subMenuOn nav{ top: 43px; } body.trident.innerPage header.subMenuOn nav{ top: 47px; } :lang(zh-hk),:lang(zh-cn){ body.innerPage.menuFixed header.subMenuOn nav{ top: 10px; } } body.innerPage{ &.chrome{ header { &.subMenuOn{ @media screen and (min-width:1201px) { padding-bottom: 26px; :lang(zh-hk) &, :lang(zh-cn) &{ padding-bottom: 28px; } } } } } &.trident{ header { &.subMenuOn{ @media screen and (min-width:1201px) { padding-bottom: 26px; :lang(zh-hk) &, :lang(zh-cn) &{ padding-bottom: 25.5px; } } } } } &.firefox{ header { &.subMenuOn{ @media screen and (min-width:1201px) { padding-bottom: 27px; :lang(zh-hk) &, :lang(zh-cn) &{ padding-bottom: 29px; } } } } } } */ body.innerPage #innerLogo { opacity: 0; } body.innerPage.menuFixed #innerLogo { opacity: 1; } body.innerPage header { padding-bottom: 23px; } @media screen and (min-width: 1201px) { body.innerPage header:after { content: ''; display: table; width: 100%; height: 0; clear: both; } } body.innerPage header .logoBlock { margin: 12px 0 0; } body.innerPage header .logoBlock #headerLogo { left: 0; top: 0px; width: 310px; height: 27px; } body.innerPage header nav { margin-top: 20px; } body.innerPage header nav > .menuTab .menuItem.menuSearchBtn { display: inline-block; } @media screen and (min-width: 1201px) { body.innerPage header.subMenuOn .logoBlock { opacity: 1; z-index: 1700; position: relative; } } body.innerPage header.subMenuOn nav { /* > .menuTab{ .menuItem.menuSearchBtn a{ margin-left: 24px; margin-right: 1px; } }*/ } body.innerPage header.subMenuOn nav > .menuTab .subMenu.active { padding: 10px 0 30px; } body.innerPage header.subMenuOn nav > .menuTab .subMenu.active:before { top: -20px; } body.innerPage.menuFixed main { margin-top: 91px; } body.innerPage.menuFixed header { padding-bottom: 0; } body.innerPage.menuFixed header nav { margin-top: 0; top: 10px; } body.innerPage.menuFixed header .subMenuOn nav { top: 0 /* #innerLogo{ display:block; width: 240px; height: 21px; } */ } @media screen and (max-width: 1200px) { body.innerPage header nav > .menuTab .menuItem.menuSearchBtn { display: none; } .innerPage header.webCastOn .dyk { display: none; } /** innerPage**/ body.innerPage header { height: 60px; } body.innerPage header nav { margin-top: 0; } body.innerPage header .logoBlock { margin: 14px 3%; } body.innerPage header .logoBlock #headerLogo { width: 240px; height: 30px; margin: 0; } body.innerPage header .menuSearchBtn { display: inline-block; } body.innerPage header .menuSearchBtn a { display: none; } .menuOn.innerPage header { position: relative; } .menuOn.innerPage header .logoBlock { position: absolute; } .menuOn.innerPage header .menuBar { box-shadow: initial; position: relative; margin-top: 0px; } .menuOn.innerPage header nav.active { position: relative; } .menuOn.innerPage header nav.active > .menuTab.active { height: auto; position: absolute; overflow-y: hidden; } .menuOn.innerPage main, .menuOn.innerPage footer { max-height: 0px; overflow: hidden; } } @media screen and (max-width: 767px) { body.innerPage header .logoBlock #headerLogo { margin: 3px 0; } body.innerPage header { height: 40px; } } @media screen and (max-width: 767px) { body.innerPage header .logoBlock { margin: 14px 3%; } body.innerPage header .logoBlock #headerLogo { width: 170px; height: 15px; margin-top: 5px; } } @media screen and (max-width: 380px) { body.innerPage header .logoBlock { margin: 8px 3%; } } header .logoBlock { float: left; margin: 62px 0 0; overflow: hidden; } header .logoBlock #headerLogo { overflow: hidden; float: left; display: block; width: 373px; height: 33px; background: transparent url(../images/logo_main.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/logo_main.svg) no-repeat center center; background-size: 100%; } @media screen and (max-width: 1200px) { header .logoBlock { float: left; margin: 15px 3%; overflow: hidden; position: relative; z-index: 100; } header .logoBlock #headerLogo { width: 240px; height: 30px; background: transparent url(../images/logo_main.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/logo_main.svg) no-repeat center center; background-size: 100%; } header .logoBlock #headerLogo svg image { width: 240px; height: 30px; } } header.subMenuOn .logoBlock { opacity: 1; } .menuFixed header .logoBlock { display: none; } @media screen and (max-width: 767px) { header .logoBlock #headerLogo { width: 170px; height: 15px; margin-top: 3px; } } @media screen and (max-width: 380px) { header .logoBlock { margin: 10px 3%; } } header.cleanHeader .logoBlock #headerLogo { margin: 30px 0; } .menuOn .logoBlock, .menuOn.homePage .logoBlock { position: absolute; } .bwVer.trident header .logoBlock #headerLogo { background-image: url(../images/logo_main_grey.svg); } .webCast { display: none; padding: 15px 0; background: #ffd85d; } .homePage .webCastOn .webCast { display: block; } .webCast .webCastIcon { content: ''; width: 16px; height: 16px; background-size: 100% 100% !important; display: inline-block; margin: 0 4px 1px; vertical-align: middle; /* background: transparent url(../images/common_icons/orange/icon_btnplay_orange.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_btnplay_orange.svg) no-repeat center center; background-size: 100%; } .webCast h5 { display: inline-block; margin-right: 10px; } .menuFixed .homeTop { margin-top: 192px; } .menuFixed.homePage header.subMenuOn nav > .menuTab { margin-top: 0; } .menuFixed.homePage .webCastOn .webCast { display: none !important; } .menuFixed header { padding-bottom: 0; position: fixed; top: 0; left: 0; z-index: 1000; /* z-index: 10000; 9:14 2018-03-13 for search autocomplete, restore first */ background: #FFF; width: 100%; box-shadow: 0px 3px 5px rgba(125, 125, 125, 0.2); } .menuFixed header nav { position: relative; top: 10px; width: 100%; margin-top: 0; height: 50px; } .menuFixed header nav #innerLogo { display: block; position: absolute; left: 0; top: 4px; width: 240px; height: 21px; background: transparent url(../images/logo_main.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/logo_main.svg) no-repeat center center; background-size: 100%; z-index: 100; } .menuFixed header nav > .menuTab { position: absolute; width: 100%; height: 100%; text-align: right; z-index: 10; top: 0; } .menuFixed header nav > .menuTab > .menuItem { text-align: left; float: none; display: inline-block; z-index: 1001; margin-top: 3px; position: relative; } .menuFixed header nav > .menuTab > .menuItem.menuSearchBtn { display: inline-block; } .menuFixed header.subMenuOn header { box-shadow: initial; } .menuFixed header.subMenuOn nav > .menuTab .subMenu.active { top: 30px; } header.cleanHeader .contentWrapper { overflow: hidden; } .menuOn .webCast { display: none !important; } .menuOn #doYouKnow { display: none !important; } .bwVer.trident .webCast .webCastIcon { background-image: url(../images/common_icons/bw/icon_btnplay_bw.svg); } .bwVer.trident header nav .navMobile #navSearch { background-image: url(../images/common_icons/bw/icon_search_bw.svg); } .bwVer.trident header nav .navMobile #navLang { background-image: url(../images/common_icons/bw/icon_lang_bw.svg); } .bwVer.trident header nav > .menuTab .menuItem:hover a:after, .bwVer.trident header nav > .menuTab .menuItem.active a:after, .bwVer.trident header nav .navMobile #navToggle .navToggleInner span, .bwVer.trident header nav .navMobile #navToggle .navToggleInner::before, .bwVer.trident header nav .navMobile #navToggle .navToggleInner::after { background-color: #727272 !important; } .bwVer.trident header nav.active .navMobile .navBtn.active#navToggle .navToggleInner span { background-color: transparent !important; } @media screen and (max-width: 1200px) { .homePage header.webCastOn { padding-bottom: 60px; } .homePage header.webCastOn .dyk { display: block; } header.cleanHeader .contentWrapper { width: 100%; } .menuOn header nav.active > .menuTab.active { min-height: 600px; } header .menuBar { width: 100%; position: fixed; z-index: 1000; /* org: 1000; 9:26 2018-05-08 */ background-color: #FFF; overflow: visible; top: 0; } header .menuBar.shadow { box-shadow: 0px 3px 5px rgba(125, 125, 125, 0.2); z-index: 1000; /* org: 1000; 9:26 2018-05-08 */ } header .menuBar > .contentWrapper { width: 100%; } header nav { width: 100%; position: absolute; top: 0; height: 100%; margin: 0; max-height: 0; } header nav .navMobile { display: block; right: 0; margin-right: 3%; margin-top: 0; z-index: 50; position: absolute; } header nav .navMobile .navBtn { width: 58px; height: 58px; } header nav .navMobile .navBtn:last-child { margin-right: -15px; } header nav > .menuTab { z-index: 10; display: none; border-top: 1px solid #e1e1e1; } header nav > .menuTab .menuItem { display: block; float: none; width: 100%; } header nav > .menuTab .menuItem a { margin-left: 0; padding: 12px 3%; display: inline-block; } header nav > .menuTab .menuItem a:after { display: none; } header nav > .menuTab .menuItem:hover a:before, header nav > .menuTab .menuItem.active a:before { display: none; } header nav.active { max-height: 100%; } header nav.active > .menuTab.active { margin-top: 57px; display: block; width: 100%; /*height: 100%;*/ height: 100%; position: absolute; background: #f8f8f8; overflow-y: scroll; padding-top: 15px; padding-bottom: 100px; } header nav.active > .menuTab.active.innerMenu { display: none; } header nav.active > .menuTab.active.innerMenu .subMenu { display: block; padding: 0; } header nav.active > .menuTab.active.innerMenu .subMenu .infoItem a:before { display: none; } header nav.active > .menuTab.active.innerMenu.active { display: block; } header nav.active > div#searchTab.active { display: block; color: #cc4c02; text-align: center; } header nav.active > div#searchTab.active h2 { margin-top: 0px; } header nav.active > div#searchTab.active .searchBlock { width: 100%; padding: 0px 30px; } header nav.active > div#searchTab.active .searchBlock .searchHolder { margin-bottom: 0px; } header nav.active > div#searchTab.active .searchBlock .searchHolder .searchBar { width: calc(100% - 48px); } header nav.active > div#searchTab.active .hotSearch { color: #cc4c02; } header nav.active > div#searchTab.active .hotSearch a { /* padding: 10px; 14:51 2018-03-26 change to top padding 0 and bottom padding 20px */ padding: 0 10px 20px 10px; color: #cc4c02; } header nav.active > div#languagesTab.active { display: block; padding: 0px 30px; } header nav.active > div#languagesTab.active h2 { margin-top: 20px; color: #cc4c02; } header nav.active > div#languagesTab.active div { margin: 15px 0px; } /* 16:23 2021-03-04 add a-span bold for multilang-menu */ header nav.active > div#languagesTab.active div a, header nav.active > div#languagesTab.active div a span { padding: 0; font-weight: bold; } header nav .subMenu { display: none; position: relative; overflow: hidden; padding: 0px 0px 12px; } header nav .subMenu .subMenuCol .infoItem { position: relative; border-right: 0; } header nav .subMenu .subMenuCol .infoItem:after { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000; position: absolute; right: 25px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } header nav .subMenu .subMenuCol .infoItem.noArrow:after { display: none; } header nav .subMenu .subMenuCol .infoItem a { padding: 0 6%; height: 80px; padding-right: 12%; } header nav .subMenu .subMenuCol .infoItem a span { display: inline-block; vertical-align: middle; max-width: 85%; } header nav .subMenu .subMenuCol .infoItem a:hover { background: #f8f8f8; } header nav .subMenu .subMenuCol .infoItem a:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } header nav .subMenu .subMenuCol .infoItem a.active { background: #cc4c02; color: #FFF; text-decoration: none; } header nav .subMenu .subMenuCol .infoItem a.active span { color: #fff; } /* 15:42 2018-02-06 add OS and GF */ header nav .subMenu .subMenuCol .infoItem a.infoOnlineServices span, header nav .subMenu .subMenuCol .infoItem a.infoGovForms span, header nav .subMenu .subMenuCol .infoItem a.infoGW span { font-weight: bold; } header nav .subMenu .subMenuCol .infoItem.active:after { border-left: 5px solid #FFF; } header nav .subMenu .subMenuCol .infoItem.active a { background: #cc4c02; color: #FFF; text-decoration: none; } header nav .subMenu .subMenuCol .infoItem.active a span { color: #FFF; } /* 15:42 2018-02-06 add OS and GF */ header nav .subMenu .subMenuCol .infoItem.active a.infoOnlineServices span, header nav .subMenu .subMenuCol .infoItem.active a.infoGovForms span, header nav .subMenu .subMenuCol .infoItem.active a.infoGW span { font-weight: bold; } /* header nav .subMenu .subMenuCol .infoItem.active a.infoCT:before { background: transparent url(../images/common_icons/white/icon_service_communication_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_communication_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoEmployment:before { background: transparent url(../images/common_icons/white/icon_service_employment_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_employment_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoHMS:before { background: transparent url(../images/common_icons/white/icon_service_health_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_health_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoTD:before { background: transparent url(../images/common_icons/white/icon_service_tax_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_tax_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoCLS:before { background: transparent url(../images/common_icons/white/icon_service_culture_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_culture_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoEnvironment:before { background: transparent url(../images/common_icons/white/icon_service_environment_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_environment_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoHSS:before { background: transparent url(../images/common_icons/white/icon_service_housing_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_housing_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoTM:before { background: transparent url(../images/common_icons/white/icon_service_transport_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_transport_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoET:before { background: transparent url(../images/common_icons/white/icon_service_education_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_education_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoGLO:before { background: transparent url(../images/common_icons/white/icon_service_law_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_law_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoIS:before { background: transparent url(../images/common_icons/white/icon_service_immigration_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_immigration_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoGW:before { background: transparent url(../images/common_icons/white/icon_service_govweb_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_govweb_white.svg) no-repeat center center; } header nav .subMenu .subMenuCol .infoItem.active a.infoBFI:before { background: transparent url(../images/common_icons/white/icon_service_BFI_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_BFI_white.svg) no-repeat center center; width: 24px; height: 18px; } header nav .subMenu .subMenuCol .infoItem.active a.infoCSR:before { background: transparent url(../images/common_icons/white/icon_service_CSR_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_CSR_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoDBWM:before { background: transparent url(../images/common_icons/white/icon_service_DBWM_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBWM_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoDBWG:before { background: transparent url(../images/common_icons/white/icon_service_DBWG_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBWG_white.svg) no-repeat center center; width: 24px; height: 26px; } header nav .subMenu .subMenuCol .infoItem.active a.infoEIS:before { background: transparent url(../images/common_icons/white/icon_service_EIS_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_EIS_white.svg) no-repeat center center; width: 24px; height: 26px; } header nav .subMenu .subMenuCol .infoItem.active a.infoGTIE:before { background: transparent url(../images/common_icons/white/icon_service_GTIE_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_GTIE_white.svg) no-repeat center center; width: 24px; height: 34px; } header nav .subMenu .subMenuCol .infoItem.active a.infoHR:before { background: transparent url(../images/common_icons/white/icon_service_HR_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_HR_white.svg) no-repeat center center; width: 24px; height: 22px; } header nav .subMenu .subMenuCol .infoItem.active a.infoMIS:before { background: transparent url(../images/common_icons/white/icon_service_MIS_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_MIS_white.svg) no-repeat center center; width: 24px; height: 17px; } header nav .subMenu .subMenuCol .infoItem.active a.infoRL:before { background: transparent url(../images/common_icons/white/icon_service_RL_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_RL_white.svg) no-repeat center center; width: 24px; height: 17px; } header nav .subMenu .subMenuCol .infoItem.active a.infoSFLF:before { background: transparent url(../images/common_icons/white/icon_service_SFLF_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_SFLF_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoTaxes:before { background: transparent url(../images/common_icons/white/icon_service_Taxes_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_Taxes_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoGW.active:before { background: transparent url(../images/common_icons/white/icon_service_govweb_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_govweb_white.svg) no-repeat center center; width: 24px; height: 24px; } header nav .subMenu .subMenuCol .infoItem.active a.infoVHK:before { background: transparent url(../images/common_icons/white/icon_service_VHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_VHK_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoWHK:before { background: transparent url(../images/common_icons/white/icon_service_WHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_WHK_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoSIHK:before { background: transparent url(../images/common_icons/white/icon_service_SIHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_SIHK_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoIS:before { background: transparent url(../images/common_icons/white/icon_service_IS_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_IS_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoLIHK:before { background: transparent url(../images/common_icons/white/icon_service_LIHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_LIHK_white.svg) no-repeat center center; width: 24px; height: 20px; } header nav .subMenu .subMenuCol .infoItem.active a.infoDBIHK:before { background: transparent url(../images/common_icons/white/icon_service_DBIHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBIHK_white.svg) no-repeat center center; width: 24px; height: 20px; } */ header nav .subMenu.active { display: block; } header nav .subMenu .iconItem { float: left; margin-left: 55px; height: 65px; margin-bottom: 15px; line-height: 37px; } header nav .innerMenu .btnMenuBack { padding: 0 3%; display: inline-block; } header nav .toolBtns { display: block; padding-top: 0px; } header nav .toolBtns a { padding: 15px 3%; } .menuOn header, .menuOn.homePage header { position: relative; } .menuOn header .menuBar, .menuOn.homePage header .menuBar { box-shadow: initial; position: relative; margin-top: 0px; } .menuOn header nav.active, .menuOn.homePage header nav.active { position: relative; } .menuOn header nav.active > .menuTab.active, .menuOn.homePage header nav.active > .menuTab.active { height: auto; position: absolute; overflow-y: hidden; } .menuOn main, .menuOn footer, .menuOn.homePage main, .menuOn.homePage footer { max-height: 0px; overflow: hidden; } header nav > .menuTab .menuItem:hover a, header nav > .menuTab .menuItem.active a { color: #353535; } header nav > .menuTab > .menuItem.now:hover a { color: #cc4c02; } } @media screen and (max-width: 767px) { header .menuBar { padding-bottom: 2px; } header nav .navMobile #navToggle .navToggleInner { top: 26%; } header nav .subMenu .subMenuCol .infoItem { border-right: 1px solid #e1e1e1; } header nav .subMenu .subMenuCol .infoItem a { height: 65px; padding: 20px 3%; } header nav.active > .menuTab.active { margin-top: 49px; } header nav .subMenu .subMenuCol { width: 100%; border-right: 0; } header nav .subMenu .subMenuCol menuItem a { padding: 20px; } header nav .subMenu .subMenuCol .infoItem a { padding: 10px 3%; } /* 15:45 2018-02-06 no need now header nav .subMenu .subMenuCol:last-child { margin-top: -1px; } */ header nav .subMenu .innerMenu .btnMenuBack { padding: 20px; } header nav.active .navMobile .navBtn { width: 50px; height: 50px; } header nav.active .navMobile .navBtn.active#navToggle { background-color: #f8f8f8; } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner span { background: transparent; } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner:before { -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner:after { -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } header nav > div#searchTab.active .hotSearch { /* 16:04 2018-01-11 SHOW the hot search text link even in mobile view display: none; */ } header nav .navMobile .navBtn { width: 50px; height: 50px; } header nav .subMenu .subMenuCol .infoItem:after { right: 35px; } header nav .navMobile { margin-right: 5%; } header nav.active > div#languagesTab.active, header nav > .menuTab .menuItem a, header nav .innerMenu .btnMenuBack, header nav .subMenu .subMenuCol .infoItem a, header nav .toolBtns a { padding-left: 5%; padding-right: 5%; } } @media screen and (max-width: 480px) { header nav .navMobile { margin-right: 5%; } header nav .navMobile .navBtn:last-child { margin-right: -15px; } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner:after { -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner:before { -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } } @media screen and (max-width: 380px) { header nav.active > .menuTab.active { margin-top: 37px; } header nav.active .navMobile .navBtn { width: 38px; height: 38px; } header nav.active .navMobile .navBtn:last-child { margin-right: 0; } header nav.active .navMobile #navToggle .navToggleInner span { margin: 5px auto; } header nav .navMobile { margin-right: 0%; } header nav .navMobile .navQnaTop { margin-top: 12px; right: 10px; } header nav .navMobile .navBtn { width: 38px; height: 38px; } header nav .navMobile #navSearch, header nav .navMobile #navLang { background-size: 50%; } header nav .navMobile #navToggle .navToggleInner { top: 9px; width: 50%; left: 25%; } header nav .navMobile #navToggle .navToggleInner span { margin: 4px auto; } header nav .subMenu .subMenuCol .infoItem:after { right: 15px; } header nav .navMobile #navToggle .navToggleInner span, header nav .navMobile #navToggle .navToggleInner::before, header nav .navMobile #navToggle .navToggleInner::after { height: 3px; } header nav .navMobile .navBtn:last-child { margin-right: 5px; } header nav.active .navMobile .navBtn.active#navToggle .navToggleInner:after { -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } .closeBtn .btnInner:after { -webkit-transform: translateY(8px) rotate(-45deg); -ms-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); } header nav.active > div#languagesTab.active { padding: 0px 3%; } header nav.active > div#languagesTab.active, header nav > .menuTab .menuItem a, header nav .innerMenu .btnMenuBack, header nav .subMenu .subMenuCol .infoItem a, header nav .toolBtns a { padding-left: 3%; padding-right: 3%; } } @media screen and (max-width: 1200px) { body.innerPage header.directoryHeader { height: auto; padding-bottom: 0; } } body.innerPage header.directoryHeader .navDirectory { margin: 35px 0; } body.innerPage header.directoryHeader .navDirectory a { width: 100px; text-align: right; display: inline-block; } @media screen and (max-width: 1200px) { body.innerPage header.directoryHeader .navDirectory { position: initial; max-height: initial; width: auto; height: auto; margin: 15px 3%; } } @media screen and (max-width: 767px) { body.innerPage header.directoryHeader .navDirectory { margin: 15px 5%; text-align: right; } } body.innerPage header.qnaHeader { padding-bottom: 0; } @media screen and (max-width: 1200px) { body.innerPage header.qnaHeader { height: auto; } } body.innerPage header.qnaHeader .logoBlock { margin: 0; } @media screen and (max-width: 1200px) { body.innerPage header.qnaHeader .logoBlock { margin: 0 3%; } } body.innerPage header.qnaHeader .logoBlock #headerLogo { margin: 40px 0 30px; } @media screen and (max-width: 1200px) { body.innerPage header.qnaHeader .logoBlock #headerLogo { margin: 15px 0; } } @media screen and (max-width: 767px) { body.innerPage header.qnaHeader .logoBlock #headerLogo { margin: 20px 0 20px; } } body.innerPage header.qnaHeader .navQna { margin: 45px; margin-right: 0; } @media screen and (max-width: 1200px) { body.innerPage header.qnaHeader .navQna { position: relative; float: right; width: auto; height: auto; margin: 20px 3%; } } @media screen and (max-width: 767px) { body.innerPage header.qnaHeader .navQna { margin: 19px 5%; position: absolute; right: 0; } } body.innerPage header.qnaHeader .navQna .navQnaLangHolder { display: inline-block; } body.innerPage header.qnaHeader .navQna .navQnaLangHolder .navQnaLang { position: relative; padding-right: 10px; margin-right: 10px; } @media screen and (max-width: 380px) { body.innerPage header.qnaHeader .navQna .navQnaLangHolder .navQnaLang { padding-right: 5px; margin-right: 0; } } body.innerPage header.qnaHeader .navQna .navQnaLangHolder .navQnaLang:after { background-color: #CCC; content: " "; display: block; width: 1px; height: 15px; position: absolute; right: 0; top: 3px; } body.innerPage header.qnaHeader .navQna .navQnaLangHolder .navQnaLang:last-of-type:after { display: none; } body.innerPage header.qnaHeader .navQna .navQnaExit { display: inline-block; } footer { position: relative; padding: 60px 0; overflow: hidden; bottom: 0; } footer p { margin: 5px 0; } footer .contentWrapper { overflow: visible; } footer #backToTop { position: absolute; right: 0; top: -40px; } footer #backToTop:after { content: ''; width: 11px; height: 16px; /* background: transparent url(../images/common_icons/grey/icon_arrow2_up_grey.png) no-repeat center top; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/grey/icon_arrow2_up_grey.svg) no-repeat center top; background-size: 100%; display: inline-block; margin: 0 3px; vertical-align: bottom; } footer #backToTop:hover { color: #cc4c02; } footer #backToTop:hover:after { /* background: transparent url(../images/common_icons/orange/icon_arrow2_up_orange.png) no-repeat center top; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_arrow2_up_orange.svg) no-repeat center top; background-size: 100% auto; } footer #footerLogoHk { float: right; } footer #footerLogoHk img { width: 100%; } footer .footerLeft #auxiliaryMenu { line-height: 20px; font-size: 0; } footer .footerLeft #auxiliaryMenu li { display: inline-block; float: none; box-sizing: border-box; padding-right: 10px; margin-right: 10px; position: relative; margin-bottom: 5px; } footer .footerLeft #auxiliaryMenu li > * { font-size: 0.75rem; } footer .footerLeft #auxiliaryMenu li:before { background-color: #CCC; content: " "; display: block; width: 1px; height: 15px; position: absolute; right: 0; top: 3px; } @media screen and (max-width: 767px) { footer .footerLeft #auxiliaryMenu li:before { top: 0; } } footer .footerLeft #auxiliaryMenu li.listBreaker { padding: 0; margin: 0; display: block; height: 0; } footer .footerLeft #auxiliaryMenu li.listBreaker:after, footer .footerLeft #auxiliaryMenu li.listBreaker:before { display: none; } footer .footerLeft #auxiliaryMenu li:last-child:after { display: none; } footer .footerLeft #auxiliaryMenu .noLine:before { content: none; } footer .footerRight { font-size: 0; text-align: right;} footer .footerRight #webLabel { display: block; float: right; } footer .footerRight #footerLogoR6 img { width: 40%; } footer .footerRight #footerLogoAccess { width: 90%; margin-right: 20px; } footer .footerRight #footerLogoR6 img { /*margin-left: 18%;*/ } footer .footerRight #footerLogoAccess img { margin-left: -15%; } footer .footerRight .gridBlock { display: inline-block; vertical-align: middle; float: none; } footer .footerRight .gridBlock img { display: block; margin: 0 auto; } @media screen and (max-width: 1225px) { footer .footerLeft #auxiliaryMenu li.nextLine:after { display: block; } } @media screen and (max-width: 1200px) { footer #backToTop { margin-right: 3%; } footer .footerLeft { /*br{display:none;}*/ } footer .footerRight li { margin: 5px; } } @media screen and (max-width: 1024px) { footer .footerLeft #auxiliaryMenu li.noLine:before { content: " "; } footer .footerLeft #auxiliaryMenu li.listBreaker { display: none; } } @media screen and (max-width: 886px) { footer .footerLeft #auxiliaryMenu li { margin-right: 0px; padding-left: 5px; /* 15:49 2019-05-17 fix */ padding-right: 5px; } } @media screen and (max-width: 767px) { footer { padding: 30px 0; } footer .footerLeft { width: 100%; text-align: center; margin: 0 auto; } footer .footerLeft #auxiliaryMenu li:after { height: 10px; } footer .footerLeft #auxiliaryMenu { line-height: 14px; } footer .footerLeft #auxiliaryMenu li.noLine:before { content: " "; } footer .footerRight { text-align: center; } footer #backToTop { position: relative; margin: 30px auto 0; display: inline-block; width: 100%; text-align: center; } #footerLogoR6 img { margin: 0 auto; } #footerLogoAccess img { margin: 0 auto; } footer .footerLeft #auxiliaryMenu li { margin-right: 10px; padding-right: 10px; } } /*******browser fix*********/ body.edge .homeNav .tagArea .homeTab:hover { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /**************style****************/ .homeTop { display: block; } @media screen and (max-width: 767px) { .homeTop .searchWrapper { background-size: 80% auto; background-position: center bottom; padding-bottom: 20%; } } .searchBlock { float: left; overflow: hidden; width: 50%; margin-bottom: 30px; } .searchBlock .searchHolder { clear: both; float: left; overflow: hidden; width: 100%; } .searchBlock .searchHolder .searchBarHolder { clear: both; float: left; margin: 15px 0 10px; width: 100%; } .searchBlock .searchHolder .searchBar { -webkit-appearance: none; border-radius: 0; background: #FFF; border: 1px solid #cc4c02; border-right: 0; display: block; float: left; height: 48px; /* width: 80%; 11:53 2018-05-07 remark as iphone 6 eng drop icon */ margin: 0; padding: 0 17px; } .searchBlock .searchHolder .searchBtn { box-sizing: border-box; float: left; min-width: 0; display: block; margin: 0; border: 0; width: 48px; height: 48px; border: 1px solid #cc4c02; border-left: 0; padding: 6px; -webkit-appearance: none; -moz-appearance: none; /* background: #FFF url(../images/common_icons/orange/icon_search_orange.png) no-repeat center center; */ background: white url(../images/common_icons/orange/icon_search_orange.svg) no-repeat center center; background-size: 45%; margin: 0; float: left; display: block; text-indent: -9999px; } .searchBlock .hotSearch { color: #000; } .searchBlock .hotSearch .hotSearchHolder { display: inline-block; max-width:70%; /* max-width: 350px; 12:09 2018-03-13 remove for keywords to put at right */ vertical-align: top; margin-bottom: 5px; } /* 15:12 2018-03-13 small width for mobile view */ /* 11:55 2018-03-26 try use js @media screen and (max-width: 480px) { .searchBlock .hotSearch .hotSearchHolder { max-width:60%; } } */ .searchBlock .hotSearch .hotSearchHolder a { display: inline-block; margin-right: 10px; } @media screen and (min-width: 1201px) { .searchBlock .hotSearch .hotSearchHolder a:hover { color: #cc4c02; } } .searchBlock .quickLink a { color: #353535; } .searchBlock .quickLink .inlineBreaker:before { background: #353535; } .contentWrapper.tagWrapper { overflow: hidden; position: relative; z-index: 1; } .homeNav { margin-top: 0; padding-top: 20px; position: relative; width: 100%; background: rgba(255, 255, 255, 0) url(../images/bg_header_building_ground.svg) no-repeat center bottom; background-size: 1920px 100px; background-repeat: repeat-x; } .homeNav .homeNavBgOjectLower, .homeNav .homeNavBgOject { position: absolute; bottom: 99%; width: 100%; max-width: 1200px; left: 50%; z-index: -1; background-position: right bottom; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: rgba(255, 255, 255, 0) url(../images/bg_header_building_obj.svg) no-repeat; background-size: 48% auto; } @media screen and (max-width: 1200px) { .homeNav .homeNavBgOjectLower, .homeNav .homeNavBgOject { background-size: 40% auto; } } @media screen and (max-width: 767px) { .homeNav .homeNavBgOjectLower, .homeNav .homeNavBgOject { background-size: 480px auto; } } @media screen and (max-width: 640px) { .homeNav .homeNavBgOjectLower, .homeNav .homeNavBgOject { background-size: 360px auto; } } @media screen and (max-width: 480px) { .homeNav .homeNavBgOjectLower, .homeNav .homeNavBgOject { background-size: 80% auto; } } .homeNav .homeNavBgOjectLower { display: none; top: 0; height: 80px; background-position: right top; } @media screen and (max-width: 1200px) { .homeNav .homeNavBgOjectLower { height: 60px; } } @media screen and (max-width: 767px) { .homeNav .homeNavBgOjectLower { background-position: center top; } } @media screen and (max-width: 640px) { .homeNav .homeNavBgOjectLower { background-position: center top; } } .homeNav .homeNavBgOject { bottom: 99%; display: block; height: 240px; background-position: right bottom; } @media screen and (max-width: 767px) { .homeNav .homeNavBgOject { background-position: center bottom; } } @media screen and (max-width: 640px) { .homeNav .homeNavBgOject { background-position: center bottom; } } .homeNav .tagArea { position: relative; display: block; overflow: hidden; width: 100%; } .homeNav .tagArea .homeTab { display: block; float: left; width: calc(33.3333333% - 26.666666px); height: 60px; margin-right: 40px; padding: 0 30px; position: relative; } .homeNav .tagArea .homeTab h2, .homeNav .tagArea .homeTab span { vertical-align: middle; display: inline-block; color: #FFF; } .homeNav .tagArea .homeTab:before { position: absolute; content: ''; display: block; bottom: 0; left: 0; width: 100%; height: 10%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+99 */ /* FF3.6-15 */ background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 99%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 99%, rgba(0, 0, 0, 0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0); /* IE6-9 */ opacity: 0.20; } .homeNav .tagArea .homeTab#tabBizTrade:before { opacity: 0.35; } .homeNav .tagArea .homeTab:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .homeNav .tagArea .homeTab:last-child { margin-right: 0; } .homeNav .tagArea .homeTab#tabResidents { background: #cc4c02; } .homeNav .tagArea .homeTab#tabResidents:hover { background: #F56E15; } .homeNav .tagArea .homeTab#tabBizTrade { background: #454095; } .homeNav .tagArea .homeTab#tabBizTrade:hover { background: #514BB7; } .homeNav .tagArea .homeTab#tabNonResidents { background: #0c818f; } .homeNav .tagArea .homeTab#tabNonResidents:hover { background: #12AEC1; } .bwVer .homeNav .tagArea .homeTab#tabNonResidents { background: #606060; } .bwVer .homeNav .tagArea .homeTab#tabNonResidents:hover { background: #717171; } .homeNav .tagArea .homeTab.active:before { display: none; } .homeNav .tagArea .homeTab.active#tabResidents { background: #f8efe5; color: #cc4c02; border-top: 3px solid #cc4c02; cursor: default; } .homeNav .tagArea .homeTab.active#tabResidents h2, .homeNav .tagArea .homeTab.active#tabResidents span { color: #cc4c02; } .homeNav .tagArea .homeTab.active#tabBizTrade { background: #e5f1fd; color: #454095; border-top: 3px solid #454095; cursor: default; } .homeNav .tagArea .homeTab.active#tabBizTrade h2, .homeNav .tagArea .homeTab.active#tabBizTrade span { color: #454095; } .homeNav .tagArea .homeTab.active#tabNonResidents { background: #f4fdfc; color: #0c818f; border-top: 3px solid #0c818f; cursor: default; } .homeNav .tagArea .homeTab.active#tabNonResidents h2, .homeNav .tagArea .homeTab.active#tabNonResidents span { color: #0c818f; } .homePage.pageResidents #blockInfoServices, .homePage.pageResidents .tagBlock .blockTagHolder { background: #f8efe5; } .homePage.pageResidents .tagBlock .blockTag { background: #f1e1d1; } .homePage.pageResidents .tagBlock .blockTag.active { background: #FFF; } .homePage.pageResidents .tagBlock .blockHead:not(.active) .blockTag:hover { background: #cc4c02; } .homePage.pageResidents #blockMobileApp .btnMore:hover { color: #cc4c02; } .homePage.pageResidents .mainHolder .owl-controls .owl-dots > .owl-dot.active:before { background-color: #cc4c02; } @media screen and (min-width: 1201px) { .homePage.pageResidents .mainHolder .owl-controls .owl-dots > .owl-dot:hover:before { background-color: #cc4c02; } } .homePage.pageBusiness { /*.tagBlock .blockHead:not(.active) .blockTag { background: #d5e1ed; }*/ } .homePage.pageBusiness #blockInfoServices, .homePage.pageBusiness .tagBlock .blockTagHolder { background: #e5f1fd; } .homePage.pageBusiness #blockInfoServices.active, .homePage.pageBusiness .tagBlock .blockTagHolder.active { background-color: #FFF; } .homePage.pageBusiness #blockTopStory .storyItem, .homePage.pageBusiness #blockInfoServices .infoItem { border-color: #e5f1fd; } .homePage.pageBusiness .tagBlock.blockHead:not(.active) .blockTag:hover { background: #454095; } .homePage.pageBusiness .tagBlock.blockHead:not(.active) .blockTag:hover:before { opacity: 1; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_right_white.svg) no-repeat center center; } .homePage.pageBusiness .tagBlock.blockHead:not(.active) .blockTag:hover span { color: #FFF; } .homePage.pageBusiness .checkItOutSlider .checkItOutHolder .owl-item { background: #e5f1fd; } .homePage.pageBusiness main .mainHolder { background: #e5f1fd; } .homePage.pageBusiness main .mainHolder .owl-controls .owl-dots > .owl-dot.active:before { background-color: #454095; } @media screen and (min-width: 1201px) { .homePage.pageBusiness main .mainHolder .owl-controls .owl-dots > .owl-dot:hover:before { background-color: #454095; } } .homePage.pageBusiness main .mainHolder .linkBlock:hover, .homePage.pageBusiness main .mainHolder .linkBlock:focus, .homePage.pageBusiness main .mainHolder .controls .thu > a.on:before, .homePage.pageBusiness main .mainHolder .controls .thu > a:hover:before, .homePage.pageBusiness main .mainHolder .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageBusiness main .mainHolder .tagBlock .blockHead.active .blockTag:before, .homePage.pageBusiness main .mainHolder .inlineBreaker:before { background-color: #454095; } .homePage.pageBusiness main .mainHolder .tagBlock.blockTagHolder .tagContentHolder.block-2-3 li, .homePage.pageBusiness main .mainHolder .serviceLink:hover, .homePage.pageBusiness main .mainHolder #blockQuickLinks li, .homePage.pageBusiness main .mainHolder #blockEnquiries .enquiresLinks li, .homePage.pageBusiness main .mainHolder #blockMobileApp .btnMore:hover, .homePage.pageBusiness main .mainHolder .topicLink:hover, .homePage.pageBusiness main .mainHolder .topicLink:focus, .homePage.pageBusiness main .mainHolder .topicLink:hover span, .homePage.pageBusiness main .mainHolder .topicLink:hover a, .homePage.pageBusiness main .mainHolder .topicLink:hover h6, .homePage.pageBusiness main .mainHolder .topicLink:hover h5, .homePage.pageBusiness main .mainHolder .topicLink:hover h4, .homePage.pageBusiness main .mainHolder .topicLink:hover h3, .homePage.pageBusiness main .mainHolder .topicLink:hover h2, .homePage.pageBusiness main .mainHolder .topicLink:hover h1, .homePage.pageBusiness main .mainHolder .topicLink:focus span, .homePage.pageBusiness main .mainHolder .topicLink:focus a, .homePage.pageBusiness main .mainHolder .topicLink:focus h6, .homePage.pageBusiness main .mainHolder .topicLink:focus h5, .homePage.pageBusiness main .mainHolder .topicLink:focus h4, .homePage.pageBusiness main .mainHolder .topicLink:focus h3, .homePage.pageBusiness main .mainHolder .topicLink:focus h2, .homePage.pageBusiness main .mainHolder .topicLink:focus h1 { color: #454095; } @media screen and (min-width: 1201px) { .homePage.pageBusiness .checkItOutSlider .checkItOutItem:hover { background: #454095; } } .homePage.pageNonResidents { /*.tagBlock .blockHead:not(.active) .blockTag { background: #dbeff0; }*/ } .homePage.pageNonResidents #blockInfoServices, .homePage.pageNonResidents .tagBlock .blockTagHolder { background: #f4fdfc; } .homePage.pageNonResidents #blockInfoServices.active, .homePage.pageNonResidents .tagBlock .blockTagHolder.active { background-color: #FFF; } .homePage.pageNonResidents #blockTopStory .storyItem, .homePage.pageNonResidents #blockInfoServices .infoItem { border-color: #f4fdfc; } .homePage.pageNonResidents .tagBlock.blockHead:not(.active) .blockTag:hover { background: #0c818f; } .homePage.pageNonResidents .tagBlock.blockHead:not(.active) .blockTag:hover:before { opacity: 1; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_right_white.svg) no-repeat center center; } .homePage.pageNonResidents .tagBlock.blockHead:not(.active) .blockTag:hover span { color: #FFF; } .homePage.pageNonResidents .checkItOutSlider .checkItOutHolder .owl-item { background: #f4fdfc; } .homePage.pageNonResidents main .mainHolder { background: #f4fdfc; } .homePage.pageNonResidents main .mainHolder .linkBlock:hover, .homePage.pageNonResidents main .mainHolder .linkBlock:focus, .homePage.pageNonResidents main .mainHolder .controls .thu > a.on:before, .homePage.pageNonResidents main .mainHolder .controls .thu > a:hover:before, .homePage.pageNonResidents main .mainHolder .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageNonResidents main .mainHolder .tagBlock .blockHead.active .blockTag:before, .homePage.pageNonResidents main .mainHolder .inlineBreaker:before { background-color: #0c818f; } .homePage.pageNonResidents main .mainHolder .tagBlock.blockTagHolder .tagContentHolder.block-2-3 li, .homePage.pageNonResidents main .mainHolder .serviceLink:hover, .homePage.pageNonResidents main .mainHolder #blockQuickLinks li, .homePage.pageNonResidents main .mainHolder #blockEnquiries .enquiresLinks li, .homePage.pageNonResidents main .mainHolder #blockMobileApp .btnMore:hover, .homePage.pageNonResidents main .mainHolder .topicLink:hover, .homePage.pageNonResidents main .mainHolder .topicLink:focus, .homePage.pageNonResidents main .mainHolder .topicLink:hover span, .homePage.pageNonResidents main .mainHolder .topicLink:hover a, .homePage.pageNonResidents main .mainHolder .topicLink:hover h6, .homePage.pageNonResidents main .mainHolder .topicLink:hover h5, .homePage.pageNonResidents main .mainHolder .topicLink:hover h4, .homePage.pageNonResidents main .mainHolder .topicLink:hover h3, .homePage.pageNonResidents main .mainHolder .topicLink:hover h2, .homePage.pageNonResidents main .mainHolder .topicLink:hover h1, .homePage.pageNonResidents main .mainHolder .topicLink:focus span, .homePage.pageNonResidents main .mainHolder .topicLink:focus a, .homePage.pageNonResidents main .mainHolder .topicLink:focus h6, .homePage.pageNonResidents main .mainHolder .topicLink:focus h5, .homePage.pageNonResidents main .mainHolder .topicLink:focus h4, .homePage.pageNonResidents main .mainHolder .topicLink:focus h3, .homePage.pageNonResidents main .mainHolder .topicLink:focus h2, .homePage.pageNonResidents main .mainHolder .topicLink:focus h1 { color: #0c818f; } .homePage.pageNonResidents main .mainHolder .owl-controls .owl-dots > .owl-dot.active:before { background-color: #0c818f; } @media screen and (min-width: 1201px) { .homePage.pageNonResidents main .mainHolder .owl-controls .owl-dots > .owl-dot:hover:before { background-color: #0c818f; } } @media screen and (min-width: 1201px) { .homePage.pageNonResidents .checkItOutSlider .checkItOutItem:hover { background: #0c818f; } } .homePage main { position: relative; background: #f8efe5; } .homePage main .inlineBreaker:before { background-color: #cc4c02; } .homePage main .mainHolder { overflow: hidden; background: #f8efe5; } .homePage main .mainHolder .linkBlock { background: #FFF; } @media screen and (min-width: 1201px) { .homePage main .mainHolder .linkBlock:hover, .homePage main .mainHolder .linkBlock:focus { background: #cc4c02; } } .homePage #blockAnnounce { position: relative; } .homePage #blockAnnounce .owl-controls { position: absolute; bottom: 10px; left: 25px; } .homePage #blockAnnounce .owl-stage-outer, .homePage #blockAnnounce .owl-item { height: 100%; } .homePage #blockAnnounce .swiper-slide { position: relative; height: 100%; } .homePage #blockAnnounce .swiper-slide .annouceArticle, .homePage #blockAnnounce .swiper-slide .annouceCover { display: block; width: 50%; float: left; position: relative; height: 100%; overflow: hidden; } .homePage #blockAnnounce .swiper-slide .annouceArticle h4, .homePage #blockAnnounce .swiper-slide .annouceCover h4 { margin-bottom: 15px; } .homePage #blockAnnounce .swiper-slide .annouceArticle { padding: 0 25px; background: #FFF; } .homePage #blockAnnounce .swiper-slide .annouceArticle article { vertical-align: middle; display: inline-block; width: 95%; } @media screen and (max-width: 1024px) { .homePage #blockAnnounce .swiper-slide .annouceArticle article { margin-top: -20px; } } @media screen and (max-width: 767px) { .homePage #blockAnnounce .swiper-slide .annouceArticle article { margin-top: 0; } } .homePage #blockAnnounce .swiper-slide .annouceArticle:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .homePage #blockAnnounce .swiper-slide .annouceCover { position: absolute; top: 0; right: 0; height: 100%; float: none; } .homePage #blockAnnounce .swiper-slide .annouceCover img { width: 100%; height: auto; float: right; max-width: initial; } .homePage #blockAnnounce .slide { position: relative; height: 100%; } .homePage #blockAnnounce .slide .annouceArticle, .homePage #blockAnnounce .slide .annouceCover { display: block; width: 50%; float: left; position: relative; height: 100%; overflow: hidden; } .homePage #blockAnnounce .slide .annouceArticle h4, .homePage #blockAnnounce .slide .annouceCover h4 { margin-bottom: 15px; } .homePage #blockAnnounce .slide .annouceArticle { padding: 0 25px; background: #FFF; } .homePage #blockAnnounce .slide .annouceArticle article { vertical-align: middle; display: inline-block; width: 95%; } @media screen and (max-width: 1024px) { .homePage #blockAnnounce .slide .annouceArticle article { margin-top: -20px; } } @media screen and (max-width: 767px) { .homePage #blockAnnounce .slide .annouceArticle article { margin-top: 0; } } .homePage #blockAnnounce .slide .annouceArticle:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .homePage #blockAnnounce .slide .annouceCover { position: absolute; top: 0; right: 0; height: 100%; float: none; } .homePage #blockAnnounce .slide .annouceCover img { width: 100%; height: auto; float: right; max-width: initial; } .homePage #blockTopStory .storyItem { display: block; width: 100%; overflow: hidden; border-bottom: 1px solid #f8efe5; } .homePage #blockTopStory .storyItem .storyThumb { display: block; float: left; height: 60px; /* width: 60px; 16:58 2018-01-08 as news.gov.hk revamp, image change to 3:2 */ width: 90px; } .homePage #blockTopStory .storyItem .storyThumb img { display: block; width: 100%; } .homePage #blockTopStory .storyItem .storyTitle { display: table-cell; vertical-align: middle; padding: 0 15px; height: 60px; } @media screen and (max-width: 1024px) { .homePage #blockTopStory .storyItem .storyTitle { padding: 10px; } } @media screen and (max-width: 800px) { .homePage #blockTopStory .storyItem .storyTitle { padding: 5px; } } .homePage #blockQuickLinks .blockInnerCol-1-3 { padding: 20px 25px; } .homePage #blockQuickLinks ul { list-style: disc; } .homePage #blockQuickLinks li { color: #cc4c02; margin-left: 25px; } .homePage #blockQuickLinks .quickLink { display: block; position: relative; width: 100%; padding: 10px 5px; } .homePage #blockQuickLinks .quickLink span { display: inline-block; vertical-align: top; max-width: 90%; } .homePage #blockInfoServices .infoItem { border-right: 1px solid #f8efe5; border-bottom: 1px solid #f8efe5; } .homePage #blockInfoServices .infoItem:nth-child(3n) { border-right: 0; } .homePage #blockInfoServices .infoItem span { max-width: 80%; } .homePage #blockInfoServices .infoItem .infoLink { display: block; position: relative; width: 100%; } .homePage #blockInfoServices .infoItem .infoLink:before { content: ''; width: 24px; height: 24px; background-size: 100% 100% !important; display: inline-block; margin-right: 15px; vertical-align: middle; } .homePage #blockInfoServices .infoItem #infoCommunication:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_communication_orange.svg) no-repeat center center; width: 24px; height: 18px; } .homePage #blockInfoServices .infoItem #infoCommunication:hover:before, .homePage #blockInfoServices .infoItem #infoCommunication:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_communication_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEmployment:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_employment_orange.svg) no-repeat center center; width: 24px; height: 20px; } .homePage #blockInfoServices .infoItem #infoEmployment:hover:before, .homePage #blockInfoServices .infoItem #infoEmployment:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_employment_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoHealth:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_health_orange.svg) no-repeat center center; width: 24px; height: 20px; } .homePage #blockInfoServices .infoItem #infoHealth:hover:before, .homePage #blockInfoServices .infoItem #infoHealth:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_health_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoTax:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_tax_orange.svg) no-repeat center center; width: 24px; height: 26px; } .homePage #blockInfoServices .infoItem #infoTax:hover:before, .homePage #blockInfoServices .infoItem #infoTax:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_tax_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoCulture:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_culture_orange.svg) no-repeat center center; width: 24px; height: 24px; margin-left: -2px; } .homePage #blockInfoServices .infoItem #infoCulture:hover:before, .homePage #blockInfoServices .infoItem #infoCulture:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_culture_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEnvironment:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_environment_orange.svg) no-repeat center center; width: 19px; height: 25px; margin-left: 3px; } .homePage #blockInfoServices .infoItem #infoEnvironment:hover:before, .homePage #blockInfoServices .infoItem #infoEnvironment:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_environment_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoHousing:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_housing_orange.svg) no-repeat center center; width: 24px; height: 22px; } .homePage #blockInfoServices .infoItem #infoHousing:hover:before, .homePage #blockInfoServices .infoItem #infoHousing:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_housing_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoTransport:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_transport_orange.svg) no-repeat center center; width: 24px; height: 17px; } .homePage #blockInfoServices .infoItem #infoTransport:hover:before, .homePage #blockInfoServices .infoItem #infoTransport:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_transport_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEducation:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_education_orange.svg) no-repeat center center; width: 24px; height: 17px; } .homePage #blockInfoServices .infoItem #infoEducation:hover:before, .homePage #blockInfoServices .infoItem #infoEducation:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_education_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoLaw:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_law_orange.svg) no-repeat center center; width: 24px; height: 20px; } .homePage #blockInfoServices .infoItem #infoLaw:hover:before, .homePage #blockInfoServices .infoItem #infoLaw:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_law_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoImmigration:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_immigration_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoImmigration:hover:before, .homePage #blockInfoServices .infoItem #infoImmigration:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_immigration_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoGovweb:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_govweb_orange.svg) no-repeat center center; width: 22px; height: 22px; } .homePage #blockInfoServices .infoItem #infoGovweb:hover:before, .homePage #blockInfoServices .infoItem #infoGovweb:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_govweb_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem .infoBiz span { color: #454095; } .homePage #blockInfoServices .infoItem .infoBiz span:hover { color: #FFF; } .homePage #blockInfoServices .infoItem .infoBiz:hover span { color: #FFF !important; } .homePage #blockInfoServices .infoItem #infoBFI:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_BFI_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoBFI:hover:before, .homePage #blockInfoServices .infoItem #infoBFI:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_BFI_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoCSR:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_CSR_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoCSR:hover:before, .homePage #blockInfoServices .infoItem #infoCSR:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_CSR_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoDBWM:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBWM_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoDBWM:hover:before, .homePage #blockInfoServices .infoItem #infoDBWM:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBWM_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoDBWG:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBWG_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoDBWG:hover:before, .homePage #blockInfoServices .infoItem #infoDBWG:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBWG_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEIS:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_EIS_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoEIS:hover:before, .homePage #blockInfoServices .infoItem #infoEIS:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_EIS_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoGTIE:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_GTIE_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoGTIE:hover:before, .homePage #blockInfoServices .infoItem #infoGTIE:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_GTIE_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoHR:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_HR_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoHR:hover:before, .homePage #blockInfoServices .infoItem #infoHR:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_HR_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoMIS:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_MIS_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoMIS:hover:before, .homePage #blockInfoServices .infoItem #infoMIS:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_MIS_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoRL:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_RL_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoRL:hover:before, .homePage #blockInfoServices .infoItem #infoRL:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_RL_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoSFLF:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_SFLF_orange.svg) no-repeat center center; width: 27px; height: 21px; margin-left: -3px; } .homePage #blockInfoServices .infoItem #infoSFLF:hover:before, .homePage #blockInfoServices .infoItem #infoSFLF:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_SFLF_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoTaxes:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_Taxes_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoTaxes:hover:before, .homePage #blockInfoServices .infoItem #infoTaxes:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_Taxes_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoVHK:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_VHK_orange.svg) no-repeat center center; width: 28px; height: 22px; margin-left: -2px; } .homePage #blockInfoServices .infoItem #infoVHK:hover:before, .homePage #blockInfoServices .infoItem #infoVHK:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_VHK_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoWHK:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_WHK_orange.svg) no-repeat center center; width: 28px; height: 24px; margin-left: -5px; } .homePage #blockInfoServices .infoItem #infoWHK:hover:before, .homePage #blockInfoServices .infoItem #infoWHK:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_WHK_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoSIHK:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_SIHK_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoSIHK:hover:before, .homePage #blockInfoServices .infoItem #infoSIHK:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_SIHK_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoIS:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_immigration_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoIS:hover:before, .homePage #blockInfoServices .infoItem #infoIS:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_immigration_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoLIHK:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_LIHK_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoLIHK:hover:before, .homePage #blockInfoServices .infoItem #infoLIHK:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_LIHK_white.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoDBIHK:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBIHK_orange.svg) no-repeat center center; width: 24px; height: 24px; } .homePage #blockInfoServices .infoItem #infoDBIHK:hover:before, .homePage #blockInfoServices .infoItem #infoDBIHK:focus:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBIHK_white.svg) no-repeat center center; } .homePage #blockEnquiries { height: 60px; white-space: nowrap; } .homePage #blockEnquiries .blockContent { height: 100%; } .homePage #blockEnquiries .blockContent:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .homePage #blockEnquiries .enquiresLinks { vertical-align: middle; display: inline-block; text-align: left; white-space: normal; float: none; list-style: none; } @media screen and (min-width: 1201px) { .homePage #blockEnquiries .enquiresLinks { font-size: 0; } } .homePage #blockEnquiries .enquiresLinks .inlineBreaker { vertical-align: middle; } .homePage #blockEnquiries .enquiresLinks .inlineBreaker:before { top: 0; } .homePage #blockEnquiries .enquiresLinks li { vertical-align: middle; display: inline-block; } @media screen and (min-width: 1201px) { .homePage #blockEnquiries .enquiresLinks li > * { font-size: 1rem; } } .homePage #blockEnquiries .enquiresLinks:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .homePage #blockEnquiries .enquiresLinks a { vertical-align: middle; display: inline-block; } .homePage #blockQnA .qaHolder { display: none; padding: 40px; } .homePage #blockQnA .qaHolder.active { display: block; } .homePage #blockQnA .qaHolder .question { position: relative; z-index: 10; } .homePage #blockQnA .qaHolder .answer { position: relative; display: block; margin: 20px auto; z-index: 10; } .homePage #blockQnA .qaHolder .answer span { display: inline-block; margin-right: 20px; } .homePage #blockQnA .qaHolder .qaThumb { display: inline-block; width: 90px; height: 90px; margin-right: 10px; vertical-align: middle; } .homePage #blockQnA .qaHolder.qaHasThumb .question { display: inline-block; width: calc(100% - 105px); vertical-align: middle; font-size: 15px; } .homePage #blockQnA .qaHolder.qaHasBG .greenishCover { position: absolute; height: 100%; margin-top: -40px; margin-left: -40px; z-index: 5; opacity: 1; } @media screen and (max-width: 1200px) { .homePage #blockQnA .qaHolder.qaHasBG .greenishCover { margin-top: -40px; margin-left: -40px; } } @media screen and (max-width: 1024px) { .homePage #blockQnA .qaHolder.qaHasBG .greenishCover { margin-top: -20px; margin-left: -20px; } } @media screen and (max-width: 767px) { .homePage #blockQnA .qaHolder.qaHasBG .greenishCover { margin-top: -25px; margin-left: -25px; } } .homePage #blockMobileApp .blockContent { overflow: hidden; } .homePage #blockMobileApp .blockContent:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .homePage #blockMobileApp .slide { overflow: hidden; vertical-align: middle; display: inline-block; padding: 35px 20px 35px; width: 100%; } .homePage #blockMobileApp .owl-controls { padding-top: 0; } .homePage #blockMobileApp .btnMore { position: absolute; right: 40px; bottom: 0px; z-index: 100; padding-bottom: 30px; } .homePage #blockMobileApp .mobAppItem { vertical-align: middle; display: inline-block; text-align: center; width: 100%; } .homePage #blockMobileApp .mobAppItem img { display: inline-block; width: 40%; margin: 10px; } .homePage #blockMobileApp .mobAppItem h5 { display: inline-block; width: 90%; } .homePage #checkItOut h4 { margin: 0 auto 5px; } .homePage #checkItOut .checkItOutHolder { overflow: hidden; margin-top: 10px; } .homePage #checkItOut .itemCover { position: relative; } .homePage #checkItOut .itemCover img { width: 100%; } .homePage #checkItOut .itemText { padding: 20px 20px; } .homePage .checkItOutSlider { margin-bottom: 25px; } .homePage .checkItOutSlider .slider { margin: 0 -15px; width: calc(100% + 15px); } .homePage .checkItOutSlider .owl-item .slide { padding-left: 15px; } .homePage .checkItOutSlider .checkItOutItem { width: 100%; } @media screen and (min-width: 1201px) { .homePage .checkItOutSlider .checkItOutItem:hover { background: #cc4c02; } .homePage .checkItOutSlider .checkItOutItem:hover .topicLink .itemText h4, .homePage .checkItOutSlider .checkItOutItem:hover .topicLink .itemText p { color: #FFF; } } .homePage .checkItOutSlider .controls.atBottom { clear: both; position: initial; bottom: 0px; margin-top: 0px; } .homePage .checkItOutSlider h4 { margin: 0 auto 5px; } .homePage .checkItOutSlider h4:last-child { margin-bottom: 0; } .homePage .checkItOutSlider .checkItOutHolder { overflow: hidden; margin-top: 15px; } .homePage .checkItOutSlider .checkItOutHolder .owl-item { background: #f8efe5; } .homePage .checkItOutSlider .itemCover { position: relative; } .homePage .checkItOutSlider .itemCover img { width: 100%; } .homePage .checkItOutSlider .itemText { padding: 15px 20px 25px 15px; } .homePage .checkItOutSlider .owl-controls { display: none; } .bwVer.trident .searchBlock .searchHolder .searchBtn { background-image: url(../images/common_icons/bw/icon_search_bw.svg); } .bwVer.trident .homeTop .searchWrapper { background-image: url(../images/bg_header_building_grey.svg); } .bwVer.trident .homePage main .inlineBreaker:before, .bwVer.trident .homePage .mainHolder .owl-controls .owl-dots > .owl-dot.active::before, .bwVer.trident .homePage .mainHolder .owl-controls .owl-dots > .owl-dot:hover::before, .bwVer.trident .owl-controls .owl-dots > .owl-dot.active:before, .bwVer.trident .owl-controls .owl-dots > .owl-dot:hover:before { background-color: #727272 !important; } .bwVer.trident .tagBlock.blockTagHolder .blockHead.active .blockTag:before { background-color: #727272; } .bwVer.trident #doYouKnow .videoBtn:hover { background-color: #727272; color: #FFF !important; } .bwVer.trident .homePage main .inlineBreaker:before { background-color: #727272; } .bwVer.trident .linkBlock:hover, .bwVer.trident .linkBlock:focus { background-color: #727272; } .bwVer.trident .linkBlock:hover span, .bwVer.trident .linkBlock:hover a, .bwVer.trident .linkBlock:focus span, .bwVer.trident .linkBlock:focus a { color: #FFF !important; } .bwVer.trident.homePage #blockInfoServices .infoItem a:hover span { color: #FFF !important; } /*.bwVer.trident.homePage #blockInfoServices .infoItem #infoCommunication:before { background: transparent url(../images/common_icons/bw/icon_service_communication_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_communication_bw.svg) no-repeat center center; width: 24px; height: 18px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoCommunication:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoCommunication:focus:before { background: transparent url(../images/common_icons/white/icon_service_communication_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_communication_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEmployment:before { background: transparent url(../images/common_icons/bw/icon_service_employment_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_employment_bw.svg) no-repeat center center; width: 24px; height: 20px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEmployment:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoEmployment:focus:before { background: transparent url(../images/common_icons/white/icon_service_employment_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_employment_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoHealth:before { background: transparent url(../images/common_icons/bw/icon_service_health_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_health_bw.svg) no-repeat center center; width: 24px; height: 20px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoHealth:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoHealth:focus:before { background: transparent url(../images/common_icons/white/icon_service_health_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_health_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoTax:before { background: transparent url(../images/common_icons/bw/icon_service_tax_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_tax_bw.svg) no-repeat center center; width: 24px; height: 26px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoTax:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoTax:focus:before { background: transparent url(../images/common_icons/white/icon_service_tax_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_tax_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoCulture:before { background: transparent url(../images/common_icons/bw/icon_service_culture_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_culture_bw.svg) no-repeat center center; width: 24px; height: 24px; margin-left: -2px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoCulture:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoCulture:focus:before { background: transparent url(../images/common_icons/white/icon_service_culture_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_culture_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEnvironment:before { background: transparent url(../images/common_icons/bw/icon_service_environment_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_environment_bw.svg) no-repeat center center; width: 19px; height: 25px; margin-left: 3px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEnvironment:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoEnvironment:focus:before { background: transparent url(../images/common_icons/white/icon_service_environment_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_environment_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoHousing:before { background: transparent url(../images/common_icons/bw/icon_service_housing_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_housing_bw.svg) no-repeat center center; width: 24px; height: 22px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoHousing:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoHousing:focus:before { background: transparent url(../images/common_icons/white/icon_service_housing_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_housing_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoTransport:before { background: transparent url(../images/common_icons/bw/icon_service_transport_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_transport_bw.svg) no-repeat center center; width: 24px; height: 17px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoTransport:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoTransport:focus:before { background: transparent url(../images/common_icons/white/icon_service_transport_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_transport_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEducation:before { background: transparent url(../images/common_icons/bw/icon_service_education_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_education_bw.svg) no-repeat center center; width: 24px; height: 17px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEducation:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoEducation:focus:before { background: transparent url(../images/common_icons/white/icon_service_education_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_education_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoLaw:before { background: transparent url(../images/common_icons/bw/icon_service_law_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_law_bw.svg) no-repeat center center; width: 24px; height: 20px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoLaw:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoLaw:focus:before { background: transparent url(../images/common_icons/white/icon_service_law_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_law_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoImmigration:before { background: transparent url(../images/common_icons/bw/icon_service_immigration_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_immigration_bw.svg) no-repeat center center; width: 24px; height: 20px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoImmigration:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoImmigration:focus:before { background: transparent url(../images/common_icons/white/icon_service_immigration_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_immigration_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoGovweb:before { background: transparent url(../images/common_icons/bw/icon_service_govweb_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_govweb_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoGovweb:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoGovweb:focus:before { background: transparent url(../images/common_icons/white/icon_service_govweb_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_govweb_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoBFI:before { background: transparent url(../images/common_icons/bw/icon_service_BFI_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_BFI_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoBFI:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoBFI:focus:before { background: transparent url(../images/common_icons/white/icon_service_BFI_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_BFI_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoCSR:before { background: transparent url(../images/common_icons/bw/icon_service_CSR_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_CSR_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoCSR:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoCSR:focus:before { background: transparent url(../images/common_icons/white/icon_service_CSR_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_CSR_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBWM:before { background: transparent url(../images/common_icons/bw/icon_service_DBWM_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_DBWM_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBWM:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBWM:focus:before { background: transparent url(../images/common_icons/white/icon_service_DBWM_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBWM_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBWG:before { background: transparent url(../images/common_icons/bw/icon_service_DBWG_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_DBWG_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBWG:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBWG:focus:before { background: transparent url(../images/common_icons/white/icon_service_DBWG_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBWG_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEIS:before { background: transparent url(../images/common_icons/bw/icon_service_EIS_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_EIS_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoEIS:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoEIS:focus:before { background: transparent url(../images/common_icons/white/icon_service_EIS_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_EIS_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoGTIE:before { background: transparent url(../images/common_icons/bw/icon_service_GTIE_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_GTIE_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoGTIE:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoGTIE:focus:before { background: transparent url(../images/common_icons/white/icon_service_GTIE_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_GTIE_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoHR:before { background: transparent url(../images/common_icons/bw/icon_service_HR_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_HR_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoHR:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoHR:focus:before { background: transparent url(../images/common_icons/white/icon_service_HR_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_HR_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoMIS:before { background: transparent url(../images/common_icons/bw/icon_service_MIS_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_MIS_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoMIS:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoMIS:focus:before { background: transparent url(../images/common_icons/white/icon_service_MIS_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_MIS_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoRL:before { background: transparent url(../images/common_icons/bw/icon_service_RL_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_RL_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoRL:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoRL:focus:before { background: transparent url(../images/common_icons/white/icon_service_RL_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_RL_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoSFLF:before { background: transparent url(../images/common_icons/bw/icon_service_SFLF_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_SFLF_bw.svg) no-repeat center center; width: 27px; height: 21px; margin-left: -3px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoSFLF:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoSFLF:focus:before { background: transparent url(../images/common_icons/white/icon_service_SFLF_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_SFLF_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoTaxes:before { background: transparent url(../images/common_icons/bw/icon_service_Taxes_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_Taxes_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoTaxes:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoTaxes:focus:before { background: transparent url(../images/common_icons/white/icon_service_Taxes_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_Taxes_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoVHK:before { background: transparent url(../images/common_icons/bw/icon_service_VHK_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_VHK_bw.svg) no-repeat center center; width: 28px; height: 22px; margin-left: -2px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoVHK:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoVHK:focus:before { background: transparent url(../images/common_icons/white/icon_service_VHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_VHK_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoWHK:before { background: transparent url(../images/common_icons/bw/icon_service_WHK_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_WHK_bw.svg) no-repeat center center; width: 28px; height: 24px; margin-left: -5px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoWHK:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoWHK:focus:before { background: transparent url(../images/common_icons/white/icon_service_WHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_WHK_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoSIHK:before { background: transparent url(../images/common_icons/bw/icon_service_SIHK_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_SIHK_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoSIHK:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoSIHK:focus:before { background: transparent url(../images/common_icons/white/icon_service_SIHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_SIHK_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoIS:before { background: transparent url(../images/common_icons/bw/icon_service_IS_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_IS_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoIS:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoIS:focus:before { background: transparent url(../images/common_icons/white/icon_service_IS_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_IS_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoLIHK:before { background: transparent url(../images/common_icons/bw/icon_service_LIHK_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_LIHK_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoLIHK:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoLIHK:focus:before { background: transparent url(../images/common_icons/white/icon_service_LIHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_LIHK_white.svg) no-repeat center center; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBIHK:before { background: transparent url(../images/common_icons/bw/icon_service_DBIHK_bw.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_service_DBIHK_bw.svg) no-repeat center center; width: 24px; height: 24px; } .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBIHK:hover:before, .bwVer.trident.homePage #blockInfoServices .infoItem #infoDBIHK:focus:before { background: transparent url(../images/common_icons/white/icon_service_DBIHK_white.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_service_DBIHK_white.svg) no-repeat center center; } */ #currentMedia { display: none; max-width: 1920px; } @media screen and (max-width: 1200px) { .homePage .homeTop { padding-top: 57px; } .serviceLink:hover { color: #353535; } .tagBlock.blockTagHolder .blockHead:not(.active):hover .blockTag:before { background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_arrow_right_bw.svg) no-repeat center center; opacity: 0.5; } .homePage.pageResidents .tagBlock .blockHead:not(.active) .blockTag:hover { background: #cc4c02; color: #fff; } .homePage.pageBusiness .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageBusiness main .mainHolder .tagBlock .blockHead:not(.active) .blockTag:hover { background: #d5e1ed; } .homePage.pageNonResidents .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageNonResidents main .mainHolder .tagBlock .blockHead:not(.active) .blockTag:hover { background: #dbeff0; } .homePage.pageResidents main .mainHolder .topicLink:hover span, .homePage.pageResidents main .mainHolder .topicLink:hover a, .homePage.pageResidents main .mainHolder .topicLink:hover h1, .homePage.pageResidents main .mainHolder .topicLink:hover h2, .homePage.pageResidents main .mainHolder .topicLink:hover h3, .homePage.pageResidents main .mainHolder .topicLink:hover h4, .homePage.pageResidents main .mainHolder .topicLink:hover h5, .homePage.pageResidents main .mainHolder .topicLink:hover h6, .homePage.pageBusiness main .mainHolder .topicLink:hover span, .homePage.pageBusiness main .mainHolder .topicLink:hover a, .homePage.pageBusiness main .mainHolder .topicLink:hover h1, .homePage.pageBusiness main .mainHolder .topicLink:hover h2, .homePage.pageBusiness main .mainHolder .topicLink:hover h3, .homePage.pageBusiness main .mainHolder .topicLink:hover h4, .homePage.pageBusiness main .mainHolder .topicLink:hover h5, .homePage.pageBusiness main .mainHolder .topicLink:hover h6, .homePage.pageNonResidents main .mainHolder .topicLink:hover span, .homePage.pageNonResidents main .mainHolder .topicLink:hover a, .homePage.pageNonResidents main .mainHolder .topicLink:hover h1, .homePage.pageNonResidents main .mainHolder .topicLink:hover h2, .homePage.pageNonResidents main .mainHolder .topicLink:hover h3, .homePage.pageNonResidents main .mainHolder .topicLink:hover h4, .homePage.pageNonResidents main .mainHolder .topicLink:hover h5, .homePage.pageNonResidents main .mainHolder .topicLink:hover h6 { color: #353535; } .homePage.pageBusiness main .mainHolder .linkBlock:hover, .homePage.pageNonResidents main .mainHolder .linkBlock:hover, .homePage.pageBusiness main .mainHolder .linkBlock:focus, .homePage.pageNonResidents main .mainHolder .linkBlock:focus { background-color: #FFF; } .topicLink:hover span, .homePage.pageBusiness main .mainHolder #blockMobileApp .btnMore:hover, .homePage.pageBusiness main .mainHolder .serviceLink:hover, .homePage.pageBusiness main .mainHolder .topicLink:hover, .homePage.pageBusiness main .mainHolder .topicLink:focus, .homePage.pageBusiness main .mainHolder .topicLink:hover span, .homePage.pageBusiness main .mainHolder .topicLink:hover a, .homePage.pageBusiness main .mainHolder .topicLink:hover h6, .homePage.pageBusiness main .mainHolder .topicLink:hover h5, .homePage.pageBusiness main .mainHolder .topicLink:hover h4, .homePage.pageBusiness main .mainHolder .topicLink:hover h3, .homePage.pageBusiness main .mainHolder .topicLink:hover h2, .homePage.pageBusiness main .mainHolder .topicLink:hover h1, .homePage.pageBusiness main .mainHolder .topicLink:focus span, .homePage.pageBusiness main .mainHolder .topicLink:focus a, .homePage.pageBusiness main .mainHolder .topicLink:focus h6, .homePage.pageBusiness main .mainHolder .topicLink:focus h5, .homePage.pageBusiness main .mainHolder .topicLink:focus h4, .homePage.pageBusiness main .mainHolder .topicLink:focus h3, .homePage.pageBusiness main .mainHolder .topicLink:focus h2, .homePage.pageBusiness main .mainHolder .topicLink:focus h1, .homePage.pageNonResidents main .mainHolder #blockMobileApp .btnMore:hover, .homePage.pageNonResidents main .mainHolder .serviceLink:hover, .homePage.pageNonResidents main .mainHolder .topicLink:hover, .homePage.pageNonResidents main .mainHolder .topicLink:focus, .homePage.pageNonResidents main .mainHolder .topicLink:hover span, .homePage.pageNonResidents main .mainHolder .topicLink:hover a, .homePage.pageNonResidents main .mainHolder .topicLink:hover h6, .homePage.pageNonResidents main .mainHolder .topicLink:hover h5, .homePage.pageNonResidents main .mainHolder .topicLink:hover h4, .homePage.pageNonResidents main .mainHolder .topicLink:hover h3, .homePage.pageNonResidents main .mainHolder .topicLink:hover h2, .homePage.pageNonResidents main .mainHolder .topicLink:hover h1, .homePage.pageNonResidents main .mainHolder .topicLink:focus span, .homePage.pageNonResidents main .mainHolder .topicLink:focus a, .homePage.pageNonResidents main .mainHolder .topicLink:focus h6, .homePage.pageNonResidents main .mainHolder .topicLink:focus h5, .homePage.pageNonResidents main .mainHolder .topicLink:focus h4, .homePage.pageNonResidents main .mainHolder .topicLink:focus h3, .homePage.pageNonResidents main .mainHolder .topicLink:focus h2, .homePage.pageNonResidents main .mainHolder .topicLink:focus h1 { color: #353535; } .homePage.pageBusiness main .mainHolder .topicLink:hover, .homePage.pageNonResidents main .mainHolder .topicLink:hover { color: #353535; } .homePage.pageBusiness .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageBusiness main .mainHolder .tagBlock .blockHead:not(.active) .blockTag:hover { background: #454095; color: #fff; } .homePage.pageNonResidents .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageNonResidents main .mainHolder .tagBlock .blockHead:not(.active) .blockTag:hover { background: #0c818f; color: #fff; } .homePage #blockInfoServices .infoItem a:hover span { color: #353535 !important; } /* .homePage #blockInfoServices .infoItem #infoCommunication:hover:before, .homePage #blockInfoServices .infoItem #infoCommunication:focus:before { background: transparent url(../images/common_icons/orange/icon_service_communication_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_communication_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEmployment:hover:before, .homePage #blockInfoServices .infoItem #infoEmployment:focus:before { background: transparent url(../images/common_icons/orange/icon_service_employment_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_employment_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoHealth:hover:before, .homePage #blockInfoServices .infoItem #infoHealth:focus:before { background: transparent url(../images/common_icons/orange/icon_service_health_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_health_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoTax:hover:before, .homePage #blockInfoServices .infoItem #infoTax:focus:before { background: transparent url(../images/common_icons/orange/icon_service_tax_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_tax_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoCulture:hover:before, .homePage #blockInfoServices .infoItem #infoCulture:focus:before { background: transparent url(../images/common_icons/orange/icon_service_culture_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_culture_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEnvironment:hover:before, .homePage #blockInfoServices .infoItem #infoEnvironment:focus:before { background: transparent url(../images/common_icons/orange/icon_service_environment_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_environment_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoHousing:hover:before, .homePage #blockInfoServices .infoItem #infoHousing:focus:before { background: transparent url(../images/common_icons/orange/icon_service_housing_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_housing_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoTransport:hover:before, .homePage #blockInfoServices .infoItem #infoTransport:focus:before { background: transparent url(../images/common_icons/orange/icon_service_transport_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_transport_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEducation:hover:before, .homePage #blockInfoServices .infoItem #infoEducation:focus:before { background: transparent url(../images/common_icons/orange/icon_service_education_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_education_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoLaw:hover:before, .homePage #blockInfoServices .infoItem #infoLaw:focus:before { background: transparent url(../images/common_icons/orange/icon_service_law_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_law_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoImmigration:hover:before, .homePage #blockInfoServices .infoItem #infoImmigration:focus:before { background: transparent url(../images/common_icons/orange/icon_service_immigration_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_immigration_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoGovweb:hover:before, .homePage #blockInfoServices .infoItem #infoGovweb:focus:before { background: transparent url(../images/common_icons/orange/icon_service_govweb_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_govweb_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoBFI:hover:before, .homePage #blockInfoServices .infoItem #infoBFI:focus:before { background: transparent url(../images/common_icons/orange/icon_service_BFI_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_BFI_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoCSR:hover:before, .homePage #blockInfoServices .infoItem #infoCSR:focus:before { background: transparent url(../images/common_icons/orange/icon_service_CSR_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_CSR_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoDBWM:hover:before, .homePage #blockInfoServices .infoItem #infoDBWM:focus:before { background: transparent url(../images/common_icons/orange/icon_service_DBWM_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBWM_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoDBWG:hover:before, .homePage #blockInfoServices .infoItem #infoDBWG:focus:before { background: transparent url(../images/common_icons/orange/icon_service_DBWG_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBWG_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoEIS:hover:before, .homePage #blockInfoServices .infoItem #infoEIS:focus:before { background: transparent url(../images/common_icons/orange/icon_service_EIS_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_EIS_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoGTIE:hover:before, .homePage #blockInfoServices .infoItem #infoGTIE:focus:before { background: transparent url(../images/common_icons/orange/icon_service_GTIE_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_GTIE_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoHR:hover:before, .homePage #blockInfoServices .infoItem #infoHR:focus:before { background: transparent url(../images/common_icons/orange/icon_service_HR_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_HR_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoMIS:hover:before, .homePage #blockInfoServices .infoItem #infoMIS:focus:before { background: transparent url(../images/common_icons/orange/icon_service_MIS_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_MIS_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoRL:hover:before, .homePage #blockInfoServices .infoItem #infoRL:focus:before { background: transparent url(../images/common_icons/orange/icon_service_RL_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_RL_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoSFLF:hover:before, .homePage #blockInfoServices .infoItem #infoSFLF:focus:before { background: transparent url(../images/common_icons/orange/icon_service_SFLF_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_SFLF_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoTaxes:hover:before, .homePage #blockInfoServices .infoItem #infoTaxes:focus:before { background: transparent url(../images/common_icons/orange/icon_service_Taxes_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_Taxes_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoVHK:hover:before, .homePage #blockInfoServices .infoItem #infoVHK:focus:before { background: transparent url(../images/common_icons/orange/icon_service_VHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_VHK_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoWHK:hover:before, .homePage #blockInfoServices .infoItem #infoWHK:focus:before { background: transparent url(../images/common_icons/orange/icon_service_WHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_WHK_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoSIHK:hover:before, .homePage #blockInfoServices .infoItem #infoSIHK:focus:before { background: transparent url(../images/common_icons/orange/icon_service_SIHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_SIHK_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoIS:hover:before, .homePage #blockInfoServices .infoItem #infoIS:focus:before { background: transparent url(../images/common_icons/orange/icon_service_IS_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_IS_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoLIHK:hover:before, .homePage #blockInfoServices .infoItem #infoLIHK:focus:before { background: transparent url(../images/common_icons/orange/icon_service_LIHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_LIHK_orange.svg) no-repeat center center; } .homePage #blockInfoServices .infoItem #infoDBIHK:hover:before, .homePage #blockInfoServices .infoItem #infoDBIHK:focus:before { background: transparent url(../images/common_icons/orange/icon_service_DBIHK_orange.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_DBIHK_orange.svg) no-repeat center center; } */ .homePage .checkItOutSlider .owl-controls { display: block; } .homePage #blockInfoServices .infoItem span { max-width: 80%; } .homeTop { padding-top: 62px; } .webCastOn .homeTop { padding-top: 114px; padding-bottom: 0px; } .searchBlock { width: 65%; } } @media screen and (max-width: 1024px) { .homePage #blockInfoServices .infoItem span { max-width: 72%; } .homePage main .tagArea .homeTab { padding: 0 20px; } .tagBlock .blockTag:before { right: 15px; } .tagBlock .blockTag { padding: 0 20px; } .homePage #blockQnA .qaHolder { padding: 20px; } } @media screen and (max-width: 767px) { .searchBlock { width: 100%; } .homeNav { padding-top: 20px; } .homeNav .tagArea .homeTab { padding: 0 20px 0 20px; height: 48px; } .homeNav .tagArea .homeTab { /*width: calc(100% * 1/3.0001 - 8px * 2/3); margin-right: 8px;*/ width: calc(100% * 1/3.0001 - 12px * 2/3); margin-right: 12px; } .homePage #blockInfoServices .infoItem { border-right: 1px solid #FFF !important; } .homePage #blockEnquiries .inlineBreaker { display: none; } .homePage #blockEnquiries .enquiresLinks a { width: 100%; } .homePage main .tagArea .homeTab { width: calc(33.3333333% - 40px / 3); margin-right: 20px; } .homePage #blockAnnounce { height: 400px; } .homePage #blockAnnounce .swiper-slide .annouceCover, .homePage #blockAnnounce .swiper-slide .annouceArticle { position: absolute; width: 100%; float: none; height: auto; } .homePage #blockAnnounce .swiper-slide .annouceCover { position: relative; top: 0px; left: 0px; float: none; } .homePage #blockAnnounce .swiper-slide .annouceCover img { height: auto; width: 100%; float: none; max-width: initial; } .homePage #blockAnnounce .swiper-slide .annouceArticle { position: relative; bottom: auto; padding: 25px 25px 60px; margin-top: 0; } .homePage #blockAnnounce .slide .annouceCover, .homePage #blockAnnounce .slide .annouceArticle { position: absolute; width: 100%; float: none; height: auto; } .homePage #blockAnnounce .slide .annouceCover { position: relative; top: 0px; left: 0px; float: none; } .homePage #blockAnnounce .slide .annouceCover img { height: auto; width: 100%; float: none; max-width: initial; } .homePage #blockAnnounce .slide .annouceArticle { position: relative; bottom: auto; padding: 25px 25px 60px; margin-top: 0; } .homePage #blockAnnounce .owl-controls { position: absolute; left: 0; bottom: 0px; text-align: center; width: 100%; } .homePage #blockTopStory { margin-top: 5px; margin-bottom: 10px; } .homePage #blockInfoServices .infoItem span { max-width: 70%; } .homePage #blockQuickLinks .blockInnerCol-1-3 { margin: 0; padding: 0 15px; } .homePage #blockQuickLinks .blockInnerCol-1-3:first-child { padding-top: 15px; } .homePage #blockQuickLinks .blockInnerCol-1-3:last-child { padding-bottom: 25px; } .homePage #blockQuickLinks .quickLink { padding: 10px 5px; } .homePage #blockInfoServices .infoItem:last-child { border-bottom: 1px solid #f8efe5; } .homePage #blockQnA { margin-top: 10px; } .homePage #blockQnA.active { margin-top: 10px; } .homePage #blockQnA .qaHolder { padding: 25px; } .homePage #checkItOut { display: none; } .homePage #blockEnquiries { height: auto; } .homePage #blockEnquiries .enquiresLinks { padding: 15px; display: block; float: left; margin: 0; list-style: disc; } .homePage #blockEnquiries .enquiresLinks li { display: list-item; margin-left: 25px; margin-bottom: 20px; color: #cc4c02; } .homePage #blockEnquiries .enquiresLinks li:first-child { margin-top: 10px; } .homePage #blockEnquiries .enquiresLinks li:last-child { margin-bottom: 10px; } .homePage #blockEnquiries .enquiresLinks li a { margin: 0 auto; } .homePage #blockMobileApp { margin-top: 10px; } .homePage #blockMobileApp .btnMore { display: none; } .homePage #blockMobileApp.expandMb.active .btnMore { display: block; } .homePage .checkItOutSlider .slide { padding: 0; } .homePage .checkItOutSlider .checkItOutHolder { margin-top: 10px; } .homePage .checkItOutSlider .blockHead { margin-top: 5px; } .homePage.pageResidents .tagBlock .blockHead:not(.active) .blockTag, .homePage.pageBusiness .tagBlock .blockHead:not(.active) .blockTag, .homePage.pageNonResidents .tagBlock .blockHead:not(.active) .blockTag { background: initial; } .homePage.pageResidents .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageBusiness .tagBlock .blockHead:not(.active) .blockTag:hover, .homePage.pageNonResidents .tagBlock .blockHead:not(.active) .blockTag:hover { background: initial; } .homePage .blockRow .gridBlock.blockTagHolderBg { margin: 5px auto 0; } .homePage .tagBlock.blockTagHolder .blockHead { margin-bottom: 15px; } .homePage .tagBlock.blockTagHolder .blockHead:nth-last-child(2) { margin-bottom: 0; } } @media screen and (max-width: 480px) { .homeNav .tagArea .homeTab { text-align: left; padding: 8px; } .homeNav .tagArea .homeTab span { max-width: 80%; } .homePage #blockMobileApp .mobAppItem img { width: 40%; } } @media screen and (max-width: 380px) { .homePage header.doYouKnowOn #doYouKnow { padding-top: 10px; } #doYouKnow .closeBtn { right: -4px; } } /* === 15:43 2017-03-31 === easter fix for search keyword cannot be click, z-index from "1" to "-1" */ .homePage.themeCNY .homeNav { background-image: url(../images/home/theme/chinese_new_year_bar.png?a=20181009); } .homePage.themeCNY .homeNav .homeNavBgOject { background-image: url(../images/home/theme/chinese_new_year.png?a=20190319a); } .homePage.themeChristmas .homeNav { background-image: url(../images/home/theme/christmas_bar_1.png?a=20190319a); } .homePage.themeChristmas .homeNav .homeNavBgOject { background-image: url(../images/home/theme/christmas_graphic_1.png?a=20190319a); } .homePage.themeChristmas02 .homeNav { background-image: url(../images/home/theme/christmas_bar_2.png?a=20190319a); } .homePage.themeChristmas02 .homeNav .homeNavBgOject { background-image: url(../images/home/theme/christmas_graphic_2.png?a=20190319a); } .homePage.themeMAF .homeNav { background-image: url(../images/home/theme/mid_autumn_festval_bar.png?a=20190822a); } .homePage.themeMAF .homeNav .homeNavBgOject { background-image: url(../images/home/theme/mid_autumn_festval.png?a=20190822a); } .homePage.themeEaster .homeNav { background-image: url(../images/home/theme/easter_bar.png?a=20190319a); } .homePage.themeEaster .homeNav .homeNavBgOject { background-image: url(../images/home/theme/easter_graphic.png?a=20190319a); } .homePage.theme71 .homeNav { background-image: url(../images/home/theme/7_1_bar.png?a=20190319a); } .homePage.theme71 .homeNav .homeNavBgOject { background-image: url(../images/home/theme/7_1_top.png?a=20190319a); z-index: -1; } .homePage.theme71 .homeNav .homeNavBgOjectLower { background-image: url(../images/home/theme/7_1_bottom.png?a=20190319a); z-index: 1; display: block; } .homePage.themeFather .homeNav { background-image: url(../images/home/theme/father_day_bar.png?a=20190319a); } .homePage.themeFather .homeNav .homeNavBgOject { background-image: url(../images/home/theme/father_day_graphic_EN_top.png?a=20190319a); z-index: -1; } .homePage.themeFather .homeNav .homeNavBgOjectLower { background-image: url(../images/home/theme/father_day_graphic_EN_bottom.png?a=20190319a); z-index: 1; display: block; } /* 10:03 2019-03-19 change Father and Mother to align EN TC SC, update cache date */ .homePage.themeFatherSC .homeNav { background-image: url(../images/home/theme/father_day_bar.png?a=20190319a); } .homePage.themeFatherSC .homeNav .homeNavBgOject { background-image: url(../images/home/theme/father_day_graphic_SC_top.png?a=20190319a); z-index: -1; } .homePage.themeFatherSC .homeNav .homeNavBgOjectLower { background-image: url(../images/home/theme/father_day_graphic_SC_bottom.png?a=20190319a); z-index: 1; display: block; } .homePage.themeFatherTC .homeNav { background-image: url(../images/home/theme/father_day_bar.png?a=20190319a); } .homePage.themeFatherTC .homeNav .homeNavBgOject { background-image: url(../images/home/theme/father_day_graphic_TC_top.png?a=20190319a); z-index: -1; } .homePage.themeFatherTC .homeNav .homeNavBgOjectLower { background-image: url(../images/home/theme/father_day_graphic_TC_bottom.png?a=20190319a); z-index: 1; display: block; } .homePage.themeMother .homeNav { background-image: url(../images/home/theme/mother_day_bar.png?a=20190319a); } .homePage.themeMother .homeNav .homeNavBgOject { background-image: url(../images/home/theme/mother_day_EN_graphic.png?a=20190319a); margin-left:-25px; /* 12:00 2017-03-30 to align the grapics and bar */ z-index: -1; } .homePage.themeMotherSC .homeNav { background-image: url(../images/home/theme/mother_day_bar.png?a=20190319a); } .homePage.themeMotherSC .homeNav .homeNavBgOject { background-image: url(../images/home/theme/mother_day_SC_graphic.png?a=20190319a); margin-left:-25px; /* 12:00 2017-03-30 to align the grapics and bar */ z-index: -1; } .homePage.themeMotherTC .homeNav { background-image: url(../images/home/theme/mother_day_bar.png?a=20190319a); } .homePage.themeMotherTC .homeNav .homeNavBgOject { background-image: url(../images/home/theme/mother_day_TC_graphic.png?a=20190319a); margin-left:-25px; /* 12:00 2017-03-30 to align the grapics and bar */ z-index: -1; } .homePage.themeNational .homeNav { background-image: url(../images/home/theme/national_day_bar.png?a=20190822a); } .homePage.themeNational .homeNav .homeNavBgOject { background-image: url(../images/home/theme/national_day_graphic_top.png?a=20190822a); z-index: -1; } .homePage.themeNational .homeNav .homeNavBgOjectLower { background-image: url(../images/home/theme/national_day_graphic_bottom.png?a=20190822a); z-index: 1; display: block; } .homePage.themePicnic .homeNav { background-image: url(../images/home/theme/picnic_bar.png?a=20190913a); } .homePage.themePicnic .homeNav .homeNavBgOject { background-image: url(../images/home/theme/picnic_graphic.png?a=20190913a); z-index: -1; } .homePage.themeSchoolYear .homeNav { background-image: url(../images/home/theme/school_year_start_bar.png?a=20190319a); } .homePage.themeSchoolYear .homeNav .homeNavBgOject { background-image: url(../images/home/theme/school_year_start_top.png?a=20190319a); z-index: -1; } .homePage.themeSchoolYear .homeNav .homeNavBgOjectLower { background-image: url(../images/home/theme/school_year_start_bottom.png?a=20190319a); z-index: 1; display: block; } /* 10:28 2018-08-16 move SchoolYear Image to "center" on mobile (by adjust margin) */ @media screen and (max-width: 767px) { .homePage.themeSchoolYear .homeNav .homeNavBgOject { margin-left:-30px; background-image: url(../images/home/theme/school_year_start_top.png?a=20190319a); z-index: -1; } .homePage.themeSchoolYear .homeNav .homeNavBgOjectLower { margin-left:-30px; background-image: url(../images/home/theme/school_year_start_bottom.png?a=20190319a); z-index: 1; display: block; } } .homePage.themeSummer .homeNav { background-image: url(../images/home/theme/summer_bar.png?a=20190319a); } .homePage.themeSummer .homeNav .homeNavBgOject { background-image: url(../images/home/theme/summer_graphic_top.png?a=20190319a); z-index: -1; } .homePage.themeSummer .homeNav .homeNavBgOjectLower { background-image: url(../images/home/theme/summer_graphic_bottom.png?a=20190319a); z-index: 1; display: block; } /* ================================================================================================= _layout_innerpage.scss > imported by layout.scss > Styles for uncategorized pages (e.g. sitemap) in batch 3-5 * @TODO Use Variables * @TODO Simplify ================================================================================================= */ .commonlyUsed .searchTitle { margin-bottom: 10px; } .commonlyUsed .searchWrap { width: 100%; max-width: 335px; position: relative; } .commonlyUsed .searchWrap .searchMainBar { border: 1px solid #cc4c02; width: 100%; height: 43px; text-indent: 13px; padding-right: 43px; } .commonlyUsed .searchWrap .searchButton { position: absolute; top: 0; right: 0; } .commonlyUsed .searchWrap .searchMainBtn { background-color: #FFF; background-image: url(../images/common_icons/orange/icon_search_orange.svg); background-size: 20px 20px; background-position: center center; background-repeat: no-repeat; width: 43px; height: 43px; margin-left: -5px; border-top: 1px solid #cc4c02; border-bottom: 1px solid #cc4c02; border-left: 0; border-right: 1px solid #cc4c02; } .commonlyUsed .searchResult { padding: 20px 30px; background-color: #fff; margin: 40px 0; border-bottom: 5px solid #c9c9c9 /* &.multiLang { .result { .currentLang { color: #990000; border-right: 1px solid #c9c9c9; padding-right: 15px; margin-right: 10px; } .otherLang { color: #454095; } } } */ } @media screen and (max-width: 767px) { .commonlyUsed .searchResult { padding: 12px; } } .commonlyUsed .searchResult .keywords { color: #cc4c02; } .commonlyUsed .searchResult .underline { border-bottom: 2px solid #cccccc; padding: 15px 5px; } .commonlyUsed .searchResult .result strong { color: #cc4c02; } .commonlyUsed .searchResult .result ol { padding-top: 15px; } .commonlyUsed .searchResult .result ol li { color: #951717; padding: 10px 0; } .commonlyUsed .searchResult .result ol li a { color: #951717; } .commonlyUsed .searchResult .result ul { list-style-type: disc; list-style: disc; padding-left: 25px; } .commonlyUsed .searchResult .result ul li { padding: 20px 0; color: #990000; width: 100%; position: relative; } .commonlyUsed .searchResult .result ul li > div { display: inline-block; vertical-align: top; } .commonlyUsed .searchResult .result ul li a { color: #990000; margin: 0 5px; position: relative; } .commonlyUsed .searchResult .result ul li a:hover { text-decoration: underline; } @media screen and (max-width: 1200px) { .commonlyUsed .searchResult .result ul li a:hover { text-decoration: none; } } .commonlyUsed .searchResult .result ul li .left { display: block; float: left; } .commonlyUsed .searchResult .result ul li .right { display: block; float: right; } .commonlyUsed .searchResult .result ul li .right img { width: 19px; } .commonlyUsed .searchResult .result ul li .eformsNotes a:after { content: ''; display: inline-block; position: absolute; top: 0; right: -5px; height: 100%; width: 1px; background: #990000; } .commonlyUsed .searchResult .result ul li .eformsNotes a:last-child:after { display: none; } .commonlyUsed .searchResult .result ul li:before { content: ''; position: absolute; left: -25px; bottom: 0; height: 1px; width: calc(25px + 100%); background: #cbcbcb; } .commonlyUsed .searchResult .result ul li:last-child:before { display: none; } .commonlyUsed .hotSearch { padding-bottom: 25px; border-bottom: 1px solid #cbcbcb; margin-bottom: 30px; margin-top: 30px; } .commonlyUsed .hotSearch strong { padding-bottom: 5px; display: block; } .commonlyUsed .hotSearch a { color: #990000; margin-right: 10px; } .commonlyUsed .hotSearch a:after { content: ','; } .commonlyUsed .hotSearch a:last-child:after { content: ''; } .commonlyUsed .residentInfoForm { padding-top: 30px; padding-bottom: 30px; } @media screen and (max-width: 767px) { .commonlyUsed .residentInfoForm { margin: 0 auto; } } .commonlyUsed .pageIntro { margin-bottom: 25px; } .commonlyUsed .pageIntro.whiteBg { padding: 50px 50px 30px 50px; background-color: #fff; } @media screen and (max-width: 767px) { .commonlyUsed .pageIntro.whiteBg { padding: 25px 25px 15px 25px; } } .commonlyUsed .pageIntro.whiteBg p { margin-bottom: 20px; } .commonlyUsed .pageIntro.whiteBg .blueText { color: #454095; } .commonlyUsed .availableFormat { margin-bottom: 5px; } .commonlyUsed .availableFormat .intro { margin-bottom: 15px; } .commonlyUsed .availableFormat div { display: table; float: left; margin-bottom: 15px; margin-right: 15px; } .commonlyUsed .availableFormat div.txtColumnMargin { margin-right: 0; } .commonlyUsed .availableFormat div.fullBlock { width: 100%; float: none; } .commonlyUsed .availableFormat div.col-xs-3 { margin: 0; padding-left: 0; margin-bottom: 15px; } .commonlyUsed .availableFormat div span { display: table-cell; vertical-align: top; } .commonlyUsed .availableFormat div span.txt { width: calc(100% - 40px); text-align: left; } .commonlyUsed .availableFormat div span.txtFull { width: 100%; text-align: left; } .commonlyUsed .availableFormat div span.icon { width: 22px; display: inline-block; } .commonlyUsed .availableFormat div span.icon img { width: 17px; max-width: 17px; } .commonlyUsed .availableFormat .outro { margin-top: 35px; } @media screen and (max-width: 767px) { .commonlyUsed .availableFormat .outro { margin-top: 5px; } } .commonlyUsed .availableFormat .learnMore { margin-top: 40px; color: #990000; float: none; width: auto; } .commonlyUsed .tabBtns { display: table; margin-bottom: 15px; width: 100%; } .commonlyUsed .tabBtns .tabBtn { display: table-cell; text-align: center; vertical-align: middle; background-color: #ccc; height: 65px; padding-left: 35px; padding-right: 35px; border-bottom: 2px solid #707070; width: 250px; } :lang(zh-hk) .commonlyUsed .tabBtns .tabBtn, :lang(zh-cn) .commonlyUsed .tabBtns .tabBtn { white-space: nowrap; } .commonlyUsed .tabBtns .tabBtn:hover { text-decoration: none !important; } .commonlyUsed .tabBtns .tabBtn.active { /* background-color: transparent; 17:20 2021-04-15 org */ background-color: #FFFFFF; /* 17:20 2021-04-15 new */ border: 2px solid #707070; border-bottom: none; } .commonlyUsed .tabBtns .tabSpace { width: auto; display: table-cell; background-color: transparent; border-bottom: 2px solid #707070; } .commonlyUsed .accordions { display: none; } .commonlyUsed .accordions .accordionTitle { padding: 15px 0; float: left; } .commonlyUsed .accordions.active { display: block; } .commonlyUsed .accordions .accordionContent { background-color: #fff; padding: 25px 30px; margin-top: 8px; border-bottom: 5px solid #c9c9c9; } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent { padding: 20px 25px; } } .commonlyUsed .accordions .accordionContent:first-child { margin-top: 0; } .commonlyUsed .accordions .accordionContent .firstLevel > li { padding-bottom: 20px; } .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle { border-bottom: 2px solid #CCC; padding-bottom: 20px; position: relative; cursor: pointer; display: block; } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle > span { display: block; } } .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle .firstLevelTitleName { border-right: 1px solid #c9c9c9; padding-right: 15px; margin-right: 10px; display: inline-block; } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle .firstLevelTitleName { display: inline; } } .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle .firstLevelTitleNameOtherLang { color: #454095; display: inline-block; } .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle:after { position: absolute; content: " "; width: 17px; height: 17px; right: 0; top: 50%; margin-top: -7px; background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_arrow_down_black.svg) no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle:after { width: 15px; height: 15px; right: 0; } } .commonlyUsed .accordions .accordionContent .firstLevel > li .firstLevelTitle.noAccordion:after { display: none; } .commonlyUsed .accordions .accordionContent .firstLevel > li.active .firstLevelTitle { border-bottom: 2px solid #CCC; padding-bottom: 20px; } .commonlyUsed .accordions .accordionContent .firstLevel > li.active .firstLevelTitle:after { background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_arrow_up_black.svg) no-repeat center center; background-size: 100%; } .commonlyUsed .accordions .accordionContent .firstLevel > li:last-child { padding: 0; } .commonlyUsed .accordions .accordionContent .firstLevel > li:last-child .firstLevelTitle { border: none; padding: 0; padding-right: 25px; } .commonlyUsed .accordions .accordionContent.active .firstLevel > li { padding-bottom: 20px; } .commonlyUsed .accordions .accordionContent .secondLevel { margin-top: 20px; display: none; border-top: 2px solid #CCC; padding-top: 20px; display: none; } .commonlyUsed .accordions .accordionContent .secondLevel a { color: #990000; } .commonlyUsed .accordions .accordionContent .secondLevel a:hover { text-decoration: underline; } @media screen and (max-width: 1200px) { .commonlyUsed .accordions .accordionContent .secondLevel a:hover { text-decoration: none; } } .commonlyUsed .accordions .accordionContent .secondLevel .secondLevelTitle { padding-left: 20px; padding-bottom: 0; padding-right: 50px; position: relative; cursor: pointer; } .commonlyUsed .accordions .accordionContent .secondLevel .secondLevelTitle.arrow:after { position: absolute; content: " "; width: 14px; height: 14px; right: 30px; top: 0; background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_arrow_down_black.svg) no-repeat center center; background-size: 100% !important; } .commonlyUsed .accordions .accordionContent .secondLevel.active .secondLevelTitle { padding-bottom: 20px; border-bottom: 1px solid #cbcbcb; } .commonlyUsed .accordions .accordionContent .secondLevel.active .secondLevelTitle.arrow:after { background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_arrow_up_black.svg) no-repeat center center; } .commonlyUsed .accordions .accordionContent .secondLevel ul { display: block; } .commonlyUsed .accordions.online-service { display: block /* &.multiLang { .accordionTitle { >span { float: left; padding: 0 10px; border-left: 2px solid #CCC; &:first-child { padding-left: 0; border-left: none; } &.blue { color: #454095; } } } .secondLevel { .secondLevelContent { border-top: 0; margin-top: 0; ul { li { color: #990000; margin-bottom: 15px; &:last-child { margin-bottom: 0; } } } } } } */ } .commonlyUsed .accordions.online-service .accordionContent.active .firstLevel > li { padding-bottom: 0; } .commonlyUsed .accordions.online-service .secondLevel { padding-top: 0; padding-bottom: 0; } .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent { border-top: 1px solid #c9c9c9; margin-top: 20px; padding-top: 20px; } .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns a, .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns span { position: relative; color: #454095; font-family: Arial, sans-serif; } @media screen and (max-width: 767px) { .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns a, .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns span { display: block; } } .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns a.red, .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns span.red { color: #990000; border-right: 1px solid #c9c9c9; padding-right: 10px; padding-left: 0; margin-right: 5px; } @media screen and (max-width: 767px) { .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns a.red, .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns span.red { display: inline; } } .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns a.red:last-child, .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent .btns span.red:last-child { border: none; margin-right: 0; padding-right: 0; } /* 17:11 2021-04-15 add deepOrange for residents */ .commonlyUsed.siteMap .tabBtns .tabBtn.deepOrange { background-color: #CC4C02; color: #FFF; } .commonlyUsed.siteMap .tabBtns .tabBtn.deepOrange.active { background-color: #FFFFFF; /* 17:20 2021-04-15 new */ } .commonlyUsed.siteMap .tabBtns .tabBtn.deepBlue { background-color: #454095; color: #FFF; } .commonlyUsed.siteMap .tabBtns .tabBtn.deepBlue.active { /* background-color: transparent; 17:20 2021-04-15 org */ background-color: #FFFFFF; /* 17:20 2021-04-15 new */ } .commonlyUsed.siteMap .tabBtns .tabBtn.lightGreen { /* background-color: #0f9fb0; 17:16 2021-04-15 org: */ background-color: #0C818F; /* 17:16 2021-04-15 new */ color: #FFF; } .commonlyUsed.siteMap .tabBtns .tabBtn.lightGreen.active { /* background-color: transparent; 17:20 2021-04-15 org */ background-color: #FFFFFF; /* 17:20 2021-04-15 new */ } .commonlyUsed.siteMap .tabBtns .tabBtn.active h2 { color: #cc4c02; } .commonlyUsed.siteMap .accordions .accordionContent .secondLevel a { display: block; padding: 5px 0; } .commonlyUsed.siteMap .redPt { color: #990000; padding-left: 30px; position: relative; margin-bottom: 7px; } .commonlyUsed .onlineServicesLegend { display: block; width: auto; float: right; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 767px) { .commonlyUsed .onlineServicesLegend { display: block; width: 100%; float: none; position: relative; -webkit-transform: none; -ms-transform: none; transform: none; margin-top: 10px; } } .commonlyUsed .fileFormatIcon, .commonlyUsed .onlineServicesLegend .legendIcon, .commonlyUsed .onlineServicesLegend li, .commonlyUsed .eFormsLegend a { width: 17px; height: 17px; padding: 0; margin-right: 20px; border: none; float: left; text-indent: -9999px; background: url(../images/common_icons/icon_for_batch_4_5/This_service.png) no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { .commonlyUsed .fileFormatIcon, .commonlyUsed .onlineServicesLegend .legendIcon, .commonlyUsed .onlineServicesLegend li, .commonlyUsed .eFormsLegend a { float: none; margin-left: 0; margin-right: 15px; display: inline-block; vertical-align: top; } } .commonlyUsed .fileFormatIcon.easyfillform, .commonlyUsed .onlineServicesLegend .legendIcon.easyfillform, .commonlyUsed .onlineServicesLegend li.easyfillform, .commonlyUsed .eFormsLegend a.easyfillform { background-image: url(../images/common_icons/icon_for_batch_4_5/LD_e_form.png); } .commonlyUsed .fileFormatIcon.easysignon, .commonlyUsed .onlineServicesLegend .legendIcon.easysignon, .commonlyUsed .onlineServicesLegend li.easysignon, .commonlyUsed .eFormsLegend a.easysignon { background-image: url(../images/common_icons/icon_for_batch_4_5/This_service.png); } .commonlyUsed .fileFormatIcon.onlinepayment, .commonlyUsed .onlineServicesLegend .legendIcon.onlinepayment, .commonlyUsed .onlineServicesLegend li.onlinepayment, .commonlyUsed .eFormsLegend a.onlinepayment { background-image: url(../images/common_icons/icon_for_batch_4_5/Online_payment.png); } .commonlyUsed .fileFormatIcon.password, .commonlyUsed .onlineServicesLegend .legendIcon.password, .commonlyUsed .onlineServicesLegend li.password, .commonlyUsed .eFormsLegend a.password { background-image: url(../images/common_icons/icon_for_batch_4_5/PW_or_Digital_Certificate.png); } .commonlyUsed .fileFormatIcon.printing, .commonlyUsed .onlineServicesLegend .legendIcon.printing, .commonlyUsed .onlineServicesLegend li.printing, .commonlyUsed .eFormsLegend a.printing { background-image: url(../images/common_icons/icon_for_batch_4_5/Printing.png); } .commonlyUsed .fileFormatIcon.digitalcert, .commonlyUsed .onlineServicesLegend .legendIcon.digitalcert, .commonlyUsed .onlineServicesLegend li.digitalcert, .commonlyUsed .eFormsLegend a.digitalcert { background-image: url(../images/common_icons/icon_for_batch_4_5/Digital_certificate.png); } .commonlyUsed .fileFormatIcon.scanning, .commonlyUsed .onlineServicesLegend .legendIcon.scanning, .commonlyUsed .onlineServicesLegend li.scanning, .commonlyUsed .eFormsLegend a.scanning { background-image: url(../images/common_icons/icon_for_batch_4_5/Scanning.png); } .commonlyUsed .fileFormatIcon.onlineform, .commonlyUsed .onlineServicesLegend .legendIcon.onlineform, .commonlyUsed .onlineServicesLegend li.onlineform, .commonlyUsed .eFormsLegend a.onlineform { background-image: url(../images/common_icons/icon_for_batch_4_5/Online_Form.png); } .commonlyUsed .fileFormatIcon.pdf, .commonlyUsed .onlineServicesLegend .legendIcon.pdf, .commonlyUsed .onlineServicesLegend li.pdf, .commonlyUsed .eFormsLegend a.pdf { background-image: url(../images/common_icons/icon_filetype_pdf.png); } .commonlyUsed .fileFormatIcon.richtext, .commonlyUsed .onlineServicesLegend .legendIcon.richtext, .commonlyUsed .onlineServicesLegend li.richtext, .commonlyUsed .eFormsLegend a.richtext { background-image: url(../images/common_icons/icon_for_batch_4_5/Rich_Text.png); } .commonlyUsed .fileFormatIcon.msword, .commonlyUsed .onlineServicesLegend .legendIcon.msword, .commonlyUsed .onlineServicesLegend li.msword, .commonlyUsed .eFormsLegend a.msword { background-image: url(../images/common_icons/icon_filetype_word.png); } .commonlyUsed .fileFormatIcon.eft, .commonlyUsed .onlineServicesLegend .legendIcon.eft, .commonlyUsed .onlineServicesLegend li.eft, .commonlyUsed .eFormsLegend a.eft { background-image: url(../images/common_icons/icon_for_batch_4_5/e_form.png); } .commonlyUsed .onlineServicesLegend li { margin-right: 5px; } @media screen and (max-width: 767px) { .commonlyUsed .onlineServicesLegend li { margin-left: 0; margin-right: 15px; } } .commonlyUsed .onlineServicesLegend .legendIcon { margin-right: 5px; } .commonlyUsed .onlineServicesKeywords, .commonlyUsed .eformsKeywords { display: none; } .commonlyUsed .dataList.secondLevelList { margin-top: 0; padding-left: 40px; } .commonlyUsed .dataList.secondLevelList:first-child { border-top: 0; } .commonlyUsed .dataList.secondLevelList > li:after { left: -40px; width: calc(40px + 100%); } .commonlyUsed .dataList > li { padding: 20px 0; color: #990000; position: relative; } .commonlyUsed .dataList > li:after { content: ''; position: absolute; left: -25px; bottom: 0; height: 1px; width: calc(25px + 100%); background: #cbcbcb; } .commonlyUsed .dataList > li:last-child:after { display: none; } .commonlyUsed .dataList > li a { color: #990000; } @media screen and (max-width: 767px) { .commonlyUsed .dataList > li.hasLegend > div { width: calc(100% - 120px); } } .commonlyUsed .dataList > li > div { display: block; float: none; max-width: calc(100% - 140px); } @media screen and (max-width: 767px) { .commonlyUsed .dataList > li > div { max-width: 100%; } } .commonlyUsed .dataList > li > div.eformsDetailsHolder { width: 100%; display: inline-block; float: none; overflow: hidden; vertical-align: top; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails { width: calc(100% - 150px); float: left; position: relative; } @media screen and (max-width: 767px) { .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails { width: 100%; } } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails .icon { display: none; position: absolute; left: 0; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails .icon img { width: 17px; height: auto; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails.withIcon { padding-left: 25px; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails.withIcon .icon { display: block; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails .eformsTitle { display: block; float: left; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsDetails .eformsNotes { padding-top: 10px; display: block; float: left; width: 100%; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsOthers { width: 130px; float: right; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsOthers .eformsFormats { display: block; width: 100%; color: #000; } @media screen and (max-width: 767px) { .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsOthers .eformsFormats { margin-right: 10px; } } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsOthers .eFormsLegend { display: block; width: 100%; margin-top: 10px; } @media screen and (max-width: 767px) { .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsOthers { width: 100%; margin-top: 15px; } .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsOthers .eformsFormats, .commonlyUsed .dataList > li > div.eformsDetailsHolder .eformsOthers .eFormsLegend { display: inline-block; width: auto; } } .commonlyUsed .dataList > li .dataRow { padding-left: 20px; color: #990000; display: table; } .commonlyUsed .dataList > li .dataRow .btns { margin-top: 8px; } .commonlyUsed .dataList > li .dataRow .btns span { border-right: 1px solid #c9c9c9; padding-right: 15px; margin-right: 15px; } .commonlyUsed .dataList > li .dataRow .btns span:last-child { border: none; padding: 0; margin: 0; } .commonlyUsed .dataList > li .dataRow .dataCell { display: table-cell; } .commonlyUsed .dataList > li .dataRow .dataCell.dataLeft { position: relative; padding-left: 25px; padding-right: 25px; } .commonlyUsed .dataList > li .dataRow .dataCell.dataLeft:before { content: "."; position: absolute; top: -14px; left: 5px; } .commonlyUsed .dataList > li .dataRow .dataCell.dataRight { width: 110px; color: #000; text-align: center; white-space: nowrap; } .commonlyUsed .dataList > li .dataRow .dataCell.dataRight span.icon { margin: 5px; display: inline-block; } .commonlyUsed .dataList > li .dataRow .dataCell.dataRight img { width: 17px; height: 17px; } .commonlyUsed .tableCell.notfound { margin-top: 15px; } .imgGovFrom { text-align: center; margin: 30px 0; } .imgGovFromDisplay { display: inline-block; } .txtColumnMargin { margin-right: 0; } .txtColumn2 { position: relative; width: 100%; float: left; } .txtColumn3 { width: calc(100% - 670px); text-align: left; } @media screen and (max-width: 767px) { .txtColumn3 { width: calc(100% - 560px); } } @media screen and (max-width: 480px) { .txtColumn3 { width: calc(100% - 195px); } } @media screen and (max-width: 767px) { .commonlyUsed .searchResult.withDataFormat .result ul li a .left, .commonlyUsed .searchResult.withDataFormat .result ul li .right { float: none; } } body.innerPage .notifcationPage .innerPageHolder { background-color: transparent; padding: 0; } body.innerPage .notifcationPage .innerPageWrapper .txtnBtn { margin-top: 13px; margin-bottom: 17px; } body.innerPage .notifcationPage .innerPageWrapper .txtnBtn a, body.innerPage .notifcationPage .innerPageWrapper .txtnBtn p { display: block; float: left; } body.innerPage .notifcationPage .innerPageWrapper .txtnBtn p { margin-top: 5px; margin-right: 12px; } body.innerPage .notifcationPage .innerPageWrapper .txtnBtn .cateBtn { background-color: #707070; padding: 8px 35px 10px 20px; color: #FFF; border-bottom: 2px solid #2f2f2f; position: relative; } body.innerPage .notifcationPage .innerPageWrapper .txtnBtn .cateBtn:after { position: absolute; content: " "; width: 20px; height: 20px; top: 50%; margin-top: -10px; right: 10px; background-image: url(../images/common_icons/white/icon_arrow_down_white.svg); background-repeat: no-repeat; background-position: center center; } body.innerPage .notifcationPage .innerPageWrapper table a { color: #951717; } body.innerPage .notifcationPage .blockTable table .timeCell { width: 145px; } body.innerPage .notifcationPage .blockTable table .dateCell { width: 210px; } body.innerPage .notifcationPage .blockTable table .nameCell { width: 30%; } body.innerPage .notifcationPage .blockTable table .mobCell { width: 70%; } body.innerPage .notifcationPage .blockTable table td { vertical-align: middle; padding: 20px; } body.innerPage .notifcationPage .blockTable table td > div { padding-bottom: 15px; } body.innerPage .notifcationPage .blockTable table td > div:last-child { padding-bottom: 0; } body.innerPage .notifcationPage .blockTable table td.subTable { padding: 0; } body.innerPage .notifcationPage .blockTable table td.subTable a { display: block; } body.innerPage .notifcationPage .blockTable table td.subTable > table { width: 100%; } body.innerPage .notifcationPage .blockTable table td.subTable table tr { border-bottom: 1px solid #ccc; } body.innerPage .notifcationPage .blockTable table td.subTable table tr:last-child { border-bottom: none; } body.innerPage .notifcationPage .blockTable table td.subTable table td { border: none; border-right: 1px solid #ccc; } body.innerPage .notifcationPage .blockTable table td.subTable table td:last-child { border: none; } @media screen and (max-width: 1024px) { body.innerPage .notifcationPage .blockTable table .timeCell { width: 105px; } body.innerPage .notifcationPage .blockTable table .dateCell { width: 180px; } } @media screen and (max-width: 640px) { body.innerPage .notifcationPage .blockTable table .timeCell { width: 85px; } body.innerPage .notifcationPage .blockTable table .dateCell { width: 150px; } body.innerPage .notifcationPage .blockTable table td { padding: 10px; } body.innerPage .notifcationPage .blockTable table .subTable { padding: 0; } } @media screen and (max-width: 480px) { body.innerPage .notifcationPage .blockTable table .timeCell { /*width:60px;*/ } body.innerPage .notifcationPage .blockTable table .dateCell { width: 80px; } } body.innerPage #serviceLinkDesktop .hrLine { margin-bottom: 40px; } body.innerPage .govAgencyHeaderItem { margin-bottom: 30px; } body.innerPage .govAgencyHeaderItem p { margin-bottom: 5px; } body.innerPage .govAgencyHeaderItem .searchHolder p { margin-bottom: 10px; } body.innerPage .govAgencyAlphabetical { display: none; } body.innerPage .govAgencyAlphabetical.active { display: block; } body.innerPage .govAgencyAlphabetical h3 { margin-bottom: 30px; } body.innerPage .govAgencyAlphabetical li, body.innerPage .govAgencyAlphabetical li > a { color: #951717; } body.innerPage .govAgencyAlphabetical > ul { background: #FFF; } /* 17:12 2021-01-27 new to fix the spacing */ body.innerPage .govAgencyAlphabetical > ul > li { padding: 25px 0; margin: 0 0 0 25px; position: relative; } body.innerPage .govAgencyAlphabetical > ul > li :after { content: ''; position: absolute; height: 1px; width: calc(100% + 80px); background: #e9e9e9; bottom: 0; left: -25px; } body.innerPage .govAgencyAlphabetical > ul > li > ul { list-style: disc; /* padding-bottom: 10px; 11:08 2021-01-28 remove as top and bottom spacing not align */ } body.innerPage .govAgencyAlphabetical > ul > li > ul > li { padding-top: 20px; margin: 0 0 0 20px ; } body.innerPage .govAgencyAlphabetical > ul > li > ul > li :last-child { padding-bottom: 0; margin: 0 0 0 25px; list-style: initial; } /* 17:13 2021-01-27 NOTE: fix ul or li afterward in 2nd item */ body.innerPage .govAgencyAlphabetical > ul > li > ul > li > ul, body.innerPage .govAgencyAlphabetical > ul > li > ul > li > ul li ul { list-style: disc; padding-top: 5px; } body.innerPage .govAgencyAlphabetical > ul > li > ul > li > ul > li, body.innerPage .govAgencyAlphabetical > ul > li > ul > li > ul > li ul li { padding: 5px 0; margin: 0 0 0 25px; } /* 17:12 2021-01-27 remark old body.innerPage .govAgencyAlphabetical > ul > li { padding: 25px 0; margin: 0 40px; position: relative; } body.innerPage .govAgencyAlphabetical > ul > li :after { content: ''; position: absolute; height: 1px; width: calc(100% + 80px); background: #e9e9e9; bottom: 0; left: -40px; } body.innerPage .govAgencyAlphabetical > ul > li > ul { list-style: disc; padding-bottom: 10px; } body.innerPage .govAgencyAlphabetical > ul > li > ul > li { padding-top: 20px; margin: 0 20px; } body.innerPage .govAgencyAlphabetical > ul > li > ul > li :last-child { padding-bottom: 0; margin: 0 40px; list-style: initial; } body.innerPage .govAgencyAlphabetical > ul > li > ul > li > ul { list-style: disc; padding-top: 5px; } body.innerPage .govAgencyAlphabetical > ul > li > ul > li > ul > li { padding: 5px 0; margin: 0 40px; } */ body.innerPage .govAgencyOrganisational { display: none; background: #FFF; padding: 10px 40px; } body.innerPage .govAgencyOrganisational.active { display: block; } body.innerPage .govAgencyOrganisational h3 { position: relative; padding: 15px 0; border-top: 1px solid #e9e9e9; } body.innerPage .govAgencyOrganisational h3:first-of-type { border-top: 0; } body.innerPage .govAgencyOrganisational h3 a { color: #951717; width: 100%; display: block; } body.innerPage .govAgencyOrganisational h3 a :hover { text-decoration: none; } body.innerPage .govAgencyOrganisational h3 a.active { display: block; } body.innerPage .govAgencyOrganisational h3 a.active.dropTrigger:after { background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_arrow_up_black.svg) no-repeat center center; background-size: 100%; } body.innerPage .govAgencyOrganisational h3 a.dropTrigger:after { position: absolute; content: " "; width: 17px; height: 17px; right: 0; top: 50%; margin-top: -7px; background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_arrow_down_black.svg) no-repeat center center; background-size: 100%; pointer-events: none; } @media screen and (max-width: 767px) { body.innerPage .govAgencyOrganisational h3 a { padding-right: 30px; } } body.innerPage .govAgencyOrganisational.noDropDown h3:after { display: none; } body.innerPage .govAgencyOrganisational li, body.innerPage .govAgencyOrganisational li > a { color: #951717; } body.innerPage .govAgencyOrganisational > ul { list-style: disc; padding-bottom: 10px; position: relative; border-top: 1px solid #e9e9e9; display: none; } body.innerPage .govAgencyOrganisational > ul:last-child { padding-bottom: 20px; } body.innerPage .govAgencyOrganisational > ul > li { padding-top: 20px; margin: 0 20px; } body.innerPage .govAgencyOrganisational > ul > li:last-child { padding-bottom: 0; } body.innerPage .govAgencyOrganisational > ul > li > ul { list-style: disc; padding-top: 5px; } body.innerPage .govAgencyOrganisational > ul > li > ul > li { padding: 5px 0; margin-left: 40px; } body.innerPage .govAgencyOrganisational > ul > li > ul > li > ul { list-style: none; padding: 10px 0; } body.innerPage .govAgencyOrganisational > ul > li > ul > li > ul > li { padding: 5px 0; margin-left: 40px; list-style: initial; } body.innerPage .govAgencyOrganisational > ul > li > ul > li > ul > li > ul { list-style: disc; padding-top: 5px; } body.innerPage .govAgencyOrganisational > ul > li > ul > li > ul > li > ul > li { padding: 5px 0; margin-left: 40px; } @media screen and (max-width: 767px) { body.innerPage .govAgencyAlphabetical h3 { margin-bottom: 15px; } body.innerPage .govAgencyAlphabetical > ul > li { padding: 20px 0; margin: 0 20px; } body.innerPage .govAgencyOrganisational { padding: 10px 20px; } } @media screen and (max-width: 767px) { #ui-datepicker-div { width: 100% !important; left: 0 !important; } } /* 10:42 2017-06-16 take out fundrasing */ @media screen and (max-width: 767px) { body.innerPage .expandable.expandTb { margin: 5px 0 20px 0; } } .myGovHolder { /* bug fix 11/3/2016 */ } .yourService.innerPageWrapper { padding-top: 25px; } .yourService.innerPageWrapper .recommendHolder { background-color: #fff; padding: 40px 40px 20px 40px; } .yourService.innerPageWrapper .recommendHolder .btns { display: table; background-color: #cc4c02; height: 45px; margin-top: 20px; border-bottom: 2px solid #be4700; } .yourService.innerPageWrapper .recommendHolder .btns .btn { display: table-cell; text-align: center; vertical-align: middle; } .yourService.innerPageWrapper .recommendHolder .btns .btn a { padding: 0 20px; color: #FFF; margin-top: 0; } .yourService.innerPageWrapper .recommendHolder .btns .btn a.borderLeft { border-left: 1px solid #FFF; } .yourService.innerPageWrapper .recommendHolder .btns .btn a:after { display: none; } .yourService.innerPageWrapper .recommendHolder .item { border-bottom: 2px solid #cccccc; padding: 40px 0; } .yourService.innerPageWrapper .recommendHolder .item .title { padding: 0; font-size: 1.3125em; } .yourService.innerPageWrapper .recommendHolder .item p, .yourService.innerPageWrapper .recommendHolder .item a { font-size: 1em; } .yourService.innerPageWrapper .recommendHolder .item a { color: #990000; margin-top: 20px; display: inline-block; position: relative; } .yourService.innerPageWrapper .recommendHolder .item a:after { /* position:absolute; content:" "; background-image: url(../images/common_icons/orange/icon_extlink_orange.svg); width:14px; height:14px; right:-25px; top:0; background-size: 14px 14px;*/ } .yourService.innerPageWrapper .recommendHolder .item:first-child { padding-top: 0; } .yourService.innerPageWrapper .recommendHolder .item:last-child { border-bottom: 0; } .yourService.innerPageWrapper .bottomBar { margin-bottom: 50px; } #innerPageSideNav .yourService.innerPageWrapper { padding-top: 0; } #innerPageSideNav .yourService.innerPageWrapper .recommendHolder .item { border: 0; padding: 15px 0; } .plainSelectWrap { display: inline-block; position: relative; left: -5px; background-color: #707070; padding: 5px 15px; border-bottom: 2px solid #323232; } .plainSelectWrap:after { content: " "; position: absolute; width: 20px; height: 100%; top: 0; right: 15px; background: url(../images/common_icons/white/icon_arrow_down_white.svg) no-repeat right #707070; } .plainSelectWrap .plainSelect { color: #FFF; width: auto; height: 34px; overflow: hidden; background: #707070; border: none; } @media screen and (max-width: 1200px) { .sideNav.hideOnTablet { display: none; } .yourService.innerPageWrapper .bottomBar { margin-bottom: 0; } } @media screen and (max-width: 767px) { .yourService.innerPageWrapper .recommendHolder { padding: 40px 20px 20px; } } .govDirMobileApp .blockItem { background-color: #FFF; padding: 5px 30px; } @media screen and (max-width: 1200px) { .govDirMobileApp .blockItem { background-color: transparent; padding: 0; } } .govDirMobileApp .subMainTitle { margin-bottom: 10px; } .govDirMobileApp .hrefUl { list-style-type: disc; list-style-position: outside; padding-left: 20px; } .govDirMobileApp .hrefUl li { margin-bottom: 35px; } .govDirMobileApp .hrefUl li a { color: #990000; } @media screen and (max-width: 1200px) { .govDirMobileApp .mobileAppRelatedRows { background: #FFF; } } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap { background-color: #e4e8eb; padding: 30px; margin-bottom: 20px; position: relative; display: none; } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode { display: table; float: left; margin-right: 60px; } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode .cell { display: table-cell; vertical-align: middle; } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode .cell.img { padding-right: 10px; width: 70px; } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode .cell.txt a { color: #951717; } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode .cell.txt a:hover { text-decoration: underline; } @media screen and (max-width: 1200px) { .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode .cell.txt a:hover { text-decoration: none; } } @media screen and (max-width: 767px) { .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap { padding: 20px 20px 0 20px; } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode { margin-bottom: 20px; } .govDirMobileApp .mobileAppRelatedRows .qrcodesWrap .qrcode:last-child { margin-bottom: 0; } } .govDirMobileApp .mobileAppRelatedRows .mobileAppTitle { padding: 15px 0px 15px; color: #353535; background-color: #FFF; margin: 0 15px 25px; position: relative; } .govDirMobileApp .mobileAppRelatedRows .mobileAppTitle:after { content: ''; position: absolute; width: 100%; background: #CCC; height: 2px; left: 0; bottom: 0; } @media screen and (max-width: 1200px) { .govDirMobileApp .mobileAppRelatedRows .mobileAppTitle { padding: 10px 15px; color: #FFF; background-color: #707070; margin: 25px 0 15px; } .govDirMobileApp .mobileAppRelatedRows .mobileAppTitle:after { display: none; } } .govDirMobileApp .mobileAppRelatedRows .relatedTable { margin-bottom: 30px; height: 60px; float: none; display: inline-block; } .govDirMobileApp .mobileAppRelatedRows .relatedRows { display: table; cursor: pointer; } .govDirMobileApp .mobileAppRelatedRows .cell { display: table-cell; vertical-align: middle; } .govDirMobileApp .mobileAppRelatedRows .cellImage { margin-right: 10px; width: 70px; position: relative; } .govDirMobileApp .mobileAppRelatedRows .relatedRows.active .cellImage:before { content: " "; position: absolute; top: 83px; left: 50%; margin-left: -11px; width: 0; height: 0; border-style: solid; border-width: 0 11px 11px 11px; border-color: transparent transparent #e4e8eb transparent; } body.innerPage .notifcationPage.govDirMobileApp .blockTable table td { vertical-align: top; } .chineseOnly { background-color: #fff; padding: 40px; color: #990000; } .chineseTextName { margin-bottom: 20px; margin-top: 20px; } .chineseText { background-color: #fff; padding: 40px; } .chineseText .screenShots { display: table; margin: 35px 0; } .chineseText .screenShots .screenShot { display: table-cell; padding-right: 12px; } .chineseText a { color: #990000; } .chineseText .appIcons { display: table; margin-top: 30px; margin-bottom: 50px; width: auto; } @media screen and (max-width: 767px) { .chineseText .appIcons { width: 100%; } } .chineseText .appIcons .appIcon { display: table-cell; text-align: center; padding-right: 60px; } @media screen and (max-width: 767px) { .chineseText .appIcons .appIcon { width: 50%; padding-right: 0; } } .chineseText .appIcons .appIcon img { width: 100px; } @media screen and (max-width: 767px) { .chineseText .appIcons .appIcon img { width: 60px; } } .chineseText .appIcons .appName { color: #990000; margin-top: 20px; } .helpDesksContents .blockContentWrap { margin-bottom: 20px; } .helpDesksContents .blockContentWrap .blockContentTitle { margin-bottom: 10px; } .helpDesksContents .blockContentWrap p { margin-bottom: 30px; } .helpDesksContents .blockContentWrap a.contentLink.boldLink:not(.inlineLink) { margin-bottom: 30px; display: inline-block; } .helpDesksContents .blockContentWrap:last-child { margin-bottom: 0; } .helpDesksContents .blockContentWrap:last-child a.contentLink.boldLink { margin-bottom: 0; } .iconWarning { width: 45px; height: 45px; margin: 10px 0; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_exclamation_orange.svg) no-repeat center center; background-size: 100% 100%; } .warningMsg { margin-bottom: 25px; } .warningMsg ul { margin-bottom: 15px; } body.innerPage.outofservicePage main .mainHolder { background: #e9e9e9 url(../images/common_icons/grey/icon_exclamation_grey.svg) no-repeat 85% -30%; background-size: 600px; } body.innerPage.outofservicePage h2 span { display: inline-block; margin: 5px 0; } body.innerPage.notFoundPage .innerPageWrapper.searchPage { padding-top: 25px; } body.innerPage.notFoundPage h2 { font-size: 1.6em; } body.innerPage.notFoundPage .sectionBreak { margin: 25px auto; } body.innerPage.notFoundPage .warningMsg p, body.innerPage.notFoundPage .warningMsg ul > li { font-size: 0.875em; } @media screen and (max-width: 1200px) { .iconWarning { width: 50px; height: 50px; margin-top: 0; } body.innerPage.outofservicePage main .mainHolder { background: #e9e9e9 url(../images/common_icons/grey/icon_exclamation_grey.svg) no-repeat 85% -10%; background-size: 400px; } } @media screen and (max-width: 767px) { .iconWarning { width: 40px; height: 40px; margin-top: 0; } body.innerPage.outofservicePage main .mainHolder { background: #e9e9e9 url(../images/common_icons/grey/icon_exclamation_grey.svg) no-repeat 200% -5%; background-size: 80%; } } .disclaimerWrap { margin-bottom: 30px; } .disclaimerWrap .disclaimerTitle, .disclaimerWrap h2 { font-weight: bold; font-size: 1.5em; margin-bottom: 10px; } .disclaimerWrap .helpDesksContents ol { padding-top: 0; padding-left: 30px; } .disclaimerWrap .helpDesksContents ol li { margin-bottom: 35px; } .disclaimerWrap .helpDesksContents ol li .innerList { margin-top: 35px; margin-bottom: 35px; margin-left: -20px; } .disclaimerWrap .helpDesksContents ol li .innerList:last-child { margin-bottom: 0; } .disclaimerWrap .helpDesksContents ol li .innerList .innerListTitle { font-size: 1.3125em; } :lang(en) .disclaimerWrap .helpDesksContents ol li .innerList .innerListTitle { font-weight: bold; } .disclaimerWrap .helpDesksContents ol.alphaList > li { margin-left: -10px; } .disclaimerWrap .helpDesksContents ol.romanList > li { margin-left: -5px; } /**************variable for header****************/ :lang(zh-hk) body.innerPage .ui-datepicker-year, :lang(zh-cn) body.innerPage .ui-datepicker-year { float: left; margin-right: 5px; } :lang(zh-hk) body.innerPage .ui-datepicker-month, :lang(zh-cn) body.innerPage .ui-datepicker-month, :lang(zh-hk) body.innerPage .ui-datepicker-year, :lang(zh-cn) body.innerPage .ui-datepicker-year { font-weight: normal; } :lang(zh-hk) body.innerPage .ui-datepicker-year, :lang(zh-cn) body.innerPage .ui-datepicker-year { float: left; margin-right: 5px; } :lang(zh-hk) body.innerPage .ui-datepicker-year:after, :lang(zh-cn) body.innerPage .ui-datepicker-year:after { content: '年'; } body.innerPage #ui-datepicker-div { z-index: 100 !important; } body.innerPage .ui-datepicker table { width: 240px; margin: 0 auto; } body.innerPage .ui-widget-header { background: transparent; border: none; font-size: 1em; text-align: center; margin-bottom: 10px; } body.innerPage .ui-datepicker .ui-datepicker-prev, body.innerPage .ui-datepicker .ui-datepicker-next { width: 22px; height: 22px; margin-top: -2px; } body.innerPage .ui-icon.ui-icon-circle-triangle-w { background: url(../images/calendar/btn_calender_prev.png) no-repeat; background-size: 100% 100%; width: 22px; height: 22px; } body.innerPage .ui-icon.ui-icon-circle-triangle-e { background: url(../images/calendar/btn_calender_next.png) no-repeat; background-size: 100% 100%; width: 22px; height: 22px; } body.innerPage .ui-datepicker .ui-datepicker-prev { left: 21px; top: 4px; } body.innerPage .ui-datepicker .ui-datepicker-next { right: 23px; left: auto; top: 4px; } body.innerPage .ui-datepicker-calendar th span { font-weight: bold; } body.innerPage .ui-datepicker-month, body.innerPage .ui-datepicker-year { font-weight: bold; } body.innerPage .ui-datepicker-title { background-color: #9fd9df; display: inline-block; padding: 0 30px; border-radius: 20px; font-size: 0.875em; } body.innerPage .ui-datepicker td span, body.innerPage .ui-datepicker td a { padding: 10px; font-weight: bold; color: #000; } /* 15:01 2017-12-27 for search autocomplete box */ body ul.ui-widget-content.ui-autocomplete { padding:20px; } body.innerPage .ui-widget-content { border-radius: 0; border-color: #000; border-bottom: 7px solid #e65b00; width: 340px; padding: 20px; } body.innerPage .ui-widget-content .ui-state-default { border: none; background: transparent; text-align: center; } body.innerPage .ui-widget-content .ui-state-default.ui-state-highlight { background-color: #e65b00; border-radius: 20px; width: 27px; height: 27px; padding: 0; line-height: 27px; display: block; margin: 6px auto; } @media screen and (max-width: 767px) { body.innerPage .ui-widget-content { width: 300px; padding: 10px 0; } } body.innerPage.searchResultPage .mainHolder { padding-bottom: 50px; } body.innerPage .innerPageWrapper.searchPage { padding-top: 32px; padding-bottom: 0; } body.innerPage .innerPageWrapper.searchPage.nonLast { padding-bottom: 0; } body.innerPage .innerPageWrapper.searchPage .blockTagContent { margin-top: 0; } body.innerPage .innerPageWrapper.searchPage .searchCalendar { width: 30px; height: 30px; display: inline-block; vertical-align: middle; background-image: url(../images/common_icons/orange/icon_calendar_orange.svg); background-position: center center; background-repeat: no-repeat; } body.innerPage .innerPageWrapper.searchPage a:not(.topicLink):hover { text-decoration: underline; } body.innerPage .innerPageWrapper.searchPage a:not(.topicLink).blockHead:hover { text-decoration: none; } body.innerPage .innerPageWrapper.searchPage a.rightHref:hover { text-decoration: none; } body.innerPage .innerPageWrapper.searchPage .title { color: #2F2F2F; line-height: 1; padding-left: 0; padding-bottom: 25px; } @media screen and (max-width: 1200px) { body.innerPage .innerPageWrapper.searchPage .title { padding-bottom: 15px; } } body.innerPage .innerPageWrapper.searchPage .title:after { display: none; } body.innerPage .innerPageWrapper.searchPage .link p { word-wrap: break-word; } body.innerPage .innerPageWrapper.searchPage .filter .filterTitle { color: #353535; position: relative; padding-left: 25px; float: left; font-weight: bold; margin-right: 20px; } body.innerPage .innerPageWrapper.searchPage .filter .filterTitle:before { content: ''; background: no-repeat; background-image: url(../images/common_icons/black/icon_filter_black.svg); background-size: 100% 100%; width: 17px; height: 17px; position: absolute; top: 50%; margin-top: -8.5px; left: 0; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem { position: relative; padding: 0 20px; float: left; padding-bottom: 30px; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem .select-style { width: 300px; top: -5px; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem .select-style p { border: none; font-family: "Montserrat",Arial,sans-serif; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem:after { content: ''; width: 1px; height: 1em; position: absolute; top: 3px; right: 0; background: #353535; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem:last-child:after { display: none; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem.on a { color: #cc4c02; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem.on:before { content: ''; border: 7px solid transparent; border-top-color: #cc4c02; position: absolute; bottom: 10px; left: 50%; margin-left: -10px; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem.withDropDown { position: relative; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem.withDropDown:after { display: none; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem.withDropDown a { position: relative; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem.withDropDown a:after { content: ''; border: 5px solid transparent; border-top-color: #353535; position: absolute; top: 50%; margin-top: -3px; right: -15px; width: auto; height: auto; background: none; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem.withDropDown.on a:after { display: none; } body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown { display: none; float: left; margin-bottom: 25px; min-width: 50%; } body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown p { border: 1px solid #cc4c02; height: auto; padding: 15px 35px 15px 15px; min-height: 50px; } body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown p:after { border-top-color: #353535; } body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown select { height: 50px; } body.innerPage .innerPageWrapper.searchPage .filter .filterDropDown { display: none; float: left; } body.innerPage .innerPageWrapper.searchPage .filter .filterDropDown p { border: 1px solid #cc4c02; height: auto; padding: 15px 35px 15px 15px; min-height: 50px; } body.innerPage .innerPageWrapper.searchPage .filter .filterDropDown select { height: 50px; } body.innerPage .innerPageWrapper.searchPage .filter:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage .searchHolder .searchMainBar { -webkit-appearance: none; border-radius: 0; background: #FFF; border: 1px solid #cc4c02; border-right: 0; display: block; float: left; height: 48px; width: 38%; margin: 0; padding: 0 17px; } body.innerPage .innerPageWrapper.searchPage .searchHolder .searchMainBtn { box-sizing: border-box; float: left; min-width: 0; display: block; margin: 0; border: 0; width: 48px; height: 48px; border: 1px solid #cc4c02; border-left: 0; padding: 6px; -webkit-appearance: none; -moz-appearance: none; /* background: #FFF url(../images/common_icons/orange/icon_search_orange.png) no-repeat center center; */ background: white url(../images/common_icons/orange/icon_search_orange.svg) no-repeat center center; background-size: 45%; margin-right: 15px; float: left; display: block; } body.innerPage .innerPageWrapper.searchPage .searchHolder .advancedSearchMainBtn { box-sizing: border-box; min-width: 0px; border: 0px none; height: 50px; -moz-appearance: none; background: #cc4c02 url("../images/common_icons/white/icon_search_white.svg") no-repeat 90% center; background-size: 20px 20px; margin: 0px; float: left; display: block; text-align: left; padding: 10px 30px 10px 15px; width: 210px; color: #FFF; border-bottom: 3px solid #BB3601; margin-right: 20px; font-weight: bold; } body.innerPage .innerPageWrapper.searchPage .searchHolder:first-of-type { margin-top: 15px; } body.innerPage .innerPageWrapper.searchPage .searchHolder:last-child .advancedSearchMainBtn { margin-bottom: 30px; } /* 16:01 2018-01-16 use it by remove ".searchPage" */ /* body.innerPage .innerPageWrapper.searchPage .searchHolder .supportLink { */ body.homePage .searchHolder .supportLink { display: block; float: left; padding: 15px 0; height: 50px; box-sizing: border-box; margin: 0 10px; color: #941619; font-weight: bold; } body.innerPage .innerPageWrapper.searchPage .searchHolder .resultFound { margin: 30px 0; } body.innerPage .innerPageWrapper.searchPage .searchHolder .sortBy { margin-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage .searchHolder .sortBy a { position: relative; padding: 0 10px; float: left; color: #941619; font-weight: bold; } body.innerPage .innerPageWrapper.searchPage .searchHolder .sortBy a:after { content: ''; width: 1px; height: 1em; position: absolute; top: 3px; right: 0; background: #353535; } body.innerPage .innerPageWrapper.searchPage .searchHolder .sortBy a:first-child { padding-left: 0; } body.innerPage .innerPageWrapper.searchPage .searchHolder .sortBy a:last-child:after { display: none; } body.innerPage .innerPageWrapper.searchPage .searchHolder .sortBy a.on { color: #cc4c02; } body.innerPage .innerPageWrapper.searchPage .searchHolder .sortBy:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage .recommendHolder { background: #FFF; box-sizing: border-box; padding: 20px; margin-bottom: 40px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item { margin-bottom: 20px; position: relative; padding-right: 220px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .title { margin-bottom: 5px; color: #353535; padding-bottom: 0px; font-weight: bold; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .title .fileType { display: block; float: left; margin-right: 10px; top: -2px; position: relative; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .link .tag { padding: 7px 10px 3px; font-weight: bold; background: #f89822; float: left; margin-right: 10px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .link p { float: left; padding-top: 7px; word-break: break-all; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .link:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .otherFormat { position: absolute; right: 10px; top: 50%; margin-top: -10px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .otherFormat span { float: left; margin-right: 10px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .otherFormat .fileType { display: block; float: left; margin-right: 15px; top: -1px; position: relative; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .otherFormat:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .fileType { width: 20px; height: 20px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .fileType.pdf { background: url("../images/common_icons/icon_filetype_pdf.png") no-repeat center center; background-size: 100% 100%; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .fileType.access { background: url("../images/common_icons/icon_filetype_access.png") no-repeat center center; background-size: 100% 100%; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .fileType.excel { background: url("../images/common_icons/icon_filetype_excel.png") no-repeat center center; background-size: 100% 100%; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .fileType.word { background: url("../images/common_icons/icon_filetype_word.png") no-repeat center center; background-size: 100% 100%; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .moreRecommend { margin-top: 40px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .moreRecommend a { color: #941619; } body.innerPage .innerPageWrapper.searchPage .searchResult { margin-top: 40px; margin-bottom: 40px; } body.innerPage .innerPageWrapper.searchPage .searchResult .item { margin-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .title { margin-bottom: 5px; color: #353535; padding-bottom: 0px; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .title a { font-weight: bold; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .title strong { font-weight: bold; color: #cc4c02; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .description { margin-bottom: 3px; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .description strong { font-weight: bold; color: #cc4c02; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link p { float: left; margin-right: 15px; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link .miscHolder { overflow: hidden; min-width: 260px; float: left; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link .misc { float: left; position: relative; padding: 0 10px; font-weight: bold; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link .misc:after { content: ''; width: 1px; height: 1em; position: absolute; top: 3px; right: 0; background: #353535; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link .misc:first-child { padding-left: 0; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link .misc:last-child:after { display: none; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockTagContent { padding: 20px; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockTagContent:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol { width: 50%; box-sizing: border-box; padding: 12px 20px; float: left; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .title { padding-bottom: 0; float: left; width: 40%; box-sizing: border-box; padding-right: 20px; padding-top: 0; height: 30px; position: relative; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .title > span { vertical-align: middle; display: inline-block; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .title:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .searchWord { float: left; width: 60%; box-sizing: border-box; border: 1px solid #353535; padding: 5px 10px; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .radioItem { margin-bottom: 10px; width: 100%; position: relative; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .radioItem .select-style p { padding: 5px 35px 5px 10px; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .radioItem .select-style p:before { min-height: 30px; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .radioItem .select-style select { height: 100%; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .radioItem label { display: inline-block; width: 100%; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .radioItem label.inline-label { width: auto; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol .groupItemHolder { background: #f8efe5; padding: 20px; margin: 20px 0; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol.full { width: 100%; position: relative; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupHead { margin-bottom: 10px; font-weight: bold; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList { padding-left: 45px; margin-bottom: 0; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList .items { width: 33.3%; float: left; box-sizing: border-box; padding-right: 10px; margin-bottom: 10px; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList:last-child { padding-bottom: 0; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage #language .select-style { float: left; } body.innerPage .innerPageWrapper.searchPage #language .remark { float: left; margin-left: 10px; padding-top: 14px; } body.innerPage .innerPageWrapper.searchPage #language:after { content: ''; clear: both; display: block; } body.innerPage .innerPageWrapper.searchPage #time .duration { margin-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage #time .duration .title { float: left; margin-right: 20px; font-weight: bold; padding-right: 0; width: 50px; line-height: 30px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector { float: left; margin-right: 20px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector .select-style { margin-right: 10px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector .select-style p { padding: 5px 35px 5px 10px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector .select-style p:before { min-height: 30px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector .select-style select { height: 30px; } body.innerPage .innerPageWrapper.searchPage #time .duration:after { content: ''; display: block; clear: both; } body.innerPage .innerPageWrapper.searchPage #time .duration:last-child { margin-bottom: 0; } body.innerPage .innerPageWrapper.searchPage #display .displayItem { margin-bottom: 10px; } .ui-autocomplete { position: absolute; top: 0px; left: 0px; cursor: default; background: #FFF; z-index: 1100; } .ui-autocomplete.ui-menu { border: 1px solid #cc4c02 !important; border-top: none; } .ui-autocomplete .ui-menu-item { background: #FFF; padding: 5px 10px; } .ui-autocomplete .ui-menu-item b { font-weight: bold; color: #cc4c02; } .ui-autocomplete .ui-menu-item.ui-state-focus { background: #CCC; cursor: pointer; } .ui-helper-hidden-accessible { border: 0px none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; } body.innerPage .innerPageWrapper.searchPage .filter .filterDropDown p, body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown p { border: 1px solid #353535; } @media screen and (max-width: 1200px) { body.innerPage .innerPageWrapper.searchPage.nonLast { padding-bottom: 60px; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList .items label span { display: inline-block; max-width: calc(100% - 30px); margin-left: 5px; } .radioItem label span { display: inline-block; max-width: calc(100% - 30px); margin-left: 5px; } } @media screen and (max-width: 1024px) { body.innerPage .innerPageWrapper.searchPage .recommendHolder .item { padding-right: 0px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .otherFormat { position: relative; right: auto; top: auto; margin-top: 10px; } body.innerPage .innerPageWrapper.searchPage .filter .filterTitle { color: transparent; width: 15px; margin-right: 0; padding-left: 0; white-space: nowrap; } } @media screen and (max-width: 767px) { body.innerPage .innerPageWrapper.searchPage .filter .filterTitle { color: #353535; width: auto; margin-right: 15px; margin-bottom: 15px; padding-left: 25px; white-space: normal; } body.innerPage .innerPageWrapper.searchPage.nonLast { padding-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage .filter .filterTitle { margin-top: 0.7em; } body.innerPage .innerPageWrapper.searchPage .filter .filterItem { display: none; } body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown { width: 100%; margin-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown p { padding: 15px 35px 15px 15px; width: 100%; } body.innerPage .innerPageWrapper.searchPage .filter #bureauxDropDown select { height: 50px; width: 100%; } body.innerPage .innerPageWrapper.searchPage .filter .filterDropDown { display: block; width: calc(100% - 87px); margin-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage .filter .filterDropDown select { width: 100%; } body.innerPage .innerPageWrapper.searchPage .searchHolder .searchMainBar { height: 40px; width: calc(100% - 40px); } body.innerPage .innerPageWrapper.searchPage .searchHolder .searchMainBtn { width: 40px; height: 40px; padding: 6px; margin-right: 0px; } body.innerPage .innerPageWrapper.searchPage .searchHolder .supportLink { margin: 0; margin-right: 10px; width: 100%; padding-bottom: 5px; height: auto; } body.innerPage .innerPageWrapper.searchPage .searchHolder .resultFound { margin: 15px 0; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item { margin-bottom: 30px; } body.innerPage .innerPageWrapper.searchPage .recommendHolder .item .link p { width: 100%; } body.innerPage .innerPageWrapper.searchPage .searchResult .item { margin-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage .searchResult .item .link p { width: 100%; margin-right: 0px; margin-bottom: 10px; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol { width: 100%; padding: 0; padding-bottom: 20px; } body.innerPage .innerPageWrapper.searchPage .gridBlock .blockInnerCol:last-child { padding-bottom: 0; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList { padding-left: 20px; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList .items { width: 50%; } body.innerPage .innerPageWrapper.searchPage #language .remark { display: block; margin-left: 0; padding-top: 0px; width: 100%; margin-top: 15px; } } @media screen and (max-width: 640px) { body.innerPage .innerPageWrapper.searchPage #time .duration .title { float: none; margin-right: 0px; width: 100%; margin-bottom: 15px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector { float: left; margin-right: 0px; width: 100%; margin-bottom: 10px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector:last-of-type { width: auto; margin-right: 20px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector .select-style p { height: 30px; padding: 5px 35px 5px 10px; } body.innerPage .innerPageWrapper.searchPage #time .duration .durationSelector .select-style select { height: 30px; } } @media screen and (max-width: 480px) { body.innerPage .innerPageWrapper.searchPage .searchHolder .advancedSearchMainBtn { width: 100%; margin-right: 0; } body.innerPage .innerPageWrapper.searchPage #website .groupItemHolder .groupList .items { width: 100%; } .groupHeadTitle { display: inline-block; max-width: calc(100% - 30px); margin-left: 5px; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { select:focus, textarea:focus, input:focus { font-size: 16px; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { select, textarea, input { font-size: 16px; } } .commonlyUsed .faqSection.accordions .accordionContent { margin-top: 25px; } .commonlyUsed .faqSection.accordions .accordionContent .secondLevel { border-top: 0; } @media screen and (max-width: 767px) { .commonlyUsed .faqSection.accordions .accordionContent .secondLevel { padding-top: 0; padding-bottom: 20px; border-top: 1px solid #000; } } @media screen and (max-width: 767px) { .commonlyUsed .faqSection.accordions .accordionContent { padding: 15px 25px; } } .commonlyUsed .accordions .accordionContent .qaHolder { overflow: hidden; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent { float: left; display: block; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex p, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.bulletList, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent p, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.bulletList, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList { margin-bottom: 25px; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex p:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.bulletList:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent p:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.bulletList:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList:last-child { margin-bottom: 0; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.bulletList, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.numList, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.bulletList, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.bulletList, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.numList, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.bulletList, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList { display: block; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.bulletList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.numList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.bulletList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.bulletList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.numList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.bulletList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList li { border: 0; padding: 0; margin-bottom: 25px; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.bulletList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.numList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.bulletList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.bulletList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.numList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.bulletList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList li:last-child { margin-bottom: 0; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.numList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.numList li, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList li { padding-bottom: 10px; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.numList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.numList li:last-child, .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList li:last-child { margin-bottom: 0; } .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex { width: 8%; } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex { width: 12%; width: 60px; margin-bottom: 15px; } } @media screen and (max-width: 480px) { .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex { width: 35px; } } .commonlyUsed .accordions .accordionContent .qaHolder .qaContent { width: calc(92% - 35px); } .commonlyUsed .accordions .accordionContent .qaHolder.questionHolder { margin: 0px 0 /*20px 0; */ } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .qaHolder.questionHolder { margin: 10px 0 0; } } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .qaHolder.questionHolder .qaContent { width: 70%; width: calc(100% - 80px); } } @media screen and (max-width: 480px) { .commonlyUsed .accordions .accordionContent .qaHolder.questionHolder .qaContent { width: calc(100% - 35px); } } .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaIndex, .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaContent { padding-top: 30px; } .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaContent { border-top: 1px solid #353535; } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaContent { border: 0; width: 100%; padding-top: 0; } } @media screen and (max-width: 767px) { .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaIndex { padding-top: 25px; } } @media screen and (max-width: 1200px) { .contentBlock { padding-left: 0; } } @media screen and (max-width: 767px) { padding: 15px 25px; } @media screen and (max-width: 767px) { body.innerPage body.innerPage .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex p, body.innerPage body.innerPage .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ul.bulletList, body.innerPage body.innerPage .commonlyUsed .accordions .accordionContent .qaHolder .qaIndex ol.numList, body.innerPage body.innerPage .commonlyUsed .accordions .accordionContent .qaHolder .qaContent p, body.innerPage body.innerPage .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ul.bulletList, body.innerPage body.innerPage .commonlyUsed .accordions .accordionContent .qaHolder .qaContent ol.numList { margin-bottom: 20px; } body.innerPage .tagBlock.blockTagHolder .blockHead { margin-bottom: 10px; } body.innerPage .tagBlock.blockTagHolder .tagContentHolder.block-2-3 { padding: 35px 45px; } body.innerPage li:first-child a.serviceLink { margin-top: 0; } body.innerPage li:last-child a.serviceLink { margin-bottom: 0; } } .themeParksInfo { background-color: #fff; margin-bottom: 15px; } ol { padding-top: 15px; } ol li { margin-top: 5px; margin-bottom: 5px; } .themeParksInfoRed { color: #951717; } .themeParksInfoText { padding: 30px 45px 30px 30px; } .itemTitle { display: inline-block; color: #353535; margin: 0 auto 10px; } .itemTitle:hover { color: #cc4c02; } .itemDesc { color: #474747; } body.innerPage .innerPageWrapper .blockDetailHolder.themeParks { float: left; box-sizing: border-box; } body.innerPage .innerPageListGrid .blockItem { margin-bottom: 35px; clear: both; } body.innerPage .innerPageListGrid .blockItem h2 { margin-bottom: 10px; } body.innerPage .innerPageListGrid .blockItem h3 { margin-bottom: 5px; } body.innerPage .innerPageListGrid .blockItem p { margin-bottom: 15px; } body.innerPage .innerPageListGrid .blockItem.withImg.left .blockImg { float: left; margin-right: 20px; } body.innerPage .innerPageListGrid .blockItem.withImg.left .mobileHeading { display: none; } body.innerPage .innerPageListGrid .blockItem.withImg.right .blockImg { float: right; margin-left: 20px; } .commonlyUsed .accordions .accordionContent .secondLevel a { text-decoration: none; color: #990000; } .commonlyUsed .accordions .accordionContent .secondLevel a:hover { text-decoration: underline; } .themeParksInfoLink { margin-top: 20px; margin-bottom: 20px; float: left; cursor: pointer; } .themeParksInfoLink a { color: #990000; margin: 5px; } .calendarIconTxt { color: #990000; } .calendarIconTxt:hover { text-decoration: underline; } .calendarIcon { background: transparent url(../images/common_icons/red/icon_calendar_red.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/red/icon_calendar_red.svg) no-repeat center center; background-size: 100%; width: 19px; height: 19px; display: inline-block; vertical-align: middle; margin-right: 5px; cursor: pointer; } .calendarIcon:last-child { margin-right: 0; } .calendarIcon:hover { background: transparent url(../images/common_icons/red/icon_calendar_red.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/red/icon_calendar_red.svg) no-repeat center center; background-size: 100%; } .writinglistIcon { background: transparent url(../images/common_icons/red/icon_writinglist_red.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/red/icon_writinglist_red.svg) no-repeat center center; background-size: 100%; width: 19px; height: 19px; display: inline-block; vertical-align: middle; margin-right: 5px; cursor: pointer; } .writinglistIcon:last-child { margin-right: 0; } .writinglistIcon:hover { background: transparent url(../images/common_icons/red/icon_writinglist_red.png) no-repeat center center; background: rgba(255, 255, 255, 0) url(../images/common_icons/red/icon_writinglist_red.svg) no-repeat center center; background-size: 100%; } body.innerPage .pageThemeParks .footerExtendAll .leftHref { padding: 15px 0; } @media screen and (max-width: 767px) { body.innerPage .pageThemeParks .innerPageHolder .videoBtn { width: 200px; } } @media screen and (max-width: 1200px) { body.innerPage .pageThemeParks .innerPageHolder { padding: 0; } } /* 17:16 2017-05-29 for "district" in fundraising to show normally body.innerPage .pageThemeParks .innerPageHolder .tableSubContent img, body.innerPage .pageThemeParks .innerPageHolder .tableSubContent span { display: block; float: left; } */ body.innerPage .pageThemeParks .innerPageHolder .tableSubContent img { margin-right: 10px; } body.innerPage .pageThemeParks .innerPageHolder .tableSubContent span { word-break: break-all; } body.innerPage .pageThemeParks .print { display: none; } body.innerPage .pageThemeParks .accordions .accordionContent .secondLevel a { padding: 5px 0 15px; } @media screen and (max-width: 1200px) { body.innerPage .pageThemeParks .videoThumb { margin-top: 0; } } @media screen and (max-width: 1200px) { body.innerPage .pageThemeParks .innerPageHolder .blockTable > table th { text-align: center; } } @media screen and (max-width: 1200px) { body.innerPage .innerPageHolder .blockTable > table td, body.innerPage .pageThemeParks .innerPageHolder .blockTable > table th { padding-left: 0; padding-right: 0; } } body.innerPage .innerPageListGrid .item.epppInfo { width: 100%; background-color: #fff; margin-bottom: 15px; padding-bottom: 0; } @media screen and (max-width: 767px) { body.innerPage .innerPageListGrid .item.epppInfo { height: auto; margin-bottom: 25px; } } @media screen and (max-width: 480px) { body.innerPage .innerPageListGrid .item.epppInfo { height: auto; margin-bottom: 20px; } } .epppInfoRed { color: #951717; } .epppInfoText { padding: 30px 45px 30px 30px; font-weight: 500; } .itemTitle { display: inline-block; color: #353535; margin: 0 auto 10px; } .itemTitle:hover { color: #cc4c02; } .itemDesc { color: #474747; } /* ================================================================================================= _layout_innerpage.scss > imported by layout.scss > Styles for uncategorized pages (e.g. sitemap, multilang) in batch 3-5 * @TODO Use Variables * @TODO Simplify ================================================================================================= */ body.innerPage .innerPageWrapper.searchPage .searchResult.multiLang a:hover { text-decoration: none; } @media screen and (min-width: 1201px) { body.innerPage .innerPageWrapper.searchPage .searchResult.multiLang a:hover span { text-decoration: underline; } } .commonlyUsed .searchResult.multiLang .result .currentLang { color: #990000; border-right: 1px solid #c9c9c9; padding-right: 15px; margin-right: 15px; } .commonlyUsed .searchResult.multiLang .result .otherLang { color: #454095; } .commonlyUsed .accordions.online-service.multiLang .extendAll:hover { text-decoration: none; } .commonlyUsed .accordions.online-service.multiLang .extendAll:hover span { text-decoration: underline; } .commonlyUsed .accordions.online-service.multiLang .accordionTitle > span { float: left; padding: 0 10px; border-left: 2px solid #CCC; } .commonlyUsed .accordions.online-service.multiLang .accordionTitle > span:first-child { padding-left: 0; border-left: none; } .commonlyUsed .accordions.online-service.multiLang .accordionTitle > span.blue { color: #454095; } .commonlyUsed .accordions.online-service.multiLang .secondLevel .secondLevelContent { border-top: 0; margin-top: 0; } .commonlyUsed .accordions.online-service.multiLang .secondLevel .secondLevelContent ul li { color: #990000; margin-bottom: 15px; } .commonlyUsed .accordions.online-service.multiLang .secondLevel .secondLevelContent ul li:last-child { margin-bottom: 0; } .commonlyUsed .accordions.online-service.multiLang .secondLevel .secondLevelContent .btns:hover { text-decoration: none; } .commonlyUsed .accordions.online-service.multiLang .secondLevel .secondLevelContent .btns:hover > span { text-decoration: underline; } body.innerPage main.qnaMain > nav.contentWrapper:first-child { margin-top: 0; } .qna.innerPageWrapper { padding-top: 57px; } @media screen and (max-width: 767px) { .qna.innerPageWrapper { padding-top: 32px; } } .qna.innerPageWrapper .recommendHolder { background-color: #fff; padding: 35px 25px; } @media screen and (max-width: 480px) { .qna.innerPageWrapper .recommendHolder { padding: 20px; } } .qna.innerPageWrapper .recommendHolder .msgAnswered { color: #cc4c02; font-weight: bold; } .qna.innerPageWrapper .recommendHolder .item { padding: 0; } .qna.innerPageWrapper .recommendHolder .item a { color: #990000; margin-top: 0; display: inline-block; position: relative; } .qna.innerPageWrapper .bottomBar { margin: 0; height: 38px; } @media screen and (max-width: 767px) { .qna.innerPageWrapper .bottomBar { display: none; } } .qna.innerPageWrapper .blockTagContent { padding: 30px 25px 10px 25px; } @media screen and (max-width: 767px) { .qna.innerPageWrapper .blockTagContent { padding: 30px 20px 10px 20px; } } .qnaControl { margin-bottom: 10px; margin-top: 40px; text-align: left; } @media screen and (max-width: 767px) { .qnaControl { text-align: center; } } .qnaControl input { background-color: #cc4c02; color: #FFF; margin-right: 20px; padding: 10px 20px; border: 0; border-bottom: 2px solid #d34e00; cursor: pointer; width: 139px; white-space: normal; display: inline; -webkit-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; } @media screen and (min-width: 1201px) { .qnaControl input:hover { background-color: #fff; color: #cc4c02; border-color: #cc4c02; } } .qnaControl input:disabled { cursor: initial; opacity: 0.5; } .qnaControl input:disabled:hover { background-color: #cc4c02; color: #FFF; border-color: #d34e00; } @media screen and (max-width: 767px) { .qnaControl input { padding: 10px 30px; margin-right: 15px; float: none; display: inline-block; } .qnaControl input:last-child { margin-right: 0; } } @media screen and (max-width: 480px) { .qnaControl input { margin-bottom: 20px; padding: 10px 30px; width: 125px; } } @media screen and (max-width: 380px) { .qnaControl input { margin-bottom: 20px; padding: 10px 19px; width: 100px; } } .qnaRadio { margin-top: 20px; } .qnaRadio input { line-height: 20px; margin-bottom: 10px; } body.innerPage input[type="radio"] { margin-right: 10px; border: 1px solid #353535; width: 15px; height: 15px; position: relative; display: inline-block; margin-bottom: 10px; } .qnaQuestion { font-size: 20px; } @media screen and (max-width: 480px) { .qnaQuestion { font-size: 16px; } } .qnaAnswerDesc { margin-top: 20px; } .blockTagContent { background-color: #fff; padding: 30px 20px 10px 40px; } #barControl { display: none; } .barControl { margin-bottom: 40px; } .hrLineCenter { padding-top: 30px; border-bottom: 1px solid #ccc; margin-bottom: 30p; } .barChart { width: 100%; margin-top: 20px; margin-bottom: 20px; } .barTitle { display: block; } .progressHolder { margin-bottom: 30px; width: calc(100% - 50px); position: relative; display: table; } .progressHolder .barPercentage { display: inline-block; vertical-align: middle; height: 20px; line-height: 20px; padding-left: 10px; position: absolute; left: 100%; } .progressHolder .progressBar { height: 20px; background-color: #88898b; display: inline-block; vertical-align: middle; position: relative; } .progressHolder .progressBar.barGray { background-color: #88898b; } .progressHolder .progressBar.barOrange { background-color: #f67011; } .progressHolder .progressBar.barBlue { background-color: #119db4; } .pastQ { color: #fff; } .pastQ:after { position: absolute; content: " "; width: 17px; height: 17px; right: 20px; top: 50%; margin-top: -7px; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_down_white.svg) no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { body.innerPage.directoryPage main { padding-top: 0; } } body.innerPage.directoryPage .commonlyUsed .searchResult { border-bottom: 0; } body.innerPage.directoryPage .commonlyUsed .tabBtns .tabBtn { width: 200px; } body.innerPage.directoryPage .articleHolder { margin-bottom: 80px; } body.innerPage.directoryPage .blockTagContent { background-color: #fff; padding: 30px 30px; } body.innerPage.directoryPage .select-style p, body.innerPage.directoryPage .select-style select { min-width: 450px; } @media screen and (max-width: 767px) { body.innerPage.directoryPage .select-style p, body.innerPage.directoryPage .select-style select { min-width: 0; width: 100%; } } @media screen and (max-width: 767px) { body.innerPage.directoryPage .select-style { width: 100%; } } body.innerPage.directoryPage .searchWord { padding: 0 25px; max-width: 400px; height: 60px; float: none; margin-bottom: 0; } @media screen and (max-width: 767px) { body.innerPage.directoryPage .searchWord { min-width: 0; max-width: initial; height: 40px; } } @media screen and (max-width: 480px) { body.innerPage.directoryPage .searchWord { font-size: 12px; padding: 0 15px; } } body.innerPage.directoryPage #searchResult { display: none; } body.innerPage.directoryPage .listResultHolder { display: none; } body.innerPage.directoryPage .listResultHolder .searchResult { margin-top: 10px; padding: 30px 30px; } body.innerPage.directoryPage .listResultHolder .searchResult .resultItem { width: 100%; border-bottom: 1px solid #CCC; padding-bottom: 20px; margin-bottom: 20px; } body.innerPage.directoryPage .listResultHolder .searchResult .resultItem table tr td { padding: 5px 0; } body.innerPage.directoryPage .listResultHolder .searchResult .resultItem table tr td:first-child { width: 20%; padding-right: 5%; } body.innerPage.directoryPage .listResultHolder .searchResult .resultItem table tr td:last-child { width: 80%; } body.innerPage.directoryPage .listResultHolder .searchResult .resultItem:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; } body.innerPage.directoryPage .dirRemarks h3 { margin-bottom: 20px; } body.innerPage.directoryPage .pagination { margin-bottom: 50px; margin-top: 50px; } body.innerPage.directoryPage .recordIndicator { margin-bottom: 50px; } @media screen and (max-width: 767px) { body.innerPage.directoryPage .accordions .blockRow { margin: 0 auto; } body.innerPage.directoryPage .accordions .blockRow:first-child .gridBlock { padding-top: 40px; } body.innerPage.directoryPage .accordions .blockRow.last .gridBlock { padding-bottom: 40px; } body.innerPage.directoryPage .accordions .blockRow .gridBlock { padding: 15px 25px; } body.innerPage.directoryPage .accordions .blockRow .blockHead, body.innerPage.directoryPage .accordions .blockRow .blockTagContent { display: block; float: left; } body.innerPage.directoryPage .accordions .blockRow .blockHead { color: #353535; background: #FFF; width: 25%; padding: 0; } body.innerPage.directoryPage .accordions .blockRow .blockHead:before { display: none; } body.innerPage.directoryPage .accordions .blockRow .blockHead h3:after { content: ':'; } body.innerPage.directoryPage .accordions .blockRow .blockTagContent { width: 75%; padding: 0; } } @media screen and (max-width: 480px) { body.innerPage.directoryPage .accordions .blockRow .blockHead { width: 40%; } body.innerPage.directoryPage .accordions .blockRow .blockTagContent { width: 60%; } } @media screen and (max-width: 767px) { body.innerPage.directoryPage .accordions .blockRow .dirSelect .blockHead { display: none; } } @media screen and (max-width: 767px) { body.innerPage.directoryPage .accordions .blockRow .dirSelect .blockTagContent { width: 100%; } } @media screen and (max-width: 767px) { body.innerPage.directoryPage .searchControl { text-align: center; } } body.innerPage.directoryPage footer .footerLeft { display: none; } body.innerPage.directoryPage footer .footerRight { float: right; } body.innerPage.pageEcard .eCardSlider { padding-bottom: 30px; } body.innerPage.pageEcard .innerPageWrapper { padding-top: 57px; } body.innerPage.pageEcard .innerPageWrapper .blockDetailHolder .blockRow { margin-top: 20px; } body.innerPage.pageEcard main > nav.contentWrapper:first-child { margin-top: 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard main > nav.contentWrapper:first-child { padding-top: 15px; } } body.innerPage.pageEcard nav.sideLowerNav.blockTagHolder { margin-top: 90px; } @media screen and (max-width: 1200px) { body.innerPage.pageEcard nav.sideLowerNav.blockTagHolder { margin-top: 0; } } body.innerPage.pageEcard p { padding-bottom: 10px; } body.innerPage.pageEcard h3 { padding: 10px 0 10px 0; } body.innerPage.pageEcard .subTitle { margin-bottom: 0; padding: 0; } body.innerPage.pageEcard .blockTagContent { padding: 30px 30px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .blockTagContent { padding: 25px; } } body.innerPage.pageEcard .ecardTitle { padding: 10px 0 20px; } body.innerPage.pageEcard .eCardSubTitle { padding: 10px 0 10px 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardSubTitle { padding: 20px 0 10px 0; } } @media screen and (max-width: 767px) { body.innerPage.pageEcard #innerPageSideNav { margin-top: 5px; } } body.innerPage.pageEcard .ecardMain .title { padding-bottom: 0; } body.innerPage.pageEcard .ecardMain h3 { padding: 10px 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardMain h3 { padding: 0; } } body.innerPage.pageEcard .ecardMain .blockTagContent { padding: 10px 30px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardMain .blockTagContent { padding: 0 20px; } } body.innerPage.pageEcard .ecardMain .blockTagContent .hrLine { margin-top: 30px; margin-bottom: 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardMain .blockTagContent .hrLine { margin-top: 15px; margin-bottom: 0; } } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardMain .ecardPersonalisePreviewArea .subTitle { padding-top: 15px; } } body.innerPage.pageEcard .ecardMain .eCardSlider .slide { padding: 30px 0; } body.innerPage.pageEcard .ecardMain .eCardSlider .slide h3 { padding: 0; margin-bottom: 30px; } body.innerPage.pageEcard .ecardMain .eCardSlider .slide img { max-width: 600px; display: block; margin: 0 auto; } body.innerPage.pageEcard .ecardMain #tagCategories .extendBar { margin: 20px 0; text-align: right; } body.innerPage.pageEcard .ecardMain #tagCategories .extendBar:first-child { margin-top: 0; } body.innerPage.pageEcard .ecardMain #tagCategories .blockHead :not(.active):before { background-image: none !important; } body.innerPage.pageEcard .ecardMain #tagCategories .tagContentHolder img { display: block; width: 100%; max-width: 275px; margin: 0 auto; } body.innerPage.pageEcard .ecardMain #tagCategories .tagContentHolder p { text-align: center; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardMain #tagCategories .tagBlock.blockTagHolder .blockHead { background: #FFF; border-bottom: 3px solid #c9c9c9; } body.innerPage.pageEcard .ecardMain #tagCategories .tagBlock.blockTagHolder .blockHead.active { border-bottom: 0; } body.innerPage.pageEcard .ecardMain #tagCategories .tagBlock.blockTagHolder .blockHead:after { background-image: url(../images/common_icons/black/icon_arrow_down_black.svg); } body.innerPage.pageEcard .ecardMain #tagCategories .tagBlock.blockTagHolder .blockHead.active:after { background-image: url(../images/common_icons/black/icon_arrow_up_black.svg); } body.innerPage.pageEcard .ecardMain #tagCategories .tagBlock.blockTagHolder .blockHead a { color: #353535; } } body.innerPage.pageEcard .eCardPreviewHolder { display: block; width: 100%; max-width: 550px; margin: 0 auto; display: block; } body.innerPage.pageEcard .ecardPersonalise .blockTagContent { padding: 25px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .blockDetailHolder .blockHead:after { display: none; } } body.innerPage.pageEcard .ecardPersonalise h3 { padding: 0; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .hrLine { margin-top: 30px; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .previewImg { float: left; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont { float: left; padding-left: 35px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont { margin-top: 20px; padding-left: 0; } } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont h5 { width: 100%; margin-bottom: 5px; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem { display: inline-block; margin-right: 15px; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label { display: inline-block; width: 16px; height: 16px; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="black"] { background: #000000; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="grey"] { background: #666666; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="orange"] { background: #ff9900; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="brown"] { background: #663300; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="green"] { background: #006600; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="light_blue"] { background: #00ccff; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="blue"] { background: #3300ff; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="purple"] { background: #9900ff; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="pink"] { background: #ff00ff; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseColor .radioItem label[for="red"] { background: #ff0000; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseStyle { margin-top: 20px; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseStyle .items { display: inline-block; margin-right: 15px; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseStyle .items input { margin-right: 15px; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseStyle .items .styleBold { font-weight: bold; } body.innerPage.pageEcard .ecardPersonalise .ecardPersonalisePreviewArea .personaliseFont .personaliseStyle .items .styleItalic { font-style: italic; } body.innerPage.pageEcard .ecardPersonalise .select-style p { padding: 5px 35px 5px 10px; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipients .remark { display: inline-block; margin-right: 25px; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList { margin: 30px auto; padding: 30px 15px; background: #f7f7f7; overflow: hidden; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList { padding-top: 20px; } } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList input { border: 1px solid #000; padding: 8px 20px; width: 90%; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .mobHead { display: none; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .mobHead { display: block; width: 100%; margin-bottom: 5px; } } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listHeadRow + .listRow { padding-top: 0; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listHeadRow .listHead { width: 45%; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listHeadRow .listHead:first-child { margin-left: 5%; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listHeadRow .listHead:last-child { width: 50%; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listHeadRow { display: none; } } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listIndexCell { width: 100%; padding-bottom: 10px; } } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listInputName { width: 45%; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listInputEmail { width: 50%; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listInputName, body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listInputEmail { width: 100%; margin-bottom: 10px; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listInputName input, body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listInputEmail input { width: 100%; padding: 8px 15px; } } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listYourInfo { padding: 30px 0; overflow: hidden; float: left; width: 100%; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listYourInfo:last-child { padding-bottom: 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listYourInfo .listIndexCell { display: none !important; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listYourInfo .listCol .listRow input { width: 100%; } } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow { padding: 10px 0; overflow: hidden; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow:last-child { padding-bottom: 0; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow.listHead { padding-bottom: 0; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow.listHead + .listRow { padding-top: 0; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow > div { float: left; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow .listIndexCell { width: 5%; padding-top: 8px; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow .listNameCell { width: 45%; } body.innerPage.pageEcard .ecardPersonalise .ecardRecipientsList .listRow .listEmailCell { width: 50%; } body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgSelect { margin-bottom: 0; } body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgSelect p { margin-bottom: 0; } body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgSelect .select-style { min-width: 300px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgSelect .select-style { width: 100%; min-width: initial; } } body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgSelect .select-style .select { width: 100%; } body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgInput { margin-top: 20px; margin-bottom: 20px; } body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgInput p { margin-bottom: 20px; } body.innerPage.pageEcard .ecardPersonalise .ecardMsg .ecardMsgInput textarea { resize: none; width: 100%; height: 130px; padding: 15px; } body.innerPage.pageEcard .ecardPersonalise .ecardDeliveryOptions { margin-bottom: 40px; } body.innerPage.pageEcard .ecardPersonalise .ecardDeliveryOptions .remark { margin-bottom: 20px; } body.innerPage.pageEcard .ecardPersonalise .ecardDeliveryOptions .items { margin-bottom: 20px; } body.innerPage.pageEcard .ecardPersonalise .ecardDeliveryOptions .items label input { margin-top: 1px; margin-right: 10px; display: inline-block; vertical-align: top; } body.innerPage.pageEcard .ecardPersonalise .ecardDeliveryOptions .items label span { display: inline-block; vertical-align: top; width: calc(100% - 50px); } body.innerPage.pageEcard .searchControl .btnInput, body.innerPage.pageEcard .searchControl input { width: 145px; white-space: normal; min-height: 70px; padding: 0 25px; } body.innerPage.pageEcard .searchControl .btnInput.fbIcon, body.innerPage.pageEcard .searchControl input.fbIcon { text-indent: -30px; background-position: 80% 50%; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .searchControl .btnInput.fbIcon, body.innerPage.pageEcard .searchControl input.fbIcon { background-position: 85% 50%; } } body.innerPage.pageEcard .ecardPersonalisePreview h3 { padding: 0; } body.innerPage.pageEcard .ecardPersonalisePreview .blockTagContent { padding: 15px 30px 30px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalisePreview .blockTagContent { padding: 25px; } } body.innerPage.pageEcard .ecardPersonalisePreview .ecardPreviewBigImg { width: 100%; position: relative; } body.innerPage.pageEcard .ecardPersonalisePreview .ecardPreviewBigImg img, body.innerPage.pageEcard .ecardPersonalisePreview .ecardPreviewBigImg .ecardPreviewCaption { width: 100%; display: inline-block; text-align: center; font-style: italic; color: #951717; margin: 30px auto; } body.innerPage.pageEcard .ecardPersonalisePreview .ecardImportantNoticesArea { margin-top: 40px; padding-bottom: 30px; } body.innerPage.pageEcard .ecardPersonalisePreview .ecardImportantNoticesArea .noticesHolder { border: 1px solid #353535; margin-bottom: 40px; max-height: 300px; padding: 0; } body.innerPage.pageEcard .ecardPersonalisePreview .ecardImportantNoticesArea .noticesHolder p { padding: 20px; margin: 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .ecardPersonalisePreview .ecardImportantNoticesArea .noticesHolder { max-height: 200px; overflow-y: auto; } } body.innerPage.pageEcard .ecardPersonalisePreview .ecardImportantNoticesArea p { margin-bottom: 40px; } body.innerPage.pageEcard .ecardPersonalisePreview .ecardImportantNoticesArea .items input { margin-right: 10px; } body.innerPage.pageEcard .ecardPersonalisePreview .ecardImportantNoticesArea .items span { width: calc(100% - 30px); display: inline-block; vertical-align: top; } body.innerPage.pageEcard .searchControl .btnInput, body.innerPage.pageEcard .searchControl input { width: 170px; white-space: normal; min-height: 70px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .searchControl .btnInput, body.innerPage.pageEcard .searchControl input { width: 40%; padding: 10px 15px; } } @media screen and (max-width: 480px) { body.innerPage.pageEcard .searchControl .btnInput, body.innerPage.pageEcard .searchControl input { width: 40%; font-size: 0.8em; margin-right: 10px; min-height: 50px; } } body.innerPage.pageEcard .searchControl .btnInput { display: inline-block; vertical-align: top; text-align: center; position: relative; white-space: nowrap; } body.innerPage.pageEcard .searchControl .btnInput:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .searchControl .btnInput { padding: 10px 5px; } } body.innerPage.pageEcard .searchControl .btnInput.btnIconFb:after { content: ''; display: inline-block; vertical-align: middle; margin-left: 15px; width: 23px; height: 23px; background-image: url(../images/ecard/shareFacebook.png); background-size: 100%; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .searchControl .btnInput.btnIconFb:after { margin-left: 8px; } } @media screen and (max-width: 480px) { body.innerPage.pageEcard .searchControl .btnInput.btnIconFb:after { width: 18px; height: 18px; } } @media screen and (max-width: 380px) { body.innerPage.pageEcard .searchControl .btnInput.btnIconFb:after { margin-left: 5px; width: 15px; height: 15px; } } body.innerPage.pageEcard .searchControl .btnInput > span { display: inline-block; vertical-align: middle; white-space: normal; } body.innerPage.pageEcard .searchControl.threeBtns .btnInput, body.innerPage.pageEcard .searchControl.threeBtns input { width: 170px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .searchControl.threeBtns .btnInput, body.innerPage.pageEcard .searchControl.threeBtns input { width: 29%; } } @media screen and (max-width: 480px) { body.innerPage.pageEcard .searchControl.threeBtns .btnInput, body.innerPage.pageEcard .searchControl.threeBtns input { width: 27%; } } @media screen and (max-width: 380px) { body.innerPage.pageEcard .searchControl.threeBtns .btnInput, body.innerPage.pageEcard .searchControl.threeBtns input { width: 30%; margin-right: 5px; } } @media screen and (max-width: 767px) { body.innerPage.pageEcard .searchControl { text-align: center; margin-bottom: 0; } } body.innerPage.pageEcard .eCardFaq .bulletList { color: #951717; margin-top: 20px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardFaq .subTitle { margin-bottom: 0; } } body.innerPage.pageEcard .eCardFaq .commonlyUsed .accordions .accordionContent .secondLevel { margin-top: 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardFaq .commonlyUsed .faqSection.accordions .accordionContent { padding: 15px 25px 0; } } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardFaq .commonlyUsed .accordions .accordionContent .qaHolder.questionHolder { margin: 20px 0 25px; } } body.innerPage.pageEcard .eCardFaq .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaIndex, body.innerPage.pageEcard .eCardFaq .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaContent { padding-top: 20px; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardFaq .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaIndex, body.innerPage.pageEcard .eCardFaq .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaContent { margin-bottom: 0; } } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardFaq .commonlyUsed .accordions .accordionContent .qaHolder.answerHolder .qaIndex { display: none; } } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardThankyou .subTitle { margin-bottom: 15px; } } body.innerPage.pageEcard .eCardThankyou .articleHolder p { text-align: center; padding: 0; } body.innerPage.pageEcard .eCardHKPreview .previewHolder { display: block; max-width: 550px; width: 100%; margin: 30px auto; } body.innerPage.pageEcard .eCardHKPreview .btnMore { float: right; } body.innerPage.pageEcard .eCardHKPreview .btnMore:before { content: ''; width: 20px; height: 20px; display: inline-block; vertical-align: middle; background: url(../images/common_icons/black/icon_circleright_black2.svg) no-repeat center center; background-size: 100%; } body.innerPage.pageEcard .eCardHKPreview .btnMore span { margin-left: 10px; display: inline-block; vertical-align: middle; } body.innerPage.pageEcard .eCardHKPreview .bottomBar { margin: 25px auto 0; } @media screen and (max-width: 767px) { body.innerPage.pageEcard .eCardHKPreview .bottomBar { margin-bottom: 25px; } } body.innerPage.pageEcard .eCardHKPreview .searchControl { margin-top: 0; } body.innerPage main.qnaMain > nav.contentWrapper:first-child { margin-top: 0; } .ecard.innerPageWrapper { padding-top: 57px; } @media screen and (max-width: 767px) { .ecard.innerPageWrapper { padding-top: 32px; } } .ecard.innerPageWrapper .recommendHolder { background-color: #fff; padding: 35px 25px; } @media screen and (max-width: 480px) { .ecard.innerPageWrapper .recommendHolder { padding: 20px; } } .ecard.innerPageWrapper .recommendHolder .item { padding: 0; } .ecard.innerPageWrapper .recommendHolder .item a { color: #990000; margin-top: 0; display: inline-block; position: relative; } .ecard.innerPageWrapper .bottomBar { position: relative; margin: 0; height: 38px; } @media screen and (max-width: 767px) { .ecard.innerPageWrapper .bottomBar { display: none; } } .ecard.innerPageWrapper.blockTagContent { background-color: #fff; padding: 10px 25px 10px 25px; margin: 0 auto; } @media screen and (max-width: 767px) { .ecard.innerPageWrapper.blockTagContent { padding: 10px 20px 10px 20px; } } @media screen and (max-width: 480px) { .ecard.innerPageWrapper.blockTagContent { padding: 10px 10px 10px 10px; } } .fbIcon { background-image: url(../images/ecard/shareFacebook.png); background-repeat: no-repeat; background-position: 111px 22px; } .fbIcon:hover { background-image: url(../images/ecard/shareFacebook_o.png); } .ecardTitle { text-align: center; padding: 0 15px 10px 0; } @media screen and (max-width: 480px) { .ecardTitle { margin: 0; } } .ecardImgView { margin: 0 auto; display: block; } .ecardImg { margin: 0 auto; display: block; } .ecardFrom { text-align: center; vertical-align: inherit; padding: 10px; } .blockTagContent { background-color: #fff; padding: 30px 20px 30px 40px; margin-top: 20px; } .barControl { margin-bottom: 40px; } .hrLineCenter { padding-top: 30px; border-bottom: 1px solid #ccc; margin-bottom: 30px; } .ecardControl { margin-bottom: 10px; margin-top: 40px; text-align: left; } @media screen and (max-width: 767px) { .ecardControl { text-align: center; } } .ecardControl input { background-color: #cc4c02; color: #FFF; margin-right: 20px; padding: 10px 20px; border: 0; border-bottom: 2px solid #d34e00; cursor: pointer; width: 145px; white-space: normal; display: inline; -webkit-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; } @media screen and (min-width: 1201px) { .ecardControl input:hover { background-color: #fff; color: #cc4c02; border-color: #cc4c02; } } .ecardControl input:disabled { cursor: initial; opacity: 0.5; } .ecardControl input:disabled:hover { background-color: #cc4c02; color: #FFF; border-color: #d34e00; } @media screen and (max-width: 767px) { .ecardControl input { padding: 10px 30px; margin-right: 15px; float: none; display: inline-block; } .ecardControl input:last-child { margin-right: 0; } } @media screen and (max-width: 480px) { .ecardControl input { margin-bottom: 20px; padding: 10px 30px; width: 125px; } } @media screen and (max-width: 380px) { .ecardControl input { margin-bottom: 20px; padding: 10px 19px; width: 100px; } } body.innerPage.pageOnlineSurvey header nav .navQnaLangHolder { display: none !important; } body.innerPage.pageOnlineSurvey .ui-widget-content { border: 1px solid #cc4c02; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey #ui-datepicker-div { position: fixed !important; width: 300px !important; left: 50% !important; margin-left: -150px; top: 50% !important; margin-top: -120px; } } body.innerPage.pageOnlineSurvey .contentLink { word-wrap: break-word; } body.innerPage.pageOnlineSurvey .innerPageWrapper .contentWrapper > p { margin: 15px auto; } body.innerPage.pageOnlineSurvey .innerPageWrapper .contentWrapper > p:last-of-type { margin-bottom: 0; } body.innerPage.pageOnlineSurvey .onlineSurveyQuestions { padding-top: 45px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .onlineSurveyQuestions { padding-top: 15px; } } body.innerPage.pageOnlineSurvey .onlineSurveyQuestions .tagTitleHolder { margin-bottom: 35px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .onlineSurveyQuestions .tagTitleHolder { margin-bottom: 15px; } } body.innerPage.pageOnlineSurvey .onlineSurveyQuestions .tagTitleHolder .title { margin-bottom: 0; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .onlineSurveyQuestions .tagTitleHolder.noBG { padding-top: 0; padding-bottom: 0; } body.innerPage.pageOnlineSurvey .onlineSurveyQuestions .tagTitleHolder.noBG .surveyQID { margin-bottom: 10px; } } body.innerPage.pageOnlineSurvey .select-style { min-width: 100px; margin-right: 5px; } body.innerPage.pageOnlineSurvey .select-style:last-child { margin-right: 5px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .select-style { min-width: initial; min-width: none; } } body.innerPage.pageOnlineSurvey .select-style p { padding: 5px 35px 5px 15px; border: 1px solid #353535; } body.innerPage.pageOnlineSurvey .select-style p:after { border-top-color: #cc4c02; } body.innerPage.pageOnlineSurvey input[type="text"] { margin-right: 5px; padding: 6px 35px 6px 15px; border: 1px solid #353535; } body.innerPage.pageOnlineSurvey input[type="text"]:last-child { margin-right: 5px; } body.innerPage.pageOnlineSurvey .customCheckboxClicker, body.innerPage.pageOnlineSurvey input[type="checkbox"] { display: inline-block; margin: 0; border: 1px solid #cc4c02; width: 25px; height: 25px; border-radius: 1px; } body.innerPage.pageOnlineSurvey .customCheckboxClicker.checked, body.innerPage.pageOnlineSurvey .customCheckboxClicker:checked, body.innerPage.pageOnlineSurvey input[type="checkbox"].checked, body.innerPage.pageOnlineSurvey input[type="checkbox"]:checked { color: #FFF; background: #cc4c02 !important; } body.innerPage.pageOnlineSurvey .customCheckboxClicker.checked:after, body.innerPage.pageOnlineSurvey .customCheckboxClicker:checked:after, body.innerPage.pageOnlineSurvey input[type="checkbox"].checked:after, body.innerPage.pageOnlineSurvey input[type="checkbox"]:checked:after { color: #FFF; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .customCheckboxClicker, body.innerPage.pageOnlineSurvey input[type="checkbox"] { width: 20px; height: 20px; } } body.innerPage.pageOnlineSurvey .radioItem { vertical-align: middle; display: inline-block; width: 100%; } body.innerPage.pageOnlineSurvey .radioItem label { margin-top: 1px; display: inline-block; width: calc(100% - 50px); } body.innerPage.pageOnlineSurvey .radioItem input[type="radio"] { margin-top: 3px; border-color: #cc4c02; margin-right: 30px; } body.innerPage.pageOnlineSurvey .radioItem input[type="radio"]:after { background: #cc4c02; } body.innerPage.pageOnlineSurvey .radioItemHolder { position: relative; overflow: hidden; margin-bottom: 25px; } body.innerPage.pageOnlineSurvey .radioItemHolder:last-child { margin-bottom: 0; } body.innerPage.pageOnlineSurvey .radioItemHolder > span { vertical-align: middle; display: inline-block; margin: 0 15px; } body.innerPage.pageOnlineSurvey .radioItemHolder input[type="text"] + span { margin-left: 10px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .radioItemHolder input[type="text"] + span { margin-right: 0; } } body.innerPage.pageOnlineSurvey .btnSurveyControl { margin: 60px auto; float: right; } body.innerPage.pageOnlineSurvey .btnSurveyControl > span { display: inline-block; vertical-align: middle; } body.innerPage.pageOnlineSurvey .btnSurveyControl:after { content: ''; margin-left: 15px; width: 30px; height: 30px; display: inline-block; vertical-align: middle; background: url(../images/common_icons/orange/icon_circleright_orange.svg) no-repeat center center; background-size: 100%; } .innerPage.pageOnlineSurvey.edge .btnSurveyControl:after { background-size: 29px; } .innerPage.pageOnlineSurvey.trident .btnSurveyControl:after { background-size: 29px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .btnSurveyControl:after { margin-left: 10px; } } body.innerPage.pageOnlineSurvey .btnSurveyControl.btnPrev:after { display: none; } body.innerPage.pageOnlineSurvey .btnSurveyControl.btnPrev:before { content: ''; width: 30px; height: 30px; display: inline-block; vertical-align: middle; background: url(../images/common_icons/orange/icon_circleleft_orange.svg) no-repeat center center; background-size: 100%; margin-right: 15px; } .innerPage.pageOnlineSurvey.edge .btnSurveyControl.btnPrev:before { background-size: 29px; } .innerPage.pageOnlineSurvey.trident .btnSurveyControl.btnPrev:before { background-size: 29px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .btnSurveyControl.btnPrev:before { margin-right: 10px; } } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .btnSurveyControl { margin: 30px auto; } } body.innerPage.pageOnlineSurvey .tagTitleHolder { display: block; background: #ffeedc; border-left: 10px solid #cc4c02; padding: 8px 30px; } body.innerPage.pageOnlineSurvey .tagTitleHolder.tagInfoHolder { padding: 15px 30px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagTitleHolder.tagInfoHolder { padding: 8px 15px; } } body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG { background: transparent; color: #cc4c02; } body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG .title, body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG .subtitle, body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG h1, body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG h2, body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG h3, body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG h4, body.innerPage.pageOnlineSurvey .tagTitleHolder.noBG h5 { color: #cc4c02; } body.innerPage.pageOnlineSurvey .tagTitleHolder:last-child { margin-bottom: 25px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagTitleHolder { padding: 8px 15px; } } body.innerPage.pageOnlineSurvey .tagTitleHolder .title { padding: 0; } body.innerPage.pageOnlineSurvey .tagTitleHolder h5 { margin-bottom: 5px; } body.innerPage.pageOnlineSurvey .surveyIntro, body.innerPage.pageOnlineSurvey .surveyOtherHolder, body.innerPage.pageOnlineSurvey .surveyQuestion { padding: 35px 0; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .surveyIntro, body.innerPage.pageOnlineSurvey .surveyOtherHolder, body.innerPage.pageOnlineSurvey .surveyQuestion { padding: 25px 0; } } body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder { margin-bottom: 35px; position: relative; } body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder .surveyQID, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder .surveyQID, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder .surveyQID { width: 60px; display: block; float: left; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder .surveyQID, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder .surveyQID, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder .surveyQID { width: 100%; } } body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder .surveyQContent, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder .surveyQContent, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder .surveyQContent { width: calc(100% - 60px); display: block; float: left; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder .surveyQContent, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder .surveyQContent, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder .surveyQContent { width: 100%; } } body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder h1:after, body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder h2:after, body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder h3:after, body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder h4:after, body.innerPage.pageOnlineSurvey .surveyIntro .tagTitleHolder h5:after, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder h1:after, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder h2:after, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder h3:after, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder h4:after, body.innerPage.pageOnlineSurvey .surveyOtherHolder .tagTitleHolder h5:after, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder h1:after, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder h2:after, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder h3:after, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder h4:after, body.innerPage.pageOnlineSurvey .surveyQuestion .tagTitleHolder h5:after { width: 100%; display: table; content: ''; height: 0; clear: both; } body.innerPage.pageOnlineSurvey .inputCaptcha { margin-top: 10px; } body.innerPage.pageOnlineSurvey .tagMsgHolder { background: #FFF; padding: 40px 35px; border-bottom: 6px solid #cc4c02; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder { padding: 30px 25px; } } body.innerPage.pageOnlineSurvey .tagMsgHolder:after { width: 100%; display: table; content: ''; height: 0; clear: both; } body.innerPage.pageOnlineSurvey .tagMsgHolder > p { margin-bottom: 20px; } body.innerPage.pageOnlineSurvey .tagMsgHolder > p.remark { color: #87898b; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImg, body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion { float: left; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImg { width: 60%; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImg { width: 50%; } } @media screen and (max-width: 640px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImg { width: 100%; } } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImg .radioItemHolder .radioItem input[type="radio"]:checked + label { color: #cc4c02; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion { width: 40%; padding-left: 30px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion { width: 50%; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion .radioItemHolder { margin-bottom: 15px; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion .radioItem { width: 100%; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion .radioItem input[type="radio"] { margin-right: 5px; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion .radioItem label { width: calc(100% - 50px); } } @media screen and (max-width: 640px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyImgQuestion { padding-left: 0; margin-top: 20px; width: 100%; } } body.innerPage.pageOnlineSurvey .tagMsgHolder .imgCheckHolder { float: left; display: block; margin-right: 60px; } body.innerPage.pageOnlineSurvey .tagMsgHolder .imgCheckHolder:last-child { margin-right: 0; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .imgCheckHolder { width: 100%; margin-bottom: 30px; } } body.innerPage.pageOnlineSurvey .tagMsgHolder .imgCheckHolder .checkHolder { margin-top: 30px; } body.innerPage.pageOnlineSurvey .tagMsgHolder .imgCheckHolder .checkHolder label input[type="checkbox"] { vertical-align: middle; display: inline-block; } body.innerPage.pageOnlineSurvey .tagMsgHolder .imgCheckHolder .checkHolder label span { margin-left: 15px; vertical-align: middle; display: inline-block; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyRank .surveyRankInputHolder { width: 100%; margin-bottom: 15px; } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyRank .surveyRankInputHolder span { display: inline-block; vertical-align: middle; width: 150px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyRank .surveyRankInputHolder span { width: 30%; } } @media screen and (max-width: 380px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyRank .surveyRankInputHolder span { width: 40%; } } body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyRank .surveyRankInputHolder input[type="text"] { vertical-align: middle; display: inline-block; width: 75px; padding-right: 0; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyRank .surveyRankInputHolder input[type="text"] { width: 65%; } } @media screen and (max-width: 380px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .surveyRank .surveyRankInputHolder input[type="text"] { width: 55%; } } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .dropdownWithInput { width: 100%; } body.innerPage.pageOnlineSurvey .tagMsgHolder .dropdownWithInput .select-style, body.innerPage.pageOnlineSurvey .tagMsgHolder .dropdownWithInput input { width: 100%; margin-bottom: 20px; } } @media screen and (max-width: 1200px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .radioWithInput .radioItem { width: 100%; } body.innerPage.pageOnlineSurvey .tagMsgHolder .radioWithInput .radioItem input[type="radio"] { margin-right: 10px; margin-top: 0; } body.innerPage.pageOnlineSurvey .tagMsgHolder .radioWithInput .radioItem label { width: calc(100% - 50px); } body.innerPage.pageOnlineSurvey .tagMsgHolder .radioWithInput input[type="text"] { width: calc(100% - 135px); margin-left: 30px; margin-bottom: 5px; max-width: 50%; } } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .tagMsgHolder .radioWithInput input[type="text"] { max-width: initial; width: calc(100% - 100px); padding-left: 0; padding-right: 0; text-indent: 10px; } } body.innerPage.pageOnlineSurvey .highlightTable { margin-top: 25px; width: 100%; table-layout: fixed; color: #58595b; } body.innerPage.pageOnlineSurvey .highlightTable col:first-child { width: 25%; } body.innerPage.pageOnlineSurvey .highlightTable th { background: #cc4c02; width: 100%; margin-bottom: 2px; color: #FFF; padding: 25px 20px; border-bottom: 1px solid #f8f8f8; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .highlightTable th { padding: 15px 20px; } } body.innerPage.pageOnlineSurvey .highlightTable tr { width: 100%; overflow: hidden; } body.innerPage.pageOnlineSurvey .highlightTable tr:nth-child(2n) { background: #e8bea3; } body.innerPage.pageOnlineSurvey .highlightTable tr:nth-child(2n+1) { background: #e9dbd1; } body.innerPage.pageOnlineSurvey .highlightTable tr#rowSystem, body.innerPage.pageOnlineSurvey .highlightTable tr#rowBrowser { color: #951717; } body.innerPage.pageOnlineSurvey .highlightTable tr td { padding: 25px 20px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .highlightTable tr td { padding: 15px 20px; } } body.innerPage.pageOnlineSurvey .highlightTable tr td:first-child { border-right: 1px solid #FFF; width: 200px; } body.innerPage.pageOnlineSurvey .checkTable { width: 100%; table-layout: fixed; } body.innerPage.pageOnlineSurvey .checkTable tr { width: 100%; overflow: hidden; } body.innerPage.pageOnlineSurvey .checkTable tr:nth-child(2n) { background: #e8bea3; } body.innerPage.pageOnlineSurvey .checkTable tr:nth-child(2n+1) { background: #e9dbd1; } body.innerPage.pageOnlineSurvey .checkTable tr:first-child { background: #cc4c02; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .checkTable tr:first-child { display: none; } } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .checkTable tr { margin-bottom: 30px; display: block; } } body.innerPage.pageOnlineSurvey .checkTable tr th { color: #FFF; } body.innerPage.pageOnlineSurvey .checkTable tr th, body.innerPage.pageOnlineSurvey .checkTable tr td { padding: 10px 30px; text-align: center; vertical-align: middle; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .checkTable tr th, body.innerPage.pageOnlineSurvey .checkTable tr td { display: block; text-align: left; padding: 10px 0; overflow: hidden; width: 100%; position: relative; } body.innerPage.pageOnlineSurvey .checkTable tr th:nth-child(2n), body.innerPage.pageOnlineSurvey .checkTable tr td:nth-child(2n) { background: #e8bea3; } body.innerPage.pageOnlineSurvey .checkTable tr th:nth-child(2n+1), body.innerPage.pageOnlineSurvey .checkTable tr td:nth-child(2n+1) { background: #e9dbd1; } body.innerPage.pageOnlineSurvey .checkTable tr th label, body.innerPage.pageOnlineSurvey .checkTable tr td label { overflow: hidden; width: 100%; position: relative; text-align: left; display: block; min-height: 20px; } body.innerPage.pageOnlineSurvey .checkTable tr th label .access, body.innerPage.pageOnlineSurvey .checkTable tr td label .access { position: relative; top: auto; left: auto; width: 30%; display: block; float: left; height: auto; margin-left: 30px; } } body.innerPage.pageOnlineSurvey .checkTable tr th:first-child, body.innerPage.pageOnlineSurvey .checkTable tr td:first-child { text-align: left; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .checkTable tr th:first-child, body.innerPage.pageOnlineSurvey .checkTable tr td:first-child { width: 100%; background: #cc4c02; color: #FFF; padding-left: 65%; } body.innerPage.pageOnlineSurvey .checkTable tr th:first-child > span, body.innerPage.pageOnlineSurvey .checkTable tr td:first-child > span { display: inline-block; position: relative; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .checkTable tr th input[type="checkbox"], body.innerPage.pageOnlineSurvey .checkTable tr th .customCheckboxClicker, body.innerPage.pageOnlineSurvey .checkTable tr td input[type="checkbox"], body.innerPage.pageOnlineSurvey .checkTable tr td .customCheckboxClicker { position: absolute; left: 65%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } body.innerPage.pageOnlineSurvey .surveyRateTable { width: 100%; table-layout: fixed; } body.innerPage.pageOnlineSurvey .surveyRateTable tr { width: 100%; overflow: hidden; } body.innerPage.pageOnlineSurvey .surveyRateTable tr th { color: #FFF; width: 100%; } body.innerPage.pageOnlineSurvey .surveyRateTable tr th .leftTxt { float: left; } body.innerPage.pageOnlineSurvey .surveyRateTable tr th .rightTxt { float: right; } body.innerPage.pageOnlineSurvey .surveyRateTable tr:nth-child(2n) { background: #e8bea3; } body.innerPage.pageOnlineSurvey .surveyRateTable tr:nth-child(2n+1) { background: #e9dbd1; } body.innerPage.pageOnlineSurvey .surveyRateTable tr:first-child { background: #cc4c02; color: #FFF; } body.innerPage.pageOnlineSurvey .surveyRateTable tr th, body.innerPage.pageOnlineSurvey .surveyRateTable tr td { padding: 10px 30px; text-align: center; vertical-align: middle; } body.innerPage.pageOnlineSurvey .surveyRateTable tr th input[type="radio"], body.innerPage.pageOnlineSurvey .surveyRateTable tr td input[type="radio"] { margin: 0; } body.innerPage.pageOnlineSurvey .surveyDatePick .triggerCalendar { margin-right: 30px; } body.innerPage.pageOnlineSurvey .surveyDatePick .dateItem { display: inline-block; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .surveyDatePick .dateItem { width: 100%; margin-bottom: 20px; } body.innerPage.pageOnlineSurvey .surveyDatePick .dateItem input[type="text"] { width: calc(100% - 105px); margin-right: 10px; } body.innerPage.pageOnlineSurvey .surveyDatePick .dateItem > span.visibleMb { display: inline-block; width: 60px; } body.innerPage.pageOnlineSurvey .surveyDatePick .dateItem .triggerCalendar { margin-right: 0; } } body.innerPage.pageOnlineSurvey .progressDisplay { padding-top: 30px; } body.innerPage.pageOnlineSurvey .progressDisplay:after { width: 100%; display: table; content: ''; height: 0; clear: both; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl { width: 130px; display: inline-block; vertical-align: middle; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .progressDisplay .progressControl { width: 100px; } } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl { margin: 0; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnNext { float: right; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnNext .txtNext { display: inline-block; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnNext .txtSubmit { display: none; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnPrev { float: left; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit { background-color: #cc4c02; color: #FFF; margin-left: 0; padding: 4px 25px; border: 0; border-bottom: 2px solid #d34e00; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit > span { color: #FFF; } @media screen and (min-width: 1201px) { body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit:hover { background: #FFF; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit:hover > span { color: #cc4c02; } } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit { padding: 4px 20px; } } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit:after { display: none; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit .txtNext { display: none; } body.innerPage.pageOnlineSurvey .progressDisplay .progressControl .btnSurveyControl.btnSubmit .txtSubmit { display: inline-block; } body.innerPage.pageOnlineSurvey .progressDisplay .progressBarHolder { width: calc(100% - 260px); display: inline-block; vertical-align: middle; box-sizing: border-box; padding: 0 20px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .progressDisplay .progressBarHolder { width: calc(100% - 200px); padding: 0 10px; } } body.innerPage.pageOnlineSurvey .progressDisplay .progressBarHolder .progressBarOuter { position: relative; background: #ffeedc; height: 22px; border-radius: 9px; } @media screen and (max-width: 767px) { body.innerPage.pageOnlineSurvey .progressDisplay .progressBarHolder .progressBarOuter { height: 18px; border-radius: 8px; } } body.innerPage.pageOnlineSurvey .progressDisplay .progressBarHolder .progressBarOuter .progressBar { position: relative; background: #cc4c02; height: 100%; border-radius: 9px; } body.innerPage.pageOnlineSurvey .progressDisplay .progressBarHolder .progressBarOuter .progressBar > span { position: absolute; bottom: 100%; margin-bottom: 5px; right: 0; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); color: #96918e; } body.innerPage.pageOnlineSurvey .progressDisplay .pageControl { padding: 30px 0; text-align: center; } body.innerPage.pageOnlineSurvey .progressDisplay .pageControl .select-style { min-width: initial; } body.innerPage.pageOnlineSurvey .progressDisplay .pageControl .select-style p { border: 1px solid #acacac; color: #acacac; background: #FFF; } body.innerPage.pageOnlineSurvey .progressDisplay .pageControl .select-style p:after { border-top-color: #353535; } body.innerPage.pageOnlineSurvey .progressDisplay .pageControl span { color: #acacac; display: inline-block; vertical-align: middle; } .onlineSurveyEnd .surveyQuestion .tel, .onlineSurveyEnd .surveyQuestion .email { color: #951717; } .onlineSurveySubmit .onlineSurveyContactInfo .contactInfoInputHolder { width: 100%; margin-bottom: 15px; } .onlineSurveySubmit .onlineSurveyContactInfo .contactInfoInputHolder span { display: inline-block; vertical-align: middle; width: 150px; margin-bottom: 5px; } .onlineSurveySubmit .onlineSurveyContactInfo .contactInfoInputHolder input[type="text"] { vertical-align: middle; display: inline-block; width: 250px; padding-right: 0; width: calc(100% - 85px); max-width: 300px; } @media screen and (max-width: 767px) { .onlineSurveySubmit .onlineSurveyContactInfo .contactInfoInputHolder input[type="text"] { width: 100%; max-width: initial; max-width: none; height: 30px; padding-top: 0; padding-bottom: 0; } } .onlineSurveySubmit .onlinecaptcha .onCaptchaImg .captchaControl input[type="text"] { margin-right: 5px; padding: 7px 35px 6px 15px; border: 1px solid #353535; margin-top: 10px; } .wifiLocator .locationMap { padding-bottom: 10px; } .wifiLocator .locationMap .tncNotices { margin: 20px auto; } .wifiLocator .searchControl { margin-top: 20px; } .wifiLocator .pageDisplay { width: 100%; } body.innerPage .wifiLocator .pagination { margin: 20px 0; } .wifiLocator .premisesList { margin-bottom: 30px; } .wifiLocator .premisesList tr { border-bottom: 1px solid #cbcbcb; } .wifiLocator .premisesList tr th, .wifiLocator .premisesList tr td { width: 50%; padding: 20px 0; } .wifiLocator .premisesList tr .locationName { color: #990000; } .wifiLocator .premisesList tr .locationName span { display: block; float: left; width: calc(100% - 40px); } .wifiLocator .premisesList tr .locationName span.tableRowIndex { width: auto; color: #353535; position: relative; margin-right: 8px; } .wifiLocator .premisesList tr .locationName span a:hover { text-decoration: underline; } .wifiLocator .premisesList tr .address { color: #353535; } .wifiLocator .premisesListLink { display: block; margin: 50px 0 40px; cursor: pointer; position: relative; } .wifiLocator .premisesListLink > span { color: #990000; display: inline-block; vertical-align: middle; } .wifiLocator .premisesListLink:hover > span { text-decoration: underline; } .wifiLocator .premisesListLink:before { content: ''; display: inline-block; width: 18px; height: 19px; position: relative; margin-right: 10px; background-size: 100% 100% !important; background: rgba(255, 255, 255, 0) url(../images/common_icons/red/icon_writinglist_red.svg) no-repeat center center; vertical-align: middle; } .ilearnathome .searchPanel .radioInline { display: block; float: left; margin-bottom: 25px; } .ilearnathome .searchPanel .radioInline input[type="radio"] { margin-top: 2px; } @media screen and (max-width: 767px) { .ilearnathome .searchPanel .radioInline { width: 100%; } } .ilearnathome .headMsg { margin: 20px auto 5px; } @media screen and (max-width: 1200px) { .ilearnathome .headMsg { margin-bottom: 0; } } .ilearnathome .serviceZone ul { margin: 0 20px; padding-top: 15px; padding-bottom: 15px; } .ilearnathome .serviceZone ul li { color: #990000; } .ilearnathome .serviceZone ul a { padding: 15px 0; display: block; } @media screen and (max-width: 1200px) { .ilearnathome .syncChildHeightTb:first-of-type { margin-top: 0; } } @media screen and (max-width: 1200px) { .ilearnathome #serviceZoneHolder .serviceZone:first-child { margin-top: 0; } } @media screen and (max-width: 767px) { .ilearnathome #serviceZoneHolder .blockRow.margin-1-4, .ilearnathome #serviceZoneHolder .gridBlock:last-child { margin-bottom: 0; } } .ilearnathome .locationMap { padding-bottom: 10px; } @media screen and (max-width: 767px) { .ilearnathome .locationMap { display: none; } } .ilearnathome .locationMap img { width: 100%; } .ilearnathome .locationMap .tncNotices { margin: 20px auto; } .ilearnathome .searchControl { margin-top: 20px; } @media screen and (max-width: 767px) { .ilearnathome .searchControl { margin-bottom: 0; } } body.innerPage .ilearnathome .pagination { margin: 20px 0; } .ilearnathome .rowTitle { margin-bottom: 5px; } .ilearnathome .serviceLocationList .serviceLocationListHeader { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #c9c9c9; } .ilearnathome .serviceLocationList .serviceLocationListHeader .serviceLocationListHead { font-weight: bold; float: left; width: 25%; } @media screen and (max-width: 767px) { .ilearnathome .serviceLocationList .serviceLocationListHeader .serviceLocationListHead { display: none; } } .ilearnathome .serviceLocationList .serviceLocationListRow { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #c9c9c9; } .ilearnathome .serviceLocationList .serviceLocationListRow > div:first-child, .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(2), .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(3), .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(4) { float: left; width: 25%; } @media screen and (max-width: 767px) { .ilearnathome .serviceLocationList .serviceLocationListRow > div:first-child, .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(2), .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(3), .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(4) { width: 100%; margin: 10px auto; } } .ilearnathome .serviceLocationList .serviceLocationListRow > div:first-child, .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(2), .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(3) { padding-right: 5%; } .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(4) a { margin-top: 5px; display: inline-block; } .ilearnathome .serviceLocationList .serviceLocationListRow > div:nth-child(4) a:nth-child(2) { margin-top: 20px; } .ilearnathome .serviceLocationList .serviceLocationListRow > div.serviceTitle { float: left; width: 100%; clear: both; margin: 10px 0; } .ilearnathome .serviceLocationList .serviceLocationListRow .serviceList { float: left; width: 100%; clear: both; } @media screen and (max-width: 767px) { .ilearnathome .serviceLocationList .serviceLocationListRow .serviceList { margin-bottom: 0; } } .ilearnathome .serviceLocationList .serviceLocationListRow .serviceList br { display: none; } .ilearnathome .serviceLocationList .serviceLocationListRow .serviceList > li { display: block; float: left; margin-right: 20px; } @media screen and (max-width: 767px) { .ilearnathome .serviceLocationList .serviceLocationListRow .serviceList > li { width: 100%; } } @media screen and (max-width: 767px) { .ilearnathome .serviceLocationList .serviceLocationListRow .icon1, .ilearnathome .serviceLocationList .serviceLocationListRow .icon2, .ilearnathome .serviceLocationList .serviceLocationListRow .icon3, .ilearnathome .serviceLocationList .serviceLocationListRow .icon4, .ilearnathome .serviceLocationList .serviceLocationListRow .serviceLocationLink { width: 100%; display: block; margin: 10px auto; } } .ilearnathome .serviceLocationList .serviceLocationListRow .icon1:before, .ilearnathome .serviceLocationList .serviceLocationListRow .icon2:before, .ilearnathome .serviceLocationList .serviceLocationListRow .icon3:before, .ilearnathome .serviceLocationList .serviceLocationListRow .icon4:before, .ilearnathome .serviceLocationList .serviceLocationListRow .serviceLocationLink:before { content: ''; display: inline-block; position: relative; margin-right: 10px; background-size: 100% !important; vertical-align: middle; } .ilearnathome .serviceLocationList .serviceLocationListRow .icon1:before { width: 15px; height: 15px; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_pen_orange.svg) no-repeat center center; } .ilearnathome .serviceLocationList .serviceLocationListRow .icon2:before { width: 18px; height: 15px; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_screen_orange.svg) no-repeat center center; } .ilearnathome .serviceLocationList .serviceLocationListRow .icon3:before { width: 23px; height: 15px; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_book_orange.svg) no-repeat center center; } .ilearnathome .serviceLocationList .serviceLocationListRow .icon4:before { width: 16px; height: 15px; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_people_orange.svg) no-repeat center center; } .ilearnathome .serviceLocationList .serviceLocationListRow .serviceLocationLink { color: #990000; } .ilearnathome .serviceLocationList .serviceLocationListRow .serviceLocationLink.iconPlaceholder:before { width: 19px; height: 15px; background: rgba(255, 255, 255, 0) url(../images/common_icons/red/icon_placeholder_red.svg) no-repeat center center; } .ilearnathome .serviceLocationList .serviceLocationListRow .serviceLocationLink.iconGeoInfo:before { width: 17px; height: 15px; background: rgba(255, 255, 255, 0) url(../images/common_icons/red/icon_geography_red.svg) no-repeat center center; } #AreaStreet { display: none; margin-top: -20px; } #AreaBuilding { display: none; } .searchWord { float: left; width: 100%; box-sizing: border-box; border: 1px solid #353535; padding: 5px 10px; margin-bottom: 20px; } body.innerPage.rssPage .intro { margin-bottom: 15px; padding-bottom: 25px; border-bottom: 1px solid #bababa; } body.innerPage.rssPage .intro p { margin-bottom: 25px; } @media screen and (max-width: 380px) { body.innerPage.rssPage .commonlyUsed .accordions .accordionContent { padding: 20px 15px; } } body.innerPage.rssPage .accordionContent .innerPageHolder { padding: 0; } body.innerPage.rssPage .accordionContent .innerPageHolder p { margin-bottom: 20px; } body.innerPage.rssPage .accordionContent .innerPageHolder table { table-layout: fixed; } body.innerPage.rssPage .accordionContent .innerPageHolder table th:last-child { width: 135px; text-align: center; } @media screen and (max-width: 1200px) { body.innerPage.rssPage .accordionContent .innerPageHolder table th:last-child { width: 95px; padding: 20px 0; } } @media screen and (max-width: 767px) { body.innerPage.rssPage .accordionContent .innerPageHolder table th:last-child { width: 85px; padding: 20px 0; } } @media screen and (max-width: 480px) { body.innerPage.rssPage .accordionContent .innerPageHolder table th:last-child { width: 75px; } } body.innerPage.rssPage .accordionContent .innerPageHolder table th, body.innerPage.rssPage .accordionContent .innerPageHolder table td { vertical-align: middle; } @media screen and (max-width: 480px) { body.innerPage.rssPage .accordionContent .innerPageHolder table th, body.innerPage.rssPage .accordionContent .innerPageHolder table td { padding: 15px; } } @media screen and (max-width: 480px) { body.innerPage.rssPage .accordionContent .innerPageHolder table th:nth-child(2), body.innerPage.rssPage .accordionContent .innerPageHolder table td:nth-child(2) { min-width: 160px; } } body.innerPage.rssPage .accordionContent .innerPageHolder table th:nth-child(2), body.innerPage.rssPage .accordionContent .innerPageHolder table td:nth-child(2) { word-wrap: break-word; } @media screen and (max-width: 767px) { body.innerPage.rssPage .accordionContent .innerPageHolder table th:nth-child(2), body.innerPage.rssPage .accordionContent .innerPageHolder table td:nth-child(2) { width: 40%; } } @media screen and (max-width: 480px) { body.innerPage.rssPage .accordionContent .innerPageHolder table th:nth-child(2), body.innerPage.rssPage .accordionContent .innerPageHolder table td:nth-child(2) { width: 30%; } } body.innerPage.rssPage .accordionContent .innerPageHolder table th a, body.innerPage.rssPage .accordionContent .innerPageHolder table td a { word-wrap: break-word; } body.innerPage.rssPage .accordionContent .rss { display: block; width: 21px; height: 21px; margin: auto; text-indent: -9999px; background: url(../images/common_icons/icon_rss.png) no-repeat center center; background-size: 100%; } body.innerPage.rssPage .accordionContent .rss:hover { background-image: url(../images/common_icons/icon_rss_o.png); } @media screen and (max-width: 767px) { body.innerPage.rssPage .accordionContent .rss { margin: 0; } } /*animation*/ @font-face { font-family: 'iconfont'; src: url("fonts/iconFonts/icon.eot?qyfze1"); src: url("fonts/iconFonts/icon.eot?qyfze1#iefix") format("embedded-opentype"), url("fonts/iconFonts/icon.ttf?qyfze1") format("truetype"), url("fonts/iconFonts/icon.woff?qyfze1") format("woff"), url("fonts/iconFonts/icon.svg?qyfze1#iconfont") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'iconfont' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-icon_extlink:before { content: "\65"; } /* ================================================================================================= _layout_innerpage.scss > imported by layout.scss > Please try to write all the COMMON STYLES FOR INNERPAGES here. > i.e. if a style will be used in more than one type of template, please try to write it here. * @TODO Media Query Rewrite * @TODO Simplify ================================================================================================= */ /* body.chrome { &.innerPage { header.subMenuOn nav>.menuTab .menuItem.menuSearchBtn a { margin-left: 24px; margin-right: 1px; @media screen and (max-width: 1200px) { margin-left: 25px; margin-right: 0px; } } header.subMenuOn nav>.menuTab .menuItem.menuSearchBtn:hover a:after, header.subMenuOn nav>.menuTab .menuItem.menuSearchBtn.active a:after { margin-right: -1px; } } } */ body.innerPage.hideDatepicker #ui-datepicker-div { display: none; } body.innerPage { /* .navigator li a, .innerPageHolder a:not(.btn), .contentLink{ color:#2D59B5; }*/ } body.innerPage main > nav.contentWrapper:first-child { margin-top: 0; padding: 25px 0 0; width: 100%; max-width: initial; max-width: none; background: #e9e9e9; } @media screen and (max-width: 1200px) { body.innerPage main > nav.contentWrapper:first-child { margin-top: 0px; } } body.innerPage main > nav.contentWrapper:first-child .navigator { display: block; max-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; width: 90%; clear: both; padding: 0; } @media screen and (max-width: 1200px) { body.innerPage main > nav.contentWrapper:first-child .navigator { width: 94%; } } @media screen and (max-width: 767px) { body.innerPage main > nav.contentWrapper:first-child .navigator { width: 90%; } } @media screen and (max-width: 380px) { body.innerPage main > nav.contentWrapper:first-child .navigator { width: 94%; } } body.innerPage .navigator li a, body.innerPage .navigator li { font-size: 0.75rem; } body.innerPage main .mainHolder { overflow: hidden; background: #e9e9e9; } body.innerPage .sideNav .blockTag:not(.active):before { display: none; } @media screen and (max-width: 1200px) { body.innerPage .sideNav.expandable.expandTb .blockRow { display: none; opacity: 0; } } body.innerPage .navigator { list-style-type: none; padding-bottom: 22px; margin-top: 40px; } body.innerPage .navigator li { display: inline-block; } body.innerPage .navigator li + li:before { content: '>'; display: inline-block; padding: 0 5px 0 2px; } body.innerPage .navigator li a { color: #951717; } body.innerPage .navigator li a:hover { text-decoration: underline; } body.innerPage .pageDisplay { display: none; } body.innerPage .pageDisplay.active { display: block; } body.innerPage table.pageDisplay { display: none; } body.innerPage table.pageDisplay.active { display: table; } body.innerPage .pagination { margin-bottom: 50px; } body.innerPage .pagination .previousResult, body.innerPage .pagination .nextResult { float: left; margin-right: 10px; } body.innerPage .pagination .previousResult a, body.innerPage .pagination .nextResult a { font-weight: bold; color: #941619; } @media screen and (max-width: 1024px) { body.innerPage .pagination .previousResult, body.innerPage .pagination .nextResult { margin: 0; } :lang(zh-hk) body.innerPage .pagination .previousResult, :lang(zh-cn) body.innerPage .pagination .previousResult, :lang(zh-hk) body.innerPage .pagination .nextResult, :lang(zh-cn) body.innerPage .pagination .nextResult { width: 70px; } } @media screen and (max-width: 1024px) { body.innerPage .pagination .previousResult { width: 80px; text-align: right; } } @media screen and (max-width: 1024px) { body.innerPage .pagination .nextResult { width: 60px; text-align: left; } } body.innerPage .pagination .page { list-style: none; float: left; margin: 0 10px; } body.innerPage .pagination .page > li { float: left; margin: 0 10px; } body.innerPage .pagination .page > li a { color: #941619; font-weight: 700; } body.innerPage .pagination .page > li.on a { color: #353535; font-weight: normal; } @media screen and (max-width: 1024px) { body.innerPage .pagination .page { margin: 0; display: block; width: calc(100% - 140px); padding: 0 3%; text-align: center; } :lang(zh-hk) body.innerPage .pagination .page, :lang(zh-cn) body.innerPage .pagination .page { width: calc(100% - 140px); } body.innerPage .pagination .page > li { margin: 0; display: inline-block; width: 18%; float: none; text-align: center; } body.innerPage .pagination .page > li a { display: inline-block; } } @media screen and (max-width: 380px) { body.innerPage .pagination .page > li { width: 17%; } } body.innerPage .pagination:after { content: ''; clear: both; display: block; } body.innerPage .title { color: #2f2f2f; padding: 0 25px 25px 0; } body.innerPage .title img { vertical-align: baseline; display: inline-block; padding-left: 8px; } body.innerPage .title .blue { color: #454095; font-weight: inherit; line-height: 1.5em; } body.innerPage .subTitle { margin-bottom: 15px; } body.innerPage .innerPageWrapper.first { padding-top: 25px; } body.innerPage .innerPageWrapper.last { padding-bottom: 32px; } @media screen and (max-width: 1200px) { body.innerPage .innerPageWrapper.last { padding-bottom: 25px; } body.innerPage .innerPageWrapper.last.first { padding-bottom: 10px; } } body.innerPage .innerPageWrapper.showOnTablet, body.innerPage .innerPageWrapper.showOnMobile { display: none; } body.innerPage .innerPageWrapper.bgLightGrey { background: #f5f5f5; } body.innerPage .innerPageWrapper.bgLightGrey .blockTagHolder { background: #f5f5f5; } body.innerPage .innerPageWrapper.bgWhite { background: #FFF; } body.innerPage .innerPageWrapper.bgWhite .blockTagHolder { background: #FFF; } body.innerPage .innerPageWrapper .blockDetailHolder { width: 100%; float: right; } body.innerPage .innerPageWrapper .blockDetailHolder .subMainTitle { margin-bottom: 10px; font-size: 1.875em; } body.innerPage .innerPageListGrid { margin-right: -20px; } body.innerPage .innerPageListGrid .itemRef { width: 33.33333%; } body.innerPage .innerPageListGrid .item { display: inline-block; width: 33.33333%; padding-bottom: 17px; padding-right: 17px; -webkit-filter: blur(0); -webkit-transition: initial !important; transition: initial !important; } body.innerPage .innerPageListGrid .item.itemToggle:after { position: absolute; color: #353535; content: '+'; font-size: 24px; margin-top: -25px; right: 35px; top: 50%; } /* 16:03 2019-07-16 adjust plus sign in cluster page */ :lang(zh-hk) body.innerPage .innerPageListGrid .item.itemToggle:after, :lang(zh-cn) body.innerPage .innerPageListGrid .item.itemToggle:after { margin-top: -30px; } body.innerPage .innerPageListGrid .item.itemToggle a:hover { text-decoration: none; } body.innerPage .innerPageListGrid .item.itemToggle:hover, body.innerPage .innerPageListGrid .item.itemToggle.active { text-decoration: none; } body.innerPage .innerPageListGrid .item.itemToggle:hover .outer, body.innerPage .innerPageListGrid .item.itemToggle.active .outer { background-color: #cc4c02; border-bottom: 3px solid #AB5923; } body.innerPage .innerPageListGrid .item.itemToggle:hover .text, body.innerPage .innerPageListGrid .item.itemToggle.active .text { color: #FFF; } body.innerPage .innerPageListGrid .item.itemToggle:hover:after, body.innerPage .innerPageListGrid .item.itemToggle.active:after { color: #FFF; } body.innerPage .innerPageListGrid .item.itemToggle.active:after { content: '-'; } body.innerPage .innerPageListGrid .item.itemToggle .outer { border-bottom: 3px solid #ffdfc0; background-color: #ffeedc; } body.innerPage .innerPageListGrid .item.itemToggle .text { padding: 20px 45px 20px 20px; } body.innerPage .innerPageListGrid .item.itemToggleItem { display: none; } body.innerPage .innerPageListGrid .item.itemToggleItem .text { padding: 20px; } body.innerPage .innerPageListGrid .item.itemToggleItem.active { display: inline-block; } body.innerPage .innerPageListGrid .item.slider.syncSlide { left: 66.6%; } body.innerPage .innerPageListGrid .item.syncSlide .outer { position: relative; } body.innerPage .innerPageListGrid .item.syncSlide .outer:after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } body.innerPage .innerPageListGrid .item .outer { border-bottom: 3px solid #cc4c02; background-color: white; } body.innerPage .innerPageListGrid .item .text { padding: 20px; } body.innerPage .innerPageListGrid .item .text + .itemCover { margin-top: 10px; width: 100%; } body.innerPage .innerPageListGrid .item .text ul { list-style-type: initial; padding-left: 20px; } body.innerPage .innerPageListGrid .item.w2 { width: 66.66666%; } body.innerPage.edge select:focus, body.innerPage.edge textarea:focus, body.innerPage.edge input:focus { padding: 0; height: auto; font: initial !important; } body.innerPage .select-style { position: relative; display: inline-block; vertical-align: middle; } body.innerPage .select-style select { max-width: 100%; width: 100%; height: 100%; z-index: 10; top: 0; left: 0; padding: 0; border: none; position: absolute; opacity: 0; filter: alpha(opacity=0); box-sizing: border-box; -moz-box-sizing: border-box; padding-right: 40px; } @media screen and (max-width: 1200px) { body.innerPage .select-style select { width: 100%; } } body.innerPage .select-style p { height: 30px; padding: 15px 35px 15px 15px; } body.innerPage .select-style p:before { min-height: 30px; } @media screen and (max-width: 767px) { body.innerPage .select-style select { width: 100%; } } body.innerPage .select-style select option { padding: 0; padding-left: 10px; width: 100%; height: 100%; max-width: 100%; line-height: inherit; } body.innerPage .select-style p { padding: 15px 35px 15px 15px; border: 1px solid #353535; color: #353535; position: relative; top: 0; left: 0; width: 100%; height: auto; margin-bottom: 0; box-sizing: border-box; } @media screen and (max-width: 767px) { body.innerPage .select-style p { padding: 10px 35px 10px 15px; width: 100%; } } body.innerPage .select-style p:after { content: ''; border: 5px solid transparent; border-top-color: #353535; position: absolute; top: 50%; margin-top: -3px; right: 15px; } body.innerPage .radioInline { display: inline-block; margin-right: 20px; } body.innerPage .customCheckboxClicker, body.innerPage input[type="checkbox"], body.innerPage input[type="radio"] { vertical-align: middle; margin-right: 5px; border: 1px solid #353535; width: 15px; height: 15px; position: relative; vertical-align: top; display: inline-block; } body.innerPage input[type="radio"] { border-radius: 50%; vertical-align: top; margin-top: 1px; } body.innerPage input[type="radio"]:checked { background: transparent !important; } body.innerPage input[type="radio"]:checked:after { content: ''; position: absolute; width: 7px; height: 7px; top: 3px; left: 3px; background: #353535; display: block; border-radius: 50%; } body.innerPage .customCheckboxClicker, body.innerPage input[type="checkbox"] { vertical-align: top; } body.innerPage .customCheckboxClicker.checked, body.innerPage .customCheckboxClicker:checked, body.innerPage input[type="checkbox"].checked, body.innerPage input[type="checkbox"]:checked { background: transparent !important; } body.innerPage .customCheckboxClicker.checked:after, body.innerPage .customCheckboxClicker:checked:after, body.innerPage input[type="checkbox"].checked:after, body.innerPage input[type="checkbox"]:checked:after { content: '✔'; font-size: 15px; position: absolute; top: -3px; font-weight: bold; } body.innerPage .wantTo.hideOnTablet, body.innerPage .wantTo.hideOnMobile { display: inline-block; } body.innerPage .wantTo .wantToText { color: #cc4c02; display: inline-block; vertical-align: middle; width: 27%; padding-top: 32px; padding-bottom: 32px; padding-right: 26px; text-align: right; } body.innerPage .wantTo .wantToList { display: inline-block; vertical-align: middle; padding-top: 32px; padding-bottom: 32px; padding-right: 32px; width: 69%; } body.innerPage .wantTo .wantToList ul { list-style-type: disc; list-style: disc; padding-left: 20px; } body.innerPage .wantTo .wantToList ul li { position: relative; color: #cc4c02; } body.innerPage .wantTo .wantToList ul li + li { margin-top: 10px; } body.innerPage .bottomBar .giveFeedback { display: block; float: left; position: relative; } body.innerPage .bottomBar .giveFeedback .inlineBreaker:before { display: inline-block; } body.innerPage .bottomBar .giveFeedback > a { display: inline-block; vertical-align: middle; } body.innerPage .bottomBar .giveFeedback .feedTxt { display: inline-block; vertical-align: middle; } body.innerPage .bottomBar .giveFeedback .feedbackPopup { position: absolute; background: #FFF; padding: 30px; z-index: 100; display: none; width: 250px; margin-left: 0; border: 1px solid #aaaaaa; bottom: calc(100% + 10px); z-index: 1600; } body.innerPage .bottomBar .giveFeedback .feedbackPopup.active { display: block; } body.innerPage .bottomBar .giveFeedback .feedbackPopup h5 { margin-bottom: 10px; } body.innerPage .bottomBar .lastRevision { display: block; float: right; } body.innerPage .lastRevision { text-align: right; margin-right: 1px; padding: 0; } body.innerPage .hrLine { background-color: #bababa; margin-bottom: 30px; height: 1px; } body.innerPage .hrLine.inBlack { background: #353535; } body.innerPage .innerPageHolder { background: #FFF; padding: 25px; } body.innerPage .innerPageHolder.noBG { background: transparent; } body.innerPage .innerPageHolder.bgLightGrey { background: #f5f5f5; } body.innerPage .innerPageHolder.bgWhite { background: #FFF; } body.innerPage .innerPageHolder .intro { font-weight: normal; margin-bottom: 40px; } body.innerPage .innerPageHolder a:not(.btn) { color: #951717; display: block; } body.innerPage .innerPageHolder a:not(.btn) > span { color: #951717; } body.innerPage .innerPageHolder a:not(.btn):hover { text-decoration: underline; } body.innerPage .innerPageHolder a:not(.btn).inlineLink { /* display: inline-block; 17:01 2019-04-26 org, change for /en/residents/transport/crossboundary/ahquota.htm */ display: inline; margin: 0; font-size: 1em; } body.innerPage .innerPageHolder a:not(.btn).inlineLink span { font-weight: normal !important; } :lang(zh-hk) body.innerPage .innerPageHolder a:not(.btn).externalLink:after, :lang(zh-cn) body.innerPage .innerPageHolder a:not(.btn).externalLink:after { margin-right: 3px; } body.innerPage .innerPageHolder .externalLink .externalLinkContent { font-weight: normal; } body.innerPage .innerPageHolder ul { margin-bottom: 20px; } body.innerPage .innerPageHolder ul li { margin-bottom: 10px; } body.innerPage .innerPageHolder .blockItem { margin-bottom: 35px; overflow: hidden; } body.innerPage .innerPageHolder .blockItem:last-child { margin-bottom: 0; } body.innerPage .innerPageHolder .blockItem h2 { margin-bottom: 10px; } body.innerPage .innerPageHolder .blockItem h3 { margin-bottom: 5px; } body.innerPage .innerPageHolder .blockItem p { margin-bottom: 15px; } body.innerPage .innerPageHolder .blockItem p:last-child { margin-bottom: 0; } body.innerPage .innerPageHolder .blockItem > a:not(.btn) { display: block; margin-bottom: 15px; } body.innerPage .innerPageHolder .blockItem > a:not(.btn):last-child { margin-bottom: 0; } body.innerPage .innerPageHolder .blockItem.withImg.left .blockImg { float: left; margin-right: 20px; } body.innerPage .innerPageHolder .blockItem.withImg.left .mobileHeading { display: none; } body.innerPage .innerPageHolder .blockItem.withImg.right .blockImg { float: right; margin-left: 20px; } body.innerPage .innerPageHolder .blockItem .blockItem__imgLeft { float: left; margin-right: 20px; } body.innerPage .innerPageHolder .blockItem .blockItem__imgLeft .blockImg { float: none !important; margin: 0 !important; } @media screen and (max-width: 480px) { body.innerPage .innerPageHolder .blockItem .blockItem__imgLeft .blockImg { margin: 0; } } body.innerPage .innerPageHolder .blockItem .blockItem__imgLeft .blockItem__text { text-align: center; margin-right: 20px; font-size: 0.8em; padding-top: 10px; } @media screen and (max-width: 480px) { body.innerPage .innerPageHolder .blockItem .blockItem__imgLeft .blockItem__text { margin-right: 0px; margin-bottom: 20px; padding-top: 0px; } } @media screen and (max-width: 480px) { body.innerPage .innerPageHolder .blockItem .blockItem__imgLeft { float: none; } } body.innerPage .innerPageHolder .blockTable { margin-bottom: 40px; } body.innerPage .innerPageHolder .blockTable .tdRowspan { background: #F2F3F5; } body.innerPage .innerPageHolder .blockTable .tdRowspanWhite { background-color: #fff; } body.innerPage .innerPageHolder .blockTable > table { width: 100%; } /* 15:25 2021-03-24 For "table th", add "table thead th" (as Rich-Text setting) */ body.innerPage .innerPageHolder .blockTable > table thead td, body.innerPage .innerPageHolder .blockTable > table th, body.innerPage .innerPageHolder .blockTable > table td { padding: 20px 25px; } @media screen and (max-width: 480px) { /* 15:25 2021-03-24 For "table th", add "table thead th" (as Rich-Text setting) */ body.innerPage .innerPageHolder .blockTable > table thead td, body.innerPage .innerPageHolder .blockTable > table th, body.innerPage .innerPageHolder .blockTable > table td { padding: 20px 15px; } } /* 15:25 2021-03-24 For "table th", add "table thead th" (as Rich-Text setting) */ body.innerPage .innerPageHolder .blockTable > table thead td, body.innerPage .innerPageHolder .blockTable > table th { background: #707070; border: 1px solid #ccc; color: #FFF; text-align: left; } body.innerPage .innerPageHolder .blockTable > table td { color: #353535; border: 1px solid #ccc; } body.innerPage .innerPageHolder .blockTable > table > tbody > tr:nth-child(odd) { background: #F2F3F5; } body.innerPage .innerPageHolder .blockTable > table > tbody > tr:nth-child(even) { background: #FFF; } @media screen and (max-width: 767px) { /* 15:25 2021-03-24 For "table th", add "table thead th" (as Rich-Text setting) */ body.innerPage .innerPageHolder .blockTable > table.responsiveTable thead td, body.innerPage .innerPageHolder .blockTable > table.responsiveTable th { display: none; } body.innerPage .innerPageHolder .blockTable > table.responsiveTable > tbody > tr { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } body.innerPage .innerPageHolder .blockTable > table.responsiveTable td { display: block; width: 100% !important; border-bottom: 0; border-top: 0; text-align: left; } body.innerPage .innerPageHolder .blockTable > table.responsiveTable .responsiveTableContent { display: inline-block; width: 100%; padding: 0; } } body.innerPage .innerPageHolder .blockTable > table.responsiveTable .responsiveTableHead { display: none; } @media screen and (max-width: 767px) { body.innerPage .innerPageHolder .blockTable > table.responsiveTable .responsiveTableHead { display: inline-block; padding: 0; width: 100%; vertical-align: top; margin-bottom: 5px; } } body.innerPage .calendarBlock .ui-widget-content { border: 0; width: auto; padding: 0; } body.innerPage .calendarBlock .ui-datepicker table { width: 100%; } body.innerPage .calendarBlock .ui-datepicker-title { padding: 4px 50px; width: auto; } body.innerPage .calendarBlock .ui-datepicker .ui-datepicker-prev, body.innerPage .calendarBlock .ui-datepicker .ui-datepicker-next { top: 0; background: transparent; } body.innerPage .calendarBlock .ui-datepicker .ui-datepicker-next { right: 0; } body.innerPage .calendarBlock .ui-datepicker .ui-datepicker-next span { background: url(../images/calendar/btn_calender_next.png) no-repeat; background-size: 100% 100%; } body.innerPage .calendarBlock .ui-datepicker .ui-datepicker-prev { left: 0; } body.innerPage .calendarBlock .ui-datepicker .ui-datepicker-prev span { background: url(../images/calendar/btn_calender_prev.png) no-repeat; background-size: 100% 100%; } body.innerPage .contentBlock { padding-left: 25px; } @media screen and (max-width: 1200px) { body.innerPage .contentBlock { padding-left: 0; } } body.innerPage .commonlyUsed .accordions .extendAll.inlineRight { float: right; padding: 15px 0; cursor: pointer; } body.innerPage .commonlyUsed .accordions .shareBar .extendAll.inlineRight { padding: 0; } body.innerPage .searchResult.inActive { display: none; } body.innerPage .articleContainer { margin-bottom: 20px; } body.innerPage .linkToTabBtnsHolder.expandable.expandTb { margin: 15px 0; } @media screen and (max-width: 1200px) { body.innerPage #innerPageSideNav { margin-bottom: 15px; } } @media screen and (max-width: 1200px) { .blockRow.noMarginDt.multi { margin: 15px auto; } .blockRow.noMarginDt.first { margin: 15px auto; } body.innerPage .navigator { margin-top: 0; } .promoteSlider { /*padding: 40px 0 10px;*/ /*** comment 20160526 (Nicole) ***/ padding: 40px 0 50px /*** end ***/ } .tagBlock.blockTagHolder .tagContentHolder.block-2-3 { left: calc(100% * 1/3 - 35px * 2/3); } body.innerPage main { padding-top: 0; } body.innerPage main.qnaMain { padding-top: 0; } body.innerPage .title { padding: 0; margin-bottom: 15px; } body.innerPage .title.articleTitle { padding-bottom: 15px; } body.innerPage .wantTo .wantToText { text-align: center; } body.innerPage .innerPageWrapper.showOnTablet { display: block; height: 100%; } body.innerPage .innerPageWrapper.hideOnTablet { display: none; } body.innerPage .innerPageWrapper .item.hideOnTablet { display: none; } body.innerPage .innerPageWrapper .blockDetailHolder { width: 100%; padding-left: 0; float: left; } body.innerPage .innerPageWrapper .blockTagHolder { background: #e9e9e9; } body.innerPage .innerPageWrapper .tagBlock.sideNav .blockTag { background: #FFF; border-color: #f5f5f5; } body.innerPage .innerPageWrapper .tagBlock.sideNav .blockTag.bgOrange { background: #ffc487; } body.innerPage .innerPageWrapper .tagBlock.sideNav .blockTag.active, body.innerPage .innerPageWrapper .tagBlock.sideNav .blockTag.bgOrange.active { cursor: default; background: #cc4c02; color: #FFF; } body.innerPage .innerPageWrapper .tagBlock.sideNav .blockTag.active span, body.innerPage .innerPageWrapper .tagBlock.sideNav .blockTag.bgOrange.active span { color: #FFF; } body.innerPage .innerPageWrapper .tagBlock.sideNav .blockTag:not(.active):before { display: none; } body.innerPage .blockHead { padding: 0 20px; } body.innerPage .tagBlock .blockTagContent { padding: 0 25px; } body.innerPage .bottomBar .lastRevision { margin-top: 3px; } body.innerPage .innerPageListGrid .item.itemToggle:not(.active):hover .outer { border-bottom: 3px solid #ffdfc0; background-color: #ffeedc; } body.innerPage .innerPageListGrid .item.itemToggle:not(.active):hover .text { color: #353535; } body.innerPage .innerPageListGrid .item.itemToggle:not(.active):hover:after { color: #353535; } } @media screen and (max-width: 1024px) { body.innerPage .innerPageListGrid .item, body.innerPage .innerPageListGrid .itemRef { width: 49.99%; } body.innerPage .innerPageListGrid .item.w2, body.innerPage .innerPageListGrid .itemRef.w2 { width: 100%; } body.innerPage .blockHead { padding: 0 15px; } } @media screen and (max-width: 767px) { body.innerPage .innerPageWrapper.showOnMobile { display: block; } body.innerPage .innerPageWrapper.hideOnMobile { display: none; } body.innerPage .item.hideOnMobile { display: none; } body.innerPage .title img { height: 16px; } body.innerPage .wantTo .wantToText { padding-right: 10px; } body.innerPage .innerPageWrapper.bgLightGrey.bgResetTb, body.innerPage .innerPageWrapper.bgWhite.bgResetTb { background: transparent; } body.innerPage .bottomBar .lastRevision { margin-top: 5px; } body.innerPage .innerPageListGrid .item .text { /* padding: 15px 40px 15px 20px; 11:24 2020-07-16 align writesup card with (from) cluster page card */ padding: 20px; } } @media screen and (max-width: 480px) { body.innerPage .wantTo .wantToText { width: 100%; padding: 0px; padding-top: 30px; text-align: left; } body.innerPage .wantTo .wantToList { width: 100%; padding: 0px; padding-top: 20px; padding-bottom: 30px; } body.innerPage .innerPageWrapper.bgLightGrey.bgResetMb, body.innerPage .innerPageWrapper.bgWhite.bgResetMb { background: transparent; } .blockItem.withImg.left .mobileHeading { display: block !important; } .blockItem.withImg.left .desktopHeading { display: none; } .blockItem.withImg.left .blockImg { width: 100%; margin-bottom: 20px; } } @media screen and (max-width: 380px) { body.innerPage .innerPageListGrid .item, body.innerPage .innerPageListGrid .itemRef { width: 100%; } body.innerPage .innerPageListGrid .item.w2, body.innerPage .innerPageListGrid .itemRef.w2 { width: 100%; } body.innerPage .innerPageHolder { padding: 25px 10px; } } input, textarea { -webkit-appearance: none; border-radius: 0; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; } input:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 18- */ color: #999; } input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: #999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; } input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Firefox 18- */ color: transparent; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Firefox 19+ */ color: transparent; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color: transparent; } /* css */ .csstransitions .mosneslide { -webkit-transition: height .4s ease-in-out; transition: height .4s ease-in-out; max-height: 9999px; overflow: hidden; height: 0; } body { min-width: 300px; color: #353535; } body.bwVer { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } @media screen and (min-width: 1201px) { body { overflow-x: hidden; } } .contentWrapper { display: block; max-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; width: 90%; clear: both; } .fullWidthWrapper { position: relative; overflow: hidden; width: 100%; } .fullWidthWrapper.bgLightGrey { background: #f5f5f5; } .fullWidthWrapper.bgWhite { background: #FFF; } .fullWidthWrapper.bgBlack { background: #353535; } .fullWidthWrapper.bgRS { background: #cc4c02; } .fullWidthWrapper.bgBT { background: #454095; } .fullWidthWrapper.bgNRS { background: #0c818f; } .fullWidthWrapper .showOnTablet, .fullWidthWrapper .showOnMobile { display: none; } .print { display: none; } .access { position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden; } .wordBreak { font-weight: inherit; word-wrap: break-word; word-break: break-all; display: inline-block; max-width: 100%; } .externalLink { white-space: normal; } .externalLink .externalLinkContent { white-space: normal; font-weight: inherit; } /* 2019.10.15 remove externalLink icon again. .externalLink:after { font-family: 'iconfont', Arial, sans-serif; content: " \65"; font-size: 0.65em; } */ /* GovHK: 11:41 2016-12-29 Restrict to Homepage only */ .homePage.pageResidents .externalLink:hover .externalLinkContent { color: #cc4c02; } .homePage.pageBusiness .externalLink:hover .externalLinkContent { color: #454095; } .homePage.pageNonResidents .externalLink:hover .externalLinkContent { color: #0c818f; } .externalLinkIconOn:after { color: #cc4c02; font-family: 'iconfont', Arial, sans-serif; content: " \65"; font-size: 0.65em; } .linkBlock:hover, .linkBlock:focus { background: #cc4c02; color: #FFF; } .linkBlock:hover span, .linkBlock:hover a, .linkBlock:hover h6, .linkBlock:hover h5, .linkBlock:hover h4, .linkBlock:hover h3, .linkBlock:hover h2, .linkBlock:hover h1, .linkBlock:focus span, .linkBlock:focus a, .linkBlock:focus h6, .linkBlock:focus h5, .linkBlock:focus h4, .linkBlock:focus h3, .linkBlock:focus h2, .linkBlock:focus h1 { color: #FFF; } .linkBlock:hover#infoGovweb span, .linkBlock:focus#infoGovweb span { color: #FFF; } .topicLink:hover, .topicLink:focus { color: #cc4c02; text-decoration: none; } .topicLink:hover span, .topicLink:hover a, .topicLink:hover h6, .topicLink:hover h5, .topicLink:hover h4, .topicLink:hover h3, .topicLink:hover h2, .topicLink:hover h1, .topicLink:focus span, .topicLink:focus a, .topicLink:focus h6, .topicLink:focus h5, .topicLink:focus h4, .topicLink:focus h3, .topicLink:focus h2, .topicLink:focus h1 { color: #cc4c02; text-decoration: none; } .topicLink:hover .loginIcon, .topicLink:focus .loginIcon { /* background: transparent url(../images/common_icons/orange/icon_login_orange.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_login_orange.svg) no-repeat center center; background-size: 100% 100%; } .contentLink { color: #951717; } .contentLink:hover { text-decoration: underline; } .inlineBreaker { display: inline-block; } .inlineBreaker:before { background-color: #ccc; content: ' '; display: block; width: 1px; height: 15px; margin: 0 15px; position: relative; top: 3px; } .inlineBreaker.noLine:before { background-color: transparent; margin: 0 8px; } .contactInfo { display: block; width: 100%; margin: 10px 0; position: relative; font-family: "Montserrat", Arial, sans-serif; font-size: 1.025em; } .blockRow { width: 100%; overflow: hidden; margin: 40px auto; } .blockRow.margin-1-4 { margin: 15px auto; } .blockRow.margin-1-5 { margin: 10px auto; } .blockRow.noMarginDt { margin: 0 auto; } .blockRow .blockRow.showOnTablet, .blockRow .blockRow.showOnMobile { display: none; } .gridBlock { background: #FFF; min-height: 1px; position: relative; box-sizing: border-box; } .gridBlock.noBG { background: transparent; } .gridBlock:last-child.block-1-2, .gridBlock:last-child.block-2-2, .gridBlock:last-child.block-1-3, .gridBlock:last-child.block-2-3, .gridBlock:last-child.block-3-3, .gridBlock:last-child.block-1-4, .gridBlock:last-child.block-2-4, .gridBlock:last-child.block-3-4, .gridBlock:last-child.block-4-4, .gridBlock:last-child.block-1-5, .gridBlock:last-child.block-2-5, .gridBlock:last-child.block-3-5, .gridBlock:last-child.block-4-5, .gridBlock:last-child.block-5-5 { margin-right: 0; } .block-1-1, .block-1-2, .block-2-2, .block-1-3, .block-2-3, .block-3-3, .block-1-4, .block-2-4, .block-3-4, .block-4-4, .block-1-5, .block-2-5, .block-3-5, .block-4-5, .block-5-5, .blockInnerCol-1-2, .blockInnerCol-1-3, .blockInnerCol-2-3, .blockInnerCol-1-4, .blockInnerCol-2-4, .blockInnerCol-3-4, .blockInnerCol-1-5, .blockInnerCol-2-5, .blockInnerCol-3-5, .blockInnerCol-4-5 { display: block; float: left; } .block-1-1.blockEnd, .block-1-2.blockEnd, .block-2-2.blockEnd, .block-1-3.blockEnd, .block-2-3.blockEnd, .block-3-3.blockEnd, .block-1-4.blockEnd, .block-2-4.blockEnd, .block-3-4.blockEnd, .block-4-4.blockEnd, .block-1-5.blockEnd, .block-2-5.blockEnd, .block-3-5.blockEnd, .block-4-5.blockEnd, .block-5-5.blockEnd, .blockInnerCol-1-2.blockEnd, .blockInnerCol-1-3.blockEnd, .blockInnerCol-2-3.blockEnd, .blockInnerCol-1-4.blockEnd, .blockInnerCol-2-4.blockEnd, .blockInnerCol-3-4.blockEnd, .blockInnerCol-1-5.blockEnd, .blockInnerCol-2-5.blockEnd, .blockInnerCol-3-5.blockEnd, .blockInnerCol-4-5.blockEnd { margin-right: 0; } .block-1-1.clearCol, .block-1-2.clearCol, .block-2-2.clearCol, .block-1-3.clearCol, .block-2-3.clearCol, .block-3-3.clearCol, .block-1-4.clearCol, .block-2-4.clearCol, .block-3-4.clearCol, .block-4-4.clearCol, .block-1-5.clearCol, .block-2-5.clearCol, .block-3-5.clearCol, .block-4-5.clearCol, .block-5-5.clearCol, .blockInnerCol-1-2.clearCol, .blockInnerCol-1-3.clearCol, .blockInnerCol-2-3.clearCol, .blockInnerCol-1-4.clearCol, .blockInnerCol-2-4.clearCol, .blockInnerCol-3-4.clearCol, .blockInnerCol-1-5.clearCol, .blockInnerCol-2-5.clearCol, .blockInnerCol-3-5.clearCol, .blockInnerCol-4-5.clearCol { clear: both; } .block-1-2, .block-2-2, .block-1-3, .block-2-3, .block-3-3 { margin-right: 40px; } .block-1-4, .block-2-4, .block-3-4, .block-4-4 { margin-right: 15px; } .block-1-5, .block-2-5, .block-3-5, .block-4-5, .block-5-5 { margin-right: 10px; } .block-1-2 { width: calc(50% - 40px * 1/2); } .block-1-3 { width: calc(33.3333% - 40px * 2/3); } .block-2-3 { width: calc(66.6666% - 40px * 1/3); } .block-1-4 { width: calc(25% - 15px * 3/4); } .block-2-4 { width: calc(50% - 15px * 2/4); } .block-3-4 { width: calc(75% - 15px * 1/4); } .block-1-5 { width: calc(20% - 10px * 4/5); } .block-2-5 { width: calc(40% - 10px * 3/5); } .block-3-5 { width: calc(60% - 10px * 2/5); } .block-4-5 { width: calc(80% - 10px * 1/5); } .block-1-1, .block-2-2, .block-3-3, .block-4-4, .block-5-5 { width: 100%; margin: 0; } .blockInnerCol-1-2 { width: calc(100% * 1/2); } .blockInnerCol-1-3 { width: calc(100% / 3.0001); } .blockInnerCol-2-3 { width: calc(100% * 2/3); } .blockInnerCol-1-4 { width: calc(100% * 1/4); } .blockInnerCol-2-4 { width: calc(100% * 2/4); } .blockInnerCol-3-4 { width: calc(100% * 3/4); } .blockInnerCol-1-5 { width: calc(100% * 1/5); } .blockInnerCol-2-5 { width: calc(100% * 2/5); } .blockInnerCol-3-5 { width: calc(100% * 3/5); } .blockInnerCol-4-5 { width: calc(100% * 4/5); } .blockCenter { position: relative; white-space: nowrap; } .blockCenter .centerHolder { overflow: hidden; display: inline-block; vertical-align: middle; white-space: normal; } .blockCenter:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .blockHead { color: #FFF; background: #707070; padding: 0 25px; height: 60px; vertical-align: middle; position: relative; display: block; cursor: default; } .blockHead.showOnMobile, .blockHead.showOnTablet { max-height: 0; max-width: 0; position: absolute; height: 0; } .blockHead.showOnMobile h1, .blockHead.showOnTablet h1 { display: inline-block; vertical-align: middle; max-width: 90%; white-space: normal; } .blockHead:before { display: inline-block; height: 100%; content: ''; vertical-align: middle; width: 0; } .blockHead h1, .blockHead h2, .blockHead h3, .blockHead h4, .blockHead h5, .blockHead h6 { display: inline-block; vertical-align: middle; max-width: 90%; white-space: normal; } .blockTagHolder .blockHead:before { display: none; } .clearRow { display: table; height: 0; width: 100%; } @media screen and (max-width: 1200px) { .visibleDt { display: none !important; } } @media screen and (min-width: 1201px), screen and (max-width: 767px) { .visibleTb { display: none !important; } } @media screen and (min-width: 768px) { .visibleMb { display: none !important; } } @media screen and (min-width: 1201px) { .hiddenDt { display: none !important; } } @media screen and (max-width: 1200px) and (min-width: 768px) { .hiddenTb { display: none !important; } } @media screen and (max-width: 767px) { .hiddenMb { display: none !important; } } .sectionBreak { margin: 35px auto; } #skiplinkHolder { background-color: #cc4c02; } #skiplinkHolder div { display: block; margin: 0 auto; max-width: 1200px; text-align: center; width: 100%; } #skiplinkHolder div .skiplink { display: -moz-inline-stack; display: block; margin: 0; max-height: 0; color: #FFF; } #skiplinkHolder div .skiplink:focus { max-height: 1920px; position: static; display: inline-block; padding: 15px; margin: 5px; outline: 3px solid #FFF; text-decoration: underline; } #skiptargetholder { display: block; margin: 0 auto; max-height: 0; } #skiptargetholder #skiptarget { display: -moz-inline-stack; display: block; margin: 0; max-height: 0; } .showOnTablet, .showOnMobile { display: none; } ul.bulletList { list-style: disc; padding-left: 25px; } ol { /* 16:28 2019-03-15 padding-left: 25px; For /tc/residents/government/crime/rehabilitation/rehabilitation.htm */ padding-left: 40px; } ol .numList { list-style-type: decimal; } ol.romanList { counter-reset: roman; } ol.alphaList { counter-reset: alpha; } ol.romanList li, ol .alphaList li { list-style: none; position: relative; } ol.romanList li:before, ol .alphaList li:before { margin-left: -25px; position: absolute; } ol.romanList > li:before { counter-increment: roman; content: "(" counter(roman,lower-roman) ") "; } ol.alphaList > li:before { counter-increment: alpha; content: "(" counter(alpha,lower-alpha) ") "; } .bulletList { list-style: disc; } .alphabeticalList { display: block; overflow: hidden; } .alphabeticalList li { float: left; margin-right: 6px; margin-top: 10px; } .alphabeticalList li a { display: block; width: 28px; height: 28px; background: #353535; color: #FFF; text-align: center; padding-top: 6px; } :lang(zh-hk) .alphabeticalList li a, :lang(zh-cn) .alphabeticalList li a { width: auto; height: auto; padding: 10px 15px; } .alphabeticalList li a:hover { background: #cc4c02; color: #353535; text-decoration: none !important; } .alphabeticalList li a.active { /* 16:39 2021-04-15 old background: #cc4c02; color: #353535; */ /* 16:39 2021-04-15 new */ background: #cc4c02; color: #FFFFFF; pointer-events: none; } .alphabeticalList li a.disabled, .alphabeticalList li a .disabled.active { background: #bababa; color: #FFF; pointer-events: none; } .alphabeticalList li a.disabled:hover, .alphabeticalList li a .disabled.active:hover { background: #bababa; color: #FFF; } .nonBreakWord { display: inline-block; } .innerRow { padding: 0 25px; height: 60px; vertical-align: middle; position: relative; } .innerRow span { display: inline-block; vertical-align: middle; } .innerRow:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .expandable .blockHead { display: block; } .expandable .blockHead.showOnTablet, .expandable .blockHead.showOnMobile { display: none; border-bottom: 0; } .expandable .blockHead:after { display: none; content: ''; width: 20px; height: 20px; background-size: 100% 100% !important; position: absolute; top: 50%; margin-top: -10px; right: 25px; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_down_white.svg) no-repeat center center; } .expandable.active { max-height: initial; } .expandable.active .blockHead:after { background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_up_white.svg) no-repeat center center; } .title.showOnMobile { display: none; margin-top: 30px; } .title:after { width: 32px; height: 32px; background-size: contain !important; display: inline-block; margin-left: 10px; vertical-align: middle; } .title.titleCommunication:after { background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_communication_orange.svg) no-repeat center center; content: ''; width: 35px; height: 27px; } .title.titleEmployment:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_employment_orange.svg) no-repeat center center; } .title.titleHealth:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_health_orange.svg) no-repeat center center; } .title.titleTax:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_tax_orange.svg) no-repeat center center; } .title.titleCulture:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_culture_orange.svg) no-repeat center center; } .title.titleEnvironment:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_environment_orange.svg) no-repeat center center; } .title.titleHosuing:after { content: ''; /* background: transparent url(../images/common_icons/orange/icon_service_housing_orange.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_housing_orange.svg) no-repeat center center; } .title.titleTransport:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_transport_orange.svg) no-repeat center center; } .title.titleEducation:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_education_orange.svg) no-repeat center center; } .title.titleLaw:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_law_orange.svg) no-repeat center center; } .title.titleImmigration:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_immigration_orange.svg) no-repeat center center; } .title.titleGovweb:after { content: ''; background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_service_govweb_orange.svg) no-repeat center center; } .slider .slides { position: relative; } .slider .slide { position: relative; width: 100%; left: 0; top: 0; opacity: 1; } .slider .slide img { width: 100%; } .slider .slide .inner { white-space: nowrap; position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .slider .slide .inner:before { content: ' '; height: 100%; display: inline-block; vertical-align: middle; } .slider .slide .slideText { display: inline-block; vertical-align: middle; white-space: normal; padding-right: 20px; padding-left: 20px; line-height: 1; color: white; } .owl-carousel .owl-item { background: #FFF; } .owl-carousel .owl-item .slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .owl-carousel .owl-stage { margin: auto; } .owl-carousel.owl-no-ani .owl-stage { -webkit-transition: none !important; transition: none !important; -webkit-transition: none !important; transition: none !important; } .owl-carousel.owl-single-slide .owl-controls { display: none !important; } .sideNav .promoteSlider .owl-controls { bottom: 46px; } .sideNav .promoteSlider .slide { margin-bottom: 46px; } #blockMobileApp .owl-controls { position: absolute; bottom: -5px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { #blockMobileApp .owl-controls { bottom: 0; } } @media screen and (max-width: 1200px) { .homePage .checkItOutSlider .itemText { height: 150px; } } .eCardSlider .owl-controls { bottom: 0; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 1200px) { .checkItOutSlider .owl-controls { position: absolute; bottom: -45px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; } } @media screen and (max-width: 767px) { .checkItOutSlider .owl-controls { position: absolute; bottom: 10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; } } @media screen and (max-width: 1200px) { .homePage .checkItOutSlider .checkItOutHolder { overflow: visible; margin-top: 15px; margin-bottom: 30px; } } .promoteSlider .owl-controls { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 100%); -ms-transform: translate(-50%, 100%); transform: translate(-50%, 100%); width: 100%; } @media screen and (max-width: 1200px) { .promoteSlider .owl-controls { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (max-width: 1200px) { .promoteSlider .slide { padding: 0px 10px; } } @media screen and (max-width: 480px) { .promoteSlider .slide { padding: 0; } } #communicationDesktop .promoteSlider { padding-bottom: 50px; } #communicationDesktop .owl-controls { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 60%; } #communicationTablet .owl-controls { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .owl-controls { padding-top: 14px; padding-bottom: 13px; text-align: center; z-index: 30; } .owl-controls.atBottom { position: absolute; bottom: 10px; } .owl-controls.atCenter { width: 100%; } .owl-controls .owl-prev, .owl-controls .owl-next { z-index: 30; display: inline-block; vertical-align: middle; position: relative; top: 0; padding: 0 5px; } .owl-controls .owl-prev:before { content: ' '; height: 10px; width: 10px; display: inline-block; background: no-repeat center center; background-size: cover; background-image: url("../images/common_icons/grey/icon_arrow_left_grey.svg"); } .owl-controls .owl-prev:hover:before { background-image: url("../images/common_icons/orange/icon_arrow_left_orange.svg"); } .owl-controls .owl-next:before { content: ' '; height: 10px; width: 10px; display: inline-block; background: no-repeat center center; background-size: cover; background-image: url("../images/common_icons/grey/icon_arrow_right_grey.svg"); } .owl-controls .owl-next:hover:before { background-image: url("../images/common_icons/orange/icon_arrow_right_orange.svg"); } .owl-controls .owl-pause { display: inline-block; vertical-align: middle; position: relative; margin-left: 5px; top: 0; } .owl-controls .owl-pause:before, .owl-controls .owl-pause:after { content: ''; display: inline-block; height: 12px; width: 3px; margin-right: 3px; background: #d7d7d7; } .owl-controls .owl-pause:before:last-child, .owl-controls .owl-pause:after:last-child { margin-right: 0; } .owl-paused .owl-controls .owl-pause:before { border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #d7d7d7; background: transparent; } .owl-paused .owl-controls .owl-pause:after { display: none; } .owl-controls .owl-pause:hover:before, .owl-controls .owl-pause:hover:after { background: #cc4c02; } .owl-paused .owl-controls .owl-pause:hover:before { border-color: transparent transparent transparent #cc4c02; background: transparent; } .owl-controls .owl-dots { vertical-align: middle; display: inline-block; padding: 0; } .owl-controls .owl-dots > .owl-dot { display: inline-block; padding-top: 3px; padding-bottom: 5px; vertical-align: middle; } .owl-controls .owl-dots > .owl-dot span { display: none; } .owl-controls .owl-dots > .owl-dot span.access { display: inline; } .owl-controls .owl-dots > .owl-dot:before { content: ' '; height: 3px; width: 15px; background-color: #d7d7d7; display: block; } .owl-controls .owl-dots > .owl-dot + .owl-dot { margin-left: 5px; } .owl-controls .owl-dots > .owl-dot.active:before, .owl-controls .owl-dots > .owl-dot:hover:before { background-color: #f76e12; } .owl-controls .owl-dots > .owl-dot:hover { opacity: .7; } @media screen and (max-width: 1200px) { /* .owl-controls .owl-dots > .owl-dot:hover:before { background: #d7d7d7; } */ .owl-controls .owl-dots > .owl-dot.active:hover:before { background: #f76e12; } .owl-controls .owl-dots > .owl-dot:hover, .owl-controls .owl-dots > .owl-dot.active:hover { opacity: 1; } .owl-controls .owl-dots > .owl-dot:hover:before { background-color: #d7d7d7; } } /*** end ***/ #mCSB_1_dragger_vertical .mCSB_dragger_bar { background-color: #cc4c02; width: 80%; } #mCSB_1_scrollbar_vertical .mCSB_draggerRail { width: 100%; border-radius: 0; background: #e9e9e9; } .blockTagHolderBg { background: none; } .tagBlock .blockHead { height: auto; } .tagBlock .blockHead:not(.active):hover { background: #cc4c02; } .tagBlock .blockHead:not(.active):hover a { background: #cc4c02; } .tagBlock .blockHead:not(.active):hover:before { opacity: 1; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_right_white.svg) no-repeat center center; } .tagBlock .blockHead:not(.active):hover span { color: #FFF; } .tagBlock .blockTag { background: #ffeedc; display: block; width: 100%; padding: 20px 25px; vertical-align: middle; border-bottom: 1px solid #FFF; position: relative; } .tagBlock .blockTag.bgOrange { background: #ffc487; } .tagBlock .blockTag h1, .tagBlock .blockTag span { display: inline-block; vertical-align: middle; } .tagBlock .blockTag:not(.active):hover { background: #cc4c02; } .tagBlock .blockTag:not(.active):hover a { background: #cc4c02; } .tagBlock .blockTag:not(.active):hover span { color: #FFF; } .tagBlock .blockTag:before { content: ''; width: 20px; height: 20px; background-size: 100% 100% !important; position: absolute; display: block; top: 50%; margin-top: -10px; right: 25px; opacity: 0.5; /* background: transparent url(../images/common_icons/bw/icon_arrow_right_bw.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_arrow_right_bw.svg) no-repeat center center; } .tagBlock .blockTag:after { content: ''; vertical-align: middle; display: inline-block; width: 0; height: 100%; position: relative; } .tagBlock .blockTag.active { background: #FFF; } .tagBlock .blockTag.active:before { content: ''; position: absolute; display: block; height: 100%; width: 10px; right: auto; top: 0; left: 0; background: #cc4c02; margin: 0; opacity: 1; } .tagBlock .blockTagContent { display: table; } .tagBlock .blockTagContent .tagContentHolder { height: 100%; top: 0; overflow: hidden; position: relative; display: none; vertical-align: middle; } .tagBlock .blockTagContent .tagContentHolder.active { display: block; padding: 20px 0; } .tagBlock .blockTagHolderSub { background-color: #fff; } .tagBlock .blockTagHolderSub ul { list-style-type: disc; padding-left: 40px; padding-right: 20px; padding-top: 20px; border-bottom: 1px solid #f5f5f5; } .tagBlock .blockTagHolderSub ul li { color: #cc4c02; } .tagBlock .blockTagHolderSub ul li a { display: inline-block; vertical-align: top; padding-bottom: 20px; color: #353535; } .tagBlock .blockTagHolderSub ul li a:hover { color: #cc4c02; } .tagBlock .blockTagHolderSub ul li a.active { color: #cc4c02; } .tagBlock.blockTagHolder .blockHead { padding: 0; float: none; } .tagBlock.blockTagHolder .blockHead.active .blockTag { background: #FFF; } .tagBlock.blockTagHolder .blockHead.active .blockTag:before { content: ''; position: absolute; display: block; height: 100%; width: 5px; right: auto; top: 0; left: 0; background: #cc4c02; margin: 0; opacity: 1; } .tagBlock.blockTagHolder .blockHead.active:hover .blockTag { color: #353535; } .tagBlock.blockTagHolder .blockHead:not(.active):hover .blockTag { color: #FFF; } .tagBlock.blockTagHolder .blockHead:not(.active):hover .blockTag:before { opacity: 1; background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_right_white.svg) no-repeat center center; } .tagBlock.blockTagHolder .blockHead:nth-last-child(2) .blockTag { border-bottom: none; } .tagBlock.blockTagHolder .tagContentHolder { position: absolute; top: 0; padding-right: 40px; padding-left: 60px; padding-top: 40px; padding-bottom: 20px; width: calc(100% * 2/3 + 80px * 1/3); margin-right: 0; background: #FFF; display: none; } @media screen and (min-width: 1201px) { .tagBlock.blockTagHolder .tagContentHolder > li > a:hover { color: #cc4c02; } } /* OGCIO: 9:36 2016-12-06 remark: not special handling on single item .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder { padding-top: 22px; padding-bottom: 10px; } :lang(zh-hk) .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder, :lang(zh-cn) .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder { padding-top: 10px; } .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder .serviceLink { margin: 0; } @media screen and (max-width: 1200px) { .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder { padding-top: 22px; padding-bottom: 10px; } } */ .tagBlock.blockTagHolder .tagContentHolder.active { display: block; } .tagBlock.blockTagHolder .tagContentHolder.block-2-3 { left: calc(100% * 1/3 - 40px * 2/3); list-style-type: disc; } .tagBlock.blockTagHolder .tagContentHolder.block-2-3 li { color: #cc4c02; vertical-align: middle; } @media screen and (max-width: 1200px) { .tagBlock.blockTagHolder .tagContentHolder.block-2-3 { left: calc(33.3333% - 35px * 2/3); } } .tagBlock.blockTagHolder .tagContentHolder.block-1-3 { left: calc(100% * 2/3 - 40px * 1/3); } .highlightRed { color: #951717 !important; } .highlightOrange { color: #cc4c02 !important; } .closeBtn { width: auto; height: auto; overflow: hidden; position: absolute; cursor: pointer; display: block; top: 0; right: 0; text-align: center; } .closeBtn:hover > span { color: #cc4c02; } .closeBtn:hover .btnInner span, .closeBtn:hover .btnInner:before, .closeBtn:hover .btnInner:after { background: #cc4c02; } @media screen and (max-width: 1200px) { .closeBtn:hover > span { color: #353535; } .closeBtn:hover .btnInner span, .closeBtn:hover .btnInner:before, .closeBtn:hover .btnInner:after { background: #353535; } } .closeBtn .btnInner { position: relative; display: block; float: none; width: 27px; height: 27px; padding: 4% 0; margin: 0 auto; -o-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .closeBtn .btnInner span, .closeBtn .btnInner:before, .closeBtn .btnInner:after { top: 12px; position: absolute; content: ''; display: block; height: 2px; width: 25px; -webkit-transition: rotate 0.3s ease-in-out; transition: rotate 0.3s ease-in-out; } .closeBtn .btnInner:before { background: #353535; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .closeBtn .btnInner:after { background: #353535; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .closeBtn .btnInner span { margin: 22% auto; } .selectDropDown { position: relative; background-color: #707070; padding: 8px 35px 10px 20px; color: #FFF; border-bottom: 2px solid #2f2f2f; position: relative; overflow: hidden; position: relative; display: inline-block; vertical-align: middle; } .selectDropDown:after { position: absolute; content: " "; border-top: 5px solid #FFF; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; margin-left: 8px; vertical-align: middle; width: 10px; height: 10px; top: 50%; margin-top: -3px; right: 15px; cursor: pointer; } .selectDropDown:hover { text-decoration: none !important; } .selectDropDown .currentLabel { color: #FFF; } .selectDropDown .currentLabel:hover { text-decoration: none; } .selectDropDown select { display: block; width: auto; min-height: 100%; min-width: 100%; cursor: pointer; left: 0; top: 0; border: none; position: absolute; height: auto; opacity: 0; filter: alpha(opacity=0); box-sizing: border-box; } .btnSubmitDropDown { background-color: #cc4c02; color: #FFF; margin-left: 20px; padding: 8px 20px 10px 20px; border: 0; border-bottom: 2px solid #d34e00; } .searchPanel { margin: 20px auto; overflow: hidden; } .searchPanel label { margin-bottom: 15px; } .searchPanel .searchField { margin-bottom: 20px; } .searchPanel .searchField select { width: 100%; } .searchControl { margin-bottom: 50px; margin-top: 40px; } .searchControl .btnInput { display: inline-block; } .searchControl .btnInput, .searchControl input { background-color: #cc4c02; color: #FFF; margin-right: 20px; padding: 15px 35px; border: 0; border-bottom: 2px solid #d34e00; cursor: pointer; width: 126px; -webkit-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; } .searchControl .btnInput > span, .searchControl input > span { color: #FFF; } @media screen and (min-width: 1201px) { .searchControl .btnInput:hover, .searchControl input:hover { background-color: #FFF; color: #cc4c02; border-color: #cc4c02; } .searchControl .btnInput:hover > span, .searchControl input:hover > span { color: #cc4c02; } } .searchControl .btnInput:disabled, .searchControl input:disabled { cursor: initial; opacity: 0.5; } .searchControl .btnInput:disabled:hover, .searchControl input:disabled:hover { background-color: #cc4c02; color: #FFF; border-color: #d34e00; } @media screen and (max-width: 767px) { .searchControl .btnInput, .searchControl input { padding: 10px 30px; margin-right: 15px; } } @media screen and (max-width: 340px) { .searchControl .btnInput, .searchControl input { margin-right: 10px; } } .serviceLink { display: inline-block; margin: 0 0 20px; vertical-align: top; position: relative /* &:before{ content:"."; color:$colorRS; font-weight: 700; font-size:25px; position:absolute; top: -13px; left: -16px; }*/ } .serviceLink:hover { color: #cc4c02; } .imgBannerTablet { padding: 0 0 40px; } .imgBannerTablet a { display: block; margin: 0 auto; overflow: hidden; text-align: center; } .imgBannerTablet a img { display: inline-block; } .weatherBlock { border-bottom: 3px solid #cc4c02; } .weatherBlock .link { margin-top: 5px; display: inline-block; } .weatherBlock .link.btnMore { position: absolute; bottom: 20px; right: 10%; } @media screen and (max-width: 767px) { .weatherBlock .link.btnMore { position: relative; bottom: auto; right: auto; float: right; margin-top: 20px; } } .weatherBlock .weatherBlockInner { display: none; padding: 0 10%; vertical-align: top; text-align: center; } .weatherBlock .weatherBlockInner.active { /* display: inline-block; 9:51 2017-06-30 fix for mobile device */ display: block; } .weatherBlock .weatherBlockInner.active.relatedInfo { vertical-align: middle; } .weatherBlock .weatherBlockInner > .blockTb-1-2:first-child { padding-bottom: 18px; position: relative; } .weatherBlock .weatherBlockInner > .blockTb-1-2:first-child:after { position: absolute; background: #353535; display: block; content: ""; right: 0px; bottom: 0%; width: 100%; height: 1px; } .weatherBlock .figureWeather { margin: 5px auto; display: inline-block; } .weatherBlock .figureWeather .inlineBreaker:before { background-color: #353535; height: 20px; margin: 0 15px; } .weatherBlock #weatherIconBig { display: block; margin-top: 10px; } .weatherBlock #weatherIconSmall img { display: block; width: 21%; margin: 2%; float: left; } .weatherBlock .aqIndexTable { width: 100%; } .weatherBlock .aqIndexTable td { vertical-align: top; padding: 2px 0; text-align: center; } .weatherBlock .aqIndex { width: 50%; margin: 5px auto; font-size: 14px; } .weatherBlock .aqhiLow { background-image: url(../images/weather/aqhi/low.png); } .weatherBlock .aqhiModerate { background-image: url(../images/weather/aqhi/moderate.png); } .weatherBlock .aqhiHigh { background-image: url(../images/weather/aqhi/high.png); } .weatherBlock .aqhiValueHolder { text-align: center; margin-top: 5px; width: 85px; width: 100%; } .weatherBlock .aqhiValueHolder > div { width: 100%; text-align: center; } .weatherBlock .aqhiValue { border: 1px solid black; display: inline-block; text-align: left; width: 85px; padding: 2px 2px 2px 22px; background-position: 2px center; background-repeat: no-repeat; font-size: 14px; margin-top: 3px; margin-bottom: 3px; } :lang(en) .weatherBlock .aqhiValue { padding: 4px 4px 4px 22px; font-weight: bold; font-size: 12px; } .weatherLink { display: inline-block; } .weatherBlock h5 { margin: 18px auto 10px; display: inline-block; } .weatherBlock .weatherAqIndex h5 { margin: 30px auto 20px; } /* calendar css */ .triggerCalendar { width: 30px; height: 30px; display: inline-block; vertical-align: middle; background-image: url(../images/common_icons/orange/icon_calendar_orange.svg); background-position: center center; background-repeat: no-repeat; } .calendarBlock { border-bottom: 3px solid #cc4c02; } .calendarBlock h5 { margin: 30px auto 10px; display: inline-block; text-align: center; width: 100%; } @media screen and (max-width: 767px) { .calendarBlock .calendar:last-child { margin-bottom: 30px; } } .calendarBlock .selectDateType { width: calc(100% * 1 / 2 - 10px * 1 / 2); margin-bottom: 10px; text-align: center; margin-right: 0; } .calendarBlock .selectDateType .dateTypeHolder { padding: 10px; } .calendarBlock .selectDateType .dateTypeHolder input { display: inline-block; vertical-align: middle; } .calendarBlock .selectDateType .dateTypeHolder input[type="radio"] { margin-right: 5px; border: 1px solid #353535; width: 15px; height: 15px; position: relative; vertical-align: top; display: inline-block; border-radius: 50%; } .calendarBlock .selectDateType .dateTypeHolder input[type="radio"]:checked:after { content: ''; position: absolute; width: 9px; height: 9px; top: 2px; left: 2px; background: #353535; display: block; border-radius: 50%; } .calendarBlock .selectDateType .dateTypeHolder label { margin-left: 5px; vertical-align: middle; display: inline-block; } .calendar { color: #353535; padding: 0 30px; } .calendar a { color: #353535; } .calendar .ui-datepicker-title { width: 60%; overflow: hidden; margin: 0 auto; background: #9fd9df; padding: 4px; border-radius: 30px; } .calendar .ui-datepicker-inline { float: none; margin: 0 auto; } .calendar .ui-datepicker-header { text-align: center; position: relative; text-transform: uppercase; margin: 15px auto; } .calendar .ui-datepicker-prev { position: absolute; left: 0; top: 0; cursor: pointer; padding: 0 5px; } .calendar .ui-datepicker-prev span { text-indent: -99999px; background: url(../images/calendar/btn_calender_prev.png) no-repeat; background-size: 100% 100%; display: block; width: 20px; height: 20px; margin-top: 4px; } .calendar .ui-datepicker-next { position: absolute; right: 0; top: 0; cursor: pointer; padding: 0 5px; } .calendar .ui-datepicker-next span { text-indent: -99999px; background: url(../images/calendar/btn_calender_next.png) no-repeat; background-size: 100% 100%; display: block; width: 20px; height: 20px; margin-top: 4px; } .calendar .ui-datepicker-calendar { width: 100%; } .calendar .ui-datepicker-calendar th { text-transform: uppercase; text-align: center; } .calendar .ui-datepicker-calendar th span { display: block; margin: 8px auto; } .calendar .ui-datepicker-calendar td { text-align: center; } .calendar .ui-datepicker-calendar .ui-state-disabled, .calendar .ui-datepicker-calendar .disable { color: #666; } .calendar .ui-datepicker-calendar .ui-state-disabled .ui-state-default, .calendar .ui-datepicker-calendar .disable .ui-state-default { color: #aaa; } .calendar .ui-datepicker-calendar .ui-state-default { width: 27px; height: 27px; padding: 6px 3px; display: block; margin: 6px auto; } .calendar .ui-datepicker-calendar .ui-state-default:hover { color: #35C4CB; } .calendar .ui-datepicker-calendar .ui-priority-secondary { color: #666; } .calendar .ui-datepicker-calendar .ui-datepicker-today span, .calendar .ui-datepicker-calendar .ui-datepicker-today a { border-radius: 20px; background-color: #cc4c02; color: #353535; *zoom: 1; *display: inline; } .videoDuration { display: block; color: #cc4c02; margin: 5px auto; } .videoBtn { padding: 10px 30px 10px 15px; box-sizing: border-box; border: 1px solid #353535; margin: 5px 0px; min-width: 200px; display: inline-block; position: relative; cursor: pointer; } .videoBtn:after { content: '>'; position: absolute; font-weight: bold; right: 15px; top: 50%; margin-top: -7px; } :lang(zh-hk) .videoBtn:after, :lang(zh-cn) .videoBtn:after { margin-top: -9px; } .videoBtn:hover { background: #cc4c02; color: #FFF; border: 1px solid #cc4c02; } .videoThumb { display: block; position: relative; } .videoThumb a { display: block; overflow: hidden; } .videoThumb img { width: 100%; } /* 15:53 2017-03-10 method 1: .videoThumb:a before { */ .videoThumb:before { content: ''; position: absolute; width: 42px; height: 42px; display: block; left: 50%; top: 50%; margin: 0 auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* background: transparent url(../images/common_icons/white/icon_btnplay_white.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_btnplay_white.svg) no-repeat center center; background-size: 100%; z-index: 10; /* 17:17 2017-03-10 method 2: FS: fix can click on icon */ pointer-events: none; cursor: pointer; } .videoThumb:hover { background: #353535; } .videoThumb:hover a { background: #353535; } .videoThumb:hover img { opacity: 0.5; } .onlinecaptcha .captchaImg p, .onlinecaptcha .captchaSound p { margin-top: 10px; } .onlinecaptcha .captchaImg img { width: 100px; } .onlinecaptcha .captchaSound .captchaSoundBtn { color: #cc4c02; padding: 0 28px; height: 50px; box-sizing: border-box; border: 1px solid #cc4c02; display: inline-block; } .onlinecaptcha .captchaSound .captchaSoundBtn > span { display: inline-block; vertical-align: middle; color: #cc4c02; } .onlinecaptcha .captchaSound .captchaSoundBtn:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } @media screen and (min-width: 768px) { .onlinecaptcha .captchaSound .captchaSoundBtn:hover { color: #FFF; background-color: #cc4c02; border: 1px solid #cc4c02; } .onlinecaptcha .captchaSound .captchaSoundBtn:hover > span { color: #FFF; } } .onlinecaptcha .captchaControl.inlineControl { display: inline-block; } .onlinecaptcha .captchaControl input { border: 1px solid #000; padding: 10px 20px; display: inline-block; vertical-align: middle; width: calc(100% - 85px); max-width: 300px; } .onlinecaptcha .captchaControl .btnCaptch { width: 25px; height: 25px; display: inline-block; vertical-align: middle; background: url(../images/common_icons/orange/icon_visibility_orange.svg) no-repeat center center; background-size: 96%; margin: 10px 5px 0; } .onlinecaptcha .captchaControl .btnCaptch.btnCaptchRefresh { background-image: url(../images/common_icons/orange/icon_refresh_orange.svg); } .onlinecaptcha .captchaControl .btnCaptch.btnCaptchaImg { background-image: url(../images/common_icons/orange/icon_visibility_orange.svg); } .onlinecaptcha .captchaControl .btnCaptch.btnCaptchaSound { background-image: url(../images/common_icons/orange/icon_speaker_orange.svg); } .onlinecaptcha.onCaptchaSound .captchaImg, .onlinecaptcha.onCaptchaSound #inputCaptchaImg, .onlinecaptcha.onCaptchaSound .captchaControl .btnCaptchaSound { display: none; } .onlinecaptcha.onCaptchaImg .captchaSound, .onlinecaptcha.onCaptchaImg #inputCaptchaSound, .onlinecaptcha.onCaptchaImg .captchaControl .btnCaptchaImg { display: none; } .bottomBar { margin: 25px auto; } @media screen and (max-width: 1200px) { .bottomBar { margin-bottom: 0; } } .shareBar { width: 100%; margin: 0px auto 25px; } .shareBar.hideOnTablet { display: block; } .shareBar.showOnTablet { display: none; } @media screen and (max-width: 1200px) { .shareBar { margin: 0 auto 25px; } } .shareBar > span { display: inline-block; vertical-align: middle; } .shareBtn { display: inline-block; vertical-align: middle; margin-right: 5px; } .shareBtn:first-of-type { margin-left: 5px; } .shareBtn:last-child { margin-right: 0; } .shareBtn.shareFacebook { /* background: transparent url(../images/common_icons/icon_share_facebook.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/icon_share_facebook.svg) no-repeat center center; /* 16:24 2017-07-04 for esp ie11 icon crop fix: background-size: 100%; */ /* 10:19 2018-01-10 change to background blue fb logo, change width height to 19px background-size: 9px 17px; width: 9px; height: 17px; */ background-size: 19px 19px; width: 19px; height: 19px; margin-right: 11px; } .shareBtn.shareTwitter { /* background: transparent url(../images/common_icons/icon_share_twitter.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/icon_share_twitter.svg) no-repeat center center; /* 16:24 2017-07-04 for esp ie11 icon crop fix: background-size: 100%; */ background-size: 20px 17px; width: 20px; height: 17px; } .shareBtn.shareWeibo { /* background: transparent url(../images/common_icons/icon_share_weibo.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/icon_share_weibo.svg) no-repeat center center; /* 16:24 2017-07-04 for esp ie11 icon crop fix: background-size: 100%; */ background-size: 21px 17px; width: 21px; height: 17px; margin-right: 8px; } .shareBtn.shareWhatsapp { /* background: transparent url(../images/common_icons/icon_share_whatsapp.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/icon_share_whatsapp.svg) no-repeat center center; /* 16:24 2017-07-04 for esp ie11 icon crop fix: background-size: 100%; */ background-size: 19px 19px; width: 19px; height: 19px; margin-right: 9px; display: inline-block; /* display: none; 10:52 2019-03-20 update */ } .mobileDevice .shareBtn.shareWhatsapp { display: inline-block; } .shareBtn.shareLine { /* background: transparent url(../images/common_icons/icon_share_weibo.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/icon_share_line.svg) no-repeat center center; /* 16:24 2017-07-04 for esp ie11 icon crop fix: background-size: 100%; */ background-size: 19px 19px; width: 19px; height: 19px; display: inline-block; /* display: none; 10:52 2019-03-20 update */ margin-right: 11px; } .mobileDevice .shareBtn.shareLine { display: inline-block; } .shareBtn.shareEmail { /* background: transparent url(../images/common_icons/bw/icon_email.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/bw/icon_email.svg) no-repeat center center; background-size: 100%; width: 21px; height: 15px; } .feedbackIcon { /* background: transparent url(../images/common_icons/black/icon_email.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/black/icon_email.svg) no-repeat center center; background-size: 100%; width: 19px; height: 13px; display: inline-block; vertical-align: middle; margin-right: 5px; } .feedbackIcon:last-child { margin-right: 0; } .feedbackIcon:hover { /* background: transparent url(../images/common_icons/orange/icon_email.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/orange/icon_email.svg) no-repeat center center; background-size: 100%; } .extendAll { text-align: right; color: #990000; padding: 15px 0; cursor: pointer; } .extendAll .textCollapse { display: none; } .extendAll .textExtend, .extendAll .textCollapse { color: #990000; } .extendAll.active .textExtend { display: none; } .extendAll.active .textCollapse { display: inline-block; } .extendAll .leftHref { float: left; padding: 0 10px; border-left: 2px solid #CCC; } .extendAll .leftHref:first-child { padding-left: 0; border-left: none; } .extendAll .leftHref.blue { color: #454095; } .extendAll .rightHref { float: right; margin-left: 10px; color: #990000; padding-top: 15px; } @media screen and (max-width: 767px) { .extendAll .rightHref { padding-top: 5px; } } .extendAll .rightHref.blue .textExtend, .extendAll .rightHref.blue .textCollapse { color: #454095; } .footerExtendAll { margin: 15px 0; text-align: right; color: #990000; } @media screen and (max-width: 767px) { .footerExtendAll { margin: 25px 0; } } .footerExtendAll a { color: #990000; margin-left: 10px; } .footerExtendAll .extendAll { padding: 0; } .footerExtendAll .leftHref { float: left; text-align: left; } .footerExtendAll .leftHref.blue { color: #454095; } .footerExtendAll .leftHref:first-child { margin-left: 0; } .footerExtendAll .rightHref { float: right; } .footerExtendAll .rightHref.blue { color: #454095; } .searchBlock .searchHolder .quickLink a { color: #353535; } .searchBlock .searchHolder .quickLink a:hover { color: #cc4c02; } .alertBox { margin-top: 38px; padding: 35px; border: 4px solid #cc4c02; background: #FFF; } @media screen and (max-width: 767px) { .alertBox { padding: 20px; } } .alertBox.errBox { display: none; } .alertBox.errBox h2 { margin-bottom: 10px; } .alertBox.errBox h2:before { content: '✖'; display: inline-block; margin-right: 10px; } .alertBox.errBox ul { color: #87898b; } .alertBox.errBox ul li { padding: 5px 0; } .alertBox.errBox ul li.clone { display: none; } .alertBox h2 { color: #cc4c02; margin-bottom: 20px; } .alertBox p { margin-bottom: 30px; } .alertBox p:last-child { margin-bottom: 0; } .telLink, .emailLink { position: relative; display: inline-block; margin-right: 30px; color: #951717; } .telLink:last-child, .emailLink:last-child { margin-right: 0; } .telLink:before, .emailLink:before { content: ''; width: 20px; height: 20px; display: inline-block; vertical-align: middle; background: url(../images/common_icons/red/icon_tel_red.svg) no-repeat center center; background-size: 100% !important; } .telLink > span, .emailLink > span { display: inline-block; vertical-align: middle; color: #951717; } .telLink .inlineBreaker:before, .emailLink .inlineBreaker:before { background-color: #951717; top: 0; } .telLink:hover > span, .emailLink:hover > span { text-decoration: underline; } .telLink:hover > span.inlineBreaker, .emailLink:hover > span.inlineBreaker { text-decoration: none; } .telLink:before { background-image: url(../images/common_icons/red/icon_tel_red.svg); } .emailLink:before { background-image: url(../images/common_icons/red/icon_email_red.svg); } @media screen and (max-width: 1200px) { .link, .topicLink, .linkBlock { /* &:active, &:focus{ text-decoration: underline; a, span, h1,h2,h3,h4,h5,h6{ text-decoration: underline; } }*/ } .contentLink:hover { text-decoration: none; } .tagBlock .blockTag:not(.active):hover span, .tagBlock.blockTagHolder .blockHead.active:hover .blockTag { color: #353535; } .tagBlock.blockTagHolder .blockHead:hover:not(.active) .blockTag { color: #353535; } .shareBar.hideOnTablet { display: none; } .shareBar.showOnTablet { margin: 10px auto; display: block; } .shareBtn { margin-right: 8px; } .shareBtn.shareFacebook { margin-right: 12px; } .tagBlock .blockHead:not(.active):hover a { color: #353535; background: #ffeedc; } .tagBlock .blockHead:not(.active):hover { color: #FFF; background: #707070; } .linkBlock:hover, .linkBlock:focus { background: #FFF; color: #353535; } .linkBlock:hover span, .linkBlock:hover a, .linkBlock:hover h6, .linkBlock:hover h5, .linkBlock:hover h4, .linkBlock:hover h3, .linkBlock:hover h2, .linkBlock:hover h1, .linkBlock:focus span, .linkBlock:focus a, .linkBlock:focus h6, .linkBlock:focus h5, .linkBlock:focus h4, .linkBlock:focus h3, .linkBlock:focus h2, .linkBlock:focus h1 { color: #353535; } .linkBlock:hover#infoGovweb span, .linkBlock:focus#infoGovweb span { color: #353535; } .videoBtn:hover { background: transparent; color: #353535; border-color: #353535; } body.innerPage .innerPageHolder a:not(.btn):hover { text-decoration: none; } .topicLink:hover, .topicLink:focus { color: #353535; } .contentWrapper { width: 94%; } .contentWrapper.showOnTablet { display: block; } .contentWrapper.hideOnTablet { display: none; } .fullWidthWrapper.showOnTablet { display: block; } .fullWidthWrapper.hideOnTablet { display: none; } .blockRow.showOnTablet { display: block; } .blockRow.hideOnTablet { display: none; } .blockRow.noMarginTb { margin: 0; } .searchBlock .searchHolder #searchMainBar { height: 42px; } .searchBlock .searchHolder #searchMainBtn { width: 42px; height: 42px; } .searchBlock .searchHolder .quickLink a { /* color: $colorTxt; &:hover{ color: $colorRS; }*/ color: #353535; } .searchBlock .searchHolder .quickLink a:hover { color: #cc4c02; } .showOnTablet { display: block; } .hideOnTablet { display: none; } .title.showOnMobile { display: block; margin-top: 0; } .title.hideOnMobile { display: none; } .title:after { width: 24px; height: 24px; } .linkBlock:hover, .linkBlock:focus { background: #FFF; color: #353535; } .topicLink:hover, .topicLink:focus { color: #353535; } .blockRow { margin: 35px auto; } .expandable.expandTb { overflow: hidden; } .expandable.expandTb .blockHead { border-bottom: 2px solid #505050; } .expandable.expandTb .blockHead.showOnTablet { display: block; /* 12:14 2021-01-29 fix for housing 3 lines (note: NOT float left */ clear:both; } /* 12:14 2021-01-29 add for fix for housing 3 lines */ .expandable.expandTb nav { clear:both; } .expandable.expandTb .blockHead:after { display: block; } .expandable.expandTb .blockTagHolder { display: none; } .expandable.expandTb .slider { display: none; } .expandable.expandTb.active { border-bottom: 0; } .expandable.expandTb.active .blockHead { border-bottom: 0; } .expandable.expandTb.active .slider { display: block; } .blockHead.showOnTablet { position: relative; height: 60px; max-height: 72px; /* height: 60px; max-height: 60px; 15:14 2021-01-28 old value, housing case, 3 lines */ max-width: 1200px; } .block-1-1.blockTbEnd, .block-1-2.blockTbEnd, .block-2-2.blockTbEnd, .block-1-3.blockTbEnd, .block-2-3.blockTbEnd, .block-3-3.blockTbEnd, .block-1-4.blockTbEnd, .block-2-4.blockTbEnd, .block-3-4.blockTbEnd, .block-4-4.blockTbEnd, .block-1-5.blockTbEnd, .block-2-5.blockTbEnd, .block-3-5.blockTbEnd, .block-4-5.blockTbEnd, .block-5-5.blockTbEnd, .blockInnerCol-1-2.blockTbEnd, .blockInnerCol-1-3.blockTbEnd, .blockInnerCol-2-3.blockTbEnd, .blockInnerCol-1-4.blockTbEnd, .blockInnerCol-2-4.blockTbEnd, .blockInnerCol-3-4.blockTbEnd, .blockInnerCol-1-5.blockTbEnd, .blockInnerCol-2-5.blockTbEnd, .blockInnerCol-3-5.blockTbEnd, .blockInnerCol-4-5.blockTbEnd { margin-right: 0; } .block-1-2, .block-2-2, .block-1-3, .block-2-3, .block-3-3 { margin-right: 35px; } .block-1-2 { width: calc(50% - 35px * 1/2); } .block-1-3 { width: calc(33.3333% - 35px * 2/3); } .block-2-3 { width: calc(66.6666% - 35px * 1/3); } .blockTb-1-2, .blockTb-2-2, .blockTb-1-3, .blockTb-2-3, .blockTb-3-3 { margin-right: 35px; } .blockTb-1-2 { width: calc(50% - 35px * 1/2); } .blockTb-1-3 { width: calc(33.3333% - 35px * 2/3); } .blockTb-2-3 { width: calc(66.6666% - 35px * 1/3); } .blockTb-1-4 { width: calc(25% - 15px * 3/4); } .blockTb-2-4 { width: calc(50% - 15px * 2/4); } .blockTb-3-4 { width: calc(75% - 15px * 1/4); } .blockTb-1-5 { width: calc(20% - 10px * 4/5); } .blockTb-2-5 { width: calc(40% - 10px * 3/5); } .blockTb-3-5 { width: calc(60% - 10px * 2/5); } .blockTb-4-5 { width: calc(80% - 10px * 1/5); } .blockTb-1-1, .blockTb-2-2, .blockTb-3-3, .blockTb-4-4, .blockTb-5-5 { width: 100%; margin: 15px auto; } .blockTb-1-1.blockHead, .blockTb-2-2.blockHead, .blockTb-3-3.blockHead, .blockTb-4-4.blockHead, .blockTb-5-5.blockHead { margin: 0 auto; } .blockTb-1-1:first-child, .blockTb-2-2:first-child, .blockTb-3-3:first-child, .blockTb-4-4:first-child, .blockTb-5-5:first-child { margin: 0 auto; } .blockTb-1-1 .blockInnerCol, .blockTb-2-2 .blockInnerCol, .blockTb-3-3 .blockInnerCol, .blockTb-4-4 .blockInnerCol, .blockTb-5-5 .blockInnerCol { width: 100%; } .blockInnerColTb-1-1 { width: 100%; } .blockInnerColTb-1-2 { width: 50%; } .blockInnerColTb-1-3 { width: calc(100% * 1/3); } .videoBtn { min-width: 220px; } .serviceLink { margin: 0 0 20px; } .weatherBlock .weatherBlockInner { padding: 0 25px; } .weatherBlock .weatherBlockInner > .blockTb-1-2 { padding: 5%; margin-right: 0px; } .weatherBlock .weatherBlockInner > .blockTb-1-2:first-child { margin-left: 17px; margin-right: 15px; padding-bottom: 5%; } .weatherBlock .weatherBlockInner > .blockTb-1-2:first-child:after { background: #353535; display: block; content: ''; right: 0; top: 20%; bottom: auto; width: 1px; height: 60%; } .promotionSlider { padding: 0; overflow: hidden; } .promotionSlider .slide { padding: 0px 10px; } .promotionSlider .controls.atBottom { clear: both; position: initial; bottom: 0; margin-top: -20px; } .promotionSlider .controls.atBottom .control { top: calc(50%); } .promotionSlider .controls .control { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .promotionSlider .controls .control:before { height: 25px; width: 25px; } .promotionSlider .controls .control.prev { left: 0; } .promotionSlider .controls .control.next { right: 0; } .tagBlock.blockTagHolder.expandTb .blockHead { color: #FFF; background: #707070; padding: 0px 25px; height: 60px; vertical-align: middle; position: relative; border-bottom: 2px solid #505050; margin-bottom: 20px; width: 100%; } .tagBlock.blockTagHolder.expandTb .blockHead .blockTag { background: none; padding: 0; color: #FFF; height: 60px; } .tagBlock.blockTagHolder.expandTb .blockHead .blockTag:before { display: none; } .tagBlock.blockTagHolder.expandTb .blockHead:after { content: ""; width: 20px; height: 20px; background-size: 100% 100% !important; position: absolute; top: 50%; margin-top: -10px; right: 25px; /* background: transparent url(../images/common_icons/white/icon_arrow_down_white.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_down_white.svg) no-repeat center center; } .tagBlock.blockTagHolder.expandTb .blockHead.active:after { /* background: transparent url(../images/common_icons/white/icon_arrow_up_white.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_up_white.svg) no-repeat center center; } .tagBlock.blockTagHolder.expandTb .blockHead:hover { background: #cc4c02; } .tagBlock.blockTagHolder.expandTb .tagContentHolder { left: 0px; position: relative; top: -20px; margin-top: 0px; width: 100%; float: none; } .tagBlock.blockTagHolder.expandTb .tagContentHolder.active { display: block; } .tagBlock.blockTagHolder.expandTb .tagContentHolder.block-2-3 { left: 0; } .tagBlock.blockTagHolder.expandTb .tagContentHolder.block-1-3 { left: 0; } } @media screen and (max-width: 767px) { .tagBlock.blockTagHolder .blockHead:hover { color: #FFF; background: #707070; } .tagBlock.blockTagHolder .blockHead:hover:not(.active) .blockTag { color: #FFF; } .tagBlock.blockTagHolder .blockHead.active:hover .blockTag { color: #FFF; } .tagBlock .blockHead:hover:not(.active) a { background: none; } .contentWrapper { width: 90%; } .contentWrapper.showOnMobile { display: block; } .contentWrapper.hideOnMobile { display: none; } .contentWrapper.singleBlockTagWrapper .blockRow { margin-top: 0; } .fullWidthWrapper.showOnMobile { display: block; } .fullWidthWrapper.hideOnMobile { display: none; } .blockRow.showOnMobile { display: block; } .blockRow.hideOnMobile { display: none; } .blockRow.noMarginMb { margin: 0; } .blockHead.showOnTablet { height: 48px; max-height: 72px; /* max-height: 48px; 15:53 2021-01-28 housing case, 3 lines */ } .tagBlock .blockTag { height: auto; } .tagBlock.blockTagHolder.expandTb .blockHead { height: 48px; } .tagBlock.blockTagHolder .blockHead { cursor: pointer; color: #FFF; background: #707070; padding: 0px 25px; height: 48px; vertical-align: middle; position: relative; border-bottom: 2px solid #505050; margin-bottom: 20px; width: 100%; } .tagBlock.blockTagHolder .blockHead:before { display: inline-block; height: 100%; content: ''; vertical-align: middle; width: 0; } .tagBlock.blockTagHolder .blockHead .blockTag { background: none; display: inline; padding: 0; color: #FFF; height: 48px; border-bottom: none; } .tagBlock.blockTagHolder .blockHead .blockTag:before { display: none; } .tagBlock.blockTagHolder .blockHead:after { content: ""; width: 15px; height: 15px; background-size: 100% 100% !important; position: absolute; top: 50%; margin-top: -7px; right: 25px; /* background: transparent url(../images/common_icons/white/icon_arrow_down_white.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_down_white.svg) no-repeat center center; } .tagBlock.blockTagHolder .blockHead.active { border-bottom: none; } .tagBlock.blockTagHolder .blockHead.active .blockTag { background: none; } .tagBlock.blockTagHolder .blockHead.active .blockTag:before { display: none; } .tagBlock.blockTagHolder .blockHead.active:after { /* background: transparent url(../images/common_icons/white/icon_arrow_up_white.png) no-repeat center center; */ background: rgba(255, 255, 255, 0) url(../images/common_icons/white/icon_arrow_up_white.svg) no-repeat center center; } .tagBlock.blockTagHolder .tagContentHolder { left: 0px; position: relative; top: -20px; margin-top: 0px; margin-bottom: 5px; width: 100%; float: none; } .tagBlock.blockTagHolder .tagContentHolder.active { display: block; } .tagBlock.blockTagHolder .tagContentHolder.block-2-3 { left: 0; padding: 25px 45px; min-height: auto !important; } .tagBlock.blockTagHolder .tagContentHolder.block-2-3:last-child { margin-bottom: 0; } .tagBlock.blockTagHolder .tagContentHolder.block-1-3 { left: 0; } .innerRow { height: 48px; } .blockHead { z-index: 10; height: 48px; } .blockRow { margin: 15px auto; } .homePage .blockRow { margin: 5px auto; } .showOnMobile { display: none; } .hideOnTablet { display: none; } .expandable.expandMb { overflow: hidden; border-bottom: 2px solid #505050; margin: 5px 0; } .expandable.expandMb .blockHead { cursor: pointer; } .expandable.expandMb .blockHead.showOnMobile { display: block; max-height: 48px; } .expandable.expandMb .blockHead:after { width: 15px; height: 15px; margin-top: -7px; right: 25px; display: block; } .expandable.expandMb .blockHead.showOnTablet { max-height: 48px; } .expandable.expandMb .blockContent, .expandable.expandMb .blockTagContent { display: none; } .expandable.expandMb .slider { display: none; } .expandable.expandMb.active { border-bottom: 0; margin-bottom: 15px; } .expandable.expandMb.active .blockContent, .expandable.expandMb.active .blockTagContent { display: block; } .expandable.expandMb.active .slider { display: block; } .expandable.expandTb { overflow: hidden; border-bottom: 0; margin: 5px 0; } .expandable.expandTb .blockHead { cursor: pointer; } .expandable.expandTb .blockHead:after { display: block; width: 15px; height: 15px; top: 50%; margin-top: -7px; right: 25px; } .expandable.expandTb .slider { display: none; } .expandable.expandTb.active { border-bottom: 0; margin-bottom: 15px; } .expandable.expandTb.active .slider { display: block; } .weatherBlock h5 { margin: 0px; } .weatherBlock .weatherBlockInner > .blockTb-1-2:first-child { margin: 0; } .weatherBlock .weatherBlockInner > .blockTb-1-2:first-child:after { right: auto; top: auto; bottom: 0; left: 0; width: 100%; height: 1px; } .blockHead.showOnMobile { position: relative; height: 48px; max-height: 48px; max-width: 1200px; } .block-1-1.blockMbEnd, .block-1-2.blockMbEnd, .block-2-2.blockMbEnd, .block-1-3.blockMbEnd, .block-2-3.blockMbEnd, .block-3-3.blockMbEnd, .block-1-4.blockMbEnd, .block-2-4.blockMbEnd, .block-3-4.blockMbEnd, .block-4-4.blockMbEnd, .block-1-5.blockMbEnd, .block-2-5.blockMbEnd, .block-3-5.blockMbEnd, .block-4-5.blockMbEnd, .block-5-5.blockMbEnd, .blockInnerCol-1-2.blockMbEnd, .blockInnerCol-1-3.blockMbEnd, .blockInnerCol-2-3.blockMbEnd, .blockInnerCol-1-4.blockMbEnd, .blockInnerCol-2-4.blockMbEnd, .blockInnerCol-3-4.blockMbEnd, .blockInnerCol-1-5.blockMbEnd, .blockInnerCol-2-5.blockMbEnd, .blockInnerCol-3-5.blockMbEnd, .blockInnerCol-4-5.blockMbEnd { margin-right: 0; } .block-1-4, .block-2-4, .block-3-4, .block-4-4 { margin-right: 0; } .block-1-2, .block-2-2, .block-1-3, .block-2-3, .block-3-3 { margin-right: 15px; } .block-1-2 { width: calc(50% - 15px * 1/2); } .block-1-3 { width: calc(33.3333% - 15px * 2/3); } .block-2-3 { width: calc(66.6666% - 15px * 1/3); } .blockMb-1-2 { width: calc(50% - 15px * 1/2); } .blockMb-1-3 { width: calc(33.3333% - 15px * 2/3); } .blockMb-2-3 { width: calc(66.6666 - 15px * 1/3); } .blockMb-1-4 { width: calc(25% - 10px * 3/4); } .blockMb-2-4 { width: calc(50% - 10px * 2/4); } .blockMb-3-4 { width: calc(75% - 10px * 1/4); } .blockMb-1-5 { width: calc(20% - 10px * 4/5); } .blockMb-2-5 { width: calc(40% - 10px * 3/5); } .blockMb-3-5 { width: calc(60% - 10px * 2/5); } .blockMb-4-5 { width: calc(80% - 10px * 1/5); } .blockMb-1-1, .blockMb-2-2, .blockMb-3-3, .blockMb-4-4, .blockMb-5-5 { width: 100%; margin: 15px auto; } .blockMb-1-1.blockHead, .blockMb-2-2.blockHead, .blockMb-3-3.blockHead, .blockMb-4-4.blockHead, .blockMb-5-5.blockHead { margin: 0 auto; } .blockMb-1-1 .blockInnerCol, .blockMb-2-2 .blockInnerCol, .blockMb-3-3 .blockInnerCol, .blockMb-4-4 .blockInnerCol, .blockMb-5-5 .blockInnerCol { width: 100%; } .blockInnerColMb-1-1 { width: 100%; } .blockInnerColMb-1-2 { width: 50%; } .blockInnerColMb-1-3 { width: calc(100% * 1/3); } .tagBlock .blockTagHolder.block-1-3 { width: 100%; margin: 0; } .tagBlock .blockTagContent { padding: 0 25px; } .videoBtn { min-width: 200px; } .slider .slides { padding: 30px 50px 0; } .controls.hasMbMode.atBottom { position: initial; bottom: 0; margin-top: -20px; } .controls.hasMbMode.atBottom .control { top: calc(50%+ 20px); } .controls.hasMbMode .control { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .controls.hasMbMode .control:before { height: 25px; width: 25px; } .controls.hasMbMode .control.prev { left: 0; } .controls.hasMbMode .control.next { right: 0; } .promotionSlider .control { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .promotionSlider .control .controls .control:before { content: ' '; height: 15px; width: 15px; display: inline-block; background: no-repeat center center; background-size: cover; } /* 11:50 2017-11-29 show hot searches even at mobile .searchBlock .hotSearch { display: none; } */ } @media screen and (max-width: 480px) { .videoBtn { min-width: 100%; padding: 8px; padding-right: 18px; } .videoBtn:after { right: 10px; } } @media screen and (max-width: 380px) { #currentMedia { display: none; max-width: 380px; } .contentWrapper { width: 94%; } .blockHead { padding: 0 15px; } .tagBlock.blockTagHolder .blockHead { padding: 0 15px; } .tagBlock.blockTagHolder .blockHead:after, .expandable.expandMb .blockHead::after, .expandable .blockHead:after { width: 15px; height: 15px; right: 20px; margin-top: -7.5px; } } #currentMedia { display: none; max-width: 1920px; } @media screen and (max-width: 1600px) { #currentMedia { display: none; max-width: 1600px; } } @media screen and (max-width: 1200px) { #currentMedia { display: none; max-width: 1200px; } } @media screen and (max-width: 1024px) { #currentMedia { display: none; max-width: 1024px; } } @media screen and (max-width: 767px) { #currentMedia { display: none; max-width: 767px; } } @media screen and (max-width: 640px) { #currentMedia { display: none; max-width: 640px; } } @media screen and (max-width: 480px) { #currentMedia { display: none; max-width: 480px; } } @media screen and (max-width: 380px) { #currentMedia { display: none; max-width: 380px; } } /* 10:57 2019-07-09 added from guidebook */ .shareWechat { background: rgba(255, 255, 255, 0) url(/images/common_icons/icon_share_wechat.svg) no-repeat center center; background-size: 19px 19px; width: 19px; height: 19px; display: inline-block; margin-right: 11px; } /*# sourceMappingURL=layout.css.map */ /* 15:28 2017-03-30 fix easter 15:49 2017-03-31 fix z-index to -1 for easter bg 9:23 2017-05-08 fix father day 9:43 2017-05-09 remark all not found images 10:19 2017-06-06 fundraising table fix 9:19 2017-06-19 take out fundraising 9:57 2017-06-30 mobile culture 16:26 2017-07-04 weibo icons fix 16:58 2018-01-08 news.gov.hk revamp 10:20 2018-01-10 fb logo 11:40 2018-03-12 for search autocomplete 9:18 2018-03-13 restore all z-index: 10000 14:53 2018-03-26 change hot search padding 12:08 2018-05-07 fix iphone 6 eng search box 10:28 2018-08-16 move SchoolYear Image to "center" on mobile (by adjust margin) */