@charset "UTF-8";
/*=======================================
CD = 20251020
LD =
=========================================
editor:
1.recca
2.
3.
=========================================
index:
0. var
1. html
2. header
3. footer
4. main
5. 
6. 
7. 
8. 
9. 
10.
=======================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
/* var ================================*/
:root {
  --pt70: clamp(3rem, 2.725rem + 1.38vw, 4.375rem);
  /*h1 70 > 50 */
  --pt65: clamp(2.813rem, 2.563rem + 1.25vw, 4.063rem);
  /*h2 65 > 45 */
  --pt60: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem);
  /* 60 > 40 */
  --pt55: clamp(2.5rem, 2.313rem + 0.94vw, 3.438rem);
  /* 55 > 40*/
  --pt50: clamp(2.188rem, 2rem + 0.94vw, 3.125rem);
  /* 50 > 35 */
  --pt45: clamp(2.063rem, 1.563rem + 1.67vw, 2.813rem);
  /* 45 > 33 */
  --pt40: clamp(1.875rem, 1.75rem + 0.63vw, 2.5rem);
  /* 40 > 30 */
  --pt36: clamp(1.625rem, 1.5rem + 0.63vw, 2.25rem);
  /* 36 > 26 */
  --pt26: clamp(1.375rem, 1.325rem + 0.25vw, 1.625rem);
  /* base size 26 > 22 */
  --pt24: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  /* base size 24 > 20 */
  --pt22: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  /* base size 22 > 18 */
  --pt18: clamp(1rem, 0.958rem + 0.14vw, 1.125rem);
  /* base size 22 > 18 */
  --pt90: 5.25rem;
  --pt88: 5.5rem;
  --pt86: 5.375rem;
  --pt85: 5.3125rem;
  --pt84: 5.25rem;
  --pt80: 5rem;
  --pt78: 4.875rem;
  --pt75: 4.6875rem;
  --pt74: 4.6rem;
  --pt72: 4.5rem;
  --pt68: 4.25rem;
  --pt66: 4.125rem;
  --pt64: 4rem;
  --pt63: 3.9375rem;
  --pt62: 3.875rem;
  --pt61: 3.8125rem;
  --pt58: 3.625rem;
  --pt54: 3.375rem;
  --pt53: 3.3125rem;
  --pt52: 3.25rem;
  --pt51: 3.1875rem;
  --pt48: 3rem;
  --pt44: 2.75rem;
  --pt42: 2.625rem;
  --pt39: 2.4375rem;
  --pt38: 2.375rem;
  --pt35: 2.1875rem;
  --pt34: 2.125rem;
  --pt33: 2.075rem;
  --pt32: 2rem;
  --pt30: 1.875rem;
  --pt25: 1.5625rem;
  --pt23: 1.4375rem;
  --pt20: 1.25rem;
  --pt19: 1.1875rem;
  --pt17: 1.0625rem;
  --pt16: 1rem;
  --pt15: 0.9375rem;
  --pt14: 0.875rem;
  --pt13: 0.8125rem;
  --pt12: 0.75rem;
  --pt11: 0.6875rem;
  --c-white: rgba(255, 255, 255, 1);
  --c-white-a08: rgba(255, 255, 255, 0.8);
  --c-white-a04: rgba(255, 255, 255, 0.4);
  --c-gary: rgba(245, 245, 242, 1);
  --c-nav-hover: rgba(50, 150, 150, 1);
  --c-nav-after: rgba(191, 178, 150, 1);
  --c-theme01: rgba(150, 115, 40, 1);
  --c-theme01-a060: rgba(150, 115, 40, 0.6);
  --c-theme02: rgba(5, 135, 60, 1);
  --c-theme02-a060: rgba(5, 135, 60, 0.6);
  --c-theme02-a085: rgba(5, 135, 60, 0.85);
  --c-theme02b: rgba(0, 181, 54, 1);
  --c-theme02b-a085: rgba(0, 181, 54, 0.85);
  --c-theme02c: rgba(180,219,196, 1);
  --c-theme02d: rgba(55,159,99, 1);
  --c-theme03: rgba(243, 112, 33, 1);
  --c-theme03-a060: rgba(243, 112, 33, 0.6);
  --c-theme03-a085: rgba(243, 112, 33, 0.85);
  --c-theme03b: rgba(249, 157, 51, 1);
  --c-theme03b-a085: rgba(249, 157, 51, 0.85);
  --c-theme03c: rgba(251, 212, 188, 1);
  --c-theme03d: rgba(245, 141, 77, 1);
  --c-theme04: rgba(120, 70, 160, 1);
  --c-theme04-a060: rgba(120, 70, 160, 0.6);
  --c-theme04-a085: rgba(120, 70, 160, 0.85);
  --c-theme04b: rgba(144, 85, 190, 1);
  --c-theme04b-a085: rgba(144, 85, 190, 0.85);
  --c-theme04c: rgba(214, 199, 226, 1);
  --c-theme04d: rgba(147, 107, 179, 1);
  --c-theme05: rgba(5, 110, 183, 1);
  --c-theme05-a060: rgba(5, 110, 183, 0.6);
  --c-theme05-a085: rgba(5, 110, 183, 0.85);
  --c-theme05b: rgba(68, 149, 209, 1);
  --c-theme05b-a085: rgba(68, 149, 209, 0.85);
  --c-theme05c: rgba(180, 211, 233, 1);
  --c-theme05d: rgba(55, 139, 197, 1);
  --c-theme06: rgba(222, 64, 95, 1);
  --c-theme06-a060: rgba(222, 64, 95, 0.6);
  --c-theme06-a085: rgba(222, 64, 95, 0.85);
  --c-theme06b: rgba(244, 133, 148, 1);
  --c-theme06b-a085: rgba(244, 133, 148, 0.85);
  --c-theme06c: rgba(245, 198, 207, 1);
  --c-theme06d: rgba(229, 102, 127, 1);
  --c-bg-boxmsg: rgba(223, 216, 202, 1);
  --c-bg-boxmsg-a050: rgba(223, 216, 202, 0.5);
  --c-bg-msg1: rgba(199, 160, 54, 1);
  --c-bg-msg2: rgba(175, 142, 45, 1);
  --c-btn-more: rgba(161, 122, 22, 1);
  --color-people: rgba(223, 145, 58, 1);
  --color-environment: rgba(28, 171, 59, 1);
  --color-customers: rgba(144, 85, 190, 1);
  --color-supply-chain: rgba(68, 149, 209, 1);
  --color-community: rgba(244, 133, 148, 1);
  --color-strategy: rgba(150, 115, 40, 1);
  --color-gold: #a88c5a;
  --c-btt: rgba(171, 160, 120, 1); }

html {
  scroll-behavior: smooth; }

html[lang="en"] body {
  font-family: "Ubuntu", sans-serif;
  font-size: var(--pt22);
  font-style: normal;
  font-weight: 400; }
  html[lang="en"] body .fw-Medium {
    font-weight: 500; }
  html[lang="en"] body .fw-light {
    font-weight: 300; }
    html[lang="en"] body .fw-light i,
    html[lang="en"] body .fw-light em {
      font-style: italic; }
  html[lang="en"] body i,
  html[lang="en"] body em {
    font-style: italic; }
  html[lang="en"] body b,
  html[lang="en"] body strong,
  html[lang="en"] body .text-bold {
    font-weight: 700;
    font-style: normal; }
    html[lang="en"] body b i,
    html[lang="en"] body b em,
    html[lang="en"] body strong i,
    html[lang="en"] body strong em,
    html[lang="en"] body .text-bold i,
    html[lang="en"] body .text-bold em {
      font-style: italic; }

html[lang="zh-hk"] body,
html[lang="zh-cn"] body {
  font-family: "Noto Sans TC", sans-serif;
  font-size: var(--pt24);
  font-style: normal;
  font-weight: 400; }
  html[lang="zh-hk"] body .text-light,
  html[lang="zh-cn"] body .text-light {
    font-weight: 200; }
    html[lang="zh-hk"] body .text-light i,
    html[lang="zh-hk"] body .text-light em,
    html[lang="zh-cn"] body .text-light i,
    html[lang="zh-cn"] body .text-light em {
      font-style: italic; }
  html[lang="zh-hk"] body i,
  html[lang="zh-hk"] body em,
  html[lang="zh-cn"] body i,
  html[lang="zh-cn"] body em {
    font-style: italic; }
  html[lang="zh-hk"] body b,
  html[lang="zh-hk"] body strong,
  html[lang="zh-hk"] body .text-bold,
  html[lang="zh-cn"] body b,
  html[lang="zh-cn"] body strong,
  html[lang="zh-cn"] body .text-bold {
    font-weight: 700;
    font-style: normal; }
    html[lang="zh-hk"] body b i,
    html[lang="zh-hk"] body b em,
    html[lang="zh-hk"] body strong i,
    html[lang="zh-hk"] body strong em,
    html[lang="zh-hk"] body .text-bold i,
    html[lang="zh-hk"] body .text-bold em,
    html[lang="zh-cn"] body b i,
    html[lang="zh-cn"] body b em,
    html[lang="zh-cn"] body strong i,
    html[lang="zh-cn"] body strong em,
    html[lang="zh-cn"] body .text-bold i,
    html[lang="zh-cn"] body .text-bold em {
      font-style: italic; }

html[lang="zh-cn"] body {
  font-family: "Noto Sans SC", sans-serif; }

.en {
  font-family: "Ubuntu", sans-serif; }

.tc {
  font-family: "Noto Sans TC", sans-serif; }

.sc {
  font-family: "Noto Sans SC", sans-serif; }

body {
  overflow-x: hidden;
  scroll-behavior: smooth;
  min-width: 320px; }

a {
  text-decoration: none; }

.AP {
  scroll-margin-top: 150px; }

/* header =============================*/
header {
  background-color: var(--c-white);
  border-bottom: 2px var(--c-theme01) solid;
  font-weight: 500;
  z-index: 800; }
  header #mainnav .logo {
    left: 4.780993%;
    top: 33px;
    width: 180px; }
  header #mainnav .nav a {
    --bs-navbar-nav-link-padding-x: 0.75rem;
    color: var(--c-theme01);
    font-size: var(--pt18);
    position: relative;
    transition: 0.2s color linear;
    text-transform: uppercase; }
    header #mainnav .nav a:hover {
      color: var(--c-nav-hover); }
    header #mainnav .nav a::after {
      color: var(--c-nav-after) !important;
      content: "|";
      position: absolute;
      right: -1px; }
    header #mainnav .nav a.noafter::after {
      content: "" !important; }
  header #mainnav .nav .box-lang a {
    display: inline-block;
    margin-top: -1px;
    opacity: 0;
    padding: 0.5rem 0.25rem !important;
    position: relative;
    transition: 0.2s all linear;
    z-index: 5; }
  header #mainnav .nav .box-lang:hover a {
    opacity: 1; }
  header #mainnav .box-lang {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    transition: 0.2s all linear;
    width: 66px; }
    header #mainnav .box-lang::after {
      background-image: url("../images/language icon.svg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 31px 31px;
      content: "";
      height: 46px;
      position: absolute;
      left: 0px;
      z-index: 0;
      transition: 0.2s all linear;
      width: 66px; }
    header #mainnav .box-lang:hover::after {
      opacity: 0.1; }
    header #mainnav .box-lang a .noafter::after {
      content: "" !important; }
    header #mainnav .box-lang a::after {
      right: -2px !important;
      top: 6.5px; }
  header .offcanvas.offcanvas-end {
    width: 320px; }
  header .offcanvas .offcanvas-header {
    background-color: var(--c-theme01);
    padding: 0px; }
    header .offcanvas .offcanvas-header a {
      color: #fff;
      display: inline-block;
      padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); }
    header .offcanvas .offcanvas-header .btn-close {
      display: none; }
  header .offcanvas .offcanvas-body li {
    border-bottom: 1px var(--theme-nav-body) solid; }
  header .offcanvas .offcanvas-body a {
    color: var(--c-theme01);
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); }

html[lang="zh-hk"] header,
html[lang="zh-cn"] header {
  font-weight: 400; }
  html[lang="zh-hk"] header #mainnav .box-lang a.en,
  html[lang="zh-cn"] header #mainnav .box-lang a.en {
    padding-bottom: 5px !important;
    font-size: 18px; }

/* footer ============================*/
footer, .footer {
  font-size: var(--pt18); }
  footer .btn-BTT, .footer .btn-BTT {
    background-color: var(--c-btt);
    background-image: url("../images/btn_btt.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 29px;
    border-radius: 50%;
    bottom: 20px;
    height: 56px;
    position: fixed;
    right: 20px;
    width: 56px;
    z-index: 999;
    transition: 0.2s all linear; }
    footer .btn-BTT:hover, .footer .btn-BTT:hover {
      background-color: var(--c-theme01); }

/*@keyframes btnBTT {
  0% {
    background-position: center 60%, bottom center;
  }
  100% {
    background-position: center 0%, bottom center;
  }
}*/
/* main =============================*/
main {
  overflow-x: hidden; }

#quick-nav {
  position: fixed;
  right: -10px;
  top: 100px;
  z-index: 990; }
  #quick-nav .nav-container {
    background: rgba(194, 181, 160, 0.9);
    border-radius: 90px 0 0 90px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 40px 0px; }
    #quick-nav .nav-container .nav-item {
      align-items: center;
      display: flex;
      justify-content: flex-end;
      padding: 2px 0px;
      position: relative;
      text-decoration: none;
      transition: all 0.3s ease;
      transform: translateX(-20px);
      /* Nav Icon */
      /* Nav Text (Slide in from right) */
      /* Hover State - Text slides in */
      /* Active State */ }
      #quick-nav .nav-container .nav-item .nav-icon {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-shrink: 0;
        height: 50px;
        position: relative;
        width: 50px;
        z-index: 2; }
        #quick-nav .nav-container .nav-item .nav-icon:hover {
          transition: 0.2s all linear; }
      #quick-nav .nav-container .nav-item.nav-item-01 .nav-icon {
        background-image: url("../images/nav01.svg"); }
        #quick-nav .nav-container .nav-item.nav-item-01 .nav-icon:hover {
          background-image: url("../images/nav01_ho.svg"); }
      #quick-nav .nav-container .nav-item.nav-item-02 .nav-icon {
        background-image: url("../images/nav02.svg"); }
        #quick-nav .nav-container .nav-item.nav-item-02 .nav-icon:hover {
          background-image: url("../images/nav02_ho.svg"); }
      #quick-nav .nav-container .nav-item.nav-item-03 .nav-icon {
        background-image: url("../images/nav03.svg"); }
        #quick-nav .nav-container .nav-item.nav-item-03 .nav-icon:hover {
          background-image: url("../images/nav03_ho.svg"); }
      #quick-nav .nav-container .nav-item.nav-item-04 .nav-icon {
        background-image: url("../images/nav04.svg"); }
        #quick-nav .nav-container .nav-item.nav-item-04 .nav-icon:hover {
          background-image: url("../images/nav04_ho.svg"); }
      #quick-nav .nav-container .nav-item.nav-item-05 .nav-icon {
        background-image: url("../images/nav05.svg"); }
        #quick-nav .nav-container .nav-item.nav-item-05 .nav-icon:hover {
          background-image: url("../images/nav05_ho.svg"); }
      #quick-nav .nav-container .nav-item.nav-item-06 .nav-icon {
        background-image: url("../images/nav06.svg"); }
        #quick-nav .nav-container .nav-item.nav-item-06 .nav-icon:hover {
          background-image: url("../images/nav06_ho.svg"); }
      #quick-nav .nav-container .nav-item .nav-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease; }
      #quick-nav .nav-container .nav-item .nav-text {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: 20px;
        transform: translateX(20px);
        transition: all 0.4s ease;
        white-space: nowrap;
        z-index: 10; }
        #quick-nav .nav-container .nav-item .nav-text img {
          display: block;
          height: 25px;
          width: auto; }
      #quick-nav .nav-container .nav-item:hover .nav-text {
        opacity: 1;
        transform: translateX(0); }
      #quick-nav .nav-container .nav-item.active {
        background: rgba(255, 255, 255, 0.2); }

