.mobile-720-version{display: none !important;}
.alert-phone {background: url('../images/resize.png') center center no-repeat;background-size: auto;background-size: contain;}
.mobile-image{display: none;}
.desktop-image{display: block;}

/* preloader */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #02066b; z-index: 9999999; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.preloader-spinner { width: 50px; height: 50px; border: 4px solid #fff; border-top: 4px solid #02066b; border-radius: 50%; animation: spin 1s linear infinite; }
.preloader-progress { margin-top: 20px; width: 200px; height: 4px; background: #333; border-radius: 2px; overflow: hidden; }
.preloader-progress-bar { height: 100%; background: #02066b; width: 0%; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Scroll Progress Bar */
#scroll-progress-container {  position: fixed;  bottom: 0;  left: 0;  width: 100%;  height: 6px;  background: #FFF;  z-index: 9999;}
#scroll-progress-bar {  height: 6px;  background: #02066b;  width: 0%}


body.loading { overflow: hidden; }
html,body { overflow: auto; -webkit-overflow-scrolling: auto; background: #02066b;}
html,body { width: 100vw;overflow-x: hidden; }
/* Gobal */

main{background: #070ea7;}


/* footer */
.footer-credit{width: 100%;background: #FFF;min-height: 0;}
.footer-credit .inner{padding: 120px 0;}
.footer-credit .inner p,.footer-credit .inner a{color: #333;}


/* KV  */
#kv-wrap{width: 100%;height: 760px;position: relative;}
.kv-bg{position: absolute;top:0px;left:50%;width:100vw;transform: translate(-50%,0);max-width: 1280px;}
.kv-bg img{height: 100vh;object-fit: cover;}
.kv-content{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;z-index: 3;}
#kv-wrap h1{  text-shadow: -3px 3px 5px rgba(0, 0, 255, 0.83);}
#kv-wrap p{  text-shadow: -3.5px 3.6px 20px rgba(0, 0, 255, 0.83);}

.scroll-icon{width: 30px;margin-top: 30px;margin-bottom: 60px;}

.kv-bg-group{position: absolute;width: 1500px;height: 1500px;top:40%;left:50%;transform: translate(-50%, -50%);z-index: 2;overflow: visible;}
.kv-bg-group .group .child{width: 100%;height: 100%;object-fit: cover;position: absolute;}
.kv-bg-group .group .child1{z-index: 4;}
.kv-bg-group .group .child2{z-index: 5;opacity: .5;animation: rotateCounterClockwise 20s linear infinite;}
.kv-bg-group .group .child3{z-index: 2;}
.kv-bg-group .group .child4{z-index: 1;animation: rotateClockwise 100s linear infinite;}

/* section banner + section 1 */
.section-banner{position: relative;z-index: 2 !important;}
.ss1-bg-img{position: absolute;top: -50vh;left: 50%;transform: translateX(-50%);width: 100vw;min-width: 100%;height: auto;pointer-events: none;z-index: 0;}
.ss1-content-wrap{margin-top: 0px;position: relative;z-index: 99;;}
#section-1{background: transparent;padding-top: 120px;position: relative;background: #02066b;}
.ss1-section-menu{position: absolute;top:0px;width: 100%;z-index: 9;transform: translateY(-10vh);opacity: 0;transition: all 0.8s ease-in-out;}
#section-1.pinned .ss1-section-menu{transform: translateY(0);opacity: 1;}

.ss1-section-menu {  width: 100%;  padding: 40px 0;  }
.ss1-section-nav {  display: flex;  justify-content: center;margin-top: 90px;}
.ss1-nav-list {  box-shadow: 0 0 12px 4px rgba(79, 210, 255, 0.3); display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 10px;  list-style: none;  margin: 0;  padding: 0; background: #132299;border-radius: 25px;}
.ss1-nav-item {  position: relative;}
.ss1-nav-link {  display: block;  padding: 6px 30px;  color: #5458d5;  text-decoration: none;    border-radius: 25px;  transition: all 0.3s ease;   backdrop-filter: blur(10px);}
.ss1-nav-link:hover,.ss1-nav-item.active .ss1-nav-link {  background: #5af0fe;  text-decoration:     none;}

.section-1-grpah{width: 100%;min-height: 100vh;pointer-events: none;z-index: 9;}
#section-1.pinned .section-1-grpah{pointer-events: auto;}
.ss1-globe-container{justify-content: center;height: 75vh;position: absolute;bottom:0 ;width: 100%; text-align: center;transform: translateY(-10vh);transition: all 0.8s ease-in-out;}
#section-1.pinned .ss1-globe-container{transform: translateY(0);}

.globe-bg{width: 100%;height: 600px;position: absolute;top: -30vh;left: 0;opacity: 0;transition: all 1.8s ease-in-out;}
.pinned .globe-bg{top:0px}
.globe-bg img{width: 100%;animation: glowFlicker 8s ease-in-out infinite;}

@keyframes glowFlicker {
  0% {
    opacity: 0.7;
  }
  25% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

#myCanvas {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
  
}
.map-rotate {z-index: 9;transition: transform 1.8s ease-in-out;transform: rotateX(0deg) scale(.7);position: relative;margin: 0 auto;transform-origin: center top;}
.map-wrapper{position: absolute;top:0;z-index: 4;transform-origin: center top;pointer-events: none;}
.map-rotate img{width: 100vw !important;pointer-events: none;}

#section-1.pinned .map-rotate{transform: rotateX(58deg) translateY(22vh) scale(1)  ;}

.map-pin{  position: absolute;   width: 20px;   height: 20px;   z-index: 9999;  border-radius: 100%;  background: #fff;   animation: glowPulse 2s ease-in-out infinite alternate;cursor: pointer; z-index: 9;transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);opacity: 0;transform: scale(0);transform-origin: center center;box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6), 0 0 45px rgba(255, 255, 255, 0.4);}
.map-pin.show-pin{opacity: 1;transform: scale(1.2);animation-delay: 0.1s;}
.map-pin::after{content: '';position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;border: 2px solid rgba(255, 255, 255, 0.8);border-radius: 100%;transform: translate(-50%, -50%) scale(0);opacity: 0;pointer-events: none;filter: blur(1px);box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);}
.map-pin.show-pin::after{animation: radarPulse 1.5s ease-out 0.6s forwards;}
.map-pin.show-pin{animation: pinAppear 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;}

@keyframes pinAppear {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes radarPulse {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(2.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
  }
}
.v-line{position: absolute;  width: 2px;  height: 0;  background: #FFF;  z-index: 9999;  bottom: -60px;  right: 15px;  transition: all 0.4s ease-in-out;}
.h-line{position: absolute;width: 0;height: 2px;background: #FFF;z-index: 9999;bottom: 10px;right: 15px;transition: all 0.4s ease-in-out;}

.pin-text.active .v-line{height: 70px;pointer-events: none;}
.pin-text.active .h-line{width: calc(100% - 38px);transition-delay: 0.4s;pointer-events: none;}
.line-wrap{opacity: 0;}


.pin-text.active .line-wrap{opacity: 1;}
#section-1.pinned .map-pin{
   width: 30px; 
  height: 20px; 
  background: radial-gradient(circle at 30% 30%, #ffffff, #5af0fe 40%, #02066b 100%);
  box-shadow: 
    0 0 20px rgba(90, 240, 254, 0.8),
    0 0 30px rgba(90, 240, 254, 0.6),
    0 0 40px rgba(90, 240, 254, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.6),
    inset 0 -2px 8px rgba(2, 6, 107, 0.8);
 ;
}
@keyframes glowPulse {
  0% {
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(90, 240, 254, 0.8),

      inset 0 2px 4px rgba(255, 255, 255, 0.6),
      inset 0 -2px 4px rgba(2, 6, 107, 0.8);
  }
  100% {
    box-shadow: 
      0 0 25px rgba(90, 240, 254, 1),

      inset 0 3px 8px rgba(255, 255, 255, 0.8),
      inset 0 -3px 8px rgba(2, 6, 107, 1);
  }
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.6), 0 0 25px 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.pin-1 {top: 58%;  left: 59%; }
.pin-2 {top: 59%;  left: 38.5%; }
.pin-3 {top: 59.5%;  left: 56.5%; }
.pin-4 {top: 50%;  left: 62.7%; }
.pin-5 {top: 64%;  left: 56.5%; }
.pin-6 {top: 67.3%;  left: 62%; }
.pin-7 {top: 66.5%;  left: 55.2%;}
.pin-line {position: absolute; top: 0; left: 0; width: 1px; height: 100px; background: #FFF; z-index: 9999;border-radius: 100%;}


.map-pin:hover .pin-text,.map-pin.active .pin-text{opacity: 1;}

.pin-text-inner{height: 100%;position: relative;width: 100%;opacity: 0;}
.pin-text-wrap{position: absolute;width: 100vw;left: 50%;height: 100%;top:0;transform: translateX(-50%);z-index: 9;pointer-events: none;}
.pin-text-wrap .pin-text{pointer-events: none;opacity:0;position: absolute;width: 330px;background: rgba(0,0,0,.5);padding:20px 20px;border-radius: 8px;text-align: left;backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);}
.pin-text-wrap .active.pin-text{opacity: 1;}
.pin-text-wrap .pin-text h5{color:#5cdbff;}

.pin-text-3{width: 410px !important;}
.pin-text-5{width: 450px !important;}
.pin-text-6{width: 360px !important;}
.pin-text-7{width: 240px !important;}

#section-1.pinned .globe-bg,

#section-1.pinned .pin-text-inner
{opacity: 1;}
.ss1-nwww{display: inline;float: right;position: relative;}


.ss1-nwww::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -130px;
  width: 120px;
  height: 120px;
  background: url('../images/uob/ss1-nww.png') center center no-repeat;

    background-position-x: center;
    background-position-y: center;
    background-size: auto;

  background-size: cover;
  background-position: center calc(50% + var(--parallax-y, 0px) * -1);
  transform: translateY(var(--parallax-y, 0px));
  transition: transform 0.1s ease-out, background-position 0.1s ease-out;

  border-radius: 100%;

}
.ss4-nwww{margin-top: 80px;}
.ss4-nwww::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: -120px;
  width: 120px;
  height: 120px;
  background: url('../images/uob/ss4-nww.png') center center no-repeat;

    background-position-x: center;
    background-position-y: center;
    background-size: auto;

  background-size: cover;
  background-position: center calc(50% + var(--parallax-y, 0px) * -1);
  transform: translateY(var(--parallax-y, 0px));
  transition: transform 0.1s ease-out, background-position 0.1s ease-out;

  border-radius: 100%;

}


/* section 2 */
#section-2{padding-top: 10vw;}
#section-2::before{content: "";background: #02066b url('../images/uob/ss2-bga.jpg') top center no-repeat;background-size: 100% auto;position: absolute;top:0vw;left: 0;width: 100%;height: 100%;z-index: 1;}
#section-2 .context{z-index: 2;position: relative;}
.section-2-grpah{width: 100%;height: 800vh;background: #1427f2;position: relative;z-index: 9; }
.ss2-dot-menu{pointer-events: none;height: 100vh;position: absolute;top:0;left:0;width: 100%;z-index: 9;}
.ss2-dot-menu-wrap{  position: absolute;  bottom: 0px;  left: 40px;  z-index: 9;  display: flex;  flex-direction: column;justify-content: space-evenly;  height: calc(100vh - 80px);  padding:  0;}
.ss2-dot-menu .dot { pointer-events: auto; cursor: pointer; width: 8px;  height: 8px;  background: #ffffff;  border-radius: 50%;z-index: 2;}
.ss2-dot-menu .dot-bg-wrap { pointer-events: none;  width: 14px;height:calc(100vh - 80px);z-index: 1;position: relative;left: 36px;border-radius: 6px;margin-top: 80px}
.ss2-dot-menu .dot-bg { transition: all 0.3s ease-in-out;position: absolute;; background: #6c75ff;width: 15px;height: 9%;top:50%;transform: translateY(-50%);border-radius: 6px;}
.ss1-active .ss2-dot-menu .dot-bg{top:8.8%;}
.ss2-active .ss2-dot-menu .dot-bg{top:20.6%}
.ss3-active .ss2-dot-menu .dot-bg{top:32.4%;}
.ss4-active .ss2-dot-menu .dot-bg{top:44.1%}
.ss5-active .ss2-dot-menu .dot-bg{top:55.9%;}
.ss6-active .ss2-dot-menu .dot-bg{top:67.6%;}
.ss7-active .ss2-dot-menu .dot-bg{top:79.4%;}
.ss8-active .ss2-dot-menu .dot-bg{top:91.2%;}

.ss2-dot-menu::before{content: "　";background: linear-gradient(to bottom,#0309a0 20%, rgba(3, 9, 160, 0) 100%);width: 50vw;height:200px;top:0;left: 0;position: absolute;pointer-events: none;}
.ss2-dot-menu::after{content: "　";background:linear-gradient(to top,#0309a0 20%, rgba(3, 9, 160, 0) 100%); ;width: 50vw;height: 100px;bottom:0;left: 0;position: absolute;pointer-events: none;}


.ss2-left-col{position: absolute;left: 0;width: 50vw;height: 100%;background: #0309a0;}
.ss2-right-col{position: absolute;right: 0;width: 50vw;height: 100vh;background: #EEE;}
.ss2-left-section{height: 100vh;display: flex;align-items: center;justify-content: center;}
.ss2-left-inner{width: 400px;text-align: center;background: #0309a0;z-index: 2;}
.ss2-left-block p{border-top: 1px solid #FFF;border-bottom: 1px solid #FFF;padding: 20px 0;}
.ss2-left-block-title h6{font-size: 6px;}
.ss2-left-block-title h5{font-size: 12px;}
.ss2-left-block-title{border: 1px solid #FFF;border-radius: 100%;width: 56px;height: 56px;padding: 14px 0;display: inline-block;margin-bottom: 30px;}
.ss2-left-gradient{position: absolute;width:50vw;left: 0;top:0;height: 100vh;background: linear-gradient(40deg, #000000 30%, #1427f2 80%);z-index: 99;mix-blend-mode: screen;pointer-events: none;opacity: 1;}
.ss2-left-section::after{content:"　";position: absolute;width: 1px;height: 100%;background: #FFF;top:0vh;left: 50%;transform: translateX(-50%);}
.ss2-left-inner .ss2-left-block:nth-child(2):after{content:"　";position: absolute;width: 1px;height: 60px;background: #FFF;top:-60px;left: 50%;transform: translateX(-50%);}
.ss2-left-block{position: relative;}

.ss2-img-list{position: absolute;padding: 0;margin: 0;;}
.ss2-img-list li{transition: opacity 0.5s ease-in-out;opacity: 0;;position: absolute;width: 50vw;height: 100vh;list-style: none;top:0;left: 0;}
.ss1-active .ss2-img-list li:nth-child(1){opacity: 1;}
.ss2-active .ss2-img-list li:nth-child(2){opacity: 1;}
.ss3-active .ss2-img-list li:nth-child(3){opacity: 1;}
.ss4-active .ss2-img-list li:nth-child(4){opacity: 1;}
.ss5-active .ss2-img-list li:nth-child(5){opacity: 1;}
.ss6-active .ss2-img-list li:nth-child(6){opacity: 1;}
.ss7-active .ss2-img-list li:nth-child(7){opacity: 1;}
.ss8-active .ss2-img-list li:nth-child(8){opacity: 1;}

.ss2-img-block{width: 60%;position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%);}
.ss2-img-block img{width: 100%;height: 100%;object-fit: cover;}

/* section 3 */
#section-3{position: relative;;background: #050798 url('../images/uob/ss3-bga.jpg') top center no-repeat;background-size: 100% auto;padding-bottom: 200px;padding-top: 200px;}
#section-3 .bottom-bg{position: absolute;;bottom:0;left: 0;width: 100%;z-index: 1;pointer-events: none;}
#section-3 .context{position: relative;z-index: 3;}
.ss3-benefits-b1,.ss3-benefits-b2{width: 780px;margin: 0 auto;margin-bottom: 120px;position: relative;margin-bottom: 100px;}
.ss3-ball-b1{position: absolute;top: -80px;  left: -60px;width: 780px;}
.ss3-ball-b2{position: absolute;top: -40px;right: -100px;width: 740px;}
.ss3-benefits-b1 h4{position: absolute;left: 120px;top:0;border-bottom: 4px solid #FFF;}
.ss3-benefits-list{color:#FFF}
.ss3-benefits-b1 .ss3-benefits-list{position: absolute;right: 140px;bottom:20px;color: #FFF;}
.ss3-benefits-b1 .ss3-benefits-list li{margin-bottom: 8px;}
.ss3-benefits-b2 h4{position: absolute;left: -60px;top:200px;border-bottom: 4px solid #FFF;}
.ss3-benefits-b2 .ss3-benefits-list{position: absolute;left: 20px;bottom:0;color: #FFF;}
.ss3-benefits-b2 .ss3-benefits-list li{margin-bottom: 8px;}



.ss3-benefits-b3,.ss3-benefits-b4{position: relative;margin-bottom: 60px;height: 580px;}
.ss3-benefits-b3 h4,.ss3-benefits-b4 h4{display: inline-block;margin-bottom: 60px;border-bottom: 4px solid #FFF;width: fit-content;align-self: flex-start;}
.ss3-benefits-b3 .ss3-benefits-list,.ss3-benefits-b4 .ss3-benefits-list{width: 410px;color: #FFF;}
.ss3-benefits-b3 .ss3-benefits-list li,.ss3-benefits-b4 .ss3-benefits-list li{margin-bottom: 8px;}
.ss3-benefits-b3 .inner-max,.ss3-benefits-b4 .inner-max{display: flex;flex-direction: column;justify-content: center;height: 100%;}

/* Initial hidden states for scroll animations */
.ss3-benefits-b1 > img{opacity: 0;transform: translateX(-10%);}
.ss3-benefits-b1 .ss3-ball-b1{opacity: 0;}
.ss3-benefits-b1 h4{opacity: 0;transform: translateY(30px);}
.ss3-benefits-b1 .ss3-benefits-list li{opacity: 0;transform: translateX(-50px);}

.ss3-ball-1a,.ss3-ball-1b,.ss3-ball-1c,.ss3-ball-2a,.ss3-ball-2b,.ss3-ball-2c{opacity: 1;position: absolute;}

.ss3-ball-1a{left: 15px;  width: 180px;  top: 160px;  animation: float1 4s ease-in-out infinite;}
.ss3-ball-1b{left: 220px;  top: 240px;  width: 220px;  animation: float2 5s ease-in-out infinite;}
.ss3-ball-1c{right: 60px;  top: 45px;  width: 280px;  animation: float3 6s ease-in-out infinite;}

.ss3-ball-2a{left: 54px;  width: 265px;  top: 43px;  animation: float1 4s ease-in-out infinite;}
.ss3-ball-2b{left: 310px;  top: 240px;  width: 210px;  animation: float2 5s ease-in-out infinite;}
.ss3-ball-2c{right: 30px;  top: 155px;  width: 170px;  animation: float3 6s ease-in-out infinite;}

/* Mask effect for ss3-ball-1mask and ss3-ball-2mask */
.ss3-ball-1mask,
.ss3-ball-2mask {
  position: relative;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s linear;
}

/* Floating animations with different timing for natural effect */
@keyframes float1 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}




.ss3-benefits-b2 > img{opacity: 0;transform: translateX(100%);}
.ss3-benefits-b2 .ss3-ball-b1{opacity: 0;}
.ss3-benefits-b2 h4{opacity: 0;transform: translateY(30px);}
.ss3-benefits-b2 .ss3-benefits-list li{opacity: 0;transform: translateX(-50px);}

.ss3-benefits-b3 .ss3-b3-bg{opacity: 0;transform: translateX(-100%);}
.ss3-benefits-b3 h4{opacity: 0;transform: translateY(30px);}
.ss3-benefits-b3 .ss3-benefits-list li{opacity: 0;transform: translateX(-50px);}

.ss3-benefits-b4 .ss3-b3-bg{opacity: 0;transform: translateX(-100%);}
.ss3-benefits-b4 h4{opacity: 0;transform: translateY(30px);}
.ss3-benefits-b4 .ss3-benefits-list li{opacity: 0;transform: translateX(50px);}

.ss3ball-wrap{position: absolute;width: 580px;height: 580px;left:70%;top:50%;transform: translate(-50%,-50%);background: aliceblue;border-radius: 100%;z-index: 3;overflow: hidden;opacity: 0;}
.ss3ball-wrap .top-ball-wrap{width: 500px;height: 500px;border-radius: 100%;background: url('../images/uob/ss3-tb1.png') center center no-repeat;background-size: contain;;position: absolute;left: 40px;top:40px;}
.ss3-benefits-b4 .top-ball-wrap{background: url('../images/uob/ss3-tb2.png') center center no-repeat;background-size: contain;;}
.ss3-benefits-b3 .ss3-b3-bg{position: absolute;left: 0;width: 70%;height: 100%;background: url('../images/uob/ss3-block1-bg.png') center center no-repeat;background-size: 100% 100%;}
.ss3-benefits-b4 .ss3-b3-bg{position: absolute;left: 0;width: 70%;height: 100%;background: url('../images/uob/ss3-block2-bg.png') center center no-repeat;background-size: 100% 100%;}
.bottom-ball-wrap{position: absolute;width: 150%;height: 100%;background: url('../images/uob/ss3-tb3.jpg') center center no-repeat;background-size: cover;;position: absolute;left: 0;top:0;}
.ss3-benefits-b4 .bottom-ball-wrap{right: 0;left: auto;}

/* section 4 */
#section-4{background: #1b3e90 url('../images/uob/ss4-bg.jpg') bottom  center no-repeat;background-size: 100% auto;padding-bottom: 400px;padding-top: 200px;}    
#section-4 .top-bg{position: absolute;;top:0;left: 0;width: 100%;z-index: 99;pointer-events: none;}
.section-4-grpah{width: 100%;min-height: 50vh;background: #02066b;margin-bottom: 120px;}
.section-4b-grpah{width: 100%;min-height: 100vh;background: #02066b;}

.qoute{padding-top: 35px;background: url('../images/uob/icon-mark.png') top left no-repeat;background-size: 28px auto;}

/* Quote highlight animation */
.inner-qoute {  opacity: 0;  transform: translateY(30px);  transition: opacity 0.8s ease, transform 0.8s ease;}
.inner-qoute.visible {  opacity: 1;  transform: translateY(0);}
.qoute {  color: #10237e !important;}
.qoute .word {  display: inline-block;  color: #10237e;  transition: color 0.4s ease;}
.qoute-1 .word { color:#5988df}
.qoute .word.highlighted {  color: #fff !important}

.owl-stage-outer {padding-bottom: 200px;}
.ss4-lightbox{position: fixed;width: 100%;height: 100%;z-index: 11;top:0;left: 0;z-index: 999999;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;backdrop-filter: blur(0px);-webkit-backdrop-filter: blur(0px);}
.ss4-lightbox.on{opacity: 1;pointer-events: all;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}

.ss4-slide-item{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);width: 600px;z-index: 11;opacity: 0;transition: opacity 0.4s ease, transform 0.4s ease;pointer-events: none;}
.ss4-slide-item.active{opacity: 1;transform: translate(-50%,-50%) scale(1);pointer-events: auto;}
.ss4-close-btn{position: absolute;width: 30px;height: 30px;background: url('../images/uob/close-x-svgrepo-com.svg') center center no-repeat;background-size: 70% 70%;border-radius: 100%;cursor: pointer;transition: all 0.3s ease;right: -40px;top: -40px;transform: translateX(-50%);border: 2px solid #FFF;z-index: 12;opacity: 0;pointer-events: none;}
.ss4-lightbox.on .ss4-close-btn{opacity: 1;pointer-events: all;}
.ss4-close-btn:hover{background-color: rgba(255, 255, 255, 0.2);transform: translateX(-50%) scale(1.1);}
.lightbox-bg{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.6);z-index: 10;transition: background 0.3s ease;}

.ss4-slide-item-wrap{border-radius: 30px;overflow: hidden;}
.ss4-slide-item-wrap > img{width: 100%;height: auto;position: absolute;}
.ss4-slide-content{  padding: 30px 20px;   position:relative;  width:100%;  z-index:2;  top:0;  left: 0;text-align: left;}
.ss4-slide-item.center .ss4-slide-content p.focus-title{padding-left: 40px;position: relative;}
.ss4-slide-item.center .ss4-slide-content p.focus-title b{position: absolute;top:0;left: 0;;}
.ss4-map{position: relative;}
.ss4-map-wrapper{position: relative;text-align: center;left: 50%;transform: translateX(-50%);display: inline-block;}
.ss4-map-wrapper img{height: 620px;width: auto;;}
.ss4-button{position: absolute;top: 0;left: 0;width: 100%;height: 620px;z-index: 9;;}
.ss4-button h5{font-size: 19px;line-height:30px;font-weight: 500}
.ss4-button-item {width: 30px;height: 30px;position: absolute;background: #FFF;border-radius: 100%;cursor: pointer;box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);animation: pulse-glow 2s infinite;transition: all 0.3s ease;}
.ss4-map-list {position: absolute;height: 620px;padding-left: 0;margin-bottom: 0;top:0;pointer-events: none;}
.ss4-map-list li{position: absolute;width: 100%;bottom:0;opacity: 0;transition: opacity 0.3s ease;list-style: none;}
.ss4-map-list li.active{opacity: 1;}
.ss4-a{top: 51%;  left: 37.5%;}
.ss4-b{top: 57%;  left: 26.8%;}
.ss4-c2{top: 69.5%;  left: 20.5%;}
.ss4-d{top: 56%;  left: 61%;}
.ss4-e{top: 31%;  left: 35.3%;}
.ss4-f{top: 19.5%;  left: 10.8%;}
.ss4-g{top: 44%;  left: 88.6%;}
.ss4-h{top: 69%;  left: 82.4%;}
.ss4-i{top: 87%;  left: 19.2%;}

.ss4-slide-item-wrap{position: relative;}

.info-box-wrap{position: relative;bottom:0;width: 100%;padding: 15px;display: flex;gap: 10px;}
.info-box-wrap .info-box-2-item{flex: 1;background: #FFF;padding: 10px;border-radius: 15px;padding-top:40px;}
.ss4-slide-item-5 .info-box-2-item:first-child,.ss4-slide-item-6 .info-box-2-item:first-child{flex: 1;}
.ss4-slide-item-5 .info-box-2-item:last-child,.ss4-slide-item-6 .info-box-2-item:last-child{flex: 2;}


.info-box-wrap p,.ss4-slide-content h5,.ss4-slide-content p{color: #000;text-align: left;font-size: 14px;line-height: 1.2;}
.info-box-wrap ul{padding-left: 0;margin: 0;margin-left: 14px;line-height: 1;}
.owl-title-block{padding-left: 30px;}
.round-circle{position:absolute;top: 25px;left: 18px;width: 24px;height: 24px;border-radius: 100%;display: inline-flex;align-items: center;justify-content: center;margin-bottom: 20px;border: 2px solid #000;}
.roc-banner{text-align: center;}
.roc-banner img{width: 300px;margin: 0 auto;}
/* Owl Carousel Navigation Arrows */
.ss4-slider .owl-nav{position: absolute;top: 25%;left: 50%;transform: translate(-50%, -50%);width: 43%;display: flex;justify-content: space-between;z-index: 999;}
.owl-theme .owl-nav [class*="owl-"]{width: 30px;height: 30px;background: #FFF;color: #000;;border-radius: 100%;}