@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.msg-landscape{display: none}
.mobile-v,.mobile-item{display: none}
body,
html {
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  
}
body{overflow: hidden}

#msapp .head-bar-sub{background: #ff7200 !important}

section {
  background-size: 100% auto;
  position: relative
}
.scrollmagic-pin-spacer{
  background-size: 100% auto;	
}


h1 {
  font-size: 58px;
  line-height: 1
}

h2 {
  font-size: 42px;
  line-height: 1.2
}

h3 {
  font-size: 38px;
  line-height: 1.2
}


h4 {
  font-size: 22px;
  line-height: 1.2
}

h5 {
  font-size: 16px;
  line-height: 1.2
}

.line-height-1{line-height: 1;}


.caption {
	font-size: 13px;
	line-height: 1.4;
    font-weight: 400;
    margin-bottom: 0;
    padding-left:18px;
	padding-right:18px;
	font-style: italic
}

.small {
  font-size: 12px;
  line-height: 20px
}

.medium {
  font-size: 14px;
  line-height: 18px
}


.subtit-l{
  font-family: "Montserrat", sans-serif;
  font-size: 46px;
  margin-bottom: 0;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  color:#e6f224
}
.subtit-m{
  font-family:  "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 48px;
  margin-bottom: 0;
  line-height: 1
}

.ss-title{display: inline-block;;margin:80px auto 60px auto;position: relative;width: calc(100% + 120px)}

a , a:focus{color: #272727}




.bold{font-weight: bold}

.roboto{font-family: "Roboto", sans-serif;font-weight: normal !important}

.inner {
  width: 100%;
  max-width: 516px;
  text-align: left;
  margin: 0 auto;
  position: relative
}
.inner-graph {
  width: 100%;
  max-width: 628px;
  margin: 20px auto 80px auto;
  position: relative
}

.inner-graph-wrap{
  position: relative;
}

.inner-graph img{
  width: 100%;
}

.inner-max {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  position: relative
}
.inner-youtube{
  width: 100%;
  max-width: 628px;
  margin: 20px auto 40px auto;
  position: relative
}

p {
  font-family: "Roboto", sans-serif;
  font-size: 15.8px;
    margin-bottom: 0;
    color: #272727;
    line-height: 1.4;
    font-weight: 400;
}

p b{font-weight: 600 }
.inner-hk {width: 506px;}
.inner-hk-wild{max-width: 525px;}
.edit-info p a {
  color: #000000;
}

.font-100{font-weight: 100 !important}




button,
a {
  cursor: pointer;
}

.banner-center {
  margin: 0 auto;
  max-width: 970px;
  ;
  padding: 60px 0
}

.banner {
  width: 970px;
  max-width: 90%;

}

.banner .banner-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.upper {
  text-transform: uppercase
}


.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: 1000;
  padding-top: 15vh;
  position: relative;
  background: url(../images/bg.webp) center center repeat;
  background-size: 100% auto;
}


.grid-fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 1
}
.in-1 {
  position: absolute;
  width: 1024px;
  height: 100%;
  border-left: 1px solid aqua;
  border-right: 1px solid aqua;
  transform: translateX(-50%);
  left: 50%
}

.in-2 {
  position: absolute;
  width: 564px;
  height: 100%;
  border-left: 1px solid aqua;
  border-right: 1px solid aqua;
  transform: translateX(-50%);
  left: 50%
}

.in-3 {
  position: absolute;
  width: 514px;
  height: 100%;
  border-left: 1px solid aqua;
  border-right: 1px solid aqua;
  transform: translateX(-50%);
  left: 50%
}


.section-banner-bg-inner {
  background: #000
}

.ms-ico-scroll {
  position: absolute;
  bottom: 60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 9;display: none;
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 50px;
  border-radius: 15px;
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
}