#landingMOV {
  height: calc(100vh - 72px);
  min-height: 960px;
  max-height: 960px;
  overflow: hidden;
  position: relative; }
  #landingMOV div {
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute; }
  #landingMOV .bg-sky {
    animation: op0to1 0.5s linear forwards;
    background-image: url("../images/sky.jpg");
    background-size: 100%;
    height: calc(100vh - 68px);
    opacity: 0;
    position: relative;
    z-index: 0; }
  #landingMOV .bg-left {
    animation: op0to1 0.5s linear 0.3s forwards;
    background-image: url("../images/bg-left.svg");
    background-position: bottom center;
    background-size: cover;
    height: 100%;
    left: 50%;
    opacity: 0;
    top: 0px;
    width: 3300px;
    z-index: 5;
    transform: translateX(-50%); }
  #landingMOV .bg-right {
    animation: op0to1 0.5s linear 0.3s forwards;
    background-image: url("../images/bg-right.svg");
    background-position: bottom center;
    background-size: cover;
    height: 100%;
    left: 50%;
    opacity: 0;
    top: 0px;
    width: 3300px;
    z-index: 1;
    transform: translateX(-50%); }
  #landingMOV .bg-center0 {
    animation: op0to1 0.3s linear 1s forwards;
    background-image: url("../images/bg-center0.svg");
    background-position: top right;
    background-size: contain;
    /*background-size: 829px;*/
    bottom: 0px;
    /*height: 73.578947%;*/
    height: 699px;
    opacity: 0;
    right: 50%;
    width: 831px;
    /*width: 43.177083%;*/
    z-index: 4;
    transform: translateX(75%); }
  #landingMOV .bg-center {
    animation: op0to1 0.3s linear 1s forwards;
    background-image: url("../images/bg-center2.png");
    background-position: top right;
    background-size: contain;
    /*background-size: 829px;*/
    bottom: 0px;
    height: 100%;
    height: 699px;
    position: relative;
    opacity: 0;
    width: 831px;
    /*width: 100%;*/
    z-index: 5; }
  #landingMOV .bg-grass {
    animation: op0to1 0.5s linear forwards;
    background-image: url("../images/bg-center.svg");
    background-position: bottom right;
    background-size: contain;
    bottom: 0px;
    left: 50%;
    height: 100%;
    opacity: 0;
    width: 2003px;
    /*width: 104.3229167%;*/
    z-index: 20;
    transform: translateX(-70%); }
  #landingMOV .bg-building {
    animation: LtoR-landingbanner 0.5s linear 0.6s forwards;
    background-image: url("../images/building.png");
    background-position: right bottom;
    background-size: contain;
    bottom: 0px;
    height: 903px;
    /*max-height: 858px;*/
    opacity: 0;
    right: 29.271093%;
    width: 836px;
    /*width: 41.737393%;*/ }
  #landingMOV .bg-people1 {
    animation: op0to1 0.5s linear 1.1s forwards;
    background-image: url("../images/pp_running.svg");
    background-size: contain;
    bottom: 10.284573%;
    /*height: 100%;*/
    height: 106px;
    opacity: 0;
    right: 33.349975%;
    width: 93px; }
  #landingMOV .bg-people2 {
    animation: op0to1 0.5s linear 1.3s forwards;
    background-image: url("../images/pp_family.svg");
    background-size: contain;
    bottom: 15.894736%;
    height: 102px;
    opacity: 0;
    right: 16.63%;
    /*width: 6.83974%;*/
    width: 137px; }
  #landingMOV .bg-people3 {
    animation: op0to1 0.5s linear 1.5s forwards;
    background-image: url("../images/pp_woman_w_dog.svg");
    background-size: contain;
    bottom: 2.210526%;
    height: 145px;
    opacity: 0;
    right: 1.198202%;
    width: 312px; }
  #landingMOV .bg-people4 {
    animation: op0to1 0.5s linear 1.7s forwards;
    background-image: url("../images/Ecar.svg");
    background-size: contain;
    bottom: 18.421052%;
    height: 153px;
    opacity: 0;
    right: 3.344982%;
    width: 15.376934%; }
  #landingMOV .bg-people5 {
    animation: op0to1 0.5s linear 1.9s forwards;
    background-image: url("../images/pp_playing_drone.svg");
    background-size: contain;
    bottom: 79.312596%;
    height: 181px;
    opacity: 0;
    right: 10.193739%;
    width: 139px; }
  #landingMOV .bg-people6 {
    animation: op0to1 0.5s linear 2.1s forwards;
    background-image: url("../images/pp_riding.svg");
    background-size: contain;
    bottom: 88%;
    height: 115px;
    opacity: 0;
    right: 343px;
    width: 206px;
    z-index: 10; }
  #landingMOV .bg-ball1,
  #landingMOV .bg-ball2,
  #landingMOV .bg-ball3,
  #landingMOV .bg-ball4,
  #landingMOV .bg-ball5,
  #landingMOV .bg-ball6 {
    border-radius: 100px;
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 0; }
  #landingMOV .bg-ball1 {
    animation: op0to1 0.3s linear 2s forwards, scaleloop 1s linear 3s infinite alternate;
    background-color: #fb8a24;
    bottom: 73.789473%;
    height: 23px;
    right: 55.466799%;
    width: 23px; }
  #landingMOV .bg-ball2 {
    animation: op0to1 0.3s linear 2.3s forwards, scaleloop 1s linear 4s infinite alternate;
    background-color: #8764b4;
    bottom: 80%;
    height: 47px;
    right: 52.121817%;
    width: 47px; }
  #landingMOV .bg-ball3 {
    animation: op0to1 0.3s linear 2.6s forwards, scaleloop 1s linear 5s infinite alternate;
    background-color: #068be5;
    bottom: 80.5%;
    height: 89px;
    right: 75%;
    width: 89px; }
  #landingMOV .bg-ball4 {
    animation: op0to1 0.3s linear 2.9s forwards, scaleloop 1s linear 6s infinite alternate;
    background-color: #00b536;
    bottom: 96.75%;
    height: 43px;
    right: 73.57%;
    width: 43px; }
  #landingMOV .bg-ball5 {
    animation: op0to1 0.3s linear 3.2s forwards, scaleloop 1s linear 7s infinite alternate;
    background-color: #ed5373;
    bottom: 102.25%;
    height: 15px;
    right: 69.15%;
    width: 15px; }
  #landingMOV .bg-ball6 {
    animation: op0to1 0.3s linear 3.5s forwards, scaleloop 1s linear 8s infinite alternate;
    background-color: #e2e3e3;
    bottom: 103.5%;
    height: 38px;
    right: 25%;
    width: 38px; }
  #landingMOV .bg-report {
    animation: op0to1 0.3s linear forwards;
    background-image: url("../images/report.svg");
    height: 98px;
    opacity: 0;
    position: absolute;
    right: 11.782326%;
    top: 48px;
    width: 385px; }
  #landingMOV .btn-next {
    bottom: 0px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%); }
  #landingMOV .bg-next {
    position: absolute;
    bottom: 0px;
    background-color: #fff;
    width: 400px;
    height: 200px;
    content: "";
    z-index: 21;
    left: 50%;
    transform: translateX(-50%) translateY(75%);
    border-radius: 200% 200% 200% 200%; }
  #landingMOV * {
    transition: .2s all linear; }

#landingIntro {
  /*background-color: var(--c-white);*/
  position: relative;
  margin-bottom: 155px;
  margin-top: 100px;
  /* Positioning each shortcut */ }
  #landingIntro .btn {
    background-color: var(--c-theme01);
    border: 3px var(--c-theme01) solid;
    border-radius: 1000px;
    color: var(--c-white);
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    transition: 0.2s all linear; }
    #landingIntro .btn:hover {
      background-color: var(--c-white);
      color: var(--c-theme01); }
  #landingIntro .shortcuts-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 300px;
    margin-bottom: 60px; }
  #landingIntro .shortcut-link {
    position: absolute;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.3; }
  #landingIntro .shortcut-link:hover {
    opacity: 1; }
  #landingIntro .shortcut-people {
    top: 11%;
    left: 25%;
    color: var(--color-people); }
  #landingIntro .shortcut-environment {
    top: 43%;
    left: 10%;
    color: var(--color-environment); }
  #landingIntro .shortcut-customers {
    top: -11%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-customers); }
  #landingIntro .shortcut-supply-chain {
    top: 11%;
    right: 16.5%;
    color: var(--color-supply-chain); }
  #landingIntro .shortcut-community {
    top: 43%;
    right: 13%;
    color: var(--color-community); }
  #landingIntro .shortcut-strategy {
    left: 50%;
    color: var(--color-strategy);
    transform: translateX(-50%); }
  #landingIntro .icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: -30px;
    position: relative;
    z-index: 10; }
  #landingIntro .introicongroup {
    left: 50%;
    position: absolute;
    top: 0px;
    transform: translateX(-50%) translateY(-100%); }
  #landingIntro .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff; }
  #landingIntro .icon-item img {
    width: 88px;
    height: 88px; }

#landingCS {
  position: relative;
  padding-bottom: 90px; }
  #landingCS::after {
    content: url("../images/case_study_bg.svg");
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1160px;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%); }
  #landingCS h2 {
    display: block;
    font-size: var(--pt55);
    position: relative; }
    #landingCS h2 span {
      background-color: var(--c-white);
      border: 10px var(--c-theme01) solid;
      outline: 10px var(--c-white) solid;
      padding: 0.5rem 3rem; }
    #landingCS h2::after {
      background-color: var(--c-theme01);
      content: "";
      height: 2px;
      position: absolute;
      top: 50%;
      left: 0px;
      width: 100%;
      z-index: -1;
      transform: translateY(-50%); }
  #landingCS .row {
    margin-top: 60px; }
    #landingCS .row > div a {
      color: var(--c-theme02b);
      display: block;
      position: relative; }
      #landingCS .row > div a .cover {
        background-color: #33c45e;
        border: 7px #33c45e solid;
        border-radius: 165px;
        height: 240px;
        margin-bototm: 10px;
        overflow: hidden;
        position: relative;
        width: 240px;
        transition: 0.2s all linear; }
        #landingCS .row > div a .cover img {
          left: 50%;
          height: 100%;
          position: absolute;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          transition: 0.2s all linear; }
        #landingCS .row > div a .cover .cover-text {
          color: var(--c-white);
          font-size: var(--pt18);
          height: 228px;
          opacity: 0;
          padding-top: 3rem;
          position: absolute;
          top: 30%;
          width: 228px;
          transition: 0.2s all linear; }
          #landingCS .row > div a .cover .cover-text h3 {
            color: #05873c;
            font-size: var(--pt25); }
          #landingCS .row > div a .cover .cover-text p {
            margin: 0rem; }
      #landingCS .row > div a span {
        font-weight: 700;
        transition: 0.2s all linear; }
      #landingCS .row > div a .btn {
        background-color: var(--c-theme02);
        border-radius: 90px;
        color: var(--c-white);
        display: inline-block;
        font-size: inherit;
        left: 50%;
        opacity: 0;
        padding: 0.25rem 1.5rem;
        position: absolute;
        text-wrap: nowrap;
        transform: translateX(-50%) translateY(-75%);
        transition: 0.2s all linear; }
      #landingCS .row > div a:hover .cover img {
        opacity: 0; }
      #landingCS .row > div a:hover .cover .cover-text {
        opacity: 1;
        top: 0%; }
      #landingCS .row > div a:hover span {
        opacity: 0; }
      #landingCS .row > div a:hover .btn {
        opacity: 1;
        transform: translateX(-50%) translateY(-45%); }
      #landingCS .row > div a::after {
        background-image: url("../images/ball_sm-env.svg");
        background-repeat: no-repeat;
        content: "";
        height: 22px;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 33px; }
    #landingCS .row > div:nth-child(2) a {
      color: var(--c-theme03b); }
      #landingCS .row > div:nth-child(2) a .cover {
        background-color: #fab15c;
        border-color: #fab15c; }
        #landingCS .row > div:nth-child(2) a .cover .cover-text h3 {
          color: #f37021; }
      #landingCS .row > div:nth-child(2) a .btn {
        background-color: var(--c-theme03); }
      #landingCS .row > div:nth-child(2) a::after {
        background-image: url("../images/ball_sm-peo.svg"); }
    #landingCS .row > div:nth-child(3) a {
      color: var(--c-theme04b); }
      #landingCS .row > div:nth-child(3) a .cover {
        background-color: #a677cb;
        border-color: #a677cb; }
        #landingCS .row > div:nth-child(3) a .cover .cover-text h3 {
          color: #7846a0; }
      #landingCS .row > div:nth-child(3) a .btn {
        background-color: var(--c-theme04); }
      #landingCS .row > div:nth-child(3) a::after {
        background-image: url("../images/ball_sm-cus.svg"); }
    #landingCS .row > div:nth-child(4) a {
      color: var(--c-theme05b); }
      #landingCS .row > div:nth-child(4) a .cover {
        background-color: #69aada;
        border-color: #69aada; }
        #landingCS .row > div:nth-child(4) a .cover .cover-text h3 {
          color: #056eb7; }
      #landingCS .row > div:nth-child(4) a .btn {
        background-color: var(--c-theme05); }
      #landingCS .row > div:nth-child(4) a::after {
        background-image: url("../images/ball_sm-sc.svg"); }
    #landingCS .row > div:nth-child(5) a {
      color: var(--c-theme06b); }
      #landingCS .row > div:nth-child(5) a .cover {
        background-color: #f69da9;
        border-color: #f69da9; }
        #landingCS .row > div:nth-child(5) a .cover .cover-text h3 {
          color: #de405f; }
      #landingCS .row > div:nth-child(5) a .btn {
        background-color: var(--c-theme06); }
      #landingCS .row > div:nth-child(5) a::after {
        background-image: url("../images/ball_sm-com.svg"); }
  #landingCS .btn-next {
    left: 50%;
    position: absolute;
    top: 120%;
    transform: translateX(-50%); }

#landingMag {
  height: 100%;
  padding: 555px 0px 0px 0px;
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 1;
  /*.br-mobile {
    display: none;
    
    @media screen and (max-width: 768px) {
        display: block;
    }
}*/ }
  #landingMag .rootball {
    background-color: var(--c-bg-boxmsg);
    border-radius: 100000000px;
    height: 2286px;
    left: 50%;
    /*padding-top: 119.088427%;*/
    position: relative;
    width: 2286px;
    /*119.088427%;*/
    top: 0px;
    transform: translateX(-50%) rotate(0deg); }
    #landingMag .rootball .box-msg {
      background-color: var(--c-bg-msg2);
      border-radius: 100px;
      background-size: 100%;
      left: 50%;
      max-width: 960px;
      padding: 0rem 4rem;
      position: absolute;
      top: -340px;
      transform: translateX(-50%);
      width: 100%;
      z-index: 20; }
      #landingMag .rootball .box-msg .box-msg-bg {
        background-color: var(--c-bg-msg1);
        border-radius: 100px;
        color: var(--c-white);
        text-align: center;
        padding: 3rem 6rem;
        position: relative; }
        #landingMag .rootball .box-msg .box-msg-bg::before {
          background-image: url("../images/msg-tree.svg");
          background-repeat: no-repeat;
          content: "";
          left: -210px;
          padding-top: 23.940963%;
          position: absolute;
          top: 50%;
          /*top: 41%;*/
          width: 25.566002%; }
        #landingMag .rootball .box-msg .box-msg-bg::after {
          background-image: url(../images/box-msg-con.svg);
          background-repeat: no-repeat;
          content: "";
          padding-top: 23.798076%;
          position: absolute;
          bottom: 0;
          right: 7%;
          width: 25%;
          /*width: 36.057692%;*/
          transform: translateY(99%); }
        #landingMag .rootball .box-msg .box-msg-bg h2 {
          position: relative; }
          #landingMag .rootball .box-msg .box-msg-bg h2::after {
            background-image: url("../images/bg-msg-h2.svg");
            background-repeat: no-repeat;
            content: "";
            max-width: 140px;
            padding-top: 44.0625%;
            position: absolute;
            top: -225px;
            right: -140px;
            width: 100%; }
  #landingMag .box-swiper {
    left: 50%;
    height: 1170px;
    position: absolute;
    top: 50%;
    width: 100vw;
    transform: translateX(-50%) translateY(calc(-50% + 277.5px)); }
  #landingMag .ball1,
  #landingMag .ball2,
  #landingMag .ball3,
  #landingMag .ball4,
  #landingMag .ball5 {
    position: relative;
    width: 100%;
    height: 1170px; }
  #landingMag .themeball {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
    background-size: 50%, 50%;
    display: flex;
    align-items: center;
    justify-content: center; }
  #landingMag .ball-content {
    position: relative;
    background-color: #ffffff;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="b" data-name="圖層 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.09 1067.09"><defs><style> .d { stroke-miterlimit: 10; stroke-width: 2.8px; } .d, .e { fill: none; stroke: %2300b536; stroke-linecap: round; } .f { opacity: .3; } .g { opacity: .1; } .e { stroke-miterlimit: 10; stroke-width: 3px; } </style></defs><g id="c" data-name="txt"><g><g class="g"><circle class="d" cx="533.54" cy="533.54" r="290.35"/></g><g class="f"><circle class="e" cx="533.54" cy="533.54" r="532.04"/></g></g></g></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 87.428101%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 170px 80px;
    text-align: center;
    z-index: 2; }
    @media screen and (min-width: 991px) {
      #landingMag .ball-content {
        width: 1217px;
        height: 1217px; } }
    @media screen and (max-width: 990px) {
      #landingMag .ball-content {
        width: 85%;
        height: 85%; } }
    @media screen and (max-width: 768px) {
      #landingMag .ball-content {
        padding: 40px 30px; } }
    @media screen and (max-width: 480px) {
      #landingMag .ball-content {
        padding: 30px 20px; } }
    #landingMag .ball-content h2 {
      position: relative;
      font-weight: bold;
      margin-bottom: 30px;
      /*padding-left: 60px;
      display: inline-flex;*/
      align-items: center;
      width: 75%;
      text-align: center; }
      #landingMag .ball-content h2::before {
        content: "";
        position: absolute;
        left: 0px;
        /*-134px;*/
        top: 50%;
        transform: translateY(-50%);
        width: 114px;
        height: 114px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center; }
      @media screen and (max-width: 1299.98px) {
        #landingMag .ball-content h2 {
          width: 65%; } }
      @media screen and (max-width: 768.98px) {
        #landingMag .ball-content h2 {
          margin-bottom: 20px; } }
      @media screen and (max-width: 480.98px) {
        #landingMag .ball-content h2 {
          padding-left: 40px;
          margin-bottom: 15px; } }
    @media screen and (max-width: 768.98px) {
      #landingMag .ball-content {
        margin-bottom: 20px; } }
    @media screen and (max-width: 480px) {
      #landingMag .ball-content {
        margin-bottom: 15px; } }
  #landingMag .f-pt65 {
    line-height: 2.75rem; }
  #landingMag .highlight-image {
    width: 100%;
    max-width: 200px;
    margin: 30px 0; }
    #landingMag .highlight-image img {
      width: 100%;
      height: auto; }
    @media screen and (max-width: 768px) {
      #landingMag .highlight-image {
        max-width: 200px;
        margin: 20px 0; } }
    @media screen and (max-width: 480px) {
      #landingMag .highlight-image {
        max-width: 150px;
        margin: 15px 0; } }
  @media screen and (max-width: 768px) {
    #landingMag .highlight-text {
      margin-bottom: 20px; } }
  @media screen and (max-width: 480px) {
    #landingMag .highlight-text {
      margin-bottom: 15px; } }
  #landingMag .ball1 {
    background-color: #e96800; }
    #landingMag .ball1 .themeball {
      background-color: #f8a556;
      background-image: url("../images/landing-HL-ball-bg-peo.svg"), url("../images/landing-HL-ball-bg-peo.svg");
      background-size: 47.503045% 28.562728%;
      background-position: 9.926918% 6.090133%, 129% 60%; }
    @media screen and (max-width: 639.98px) {
      #landingMag .ball1 .themeball {
        background-position: 6.927% -17.91%, 111% 95%; } }
    #landingMag .ball1 .ball-content {
      background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="b" data-name="圖層 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.09 1067.09"><defs><style> .d { stroke-miterlimit: 10; stroke-width: 2.8px; } .d, .e { fill: none; stroke: %23F99D33; stroke-linecap: round; } .f { opacity: .3; } .g { opacity: .1; } .e { stroke-miterlimit: 10; stroke-width: 3px; } </style></defs><g id="c" data-name="txt"><g><g class="g"><circle class="d" cx="533.54" cy="533.54" r="290.35"/></g><g class="f"><circle class="e" cx="533.54" cy="533.54" r="532.04"/></g></g></g></svg>'); }
      #landingMag .ball1 .ball-content h2 {
        color: #e96800; }
        #landingMag .ball1 .ball-content h2::before {
          background-image: url("../images/pleo_cc_icon.svg"); }
      #landingMag .ball1 .ball-content .highlight-text {
        color: #e96800; }
  #landingMag .btn-theme01 {
    display: inline-block;
    padding: 12px 35px;
    background-color: #e96800;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid #e96800; }
    #landingMag .btn-theme01:hover {
      background-color: #c85a00;
      border-color: #c85a00;
      color: #ffffff; }
    @media screen and (max-width: 768px) {
      #landingMag .btn-theme01 {
        padding: 10px 30px;
        font-size: 0.9rem; } }
  #landingMag .ball2 {
    background-color: #05873c; }
    #landingMag .ball2 .themeball {
      background-color: #00b536;
      background-image: url("../images/landing-HL-ball-bg-env.svg"), url("../images/landing-HL-ball-bg-env.svg");
      background-size: 39.281364% 55.785627%, 39.281364% 55.785627%;
      background-position: -8.404384% 4.872107%, 105% 124%; }
    @media screen and (max-width: 639.98px) {
      #landingMag .ball2 .themeball {
        background-position: 6.596% -11.128%, 91% 133%; } }
    #landingMag .ball2 .ball-content h2 {
      color: #05873c; }
      #landingMag .ball2 .ball-content h2::before {
        background-image: url("../images/en_cc_icon.svg"); }
    #landingMag .ball2 .ball-content .highlight-text {
      color: #05873c; }
  #landingMag .btn-theme02 {
    display: inline-block;
    padding: 12px 35px;
    background-color: #05873c;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid #05873c; }
    #landingMag .btn-theme02:hover {
      background-color: #008a44;
      border-color: #008a44;
      color: #ffffff; }
    @media screen and (max-width: 768px) {
      #landingMag .btn-theme02 {
        padding: 10px 30px;
        font-size: 0.9rem; } }
  #landingMag .ball3 {
    background-color: #7247a2; }
    #landingMag .ball3 .themeball {
      background-color: #9a7dc0;
      background-image: url("../images/landing-HL-ball-bg-cus.svg"), url("../images/landing-HL-ball-bg-cus.svg");
      background-position: -11% 4%, 101% 68%;
      background-size: 36.601705% 53.836784%; }
    @media screen and (max-width: 639.98px) {
      #landingMag .ball3 .themeball {
        background-position: 10% -40%, 74% 90%; } }
    #landingMag .ball3 .ball-content {
      background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="b" data-name="圖層 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.09 1067.09"><defs><style> .d { stroke-miterlimit: 10; stroke-width: 2.8px; } .d, .e { fill: none; stroke: %239055BE; stroke-linecap: round; } .f { opacity: .3; } .g { opacity: .1; } .e { stroke-miterlimit: 10; stroke-width: 3px; } </style></defs><g id="c" data-name="txt"><g><g class="g"><circle class="d" cx="533.54" cy="533.54" r="290.35"/></g><g class="f"><circle class="e" cx="533.54" cy="533.54" r="532.04"/></g></g></g></svg>'); }
      #landingMag .ball3 .ball-content h2 {
        color: #7247a2; }
        #landingMag .ball3 .ball-content h2::before {
          background-image: url("../images/cus_cc_icon.svg"); }
      #landingMag .ball3 .ball-content .highlight-text {
        color: #7247a2; }
  #landingMag .btn-theme03 {
    display: inline-block;
    padding: 12px 35px;
    background-color: #7247a2;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid #7247a2; }
    #landingMag .btn-theme03:hover {
      background-color: #643c8c;
      border-color: #643c8c;
      color: #ffffff; }
    @media screen and (max-width: 768px) {
      #landingMag .btn-theme03 {
        padding: 10px 30px;
        font-size: 0.9rem; } }
  #landingMag .ball4 {
    background-color: #0074ae; }
    #landingMag .ball4 .themeball {
      background-color: #60a6cf;
      background-image: url("../images/landing-HL-ball-bg-sc-left.svg"), url("../images/landing-HL-ball-bg-sc-right.svg");
      background-position: 0% -45%, 109% 113%;
      background-size: 32.338611% 71.315468%; }
    @media screen and (max-width: 639.98px) {
      #landingMag .ball4 .themeball {
        background-position: 16% -45%, 85% 113%; } }
    #landingMag .ball4 .ball-content {
      background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="b" data-name="圖層 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.09 1067.09"><defs><style> .d { stroke-miterlimit: 10; stroke-width: 2.8px; } .d, .e { fill: none; stroke: %234495D1; stroke-linecap: round; } .f { opacity: .3; } .g { opacity: .1; } .e { stroke-miterlimit: 10; stroke-width: 3px; } </style></defs><g id="c" data-name="txt"><g><g class="g"><circle class="d" cx="533.54" cy="533.54" r="290.35"/></g><g class="f"><circle class="e" cx="533.54" cy="533.54" r="532.04"/></g></g></g></svg>'); }
      #landingMag .ball4 .ball-content h2 {
        color: #0074ae; }
        #landingMag .ball4 .ball-content h2::before {
          background-image: url("../images/sc_cc_icon.svg"); }
      #landingMag .ball4 .ball-content .highlight-text {
        color: #0074ae; }
  #landingMag .btn-theme04 {
    display: inline-block;
    padding: 12px 35px;
    background-color: #0074ae;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid #0074ae; }
    #landingMag .btn-theme04:hover {
      background-color: #006496;
      border-color: #006496;
      color: #ffffff; }
    @media screen and (max-width: 768px) {
      #landingMag .btn-theme04 {
        padding: 10px 30px;
        font-size: 0.9rem; } }
  #landingMag .ball5 {
    background-color: #e03a68; }
    #landingMag .ball5 .themeball {
      background-color: #f190aa;
      background-image: url("../images/landing-HL-ball-bg-com.svg"), url("../images/landing-HL-ball-bg-com.svg");
      background-position: -116% -11%, 198% 95%;
      background-size: 69.123020% 50.791717%; }
    @media screen and (max-width: 639.98px) {
      #landingMag .ball5 .themeball {
        background-position: -71% -58%, 140% 99%; } }
    #landingMag .ball5 .ball-content {
      background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="b" data-name="圖層 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067.09 1067.09"><defs><style> .d { stroke-miterlimit: 10; stroke-width: 2.8px; } .d, .e { fill: none; stroke: %23F48594; stroke-linecap: round; } .f { opacity: .3; } .g { opacity: .1; } .e { stroke-miterlimit: 10; stroke-width: 3px; } </style></defs><g id="c" data-name="txt"><g><g class="g"><circle class="d" cx="533.54" cy="533.54" r="290.35"/></g><g class="f"><circle class="e" cx="533.54" cy="533.54" r="532.04"/></g></g></g></svg>'); }
      #landingMag .ball5 .ball-content h2 {
        color: #e03a68; }
        #landingMag .ball5 .ball-content h2::before {
          background-image: url("../images/com_cc_icon.svg"); }
      #landingMag .ball5 .ball-content .highlight-text {
        color: #e03a68; }
  #landingMag .btn-theme05 {
    display: inline-block;
    padding: 12px 35px;
    background-color: #e03a68;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid #e03a68; }
    #landingMag .btn-theme05:hover {
      background-color: #c8325a;
      border-color: #c8325a;
      color: #ffffff; }
    @media screen and (max-width: 768px) {
      #landingMag .btn-theme05 {
        padding: 10px 30px;
        font-size: 0.9rem; } }

