html, body {
margin: 0;
width: 100%;
height: 100%;
width: -webkit-fill-available;
height: -webkit-fill-available;
overflow-x: hidden; }
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*, *:before, *:after {
box-sizing: border-box;
flex-shrink: 0; }
* {
margin: 0; }
body {
position: relative;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
overflow-y: auto; }
input, button, textarea, select {
font: inherit; }
h1, h2, h3, h4 {
text-wrap: balance; }
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word; }
html[lang=zh] h2, html[lang=zh] h3, html[lang=zh] h4, html[lang=zh] h5, html[lang=zh] h6 {
font-weight: unset; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
address {
font-style: inherit; }
ul {
list-style: none; }
ul > li:before {
content: ' ';
display: inline-block;
width: 4px;
height: 4px;
margin-left: calc(-4px - 0.75em);
margin-right: 0.75em;
vertical-align: middle;
background-color: currentColor;
transform: translateY(-0.1em); }
:root {
--brand-text-colour: #194B7D;
--brand-text-colour-2: #165A9A;
--brand-text-colour-3: #223D57;
--secondary-text-colour: #FDFDFD;
--secondary-text-light-colour: #919CA6;
--brand-background-colour: #232F47;
--dark-background-colour: #313131;
--dark-background-colour-2: #B5B5B5;
--dark-background-colour-3: #00000044;
--dark-background-colour-4: #8A8A8A;
--brand-highlight-colour: #215F9A;
--highlight-colour: #BAC8D5;
--highlight-colour-2: #A6CAEC;
--highlight-colour-3: #101010;
--neutral-colour: #F2F2F2;
--neutral-colour-2: #C3C5C9;
--neutral-colour-3: #9FADBD;
--neutral-colour-4: #BEBEBE;
--image-placeholder-colour: #E2EBF360;
--chevron-icon: url("data:image/svg+xml,%3Csvg width='71' height='124' viewBox='0 0 71 124' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M66.6674 1.61091C68.8153 3.7588 68.8153 7.2412 66.6674 9.38909L11.6674 64.3891C9.51952 66.537 6.03712 66.537 3.88923 64.3891C1.74135 62.2412 1.74135 58.7588 3.88923 56.6109L58.8892 1.61091C61.0371 -0.536971 64.5195 -0.536971 66.6674 1.61091Z' fill='%23B5B5B5'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.88909 56.6109C1.7412 58.7588 1.7412 62.2412 3.88909 64.3891L58.8891 119.389C61.037 121.537 64.5194 121.537 66.6673 119.389C68.8151 117.241 68.8151 113.759 66.6673 111.611L11.6673 56.6109C9.51938 54.463 6.03697 54.463 3.88909 56.6109Z' fill='%23B5B5B5'/%3E%3C/svg%3E%0A");
--more-icon: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1053 21.9324L7 12V16.1025L24.1053 26.0351V21.9324Z' fill='%23D9D9D9'/%3E%3Cpath d='M24.1053 32.8974L7 22.9649V27.0674L24.1053 37V32.8974Z' fill='%23D9D9D9'/%3E%3Cpath d='M41.2105 16.1026L24.1053 26.0351V21.9324L41.2105 12V16.1026Z' fill='%23D9D9D9'/%3E%3Cpath d='M41.2105 27.0676L24.1053 37V32.8974L41.2105 22.9649V27.0676Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A");
--right-triangle-icon: url("data:image/svg+xml,%3Csvg width='25' height='30' viewBox='0 0 25 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 29.9093V0.818359L24.7273 15.3638L0 29.9093Z' fill='%23BAC8D5'/%3E%3C/svg%3E%0A");
--scale-icon: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.7 54.8078L19 53.0078L29.6 52.0078V35.3078C29.6 26.0078 29.5 17.8078 29.5 17.0078V15.5078H16.3L18.3 18.8078C22.4 25.6078 25.5 31.6078 25.5 32.9078V34.2078L23.2 36.3078L20.9 38.5078H8.8L6.1 36.4078C4.7 35.3078 3.5 33.9078 3.5 33.3078C3.5 32.7078 5.5 28.6078 8.1 24.3078L12.6 16.4078L12 14.5078L11.4 12.5078H29.5V11.3078C29.5 10.6078 29.9 9.40781 30.3 8.70781L31.3 8.60781L32.7 8.00781L34.3 8.60781L35.3 12.4078L50 13.0078L55.1 22.0078C58 27.0078 60.4 31.8078 60.4 32.7078L60.5 34.4078L57.9 36.4078L55.2 38.5078H43.6L38 33.7078L41.4 27.3078C43.2 23.9078 45.4 19.8078 46.3 18.3078C47.2 16.8078 47.7 15.5078 47.5 15.3078C47.2 15.1078 44.2 15.1078 40.8 15.3078L34.5 15.7078V52.5078H45.5V56.5078H18.4L18.7 54.8078ZM22.5 32.1078C22.5 31.7078 15.6 19.2078 15 18.7078C14.6 18.2078 7.5 30.1078 7.5 31.4078V32.5078H15C19.1 32.5078 22.5 32.3078 22.5 32.1078ZM57.3 31.8078C55.1 26.9078 50.3 18.5078 49.7 18.5078C49.3 18.5078 47.3 21.7078 45.2 25.5078L41.5 32.5078H57.7L57.3 31.8078Z' fill='%23AAAAAA'/%3E%3Cpath d='M45.3 54.8078L45 53.0078L34.4 52.0078V35.3078C34.4 26.0078 34.5 17.8078 34.5 17.0078V15.5078H47.7L45.7 18.8078C41.6 25.6078 38.5 31.6078 38.5 32.9078V34.2078L40.8 36.3078L43.1 38.5078H55.2L57.9 36.4078C59.3 35.3078 60.5 33.9078 60.5 33.3078C60.5 32.7078 58.5 28.6078 55.9 24.3078L51.4 16.4078L52 14.5078L52.6 12.5078H34.5V11.3078C34.5 10.6078 34.1 9.40781 33.7 8.70781L32.7 8L31.3 8.00781L29.7 8.60781L28.7 12.4078L14 13.0078L8.9 22.0078C6 27.0078 3.6 31.8078 3.6 32.7078L3.5 34.4078L6.1 36.4078L8.8 38.5078H20.4L26 33.7078L22.6 27.3078C20.8 23.9078 18.6 19.8078 17.7 18.3078C16.8 16.8078 16.3 15.5078 16.5 15.3078C16.8 15.1078 19.8 15.1078 23.2 15.3078L29.5 15.7078V52.5078H18.5V56.5078H45.6L45.3 54.8078ZM41.5 32.1078C41.5 31.7078 48.4 19.2078 49 18.7078C49.4 18.2078 56.5 30.1078 56.5 31.4078V32.5078H49C44.9 32.5078 41.5 32.3078 41.5 32.1078ZM6.7 31.8078C8.9 26.9078 13.7 18.5078 14.3 18.5078C14.7 18.5078 16.7 21.7078 18.8 25.5078L22.5 32.5078H6.3L6.7 31.8078Z' fill='%23AAAAAA'/%3E%3C/svg%3E%0A");
--contact-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.4104 12H7.66981C5.09413 12 3 14.0941 3 16.6698V43.1981C3 45.7738 5.09413 47.8679 7.66981 47.8679H51.4104C53.9861 47.8679 56.0802 45.7738 56.0802 43.1981V16.6698C56.0802 14.0941 53.9861 12 51.4104 12ZM54.2123 43.1981C54.2123 44.7426 52.9548 46 51.4104 46H7.66981C6.12535 46 4.86792 44.7426 4.86792 43.1981V16.6698C4.86792 15.1253 6.12535 13.8679 7.66981 13.8679H51.4104C52.9548 13.8679 54.2123 15.1253 54.2123 16.6698V43.1981Z' fill='black'/%3E%3Cpath d='M20.5134 18.9717H10.5511C10.0355 18.9717 9.61719 19.39 9.61719 19.9056V30.9575C9.61719 31.4732 10.0355 31.8915 10.5511 31.8915H20.5134C21.029 31.8915 21.4474 31.4732 21.4474 30.9575V19.9056C21.4474 19.39 21.029 18.9717 20.5134 18.9717ZM19.5795 30.0236H11.4851V20.8396H19.5795V30.0236Z' fill='black'/%3E%3Cpath d='M46.5095 20.1343H28.2972C27.7816 20.1343 27.3633 20.5526 27.3633 21.0682C27.3633 21.5839 27.7816 22.0022 28.2972 22.0022H46.5095C47.0251 22.0022 47.4435 21.5839 47.4435 21.0682C47.4435 20.5526 47.0251 20.1343 46.5095 20.1343Z' fill='black'/%3E%3Cpath d='M46.5095 24.4976H28.2972C27.7816 24.4976 27.3633 24.9159 27.3633 25.4315C27.3633 25.9471 27.7816 26.3655 28.2972 26.3655H46.5095C47.0251 26.3655 47.4435 25.9471 47.4435 25.4315C47.4435 24.9159 47.0251 24.4976 46.5095 24.4976Z' fill='black'/%3E%3Cpath d='M46.5095 28.8608H28.2972C27.7816 28.8608 27.3633 29.2792 27.3633 29.7948C27.3633 30.3104 27.7816 30.7288 28.2972 30.7288H46.5095C47.0251 30.7288 47.4435 30.3104 47.4435 29.7948C47.4435 29.2792 47.0251 28.8608 46.5095 28.8608Z' fill='black'/%3E%3Cpath d='M38.8978 34.8489H28.3129C27.7972 34.8489 27.3789 35.2672 27.3789 35.7828C27.3789 36.2985 27.7972 36.7168 28.3129 36.7168H38.8978C39.4134 36.7168 39.8317 36.2985 39.8317 35.7828C39.8317 35.2672 39.4134 34.8489 38.8978 34.8489Z' fill='black'/%3E%3Cpath d='M38.8978 39.2126H28.3129C27.7972 39.2126 27.3789 39.631 27.3789 40.1466C27.3789 40.6622 27.7972 41.0806 28.3129 41.0806H38.8978C39.4134 41.0806 39.8317 40.6622 39.8317 40.1466C39.8317 39.631 39.4134 39.2126 38.8978 39.2126Z' fill='black'/%3E%3C/svg%3E%0A");
--pin-filled-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.0003 6.54541C21.0406 6.54541 13.7539 13.8343 13.7539 22.7918C13.7539 31.4787 28.7026 52.0843 29.3397 52.9581C29.4931 53.1691 29.7382 53.2948 30.0002 53.2948C30.2623 53.2948 30.5073 53.1691 30.6607 52.9581C31.2978 52.0845 46.2465 31.4787 46.2465 22.7918C46.2465 13.8343 38.9599 6.54541 30.0003 6.54541ZM30.0003 51.0703C27.0663 46.924 15.3903 29.964 15.3903 22.7918C15.3903 14.7354 21.9445 8.18177 30.0003 8.18177C38.0561 8.18177 44.6103 14.736 44.6103 22.7918C44.6103 29.9634 32.9343 46.9238 30.0003 51.0703Z' fill='black'/%3E%3Cpath d='M30.0003 12.784C25.5109 12.784 21.8588 16.436 21.8588 20.9233C21.8588 25.4106 25.5108 29.0626 30.0003 29.0626C34.4897 29.0626 38.1417 25.4106 38.1417 20.9233C38.1417 16.434 34.4897 12.784 30.0003 12.784ZM30.0003 27.4262C26.4143 27.4262 23.4952 24.5093 23.4952 20.9233C23.4952 17.3374 26.4142 14.4204 30.0003 14.4204C33.5863 14.4204 36.5054 17.3373 36.5054 20.9233C36.5054 24.5092 33.5863 27.4262 30.0003 27.4262Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30.0003 51.0703C27.0663 46.924 15.3903 29.964 15.3903 22.7918C15.3903 14.7354 21.9445 8.18177 30.0003 8.18177C38.0561 8.18177 44.6103 14.736 44.6103 22.7918C44.6103 29.9634 32.9343 46.9238 30.0003 51.0703ZM21.8588 20.9233C21.8588 16.436 25.5109 12.784 30.0003 12.784C34.4897 12.784 38.1417 16.434 38.1417 20.9233C38.1417 25.4106 34.4897 29.0626 30.0003 29.0626C25.5108 29.0626 21.8588 25.4106 21.8588 20.9233Z' fill='black'/%3E%3C/svg%3E%0A");
--email-filled-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.8244 20.0994V40.0494C6.8244 41.1762 7.12584 42.2334 7.64664 43.1496L10.2452 40.7763L23.0934 28.8672L9.37461 17.2881L8.14344 16.257C7.32024 17.322 6.8244 18.6528 6.8244 20.0994Z' fill='black'/%3E%3Cpath d='M29.9244 34.3488C29.718 34.3488 29.5116 34.278 29.3442 34.137L24.5805 30.121L11.3497 42.2053L8.7719 44.594C9.90414 45.6786 11.4361 46.3494 13.1244 46.3494H46.8744C48.5627 46.3494 50.0949 45.6786 51.2271 44.594L48.6492 42.2052L35.4185 30.121L30.6548 34.137C30.4874 34.278 30.281 34.3488 30.0746 34.3488C30.0496 34.3488 30.0245 34.3478 29.9995 34.3457C29.9745 34.3478 29.9495 34.3488 29.9244 34.3488Z' fill='black'/%3E%3Cpath d='M52.3524 43.1496C52.8732 42.2334 53.1744 41.1762 53.1744 40.0494V20.0994C53.1744 18.6528 52.6788 17.322 51.8556 16.257L50.6244 17.2881L36.9056 28.8672L49.7539 40.7764L52.3524 43.1496Z' fill='black'/%3E%3Cpath d='M46.8744 13.7994L13.1244 13.8C11.7512 13.8 10.4836 14.2463 9.44762 14.9943L10.5746 15.9452L29.9995 32.2126L49.4247 15.945L50.5514 14.9943C49.5155 14.2463 48.2476 13.7994 46.8744 13.7994Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.02344 20.0994C5.02348 20.0234 5.02457 19.9477 5.02671 19.8723C5.02556 19.9486 5.025 20.0247 5.025 20.1006V40.0494C5.025 40.1322 5.02574 40.2156 5.02724 40.2995C5.02471 40.2165 5.02344 40.1331 5.02344 40.0494V20.0994ZM54.9718 40.2996C54.9743 40.2165 54.9756 40.1331 54.9756 40.0494V20.0994C54.9756 20.0234 54.9745 19.9477 54.9723 19.8723C54.9735 19.9485 54.974 20.0247 54.974 20.1006V40.0494C54.974 40.1322 54.9733 40.2156 54.9718 40.2996ZM53.0348 14.0359C53.0295 14.0311 53.0241 14.0263 53.0191 14.021ZM10.2452 40.7763L23.2448 28.9038L9.37461 17.2881L23.0934 28.8672L10.2452 40.7763ZM10.5746 15.9452L9.44762 14.9943L9.44304 14.9976L10.5746 15.9452ZM29.9995 32.2126L10.5746 15.9452L29.9262 32.274L29.9995 32.2126ZM49.4247 15.945L29.9995 32.2126L30.0728 32.274L49.4247 15.945ZM49.4247 15.945L50.5514 14.9943L50.556 14.9976L49.4247 15.945ZM36.9056 28.8672L50.6244 17.2881L36.7542 28.9038L49.7539 40.7764L36.9056 28.8672ZM48.6492 42.2052L51.2271 44.594L51.2454 44.5764L48.6492 42.2052ZM35.4185 30.121L48.6492 42.2052L35.5178 30.0372L35.4185 30.121ZM29.9995 34.3457C30.0245 34.3478 30.0496 34.3488 30.0746 34.3488C30.281 34.3488 30.4874 34.278 30.6548 34.137L35.4185 30.121L35.3616 30.069L30.5022 34.1388C30.3558 34.2615 30.1793 34.3306 29.9995 34.3457ZM24.5805 30.121L11.3497 42.2053L24.4812 30.0372L24.5805 30.121ZM11.3497 42.2053L8.7719 44.594L8.75364 44.5764L11.3497 42.2053ZM24.5805 30.121L29.3442 34.137C29.5116 34.278 29.718 34.3488 29.9244 34.3488C29.9495 34.3488 29.9745 34.3478 29.9995 34.3457C29.8198 34.3306 29.6433 34.2615 29.4968 34.1388L24.6374 30.069L24.5805 30.121Z' fill='black'/%3E%3C/svg%3E%0A");
--email-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M52.6566 14.4378C52.653 14.433 52.65 14.427 52.6458 14.4222C52.6356 14.4102 52.6236 14.4018 52.6128 14.3904C52.6002 14.3778 52.5864 14.3652 52.5738 14.352C52.5498 14.3292 52.5264 14.3052 52.5006 14.2854C51.042 12.8736 49.0602 12 46.8744 12H13.1244C10.9398 12 8.54656 12.5114 7.08796 13.9214C7.05736 13.9448 7.02976 13.9724 7.00156 14C6.99436 14.0072 6.98716 14.0138 6.97996 14.021C6.96736 14.0342 6.95296 14.0444 6.94156 14.0588C6.93616 14.0654 6.93256 14.0726 6.92776 14.0792C5.49736 15.5408 5.025 17.8992 5.025 20.1006V40.0494C5.025 41.8998 5.39396 44.0552 6.44216 45.4208C6.45536 45.4388 6.46016 45.461 6.47636 45.4778C6.48416 45.4862 6.49316 45.4916 6.50156 45.5C7.98596 47.3858 10.5444 48.1494 13.1256 48.1494H46.8756C51.342 48.1494 54.9756 44.5158 54.9756 40.0494V20.0994C54.9744 17.8968 54.0876 15.8994 52.6566 14.4378ZM53.1744 40.0494C53.1744 41.1762 52.8732 42.2334 52.3524 43.1496L36.7542 28.9038L51.8556 16.257C52.6788 17.322 53.1744 18.6528 53.1744 20.0994V40.0494ZM46.8744 13.7994C48.2496 13.7994 49.5192 14.2476 50.556 14.9976L29.9262 32.274L9.02656 14.639C10.064 13.8872 11.748 13.8 13.1244 13.8L46.8744 13.7994ZM6.8244 20.0994C6.8244 18.654 6.90616 16.9628 7.72816 15.8984L23.0934 28.8672L7.31756 43.49C6.83636 42.6008 6.8244 41.13 6.8244 40.0494V20.0994ZM13.1244 46.3494C11.3808 46.3494 9.53876 46.0904 8.39696 44.9414L24.4812 30.0372L29.3442 34.137C29.5116 34.278 29.718 34.3488 29.9244 34.3488C30.1296 34.3488 30.3354 34.2786 30.5022 34.1388L35.3616 30.069L51.2454 44.5764C50.1114 45.6714 48.5718 46.3494 46.8744 46.3494H13.1244Z' fill='black'/%3E%3Cpath d='M7.34244 14.4378C7.34604 14.433 7.34904 14.427 7.35324 14.4222C7.36344 14.4102 7.37544 14.4018 7.38624 14.3904C7.39884 14.3778 7.41264 14.3652 7.42524 14.352C7.44924 14.3292 7.47264 14.3052 7.49844 14.2854C8.95704 12.8736 10.9386 12 13.1244 12H46.8744C49.059 12 51.4525 12.5114 52.9111 13.9214C52.9417 13.9448 52.9693 13.9724 52.9975 14C53.0047 14.0072 53.0119 14.0138 53.0191 14.021C53.0317 14.0342 53.0461 14.0444 53.0575 14.0588C53.0629 14.0654 53.0665 14.0726 53.0713 14.0792C54.5017 15.5408 54.974 17.8992 54.974 20.1006V40.0494C54.974 41.8998 54.6051 44.0552 53.5569 45.4208C53.5437 45.4388 53.5389 45.461 53.5227 45.4778C53.5149 45.4862 53.5059 45.4916 53.4975 45.5C52.0131 47.3858 49.4546 48.1494 46.8734 48.1494H13.1234C8.65704 48.1494 5.02344 44.5158 5.02344 40.0494V20.0994C5.02464 17.8968 5.91144 15.8994 7.34244 14.4378ZM6.8244 40.0494C6.8244 41.1762 7.12584 42.2334 7.64664 43.1496L23.2448 28.9038L8.14344 16.257C7.32024 17.322 6.8244 18.6528 6.8244 20.0994V40.0494ZM13.1244 13.8C11.7492 13.8 10.4798 14.2476 9.44304 14.9976L30.0728 32.274L50.9725 14.639C49.9351 13.8872 48.2508 13.7994 46.8744 13.7994L13.1244 13.8ZM53.1744 20.0994C53.1744 18.654 53.0929 16.9628 52.2709 15.8984L36.9056 28.8672L52.6815 43.49C53.1627 42.6008 53.1744 41.13 53.1744 40.0494V20.0994ZM46.8744 46.3494C48.618 46.3494 50.4603 46.0904 51.6021 44.9414L35.5178 30.0372L30.6548 34.137C30.4874 34.278 30.281 34.3488 30.0746 34.3488C29.8694 34.3488 29.6636 34.2786 29.4968 34.1388L24.6374 30.069L8.75364 44.5764C9.88764 45.6714 11.427 46.3494 13.1244 46.3494H46.8744Z' fill='black'/%3E%3C/svg%3E%0A");
--fax-filled-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M51.8896 41.0184C51.8896 42.8645 50.3882 44.3634 48.5446 44.3634H44.0058V39.8345C44.0058 39.3127 43.5825 38.8893 43.0607 38.8893H16.7189C16.1971 38.8893 15.7737 39.3127 15.7737 39.8345V44.3634H11.2374C9.39139 44.3634 7.89242 42.862 7.89242 41.0184L7.88995 28.3841C7.88995 26.538 9.39138 25.0391 11.235 25.0391H48.5445C50.3905 25.0391 51.8895 26.5405 51.8895 28.3841L51.8896 41.0184ZM10.9452 28.5101H13.0548C13.5766 28.5101 14 28.9335 14 29.4553C14 29.9771 13.5766 30.4004 13.0548 30.4004H10.9452C10.4234 30.4004 10 29.9771 10 29.4553C10 28.9335 10.4234 28.5101 10.9452 28.5101ZM10.9502 33.8658C10.9502 33.6147 11.0438 33.376 11.221 33.1988C11.573 32.8443 12.2104 32.8443 12.5624 33.1988C12.7323 33.3735 12.8406 33.6197 12.8406 33.8658C12.8406 34.1095 12.7323 34.3556 12.5624 34.5328C12.3852 34.71 12.1391 34.811 11.888 34.811C11.6443 34.811 11.3982 34.71 11.221 34.5328C11.0438 34.3581 10.9502 34.1168 10.9502 33.8658Z' fill='black'/%3E%3Cpath d='M17.6645 50.7461V40.7803H42.1185V50.7488L17.6645 50.7461Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.6645 8.89033H42.1185V23.1466H17.6645V8.89033ZM36.5949 14.618H23.1855C22.6637 14.618 22.2404 14.1947 22.2404 13.6729C22.2404 13.1511 22.6637 12.7277 23.1855 12.7277H36.5949C37.1167 12.7277 37.5401 13.1511 37.5401 13.6729C37.5401 14.1947 37.1167 14.618 36.5949 14.618ZM23.1862 18.4554H36.5955C37.1174 18.4554 37.5407 18.8788 37.5407 19.4006C37.5407 19.9224 37.1174 20.3457 36.5955 20.3457H23.1862C22.6643 20.3457 22.241 19.9224 22.241 19.4006C22.241 18.8788 22.6643 18.4554 23.1862 18.4554Z' fill='black'/%3E%3Cpath d='M36.5955 18.4554H23.1862C22.6643 18.4554 22.241 18.8788 22.241 19.4006C22.241 19.9224 22.6643 20.3457 23.1862 20.3457H36.5955C37.1174 20.3457 37.5407 19.9224 37.5407 19.4006C37.5407 18.8788 37.1174 18.4554 36.5955 18.4554Z' fill='black'/%3E%3Cpath d='M11.221 33.1988C11.0438 33.376 10.9502 33.6147 10.9502 33.8658C10.9502 34.1168 11.0438 34.3581 11.221 34.5328C11.3982 34.71 11.6443 34.811 11.888 34.811C12.1391 34.811 12.3852 34.71 12.5624 34.5328C12.7323 34.3556 12.8406 34.1095 12.8406 33.8658C12.8406 33.6197 12.7323 33.3735 12.5624 33.1988C12.2104 32.8443 11.573 32.8443 11.221 33.1988Z' fill='black'/%3E%3C/svg%3E%0A");
--fax-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48.545 23.1466H44.0062V7.94517C44.0062 7.42336 43.5829 7 43.0611 7H16.7193C16.1975 7 15.7741 7.42336 15.7741 7.94517V23.1466H11.2378C8.35063 23.1466 6.00246 25.4948 6.00246 28.3819L6 41.0188C6 43.906 8.34817 46.2541 11.2353 46.2541H15.7716V51.6913C15.7716 52.2131 16.195 52.6365 16.7168 52.6365H43.0611C43.5829 52.6365 44.0063 52.2131 44.0063 51.6913V46.2541H48.545C51.4322 46.2541 53.7804 43.906 53.7804 41.0188V28.3845C53.7804 25.4973 51.4321 23.1466 48.545 23.1466ZM17.6645 8.89033H42.1185V23.1466H17.6645V8.89033ZM17.6645 50.7461V40.7803H42.1185V45.3043V45.3116V45.319V50.7488L17.6645 50.7461ZM51.8896 41.0184C51.8896 42.8645 50.3882 44.3634 48.5446 44.3634H44.0058V39.8345C44.0058 39.3127 43.5825 38.8893 43.0607 38.8893H16.7189C16.1971 38.8893 15.7737 39.3127 15.7737 39.8345V44.3634H11.2374C9.39139 44.3634 7.89242 42.862 7.89242 41.0184L7.88995 28.3841C7.88995 26.538 9.39138 25.0391 11.235 25.0391H48.5445C50.3905 25.0391 51.8895 26.5405 51.8895 28.3841L51.8896 41.0184Z' fill='black'/%3E%3Cpath d='M23.1874 14.6181H36.5967C37.1186 14.6181 37.5419 14.1948 37.5419 13.6729C37.5419 13.1511 37.1186 12.7278 36.5967 12.7278H23.1874C22.6655 12.7278 22.2422 13.1511 22.2422 13.6729C22.2422 14.1948 22.6655 14.6181 23.1874 14.6181Z' fill='black'/%3E%3Cpath d='M13.0548 28.5103H10.9452C10.4234 28.5103 10 28.9336 10 29.4554C10 29.9772 10.4234 30.4006 10.9452 30.4006H13.0548C13.5766 30.4006 14 29.9772 14 29.4554C14 28.9336 13.5766 28.5103 13.0548 28.5103Z' fill='black'/%3E%3C/svg%3E%0A");
--phone-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56.436 43.187L46.9803 33.7313C46.1886 32.6765 45.2565 32.431 44.6101 32.4134C42.5105 32.3383 40.5913 34.6083 40.4059 34.8387L39.4688 35.9111C39.4513 35.9336 37.5145 38.136 34.2474 38.2738C31.4186 38.3966 29.4957 38.007 26.4466 35.0179C23.2345 31.871 23.4143 31.2524 23.5897 28.6967C23.755 26.2789 25.4187 25.0161 25.5164 24.9434L27.1951 23.618C29.8384 21.2478 29.0216 18.2612 28.2199 17.0109C28.1823 16.9533 28.1397 16.8981 28.0896 16.8505L18.1219 6.27059C17.7612 5.9098 17.1197 5.9098 16.7615 6.27059L13.6922 9.33986C13.0758 9.81841 8.57842 13.5215 8.06235 20.3843C7.52617 27.5373 10.3962 34.3061 18.6995 42.6091C26.1257 50.0353 32.4763 52.7273 39.6966 52.7273C39.9872 52.7273 40.2779 52.7223 40.5685 52.7098C49.2904 52.344 54.4865 46.5713 54.9605 46.0224L56.4337 44.5492C56.6141 44.3688 56.7143 44.1232 56.7143 43.8677C56.7168 43.6121 56.6164 43.3674 56.436 43.187ZM53.5747 44.6877C53.5572 44.7053 53.5371 44.7253 53.5196 44.7454C53.472 44.803 48.5687 50.4605 40.456 50.7887C33.5282 51.0718 27.3758 48.5675 20.0573 41.2516C12.1872 33.377 9.50294 27.1265 9.97886 20.5674C10.0074 20.1732 10.0513 19.7905 10.1086 19.4194C10.9612 13.8933 14.7728 10.9367 14.8945 10.8432L14.8972 10.8411C14.9373 10.8135 14.9724 10.781 15.0074 10.7484L17.4428 8.31304L26.6459 18.1284C26.8789 18.5418 27.816 20.4761 25.9569 22.1472L24.3584 23.41C24.2582 23.4827 21.923 25.2065 21.675 28.5187C21.437 31.7108 21.405 32.7701 25.1031 36.3934C28.5457 39.7708 30.9547 40.3408 34.3323 40.198C38.4238 40.0251 40.8292 37.2866 40.9267 37.1739L41.8788 36.0815C42.2521 35.6255 43.5324 34.3377 44.5271 34.3377H44.5622C44.7751 34.3452 45.1034 34.4128 45.4742 34.9265C45.5042 34.969 45.5368 35.0066 45.5744 35.0442L54.3963 43.8687L53.5747 44.6877Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8945 10.8432L14.8972 10.8411Z' fill='black'/%3E%3Cpath d='M10.1086 19.4194C10.0513 19.7905 10.0074 20.1732 9.97886 20.5674C9.50294 27.1265 12.1872 33.377 20.0573 41.2516C27.3758 48.5675 33.5282 51.0718 40.456 50.7887C48.5687 50.4605 53.472 44.803 53.5196 44.7454C53.5371 44.7253 53.5572 44.7053 53.5747 44.6877L54.3963 43.8687L45.5744 35.0442C45.5368 35.0066 45.5042 34.969 45.4742 34.9265C45.1034 34.4128 44.7751 34.3452 44.5622 34.3377H44.5271C43.5324 34.3377 42.2521 35.6255 41.8788 36.0815L40.9267 37.1739C40.8292 37.2866 38.4238 40.0251 34.3323 40.198C30.9547 40.3408 28.5457 39.7708 25.1031 36.3934C21.405 32.7701 21.437 31.7108 21.675 28.5187C21.923 25.2065 24.2582 23.4827 24.3584 23.41L25.9569 22.1472C27.816 20.4761 26.8789 18.5418 26.6459 18.1284L17.4428 8.31304L15.0074 10.7484C14.9724 10.781 14.9373 10.8135 14.8972 10.8411L14.8945 10.8432M10.1086 19.4194C10.9612 13.8933 14.7728 10.9367 14.8945 10.8432M10.1086 19.4194C10.96 13.9018 14.7616 10.9454 14.8945 10.8432M56.436 43.187L46.9803 33.7313C46.1886 32.6765 45.2565 32.431 44.6101 32.4134C42.5105 32.3383 40.5913 34.6083 40.4059 34.8387L39.4688 35.9111C39.4513 35.9336 37.5145 38.136 34.2474 38.2738C31.4186 38.3966 29.4957 38.007 26.4466 35.0179C23.2345 31.871 23.4143 31.2524 23.5897 28.6967C23.755 26.2789 25.4187 25.0161 25.5164 24.9434L27.1951 23.618C29.8384 21.2478 29.0216 18.2612 28.2199 17.0109C28.1823 16.9533 28.1397 16.8981 28.0896 16.8505L18.1219 6.27059C17.7612 5.9098 17.1197 5.9098 16.7615 6.27059L13.6922 9.33986C13.0758 9.81841 8.57842 13.5215 8.06235 20.3843C7.52617 27.5373 10.3962 34.3061 18.6995 42.6091C26.1257 50.0353 32.4763 52.7273 39.6966 52.7273C39.9872 52.7273 40.2779 52.7223 40.5685 52.7098C49.2904 52.344 54.4865 46.5713 54.9605 46.0224L56.4337 44.5492C56.6141 44.3688 56.7143 44.1232 56.7143 43.8677C56.7168 43.6121 56.6164 43.3674 56.436 43.187Z' stroke='black' stroke-width='0.4'/%3E%3C/svg%3E%0A");
--phone-filled-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55.324 43.2524L46.8474 34.7759C46.1376 33.8303 45.3021 33.6102 44.7226 33.5944C42.8404 33.527 41.1199 35.562 40.9537 35.7686L40.1137 36.7299C40.098 36.7501 38.3617 38.7245 35.4329 38.848C32.8971 38.958 30.2153 37.6508 27.4819 34.9712C24.6024 32.1502 23.8056 30.6377 23.9628 28.3466C24.111 26.1792 25.6025 25.0471 25.69 24.982L27.1949 23.7938C29.5645 21.669 28.8323 18.9917 28.1136 17.8708C28.0799 17.8191 28.0417 17.7697 27.9968 17.727L19.0612 8.24258C18.7378 7.91914 18.1628 7.91914 17.8416 8.24258L15.0901 10.994C14.5376 11.423 10.5059 14.7427 10.0432 20.8949C9.56255 27.3072 13.0934 34.3331 20.5369 41.7764C27.1942 48.4337 33.8451 51.8049 40.3179 51.8049C40.5784 51.8049 40.839 51.8004 41.0995 51.7892C48.9183 51.4613 53.5763 46.2863 54.0013 45.7943L55.322 44.4736C55.4837 44.3119 55.5735 44.0917 55.5735 43.8626C55.5758 43.6335 55.4857 43.4141 55.324 43.2524ZM52.759 44.5978C52.7433 44.6135 52.7253 44.6315 52.7096 44.6495C52.6669 44.7011 48.2713 49.7728 40.9987 50.067C34.7881 50.3208 28.3148 47.1179 21.7541 40.5595C14.6989 33.5002 11.3346 26.939 11.7613 21.0591C12.1723 15.3855 16.1322 12.3692 16.1704 12.3398C16.2063 12.3151 16.2377 12.2859 16.2692 12.2567L18.4524 10.0735L26.7026 18.8726C26.9115 19.2432 27.7515 20.9772 26.0849 22.4753L24.6519 23.6073C24.5621 23.6725 22.4687 25.2178 22.2464 28.1871C22.033 31.0486 22.9623 32.9562 26.2775 36.2043C29.3636 39.232 32.4811 40.701 35.509 40.573C39.1769 40.418 41.3332 37.963 41.4206 37.862L42.2741 36.8827C42.6088 36.4739 43.7565 35.3194 44.6482 35.3194H44.6796C44.8706 35.3261 45.1648 35.3868 45.4972 35.8472C45.5242 35.8854 45.5534 35.9191 45.5871 35.9528L53.4956 43.8636L52.759 44.5978Z' fill='black'/%3E%3Cpath d='M52.759 44.5978C52.7433 44.6135 52.7253 44.6315 52.7096 44.6495C52.6669 44.7011 48.2713 49.7728 40.9987 50.067C34.7881 50.3208 28.3148 47.1179 21.7541 40.5595C14.6989 33.5002 11.3346 26.939 11.7613 21.0591C12.1709 15.405 16.1055 12.3896 16.1704 12.3398C16.2063 12.3151 16.2377 12.2859 16.2692 12.2567L18.4524 10.0735L26.7026 18.8726C26.9115 19.2432 27.7515 20.9772 26.0849 22.4753L24.6519 23.6073C24.5621 23.6725 22.4687 25.2178 22.2464 28.1871C22.033 31.0486 22.9623 32.9562 26.2775 36.2043C29.3636 39.232 32.4811 40.701 35.509 40.573C39.1769 40.418 41.3332 37.963 41.4206 37.862L42.2741 36.8827C42.6088 36.4739 43.7565 35.3194 44.6482 35.3194H44.6796C44.8706 35.3261 45.1648 35.3868 45.4972 35.8472C45.5242 35.8854 45.5534 35.9191 45.5871 35.9528L53.4956 43.8636L52.759 44.5978Z' fill='black'/%3E%3C/svg%3E%0A");
}
body {
line-height: 2em;
align-items: stretch;
font-family: 'AvenirLTStd Book', sans-serif;
font-size: 16px; }
html[lang=zh] body {
font-family: 'AvenirLTStd Book', 'NotoSansHK-Regular', sans-serif; }
@font-face {
font-family: 'AvenirLTStd Oblique';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-Oblique.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd BookOblique';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-BookOblique.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd Medium';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-Medium.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd LightOblique';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-LightOblique.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd Heavy';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-Heavy.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd HeavyOblique';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-HeavyOblique.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd Light';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-Light.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd BlackOblique';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-BlackOblique.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd Black';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-Black.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd MediumOblique';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-MediumOblique.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd Book';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-Book.otf') format('opentype'); }
@font-face {
font-family: 'AvenirLTStd Roman';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/AvenirLTStd-Roman.otf') format('opentype'); }
@font-face {
font-family: 'NotoSansHK-Black';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-Black.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-Regular';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-Regular.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-Thin';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-Thin.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-Bold';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-Bold.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-ExtraBold';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-ExtraBold.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-Medium';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-Medium.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-SemiBold';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-SemiBold.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-Light';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-Light.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
@font-face {
font-family: 'NotoSansHK-ExtraLight';
font-display: block;
font-weight: normal;
font-style: norma;
src: url('/NotoSansHK-ExtraLight.ttf') format('truetype');
unicode-range: U+0080-FFFF; }
body > header {
background-color: #FFFFFF;
color: var(--brand-text-colour);
display: flex;
flex-direction: row;
align-items: center;
z-index: 10;
position: relative;
-webkit-font-smoothing: antialiased; }
body > header > .home svg {
transform: translateY(6px);
transition-property: transform, height;
transition-duration: 0.4s; }
body > header a {
display: inline-block;
padding: 32px;
margin: -32px;
transition: color, opacity 0.3s ease;
cursor: pointer; }
body > header .language > a:first-child {
display: inline-block;
padding-right: 4px;
margin-right: -4px; }
body > header .language > a:last-child {
display: inline-block;
padding-left: 4px;
margin-left: -4px; }
body > header a, body > header a:hover, body > header a:visited, body > header a:focus, body > header a:active {
text-decoration: none;
color: inherit;
outline: 0; }
body > header ul > li:before {
content: none; }
body > header nav > .separator {
width: 1px;
height: 0.9em;
background-color: var(--brand-text-colour);
display: inline-block;
vertical-align: middle;
transform: translateY(-2px); }
body > header > .home svg:hover {
transform: scale(1.05) translateY(6px); }
body > header li:hover a {
color: var(--brand-text-colour-2); }
body > header .language a {
transition-property: color, opacity;
transition-duration: 0.4s; }
body > header .language:hover a:hover {
color: var(--brand-text-colour-2); }
body > header .language:hover a:not(:hover) {
opacity: 0.2; }
@media screen and (max-width: 1199px) {
body > header {
padding: 12px 0 12px 24px; }
.hamburger-target {
display: block;
width: 48px;
height: 48px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none; }
.hamburger {
width: 48px;
height: 48px;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
transform: scale(0.75); }
.hamburger span {
display: block;
width: 32px;
height: 4px;
position: relative;
background-color: var(--dark-background-colour-4);
border-radius: 2px;
z-index: 1;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease; }
.hamburger span:first-child {
transform-origin: 2px 2px; }
.hamburger span:last-child {
transform-origin: 2px 2px; }
input.hamburger-target:checked + .hamburger span {
opacity: 1;
transform: translate(4.1005px, -0.89949px) rotate(45deg);
background-color: var(--brand-text-colour); }
input.hamburger-target:checked + .hamburger span:nth-child(2) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2); }
input.hamburger-target:checked + .hamburger span:last-child {
transform: translate(4.1005px, 0.89949px) rotate(-45deg); }
.hamburger + * {
margin-left: 24px; }
body > header > .home svg {
height: 60px;
width: 120px;
transform: translateY(4px); }
body > header nav {
font-size: 20px; }
body > header .menu-spacing {
background: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1; }
body > header .menu {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -2;
overflow: auto;
background: white;
padding-top: 96px;
transition-property: transform;
transition-duration: 0.4s;
transform: translateY(-100%);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between; }
body > header input.hamburger-target:checked ~ .menu {
transform: translateY(0); }
body > header ul:hover > li:not(:hover) a {
opacity: 0.2; }
body > header ul > li > a {
padding: 12px 50vw;
margin-top: -12px;
margin-bottom: -12px; }
body > header ul > li:first-child > a {
padding-top: 32px;
margin-top: -32px; }
body > header ul > li:last-child > a {
padding-bottom: 32px;
margin-bottom: -32px; }
body > header .links {
overflow: hidden;
padding: 12px 0; }
body > header .links ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch; }
body > header .links ul > li {
display: flex;
justify-content: center;
align-items: center;
padding: 12px; }
body > header .language {
overflow: hidden;
padding: 24px;
text-align: center; }
}
@media screen and (min-width: 1200px) {
input.hamburger-target {
display: none; }
.hamburger {
display: none; }
body > header {
padding: 0 48px;
height: 96px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
body > header > .home svg {
height: 80px;
width: 160px; }
body > header nav {
font-size: 22px; }
body > header .menu-spacing {
flex: 1; }
body > header .menu {
display: flex;
flex-direction: row;
align-items: center; }
body > header .menu nav + nav {
margin-left: 96px; }
body > header ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
position: relative; }
body > header ul > li + li {
margin-left: 64px; }
body > header ul:after {
content: ' ';
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5px;
transform: translateY(9px);
background-color: var(--neutral-colour-2); }
body > header ul > li {
position: relative;
z-index: 1; }
body > header ul > li:after {
content: ' ';
display: flex;
position: absolute;
width: 5px;
height: 5px;
border-radius: 2.5px;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(11.25px) scale(0);
background-color: var(--brand-highlight-colour);
transition-property: transform;
transition-duration: 0.4s;
}
body > header ul:not(:hover) > li.active:after {
transform: translateX(-50%) translateY(11.25px) scale(1); }
body > header ul > li:hover:after {
transform: translateX(-50%) translateY(11.25px) scale(1); }
}
.columns {
display: flex;
flex-direction: row;
-moz-column-gap: 60px;
column-gap: 60px; }
.subcolumn {
display: flex;
flex-direction: column; }
hr {
display: block;
border: 0;
height: 0.5px;
background-color: var(--secondary-text-light-colour);
margin: 0;
padding: 0; }
main {
display: flex;
flex-direction: column;
align-items: stretch;
}
main > header {
position: relative;
height: 360px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-color: var(--dark-background-colour-3);
color: #FFFFFF; }
main > header > h1 {
font-size: 60px;
font-family: 'AvenirLTStd Light', sans-serif;
font-synthesis: weight;
font-weight: 100;
line-height: 1em; }
html[lang=zh] main > header > h1 {
font-family: 'AvenirLTStd Light', 'NotoSansHK-Regular', sans-serif; }
main > header > :not(img) {
z-index: 2; }
main > header > .image-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #000000;
opacity: 0.48; }
main > header > img {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
-o-object-fit: cover;
object-fit: cover; }
@media screen and (max-width: 539px) {
main > header {
padding: 48px; } }
@media screen and (min-width: 540px) and (max-width: 959px) {
main > header {
padding: 48px; }
}
@media screen and (min-width: 960px) {
main > header {
padding: 48px 96px; }
}
main {
background-color: var(--neutral-colour); }
main > article {
padding: 48px 96px;
display: flex;
flex-direction: column;
color: #000000; }
main > article h1, main > article h2, main > article h3, main > article h4, main > article h5, main > article h6 {
color: var(--brand-text-colour-2); }
main > article img {
background-color: rgba(255, 255, 255, 0.5);
-o-object-fit: contain;
object-fit: contain;
max-width: 100vmin;
max-height: 100vmin;
align-self: center; }
main > article > img {
width: 100%;
margin: 48px 0; }
@media screen and (max-width: 959px) {
main > article {
padding: 48px; }
}
@media screen and (min-width: 960px) {
main > article {
padding: 48px 96px 96px 96px; }
}
@media screen and (max-width: 1199px) {
main > article img {
max-width: min(100vw, 720px);
max-height: min(100vh, 720px); } }
main p {
font-size: 18px; }
main li {
font-size: 18px; }
main p + p {
margin-top: 2em; }
main h3 + p {
margin-top: 1em; }
main p + h3 {
margin-top: 2em; }
footer {
background-color: var(--brand-background-colour);
padding: 32px;
display: flex;
flex-direction: column;
align-items: stretch;
color: var(--secondary-text-colour); }
footer * {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
footer a, footer a:hover, footer a:visited, footer a:focus, footer a:active {
text-decoration: none;
color: inherit;
outline: 0; }
footer > div {
display: flex;
flex-direction: row;
margin: 0 -32px; }
footer > div > * {
flex: 1; }
footer > div > :first-child > * {
margin-left: 32px;
min-width: 320px; }
footer > div > :last-child > * {
margin-left: 32px; }
footer address {
display: flex;
flex-direction: column;
align-items: flex-start;
text-wrap: pretty;
line-height: 1em; }
footer address > a.home > svg {
height: 60px;
width: 120px; }
footer address > a.home + a {
margin-top: 1.5em; }
footer address > a + a {
margin-top: 1.5em; }
footer address > a:not(.home):before {
content: ' ';
width: 1.5em;
height: 1.5em;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: currentColor;
position: absolute;
transform: translateX(-1.2em) translateX(-12px) translateY(0.5em) translateY(-50%) translateY(-1px); }
footer address > a.tel:before {
-webkit-mask-image: var(--phone-filled-icon);
mask-image: var(--phone-filled-icon); }
footer address > a.fax:before {
-webkit-mask-image: var(--fax-filled-icon);
mask-image: var(--fax-filled-icon); }
footer address > a.email:before {
-webkit-mask-image: var(--email-filled-icon);
mask-image: var(--email-filled-icon); }
footer address > a.address:before {
-webkit-mask-image: var(--pin-filled-icon);
mask-image: var(--pin-filled-icon); }
footer iframe {
align-self: stretch;
border: 4px solid var(--neutral-colour-3);
border-radius: 8px; }
footer > div > :last-child {
display: flex;
justify-content: flex-end;
align-items: center; }
footer > div > :last-child > div {
display: flex;
flex-direction: column; }
footer > div > :last-child > div > span {
font-size: 22px;
color: var(--neutral-colour-3); }
footer ul {
padding: 0;
margin: 0;
display: flex;
font-size: 18px;
line-height: 2.5em; }
footer ul > li:before {
content: none; }
footer > hr + * {
margin-top: 12px; }
footer > .copyright {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
-moz-column-gap: 24px;
column-gap: 24px;
color: var(--secondary-text-light-colour);
font-size: 14px;
line-height: 1em; }
@media screen and (max-width: 959px) {
footer > div {
flex-wrap: wrap; }
footer > div > :first-child > * {
max-width: calc(100vw - 64px); }
footer address > a:not(.home) {
margin-left: calc(1.2em + 12px); }
footer > div > :last-child {
flex-basis: 100%;
margin-top: 48px;
margin-bottom: 32px; }
footer > div > :last-child > * {
margin-right: 32px; }
footer > div > :last-child > div {
flex: 1; }
footer ul {
flex-direction: row;
align-self: stretch;
justify-content: space-around;
flex-wrap: wrap;
-moz-column-gap: 12px;
column-gap: 12px; }
footer iframe {
margin: 24px 32px 12px 32px;
align-self: stretch; }
}
@media screen and (min-width: 960px) {
footer > div {
margin-bottom: 16px; }
footer > div > :first-child > * {
margin-right: 32px;
margin-bottom: 32px; }
footer address > a {
margin-left: calc(1em + 1.2em + 12px); }
footer address > a.home {
margin-left: 1em; }
footer > div > :last-child {
justify-content: flex-end; }
footer > div > :last-child > * {
margin-right: 96px; }
footer > div > :last-child > div > span {
margin-bottom: 16px; }
footer ul {
flex-direction: column; }
footer iframe {
margin: 24px 0; }
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 720px;
position: relative;
z-index: 1; }
.hero-content > span {
display: flex;
font-size: 18px;
color: var(--highlight-colour-2);
align-self: flex-start; }
.hero-content > span + h4 {
margin-top: 16px; }
.hero-content > h4 {
align-self: stretch;
color: #FFFFFF;
line-height: 1.4em;
font-family: 'AvenirLTStd Light', sans-serif;
font-synthesis: weight;
font-weight: 100;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden; }
html[lang=zh] .hero-content > h4 {
font-family: 'AvenirLTStd Light', 'NotoSansHK-Regular', sans-serif; }
.hero-content > .background-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: var(--dark-background-colour);
z-index: -1;
opacity: 0.27;
transform-property: opacity;
transition-duration: 0.4s; }
@media screen and (max-width: 539px) {
.hero-content {
margin: 0 16px;
padding: 24px 12px;
}
.hero-content > h4 {
font-size: 24px;
-webkit-line-clamp: 9;
line-clamp: 9; }
section.hero > .hero-dots {
padding: 8px 20px; }
.hero-content > .background-overlay {
opacity: 0.5; } }
@media screen and (min-width: 540px) and (max-width: 767px) {
.hero-content {
margin: 0 16px;
padding: 24px 32px; }
.hero-content > h4 {
font-size: 42px;
-webkit-line-clamp: 5;
line-clamp: 5; }
section.hero > .hero-dots {
padding: 8px 40px; } }
@media screen and (min-width: 768px) and (max-width: 1199px) {
.hero-content {
align-self: flex-start;
margin: 0 16px;
padding: 24px 32px; }
.hero-content > h4 {
font-size: 42px;
-webkit-line-clamp: 5;
line-clamp: 5; }
section.hero > .hero-dots {
padding: 8px 40px; } }
@media screen and (min-width: 1200px) {
.hero-content {
align-self: flex-start;
margin-left: 60px;
padding: 24px 32px; }
.hero-content > h4 {
font-size: 42px;
-webkit-line-clamp: 4;
line-clamp: 4; }
section.hero > .hero-dots {
padding: 8px 80px; } }
main > article h2 + p {
margin-top: 1em; }
main > article h2 + ul {
margin-top: 0.5em; }
main > article h3 + address {
margin-top: 0.5em; }
main > article h3 + ul {
margin-top: 0.5em; }
main > article p + h2 {
margin-top: 1.5em; }
main > article ul + h2 {
margin-top: 1.5em; }
main > article address + h3 {
margin-top: 1.5em; }
main > article ul + h3 {
margin-top: 1.5em; }
.members-layout {
display: flex; }
.member-groups {
display: flex;
flex-direction: column; }
.member-groups ul {
padding: 0;
margin: 0;
color: var(--brand-text-colour); }
.member-groups ul > li:before {
content: none; }
.member-groups ul > li {
padding-left: 32px;
font-size: 24px;
position: relative;
line-height: 1em;
cursor: pointer; }
.member-groups ul:not(:hover) > li.active:before, .member-groups ul:hover > li:hover:before {
opacity: 1; }
.member-groups ul > li:before {
content: ' ';
display: flex;
position: absolute;
width: 18px;
height: 18px;
background-color: var(--highlight-colour);
-webkit-mask-image: var(--right-triangle-icon);
mask-image: var(--right-triangle-icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
top: 1px;
left: 0;
margin-right: 0;
margin-left: 0;
transform: none;
opacity: 0;
transition-property: opacity;
transition-duration: 0.4s; }
.member-groups ul > li a, .member-groups ul > li a:hover, .member-groups ul > li a:visited, .member-groups ul > li a:focus, .member-groups ul > li a:active {
text-decoration: none;
color: inherit;
outline: 0; }
.members-grid {
flex: 1;
padding: 24px 0;
display: grid;
grid-gap: 60px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-rows: max-content; }
.members-grid > a > article {
display: flex;
flex-direction: column;
align-items: flex-start; }
.members-grid > a > article > img {
background-color: var(--image-placeholder-colour);
max-width: unset;
max-height: unset;
width: 100%;
aspect-ratio: 3 / 4;
-o-object-fit: cover;
object-fit: cover; }
.members-grid article > img + h4 {
margin-top: 24px; }
.members-grid article > h4 {
color: var(--brand-text-colour);
font-size: 24px;
line-height: 1em; }
.members-grid article > h4 + span {
margin-top: 12px; }
.members-grid article > span {
line-height: 1.5em;
white-space: pre-line; }
.members-grid > a, .members-grid > a:hover, .members-grid > a:visited, .members-grid > a:focus, .members-grid > a:active {
text-decoration: none;
color: inherit;
outline: 0; }
.members-grid > a {
transition-property: transform;
transition-duration: 1s;
backface-visibility: hidden; }
.members-grid > a:hover {
transform: scale(1.05) translate3d(0, 0, 0) perspective(1px) translateY(2px); }
header.member-banner > img.portrait {
pointer-events: none;
z-index: 1;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: right;
object-position: right;
right: 200px;
width: unset;
left: unset; }
@media screen and (max-width: 539px) {
.member-groups ul {
flex-direction: column;
row-gap: 24px; }
main > header.member-banner > h1 {
font-size: 42px; }
}
@media screen and (max-width: 959px) and (min-width: 540px) {
.member-groups ul {
flex-direction: row; }
.member-groups ul > li {
transition-property: padding-left;
transition-duration: 0.4s; }
.member-groups ul:not(:hover) > li:not(.active):first-child, .member-groups ul:hover > li:not(:hover):first-child {
padding-left: 0; }
.member-groups ul:not(:hover) > li.active:not(:first-child), .member-groups ul:hover > li:hover:not(:first-child) {
padding-left: 64px; }
.member-groups ul > li:not(:first-child):before {
left: 32px; }
}
@media screen and (max-width: 959px) {
main > header.member-banner {
padding-top: 0;
padding-bottom: 0;
justify-content: center;
height: unset;
background-color: unset;
color: #000000; }
main > header.member-banner > img {
position: static;
width: 100vw;
height: 30vw;
margin: 0 -48px;
min-height: 180px; }
main > header.member-banner > img.portrait {
position: absolute;
width: 100vw;
height: 30vw;
min-height: 180px;
margin: 0;
top: 0;
left: 0;
right: 0;
-o-object-position: center;
object-position: center; }
main > header.member-banner h1, main > header.member-banner h2 {
color: var(--brand-text-colour); }
main > header > h1 {
line-height: 1em; }
main > header.member-banner > h1 + h2 {
margin-top: 0.5em; }
main > header.member-banner > h2 + p {
margin-top: 1em; }
.members-layout {
flex-direction: column;
row-gap: 32px; }
.member-groups ul {
display: flex;
justify-content: flex-start;
margin-top: 12px; }
}
@media screen and (min-width: 960px) {
.members-layout {
flex-direction: row;
-moz-column-gap: 60px;
column-gap: 60px; }
.member-groups {
padding-right: 32px;
margin-left: -40px;
border-right: solid 1px var(--highlight-colour); }
.member-groups ul {
margin-top: 32px; }
.member-groups ul > li + li {
margin-top: 48px; }
}
.news-layout {
display: flex;
flex-direction: column;
padding: 48px;
align-items: center; }
.news-layout > a, .news-layout > a:hover, .news-layout > a:visited, .news-layout > a:focus, .news-layout > a:active {
text-decoration: none;
color: inherit;
outline: 0; }
.news-layout > a.news-layout-item {
transition-property: transform, box-shadow;
transition-duration: 1s;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased; }
.news-layout > a.news-layout-item * {
-webkit-font-smoothing: subpixel-antialiased; }
.news-layout > a.news-layout-item:hover {
transform: scale(1.01) translate3d(0, 0, 0) perspective(1px);
box-shadow: -8px 8px 64px -16px rgba(0, 0, 0, 0.4); }
.news-layout > a.news-layout-item > article {
display: flex;
padding: 12px;
color: var(--brand-text-colour-2);
font-family: 'AvenirLTStd Light', sans-serif;
font-synthesis: weight;
font-weight: 100;
background-color: #FFFFFF; }
html[lang=zh] .news-layout > a.news-layout-item > article {
font-family: 'AvenirLTStd Light', 'NotoSansHK-Regular', sans-serif; }
.news-layout > a.news-layout-item > article h4 {
font-size: 28px;
text-wrap: pretty;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical; }
.news-layout > a.news-layout-item > article span {
font-size: 18px; }
.news-layout > a.news-layout-item > article span + h4 {
margin-top: 8px; }
.news-layout > a.news-layout-item > article > img {
max-width: unset;
max-height: unset;
-o-object-fit: cover;
object-fit: cover; }
.news-layout > a.news-layout-item > article > img + div {
flex: 1;
align-self: stretch;
justify-content: center; }
.news-layout > a.news-layout-item > article > div {
display: flex;
flex-direction: column; }
.news-layout > a.more-action {
margin: 32px -16px -16px;
padding: 32px;
color: var(--brand-text-colour);
display: flex;
flex-direction: column;
align-items: center;
font-size: 26px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-family: 'AvenirLTStd Roman', sans-serif;
transition-property: transform, opacity;
transition-duration: 0.4s; }
.news-layout > a.more-action.no-more {
transform: translateY(16px);
opacity: 0;
pointer-events: none; }
html[lang=zh] .news-layout > a.more-action {
font-family: 'AvenirLTStd Roman', 'NotoSansHK-Medium', sans-serif; }
.news-layout > a.more-action:after {
content: ' ';
display: flex;
width: 36px;
height: 36px;
background-color: var(--brand-text-colour);
-webkit-mask-image: var(--more-icon);
mask-image: var(--more-icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
margin-top: 8px; }
.news-layout > a.more-action:hover {
transform: translateY(4px); }
@media screen and (max-width: 959px) {
.news-layout > a.news-layout-item {
width: 100%; }
.news-layout > a.news-layout-item > article {
flex-direction: column;
width: 100%; }
.news-layout > a.news-layout-item > article h4 {
-webkit-line-clamp: 3;
line-clamp: 3; }
.news-layout > * + a.news-layout-item {
margin-top: 48px; }
.news-layout > a.news-layout-item > article > img {
width: 100%;
height: 240px; }
.news-layout > a.news-layout-item > article > img + div {
margin: 16px 0 0;
padding: 0 4px; }
}
@media screen and (min-width: 960px) {
.news-layout > a.news-layout-item {
width: min(1000px, calc(100vw - 200px));
height: 160px; }
.news-layout > a.news-layout-item > article {
width: 100%;
height: 100%; }
.news-layout > a.news-layout-item > article h4 {
-webkit-line-clamp: 2;
line-clamp: 2; }
.news-layout > * + a.news-layout-item {
margin-top: 24px; }
.news-layout > a.news-layout-item > article h4:last-child {
margin-bottom: 16px; }
.news-layout > a.news-layout-item > article > img {
height: 100%;
width: 240px; }
.news-layout > a.news-layout-item > article > img + div {
margin: 0 32px;
margin-right: 8px; }
}
.news-article {
display: flex;
flex-direction: column;
padding-top: 48px;
padding-bottom: 96px;
font-family: 'AvenirLTStd Light', sans-serif;
font-synthesis: weight;
font-weight: 100; }
html[lang=zh] .news-article {
font-family: 'AvenirLTStd Light', 'NotoSansHK-Regular', sans-serif; }
.news-article > h6 {
font-size: 18px; }
.news-article > h6 + h2 {
margin-top: 24px; }
.news-article > h2 {
font-size: 28px; }
.news-article > h2 + * {
margin-top: 32px; }
.news-article a, .news-article a:hover, .news-article a:visited, .news-article a:focus, .news-article a:active {
text-decoration: none;
outline: 0;
font-family: 'AvenirLTStd Light', sans-serif;
font-synthesis: weight;
font-weight: 100; }
html[lang=zh] .news-article a, html[lang=zh] .news-article a:hover, html[lang=zh] .news-article a:visited, html[lang=zh] .news-article a:focus, html[lang=zh] .news-article a:active {
font-family: 'AvenirLTStd Light', 'NotoSansHK-Regular', sans-serif; }
ul.practice-grid {
flex: 1;
margin: 0;
padding: 0;
display: grid;
grid-gap: 24px 64px;
grid-template-columns: repeat(auto-fill, 300px);
justify-content: space-between;
color: var(--brand-text-colour-3); }
ul.practice-grid > li {
display: flex;
align-items: center;
font-size: 24px; }
ul.practice-grid > li:before {
content: ' ';
display: flex;
width: 22px;
height: 22px;
background-color: var(--dark-background-colour-4);
-webkit-mask-image: var(--scale-icon);
mask-image: var(--scale-icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transform: translateY(-3px);
margin-right: 16px;
margin-left: 0; }
.practice-grid a, .practice-grid a:hover, .practice-grid a:visited, .practice-grid a:focus, .practice-grid a:active {
text-decoration: none;
color: inherit;
outline: 0; }
.practice-grid > li {
transition-property: transform;
transition-duration: 1s;
transform-origin: left;
backface-visibility: hidden; }
.practice-grid > li:hover {
transform: scale(1.05) translate3d(0, 0, 0) perspective(1px) translateY(2px) translateX(-8px); }
section.hero {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
height: max(400px, calc(100vh - 200px));
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
section.hero > .hero-carousel {
flex: 1;
position: relative;
touch-action: pan-y; }
section.hero > .hero-carousel > .hero-carousel-pane.active {
opacity: 1; }
section.hero > .hero-carousel > .hero-carousel-pane:not(.active) {
pointer-events: none; }
section.hero > .hero-carousel > .hero-carousel-pane * {
pointer-events: none; }
section.hero > .hero-carousel > .hero-carousel-pane {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition-property: 0;
transition-duration: 0.5s; }
section.hero > .hero-carousel > .hero-carousel-pane > .hero-content {
max-height: 100%; }
section.hero > .hero-carousel > .hero-carousel-pane > :not(img) {
z-index: 2; }
section.hero > .hero-carousel > .hero-carousel-pane > img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
-o-object-fit: cover;
object-fit: cover; }
section.hero > .hero-carousel > .hero-carousel-pane > .hero-carousel-overlay {
position: absolute;
display: flex;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(32, 32, 32, 76) 0, rgba(32, 32, 32, 0) 100%);
z-index: 1; }
section.hero > .hero-dots {
display: flex;
flex-direction: row; }
section.hero > .hero-dots > span {
padding: 15px;
cursor: pointer; }
section.hero > .hero-dots > span:before {
content: ' ';
display: flex;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: var(--neutral-colour-4);
transition-property: background-color;
transition-duration: 0.4s; }
section.hero > .hero-dots > span.active:before {
background-color: var(--highlight-colour-3); }
@keyframes dots-manual {
0% { background-color: var(--neutral-colour-4); }
100% { background-color: var(--highlight-colour-3); } }
.hero-dots > .hero-dots-manual:before {
animation-delay: var(--animation-delay);
animation-name: dots-manual;
animation-timing-function: linear;
animation-duration: 1s;
animation-play-state: paused;
animation-fill-mode: both; }
section.latest-news {
display: flex;
flex-direction: column;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
section.latest-news a, section.latest-news a:hover, section.latest-news a:visited, section.latest-news a:focus, section.latest-news a:active {
text-decoration: none;
color: inherit;
outline: 0; }
section.latest-news > h2, section.members > h2 {
color: var(--brand-text-colour);
display: flex;
align-items: center;
width: 100%;
font-family: 'AvenirLTStd Light', sans-serif;
font-synthesis: weight;
font-weight: 100; }
html[lang=zh] section.latest-news > h2, html[lang=zh] section.members > h2 {
font-family: 'AvenirLTStd Light', 'NotoSansHK-Regular', sans-serif; }
section.latest-news > h2:before, section.latest-news > h2:after, section.members > h2:before, section.members > h2:after {
content: ' ';
display: flex;
flex: 1;
height: 1px;
background-color: var(--neutral-colour-2); }
section.latest-news > .news-carousel {
position: relative;
align-self: stretch;
height: 500px;
display: flex;
flex-direction: row;
align-items: center;
touch-action: pan-y; }
section.latest-news > .news-carousel:hover {
cursor: pointer; }
section.latest-news > .news-carousel * {
pointer-events: none; }
section.latest-news > .news-carousel > a:before {
content: ' ';
display: block;
width: 60px;
height: 60px;
background-color: var(--dark-background-colour-2);
-webkit-mask-image: var(--chevron-icon);
mask-image: var(--chevron-icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
z-index: 1;
position: absolute;
top: 50%;
left: calc(35vw - 30px);
transform: translateY(-50%) scaleX(0) translateX(-5px);
transition-property: opacity, transform, left;
transition-duration: 0.4s;
opacity: 0; }
section.latest-news > .news-carousel > .next-control:before {
opacity: 1; }
section.latest-news > .news-carousel > .left.next-control:before {
transform: translateY(-50%) scaleX(1) translateX(-5px); }
section.latest-news > .news-carousel > .right.next-control:before {
transform: translateY(-50%) scaleX(-1) translateX(-5px); }
section.latest-news > .news-carousel > a > img {
transition-property: transform, transform-origin, box-shadow;
transition-duration: 1s;
filter: brightness(0.7); }
section.latest-news > .news-carousel:hover > .active > img {
box-shadow: -8px 8px 64px -16px rgba(0, 0, 0, 0.4); }
section.latest-news > .news-carousel > :not(.active) > img {
transform: scale(0.7); }
section.latest-news > .news-carousel > .left > img {
transform-origin: 60vw 50%; }
section.latest-news > .news-carousel > .right > img {
transform-origin: 10vw 50%; }
section.latest-news > .news-carousel > a.active {
z-index: 2; }
section.latest-news > .news-carousel > a {
position: absolute;
left: 0;
height: 100%;
width: 70vw;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
--transform: translateX(0);
transform: var(--transform) translateX(var(--left)) translate3d(0, 0, 0) perspective(1px);
transition-property: transform;
transition-duration: 1s;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased; }
section.latest-news > .news-carousel.dragging > a {
transition-duration: 0s; }
section.latest-news > .news-carousel > a * {
-webkit-font-smoothing: subpixel-antialiased; }
section.latest-news > .news-carousel:hover > a.active {
transform: scale(1.01) var(--transform) translateX(var(--left)) translate3d(0, 0, 0) perspective(1px); }
section.latest-news > .news-carousel > a > .hero-content {
transition-property: opacity;
transition-duration: 1s; }
section.latest-news > .news-carousel > :not(.active) > .hero-content {
opacity: 0; }
section.latest-news > .news-carousel > a > article.hero-content {
flex-direction: column-reverse; }
section.latest-news > .news-carousel > a > article.hero-content > span + h4 {
margin-top: 0;
margin-bottom: 16px; }
section.latest-news > .news-carousel > a > :not(img) {
z-index: 1; }
section.latest-news > .news-carousel > a > img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover; }
section.members {
display: flex;
flex-direction: column;
align-items: center; }
section.members a, section.members a:hover, section.members a:visited, section.members a:focus, section.members a:active {
text-decoration: none;
color: inherit;
outline: 0; }
section.members a {
transition-property: transform, box-shadow;
transition-duration: 1s;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased; }
section.members a * {
-webkit-font-smoothing: subpixel-antialiased; }
section.members a:hover {
transform: scale(1.05) translate3d(0, 0, 0) perspective(1px);
box-shadow: -8px 8px 64px -16px rgba(0, 0, 0, 0.4); }
section.members > h2 {
color: var(--brand-text-colour) }
section.members > div {
display: flex;
justify-items: center; }
section.members > div > a {
display: flex; }
section.members > div > a > article {
position: relative;
display: flex;
flex-direction: row; }
section.members > div > a > article > :not(img) {
z-index: 1; }
section.members > div > a > article > img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
-o-object-fit: cover;
object-fit: cover; }
section.members > div > a > article > h4 {
align-self: flex-end;
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #FFFFFF;
background-color: rgba(0, 0, 0, 50%);
height: 2em;
padding-top: 4px;
font-family: 'AvenirLTStd Light', sans-serif;
font-synthesis: weight;
font-weight: 100; }
html[lang=zh] section.members > div > a > article > h4 {
font-family: 'AvenirLTStd Light', 'NotoSansHK-Regular', sans-serif; }
section.latest-news > .news-carousel .hero-content > .background-overlay {
transform-property: opacity;
transition-duration: 0.4s; }
@media screen and (max-width: 539px) {
section.latest-news > h2, section.members > h2 {
font-size: 28px; }
section.latest-news > h2:before, section.members > h2:before {
margin: 0 16px; }
section.latest-news > h2:after, section.members > h2:after {
margin: 0 16px; }
section.latest-news > h2 + .news-carousel, section.members > h2 + div {
margin-top: 48px; }
section.hero, section.latest-news, section.members {
margin-bottom: 96px; }
section.latest-news > .news-carousel > .left.next-control:before {
left: calc(70vw - 60px - 7vw + 26px); }
section.latest-news > .news-carousel > .right.next-control:before {
left: calc(7vw - 26px); }
section.latest-news > .news-carousel > :not(.active) > img {
transform: scale(0.99); }
section.latest-news > .news-carousel > .left > img {
transform-origin: -130vw 50%; }
section.latest-news > .news-carousel > .right > img {
transform-origin: 200vw 50%; }
section.members > div {
flex-direction: column;
row-gap: 32px; }
section.members > div > a > article {
width: calc(100vw - 96px);
height: calc(2 * (100vw - 96px) / 3); }
section.members > div > a > article > h4 {
font-size: 24px; }
}
@media screen and (min-width: 540px) and (max-width: 959px) {
section.latest-news > h2, section.members > h2 {
font-size: 36px; }
section.latest-news > h2:before, section.members > h2:before {
margin: 0 32px; }
section.latest-news > h2:after, section.members > h2:after {
margin: 0 32px; }
section.latest-news > h2 + .news-carousel, section.members > h2 + div {
margin-top: 48px; }
section.hero, section.latest-news, section.members {
margin-bottom: 160px; }
section.latest-news > .news-carousel > .left.next-control:before {
left: calc(70vw - 60px - 7vw); }
section.latest-news > .news-carousel > .right.next-control:before {
left: 7vw; }
section.members > div {
flex-direction: column;
row-gap: 32px; }
section.members > div > a > article {
width: calc(100vw - 128px);
height: calc((100vw - 128px) / 3); }
section.members > div > a > article > h4 {
font-size: 28px; }
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
section.latest-news > h2, section.members > h2 {
font-size: 36px; }
section.latest-news > h2:before, section.members > h2:before {
margin: 0 32px 0 64px; }
section.latest-news > h2:after, section.members > h2:after {
margin: 0 64px 0 32px; }
section.latest-news > h2 + .news-carousel, section.members > h2 + div {
margin-top: 64px; }
section.hero, section.latest-news, section.members {
margin-bottom: 160px; }
section.latest-news > .news-carousel > .left.next-control:before {
left: calc(70vw - 60px - 7vw); }
section.latest-news > .news-carousel > .right.next-control:before {
left: 7vw; }
section.members > div {
flex-direction: column;
row-gap: 32px; }
section.members > div > a > article {
width: calc(100vw - 208px);
height: calc((100vw - 208px) / 3); }
section.members > div > a > article > h4 {
font-size: 28px; }
}
@media screen and (min-width: 1200px) {
section.latest-news > h2, section.members > h2 {
font-size: 36px; }
section.latest-news > h2:before, section.members > h2:before {
margin: 0 32px 0 64px; }
section.latest-news > h2:after, section.members > h2:after {
margin: 0 64px 0 32px; }
section.latest-news > h2 + .news-carousel, section.members > h2 + div {
margin-top: 64px; }
section.hero, section.latest-news, section.members {
margin-bottom: 160px; }
section.latest-news > .news-carousel > .left.next-control:before {
left: calc(70vw - 60px - 7vw); }
section.latest-news > .news-carousel > .right.next-control:before {
left: 7vw; }
section.members > div {
flex-direction: row;
-moz-column-gap: 24px;
column-gap: 24px; }
section.members > div > a > article {
width: calc((100vw - 208px) / 3);
height: calc(2 * (100vw - 208px) / 9); }
section.members > div > a > article > h4 {
font-size: 28px; }
}
main > header.member-banner {
padding-top: 0;
padding-bottom: 0;
justify-content: center; }
main > header.member-banner > h1 {
margin-top: 1em; }
main > header.member-banner > h1 + h2 {
margin-top: 1em; }
main > header.member-banner > h2 + p {
margin-top: 2em; }
main > header.member-banner > p {
line-height: 1.2em;
white-space: pre-line; }
.member-layout {
display: flex; }
.member-profile, .member-info {
display: flex;
flex-direction: column; }
.member-info a, .member-info a:hover, .member-info a:visited, .member-info a:focus, .member-info a:active {
text-decoration: none;
color: inherit;
outline: 0; }
.member-info > address {
display: flex;
flex-direction: column; }
.member-info .email, .member-info .tel, .member-info .fax, .member-info .name {
font-size: inherit;
margin-left: calc(24px - 0.3em + 12px + 2px); }
.member-info .email:before, .member-info .tel:before, .member-info .fax:before, .member-info .name:before {
position: absolute;
content: ' ';
width: 24px;
height: 24px;
transform: translateX(-24px) translateX(0.3em) translateX(-12px) translateY(16px) translateY(-50%) translateY(-0.1em);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: currentColor; }
.member-info .email:before {
-webkit-mask-image: var(--email-icon);
mask-image: var(--email-icon); }
.member-info .name:before {
-webkit-mask-image: var(--contact-icon);
mask-image: var(--contact-icon); }
.member-info .tel:before {
-webkit-mask-image: var(--phone-icon);
mask-image: var(--phone-icon); }
.member-info .fax:before {
-webkit-mask-image: var(--fax-icon);
mask-image: var(--fax-icon); }
.member-profile > p + details, .member-profile > ul + details, .member-profile > details + div + details {
margin-top: 2.25em; }
.member-profile > details + div > div > p:first-child {
margin-top: 1em; }
.member-profile > details + div > div > p:first-child {
margin-top: 1em; }
.member-profile > details + div > div > ul:first-child {
margin-top: 0.5em; }
summary {
display: block;
position: relative;
display: flex;
align-items: center; }
summary::-webkit-details-marker {
display: none; }
summary:hover {
cursor: pointer; }
summary::before {
content: "⏵";
color: var(--brand-text-colour-2);
font-size: 1.5em;
height: 0;
display: flex;
align-items: center;
margin-right: 0.6em;
transition: rotate 300ms ease-out; }
details[open] summary:before {
rotate: 90deg; }
details + div {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease-out; }
details[open] + div {
grid-template-rows: 1fr; }
details + div > div {
overflow: hidden; }
.member-profile ul, .member-info ul {
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0; }
.member-profile ul > li, .member-info ul > li {
margin-left: calc(6px + 0.75em);; }
.member-info ul > li {
color: var(--brand-text-colour-2); }
@media screen and (max-width: 959px) {
.member-layout {
flex-direction: column;
row-gap: 32px; } }
@media screen and (min-width: 960px) {
.member-layout {
flex-direction: row;
-moz-column-gap: 60px;
column-gap: 60px; } }
.about-us-layout {
color: var(--brand-text-colour); }
.about-us-layout > section {
flex: 1; }
.about-us-layout > aside {
display: flex;
flex-direction: column; }
.about-us-layout > aside img {
margin: 0; }
@media screen and (max-width: 1199px) {
.about-us-layout {
row-gap: 48px;
padding-bottom: 72px; } }
@media screen and (min-width: 1200px) {
.about-us-layout {
flex-direction: row;
-moz-column-gap: 60px;
column-gap: 60px; }
.about-us-layout ~ * {
flex-direction: row;
-moz-column-gap: 60px;
column-gap: 60px; } }
.\34 04-layout {
align-items: center;
padding: 64px; }