.ms-ico-scroll .ms-ico-scroll-inner {
  text-align: center;
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse {
  pointer-events: none;
  width: 24px;
  margin: 0 auto;
}

.ms-ico-scroll .ms-ico-scroll-inner .scroll-text {
  text-align: center;
  margin-top: 5px;
}

.ms-ico-scroll .ms-ico-scroll-inner .scroll-text span {
  font-family: Roboto, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  color: #ffffff;
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 50px;
  border-radius: 15px;
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: 12px;
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div {
  display: block;
  width: 3px;
  height: 3px;
  margin: 0 auto;
  margin-top: 0px;
  border-radius: 3px;
  background-color: #fff;
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner .line-long {
  height: 14px;
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(1),
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(2) {
  -webkit-animation-name: mousescrolldot;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
  -moz-animation-name: mousescrolldot;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
  -ms-animation-name: mousescrolldot;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
  animation-name: mousescrolldot;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(4),
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(5) {
	-webkit-animation-name: mousescrolldot;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
	-moz-animation-name: mousescrolldot;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
	-ms-animation-name: mousescrolldot;
	-ms-animation-duration: 2s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
	animation-name: mousescrolldot;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function:  cubic-bezier(0.65, 0, 0.35, 1);
	-webkit-animation-delay: 1s;
	animation-delay: 1s
}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div+div {
	margin-top: 2px
}

.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner .line-long {
	height: 14px
}

.ms-ico-scroll .ms-ico-scroll-inner .scroll-text {
	text-align: center;
	margin-top: 5px
}

.ms-ico-scroll .ms-ico-scroll-inner .scroll-text span {
	font-family: Roboto, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	color: #ffffff
}
@-webkit-keyframes mousescrolldot {
	from {
		height: 3px
	}

	50% {
		height: 0px
	}

	to {
		height: 3px
	}
}

@keyframes mousescrolldot {
	from {
		height: 3px
	}

	50% {
		height: 0px
	}

	to {
		height: 3px
	}
}

@keyframes loadingblink {
	from {
		bottom: -100%
	}

	to {
		bottom: 100%
	}
}







/* Footer */


/* Gobal */

section{position: relative;overflow: hidden;}
.section-height{min-height: 920px}

.margin-120-bottom{padding-bottom: 120px}
.margin-80-bottom{padding-bottom: 80px}
.margin-60-bottom{padding-bottom: 60px}
.margin-40-bottom{padding-bottom: 40px}
.margin-20-bottom{padding-bottom: 20px}


main{background: #79d2f4;}
.section-intro{width: 100%;height: 45vw;background: #EEE;;}
.inner,.inner-max,.inner-graph{position: relative;z-index: 9;}

.inner-qoute{ width: 100%;  max-width: 680px;  margin: 60px auto;  position: relative;text-align: left;z-index: 5;}
.inner-qoute .qoute{font-size: 37px;font-weight: 600;color:#4f68fc;line-height: 1.1}
.inner-qoute h4{font-size: 24px;font-weight: 600;color:#4f68fc}
.ss2-mask{position: absolute;width: 100%;bottom:-30%;left: 0%;z-index: 0;}
.ss3-mask{position: absolute;width: 100%;bottom:0%;left: 0%;z-index: 1;}
.two-block-img{width: 100%;height: 30vw;background: #FFF;overflow: hidden;margin-bottom: 20px;z-index: 3;position: relative;;}
.two-block-img-wrap{width: 50%;float: left;height: 120%;}
.two-block-img .two-block-img-wrap:nth-child(2){top: -20%} 

.caption{color:#FFF;font-style: normal;margin-bottom: 20px;}
.grap-layer{position: absolute;width: 100%;height: 100%;top:0;left: 0;}
.section-title-obj{position: absolute;}

/* landing */
#kv{width: 100% !important;position: relative;padding-top: 40px;z-index: 3;}
.kv-object-wrap {width: 1480px;padding: 0 40px;margin: 0 auto 60px;z-index: 3;margin-left: 50%;transform: translateX(-50%);}
.kv-object-wrap.active .kv-obj .kv-inner-bg {animation-play-state: running;}
.intro-bg{position: absolute;width: 100%;top: -25%;left: 0;z-index: 2;pointer-events: none;}
.kv-obj{position: absolute;opacity: 1;;}
.kv-inner-bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-size: cover;background-position: center;transform-origin: left top;transform: scale(0);transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);opacity: 0;}

.kv-obj.active .kv-inner-bg {opacity: 1;transform: scale(1);}

/* Animation directions */
.lr-reveal .kv-inner-bg {transform-origin: left center;}
.rl-reveal .kv-inner-bg {transform-origin: right center;}
.tb-reveal .kv-inner-bg {transform-origin: center top;}
.bt-reveal .kv-inner-bg {transform-origin: center bottom;}

/* Dissolve animation */
.dissolve-reveal .kv-inner-bg {transform: scale(1); opacity: 0; transition: opacity 0.8s ease-in-out, transform 0s;}

/* Animation for left-to-right */
.lr-reveal.active .kv-inner-bg {transform: scaleX(1);}

/* Animation for right-to-left */
.rl-reveal.active .kv-inner-bg {transform: scaleX(1);}

/* Animation for top-to-bottom */
.tb-reveal.active .kv-inner-bg {transform: scaleY(1);}

/* Animation for bottom-to-top */
.bt-reveal.active .kv-inner-bg {transform: scaleY(1);}

/* Active state for all directions */
.kv-object-wrap.active .kv-obj.active .kv-inner-bg {transform: scale(1);}

/* Active state for dissolve animation */
.dissolve-reveal.active .kv-inner-bg {opacity: 1;}

/* Floating animations with different rhythms */
@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, -15px) scale(1); }
}

@keyframes floatMedium {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-8px, -10px) scale(1); }
  66% { transform: translate(5px, -12px) scale(1); }
}

@keyframes floatQuick {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(8px, -5px) scale(1); }
  50% { transform: translate(0px, -10px) scale(1); }
  75% { transform: translate(-8px, -5px) scale(1); }
}

@keyframes floatBouncy {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-12px, -8px) scale(1); }
  60% { transform: translate(12px, -15px) scale(1); }
  80% { transform: translate(0px, -5px) scale(1); }
}

/* Scaling effect animations */
@keyframes scalePulse1 {
  0%, 90%, 100% { transform: scale(1); }
  95% { transform: scale(1.08); }
}

@keyframes scalePulse2 {
  0%, 85%, 100% { transform: scale(1); }
  92% { transform: scale(1.12); }
}

@keyframes scaleDown1 {
  0%, 88%, 100% { transform: scale(1); }
  94% { transform: scale(0.92); }
}

@keyframes scaleDown2 {
  0%, 92%, 100% { transform: scale(1); }
  96% { transform: scale(0.88); }
}

/* Classes for the scaling animations */
.scale-pulse-1 { animation: scalePulse1 7s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.scale-pulse-2 { animation: scalePulse2 8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.scale-down-1 { animation: scaleDown1 5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.scale-down-2 { animation: scaleDown2 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }

.kv-obj1{left: 4.8%;top: 23%;width: 11%;height: 16%;}
.kv-obj1 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj1.webp) center center no-repeat;background-size: contain;animation: brightnessEffect1 2.5s infinite;}

.kv-obj2{left: 16.6%;top: 18.3%;width: 13.3%;height: 21%;}
.kv-obj2 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj2.webp) center center no-repeat;background-size: contain;}
.kv-obj2 .kv-inner-obj-1{position:absolute;width: 100%;height: 100%;top:0;left: 0;background: url(../images/hkstp/output_webp/kv/obj/5.webp) center center no-repeat;background-size: contain;animation: moveUpDown2 6s infinite}
.kv-obj2 .kv-inner-obj-2{position:absolute;width: 70%;height: 100%;top: -40%;left: 20%;background: url(../images/hkstp/output_webp/kv/obj/10.webp) center center no-repeat;background-size: contain;animation: moveUpDown1 3s infinite}
@keyframes flashLight {
  0%, 100% { opacity: 1; filter: brightness(1.5) blur(8px); }
  50% { opacity: 0.2; filter: brightness(0.8) blur(5px); }
}