#download {
  align-content: center;
  /*aspect-ratio: 1/1;*/
  margin-top: -200px;
  overflow: hidden;
  padding-top: 300px;
  position: relative;
  text-align: center;
  z-index: 0; }
  #download .row > div {
    background-color: var(--c-white);
    border: 8px var(--c-bg-boxmsg) solid;
    border-radius: 20px;
    max-width: 360px;
    /*width: 100%;*/ }
  #download img {
    max-width: 150px; }
  #download .box-DL {
    position: relative; }
    #download .box-DL::after {
      /*aspect-ratio: 1/1;*/
      background-image: url("../images/bg-index-dl.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1500px;
      content: "";
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      height: 220%;
      width: 100%;
      z-index: -1; }

.tempswiper {
  overflow-x: scroll;
  width: 100%; }
  .tempswiper > div {
    width: 1300px; }

html[lang="zh-hk"] #landingMOV .bg-report {
  background-image: url("../images/report-tc.svg");
  height: 100px;
  width: 308px; }

html[lang="zh-cn"] #landingMOV .bg-report {
  background-image: url("../images/report-sc.svg");
  height: 117px;
  width: 332px; }

#msg #landingMag .rootball {
  border-radius: 0;
  background-color: transparent;
  height: inherit; }
  #msg #landingMag .rootball::before, #msg #landingMag .rootball::after {
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    z-index: -1; }
  #msg #landingMag .rootball::before {
    background-image: url("../images/message/bg_main_left.svg");
    height: 863px;
    left: -209px;
    top: -345px;
    width: 1538px; }
  #msg #landingMag .rootball::after {
    background-image: url("../images/message/bg_main_right.svg");
    height: 683px;
    right: -173px;
    top: -150px;
    width: 1304px; }
  #msg #landingMag .rootball .rootball-bg {
    background-color: #dfd8ca;
    background-image: url("../images/message/bg-index-dl.svg"), url("../images/message/bg_intro.svg");
    background-position: center;
    background-size: 1942px 1942px, 1707px 1648px;
    background-repeat: no-repeat;
    border-radius: 1500px;
    height: 2286px;
    left: 50%;
    position: absolute;
    top: 0px;
    width: 2286px;
    z-index: 0;
    transform: translateX(-50%); }
  #msg #landingMag .rootball .box-msg {
    margin-bottom: -200px;
    position: relative; }
    #msg #landingMag .rootball .box-msg .box-msg-bg::before {
      top: 295px; }
    #msg #landingMag .rootball .box-msg .box-msg-bg::after {
      right: 9%;
      transform: translateY(100%); }
    #msg #landingMag .rootball .box-msg .box-msg-bg h2::after {
      display: none; }
    #msg #landingMag .rootball .box-msg .box-msg-bg h2:first-child::after {
      display: block;
      top: -140px;
      right: -165px; }

.msg-intro-bg {
  background-image: url("../images/message/bg_intro.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1160px 1120px;
  content: "";
  position: absolute;
  top: -110px;
  left: 50%;
  width: 100vw;
  height: 1120px;
  z-index: 0;
  transform: translateX(-50%); }

#msg-intro {
  display: flex;
  margin-bottom: -395px;
  padding: 110px 0 100px;
  position: relative; }
  #msg-intro .container {
    max-width: 960px;
    padding-bottom: 80px;
    text-align: center; }
  #msg-intro h1 {
    margin-bottom: 3rem; }
  #msg-intro p {
    margin-bottom: 1.5rem; }

#box-msg-ER {
  padding-top: 150px;
  position: relative; }
  #box-msg-ER .msg-ER-bg {
    background-image: url("../images/bg-index-dl.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1942px;
    content: "";
    position: absolute;
    top: -113px;
    height: 1942px;
    width: 100%;
    z-index: -1; }
  #box-msg-ER .container {
    max-width: 960px; }
  #box-msg-ER .row > div {
    background-color: var(--c-white);
    border: 6px var(--c-bg-boxmsg) solid;
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    margin: 0.5%;
    padding: 0px;
    width: 32.33333%; }
    #box-msg-ER .row > div div img {
      border-radius: 11px 11px 0px 0px; }
    #box-msg-ER .row > div div:last-child {
      background-color: var(--c-bg-boxmsg-a050);
      align-content: center;
      min-height: 120px;
      padding: 0.5rem;
      text-align: center; }

html[lang="zh-hk"],
html[lang="zh-cn"] {
  /*@media (min-width: 767.98px) {
      #landingMag {
          .rootball {
              .box-msg {
                  top: -270px;
              }
          }
      }
  }*/ }
  html[lang="zh-hk"] #landingIntro .shortcut-environment,
  html[lang="zh-cn"] #landingIntro .shortcut-environment {
    left: 22%; }
  html[lang="zh-hk"] #landingIntro .shortcut-people,
  html[lang="zh-cn"] #landingIntro .shortcut-people {
    left: 27%; }
  html[lang="zh-hk"] #landingIntro .shortcut-customers,
  html[lang="zh-cn"] #landingIntro .shortcut-customers {
    top: -12%; }
  html[lang="zh-hk"] #landingIntro .shortcut-supply-chain,
  html[lang="zh-cn"] #landingIntro .shortcut-supply-chain {
    right: 25%; }
  html[lang="zh-hk"] #landingIntro .shortcut-community,
  html[lang="zh-cn"] #landingIntro .shortcut-community {
    right: 22%; }
  html[lang="zh-hk"] #msg #landingMag .rootball .rootball-bg,
  html[lang="zh-cn"] #msg #landingMag .rootball .rootball-bg {
    height: 2204px; }

@media (max-width: 1024.98px) {
  #msg #landingMag .rootball .box-msg .box-msg-bg::before {
    left: -163px;
    padding-top: 23.940963%;
    top: 277px;
    width: 25.566002%; }
  #msg #landingMag .rootball .box-msg .box-msg-bg::after {
    bottom: 2px;
    right: 11%; }
  #msg #landingMag .rootball .box-msg .box-msg-bg h2:first-child::after {
    right: -65px;
    top: -74px; }

  #msg-intro .container {
    padding: 0px 60px 80px 60px; } }
@media (max-width: 991.98px) {
  #msg #landingMag .rootball .box-msg .box-msg-bg::before {
    left: -158px;
    padding-top: 23.940963%;
    top: 295px;
    width: 25.566002%; }
  #msg #landingMag .rootball::before {
    top: -478px; }
  #msg #landingMag .rootball::after {
    top: -333px; }
  #msg #box-msg-ER .container {
    padding-left: 5%;
    padding-right: 5%; }
    #msg #box-msg-ER .container .row > div {
      width: 49%; } }
@media (max-width: 640.98px) {
  #msg #landingMag .rootball::before {
    left: 31px;
    top: -399px; }
  #msg #landingMag .rootball::after {
    right: 0px;
    top: -360px; } }
@media (max-width: 575.98px) {
  #msg #landingMag p {
    font-size: inherit; }
  #msg #box-msg-ER .container {
    max-width: 540px; }
    #msg #box-msg-ER .container .row > div {
      margin: 1%;
      width: 98%; }

  #msg-intro .container {
    padding: inherit;
    padding-top: 0px;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5); } }
@media (max-width: 480.98px) {
  #msg #landingMag .rootball::before {
    left: 31px;
    top: -521px; }
  #msg #landingMag .rootball::after {
    right: 65px;
    top: -470px; }
  #msg #landingMag .rootball .box-msg {
    width: 90vw; }
    #msg #landingMag .rootball .box-msg .box-msg-bg h2:first-child::after {
      right: -56px; } }
#hl.str main {
  overflow-x: unset; }

#str-intro {
  margin-bottom: 300px;
  padding-top: 150px; }
  #str-intro .container {
    border: 8px var(--c-theme01) solid;
    border-radius: 50px;
    max-width: 900px;
    padding: 4rem 2rem 4rem 2rem;
    position: relative;
    z-index: 1; }
    #str-intro .container::after {
      background-image: url(../images/strategy/icon_str.svg);
      content: "";
      display: block;
      height: 110px;
      left: 0px;
      position: absolute;
      top: -70px;
      width: 90px;
      transform: translateX(-50%); }
    #str-intro .container h1 {
      /*background-color: var(--c-white);*/
      display: inline-block;
      left: 50%;
      padding: 0px 10px;
      position: absolute;
      text-align: center;
      top: 0px;
      width: max-content;
      transform: translateX(-50%) translateY(-58%); }
      #str-intro .container h1:after {
        background-color: var(--c-white);
        content: "";
        display: block;
        height: 20px;
        left: 0px;
        position: absolute;
        top: 43%;
        width: 100%;
        z-index: -1; }
    #str-intro .container .icon-row {
      bottom: 0px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%) translateY(50%); }
      #str-intro .container .icon-row .icon-item {
        display: flex; }
        #str-intro .container .icon-row .icon-item img {
          width: 88px; }
        #str-intro .container .icon-row .icon-item:after {
          background-color: var(--c-white);
          content: "";
          display: block;
          height: 20px;
          left: 0px;
          position: absolute;
          top: 43%;
          width: 100%;
          z-index: -1; }
  #str-intro .btn-next {
    margin-top: 10rem; }

@media screen and (max-width: 1024.98px) {
  #str-intro .container {
    max-width: 720px; }
    #str-intro .container .icon-row {
      bottom: 0px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%) translateY(50%); }
      #str-intro .container .icon-row .icon-item {
        background-color: var(--c-white);
        display: flex; }
        #str-intro .container .icon-row .icon-item img {
          width: 88px; } }
@media screen and (max-width: 767.98px) {
  #str-intro .container {
    max-width: 540px;
    padding: 6rem 2rem 4rem 2rem; }
    #str-intro .container h1 {
      display: inline;
      width: min-content; }
      #str-intro .container h1:after {
        top: 49%; }

  html[lang="zh-hk"] #str-intro .container,
  html[lang="zh-cn"] #str-intro .container {
    max-width: 540px;
    padding: 6rem 2rem 4rem 2rem; }
    html[lang="zh-hk"] #str-intro .container h1,
    html[lang="zh-cn"] #str-intro .container h1 {
      display: inline;
      width: 100%; }
      html[lang="zh-hk"] #str-intro .container h1:after,
      html[lang="zh-cn"] #str-intro .container h1:after {
        top: 42%; } }
@media screen and (max-width: 575.98px) {
  #str-intro {
    margin-bottom: 150px;
    padding-top: 250px; }
    #str-intro .container {
      max-width: 80%;
      padding: 6rem 2rem 4rem 2rem; }
      #str-intro .container::after {
        left: 50%;
        top: -190px;
        transform: translateX(-50%) scale(0.8); }
      #str-intro .container h1 {
        display: inline;
        width: min-content; }
        #str-intro .container h1:after {
          top: 45%;
          height: 30px; }
      #str-intro .container .icon-row .icon-item img {
        width: 44px; } }
@media screen and (max-width: 414.98px) {
  #str-intro .container {
    max-width: 96%;
    padding: 5rem 1rem 2rem 1rem; }
    #str-intro .container h1 {
      padding: 0px 5px; }
      #str-intro .container h1:after {
        top: 45%;
        height: 34px; }

  html[lang="zh-hk"] #str-intro .container,
  html[lang="zh-cn"] #str-intro .container {
    max-width: 96%;
    padding: 5rem 1rem 2rem 1rem; }
    html[lang="zh-hk"] #str-intro .container h1,
    html[lang="zh-cn"] #str-intro .container h1 {
      padding: 0px 5px; }
      html[lang="zh-hk"] #str-intro .container h1:after,
      html[lang="zh-cn"] #str-intro .container h1:after {
        height: 18px;
        max-width: 96%;
        margin-left: 2%;
        top: 45%; } }
