#Topping.topping{background-color:#ddd;}
#Scroll{
    width:100vw;
    height:100vh;
    /* 隱藏滾動條 */
    overflow:hidden;
    position:relative;
}
.S11 {
    width:100vw;
    height:100vh; /* 每一區強制滿版 */

}
.S11 .Title{line-height:1.2;font-size:6.5rem;}
.S11 .Text h2{font-size:3rem;}
.S11 .Text h3{font-size:2rem;}

/*Page*/
html, body {width:100%;height:100vh;overflow:hidden;touch-action:none;}
.S1s{
width:100%;
transition:transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1.12);
            will-change:transform;}


.ZH001{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;-webkit-box-align:center;padding:0;height:100vh;background-color:#dcdee0;}
.ZH001::before{content:'';position:absolute;top:-50vh;left:0;z-index:10;width:100%;height:50vh;background-color:#dcdee0; /* 與第一區同色 */}
.ZH001:after{content:'';position:absolute;left:5vw;bottom:-35vh;z-index:-1;display:block;width:40vw;height:40vw;background-color:#eec619 /*ffdd64 #fde281 #f5c800*/;border-radius:50%;
transform-origin:center center;transition:transform 1.8s cubic-bezier(0.2, 1.4, 0.5, 1), background-color 0.6s ease-in-out;will-change:transform, background-color;pointer-events:none;}
.ZH001.bubble-active::after{transform:scale(4.8);background-color:#89aedd;}
/* cubic-bezier(0.34, 1.4, 0.5, 1)*/
.ZH001 .Fade{margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.ZH001 .Fade div{width:100%;}
.ZH001 .Tag{font-size:3rem;}
.ZH001 .Title{position:relative;z-index:1;padding:0 0 35px;line-height:1.2;font-size:13rem;font-weight:900;color:#efefef;overflow:hidden;}
.ZH001 .Title p{position:absolute;left:0;bottom:0;padding:0 0 35px;background:linear-gradient(90deg,#efefef, #222, #d5d5d5, #efefef);background-repeat:no-repeat;background-size:60%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shining 7s linear infinite;}
@-webkit-keyframes shining {0% {background-position-x:-300%;}100% {background-position-x:300%;}}
@-webkit-keyframes shining2 {0% {background-position-x:-500%;}100% {background-position-x:500%;}}
.ZH001 .Title span{display:inline-block;padding:0 0 0 5px;line-height:1.5;font-size:2.5rem;font-weight:600;color:#000;}
.ZH001 .Text{margin:0 auto;width:98% !important;font-size:1.2vw;}
.ZH001 .Text h2{line-height:2;font-size:4.5rem;font-weight:700;font-family:"Noto Sans TC", system-ui, sans-serif;}
.ZH001 .Text h2 span{position:relative;padding:0 7.5px 0 15px;}
.ZH001 .Text h2 span:before{content:'‧';position:absolute;left:0;}
.ZH001 .Text h3{font-size:2.4rem;font-weight:500;}
.ZH001 .Text h3 span{display:block;padding:0 15px;}
.ZH001 .Text .line span{z-index:0;display:block;border:1px solid #fff;}
.ZH001 .Text .line span:nth-child(1){position:absolute;right:-15%;bottom:-15%;width:50vw;height:50vw;border-radius:45% 50% 50% 44%;animation:animate 12s linear infinite}
.ZH001 .Text .line span:nth-child(2){position:absolute;right:-12%;bottom:-15%;width:51vw;height:51vw;border-radius:40% 45% 45% 39%;animation:animate 8s linear infinite}
.ZH001 .Text .line span:nth-child(3){position:absolute;right:-13%;bottom:-15%;width:46vw;height:46vw;border-radius:45% 50% 50% 44%;animation:animate2 10s linear infinite}
.ZH001 .Text .line span:nth-child(4){position:absolute;right:-12%;bottom:-15%;width:50vw;height:50vw;border-radius:40% 45% 45% 39%;animation:animate 13s linear infinite}
.ZH001 .Text .line span:nth-child(5){position:absolute;right:-14%;bottom:-15%;width:49vw;height:49vw;border-radius:60% 65% 65% 56%;animation:animate 15s linear infinite}
.ZH001 .Text .circle span{display:block;border:1px solid #fff;border-radius:10px;}
.ZH001 .Text .circle span:nth-child(1){position:absolute;bottom:45%;animation:snowing 40s linear infinite;background-color:#ccc;opacity:0.6;width:12px;height:12px;}
.ZH001 .Text .circle span:nth-child(2){position:absolute;bottom:24%;animation:snowing 34s linear infinite;background-color:#999;opacity:0.4;width:10px;height:10px;}
.ZH001 .Text .circle span:nth-child(3){position:absolute;top:30%;animation:snowing 25s linear infinite;background-color:#fff;opacity:0.7;width:17px;height:17px;}
.ZH001 .Text .circle span:nth-child(4){position:absolute;bottom:30%;animation:snowing 11s linear infinite;background-color:#fff;opacity:0.8;width:15px;height:15px;}
.ZH001 .Text .circle span:nth-child(5){position:absolute;bottom:17%;animation:snowing 8s linear infinite;background-color:#ccc;opacity:0.6;width:18px;height:18px;}
.ZH001 .Text .circle span:nth-child(6){position:absolute;bottom:8%;animation:snowing 19s linear infinite;background-color:#fff;opacity:0.5;width:15px;height:15px;}
.ZH001 .Text .circle span:nth-child(7){position:absolute;bottom:22%;animation:snowing 45s linear infinite;background-color:#fff;opacity:0.6;width:10px;height:10px;}
@keyframes animate {0% {transform:rotate(0deg)}100% {transform:rotate(360deg)}}
@keyframes animate2 {0% {transform:rotate(360deg)}100% {transform:rotate(0deg)}}
@keyframes snowing {
	0% {right:0;}
	48% {-webkit-transform:rotateY(0deg);}
	50% {right:100%;-webkit-transform:rotateY(180deg);}
	98% {-webkit-transform:rotateY(180deg);}
	100% {right:0;-webkit-transform:rotateY(0deg);}
}
@keyframes snowing2 {
	0% {bottom:100%;}
	50% {-webkit-transform:rotate(1080deg);}
	100% {-webkit-transform:rotate(0deg) translate3d(50px, 50px, 50px);}
}

.ZH002{position:relative;z-index:2;padding:5vh 0 0;height:calc(95vh - 100px);/*#729bcd #6189AB #8FC5D1*/}
.ZH002 .FadeOut{display:flex;justify-content:center;width:100%;height:100%;}
.ZH002 .Fade{position:relative;display:flex;justify-content:center;flex-direction:column;align-items:center;width:80%;min-width:1200px;height:100%;}
.ZH002 .FadeIn{display:inline-flex;flex-wrap:wrap;flex-direction:column; justify-content:center;width:100%;height:100%;}
.ZH002 .Title{color:#fff;}
.ZH002 .Description{color:#fff;}
.ZH002 .Imgs{position:relative;right:0;left:0;bottom:-70px;z-index:10;}
.ZH002 .Img1{margin:0 auto;width:23vw;min-width:350px;object-fit:contain;mix-blend-mode:hard-light;
/* Apply animation */
animation-name:float;
animation-duration:4.5s; /* Slow animation */
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
}
.ZH002 .Img1 img{width:100%;}
.ZH002 .Text ul{display:flex;gap:20px;}

@keyframes float {
    0% {transform:translateY(0px);}
    50% {transform:translateY(-15px); /* Slight up movement */}
    100% {transform:translateY(0px);}
}
.ZH002 ul li{position:absolute;z-index:20;display:flex;flex-direction: column;align-items:center;justify-content:center;padding:2vw;font-size:2.1rem;color:#111;border-radius:50%;background-color:#fff;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Apply animation */animation-name:float;animation-duration:4s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;
}
.ZH002 ul li span{font-size:1.5rem;color:#ccc;}
.ZH002 ul li:nth-child(2) .bubble1{position:absolute;top:35px;right:-2px;width:35px;height:20px;border-radius:3px 6px 39px 13px;background-color:#fff;transform:rotate(35deg);}
.ZH002 ul li:nth-child(6) .bubble1{position:absolute;top:40px;left:-14px;width:35px;height:20px;border-radius:13px 39px 6px 3px;background-color:#fff;transform:rotate(135deg);}
.ZH002 ul li:nth-child(1){top:15%;left:16%;width:180px;height:150px;animation-delay:0s;border-radius:79% 50% 55% 51% / 67% 50% 69% 55%;}
.ZH002 ul li:nth-child(2){top:50%;left:0;width:370px;animation-delay:1.2s;animation-duration:4.5s;border-radius:90px;}
.ZH002 ul li:nth-child(3){bottom:-2%;left:24%;width:220px;height:130px;font-size:1.9rem;transform:translateX(-50%);animation-delay:2.5s;animation-duration:3.8s;animation-name:float-center;border-radius:44% 50% 49% 55% / 54% 42% 52% 51%}
.ZH002 ul li:nth-child(4){top:22%;right:15%;width:240px;height:170px;animation-delay:0.8s;animation-duration:4.2s;border-radius:54% 42% 52% 51% / 44% 50% 49% 55%;}
.ZH002 ul li:nth-child(5){top:52%;right:5%;width:150px;animation-delay:1.8s;animation-duration:4.8s;border-radius:50%;}
.ZH002 ul li:nth-child(6){bottom:3%;right:0;animation-delay:1.8s;animation-duration:4.8s;border-radius:60px;}
@keyframes float-center {
    0% { transform:translate(-50%, 0px);}
    50% { transform:translate(-50%, -15px);}
    100% { transform:translate(-50%, 0px);}
}
.ZH002:after{content:'';position:absolute;bottom:-99px;left:0;width:100%;height:100px;pointer-events:none;
background-image:
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4320 100' preserveAspectRatio='none'%3E%3Cpath fill='%2389aedd' d='M0,50 C250,85 470,85 720,50 S1190,15 1440,50 S1910,85 2160,50 S2630,15 2880,50 S3350,85 3600,50 S4070,15 4320,50 L4320,0 L0,0 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4320 100' preserveAspectRatio='none'%3E%3Cpath fill='%23729bcd' opacity='0.45' d='M0,50 C300,80 420,80 720,50 S1140,20 1440,50 S1860,80 2160,50 S2580,20 2880,50 S3300,80 3600,50 S4020,20 4320,50 L4320,0 L0,0 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4320 100' preserveAspectRatio='none'%3E%3Cpath fill='%23729bcd' opacity='0.2' d='M0,50 C200,90 520,90 720,50 S1240,10 1440,50 S1960,90 2160,50 S2680,10 2880,50 S3400,90 3600,50 S4120,10 4320,50 L4320,0 L0,0 Z'/%3E%3C/svg%3E");
	background-size:300% 110%, 400% 100%, 300% 120%;background-repeat:repeat-x, repeat-x, repeat-x;animation:moveWaves 30s linear infinite;}


/* 利用 keyframes 操作三層背景的 X 軸偏移，創造無限輪迴視差 */
@keyframes moveWaves {
  0% {
    background-position:
      0 0,     /* Layer 3 起點 */
      0 0,     /* Layer 2 起點 */
      0 0;     /* Layer 1 起點 */
  }
  100% {
    background-position:
      100% 0,  /* Layer 3 速度最快 */
      75% 0,   /* Layer 2 速度中等 */
      50% 0;   /* Layer 1 速度最慢 */
  }
}
.ZH003{position:relative;z-index:1;display:flex;justify-content:center;padding:calc(5vh + 100px) 0 5vh;height:90vh;background-color:#fff;}
.ZH003{/* 改為柔和的天空藍漸層，營造高空基調 */
background:linear-gradient(135deg, #dbe9f4 0%, #f4f7f9 100%);display:flex;align-items:center;justify-content:center;overflow:hidden; /* 防止雲朵跑出去 */
}
/* ZH003 雲霧飄移背景容器 */
.ZH003-clouds{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}
/* 寫實邊緣的 CSS 雲朵基底 */
.cloud{position:absolute;left:0;background:#fff;border-radius:200px;filter:blur(8px); /* 邊緣羽化營造霧感 */will-change:transform;}
/* 透過偽元素組合出蓬鬆不規則的雲朵形狀 */
.cloud::before, .cloud::after{content:'';position:absolute;background:#fff;border-radius:50%;}
.cloud::before{width:45%; height:160%; top:-60%; left:15%;}
.cloud::after{width:55%; height:180%; top:-80%; right:15%;}
/* 設定不同大小、位置、速度與透明度的雲層，創造視差 3D 感 */
.cloud-1{top:35%; width:350px; height:90px; opacity:0.4; --scale:1.2; animation:driftClouds 65s linear infinite -20s;}
.cloud-2{top:65%; width:300px; height:80px; opacity:0.55; --scale:1; animation:driftClouds 55s linear infinite -10s; filter:blur(12px);}
.cloud-3{top:5%; width:450px; height:120px; opacity:0.35; --scale:1.6; animation:driftClouds 80s linear infinite -40s; filter:blur(25px);} /* 大面積迷霧 */
.cloud-4{top:75%; width:220px; height:60px; opacity:0.6; --scale:0.7; animation:driftClouds 40s linear infinite -35s;}

@keyframes driftClouds{
0%{transform:translateX(-40vw) scale(var(--scale, 1));}
100%{transform:translateX(120vw) scale(var(--scale, 1));}
}

/* 底部漸層霧氣，增加置身雲端被霧氣繚繞的覆蓋感 */
.ZH003-fog-bottom{position:absolute;bottom:0;left:0;width:100%;height:35vh;background:linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0) 100%);z-index:1;pointer-events:none;}
.ZH003 .Fade{display:flex;flex-direction:column;align-items:center;margin:0 auto;width:80%;}
.ZH003 .Title{}
.ZH003 .Title b{background: linear-gradient(45deg, #2fd1e9, #5e9dee, #a072e7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.ZH003 .Text ul{display: flex;justify-content: space-between;align-items: stretch;gap:30px;position: relative;margin-top:60px;}
.ZH003 .Text ul li{display: flex;flex-direction: column;flex:1;align-items:center;padding:0 25px 30px;border-radius:30px;background-color:#cbdef5;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);}
.ZH003 .Text ul li img{display: flex;align-items: flex-end;justify-content: center;margin-top: -65px;margin-bottom: 20px;height: 160px;}
@media (min-width:768px) {
  .animated-waves { height:100px; }
}
@media screen and (min-width:960px) and (max-width:1249px){
}
@media screen and (min-width:640px) and (max-width:959px){
}
@media screen and (max-width:959px){
}
@media screen and (max-width:639px){
}