.kv-inner-obj-2 span{width: 20px;height: 20px;background: aqua;position: absolute;top:40%;filter: brightness(1.2) blur(8px);border-radius: 50%;animation: flashLight 1s ease-in-out infinite;}
.kv-inner-obj-2 span:nth-child(2){width: 20px;height: 20px;background: aqua;position: absolute;top: 57%;left: 36%;animation: flashLight 1.2s ease-in-out infinite; animation-delay: 0.5s;}

.kv-obj3{left: 30.5%;top: 11%;width: 16.8%;height: 25.5%;}
.kv-obj3 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj3.webp) center center no-repeat;background-size: contain;}
.kv-obj3 .kv-inner-obj-3{position:absolute;width: 109%;height: 150%;bottom: 2%;left: -7%;background: url(../images/hkstp/output_webp/kv/obj/4.webp) center bottom no-repeat;background-size: contain;animation: moveLeftRight1 10s infinite;}

.kv-obj4{left: 47.8%;top: 17.8%;width: 12.2%;height: 18.3%;z-index: 2;}
.kv-obj4 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj4.webp) center center no-repeat;background-size: contain;}
.kv-obj4 .kv-inner-obj-4{position:absolute;width: 170%;height: 170%;top:0;left: 0;background: url(../images/hkstp/output_webp/kv/obj/11.webp) center center no-repeat;background-size: contain;animation: car1 4s infinite}

.kv-obj5{left: 60.6%;top: 3%;width: 17.8%;height: 33.5%;}
.kv-obj5 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj5.webp) center center no-repeat;background-size: contain;}
.kv-obj5 .kv-inner-obj-5{position:absolute;width: 100%;height: 100%;top: -30%;left: 45%;background: url(../images/hkstp/output_webp/kv/obj/12.webp) center center no-repeat;background-size: contain;animation: plane1 6s infinite}

.kv-obj6{left: 79%;top: 22%;width: 12%;height: 37%;}
.kv-obj6 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj6.webp) top center no-repeat;background-size: 100% auto;}
.kv-obj6 .kv-inner-bg-2{position:absolute;width: 100%;height: 100%;background: url(../images/hkstp/output_webp/kv/kv-obj6b.webp) top center no-repeat;background-size: 100% auto;height: 0;opacity: 1;animation: growAndFade 3s infinite;}

@keyframes growAndFade {
  0% { height: 0; opacity: 1; }
  70% { height: 100%; opacity: 1; }
  100% { height: 100%; opacity: 0; }
}
@keyframes car1 {
  0% { transform: translateX(-30%) translateY(-40%);opacity: 1; }
  90% { transform: translateX(0) translateY(-5%);opacity: 1; }
  95% { transform: translateX(0) translateY(-5%);opacity: 0; }
  100% { transform: translateX(-30%) translateY(-40%);opacity: 0; }
}
@keyframes car2 {
  0% { transform: translateX(40%) translateY(0);opacity: 1; }
  90% { transform: translateX(5%) translateY(30%);opacity: 1; }
  95% { transform: translateX(5%) translateY(30%);opacity: 0; }
  100% { transform: translateX(40%) translateY(0%);opacity: 0; }
}
@keyframes plane1 {
  0% { transform: translateX(-20%) translateY(10%) scale(.6);opacity: 0; }
  90% { transform: translateX(0) translateY(0) scale(1);opacity: 1; }
  95% { transform: translateX(0) translateY(0) scale(1);opacity: 0; }
  100% { transform: translateX(-20%) translateY(10%) scale(.6);opacity: 0; }
}
@keyframes moveLeftRight1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

@keyframes moveLeftRight2 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-15px); }
  100% { transform: translateX(0); }
}
@keyframes moveLeftRight3 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes moveUpDown1 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
@keyframes moveUpDown2 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

@keyframes brightnessEffect1 {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

@keyframes brightnessEffect2 {
  0% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.25) contrast(1.1); }
  100% { filter: brightness(1) contrast(1); }
}
.kv-obj7{left: 69.5%;top: 37.5%;width: 9%;height: 21.5%;}
.kv-obj7 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj7.webp) center center no-repeat;background-size: contain;}
.kv-obj7 .kv-inner-obj-7{position:absolute;width: 80%;
  height: 80%;
  top: 4.7%;
  left: 32%;background: url(../images/hkstp/output_webp/kv/obj/6.webp) center center no-repeat;background-size: contain;animation: moveLeftRight3 10s infinite;}
.kv-obj7 .kv-inner-obj-16 {
  position: absolute;
  width: 51%;
  height: 22%;
  top: 18%;
  left: -50px;
  background: url(../images/hkstp/output_webp/kv/obj/16.webp) center center no-repeat;
  background-size: contain;
  animation: slideInOut 4.5s ease-out infinite;
}