#environment, #people, #customers, #supply, #community {
  margin-bottom: 200px;
  overflow-x: clip;
  padding-top: 50px;
  position: relative; }
  #environment .section-bg, #people .section-bg, #customers .section-bg, #supply .section-bg, #community .section-bg {
    background-size: 1160px 1120px; }
  #environment .section-bg2, #people .section-bg2, #customers .section-bg2, #supply .section-bg2, #community .section-bg2 {
    background-color: var(--c-theme02);
    margin-bottom: 170px;
    position: relative;
    z-index: 2; }
  #environment .container, #people .container, #customers .container, #supply .container, #community .container {
    position: relative;
    z-index: 3;
    transform: translateX(-15%); }
    #environment .container .cover img, #people .container .cover img, #customers .container .cover img, #supply .container .cover img, #community .container .cover img {
      right: 41%;
      position: absolute;
      top: -45px;
      width: 824px; }
    #environment .container .content, #people .container .content, #customers .container .content, #supply .container .content, #community .container .content {
      padding-bottom: 150px;
      padding-top: 80px;
      position: relative; }
      #environment .container .content h2, #people .container .content h2, #customers .container .content h2, #supply .container .content h2, #community .container .content h2 {
        text-transform: uppercase; }
      #environment .container .content .pic, #people .container .content .pic, #customers .container .content .pic, #supply .container .content .pic, #community .container .content .pic {
        background-image: url("../images/strategy/bg_env.svg");
        background-repeat: no-repeat;
        background-position: left top;
        background-size: cover;
        bottom: 0px;
        content: "";
        height: 333px;
        left: 90%;
        position: absolute;
        width: 505px; }
      #environment .container .content .btn-more, #people .container .content .btn-more, #customers .container .content .btn-more, #supply .container .content .btn-more, #community .container .content .btn-more {
        background-color: var(--c-theme02);
        border-color: var(--c-theme02);
        left: 50%;
        position: absolute;
        top: 115%;
        transform: translateX(-50%); }
        #environment .container .content .btn-more:hover, #environment .container .content .btn-more:focus, #people .container .content .btn-more:hover, #people .container .content .btn-more:focus, #customers .container .content .btn-more:hover, #customers .container .content .btn-more:focus, #supply .container .content .btn-more:hover, #supply .container .content .btn-more:focus, #community .container .content .btn-more:hover, #community .container .content .btn-more:focus {
          background-color: var(--c-white);
          color: var(--c-theme02); }
      #environment .container .content .icons, #people .container .content .icons, #customers .container .content .icons, #supply .container .content .icons, #community .container .content .icons {
        background-color: #fff;
        display: inline-block;
        left: 50%;
        padding: 10px;
        position: absolute;
        top: 100%;
        white-space: nowrap;
        transform: translateY(-60%) translateX(-50%); }
        #environment .container .content .icons img, #people .container .content .icons img, #customers .container .content .icons img, #supply .container .content .icons img, #community .container .content .icons img {
          max-width: 95px; }

#people .container .content .pic {
  background-image: url("../images/strategy/bg_peo.svg");
  height: 208px;
  left: 90%;
  width: 464px; }
#people .container .content .btn-more {
  background-color: var(--c-theme03);
  border-color: var(--c-theme03); }
  #people .container .content .btn-more:hover, #people .container .content .btn-more:focus {
    background-color: var(--c-white);
    color: var(--c-theme03); }
#people .section-bg2 {
  background-color: var(--c-theme03); }

#customers .container .content .pic {
  background-image: url("../images/strategy/bg_cus.svg");
  height: 336px;
  left: 90%;
  width: 345px; }
#customers .container .content .btn-more {
  background-color: var(--c-theme04);
  border-color: var(--c-theme04); }
  #customers .container .content .btn-more:hover, #customers .container .content .btn-more:focus {
    background-color: var(--c-white);
    color: var(--c-theme04); }
#customers .section-bg2 {
  background-color: var(--c-theme04); }

#supply .container .content .pic {
  background-image: url("../images/strategy/bg_sc.svg");
  height: 429px;
  left: 100%;
  width: 324px; }
#supply .container .content .btn-more {
  background-color: var(--c-theme05);
  border-color: var(--c-theme05); }
  #supply .container .content .btn-more:hover, #supply .container .content .btn-more:focus {
    background-color: var(--c-white);
    color: var(--c-theme05); }
#supply .section-bg2 {
  background-color: var(--c-theme05); }

#community {
  margin-bottom: 400px; }
  #community .container .content .pic {
    background-image: url("../images/strategy/bg_com.svg");
    height: 317px;
    left: 80%;
    width: 548px; }
  #community .container .content .btn-more {
    background-color: var(--c-theme06);
    border-color: var(--c-theme06); }
    #community .container .content .btn-more:hover, #community .container .content .btn-more:focus {
      background-color: var(--c-white);
      color: var(--c-theme06); }
  #community .section-bg2 {
    background-color: var(--c-theme06); }

@media screen and (max-width: 1199.98px) {
  #environment .container, #people .container, #customers .container, #supply .container, #community .container {
    transform: translateX(-8%); }
    #environment .container p br, #people .container p br, #customers .container p br, #supply .container p br, #community .container p br {
      display: none; } }
@media screen and (max-width: 991.98px) {
  #environment .container, #people .container, #customers .container, #supply .container, #community .container {
    transform: translateX(0); }
    #environment .container .cover, #people .container .cover, #customers .container .cover, #supply .container .cover, #community .container .cover {
      margin-top: -100px;
      height: 300px;
      text-align: center; }
      #environment .container .cover img, #people .container .cover img, #customers .container .cover img, #supply .container .cover img, #community .container .cover img {
        right: inherit;
        top: 0px;
        max-width: 300px;
        position: relative; }
    #environment .container .content, #people .container .content, #customers .container .content, #supply .container .content, #community .container .content {
      padding-top: 30px; }
      #environment .container .content .btn-more, #people .container .content .btn-more, #customers .container .content .btn-more, #supply .container .content .btn-more, #community .container .content .btn-more {
        margin-bottom: 5rem; }
  #environment::before, #people::before, #customers::before, #supply::before, #community::before {
    background-color: var(--c-theme02);
    content: "";
    height: 58%;
    left: 0%;
    position: absolute;
    right: 0;
    top: 85px;
    width: 100%;
    z-index: 2; } }
@media screen and (max-width: 767.98px) {
  #environment .container .content .icons img, #people .container .content .icons img, #customers .container .content .icons img, #supply .container .content .icons img, #community .container .content .icons img {
    max-width: 75px; } }
@media screen and (max-width: 575.98px) {
  #environment .container, #people .container, #customers .container, #supply .container, #community .container {
    transform: translateX(0); }
    #environment .container .cover, #people .container .cover, #customers .container .cover, #supply .container .cover, #community .container .cover {
      margin-top: -100px;
      text-align: center; }
      #environment .container .cover img, #people .container .cover img, #customers .container .cover img, #supply .container .cover img, #community .container .cover img {
        max-width: 300px; }
    #environment .container .content, #people .container .content, #customers .container .content, #supply .container .content, #community .container .content {
      padding-top: 30px; }
      #environment .container .content .pic, #people .container .content .pic, #customers .container .content .pic, #supply .container .content .pic, #community .container .content .pic {
        left: 50%;
        opacity: 0.5;
        transform: translateX(-50%); }
      #environment .container .content .btn-more, #people .container .content .btn-more, #customers .container .content .btn-more, #supply .container .content .btn-more, #community .container .content .btn-more {
        margin-bottom: 5rem; }
  #environment::before, #people::before, #customers::before, #supply::before, #community::before {
    background-color: var(--c-theme02);
    content: "";
    height: 58%;
    left: 0%;
    position: absolute;
    right: 0;
    top: 85px;
    width: 100%;
    z-index: 2; } }
@media screen and (max-width: 360.98px) {
  html[lang="zh-hk"] #environment .container .content .icons .sdg-logo-grp, html[lang="zh-hk"] #community .container .content .icons .sdg-logo-grp,
  html[lang="zh-cn"] #environment .container .content .icons .sdg-logo-grp,
  html[lang="zh-cn"] #community .container .content .icons .sdg-logo-grp {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 10px; }
  html[lang="zh-hk"] #environment .container .content .btn-more, html[lang="zh-hk"] #community .container .content .btn-more,
  html[lang="zh-cn"] #environment .container .content .btn-more,
  html[lang="zh-cn"] #community .container .content .btn-more {
    margin-top: 3rem; } }
@media screen and (min-width: 3300.98px) {
  .bg-left,
  .bg-right {
    background-size: 3300px; } }
@media screen and (max-width: 1440.98px) {
  /*#landingMOV {
    .bg-people5 {
      right: 6.144%;
    }
    .bg-center {
      background-size: cover;
    }
  }*/ }
@media screen and (max-width: 1199.98px) {
  #landingMOV .bg-left {
    left: 55%;
    transform: translateX(-50%); }
  #landingMOV .bg-right {
    left: 55%;
    transform: translateX(-50%); }
  #landingMOV .bg-center0 {
    right: 56%; }
  #landingMOV .bg-grass {
    left: 56%; }
  #landingMOV .bg-building {
    height: 903px;
    right: 29.271093%;
    width: 836px; }
  #landingMOV .bg-people1 {
    bottom: 9.285%;
    height: 91.1827957px;
    right: 35.35%;
    width: 80px; }
  #landingMOV .bg-people2 {
    animation: op0to1 0.5s linear 1.5s forwards;
    bottom: 15.894736%;
    height: 81.89781px;
    right: 16%;
    width: 110px; }
  #landingMOV .bg-people3 {
    animation: op0to1 0.5s linear 1.3s forwards;
    bottom: 4%;
    height: 102.2435897px;
    right: 9%;
    width: 220px; }
  #landingMOV .bg-people4 {
    bottom: 20%;
    height: 124.1883117px;
    right: 7%;
    width: 250px; }
  #landingMOV .bg-people5 {
    bottom: 82.313%;
    height: 156.2589928px;
    opacity: 0;
    right: 14.194%;
    width: 120px; }
  #landingMOV .bg-people6 {
    bottom: 89.5%;
    height: 100.4854369px;
    right: 350px;
    width: 180px; }
  #landingMOV .bg-ball1,
  #landingMOV .bg-ball2,
  #landingMOV .bg-ball3,
  #landingMOV .bg-ball4,
  #landingMOV .bg-ball5,
  #landingMOV .bg-ball6 {
    border-radius: 100px;
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 0; }
  #landingMOV .bg-ball1 {
    animation: op0to1 0.3s linear 2s forwards, scaleloop 1s linear 3s infinite alternate;
    background-color: #fb8a24;
    bottom: 73.789473%;
    height: 23px;
    right: 55.466799%;
    width: 23px; }
  #landingMOV .bg-ball2 {
    animation: op0to1 0.3s linear 2.3s forwards, scaleloop 1s linear 4s infinite alternate;
    background-color: #8764b4;
    bottom: 80%;
    height: 47px;
    right: 52.121817%;
    width: 47px; }
  #landingMOV .bg-ball3 {
    animation: op0to1 0.3s linear 2.6s forwards, scaleloop 1s linear 5s infinite alternate;
    background-color: #068be5;
    bottom: 80.5%;
    height: 89px;
    right: 75%;
    width: 89px; }
  #landingMOV .bg-ball4 {
    animation: op0to1 0.3s linear 2.9s forwards, scaleloop 1s linear 6s infinite alternate;
    background-color: #00b536;
    bottom: 96.75%;
    height: 43px;
    right: 73.57%;
    width: 43px; }
  #landingMOV .bg-ball5 {
    animation: op0to1 0.3s linear 3.2s forwards, scaleloop 1s linear 7s infinite alternate;
    background-color: #ed5373;
    bottom: 102.25%;
    height: 15px;
    right: 69.15%;
    width: 15px; }
  #landingMOV .bg-ball6 {
    animation: op0to1 0.3s linear 3.5s forwards, scaleloop 1s linear 8s infinite alternate;
    background-color: #e2e3e3;
    bottom: 103.5%;
    height: 38px;
    right: 27%;
    width: 38px; }
  #landingMOV .bg-report {
    right: 13.782%; } }
@media screen and (max-width: 991.98px) {
  #landingMOV .bg-left {
    background-size: contain; }
  #landingMOV .bg-right {
    background-size: contain;
    height: 110%; }
  #landingMOV .bg-center0 {
    bottom: 66px;
    height: 614.0433213px;
    right: 56%;
    width: 730px; }
  #landingMOV .bg-center {
    height: 100%;
    width: 100%; }
  #landingMOV .bg-grass {
    left: 64%; }
  #landingMOV .bg-building {
    height: 831.7105263px;
    width: 770px; }
  #landingMOV .bg-people1 {
    bottom: 9%;
    height: 79.78494624px;
    right: 36%;
    width: 70px; }
  #landingMOV .bg-people2 {
    bottom: 14.895%;
    height: 81.89781px;
    right: 17%;
    width: 100px; }
  #landingMOV .bg-people3 {
    bottom: 7%;
    height: 83.65384615px;
    right: 16.25%;
    width: 180px; }
  #landingMOV .bg-people4 {
    bottom: 24%;
    height: 99.35064935px;
    right: 15%;
    width: 200px; }
  #landingMOV .bg-people5 {
    bottom: 87.313%;
    height: 143.2374101px;
    right: 24.194%;
    width: 110px; }
  #landingMOV .bg-people6 {
    bottom: 88%;
    height: 100.4854369px;
    right: 296px;
    width: 180px; }
  #landingMOV .bg-ball1,
  #landingMOV .bg-ball2,
  #landingMOV .bg-ball3,
  #landingMOV .bg-ball4,
  #landingMOV .bg-ball5,
  #landingMOV .bg-ball6 {
    border-radius: 100px;
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 0; }
  #landingMOV .bg-ball1 {
    bottom: 73.789473%;
    height: 23px;
    right: 50.467%;
    width: 23px; }
  #landingMOV .bg-ball2 {
    bottom: 80%;
    height: 35px;
    right: 46.122%;
    width: 35px; }
  #landingMOV .bg-ball3 {
    bottom: 87.5%;
    height: 70px;
    right: 70%;
    width: 70px; }
  #landingMOV .bg-ball4 {
    bottom: 100.75%;
    height: 30px;
    right: 65.57%;
    width: 30px; }
  #landingMOV .bg-ball5 {
    bottom: 106.25%;
    height: 10px;
    right: 62.15%;
    width: 10px; }
  #landingMOV .bg-ball6 {
    bottom: 108.5%;
    height: 28px;
    right: 37%;
    width: 28px; }
  #landingMOV .bg-report {
    width: 320px;
    right: 20%; } }
@media screen and (max-width: 767.98px) {
  #landingMOV .bg-left {
    left: 64%; }
  #landingMOV .bg-right {
    background-size: contain;
    height: 110%; }
  #landingMOV .bg-center0 {
    bottom: 133px;
    height: 571.9855596px;
    right: -11%;
    width: 680px;
    transform: none; }
  #landingMOV .bg-center {
    height: 100%;
    width: 100%; }
  #landingMOV .bg-grass {
    animation: op0to1 0.5s linear forwards;
    background-position: 72% 100%;
    background-size: 2003px;
    left: 0px;
    width: 100%;
    transform: none; }
  #landingMOV .bg-building {
    animation: LtoR-landingbanner767 0.5s linear 0.6s forwards;
    height: auto;
    width: 100%;
    left: -7%;
    aspect-ratio: 0.925802879 / 1; }
  #landingMOV .bg-people1 {
    bottom: 8%;
    height: 79.78494624px;
    right: inherit;
    width: 60px;
    left: 42%; }
  #landingMOV .bg-people2 {
    bottom: 17.895%;
    height: 81.89781px;
    right: 1%;
    width: 90px; }
  #landingMOV .bg-people3 {
    bottom: 6.5%;
    height: 83.65384615px;
    right: 1%;
    width: 160px; }
  #landingMOV .bg-people4 {
    bottom: 29%;
    height: 99.35064935px;
    right: -2%;
    width: 180px; }
  #landingMOV .bg-ball1,
  #landingMOV .bg-ball2,
  #landingMOV .bg-ball3,
  #landingMOV .bg-ball4,
  #landingMOV .bg-ball5,
  #landingMOV .bg-ball6 {
    border-radius: 100px;
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 0; }
  #landingMOV .bg-ball1 {
    bottom: 75.789%;
    height: 23px;
    left: 10%;
    right: inherit;
    width: 23px; }
  #landingMOV .bg-ball2 {
    bottom: 80%;
    height: 35px;
    left: 17%;
    right: inherit;
    width: 35px; }
  #landingMOV .bg-ball3 {
    bottom: 87.5%;
    height: 70px;
    right: 73%;
    width: 70px; }
  #landingMOV .bg-ball4 {
    bottom: 100.75%;
    height: 30px;
    right: 68.57%;
    width: 30px; }
  #landingMOV .bg-ball5 {
    bottom: 106.25%;
    height: 10px;
    right: 64.15%;
    width: 10px; }
  #landingMOV .bg-ball6 {
    bottom: 110.5%;
    height: 28px;
    right: 39%;
    width: 28px; }
  #landingMOV .bg-report {
    right: 25.5%; } }
@media screen and (max-width: 575.98px) {
  #landingMOV .bg-left {
    left: 64%; }
  #landingMOV .bg-right {
    background-size: contain;
    height: 110%; }
  #landingMOV .bg-center0 {
    bottom: 133px;
    height: 571.9855596px;
    right: -14%;
    width: 680px;
    transform: none; }
  #landingMOV .bg-center {
    height: 100%;
    width: 100%; }
  #landingMOV .bg-grass {
    background-position: 72% 100%;
    background-size: 2003px;
    left: 0px;
    width: 100%;
    transform: none; }
  #landingMOV .bg-building {
    animation: LtoR-landingbanner767 0.5s linear 0.6s forwards;
    height: auto;
    width: 100%;
    left: -7%;
    aspect-ratio: 0.925802879 / 1; }
  #landingMOV .bg-people1 {
    bottom: 6%;
    height: 68.38709677px;
    right: inherit;
    width: 60px;
    left: 42%; }
  #landingMOV .bg-people2 {
    bottom: 17.895%;
    height: 81.89781px;
    right: 1%;
    width: 90px; }
  #landingMOV .bg-people3 {
    bottom: 4.5%;
    height: 83.65384615px;
    right: 1%;
    width: 160px; }
  #landingMOV .bg-people4 {
    bottom: 29%;
    height: 99.35064935px;
    right: -2%;
    width: 180px; }
  #landingMOV .bg-ball1,
  #landingMOV .bg-ball2,
  #landingMOV .bg-ball3,
  #landingMOV .bg-ball4,
  #landingMOV .bg-ball5,
  #landingMOV .bg-ball6 {
    border-radius: 100px;
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 0; }
  #landingMOV .bg-ball1 {
    bottom: 76.789%;
    height: 23px;
    left: 7%;
    right: inherit;
    width: 23px; }
  #landingMOV .bg-ball2 {
    bottom: 80%;
    height: 35px;
    left: 17%;
    right: inherit;
    width: 35px; }
  #landingMOV .bg-ball3 {
    bottom: 87.5%;
    height: 70px;
    right: 60%;
    width: 70px; }
  #landingMOV .bg-ball4 {
    bottom: 100.75%;
    height: 30px;
    right: 55.57%;
    width: 30px; }
  #landingMOV .bg-ball5 {
    bottom: 106.25%;
    height: 10px;
    right: 51.15%;
    width: 10px; }
  #landingMOV .bg-ball6 {
    bottom: 110.5%;
    height: 28px;
    right: 39%;
    width: 28px; }
  #landingMOV .bg-report {
    right: 25.5%; } }
