/* @charset "UTF-8"; */ /* Animations for common usage */ /* ------------------------------------------ */ /**-------Keyframes------**/ @-webkit-keyframes fade-in-basic { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in-basic { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-in-from-left { 0% { opacity: 0; -webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fade-in-from-left { 0% { opacity: 0; -webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fade-in-from-right { 0% { opacity: 0; -webkit-transform: translateX(15%); -ms-transform: translateX(15%); transform: translateX(15%); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fade-in-from-right { 0% { opacity: 0; -webkit-transform: translateX(15%); -ms-transform: translateX(15%); transform: translateX(15%); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fade-in-from-top { 0% { opacity: 0; -webkit-transform: translateY(-15%); -ms-transform: translateY(-15%); transform: translateY(-15%); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fade-in-from-top { 0% { opacity: 0; -webkit-transform: translateY(-15%); -ms-transform: translateY(-15%); transform: translateY(-15%); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fade-in-from-bottom { 0% { opacity: 0; -webkit-transform: translateY(15%); -ms-transform: translateY(15%); transform: translateY(15%); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fade-in-from-bottom { 0% { opacity: 0; -webkit-transform: translateY(15%); -ms-transform: translateY(15%); transform: translateY(15%); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /**-------END Keyframes------**/ /**-------Animations------**/ @keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } /**-------END Animations------**/ /* END Animations common usage */ /**-------END Animations------**/ /* END Animations our-work */ /* ------------------------------------------ */ /* Animations for header */ /* ------------------------------------------ */ /**-------Keyframes------**/ @-webkit-keyframes fade-in-menu-items { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in-menu-items { 0% { opacity: 0; } 100% { opacity: 1; } } /**-------END Keyframes------**/ /**-------Animations------**/ .header-nav__link-holder { opacity: 0; } .header--ready .header-nav__link-holder:nth-child(1) { -webkit-animation: fade-in-from-top 0.8s 0.1s ease-out; animation: fade-in-from-top 0.8s 0.1s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__link-holder:nth-child(3) { -webkit-animation: fade-in-from-top 0.8s 0.2s ease-out; animation: fade-in-from-top 0.8s 0.2s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__link-holder:nth-child(5) { -webkit-animation: fade-in-from-top 0.8s 0.3s ease-out; animation: fade-in-from-top 0.8s 0.3s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__link-holder:nth-child(7) { -webkit-animation: fade-in-from-top 0.8s 0.4s ease-out; animation: fade-in-from-top 0.8s 0.4s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__link-holder:nth-child(9) { -webkit-animation: fade-in-from-top 0.8s 0.5s ease-out; animation: fade-in-from-top 0.8s 0.5s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__link-holder:nth-child(11) { -webkit-animation: fade-in-from-top 0.8s 0.6s ease-out; animation: fade-in-from-top 0.8s 0.6s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .trident .header--ready .header-nav__link-holder:nth-child(1), .trident .header--ready .header-nav__link-holder:nth-child(3), .trident .header--ready .header-nav__link-holder:nth-child(5), .trident .header--ready .header-nav__link-holder:nth-child(7), .trident .header--ready .header-nav__link-holder:nth-child(9), .trident .header--ready .header-nav__link-holder:nth-child(11), .ie .header--ready .header-nav__link-holder:nth-child(1), .ie .header--ready .header-nav__link-holder:nth-child(3), .ie .header--ready .header-nav__link-holder:nth-child(5), .ie .header--ready .header-nav__link-holder:nth-child(7), .ie .header--ready .header-nav__link-holder:nth-child(9), .ie .header--ready .header-nav__link-holder:nth-child(11), .isMSTouchDevice .header--ready .header-nav__link-holder:nth-child(1), .isMSTouchDevice .header--ready .header-nav__link-holder:nth-child(3), .isMSTouchDevice .header--ready .header-nav__link-holder:nth-child(5), .isMSTouchDevice .header--ready .header-nav__link-holder:nth-child(7), .isMSTouchDevice .header--ready .header-nav__link-holder:nth-child(9), .isMSTouchDevice .header--ready .header-nav__link-holder:nth-child(11) { opacity: 1; -webkit-animation: none; animation: none; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header-nav__text-control { opacity: 0; } .header--ready .header-nav__text-control { -webkit-animation: fade-in-from-top 0.8s 0.7s ease-out; animation: fade-in-from-top 0.8s 0.7s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .isMSTouchDevice .header--ready .header-nav__text-control { opacity: 1; -webkit-animation: none; animation: none; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header-nav__tool { opacity: 0; } .header--ready .header-nav__tool:nth-child(1) { -webkit-animation: fade-in-from-top 0.8s 0.8s ease-out; animation: fade-in-from-top 0.8s 0.8s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__tool:nth-child(2) { -webkit-animation: fade-in-from-top 0.8s 0.9s ease-out; animation: fade-in-from-top 0.8s 0.9s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__tool:nth-child(3) { -webkit-animation: fade-in-from-top 0.8s 1s ease-out; animation: fade-in-from-top 0.8s 1s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__tool:nth-child(4) { -webkit-animation: fade-in-from-top 0.8s 1.1s ease-out; animation: fade-in-from-top 0.8s 1.1s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .header--ready .header-nav__tool:nth-child(5) { -webkit-animation: fade-in-from-top 0.8s 1.2s ease-out; animation: fade-in-from-top 0.8s 1.2s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .page-ani-end .header--ready .header-nav__tool { opacity: 1; -webkit-animation: none; animation: none; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .trident .header--ready .header-nav__tool:nth-child(1), .trident .header--ready .header-nav__tool:nth-child(2), .trident .header--ready .header-nav__tool:nth-child(3), .trident .header--ready .header-nav__tool:nth-child(4), .trident .header--ready .header-nav__tool:nth-child(5), .ie .header--ready .header-nav__tool:nth-child(1), .ie .header--ready .header-nav__tool:nth-child(2), .ie .header--ready .header-nav__tool:nth-child(3), .ie .header--ready .header-nav__tool:nth-child(4), .ie .header--ready .header-nav__tool:nth-child(5), .isMSTouchDevice .header--ready .header-nav__tool:nth-child(1), .isMSTouchDevice .header--ready .header-nav__tool:nth-child(2), .isMSTouchDevice .header--ready .header-nav__tool:nth-child(3), .isMSTouchDevice .header--ready .header-nav__tool:nth-child(4), .isMSTouchDevice .header--ready .header-nav__tool:nth-child(5) { opacity: 1; -webkit-animation: none; animation: none; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } /**-------END Animations------**/ /* END Animations header */ /* ------------------------------------------ */ .menu--ready .swiper-slide-active .main-banner__title { -webkit-animation: main-banner-common-fade-in-from-left 0.6s ease-out 0.3s; animation: main-banner-common-fade-in-from-left 0.6s ease-out 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .main-banner__title-tag { opacity: 0; } .menu--ready .swiper-slide-active .main-banner__title-tag { -webkit-animation: main-banner-common-fade-in-from-bottom 0.6s ease-out 0.55s; animation: main-banner-common-fade-in-from-bottom 0.6s ease-out 0.55s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .main-banner__txt .btn { opacity: 0; } .menu--ready .swiper-slide-active .main-banner__txt .btn { -webkit-animation: main-banner-common-fade-in-from-bottom 0.6s ease-out 0.7s; animation: main-banner-common-fade-in-from-bottom 0.6s ease-out 0.7s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .main-banner__news-slider { opacity: 0; } .main-banner__news-slider.is-ready { -webkit-animation: main-banner-common-fade-in-from-right 0.6s ease-out 2.3s; animation: main-banner-common-fade-in-from-right 0.6s ease-out 2.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .main-banner__scroll-down:before { opacity: 0; -webkit-animation: main-banner-scroll 1s 3 forwards 3.2s; animation: main-banner-scroll 1s 3 forwards 3.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } /**-------END Animations------**/ /* END Animations sample */ /* ------------------------------------------ */ /* Animations for our-work */ /* ------------------------------------------ */ /**-------Keyframes------**/ @-webkit-keyframes what-news-title { 0% { opacity: 0; -webkit-transform: translateY(-45px); -ms-transform: translateY(-45px); transform: translateY(-45px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes what-news-title { 0% { opacity: 0; -webkit-transform: translateY(-45px); -ms-transform: translateY(-45px); transform: translateY(-45px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes what-news-content { 0% { opacity: 0; -webkit-transform: translateY(45px); -ms-transform: translateY(45px); transform: translateY(45px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes what-news-content { 0% { opacity: 0; -webkit-transform: translateY(45px); -ms-transform: translateY(45px); transform: translateY(45px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /**-------END Keyframes------**/ /**-------Animations------**/ .news-centre__title { opacity: 0; } .in-view .news-centre__title { -webkit-animation: what-news-title 0.6s ease-in-out; animation: what-news-title 0.6s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .news-centre__content-holder { opacity: 0; } .in-view .news-centre__content-holder { -webkit-animation: what-news-content 0.6s ease-in-out 0.3s; animation: what-news-content 0.6s ease-in-out 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } /**-------END Animations------**/ /* END Animations our-work */ /* ------------------------------------------ */ /* Animations for our-work */ /* ------------------------------------------ */ /**-------Keyframes------**/ @-webkit-keyframes our-work-icon { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-60px); -ms-transform: scale(1, 1) translateY(-60px); transform: scale(1, 1) translateY(-60px); } 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @keyframes our-work-icon { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-60px); -ms-transform: scale(1, 1) translateY(-60px); transform: scale(1, 1) translateY(-60px); } 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-webkit-keyframes our-work-title { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes our-work-title { 0% { opacity: 0; } 100% { opacity: 1; } } /**-------END Keyframes------**/ /**-------Animations------**/ .our-work__title { opacity: 0; } .in-view .our-work__title { -webkit-animation: our-work-icon 0.6s ease-in-out; animation: our-work-icon 0.6s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .epic-service__item-icon { opacity: 0; } .in-view .epic-service__item-icon { -webkit-animation: our-work-icon 0.6s ease-in-out; animation: our-work-icon 0.6s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .in-view .epic-service__item:nth-child(1) .epic-service__item-icon { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .in-view .epic-service__item:nth-child(2) .epic-service__item-icon { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .in-view .epic-service__item:nth-child(3) .epic-service__item-icon { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .in-view .epic-service__item:nth-child(4) .epic-service__item-icon { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .in-view .epic-service__item:nth-child(5) .epic-service__item-icon { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .in-view .epic-service__item:nth-child(6) .epic-service__item-icon { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .in-view .epic-service__item:nth-child(7) .epic-service__item-icon { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .in-view .epic-service__item:nth-child(8) .epic-service__item-icon { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .in-view .epic-service__item:nth-child(9) .epic-service__item-icon { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .in-view .epic-service__item:nth-child(10) .epic-service__item-icon { -webkit-animation-delay: 3s; animation-delay: 3s; } .in-view .epic-service__item:nth-child(11) .epic-service__item-icon { -webkit-animation-delay: 3.3s; animation-delay: 3.3s; } .in-view .epic-service__item:nth-child(12) .epic-service__item-icon { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; } .epic-service__item-title { opacity: 0; } .in-view .epic-service__item-title { -webkit-animation: our-work-title 0.6s ease-in-out; animation: our-work-title 0.6s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .in-view .epic-service__item:nth-child(1) .epic-service__item-title { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } .in-view .epic-service__item:nth-child(2) .epic-service__item-title { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } .in-view .epic-service__item:nth-child(3) .epic-service__item-title { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; } .in-view .epic-service__item:nth-child(4) .epic-service__item-title { -webkit-animation-delay: 1.35s; animation-delay: 1.35s; } .in-view .epic-service__item:nth-child(5) .epic-service__item-title { -webkit-animation-delay: 1.65s; animation-delay: 1.65s; } .in-view .epic-service__item:nth-child(6) .epic-service__item-title { -webkit-animation-delay: 1.95s; animation-delay: 1.95s; } .in-view .epic-service__item:nth-child(7) .epic-service__item-title { -webkit-animation-delay: 2.25s; animation-delay: 2.25s; } .in-view .epic-service__item:nth-child(8) .epic-service__item-title { -webkit-animation-delay: 2.55s; animation-delay: 2.55s; } .in-view .epic-service__item:nth-child(9) .epic-service__item-title { -webkit-animation-delay: 2.85s; animation-delay: 2.85s; } .in-view .epic-service__item:nth-child(10) .epic-service__item-title { -webkit-animation-delay: 3.15s; animation-delay: 3.15s; } .in-view .epic-service__item:nth-child(11) .epic-service__item-title { -webkit-animation-delay: 3.45s; animation-delay: 3.45s; } .in-view .epic-service__item:nth-child(12) .epic-service__item-title { -webkit-animation-delay: 3.75s; animation-delay: 3.75s; } /**-------END Animations------**/ /* END Animations our-work */ /* ------------------------------------------ */ /* poppins-100 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; src: local("Poppins Thin"), local("Poppins-Thin"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-100.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-100.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-200 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; src: local("Poppins ExtraLight"), local("Poppins-ExtraLight"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-200.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-200.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-300 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; src: local("Poppins Light"), local("Poppins-Light"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-300.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-300.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-regular - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: local("Poppins Regular"), local("Poppins-Regular"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-regular.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-regular.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-500 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: local("Poppins Medium"), local("Poppins-Medium"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-500.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-500.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-600 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-600.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-600.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-700 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: local("Poppins Bold"), local("Poppins-Bold"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-700.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-700.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-800 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; src: local("Poppins ExtraBold"), local("Poppins-ExtraBold"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-800.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-800.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-900 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; src: local("Poppins Black"), local("Poppins-Black"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-900.woff2.jsf') format("woff2"), url('/EPICDI/javax.faces.resource/fonts/poppins/poppins-v15-latin-900.woff.jsf') format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* Start EPDMigration CSS */ /* ------------------------------------------ */ /*************** * * General CSS * ****************/ .custom-select__trigger{ text-decoration: none !important; } .sec-alert-rss-button { position: relative; float: right; margin: 0; padding: 36px 0 0; } .alert-container{ position: relative; width: 100%; font-size: 0; padding: 0 0 60px; } .underlineContent{ text-decoration:underline; } #alerts-and-reports .latest { border-bottom: 5px solid #d64309; margin: 0; color: rgba(0, 0, 0, 0.8); padding: 25px 0 10px; } .list-unstyled { padding-left: 0; list-style: none; } .alert_date { padding: 5px; font-size: 1.5em; background: #d64309; color: #fff; width: 85px; text-align: center; } .alert_month { padding: 5px; font-size: 1.1em; font-weight: 700; background: #fff; color: #1F497D; } .date-card { display: flex; flex-direction: column; align-items: center; margin-right: 15px; box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.1); background: #fff; } .alert-body { font-size: 1.05em; } .alert_view-row { display: flex; align-items: flex-start; width: 100%; padding: 15px 15px 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.15); transition: all 0.2s ease-in; } .career_table { background-color: transparent; width: 60%; display: table; margin: 0 auto; } .alignCenter { text-align: center; } .mainHolder { padding-bottom: 20px; padding-top:20px; } @media only screen and (min-width: 48.0625em) { .transcripts { cursor: pointer; border: 1px solid #cccccc; width: 100%; height: 25px; padding-bottom: 5px; padding-top: 1px; } .transcripts img { vertical-align: middle; padding-bottom: 3px; padding-right: 5px; } } @media only screen and (max-width: 48.0635em) { .transcripts { cursor: pointer; border: 1px solid #cccccc; width: 100%; height: 25px; padding-bottom: 5px; padding-top: 5px; } .transcripts img { vertical-align: middle; padding-bottom: 3px; padding-right: 5px; } } @media only screen and (min-width: 48.0625em) { .keyboardShortCutOpen { width: 97.1%; background-color: #008CBA; border: none; color: #000000; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .keyboardShortCutClose { width: 97.1%; background-color: #008CBA; border: none; color: #000000; padding: 15px 32px; text-align: center; text-decoration: none; display: none; font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } } @media only screen and (max-width: 48.0635em) { .keyboardShortCutOpen { width: 100%; background-color: #008CBA; border: none; color: #000000; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .keyboardShortCutClose { width: 100%; background-color: #008CBA; border: none; color: #000000; padding: 15px 32px; text-align: center; text-decoration: none; display: none; font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } } .fixedWidth { width: 180px; } .row .row { margin: 0 -0.5rem; } .row { max-width: 61.25rem; display: -webkit-inline-box; } .padding_3pc { padding-left: 15px; padding-top: 4px; } .news_date { min-width: 160px; } /* ================================================================================================= Form Control ================================================================================================= */ .terms_and_conditions_border { border: 2px solid #ffc62e; padding: 10px; margin-bottom: 10px; } .mainHolder input[type="text"], .mainHolder input[type="password"], .mainHolder input[type="date"], .mainHolder input[type="datetime"], .mainHolder input[type="datetime-local"], .mainHolder input[type="month"], .mainHolder input[type="week"], .mainHolder input[type="email"], .mainHolder input[type="number"], .mainHolder input[type="search"], .mainHolder input[type="tel"], .mainHolder input[type="time"], .mainHolder input[type="url"], .mainHolder input[type="color"], textarea { -webkit-appearance: none; border-radius: 0; background-color: #FFFFFF; font-family: inherit; border-style: solid; border-width: 1px; border-color: #cccccc; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); display: block; font-size: 0.875rem; margin: 0 0 1rem 0; padding: 0.5rem; height: 2.3125rem; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: box-shadow 0.45s, border-color 0.45s ease-in-out; } .mainHolder input[type="text"]:focus, .mainHolder input[type="password"]:focus, .mainHolder input[type="date"]:focus, .mainHolder input[type="datetime"]:focus, .mainHolder input[type="datetime-local"]:focus, .mainHolder input[type="month"]:focus, .mainHolder input[type="week"]:focus, .mainHolder input[type="email"]:focus, .mainHolder input[type="number"]:focus, .mainHolder input[type="search"]:focus, .mainHolder input[type="tel"]:focus, .mainHolder input[type="time"]:focus, .mainHolder input[type="url"]:focus, .mainHolder input[type="color"]:focus, textarea:focus { box-shadow: 0 0 5px #999999; border-color: #999999; } .mainHolder input[type="text"]:focus, .mainHolder input[type="password"]:focus, .mainHolder input[type="date"]:focus, .mainHolder input[type="datetime"]:focus, .mainHolder input[type="datetime-local"]:focus, .mainHolder input[type="month"]:focus, .mainHolder input[type="week"]:focus, .mainHolder input[type="email"]:focus, .mainHolder input[type="number"]:focus, .mainHolder input[type="search"]:focus, .mainHolder input[type="tel"]:focus, .mainHolder input[type="time"]:focus, .mainHolder input[type="url"]:focus, .mainHolder input[type="color"]:focus, textarea:focus { background: #fafafa; border-color: #999999; outline: none; } .mainHolder input[type="text"]:disabled, .mainHolder input[type="password"]:disabled, .mainHolder input[type="date"]:disabled, .mainHolder input[type="datetime"]:disabled, .mainHolder input[type="datetime-local"]:disabled, .mainHolder input[type="month"]:disabled, .mainHolder input[type="week"]:disabled, .mainHolder input[type="email"]:disabled, .mainHolder input[type="number"]:disabled, .mainHolder input[type="search"]:disabled, .mainHolder input[type="tel"]:disabled, .mainHolder input[type="time"]:disabled, .mainHolder input[type="url"]:disabled, .mainHolder input[type="color"]:disabled, textarea:disabled { /*background-color: #DDDDDD; */ cursor: default; } .mainHolder input[type="text"][disabled], .mainHolder input[type="text"][readonly], .mainHolder fieldset[disabled] .mainHolder input[type="text"], .mainHolder input[type="password"][disabled], .mainHolder input[type="password"][readonly], fieldset[disabled] .mainHolder input[type="password"], .mainHolder input[type="date"][disabled], .mainHolder input[type="date"][readonly], fieldset[disabled] .mainHolder input[type="date"], .mainHolder input[type="datetime"][disabled], .mainHolder input[type="datetime"][readonly], fieldset[disabled] .mainHolder input[type="datetime"], .mainHolder input[type="datetime-local"][disabled], .mainHolder input[type="datetime-local"][readonly], fieldset[disabled] .mainHolder input[type="datetime-local"], .mainHolder input[type="month"][disabled], .mainHolder input[type="month"][readonly], fieldset[disabled] .mainHolder input[type="month"], .mainHolder input[type="week"][disabled], .mainHolder input[type="week"][readonly], fieldset[disabled] .mainHolder input[type="week"], .mainHolder input[type="email"][disabled], .mainHolder input[type="email"][readonly], fieldset[disabled] .mainHolder input[type="email"], .mainHolder input[type="number"][disabled], .mainHolder input[type="number"][readonly], .mainHolder fieldset[disabled] .mainHolder input[type="number"], .mainHolder input[type="search"][disabled], .mainHolder input[type="search"][readonly], .mainHolder fieldset[disabled] .mainHolder input[type="search"], .mainHolder input[type="tel"][disabled], .mainHolder input[type="tel"][readonly], fieldset[disabled] .mainHolder input[type="tel"], .mainHolder input[type="time"][disabled], .mainHolder input[type="time"][readonly], fieldset[disabled] .mainHolder input[type="time"], .mainHolder input[type="url"][disabled], .mainHolder input[type="url"][readonly], fieldset[disabled] .mainHolder input[type="url"], .mainHolder input[type="color"][disabled], .mainHolder input[type="color"][readonly], .mainHolder fieldset[disabled] .mainHolder input[type="color"], .mainHolder textarea[disabled], .mainHolder textarea[readonly], .mainHolder fieldset[disabled] textarea { background-color: #DDDDDD; cursor: default; } .mainHolder input[type="text"].radius, .mainHolder input[type="password"].radius, .mainHolder input[type="date"].radius, .mainHolder input[type="datetime"].radius, .mainHolder input[type="datetime-local"].radius, .mainHolder input[type="month"].radius, .mainHolder input[type="week"].radius, .mainHolder input[type="email"].radius, .mainHolder input[type="number"].radius, .mainHolder input[type="search"].radius, .mainHolder input[type="tel"].radius, .mainHolder input[type="time"].radius, .mainHolder input[type="url"].radius, .mainHolder input[type="color"].radius, textarea.radius { border-radius: 3px; } .mainHolder form .row .prefix-radius.row.collapse .mainHolder input, .mainHolder form .row .prefix-radius.row.collapse textarea, .mainHolder form .row .prefix-radius.row.collapse select { border-radius: 0; -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .mainHolder form .row .prefix-radius.row.collapse .prefix { border-radius: 0; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .mainHolder form .row .postfix-radius.row.collapse .mainHolder input, .mainHolder form .row .postfix-radius.row.collapse textarea, .mainHolder form .row .postfix-radius.row.collapse select { border-radius: 0; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .mainHolder form .row .postfix-radius.row.collapse .postfix { border-radius: 0; -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .mainHolder form .row .prefix-round.row.collapse .mainHolder input, .mainHolder form .row .prefix-round.row.collapse textarea, .mainHolder form .row .prefix-round.row.collapse select { border-radius: 0; -webkit-border-bottom-right-radius: 1000px; -webkit-border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } .mainHolder form .row .prefix-round.row.collapse .prefix { border-radius: 0; -webkit-border-bottom-left-radius: 1000px; -webkit-border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } .mainHolder form .row .postfix-round.row.collapse .mainHolder input, .mainHolder form .row .postfix-round.row.collapse textarea, .mainHolder form .row .postfix-round.row.collapse select { border-radius: 0; -webkit-border-bottom-left-radius: 1000px; -webkit-border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } .mainHolder form .row .postfix-round.row.collapse .postfix { border-radius: 0; -webkit-border-bottom-right-radius: 1000px; -webkit-border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } .mainHolder .submit-btn { width: 20%; min-width: 200px; -webkit-appearance: none; border-radius: 0; padding-left: 6px; padding-bottom: 4px; padding-top: 4px; padding-right: 6px; text-align:center; margin: 5px; } /* Respect enforced amount of rows for .mainHolder textarea */ .mainHolder textarea[rows] { height: auto; } /* Not allow resize out of parent */ .mainHolder textarea { max-width: 100%; } /* Add height value for select elements to match text .mainHolder input height */ .mainHolder select { -webkit-appearance: none !important; border-radius: 0; background-color: #FAFAFA; background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+"); background-position: 100% center; background-repeat: no-repeat; border-style: solid; border-width: 1px; border-color: #cccccc; padding: 0.5rem; /* font-size: 0.875rem; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; */ /*color: rgba(0, 0, 0, 0.75); */ line-height: normal; border-radius: 0; /* height: 2.3125rem; */ } .mainHolder select::-ms-expand { display: none; } .mainHolder select.radius { border-radius: 3px; } .mainHolder select:disabled { background-color: #DDDDDD; cursor: default; } /* Adjust margin for .mainHolder form elements below */ .mainHolder input[type="file"], .mainHolder input[type="checkbox"], .mainHolder input[type="radio"], .mainHolder select { margin: 0 0 1rem 0; } .mainHolder input[type="checkbox"] + label, .mainHolder input[type="radio"] + label { display: inline; margin-left: 0.5rem; margin-right: 1rem; margin-bottom: 0; vertical-align: baseline; } /* Normalize file .mainHolder input width */ .mainHolder input[type="file"] { width: 100%; } /* HTML5 Number spinners settings */ /* We add basic fieldset styling */ .mainHolder fieldset { border: 1px solid #DDDDDD; padding: 1.25rem; margin: 1.125rem 0; } .mainHolder fieldset legend { font-weight: bold; background: #FFFFFF; padding: 0 0.1875rem; margin: 0; margin-left: -0.1875rem; } .block { display: block; } /* END Style EPDMigration CSS */ /* ------------------------------------------ */ /* ------------------------------------------ */ /* Form Style Override */ /* ------------------------------------------ */ .form-grid input, .form-grid textarea, .mainHolder input[type="text"], .mainHolder input[type="password"], .mainHolder input[type="date"], .mainHolder input[type="datetime"], .mainHolder input[type="datetime-local"], .mainHolder input[type="month"], .mainHolder input[type="week"], .mainHolder input[type="email"], .mainHolder input[type="number"], .mainHolder input[type="search"], .mainHolder input[type="tel"], .mainHolder input[type="time"], .mainHolder input[type="url"], .mainHolder input[type="color"], .mainHolder textarea, textarea { border: 10px; background: #eaeaea; box-shadow: none; color: #000; } .form-grid input:focus, .form-grid textarea:focus, .mainHolder input[type="text"]:focus, .mainHolder input[type="password"]:focus, .mainHolder input[type="date"]:focus, .mainHolder input[type="datetime"]:focus, .mainHolder input[type="datetime-local"]:focus, .mainHolder input[type="month"]:focus, .mainHolder input[type="week"]:focus, .mainHolder input[type="email"]:focus, .mainHolder input[type="number"]:focus, .mainHolder input[type="search"]:focus, .mainHolder input[type="tel"]:focus, .mainHolder input[type="time"]:focus, .mainHolder input[type="url"]:focus, .mainHolder input[type="color"]:focus, .mainHolder textarea:focus, textarea:focus { background: #eaeaea; box-shadow: 0 0 5px #999999; } .mainHolder .submit-btn { width: auto; min-width: 160px; border-radius: 15px; padding: 10px 35px; font-size: 13px; text-align:center; } @media screen and (max-width: 480px) { .mainHolder .submit-btn { padding: 10px 20px; font-size: 12px; text-align:center; margin:10px; } } .hidden_page_part { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; width: 100%; font-weight: bold; } #content .meter { width: 100%; background: #d7d7d7; margin: 30px 0; } #content .meter > span { box-shadow: none; background: #b0e600; } #content #submiterrors { margin-top: 30px; margin-left: 0; font-weight: bold; font-size: 24px; } #content #submiterrors .description { font-size: 14px; margin-top: 10px; } #content .description { border: 0; width: 100%; padding: 0; } #quiz_navigation { text-align: left; } #quiz_navigation #next, #quiz_navigation #submit, #quiz_navigation #finish { font-weight: bold; box-shadow: none; border: 0; margin-left: 0; } #startquiz, #endquiz { font-weight: bold; box-shadow: none; border: 0; margin-left: 0; } .field-no-padding{ padding-right:0; } .field-label { font-weight: bold; } .field-label span { font-weight: normal; } .airStation .form-grid__row { margin-bottom: 30px; } .form-grid { margin-bottom: 30px; padding: 0 6px; margin-top: 30px; } .form-grid__row { display: block; margin-left: -15px; margin-right: -15px; font-size: 0; /* margin-bottom: 30px; */ } .form-grid__row:last-child { margin-bottom: 0; } @media screen and (max-width: 767px) { .form-grid__row { /* margin-bottom: 15px; */ } } .form-grid__col { display: inline-block; vertical-align: top; width: 50%; padding: 0 15px; } .form-grid__col_fullwidth { display: inline-block; vertical-align: top; width: 100%; padding: 0 15px; } @media screen and (max-width: 767px) { .field-no-padding{ padding-right:0 !important; } .form-grid__col { width: 100%; } .form-grid__col:last-child { margin-bottom: 0; } } .form-grid__col.form-grid__col--full { width: 100%; } .form-grid__holder { display: table; width: 100%; } @media screen and (max-width: 480px) { .field-no-padding{ padding-right:0 !important; } .form-grid__holder { display: block; } .form-grid__right_col_holder{ margin-top:0; } } .form-grid__holder + .form-grid__holder { margin-top: 5px; } .form-grid__holder .field-label, .form-grid__holder .form-grid__input { display: table-cell; vertical-align: top; font-size: 21px; } @media screen and (max-width: 1480px) { .form-grid__holder .field-label, .form-grid__holder .form-grid__input { font-size: 18px; } } @media screen and (max-width: 991px) { .form-grid__holder .field-label, .form-grid__holder .form-grid__input { font-size: 16px; } } @media screen and (max-width: 480px) { .form-grid__holder .field-label, .form-grid__holder .form-grid__input { display: block; } } .form-grid__holder .field-label { padding-top: 10px; padding-right: 30px; width: 230px; } .form-grid__holder .field-label div { font-weight: normal; } .form-grid__holder .field-label.field-label--long { width: 170px; padding-right: 15px; } @media screen and (max-width: 480px) { .form-grid__holder .field-label.field-label--long { width: 100%; padding-right: 0; } } @media screen and (max-width: 480px) { .form-grid__holder .field-label { width: 100%; padding-right: 0; } } @media screen and (max-width: 480px) { .form-grid__holder .form-grid__input { width: 100%; } } .form-grid__holder .form-grid__input input { margin-bottom: 0; } .form-grid__holder .form-grid__input > div { margin-top: 5px; } /* Style Override for theme pages */ /* ------------------------------------------ */ .general-index .sec-article__link-btn span { color: #000; } #options li a:focus { color: #d43900; } /* END Style Override for theme pages */ /* ------------------------------------------ */ /* Style commonly used */ /* ------------------------------------------ */ body, body * { max-height: 1000000px; } html { font-size: 16px; } @media screen and (max-width: 1400px) { html { font-size: 15px; } } @media screen and (max-width: 1200px) { html { font-size: 14px; } } @media screen and (max-width: 480px) { html { font-size: 13px; } } body { font-size: 15px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; margin: 0 !important; padding: 0; background: #FFF; color: #000; height: 100%; width: 100%; position: relative; min-width: 300px; } body:lang(zh-hk) { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; } body ol{ font-family: sans-serif; } body:lang(zh-hk) ol { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; } body:lang(zh-cn) { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; } body:lang(zh-cn) ol { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; } body.dt-only { min-width: 992px; } body.scroll-locked { overflow: hidden; } @media screen and (max-width: 991px) { body.mob-menu-open { overflow: hidden; } } @media screen and (max-width: 991px) { body { overflow-x: auto; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .access { position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden; } a { color: #d43900;; text-decoration: none; } .btn a:hover, a:active { color: #fff; opacity: 1; text-decoration: none; } .theme--information-security a:hover, a:active { color: #000; opacity: 1;/*CyberSecurityThemeColorUpdate*/ text-decoration: none; } a:focus { text-decoration: none; } img { image-rendering: -webkit-optimize-contrast; } br { display: block; opacity: 0; font-family: "Arial", sans-serif !important; font-size: 0; color: transparent; line-height: 1em; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-weight: bold; margin-top: 0; } ul { list-style-type: none; } ul li { margin-top: 10px; margin-bottom: 10px; } hr { border: solid #DDDDDD; border-width: 1px 0 0; clear: both; margin: 2.25rem 0 2.1875rem; height: 0; } .title-xl { font-weight: bold; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-size: 62px; line-height: 1em; } @media screen and (max-width: 1580px) { .title-xl { font-size: 56px; } } @media screen and (max-width: 991px) { .title-xl { font-size: 48px; } } @media screen and (max-width: 640px) { .title-xl { font-size: 36px; } } .title-lv1, .main-banner__title { font-weight: bold; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-size: 62px; } @media screen and (max-width: 1200px) { .title-lv1, .main-banner__title { font-size: 56px; } } @media screen and (max-width: 991px) { .title-lv1, .main-banner__title { font-size: 48px; } } @media screen and (max-width: 767px) { .title-lv1, .main-banner__title { font-size: 28px; } } @media screen and (max-width: 350px) { .title-lv1, .main-banner__title { font-size: 24px; } } .title-lv2, .event-calendar__title, .news-centre__title, .our-mission__title, .our-work__title { font-size: 64px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-weight: bold; } @media screen and (max-width: 1580px) { .title-lv2, .event-calendar__title, .news-centre__title, .our-mission__title, .our-work__title { font-size: 54px; } } @media screen and (max-width: 991px) { .title-lv2, .event-calendar__title, .news-centre__title, .our-mission__title, .our-work__title { font-size: 40px; } } @media screen and (max-width: 640px) { .title-lv2, .event-calendar__title, .news-centre__title, .our-mission__title, .our-work__title { font-size: 32px; } } .title-lv3, .general-index__title, .info-list__title, .static-banner__title { font-size: 35px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-weight: bold; } @media screen and (max-width: 1580px) { .title-lv3, .general-index__title, .info-list__title, .static-banner__title { font-size: 32px; } } @media screen and (max-width: 991px) { .title-lv3, .general-index__title, .info-list__title, .static-banner__title { font-size: 28px; } } @media screen and (max-width: 640px) { .title-lv3, .general-index__title, .info-list__title, .static-banner__title { font-size: 24px; } } .title-lv4, .accordion__title, .image-slider__title { font-size: 30px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-weight: bold; } @media screen and (max-width: 1580px) { .title-lv4, .accordion__title, .image-slider__title { font-size: 24px; } } @media screen and (max-width: 991px) { .title-lv4, .accordion__title, .image-slider__title { font-size: 20px; } } @media screen and (max-width: 640px) { .title-lv4, .accordion__title, .image-slider__title { font-size: 20px; } } .title-lv5, .article-control__title, .mini-title, .related-link__item { font-size: 20px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-weight: bold; } @media screen and (max-width: 1580px) { .title-lv5, .article-control__title, .mini-title, .related-link__item { font-size: 18px; } } @media screen and (max-width: 991px) { .title-lv5, .article-control__title, .mini-title, .related-link__item { font-size: 16px; } } @media screen and (max-width: 640px) { .title-lv5, .article-control__title, .mini-title, .related-link__item { font-size: 16px; } } .common-desc { font-size: 15px; } @media screen and (max-width: 1600px) { .common-desc { font-size: 15px; } } @media screen and (max-width: 991px) { .common-desc { font-size: 14px; } } @media screen and (max-width: 640px) { .common-desc { font-size: 13px; } } .content-paragraph { margin: 0 auto 15px; line-height: 1.5em; } .content-paragraph:last-child { margin-bottom: 0; } p { font-size: 16px; margin-top: 0; margin-bottom: 20px; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 30px; margin-top: 0; margin-bottom: 20px; } ul:last-child, ol:last-child { margin-bottom: 0; } ul:last-child, ol:last-child { margin-bottom: 0; } img { /* max-width: 100%; */ /*height: auto; */ } .editContent ol li, .editContent ul li, .editContent table tr th, .editContent table tr td, .editContent a, .editContent p, .editcontent ol li, .editcontent ul li, .editcontent table tr th, .editcontent table tr td, .editcontent a, .editcontent p { font-size: 21px; line-height: 1.5em; } @media screen and (max-width: 1480px) { .editContent ol li, .editContent ul li, .editContent table tr th, .editContent table tr td, .editContent a, .editContent p, .editcontent ol li, .editcontent ul li, .editcontent table tr th, .editcontent table tr td, .editcontent a, .editcontent p { font-size: 18px; } } @media screen and (max-width: 991px) { .editContent ol li, .editContent ul li, .editContent table tr th, .editContent table tr td, .editContent a, .editContent p, .editcontent ol li, .editcontent ul li, .editcontent table tr th, .editcontent table tr td, .editcontent a, .editcontent p { font-size: 18px; } } .accordion__content th, .basic-article__item th { padding-bottom: 15px; } .accordion__content th, .accordion__content td, .basic-article__item th, .basic-article__item td { vertical-align: top; padding-right: 10px; text-align: left; } @media screen and (max-width: 767px) { .accordion__content th, .accordion__content td, .basic-article__item th, .basic-article__item td { font-size: 12px; } } .editContent table tr td { padding: 16px; } main { background: #FFF; position: relative; width: 100%; box-sizing: border-box; z-index: 10; } .page-home main { overflow: hidden; } .main-holder { padding-top: 110px; overflow: hidden; } .dt-only .main-holder { min-width: 992px; } .main-holder.main-holder--overflow { overflow: visible; } @media screen and (max-width: 1023px) { .main-holder { padding-top: 75px; } } @media screen and (max-width: 640px) { .main-holder { padding-top: 60px; } } .clearfix { content: ''; display: table; width: 100%; height: 0; clear: both; } .wordbreak-all { word-break: break-all; } .nowrap { white-space: nowrap; display: inline-block; } .common-wrapper, .content-wrapper, .mainHolder, .main-banner__content-holder, .block-homesquare-main-menu-menu, .static-banner__content, .main-banner__slider-control { width: 94%; } @media screen and (max-width: 640px) { .common-wrapper, .content-wrapper, .mainHolder, .main-banner__content-holder, .block-homesquare-main-menu-menu, .static-banner__content, .main-banner__slider-control { width: 94%; } } .content-wrapper, .mainHolder, .main-banner__content-holder, .block-homesquare-main-menu-menu, .static-banner__content { margin: 0 auto; display: block; max-width: 1200px; position: relative; } .content-link:hover, .more-link:hover { opacity: 1; color: #d43900; text-decoration: underline; } .more-link { font-size: 20px; } @media screen and (max-width: 640px) { .more-link { font-size: 16px; } } .single-word { display: inline-block; white-space: nowrap; } .force-break { word-break: break-all; } .basic-section, .section-accordion, .basic-intro, .event-calendar, .event-search__result, .info-list > .content-wrapper, .info-list > .mainHolder, .info-list > .main-banner__content-holder, .info-list > .block-homesquare-main-menu-menu, .info-list > .static-banner__content, .news-centre, .our-work { position: relative; padding: 100px 0; } @media screen and (max-width: 1580px) { .basic-section, .section-accordion, .basic-intro, .event-calendar, .event-search__result, .info-list > .content-wrapper, .info-list > .mainHolder, .info-list > .main-banner__content-holder, .info-list > .block-homesquare-main-menu-menu, .info-list > .static-banner__content, .news-centre, .our-work { padding: 80px 0; } } @media screen and (max-width: 991px) { .basic-section, .section-accordion, .basic-intro, .event-calendar, .event-search__result, .info-list > .content-wrapper, .info-list > .mainHolder, .info-list > .main-banner__content-holder, .info-list > .block-homesquare-main-menu-menu, .info-list > .static-banner__content, .news-centre, .our-work { padding: 60px 0; } } @media screen and (max-width: 767px) { .basic-section, .section-accordion, .basic-intro, .event-calendar, .event-search__result, .info-list > .content-wrapper, .info-list > .mainHolder, .info-list > .main-banner__content-holder, .info-list > .block-homesquare-main-menu-menu, .info-list > .static-banner__content, .news-centre, .our-work { padding: 40px 0; } } .short-section { position: relative; padding: 30px 0; } @media screen and (max-width: 991px) { .short-section { padding: 30px 0; } } @media screen and (max-width: 767px) { .short-section { padding: 30px 0; } } .display--inline-block { display: inline-block; } .display--block { display: inline-block; } .display--inline { display: inline; } .align--hc { text-align: center; } .align--hl { text-align: left; } .align--hr { text-align: right; } .align--vt { vertical-align: top; } .align--vb { vertical-align: bottom; } .align--vm { vertical-align: middle; } .align--hvc { text-align: center; vertical-align: middle; } /** shorthand for show/hide at certain screen**/ @media screen and (max-width: 991px) { .visible-dt { display: none !important; } } @media screen and (min-width: 992px), screen and (max-width: 767px) { .visible-tb { display: none !important; } } @media screen and (min-width: 768px) { .visible-mb { display: none !important; } } @media screen and (min-width: 992px) { .hidden-dt { display: none !important; } } @media screen and (max-width: 991px) and (min-width: 768px) { .hidden-tb { display: none !important; } } @media screen and (max-width: 767px) { .hidden-mb { display: none !important; } } .hidden-all { display: none !important; } .cover-bg.js-handle { width: auto; height: auto; } .no-break { white-space: nowrap; } [data-txt-color="black"] { color: #000; } [data-txt-color="white"] { color: #FFF; } .grid-1-1 { width: 100%; } .grid-1-2 { width: 50%; } .grid-2-2 { width: 100%; } .grid-1-3 { width: 33.3333333333%; } .grid-2-3 { width: 66.6666666667%; } .grid-3-3 { width: 100%; } .grid-1-4 { width: 25%; } .grid-2-4 { width: 50%; } .grid-3-4 { width: 75%; } .grid-4-4 { width: 100%; } .grid-1-5 { width: 20%; } .grid-2-5 { width: 40%; } .grid-3-5 { width: 60%; } .grid-4-5 { width: 80%; } .grid-5-5 { width: 100%; } .grid-1-6 { width: 16.6666666667%; } .grid-2-6 { width: 33.3333333333%; } .grid-3-6 { width: 50%; } .grid-4-6 { width: 66.6666666667%; } .grid-5-6 { width: 83.3333333333%; } .grid-6-6 { width: 100%; } @media screen and (max-width: 1600px) { .grid-md-1-1 { width: 100%; } .grid-md-1-2 { width: 50%; } .grid-md-2-2 { width: 100%; } .grid-md-1-3 { width: 33.3333333333%; } .grid-md-2-3 { width: 66.6666666667%; } .grid-md-3-3 { width: 100%; } .grid-md-1-4 { width: 25%; } .grid-md-2-4 { width: 50%; } .grid-md-3-4 { width: 75%; } .grid-md-4-4 { width: 100%; } .grid-md-1-5 { width: 20%; } .grid-md-2-5 { width: 40%; } .grid-md-3-5 { width: 60%; } .grid-md-4-5 { width: 80%; } .grid-md-5-5 { width: 100%; } .grid-md-1-6 { width: 16.6666666667%; } .grid-md-2-6 { width: 33.3333333333%; } .grid-md-3-6 { width: 50%; } .grid-md-4-6 { width: 66.6666666667%; } .grid-md-5-6 { width: 83.3333333333%; } .grid-md-6-6 { width: 100%; } } @media screen and (max-width: 991px) { .grid-tb-1-1 { width: 100%; } .grid-tb-1-2 { width: 50%; } .grid-tb-2-2 { width: 100%; } .grid-tb-1-3 { width: 33.3333333333%; } .grid-tb-2-3 { width: 66.6666666667%; } .grid-tb-3-3 { width: 100%; } .grid-tb-1-4 { width: 25%; } .grid-tb-2-4 { width: 50%; } .grid-tb-3-4 { width: 75%; } .grid-tb-4-4 { width: 100%; } .grid-tb-1-5 { width: 20%; } .grid-tb-2-5 { width: 40%; } .grid-tb-3-5 { width: 60%; } .grid-tb-4-5 { width: 80%; } .grid-tb-5-5 { width: 100%; } .grid-tb-1-6 { width: 16.6666666667%; } .grid-tb-2-6 { width: 33.3333333333%; } .grid-tb-3-6 { width: 50%; } .grid-tb-4-6 { width: 66.6666666667%; } .grid-tb-5-6 { width: 83.3333333333%; } .grid-tb-6-6 { width: 100%; } } @media screen and (max-width: 767px) { .grid-mb-1-1 { width: 100%; } .grid-mb-1-2 { width: 50%; } .grid-mb-2-2 { width: 100%; } .grid-mb-1-3 { width: 33.3333333333%; } .grid-mb-2-3 { width: 66.6666666667%; } .grid-mb-3-3 { width: 100%; } .grid-mb-1-4 { width: 25%; } .grid-mb-2-4 { width: 50%; } .grid-mb-3-4 { width: 75%; } .grid-mb-4-4 { width: 100%; } .grid-mb-1-5 { width: 20%; } .grid-mb-2-5 { width: 40%; } .grid-mb-3-5 { width: 60%; } .grid-mb-4-5 { width: 80%; } .grid-mb-5-5 { width: 100%; } .grid-mb-1-6 { width: 16.6666666667%; } .grid-mb-2-6 { width: 33.3333333333%; } .grid-mb-3-6 { width: 50%; } .grid-mb-4-6 { width: 66.6666666667%; } .grid-mb-5-6 { width: 83.3333333333%; } .grid-mb-6-6 { width: 100%; } } @media screen and (max-width: 480px) { .grid-sm-1-1 { width: 100%; } .grid-sm-1-2 { width: 50%; } .grid-sm-2-2 { width: 100%; } .grid-sm-1-3 { width: 33.3333333333%; } .grid-sm-2-3 { width: 66.6666666667%; } .grid-sm-3-3 { width: 100%; } .grid-sm-1-4 { width: 25%; } .grid-sm-2-4 { width: 50%; } .grid-sm-3-4 { width: 75%; } .grid-sm-4-4 { width: 100%; } .grid-sm-1-5 { width: 20%; } .grid-sm-2-5 { width: 40%; } .grid-sm-3-5 { width: 60%; } .grid-sm-4-5 { width: 80%; } .grid-sm-5-5 { width: 100%; } .grid-sm-1-6 { width: 16.6666666667%; } .grid-sm-2-6 { width: 33.3333333333%; } .grid-sm-3-6 { width: 50%; } .grid-sm-4-6 { width: 66.6666666667%; } .grid-sm-5-6 { width: 83.3333333333%; } .grid-sm-6-6 { width: 100%; } } @media screen and (max-width: 380px) { .grid-xs-1-1 { width: 100%; } .grid-xs-1-2 { width: 50%; } .grid-xs-2-2 { width: 100%; } .grid-xs-1-3 { width: 33.3333333333%; } .grid-xs-2-3 { width: 66.6666666667%; } .grid-xs-3-3 { width: 100%; } .grid-xs-1-4 { width: 25%; } .grid-xs-2-4 { width: 50%; } .grid-xs-3-4 { width: 75%; } .grid-xs-4-4 { width: 100%; } .grid-xs-1-5 { width: 20%; } .grid-xs-2-5 { width: 40%; } .grid-xs-3-5 { width: 60%; } .grid-xs-4-5 { width: 80%; } .grid-xs-5-5 { width: 100%; } .grid-xs-1-6 { width: 16.6666666667%; } .grid-xs-2-6 { width: 33.3333333333%; } .grid-xs-3-6 { width: 50%; } .grid-xs-4-6 { width: 66.6666666667%; } .grid-xs-5-6 { width: 83.3333333333%; } .grid-xs-6-6 { width: 100%; } } /* END Style commonly used */ /* ------------------------------------------ */ /* Style for header */ /* ------------------------------------------ */ header { height: 100px; background: transparent; position: fixed; width: 100%; top: 0; z-index: 10000; color: #FFF; box-sizing: content-box; transition: height 0.3s; } .header--small header { color: #000; } .mob-menu-open header { padding-top: 0 !important; } .mob-menu-open header:before { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 70px; z-index: 0; z-index: 100; background: #FFF; } @media screen and (max-width: 991px) { .mob-menu-open header:before { content: ''; } } @media screen and (max-width: 767px) { .mob-menu-open header:before { height: 60px; } } .trident header { transition: none; } header a { color: #FFF; } .header--small header a { color: #000; } .header--small header { height: 75px; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 3px 4px rgba(150, 150, 150, 0.2); } header > .content-wrapper, header > .mainHolder, header > .main-banner__content-holder, header > .block-homesquare-main-menu-menu, header > .static-banner__content { position: relative; height: 100%; z-index: 10; text-align: right; } @media screen and (max-width: 991px) { header > .content-wrapper, header > .mainHolder, header > .main-banner__content-holder, header > .block-homesquare-main-menu-menu, header > .static-banner__content { z-index: 10000; pointer-events: none; } header > .content-wrapper .header-logo, header > .mainHolder .header-logo, header > .main-banner__content-holder .header-logo, header > .block-homesquare-main-menu-menu .header-logo, header > .static-banner__content .header-logo { pointer-events: all; } } @media screen and (max-width: 991px) { header { height: 70px; } .header--small header { height: 70px; background: rgba(255, 255, 255, 0.95); } } @media screen and (max-width: 767px) { header { height: 60px; } .header--small header { height: 70px; height: 60px; background: rgba(255, 255, 255, 0.95); } } /* END Style header */ /* ------------------------------------------ */ /* Style for footer */ /* ------------------------------------------ */ footer, .footer__top, .footer__bottom { font-size: 0; color: #FFF; } @media screen and (max-width: 991px) { footer, .footer__top, .footer__bottom { text-align: center; } } footer a:hover, .footer__top a:hover, .footer__bottom a:hover { color: #d43900; opacity: 1; } .footer__backtotop { position: absolute; display: block; width: 48px; height: 48px; right: 3%; top: 30px; background: url(../images/common/icons/icon-cir-arrow.png) no-repeat center center; background-size: cover; z-index: 10; } .footer__backtotop:hover { background-image: url(../images/common/icons/icon-cir-arrow-yellow.png); } @media screen and (max-width: 767px) { .footer__backtotop { width: 36px; height: 36px; top: 15px; right: 5%; } } .footer__top { position:relative; background: #4b620d; width: 100%; padding: 80px 0; } @media screen and (max-width: 991px) { .footer__top { padding: 60px 0; } } .footer__top > .content-wrapper, .footer__top > .mainHolder, .footer__top > .main-banner__content-holder, .footer__top > .block-homesquare-main-menu-menu, .footer__top > .static-banner__content { display: table; } .footer__panel, .footer__quicklinks, .footer__sitemap { display: table-cell; vertical-align: top; } @media screen and (max-width: 991px) { .footer__quicklinks, .footer__sitemap { display: none; } } .footer__panel { width: 360px; padding-right: 60px; } @media screen and (max-width: 991px) { .footer__panel { display: block; width: 100%; padding-right: 0; margin: 0 auto; } } .footer__panel-title { font-size: 24px; font-weight: bold; margin: 0 0 10px; } @media screen and (max-width: 991px) { .footer__panel-title { font-size: 18px; } } @media screen and (max-width: 767px) { .footer__panel-title { font-size: 16px; } } .footer__panel-tag { font-size: 32px; font-weight: bold; margin: 0 0 15px; color: #FFCB3D; } @media screen and (max-width: 991px) { .footer__panel-tag { font-size: 24px; } } @media screen and (max-width: 767px) { .footer__panel-tag { font-size: 18px; } } .footer__panel-desc { font-size: 14px; line-height: 1.5em; margin: 0 0 15px; } @media screen and (max-width: 767px) { .footer__panel-desc { font-size: 12px; } } .footer__panel-btn { margin: 0 0 15px; } .footer__panel hr { border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.25); margin: 15px 0; } .footer__contact-holder { display: block; margin-bottom: 15px; } .footer__contact { display: block; margin-bottom: 15px; } .footer__contact:hover span { color: #d43900; } .footer__contact img { display: inline-block; vertical-align: top; width: 32px; margin-right: 10px; } .footer__contact span { display: inline-block; vertical-align: top; font-size: 20px; font-weight: bold; color: #FFF; } @media screen and (max-width: 767px) { .footer__contact span { font-size: 16px; white-space: nowrap; } } .footer__contact.footer__contact--email span { font-size: 16px; } @media screen and (max-width: 767px) { .footer__contact.footer__contact--email span { font-size: 14px; } } .footer__sitemap-col { display: inline-block; vertical-align: top; width: 25%; font-size: 13px; padding-right: 12px; } .footer__sitemap-col:last-child { padding-right: 0; } .footer__sitemap-title { font-size: 20px; color: #ffcb3d; display: block; font-weight: bold; margin-bottom: 15px; } .footer__sitemap-link { display: block; margin-bottom: 10px; color: #FFF; } .footer__bottom { background: #364f03; padding: 60px 0; } @media screen and (max-width: 991px) { .footer__bottom { padding: 45px 0; } } .footer__logos { width: 100%; text-align: center; margin-bottom: 20px; } .footer__logo { display: inline-block; vertical-align: middle; margin: 0 10px; } .footer__bottom-links { display: block; position: relative; margin-bottom: 20px; font-size: 0px; text-align: center; } .footer__bottom-link { display: inline-block; vertical-align: middle; color: #FFF; font-size: 12px; } .footer__bottom-sp { margin: 0 10px; display: inline-block; vertical-align: middle; font-size: 12px; } .footer__copyright { position: relative; width: 100%; text-align: center; font-size: 0px; white-space: normal; } @media screen and (max-width: 640px) { .footer__copyright .footer__bottom-sp { display: none; } } .footer__copyright span { display: inline-block; vertical-align: middle; font-size: 12px; line-height: 1.5em; } @media screen and (max-width: 640px) { .footer__copyright span { display: block; margin: 0 0 15px; } .footer__copyright span:last-child { margin-bottom: 0; } } /* END Style footer */ /* ------------------------------------------ */ /* Style for accordion */ /* ------------------------------------------ */ .section-accordion { position: relative; } .section-accordion:before { content: ''; width: 1px; height: 100px; background: #000; display: block; position: absolute; bottom: 100%; left: 50%; z-index: 10; opacity: 0; margin-bottom: -50px; } @media screen and (max-width: 767px) { .section-accordion:before { height: 60px; margin-bottom: -30px; } } .accordion__head { margin: 0; padding: 0 0 35px; border-bottom: 1px solid #000; } .accordion__head h2, .accordion__head h3, .accordion__head h4, .accordion__head h5, .accordion__head h6 { margin: 0; } .accordion__title { display: inline-block; margin: 0; } .accordion__label { font-size: 16px; display: inline-block; margin-left: 15px; } @media screen and (max-width: 767px) { .accordion__label { display: block; margin-left: 0; font-size: 14px; } } .accordion__item { border-bottom: 1px solid #000; padding: 35px 0; font-size: 16px; } .accordion__item p { font-size: 21px; } @media screen and (max-width: 1480px) { .accordion__item p { font-size: 18px; } } @media screen and (max-width: 991px) { .accordion__item { padding: 30px 0; } .accordion__item p { font-size: 16px; } } @media screen and (max-width: 767px) { .accordion__item { padding: 15px 0; font-size: 14px; } .accordion__item p { font-size: 14px; } } .accordion__item .accordion__toggle { position: relative; display: block; padding-right: 30px; font-weight: bold; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-size: 36px; transition: 0.3s; } @media screen and (max-width: 991px) { .accordion__item .accordion__toggle { font-size: 32px; } } @media screen and (max-width: 767px) { .accordion__item .accordion__toggle { font-size: 24px; } } .accordion__item .accordion__toggle:hover { color: #d43900; opacity: 1; } .accordion__item .accordion__toggle:hover:after { background-image: url(../images/common/icons/icon-accordion-arrow-orange.png); } .accordion__item .accordion__toggle:after { content: ''; display: block; width: 24px; height: 24px; background: url(../images/common/icons/icon-accordion-arrow.png) no-repeat center center; background-size: 100%; position: absolute; right: 30px; top: 50%; transition: 0.3s; -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } @media screen and (max-width: 767px) { .accordion__item .accordion__toggle:after { right: 10px; width: 18px; height: 18px; } } .accordion__item .accordion__content { display: none; padding-top: 35px; } @media screen and (max-width: 991px) { .accordion__item .accordion__content { padding-top: 30px; } } @media screen and (max-width: 767px) { .accordion__item .accordion__content { padding-top: 15px; } } .accordion__item .accordion__content >:last-child { margin-bottom: 0; padding-bottom: 0; } @media screen and (max-width: 991px) { .accordion__item .accordion__content p { font-size: 14px; } } .accordion__item.is-active .accordion__toggle:after { -webkit-transform: translateY(-50%) rotate(0); -ms-transform: translateY(-50%) rotate(0); transform: translateY(-50%) rotate(0); } .accordion__item.is-active .accordion__content { display: block; } /* END Style accordion */ /* ------------------------------------------ */ /* Style for article-control */ /* ------------------------------------------ */ .article-control { position: relative; width: 100%; overflow: hidden; } @media screen and (max-width: 767px) { .article-control { background: rgba(0, 0, 0, 0.2); } } .article-control__row { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; width: 100%; } @media screen and (max-width: 767px) { .article-control__row { display: block; width: 100%; } } .article-control__col { display: inline-block; vertical-align: middle; position: relative; width: 50%; } .article-control__col.is-disable { pointer-events: none; opacity: 0.3; } @media screen and (max-width: 767px) { .article-control__col.is-disable { display: none; } } @media screen and (max-width: 767px) { .article-control__col { display: block; width: 100%; } } .article-control__col .article-control__prev, .article-control__col .article-control__next { position: relative; z-index: 5; display: block; padding: 30px 0; } .article-control__col .article-control__prev:hover, .article-control__col .article-control__next:hover { opacity: 1; background: #FFF; color: #000; /* .article-control__text{ color:$colorDkOrange; .theme--information-security &{ color:#FFF; } } .article-control__icon{ background-image:url(../images/common/icons/icon-article-control-arrow-orange.png); .theme--information-security &{ background-image:url(../images/common/icons/icon-article-control-arrow-white.png); } } */ } .article-control__col:first-child { text-align: left; border-right: 1px solid rgba(0, 0, 0, 0.2); } @media screen and (max-width: 767px) { .article-control__col:first-child { border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0); } } .article-control__col:first-child:before { content: ''; position: absolute; background: #ffc62e; right: 0; top: 0; height: 100%; width: 10000px; } .theme--strategies .article-control__col:first-child:before { background: #c187ff; } .theme--legal .article-control__col:first-child:before { background: #71cdff; } .theme--community .article-control__col:first-child:before { background: #b0e600; } .theme--business .article-control__col:first-child:before { background: #00ffae; } .theme--infrastructure .article-control__col:first-child:before { background: #f7c624; } .theme--information-security .article-control__col:first-child:before { /*color: #f27486;*/ background: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } @media screen and (max-width: 767px) { .article-control__col:first-child:before { right: -2500px; } } .article-control__col:last-child { text-align: right; } .article-control__col:last-child:before { content: ''; position: absolute; background: #ffc62e; left: 0; top: 0; height: 100%; width: 10000px; } .theme--strategies .article-control__col:last-child:before { background: #c187ff; } .theme--legal .article-control__col:last-child:before { background: #71cdff; } .theme--community .article-control__col:last-child:before { background: #b0e600; } .theme--business .article-control__col:last-child:before { background: #00ffae; } .theme--infrastructure .article-control__col:last-child:before { background: #f7c624; } .theme--information-security .article-control__col:last-child:before { /*color: #f27486;*/ background: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } @media screen and (max-width: 767px) { .article-control__col:last-child:before { left: -2500px; } } .article-control__col:hover:first-child:before, .article-control__col:hover:last-child:before { background: #FFF; } .article-control__icon { display: inline-block; vertical-align: middle; width: 48px; height: 48px; background: url(../images/common/icons/icon-article-control-arrow.png) no-repeat center center; background-size: cover; } .article-control__prev .article-control__icon { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .article-control__icon:first-child { margin-right: 15px; } .article-control__icon:last-child { margin-left: 15px; } .article-control__text { display: inline-block; vertical-align: middle; max-width: calc(100% - 90px); } .article-control__label { font-size: 15px; margin: 0 0 5px; font-weight: bold; } .article-control__title { display: block; line-height: 1.2em; margin: 0; } /* END Style article-control */ /* ------------------------------------------ */ /* Style for basic-intro */ /* ------------------------------------------ */ /* .basic-intro p { font-size: 20px; font-weight: 200; text-align: center; display: block; width: 100%; max-width: 680px; margin: 0 auto 30px; } .basic-intro p:last-child { margin-bottom: 0; } */ /* END Style basic-intro */ /* ------------------------------------------ */ /* Style for basic-holder */ /* ------------------------------------------ */ .basic-holder, .event-calendar__search, .event-search__search-bar { position: relative; width: 100%; padding: 45px 0; } @media screen and (max-width: 991px) { .basic-holder, .event-calendar__search, .event-search__search-bar { padding: 30px 0; } } .basic-holder + .basic-holder, .event-calendar__search + .basic-holder, .event-search__search-bar + .basic-holder, .basic-holder + .event-calendar__search, .event-calendar__search + .event-calendar__search, .event-search__search-bar + .event-calendar__search, .basic-holder + .event-search__search-bar, .event-calendar__search + .event-search__search-bar, .event-search__search-bar + .event-search__search-bar { padding-top: 0; } .mainHolder .basic-holder .content-wrapper, .mainHolder .event-calendar__search .content-wrapper, .mainHolder .event-search__search-bar .content-wrapper, .mainHolder .basic-holder .mainHolder, .mainHolder .event-calendar__search .mainHolder, .mainHolder .event-search__search-bar .mainHolder, .mainHolder .basic-holder .main-banner__content-holder, .mainHolder .event-calendar__search .main-banner__content-holder, .mainHolder .event-search__search-bar .main-banner__content-holder, .mainHolder .basic-holder .block-homesquare-main-menu-menu, .mainHolder .event-calendar__search .block-homesquare-main-menu-menu, .mainHolder .event-search__search-bar .block-homesquare-main-menu-menu, .mainHolder .basic-holder .static-banner__content, .mainHolder .event-calendar__search .static-banner__content, .mainHolder .event-search__search-bar .static-banner__content { width: 100%; } /* END Style basic-holder */ /* ------------------------------------------ */ /* Style for basic-link */ /* ------------------------------------------ */ .basic-link:hover { opacity: 1; text-decoration: underline; } /* END Style basic-link */ /* ------------------------------------------ */ /* ------------------------------------------ */ /* Style for breaking-news */ /* ------------------------------------------ */ .breaking-news { position: absolute; left: 0; top: 0; width: 100%; background: #e9e9e9; color: #353535; padding: 10px 0; display: none; opacity: 0; } .breaking-news.is-ready { opacity: 1; } .breaking-news.is-active { display: block; } @media screen and (max-width: 480px) { .breaking-news { padding: 8px 0; } } .breaking-news p { color: #353535; font-size: 16px; font-weight: bold; margin: 0; } .breaking-news p a { color: #353535; } @media screen and (max-width: 991px) { .breaking-news p { font-size: 14px; } } @media screen and (max-width: 767px) { .breaking-news p { font-size: 13px; line-height: 1.3em; } } @media screen and (max-width: 480px) { .breaking-news p { font-size: 12px; line-height: 1.3em; } } .breaking-news > .content-wrapper, .breaking-news > .mainHolder, .breaking-news > .main-banner__content-holder, .breaking-news > .block-homesquare-main-menu-menu, .breaking-news > .static-banner__content { padding-right: 35px; } @media screen and (max-width: 767px) { .breaking-news > .content-wrapper, .breaking-news > .mainHolder, .breaking-news > .main-banner__content-holder, .breaking-news > .block-homesquare-main-menu-menu, .breaking-news > .static-banner__content { padding-right: 32px; } } .breaking-news:hover { background: #e9e9e9; color: #8a2202; } .breaking-news:hover p { color: #8a2202; } .breaking-news__slider { overflow: hidden; } .breaking-news__close { display: block; width: 20px; height: 20px; position: absolute; right: 0; top: 50%; margin-top: -10px; z-index: 10; cursor: pointer; } .breaking-news__close:hover { opacity: 1; } .breaking-news__close-inner { display: block; width: 20px; height: 20px; background-image: url("../images/common/icons/icon-cross-black.png"); } /* END Style breaking-news */ /* ------------------------------------------ */ /* Style for browser-update */ /* ------------------------------------------ */ .browser-update { position: absolute; left: 0; top: 0; width: 100%; background: #ffc62e; color: #000; padding: 10px 0; display: none; } .browser-update.is-active { display: block; } @media screen and (max-width: 480px) { .browser-update { padding: 8px 0; } } .browser-update p { font-size: 16px; margin: 0; } @media screen and (max-width: 991px) { .browser-update p { font-size: 14px; } } @media screen and (max-width: 767px) { .browser-update p { font-size: 13px; } } @media screen and (max-width: 480px) { .browser-update p { font-size: 12px; } } .browser-update > .content-wrapper, .browser-update > .mainHolder, .browser-update > .main-banner__content-holder, .browser-update > .block-homesquare-main-menu-menu, .browser-update > .static-banner__content { padding-right: 35px; } .browser-update__close { display: block; width: 20px; height: 20px; position: absolute; right: 0; top: 50%; margin-top: -10px; } .browser-update__close:hover { opacity: 1; } .browser-update__close-inner { display: block; width: 20px; height: 20px; background-image: url("../images/common/icons/icon-cross-black.png"); } /* END Style browser-update */ /* ------------------------------------------ */ /* Style for btn */ /* ------------------------------------------ */ .btn { display: inline-block; margin: 0; padding: 10px 35px; font-size: 13px; box-sizing: border-box; font-weight: bold; border-radius: 15px; transition: 0.4s; } @media screen and (max-width: 480px) { .btn { padding: 10px 20px; font-size: 12px; } } .btn + .btn { margin-left: 5px; } .btn > span { display: inline-block; vertical-align: middle; } .btn[type="text"], .btn[type="button"], .btn[type="password"], .btn[type="date"], .btn[type="datetime"], .btn[type="datetime-local"], .btn[type="month"], .btn[type="week"], .btn[type="email"], .btn[type="number"], .btn[type="search"], .btn[type="tel"], .btn[type="time"], .btn[type="url"], .btn[type="color"], .btn[type="submit"] { width: auto; } .theme--news .btn { background: #f7c624; } .btn.btn--disabled { color: #ccc; } .btn.btn--loading { color: transparent !important; border: transparent !important; background: url(../images/common/icons/icon-loading.gif) no-repeat center center !important; background-color: transparent !important; cursor: default !important; pointer-events: none !important; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } .btn.btn--arrow-right:after { content: ''; display: inline-block; vertical-align: middle; width: 24px; height: 24px; background: url(../images/common/icons/icon-arrow-white.png) no-repeat center center; background-size: 100%; margin-left: 10px; } .btn.btn--arrow-right > span { padding-left: 10px; } .btn.btn--search { padding: 10px 25px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-size: 13px; } @media screen and (max-width: 480px) { .btn.btn--search { padding: 10px 20px; font-size: 12px; } } .btn.btn--search:focus, .btn.btn--search:hover { opacity: 1; background: #bbc564; } .btn.btn--search:before { content: ''; display: inline-block; vertical-align: middle; width: 12px; height: 12px; margin-top: -2px; margin-right: 5px; } .btn.btn--download:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url(../images/common/icons/icon-download.png) no-repeat center center; background-size: 100%; margin-right: 5px; } .btn.btn--pdf:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url(../images/common/icons/icon-pdf.png) no-repeat center center; background-size: 100%; margin-right: 5px; } .btn.btn--backtotop { font-size: 14px; padding-left: 25px; } @media screen and (max-width: 640px) { .btn.btn--backtotop { font-size: 14px; padding-left: 15px; } } .btn.btn--backtotop:before { content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; background: url(../images/common/icons/icon-totop.png) no-repeat center center; background-size: 100%; margin-right: 5px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media screen and (max-width: 640px) { .btn.btn--backtotop:before { width: 15px; height: 15px; } } .btn.btn--orange { color: #000; background: #ffc62e; } .btn.btn--orange.btn--ghost { border-color: #FFF; } .btn.btn--white { background: #FFF; color: #000; } .btn.btn--grey { background: rgba(114, 123, 117, 0.34); color: #000; margin: 10px; } .btn.btn--white:focus, .btn.btn--white:hover { background-color: #000; color: #FFF; opacity: 1; } .btn.btn--white-border { background: #FFF; color: #000; border: 1px solid #e5e5e5; } .btn.btn--green { color: #000; background: #00ffae; } .btn.btn--green.btn--ghost { border-color: #FFF; } .btn.btn--green:focus, .btn.btn--green:hover { background-color: #d43900; color: #FFF; opacity: 1; } .btn.btn--purple { color: #FFF; background: #593288; } .btn.btn--purple.btn--ghost { border-color: #FFF; } .btn.btn--purple:focus, .btn.btn--purple:hover { background-color: #000; color: #FFF; opacity: 1; } .btn.btn--white-purple { background: #FFF; color: #593288; } .btn.btn--white-purple.btn--ghost { border-color: #FFF; } .btn.btn--white-purple:focus, .btn.btn--white-purple:hover { background-color: #000; color: #FFF; opacity: 1; } .btn.btn--white-purple:focus.btn--arrow-right:after, .btn.btn--white-purple:hover.btn--arrow-right:after { background-image: url(../images/common/icons/icon-arrow-white.png); } .btn.btn--white-purple.btn--arrow-right:after { background-image: url(../images/common/icons/icon-arrow-purple.png); } .btn.btn--lt-green, #quiz_navigation #next, #quiz_navigation #submit, #quiz_navigation #finish, #startquiz, #endquiz { color: #000; background: #b0e600; } .btn.btn--lt-green:focus, #quiz_navigation #next:focus, #quiz_navigation #submit:focus, #quiz_navigation #finish:focus, #startquiz:focus, #endquiz:focus, .btn.btn--lt-green:hover, #quiz_navigation #next:hover, #quiz_navigation #submit:hover, #quiz_navigation #finish:hover, #startquiz:hover, #endquiz:hover { background-color: #d43900; color: #FFF; opacity: 1; } .btn.btn--yellow { background: #fff100; color: #000; } .theme--strategies .btn { background: #c187ff; } .theme--legal .btn { background: #71cdff; } .theme--community .btn { background: #b0e600; } .theme--business .btn { background: #00ffae; } .theme--infrastructure .btn { background: #f7c624; } .theme--information-security .btn { /*background: #f27486;*/ background-color: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ color:#fff; /*CyberSecurityThemeColorUpdate*/ } .btn.btn--l { font-size: 18px; padding: 15px 45px; font-weight: bold; } @media screen and (max-width: 767px) { .btn.btn--l { font-size: 16px; padding: 12px 25px; } } .btn.btn--m { font-size: 16px; padding: 12px 35px; font-weight: bold; } @media screen and (max-width: 767px) { .btn.btn--m { font-size: 16px; padding: 12px 25px; } } .btn.btn--wide { padding: 12px 45px; } .btn-row { margin: 30px auto; text-align: center; } @media screen and (max-width: 1480px) { .btn-row { margin: 25px auto; } } .btn-row:last-child { margin-bottom: 0; } .btn-row.btn-row--al-hl { text-align: left; } .btn-row.btn-row--al-hr { text-align: right; } /* END Style btn */ /* ------------------------------------------ */ /* Style for btn-menu */ /* ------------------------------------------ */ .btn-lang { vertical-align: middle; width: 25px; height: 25px; position: absolute; right: calc(60px + 3%); padding: 0; z-index: 10; bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); background: url() no-repeat center center; background-size: 100%; background-image: url(../images/common/icons/svg/white/icon-lang.svg); display: none; } @media screen and (max-width: 991px) { .btn-lang { display: block; bottom: 35px; } } @media screen and (max-width: 767px) { .btn-lang { bottom: 30px; } } @media screen and (max-width: 380px) { .btn-lang { right: calc(45px + 3%); } } @media screen and (max-width: 319px) { .btn-lang { right: calc(40px + 3%); } } .btn-lang.is-acitve { background-image: url(../images/common/icons/svg/orange/icon-lang.svg); } [data-key-txt-color="black"] .btn-lang, .mob-menu-open .btn-lang, .header--small .btn-lang { background-image: url(../images/common/icons/svg/black/icon-lang.svg); } /* END Style btn-menu */ /* ------------------------------------------ */ /* Style for btn-menu */ /* ------------------------------------------ */ .btn-menu { vertical-align: middle; width: 30px; height: 18px; position: absolute; right: 3%; padding: 0; z-index: 501; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -6px; margin-left: 15px; transition: 0.3s; display: none; } @media screen and (max-width: 991px) { .mob-menu-open .btn-menu { top: 35px; bottom: auto; } } @media screen and (max-width: 767px) { .mob-menu-open .btn-menu { top: 30px; bottom: auto; } } .mob-nav .btn-menu { border-color: #000; } .page-demo .btn-menu { display: block; } @media screen and (max-width: 991px) { .btn-menu { display: inline-block; margin-top: 0; top: 35px; } } @media screen and (max-width: 767px) { .btn-menu { top: 30px; } } .has-breaking-news .btn-menu, .has-browser-update .btn-menu { bottom: 50%; top: auto; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } @media screen and (max-width: 991px) { .has-breaking-news .btn-menu, .has-browser-update .btn-menu { bottom: 35px; top: auto; } } @media screen and (max-width: 767px) { .has-breaking-news .btn-menu, .has-browser-update .btn-menu { bottom: 30px; top: auto; } } @media screen and (max-width: 991px) { .mob-menu-open .has-breaking-news .btn-menu, .mob-menu-open .has-browser-update .btn-menu { top: 35px; bottom: auto; } } @media screen and (max-width: 767px) { .mob-menu-open .has-breaking-news .btn-menu, .mob-menu-open .has-browser-update .btn-menu { top: 30px; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } .btn-menu:hover { opacity: 1; } .btn-menu .btn-menu__line, .btn-menu:before, .btn-menu:after { content: ""; display: block; border: 0; position: absolute; width: 100%; height: 2px; left: 0; background: #FFF; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; transition: transform 0.5s; } [data-key-txt-color="black"] .btn-menu .btn-menu__line, .mob-menu-open .btn-menu .btn-menu__line, .header--small .btn-menu .btn-menu__line, [data-key-txt-color="black"] .btn-menu:before, .mob-menu-open .btn-menu:before, .header--small .btn-menu:before, [data-key-txt-color="black"] .btn-menu:after, .mob-menu-open .btn-menu:after, .header--small .btn-menu:after { background: #000; } .mob-nav .btn-menu .btn-menu__line, .mob-nav .btn-menu:before, .mob-nav .btn-menu:after { border-color: #000; } .btn-menu:before { top: 0; } .btn-menu:after { bottom: 0; } .btn-menu .btn-menu__line { top: 50%; margin-top: -1px; } .btn-menu.btn-menu--close .btn-menu__line, .btn-menu.is-active .btn-menu__line { display: none; } .btn-menu.btn-menu--close:before, .btn-menu.btn-menu--close:after, .btn-menu.is-active:before, .btn-menu.is-active:after { top: 50%; margin-top: -1px; } .btn-menu.btn-menu--close:before, .btn-menu.is-active:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .btn-menu.btn-menu--close:after, .btn-menu.is-active:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } [data-menu-open="#search-menu"] header > .btn-menu, [data-menu-open="#lang-menu"] header > .btn-menu { display: none; } .mob-nav .btn-menu { top: 30px; right: 3%; padding: 0; opacity: 1; } /* END Style btn-menu */ /* ------------------------------------------ */ /* Style for btn-menu */ /* ------------------------------------------ */ .btn-search-menu { vertical-align: middle; width: 25px; height: 25px; position: absolute; right: calc(110px + 3%); padding: 0; z-index: 10; bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); background: url() no-repeat center center; background-size: 100%; background-image: url(../images/common/icons/icon-zoom-white.png); display: none; } @media screen and (max-width: 991px) { .btn-search-menu { display: block; bottom: 35px; } } @media screen and (max-width: 767px) { .btn-search-menu { bottom: 30px; } } @media screen and (max-width: 380px) { .btn-search-menu { right: calc(90px + 3%); } } @media screen and (max-width: 319px) { .btn-search-menu { right: calc(75px + 3%); } } .btn-search-menu.is-acitve { background-image: url(../images/common/icons/icon-zoom-orange.png); } [data-key-txt-color="black"] .btn-search-menu, .mob-menu-open .btn-search-menu, .header--small .btn-search-menu { background-image: url(../images/common/icons/icon-zoom.png); } /* END Style btn-menu */ /* ------------------------------------------ */ /* Style for captcha-holder */ /* ------------------------------------------ */ .captcha-holder { position: relative; min-width: 320px; } .captcha-holder__captcha { display: inline-block; vertical-align: middle; margin-right: 15px; margin-bottom: 0; } .captcha-holder__captcha:after { content: ''; display: table; width: 100%; height: 0; clear: both; } .captcha-holder__input { display: inline-block; vertical-align: middle; } @media screen and (max-width: 767px) { .captcha-holder__input { display:block; } } .captcha-holder__input input { margin-bottom: 0; } .mainHolder .captcha-holder__input input { margin-bottom: 0; } /* END Style captcha-holder */ /* ------------------------------------------ */ .custom-checkbox__item { margin-bottom: 30px; } .custom-checkbox__item .custom-checkbox { margin-bottom: 5px; } .custom-checkbox__item .custom-checkbox:last-child { margin-bottom: 0; } .custom-checkbox__item:last-child { margin-bottom: 0; } .custom-checkbox { padding-left: 25px; font-size: 16px; position: relative; } .custom-checkbox.custom-checkbox--inline { display: inline-block; margin-right: 30px; } .custom-checkbox.custom-checkbox--inline:last-child { margin-right: 0; } .custom-checkbox.custom-checkbox--display label { cursor: default; pointer-events: none; } .custom-checkbox.custom-checkbox--font-s { font-size: 14px; } .custom-checkbox.custom-checkbox--font-s .custom-checkbox__desc { font-size: 14px; } .custom-checkbox.custom-checkbox--font-m { font-size: 1rem; } .custom-checkbox.custom-checkbox--font-m .custom-checkbox__desc { font-size: 1rem; } .custom-checkbox.custom-checkbox--font-l { font-size: 20px; } .custom-checkbox.custom-checkbox--font-l .custom-checkbox__desc { font-size: 20px; } .custom-checkbox.custom-checkbox--m { font-size: 16px; } .custom-checkbox.custom-checkbox--m input[type="checkbox"] + label:before, .custom-checkbox.custom-checkbox--m input[type="checkbox"]:checked + label:before, .custom-checkbox.custom-checkbox--m input[type="checkbox"] + label:after, .custom-checkbox.custom-checkbox--m input[type="checkbox"]:checked + label:after { height: 25px; width: 25px; } .custom-checkbox.custom-checkbox--m .custom-checkbox__desc { font-size: 16px; } .custom-checkbox input[type="checkbox"] { /*display:none; */ display: block; position: absolute; width: 26px; height: 15px; font-size: 1px; left: -9999999px; } .custom-checkbox input[type="checkbox"] + label { vertical-align: middle; cursor: pointer; color: #000; font-size: 21px; } @media screen and (max-width: 1480px) { .custom-checkbox input[type="checkbox"] + label { font-size: 18px; } } @media screen and (max-width: 991px) { .custom-checkbox input[type="checkbox"] + label { font-size: 16px; } } .mainHolder .custom-checkbox input[type="checkbox"] + label { margin-left: 0; } .custom-checkbox input[type="checkbox"] + label:before, .custom-checkbox input[type="checkbox"] + label:after { background: transparent; border: 1px solid #000; box-sizing: border-box; content: ""; display: inline-block; height: 18px; width: 18px; vertical-align: baseline; margin-left: -25px; margin-right: 10px; position: relative; top: 3px; } .custom-checkbox input[type="checkbox"]:checked + label:before, .custom-checkbox input[type="checkbox"]:checked + label:after { content: ""; height: 18px; width: 18px; background: url(../images/common/icons/icon-tick.png) no-repeat center center; background-size: 90%; } .custom-checkbox input[type="checkbox"]:focus + label { vertical-align: middle; border: 2px solid #7DADD9; display: inline-block; border-radius: 2px; } .custom-checkbox.custom-checkbox--display label { cursor: default; pointer-events: none; } .custom-checkbox .custom-checkbox__desc { font-size: 12px; margin-bottom: 0; } .custom-checkbox input[type="checkbox"] + label:after { display: none; } .custom-checkbox.custom-checkbox--box-right { padding-left: 0; } .custom-checkbox.custom-checkbox--box-right input[type="checkbox"] + label:before { display: none; } .custom-checkbox.custom-checkbox--box-right input[type="checkbox"] + label:after { display: inline-block; margin-left: 10px; } .custom-datepick { display: inline-block; position: relative; width: 100%; font-size: 12px; } .custom-datepick > * { box-sizing: border-box; } .custom-datepick a { display: inline-block; height: 45px; white-space: nowrap; position: relative; background: transparent; color: #000; cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently*/ font-size: 0; white-space: nowrap; } .custom-datepick a:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .custom-datepick a > span { font-size: 16px; white-space: normal; display: inline-block; vertical-align: middle; } .custom-datepick a:hover { opacity: 1; } .custom-datepick .custom-datepick__list { box-sizing: border-box; display: none; position: absolute; top: 44px; left: 0; background: #ededed; z-index: 300; height: 200px; width: 100%; padding: 10px; } .custom-datepick .custom-datepick__list .custom-datepick__list-inner { height: 100%; overflow: auto; } .custom-datepick .custom-datepick__list .overview { width: 100%; } .article-holder .custom-datepick .custom-datepick__list { padding: 0; } .custom-datepick .custom-datepick__list ul { display: block; list-style: none; list-style-position: outside; margin: 0; padding: 0; width: 100%; } .custom-datepick .custom-datepick__list li { color: #000; cursor: pointer; height: 40px; padding: 0 15px; font-size: 16px; font-size: 1rem; } .custom-datepick .custom-datepick__list li:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } @media screen and (max-width: 640px) { .custom-datepick .custom-datepick__list li { font-size: 12px; } } .custom-datepick .custom-datepick__list li span { display: inline-block; vertical-align: middle; } .custom-datepick .custom-datepick__list li:hover { color: #d43900; } .custom-datepick .custom-datepick__list li.option-default { display: none; color: #393939; pointer-events: none; } .mobile .custom-datepick .custom-datepick__list { display: none !important; } .custom-datepick.open .custom-datepick__list { display: block; } .custom-datepick select { width: 100%; height: 100%; display: none; opacity: 0; position: absolute; top: 0; left: 0; color: #000; } .mobile .custom-datepick select { display: block; } @media screen and (max-width: 991px) { .custom-datepick select { font-size: 1rem; } } /* Style for custom-radio */ /* ------------------------------------------ */ .custom-radio { display: block; margin-bottom: 12px; position: relative; } .custom-radio.custom-radio--inline { display: inline-block; margin-right: 30px; margin-top: 5px; margin-bottom: 5px; } .custom-radio.custom-radio--s .custom-radio input[type="radio"] + label:before { display: inline-block; width: 12px; height: 12px; margin: -3px 8px 0 0; } /* Radio button */ .custom-radio input[type="radio"] { /*display:none; */ display: block; position: absolute; width: 26px; height: 15px; font-size: 1px; left: -9999999px; } .custom-radio input[type="radio"] + label { padding-left: 30px; display: inline-block; font-size: 21px; line-height: 1em; cursor: pointer; box-sizing: border-box; pointer-events: all; } .field-holder .custom-radio input[type="radio"] + label { pointer-events: all; } @media screen and (max-width: 1480px) { .custom-radio input[type="radio"] + label { font-size: 18px; } } @media screen and (max-width: 991px) { .custom-radio input[type="radio"] + label { font-size: 16px; } } .custom-radio input[type="radio"] + label:before { content: ''; display: inline-block; width: 18px; height: 18px; margin: -9px 8px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; box-sizing: border-box; position: absolute; left: 0; top: 0.75em; background: #ccc; } /* Checked state for radio */ .custom-radio input[type="radio"]:checked + label:before { border: 5px solid #ccc; background: #000; } .custom-radio input[type="radio"]:focus + label { vertical-align: middle; border: 2px solid #7DADD9; display: inline-block; border-radius: 2px; } .custom-radio input[type="radio"]:focus + label span { vertical-align: middle; } .custom-radio__group { position: relative; width: 100%; margin-bottom: 20px; } .form-grid__holder .form-grid__input .custom-radio__group { margin-bottom: 0; } .custom-radio-row { position: relative; width: 100%; text-align: center; } /* END Style custom-radio */ /* ------------------------------------------ */ .custom-select { display: inline-block; position: relative; width: 100%; font-size: 12px; } .custom-select.custom-select--1-1 { width: 100%; } .custom-select.custom-select--1-2 { width: 50%; } .custom-select.custom-select--2-2 { width: 100%; } .custom-select.custom-select--1-3 { width: 33.3333333333%; } .custom-select.custom-select--2-3 { width: 66.6666666667%; } .custom-select.custom-select--3-3 { width: 100%; } .custom-select.custom-select--1-4 { width: 25%; } .custom-select.custom-select--2-4 { width: 50%; } .custom-select.custom-select--3-4 { width: 75%; } .custom-select.custom-select--4-4 { width: 100%; } .custom-select.custom-select--1-1, .custom-select.custom-select--1-2, .custom-select.custom-select--2-2, .custom-select.custom-select--1-3, .custom-select.custom-select--2-3, .custom-select.custom-select--3-3, .custom-select.custom-select--1-4, .custom-select.custom-select--2-4, .custom-select.custom-select--3-4, .custom-select.custom-select--4-4 { padding-right: 8px; box-sizing: border-box; } @media screen and (max-width: 640px) { .custom-select.custom-select--1-1, .custom-select.custom-select--1-2, .custom-select.custom-select--2-2, .custom-select.custom-select--1-3, .custom-select.custom-select--2-3, .custom-select.custom-select--3-3, .custom-select.custom-select--1-4, .custom-select.custom-select--2-4, .custom-select.custom-select--3-4, .custom-select.custom-select--4-4 { width: 100%; margin-bottom: 20px; padding-right: 0; } } .custom-select.custom-select--1-1 ul, .custom-select.custom-select--1-2 ul, .custom-select.custom-select--2-2 ul, .custom-select.custom-select--1-3 ul, .custom-select.custom-select--2-3 ul, .custom-select.custom-select--3-3 ul, .custom-select.custom-select--1-4 ul, .custom-select.custom-select--2-4 ul, .custom-select.custom-select--3-4 ul, .custom-select.custom-select--4-4 ul { width: calc(100% - 8px); } .custom-select > * { box-sizing: border-box; } .custom-select.custom-select--inline { max-width: 300px; } .custom-select.custom-select--on-default { /* .option-default{ display:none; } */ } .custom-select a { display: inline-block; width: 100%; height: 45px; white-space: nowrap; position: relative; background: transparent; color: #000; border: 1px solid #000; cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently*/ font-size: 0; white-space: nowrap; padding: 0 15px; } .custom-select a:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .form-grid .custom-select a { border-color: transparent; background: #eaeaea; color: #000; } .theme--strategies .mainHolder .form-grid .custom-select a, .theme--legal .mainHolder .form-grid .custom-select a, .theme--community .mainHolder .form-grid .custom-select a, .theme--business .mainHolder .form-grid .custom-select a, .theme--infrastructure .mainHolder .form-grid .custom-select a, .theme--information-security .mainHolder .form-grid .custom-select a { color: #000; } .custom-select a > span { font-size: 16px; white-space: normal; display: inline-block; vertical-align: middle; } .custom-select a:hover { opacity: 1; } .custom-select a:after { content: ''; position: absolute; right: 15px; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 7px 6px 0 6px; border-color: #000 transparent transparent transparent; top: 50%; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .custom-select ul { box-sizing: border-box; border: 1px solid #000; display: none; position: absolute; top: 44px; left: 0; width: 100%; list-style: none; list-style-position: outside; background: #FFF; z-index: 300; max-height: 120px; margin: 0; padding: 0; overflow: auto; } .article-holder .custom-select ul { padding: 0; } .custom-select ul li { color: #000; cursor: pointer; height: auto; padding: 10px 15px; font-size: 16px; font-size: 1rem; margin: 0; } .custom-select ul li:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } @media screen and (max-width: 640px) { .custom-select ul li { font-size: 12px; } } .custom-select ul li span { display: inline-block; vertical-align: middle; } .custom-select ul li:hover { background: #000; color: #FFF; } .custom-select ul li.option-default { display: none; color: #393939; pointer-events: none; } .mobile .custom-select ul { display: none !important; } .custom-select.open ul { display: block; overflow-y: auto; padding: 0; } .custom-select select { width: 100%; height: 100%; display: none; opacity: 0; position: absolute; top: 0; left: 0; color: #000; } .mobile .custom-select select { display: block; z-index: 100; } @media screen and (max-width: 991px) { .custom-select select { font-size: 1rem; } } /* Style for desc */ /* ------------------------------------------ */ .desc { line-height: 1.5em; font-size: 16px; } @media screen and (max-width: 767px) { .desc { font-size: 14px; } } .desc.desc--xxl, .sec-article__head-intro, .sec-article__quote p { font-size: 36px; } @media screen and (max-width: 991px) { .desc.desc--xxl, .sec-article__head-intro, .sec-article__quote p { font-size: 30px; } } @media screen and (max-width: 767px) { .desc.desc--xxl, .sec-article__head-intro, .sec-article__quote p { font-size: 24px; } } .desc.desc--xl { font-size: 32px; } @media screen and (max-width: 991px) { .desc.desc--xl { font-size: 28px; } } @media screen and (max-width: 767px) { .desc.desc--xl { font-size: 20px; } } .desc.desc--l { font-size: 24px; } @media screen and (max-width: 991px) { .desc.desc--l { font-size: 20px; } } @media screen and (max-width: 767px) { .desc.desc--l { font-size: 16px; } } .desc.desc--m { font-size: 20px; } @media screen and (max-width: 991px) { .desc.desc--m { font-size: 18px; } } @media screen and (max-width: 767px) { .desc.desc--m { font-size: 14px; } } .desc.desc--s { font-size: 13px; } .desc.desc--xs { font-size: 12px; } /* END Style desc */ /* ------------------------------------------ */ /* Style for event-search */ /* ------------------------------------------ */ .event-search__search-bar { position: relative; z-index: 10; background: #2b2b2b; } .event-search__control { display: table; width: 100%; font-size: 0; } @media screen and (max-width: 991px) { .event-search__control { display: block; } } .event-search__control-item { text-align: center; display: table-cell; vertical-align: middle; padding-right: 15px; font-size: 0; font-weight: bold; width: 25%; color: #FFF; white-space: nowrap; } @media screen and (max-width: 991px) { .event-search__control-item { display: inline-block; width: 50%; text-align: left; margin-bottom: 15px; } } @media screen and (max-width: 640px) { .event-search__control-item { width: 100%; } } .event-search__control-item:last-child { padding-right: 0; } @media screen and (max-width: 991px) { .event-search__control-item:last-child { text-align: left; } } .event-search__control-item > * { white-space: normal; } .event-search__control-item input { border: 0; border-bottom: 1px solid #FFF; background: transparent; color: #FFF; padding: 0; } .event-search__control-item input::-webkit-input-placeholder { color: #FFF; } .event-search__control-item input:-moz-placeholder { /* Firefox 18- */ color: #FFF; } .event-search__control-item input::-moz-placeholder { /* Firefox 19+ */ color: #FFF; } .event-search__control-item input:-ms-input-placeholder { color: #FFF; } .event-search__control-item .custom-select .custom-select__trigger { border: 0; border-bottom: 1px solid #FFF; color: #FFF; padding: 0; padding-right: 35px; text-align: left; } .event-search__control-item .custom-select .custom-select__trigger:after { right: 5px; border-color: #FFF transparent transparent transparent; } .event-search__control-item .custom-select .overview { width: 100%; } .event-search__control-item .custom-select li { text-align: left; } .event-search__control-item .datepicker-item { display: inline-block; position: relative; width: 160px; } @media screen and (max-width: 991px) { .event-search__control-item .datepicker-item { width: 110px; } } .event-search__control-item .datepicker-item:after { content: ''; position: absolute; display: inline-block; right: 0; width: 0; height: 0; border-style: solid; border-width: 7px 6px 0 6px; border-color: #FFF transparent transparent transparent; top: 50%; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .event-search__to { font-weight: normal; font-size: 20px; margin: 0 15px; } @media screen and (max-width: 991px) { .event-search__to { margin: 0 10px; } } .event-search__result { font-size: 0; background: #f6f6f6; padding-bottom: 0; } .event-search__result-holder { margin-left: -45px; margin-right: -45px; } @media screen and (max-width: 1280px) { .event-search__result-holder { margin-left: -30px; margin-right: -30px; } } @media screen and (max-width: 991px) { .event-search__result-holder { margin-left: -15px; margin-right: -15px; } } @media screen and (max-width: 767px) { .event-search__result-holder { margin-left: -10px; margin-right: -10px; } } .event-search__item { display: inline-block; vertical-align: top; position: relative; width: 33.3333%; padding: 0 45px; margin-bottom: 60px; } @media screen and (max-width: 1280px) { .event-search__item { padding: 0 30px; } } @media screen and (max-width: 991px) { .event-search__item { padding: 0 15px; } } @media screen and (max-width: 767px) { .event-search__item { padding: 0 10px; } } @media screen and (max-width: 640px) { .event-search__item { width: 50%; margin-bottom: 45px; } } @media screen and (max-width: 400px) { .event-search__item { width: 100%; } .event-search__item:last-child { margin-bottom: 0; } } .event-search__item.event-search__item--pure-txt { vertical-align: middle; } .event-search__item-inner { position: relative; background: #FFF; display: block; padding-top: 30px; transition: 0.4s; } @media screen and (max-width: 400px) { .event-search__item-inner { height: auto !important; } } .event-search__item--pure-txt .event-search__item-inner { background: transparent; display: table; } .event-search__item-inner:hover { opacity: 1; } @media screen and (min-width: 768px) { .event-search__item-inner:hover { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } } .event-search__item--pure-txt .event-search__item-inner:hover { box-shadow: none; } .event-search__item--pure-txt .event-search__item-inner:hover .event-search__item-date, .event-search__item--pure-txt .event-search__item-inner:hover .event-search__item-title { color: #d43900; } .event-search__item-txt { padding: 30px; } @media screen and (max-width: 767px) { .event-search__item-txt { padding: 20px; } } .event-search__item--pure-txt .event-search__item-txt { display: table-cell; vertical-align: middle; } .event-search__item-date { font-size: 16px; line-height: 1.125; font-weight: bold; margin: 0 0 10px; } @media screen and (max-width: 991px) { .event-search__item-date { font-size: 14px; } } .event-search__item--pure-txt .event-search__item-date { color: #01a973; font-size: 48px; } @media screen and (max-width: 991px) { .event-search__item--pure-txt .event-search__item-date { font-size: 36px; } } @media screen and (max-width: 767px) { .event-search__item--pure-txt .event-search__item-date { font-size: 32px; } } .event-search__item-title { font-size: 20px; font-weight: normal; margin: 0 0 0; } @media screen and (max-width: 991px) { .event-search__item-title { font-size: 16px; } } @media screen and (max-width: 767px) { .event-search__item-title { font-size: 14px; } } .event-search__item--pure-txt .event-search__item-title { font-size: 24px; font-weight: bold; } @media screen and (max-width: 991px) { .event-search__item--pure-txt .event-search__item-title { font-size: 18px; } } @media screen and (max-width: 767px) { .event-search__item--pure-txt .event-search__item-title { font-size: 16px; } } /* END Style event-search */ /* ------------------------------------------ */ /* General Style for Forms and Fields */ /* ------------------------------------------ */ /* ------------------------------------------ */ input, textarea { -webkit-appearance: none; -webkit-border-radius: 0; font-size: 16px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-size: 16px; opacity: 1; } input:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 18- */ font-size: 16px; opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ font-size: 16px; opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-size: 16px; opacity: 1; } input { height: 45px; padding: 0 15px; width: 100%; border: 0; background: #FFF; color: #d8d8d8; box-sizing: border-box; } @media screen and (max-width: 640px) { input { height: 40px; } } input:focus { outline: none; } input.disabled { color: #ccc !important; border-color: #ccc !important; } input[type='checkbox'] { width: auto; height: auto; } textarea { width: 100%; height: 160px; background: transparent; box-sizing: border-box; resize: none; } .field-container { position: relative; width: 90%; } .field-row { margin-left: -30px; margin-right: -30px; margin-bottom: 20px; text-align: left; font-size: 0; } @media screen and (max-width: 767px) { .field-row { margin-left: 0; margin-right: 0; } } .field-row.field-row--center { text-align: center; } .field { display: inline-block; vertical-align: top; padding: 0 30px; width: 100%; box-sizing: border-box; position: relative; } @media screen and (max-width: 767px) { .field { box-sizing: content-box; padding: 0; margin-bottom: 20px; } .field:last-child { margin-bottom: 0; } } .field input { width: 100%; height: 45px; } .field.field--m { width: 200px; } @media screen and (max-width: 480px) { .field.field--m { width: 100%; } } .field.field--l { width: 400px; } @media screen and (max-width: 480px) { .field.field--l { width: 100%; } } .field.field--l input { font-size: 22px; } .field.field--l input::-webkit-input-placeholder { font-size: 22px; } .field.field--l input:-moz-placeholder { /* Firefox 18- */ font-size: 22px; } .field.field--l input::-moz-placeholder { /* Firefox 19+ */ font-size: 22px; } .field.field--l input:-ms-input-placeholder { font-size: 22px; } .field.field--search .field__search-btn { content: ''; width: 18px; height: 18px; display: block; background: url(../images/common/icons/icon-search-white.png) no-repeat center center; background-size: cover; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .field.field--1-1 { width: 100%; } .field.field--1-2 { width: 50%; } .field.field--2-2 { width: 100%; } .field.field--1-3 { width: 33.3333333333%; } .field.field--2-3 { width: 66.6666666667%; } .field.field--3-3 { width: 100%; } .field.field--1-4 { width: 25%; } .field.field--2-4 { width: 50%; } .field.field--3-4 { width: 75%; } .field.field--4-4 { width: 100%; } .field.field--1-5 { width: 20%; } .field.field--2-5 { width: 40%; } .field.field--3-5 { width: 60%; } .field.field--4-5 { width: 80%; } .field.field--5-5 { width: 100%; } .field.field--1-6 { width: 16.6666666667%; } .field.field--2-6 { width: 33.3333333333%; } .field.field--3-6 { width: 50%; } .field.field--4-6 { width: 66.6666666667%; } .field.field--5-6 { width: 83.3333333333%; } .field.field--6-6 { width: 100%; } .field.field--1-7 { width: 14.2857142857%; } .field.field--2-7 { width: 28.5714285714%; } .field.field--3-7 { width: 42.8571428571%; } .field.field--4-7 { width: 57.1428571429%; } .field.field--5-7 { width: 71.4285714286%; } .field.field--6-7 { width: 85.7142857143%; } .field.field--7-7 { width: 100%; } .field.field--1-8 { width: 12.5%; } .field.field--2-8 { width: 25%; } .field.field--3-8 { width: 37.5%; } .field.field--4-8 { width: 50%; } .field.field--5-8 { width: 62.5%; } .field.field--6-8 { width: 75%; } .field.field--7-8 { width: 87.5%; } .field.field--8-8 { width: 100%; } .field.field--1-9 { width: 11.1111111111%; } .field.field--2-9 { width: 22.2222222222%; } .field.field--3-9 { width: 33.3333333333%; } .field.field--4-9 { width: 44.4444444444%; } .field.field--5-9 { width: 55.5555555556%; } .field.field--6-9 { width: 66.6666666667%; } .field.field--7-9 { width: 77.7777777778%; } .field.field--8-9 { width: 88.8888888889%; } .field.field--9-9 { width: 100%; } .field.field--1-10 { width: 10%; } .field.field--2-10 { width: 20%; } .field.field--3-10 { width: 30%; } .field.field--4-10 { width: 40%; } .field.field--5-10 { width: 50%; } .field.field--6-10 { width: 60%; } .field.field--7-10 { width: 70%; } .field.field--8-10 { width: 80%; } .field.field--9-10 { width: 90%; } .field.field--10-10 { width: 100%; } .field.field--1-11 { width: 9.0909090909%; } .field.field--2-11 { width: 18.1818181818%; } .field.field--3-11 { width: 27.2727272727%; } .field.field--4-11 { width: 36.3636363636%; } .field.field--5-11 { width: 45.4545454545%; } .field.field--6-11 { width: 54.5454545455%; } .field.field--7-11 { width: 63.6363636364%; } .field.field--8-11 { width: 72.7272727273%; } .field.field--9-11 { width: 81.8181818182%; } .field.field--10-11 { width: 90.9090909091%; } .field.field--11-11 { width: 100%; } .field.field--1-12 { width: 8.3333333333%; } .field.field--2-12 { width: 16.6666666667%; } .field.field--3-12 { width: 25%; } .field.field--4-12 { width: 33.3333333333%; } .field.field--5-12 { width: 41.6666666667%; } .field.field--6-12 { width: 50%; } .field.field--7-12 { width: 58.3333333333%; } .field.field--8-12 { width: 66.6666666667%; } .field.field--9-12 { width: 75%; } .field.field--10-12 { width: 83.3333333333%; } .field.field--11-12 { width: 91.6666666667%; } .field.field--12-12 { width: 100%; } @media screen and (max-width: 991px) { .field.field--tb-1-1 { width: 100%; } .field.field--tb-1-2 { width: 50%; } .field.field--tb-2-2 { width: 100%; } .field.field--tb-1-3 { width: 33.3333333333%; } .field.field--tb-2-3 { width: 66.6666666667%; } .field.field--tb-3-3 { width: 100%; } .field.field--tb-1-4 { width: 25%; } .field.field--tb-2-4 { width: 50%; } .field.field--tb-3-4 { width: 75%; } .field.field--tb-4-4 { width: 100%; } .field.field--tb-1-5 { width: 20%; } .field.field--tb-2-5 { width: 40%; } .field.field--tb-3-5 { width: 60%; } .field.field--tb-4-5 { width: 80%; } .field.field--tb-5-5 { width: 100%; } .field.field--tb-1-6 { width: 16.6666666667%; } .field.field--tb-2-6 { width: 33.3333333333%; } .field.field--tb-3-6 { width: 50%; } .field.field--tb-4-6 { width: 66.6666666667%; } .field.field--tb-5-6 { width: 83.3333333333%; } .field.field--tb-6-6 { width: 100%; } .field.field--tb-1-7 { width: 14.2857142857%; } .field.field--tb-2-7 { width: 28.5714285714%; } .field.field--tb-3-7 { width: 42.8571428571%; } .field.field--tb-4-7 { width: 57.1428571429%; } .field.field--tb-5-7 { width: 71.4285714286%; } .field.field--tb-6-7 { width: 85.7142857143%; } .field.field--tb-7-7 { width: 100%; } .field.field--tb-1-8 { width: 12.5%; } .field.field--tb-2-8 { width: 25%; } .field.field--tb-3-8 { width: 37.5%; } .field.field--tb-4-8 { width: 50%; } .field.field--tb-5-8 { width: 62.5%; } .field.field--tb-6-8 { width: 75%; } .field.field--tb-7-8 { width: 87.5%; } .field.field--tb-8-8 { width: 100%; } .field.field--tb-1-9 { width: 11.1111111111%; } .field.field--tb-2-9 { width: 22.2222222222%; } .field.field--tb-3-9 { width: 33.3333333333%; } .field.field--tb-4-9 { width: 44.4444444444%; } .field.field--tb-5-9 { width: 55.5555555556%; } .field.field--tb-6-9 { width: 66.6666666667%; } .field.field--tb-7-9 { width: 77.7777777778%; } .field.field--tb-8-9 { width: 88.8888888889%; } .field.field--tb-9-9 { width: 100%; } .field.field--tb-1-10 { width: 10%; } .field.field--tb-2-10 { width: 20%; } .field.field--tb-3-10 { width: 30%; } .field.field--tb-4-10 { width: 40%; } .field.field--tb-5-10 { width: 50%; } .field.field--tb-6-10 { width: 60%; } .field.field--tb-7-10 { width: 70%; } .field.field--tb-8-10 { width: 80%; } .field.field--tb-9-10 { width: 90%; } .field.field--tb-10-10 { width: 100%; } .field.field--tb-1-11 { width: 9.0909090909%; } .field.field--tb-2-11 { width: 18.1818181818%; } .field.field--tb-3-11 { width: 27.2727272727%; } .field.field--tb-4-11 { width: 36.3636363636%; } .field.field--tb-5-11 { width: 45.4545454545%; } .field.field--tb-6-11 { width: 54.5454545455%; } .field.field--tb-7-11 { width: 63.6363636364%; } .field.field--tb-8-11 { width: 72.7272727273%; } .field.field--tb-9-11 { width: 81.8181818182%; } .field.field--tb-10-11 { width: 90.9090909091%; } .field.field--tb-11-11 { width: 100%; } .field.field--tb-1-12 { width: 8.3333333333%; } .field.field--tb-2-12 { width: 16.6666666667%; } .field.field--tb-3-12 { width: 25%; } .field.field--tb-4-12 { width: 33.3333333333%; } .field.field--tb-5-12 { width: 41.6666666667%; } .field.field--tb-6-12 { width: 50%; } .field.field--tb-7-12 { width: 58.3333333333%; } .field.field--tb-8-12 { width: 66.6666666667%; } .field.field--tb-9-12 { width: 75%; } .field.field--tb-10-12 { width: 83.3333333333%; } .field.field--tb-11-12 { width: 91.6666666667%; } .field.field--tb-12-12 { width: 100%; } } @media screen and (max-width: 767px) { .field.field--mb-1-1 { width: 100%; } .field.field--mb-1-2 { width: 50%; } .field.field--mb-2-2 { width: 100%; } .field.field--mb-1-3 { width: 33.3333333333%; } .field.field--mb-2-3 { width: 66.6666666667%; } .field.field--mb-3-3 { width: 100%; } .field.field--mb-1-4 { width: 25%; } .field.field--mb-2-4 { width: 50%; } .field.field--mb-3-4 { width: 75%; } .field.field--mb-4-4 { width: 100%; } .field.field--mb-1-5 { width: 20%; } .field.field--mb-2-5 { width: 40%; } .field.field--mb-3-5 { width: 60%; } .field.field--mb-4-5 { width: 80%; } .field.field--mb-5-5 { width: 100%; } .field.field--mb-1-6 { width: 16.6666666667%; } .field.field--mb-2-6 { width: 33.3333333333%; } .field.field--mb-3-6 { width: 50%; } .field.field--mb-4-6 { width: 66.6666666667%; } .field.field--mb-5-6 { width: 83.3333333333%; } .field.field--mb-6-6 { width: 100%; } .field.field--mb-1-7 { width: 14.2857142857%; } .field.field--mb-2-7 { width: 28.5714285714%; } .field.field--mb-3-7 { width: 42.8571428571%; } .field.field--mb-4-7 { width: 57.1428571429%; } .field.field--mb-5-7 { width: 71.4285714286%; } .field.field--mb-6-7 { width: 85.7142857143%; } .field.field--mb-7-7 { width: 100%; } .field.field--mb-1-8 { width: 12.5%; } .field.field--mb-2-8 { width: 25%; } .field.field--mb-3-8 { width: 37.5%; } .field.field--mb-4-8 { width: 50%; } .field.field--mb-5-8 { width: 62.5%; } .field.field--mb-6-8 { width: 75%; } .field.field--mb-7-8 { width: 87.5%; } .field.field--mb-8-8 { width: 100%; } .field.field--mb-1-9 { width: 11.1111111111%; } .field.field--mb-2-9 { width: 22.2222222222%; } .field.field--mb-3-9 { width: 33.3333333333%; } .field.field--mb-4-9 { width: 44.4444444444%; } .field.field--mb-5-9 { width: 55.5555555556%; } .field.field--mb-6-9 { width: 66.6666666667%; } .field.field--mb-7-9 { width: 77.7777777778%; } .field.field--mb-8-9 { width: 88.8888888889%; } .field.field--mb-9-9 { width: 100%; } .field.field--mb-1-10 { width: 10%; } .field.field--mb-2-10 { width: 20%; } .field.field--mb-3-10 { width: 30%; } .field.field--mb-4-10 { width: 40%; } .field.field--mb-5-10 { width: 50%; } .field.field--mb-6-10 { width: 60%; } .field.field--mb-7-10 { width: 70%; } .field.field--mb-8-10 { width: 80%; } .field.field--mb-9-10 { width: 90%; } .field.field--mb-10-10 { width: 100%; } .field.field--mb-1-11 { width: 9.0909090909%; } .field.field--mb-2-11 { width: 18.1818181818%; } .field.field--mb-3-11 { width: 27.2727272727%; } .field.field--mb-4-11 { width: 36.3636363636%; } .field.field--mb-5-11 { width: 45.4545454545%; } .field.field--mb-6-11 { width: 54.5454545455%; } .field.field--mb-7-11 { width: 63.6363636364%; } .field.field--mb-8-11 { width: 72.7272727273%; } .field.field--mb-9-11 { width: 81.8181818182%; } .field.field--mb-10-11 { width: 90.9090909091%; } .field.field--mb-11-11 { width: 100%; } .field.field--mb-1-12 { width: 8.3333333333%; } .field.field--mb-2-12 { width: 16.6666666667%; } .field.field--mb-3-12 { width: 25%; } .field.field--mb-4-12 { width: 33.3333333333%; } .field.field--mb-5-12 { width: 41.6666666667%; } .field.field--mb-6-12 { width: 50%; } .field.field--mb-7-12 { width: 58.3333333333%; } .field.field--mb-8-12 { width: 66.6666666667%; } .field.field--mb-9-12 { width: 75%; } .field.field--mb-10-12 { width: 83.3333333333%; } .field.field--mb-11-12 { width: 91.6666666667%; } .field.field--mb-12-12 { width: 100%; } } .field-note { font-size: 12px; } .field-mini-helper { display: block; font-size: 12px; margin-top: 5px; } .field-mini-helper:after { content: ''; display: inline-block; margin-left: 9px; width: 9px; height: 9px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .field-helper { line-height: 45px; font-size: 15px; } .field-helper.field-helper--link { text-decoration: underline; } .field-helper.field-helper--right { float: right; } .field .field__holder { font-size: 0; } .field .field__label { display: block; margin-top: 0; margin-bottom: 10px; color: #FFF; } .field .field__label p, .field .field__label span, .field .field__label h1, .field .field__label h2, .field .field__label h3, .field .field__label h4, .field .field__label h5, .field .field__label h6 { margin: 0; font-size: 16px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; } .field.field--hidden { display: none !important; } .field.field--err .custom-select ul, .field.field--err .custom-select a, .field.field--err .custom-checkbox, .field.field--err.field--radio .field__holder, .field.field--err.custom-checkbox, .field.field--err input, .field.field--err textarea, .field .field--err .custom-select ul, .field .field--err .custom-select a, .field .field--err .custom-checkbox, .field .field--err.field--radio .field__holder, .field .field--err.custom-checkbox, .field .field--err input, .field .field--err textarea { border-color: #ef9696 !important; } .field.field--err.custom-select ul, .field.field--err.custom-select a, .field .field--err.custom-select ul, .field .field--err.custom-select a { border-color: #ef9696 !important; } .field.field--err.field--radio .err-msg, .field .field--err.field--radio .err-msg { text-align: center; } .field-item { display: inline-block; vertical-align: top; width: 100%; position: relative; } .field-item.field-item--1-1 { width: 100%; } .field-item.field-item--1-2 { width: 50%; } .field-item.field-item--2-2 { width: 100%; } .field-item.field-item--1-3 { width: 33.3333333333%; } .field-item.field-item--2-3 { width: 66.6666666667%; } .field-item.field-item--3-3 { width: 100%; } .field-item.field-item--1-4 { width: 25%; } .field-item.field-item--2-4 { width: 50%; } .field-item.field-item--3-4 { width: 75%; } .field-item.field-item--4-4 { width: 100%; } .field-item.field-item--1-5 { width: 20%; } .field-item.field-item--2-5 { width: 40%; } .field-item.field-item--3-5 { width: 60%; } .field-item.field-item--4-5 { width: 80%; } .field-item.field-item--5-5 { width: 100%; } .field-item.field-item--1-6 { width: 16.6666666667%; } .field-item.field-item--2-6 { width: 33.3333333333%; } .field-item.field-item--3-6 { width: 50%; } .field-item.field-item--4-6 { width: 66.6666666667%; } .field-item.field-item--5-6 { width: 83.3333333333%; } .field-item.field-item--6-6 { width: 100%; } @media screen and (max-width: 991px) { .field-item.field-item--tb-1-1 { width: 100%; } .field-item.field-item--tb-1-2 { width: 50%; } .field-item.field-item--tb-2-2 { width: 100%; } .field-item.field-item--tb-1-3 { width: 33.3333333333%; } .field-item.field-item--tb-2-3 { width: 66.6666666667%; } .field-item.field-item--tb-3-3 { width: 100%; } .field-item.field-item--tb-1-4 { width: 25%; } .field-item.field-item--tb-2-4 { width: 50%; } .field-item.field-item--tb-3-4 { width: 75%; } .field-item.field-item--tb-4-4 { width: 100%; } .field-item.field-item--tb-1-5 { width: 20%; } .field-item.field-item--tb-2-5 { width: 40%; } .field-item.field-item--tb-3-5 { width: 60%; } .field-item.field-item--tb-4-5 { width: 80%; } .field-item.field-item--tb-5-5 { width: 100%; } .field-item.field-item--tb-1-6 { width: 16.6666666667%; } .field-item.field-item--tb-2-6 { width: 33.3333333333%; } .field-item.field-item--tb-3-6 { width: 50%; } .field-item.field-item--tb-4-6 { width: 66.6666666667%; } .field-item.field-item--tb-5-6 { width: 83.3333333333%; } .field-item.field-item--tb-6-6 { width: 100%; } } @media screen and (max-width: 767px) { .field-item.field-item--mb-1-1 { width: 100%; } .field-item.field-item--mb-1-2 { width: 50%; } .field-item.field-item--mb-2-2 { width: 100%; } .field-item.field-item--mb-1-3 { width: 33.3333333333%; } .field-item.field-item--mb-2-3 { width: 66.6666666667%; } .field-item.field-item--mb-3-3 { width: 100%; } .field-item.field-item--mb-1-4 { width: 25%; } .field-item.field-item--mb-2-4 { width: 50%; } .field-item.field-item--mb-3-4 { width: 75%; } .field-item.field-item--mb-4-4 { width: 100%; } .field-item.field-item--mb-1-5 { width: 20%; } .field-item.field-item--mb-2-5 { width: 40%; } .field-item.field-item--mb-3-5 { width: 60%; } .field-item.field-item--mb-4-5 { width: 80%; } .field-item.field-item--mb-5-5 { width: 100%; } .field-item.field-item--mb-1-6 { width: 16.6666666667%; } .field-item.field-item--mb-2-6 { width: 33.3333333333%; } .field-item.field-item--mb-3-6 { width: 50%; } .field-item.field-item--mb-4-6 { width: 66.6666666667%; } .field-item.field-item--mb-5-6 { width: 83.3333333333%; } .field-item.field-item--mb-6-6 { width: 100%; } } @media screen and (max-width: 640px) { .field-item.field-item--ms-1-1 { width: 100%; } .field-item.field-item--ms-1-2 { width: 50%; } .field-item.field-item--ms-2-2 { width: 100%; } .field-item.field-item--ms-1-3 { width: 33.3333333333%; } .field-item.field-item--ms-2-3 { width: 66.6666666667%; } .field-item.field-item--ms-3-3 { width: 100%; } .field-item.field-item--ms-1-4 { width: 25%; } .field-item.field-item--ms-2-4 { width: 50%; } .field-item.field-item--ms-3-4 { width: 75%; } .field-item.field-item--ms-4-4 { width: 100%; } .field-item.field-item--ms-1-5 { width: 20%; } .field-item.field-item--ms-2-5 { width: 40%; } .field-item.field-item--ms-3-5 { width: 60%; } .field-item.field-item--ms-4-5 { width: 80%; } .field-item.field-item--ms-5-5 { width: 100%; } .field-item.field-item--ms-1-6 { width: 16.6666666667%; } .field-item.field-item--ms-2-6 { width: 33.3333333333%; } .field-item.field-item--ms-3-6 { width: 50%; } .field-item.field-item--ms-4-6 { width: 66.6666666667%; } .field-item.field-item--ms-5-6 { width: 83.3333333333%; } .field-item.field-item--ms-6-6 { width: 100%; } } @media screen and (max-width: 480px) { .field-item.field-item--sm-1-1 { width: 100%; } .field-item.field-item--sm-1-2 { width: 50%; } .field-item.field-item--sm-2-2 { width: 100%; } .field-item.field-item--sm-1-3 { width: 33.3333333333%; } .field-item.field-item--sm-2-3 { width: 66.6666666667%; } .field-item.field-item--sm-3-3 { width: 100%; } .field-item.field-item--sm-1-4 { width: 25%; } .field-item.field-item--sm-2-4 { width: 50%; } .field-item.field-item--sm-3-4 { width: 75%; } .field-item.field-item--sm-4-4 { width: 100%; } .field-item.field-item--sm-1-5 { width: 20%; } .field-item.field-item--sm-2-5 { width: 40%; } .field-item.field-item--sm-3-5 { width: 60%; } .field-item.field-item--sm-4-5 { width: 80%; } .field-item.field-item--sm-5-5 { width: 100%; } .field-item.field-item--sm-1-6 { width: 16.6666666667%; } .field-item.field-item--sm-2-6 { width: 33.3333333333%; } .field-item.field-item--sm-3-6 { width: 50%; } .field-item.field-item--sm-4-6 { width: 66.6666666667%; } .field-item.field-item--sm-5-6 { width: 83.3333333333%; } .field-item.field-item--sm-6-6 { width: 100%; } } @media screen and (max-width: 380px) { .field-item.field-item--xs-1-1 { width: 100%; } .field-item.field-item--xs-1-2 { width: 50%; } .field-item.field-item--xs-2-2 { width: 100%; } .field-item.field-item--xs-1-3 { width: 33.3333333333%; } .field-item.field-item--xs-2-3 { width: 66.6666666667%; } .field-item.field-item--xs-3-3 { width: 100%; } .field-item.field-item--xs-1-4 { width: 25%; } .field-item.field-item--xs-2-4 { width: 50%; } .field-item.field-item--xs-3-4 { width: 75%; } .field-item.field-item--xs-4-4 { width: 100%; } .field-item.field-item--xs-1-5 { width: 20%; } .field-item.field-item--xs-2-5 { width: 40%; } .field-item.field-item--xs-3-5 { width: 60%; } .field-item.field-item--xs-4-5 { width: 80%; } .field-item.field-item--xs-5-5 { width: 100%; } .field-item.field-item--xs-1-6 { width: 16.6666666667%; } .field-item.field-item--xs-2-6 { width: 33.3333333333%; } .field-item.field-item--xs-3-6 { width: 50%; } .field-item.field-item--xs-4-6 { width: 66.6666666667%; } .field-item.field-item--xs-5-6 { width: 83.3333333333%; } .field-item.field-item--xs-6-6 { width: 100%; } } .field-item .custom-select a, .field-item input { border-left: 0; } .form-small { max-width: 370px; margin: 0 auto; text-align: center; } .form-small .field-row { margin-bottom: 20px; } @media screen and (max-width: 991px) { .form-small .field-row { margin-bottom: 20px; } } .form-small .field .field__label { margin-bottom: 20px; } @media screen and (max-width: 767px) { .form-small .field .field__label { margin-bottom: 15px; } } .form-medium { max-width: 480px; margin: 0 auto; text-align: center; } .form-medium .field-row { margin-bottom: 20px; } @media screen and (max-width: 991px) { .form-medium .field-row { margin-bottom: 20px; } } .form-medium .field .field__label { margin-bottom: 20px; } @media screen and (max-width: 767px) { .form-medium .field .field__label { margin-bottom: 15px; } } .form-checklist .field-grid td { font-size: 14px; } .form-checklist .custom-checkbox { font-size: 14px; } .ui-datepicker { width: 320px; background: #fff; } .ui-datepicker .ui-datepicker-prev { margin-left: 10px; } .ui-datepicker .ui-datepicker-next { float: right; margin-right: 10px; } .ui-datepicker .ui-datepicker-title { text-align: center; } .ui-datepicker .ui-datepicker-calendar { margin: 10px 0; width: 100%; } .ui-datepicker .ui-datepicker-calendar th { width: 14%; } .ui-datepicker .ui-datepicker-calendar td { padding: 5px; text-align: center; } /* END General Style for Forms and Fields */ /* ------------------------------------------ */ /* Style for gallery-slider */ /* ------------------------------------------ */ .gallery-slider { position: relative; } .gallery-slider__slider { position: relative; } .gallery-slider__slider .swiper-wrapper { overflow: hidden; } .gallery-slider__item-inner { background: #282828; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; width: 100%; } @media screen and (max-width: 767px) { .gallery-slider__item-inner { display: block; } } .gallery-slider__img-holder { display: inline-block; vertical-align: middle; width: 50%; position: relative; text-align: center; font-size: 0; white-space: nowrap; } .gallery-slider__img-holder:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .gallery-slider__img-holder a { display: inline-block; vertical-align: middle; } .gallery-slider__img-holder img { display: inline-block; max-height: 500px; } .trident .gallery-slider__img-holder img { max-width: 50vw; } @media screen and (max-width: 767px) { .gallery-slider__img-holder { display: block; width: 100%; } .gallery-slider__img-holder img { max-height: 400px; } .trident .gallery-slider__img-holder img { max-width: 100vw; } } .gallery-slider__info-holder { background: #282828; display: inline-block; vertical-align: middle; width: 50%; color: #FFF; position: relative; padding: 30px 6% 120px; white-space: nowrap; } .gallery-slider__info-holder:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .gallery-slider__info-holder .gallery-slider__info-holder-inner { display: inline-block; vertical-align: middle; width: 100%; } .gallery-slider__info-holder > * { white-space: normal; } @media screen and (max-width: 1480px) { .gallery-slider__info-holder { padding-bottom: 60px; } } @media screen and (max-width: 767px) { .gallery-slider__info-holder { display: block; width: 100%; padding: 50px 6%; } .gallery-slider__info-holder:before { display: none; } } .gallery-slider__count { font-size: 32px; font-weight: bold; width: 3em; height: 1.7em; position: absolute; bottom: 60px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); overflow: hidden; } @media screen and (max-width: 1480px) { .gallery-slider__count { font-size: 24px; bottom: 20px; } } @media screen and (max-width: 991px) { .gallery-slider__count { font-size: 20px; bottom: 15px; } } .gallery-slider__count:before { content: ''; display: block; width: 2px; height: 70%; position: absolute; background: #FFF; top: 50%; left: 50%; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: translate(-50%, -50%) rotate(40deg); -ms-transform: translate(-50%, -50%) rotate(40deg); transform: translate(-50%, -50%) rotate(40deg); } .gallery-slider__count .gallery-slider__count-current { position: absolute; top: 25%; left: 25%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .gallery-slider__count .gallery-slider__count-total { position: absolute; top: 75%; left: 75%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .gallery-slider__info-txt { color: #ffc62e; } .theme--strategies .gallery-slider__info-txt { color: #c187ff; } .theme--legal .gallery-slider__info-txt { color: #71cdff; } .theme--community .gallery-slider__info-txt { color: #b0e600; } .theme--business .gallery-slider__info-txt { color: #00ffae; } .theme--infrastructure .gallery-slider__info-txt { color: #f7c624; } .theme--information-security .gallery-slider__info-txt { /*color: #f27486;*/ color: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } .gallery-slider__info-txt, .gallery-slider__info-label { display: block; width: 100%; margin: 0 auto 15px; font-size: 22px; } .gallery-slider__info-txt:last-child, .gallery-slider__info-label:last-child { margin-bottom: 0; } @media screen and (max-width: 1480px) { .gallery-slider__info-txt, .gallery-slider__info-label { font-size: 18px; } } @media screen and (max-width: 991px) { .gallery-slider__info-txt, .gallery-slider__info-label { font-size: 14px; width: 90%; } } @media screen and (max-width: 767px) { .gallery-slider__info-txt, .gallery-slider__info-label { font-size: 16px; } } .gallery-slider__control { position: absolute; width: 50%; left: 50%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 15; } @media screen and (max-width: 767px) { .gallery-slider__control { width: 100%; left: 0%; -webkit-transform: none; -ms-transform: none; transform: none; top: auto; bottom: 25%; } } .gallery-slider__slider-next, .gallery-slider__slider-prev { position: absolute; width: 51px; height: 51px; display: block; background: url(../images/common/icons/icon-slider-arrow.png) no-repeat center center; background-size: cover; top: 50%; margin-top: -25.5px; } .theme--strategies .gallery-slider__slider-next, .theme--strategies .gallery-slider__slider-prev { background-image: url(../images/common/icons/theme/strategies/icon-slider-arrow.png); } .theme--legal .gallery-slider__slider-next, .theme--legal .gallery-slider__slider-prev { background-image: url(../images/common/icons/theme/legal/icon-slider-arrow.png); } .theme--community .gallery-slider__slider-next, .theme--community .gallery-slider__slider-prev { background-image: url(../images/common/icons/theme/community/icon-slider-arrow.png); } .theme--business .gallery-slider__slider-next, .theme--business .gallery-slider__slider-prev { background-image: url(../images/common/icons/theme/business/icon-slider-arrow.png); } .theme--infrastructure .gallery-slider__slider-next, .theme--infrastructure .gallery-slider__slider-prev { background-image: url(../images/common/icons/theme/infrastructure/icon-slider-arrow.png); } .theme--information-security .gallery-slider__slider-next, .theme--information-security .gallery-slider__slider-prev { background-image: url(../images/common/icons/theme/information-security/icon-slider-arrow.png); } @media screen and (max-width: 991px) { .gallery-slider__slider-next, .gallery-slider__slider-prev { width: 36px; height: 36px; margin-top: -18px; } } @media screen and (max-width: 767px) { .gallery-slider__slider-next, .gallery-slider__slider-prev { width: 28px; height: 28px; margin-top: -14px; } } .gallery-slider__slider-next { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); right: 4%; } @media screen and (max-width: 767px) { .gallery-slider__slider-next { right: 2%; } } .gallery-slider__slider-prev { left: 4%; } @media screen and (max-width: 767px) { .gallery-slider__slider-prev { left: 2%; } } /* END Style gallery-slider */ /* ------------------------------------------ */ /* Style for general-index */ /* ------------------------------------------ */ .general-index { position: relative; color: #000; /*color: #FFF;*/ background: url() no-repeat center center; background-size: cover; /*background: #000;*/ background: #edefee; } .general-index:before { content: ''; position: absolute; display: block; width: 10000px; height: 6px; top: -3px; right: 0; background: #ffc62e; } .theme--strategies .general-index:before { background: #c187ff; } .theme--legal .general-index:before { background: #71cdff; } .theme--community .general-index:before { background: #b0e600; } .theme--business .general-index:before { background: #00ffae; } .theme--infrastructure .general-index:before { background: #f7c624; } .theme--information-security .general-index:before { /*background: #f27486;*/ background: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } .general-index__head { max-width: 600px; padding-bottom: 60px; } @media screen and (max-width: 991px) { .general-index__head { padding-bottom: 45px; } } .general-index__title { line-height: 1.25em; margin: 0 0 30px; } @media screen and (max-width: 767px) { .general-index__title { width: 100%; } } .general-index__col .general-index__title { padding-right: 35px; } @media screen and (max-width: 991px) { .general-index__col .general-index__title { padding-right: 20px; } } .general-index__desc { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; line-height: 1.5em; margin: 0 0 30px; font-size: 16px; } .general-index__desc:last-child { margin-bottom: 0; } .general-index__links { position: relative; width: 100%; font-size: 0; padding: 0 0 60px; } .general-index__links a:hover { color: #e66000; } @media screen and (max-width: 991px) { .general-index__links { padding: 0 0 45px; } } .general-index__col { display: inline-block; vertical-align: top; position: relative; width: 50%; } @media screen and (max-width: 991px) { .general-index__col { width: 100%; margin-bottom: 25px; } .general-index__col:last-child { margin-bottom: 0; } } .general-index__link { display: block; position: relative; color: #000; /*color: #FFF;*/ width: 100%; font-weight: bold; margin-bottom: 25px; padding-left: 35px; padding-right: 35px; font-size: 20px; background: url(../images/icon_heading.jpg) left center no-repeat; } @media screen and (max-width: 991px) { .general-index__link { font-size: 16px; padding-right: 20px; } } @media screen and (max-width: 640px) { .general-index__link { font-size: 14px; } } .theme--strategies .general-index__link:hover { /*color: #c187ff;*/ color: #a968eb; } .theme--legal .general-index__link:hover { /*color: #71cdff;*/ color: #007bbd; } .theme--community .general-index__link:hover { /*color: #b0e600;*/ color: #6f9400; } .theme--business .general-index__link:hover { /*color: #00ffae;*/ color: #00a36d; } .theme--infrastructure .general-index__link:hover { /*color: #f7c624;*/ color: #a88c15; } .theme--information-security .general-index__link:hover { /*color: #f27486;*/ color: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } .general-index__link:last-child { margin-bottom: 0; } .general-index__link > .general-index__link-icon { position: absolute; left: 0; top: 0; width: 30px; } /* END Style general-index */ /* ------------------------------------------ */ /* Style for header-contact */ /* ------------------------------------------ */ .header-contact { color: #000; font-size: 0; } .header-contact__holder { display: inline-block; vertical-align: top; position: relative; font-size: 16px; z-index: 20; width: 28%; } .header-contact__holder:first-child { width: 37%; /* Three Columns */ /* width: 50%; *//* Two Columns */ } .header-contact__holder:last-child { width: 34%; /* Three Columns */ /*width: 50%;*//* Two Columns */ } .header-contact__notes { display: block; color: #000; margin-bottom: 10px; position: relative; } .header-contact__map-holder { width: 100%; position: relative; max-width: 300px; margin-bottom: 15px; } .header-contact__map-holder:before { content: ''; width: 100%; position: relative; display: block; padding-bottom: 75%; z-index: -1; } .header-contact__map { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; background: #000; } .header-contact__info-item { position: relative; width: 100%; margin-bottom: 30px; } .header-contact__contact { display: block; color: #000; margin-bottom: 10px; position: relative; padding-left: 35px; } .header-contact__contact:hover { color: #d43900; opacity: 1; } .header-contact__contact:before { content: ''; display: block; width: 28px; height: 28px; position: absolute; left: 0; top: -2px; background: url() no-repeat center center; background-size: 100%; } .header-contact__contact.header-contact__contact--tel:before { background-image: url(../images/common/icons/icon-contact-tel-orange.png); } .header-contact__contact.header-contact__contact--fax:before { background-image: url(../images/common/icons/icon-contact-fax-orange.png); } .header-contact__contact.header-contact__contact--email:before { background-image: url(../images/common/icons/icon-contact-email-orange.png); } /* END Style header-contact */ /* ------------------------------------------ */ /* Style for header-main */ /* ------------------------------------------ */ .header-logo { width: 452px; position: absolute; left: 0; font-size: 0; height: 100%; white-space: nowrap; text-align: left; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header-logo:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } @media screen and (max-width: 1480px) { .header-logo { width: 420px; } } @media screen and (max-width: 1280px) { .header-logo { width: 360px; } } @media screen and (max-width: 991px) { .header-logo { width: 240px; } } @media screen and (max-width: 480px) { .header-logo { width: 160px; } } @media screen and (max-width: 280px) { .header-logo { width: 120px; } } :lang(en) .header-logo .header-logo__long-white, :lang(en) .header-logo .header-logo__long { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; max-width: 452px; } @media screen and (max-width: 1480px) { :lang(en) .header-logo .header-logo__long-white, :lang(en) .header-logo .header-logo__long { max-width: 420px; } } @media screen and (max-width: 1280px) { :lang(en) .header-logo .header-logo__long-white, :lang(en) .header-logo .header-logo__long { max-width: 360px; } } .header-logo .header-logo__short, .header-logo .header-logo__short-white { max-width: 209px; width: 100%; } :lang(en) .header-logo .header-logo__short, :lang(en) .header-logo .header-logo__short-white { width: auto; } .header-logo .header-logo__long-white, .header-logo .header-logo__long, .header-logo .header-logo__short, .header-logo .header-logo__short-white { vertical-align: middle; } .header-logo .header-logo__long-white { display: inline-block; } .header-logo .header-logo__long, .header-logo .header-logo__short, .header-logo .header-logo__short-white { display: none; } [data-key-txt-color="black"] .header-logo .header-logo__long, .mob-menu-open .header-logo .header-logo__long, .header--small .header-logo .header-logo__long { display: inline-block; } [data-key-txt-color="black"] .header-logo .header-logo__long-white, [data-key-txt-color="black"] .header-logo .header-logo__short, [data-key-txt-color="black"] .header-logo .header-logo__short-white, .mob-menu-open .header-logo .header-logo__long-white, .mob-menu-open .header-logo .header-logo__short, .mob-menu-open .header-logo .header-logo__short-white, .header--small .header-logo .header-logo__long-white, .header--small .header-logo .header-logo__short, .header--small .header-logo .header-logo__short-white { display: none; } @media screen and (max-width: 991px) { .header-logo .header-logo__long, .header-logo .header-logo__long-white, .header-logo .header-logo__short { display: none; } .header-logo .header-logo__short-white { display: inline-block; } [data-key-txt-color="black"] .header-logo .header-logo__long, [data-key-txt-color="black"] .header-logo .header-logo__long-white, [data-key-txt-color="black"] .header-logo .header-logo__short-white, .mob-menu-open .header-logo .header-logo__long, .mob-menu-open .header-logo .header-logo__long-white, .mob-menu-open .header-logo .header-logo__short-white, .header--small .header-logo .header-logo__long, .header--small .header-logo .header-logo__long-white, .header--small .header-logo .header-logo__short-white { display: none; } [data-key-txt-color="black"] .header-logo .header-logo__short, .mob-menu-open .header-logo .header-logo__short, .header--small .header-logo .header-logo__short { display: inline-block; } } .header-logo:hover { opacity: 1; } /* END Style header-main */ /* ------------------------------------------ */ /* Style for header-nav */ /* ------------------------------------------ */ @-webkit-keyframes ani-submenu { 0% { -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); } 100% { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes ani-submenu { 0% { -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); } 100% { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } .header-nav { display: inline-block; vertical-align: middle; width: 100%; height: 100%; white-space: normal; } @media screen and (max-width: 991px) { .header-nav { display: none; } } .header-nav__link-holder { display: inline-block; height: 100%; position: relative; margin-right: 14px; z-index: 10; } @media screen and (max-width: 1600px) { .header-nav__link-holder { margin-right: 15px; } } @media screen and (max-width: 1200px) { .header-nav__link-holder { margin-right: 10px; } } @media screen and (max-width: 1100px) { .header-nav__link-holder { margin-right: 5px; } } .header-nav__link-holder:last-child { margin-right: 0; } .header-nav__link-holder:after { content: ''; display: block; width: 100%; height: 4px; left: 0; top: 100%; position: absolute; background: #d43900; transition: 0.4s 0.1s; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } .header-nav__link-holder.is-focus, .header-nav__link-holder.is-open, .header-nav__link-holder:hover { opacity: 1; } .header-nav__link-holder.is-focus + .header-nav__sub-holder, .header-nav__link-holder.is-open + .header-nav__sub-holder, .header-nav__link-holder:hover + .header-nav__sub-holder { display: block; } .header-nav__link { display: block; height: 100%; font-size: 15px; font-weight: bold; position: relative; z-index: 10; } .header-nav__link:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .header-nav__link > span { display: inline-block; vertical-align: middle; } @media screen and (max-width: 1200px) { .header-nav__link { font-size: 14px; } } @media screen and (max-width: 1100px) { .header-nav__link { font-size: 12px; } } [data-key-txt-color="black"] .header-nav__link { color: #000; } .header-nav__link:after { content: ''; display: block; width: 100%; height: 4px; left: 0; bottom: -3px; position: absolute; background: #d43900; transition: 0s; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } .header-nav__link.has-sub:after { width: 10000px; left: -5000px; } .header-nav__link.is-active { color: #d43900; } .is-focus .header-nav__link, .is-open .header-nav__link, .is-hover .header-nav__link, .header-nav__link:focus, .header-nav__link:hover { opacity: 1; color: #d43900; } .is-focus .header-nav__link:after, .is-open .header-nav__link:after, .is-hover .header-nav__link:after, .header-nav__link:focus:after, .header-nav__link:hover:after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); transition: 0.3s 0.1s; } .is-focus .header-nav__link.has-sub:after, .is-open .header-nav__link.has-sub:after, .is-hover .header-nav__link.has-sub:after, .header-nav__link:focus.has-sub:after, .header-nav__link:hover.has-sub:after { transition: 3s 0.1s; } .is-hover .header-nav__link.has-sub:after { transition: 0s; } .header-nav__link:last-child { margin-right: 0; } .header-nav__sub-holder { position: absolute; top: 100%; left: 0; padding: 30px 0 15px; width: 100%; text-align: left; z-index: 5; font-size: 0px; display: none; } .header-nav__sub-holder:hover { display: block; } .header-nav__sub-holder:before { content: ''; z-index: 0; display: block; position: absolute; height: 42px; width: 100%; bottom: 100%; left: 0; } .header--small .header-nav__sub-holder:before { height: 30px; } .header-nav__sub-holder:after { content: ''; z-index: 0; display: block; position: absolute; top: 0; height: 100%; width: 10000px; left: -5000px; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 3px 4px rgba(150, 150, 150, 0.2); } @media screen and (max-width: 991px) { .header-nav__sub-holder { display: none !important; } } .header-nav__link-group { display: none; position: relative; z-index: 10; } .header-nav__link-group.is-active { display: block; } .header-nav__group-control { display: block; position: relative; z-index: 10; padding: 2px 10px; } .header-nav__group-back { display: inline-block; position: relative; z-index: 10; font-size: 16px; color: #000; margin-bottom: 15px; } .header-nav__group-back:hover { color: #d43900; opacity: 1; } .header-nav__group-title { display: block; position: relative; z-index: 10; font-size: 20px; color: #000; font-weight: bold; padding: 2px 10px; margin-bottom: 15px; } .header-nav__group-title:hover { color: #d43900; opacity: 1; } .header-nav__sub-link { display: inline-block; vertical-align: top; position: relative; width: 33.33333%; font-size: 16px; margin-bottom: 15px; color: #000; position: relative; padding: 2px 10px; z-index: 1; } [data-menu-lv="1"] .header-nav__sub-link { padding-left: 34px; } .header-nav__sub-link > .header-nav__link-icon { position: absolute; left: 0; top: 3px; width: 24px; } .header-nav__sub-link:hover { opacity: 1; color: #d43900; } .header-nav__sub-link:last-child { margin-bottom: 0; } .header-nav__text-control { display: inline-block; vertical-align: middle; font-size: 0; margin-right: 14px; } @media screen and (max-width: 1600px) { .header-nav__text-control { margin-right: 15px; } } @media screen and (max-width: 1200px) { .header-nav__text-control { margin-right: 5px; } } .header-nav__text-control:last-child { margin-right: 0; } .header-nav__text-control a { display: inline-block; vertical-align: baseline; font-size: 12px; margin-right: 10px; } [data-key-txt-color="black"] .header-nav__text-control a { color: #000; } .header-nav__text-control a:last-child { margin-right: 0; } .header-nav__text-control a:hover { opacity: 1; color: #d43900; } [data-key-txt-color="black"] .header-nav__text-control a:hover { color: #d43900; } .header-nav__tools-holder { display: inline-block; vertical-align: middle; height: 100%; font-size: 0; margin-right: 20px; } @media screen and (max-width: 1600px) { .header-nav__tools-holder { margin-right: 15px; } } .header-nav__tools-holder:last-child { margin-right: 0; } .header-nav__tools-sub-holder { display: none; position: absolute; top: 100%; left: 50%; padding: 8px 15px 12px; text-align: left; z-index: 5; min-width: 80px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-top: -20px; background: #FFF; box-shadow: 0px 3px 4px rgba(150, 150, 150, 0.2); } @media screen and (max-width: 1480px) { .header-nav__tool--share .header-nav__tools-sub-holder { margin-left: -100px; } } @media screen and (max-width: 991px) { .header-nav__tools-sub-holder { display: none !important; } } .header-nav__tools-sub-holder:after { content: ''; display: block; width: 100%; height: 4px; left: 0; top: 0; position: absolute; background: #d43900; } .header-nav__tools-sublink { display: block; color: #000; font-size: 14px; text-align: center; } .header-nav__tools-sublink:hover { opacity: 1; color: #d43900; } .header-nav__tool { width: 20px; height: 100%; position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; background: url() no-repeat center center; background-size: 100% auto; z-index: 5; } .header-nav__tool.is-hidden { display: none !important; } .mob-nav__control .header-nav__tool { width: 24px; height: 24px; } .mob-nav__control .header-nav__tool:nth-child(1), .mob-nav__control .header-nav__tool:nth-child(2), .mob-nav__control .header-nav__tool:nth-child(3), .mob-nav__control .header-nav__tool:nth-child(4), .mob-nav__control .header-nav__tool:nth-child(5) { -webkit-animation: none; animation: none; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; opacity: 1; } .header-nav__tool .header-nav__tool-trigger { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .header-nav__tool:last-child { margin-right: 0; } .header-nav__tool img { width: 100%; display: block; margin: 0; } .header-nav__tool.is-active .header-nav__tools-sub-holder { display: block; } .header-nav__tool.header-nav__tool--lang { background-image: url(../images/common/icons/svg/white/icon-lang.svg); } .header-nav__tool.header-nav__tool--lang:hover { background-image: url(../images/common/icons/svg/orange/icon-lang.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--lang, .page-demo .header-nav__tool.header-nav__tool--lang, .mob-nav .header-nav__tool.header-nav__tool--lang, .header--small .header-nav__tool.header-nav__tool--lang { background-image: url(../images/common/icons/svg/black/icon-lang.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--lang:hover, .page-demo .header-nav__tool.header-nav__tool--lang:hover, .mob-nav .header-nav__tool.header-nav__tool--lang:hover, .header--small .header-nav__tool.header-nav__tool--lang:hover { background-image: url(../images/common/icons/svg/orange/icon-lang.svg); } .header-nav__tool.header-nav__tool--print { background-image: url(../images/common/icons/svg/white/icon-printer.svg); } .header-nav__tool.header-nav__tool--print:hover { background-image: url(../images/common/icons/svg/orange/icon-printer.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--print, .page-demo .header-nav__tool.header-nav__tool--print, .mob-nav .header-nav__tool.header-nav__tool--print, .header--small .header-nav__tool.header-nav__tool--print { background-image: url(../images/common/icons/svg/black/icon-printer.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--print:hover, .page-demo .header-nav__tool.header-nav__tool--print:hover, .mob-nav .header-nav__tool.header-nav__tool--print:hover, .header--small .header-nav__tool.header-nav__tool--print:hover { background-image: url(../images/common/icons/svg/orange/icon-printer.svg); } .header-nav__tool.header-nav__tool--share { z-index: 6; background-image: url(../images/common/icons/svg/white/icon-share.svg); } .header-nav__tool.header-nav__tool--share:hover { background-image: url(../images/common/icons/svg/orange/icon-share.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--share, .page-demo .header-nav__tool.header-nav__tool--share, .mob-nav .header-nav__tool.header-nav__tool--share, .header--small .header-nav__tool.header-nav__tool--share { background-image: url(../images/common/icons/svg/black/icon-share.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--share:hover, .page-demo .header-nav__tool.header-nav__tool--share:hover, .mob-nav .header-nav__tool.header-nav__tool--share:hover, .header--small .header-nav__tool.header-nav__tool--share:hover { background-image: url(../images/common/icons/svg/orange/icon-share.svg); } .header-nav__tool.header-nav__tool--search { display: none; background-image: url(../images/common/icons/svg/white/icon-zoom.svg); } .header--small .header-nav__tool.header-nav__tool--search { display: inline-block; } .header-nav__tool.header-nav__tool--search + .header-nav__sub-holder { z-index: -1; } .header-nav__tool.header-nav__tool--search:hover { background-image: url(../images/common/icons/svg/orange/icon-zoom.svg); } .header-nav__tool.header-nav__tool--search.is-focus, .header-nav__tool.header-nav__tool--search.is-open, .header-nav__tool.header-nav__tool--search:hover { opacity: 1; } .header-nav__tool.header-nav__tool--search.is-focus + .header-nav__sub-holder, .header-nav__tool.header-nav__tool--search.is-open + .header-nav__sub-holder, .header-nav__tool.header-nav__tool--search:hover + .header-nav__sub-holder { display: block; } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--search, .page-demo .header-nav__tool.header-nav__tool--search, .mob-nav .header-nav__tool.header-nav__tool--search, .header--small .header-nav__tool.header-nav__tool--search { background-image: url(../images/common/icons/svg/black/icon-zoom.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--search:hover, .page-demo .header-nav__tool.header-nav__tool--search:hover, .mob-nav .header-nav__tool.header-nav__tool--search:hover, .header--small .header-nav__tool.header-nav__tool--search:hover { background-image: url(../images/common/icons/svg/orange/icon-zoom.svg); } .header-nav__tool.header-nav__tool--news { background-image: url(../images/common/icons/svg/white/icon-alert.svg); } .header-nav__tool.header-nav__tool--news.is-active, .header-nav__tool.header-nav__tool--news:hover { background-image: url(../images/common/icons/svg/orange/icon-alert.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--news, .page-demo .header-nav__tool.header-nav__tool--news, .mob-nav .header-nav__tool.header-nav__tool--news, .header--small .header-nav__tool.header-nav__tool--news { background-image: url(../images/common/icons/svg/black/icon-alert.svg); } [data-key-txt-color="black"] .header-nav__tool.header-nav__tool--news:hover, .page-demo .header-nav__tool.header-nav__tool--news:hover, .mob-nav .header-nav__tool.header-nav__tool--news:hover, .header--small .header-nav__tool.header-nav__tool--news:hover { background-image: url(../images/common/icons/svg/orange/icon-alert.svg); } .header-nav__tool--share-trigger { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .header-nav__tool-trigger:after { content: ''; display: block; width: 100%; height: 4px; left: 0; top: 100%; position: absolute; background: #d43900; transition: 0 0.1s; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; width: 10000px; left: -5000px; } .header-nav__tool-trigger.has-sub:after { width: 10000px; left: -5000px; } .header-nav__tool-trigger.is-active { color: #d43900; } .is-focus .header-nav__tool-trigger, .is-open .header-nav__tool-trigger, .is-hover .header-nav__tool-trigger, .header-nav__tool-trigger:focus, .header-nav__tool-trigger:hover { opacity: 1; color: #d43900; } .is-focus .header-nav__tool-trigger:before, .is-open .header-nav__tool-trigger:before, .is-hover .header-nav__tool-trigger:before, .header-nav__tool-trigger:focus:before, .header-nav__tool-trigger:hover:before { content: ''; display: block; position: absolute; width: 300px; height: 40%; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; } .is-focus .header-nav__tool-trigger:after, .is-open .header-nav__tool-trigger:after, .is-hover .header-nav__tool-trigger:after, .header-nav__tool-trigger:focus:after, .header-nav__tool-trigger:hover:after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); transition: 0.3s 0.1s; } .is-focus .header-nav__tool-trigger.has-sub:after, .is-open .header-nav__tool-trigger.has-sub:after, .is-hover .header-nav__tool-trigger.has-sub:after, .header-nav__tool-trigger:focus.has-sub:after, .header-nav__tool-trigger:hover.has-sub:after { transition: 3s 0.1s; } .is-hover .header-nav__tool-trigger.has-sub:after { transition: 0s; } /* END Style header-nav */ /* ------------------------------------------ */ /* Style for header-toolkit */ /* ------------------------------------------ */ /* Style for icon-link */ /* ------------------------------------------ */ .icon-link { font-weight: bold; white-space: nowrap; } .icon-link:hover { opacity: 1; } .icon-link:hover span { text-decoration: underline; } .icon-link img { display: inline-block; vertical-align: middle; width: 20px; } .icon-link.icon-link--download:before { content: ''; width: 20px; height: 20px; display: inline-block; vertical-align: middle; background: url(../images/common/icons/icon-download.png) no-repeat center center; background-size: 100%; margin-right: 5px; } .icon-link.icon-link--pdf:before { content: ''; width: 16px; height: 16px; display: inline-block; vertical-align: middle; background: url(../images/common/icons/pdf.gif) no-repeat center center; background-size: 100%; margin-right: 5px; } .icon-link.icon-link--pdf { font-size: 14px; } .icon-link span { display: inline-block; vertical-align: middle; white-space: normal; } /* END Style icon-link */ /* ------------------------------------------ */ /* Style for info-table */ /* ------------------------------------------ */ .theme--information-security .mainHolder a { /*color: #c12b41;*/ color: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } .mainHolder a:hover { opacity: 1; text-decoration: underline; } .theme--service-desk .themeTable th { background: #c187ff; } .theme--strategies .themeTable th { background: #c187ff; } .theme--legal .themeTable th { background: #71cdff; } .theme--community .themeTable th { background: #b0e600; } .theme--business .themeTable th { background: #00ffae; } .theme--infrastructure .themeTable th { background: #f7c624; } .theme--information-security .themeTable th { /*background: #f27486;*/ background: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ color : #ffffff; /*CyberSecurityThemeColorUpdate*/ } .info-table { position: relative; font-size: 16px; } @media screen and (max-width: 767px) { .info-table { font-size: 14px; } } .info-table.info-table--initialized:before, .info-table.info-table--initialized:after { content: ''; position: absolute; display: block; width: 30px; height: 100%; top: 0; z-index: 5; pointer-events: none; } .info-table.info-table--initialized:before { background: radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) 0 0; background-color: transparent; background-repeat: no-repeat; background-size: 10px 100%; left: 0; } .info-table.info-table--initialized:after { background: radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) 100% 0; background-color: transparent; background-repeat: no-repeat; background-size: 10px 100%; right: 0; } .info-table.info-table--initialized.at-left:before { opacity: 0; } .info-table.info-table--initialized.at-right:after { opacity: 0; } .info-table.no-scroll:before, .info-table.no-scroll:after { display: none; } .info-table .info-table__inner { position: relative; width: 100%; overflow-x: auto; } .info-table table { width: 100%; } .info-table table th { background: #ffc62e; padding: 15px; } .theme--strategies .info-table table th { background: #c187ff; } .theme--legal .info-table table th { background: #71cdff; } .theme--community .info-table table th { background: #b0e600; } .theme--business .info-table table th { background: #00ffae; } .theme--infrastructure .info-table table th { background: #f7c624; } .theme--information-security .info-table table th { /*background: #f27486;*/ background: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ color: #ffffff; /*CyberSecurityThemeColorUpdate*/ } @media screen and (max-width: 767px) { .info-table table th { padding: 5px; } } .info-table table td { padding: 15px; } @media screen and (max-width: 767px) { .info-table table td { padding: 5px; } } .info-table table th, .info-table table td { border-right: 1px solid #FFF; vertical-align: middle; } .info-table table th:last-child, .info-table table td:last-child { border-right: 0; } .info-table table th.info-table--cell-black, .info-table table td.info-table--cell-black { background: #000; color: #FFF; } @media screen and (max-width: 767px) { .info-table table th, .info-table table td { font-size: 12px; } } .info-table table th.align--hc, .info-table table td.align--hc { text-align: center; } .info-table table th.align--hl, .info-table table td.align--hl { text-align: left; } .remarksTd { min-width: 150px; } .info-table table th.align--hr, .info-table table td.align--hr { text-align: right; } .info-table table th.align--vt, .info-table table td.align--vt { vertical-align: top; } .info-table table th.align--vb, .info-table table td.align--vb { vertical-align: bottom; } .info-table table th.align--vm, .info-table table td.align--vm { vertical-align: middle; } .info-table table th.align--hvc, .info-table table td.align--hvc { text-align: center; vertical-align: middle; } .info-table table tr:nth-child(2n) td { background: #f6f6f6; } .info-table table tr:nth-child(2n+1) td { background: #fafafa; } .info-table__logo { max-width: 320px; } @media screen and (max-width: 991px) { .info-table__logo { max-width: 250px; } } @media screen and (max-width: 767px) { .info-table__logo { max-width: 30vw; } } @media screen and (max-width: 380px) { .info-table__logo { max-width: 40vw; } } /* END Style info-table */ /* ------------------------------------------ */ /* Style for inline-icon */ /* ------------------------------------------ */ .inline-icon { vertical-align: middle; float: left; margin-right: 10px; } /* END Style inline-icon */ /* END Style main-banner */ /* ------------------------------------------ */ /* Style for main-search */ /* ------------------------------------------ */ .main-search { position: relative; z-index: 10; max-width: 680px; margin: 0 auto; font-size: 0; } .mob-nav__holder .main-search { margin: 30px 0; max-width: 480px; } .main-search input { color: #000; border-bottom: 1px solid #d43900; background: transparent; position: relative; z-index: 5; display: inline-block; vertical-align: middle; padding:0px; width: calc(100% - 26px); } .main-search input::-webkit-input-placeholder { color: #d43900; } .main-search input:-moz-placeholder { /* Firefox 18- */ color: #d43900; } .main-search input::-moz-placeholder { /* Firefox 19+ */ color: #d43900; } .main-search input:-ms-input-placeholder { color: #d43900; } .mob-nav__holder .main-search input { /*padding: 0 10px;*/ width: calc(100% - 31px); } .main-search .main-search__btn { display: inline-block; vertical-align: middle; width: 26px; height: 26px; background: url(../images/common/icons/icon-zoom-orange.png) no-repeat center center; background-size: 100%; } .mob-nav__holder .main-search .main-search__btn { margin-right: 5px; } /* END Style main-search */ /* ------------------------------------------ */ /* Style for mini-title */ /* ------------------------------------------ */ .mini-title { margin: 0 0 15px; } /* END Style mini-title */ /* ------------------------------------------ */ /* Style for mob-nav */ /* ------------------------------------------ */ .mob-nav { position: fixed; width: 100%; height: 100%; top: 0; background: #FFF; transition: 0.3s; padding-top: 120px; display: none; overflow: auto; z-index: 15; } .mob-nav#lang-menu, .mob-nav#search-menu { z-index: 200; } .page-demo .mob-nav { display: block !important; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @media screen and (min-width: 992px) { .mob-nav { display: none !important; } } @media screen and (max-width: 991px) { .mob-nav { display: none; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .mob-menu-open .mob-nav { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @media screen and (max-width: 767px) { .mob-nav { padding-top: 80px; } } .mob-nav > .content-wrapper, .mob-nav > .mainHolder, .mob-nav > .main-banner__content-holder, .mob-nav > .block-homesquare-main-menu-menu, .mob-nav > .static-banner__content { width: 100%; padding: 125px 0; } @media screen and (max-width: 380px) { .mob-nav > .content-wrapper, .mob-nav > .mainHolder, .mob-nav > .main-banner__content-holder, .mob-nav > .block-homesquare-main-menu-menu, .mob-nav > .static-banner__content { padding: 100px 0; } } .mob-nav .header-nav__text-control, .mob-nav .header-nav__tools-holder { display: block; width: 100%; margin: 0 0 20px; padding: 0 3%; } .mob-nav .header-nav__text-control a { font-size: 18px; } .mob-nav__holder { padding: 0 3%; } .mob-nav__link { position: relative; color: #000; display: block; margin: 0 auto 10px; padding: 2px 3%; font-weight: 800; font-size: 30px; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; text-align: left; width: 100%; } @media screen and (max-width: 480px) { .mob-nav__link { font-size: 24px; } } .mob-nav__link:hover { color: #d43900; opacity: 1; } .mob-nav__link.has-sub: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%); } .mob-nav__lang { color: #000; display: block; margin: 0 auto 10px; padding: 2px 5%; font-weight: 800; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-size: 24px; text-align: left; width: 100%; } @media screen and (max-width: 480px) { .mob-nav__lang { font-size: 20px; } } .mob-nav__sub-holder { display: none; } .mob-nav__control { margin-top: 30px; } /* ------------------------------------------ */ /* Style for mob-subnav */ /* ------------------------------------------ */ .mob-subnav { position: fixed; width: 100%; height: 100%; top: 0; background: #FFF; transition: 0.3s; padding-top: 120px; display: none; overflow: auto; z-index: 20; } .mob-subnav[data-submenu-level="3"] { z-index: 30; } .mob-subnav[data-submenu-level="4"] { z-index: 40; } .mob-subnav[data-submenu-level="5"] { z-index: 50; } .mob-subnav[data-submenu-level="6"] { z-index: 60; } .mob-subnav[data-submenu-level="7"] { z-index: 70; } .mob-subnav[data-submenu-level="8"] { z-index: 80; } .mob-subnav[data-submenu-level="9"] { z-index: 90; } .mob-subnav[data-submenu-level="10"] { z-index: 100; } @media screen and (min-width: 992px) { .mob-subnav { display: none !important; } } @media screen and (max-width: 991px) { .mob-subnav { display: none; -webkit-transform: translateX(105%); -ms-transform: translateX(105%); transform: translateX(105%); display: block; } .mob-menu-open .mob-subnav.is-active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @media screen and (max-width: 767px) { .mob-subnav { padding-top: 80px; } } .mob-subnav > .content-wrapper, .mob-subnav > .mainHolder, .mob-subnav > .main-banner__content-holder, .mob-subnav > .block-homesquare-main-menu-menu, .mob-subnav > .static-banner__content { width: 100%; padding: 125px 0; } @media screen and (max-width: 380px) { .mob-subnav > .content-wrapper, .mob-subnav > .mainHolder, .mob-subnav > .main-banner__content-holder, .mob-subnav > .block-homesquare-main-menu-menu, .mob-subnav > .static-banner__content { padding: 100px 0; } } .mob-subnav .header-nav__text-control, .mob-subnav .header-nav__tools-holder { display: block; width: 100%; margin: 0 0 20px; padding: 0 3%; } .mob-subnav .header-nav__text-control a { font-size: 18px; } .mob-nav__holder { padding: 0 3%; } .mob-subnav__title-link, .mob-subnav__sub-link { color: #000; display: block; margin: 0 auto 10px; padding: 2px 3%; font-weight: 800; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; font-size: 30px; text-align: left; width: 100%; } @media screen and (max-width: 480px) { .mob-subnav__title-link, .mob-subnav__sub-link { font-size: 24px; } } .mob-subnav__title-link:hover, .mob-subnav__sub-link:hover { color: #d43900; opacity: 1; } .mob-subnav__title-link, .mob-subnav__sub-link { position: relative; } .mob-subnav__title-link { font-size: 30px; } @media screen and (max-width: 480px) { .mob-subnav__title-link { font-size: 24px; } } .mob-subnav__sub-link { font-size: 20px; } @media screen and (max-width: 480px) { .mob-subnav__sub-link { font-size: 18px; } } .mob-subnav__sub-link.has-sub: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%); } .mob-subnav__backbtn { display: block; padding: 2px 3%; color: #000; font-size: 16px; } .mob-subnav__backbtn:hover { color: #d43900; opacity: 1; } @media screen and (max-width: 480px) { .mob-subnav__backbtn { font-size: 14px; } } /* END Style mob-subnav */ /* ------------------------------------------ */ /* ------------------------------------------ */ /* Style for our-work */ /* ------------------------------------------ */ .our-work { position: relative; text-align: center; } .our-work .content-wrapper, .our-work .mainHolder, .our-work .main-banner__content-holder, .our-work .block-homesquare-main-menu-menu, .our-work .static-banner__content { max-width: 920px; } .our-work[data-row-item="4"] .content-wrapper, .our-work[data-row-item="4"] .mainHolder, .our-work[data-row-item="4"] .main-banner__content-holder, .our-work[data-row-item="4"] .block-homesquare-main-menu-menu, .our-work[data-row-item="4"] .static-banner__content { max-width: 960px; } .our-work[data-row-item="5"] .content-wrapper, .our-work[data-row-item="5"] .mainHolder, .our-work[data-row-item="5"] .main-banner__content-holder, .our-work[data-row-item="5"] .block-homesquare-main-menu-menu, .our-work[data-row-item="5"] .static-banner__content { max-width: 1200px; } .our-work__title { margin: 0 0 45px; } .our-work__holder { margin-left: -60px; margin-right: -60px; font-size: 0; } [data-row-item="5"] .our-work__holder { margin-left: -10px; margin-right: -10px; } @media screen and (max-width: 991px) { .our-work__holder { margin-left: -30px; margin-right: -30px; } } @media screen and (max-width: 640px) { .our-work__holder { margin-left: -15px; margin-right: -15px; } } .epic-service__item { position: relative; display: inline-block; vertical-align: top; padding: 0 60px; width: 33.3333%; margin: 0 auto 30px; } @media screen and (min-width: 641px) { [data-row-item="4"] .epic-service__item { width: 25%; } [data-row-item="5"] .epic-service__item { width: 20%; padding: 0 10px; } } @media screen and (max-width: 991px) { .epic-service__item { padding: 0 30px; } } @media screen and (max-width: 640px) { .epic-service__item { width: 50%; padding: 0 15px; } } @media screen and (max-width: 380px) { .epic-service__item { width: 100%; padding: 0 15px; } } .epic-service__item-inner { width: 100%; } .epic-service__item-inner:hover .epic-service__item-title { color: #d43900; } .epic-service__item-img { display: block; width: 100%; margin: 0 auto 15px; max-width: 140px; } .epic-service__item-icon { display: block; width: 100%; position: relative; margin: 0 auto 15px; max-width: 140px; background: url() no-repeat center center; background-size: cover; transition: 0.3s; border-radius:20px; -webkit-box-shadow: 2px 3px 14px -1px rgba(0,0,0,0.75); -moz-box-shadow: 2px 3px 14px -1px rgba(0,0,0,0.75); box-shadow: 2px 3px 14px -1px rgba(0,0,0,0.75); } .epic-service__item-icon:before { content: ''; display: block; position: relative; width: 100%; padding-bottom: 100%; z-index: 10; } .epic-service__item--chemical .epic-service__item-icon { background-image: url(../images/home/icon_chemical_waste.jpg?v=2); } .bw-ver .epic-service__item--chemical .epic-service__item-icon { background-image: url(../images/home/icon_chemical_waste.jpg?v=2) !important; } .epic-service__item--chemical .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_chemical_waste.jpg?v=2); } .epic-service__item--clinical .epic-service__item-icon { background-image: url(../images/home/icon_clinical_waste.jpg?v=2); } .bw-ver .epic-service__item--clinical .epic-service__item-icon { background-image: url(../images/home/icon_clinical_waste.jpg?v=2) !important; } .epic-service__item--clinical .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_clinical_waste.jpg?v=2); } .epic-service__item--air .epic-service__item-icon { background-image: url(../images/home/icon_air_quality.jpg?v=2); } .bw-ver .epic-service__item--air .epic-service__item-icon { background-image: url(../images/home/icon_air_quality.jpg?v=2) !important; } .epic-service__item--air .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_air_quality.jpg?v=2); } .epic-service__item--beach .epic-service__item-icon { background-image: url(../images/home/icon_beach_water_quality.jpg?v=2); } .bw-ver .epic-service__item--beach .epic-service__item-icon { background-image: url(../images/home/icon_beach_water_quality.jpg?v=2) !important; } .epic-service__item--beach .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_beach_water_quality.jpg?v=2); } .epic-service__item--vehicle .epic-service__item-icon { background-image: url(../images/home/icon_motor_noise_approval_list.jpg?v=2); } .bw-ver .epic-service__item--vehicle .epic-service__item-icon { background-image: url(../images/home/icon_motor_noise_approval_list.jpg?v=2) !important; } .epic-service__item--vehicle .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_motor_noise_approval_list.jpg?v=2); } .epic-service__item--marine .epic-service__item-icon { background-image: url(../images/home/icon_marine_water_quality.jpg?v=2); } .bw-ver .epic-service__item--marine .epic-service__item-icon { background-image: url(../images/home/icon_marine_water_quality.jpg?v=2) !important; } .epic-service__item--marine .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_marine_water_quality.jpg?v=2); } .epic-service__item--river .epic-service__item-icon { background-image: url(../images/home/icon_river_water_quality.jpg?v=2); } .bw-ver .epic-service__item--river .epic-service__item-icon { background-image: url(../images/home/icon_river_water_quality.jpg?v=2) !important; } .epic-service__item--river .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_river_water_quality.jpg?v=2); } .epic-service__item--noise-permit .epic-service__item-icon { background-image: url(../images/home/icon_construction_noise_permit.jpg?v=2); } .bw-ver .epic-service__item--noise-permit .epic-service__item-icon { background-image: url(../images/home/icon_construction_noise_permit.jpg?v=2) !important; } .epic-service__item--noise-permit .epic-service__item-inner:hover .epic-service__item-icon { background-image: url(../images/home/icon_construction_noise_permit.jpg?v=2); } .epic-service__item-title { font-weight: bold; font-size: 18px; transition: 0.3s; } @media screen and (max-width: 1480px) { [data-row-item="5"] .epic-service__item-title { font-size: 14px; } } @media screen and (max-width: 991px) { .epic-service__item-title { font-size: 16px; max-width: 90%; margin: 0 auto; } } .our-work__icon { margin-bottom: 10px; } .our-work__icon svg { width: 140px; height: 140px; } /* END Style our-work */ /* ------------------------------------------ */ /* Style for sample */ /* ------------------------------------------ */ .skip-div { padding: 15px; margin: 5px; position: absolute; z-index: 1001; top: 80px; left: 20px; min-width: 140px; white-space: nowrap; } .skip-link { position: relative; z-index: 1001; } .skip-link__link { display: -moz-inline-stack; display: block; margin: 0; max-height: 0; color: darkgray; position: absolute; font-size: 0pt; } .skip-link__link:focus { max-height: 1920px; display: inline-block; padding: 10px; margin: 5px; outline: 3px solid #FFF; text-decoration: underline; left: 20px; top: 20px; min-width: 150px; color: white; font-size: 16pt; background-color: #d43900; opacity: 1; } #skiptargetholder { display: block; margin: 0 auto; max-height: 0; } #skiptargetholder #skiptarget { display: -moz-inline-stack; display: block; margin: 0; max-height: 0; } /* END Style sample */ /* ------------------------------------------ */ /* ------------------------------------------ */ /* Style for static-banner */ /* ------------------------------------------ */ .static-banner { position: relative; height: 350px; width: 100%; display: block; background: url() no-repeat center center; background-size: cover; } @media screen and (max-width: 640px) { .static-banner { height: 350px; } } @media screen and (max-width: 480px) { .static-banner { height: 300px; } } .static-banner__bg { position: absolute; width: 100%; height: 120%; top: 0%; left: 0; background: url() no-repeat center center; background-size: cover; z-index: 0; } .dzsparallaxer .static-banner__bg.dzsparallaxer--target { position: absolute; } .static-banner__content { display: table; height: 100%; z-index: 5; } .static-banner__txt { display: table-cell; vertical-align: middle; } .static-banner__title-tag { display: block; font-size: 26px; font-weight: 400; font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif; } .static-banner__title { padding-top: 90px; width: 68%; line-height: 1.25em; margin: 0; text-align: left; color: #fff; } [data-key-txt-color="black"] .static-banner__title[data-txt-color="black"] { color: #000; } [data-key-txt-color="white"] .static-banner__title[data-txt-color="black"] { color: #000; } [data-key-txt-color="black"] .static-banner__title[data-txt-color="white"] { color: #fff; } [data-key-txt-color="white"] .static-banner__title[data-txt-color="white"] { color: #fff; } [data-key-txt-color="black"] .static-banner__title { color: #000; } [data-key-txt-color="white"] .static-banner__title { color: #fff; } [data-txt-color="black"] .static-banner__title { color: #000; } [data-txt-color="white"] .static-banner__title { color: #fff; } @media screen and (max-width: 991px) { .static-banner__title { padding-top: 70px; } } @media screen and (max-width: 767px) { .static-banner__title { padding-top: 60px; } } @media screen and (max-width: 480px) { .static-banner__title { width: 100%; } } .static-banner__control { position: absolute; width: 100%; bottom: 12%; z-index: 10; text-align: center; font-size: 0; } @media screen and (max-width: 480px) { .static-banner__control { bottom: 5%; } } .static-banner__control .btn { margin: 0 10px; } @media screen and (max-width: 480px) { .static-banner__control .btn { margin: 0 3px; } } @media screen and (max-width: 315px) { .static-banner__control .btn { width: 90%; margin-bottom: 10px; } } /* END Style static-banner */ /* ------------------------------------------ */ @media screen and (max-width: 640px) { .custom-select a > span { display:inline-block; line-height: 1.1em; } .chemical-select-category a { height:70px; line-height:20px; } } /* ------------------------------------------ */ /* Style for top-search */ /* ------------------------------------------ */ .top-search { position: absolute; top: 100px; left: 0; width: 100%; color: #FFF; z-index: 50; font-size: 0; top: 100px; } [data-key-txt-color="black"] .top-search[data-txt-color="black"] { color: #000; } [data-key-txt-color="white"] .top-search[data-txt-color="black"] { color: #000; } [data-key-txt-color="black"] .top-search[data-txt-color="white"] { color: #fff; } [data-key-txt-color="white"] .top-search[data-txt-color="white"] { color: #fff; } [data-key-txt-color="black"] .top-search { color: #000; } [data-key-txt-color="white"] .top-search { color: #fff; } [data-txt-color="black"] .top-search { color: #000; } [data-txt-color="white"] .top-search { color: #fff; } .page-home .top-search { top: 100px; } @media screen and (max-width: 991px) { .page-home .top-search { top: 110px; } } @media screen and (max-width: 767px) { .page-home .top-search { top: 80px; } } @media screen and (max-width: 767px) and (max-height: 420px) { .page-home .top-search { top: 65px; } } @media screen and (max-width: 767px) { .page-home .top-search .content-wrapper, .page-home .top-search .mainHolder, .page-home .top-search .main-banner__content-holder, .page-home .top-search .block-homesquare-main-menu-menu, .page-home .top-search .static-banner__content { width: 85%; } } @media screen and (max-width: 991px) { .top-search { top: 90px; } } @media screen and (max-width: 767px) { .top-search { top: 70px; } } @media screen and (max-width: 767px) and (max-height: 420px) { .top-search { top: 65px; } } .top-search .main-search { display: inline-block; position: relative; width: 205px; } @media screen and (max-width: 1280px) { .top-search .main-search { margin-right: 0; } } @media screen and (max-width: 991px) { .top-search .main-search { display: none; } } @media screen and (max-width: 480px) { .top-search .main-search { max-width: 250px; padding: 10px 15px; width: 100%; } } .top-search .main-search input { height: 35px; padding: 0; color: #FFF; border-bottom: 1px solid #FFF; font-size: 14px; } @media screen and (max-width: 480px) { .top-search .main-search input { height: 30px; } } [data-key-txt-color="black"] .top-search .main-search input { color: #000; border-bottom: 1px solid #000; } [data-key-txt-color="white"] .top-search .main-search input { color: #fff; border-bottom: 1px solid #fff; } [data-txt-color="black"] .top-search .main-search input { color: #000; border-bottom: 1px solid #000; } [data-txt-color="white"] .top-search .main-search input { color: #fff; border-bottom: 1px solid #fff; } .top-search .main-search input:-webkit-autofill { transition: background 100000s, color 100000s; color: #FFF !important; } [data-key-txt-color="black"] .top-search .main-search input:-webkit-autofill[data-txt-color="black"] { color: #000; } [data-key-txt-color="white"] .top-search .main-search input:-webkit-autofill[data-txt-color="black"] { color: #000; } [data-key-txt-color="black"] .top-search .main-search input:-webkit-autofill[data-txt-color="white"] { color: #fff; } [data-key-txt-color="white"] .top-search .main-search input:-webkit-autofill[data-txt-color="white"] { color: #fff; } [data-key-txt-color="black"] .top-search .main-search input:-webkit-autofill { color: #000; } [data-key-txt-color="white"] .top-search .main-search input:-webkit-autofill { color: #fff; } [data-txt-color="black"] .top-search .main-search input:-webkit-autofill { color: #000; } [data-txt-color="white"] .top-search .main-search input:-webkit-autofill { color: #fff; } .top-search .main-search input::-webkit-input-placeholder { font-size: 14px; color: #FFF; } [data-key-txt-color="black"] .top-search .main-search input::-webkit-input-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="white"] .top-search .main-search input::-webkit-input-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="black"] .top-search .main-search input::-webkit-input-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="white"] .top-search .main-search input::-webkit-input-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="black"] .top-search .main-search input::-webkit-input-placeholder { color: #000; } [data-key-txt-color="white"] .top-search .main-search input::-webkit-input-placeholder { color: #fff; } [data-txt-color="black"] .top-search .main-search input::-webkit-input-placeholder { color: #000; } [data-txt-color="white"] .top-search .main-search input::-webkit-input-placeholder { color: #fff; } .top-search .main-search input:-moz-placeholder { /* Firefox 18- */ font-size: 14px; color: #FFF; } [data-key-txt-color="black"] .top-search .main-search input:-moz-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="white"] .top-search .main-search input:-moz-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="black"] .top-search .main-search input:-moz-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="white"] .top-search .main-search input:-moz-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="black"] .top-search .main-search input:-moz-placeholder { color: #000; } [data-key-txt-color="white"] .top-search .main-search input:-moz-placeholder { color: #fff; } [data-txt-color="black"] .top-search .main-search input:-moz-placeholder { color: #000; } [data-txt-color="white"] .top-search .main-search input:-moz-placeholder { color: #fff; } .top-search .main-search input::-moz-placeholder { /* Firefox 19+ */ font-size: 14px; color: #FFF; } [data-key-txt-color="black"] .top-search .main-search input::-moz-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="white"] .top-search .main-search input::-moz-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="black"] .top-search .main-search input::-moz-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="white"] .top-search .main-search input::-moz-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="black"] .top-search .main-search input::-moz-placeholder { color: #000; } [data-key-txt-color="white"] .top-search .main-search input::-moz-placeholder { color: #fff; } [data-txt-color="black"] .top-search .main-search input::-moz-placeholder { color: #000; } [data-txt-color="white"] .top-search .main-search input::-moz-placeholder { color: #fff; } .top-search .main-search input:-ms-input-placeholder { font-size: 14px; color: #FFF; } [data-key-txt-color="black"] .top-search .main-search input:-ms-input-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="white"] .top-search .main-search input:-ms-input-placeholder[data-txt-color="black"] { color: #000; } [data-key-txt-color="black"] .top-search .main-search input:-ms-input-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="white"] .top-search .main-search input:-ms-input-placeholder[data-txt-color="white"] { color: #fff; } [data-key-txt-color="black"] .top-search .main-search input:-ms-input-placeholder { color: #000; } [data-key-txt-color="white"] .top-search .main-search input:-ms-input-placeholder { color: #fff; } [data-txt-color="black"] .top-search .main-search input:-ms-input-placeholder { color: #000; } [data-txt-color="white"] .top-search .main-search input:-ms-input-placeholder { color: #fff; } .top-search .main-search .main-search__btn { background-image: url(../images/common/icons/icon-zoom-white.png); } .top-search .main-search .main-search__btn:hover { background-image: url(../images/common/icons/icon-zoom-orange.png); } [data-key-txt-color="black"] .top-search .main-search .main-search__btn { background-image: url(../images/common/icons/icon-zoom.png); } [data-key-txt-color="black"] .top-search .main-search .main-search__btn:hover { background-image: url(../images/common/icons/icon-zoom-orange.png); } [data-key-txt-color="white"] .top-search .main-search .main-search__btn { background-image: url(../images/common/icons/icon-zoom-white.png); } [data-key-txt-color="white"] .top-search .main-search .main-search__btn:hover { background-image: url(../images/common/icons/icon-zoom-orange.png); } [data-key-txt-color="black"] .top-search[data-txt-color="black"] .main-search input, [data-key-txt-color="white"] .top-search[data-txt-color="black"] .main-search input { color: #000; border-bottom: 1px solid #000; } [data-key-txt-color="black"] .top-search[data-txt-color="black"] .main-search input::-webkit-input-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="black"] .main-search input::-webkit-input-placeholder { color: #000; } [data-key-txt-color="black"] .top-search[data-txt-color="black"] .main-search input:-moz-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="black"] .main-search input:-moz-placeholder { /* Firefox 18- */ color: #000; } [data-key-txt-color="black"] .top-search[data-txt-color="black"] .main-search input::-moz-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="black"] .main-search input::-moz-placeholder { /* Firefox 19+ */ color: #000; } [data-key-txt-color="black"] .top-search[data-txt-color="black"] .main-search input:-ms-input-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="black"] .main-search input:-ms-input-placeholder { color: #000; } [data-key-txt-color="black"] .top-search[data-txt-color="black"] .main-search__btn, [data-key-txt-color="white"] .top-search[data-txt-color="black"] .main-search__btn { background-image: url(../images/common/icons/icon-zoom.png); } [data-key-txt-color="black"] .top-search[data-txt-color="black"] .main-search__btn:hover, [data-key-txt-color="white"] .top-search[data-txt-color="black"] .main-search__btn:hover { background-image: url(../images/common/icons/icon-zoom-orange.png); } [data-key-txt-color="black"] .top-search[data-txt-color="white"] .main-search input, [data-key-txt-color="white"] .top-search[data-txt-color="white"] .main-search input { color: #fff; border-bottom: 1px solid #fff; } [data-key-txt-color="black"] .top-search[data-txt-color="white"] .main-search input::-webkit-input-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="white"] .main-search input::-webkit-input-placeholder { color: #fff; } [data-key-txt-color="black"] .top-search[data-txt-color="white"] .main-search input:-moz-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="white"] .main-search input:-moz-placeholder { /* Firefox 18- */ color: #fff; } [data-key-txt-color="black"] .top-search[data-txt-color="white"] .main-search input::-moz-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="white"] .main-search input::-moz-placeholder { /* Firefox 19+ */ color: #fff; } [data-key-txt-color="black"] .top-search[data-txt-color="white"] .main-search input:-ms-input-placeholder, [data-key-txt-color="white"] .top-search[data-txt-color="white"] .main-search input:-ms-input-placeholder { color: #fff; } [data-key-txt-color="black"] .top-search[data-txt-color="white"] .main-search__btn, [data-key-txt-color="white"] .top-search[data-txt-color="white"] .main-search__btn { background-image: url(../images/common/icons/icon-zoom-white.png); } [data-key-txt-color="black"] .top-search[data-txt-color="white"] .main-search__btn:hover, [data-key-txt-color="white"] .top-search[data-txt-color="white"] .main-search__btn:hover { background-image: url(../images/common/icons/icon-zoom-orange.png); } .top-search__holder { text-align: right; } /* END Style top-search */ /* ------------------------------------------ */ /* Style the form - display items horizontally */ .form-grid__inline_holder { display: flex !important; flex-flow: row wrap; align-items: center; } .form-grid__inline_holder .field-label{ width:25%; } .form-grid__inline_holder .form-grid__input{ width:80%; } /* Add some margins for each label */ .form-grid__inline_holder label { margin: 5px 10px 5px 0; } /* Style the input fields */ .form-grid__inline_holder input { vertical-align: middle; margin: 5px 10px 5px 0; padding: 10px; border: 1px solid #ddd; } /* Style the submit button */ .form-grid__inline_holder button { padding: 10px 20px; background-color: dodgerblue; border: 1px solid #ddd; color: white; } .form-grid__inline_holder .field-label{ padding-left:1em; } .form-grid__inline_holder button:hover { background-color: royalblue; } /* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */ @media (max-width: 800px) { .form-grid__inline_holder input { margin: 10px 0; } .form-grid__inline_holder { flex-direction: column; align-items: stretch; } .form-grid__inline_holder .field-label{ width:auto; padding-left:0; } .form-grid__inline_holder .form-grid__input{ width:auto; } } .table-td-column1 { width: 20%; } .table-td-column2 { width: 80%; } .custom-select.custom-select--on-default2 { width: 15%; } .custom-select.custom-select--on-default3 { width: 35%; } @media screen and (max-width: 640px) { .table-td-column1 { width: 40%; word-wrap:normal; } .table-td-column2 { width: 60%; } } @media screen and (max-width: 800px) { .custom-select.custom-select--on-default2 { width: 100%; } .custom-select.custom-select--on-default3 { width: 100%; } } .slick-prev:before { content: "\f053"; font-family: 'FontAwesome'; color: #13b5c6; font-size: 60px; } .slick-next:before { content: "\f054"; font-family: 'FontAwesome'; color: #13b5c6; font-size: 60px; } .slick-slide img { margin:10px; display: block; width: 100%; padding:5px; -webkit-box-shadow: 1px 0px 10px -1px rgba(0,0,0,0.75); -moz-box-shadow: 1px 0px 10px -1px rgba(0,0,0,0.75); box-shadow: 1px 0px 10px -1px rgba(0,0,0,0.75); } @media screen and (max-width: 640px) { .carousel .slick-slide img{ height:180px; } } .carousel .slick-track{ float:left; } .carousel .slick-prev{ left:-30px; } .carousel .slick-next{ right:-15px; } .img-cover{ padding:10px; } .image_row { display: flex; } .image_column { flex: 33.33%; padding: 5px; } /* Absolute Center Spinner */ .loading { position: fixed; z-index: 999; height: 3em; width: 30em; height: 200em\9;/* IE8 and below */ width: 200em\9;/* IE8 and below */ overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: none; text-align : center; opacity: 0.5; background-color: white; } /* Transparent Overlay */ .loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); } /* :not(:required) hides these rules from IE9 and below */ .loading:not(:required) { /* hide "loading..." text */ font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .loading:not(:required):after { content: ''; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; } /* Animation */ @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } #form\:mapa,#form\:mapb,#form\:mapc { border: none; height: auto; max-width: 100%; width: auto; } #para_mapa,#para_mapb,#para_mapc { border: none; height: auto; max-width: 100%; width: auto; } #airReport\:graph { border: none; height: auto; max-width: 100%; width: auto; } #catForm\:graph{ border: none; height: auto; max-width: 100%; width: auto; } .invalid_msg{ font-size:20px; padding-top:40px; } /* Air Qualiy Data */ .air_table_row{ display:flex; flex-wrap:wrap; } .air_table_td{ width:33%; } .air_station_table_td{ width:50%; } .air_station_table_td label { min-width:200px; display: inline-block; padding:10px; } @media screen and (max-width: 991px) { .air_table_td{ width:100%; } .air_station_table_td{ width:100%; } .air_timerange_td{ width:100%; } } .sitemap_title{ padding-top:10px; margin-bottom:0px; margin-top:20px; } .site_map_link{ padding-left:5%; padding-top:20px; } .non_display{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .large_select .m_30_width select{ width:30%; } /* End Air Quality Data */ /* END Style the form */ /* ------------------------------------------ */ /* END Style desc */ /* ------------------------------------------ */ /* Style for event-calendar */ /* ------------------------------------------ */ .ui-datepicker { width: 320px; background: #fff; } .ui-datepicker .ui-datepicker-prev { margin-left: 10px; } .ui-datepicker .ui-datepicker-next { float: right; margin-right: 10px; } .ui-datepicker .ui-datepicker-title { text-align: center; } .ui-datepicker .ui-datepicker-calendar { margin: 10px 0; width: 100%; } .ui-datepicker .ui-datepicker-calendar th { width: 14%; } .ui-datepicker .ui-datepicker-calendar td { padding: 5px; text-align: center; } .event-calendar { position: relative; overflow: hidden; } .event-calendar:before, .event-calendar:after { content: ''; position: absolute; display: block; width: 100px; height: 100%; -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } #ui-datepicker-div{ width:400px; } .ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{ width:auto !important; } .event-calendar:before { left: -50px; top: -25%; background: #d43900; } @media screen and (max-width: 991px) { .event-calendar:before { left: -90px; } } @media screen and (max-width: 767px) { .event-calendar:before { left: -120px; } } .event-calendar:after { right: -50px; bottom: -25%; background: #ffc62e; } @media screen and (max-width: 991px) { .event-calendar:after { right: -90px; } } @media screen and (max-width: 767px) { .event-calendar:after { right: -120px; } } .event-calendar.event-calendar--inner:before, .event-calendar.event-calendar--inner:after { display: none; } @media screen and (max-width: 1280px) and (min-width: 992px) { .event-calendar .content-wrapper, .event-calendar .mainHolder, .event-calendar .main-banner__content-holder, .event-calendar .block-homesquare-main-menu-menu, .event-calendar .static-banner__content { width: 90%; } } .event-calendar__title { display: block; text-align: center; margin-bottom: 45px; } .event-calendar__top { font-size: 0; position: relative; z-index: 15; } .event-calendar__calendar-holder { display: inline-block; width: 50%; text-align: center; } @media screen and (max-width: 991px) { .event-calendar__calendar-holder { width: 60%; } } @media screen and (max-width: 640px) { .event-calendar__calendar-holder { display: block; width: 90%; margin: 0 auto 30px; } } .event-calendar__list-holder { display: inline-block; width: 50%; vertical-align: top; } @media screen and (max-width: 991px) { .event-calendar__list-holder { width: 40%; } } @media screen and (max-width: 640px) { .event-calendar__list-holder { display: block; width: 90%; margin: 0 auto; } } .event-calendar__list-item { display: table; table-layout: fixed; width: 100%; padding-bottom: 16px; } .event-calendar__list-item:last-child { padding-bottom: 0; } .event-calendar__list-item.is-active .event-calendar__list-day .calendar__datedata { background: #9e4100; } .event-calendar__list-day { display: table-cell; vertical-align: middle; width: 100px; } @media screen and (max-width: 991px) { .event-calendar__list-day { width: 80px; } } .event-calendar__list-day{ /*position: absolute;*/ width:auto; height:100%; } .event-calendar__datedata { top:-20px; left:0; width: 70px; height: 70px; line-height: 70px; text-align: left; border-radius: 50%; background: #d43900; color: #FFF; text-align: center; font-size: 12px; position:relative; font-weight:bold; z-index:998; } .event-calendar__dateyeardata { top:0; left:0; width: 30px; height: 30px; text-align: center; line-height: 28px; border-radius:50%; background: #ff0000; color: #ffffff; font-size: 11px; position:relative; z-index:999; } .theme--strategies .event-calendar__datedata { background: #c187ff; } .theme--legal .event-calendar__datedata { background: #71cdff; } .theme--community .event-calendar__datedata { background: #b0e600; } .theme--business .event-calendar__datedata { background: #00ffae; } .theme--infrastructure .event-calendar__datedata { background: #f7c624; } .theme--information-security .event-calendar__datedata{ /*color: #f27486;*/ color: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } .theme--strategies .event-calendar__datedata{ color: #c187ff; } .theme--legal .event-calendar__datedata{ color: #71cdff; } .theme--community .event-calendar__datedata { color: #b0e600; } .theme--business .event-calendar__datedata{ color: #000000; } .theme--infrastructure .event-calendar__datedata{ color: #f7c624; } .theme--information-security .event-calendar__datedata { /*color: #f27486;*/ color: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } .theme--strategies .event-calendar__list-day .calendar__datedata, .theme--legal .event-calendar__list-day .calendar__datedata, .theme--community .event-calendar__list-day .calendar__datedata, .theme--business .event-calendar__list-day .calendar__datedata, .theme--infrastructure .event-calendar__list-day .calendar__datedata, .theme--information-security .event-calendar__list-day .calendar__datedata { color: #000; } @media screen and (max-width: 991px) { .event-calendar__list-day .calendar__datedata { width: 70px; height: 70px; line-height: 70px; font-size: 11px; } } .event-calendar__dateth { position: absolute; font-size: 1px; height: 1px; width: 1px; left: 99999px; } .event-calendar__list-txt { width: inherit; padding-left: 100px; display: table-cell; vertical-align: middle; } .event-calendar__list-title { font-weight: bold; font-size: 18px; margin: 0 0 5px; } @media screen and (max-width: 991px) { .event-calendar__list-title { font-size: 16px; line-height: 1.2em; } } .event-calendar__list-detail { margin: 0; font-size: 13px; } @media screen and (max-width: 991px) { .event-calendar__list-detail { line-height: 1.2em; } } .ui-datepicker { z-index: 100 !important; } .ui-datepicker { width: 400px; height: 380px; } @media screen and (max-width: 991px) { .ui-datepicker { width: 300px; } } @media screen and (max-width: 480px) { .ui-datepicker { width: 100%; margin: 0 auto 30px; } } .ui-datepicker-title { font-size: 20px; font-weight: bold; color: #000; } @media screen and (max-width: 991px) { .ui-datepicker-title { font-size: 16px; } } @media screen and (max-width: 640px) { .ui-datepicker-title { font-size: 12px; } } .ui-datepicker-calendar { font-size: 16px; text-transform: uppercase; } @media screen and (max-width: 480px) { .ui-datepicker-calendar { font-size: 14px; } } @media screen and (max-width: 380px) { .ui-datepicker-calendar { font-size: 12px; } } .ui-widget.ui-widget-content { border: 0; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { font-weight: bold; background: #FFF; border: 0; text-align: center; } .ui-datepicker-calendar .ui-state-default { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; padding: 0; } .ui-widget-content .ui-state-custom-highlight .ui-state-default { position: relative; border: 0; background: #d43900; color: #FFF; } .theme--strategies .ui-widget-content .ui-state-custom-highlight .ui-state-default { background: #c187ff; } .theme--legal .ui-widget-content .ui-state-custom-highlight .ui-state-default { background: #71cdff; } .theme--community .ui-widget-content .ui-state-custom-highlight .ui-state-default { background: #b0e600; } .theme--business .ui-widget-content .ui-state-custom-highlight .ui-state-default { background: #00ffae; } .theme--infrastructure .ui-widget-content .ui-state-custom-highlight .ui-state-default { background: #f7c624; } .theme--information-security .ui-widget-content .ui-state-custom-highlight .ui-state-default { /*background: #f27486;*/ background: #ed2c1f; /*CyberSecurityThemeColorUpdate*/ } .theme--business .ui-widget-content .ui-state-custom-highlight .ui-state-default { color: #000; } .ui-widget-content .ui-state-custom-highlight.ui-datepicker-current-day .ui-state-default { background: #9e4100; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: auto; } .event-calendar__search { background: #2b2b2b; } .event-calendar__control { display: table; width: 100%; } .event-calendar__control-item { text-align: center; display: table-cell; vertical-align: middle; padding-right: 15px; font-size: 0; font-weight: bold; width: 25%; color: #FFF; white-space: nowrap; } .event-calendar__control-item:last-child { padding-right: 0; } .event-calendar__control-item > * { white-space: normal; } .event-calendar__control-item input { border: 0; border-bottom: 1px solid #FFF; background: transparent; color: #FFF; padding: 0; } .event-calendar__control-item input::-webkit-input-placeholder { color: #FFF; } .event-calendar__control-item input:-moz-placeholder { /* Firefox 18- */ color: #FFF; } .event-calendar__control-item input::-moz-placeholder { /* Firefox 19+ */ color: #FFF; } .event-calendar__control-item input:-ms-input-placeholder { color: #FFF; } .event-calendar__control-item .custom-select .custom-select__trigger { border: 0; border-bottom: 1px solid #FFF; color: #FFF; padding: 0; padding-right: 35px; text-align: left; } .event-calendar__control-item .custom-select .custom-select__trigger:after { right: 5px; border-color: #FFF transparent transparent transparent; } .event-calendar__control-item .datepicker-item { display: inline-block; width: 160px; } .event-calendar__to { font-weight: normal; font-size: 20px; margin: 0 15px; } .ui-datepicker select.ui-datepicker-month { width: auto; } .ui-datepicker .ui-state-hover.ui-datepicker-prev-hover, .ui-datepicker .ui-state-hover.ui-datepicker-next-hover { border: 0; opacity: 1; top: 2px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { width: 28px; height: 28px; display: block; margin-left: 0; margin-right: 0; } @media screen and (max-width: 380px) { .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: -6px; } } .ui-datepicker .ui-datepicker-prev { left: 5px; } .ui-datepicker .ui-datepicker-prev.ui-state-hover.ui-datepicker-prev-hover { left: 5px; } .ui-datepicker .ui-datepicker-next { right: 5px; } .ui-datepicker .ui-datepicker-next.ui-state-hover.ui-datepicker-next-hover { right: 5px; } .ui-widget-header { background: #FFF; border: #FFF; } .ui-widget-header .ui-icon { background: url(); font-size: 0; top: 15px; } .ui-widget-header .ui-icon:hover { border: 0; } .ui-widget-header .ui-icon:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; margin-left: -7.5px; margin-top: -7.5px; width: 0; height: 0; border-style: solid; border-color: transparent #000 transparent transparent; } .ui-datepicker .ui-datepicker-calendar td { padding: 10px 5px; } @media screen and (max-width: 380px) { .ui-datepicker .ui-datepicker-calendar td { padding: 5px 3px; } } .ui-datepicker .ui-datepicker-prev .ui-icon:before { border-width: 7.5px 12px 7.5px 0; } .ui-datepicker .ui-datepicker-next .ui-icon:before { border-color: transparent transparent transparent #000; border-width: 7.5px 0 7.5px 12px; } .ui-widget-header .ui-icon { background: url(); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { color: #000; background : #d9effb; } .ui-datepicker-unselectable.ui-state-custom-highlight .ui-state-default { z-index: 1000; color: #FFF; position: relative; background: transparent; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, Arial, sans-serif; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { display: inline-block; vertical-align: middle; height: 30px; font-size: 16px; } @media screen and (max-width: 991px) { .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { font-size: 14px; } } @media screen and (max-width: 767px) { .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { font-size: 12px; } } .event-calendar__btn-today { font-family: "Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, Arial, sans-serif; display: inline-block; vertical-align: middle; line-height: 28px; padding: 0 5px; font-weight: bold; margin-left: 3px; border: 1px solid darkgray; font-size: 16px; } .event-calendar__btn-today:hover { opacity: 1; border: 1px solid #8a8a8a; } @media screen and (max-width: 991px) { .event-calendar__btn-today { font-size: 14px; } } @media screen and (max-width: 767px) { .event-calendar__btn-today { font-size: 12px; } } /* END Style event-calendar */ /* ------------------------------------------ */ @media screen and (max-width: 480px) { .ui-datepicker { width: 360px !important; height: 360px; margin: 0px auto 30px; } } .anchor-sr-only{ scroll-margin-top: 200px; position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; padding: 0; border: 0; }