@keyframes slideInOut {
  0%, 5% { left: -50px; }
  40% { left: 0; }
  90% { left: 0; }
  90.01%, 100% { left: -50px; }
}


.kv-obj8{left: 84.8%;top: 60%;width: 11.3%;height: 16%;}
.kv-obj8 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj8.webp) center center no-repeat;background-size: contain;animation: brightnessEffect2 3s infinite;}

.kv-obj9{left: 69.3%;top: 60%;width: 15%;height: 28%;}
.kv-obj9 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj9.webp) center center no-repeat;background-size: contain;}
.kv-obj9 .kv-inner-obj-9{position:absolute;width: 40%;height: 20%;bottom: 5%;left: 2%;background-position: center center;background-repeat: no-repeat;background-size: contain;animation: cycleBackgrounds9 6s steps(3, jump-none) infinite;}

@keyframes cycleBackgrounds9 {
  0%, 33.33% { background-image: url(../images/hkstp/output_webp/kv/obj/9a.webp); }
  33.34%, 66.66% { background-image: url(../images/hkstp/output_webp/kv/obj/9b.webp); }
  66.67%, 100% { background-image: url(../images/hkstp/output_webp/kv/obj/9c.webp); }
}

.kv-obj10{left: 52.5%;top: 67%;width: 16.25%;height: 30.5%;}
.kv-obj10 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj10.webp) center center no-repeat;background-size: contain;}
.kv-obj10 .kv-inner-obj-10{position:absolute;width: 50%;height: 28%;bottom: 2%;left: -13%;background-position: center center;background-repeat: no-repeat;background-size: contain;animation: cycleBackgrounds 5s steps(5, jump-none) infinite;}
@keyframes circularFloat {
  0% { transform: translate(0, -8px); }
  25% { transform: translate(8px, 0); }
  50% { transform: translate(0, 8px); }
  75% { transform: translate(-8px, 0); }
  100% { transform: translate(0, -8px); }
}

.kv-obj10 .kv-inner-obj-15{
  position: absolute;
  width:100%;
  height: 100%;
  top: -5%;
  left: -5%;
  background-image: url(../images/hkstp/output_webp/kv/obj/15.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  animation: circularFloat 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes cycleBackgrounds {
  0% { background-image: url(../images/hkstp/output_webp/kv/obj/7a.webp); }
  20% { background-image: url(../images/hkstp/output_webp/kv/obj/7a.webp); }
  40% { background-image: url(../images/hkstp/output_webp/kv/obj/7b.webp); }
  60% { background-image: url(../images/hkstp/output_webp/kv/obj/7c.webp); }
  80% { background-image: url(../images/hkstp/output_webp/kv/obj/7d.webp); }
  100% { background-image: url(../images/hkstp/output_webp/kv/obj/7a.webp); }
}

.kv-obj11{left: 43%;top: 67%;width: 9%;height: 21.3%;}
.kv-obj11 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj11.webp) center center no-repeat;background-size: contain;}

@keyframes brightnessEffect3 {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

.kv-obj12{left: 30.5%;top: 67%;width: 12%;height: 21.3%;}
.kv-obj12 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj12.webp) center center no-repeat;background-size: contain;animation: brightnessEffect3 3s ease-in-out infinite;}
.kv-obj12 .kv-inner-obj-12{position:absolute;width: 90%;  height: 46%;  bottom: -10%;  left: 5%;background: url(../images/hkstp/output_webp/kv/obj/13.webp) center center no-repeat;background-size: contain;animation: car2 6s infinite;}

.kv-obj13{left: 18.2%;top: 74%;width: 11.6%;height: 21%;}
.kv-obj13 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj13.webp) center center no-repeat;background-size: contain}

.kv-obj13 .kv-inner-obj-13{position:absolute;width: 70%;
  height: 100%;
  top: 0;
  left: -21%;background: url(../images/hkstp/output_webp/kv/obj/8.webp) center center no-repeat;background-size: contain;}
.kv-obj13 .kv-inner-obj-16{position:absolute;width: 70%;
  width: 90%;
  height: 108%;
  top: -9.5%;
  left: 8%;;background: url(../images/hkstp/output_webp/kv/obj/14.webp) center center no-repeat;background-size: contain;animation: moveLeftRight2 6s infinite;}
  .kv-obj13 .kv-inner-obj-13-inner{position:absolute;width: 100%;height: 100%;background: url(../images/hkstp/output_webp/kv/obj/8a.webp) left center no-repeat;background-size:auto 21.5% ;animation: widthReveal 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;}
   
  
.kv-obj14{left: 10.8%;top: 40.5%;width: 19%;height: 32.5%;}
.kv-obj14 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj14.webp) center center no-repeat;background-size: contain;}
.kv-obj14 .kv-inner-obj-14{position:absolute;width: 160%;
  height: 151%;
  top: -25%;
  left: -30%;background: url(../images/hkstp/output_webp/kv/obj/3.webp) center center no-repeat;background-size: contain;;}
.kv-obj14 .kv-inner-obj-15{position:absolute;width: 100%;width: 50%;
  height: 30%;
  top: 10%;
  left: -14%;background: url(../images/hkstp/output_webp/kv/obj/2.webp) center center no-repeat;background-size: contain;}
.kv-obj14 .kv-inner-obj-15-inner{position:absolute;width: 100%;height: 100%;background: url(../images/hkstp/output_webp/kv/obj/1.webp) left center no-repeat;background-size:auto 42.5% ;animation: widthReveal 10s cubic-bezier(0.65, 0, 0.35, 1) infinite;}