/*
@media screen and (max-width: 575.98px) {
    #landingMOV {
            
        .bg-left {
            left: 33%;
            height: 96%;
            width: 700%;
        }
        .bg-right {
            background-size: contain;
            height: 110%;
        }
        .bg-center0 {
            bottom: 78px;
            height: 571.9855596px;
            right: -14%;
            width: 600px;
        }
        .bg-grass {
            left: 64%;
        }
        
        .bg-building {
			animation: LtoR-landingbanner575 0.5s linear 0.6s forwards;
            height: 496.8660287px;
            right: 22%;
            width: 460px;
          }
        .bg-people1 {
            bottom: 5%;
            height: 56.98924731px;
            right: 31%;
            width: 50px;
        }
        .bg-people2 {
            bottom: 17.895%;
            height: 81.89781px;
            right: 20%;
            width: 90px;
        }
        .bg-people3 {
            bottom: 4%;
            height: 60.41666667px;
            right: 22.75%;
            width: 130px;
          }
        .bg-people4 {
            bottom: 26%;
            height: 74.51298701px;
            right: 22%;
            width: 150px;
          }
        .bg-people5 {
            bottom: 90%;
            height: 117.1942446px;
            right: 28.194%;
            width: 90px;
          }
        .bg-people6 {
            bottom: 89%;
            height: 89.32038835px;
            right: 246px;
            width: 160px;
          }
        
        .bg-ball1,
        .bg-ball2,
        .bg-ball3,
        .bg-ball4,
        .bg-ball5,
        .bg-ball6 {
            border-radius: 100px;

            content: "";
            opacity: 0;
            position: absolute;
            z-index: 0;
          }
        
        .bg-ball1 {
            bottom: 75%;
            height: 20px;
            right: 39%;
            width: 20px;
          }
        .bg-ball2 {
            bottom: 77%;
            height: 32px;
            right: 36.122%;
            width: 32px;
          }
        .bg-ball3 {
            bottom: 90.5%;
            height: 50px;
            right: 74%;
            width: 50px;
          }
        .bg-ball4 {
            bottom: 101.75%;
            height: 25px;
            right: 68.57%;
            width: 25px;
          }
        .bg-ball5 {
            bottom: 106.25%;
            height: 10px;
            right: 64.15%;
            width: 10px;
          }
        .bg-ball6 {
            bottom: 109.5%;
            height: 25px;
            right: 42%;
            width: 25px;
        }
        
        .bg-report {
            right: 25.5%;
        }
    }
}
@media screen and (max-width: 414.98px) {
    #landingMOV {
            
        .bg-left {
            left: 33%;
            height: 96%;
            width: 700%;
        }
        .bg-right {
            background-size: contain;
            height: 110%;
        }
        .bg-center0 {
            bottom: 93px;
            height: 571.9855596px;
            right: -14%;
            width: 600px;
        }
        .bg-grass {
            left: 64%;
        }
        
        .bg-building {
			animation: LtoR-landingbanner575 0.5s linear 0.6s forwards;
            height: 496.8660287px;
            right: 22%;
            width: 460px;
          }
        .bg-people1 {
            bottom: 5%;
            height: 56.98924731px;
            right: 31%;
            width: 50px;
        }
        .bg-people2 {
            bottom: 17.895%;
            height: 81.89781px;
            right: 20%;
            width: 90px;
        }
        .bg-people3 {
            bottom: 4%;
            height: 60.41666667px;
            right: 22.75%;
            width: 130px;
          }
        .bg-people4 {
            bottom: 26%;
            height: 74.51298701px;
            right: 22%;
            width: 150px;
          }
        .bg-people5 {
            bottom: 90%;
            height: 117.1942446px;
            right: 28.194%;
            width: 90px;
          }
        .bg-people6 {
            bottom: 89%;
            height: 89.32038835px;
            right: 246px;
            width: 160px;
          }
        
        .bg-ball1,
        .bg-ball2,
        .bg-ball3,
        .bg-ball4,
        .bg-ball5,
        .bg-ball6 {
            border-radius: 100px;

            content: "";
            opacity: 0;
            position: absolute;
            z-index: 0;
          }
        
        .bg-ball1 {
            bottom: 75%;
            height: 20px;
            right: 39%;
            width: 20px;
          }
        .bg-ball2 {
            bottom: 77%;
            height: 32px;
            right: 36.122%;
            width: 32px;
          }
        .bg-ball3 {
            bottom: 90.5%;
            height: 50px;
            right: 74%;
            width: 50px;
          }
        .bg-ball4 {
            bottom: 101.75%;
            height: 25px;
            right: 68.57%;
            width: 25px;
          }
        .bg-ball5 {
            bottom: 106.25%;
            height: 10px;
            right: 64.15%;
            width: 10px;
          }
        .bg-ball6 {
            bottom: 109.5%;
            height: 25px;
            right: 42%;
            width: 25px;
        }
        
        .bg-report {
            right: 25.5%;
        }
    }
}
*/
@media screen and (max-width: 480.98px) {
  #landingMOV .bg-left {
    left: 47%; }
  #landingMOV .bg-right {
    background-size: contain;
    height: 110%; }
  #landingMOV .bg-center0 {
    bottom: 133px;
    height: 571.9855596px;
    right: inherit;
    width: 160%;
    transform: none;
    left: 50%;
    transform: translateX(-54%); }
  #landingMOV .bg-center {
    height: 100%;
    width: 100%; }
  #landingMOV .bg-grass {
    background-position: 72% 100%;
    background-size: 2003px;
    left: 0px;
    width: 100%;
    transform: none; }
  #landingMOV .bg-building {
    animation: LtoR-landingbanner767 0.5s linear 0.6s forwards;
    height: auto;
    width: 100%;
    left: -7%;
    aspect-ratio: 0.925802879 / 1; }
  #landingMOV .bg-people1 {
    bottom: 5%;
    height: 56.98924731px;
    right: inherit;
    width: 60px;
    left: 42%; }
  #landingMOV .bg-people2 {
    bottom: 18.895%;
    height: 59.5620438px;
    right: 1%;
    width: 80px; }
  #landingMOV .bg-people3 {
    bottom: 4.5%;
    height: 53.44551282px;
    right: 1%;
    width: 115px; }
  #landingMOV .bg-people4 {
    bottom: 29%;
    height: 99.35064935px;
    right: -2%;
    width: 180px; }
  #landingMOV .bg-ball1,
  #landingMOV .bg-ball2,
  #landingMOV .bg-ball3,
  #landingMOV .bg-ball4,
  #landingMOV .bg-ball5,
  #landingMOV .bg-ball6 {
    border-radius: 100px;
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 0; }
  #landingMOV .bg-ball1 {
    bottom: 76.789%;
    height: 23px;
    left: 7%;
    right: inherit;
    width: 23px; }
  #landingMOV .bg-ball2 {
    bottom: 80%;
    height: 35px;
    left: 17%;
    right: inherit;
    width: 35px; }
  #landingMOV .bg-ball3 {
    bottom: 87.5%;
    height: 70px;
    right: 60%;
    width: 70px; }
  #landingMOV .bg-ball4 {
    bottom: 100.75%;
    height: 30px;
    right: 55.57%;
    width: 30px; }
  #landingMOV .bg-ball5 {
    bottom: 106.25%;
    height: 10px;
    right: 51.15%;
    width: 10px; }
  #landingMOV .bg-ball6 {
    bottom: 110.5%;
    height: 28px;
    right: 39%;
    width: 28px; }
  #landingMOV .bg-report {
    right: 16.5%; } }
@media screen and (max-width: 414.98px) {
  #landingMOV .bg-people6 {
    bottom: 89%;
    height: 83.73786408px;
    left: 35%;
    right: inherit;
    width: 150px; } }
@media screen and (max-width: 320.98px) {
  #landingMOV .bg-left {
    left: 47%; }
  #landingMOV .bg-right {
    background-size: contain;
    height: 110%; }
  #landingMOV .bg-center0 {
    bottom: 95px;
    height: 571.9855596px;
    right: inherit;
    width: 160%;
    transform: none;
    left: 50%;
    transform: translateX(-54%); }
  #landingMOV .bg-center {
    height: 100%;
    width: 100%; }
  #landingMOV .bg-grass {
    background-position: 72% 100%;
    background-size: 2003px;
    left: 0px;
    width: 100%;
    transform: none; }
  #landingMOV .bg-building {
    animation: LtoR-landingbanner767 0.5s linear 0.6s forwards;
    bottom: 33px;
    height: auto;
    width: 100%;
    left: -7%;
    aspect-ratio: 0.925802879 / 1; }
  #landingMOV .bg-people1 {
    bottom: 7%;
    height: 56.98924731px;
    right: inherit;
    width: 60px;
    left: 42%; }
  #landingMOV .bg-people2 {
    bottom: 20.895%;
    height: 59.5620438px;
    right: 1%;
    width: 80px; }
  #landingMOV .bg-people3 {
    bottom: 6.5%;
    height: 53.44551282px;
    right: 1%;
    width: 115px; }
  #landingMOV .bg-people4 {
    bottom: 31%;
    height: 99.35064935px;
    right: 0%;
    width: 200px; }
  #landingMOV .bg-people5 {
    bottom: 90.313%;
    height: 117.1942446px;
    right: 26.194%;
    width: 90px; }
  #landingMOV .bg-people6 {
    bottom: 90%;
    height: 83.73786408px;
    left: 31%;
    right: inherit;
    width: 150px; }
  #landingMOV .bg-ball1,
  #landingMOV .bg-ball2,
  #landingMOV .bg-ball3,
  #landingMOV .bg-ball4,
  #landingMOV .bg-ball5,
  #landingMOV .bg-ball6 {
    border-radius: 100px;
    content: "";
    opacity: 0;
    position: absolute;
    z-index: 0; }
  #landingMOV .bg-ball1 {
    bottom: 76.789%;
    height: 15px;
    left: 7%;
    right: inherit;
    width: 15px; }
  #landingMOV .bg-ball2 {
    bottom: 80%;
    height: 30px;
    left: 17%;
    right: inherit;
    width: 30px; }
  #landingMOV .bg-ball3 {
    bottom: 96.5%;
    height: 40px;
    right: 60%;
    width: 40px; }
  #landingMOV .bg-ball4 {
    bottom: 103.75%;
    height: 22px;
    right: 54.57%;
    width: 22px; }
  #landingMOV .bg-ball5 {
    bottom: 107.25%;
    height: 6px;
    right: 50.15%;
    width: 6px; }
  #landingMOV .bg-ball6 {
    bottom: 110.5%;
    height: 20px;
    right: 36%;
    width: 20px; }
  #landingMOV .bg-report {
    width: 250px; } }
