body{font-family:Noto Sans TC,Microsoft JhengHei,Avenir,Helvetica,Arial,sans-serif;width:480px}*,body{margin:0}*{padding:0;list-style:none;font-family:Noto Sans TC,Microsoft JhengHei,sans-serif}*,.logo-page{box-sizing:border-box}.logo-page{width:100%;height:100%;padding-top:600px}.image-block{width:-moz-fit-content;width:fit-content;margin:0 auto;position:relative;transform:scale(1);opacity:1}.image-block.scale{animation-name:showScale;animation-duration:2s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}@keyframes showScale{0%{transform:scale(1);opacity:1}to{transform:scale(3);opacity:0}}.ch-logo{position:absolute;top:246px;left:39px}.glow-logo{position:absolute;top:0;left:0;opacity:0}.glow-logo.glow{animation-name:showGlowImg;animation-duration:2s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}@keyframes showGlowImg{0%{opacity:0}70%{opacity:1}to{opacity:0}}.shadow-filter{filter:drop-shadow(0 0 60px transparent);animation-name:showGlow;animation-duration:3s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}@keyframes showGlow{0%{filter:drop-shadow(0 0 60px transparent)}50%{filter:drop-shadow(0 0 60px #ffeb00)}75%{filter:drop-shadow(0 0 60px #ffeb00)}to{filter:drop-shadow(0 0 60px transparent)}}.milestone-page{width:100%;height:100%;position:relative}.milestone-page .title{height:140px;text-align:center;line-height:140px;background:linear-gradient(180deg,rgba(0,220,255,.4),rgba(0,220,255,0))}.milestone-page .title span{font-family:Noto Sans TC,sans-serif;font-size:52px;font-weight:700;letter-spacing:14.44px;color:#0064a0}.milestone-page .arrow-block{position:absolute;left:48px;bottom:-5px;transform:translateY(100%)}.milestone-page .arrow-block.slide-in{animation-name:slideIn;animation-duration:2s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.milestone-page .milestone{opacity:0}.milestone-page .milestone.fade-in{animation-name:fadeIn;animation-duration:.6s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.milestone-page .milestone-block{position:relative;width:393px;height:140px;opacity:0}.milestone-page .milestone-block.fade-in{animation-name:fadeIn;animation-duration:.6s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.milestone-page .milestone-block .icon-circle{z-index:1;position:absolute;top:31px;left:14px;width:70px;height:70px;border-radius:100%;background:#fff;border:6px solid #0078ff;box-shadow:0 2px 13px 0 rgba(0,0,0,.5)}.milestone-page .milestone-block .text-block{position:absolute;top:8px;left:83px;width:300px;height:120px;text-align:center;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:16px}.milestone-page .milestone-block .milestone-title{font-family:Noto Sans TC;font-size:44px;color:#2371bf;letter-spacing:.04em;margin-top:10px;font-weight:400}.milestone-page .milestone-block .milestone-time{font-family:Arial,Helvetica,sans-serif;font-size:20px;color:#8c8c8c}.milestone-page .aes-logo{width:48px;height:48px}.scada-page{opacity:0;animation-name:fade-in;animation-duration:2s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.scada-page,.scada-page .page-wrapper{width:100%;height:100%}.scada-page .header{text-align:center;height:200px;padding-top:15px;box-sizing:border-box;background-image:linear-gradient(180deg,rgba(0,220,255,.4),rgba(0,220,255,0))}.scada-page .header .title{font-family:Noto Sans TC;font-size:36px;letter-spacing:10px;font-weight:700;margin-bottom:17px;color:#0064a0;transform:translateX(5px)}.scada-page .header .mode-title{margin:0 auto;width:400px;height:80px;border-radius:12px;box-shadow:0 4px 10px 0 rgba(0,0,0,.3);font-family:Noto Sans TC;font-size:36px;line-height:72px;text-align:center;text-shadow:0 2px 2px rgba(0,0,0,.5);position:relative;background:#0078ff;border:2px solid #00dcff}.scada-page .header .mode-title img{position:absolute;top:58px;left:200px;transform:translateX(-50%)}.scada-page .header .power-mode{color:#ffeb00;letter-spacing:1.5px}.scada-page .header .origin-mode{color:#96ffff;letter-spacing:12.86px}.scada-page .mask{-webkit-mask-image:linear-gradient(0deg,#000,#000 30%,transparent 67%,transparent);mask-image:linear-gradient(0deg,#000,#000 30%,transparent 67%,transparent);-webkit-mask-size:100% 300%;mask-size:100% 300%;animation-name:clip-fade;animation-duration:.1s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.scada-page .scada-container{width:100%;height:100%;padding:50px 20px 0 20px}@keyframes clip-fade{0%{-webkit-mask-position:top;mask-position:top}to{-webkit-mask-position:bottom;mask-position:bottom}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.realtime-container{width:100%;height:100%}.realtime-container .realtime-scada{margin-top:30px;display:flex;justify-content:center}@font-face{font-family:E1234;src:url(/font/E1234-p7pER.ttf) format("truetype")}.video-page{background-image:linear-gradient(180deg,#fff,#c8c8c8 24%,#ebebeb 49%,#ebebeb 82%,#f0f0f0);opacity:0;animation-name:fade-in;animation-duration:2s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.video-page,.video-page .img-wrapper{width:100%;height:100%}.video-page .img-wrapper img{width:100%}.video-page .block-1{width:100%;height:6.2%;overflow:hidden;text-align:center;padding-top:15px;box-sizing:border-box}.video-page .block-1 .title{font-family:Noto Sans TC;font-size:36px;letter-spacing:10px;font-weight:700;margin-bottom:6px;color:#0064a0;transform:translateX(5px)}.video-page .block-1 .date-time{margin:0 auto;padding:0 5px;width:410px;display:flex;justify-content:space-between;font-family:Arial,Helvetica,sans-serif;font-size:23px;letter-spacing:5px;color:#646464}.video-page .block-1 .date-time>span:first-child{font-weight:700}.video-page .block-1 .date-time>span:last-child{font-weight:400}.video-page .block-2{position:relative;height:41.67%;overflow:hidden}.video-page .block-2 .realtime-data{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.video-page .block-2 .realtime-data .data-text{font-family:E1234;font-size:56px;color:#282828}.video-page .block-2 .realtime-data .spacing-lg{width:330px;height:64px;text-align:right;letter-spacing:10px}.video-page .block-2 .realtime-data .spacing-sm{width:200px;height:64px;text-align:right;letter-spacing:-11px}.video-page .block-2 .img-zero-emission{position:absolute;top:15px;left:30px;width:420px;height:250px}.video-page .block-2 .img-zero-emission .semicircle-title{position:absolute;top:125px;left:120px;z-index:6}.video-page .block-2 .img-zero-emission .semicircle-pin{position:absolute;top:70px;left:189px;z-index:5;transform-origin:20px 146px;transform:rotate(-90deg)}.video-page .block-2 .img-zero-emission .semicircle-pin.co2-animate{animation-name:co2Rotate;animation-duration:5s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.video-page .block-2 .img-zero-emission .semicircle-bg{position:absolute;top:50px;left:50px;z-index:4}.video-page .block-2 .img-zero-emission .flower-bloom{position:absolute;top:42px;left:194px;z-index:3;opacity:0}.video-page .block-2 .img-zero-emission .flower-bloom.co2-animate{animation-name:co2FadeIn;animation-duration:5s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.video-page .block-2 .img-zero-emission .flower-bud{position:absolute;top:42px;left:194px;z-index:2;opacity:1}.video-page .block-2 .img-zero-emission .flower-bud.co2-animate{animation-name:co2FadeOut;animation-duration:5s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.video-page .block-2 .img-zero-emission .forest-grey{position:absolute;top:0;left:0;z-index:1;opacity:1}.video-page .block-2 .img-zero-emission .forest-grey.co2-animate{animation-name:co2FadeOut;animation-duration:5s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.video-page .block-2 .img-zero-emission .forest-green{position:absolute;top:0;left:0;z-index:0;opacity:0}.video-page .block-2 .img-zero-emission .forest-green.co2-animate{animation-name:co2FadeIn;animation-duration:5s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}@keyframes co2Rotate{0%{transform:rotate(-90deg)}to{transform:rotate(90deg)}}@keyframes co2FadeIn{0%{opacity:0}to{opacity:1}}@keyframes co2FadeOut{0%{opacity:1}to{opacity:0}}.video-page .block-2 .power-animation{position:absolute;top:370px;left:10px;width:160px;height:408px}.video-page .block-2 .power-animation>img{z-index:1;position:absolute;top:3px;left:0}.video-page .block-2 .power-animation>.lottie-div,.video-page .block-2 .power-animation>video{z-index:2;position:absolute;top:0;left:0}.video-page .block-3{height:14.1%;overflow:hidden}.video-page .block-4{height:52.08%;padding:30px 40px auto 40px;overflow:hidden}.slide-in-from-right{transform:translateX(100%)}.slide-in-from-right.slide-in{animation:slideIn;animation-duration:3s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.slide-in-from-left{transform:translateX(-100%)}.slide-in-from-left.slide-in{animation:slideIn;animation-duration:3s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}@keyframes slideIn{to{transform:translateX(0)}}.home{width:100%;height:100vh;overflow:hidden;position:relative;background-color:#fff;background-image:radial-gradient(circle at 50% 37%,transparent,#fff 98%)}.home.fade-in{animation-name:showBackgroundGradient;animation-duration:5s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:ease-in-out}@keyframes showBackgroundGradient{0%{background-color:#fff}to{background-color:rgba(0,172,235,.2)}}@font-face{font-family:DS Crystal;src:url(/font/DS\ Crystal.ttf) format("opentype")}