.kv-obj15{left: 30.5%;top: 37.5%;width: 0%;height: 28.5%;transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);}
.kv-obj15.active{width: 38.3%;background: #d2e654;border-radius: 20px;}
.kv-obj15 .kv-inner-bg{background: url(../images/hkstp/output_webp/kv/kv-obj15.webp) center center no-repeat;background-size: contain; }

.hero-text{position: absolute;top: 52%;left: 46%;transform: translate(-50%, -50%);}
.hero-text .inner-text{width: 100%;height: 100%;overflow: hidden;}
.hero-text .inner-text-wrap{width: 100%;height: 100%;transform: translateY(120%);transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);}
.hero-text.active .inner-text-wrap{transform: translateY(0);}
.hero-text h1{font-size: 52px;font-weight: 700;color: #000;margin-bottom: 10px;}
.hero-text h3{font-size: 24px;font-weight:500;color: #000;line-height: 1.2;}

.menu-container{position: fixed;left: 0;top:50%;transform: translateY(-50%);z-index: 99;opacity: 0;pointer-events: none;transition: opacity 0.5s ease;}
.menu-container.visible{opacity: 1;pointer-events: auto;}
.menu-container .menu-item{padding-left: 60px;position: relative;margin: 15px 0;cursor: pointer;transition: all 0.3s ease;}
.menu-container .menu-item h5{transition: color 0.3s ease;opacity: 0.5;color: #000;font-size: 13px;}
.menu-container.section-2-passed .menu-item h5{color: #fff;}
.menu-container .menu-item::after{content: "";position: absolute;width: 50px;height:1px;left: 0;top: 50%;background-color: #000;transition: width 0.3s ease, background-color 0.3s ease;}
.menu-container.section-2-passed .menu-item::after{background-color: #fff;}
.menu-container .menu-item:hover h5,.menu-container .menu-item.active h5{opacity: 1;}
.menu-container .menu-item.active::after{width: 30px;}

.kv-cloud1{position: absolute;width: 100%;top: 0;left: 0;z-index: -1;animation: floatDown 12s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}
.kv-cloud2{position: absolute;width: 100%;top: -50%;left: 0;z-index: -1;animation: floatUp 14s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}

/* section intro */
#section-intro{padding-bottom: 120px;background: url(../images/hkstp/output_webp/ssi-bg.webp) bottom center no-repeat;background-size: cover;padding-top: 120px;overflow: visible;z-index: 1;}
#section-intro .context{  position: relative;
  z-index: 2;
}

.ssi-graph-1 .layer-3-p{width: 50%;top: 15%;overflow: hidden;height: 38%;left: 18%;}
.ssi-graph-1 .layer-3-p img{transform: translateY(100%);}
.ssi-graph-2 .layer-3-p{width: 100%;
  top: 12%;
  overflow: hidden;
  height: 57%;}
.ssi-graph-2 .layer-3-p img{transform: translateY(100%);}
.ssi-graph-1-mask{position: absolute;width: 0%;height: 100%;top:0;left: 0;overflow: hidden;}
.ssi-graph-1-mask img{width: 628px;}

.ssi-cloud1-wrap,.ssi-cloud2-wrap{position: relative;z-index: 1;}
.ssi-cloud1{position: absolute;width: 100%;top: 0;left: 0;animation: floatUp 10s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}
.ssi-cloud2{position: absolute;width: 100%;top: 0;left: 0;animation: floatDown 8s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}

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

@keyframes floatDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(80px); }
}

.intro-1{position: absolute;bottom: 0;width: 100%;}

/* section 1 */
#section-1{background: #78d6fa url(../images/hkstp/output_webp/ss1-bg-bottom.webp) bottom center no-repeat;background-size: cover;}
.section-intro{position: relative;}
#section-1 .sup-bg{position: relative;}
#section-1 .sup-bg .sup-bg-img{position: absolute;width: 100%;top: 0;left: 50%;z-index: 0;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
#section-1 .section-title-wrap{margin: 0 auto;position: relative;text-align: center;margin-bottom: 60px;}
#section-1 .section-title-tag{height: 52px;margin: 20px 0;}
.section-end img{width: 100%;}
#section-1  .ss1-obj1{width: 420px;  left: calc(50% - 590px);  top: 140px;}
.ss1-obj1 img{width: 100%;}
#section-1 .ss1-graph-1{width: 110%;margin-left: -11%;}
#section-1  .ss1-obj2{width: 1000px; right: -1000px;  top: 60px;z-index: 3;}
.ss1-obj2 img{width: 100%;}
.ss1-obj6{width: 270px;left:-80px;top:20px;z-index: 3;overflow: hidden;}
.ss1-obj6 img{width: 100%;}
.section-title-obj6-layer{position: absolute;height: 100%;top:0;left: 0;z-index: 2;background: url(../images/hkstp/output_webp/ss1-c-graph-2.webp) left center no-repeat;background-size: auto 100%;animation: widthReveal 10s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}
.ss1-obj7{width: 200px;right:-0;top:0;z-index: -1;overflow: hidden;}
.ss1-obj7 img{width: 100%;}
.ss1-obj8{width: 200px;right:-0;bottom:0;z-index: -1;overflow: hidden;}
.ss1-obj8 img{width: 100%;}
@keyframes widthReveal {
  0% { width: 0%; }
  100% { width: 100%; }
}


.ss1-graph-1 .layer-3-p{width: 100%;top: 30%;overflow: hidden;height: 50%;}
.ss1-graph-1 .layer-3-p img{transform: translateY(100%);}
.ss1-graph-2 .layer-3-p{height: 36%;top: 27%;left: 56%;overflow: hidden;width: 60%;}
.ss1-graph-2 .layer-3-p img{transform: translateY(100%);}
.ss1-graph-2 .layer-4-p{z-index: 2;}
.ss1-graph-2 .layer-1-p,.ss1-graph-2 .layer-2-p{z-index: 3;}
#section-1 .ss1-graph-2{width: 95%;}
.sup-bg-ss1 {z-index: 1;}
.sup-bg-ss1 .sup-bg-img{position: absolute;width: 100vw;top: 50%;left: 50%;z-index: 0;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: -1;}


.ss1-cloud1-wrap,.ss1-cloud2-wrap{position: absolute;width: 100%;left: 0;}
.ss1-cloud1-wrap{bottom: 60vw;}
.ss1-cloud2-wrap{bottom: 30vw;}
.ss1-cloud1{position: absolute;width: 100%;bottom: 0;left: 0;animation: floatUp 10s  cubic-bezier(0.65, 0, 0.35, 1) infinite;z-index: 2;}
.ss1-cloud2{position: absolute;width: 100%;bottom: 0;left: 0;animation: floatDown 8s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}
/* section 2 */

#section-2{padding-bottom: 60px;background: #fe4502 }
#section-2 .ss2-section-end{position: absolute;bottom: 0;width: 100%;left:50%;transform: translateX(-50%);min-width: 1820px}

#section-2 .section-title-wrap{margin: 0 auto;position: relative;text-align: center;margin-bottom: 60px;}
#section-2 .section-title-tag{height: 52px;margin: 20px 0;}
#section-2 p{color:#FFF}
#section-2 .sup-bg{position: relative;}
#section-2 .sup-bg .sup-bg-img,#section-2 .sup-bg .sup-bg-img-2{position: absolute;width: 100%;top: -24vw;left: 0;z-index: 0;}
#section-2 .sup-bg .sup-bg-img-2{animation: slowGlow2 4s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}
@keyframes slowGlow2 {
  0%, 100% { opacity: 0;  }
  50% { opacity: 1;  }
}
#section-2 .sup-bg .sup-bg-img-3{position: absolute;width: 100%;top: -400px;left: 0;z-index: 1;height: 800px;}
#section-2 .inner-qoute .qoute{font-size: 37px;font-weight: 600;color:#9aeef4;line-height: 1.1}
#section-2 .inner-qoute h4{font-size: 24px;font-weight: 600;color:#9aeef4}
#section-2  .ss2-obj1{width: 580px;right: calc(50% - 600px);top: -180%;}
#section-2  .ss2-obj2{width: 100%;  left: 0%; top: 0%;z-index: 2;position: absolute;animation: slowGlow 4s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}

@keyframes slowGlow {
  0%, 100% { opacity: 0; filter: brightness(0.8) blur(0); }
  50% { opacity: 1; filter: brightness(1.2) blur(0px); }
}
.ss2-obj1 img{width: 100%;}
.sup-flare{position: absolute;right: 0%;top: 0%; width: 50%;;}

.owl{position: relative;}
.owl::before {
  content: "　";
  position: absolute;
  width: 40%;
  left: 0;
  top: -55%;
  height: 150%;
  background: url(../images/hkstp/output_webp/left-ds.webp) left center no-repeat;
  background-size: 100% 100% ;

  z-index: 9;
  pointer-events: none;
  background-origin: 100%;
}
.owl::after {
  content: "";
  position: absolute;
  width: 40%;
  right: 0;
  top: -55%;
  height: 150%;
  background: url(../images/hkstp/output_webp/right-ds.webp) right center no-repeat;
  background-size: 100% 100% ;
  z-index: 9;
  pointer-events: none;
  background-origin: 100%;
}
.owl{padding-bottom: 30px;position: relative;margin-top: 30px;}
.owl-carousel{margin-bottom: 20px;}
#section-2 .slider-item{width: 100%;aspect-ratio: 1200/800;background: #EEE;opacity: 1;}
#section-2 .item { opacity: 1; transition: .4s ease all; margin: 0 0; transform: scale(0.8);}
#section-2 .center .item { opacity: 1; transform: scale(1); }
#section-2 .center .item .slider-item{ opacity: 1; }

#section-2-dots { text-align: center; margin-top: 20px;position: absolute;left: 50%;transform: translateX(-50%) ; bottom: 30px;}
#section-2-dots .owl-dot {cursor:  pointer;; width: 8px; height: 8px; border-radius: 50%; background: rgba(99,99,99,1); display: inline-block; margin: 0 8px; border: none; }
#section-2-dots .owl-dot.active { background: #ffffff; transform: scale(1.1); }
.ss2-graph-1 .layer-1-p-h{z-index: 3;}
.ss2-graph-1 .layer-3-p{position: absolute; width: 50%;height: 41%;top: 36%;left: 18%;overflow: hidden;}
.ss2-graph-2 .layer-3-p{position: absolute; width: 100%;height: 55%;top: 8%;left: 0%;overflow-y: hidden;}
.ss2-graph-2 .data-wrap  img{width: 95%;left: 7%}

.ss2-slide-b video{width: 100%;border-radius: 30px;}
.ss2-slide-b{ width: 100%; border-radius: 20px;overflow: hidden;position: relative;}
.ss2-slide-b img{width: 100%;}
.ss2-slide-b .slide-b-top{position: absolute;width: 50%;top:0%;left: 0;z-index: 2;height: 100%;background-size: 100% auto;border-right: 4px solid #FFF;cursor: ew-resize;transition: border-color 0.2s ease;}

.ss2-slide-b .slide-b-top.resizing{border-right-color: #FFF;}
.ss2-slide-b .slide-b-top .resize-handle{position: absolute;width: 12px;height: 100%;top: 0;right: -6px;cursor: ew-resize;z-index: 3;}
.ss2-slide-b .slide-b-top .resize-handle::after{content: "";position: absolute;width: 50px;height: 50px;top: 50%;right: -21px;transform: translateY(-50%);background: url(../images/hkstp/output_webp/indicator.webp) center center no-repeat;background-size: 100% 100%;animation: dragHint 2s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}

@keyframes dragHint {
  0%, 100% {transform: translateY(-50%) translateX(0);}
  50% {transform: translateY(-50%) translateX(-5px);}
  75% {transform: translateY(-50%) translateX(5px);}
}

.ss2-slide-b:hover .resize-handle::after {
  animation: dragPulse 1.5s  cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes dragPulse {
  0%, 100% {opacity: 1; transform: translateY(-50%) scale(1);}
  50% {opacity: 0.8; transform: translateY(-50%) scale(1.1);}
}
.ss2-obj9{width: 200px;left:-80px;bottom:40px;z-index: 3;overflow: hidden;}
.ss2-obj9 img{width: 100%;}
.section-title-obj9-layer{position: absolute;height: 100%;top:0;left: 0;z-index: 2;background: url(../images/hkstp/output_webp/ss2-img-3.webp) left center no-repeat;background-size: auto 100%;animation: widthReveal 10s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}



/* section 3 */

.ss1-top{position: absolute;top:0%;width: 100%;left:50%;transform: translateX(-50%);z-index: 2;opacity: .6;;}
.ss1-title-bg{position: absolute;top:30vw;width: 100%;left:50%;transform: translateX(-50%);z-index: 1;opacity: .6;}
#section-3 .ss3-section-top{position: absolute;top:0;width: 100%;left:50%;transform: translateX(-50%);}
#section-3 .ss3-section-end{position: absolute;bottom: 0;width: 100%;left:50%;transform: translateX(-50%);min-width: 2150px}

#section-3  .inner-qoute h3,#section-3  .inner-qoute h4{text-shadow: 2px 2px 10px #333 ;}

#section-3{background: #1778d8; background-size: cover;position: relative;padding-bottom: 180px;}
#section-3 .section-title-wrap{margin: 0 auto;position: relative;text-align: center;margin-bottom: 60px;}
#section-3 .section-title-tag{height: 52px;margin: 20px 0;}
.banner {margin: 60px auto 120px;position: relative;text-align: center;}
.section-end{width: 100%;text-align: center ;}

#section-3 .inner-qoute .qoute{font-size: 37px;font-weight: 600;color:#004595;line-height: 1.1}
#section-3 .inner-qoute h4{font-size: 24px;font-weight: 600;color:#004595}
.ss3-graph-1 .layer-1-p-h{z-index: 3;}
.ss3-graph-1 .layer-3-p{position: absolute; width: 53%;  height: 27%;  top: 43%;  left: 0;overflow: hidden;}
.ss3-graph-2 .layer-1-p-h{z-index: 3;}
.ss3-graph-2 .layer-3-p{position: absolute; width: 40%;  height: 38%;  top: 60%;  left: 52%;;overflow: hidden;}
#section-3  .ss3-obj1{width: 330px;  right: 120px;  bottom: -120px;}
#section-3  .ss3-obj2{width: 160px;  left: 56%;  top: 16%;}
#section-3  .ss3-obj3{left: -2000px;bottom: 20px;z-index: -1;}
#section-3  .ss3-obj4{right: -660px;  top: -20px;  z-index: -1;  width: 1170px;overflow: hidden;}
#section-3  .ss3-obj5{left: -260px;  top: 60px;  z-index: -1;  width: 260px;}
.ss3-obj1 img,.ss3-obj2 img,.ss3-obj4 img{width: 100%;}

#section-3  .ss3-obj4 img{width: 1380px;float: right;}


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

@keyframes floatDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(80px); }
} 



#section-3  .ss3-obj3 img{height: 360px;width: auto !important;}
.ss3-cloud1-wrap,.ss3-cloud2-wrap{position: absolute;width: 100%;top:50%;}
.ss3-cloud2-wrap{top:2%;;z-index: 2;}
.ss3-cloud1-wrap{top: 20%;z-index: 1;}

.ss3-cloud1{position: absolute;width: 100%;top: 0;left: 0;animation: floatUp 10s  cubic-bezier(0.65, 0, 0.35, 1) infinite;z-index: 2;}
.ss3-cloud2{position: absolute;width: 100%;top: 20vw;left: 0;animation: floatDown 8s  cubic-bezier(0.65, 0, 0.35, 1) infinite;}
.ss3-obj8{width: 180px;right: -40px;top: -38px;z-index: 3;overflow: hidden;}
.ss3-obj8 .image-swap-container{width: 100%;height: 180px;animation: swapImages 4s steps(1) infinite;background-size: contain;background-repeat: no-repeat;background-position: center;}

@keyframes swapImages {
  0%, 100% { background-image: url(../images/hkstp/output_webp/ss3-img-2.webp); }
  25% { background-image: url(../images/hkstp/output_webp/ss3-img-2a.webp); }
  50% { background-image: url(../images/hkstp/output_webp/ss3-img-2b.webp); }
  75% { background-image: url(../images/hkstp/output_webp/ss3-img-2c.webp); }
}



/* info grahp */
.ssi-graph-1 .data-wrap h1.bold{ color:#fb6228; font-size: 154px; font-weight: 900;position: absolute;} 
.ssi-graph-1 .info-text-wrapper{position: absolute;width: 100%;bottom: -15px;left: 25%;z-index: 2;text-align: left;}
.ssi-graph-1 .info-text-wrapper h4{font-weight: 900;font-size: 24px;}
.ssi-graph-1 .info-text-wrapper p{font-size: 16px;font-style: italic;}

.ssi-graph-2 .info-text-wrapper{position: absolute;top:47%;left: 15%;z-index: 2;text-align: left;}
.ssi-graph-2 .info-text-wrapper h3{font-weight: 900;;}
.ssi-graph-2 .info-text-wrapper.layer-1-p-h {position: absolute;top: -0;;left: 0%;z-index: 2;text-align: left;}
.ssi-graph-2 .info-text-wrapper.layer-2-p-h {position: absolute;bottom: -0;top: auto;right: 0%;left: auto;z-index: 2;text-align: left;}
.ssi-graph-2 .info-text-wrapper h4{font-weight: 900;font-size: 24px;}
.ssi-graph-2 .info-text-wrapper p{font-size: 16px;font-style: italic;}


.ss3-graph-1 .info-text-wrapper{position: absolute;top:0%;left: 2%;z-index: 2;text-align: left;width: 90%;}
.ss3-graph-1 .info-text-wrapper h3{font-weight: 900;font-size: 34px;line-height: 1.1;color: #4b62dd;}
.ss3-graph-1 .info-text-wrapper.layer-1-p-h{position: absolute;top:72%;left: 2%;z-index: 2;text-align: left;}
.ss3-graph-1 .info-text-wrapper h2{font-weight: 900;font-size:58px;line-height: .9;color: #d2f622;}
.ss3-graph-1-end.info-text-wrapper h3{font-weight: 900;font-size: 34px;line-height: 1.1;color: #4b62dd;position: absolute;bottom: -50px;left: 20px;}
.ss3-graph-1{margin-bottom: 100px;}

.ss3-graph-2 .info-text-wrapper{position: absolute;top:-2%;left: 2%;z-index: 2;text-align: left;}
.ss3-graph-2 .info-text-wrapper h3{font-weight: 900;font-size: 28px;line-height: 1.1;color: #d2f622;}
.ss3-graph-2 .info-text-wrapper.layer-1-p-h{position: absolute;top:57%;left: 36%;z-index: 2;text-align: left;}
.ss3-graph-2 .info-text-wrapper h2{font-weight: 900;font-size:48px;line-height: .9;color: #d2f622;}


.ss2-graph-1 .info-text-wrapper.layer-1-p-h{position: absolute;top: 9%;left: 22%;z-index: 2;text-align: left;}
.ss2-graph-1 .info-text-wrapper.layer-3-p-h{position: absolute;bottom: -7%;left: 22%;z-index: 2;text-align: left;}
.ss2-graph-1 .info-text-wrapper.layer-2-p-h{position: absolute;bottom: 29%;  left: 64%;;z-index: 2;text-align: left;}
.ss2-graph-1 .info-text-wrapper h3{font-weight: 900;font-size: 28px;line-height: 1.1;color: #FFF;}
.ss2-graph-1 .info-text-wrapper h2{font-weight: 900;font-size: 42px;line-height: 1.1;color: #FFF;}


.ss2-graph-2 .info-text-wrapper.layer-1-p-h{position: absolute;bottom: 13%;  left: 10%;width: 110%;;z-index: 2;text-align: left;}
.ss2-graph-2 .info-text-wrapper h3{font-weight: 900;font-size:28px;line-height: 1.1;color: #FFF;}
.ss2-graph-2 .info-text-wrapper.inner-1{position: absolute;top:0;left: 0%;z-index: 2;height: 100%;}
.ss2-graph-2 .info-text-wrapper.inner-2{position: absolute;top:0;right: 0%;z-index: 2;height: 100%;}
.ss2-graph-2 .info-text-wrapper.inner-1 h3{font-weight: 900;font-size:28px;line-height: 1.1;color: #d2f622;}
.ss2-graph-2 .info-text-wrapper.inner-2 h2{font-weight: 900;font-size:42px;line-height: 1;color: #d2f622;text-align: left;}


.ss1-graph-1 .info-text-wrapper.layer-1-p-h{position: absolute;bottom: -5%;  left: 10%;width: 100%;;z-index: 2;text-align: left;}
.ss1-graph-1 .info-text-wrapper.layer-2-p-h{position: absolute;top: 0%;  left: 10%;width: 100%;;z-index: 2;text-align: left;}
.ss1-graph-1 .info-text-wrapper h3{font-weight: 900;font-size:28px;line-height: 1.1;color: #FFF;}
.ss1-graph-1 .info-text-wrapper h3 span{font-weight: 900;font-size:48px;}

.ss1-graph-1 .info-text-wrapper.inner-1{position: absolute;top:0;left: 3%;z-index: 2;height: 100%;}
.ss1-graph-1 .info-text-wrapper.inner-1 h1{font-weight: 900;font-size:28px;line-height: 1.1;color: #d2f622;}


.ss1-graph-2 .info-text-wrapper.layer-1-p{position: absolute;bottom: -10%;  left: 56%;width: 100%;;z-index: 2;text-align: left;}
.ss1-graph-2 .info-text-wrapper.layer-2-p{position: absolute;top: -10%;  left: 56%;width: 100%;;z-index: 2;text-align: left;}
.ss1-graph-2 .info-text-wrapper h3{font-weight: 900;font-size:28px;line-height: 1.05;color: #FFF;}
.ss1-graph-2 .info-text-wrapper h3 span{font-weight: 900;font-size:32px;}