/* highlight */
#hl {
  /* theme04 */
  /* theme02 */
  /* theme03 */
  /* theme05 */
  /* theme06 */ }
  #hl .box-top-intro {
    background-repeat: no-repeat !important;
    /*overflow: hidden;
        padding-top: 78.125%;*/
    min-height: 900px;
    position: relative;
    width: 100%;
    z-index: 1; }
    #hl .box-top-intro::before, #hl .box-top-intro::after {
      animation: op0to1 1s linear forwards;
      background-repeat: no-repeat;
      content: "";
      display: block;
      opacity: 0;
      position: absolute;
      z-index: 0; }
    #hl .box-top-intro::after {
      animation: op0to1 1s linear 0.5s forwards; }
    #hl .box-top-intro .box-top-content {
      animation: toptodown 0.5s linear 1s forwards;
      align-content: center;
      background-repeat: no-repeat !important;
      background-position: center;
      background-color: var(--c-white);
      background-size: 90%;
      box-shadow: 0px 0px 0px 90px var(--c-theme01b-a085);
      border-radius: 1000000px;
      left: 50%;
      height: 100%;
      min-height: 1460px;
      min-width: 1460px;
      max-height: 1460px;
      max-width: 1460px;
      opacity: 0;
      padding: 730px 100px 100px 100px;
      position: absolute;
      top: 0px;
      width: 100%;
      z-index: 1;
      transform: translateX(-50%) translateY(-100%); }
      #hl .box-top-intro .box-top-content .box-top-content-img {
        animation: showimg 0.5s linear 1.5s forwards;
        border-radius: 300px;
        opacity: 0;
        position: absolute;
        transform: translateY(-10%) translateX(-10%); }
      #hl .box-top-intro .box-top-content h1 {
        color: var(--c-theme01);
        text-transform: uppercase; }
      #hl .box-top-intro .box-top-content .btn-next {
        left: 50%;
        position: absolute;
        top: 101%;
        transform: translateX(-50%) translateY(50%);
        z-index: 9999; }
  #hl #highlight {
    background-color: transparent;
    height: 820px;
    position: relative;
    top: -50%;
    width: 100%; }
    #hl #highlight .swiper-HL {
      padding: 2rem 0rem; }
      #hl #highlight .swiper-HL .swiper-slide {
        background-color: var(--c-theme04b);
        border-radius: 1000px;
        color: var(--c-white);
        height: 100%;
        padding: 50px 3rem;
        text-align: center; }
        #hl #highlight .swiper-HL .swiper-slide img {
          aspect-ratio: 1/1;
          max-width: 160px;
          margin-bottom: 8%;
          width: auto; }
        #hl #highlight .swiper-HL .swiper-slide.current {
          transform: scale(1.1); }
        #hl #highlight .swiper-HL .swiper-slide:not(.current) {
          opacity: 0.4; }
          #hl #highlight .swiper-HL .swiper-slide:not(.current):first-child {
            transform: rotate(-45deg) scale(0.6) translateY(9%) translateX(-9%); }
          #hl #highlight .swiper-HL .swiper-slide:not(.current):last-child {
            transform: rotate(45deg) scale(0.6) translateY(9%) translateX(9%); }
    #hl #highlight .highlight-bottom {
      background-repeat: no-repeat;
      bottom: 0px;
      background-color: var(--c-white);
      height: 40%;
      position: absolute;
      width: 100%; }
      #hl #highlight .highlight-bottom::before {
        background-color: var(--c-white);
        border-radius: 1000px;
        content: "";
        height: 450%;
        max-width: 1400px;
        position: absolute;
        top: -100%;
        width: 100%;
        transform: translateX(-50%); }
      #hl #highlight .highlight-bottom .btn-next {
        top: 70%; }
  #hl .main-content {
    margin-bottom: 18%;
    position: relative; }
    #hl .main-content > div > div {
      background-color: var(--c-white); }
      #hl .main-content > div > div:last-child, #hl .main-content > div > div.my-5 {
        background-color: transparent; }
    #hl .main-content .container {
      position: relative; }
      #hl .main-content .container::before, #hl .main-content .container::after {
        background-repeat: no-repeat;
        content: "";
        position: absolute;
        z-index: 10;
        transform: none; }
      #hl .main-content .container ul {
        padding-left: 20px; }
    #hl .main-content #content01::before, #hl .main-content #content02::before, #hl .main-content #content03::before, #hl .main-content #content04::before, #hl .main-content #content05::before, #hl .main-content #content06::before {
      background-repeat: no-repeat;
      content: "";
      position: absolute;
      z-index: -1; }
    #hl .main-content .box-border {
      border-width: 10px;
      border-radius: 45px;
      padding: 2rem 4rem 3rem 4rem;
      position: relative; }
      #hl .main-content .box-border::after {
        background-repeat: no-repeat;
        height: 150%;
        position: absolute;
        width: 100%; }
    #hl .main-content h2 {
      background-color: var(--c-theme01);
      border: 10px var(--c-white) solid;
      border-radius: 90px;
      color: var(--c-white);
      font-size: var(--pt26);
      left: 2rem;
      padding: 0.5rem 1.5rem;
      position: absolute;
      top: 0px;
      transform: translateY(-60%); }
  #hl .hl-cs {
    margin-bottom: 10%;
    position: relative;
    padding-bottom: 90px; }
    #hl .hl-cs h2,
    #hl .hl-cs h3 {
      display: block;
      font-size: var(--pt55);
      position: relative; }
      #hl .hl-cs h2 span,
      #hl .hl-cs h3 span {
        background-color: var(--c-white);
        border: 10px var(--c-theme01) solid;
        outline: 10px var(--c-white) solid;
        padding: 0.5rem 3rem; }
    #hl .hl-cs h2::after {
      background-color: var(--c-theme01);
      content: "";
      height: 2px;
      position: absolute;
      top: 50%;
      left: 0px;
      width: 100%;
      z-index: -1;
      transform: translateY(-50%); }
    #hl .hl-cs .box-cover {
      position: relative; }
      #hl .hl-cs .box-cover:after {
        aspect-ratio: 1/1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 360%;
        left: 50%;
        max-height: 1280px;
        max-width: 1280px;
        position: absolute;
        top: 50%;
        z-index: -1;
        transform: translateX(-50%) translateY(-50%); }
      #hl .hl-cs .box-cover .cover {
        border: 14px var(--c-theme02b) solid;
        border-radius: 500px;
        height: 360px;
        margin-bototm: 10px;
        overflow: hidden;
        position: relative;
        width: 360px;
        transition: 0.2s all linear; }
        #hl .hl-cs .box-cover .cover img {
          left: 50%;
          height: 100%;
          position: absolute;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          transition: 0.2s all linear; }
    #hl .hl-cs .btn-more {
      background-color: var(--c-theme01);
      border: 3px var(--c-theme01) solid;
      color: var(--c-white); }
      #hl .hl-cs .btn-more:hover {
        background-color: var(--c-white) !important;
        color: var(--c-theme01); }
  #hl.hl-cus .box-top-intro {
    background-color: var(--c-theme04); }
    #hl.hl-cus .box-top-intro::before {
      background-image: url("../images/highlight/cus/bg-HL-intro.svg");
      height: 750px;
      left: -9.729333%;
      top: -12.8125%;
      width: 511px; }
    #hl.hl-cus .box-top-intro::after {
      background-image: url("../images/highlight/cus/bg-HL-intro2.svg");
      height: 511px;
      left: 61%;
      top: 340px;
      width: 751px; }
    #hl.hl-cus .box-top-intro .box-top-content {
      box-shadow: 0px 0px 0px 90px var(--c-theme04b-a085);
      background-image: url("../images/highlight/cus/bg-HL-content.svg"); }
      #hl.hl-cus .box-top-intro .box-top-content h1 {
        color: var(--c-theme04); }
  #hl.hl-cus #highlight {
    background-color: var(--c-theme04); }
  #hl.hl-cus .main-content .container::before, #hl.hl-cus .main-content .container::after {
    top: -230px; }
  #hl.hl-cus .main-content .container::before {
    background-image: url("../images/highlight/cus/bg_HL-001.svg");
    height: 177px;
    left: 4rem;
    width: 138px; }
  #hl.hl-cus .main-content .container::after {
    background-image: url("../images/highlight/cus/bg_HL-002.svg");
    background-position: right bottom;
    height: 195px;
    right: 4rem;
    width: 181px; }
  #hl.hl-cus .main-content #content01 p {
    position: relative;
    z-index: 10; }
  #hl.hl-cus .main-content #content01::before {
    background-image: url("../images/highlight/cus/bg-HL-maincontent.svg");
    height: 511px;
    right: -700px;
    top: -170px;
    width: 751px; }
  #hl.hl-cus .main-content #content02::after {
    background-image: url("../images/highlight/cus/bg-HL-maincontent.svg");
    height: 511px;
    left: -548px;
    top: -43px;
    width: 751px; }
  #hl.hl-cus .main-content #content03::after {
    background-image: url("../images/highlight/cus/bg-HL-maincontent.svg");
    height: 511px;
    right: -355px;
    top: 116px;
    width: 751px; }
  #hl.hl-cus .main-content .box-border-theme04 {
    border-color: var(--c-theme04c); }
  #hl.hl-cus .main-content h2 {
    background-color: var(--c-theme04d); }
  #hl.hl-cus .hl-cs {
    color: var(--c-theme04); }
    #hl.hl-cus .hl-cs h2,
    #hl.hl-cus .hl-cs h3 {
      color: var(--c-theme04); }
      #hl.hl-cus .hl-cs h2 span,
      #hl.hl-cus .hl-cs h3 span {
        border-color: var(--c-theme04); }
    #hl.hl-cus .hl-cs h2::after {
      background-color: var(--c-theme04); }
    #hl.hl-cus .hl-cs .box-cover:after {
      background-image: url("../images/highlight/cus/bg-HL-content.svg"); }
    #hl.hl-cus .hl-cs .box-cover .cover {
      border-color: var(--c-theme04b); }
    #hl.hl-cus .hl-cs .btn-more {
      background-color: var(--c-theme04);
      border: 3px var(--c-theme04) solid; }
      #hl.hl-cus .hl-cs .btn-more:hover {
        color: var(--c-theme04); }
  #hl.hl-env .box-top-intro {
    background-color: var(--c-theme02); }
    #hl.hl-env .box-top-intro::before {
      background-image: url("../images/highlight/env/bg-HL-intro.svg");
      height: 735px;
      left: -9.729333%;
      top: 0px;
      width: 687px; }
    #hl.hl-env .box-top-intro::after {
      background-image: url("../images/highlight/env/bg-HL-intro2.svg");
      height: 783px;
      left: 80%;
      top: 150px;
      width: 629px; }
    #hl.hl-env .box-top-intro .box-top-content {
      box-shadow: 0px 0px 0px 90px var(--c-theme02b-a085);
      background-image: url("../images/highlight/env/bg-HL-content.svg"); }
      #hl.hl-env .box-top-intro .box-top-content h1 {
        color: var(--c-theme02); }
    #hl.hl-env .box-top-intro .ball::before {
      background-color: var(--c-theme02b); }
  #hl.hl-env #highlight {
    background-color: var(--c-theme02); }
    #hl.hl-env #highlight .btn-pngrp .prevBtn svg path, #hl.hl-env #highlight .btn-pngrp .nextBtn svg path {
      stroke: var(--c-theme02); }
  #hl.hl-env .main-content .container::before {
    top: -230px; }
  #hl.hl-env .main-content .container::after {
    top: -180px; }
  #hl.hl-env .main-content .container::before {
    background-image: url("../images/highlight/env/bg_HL-001.svg");
    height: 196px;
    left: 4rem;
    width: 264px; }
  #hl.hl-env .main-content .container::after {
    background-image: url("../images/highlight/env/bg_HL-002.svg");
    background-position: right bottom;
    height: 125px;
    right: 4rem;
    width: 216px; }
  #hl.hl-env .main-content #content01 p {
    position: relative;
    z-index: 10; }
  #hl.hl-env .main-content #content01::before {
    background-image: url("../images/highlight/env/bg-HL-maincontent.svg");
    height: 735px;
    left: -400px;
    right: inherit;
    top: 170px;
    width: 687px; }
  #hl.hl-env .main-content #content01::after {
    background-image: url("../images/highlight/env/bg-HL-maincontent2.svg");
    content: "";
    height: 783px;
    right: -500px;
    top: 0px;
    width: 629px;
    z-index: -1; }
  #hl.hl-env .main-content #content02::after {
    display: none;
    background-image: url("../images/highlight/env/bg-HL-maincontent.svg");
    height: 511px;
    left: -548px;
    top: -43px;
    width: 751px; }
  #hl.hl-env .main-content #content03::before {
    background-image: url("../images/highlight/env/bg-HL-maincontent.svg");
    height: 735px;
    left: -400px;
    right: inherit;
    top: 170px;
    width: 687px; }
  #hl.hl-env .main-content #content03::after {
    background-image: url("../images/highlight/env/bg-HL-maincontent2.svg");
    content: "";
    height: 783px;
    right: -500px;
    top: 0px;
    width: 629px;
    z-index: -1; }
  #hl.hl-env .main-content #content06::before {
    background-image: url("../images/highlight/env/bg-HL-maincontent.svg");
    content: "";
    height: 735px;
    left: -400px;
    right: inherit;
    top: 50px;
    width: 687px; }
  #hl.hl-env .main-content #content06::after {
    background-image: url("../images/highlight/env/bg-HL-maincontent2.svg");
    content: "";
    height: 783px;
    right: -500px;
    top: -200px;
    width: 629px;
    z-index: -1; }
  #hl.hl-env .main-content .box-border-theme04 {
    border-color: var(--c-theme02c); }
  #hl.hl-env .main-content h2 {
    background-color: var(--c-theme02d); }
  #hl.hl-env .main-content .targetTable .row {
    width: 100%;
    margin: auto; }
    #hl.hl-env .main-content .targetTable .row:not(:first-of-type) {
      border-bottom: 1px solid var(--c-theme02d); }
      #hl.hl-env .main-content .targetTable .row:not(:first-of-type) div:first-child {
        font-weight: bold; }
    #hl.hl-env .main-content .targetTable .row:first-of-type {
      border-top: 3px solid var(--c-theme02d);
      border-bottom: 3px solid var(--c-theme02d);
      color: var(--c-theme02);
      font-weight: bold; }
  #hl.hl-env .main-content .targetTable div.col-3, #hl.hl-env .main-content .targetTable div.col-4, #hl.hl-env .main-content .targetTable div.col-4.col-sm-3, #hl.hl-env .main-content .targetTable div.col-3.col-sm-3, #hl.hl-env .main-content .targetTable div.col {
    padding: 15px 25px;
    height: 100%; }
  #hl.hl-env .main-content .targetTable div.col-4.col-sm-3, #hl.hl-env .main-content .targetTable div.col-3.col-sm-3 {
    max-width: 200px; }
  @media (max-width: 768px) {
    #hl.hl-env .main-content .targetTable div.col-3, #hl.hl-env .main-content .targetTable div.col-4, #hl.hl-env .main-content .targetTable div.col-4.col-sm-3, #hl.hl-env .main-content .targetTable div.col-3.col-sm-3, #hl.hl-env .main-content .targetTable div.col {
      font-size: 1rem;
      padding: 15px 10px; } }
  @media (max-width: 400px) {
    #hl.hl-env .main-content .targetTable div.col-3, #hl.hl-env .main-content .targetTable div.col-4, #hl.hl-env .main-content .targetTable div.col-4.col-sm-3, #hl.hl-env .main-content .targetTable div.col-3.col-sm-3, #hl.hl-env .main-content .targetTable div.col {
      padding: 15px 5px;
      word-wrap: break-word; }
    #hl.hl-env .main-content .targetTable div.col-4.col-sm-3 {
      padding: 15px 0px 15px 5px; } }
  #hl.hl-env .hl-cs {
    color: var(--c-theme02); }
    #hl.hl-env .hl-cs h2,
    #hl.hl-env .hl-cs h3 {
      color: var(--c-theme02); }
      #hl.hl-env .hl-cs h2 span,
      #hl.hl-env .hl-cs h3 span {
        border-color: var(--c-theme02); }
      #hl.hl-env .hl-cs h2::after,
      #hl.hl-env .hl-cs h3::after {
        background-color: var(--c-theme02); }
    #hl.hl-env .hl-cs .box-cover:after {
      background-image: url("../images/highlight/env/bg-HL-content.svg"); }
    #hl.hl-env .hl-cs .box-cover .cover {
      border-color: var(--c-theme02b); }
    #hl.hl-env .hl-cs .btn-more {
      background-color: var(--c-theme02);
      border: 3px var(--c-theme02) solid; }
      #hl.hl-env .hl-cs .btn-more:hover {
        color: var(--c-theme02); }
  #hl.hl-peo .box-top-intro {
    background-color: var(--c-theme03); }
    #hl.hl-peo .box-top-intro::before {
      background-image: url("../images/highlight/peo/bg-HL-intro.svg");
      height: 469px;
      left: -100px;
      top: 100px;
      width: 780px; }
    #hl.hl-peo .box-top-intro::after {
      background-image: url("../images/highlight/peo/bg-HL-intro.svg");
      height: 469px;
      left: 74%;
      right: -200px;
      top: 200px;
      width: 780px; }
    #hl.hl-peo .box-top-intro .box-top-content {
      box-shadow: 0px 0px 0px 90px var(--c-theme03b-a085);
      background-image: url("../images/highlight/peo/bg-HL-content.svg"); }
      #hl.hl-peo .box-top-intro .box-top-content h1 {
        color: var(--c-theme03); }
  #hl.hl-peo #highlight {
    background-color: var(--c-theme03); }
  #hl.hl-peo .main-content .container::before, #hl.hl-peo .main-content .container::after {
    top: -230px; }
  #hl.hl-peo .main-content .container::before {
    background-image: url("../images/highlight/peo/bg_HL-001.svg");
    height: 189px;
    left: 4rem;
    width: 231px; }
  #hl.hl-peo .main-content .container::after {
    background-image: url("../images/highlight/peo/bg_HL-002.svg");
    background-position: right bottom;
    height: 175px;
    right: 4rem;
    width: 200px; }
  #hl.hl-peo .main-content #content01 p {
    position: relative;
    z-index: 10; }
  #hl.hl-peo .main-content #content01::before {
    background-image: url("../images/highlight/peo/bg-HL-maincontent.svg");
    right: inherit;
    height: 469px;
    top: 132px;
    width: 780px;
    left: -452px; }
  #hl.hl-peo .main-content #content02::before {
    background-image: url("../images/highlight/peo/bg-HL-maincontent.svg");
    right: inherit;
    height: 469px;
    top: 41px;
    width: 780px;
    left: 93%; }
  #hl.hl-peo .main-content #content02::after {
    display: none;
    background-image: url("../images/highlight/peo/bg-HL-maincontent.svg");
    height: 469px;
    left: 80%;
    top: 80px;
    width: 780px; }
  #hl.hl-peo .main-content #content03::before {
    background-image: url("../images/highlight/peo/bg-HL-maincontent.svg");
    right: inherit;
    height: 469px;
    top: 10px;
    width: 780px;
    left: -452px; }
  #hl.hl-peo .main-content #content03::after {
    display: none;
    background-image: url("../images/highlight/peo/bg-HL-maincontent.svg");
    right: inherit;
    height: 469px;
    top: 30px;
    width: 780px;
    left: -452px; }
  #hl.hl-peo .main-content #content04::before {
    background-image: url("../images/highlight/peo/bg-HL-maincontent.svg");
    right: inherit;
    height: 469px;
    top: -150px;
    width: 780px;
    left: 93%; }
  #hl.hl-peo .main-content #content04::after {
    display: none;
    background-image: url("../images/highlight/peo/bg-HL-maincontent.svg");
    height: 511px;
    right: -355px;
    top: 116px;
    width: 780px; }
  #hl.hl-peo .main-content .box-border-theme04 {
    border-color: var(--c-theme03c); }
  #hl.hl-peo .main-content h2 {
    background-color: var(--c-theme03d); }
  #hl.hl-peo .hl-cs {
    color: var(--c-theme03); }
    #hl.hl-peo .hl-cs h2,
    #hl.hl-peo .hl-cs h3 {
      color: var(--c-theme03); }
      #hl.hl-peo .hl-cs h2 span,
      #hl.hl-peo .hl-cs h3 span {
        border-color: var(--c-theme03); }
    #hl.hl-peo .hl-cs h2::after {
      background-color: var(--c-theme03); }
    #hl.hl-peo .hl-cs .box-cover:after {
      background-image: url("../images/highlight/peo/bg-HL-content.svg"); }
    #hl.hl-peo .hl-cs .box-cover .cover {
      border-color: var(--c-theme03b); }
    #hl.hl-peo .hl-cs .btn-more {
      background-color: var(--c-theme03);
      border: 3px var(--c-theme03) solid; }
      #hl.hl-peo .hl-cs .btn-more:hover {
        color: var(--c-theme03); }
  #hl.hl-peo .ball::before {
    background-color: var(--c-theme03b); }
  #hl.hl-sc .box-top-intro {
    background-color: var(--c-theme05); }
    #hl.hl-sc .box-top-intro::before {
      background-image: url("../images/highlight/sup/bg-HL-intro.svg");
      height: 869px;
      left: 0%;
      top: -120px;
      width: 394px; }
    #hl.hl-sc .box-top-intro::after {
      background-image: url("../images/highlight/sup/bg-HL-intro2.svg");
      height: 869px;
      left: 75%;
      top: 120px;
      width: 394px; }
    #hl.hl-sc .box-top-intro .box-top-content {
      box-shadow: 0px 0px 0px 90px var(--c-theme05b-a085);
      background-image: url("../images/highlight/sup/bg-HL-content.svg"); }
      #hl.hl-sc .box-top-intro .box-top-content h1 {
        color: var(--c-theme05); }
  #hl.hl-sc #highlight {
    background-color: var(--c-theme05); }
  #hl.hl-sc .main-content .container::before, #hl.hl-sc .main-content .container::after {
    top: -250px; }
  #hl.hl-sc .main-content .container::before {
    background-image: url("../images/highlight/sup/bg_HL-001.svg");
    height: 220px;
    left: 4rem;
    width: 210px; }
  #hl.hl-sc .main-content .container::after {
    background-image: url("../images/highlight/sup/bg_HL-002.svg");
    background-position: right bottom;
    height: 193px;
    right: 4rem;
    width: 168px; }
  #hl.hl-sc .main-content #content01 p {
    position: relative;
    z-index: 10; }
  #hl.hl-sc .main-content #content01::before {
    background-image: url("../images/highlight/sup/bg-HL-maincontent.svg");
    height: 869px;
    right: inherit;
    top: -525px;
    width: 394px;
    left: -415px; }
  #hl.hl-sc .main-content #content02::after {
    background-image: url("../images/highlight/sup/bg-HL-maincontent2.svg");
    height: 869px;
    left: inherit;
    top: -240px;
    width: 394px;
    content: "";
    right: -27%;
    z-index: -1; }
  #hl.hl-sc .main-content #content03::after {
    background-image: url("../images/highlight/sup/bg-HL-maincontent.svg");
    content: "";
    height: 869px;
    right: inherit;
    top: 0px;
    width: 394px;
    left: -415px; }
  #hl.hl-sc .main-content .box-border-theme04 {
    border-color: var(--c-theme05c); }
  #hl.hl-sc .main-content h2 {
    background-color: var(--c-theme05d); }
  #hl.hl-sc .hl-cs {
    color: var(--c-theme05); }
    #hl.hl-sc .hl-cs h2,
    #hl.hl-sc .hl-cs h3 {
      color: var(--c-theme05); }
      #hl.hl-sc .hl-cs h2 span,
      #hl.hl-sc .hl-cs h3 span {
        border-color: var(--c-theme05); }
    #hl.hl-sc .hl-cs h2::after {
      background-color: var(--c-theme05); }
    #hl.hl-sc .hl-cs .box-cover:after {
      background-image: url("../images/highlight/sup/bg-HL-content.svg"); }
    #hl.hl-sc .hl-cs .box-cover .cover {
      border-color: var(--c-theme05b); }
    #hl.hl-sc .hl-cs .btn-more {
      background-color: var(--c-theme05);
      border: 3px var(--c-theme05) solid; }
      #hl.hl-sc .hl-cs .btn-more:hover {
        color: var(--c-theme05); }
  #hl.hl-sc .ball::before {
    background-color: var(--c-theme05b); }
  #hl.hl-com .box-top-intro {
    background-color: var(--c-theme06); }
    #hl.hl-com .box-top-intro::before {
      background-image: url("../images/highlight/com/bg-HL-intro.svg");
      height: 834px;
      left: -23.729%;
      top: 120px;
      width: 1135px; }
    #hl.hl-com .box-top-intro::after {
      background-image: url("../images/highlight/com/bg-HL-intro.svg");
      height: 834px;
      left: 70%;
      top: 178px;
      width: 1135px; }
    #hl.hl-com .box-top-intro .box-top-content {
      box-shadow: 0px 0px 0px 90px var(--c-theme06b-a085);
      background-image: url("../images/highlight/com/bg-HL-content.svg"); }
      #hl.hl-com .box-top-intro .box-top-content h1 {
        color: var(--c-theme06); }
  #hl.hl-com #highlight {
    background-color: var(--c-theme06); }
  #hl.hl-com .main-content .container::before, #hl.hl-com .main-content .container::after {
    top: -230px; }
  #hl.hl-com .main-content .container::before {
    background-image: url("../images/highlight/com/bg_HL-001.svg");
    height: 153px;
    left: 4rem;
    width: 219px; }
  #hl.hl-com .main-content .container::after {
    background-image: url("../images/highlight/com/bg_HL-002.svg");
    background-position: right bottom;
    height: 200px;
    right: 4rem;
    width: 123px; }
  #hl.hl-com .main-content #content01 p {
    position: relative;
    z-index: 10; }
  #hl.hl-com .main-content #content01::before {
    background-image: url("../images/highlight/com/bg-HL-maincontent.svg");
    height: 834px;
    left: -1018px;
    right: inherit;
    top: -170px;
    width: 1135px; }
  #hl.hl-com .main-content #content02::before {
    position: absolute;
    background-image: url("../images/highlight/com/bg-HL-maincontent.svg");
    height: 834px;
    right: -872px;
    top: -150px;
    width: 1135px; }
  #hl.hl-com .main-content #content02::after {
    display: none;
    background-image: url("../images/highlight/com/bg-HL-maincontent.svg");
    height: 834px;
    left: inherit;
    right: -490px;
    top: 0px;
    width: 1135px; }
  #hl.hl-com .main-content #content03::after {
    display: none;
    background-image: url("../images/highlight/com/bg-HL-maincontent.svg");
    height: 834px;
    right: -490px;
    top: 0px;
    width: 1135px; }
  #hl.hl-com .main-content #content04::before {
    background-image: url("../images/highlight/com/bg-HL-maincontent.svg");
    content: "";
    height: 834px;
    left: -1018px;
    right: inherit;
    top: -170px;
    width: 1135px;
    z-index: -1; }
  #hl.hl-com .main-content .box-border-theme04 {
    border-color: var(--c-theme06c); }
  #hl.hl-com .main-content h2 {
    background-color: var(--c-theme06d); }
  #hl.hl-com .hl-cs {
    color: var(--c-theme06); }
    #hl.hl-com .hl-cs h2,
    #hl.hl-com .hl-cs h3 {
      color: var(--c-theme06); }
      #hl.hl-com .hl-cs h2 span,
      #hl.hl-com .hl-cs h3 span {
        border-color: var(--c-theme06); }
    #hl.hl-com .hl-cs h2::after {
      background-color: var(--c-theme06); }
    #hl.hl-com .hl-cs .box-cover:after {
      background-image: url("../images/highlight/com/bg-HL-content.svg"); }
    #hl.hl-com .hl-cs .box-cover .cover {
      border-color: var(--c-theme06b); }
    #hl.hl-com .hl-cs .btn-more {
      background-color: var(--c-theme06);
      border: 3px var(--c-theme06) solid; }
      #hl.hl-com .hl-cs .btn-more:hover {
        color: var(--c-theme06); }
  #hl.hl-com .ball::before {
    background-color: var(--c-theme06b); }

