.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;}
    .scroll-down-button{display: none;}

html,body{
  overflow: auto;
  -webkit-overflow-scrolling: auto; /* 或者直接唔加 */
}

/* Gobal */

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

.nav-top-bar{position: fixed;text-align: center;top:46px;width: 100%;z-index:99999;display: none;pointer-events: none}
.nav-listing li{display: inline-block;float: none;list-style:none;margin:0 .5rem;background: #FFF;border-radius: 25px;width: 28px;height: 28px;pointer-events: auto;cursor: pointer}
.nav-listing li a{margin-bottom: 0;;line-height: 1;color: #1d38b3;font-size: 12px;margin-top: -5px}
.nav-title{display: none}
.nav-listing li.active .nav-title{display: inline}
.nav-listing li.active {width: auto;background:#6b3486;padding: 0 1rem}
.nav-listing li.active a{color: #FFF;font-weight: bold;}
.nav-listing li a:hover{text-decoration: none}


/* footer */
.credit-list {border-top: 2px solid #383838;padding: 20px 0 0 0;margin-bottom: 0;}
.credit-list li{list-style: none;padding: 10px 0;border-bottom: 2px dotted #383838;}
.credit-list li p,.credit-list li a{color: #383838;}
.credit-list li a{text-decoration: underline}
.credit-list li:last-child{border-bottom: none;}
.credit-list li p{position: relative;}
.credit-list li p span{position: absolute;left: 200px;top: 0;}
.ros-banner{width: 300px;}


/* kv */
#kv{height: 100vh;margin-top: 0 !important;}
.kv-bg{position: absolute;height: 100%;top:-60px;left:50%;transform: translateX(-50%);z-index: 1;pointer-events: none;width: 100%;text-align: center;background: url(../images/imda/City.webp) center center no-repeat;background-size: cover;width: 100%}
.kv-bg::before{content: "";position: absolute;bottom:-180px;left:0;width: 100%;height: 180px;background: linear-gradient(to top, rgba(12,12,57, 0), rgba(12,12,57, 1));}
.kv-bg img.kv-city{height:100vh ;width: auto !important ;}
.kv-tunnel{position: absolute;top:40px;left:50%;transform: translateX(-50%);z-index: 2;pointer-events: none;}
.kv-tunnel img{height: 100vh;position: absolute;left: 50%;transform: translateX(-50%);width: auto;}
.kv-info{position: absolute;width: 100%;bottom:0;left:50%;transform: translateX(-50%);z-index: 3;}
.kv-text{position: absolute;width: 50%;top:50%;left: 50%;transform: translate(-50%, -50%);text-align: center;pointer-events: auto;}
.kv-text h2{font-size: 52px;}
.kv-text h4{font-size: 22px;}
.morning-studio-editors:hover{color: auto;}

/* Floating animations */
@keyframes float1 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float2 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(30px) rotate(-2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.kv-object-1{position: absolute;bottom:-200px;left:-20px;width: 300px;z-index: 4;animation: float1 6s ease-in-out infinite;}
.kv-object-2{position: absolute;top:-150px;right:-120px;width: 370px;z-index: 4;animation: float2 8s ease-in-out infinite;}


.section-banner{background: url(../images/imda/ss1-bg-2.webp) center center repeat-x;background-size: cover;}

/* section 1 */
#section-1{position: relative;background: url(../images/imda/ss1-bg-grid.webp) top 200px center repeat;background-size: 1080px auto;padding-top: 100px;padding-bottom: 120px;}
.section-1-city{width: 100%;position: relative;}
.section-1-city img.ss1-city-bg,.ss1-obj-downcity{width: 110vw;height: auto;object-fit: contain;position: relative;;left: 50%;transform: translateX(-50%);}



#section-1 .ss1-obj1{position: absolute;top: 45%;left: 47%;transform: translate(-50%, -50%);width: 300px;transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);}
#section-1 .ss1-obj2{position: absolute;top: 48%;left: 58%;transform: translate(-50%, -50%);width: 300px;transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);}
#section-1 .ss1-obj1.active {top:40%;left: calc( 40% - 300px);}
#section-1 .ss1-obj2.active {top:50%;left: calc( 60% + 300px);}
.ss1-content{opacity: 0;transition: opacity 1.2s cubic-bezier(0.83, 0, 0.17, 1);}
.ss1-content.active{opacity: 1;}

.ss1-obj-down{position: absolute;top: 0%;left: 0;width: 100%;height: 100%;opacity: 0;;}
.ss1-obj-downcity{position: absolute !important;top: 0%;left: 50%;height: 100%;filter: brightness(0.5) contrast(1.4);transition:  filter .6s cubic-bezier(0.83, 0, 0.17, 1);}
.ss1-obj-downcity.active{filter: brightness(1) contrast(1);}

.ss1-city-obj2.active img{animation: float1 6s ease-in-out infinite;}
.ss1-city-obj1.active img{animation: float2 4s ease-in-out infinite;}

.section-1-leadin{width: 100%;min-height: 100vh;display: flex;justify-content: center;align-items: center;}

.main_row{position: relative;}
.ss-2-bg{position: absolute;top: -200px;left: 0%;width: 100%;height: 400px;z-index: 10 !important;}

.kv-block-1{position: absolute;top: 50%;  left: calc( 50% - 31vh);transform: translate(-50%, -50%);width: 8vh;}
.kv-block-2{position: absolute;top: calc(50% + 30vh);left: calc(50% - 32vh);transform: translate(-50%, -50%);width: 20vh;}
.kv-block-3{position: absolute;top: calc(50% + 19.5vh); left: calc(50% - -32vh);transform: translate(-50%, -50%);width: 8vh;}

.kv-block-1 img{animation: float1 6s ease-in-out infinite;}
.kv-block-2 img{animation: float2 6s ease-in-out infinite;}
.kv-block-3 img{animation: float1 4s ease-in-out infinite;}

/* section 2 */
.section-2-intro{width: 100%;height: 100vh;background: #222151;display: flex;justify-content: center;align-items: center;z-index: 9;}
.section-2-inner{width: 100%;max-width: 1200px;}
.section-2-bg{height: 100%;width: auto;position: absolute;top:0;left:0;width: 100%;}
.ss2-symbol-block{position: absolute;width: 100%;height: 100%;top:50%;left:50%;transform: translate(-50%, -50%);}
.ss2-block-item{position: absolute;width: 100%; top: 50%;left: 50%;transform: translate(-50%, -50%);}
.ss2-folder-inner{position: relative;float: left;}
.ss2-folder-inner-block{position: relative;float: left; top:50%;transform: translateY(-50%);margin: 0 100px;width: calc(100vw - 200px);height: 100vh;display: flex;justify-content: center;align-items: center;;}

.ss2-block-item-1,.ss2-block-item-2,.ss2-block-item-3{top:100%}
.ss2-block-item{height: 100%;}
.ss2-content{opacity: 0;transition: opacity 1.2s cubic-bezier(0.83, 0, 0.17, 1);}
.ss2-content.active{opacity: 1;}


.ss2-folder-inner-content {width: 100%;max-width: 516px;}

.section-2-folder{width: 100%;height: 100vh;position: relative;overflow: hidden;background: #58569a;}
.ss2-folder-inner{position: absolute;width: 2600px;height: 100%;top:100vh;left:0;}
.ss2-folder-item1{z-index: 1;top:5vh;}
.ss2-folder-item2{z-index: 2;top:88vh;}
.ss2-folder-item3{z-index: 3;top:90vh;}
.ss2-folder-bg{width: auto;height: 100vh;position: absolute;bottom: 0;left: 0;z-index: -1;}
.ss2-folder-bg2{width: auto;height: 100vh;position: absolute;bottom: 0;left: 0;z-index: -1;display: none;}
.ss2-bc-1{left: 95vh;position: absolute;top:50%;transform: translateY(-50%);width: 60vh;;max-width: 516px;}
.ss2-folder-grah-wrap{width: auto;height: 100vh;}
.ss2-folder-grah{position: relative;width: 75vh;;left: 100px;top: 20%;}
.ss2-folder-grah-float{position: absolute;top:0;left: 0;animation: float1 6s ease-in-out infinite;}
.ss2-folder-qoute{position: absolute;width: 45vh;left: 190vh;top: 52%;transform: translateY(-50%);}

.ss2-folder-inner-bg{width: 100%;height: 20vh;background: url(../images/imda/ss2-bg-b.webp) top center no-repeat;background-size: 100% auto;position: absolute;top:0;left: 0;;;}


.section-2-imagemap{width: 100%;height: 100vh;background:  url(../images/imda/ss2-zoomimage-bg.webp) center center no-repeat;background-size: 100% 100%;position: relative;}
.ss2-zoomimage-wrap{width: 100%;height: 100%;position: relative;display: flex;justify-content: center;align-items: center;}
.ss2-zoomimage{width: 780px;display: flex;justify-content: center;align-items: center;position: relative;margin: 0 auto;}
.ss2-zoomimage img{width: auto;height: 780px;object-fit: contain;display: block;}
.ss2-zoomimage .center-img{width: 378px;height: 331px;position: absolute;top: calc(50% + 2px);left: calc(50% + 2px);transform: translate(-50%, -50%);overflow: hidden;}
.ss2-zoomimage .center-img .center-img-inner{width: 100%;height: 100%;position: absolute;top:0;left:0;background: url(../images/imda/ss2-bg1.webp) center  center no-repeat;background-size: auto 100%;}
.ss2-zoombg{width: 100%;height: 100%;position: absolute;top:0;left:0;z-index: 1;opacity: 0;transition: opacity 1.2s cubic-bezier(0.83, 0, 0.17, 1);;}
.ss2-zoombg-2{background: url(../images/imda/ss2-bg2.webp) center center no-repeat;background-size: cover;}
.ss2-zoombg-3{background: url(../images/imda/ss2-bg3.webp) center center no-repeat;background-size: cover;}
.ss2-zoombg-4{background: url(../images/imda/ss2-bg4.webp) center center no-repeat;background-size: cover;}

.ss2-zoombg-2.active,
.ss2-zoombg-3.active,
.ss2-zoombg-4.active{opacity: 1;;}

.ss2-zoomin-img{position: absolute;}
.ss2-zoomin-1{top: 0;left: 107px;width: 451px;height: 222px;background: url(../images/imda/ss2-zoom-1.webp) center center no-repeat;background-size: cover;}
.ss2-zoomin-2{top: 68px;left: 565px;width: 255px;height: 154px;background: url(../images/imda/ss2-zoom-2.webp) center center no-repeat;background-size: cover;}
.ss2-zoomin-3{top: 226px;left: -13px;width: 209px;height: 332px;background: url(../images/imda/ss2-zoom-3.webp) center center no-repeat;background-size: cover;}
.ss2-zoomin-4{top: 222px;left: 586px;width: 212px;height: 336px;background: url(../images/imda/ss2-zoom-4.webp) center center no-repeat;background-size: cover;}
.ss2-zoomin-5{top: 563px;left: -40px;width: 262px;height: 155px;background: url(../images/imda/ss2-zoom-5.webp) center center no-repeat;background-size: cover;}
.ss2-zoomin-6{top: 563px;left: 227px;width: 452px;height: 217px;background: url(../images/imda/ss2-zoom-6.webp) center center no-repeat;background-size: cover;}

.ss2-bg-overlay{opacity: 0;;position: absolute;width: 100%;height: 100%;top:0;left:0;z-index: 2;background: rgba(125,90,149,0.7);transition: opacity 0.3s ease;}
.ss2-bg-overlay2{opacity: 0;;position: absolute;width: 100%;height: 100%;top:0;left:0;z-index: 2;background: url(../images/imda/effectchannel.webp) center center repeat;background-size: 200px;transition: opacity 0.3s ease;}

.ss2-step-2 .ss2-bg-overlay2,
.ss2-step-3 .ss2-bg-overlay2,
.ss2-step-4 .ss2-bg-overlay2
{
    opacity: 1;
}


.ss2-zoomcontent{position: absolute;width: 680px;height: 680px;top: calc(50% + 40px);left:50%;transform: translate(-50%, -50%);z-index: 2;;opacity: 0;transition: opacity 0.3s ease;}
.ss2-zoomcontent-wrap{overflow: hidden;width:680px;height: 640px;margin-top: 20px;}
.ss2-step-2 .ss2-zoomcontent,
.ss2-step-3 .ss2-zoomcontent,
.ss2-step-4 .ss2-zoomcontent,
.ss2-step-5 .ss2-zoomcontent,
.ss2-step-6 .ss2-zoomcontent,
.ss2-step-7 .ss2-zoomcontent,
.ss2-step-8 .ss2-zoomcontent,
.ss2-step-9 .ss2-zoomcontent,
.ss2-step-10 .ss2-zoomcontent,
.ss2-step-11 .ss2-zoomcontent,
.ss2-step-12 .ss2-zoomcontent{opacity: 1;}

  .ss2-zoomcontent::before {
    content: "　";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/imda/ss2-text-box.webp) center center no-repeat;
    background-size: auto;
    background-size: calc(680px - 20px) 680px;
  }


.ss2-zoom-content-block{width: 100%;height: 640px;position:relative;padding: 0px 26px; }
.ss2-zoom-content-inner{transition: transform .8s cubic-bezier(0.83, 0, 0.17, 1);;}
.ss2-step-3 .ss2-zoom-content-inner {transform: translateY(-640px);}
.ss2-step-4 .ss2-zoom-content-inner {transform: translateY(-1280px);}
.ss2-step-5 .ss2-zoom-content-inner {transform: translateY(-1920px);}
.ss2-step-6 .ss2-zoom-content-inner {transform: translateY(-2560px);}
.ss2-step-7 .ss2-zoom-content-inner {transform: translateY(-3200px);}
.ss2-step-8 .ss2-zoom-content-inner {transform: translateY(-3840px);}

.ss2-content-wrap{display: flex;justify-content: center;align-items: center;height: 100%;overflow: hidden;position: relative;}
.ss2-zoom-content-inner .ss2  .inner{width: 100%;max-width: 1200px;}
.ss2-frame1{position: absolute;left: calc(50% - 440px);top:calc(50% + 200px);transform: translate(-50%, -50%);z-index: 1;width: 280px;;}
.ss2-frame2{position: absolute;left:calc(50% + 420px);top:calc(50% - 120px);transform: translate(-50%, -50%);z-index: 2;width: 240px;}
.ss2-frame1-content{position: absolute;width: 260px;height: 170px;background: #333;top: 58px;left: 10px;z-index: 2;border-radius: 5px;overflow: hidden;}
.ss2-frame2-content{position: absolute;width: 220px;height: 140px;background: #333;top: 20px;left: 10px;z-index: 2;border-radius: 5px;overflow: hidden;}

.ss2-frame1-inner{position: absolute;top: 0;left: 0;z-index: 2;overflow: hidden;width: calc(260px * 8);height: 100%;transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);}
.ss2-frame1-inner-content{width: 260px;height: 100%;position: relative;float: left;}

.ss2-frame2-inner{position: absolute;top: 0;left: 0;z-index: 2;overflow: hidden;width: calc(220px * 8);height: 100%;transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);}
.ss2-frame2-inner-content{width: 220px;height: 100%;position: relative;float: left;}


.ss2-step-3 .ss2-frame1-inner{transform: translateX(-260px);}
.ss2-step-4 .ss2-frame1-inner{transform: translateX(-520px);}
.ss2-step-5 .ss2-frame1-inner{transform: translateX(-780px);}
.ss2-step-6 .ss2-frame1-inner{transform: translateX(-1040px);}
.ss2-step-7 .ss2-frame1-inner{transform: translateX(-1300px);}
.ss2-step-8 .ss2-frame1-inner{transform: translateX(-1560px);}

.ss2-step-3 .ss2-frame2-inner{transform: translateX(-220px);}
.ss2-step-4 .ss2-frame2-inner{transform: translateX(-440px);}
.ss2-step-5 .ss2-frame2-inner{transform: translateX(-660px);}
.ss2-step-6 .ss2-frame2-inner{transform: translateX(-880px);}
.ss2-step-7 .ss2-frame2-inner{transform: translateX(-1100px);}
.ss2-step-8 .ss2-frame2-inner{transform: translateX(-1320px);}

.ss2-zoom-content-block-bg1 {position: absolute;right: 0;top: 0px;width: 480px;;}
.ss2-zoom-content-block-bg2 {position: absolute;left: 0px;bottom: 0px;width: 500px;}

.ss2-infographic-data{display: inline-block;position: relative;}
.ss2-infographic-data h3{font-size: 36px;margin-bottom: 0;font-style: italic;color: #fff;border-radius: 30px;display: inline;padding: 0 12px;;}

.data-1 h3{position: absolute;left: -66px;  bottom: 10px;background: #6a3586;}
.data-2 h3{position: absolute;left: 118px;  bottom: 10px;background: #b65d71;}
.data-3 h3.dd1{position: absolute;left: 170px;top: 35px;background: #b65d71;width: 188px;}
.data-3 h3.dd2{position: absolute;left: 351px;  top: 35px;background: none;color:#b65d71;}
.data-3 h3.dd3{position: absolute;left: 171px;  bottom: 10px;background: #b65d71;}

.data-4 h3.dd1{position: absolute;right: 0;top: 40px;background: #6a3586;}
.data-4 h3.dd2{position: absolute;right: 146px;bottom: 46px;color: #6a3586;}
.data-4 h3.dd3{background: #6a3586;}
.data-4 h3.dd4{position: absolute;right: 221px;top: 40px;color: #6a3586;font-weight: bold;font-style: normal;}
.data-4 h3.dd5{position: absolute;right: -10px;bottom: 49px;color: #6a3586;font-weight: bold;font-style: normal;}
.dh1{padding-right: 265px;}
.dh2{padding-right: 35px;}


.data-5 h1{padding-left: 98px;}
.data-5 h3.dd1{position: absolute;left: 338px;    bottom: 10px;background: #b65d71;}
.data-5 h3.dd2{position: absolute;left: -10px;  top: 44px;background: none;color:#b65d71;}



.ss2-infographic-sub{font-size: 17px;line-height: 2;font-weight: 500;margin-bottom: 0;font-style: italic}
.ss2-infographic-sub span{background-color: rgba(146, 39, 143, 0.15);padding: 3px 10px;box-decoration-break: clone;-webkit-box-decoration-break: clone;display: inline;}

/* section 3 */
#section-3{z-index: 4;}
.section-3-intro{background: url(../images/imda/ss3-bg.webp) center center repeat-x;background-size:  cover;width: 100%;height: 100vh;;display: flex;justify-content: center;align-items: center;}
.section-3-intro .section-3-intro-bg{background: url(../images/imda/ss3-bg.webp) bottom center repeat-x;background-size:  140% auto;width: 100%;height: 100%;position: fixed;top:0%;left:0;z-index: 1;opacity: 0;transition: opacity .8s cubic-bezier(0.83, 0, 0.17, 1);pointer-events: none;z-index: 4;}
.section-3-intro .section-3-intro-bg-back{background: url(../images/imda/ss3-bg.webp) bottom center repeat-x;background-size:  140% auto;width: 100%;height: 100%;position: absolute;top:0%;left:0;z-index: 1;}

.ss3-folder-inner-bg{width: 100%;height: 100vh;background: url(../images/imda/ss3-bg.webp) bottom center repeat-x;

background-size: 140% auto;position: absolute;top:0;left: 0;opacity: 0;;;}
.ss3-folder-inner-bg.active{opacity: 1;}

.section-3-inner{width: 100%;max-width: 1200px;z-index: 2;}
.section-3-intro-bg.active{opacity: 1;}

.section-3-intro-obj{position: absolute;width: 400px;z-index: 2;}

/* Floating animations for section-3-intro objects */
@keyframes float1 {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

@keyframes float2 {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.section-3-intro-obj1{
    left: 10%; 
    top: 0%;
    z-index: 5;
}
.section-3-intro-obj1 img{animation: float1 6s ease-in-out infinite;}

.section-3-intro-obj2{
    right: 10%; 
    top: 40%;
    z-index: 5;
}
.section-3-intro-obj2 img{animation: float2 7s ease-in-out infinite;}

.section-3-intro-obj3{
    left: 10%; 
    top: 60%;
    z-index: 5;
}
.section-3-intro-obj3 img{animation: float1 8s ease-in-out infinite;}

.section-3-intro-obj4{
    right: 10%; 
    top: 80%;
    z-index: 5;
    
}
.section-3-intro-obj4 img{animation: float2 9s ease-in-out infinite;}

.ss3-content{opacity: 0;transition: opacity 1.2s cubic-bezier(0.83, 0, 0.17, 1);z-index: 5;}
.ss3-content.active{opacity: 1;}

.ss3-block-item{position: absolute;width: 100%; top: 50%;left: 50%;transform: translate(-50%, -50%);}
.ss3-folder-inner{position: relative;float: left;}

.ss3-folder-inner-content {width: 100%;max-width: 516px;}

.section-3-folder{width: 100%;height: 100vh;position: relative;overflow: hidden;z-index: 8;}
.ss3-folder-inner{position: absolute;width: 400vh;height: 100%;top:100vh;left:0;}
.ss3-folder-item1{z-index: 1;top:5vh;}
.ss3-folder-item2{z-index: 2;top:88vh;}
.ss3-folder-item3{z-index: 3;top:90vh;}


#section-3-ending{background: #dce5e6;padding-top: 80px;position: relative;}

.ss3-folder-bg1{width: auto;height: 100vh;position: absolute;top: 0;left: 0;z-index: -1;}
.ss3-folder-bg1-mobile{display: none;}
.ss3-bc-1{left: 111vh;position: absolute;top:55%;transform: translateY(-50%);width: 100%;}
.ss3-bc-2{left: 191vh;position: absolute;top:58%;transform: translateY(-50%);width: 100%;}
.ss3-qoute,.ss3-pp{display: none;}


/* 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: #6b3486;
  width: 0%;
}