:root {
--2f2f2f: #2f2f2f;
--ff9292: #ff9292;
--d1213d: #d1213d;
--white: #fff;
--e79e41: #e79e41;
--ffab92: #ffab92;
}
.w-layout-blockcontainer {
max-width: 940px;
margin-left: auto;
margin-right: auto;
display: block;
}
.w-layout-grid {
grid-row-gap: 16px;
grid-column-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.w-form-formradioinput--inputType-custom {
border: 1px solid #ccc;
border-radius: 50%;
width: 12px;
height: 12px;
}
.w-form-formradioinput--inputType-custom.w--redirected-focus {
box-shadow: 0 0 3px 1px #3898ec;
}
.w-form-formradioinput--inputType-custom.w--redirected-checked {
border-width: 4px;
border-color: #3898ec;
}
.w-layout-layout {
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-auto-columns: 1fr;
justify-content: center;
padding: 20px;
}
.w-layout-cell {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
}
@media screen and (max-width: 991px) {
.w-layout-blockcontainer {
max-width: 728px;
}
}
@media screen and (max-width: 767px) {
.w-layout-blockcontainer {
max-width: none;
}
}
body {
color: var(--2f2f2f);
background-color: #ececec;
background-image: url('../images/bg-b.jpg');
background-position: 0 0;
background-repeat: repeat-y;
background-size: cover;
font-family: Google Sans Flex, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 140%;
}
h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 32px;
font-weight: 700;
line-height: 120%;
}
h3 {
margin-top: 0;
margin-bottom: 0;
font-size: 24px;
font-weight: 400;
line-height: 120%;
}
h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
a {
color: var(--ff9292);
text-decoration: none;
}
a:hover {
color: var(--d1213d);
}
label {
margin-bottom: 5px;
font-weight: bold;
display: block;
}
.section {
padding-top: 90px;
padding-bottom: 90px;
}
.section.home-banner {
padding-top: 120px;
}
.section.gradient {
background-image: linear-gradient(#d1213d00, #d1213d40 50%, #d1213d00);
}
.section.home-map {
background-color: #06021d;
margin-top: 90px;
margin-bottom: 90px;
padding-top: 0;
padding-bottom: 0;
}
.section.inner-banner {
padding-top: 0;
padding-bottom: 90px;
}
.section._2b2-bg {
overflow: visible;
}
.section.security {
background-color: #0000;
background-image: url('../images/Security-bg.png');
background-position: 50%;
background-size: 100% 100%;
}
.section.print-n-copy {
background-color: #0000;
background-image: url('../images/Print-n-Copy-bg.jpg');
background-position: 50%;
background-repeat: repeat-x;
background-size: auto 100%;
margin-top: 90px;
margin-bottom: 90px;
padding-top: 80px;
padding-bottom: 80px;
}
.section.partnre-with-us-top {
margin-top: 210px;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
position: relative;
}
.section.partnre-with-us-top.bottom {
margin-top: 0;
}
.section.partnre-with-us-bottom {
margin-top: 0;
margin-bottom: 90px;
padding-top: 0;
padding-bottom: 0;
position: relative;
}
.section.partnre-with-us-bottom.bottom {
margin-top: 0;
}
.section.map {
padding-top: 0;
padding-bottom: 90px;
}
.container {
max-width: 1920px;
padding-left: 40px;
padding-right: 40px;
}
.container.navbar {
margin-top: 0;
padding: 20px 0 0;
}
.container.home-map, .container.inner-banner {
padding-left: 0;
padding-right: 0;
}
.container.inner {
padding-left: 80px;
padding-right: 80px;
}
.container.map {
padding-left: 0;
padding-right: 0;
}
.navbar {
z-index: 9999;
background-color: #ddd0;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 20px 40px;
position: fixed;
inset: 0% 0% auto;
}
.brand, .brand-logo {
max-height: 60px;
}
.navigation-over-all-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
align-items: center;
height: 60px;
line-height: 100%;
display: flex;
}
.navigation-main-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: #ececec;
border-radius: 15px;
padding: 5px;
display: flex;
position: relative;
}
.navigation-link {
color: #717171;
border-radius: 10px;
padding: 5px;
font-size: 16px;
text-decoration: none;
}
.navigation-link.w--current {
color: #fff;
text-decoration: none;
}
.navigation-lg-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: #ececec;
border-radius: 15px;
padding: 5px;
display: flex;
}
.red-btn-bg {
background-color: var(--d1213d);
border-radius: 10px;
width: auto;
height: 30px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.navigation-lg-btn {
color: #717171;
border-radius: 10px;
justify-content: center;
align-items: center;
padding: 5px;
font-size: 16px;
text-decoration: none;
transition: color .8s, background-color .8s;
display: flex;
}
.navigation-lg-btn:hover {
background-color: var(--d1213d);
color: var(--white);
}
.navigation-lg-btn.w--current {
color: #fff;
}
.navigation-lg-btn.on {
background-color: var(--d1213d);
color: #fff;
}
.navigation-contact-link {
background-color: var(--d1213d);
color: var(--white);
background-image: url('../images/contact-us-bg.png');
background-position: 50% -60%;
background-repeat: no-repeat;
background-size: 100%;
background-attachment: scroll;
border-radius: 15px;
padding: 10px 20px;
font-size: 16px;
text-decoration: none;
transition: background-position .8s cubic-bezier(.215, .61, .355, 1);
}
.navigation-contact-link:hover {
color: var(--white);
background-position: 50%;
}
.navigation-contact-link.w--current {
color: #fff;
}
.masked-video-wrapper {
border-radius: 20px;
width: 100%;
height: 100%;
padding-top: 54%;
position: relative;
-webkit-mask-image: url('../images/home-banner-maks.svg');
mask-image: url('../images/home-banner-maks.svg');
-webkit-mask-position: 0 100%;
mask-position: 0 100%;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.navbar-b {
background-color: var(--white);
border-radius: 20px;
justify-content: space-between;
align-items: center;
height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 10px 20px;
display: flex;
position: relative;
box-shadow: 0 2px 10px #00000026;
}
.masked-video-text-b {
padding: 40px 40px 0;
position: absolute;
inset: 0% 0% auto;
}
.red-text {
color: #d1213d;
}
.hero-title {
white-space: nowrap;
letter-spacing: clamp(0px, .55vw, 10px);
font-size: clamp(50px, 6.03vw - 9.79px, 77px);
line-height: 100%;
}
.hero-sub-title {
white-space: nowrap;
font-size: clamp(30.2px, 3.64vw - 5.89px, 46.5px);
font-weight: 100;
line-height: 100%;
}
.masked-video-main-image {
width: 50%;
padding-bottom: 40px;
padding-left: 15%;
padding-right: 40px;
display: flex;
position: absolute;
inset: auto 0% 0% auto;
}
.image-f-wh {
width: 100%;
height: 100%;
}
.home-banner-sub-b {
z-index: 1;
width: 50%;
margin-top: -23.2%;
padding-top: 20px;
padding-right: 20px;
position: relative;
}
.home-banner-sub-inner-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
background-color: var(--white);
border-radius: 20px 10px 20px 20px;
flex-flow: column;
padding: 40px;
display: flex;
}
.home-banner-sub-info {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.home-banner-sub-image-row {
justify-content: space-around;
display: flex;
position: relative;
}
.home-banner-sub-image-row-line {
border: 0 dashed #303e5840;
border-top-width: 2px;
width: 100%;
height: 1px;
margin-top: -14px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.home-banner-sub-icon-b {
z-index: 2;
grid-column-gap: 5px;
grid-row-gap: 5px;
text-align: center;
white-space: nowrap;
flex-flow: column;
justify-content: center;
align-items: center;
font-size: 16px;
display: flex;
position: relative;
}
.home-banner-sub-icon {
flex-flow: column;
width: 60px;
height: 60px;
display: flex;
}
.title-b {
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
position: relative;
}
.title-b.text-white {
color: var(--white);
}
.title-b.faq {
margin-top: 40px;
}
.title-icon-b {
width: 20px;
height: 20px;
margin-top: -15px;
margin-left: -15px;
display: flex;
position: absolute;
inset: 0% auto auto 0%;
}
.home-center-text-b {
text-align: center;
}
.home-print-hub-b {
background-image: linear-gradient(#0006, #0006), url('../images/home-print-hub-bg.jpg');
background-position: 0 0, 50%;
background-size: auto, cover;
border-radius: 20px;
padding: 10% 15%;
overflow: hidden;
}
.home-print-hub-inner-b {
grid-column-gap: 60px;
grid-row-gap: 60px;
color: var(--white);
flex-flow: column;
justify-content: center;
align-items: center;
display: flex;
}
.home-print-hub-title {
color: var(--white);
text-align: center;
margin-bottom: 10px;
font-size: 64px;
font-weight: 700;
line-height: 100%;
}
.text-orange-color {
color: #e79e41;
}
.home-print-hub-title-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
flex-flow: column;
justify-content: flex-start;
align-items: center;
display: flex;
}
.btn-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
border-style: solid;
border-width: .5px 0 0 .5px;
border-color: var(--white);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
height: 80px;
color: var(--white);
background-color: #d9d9d959;
border-radius: 80px;
justify-content: center;
align-items: center;
padding: 5px 20px 5px 5px;
font-size: 16px;
line-height: 100%;
text-decoration: none;
display: flex;
position: relative;
overflow: hidden;
}
.btn-b.black {
text-transform: uppercase;
background-color: #24242480;
border-width: 1px;
}
.btn-b.black:hover {
border-color: var(--2f2f2f);
color: var(--white);
}
.btn-icon-b {
z-index: 2;
background-color: var(--white);
border-radius: 70px;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
padding: 22px;
display: flex;
position: relative;
}
.btn-icon {
width: 100%;
height: 100%;
}
.btn-hove-bg {
background-color: var(--white);
border-radius: 70px;
width: 70px;
height: 70px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
position: absolute;
inset: 0% auto 0% 0%;
}
.home-map-b {
color: var(--white);
justify-content: flex-start;
align-items: center;
display: flex;
position: relative;
}
.home-map-info-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
width: 540px;
max-width: 50%;
padding-left: 40px;
padding-right: 0;
display: flex;
position: absolute;
}
.btn-align-laft-b {
display: flex;
}
.btn-b-text {
z-index: 2;
position: relative;
}
/* YSD: these three buttons flashed brand red on hover. `a:hover` (line 111) sets
color: var(--d1213d) on every link, and at (0,1,1) it outranks the (0,1,0) of
`.btn-b`'s own var(--white) — so the moment the pointer lands the turns red
and the label, which carries no colour of its own, inherits it. A beat later the
button's hover interaction writes color: rgb(29,29,29) inline and the label
snaps dark; on the way out the inline value clears and it flashes red again.
Pinning the colour on the label puts it out of reach of both, and .5s keeps the
swap in step with the white pill expanding underneath.
These three are the plain (non-.black) buttons — two on the home page, one on
service — and they are the only ones that need it: .btn-b.black:hover above is
the design's own guard against this same `a:hover`, and that variant has no
hover interaction at all (its pill never expands, its label stays white). Listed
per wrapper rather than written as .btn-b:not(.black) so the rule cannot reach
a button nobody has looked at. */
.home-print-hub-btn-b .btn-b-text,
.btn-align-laft-b .btn-b-text,
.print-n-copy-btn-b .btn-b-text {
color: var(--white);
transition: color .5s;
}
.home-print-hub-btn-b .btn-b:hover .btn-b-text,
.btn-align-laft-b .btn-b:hover .btn-b-text,
.print-n-copy-btn-b .btn-b:hover .btn-b-text {
color: #1d1d1d;
}
.home-founded-text-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
text-align: center;
flex-flow: column;
justify-content: flex-start;
align-items: center;
max-width: 980px;
margin-left: auto;
margin-right: auto;
display: flex;
}
.home-partner-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.home-partner-info-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.home-partner-image-row {
grid-column-gap: 2%;
grid-row-gap: 2%;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.home-partner-image-col {
grid-column-gap: 10px;
grid-row-gap: 10px;
aspect-ratio: 1 / 1.55;
color: var(--white);
text-align: center;
background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 100px;
flex-flow: column;
justify-content: center;
align-items: center;
padding: 10px;
font-size: 12px;
font-weight: 500;
line-height: 100%;
display: flex;
}
.home-partner-image-col._01 {
background-image: url('../images/partner-with-us-image-01.jpg');
}
.home-partner-image-col._02 {
background-image: url('../images/partner-with-us-image-02.jpg');
}
.home-partner-image-col._03 {
background-image: url('../images/partner-with-us-image-03.jpg');
}
.home-partner-image-col._04 {
background-image: url('../images/partner-with-us-image-04.jpg');
}
.home-partner-image-col._05 {
background-image: url('../images/partner-with-us-image-05.jpg');
}
.home-partner-image-col._06 {
background-image: url('../images/partner-with-us-image-06.jpg');
}
.partner-with-us-icon-b {
max-width: 50px;
max-height: 50px;
}
.footer-n-from-row {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
align-items: stretch;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
padding-right: 10px;
display: flex;
}
.footer-info-col {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
justify-content: space-between;
padding-left: 0;
padding-right: 20px;
display: flex;
}
.footer-from-col {
padding-left: 20px;
padding-right: 0;
}
.footer-from-col.inner {
justify-content: flex-start;
align-items: flex-end;
display: flex;
}
.footer-from {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.footer-text-field {
border: 1px solid var(--white);
border-radius: 20px;
min-height: 60px;
margin-top: 0;
margin-bottom: 0;
padding: 20px;
font-weight: 300;
line-height: 140%;
}
.footer-text-field:focus {
border-color: #e79e4199;
}
/* YSD: the "required" badge was images/from-Required.svg, whose vector paths
spell the English word and so could never be translated. It is now real text
(.footer-required-label) fed by the contact.form_required CMS field.
Reapply this block after a Webflow re-export overwrites this file. */
.footer-text-field.required {
padding-right: 100px;
}
.footer-field-b {
flex-flow: column;
display: flex;
position: relative;
}
/* Stretched top-to-bottom and flex-centred rather than nudged with a fixed
offset, so the badge stays centred whatever the field height or font size.
Centring via transform would be clobbered by the reveal below, which drives
transform on every element in the form. */
.footer-required-label {
color: #d1213d;
text-transform: uppercase;
pointer-events: none;
align-items: center;
font-size: 17px;
line-height: 1;
display: flex;
position: absolute;
top: 0;
bottom: 0;
right: calc(4% - 3px);
}
/* The message field is 220px tall, so centring on it would strand the badge in
the middle of the box; hold it on the first line, where the design had it. */
.footer-field-b.message .footer-required-label {
height: 60px;
bottom: auto;
right: calc(3% - 3px);
}
/* The footer reveal fades and slides every element inside .footer-from with a
stagger, which would otherwise fade each badge in separately from the field
it belongs to. Pinning the children makes the wrapper carry one fade per
field, so a field and its badge appear together. */
.footer-field-b > .footer-text-field,
.footer-field-b > .footer-message-field,
.footer-required-label {
opacity: 1 !important;
transform: none !important;
}
.footer-submit-btn {
cursor: pointer;
background-color: #2f2f2f;
background-image: url('../images/contact-us-bg.png');
background-position: 50% -20%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
padding: 20px;
font-weight: 300;
transition: background-position .8s cubic-bezier(.215, .61, .355, 1);
}
.footer-submit-btn:hover {
background-position: 50%;
}
.footer-message-field {
border: 0 solid #000;
border-radius: 20px;
min-width: 100%;
max-width: 100%;
height: 220px;
min-height: 220px;
max-height: 500px;
margin-top: 0;
margin-bottom: 0;
padding: 20px;
font-weight: 300;
line-height: 140%;
}
.footer-message-field.required {
border-width: 1px;
border-color: var(--white);
}
.footer-message-field.required:focus {
border-color: #e79e4199;
}
.footer-info-inner {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
display: flex;
}
.footer-info-inner.tab-show {
display: none;
}
.footer-info-inner-row {
grid-column-gap: 40px;
grid-row-gap: 40px;
display: flex;
}
.footer-info-sponsor-grid {
grid-column-gap: 40px;
grid-row-gap: 40px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: 1fr;
place-items: center;
display: grid;
}
/* YSD: a partner logo that has a CMS link is an ![]()
wrapped in an . The image
is the only thing actually under the pointer, so the hand is stated on both the
anchor and the image rather than left to inheritance. */
.footer-info-sponsor-grid a,
.footer-info-sponsor-grid a img {
cursor: pointer;
}
.footer-info-inner-col {
grid-column-gap: 10px;
grid-row-gap: 10px;
flex-flow: column;
justify-content: flex-end;
align-items: flex-start;
width: auto;
display: flex;
}
.footer-info-inner-col.logo {
justify-content: center;
align-items: center;
width: 140px;
display: flex;
}
.footer-logo-princh {
width: 50%;
}
.footer-info-inner-grid {
grid-column-gap: 10px;
grid-row-gap: 0px;
white-space: nowrap;
grid-template-columns: auto 1fr;
}
.contact-link {
color: #2f2f2f;
transition: color .8s;
}
.contact-link:hover {
color: var(--d1213d);
}
/* YSD: contact_detail is CMS rich text, and the editor's autolinker re-emits the
email without the .contact-link class, dropping it back to the default pink link
colour. Scoping the same styling to every link in the block keeps the design's
black/red-on-hover whatever markup the editor produces.
Reapply this block after a Webflow re-export overwrites this file. */
.footer-info-inner-grid a {
color: #2f2f2f;
transition: color .8s;
}
.footer-info-inner-grid a:hover {
color: var(--d1213d);
}
.footer-info-inner-logo-gird {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
}
.footer-info-inner-logo-b {
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
display: flex;
position: relative;
}
.footer-info-inner-logo-hover-b {
grid-column-gap: 2px;
grid-row-gap: 2px;
opacity: 0;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
display: flex;
position: absolute;
}
.footer-underline-b {
border-top: 1px solid #000;
margin-top: 80px;
padding-top: 20px;
padding-bottom: 40px;
}
.footer-underline-link-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
font-size: 14px;
line-height: 120%;
display: flex;
}
.footer-underline-link {
color: #2f2f2f;
text-decoration: none;
transition: color .8s;
}
.footer-underline-link:hover {
color: var(--d1213d);
}
/* YSD: the bottom menu bolds the policy page you are currently on — the
w--current class is set in resources/views/frontend/common/footer.blade.php. */
.footer-underline-link.w--current {
font-weight: 700;
}
/* YSD: agency credit, held at the far end of the copyright row. The row now
carries one more item than the export allowed for, so let it wrap rather than
overflow the container on narrow desktops and tablets. */
.footer-underline-link-b {
flex-wrap: wrap;
}
.footer-credit {
margin-left: auto;
}
/* YSD: SEO text nav rendered at the end of the footer
(resources/views/frontend/common/footer.blade.php). Every link in it is already
in the visible footer, so it is clipped out of the layout rather than drawn —
kept in flow (not display:none) so crawlers still read it. */
.navlink {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.footer-anima-main-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
margin: 0 -30px;
display: flex;
}
.footer-anima-b {
overflow: hidden;
}
.footer-anima-b._01 {
height: 20px;
}
.footer-anima-b._02 {
height: 60px;
}
.footer-anima-b._03 {
height: 100px;
}
.home-map-pin-main-b {
background-color: #0000;
background-image: url('../images/home-map-image.jpg');
background-position: 0 0;
background-size: cover;
position: absolute;
inset: 0%;
}
.home-map-pin-b {
margin-top: 0%;
margin-left: 0%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.home-map-pin-b.to-kwa-wan {
margin-top: -10%;
margin-left: 16%;
}
.home-map-pin-b.kowloon-city {
margin-top: -15.5%;
margin-left: 15%;
}
.home-map-pin-b._03 {
margin-top: 13%;
margin-left: 6%;
}
.home-map-pin-b.siu-sai-wan {
margin-top: 6%;
margin-left: 33%;
}
.home-map-pin-b.mong-kok {
margin-top: -10%;
margin-left: 9%;
}
.home-map-pin-b._06 {
margin-top: -16%;
margin-left: 7%;
}
.home-map-pin-b.ap-lei-chau {
margin-top: 13%;
margin-left: 6%;
}
.home-map-pin-b.cheung-sha-wan {
margin-top: -16%;
margin-left: 7%;
}
.home-map-pin-b.hom-hung {
margin-top: -6%;
margin-left: 15%;
}
.home-map-pin-b.ho-man-tin {
margin-top: -7%;
margin-left: 13%;
}
.home-map-pin-b.tws {
margin-top: -20%;
margin-left: 19%;
}
.home-map-pin-b.kf {
margin-top: -17%;
margin-left: 23.5%;
}
.home-map-pin-tab-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
margin-top: -10px;
padding-left: 10px;
display: flex;
position: absolute;
inset: 0% auto 0% 100%;
}
.home-map-pin-tab-b.on-left {
justify-content: flex-start;
align-items: flex-end;
padding-left: 0;
padding-right: 10px;
left: auto;
right: 100%;
}
.home-map-pin-tab {
border-top: 1px solid var(--white);
border-bottom: 1px solid #949494;
border-left: 1px solid var(--white);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
white-space: nowrap;
background-color: #d9d9d959;
border-radius: 10px;
padding: 10px 20px;
font-size: 16px;
line-height: 120%;
}
.home-map-sub-text-b {
white-space: nowrap;
font-size: 16px;
line-height: 120%;
}
.footer-anima-img {
filter: blur(20px);
width: 100%;
}
.body {
background-position: 50% 0;
background-repeat: repeat;
background-size: 1920px;
}
.home-map-image {
width: 100%;
}
.navigation-sub-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
display: flex;
}
.menu-btn-b {
display: none;
}
.whatsapp-icon-b {
z-index: 8000;
cursor: pointer;
width: 60px;
height: 60px;
margin-bottom: 20px;
margin-right: 20px;
position: fixed;
inset: auto 0% 0% auto;
}
.inner-banner-b {
height: 480px;
position: relative;
}
.inner-banner-image {
object-fit: cover;
width: 100%;
height: 100%;
}
.inner-banner-text-b {
z-index: 2;
justify-content: flex-start;
align-items: center;
width: 720px;
margin-top: 110px;
padding-left: 80px;
font-size: 48px;
line-height: 120%;
display: flex;
position: absolute;
inset: 0% auto 0% 0%;
}
.about-info-text-row {
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.about-info-text-col {
width: 50%;
padding-left: 10px;
padding-right: 10px;
}
.about-info-b {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
display: flex;
}
.about-info-point-row {
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.about-info-point-col {
flex: 1;
width: 25%;
padding-left: 10px;
padding-right: 10px;
display: flex;
}
.about-info-point-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
background-color: var(--white);
border-radius: 20px;
flex-flow: column;
width: 100%;
padding: 20px 20px 40px;
display: flex;
}
.text-block-3 {
color: var(--2f2f2f);
}
.about-info-point-img-b {
background-image: linear-gradient(#ffe4cf, #ffd6d4);
border-radius: 10px 10px 100px;
justify-content: center;
align-items: center;
padding: 40px;
display: flex;
}
.about-info-point-text-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
text-align: center;
flex-flow: column;
font-size: 12px;
line-height: 140%;
display: flex;
}
.about-origin-b {
position: relative;
}
.about-origin-col {
justify-content: flex-start;
align-items: flex-end;
width: 50%;
padding-left: 40px;
padding-right: 40px;
display: flex;
}
.about-origin-row {
margin-left: -40px;
margin-right: -40px;
display: flex;
}
.about-origin-image-b {
border-radius: 20px;
height: 100%;
overflow: hidden;
}
.about-origin-text-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
padding-top: 40px;
padding-bottom: 40px;
padding-right: 5%;
display: flex;
}
.text-red {
color: var(--d1213d);
}
.tick-icon-row {
grid-column-gap: 10px;
grid-row-gap: 10px;
flex-flow: wrap;
display: flex;
}
.tick-icon-col {
grid-column-gap: 5px;
grid-row-gap: 5px;
border: 1px solid var(--2f2f2f);
text-transform: uppercase;
border-radius: 20px;
justify-content: center;
align-items: center;
padding: 5px 10px 5px 5px;
font-size: 16px;
line-height: 100%;
display: flex;
}
.tick-icon-col.white {
border-color: var(--white);
}
.image-100wh-full {
object-fit: cover;
width: 100%;
height: 100%;
}
.about-rolling-text-b {
opacity: .6;
pointer-events: none;
width: 99svw;
color: var(--white);
letter-spacing: 2px;
text-transform: uppercase;
white-space: nowrap;
flex-flow: row;
margin-top: -90px;
font-size: 220px;
font-weight: 700;
line-height: 100%;
display: flex;
position: absolute;
top: 0%;
bottom: auto;
left: 50%;
overflow: hidden;
transform: translate(-50%);
}
.about-rolling-text {
flex: none;
width: auto;
margin-right: 2rem;
}
.about-b2b-outer-b {
background-image: url('../images/b2b-bg.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 160px;
margin-left: -40px;
margin-right: -40px;
padding-top: 40px;
padding-left: 10%;
padding-right: 10%;
}
.about-b2b-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
background-color: var(--white);
border-radius: 20px;
flex-flow: column;
padding: 40px;
display: flex;
position: relative;
top: 160px;
}
.about-b2b-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.about-b2b-row {
flex-flow: row;
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.about-b2b-col {
width: 33.33%;
padding-left: 10px;
padding-right: 10px;
}
.about-b2b-point-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: #ececec;
border-radius: 10px;
flex-flow: column;
height: 100%;
padding: 10px;
font-size: 14px;
line-height: 120%;
display: flex;
}
.about-b2b-point-title-b {
background-color: var(--white);
color: var(--d1213d);
border-radius: 5px;
padding: 10px;
}
.about-b2b-point-image-b {
border-radius: 5px;
overflow: hidden;
}
.about-b2b-point-list-b {
grid-column-gap: 5px;
grid-row-gap: 5px;
flex-flow: column;
padding-left: 20px;
display: flex;
}
.about-b2b-btn-b {
align-self: center;
display: flex;
}
.about-b2b-overflow-bg {
display: none;
}
.about-us-image-main-b {
flex-flow: column;
height: 60vw;
position: relative;
}
.about-us-image-b {
border-radius: 40px;
width: 40vw;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%, -50%);
}
.about-us-image-b._01 {
z-index: 1;
width: 42vw;
margin-top: -18%;
margin-left: 27%;
}
.about-us-image-b._02 {
z-index: 2;
width: 34vw;
margin-top: -6%;
margin-left: -31%;
}
.about-us-image-b._03 {
z-index: 4;
width: 37vw;
margin-top: 17%;
margin-left: 0%;
}
.about-us-image-title {
z-index: 3;
color: #ffffffb3;
text-transform: uppercase;
white-space: nowrap;
margin-top: -1%;
font-size: 14vw;
font-weight: 700;
line-height: 100%;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.security-part {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.security-title-b {
text-align: center;
flex-flow: column;
justify-content: flex-start;
align-items: center;
display: flex;
}
.security-main-b {
background-color: #0000;
background-image: url('../images/Security-Part-bg.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
padding: 40px 60px;
}
.security-main-row {
margin-left: -20px;
margin-right: -20px;
display: flex;
}
.security-main-col {
justify-content: center;
align-self: center;
align-items: center;
width: 50%;
padding-left: 20px;
padding-right: 20px;
display: flex;
}
.security-main-image-b {
justify-content: center;
align-items: center;
width: 400px;
display: flex;
position: relative;
}
.security-main-text-col {
grid-column-gap: 10px;
grid-row-gap: 10px;
flex-flow: column;
display: flex;
}
.security-main-text-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
color: var(--white);
flex-flow: column;
display: flex;
}
.security-main-text-line {
background-color: var(--white);
width: 100%;
height: 1px;
}
.about-info-point-icon {
width: 100px;
height: 100px;
}
.service-info-b {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
display: flex;
}
.service-info-row {
margin-left: -20px;
margin-right: -20px;
display: flex;
}
.service-info-col {
width: 50%;
padding-left: 20px;
padding-right: 20px;
}
.service-info-col.text {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
display: flex;
}
.title-and-icon-main-b {
grid-column-gap: 5px;
grid-row-gap: 5px;
flex-flow: wrap;
display: flex;
}
.title-and-icon-b {
grid-column-gap: 5px;
grid-row-gap: 5px;
color: var(--e79e41);
flex-flow: wrap;
font-size: 40px;
font-weight: 700;
line-height: 100%;
display: flex;
}
.service-info-btn-b {
display: flex;
}
.service-step-row {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.service-step-col {
display: flex;
}
.service-step-b {
background-color: var(--white);
border-radius: 20px 20px 80px;
flex: 1;
padding: 20px;
}
.service-step-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
justify-content: flex-start;
align-items: center;
margin-bottom: 0;
font-size: 12px;
display: flex;
}
.service-step-inner-b.link-b {
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.service-step-image-b {
flex: none;
width: 120px;
height: 120px;
}
.service-step-text-b {
justify-content: center;
align-items: flex-start;
width: 30px;
min-width: 30px;
max-width: 30px;
font-size: 32px;
font-weight: 800;
line-height: 100%;
display: flex;
position: relative;
}
.service-step-text {
white-space: nowrap;
width: 120px;
margin-top: 40px;
transform: rotate(90deg);
}
.service-step-inner-link {
color: var(--2f2f2f);
text-decoration: none;
transition: color .8s;
}
.service-step-inner-link:hover {
color: var(--d1213d);
}
.print-n-copy-main-b {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
display: flex;
}
.pricing-row {
flex-flow: row;
margin-left: -20px;
margin-right: -20px;
display: flex;
}
.pricing-col {
width: 33.33%;
padding: 20px;
}
.pricing-col.main {
grid-column-gap: 40px;
grid-row-gap: 40px;
background-color: #ffffff40;
border-radius: 40px;
width: 66.66%;
padding-top: 20px;
padding-bottom: 20px;
display: flex;
}
.pricing-sub-col {
grid-column-gap: 20px;
grid-row-gap: 20px;
background-color: var(--white);
border-radius: 20px;
flex-flow: column;
flex: 1;
justify-content: space-around;
align-items: center;
height: 100%;
padding: 25px 25px 50px;
display: flex;
}
.pricing-sub-title-b {
color: var(--white);
background-color: #0000;
background-image: linear-gradient(#ffab92, #ff9292);
border-radius: 40px;
padding: 10px 20px;
font-weight: 600;
line-height: 100%;
}
.pricing-sub-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
text-align: center;
flex-flow: column;
flex: 1;
justify-content: center;
align-items: center;
display: flex;
}
.pricing-sub-value {
color: var(--2f2f2f);
font-size: 18px;
line-height: 140%;
}
.pricing-main-value {
color: var(--d1213d);
flex-flow: column;
justify-content: flex-start;
align-items: center;
font-size: 48px;
line-height: 110%;
display: flex;
}
.service-video-main-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.service-video-title-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
width: 50%;
display: flex;
}
.service-video-tab-b {
background-color: var(--white);
border-radius: 20px;
padding: 40px;
}
.service-video-tabs {
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
}
.service-video-tabs-menu {
grid-column-gap: 20px;
grid-row-gap: 20px;
background-color: #f1f1f1;
border-radius: 40px;
margin-bottom: 40px;
padding: 10px;
display: flex;
}
.service-video-tabs-content {
border-radius: 20px;
width: 100%;
}
.service-video-tabs-link {
background-color: #ddd0;
border-radius: 40px;
padding: 10px 20px;
transition: color .8s, background-color .8s;
}
.service-video-tabs-link:hover, .service-video-tabs-link.w--current {
background-color: var(--d1213d);
color: var(--white);
}
.icon-in-title {
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
display: flex;
}
.home-map-pin {
width: 19px;
height: 25px;
}
.products-info-b {
background-color: var(--white);
border-radius: 40px;
padding: 40px;
}
.products-info-row {
grid-column-gap: 40px;
grid-row-gap: 40px;
display: flex;
}
.products-info-col {
flex: 1;
}
.products-info-col.image {
flex: none;
justify-content: flex-end;
width: 45%;
display: flex;
}
.products-info-image-b {
border-radius: 20px;
max-width: 520px;
overflow: hidden;
}
.products-info-main-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.products-info-text-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.products-info-icon-b {
justify-content: space-around;
display: flex;
position: relative;
}
.products-item-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.products-item-row {
display: flex;
}
.products-item-title-b {
flex-flow: column;
justify-content: flex-start;
align-items: center;
display: flex;
}
.products-item-title-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
text-align: center;
flex-flow: column;
justify-content: flex-start;
align-items: center;
width: 800px;
display: flex;
}
.products-item-col.text-02 {
z-index: 1;
grid-column-gap: 150px;
grid-row-gap: 150px;
flex-flow: column;
width: 40%;
display: flex;
position: relative;
}
.products-item-col.text-02.bottom-150 {
padding-bottom: 150px;
}
.products-item-col.image {
flex-flow: column;
justify-content: flex-start;
align-items: center;
width: 30%;
display: flex;
}
.products-item-col.text-01 {
z-index: 1;
grid-column-gap: 150px;
grid-row-gap: 150px;
flex-flow: column;
width: 40%;
padding-top: 150px;
padding-bottom: 150px;
display: flex;
position: relative;
}
.products-item-text-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: #ffffff70;
border: 1px solid #979faf;
border-radius: 20px;
flex-flow: column;
padding: 30px;
display: flex;
}
.products-item-text-b.m-show, .hide {
display: none;
}
.products-item-slider {
background-color: #ddd0;
height: auto;
display: flex;
}
.products-item-mask, .products-item-slide {
height: auto;
}
.products-item-slide-image {
object-fit: contain;
width: 100%;
height: auto;
max-height: 650px;
}
.products-item-slider-b {
flex-flow: column;
justify-content: flex-start;
align-items: center;
display: flex;
position: sticky;
top: 120px;
}
.products-item-slider-bg-b {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
}
.products-item-slider-bg {
aspect-ratio: 2;
border-radius: 50px;
width: 65vw;
overflow: hidden;
}
.products-item-slider-mask {
mix-blend-mode: multiply;
background-image: linear-gradient(315deg, #ffd5d5, #ffe9cd);
border-radius: 50px;
position: absolute;
inset: 0%;
}
.background-video {
mix-blend-mode: color-burn;
}
.products-item-slide-nav {
font-size: 12px;
line-height: 100%;
top: 100%;
}
.products-item-qna-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.products-item-qna-col {
background-color: #ffffff75;
border: 1px solid #979faf;
border-radius: 10px;
padding: 20px;
}
.products-item-qna-inner-title {
flex-flow: row;
justify-content: space-between;
align-items: center;
display: flex;
}
.products-item-qna-inner-info-b {
flex-flow: column;
padding-top: 0;
display: flex;
overflow: hidden;
}
.products-item-qna-inner-b {
flex-flow: column;
display: flex;
}
.qna-btn-b {
background-image: linear-gradient(180deg, var(--ffab92), var(--ff9292));
border-radius: 100px;
flex: none;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
margin-left: 20px;
padding: 12px;
display: flex;
}
.qna-btn-icon-b {
justify-content: center;
align-items: center;
display: flex;
}
.products-item-qna-line {
background-color: #0000;
background-image: linear-gradient(270deg, var(--ffab92), var(--ff9292));
width: 100%;
height: 1px;
margin-top: 20px;
margin-bottom: 20px;
}
.partnre-with-us-bg-video {
width: 100%;
height: 100%;
}
.partnre-with-us-bg-video-b {
z-index: -1;
position: absolute;
inset: 0%;
}
.partnre-with-us-bg-text {
position: absolute;
inset: -8.4vw 0% auto;
}
.partnre-with-us-info-b {
grid-column-gap: 80px;
grid-row-gap: 80px;
color: var(--white);
flex-flow: column;
margin-top: 80px;
display: flex;
}
.partnre-with-us-info-text-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.partnre-with-us-b2b-b {
background-color: var(--white);
color: var(--2f2f2f);
margin-left: 20px;
margin-right: 20px;
}
.partnre-with-us-b2b-b.top {
grid-column-gap: 20px;
grid-row-gap: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
flex-flow: column;
padding: 40px;
display: flex;
}
.partnre-with-us-b2b-b.bottom {
grid-column-gap: 40px;
grid-row-gap: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
flex-flow: column;
padding: 0 40px 40px;
display: flex;
}
.partnre-with-us-b2b-row {
flex-flow: row;
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.partnre-with-us-b2b-col {
width: 33.33%;
padding-left: 10px;
padding-right: 10px;
}
.partnre-with-u-b2b-point-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: #ececec;
border-radius: 10px;
flex-flow: column;
height: 100%;
padding: 10px;
font-size: 14px;
line-height: 120%;
display: flex;
}
.partnre-with-u-b2b-point-title-b {
background-color: var(--white);
color: var(--d1213d);
border-radius: 5px;
padding: 10px;
}
.partnre-with-u-b2b-point-image-b {
border-radius: 5px;
overflow: hidden;
}
.partnre-with-u-b2b-point-list-b {
grid-column-gap: 5px;
grid-row-gap: 5px;
flex-flow: column;
padding-left: 20px;
display: flex;
}
.qna-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.qna-col {
background-color: #ffffff75;
border: 1px solid #979faf;
border-radius: 10px;
padding: 20px;
}
.qna-inner-b {
flex-flow: column;
display: flex;
}
.qna-inner-title {
flex-flow: row;
justify-content: space-between;
align-items: center;
display: flex;
}
.qna-inner-info-b {
flex-flow: column;
padding-top: 0;
display: flex;
overflow: hidden;
}
.qna-line {
background-color: #0000;
background-image: linear-gradient(270deg, var(--ffab92), var(--ff9292));
width: 100%;
height: 1px;
margin-top: 20px;
margin-bottom: 20px;
}
.link {
transition: color .8s;
}
.map-over-all-b {
background-color: #0000;
background-image: url('../images/Kiosk-Map-list-bg.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding-top: 220px;
position: relative;
overflow: visible;
}
.map-main-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
margin-left: 80px;
margin-right: 80px;
display: flex;
}
.map-main-title-b {
justify-content: space-between;
display: flex;
}
.map-main-control-b {
margin-bottom: 0;
display: flex;
}
.map-main-control {
grid-column-gap: 10px;
grid-row-gap: 10px;
color: var(--white);
justify-content: flex-start;
align-items: center;
display: flex;
}
.map-main-control-radio-btn {
margin-bottom: 0;
}
.map-main-control-radio-labels {
font-weight: 300;
line-height: 100%;
}
.map-main-control-radio-dot {
background-color: #fff;
margin-top: 6px;
}
.map-main-control-radio-dot.w--redirected-checked {
background-color: var(--ff9292);
border: 0 solid #000;
}
.map-main-inner-b {
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
flex-flow: column;
padding: 20px;
display: flex;
position: relative;
}
.map-main-inner-list-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.map-main-inner-list-b.info {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: row;
}
.map-main-inner-list-title-b {
justify-content: space-between;
align-items: center;
display: flex;
}
.map-main-inner-list-title-location {
grid-column-gap: 10px;
grid-row-gap: 10px;
white-space: nowrap;
font-size: 16px;
line-height: 100%;
display: flex;
}
.map-main-inner-list-title-pin-icon {
height: 16px;
}
.map-main-inner-list-text-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
flex: 1;
justify-content: center;
align-items: flex-start;
display: flex;
}
.map-main-inner-list-img-row {
flex: none;
justify-content: flex-end;
align-items: flex-start;
width: 60%;
max-width: 620px;
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.map-main-inner-qr-b {
grid-column-gap: 5px;
grid-row-gap: 5px;
width: 120px;
color: var(--2f2f2f);
text-align: center;
flex-flow: column;
font-size: 14px;
line-height: 120%;
display: flex;
}
.map-main-inner-link-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
color: var(--2f2f2f);
font-weight: 700;
line-height: 100%;
transition: color .8s;
display: flex;
}
.map-main-inner-list-link-icon {
width: 18px;
height: 18px;
}
.map-main-inner-list-img {
object-fit: cover;
width: 100%;
height: 100%;
}
.map-main-inner-list-col {
grid-column-gap: 15px;
grid-row-gap: 15px;
background-color: #fff;
flex-flow: column;
padding: 0 10px 20px;
display: flex;
}
.map-main-inner-list-col.info {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: row;
}
.map-main-inner-list-col._01 {
border-top-width: 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding-top: 0;
top: 100px;
}
.map-main-inner-list-col._02 {
z-index: 2;
position: sticky;
top: 150px;
}
.map-main-inner-list-col._03 {
z-index: 2;
position: sticky;
top: 200px;
}
.map-main-inner-list-col._04 {
z-index: 2;
position: sticky;
top: 250px;
}
.map-main-inner-list-col._05 {
z-index: 2;
position: sticky;
top: 300px;
}
.map-main-inner-list-col._06 {
z-index: 2;
position: sticky;
top: 350px;
}
.map-main-inner-list-col._07 {
z-index: 2;
position: sticky;
top: 400px;
}
.map-main-inner-list-col._08 {
z-index: 2;
position: sticky;
top: 450px;
}
.map-main-inner-list-col._09 {
z-index: 2;
position: sticky;
top: 500px;
}
.map-main-inner-list-img-col {
align-self: stretch;
width: 50%;
padding-left: 10px;
padding-right: 10px;
}
.map-main-inner-list-line {
background-color: #979faf;
width: 100%;
height: 1px;
}
.map-main-inner-list-line.top {
background-color: #979faf00;
display: none;
}
.map-main-inner-b-h {
height: 5000px;
}
.text-block-4 {
line-height: 120%;
}
.map-main-bottom-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
background-color: var(--white);
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
flex-flow: column;
margin-left: 80px;
margin-right: 80px;
padding: 0 40px 20px;
display: flex;
box-shadow: 0 2px 5px #0003;
}
.map-main-bottom-btn-b {
align-self: center;
display: flex;
}
.map-main-bottom-line {
background-color: #979faf;
height: 1px;
margin-bottom: 20px;
}
.control-list-btn {
justify-content: center;
align-items: center;
display: flex;
position: relative;
}
.map-main-inner-list-row {
flex-flow: column;
display: flex;
}
.map-main-inner-block-row {
flex-flow: wrap;
width: 100%;
display: flex;
}
.map-main-inner-block-col {
width: 50%;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
}
.map-main-inner-block-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: #ececec;
border-radius: 10px;
flex-flow: column;
height: 100%;
padding: 10px;
display: flex;
}
.map-main-inner-block-text-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.map-main-inner-block-info-b {
display: flex;
}
.map-main-inner-block-title-b {
background-color: #fff;
border-radius: 5px;
padding: 10px;
}
.map-main-inner-block-title {
grid-column-gap: 10px;
grid-row-gap: 10px;
white-space: nowrap;
font-size: 16px;
line-height: 100%;
display: flex;
}
.map-main-inner-block-info-qr-b {
flex: 1;
align-self: center;
display: flex;
}
.map-main-inner-block-info-img-b {
flex: 1;
}
.map-main-inner-block-slider {
height: auto;
}
.map-main-inner-block-mask {
border-radius: 10px;
height: auto;
max-height: 250px;
}
.map-main-inner-block-img {
object-fit: cover;
max-height: 250px;
}
.map-main-inner-block-slide-l-arrow, .map-main-inner-block-slide-r-arrow {
width: 50%;
}
.map-main-inner-map-link {
color: var(--2f2f2f);
font-size: 16px;
line-height: 120%;
transition: color .8s;
}
.map-main-inner-map-link:hover {
color: var(--d1213d);
}
.control-block-btn {
justify-content: center;
align-items: center;
display: flex;
position: relative;
}
.security-image {
flex: 1;
order: 0;
width: 400px;
position: absolute;
inset: 0%;
}
.security-image.bottom {
display: block;
position: relative;
}
.privacy-policy-text-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.privacy-policy-text-inner-b {
flex-flow: column;
display: flex;
}
.privacy-policy-text-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.privacy-policy-table {
grid-column-gap: 0px;
grid-row-gap: 0px;
border: 2px solid #dfdfdf;
padding: 0;
}
.privacy-policy-table-title {
text-align: center;
background-color: #dfdfdf;
flex: 1;
justify-content: center;
align-self: stretch;
align-items: center;
padding: 15px;
display: flex;
}
.privacy-policy-table-inner {
border: 2px solid #dfdfdf;
flex: 1;
justify-content: center;
align-self: stretch;
align-items: center;
padding: 15px;
display: flex;
}
.footer-info-sponsor-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.service-info-point-row {
margin-left: -5px;
margin-right: -5px;
display: flex;
}
.service-info-point-col {
flex: 1;
width: 25%;
padding-left: 5px;
padding-right: 5px;
display: flex;
}
.service-info-point-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
background-color: var(--white);
border-radius: 20px;
flex-flow: column;
width: 100%;
padding: 10px;
display: flex;
}
.service-info-point-img-b {
background-image: linear-gradient(#ffe4cf, #ffd6d4);
border-radius: 10px 10px 50px;
justify-content: center;
align-items: center;
padding: 20px 30px;
display: flex;
}
.service-info-point-text-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
text-align: center;
flex-flow: column;
font-size: 12px;
line-height: 140%;
display: flex;
}
.service-info-point-img {
width: 60px;
height: 60px;
}
.print-n-copy-btn-b {
justify-content: center;
align-items: center;
display: flex;
}
.about-team-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.about-team-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
background-color: var(--white);
border-radius: 20px;
flex-flow: column;
padding: 40px;
display: flex;
position: relative;
top: 160px;
}
.about-team-row {
flex-flow: row;
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.about-team-col {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
flex: 1;
width: 33.33%;
padding-left: 10px;
padding-right: 10px;
display: flex;
}
.about-team-col.photo {
flex: 0 auto;
max-width: 320px;
}
.about-team-photo-b {
border-radius: 10px;
overflow: hidden;
}
@media screen and (min-width: 1440px) {
.section._2b2-bg {
margin-top: 90px;
margin-bottom: 90px;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.section.security {
background-repeat: repeat-x;
background-size: auto 100%;
}
.section.partnre-with-us-top {
margin-top: 210px;
}
.container {
padding-left: 80px;
padding-right: 80px;
}
.container.b2b {
position: relative;
}
.hero-title {
font-size: clamp(72px, 6.07vw - 16.26px, 100px);
}
.hero-sub-title {
white-space: nowrap;
font-size: clamp(42.5px, 3.45vw - 6.15px, 60px);
}
.btn-b.black {
text-transform: uppercase;
background-color: #24242459;
border-width: 1px;
transition: border-color .8s;
}
.btn-b.black:hover {
border-width: 1px;
border-color: var(--2f2f2f);
}
.home-partner-image-col {
border-radius: 150px;
}
.home-map-pin-b.mong-kok {
margin-left: 9%;
}
.home-map-pin-b.hom-hung {
margin-top: -6%;
margin-left: 15%;
}
.home-map-pin-b.tws {
margin-top: -20%;
margin-left: 19%;
}
.whatsapp-icon-b {
z-index: 8000;
}
.inner-banner-b {
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.about-info-point-row {
margin-left: -20px;
margin-right: -20px;
}
.about-info-point-col {
padding-left: 20px;
padding-right: 20px;
}
.about-b2b-outer-b {
background-color: #0000;
background-image: url('../images/b2b-bg.jpg');
background-position: 50%;
background-size: cover;
padding-top: 60px;
padding-left: 140px;
padding-right: 140px;
position: relative;
}
.about-b2b-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
background-color: var(--white);
border-radius: 20px;
flex-flow: column;
padding: 40px;
display: flex;
top: 160px;
}
.about-b2b-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.about-b2b-row {
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.about-b2b-col {
width: 33.33%;
padding-left: 10px;
padding-right: 10px;
}
.about-b2b-point-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: #ececec;
border-radius: 10px;
flex-flow: column;
height: 100%;
padding: 10px;
font-size: 14px;
line-height: 120%;
display: flex;
}
.about-b2b-point-title-b {
background-color: var(--white);
color: var(--d1213d);
border-radius: 5px;
padding: 10px;
}
.about-b2b-point-image-b {
border-radius: 5px;
overflow: hidden;
}
.about-b2b-point-list-b {
padding-left: 20px;
}
.about-b2b-btn-b {
align-self: center;
}
.about-b2b-overflow-bg {
background-color: #000;
width: 100vw;
height: 100%;
display: block;
position: absolute;
inset: 0% auto auto 50%;
transform: translate(-50%, -160px);
}
.about-us-image-main-b {
max-height: 1170px;
}
.about-us-image-b._01 {
max-width: 800px;
}
.about-us-image-b._02 {
max-width: 630px;
}
.about-us-image-b._03 {
max-width: 720px;
}
.about-us-image-title {
font-size: clamp(77px, 13vw - 16.26px, 240px);
}
.security-main-col {
width: auto;
margin-left: 60px;
margin-right: 60px;
}
.products-info-col.image {
justify-content: flex-end;
display: flex;
}
.products-info-image-b {
max-width: 520px;
}
.products-item-title-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.products-item-slider-bg {
width: 920px;
}
.partnre-with-us-bg-text {
top: -119px;
left: 50%;
transform: translate(-50%);
}
.partnre-with-us-b2b-row {
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.partnre-with-us-b2b-col {
width: 33.33%;
padding-left: 10px;
padding-right: 10px;
}
.partnre-with-u-b2b-point-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: #ececec;
border-radius: 10px;
flex-flow: column;
height: 100%;
padding: 10px;
font-size: 14px;
line-height: 120%;
display: flex;
}
.partnre-with-u-b2b-point-title-b {
background-color: var(--white);
color: var(--d1213d);
border-radius: 5px;
padding: 10px;
}
.partnre-with-u-b2b-point-image-b {
border-radius: 5px;
overflow: hidden;
}
.partnre-with-u-b2b-point-list-b {
padding-left: 20px;
}
.map-over-all-b {
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.map-main-bottom-b {
background-color: #fff;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding: 20px 40px;
}
.map-main-bottom-btn-b {
align-self: center;
}
.map-main-bottom-line {
background-color: #979faf;
height: 1px;
margin-bottom: 20px;
}
.map-main-inner-block-col {
width: 33.33%;
}
.service-info-point-row {
margin-left: -10px;
margin-right: -10px;
}
.service-info-point-col {
padding-left: 10px;
padding-right: 10px;
}
.about-team-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
display: flex;
}
.about-team-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
background-color: var(--white);
border-radius: 20px;
flex-flow: column;
padding: 40px;
display: flex;
top: 160px;
}
.about-team-row {
margin-left: -10px;
margin-right: -10px;
display: flex;
}
.about-team-col {
width: 33.33%;
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (max-width: 991px) {
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
.section {
padding-top: 60px;
padding-bottom: 60px;
}
.section.home-banner {
padding-top: 110px;
}
.section.home-map {
margin-top: 60px;
margin-bottom: 60px;
}
.section.inner-banner {
padding-top: 0;
}
.section.security {
background-size: cover;
}
.section.partnre-with-us-top {
margin-top: 130px;
}
.section.map {
padding-top: 0;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.container.navbar {
height: auto;
padding: 20px;
}
.container.inner {
padding-left: 20px;
padding-right: 20px;
}
.navbar {
height: 0%;
margin-top: 0;
padding-top: 0;
padding-bottom: 1px;
}
.brand, .brand-logo {
max-height: 50px;
}
.navigation-over-all-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
background-color: var(--white);
flex-flow: column;
width: 100%;
height: 0;
position: relative;
overflow: hidden;
}
.navigation-main-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
width: 100%;
height: auto;
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.navigation-link {
text-align: center;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
transition: background-color .8s, color .8s;
}
.navigation-link:hover {
background-color: var(--d1213d);
color: var(--white);
}
.navigation-link.w--current {
background-color: var(--d1213d);
}
.navigation-lg-b {
width: 50%;
height: auto;
margin-bottom: 0;
}
.navigation-lg-btn {
width: 50%;
}
.navigation-contact-link {
text-align: center;
align-self: center;
width: 50%;
line-height: 100%;
}
.navbar-b {
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-flow: column;
width: auto;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
padding-right: 10px;
display: flex;
overflow: visible;
}
.masked-video-text-b {
width: 58%;
padding-top: 40px;
padding-left: 40px;
padding-right: 0;
}
.hero-title {
white-space: normal;
font-size: clamp(24px, 4.5vw, 65px);
}
.hero-sub-title {
white-space: normal;
font-size: 18px;
}
.masked-video-main-image {
padding-left: 40px;
}
.home-banner-sub-inner-b {
padding: 20px;
}
.home-banner-sub-icon-b {
width: 25%;
font-size: 14px;
line-height: 140%;
}
.home-banner-sub-icon {
width: 45px;
height: 45px;
}
.home-print-hub-b {
padding-left: 5%;
padding-right: 5%;
}
.home-print-hub-title {
font-size: 48px;
}
.btn-b {
height: 65px;
}
.btn-icon-b {
width: 50px;
height: 50px;
padding: 10px;
}
.btn-hove-bg {
width: 50px;
height: 50px;
}
.home-map-info-b {
padding-left: 20px;
padding-right: 0;
}
.home-founded-text-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.home-partner-image-col {
border-radius: 150px;
}
.footer-n-from-row {
flex-flow: column;
padding-left: 10px;
padding-right: 10px;
}
.footer-info-col {
margin-bottom: 40px;
padding-right: 0;
}
.footer-from-col {
padding-left: 0;
}
.footer-text-field.required {
border-radius: 15px;
}
.footer-info-inner.tab-hide {
display: none;
}
.footer-info-inner.tab-show {
flex-flow: column;
padding-top: 60px;
display: flex;
}
/* YSD: from here down the copyright line is too narrow to also hold the credit
on its right, so let it wrap and sit with the links — see .footer-credit. */
.footer-credit {
margin-left: 0;
}
.footer-anima-main-b {
margin-left: -15px;
margin-right: -15px;
}
.home-map-pin-tab-b {
margin-top: -2px;
padding-left: 5px;
}
.home-map-pin-tab-b.on-left {
padding-right: 5px;
}
.home-map-pin-tab {
padding: 5px 10px;
font-size: 14px;
line-height: 120%;
}
.body {
font-size: 16px;
}
.text-block-2 {
line-height: 110%;
}
.navigation-sub-b {
width: 100%;
}
.menu-btn-b {
z-index: 2;
cursor: pointer;
background-color: #ececec;
background-image: url('../images/menu-bg.png'), linear-gradient(#ececec, #ececec);
background-position: 50% -150%, 0 0;
background-repeat: no-repeat, repeat;
background-size: 120%, auto;
border-radius: 10px;
justify-content: center;
align-items: center;
height: 50px;
margin-top: 10px;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px;
transition: background-position .8s;
display: flex;
position: absolute;
inset: 0% 0% auto auto;
}
.menu-btn-b:hover {
background-image: url('../images/menu-bg.png'), linear-gradient(to bottom, null, null);
background-position: 50%, 0 0;
}
.menu-text-b {
flex-flow: column;
justify-content: flex-start;
align-items: center;
height: 20px;
line-height: 20px;
display: flex;
overflow: hidden;
}
/* YSD: the two labels are stacked in this 20px window and the click interaction
slides them by a hard-coded -20px, so the box takes its width from whichever
label is wider — including the hidden one. That made editing the close text
resize the *closed* button: "CLOSE" is 50px wide, 關閉 is 32px, and the button
went 70px -> 52px. Hold the design's width as a floor so the labels no longer
decide the button's size, and keep either label on one line so the -20px slide
always lands on the other one. */
.menu-text-b {
min-width: 50px;
}
.menu-text-menu,
.menu-text-close {
white-space: nowrap;
}
.brand-b {
width: 100%;
display: flex;
}
.whatsapp-icon-b {
width: 60px;
height: 60px;
}
.inner-banner-b {
height: 420px;
}
.inner-banner-text-b {
width: 60%;
margin-top: 90px;
padding-left: 40px;
font-size: 32px;
}
.about-info-point-col {
padding-left: 10px;
padding-right: 10px;
}
.about-info-point-b {
padding: 10px 10px 20px;
}
.about-info-point-img-b {
border-bottom-right-radius: 60px;
padding: 30px 40px;
}
.about-origin-col {
padding-left: 10px;
padding-right: 10px;
}
.about-origin-row {
margin-left: -10px;
margin-right: -10px;
}
.about-rolling-text {
font-size: 180px;
}
.about-b2b-outer-b {
margin-bottom: 60px;
margin-left: -20px;
margin-right: -20px;
padding-left: 5%;
padding-right: 5%;
}
.about-b2b-b {
padding: 20px;
top: 60px;
}
.about-b2b-row {
margin-left: -5px;
margin-right: -5px;
}
.about-b2b-col {
padding-left: 5px;
padding-right: 5px;
}
.about-us-image-b {
border-radius: 20px;
}
.security-main-b {
padding-left: 40px;
padding-right: 40px;
}
.security-main-col {
width: 50%;
}
.about-info-point-icon {
width: 60px;
height: 60px;
}
.service-info-row {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
}
.service-info-col, .service-info-col.text {
width: 100%;
}
.title-and-icon-b {
font-size: 32px;
}
.service-step-b {
border-bottom-right-radius: 60px;
padding: 20px 10px;
}
.service-step-image-b {
width: 80px;
height: 80px;
}
.pricing-row {
margin-left: 0;
margin-right: -20px;
}
.pricing-col.main {
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.pricing-main-value {
font-size: 32px;
}
.service-video-title-b {
width: 75%;
}
.service-video-tab-b {
padding: 20px;
}
.service-video-tabs-menu {
margin-bottom: 20px;
}
.icon-in-title {
width: 32px;
height: 32px;
}
.products-info-b {
border-radius: 20px;
padding: 20px;
}
.products-info-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.products-info-col {
flex: 1;
}
.products-info-col.image {
display: block;
}
.products-info-image-b {
border-radius: 10px;
overflow: hidden;
}
.products-info-main-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
flex-flow: column;
display: flex;
}
.products-item-title-inner-b {
width: auto;
}
.products-item-text-b {
padding: 20px;
}
.qna-btn-b {
width: 40px;
height: 40px;
}
.partnre-with-us-b2b-b {
margin-left: 0;
margin-right: 0;
}
.partnre-with-us-b2b-b.top {
padding: 30px;
}
.partnre-with-us-b2b-b.bottom {
grid-column-gap: 20px;
grid-row-gap: 20px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
}
.partnre-with-us-b2b-row {
margin-left: -5px;
margin-right: -5px;
}
.partnre-with-us-b2b-col {
padding-left: 5px;
padding-right: 5px;
}
.map-over-all-b {
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.map-main-b {
margin-left: 20px;
margin-right: 20px;
}
.map-main-inner-qr-b {
width: 100px;
}
.map-main-inner-list-col {
padding-left: 10px;
padding-right: 10px;
}
.map-main-inner-list-line.top {
display: none;
}
.map-main-bottom-b {
margin-left: 20px;
margin-right: 20px;
padding-left: 20px;
padding-right: 20px;
}
.map-main-inner-block-title {
white-space: normal;
}
.map-over-mobil-bg-b {
display: none;
}
.footer-info-sponsor-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.service-info-point-col {
padding-left: 10px;
padding-right: 10px;
}
.service-info-point-b {
padding: 10px 10px 20px;
}
.service-info-point-img-b {
border-bottom-right-radius: 60px;
padding: 30px 40px;
}
.service-info-point-img {
width: 60px;
height: 60px;
}
.about-team-b {
padding: 20px;
top: 60px;
}
.about-team-row {
margin-left: -5px;
margin-right: -5px;
}
.about-team-col {
padding-left: 5px;
padding-right: 5px;
}
}
@media screen and (max-width: 767px) {
.section {
padding-top: 40px;
padding-bottom: 40px;
}
.section.home-map {
margin-top: 40px;
margin-bottom: 40px;
}
.section.print-n-copy {
background-attachment: fixed;
}
.section.partnre-with-us-top {
margin-top: 100px;
}
.container {
padding-left: 5%;
padding-right: 5%;
}
.container.navbar {
padding-left: 0;
padding-right: 0;
}
.hero-wrapper {
z-index: 3;
}
.masked-video-wrapper {
z-index: 3;
-webkit-mask-image: none;
mask-image: none;
}
.navbar-b {
margin-left: 5%;
margin-right: 5%;
}
.masked-video-text-b {
justify-content: flex-start;
align-items: center;
height: 100%;
padding-top: 0;
padding-left: 20px;
padding-right: 20px;
display: flex;
}
.hero-title {
letter-spacing: normal;
font-size: 24px;
line-height: 120%;
}
.hero-sub-title {
font-size: 16px;
line-height: 120%;
}
.masked-video-main-image {
height: 100%;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
.image-f-wh.home-banner {
object-fit: contain;
}
.home-banner-sub-b {
width: 100%;
margin-top: -40px;
padding-top: 0;
padding-right: 0;
}
.home-banner-sub-inner-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
padding-top: 80px;
}
.home-print-hub-b {
background-image: linear-gradient(to bottom, null, null), url('../images/home-print-hub-bg.jpg');
background-position: 0 0, 100%;
}
.home-map-b {
flex-flow: column;
}
.home-map-info-b {
width: 100%;
max-width: none;
padding: 80px 5% 40px;
position: relative;
}
.home-founded-text-b {
text-align: left;
}
.home-partner-image-row {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr;
padding-bottom: 15px;
}
.footer-n-from-row {
padding-left: 0;
padding-right: 0;
}
.footer-from {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.footer-text-field {
border-radius: 15px;
min-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
/* YSD: badge scaled down with the fields — see .footer-required-label above. */
.footer-required-label {
font-size: 15px;
}
.footer-field-b.message .footer-required-label {
height: 42px;
}
.footer-message-field.required {
border-radius: 15px;
}
.footer-info-inner.tab-show {
padding-top: 40px;
}
.footer-underline-link-b {
grid-row-gap: 10px;
flex-flow: wrap;
}
.footer-anima-main-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.footer-anima-b._02 {
height: 35px;
}
.footer-anima-b._03 {
height: 45px;
}
.home-map-pin-main-b {
aspect-ratio: 767 / 543;
background-image: url('../images/home-map-image2.jpg');
order: 9999;
width: 100%;
position: relative;
inset: auto 0% 0%;
}
.home-map-pin-b.to-kwa-wan {
margin-top: -13%;
margin-left: -4%;
}
.home-map-pin-b.kowloon-city {
margin-top: -23%;
margin-left: -4%;
}
.home-map-pin-b._03 {
margin-top: 19%;
margin-left: -17%;
}
.home-map-pin-b.siu-sai-wan {
margin-top: 10%;
margin-left: 21%;
}
.home-map-pin-b.mong-kok {
margin-top: -15%;
margin-left: -13%;
}
.home-map-pin-b._06 {
margin-top: -24%;
margin-left: -16%;
}
.home-map-pin-b.ap-lei-chau {
margin-top: 19%;
margin-left: -17%;
}
.home-map-pin-b.cheung-sha-wan {
margin-top: -24%;
margin-left: -16%;
}
.home-map-pin-b.hom-hung {
margin-top: -8%;
margin-left: -4%;
}
.home-map-pin-b.ho-man-tin {
margin-top: -12%;
margin-left: -9%;
}
.home-map-pin-b.tws {
margin-top: -29%;
margin-left: 2%;
}
.home-map-pin-b.kf {
margin-top: -25%;
margin-left: 6.5%;
}
.home-map-image {
display: none;
}
.text-block-2 {
font-size: 32px;
}
.inner-banner-b {
height: 320px;
}
.inner-banner-text-b {
width: 70%;
padding-left: 5%;
font-size: 28px;
line-height: 120%;
}
.about-info-text-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
margin-left: 0;
margin-right: 0;
}
.about-info-text-col {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.about-info-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
}
.about-info-point-row {
flex-flow: wrap;
}
.about-info-point-col {
flex: none;
width: 50%;
padding-bottom: 20px;
}
.about-info-point-img-b {
padding: 20px;
}
.about-origin-col {
width: 100%;
}
.about-origin-row {
flex-flow: column-reverse;
}
.about-b2b-outer-b {
background-attachment: fixed;
margin-left: -5vw;
margin-right: -5vw;
}
.about-b2b-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
margin-left: 0;
margin-right: 0;
}
.about-b2b-col {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.about-us-image-main-b {
height: 100vw;
}
.about-us-image-b._01 {
width: 50vw;
margin-top: -38%;
margin-left: 22%;
}
.about-us-image-b._02 {
width: 50vw;
margin-top: 0%;
margin-left: -20%;
}
.about-us-image-b._03 {
width: 50vw;
margin-top: 33%;
margin-left: 11%;
}
.security-main-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
margin-left: 0;
margin-right: 0;
}
.security-main-col {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.about-info-point-icon {
width: 50px;
height: 50px;
}
.service-info-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
}
.service-info-row {
grid-column-gap: 60px;
grid-row-gap: 60px;
flex-flow: column;
margin-left: 0;
margin-right: 0;
}
.service-info-col {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.service-info-col.text {
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.title-and-icon-b {
font-size: 28px;
}
.service-step-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.service-step-b {
padding-left: 20px;
padding-right: 20px;
}
.pricing-row {
flex-flow: column;
margin-right: 0;
}
.pricing-col {
width: 100%;
padding: 10px;
}
.pricing-col.main {
grid-column-gap: 10px;
grid-row-gap: 10px;
border-radius: 30px;
flex-flow: row;
width: 100%;
padding: 10px;
}
.service-video-title-b {
width: 100%;
}
.service-video-tab-b {
padding: 10px;
}
.service-video-tabs-menu {
grid-column-gap: 10px;
grid-row-gap: 10px;
padding: 5px;
}
.service-video-tabs-link {
align-self: center;
padding: 5px 10px;
}
.icon-in-title {
width: 28px;
}
.products-info-row {
flex-flow: column;
}
.products-info-col.image {
width: 100%;
}
.products-info-image-b {
max-width: none;
margin-left: auto;
margin-right: auto;
}
.products-item-row {
flex-flow: column;
}
.products-item-col.text-02 {
grid-column-gap: 20px;
grid-row-gap: 20px;
width: 100%;
margin-bottom: 40px;
}
.products-item-col.text-02.bottom-150 {
padding-bottom: 0;
}
.products-item-col.image {
width: 100%;
margin-bottom: 40px;
}
.products-item-col.text-01 {
display: none;
}
.products-item-text-b.m-show {
display: block;
}
.products-item-slider-bg {
border-radius: 20px;
width: 95vw;
}
.products-item-slider-mask {
border-radius: 20px;
}
.products-item-qna-col {
padding: 10px;
}
.qna-btn-b {
width: 35px;
height: 35px;
padding: 8px;
}
.products-item-qna-line {
margin-top: 10px;
margin-bottom: 10px;
}
.partnre-with-us-info-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
}
.partnre-with-us-b2b-b.top {
padding: 20px;
}
.partnre-with-us-b2b-b.bottom {
padding: 0 20px 20px;
}
.partnre-with-us-b2b-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
margin-left: 0;
margin-right: 0;
}
.partnre-with-us-b2b-col {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.qna-col {
padding: 10px;
}
.qna-line {
margin-top: 10px;
margin-bottom: 10px;
}
.map-over-all-b {
background-image: none;
background-position: 0 0;
background-repeat: repeat;
background-size: auto;
background-attachment: scroll;
padding-top: 180px;
}
.map-main-b {
margin-top: -100vh;
padding-top: 180px;
}
.map-main-title-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
}
.map-main-inner-b {
padding-left: 10px;
padding-right: 10px;
}
.map-main-inner-list-b.info {
flex-flow: column;
}
.map-main-inner-list-img-row {
grid-column-gap: 10px;
grid-row-gap: 10px;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.map-main-inner-link-b {
color: var(--2f2f2f);
font-weight: 700;
transition: color .8s;
}
.map-main-inner-link-b:hover {
color: var(--ff9292);
}
.map-main-inner-list-col {
padding-bottom: 40px;
}
.map-main-inner-list-img-col {
padding-left: 0;
padding-right: 0;
}
.map-main-inner-list-line {
margin-bottom: 20px;
}
.map-main-inner-block-row {
flex-flow: column;
}
.map-main-inner-block-col {
width: 100%;
}
.map-main-inner-block-text-b {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.privacy-policy-table {
width: 520px;
}
.privacy-policy-table-b {
overflow: auto;
}
.map-over-mobil-bg-b {
z-index: -1;
background-color: #0000;
background-image: url('../images/Kiosk-Map-list-bg.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
margin-top: -180px;
display: block;
position: sticky;
inset: 0%;
}
.service-info-point-row {
flex-flow: wrap;
justify-content: center;
align-items: center;
}
.service-info-point-col {
flex: none;
width: 50%;
padding-bottom: 20px;
}
.service-info-point-b, .service-info-point-img-b {
padding: 20px;
}
.service-info-point-img {
width: 70px;
height: 70px;
}
.about-team-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
margin-left: 0;
margin-right: 0;
}
.about-team-col {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.about-team-col.photo {
max-width: 240px;
}
}
@media screen and (max-width: 479px) {
.masked-video-wrapper {
height: 500px;
}
.masked-video-text-b {
background-image: linear-gradient(#47000b66, #47000b00);
justify-content: center;
align-items: flex-start;
width: 100%;
height: 30%;
padding-top: 40px;
}
.masked-video-main-image {
width: 100%;
height: 70%;
padding-left: 20px;
padding-right: 20px;
}
.image-f-wh.home-banner {
object-fit: contain;
}
.footer-info-inner-row {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
}
.footer-info-sponsor-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.footer-info-inner-col {
width: 100%;
}
.footer-info-inner-col.logo {
width: 100px;
}
.footer-info-inner-grid {
grid-template-columns: 70px 1fr;
}
.footer-underline-b {
margin-top: 40px;
}
.footer-anima-main-b {
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.footer-anima-b._01 {
height: 15px;
}
.footer-anima-b._02 {
height: 30px;
}
.footer-anima-b._03 {
height: 40px;
}
.home-map-pin-tab-b {
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.home-map-pin-tab {
padding-left: 5px;
padding-right: 5px;
font-size: 12px;
}
.home-map-sub-text-b {
font-size: 12px;
}
.text-block-2 {
line-height: 110%;
}
.inner-banner-b {
height: 280px;
}
.inner-banner-text-b {
width: 80%;
font-size: 24px;
}
.about-info-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
}
.about-info-point-col {
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
.security-main-b {
padding: 20px;
}
.service-info-b {
grid-column-gap: 40px;
grid-row-gap: 40px;
}
.pricing-col.main {
flex-flow: column;
}
.service-video-tabs-menu {
grid-column-gap: 5px;
grid-row-gap: 5px;
flex-flow: wrap;
}
.map-main-b {
margin-left: 5%;
}
.map-main-title-b {
grid-column-gap: 20px;
grid-row-gap: 20px;
flex-flow: column;
}
.map-main-inner-list-title-b {
grid-row-gap: 5px;
flex-flow: column;
justify-content: space-between;
align-items: center;
}
.map-main-inner-list-title-location {
color: var(--d1213d);
white-space: normal;
font-weight: 700;
}
.map-main-inner-list-text-b {
justify-content: center;
align-items: center;
}
.map-main-inner-list-img-row {
grid-column-gap: 10px;
grid-row-gap: 10px;
margin-left: 0;
margin-right: 0;
}
.map-main-inner-qr-b {
width: 100px;
}
.map-main-inner-list-img-col {
padding-left: 0;
padding-right: 0;
}
.map-main-bottom-b {
margin-left: 5%;
}
.map-main-inner-block-info-b {
justify-content: flex-start;
align-items: center;
}
.map-main-inner-block-title {
color: var(--d1213d);
white-space: normal;
font-weight: 700;
}
.map-main-inner-block-info-qr-b {
flex: none;
margin-right: 20px;
}
.privacy-policy-table {
width: 520px;
}
.privacy-policy-table-b {
overflow: auto;
}
.service-info-point-row {
justify-content: center;
align-items: center;
}
.service-info-point-col {
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
.service-info-point-b {
padding: 10px;
}
.service-info-point-img {
width: 60px;
height: 60px;
}
}
#w-node-d1e2fb98-244d-0932-1e57-60345732985f-c5dacbab, #w-node-_5105f0ed-29cb-f5f9-ea96-99e470cda0bb-c5dacbab {
grid-template-rows: auto auto auto auto auto auto auto auto auto;
grid-template-columns: 1fr 1fr 1fr;
}