#hl .nav-icon,
#cs .nav-icon {
  border-radius: 50px; }
#hl .nav-item-01 .nav-icon,
#cs .nav-item-01 .nav-icon {
  border: 3px var(--c-theme01) solid; }
#hl .nav-item-02 .nav-icon,
#cs .nav-item-02 .nav-icon {
  border: 3px var(--c-theme02) solid; }
#hl .nav-item-03 .nav-icon,
#cs .nav-item-03 .nav-icon {
  border: 3px var(--c-theme03) solid; }
#hl .nav-item-04 .nav-icon,
#cs .nav-item-04 .nav-icon {
  border: 3px var(--c-theme04) solid; }
#hl .nav-item-05 .nav-icon,
#cs .nav-item-05 .nav-icon {
  border: 3px var(--c-theme05) solid; }
#hl .nav-item-06 .nav-icon,
#cs .nav-item-06 .nav-icon {
  border: 3px var(--c-theme06) solid; }

@media screen and (max-width: 991.98px) {
  #hl {
    /* theme04 */
    /* theme02 */
    /* theme03 */
    /* theme05 */
    /* theme06 */ }
    #hl .box-top-intro .box-top-content .row {
      margin: auto;
      max-width: 720px;
      width: 100vw; }
      #hl .box-top-intro .box-top-content .row div {
        text-align: center; }
      #hl .box-top-intro .box-top-content .row .box-top-content-img {
        animation: op0to1 0.5s linear 1.5s forwards;
        max-width: 300px;
        position: inherit;
        transform: none; }
    #hl .main-content h2 {
      left: 0rem; }
    #hl .main-content .box-border {
      padding: 2rem 2rem 3rem 2rem; }
    #hl .main-content .btn-next {
      padding-bottom: 6rem; }
    #hl.hl-cus .main-content .container {
      position: relative; }
      #hl.hl-cus .main-content .container::before {
        left: 15px;
        max-height: 150px;
        transform: none; }
      #hl.hl-cus .main-content .container::after {
        right: 15px;
        top: -240px;
        max-height: 150px;
        transform: none; }
    #hl.hl-cus .main-content > div > div.box-border {
      background-color: var(--c-white); }
    #hl.hl-env .main-content .container::before {
      max-height: 100px;
      top: -180px; }
    #hl.hl-env .main-content .container::after {
      max-height: 70px;
      top: -170px; }
    #hl.hl-peo .main-content .container::before {
      max-height: 100px;
      top: -180px; }
    #hl.hl-peo .main-content .container::after {
      max-height: 100px;
      top: -180px; }
    #hl.hl-sc .main-content .container::before {
      max-height: 120px;
      top: -200px; }
    #hl.hl-sc .main-content .container::after {
      max-height: 120px;
      top: -200px; }
    #hl.hl-com .main-content .container::before {
      max-height: 86px;
      top: -170px; }
    #hl.hl-com .main-content .container::after {
      max-height: 130px;
      top: -200px; } }
@media screen and (max-width: 575.98px) {
  #hl .main-content .box-border {
    padding: 2rem 4% 1rem 4%; }

  html[lang="zh-hk"] #hl .main-content .box-border br,
  html[lang="zh-cn"] #hl .main-content .box-border br {
    display: none; } }
@media screen and (max-width: 413.98px) {
  .hidden-413 {
    display: none; }

  #hl .main-content h2 {
    border: 5px var(--c-white) solid;
    border-radius: 30px;
    padding: 0.5rem; }
  #hl .hl-cs h2 span {
    display: block;
    margin: auto;
    padding: 0.5rem;
    width: 90%; }
  #hl .hl-cs .box-cover::after {
    height: 280%; }
  #hl .hl-cs .box-cover .cover {
    height: 300px;
    width: 300px; } }
/* case study */
#cs {
  /* theme04 */
  /* theme02 */
  /* theme03 */
  /* theme05 */
  /* theme06 */ }
  #cs main {
    position: relative; }
  #cs .title {
    align-content: center;
    bottom: 0px;
    border-radius: 150px;
    color: #fff !important;
    display: block;
    height: 150px;
    justify-content: center;
    left: 15%;
    position: absolute;
    text-align: center;
    transform: translateY(-25%);
    /*background-color: #8663b5;*/
    width: 150px;
    z-index: 1; }
  #cs .box-top-intro {
    background-repeat: no-repeat !important;
    background-size: 1295px;
    /*overflow: hidden;
        padding-top: 78.125%;*/
    height: 780px;
    margin-bottom: -280px;
    position: relative;
    width: 100%;
    z-index: 0; }
    #cs .box-top-intro::before, #cs .box-top-intro::after {
      animation: op0to1 1s linear forwards;
      background-repeat: no-repeat;
      opacity: 0; }
    #cs .box-top-intro::after {
      animation: op0to1 1s linear 0.5s forwards; }
  #cs .box-top-img-cover {
    left: 50%;
    max-width: 930px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 100%;
    z-index: 100;
    transform: translateX(-50%); }
    #cs .box-top-img-cover .box-cover {
      position: relative; }
      #cs .box-top-img-cover .box-cover:after {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 360%;
        left: 50%;
        max-height: 1280px;
        max-width: 1280px;
        position: absolute;
        top: 50%;
        width: 100%;
        z-index: -1;
        transform: translateX(-50%) translateY(-50%); }
      #cs .box-top-img-cover .box-cover h2 {
        font-size: var(--pt40); }
      #cs .box-top-img-cover .box-cover .cover {
        border: 14px var(--c-theme04b) solid;
        border-radius: 500px;
        height: 575px;
        margin: 0px auto 20px auto;
        overflow: hidden;
        position: relative;
        width: 575px;
        transition: 0.2s all linear; }
        #cs .box-top-img-cover .box-cover .cover img {
          height: 100%;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          transition: 0.2s all linear; }
  #cs .btn-more {
    background-color: var(--c-theme01);
    border: 3px var(--c-theme01) solid;
    color: var(--c-white); }
    #cs .btn-more:hover {
      background-color: var(--c-white) !important;
      color: var(--c-theme01); }
  #cs .main-content {
    position: relative; }
    #cs .main-content > div {
      background-color: transparent;
      background-size: contain;
      background-position: top center;
      background-repeat: no-repeat;
      left: 50%;
      margin: 0 !important;
      min-height: 1700px;
      min-width: 1700px;
      padding-top: 300px;
      position: relative;
      z-index: 10;
      transform: translateX(-50%); }
    #cs .main-content .content {
      padding-left: 20%;
      padding-right: 20%; }
      #cs .main-content .content > div {
        margin-bottom: 80px; }
        #cs .main-content .content > div h2 {
          font-weight: 700; }
        #cs .main-content .content > div ol,
        #cs .main-content .content > div ul {
          padding-left: 1.25rem; }
          #cs .main-content .content > div ol li,
          #cs .main-content .content > div ul li {
            margin-bottom: 1rem; }
        #cs .main-content .content > div img {
          border-radius: 20px;
          height: 100%;
          object-fit: cover;
          width: 100%; }
          #cs .main-content .content > div img.obj-right {
            object-position: right; }
          #cs .main-content .content > div img.obj-left {
            object-position: left; }
    #cs .main-content::before {
      content: "";
      left: 50%;
      position: absolute;
      height: 2158px;
      width: 2158px;
      transform: translateX(-50%); }
    #cs .main-content::after {
      bottom: 0px;
      content: "";
      height: 55%;
      position: absolute;
      width: 100vw;
      z-index: 0; }
  #cs .pin-spacer {
    margin-bottom: 0px !important;
    padding: 0px !important; }
  #cs footer {
    background-color: var(--c-theme01);
    color: var(--c-white);
    margin-top: -1px;
    padding: 1rem; }
  #cs.cs-cus .box-top-intro {
    background-image: url("../images/casestudy/cus/bg-heading.png"), url("../images/highlight/cus/bg-HL-maincontent.svg"), url("../images/highlight/cus/bg-HL-maincontent.svg");
    background-position: center -200px, -41.729% 10.188%, 135% 7%;
    background-size: auto auto, 750px 511px, 750px 511px;
    /*&::before {
              background-image: url("../images/highlight/cus/bg-HL-maincontent.svg");
              content: "";
              display: block;
              height: 511px;
              left: -21.729%;
            position: absolute;
            top: 10.188%;
              width: 750px;
              z-index: 0;
          }
          
          &::after {
              background-image: url("../images/highlight/cus/bg-HL-maincontent.svg");
              content: "";
              display: block;
              height: 511px;
                right: -19%;
                position: absolute;
            top: 5%;
            width: 750px;
              z-index: 0;
          }*/ }
  #cs.cs-cus .box-top-img-cover .box-cover h1 {
    color: var(--c-theme04); }
  #cs.cs-cus .box-top-img-cover .box-cover .cover {
    border-color: var(--c-theme04b); }
  #cs.cs-cus .main-content::before {
    background-image: url("../images/casestudy/cus/bg-con.png"); }
  #cs.cs-cus .main-content::after {
    background-color: var(--c-theme04); }
  #cs.cs-cus .main-content > div {
    background-image: url("../images/casestudy/cus/bg-content.svg"); }
  #cs.cs-cus footer {
    background-color: var(--c-theme04); }
  #cs.cs-env .box-top-intro {
    background-image: url("../images/casestudy/env/bg-heading.png"), url("../images/highlight/env/bg-HL-maincontent.svg"), url("../images/highlight/env/bg-HL-maincontent.svg");
    background-position: center -200px, -41.729% 10.188%, 135% 7%;
    background-size: auto auto, 750px 511px, 750px 511px; }
  #cs.cs-env .box-top-img-cover .box-cover h1 {
    color: var(--c-theme02) !important; }
  #cs.cs-env .box-top-img-cover .box-cover .cover {
    border-color: var(--c-theme02b) !important; }
  #cs.cs-env .main-content::before {
    background-image: url("../images/casestudy/env/bg-con.png"); }
  #cs.cs-env .main-content::after {
    background-color: var(--c-theme02); }
  #cs.cs-env .main-content > div {
    background-image: url("../images/casestudy/env/bg-content.svg"); }
  #cs.cs-env footer {
    background-color: var(--c-theme02); }
  #cs.cs-peo .box-top-intro {
    background-image: url("../images/casestudy/peo/bg-heading.png"), url("../images/highlight/peo/bg-HL-maincontent.svg"), url("../images/highlight/peo/bg-HL-maincontent.svg");
    background-position: center -200px, -41.729% 10.188%, 135% 7%;
    background-size: auto auto, 750px 511px, 750px 511px; }
  #cs.cs-peo .box-top-img-cover .box-cover h1 {
    color: var(--c-theme03) !important; }
  #cs.cs-peo .box-top-img-cover .box-cover .cover {
    border-color: var(--c-theme03b) !important; }
  #cs.cs-peo .main-content > div {
    padding-top: 150px !important; }
  #cs.cs-peo .main-content::before {
    background-image: url("../images/casestudy/peo/bg-con.png"); }
  #cs.cs-peo .main-content::after {
    background-color: var(--c-theme03); }
  #cs.cs-peo .main-content > div {
    background-image: url("../images/casestudy/peo/bg-content.svg"); }
  #cs.cs-peo footer {
    background-color: var(--c-theme03); }
  #cs.cs-sc .box-top-intro {
    background-image: url("../images/casestudy/sc/bg-heading.png"), url("../images/highlight/sc/bg-HL-maincontent.svg"), url("../images/highlight/sc/bg-HL-maincontent.svg");
    background-position: center -200px, -41.729% 10.188%, 135% 7%;
    background-size: auto auto, 750px 511px, 750px 511px; }
  #cs.cs-sc .box-top-img-cover .box-cover h1 {
    color: var(--c-theme05) !important; }
  #cs.cs-sc .box-top-img-cover .box-cover .cover {
    border-color: var(--c-theme05b) !important; }
  #cs.cs-sc .main-content::before {
    background-image: url("../images/casestudy/sc/bg-con.png"); }
  #cs.cs-sc .main-content::after {
    background-color: var(--c-theme05); }
  #cs.cs-sc .main-content > div {
    background-image: url("../images/casestudy/sc/bg-content.svg"); }
  #cs.cs-sc footer {
    background-color: var(--c-theme05); }
  #cs.cs-com .box-top-intro {
    background-image: url("../images/casestudy/com/bg-heading.png"), url("../images/highlight/com/bg-HL-maincontent.svg"), url("../images/highlight/com/bg-HL-maincontent.svg");
    background-position: center -200px, -41.729% 10.188%, 135% 7%;
    background-size: auto auto, 750px 511px, 750px 511px; }
  #cs.cs-com .box-top-img-cover .box-cover h1 {
    color: var(--c-theme06) !important; }
  #cs.cs-com .box-top-img-cover .box-cover .cover {
    border-color: var(--c-theme06b) !important; }
  #cs.cs-com .main-content::before {
    background-image: url("../images/casestudy/com/bg-con.png"); }
  #cs.cs-com .main-content::after {
    background-color: var(--c-theme06); }
  #cs.cs-com .main-content > div {
    background-image: url("../images/casestudy/com/bg-content.svg"); }
  #cs.cs-com footer {
    background-color: var(--c-theme06); }

html[lang="zh-hk"] #cs .box-cover h2,
html[lang="zh-cn"] #cs .box-cover h2 {
  min-height: 115px; }

@media screen and (max-width: 991.98px) {
  #cs .box-top-img-cover .box-cover p {
    max-width: 720px;
    margin: auto;
    width: 100%; }
  #cs .main-content {
    position: relative; }
    #cs .main-content .content {
      padding-right: calc(var(--bs-gutter-x) * 0.5);
      padding-left: calc(var(--bs-gutter-x) * 0.5);
      max-width: 720px;
      margin: auto;
      width: 100%; }
      #cs .main-content .content > div {
        margin-bottom: 80px; }
        #cs .main-content .content > div h2 {
          font-weight: 700; }
        #cs .main-content .content > div ol,
        #cs .main-content .content > div ul {
          padding-left: 1.25rem; }
          #cs .main-content .content > div ol li,
          #cs .main-content .content > div ul li {
            margin-bottom: 1rem; }
        #cs .main-content .content > div img {
          border-radius: 20px;
          height: 100%;
          width: 100%; } }
@media screen and (max-width: 767.98px) {
  #cs .box-top-img-cover .box-cover p {
    max-width: 540px; }
  #cs .title {
    left: 2rem; }
  #cs .main-content .content {
    max-width: 540px; } }
@media screen and (max-width: 653.98px) {
  .btn-pngrp .prevBtn svg path, .btn-pngrp .nextBtn svg path {
    stroke: var(--c-white); } }
@media screen and (max-width: 575.98px) {
  #cs .box-top-intro {
    height: 700px; }
  #cs .box-top-img-cover .box-cover {
    padding: 0rem 0.25rem;
    padding-top: 50px; }
    #cs .box-top-img-cover .box-cover .cover {
      aspect-ratio: 1/1;
      height: auto;
      width: 90%; }
  #cs .title {
    height: 120px;
    left: 1rem;
    top: inherit;
    width: 120px; }
  #cs .main-content > div {
    padding-top: 55%; }
  #cs .main-content .content {
    padding: 0.5rem;
    width: 100vw; }
  #cs.cs-cus {
    background-size: auto 110%, 750px 511px, 750px 511px; } }
@media screen and (max-width: 414.98px) {
  #cs .box-top-intro {
    margin-bottom: -300px; }
  #cs .box-top-img-cover .box-cover .cover {
    aspect-ratio: 1/1;
    height: auto;
    width: 90%; }
  #cs .title {
    height: 100px;
    left: 1rem;
    width: 100px; }
  #cs .main-content > div {
    padding-top: 200px; }
  #cs .main-content::before {
    background-position: center top;
    height: 700px;
    width: 700px; }
  #cs.cs-peo .main-content > div {
    padding-top: 50px !important; }

  html[lang="zh-hk"] #cs .box-top-intro,
  html[lang="zh-cn"] #cs .box-top-intro {
    height: 630px; }
  html[lang="zh-hk"] #cs .box-cover h2,
  html[lang="zh-cn"] #cs .box-cover h2 {
    min-height: inherit; }
  html[lang="zh-hk"] #cs .main-content > div,
  html[lang="zh-cn"] #cs .main-content > div {
    padding-top: 250px; }
  html[lang="zh-hk"] #cs.cs-peo .box-cover h2,
  html[lang="zh-cn"] #cs.cs-peo .box-cover h2 {
    min-height: 73px; }
  html[lang="zh-hk"] #cs.cs-peo .main-content > div,
  html[lang="zh-cn"] #cs.cs-peo .main-content > div {
    padding-top: 120px !important; } }
@media screen and (max-width: 320.98px) {
  #cs .box-top-img-cover .box-cover .cover {
    aspect-ratio: 1/1;
    height: auto;
    width: 100%; } }
.show-767, .show-575 {
  display: none; }

/* index */
@media screen and (max-width: 1024.98px) {
  .br-1024 {
    display: none; }

  #landingMag .rootball .box-msg {
    width: 80vw;
    padding: 0rem 2rem; }
    #landingMag .rootball .box-msg .box-msg-bg {
      padding: 2rem; }
      #landingMag .rootball .box-msg .box-msg-bg::before {
        left: -12%;
        padding-top: 10.941%;
        top: 50%;
        width: 12%; }
      #landingMag .rootball .box-msg .box-msg-bg::after {
        right: 11%;
        width: 20%; }
      #landingMag .rootball .box-msg .box-msg-bg h2 {
        position: relative; }
        #landingMag .rootball .box-msg .box-msg-bg h2::after {
          max-width: 70px;
          right: -65px;
          top: -74px;
          width: 50%; } }
@media screen and (max-width: 767.98px) {
  .hidden-767, .br-767 {
    display: none; }

  .show-767 {
    display: inherit; }

  #landingIntro .shortcuts-container a {
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.3;
    transform: none !important; }
    #landingIntro .shortcuts-container a:hover {
      opacity: 1; }
  #landingIntro .introicongroup .icon-row {
    transform: scale(0.5); }

  #landingMag .rootball .box-msg {
    width: 90vw; }

  html[lang="zh-hk"] #landingMOV .bg-report,
  html[lang="zh-cn"] #landingMOV .bg-report {
    height: 100px;
    width: 280px; } }
@media screen and (max-width: 640.98px) {
  .br-1024 {
    display: none; }

  #landingCS .btn-next {
    top: 94%; }

  #landingMag .rootball .box-msg {
    border-radius: 30px;
    width: 80vw;
    padding: 0rem 1rem; }
    #landingMag .rootball .box-msg .box-msg-bg {
      border-radius: 35px;
      padding: 2rem 1rem; }
      #landingMag .rootball .box-msg .box-msg-bg::before {
        left: -20%;
        padding-top: 21.941%;
        width: 23%; }
      #landingMag .rootball .box-msg .box-msg-bg .box-content-scroll {
        height: 200px;
        overflow-y: auto; } }
@media screen and (max-width: 575.98px) {
  .br-575 {
    display: none; }

  .show-575 {
    display: block; }

  .one-line {
    padding-top: 0px !important; }

  #landingMOV .bg-report {
    left: 50%;
    top: 80px;
    transform: translateX(-50%); }

  #quick-nav {
    position: fixed;
    top: 30px;
    right: inherit;
    width: 100vw; }
    #quick-nav .nav-container {
      flex-direction: row;
      justify-content: space-between;
      border-radius: 0px 0px 40px 40px;
      padding: 0px 60px;
      right: inherit; }
      #quick-nav .nav-container .nav-item {
        transform: translateY(20px); }
        #quick-nav .nav-container .nav-item .nav-text {
          left: 50%;
          right: inherit;
          transform: translateX(-50%) translateY(0px); }
        #quick-nav .nav-container .nav-item:hover .nav-text {
          transform: translateX(-50%) translateY(40px); }

  #landingIntro #strategy.box-border {
    border-radius: 60px;
    padding: 2rem 1rem !important; }

  #landingMag p {
    font-size: 0.75rem; }
    #landingMag p:last-child {
      margin-bottom: 0px; }
  #landingMag div.my-4 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important; }

  #landingCS .box-round {
    display: inline-block;
    padding: 0.5rem 1rem; } }
@media screen and (max-width: 414.98px) {
  .br-414 {
    display: none; }

  #quick-nav {
    position: fixed;
    top: 30px;
    right: inherit;
    width: 100vw; }
    #quick-nav .nav-container {
      flex-direction: row;
      justify-content: space-between;
      border-radius: 0px 0px 40px 40px;
      padding: 0px 20px;
      right: inherit; }
      #quick-nav .nav-container .nav-item {
        transform: translateY(20px); }
        #quick-nav .nav-container .nav-item.nav-item-05 .nav-text, #quick-nav .nav-container .nav-item.nav-item-06 .nav-text {
          left: inherit;
          right: 0px; }
        #quick-nav .nav-container .nav-item .nav-icon {
          height: 40px;
          width: 40px; }
        #quick-nav .nav-container .nav-item .nav-text {
          left: 0%;
          right: inherit;
          transform: translateX(0%) translateY(0px); }
          #quick-nav .nav-container .nav-item .nav-text img {
            height: 20px; }
        #quick-nav .nav-container .nav-item:hover .nav-text {
          transform: translateX(0%) translateY(35px); } }
@media screen and (min-width: 359.98px) and (max-width: 430.98px) and (max-height: 932.98px) {
  #landingMOV {
    min-height: calc(100vh - 82px);
    overflow: hidden; }
    #landingMOV .bg-right {
      background-size: contain;
      height: 125%; }
    #landingMOV .bg-center0 {
      bottom: 80px;
      height: 462.986px;
      left: 54%;
      width: 131.969433%; }
    #landingMOV .bg-ball1 {
      bottom: 73%; }
    #landingMOV .bg-ball2 {
      bottom: 75%; }
    #landingMOV .bg-ball6 {
      bottom: 110%;
      height: 28px;
      right: 30%; }
    #landingMOV .bg-people4 {
      bottom: 29%;
      height: 79.48051948px;
      right: -4%;
      width: 160px; }
    #landingMOV .bg-people5 {
      bottom: 85.313%;
      height: 117.1942446px;
      right: 17.194%;
      width: 90px; }
    #landingMOV .bg-people6 {
      bottom: 87%;
      height: 83.73786408px;
      right: 220px;
      width: 150px; } }
@media screen and (width: 393px) and (height: 852px) {
  #landingMOV {
    min-height: calc(100vh - 82px);
    overflow: hidden; }
    #landingMOV .bg-people6 {
      bottom: 87%;
      height: 66.99029126px;
      right: 220px;
      width: 120px; } }
@media screen and (min-width: 319.98px) and (max-width: 430.98px) and (max-height: 812.98px) {
  #landingMOV {
    min-height: calc(100vh - 82px); }
    #landingMOV .bg-center0 {
      bottom: inherit;
      height: 462.986px;
      left: 63%;
      top: 38%;
      width: 125%; }
    #landingMOV .bg-left {
      left: 29%; }
    #landingMOV .bg-right {
      background-size: contain;
      height: 148%; }
    #landingMOV .bg-ball1 {
      bottom: 64.789%; }
    #landingMOV .bg-ball2 {
      bottom: 67%; }
    #landingMOV .bg-ball3 {
      bottom: 87.5%;
      height: 55px;
      right: 65%;
      width: 55px; }
    #landingMOV .bg-people4 {
      bottom: 29%;
      height: 74.51298701px;
      right: -5%;
      width: 150px; }
    #landingMOV .bg-people5 {
      bottom: 88.313%;
      height: 104.1726619px;
      right: 20.194%;
      width: 80px; }
    #landingMOV .bg-people6 {
      bottom: 90%;
      height: 61.40776699px;
      left: 39%;
      right: inherit;
      width: 110px; } }
/*@media screen and (min-width: 319.98px) and (max-width: 360.98px) and (max-height: 812.98px) {
    #landingMOV {
        min-height: calc(100vh - 82px);

        .bg-ball3 {
            bottom: 87.5%;
            height: 55px;
            right: 65%;
            width: 55px;
        }
        
        .bg-people4 {
            bottom: 29%;
            height: 74.51298701px;
            right: -5%;
            width: 150px;
        }
        .bg-people5 {
            bottom: 88.313%;
            height: 91.15107914px;
            right: 20.194%;
            width: 70px;
        }
        .bg-people6 {
            bottom: 90%;
            height: 61.40776699px;
            left: 38%;
            right: inherit;
            width: 110px;
        }
    }
}*/
/* iPhone 17 / 17 Pro */
@media (min-width: 401px) and (max-width: 402px) and (orientation: portrait) {
  body {
    padding-top: env(safe-area-inset-top);
    /* 避開 Dynamic Island ~62px */
    padding-bottom: env(safe-area-inset-bottom);
    /* Home Indicator ~34px */ }

  #landingMOV .bg-center0 {
    left: 68%; }
  #landingMOV .bg-people5 {
    bottom: 84.313%;
    height: 117.1942446px;
    right: 23.194%;
    width: 80px; }
  #landingMOV .bg-people6 {
    left: 38%;
    width: 130px; } }
@media screen and (min-width: 318.98px) and (max-width: 360.98px) and (max-height: 725.98px) {
  #landingMOV .bg-center0 {
    bottom: inherit;
    height: 296.0866426px;
    left: 69%;
    top: 38%;
    width: 110%; }
  #landingMOV .bg-ball2 {
    height: 30px;
    width: 30px; }
  #landingMOV .bg-ball3 {
    bottom: 89.5%;
    height: 35px;
    right: 64%;
    width: 35px; }
  #landingMOV .bg-ball4 {
    height: 24px;
    width: 24px; }
  #landingMOV .bg-ball6 {
    bottom: 115%;
    height: 20px;
    right: 36%;
    width: 20px; }
  #landingMOV .bg-people4 {
    bottom: 27%; }
  #landingMOV .bg-people6 {
    bottom: 86%;
    height: 61.40776699px;
    left: initial;
    right: 35%;
    width: 110px; } }
@media screen and (min-width: 318.98px) and (max-width: 360.98px) and (max-height: 568.98px) {
  #landingMOV {
    min-height: 517px !important; }
    #landingMOV .bg-ball1 {
      bottom: 61.789%; }
    #landingMOV .bg-ball2 {
      bottom: 64%;
      left: 14%; } }
/*@media screen and (max-height: 568.98px) {
    #landingMOV {
        min-height: 517px !important;
    }
}*/
/* share ===========================*/
.c-white {
  color: var(--c-white); }

.c-theme01 {
  color: var(--c-theme01); }

.c-theme02 {
  color: var(--c-theme02); }

.c-theme03 {
  color: var(--c-theme03); }

.c-theme04 {
  color: var(--c-theme04); }

.c-theme05 {
  color: var(--c-theme05); }

.c-theme06 {
  color: var(--c-theme06); }

.f-pt22 {
  font-size: var(--pt22); }

.f-pt36 {
  font-size: var(--pt36); }

.f-pt40 {
  font-size: var(--pt40); }

.f-pt45 {
  font-size: var(--pt45); }

.f-pt50 {
  font-size: var(--pt50);
  line-height: var(--pt45); }

.f-pt54 {
  font-size: var(--pt54); }

.f-pt55 {
  font-size: var(--pt55); }

.f-pt60 {
  font-size: var(--pt60); }

.f-pt65 {
  font-size: var(--pt65); }

.f-pt70 {
  font-size: var(--pt70); }

@media screen and (min-width: 575.98px) {
  .nowarp-575 {
    white-space: nowrap; } }
.box-border {
  border: 8px var(--c-theme01-a060) solid; }

.box-border-theme01,
.box-border-theme02,
.box-border-theme03,
.box-border-theme04,
.box-border-theme05,
.box-border-theme06 {
  border-color: var(--c-theme01-a060); }

.box-border-theme02 {
  border-color: var(--c-theme02-a060); }

.box-border-theme03 {
  border-color: var(--c-theme03-a060); }

.box-border-theme04 {
  border-color: var(--c-theme04-a060); }

.box-border-theme05 {
  border-color: var(--c-theme05-a060); }

.box-border-theme06 {
  border-color: var(--c-theme06-a060); }

.box-round {
  border-radius: 400px; }

.btn-more {
  border: 3px var(--c-btn-more) solid;
  border-radius: 100px;
  color: var(--c-white);
  font-size: inherit;
  padding: 0.15rem 1.5rem;
  white-space: nowrap;
  transition: 0.2s all linear; }
  .btn-more:hover {
    background-color: var(--c-white);
    border: 3px var(--c-btn-more) solid;
    color: var(--c-theme01); }

.btn-more-theme1 {
  background-color: var(--c-btn-more); }

.btn-more-theme2 {
  background-color: var(--c-btn-more2); }

.btn-next {
  display: block;
  height: 30px;
  margin: auto;
  position: relative;
  width: 48px;
  z-index: 100; }
  .btn-next::before, .btn-next::after {
    background-image: url("../images/btn-next.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 30px;
    content: "";
    display: block;
    height: 30px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 48px;
    transition: 0.5s all linear; }
  .btn-next::after {
    background-image: url("../images/btn-next-hover.svg");
    opacity: 0; }
  .btn-next:hover::before {
    opacity: 0; }
  .btn-next:hover::after {
    opacity: 1; }

.max-w1700 {
  max-width: 1700px; }

.max-w870 {
  max-width: 870px; }

.max-w440 {
  max-width: 440px; }

.show-990 {
  display: none; }

.nolst li {
  list-style-type: none; }

.nomp {
  margin: 0px;
  padding: 0px; }

.box-notes ol, .notes ol {
  list-style-type: none;
  /* Remove default styling */
  counter-reset: item;
  /* Initialize the counter */ }
  .box-notes ol li, .notes ol li {
    font-size: var(--pt18); }
    .box-notes ol li:before, .notes ol li:before {
      content: counter(item) " ";
      /* Display the counter and a space */
      counter-increment: item;
      /* Increment the counter for each list item */
      margin-left: -24px;
      margin-right: 10px; }

@keyframes op0to1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes toptodown {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%); } }
@keyframes showimg {
  0% {
    opacity: 0;
    transform: translateX(-30%) translateY(30%); }
  100% {
    opacity: 1;
    transform: translateX(-10%) translateY(-10%); } }
@keyframes LtoR1-landingbanner {
  0% {
    opacity: 0;
    transform: translateX(-80%); }
  100% {
    opacity: 1;
    transform: translateX(-70%); } }
@keyframes LtoR1-landingbanner767 {
  0% {
    opacity: 0;
    left: -5%; }
  100% {
    opacity: 1;
    left: 0%; } }
@keyframes LtoR-landingbanner {
  0% {
    opacity: 0;
    right: 24.271093%; }
  100% {
    opacity: 1;
    right: 19.271093%; } }
@keyframes LtoR-landingbanner767 {
  0% {
    opacity: 0;
    left: -10%; }
  100% {
    opacity: 1;
    left: -7%; } }
@keyframes LtoR-landingbanner575 {
  0% {
    opacity: 0;
    right: 25%; }
  100% {
    opacity: 1;
    right: 22%; } }
@keyframes scaleloop {
  0% {
    transform: scale(1); }
  70% {
    transform: scale(1.3); }
  100% {
    transform: scale(1.3); } }
@keyframes reportMOV {
  0% {
    opacity: 0;
    top: 0px; }
  100% {
    opacity: 1;
    top: 48px; } }
@media (max-width: 991.98px) {
  .showNav {
    display: none; }

  .show-990 {
    display: block; } }
/* overwrite-BT */
.offcanvas {
  color: var(--c-white);
  z-index: 9999; }
  .offcanvas.offcanvas-end {
    border: none;
    height: calc(100vh - 49px);
    top: 49px; }
  .offcanvas .offcanvas-body a:hover, .offcanvas .offcanvas-body a:target {
    color: var(--c-nav-hover); }

.navbar-toggler {
  border: 1px rgba(0, 0, 0, 0.15) solid;
  border-radius: 0.375rem;
  color: rgba(0, 0, 0, 0.65);
  font-size: 1.25rem;
  line-height: 1;
  margin: 0.25rem 0rem;
  padding: 0.25rem 0.75rem; }

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.overlap .ball-control {
    /*position: absolute;
    width: 100%;

    top: 50%;
    transform: translateY(-50%);
    height: 60.9375%;
    max-height: 1170px;*/ }
  .overlap .ball-control .srcoll-right {
    width: 100%;
    height: 100%; }
  .overlap .ball-control .control {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    /*align-items: center;*/ }
.overlap .box-swiper {
  height: 100%;
  width: 100%;
  /*max-height: 800px;*/
  flex: 0 0 100%; }
  .overlap .box-swiper.ball1 {
    background-color: var(--c-theme02); }
  .overlap .box-swiper.ball2 {
    background-color: var(--c-theme03); }
  .overlap .box-swiper.ball3 {
    background-color: var(--c-theme04); }
  .overlap .box-swiper.ball4 {
    background-color: var(--c-theme05); }
  .overlap .box-swiper.ball5 {
    background-color: var(--c-theme06); }

.progressdot {
  width: 100%;
  position: absolute;
  bottom: 27%;
  z-index: 55; }
  .progressdot .dot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; }
  .progressdot .number {
    width: 27px;
    height: 27px;
    margin: 0px 5px;
    border-radius: 100%; }
    .progressdot .number a {
      opacity: 0.2;
      cursor: pointer;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 100%; }
    .progressdot .number.bal1 a {
      background-color: var(--c-theme02);
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 100%; }
    .progressdot .number.bal2 a {
      background-color: var(--c-theme03); }
    .progressdot .number.bal3 a {
      background-color: var(--c-theme04); }
    .progressdot .number.bal4 a {
      background-color: var(--c-theme05); }
    .progressdot .number.bal5 a {
      background-color: var(--c-theme06); }
    .progressdot .number a.active {
      opacity: 1; }

@media screen and (max-height: 900.98px) {
  .progressdot {
    bottom: 28%; } }
#cus-land {
  position: relative; }

.sample3 {
  height: 50vh; }

.sampl1 {
  height: 80vh; }

#smaple2 {
  width: 100%;
  position: relative;
  padding: 100px 0px; }
  #smaple2 .control {
    display: flex;
    flex-direction: row;
    width: 100%; }
  #smaple2 .swiper-slide.active .ball .inner {
    flex: 0 0 400px;
    width: 400px;
    height: 400px;
    background-color: var(--c-theme03); }
  #smaple2 .ball {
    display: flex;
    justify-content: center; }
    #smaple2 .ball .inner {
      background-color: var(--c-theme02, #ccc);
      border-radius: 100%;
      aspect-ratio: 1 / 1;
      width: 250px; }

#case-land {
  height: 80vh; }

#stop-place {
  padding: 80px 0px; }
  #stop-place p {
    margin: 30px 0; }

#smaple3 {
  margin: 80px 0px;
  height: 100%;
  min-height: 1700px;
  max-height: calc(100vh + 100px);
  overflow: hidden;
  /*background-color: var(--c-theme04);*/ }

body#cs {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0; }
  body#cs #preloader {
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
    z-index: 1000; }
    body#cs #preloader #preloader-inner {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 120px; }
  body#cs.cs-cus #preloader-inner svg circle {
    stroke: var(--c-theme04);
    fill: var(--c-theme04); }
  body#cs.cs-com #preloader-inner svg circle {
    stroke: var(--c-theme06);
    fill: var(--c-theme06); }
  body#cs.cs-env #preloader-inner svg circle {
    stroke: var(--c-theme02);
    fill: var(--c-theme02); }
  body#cs.cs-peo #preloader-inner svg circle {
    stroke: var(--c-theme03);
    fill: var(--c-theme03); }
  body#cs.cs-sc #preloader-inner svg circle {
    stroke: var(--c-theme05);
    fill: var(--c-theme05); }
  body#cs.loaded {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    position: relative; }
    body#cs.loaded #preloader {
      display: none; }