@charset "utf-8";
/* CSS Document */

@font-face{font-family: 'MyriadPro'; src:url('../fonts/MyriadPro-Light.woff'); src:url('../fonts/MyriadPro-Light.woff') format('woff'); font-weight:normal; font-style:normal;}
@font-face{font-family: 'MyriadPro'; src:url('../fonts/MyriadPro-Regular.woff'); src:url('../fonts/MyriadPro-Regular.woff') format('woff'); font-weight:500; font-style:normal;}
@font-face{font-family: 'MyriadPro'; src:url('../fonts/MyriadPro-Bold.woff'); src:url('../fonts/MyriadPro-Bold.woff') format('woff'); font-weight:900; font-style:normal;}
@font-face{font-family: 'NotoSans'; src:url('../fonts/NotoSansHK-Light.otf'); src:url('../fonts/NotoSansHK-Light.otf') format('opentype'); font-weight:normal; font-style:normal;}
@font-face{font-family: 'NotoSans'; src:url('../fonts/NotoSansHK-Regular.otf'); src:url('../fonts/NotoSansHK-Regular.otf') format('opentype'); font-weight:500; font-style:normal;}
@font-face{font-family: 'NotoSans'; src:url('../fonts/NotoSansHK-Bold.otf'); src:url('../fonts/NotoSansHK-Bold.otf') format('opentype'); font-weight:900; font-style:normal;}

html, body{width:100%; min-width:320px; margin:0; padding:0; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale; font-family:MyriadPro,NotoSans,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; font-weight:normal; font-size:calc(21px + (56 - 21) * ((100vw - 320px) / (1600 - 320))); background-color:#FFFFFF; color:#626262; font-feature-settings:'kern'; text-rendering:optimizeLegibility; -webkit-overflow-scrolling:touch; overflow-x:hidden;}
html.Fixed, body.Fixed{overflow:hidden;}
img{transform:translateZ(0); will-change:transform;}
*{box-sizing:border-box;}


p{font-size:calc(15px + 0.2vw); font-weight:500; line-height:130%; margin:6px 0px;}
h1{font-size:calc(30px + 4vw); font-weight:900; line-height:normal; padding:0px; text-align:center; margin:0px;}
h1 span{display:inline-block; font-size:calc(30px + 5vw);}
h2{font-size:calc(26px + 0.6vw); font-weight:500; line-height:normal; padding:calc(30px + 1vw) 0px; text-align:center; margin:0px;}
h3{font-size:calc(18px + 0.5vw); font-weight:500; line-height:normal; padding:25px 0px 0px 0px;}
h4{font-size:calc(17px + 0.3vw); font-weight:500; line-height:normal; padding:0px; margin:0px;}
h5{font-size:calc(12px + 0.5vw); font-weight:500; line-height:normal;  margin:1vw 0px 2vw 0px;}
h6{font-size:calc(8px + 0.4vw); font-weight:100; line-height:normal; text-align:center; margin:1vw 0px 2vw 0px;}
a{color:#545454; text-decoration:none;}
.New{display:inline-block; flex:0 0 auto; width:auto; height:auto; background-color:#4158D0; background-image:linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); border-radius:8px; z-index:10; position:relative; -webkit-text-fill-color:#FFFFFF; font-size:calc(8px + 0.2vw); padding:1px 5px; font-weight:500; vertical-align:top; margin:0 5px;}

.Container{width:100%; max-width:1280px; padding:calc(30px + 1vw) 30px; display:block; position:relative; margin:auto;}
.Container.Large{max-width:1600px;}
.Container.Full{max-width:none; padding:0px;}

/* Button */
.ButtonWrapper{width:100%; height:auto; display:flex; flex-wrap:wrap; justify-content:center; z-index:2;}
.ButtonWrapper a{flex:0 0 auto; width:auto; display:flex; flex-wrap:nowrap; align-items:center;}
.ButtonWrapper a img{height:calc(20px + 0.5vw); width:auto;}
.ButtonWrapper a img, #IntroVideo a h4{flex:0 0 auto; margin:0 3px;}
.Button{background:linear-gradient(0deg, rgba(220,220,220,1) 2%, rgba(246,246,246,1) 8%, rgba(246,246,246,1) 92%, rgba(255,255,255,1) 98%); box-shadow:0 15px 35px -5px rgba(76,47,121,0.4), 0 -5px 15px -5px rgba(0,140,245,0.3); border-radius:200px; margin:0 auto; padding:calc(10px + 0.5vh) calc(10px + 2vw); transition:0.3s ease-in; -webkit-user-select:none; user-select:none;}
.Button:hover{background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 20%, rgba(246,246,246,1) 60%, rgba(220,220,220,1) 100%); box-shadow:0 5px 5px 0px rgba(76,47,121,0.4), 0 -5px 15px -5px rgba(0,140,245,0); transition:0.3s ease-out;}

/* promo msg */
.promo_message{width:80%; height:auto; display:flex; flex-wrap:wrap; justify-content:center; z-index:2;  padding:20px; border-radius:15px; margin:0; }
.promo_message h4{color:#ec53a1; font-weight:900; font-size:20px; margin-bottom:5px; text-align:center; width:100%;}

.promo_message p {color: #0093e9; text-align:center; margin:8px 0; width:85%; font-size:15px; line-height:1.5;}
.promo_message p:nth-of-type(1){color: #333333;}
.promo_message a{flex:0 0 auto; width:150px; display:flex; flex-wrap:nowrap; align-items:center; padding:4px 43px;color: #666666 ; text-decoration:none; transition:all 0.3s ease; margin-top:5px; font-size:15px; border:1px solid rgba(255,255,255,0.3);}
.promo_message a h4{flex:0 0 auto; margin:0 3px; color:#666666;}


/* Shortcut */
#ShortcutWrapper{width:auto; max-width:100%; min-width:320px; padding:0 calc(20px + 0.4vw); overflow:hidden; position:fixed; left:50%; bottom:2vw; transform:translate(-50%); border-radius:200px; background-image:linear-gradient(126.3deg, rgba(30,2,83,0.85) 32.2%, rgba(198,55,160,0.46) 109.2% ); display:flex; flex-wrap:nowrap; z-index:99; box-shadow:0 15px 35px -5px rgba(76,47,121,0.8), 0 -5px 15px -5px rgba(0,140,245,0.3); backdrop-filter:blur(4px);}
#ShortcutWrapper a, #ShortcutWrapper #shortcut_reg{flex:0 0 auto; padding:calc(10px + 0.2vw) calc(15px + 0.2vw); color:#FFFFFF; font-size:calc(15px + 0.3vw); font-weight:500; position:relative;}
#ShortcutWrapper a::before, #ShortcutWrapper #shortcut_reg::before{content:""; width:100%; height:100%; position:absolute; left:0; top:0; background-image:linear-gradient(0deg, rgba(190,11,215,1) -18.7%, rgba(246,234,11,1) 90.9%); opacity:0; z-index:-1; -webkit-filter:blur(16px); filter:blur(16px); transition:0.3s ease-in;}
#ShortcutWrapper a:hover::before, #ShortcutWrapper #shortcut_reg:hover::before{opacity:0.5; transition:0.2s ease-out;}

/* Nav */
header{width:280px; max-width:70%; height:100vh; overflow:hidden; position:fixed; top:0; left:0; background-color:rgba(255,255,255,0.8); backdrop-filter:blur(4px); z-index:999; box-shadow:15px 0px 35px -5px rgba(76,47,121,0.4); transform:translateX(-160%); opacity:0; transition:opacity 0.3s ease-in;}
header.Expand{transform:translateX(0); opacity:1; transition:0.5s ease-in-out;}
header::after{content:""; width:100%; height:100%; position:absolute; inset:0; z-index:-1; display:block; background-image:linear-gradient(113.7deg, rgba(43,58,103,1) 11.5%, rgba(122,134,172,1) 124.1%); opacity:0.9; mix-blend-mode:multiply;}
nav{width:100%; height:auto; display:flex; flex-wrap:wrap; align-content:stretch; margin-top:30px; user-select:none;}
nav a{display:block; flex:0 0 100%; width:100%; position:relative; font-size:calc(16px + 0.3vw); font-weight:900; color:#FFFFFF; line-height:normal; padding:calc(10px + 0.2vw) 0; border-top:1px solid rgba(255,255,255,0.1);}
nav a:first-of-type{border:none;}
nav a::before{content:""; width:100%; height:100%; position:absolute; left:0; top:0; background-image:radial-gradient( circle farthest-corner at 10% 20%, rgba(62,133,238,1) 1.1%, rgba(227,137,240,1) 43.7%, rgba(243,193,124,1) 89.7% ); opacity:0; z-index:0; -webkit-filter:blur(16px); filter:blur(20px); mix-blend-mode:hard-light; transition:0.3s ease-in;}
nav h5{margin-top:0; margin-bottom:0;}
nav a span{transform:translateX(0%); transition:0.2s ease-in; display:block;}
nav a:hover span{transform:translateX(6%); transition:0.2s ease-out;}
nav a span.new:after {
  right: -.25rem;
}
nav a span.new:after {
  --tw-translate-x: 1px;
  --tw-bg-opacity: 1;
  --tw-content: "";
  background-color:#f8cc3cff;
  border-radius: .75rem;
  content: var(--tw-content);
  height: 5px;
  position: absolute;
  right: -.10rem;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  width: 5px;}
/* Menu Icon */
#MenuIcon{flex:0 0; box-sizing:content-box; cursor:pointer; display:block; transition:background-color ease-in 0.2s; -ms-user-select:none; user-select:none; border:none; position:fixed; z-index:99999; left:10px; top:0; width:70px; height:70px;}
#MenuIcon > div, #MenuIcon > div > div{position:absolute; display:block; pointer-events:none;}
#MenuIcon > div{width:32px; height:24px; top:50%; left:50%; transform:translate(-50%,-50%);}
#MenuIcon .Default{height:4px; top:0px; left:0px; width:32px; opacity:1; background:linear-gradient(to right, #0093E9 0%, #80D0C7 100%);}
#MenuIcon > div > div:nth-of-type(1){transform:translate(0px, 0px); transition:width ease-in 0.1s, opacity ease-in 0.1s; transition-delay:0.05s;}
#MenuIcon > div > div:nth-of-type(2){transform:translate(0px, 10px); transition:width ease-in 0.2s, opacity ease-in 0.2s; transition-delay:0.15s;}
#MenuIcon > div > div:nth-of-type(3){transform:translate(0px, 20px); transition:width ease-in 0.3s, opacity ease-in 0.3s; transition-delay:0.25s;}
#MenuIcon > div > div.Extend{height:4px; top:0px; left:0px; width:0px; transform-origin:center center; opacity:0; background:linear-gradient(to right, #0093E9 0%, #80D0C7 100%);}
#MenuIcon > div > div:nth-of-type(4){transform:translate(-2px, -3px) rotate(0deg); transition:width ease-in 0.1s, opacity ease-in 0.1s, transform ease-in 0.1s;}
#MenuIcon > div > div:nth-of-type(5){transform:translate(-2px, 24px) rotate(0deg); transition:width ease-in 0.3s, opacity ease-in 0.3s, transform ease-in 0.3s;}
#MenuIcon.Expand .Default{width:0px; opacity:0;}
#MenuIcon.Expand > div > div:nth-of-type(1){transition:width ease-out 0.1s, opacity ease-out 0.1s;}
#MenuIcon.Expand > div > div:nth-of-type(2){transition:width ease-out 0.2s, opacity ease-out 0.2s;}
#MenuIcon.Expand > div > div:nth-of-type(3){transition:width ease-out 0.3s, opacity ease-out 0.3s;}
#MenuIcon.Expand .Extend{width:32px; opacity:1;}
#MenuIcon.Expand > div > div:nth-of-type(4){transform:translate(0px, 11px) rotate(45deg); transition:width ease-out 0.1s, opacity ease-out 0.1s, transform ease-out 0.1s; transition-delay:0.05s;}
#MenuIcon.Expand > div > div:nth-of-type(5){transform:translate(0px, 11px) rotate(-45deg); transition:width ease-out 0.25s, opacity ease-out 0.25s, transform ease-out 0.25s; transition-delay:0.1s;}


#ProductLink{background:linear-gradient(180deg, rgba(255,210,0,1) 0%, rgba(247,151,30,1) 100%); box-shadow:0 15px 35px -5px rgba(76,47,121,0.4), 0 -5px 15px -5px rgba(0,140,245,0.3); border-radius:200px; padding:calc(4px + 0.2vh) calc(5px + 1.2vw); transition:0.3s ease-in; -webkit-user-select:none; user-select:none; position:relative; align-self:center;}
#ProductLink span{font-weight:900;}

/* Promo */
#PromoBanner{padding:calc(60px + 1vw) 0 0 0; text-align:center;}
#PromoBanner img{width:100%; max-width:990px;}

/* Cover */
#Intro{width:100%; height:auto; background-color:#FFFFFF; overflow:hidden; padding:calc(30px + 1vw) 30px;}
#IntroWrapper{width:100%; height:auto; display:grid; grid-template-columns:100%; grid-template-rows:auto;}
#Cover{width:100%; height:auto; position:relative; margin:auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;}
#Cover img{width:140vw; height:auto; position:relative;}
#CoverVideoContainer{width:74%; height:71.8%; position:absolute; top:11.5%; left:50%; transform:translateX(-49.2%); background-color:rgba(0,0,0,0.3); overflow:hidden;}
#CoverVideoContainer video{width:auto; height:115%; margin-top:-4.6%; margin-left:0; object-fit:cover;}
#IntroHeader{flex:0 0 100%; width:100%; z-index:2; -webkit-user-select:none; user-select:none;}
#IntroHeader *{text-align:center;}
#IntroHeader h1{background:linear-gradient(to right, #0093E9 0%, #80D0C7 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#IntroHeader h3{display:flex; align-items:center; justify-content:center; margin:0px;}
#IntroHeader h3 img{height:calc(15px + 0.5vw); width:auto; margin-right:4px;}
#IntroHeader h4{transform:translateY(-50%); color:#f59600;}

/* Feature */
#Feature{width:100%; overflow:hidden; background:linear-gradient(180deg, rgba(255,210,0,1) 0%, rgba(247,151,30,1) 100%); padding-top:calc(8px + 2vw);}
#FeatureWrapper{display:flex; flex-wrap:wrap;}
#FeatureVisual{flex:0 0 100%; width:100%; max-width:500px; overflow:visible; display:flex; position:relative; margin:auto; opacity:0;}
#FeatureVisualBg{width:100%; height:auto;}
#FeatureMsg{flex:0 0 100%; display:flex; flex-wrap:wrap; opacity:0;}
#FeatureMsg p{flex:0 0 100%; width:100%; color:#FFFFFF; font-weight:500; text-align:justify;}
#FeatureMsg h4, #FeatureMsg h5{flex:0 0 100%; width:100%; text-align:center; margin:0 auto; line-height:130%;}
#FeatureMsg h4, #promo_popup_submit h4{font-weight:900; background:linear-gradient(to right, #0093E9 0%, #80D0C7 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

#FeatureTable{flex:0 0 100%; width:100%; display:flex; flex-wrap:wrap; align-items:stretch; padding:calc(10px + 0.5vw) 0;}
#FeatureTable div{flex:0 0 33.333%; width:33.333%; text-align:center; padding:calc(5px + 0.1vw) 0; border-top:1px dotted rgba(255,255,255,0.6);}
#FeatureTable p{line-height:100%; text-align:center;}
#FeatureTable div:nth-of-type(3n-2) p{text-align:left;}
.FeatureTableHeader{border-bottom:1px solid rgba(255,255,255,0.7); border-top:none !important;}
#Feature h2{color:#FFFFFF; text-align:center; font-weight:900; margin-top:0; width:100%; flex:0 0 100%;}


#FeatureMsg a{flex:0 0 auto; width:auto; display:flex; flex-wrap:wrap; align-items:center; margin:calc(0px + 1vw) auto;}

#FeatureSliderWrapper{position:absolute; left:2.8%; top:3.3%; width:94%; height:60.05%; overflow:hidden;}
#FeatureSliderWrapper img{position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:0; animation:24s infinite;}
#FeatureSliderWrapper #FeatureSlideImg01{animation-name:FeatureAnimate01; opacity:1;}
#FeatureSliderWrapper #FeatureSlideImg02{animation-name:FeatureAnimate02;}
#FeatureSliderWrapper #FeatureSlideImg03{animation-name:FeatureAnimate03;}
#FeatureSliderWrapper #FeatureSlideImg04{animation-name:FeatureAnimate04;}
#FeatureSliderWrapper #FeatureSlideImg05{animation-name:FeatureAnimate05;}
#FeatureSliderWrapper #FeatureSlideImg06{animation-name:FeatureAnimate06;}
#FeatureSliderWrapper #FeatureSlideImg07{animation-name:FeatureAnimate07;}
#FeatureSliderWrapper #FeatureSlideImg08{animation-name:FeatureAnimate08;}

@keyframes FeatureAnimate01{
  0%, 12.5% {opacity:1;}
  12.6%, 98% {opacity:0;}
}
@keyframes FeatureAnimate02{
  12.5%, 25% {opacity:1;}
  0%, 10.4%, 25.1% {opacity:0;}
}
@keyframes FeatureAnimate03{
  25%, 37.5% {opacity:1;}
  0%, 22.9%, 37.6% {opacity:0;}
}
@keyframes FeatureAnimate04{
  37.5%, 50% {opacity:1;}
  0%, 35.4%, 50.1% {opacity:0;}
}
@keyframes FeatureAnimate05{
  50%, 62.5% {opacity:1;}
  0%, 47.9%, 62.6% {opacity:0;}
}
@keyframes FeatureAnimate06{
  62.5%, 75% {opacity:1;}
  0%, 60.4%, 75.1% {opacity:0;}
}
@keyframes FeatureAnimate07{
  75%, 87.5% {opacity:1;}
  0%, 72.9%, 87.6% {opacity:0;}
}
@keyframes FeatureAnimate08{
  87.5%, 99% {opacity:1;}
  0%, 85.4%, 100% {opacity:0;}
}

/* Highlight */
#Highlight{width:100%;  overflow:hidden; background-color:rgba(247,151,30,1);}
#HighlightWrapper{display:block; width:100%; max-width:700px; margin:0 auto;}
.HighlightContainer{width:100%; opacity:0;}
.HighlightContainer h2{background-image:linear-gradient(to right, #FFEEEE 0%, #DDEFBB 51%, #FFEEEE 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin-bottom:0; padding-bottom:0;}
.HighlightContainer p{color:#FFFFFF; text-align:center;}
.HighlightKV{width:100%; max-width:1600px; margin:auto; opacity:0;}
.HighlightKV img{width:100%;}

/* SpotHight */
#Spotlight{width:100%; overflow:hidden; background:linear-gradient(to right, #29323c, #485563);}
#SpotlightWrapper{display:block; width:100%; max-width:1280px; margin:calc(32px + 5vw) auto;}
.SpotlightContainer{width:100%; margin:calc(16px + 4vw) auto; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:calc(16px + 4vw);}
.SpotlightContainer.Last{border-bottom:0; padding-bottom:0;}
.SpotlightContainer h2{background-image:radial-gradient(circle farthest-corner at 7.2% 13.6%, rgba(37,249,245,1) 0%, rgba(8,70,218,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin:0 auto calc(10px + 1vw); padding:0;}
.SpotlightContainer h3{background-image:radial-gradient(circle 957px at 8.7% 50.5%, rgba(246,191,13,1) 0%, rgba(249,47,47,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin-bottom:0; padding-bottom:0;}
.SpotlightContainer p{color:#FFFFFF; text-align:center; width:90%; margin-left:auto; margin-right:auto;}
.SpotlightContainer p.MarginBottom{margin-bottom:calc(20px + 3vw);}
.SpotlightVideoWrapper{width:90%; height:0; padding-top:45%; background-color:black; margin:0 auto calc(30px + 1vw) auto; position:relative; box-shadow:0 30px 40px -15px rgba(0,0,0,1);}
.SpotlightVideoWrapper video{width:100%; position:absolute; inset:0; object-fit:contain;}
.SpotlightImageWrapper{width:90%; height:auto; margin:0 auto calc(30px + 1vw) auto; position:relative; box-shadow:0 30px 40px -15px rgba(0,0,0,1); font-size:0; line-height:0;}
.SpotlightImageWrapper img{width:100%;}
.SpotlightContainer h5{text-align:center;}
#SpotlightWrapper > h2{color:#FFFFFF; text-align:center; font-weight:900; margin-top:0; padding:0; width:100%; flex:0 0 100%;}


/* Overview */
#Overview{width:100%; overflow:hidden;}
#OverviewWrapper{display:block; width:100%; max-width:800px; margin:calc(16px + 3vw) auto; padding:calc(30px + 1vw) 30px;}
#OverviewWrapper h2{background-image:radial-gradient(circle farthest-corner at 7.2% 13.6%, rgba(37,249,245,1) 0%, rgba(8,70,218,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin-top:0; padding-top:0;}
.OverviewContainer{width:100%; margin:0 auto; border-top:1px solid rgba(0,0,0,0.1); padding:calc(8px + 0.5vw) 0 calc(6px + 0.4vw) 0; display:flex; flex-wrap:wrap;}
.OverviewContainer:first-of-type{border:0;}
.OverviewContainer p{margin:calc(5px + 0.1vw) 0; color:#333333;}
.OverviewTitle, .OverviewListWrapper{flex:0 0 100%; width:100%; padding:calc(4px + 0.2vw);}
.OverviewTitle{padding-bottom:0; margin-bottom:calc(3px + 0.3vw);}
.OverviewTitle p{font-weight:900;}
.OverviewListWrapper{font-size:0; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;}
.OverviewListWrapper div{flex:0 0 50%;}
.OverviewListWrapper p.noMB{margin-bottom:5px;}
.OverviewListWrapper ul{list-style:none; padding:0; margin-bottom:calc(10px + 0.2vw);}
.OverviewListWrapper li{font-size:calc(11px + 0.2vw); font-weight:500; padding:0; line-height:120%;}

/* Specification */
#Specification{width:100%; overflow:hidden;}
#SpecificationWrapper{width:auto; max-width:600px; margin:calc(16px + 3vw) auto; display:flex; flex-wrap:wrap; justify-content:center;}
#SpecificationWrapper h2{width:100%; background-image:radial-gradient(circle farthest-corner at 7.2% 13.6%, rgba(37,249,245,1) 0%, rgba(8,70,218,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin-top:0; padding-top:0;}
.SpecificationContainer{width:auto; margin:0 auto; padding:calc(8px + 0.5vw) 0 calc(6px + 0.4vw) 0; display:flex; flex-wrap:wrap;}
.SpecificationContainer > div{border-bottom:1px solid rgba(0,0,0,0.1); padding:calc(8px + 0.5vw) 0 calc(6px + 0.4vw) 0;}
.SpecificationContainer > div:nth-of-type(odd){flex:0 0 calc(100px + 1vw);}
.SpecificationContainer > div:nth-of-type(even){flex:0 0 calc(100% - 100px - 1vw);}
.SpecificationContainer p{color:#333333;}
.SpecificationContainer > div:nth-of-type(odd) p{font-weight:900;}
.SpecificationContainer > div:nth-of-type(even) p{font-weight:500;}
#SpecificationWrapper h6{margin-bottom:1vw; text-align:left;}


/* CS */
#CS{width:100%; overflow:hidden; border-top:1px solid rgba(0,0,0,0.1);}
#CSWrapper{display:block; width:100%; max-width:800px; margin:calc(16px + 3vw) auto;}
#CSWrapper h2{background-image:radial-gradient(circle farthest-corner at 7.2% 13.6%, rgba(37,249,245,1) 0%, rgba(8,70,218,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin-top:0; padding-top:0;}
.CSContainer{width:100%; margin:0 auto; border-top:1px solid rgba(0,0,0,0.1); padding:calc(8px + 0.5vw) 0 calc(6px + 0.4vw) 0; display:block;}
.CSContainer:first-of-type{border:0;}
.CSContainer p{color:#333333; text-align:center;}
.CSContainer p:nth-of-type(odd){font-weight:900;}
.CSContainer p:nth-of-type(even){margin-bottom:calc(16px + 0.5vw);}
.CSContainer:last-of-type{border-top:0; margin-bottom:calc(50px + 5vw);}
.CSContainer .Logo{display:block; margin:80px 0px 40px 0; text-align:center;}
.CSContainer .Logo img{width:120px; display:block; margin:auto;}
.CSContainer .Disclaimer{font-size:calc(11px + 0.1vw); font-weight:100; line-height:normal; text-align:center;}


/* Package */
#Package{width:100%; overflow:hidden; background-color:#f1f2f2;}
#PackageWrapper{display:block; width:100%; max-width:800px; margin:calc(16px + 3vw) auto; padding:calc(30px + 1vw) 30px;}
#PackageWrapper h2{background-image:radial-gradient(circle farthest-corner at 7.2% 13.6%, rgba(37,249,245,1) 0%, rgba(8,70,218,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin-top:0; padding-top:0;}
#PackageWrapper h3{background-image:radial-gradient(circle 957px at 8.7% 50.5%, rgba(246,191,13,1) 0%, rgba(249,47,47,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin:calc(16px + 3vw) auto calc(6px + 1vw) auto;}
#PackageWrapper > p{text-align:center;}
.PackageContainer{width:100%; margin:0 auto; border-top:1px solid rgba(0,0,0,0.1); padding:calc(8px + 0.5vw) 0 calc(6px + 0.4vw) 0; display:flex; flex-wrap:wrap;}
.PackageContainer:first-of-type{border:0;}
.PackageContainer p{margin:calc(5px + 0.1vw) 0; color:#333333; margin-bottom:0;}
.PackageContainer h6{margin:0 auto;}
.PackageTitle, .PackageListWrapper{flex:0 0 100%; width:100%; padding:calc(4px + 0.2vw); text-align:center;}
.PackageTitle{padding-bottom:0; margin-bottom:calc(3px + 0.3vw);}
.PackageTitle p{font-weight:900;}
.PackageTitle h5{font-size:calc(13px + 0.2vw); font-weight:normal; margin-top:0.5vw;}
.PackageListWrapper{font-size:0; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;}
.PackageListWrapper div{flex:0 0 50%;}
.PackageListWrapper p.noMB{margin-bottom:5px;}
.PackageListWrapper ul{list-style:none; padding:0; margin-bottom:calc(10px + 0.2vw);}
.PackageListWrapper li{font-size:calc(11px + 0.2vw); font-weight:500; padding:0; line-height:120%;}


/* Tutorial */
.VideoSection{width:100%; padding:30px 0; }
#VideoA{padding:calc(16px + 3vw) 0; background:linear-gradient(to right, #29323c, #485563); box-shadow:inset 0px 20px 50px -20px rgba(0,0,0,0.5);}
.VideoSection h5{color:#FFFFFF;}
.VideoWrapper{width:100%; height:auto; margin-bottom:calc(1.6vw + 20px); background-size:cover; background-position:center; padding:1vw; margin:0%; font-size:0px; position:relative; overflow:hidden;}
.VideoInner{width:auto; height:auto; position:relative; top:0%; left:0%; display:flex; flex-wrap:nowrap; align-items:stretch;}
.VideoInner > *{flex-shrink:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;  user-select:none;}
.VideoStory{position:relative; width:100%; padding:0; margin:0;}
.VideoStory a{display:block; width:100%; padding:0 10px; color:#FFFFFF;}
.VideoThumbnail, .VideoThumbnail img{width:100%; height:auto;}
.VideoHeadline{font-size:calc(15px + 0.2vw); color:#FFFFFF;}
.VideoIndicatorWrapper{position:relative; width:100%; text-align:center; margin-top:calc(1vw + 20px);}
.VideoIndicator{position:relative; display:inline-block; z-index:1000; padding:10px 15px; background-color:rgba(0,0,0,0.5); border-radius:16px; font-size:0px;}
.VideoIndicator > span.swiper-pagination-bullet{width:10px; height:10px; background-color:transparent; border:1px solid #FFFFFF; opacity:1; overflow:hidden; list-style:none; margin:0px 3px; display:inline-block; border-radius:100%; outline:none;}
.VideoIndicator > span.swiper-pagination-bullet-active{border-color:#FFFFFF; background-color:#FFFFFF; cursor:default; color:#FFFFFF;}
#VideoA h2{background-image:radial-gradient(circle farthest-corner at 7.2% 13.6%, rgba(37,249,245,1) 0%, rgba(8,70,218,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin-top:0; padding-top:0;}


/* Section Header */
#SectionHeaderWrapper{width:100%; height:auto; display:flex; flex-wrap:wrap; align-items:center; overflow:hidden; padding:calc(30px + 1vw) 30px 0 30px; background-color:rgba(247,151,30,1);}
#SectionHeaderWrapper > div{flex:0 0 100%; width:100%;}
#SectionHeadrName{color:#FFFFFF; text-align:center; z-index:2;}
#SectionHeadrName h1{font-size:calc(24px + 3vw);}
#SectionHeadrName h1 span{font-size:calc(24px + 4vw);}
#SectionHeadrName h3{display:flex; align-items:center; justify-content:center; margin:0px; padding-top:0;}
#SectionHeadrName h3 img{height:calc(15px + 0.5vw); width:auto; margin-right:4px;}
#SectionHeadrImage img{width:auto; max-width:150%; height:auto; max-height:360px; display:block; margin:auto; transform:translateX(-16%); transition:0.5s ease-in-out;}

/* Segment */
#SegmentWrapper{width:100vw; min-width:320px; padding:calc(10px + 0.1vw) calc(20px + 0.4vw) calc(20px + 0.1vw) ; overflow:hidden; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; z-index:9999; background-color:rgba(255,255,255,0.85); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}
#SegmentWrapper.Sticky{position:fixed; top:0; left:0; -webkit-box-shadow:0px 15px 20px -10px rgba(0,0,0,0.3); box-shadow:0px 15px 20px -10px rgba(0,0,0,0.3);}
#SegmentWrapper > div{flex:0 0 100%; width:100%; display:flex; flex-wrap:nowrap; justify-content:center; align-content:stretch;}
#SegmentWrapper > div > div{flex:0 0 auto; cursor:pointer; font-size:calc(12px + 0.3vw); font-weight:500; padding:calc(10px + 0.2vw) calc(8px + 0.2vw); color:#333333; transition:color 0.2s ease-out;}
#SegmentWrapper > div > div:hover{color:#0093E9; transition:0.2s ease-out;}
#SegmentWrapper > div > div.Selected{background:linear-gradient(to right, #0093E9 0%, #80D0C7 100%); color:#FFFFFF; -webkit-box-shadow:0px 15px 20px -10px rgba(0,0,0,0.3); box-shadow:0px 15px 20px -10px rgba(0,0,0,0.3); border-radius:500px;}
#SegmentWrapper > div > div.Selected a{color:#FFFFFF;}
#SegmentWrapper > div h3{background-image:radial-gradient(circle 957px at 8.7% 50.5%, rgba(246,191,13,1) 0%, rgba(249,47,47,1) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; font-weight:900; margin:0; padding:calc(10px + 0.2vw) 0;}
#SegmentWrapper > div h3 span{display:none;}
#SegmentWrapper.Sticky > div h3 span{display:inline-block;}

/* FAQ */
#FAQWrapper, .FAQContainer, .FAQContent{width:100%; overflow:hidden; position:relative;}
.FAQContainer{border-top:1px solid #E2E3E4; padding-top:calc(30px + 1vw);}
.FAQContainer h3{background:linear-gradient(to right, #0093E9 0%, #80D0C7 150px); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:900; margin-top:0; padding-top:0; text-align:left;}
.FAQContent a{color:#0B57B7; text-decoration:underline;}
#FAQWrapper h5{font-weight:900;}
.FAQBreak{padding-bottom:calc(30px + 0.5vw); margin-bottom:calc(30px + 0.5vw); border-bottom:1px solid #E2E3E4;}
.FAQList a, .FAQContent{width:100%; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; padding:calc(8px + 0.1vw) calc(5px + 0.2vw) calc(5px + 0.1vw); transition:0.3s ease-in; font-size:0; line-height:0;}
.FAQContent{padding:calc(30px + 0.2vw) calc(5px + 0.2vw); border-bottom:1px dotted #CCCCCC; flex-wrap:wrap;}
.FAQContainer .FAQContent:last-of-type{border-bottom:0;}
.FAQList a:hover{background-color:#E2E3E4; transition:0.2s ease-out;}
.FAQList a div, .FAQContent div{font-size:calc(15px + 0.2vw); font-weight:500; line-height:130%;}
.FAQList a div:first-of-type, .FAQContent > div:nth-of-type(odd){flex:0 0 50px; width:50px;}
.FAQList a div:last-of-type{flex:1 1;}
.FAQList{background-color:#EEEEEE;}
.FAQList a{border-bottom:1px solid #FFFFFF;}
.FAQContent > div:nth-of-type(even){flex:0 0 calc(100% - 50px); width:calc(100% - 50px);}
.FAQContent div p{margin:15px 0px;}
.FAQContent div p.Question{font-weight:900;}
.FAQTable{width:100%; display:grid; grid-template-columns:100%; grid-template-rows:auto; align-items:stretch;}
.FAQTable p{font-weight:500;}
.FAQLHS, .FAQRHS{grid-column-start:1; padding:calc(10px + 0.2vw) calc(18px + 0.3vw); border:1px solid #666666; border-top:0;}
.FAQTableHeader{background-color:#666666; color:#FFFFFF; padding:calc(5px + 0.2vw) calc(10px + 0.2vw);}
.FAQTableColGap{margin-bottom:20px;}
.FAQD02TableWrapper{width:100%; display:flex; flex-wrap:nowrap; justify-content:flex-start;}
.FAQD02TableWrapper > div{flex: 0 0 49%; width:49%; max-width:280px; display:flex; flex-wrap:wrap; align-items:center; margin:calc(8px + 0.1vw) 0;}
.FAQD02TableWrapper > div:first-of-type{margin-right:2%;}
.FAQD02TableWrapper > div > div{font-size:calc(13px + 0.1vw);}
.FAQD02TableWrapper > div > div:first-of-type{flex:0 0 100%; width:100%; text-align:center;}
.FAQD02TableWrapper > div > div:nth-of-type(2), .FAQD02TableWrapper > div > div:nth-of-type(4){flex:0 0 40px; width:40px; text-align:center;}
.FAQD02TableWrapper > div > div:nth-of-type(3){flex:1 1 auto; width:auto; position:relative; height:10px; margin-bottom:10px; border-bottom:1px solid #999999;}
.FAQD02TableWrapper > div > div:nth-of-type(3)::before, .FAQD02TableWrapper > div > div:nth-of-type(3)::after{content:""; position:absolute; top:40%; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent;}
.FAQD02TableWrapper > div > div:nth-of-type(3)::before{border-right:8px solid #666666; left:0;}
.FAQD02TableWrapper > div > div:nth-of-type(3)::after{border-left:8px solid #666666; right:0;}
.FAQD04TableWrapper{width:100%; display:table; border:0; border-collapse:collapse; border-spacing:0;}
.FAQD04TableWrapper > div{display:table-row;}
.FAQD04TableWrapper > div > div{display:table-cell;}

/* Reg */
#RegWrapper, .RegContainer{width:100%; overflow:hidden; position:relative;}
#RegWrapper{ border-top:1px solid #E2E3E4;}
.RegContent{width:100%; padding:calc(8px + 0.1vw) 0 calc(5px + 0.1vw);}
.RegContainer a, .RegContent a{color:#0B57B7; text-decoration:underline;}
.RegTable{width:100%; display:grid; grid-template-columns:100%; grid-template-rows:auto; align-items:stretch;}
.RegTable p{font-weight:500;}
.RegLHS, .RegRHS{grid-column-start:1; padding:calc(10px + 0.2vw) calc(18px + 0.3vw); border:1px solid #666666; border-top:0;}
.RegTableHeader{background-color:#666666; color:#FFFFFF; padding:calc(5px + 0.2vw) calc(10px + 0.2vw);}
.RegTableColGap{margin-bottom:20px;}
.RegContent p{margin:15px 0px;}
.RegContent p, .RegContent div{font-size:calc(15px + 0.2vw); font-weight:500; line-height:130%;}


#BackToTop{display:block; width:60px; height:60px; border-radius:50%; overflow:hidden; position:fixed; bottom:80px; right:2vw; -webkit-box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); box-shadow:0px 25px 20px -10px rgba(0,0,0,0.3); user-select:none; cursor:pointer; z-index:999999999999;}
#BackToTop::before{content:""; position:absolute; top:24px; left:21px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom-width:12px; border-bottom-style:solid; border-bottom-color:rgba(0,0,0,0.4); width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px 3px 0px 0px; float:left; vertical-align:bottom; z-index:10000; pointer-events:none; transition:border-bottom-color ease-in 0.2s;}
#BackToTop:hover::before{border-bottom-color:rgba(0,0,0,0.9); transition:border-bottom-color ease-out 0.2s;}
#BackToTop::after{content:""; position:absolute; top:0px; left:0px; width:60px; height:60px; z-index:1; background-color:rgba(255,255,255,0.3); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transition:background-color ease-in 0.2s;}
#BackToTop:hover::after{background-color:rgba(255,255,255,0.8); transition:background-color ease-out 0.2s;}

/* Promo Code */
#shortcut_reg { flex: 0 0 auto; padding: calc(10px + 0.2vw) calc(15px + 0.2vw); color: #FFFFFF; font-size: calc(15px + 0.3vw); font-weight: 500; position: relative; cursor: pointer;}

#Promo { background: linear-gradient(to right, #0093E9 0%, #80D0C7 100%); padding-bottom: 10px; }

#Promo #PromoBanner p { padding: 10px; color: #ffffff;}

#PromoBanner #promo_text { margin: 0 15px; }

#Promo #PromoBanner a.Button { margin: 15px auto; }

#promo_code_overlay { display: none;position: fixed;top: 0;left: 0;width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.6); z-index: 1000; }

#promo_code_overlay .popup{ width:25%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 1001; text-align: center;}

#promo_code_overlay .popup .close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: black; color: white; border: none; border-radius: 20px; font-size: 24px; cursor: pointer; transition: background-color 0.3s; float: right;}

#promo_code_overlay .popup h3 { margin-bottom: 0px; }

#promo_code_overlay .popup #textInput { margin: 20px 0; width: 70%; padding: 13px; border-width: thin; }

#promo_code_overlay .popup #promo_popup_container { display: flex; justify-content: center;  margin-top: 30px; }

.promo_code_btn { border-radius: 200px !important; font-size: 18px; box-shadow: 0 15px 35px -5px rgba(76,47,121,0.3), 0 -5px 15px -5px rgba(0,140,245,0.1); font-family: MyriadPro, NotoSans, Helvetica, Arial, '微軟正黑體', 'Microsoft JhengHei', sans-serif;font-weight: 600;font-size: calc(17px + 0.3vw);}

#promo_popup_submit { width: 40%; padding: 10px; color: white; border: none; border-radius: 5px; cursor: not-allowed; transition: background-color 0.3s; }

#promo_popup_skip { width: 40%; padding: 10px; color: #626262; border: none; border-radius: 5px; transition: background-color 0.3s; cursor: pointer; }

#promo_popup_submit span, #promo_popup_skip span {font-size: 13px;}

#promo_popup_submit.enabled { cursor: pointer; }

#promo_code_overlay #error_msg { display: none;color: red; margin:0; padding: 0; font-size:14px;}


@media (max-width: 1200px) {
  #Promo #PromoBanner p { display: grid; gap: 10px; }
  #promo_code_overlay .popup { width: 60%; }
  #PromoBanner #promo_text { margin: 0 60px; }
}
@media (max-width: 768px) {
  #Promo #PromoBanner p { display: grid; gap: 10px; }
  #promo_code_overlay .popup { width: 90%; }
  #PromoBanner #promo_text { margin: 0 40px; }
}

@media only screen and (min-width:667px){
    .OverviewListWrapper div{flex:0 0 33.333%;}
    #SectionHeaderWrapper{flex-wrap:nowrap;}
    #SectionHeaderWrapper > div{flex:1 1 auto; width:auto;}
    #SectionHeaderWrapper > #SectionHeadrImage{flex:0 0 40%; width:40%;}
    #SectionHeadrImage img{transform:translateX(-26%);}
}

@media only screen and (min-width:900px){
    #Feature{height:auto;}
    #FeatureWrapper{flex-wrap:nowrap; height:100%; align-items:center;}
    #FeatureVisual{flex:0 0 65%; width:65%; max-width:none; height:auto; order:1; justify-content:flex-end;}
    #FeatureVisualBg{width:100%; height:auto;}
    #FeatureMsg{flex:0 0 35%; width:35%; padding-left:calc(16px + 1vw); order:2;}
    .OverviewContainer{flex-wrap:nowrap;}
    .OverviewTitle{flex:0 0 150px; width:150px;}
    .OverviewListWrapper{flex:1 1 auto; width:auto;}
    #ShortcutWrapper a, #ShortcutWrapper #shortcut_reg{font-size:18px;}
    #SectionHeadrImage img{transform:translateX(-40%); transition:0.5s ease-in-out;}
    .FAQTable{grid-template-columns:50%; grid-template-rows:auto; gap:0 20px; grid-auto-flow:column;}
    .FAQLHS, .FAQRHS{align-self:stretch;}
    .FAQRHS{grid-column-start:2; grid-row-start:auto; grid-template-rows:auto;}
    .FAQTableColGap{margin-bottom:0px;}
    .RegTable{grid-template-columns:50%; grid-template-rows:auto; gap:0 20px; grid-auto-flow:column;}
    .RegLHS, .RegRHS{align-self:stretch;}
    .RegRHS{grid-column-start:2; grid-row-start:auto; grid-template-rows:auto;}
    .RegTableColGap{margin-bottom:0px;}
}

@media only screen and (min-width:1200px){
    header{width:100%; max-width:none; height:60px; box-shadow:0px 20px 20px -20px rgba(76,47,121,0.4); opacity:1; transform:translateX(0%); transition:none; display:block;}
    header .Container{padding-top:0; padding-bottom:0;}
    nav{height:60px; justify-content:center; align-items:stretch; margin-top:0;}
    nav a{flex:0 0 auto; width:auto; border:0; padding:calc(10px + 0.2vw) calc(16px + 0.2vw); font-size:17px; font-weight:500; text-align:center; display:flex; align-items:center; position:relative;}
    nav a:hover::before{opacity:0.85; transition:0.2s ease-out;}
    nav h5{font-size:12px; margin-bottom:0;}
    nav a span, nav a:hover span{transform:translateX(0%); transition:none;}
    #MenuIcon{display:none;}
    #MenuIcon > div{width:40px; height:30px;}
    #MenuIcon .Default{height:5px; width:40px;}
    #MenuIcon > div > div:nth-of-type(2){transform:translate(0px, 12px);}
    #MenuIcon > div > div:nth-of-type(3){transform:translate(0px, 24px);}
    #MenuIcon > div > div.Extend{height:5px;}
    #MenuIcon > div > div:nth-of-type(4){transform:translate(-3px, -4px)}
    #MenuIcon > div > div:nth-of-type(5){transform:translate(-3px, 26px)}
    #MenuIcon.Expand .Extend{width:38px;}
    #MenuIcon.Expand > div > div:nth-of-type(4){transform:translate(1px, 12px) rotate(45deg);}
    #MenuIcon.Expand > div > div:nth-of-type(5){transform:translate(1px, 12px) rotate(-45deg);}
    #Intro{height:auto;}
    #IntroWrapper{height:auto;}
    #Intro{padding:0;}
    #IntroWrapper{grid-template-columns:40% 60%; grid-template-rows:auto auto auto;}
    #Cover{width:auto; height:100%; max-height:100vh; grid-column:2/2; grid-row:1/3;}
    #Cover img{width:auto; height:90%; transform:translate(-24%, 5%);}
    #IntroHeader{align-self:flex-end; padding-left:3vw; padding-bottom:1vw; grid-column:1/2; grid-row:1/2;}
    #IntroVideo{align-self:flex-start; grid-row-start:2; grid-row-end:2; padding-left:3vw; grid-column:1/2; grid-row:2/3;}
    .promo_message{grid-column:1/2; grid-row:3/4; align-self:flex-start; padding-left:3vw; margin-top:0;}

    #CoverVideoContainer{transform:translateX(-97.5%); width:49.8%; height:64.62%; top:14.7%;}
    #CoverVideoContainer video{height:116%; margin-top:-4.9%;}
    #SegmentWrapper.Sticky{top:60px;}
}

@media 	only screen and (-webkit-min-device-pixel-ratio:2) and (min-device-width:667px) and (orientation: landscape),
            only screen and (min-device-pixel-ratio: 2) and (min-device-width:667px) and (orientation: landscape),
            only screen and (min-resolution:192dpi) and (min-device-width:667px) and (orientation: landscape),
            only screen and (min-resolution:2dppx) and (min-device-width:667px) and (orientation: landscape){
}

@media 	only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:844px) and (orientation: landscape),
            only screen and (min-device-pixel-ratio: 2) and (max-device-width:844px) and (orientation: landscape),
            only screen and (min-resolution:192dpi) and (max-device-width:844px) and (orientation: landscape),
            only screen and (min-resolution:2dppx) and (max-device-width:844px) and (orientation: landscape){
                header{width:60%;}
                nav a{flex:0 0 50%; width:50%;}
                nav a:nth-of-type(2){border-top-width:0;}
}

@media only screen and (max-width:760px) and (orientation: portrait),
       only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:420px) and (orientation: portrait),
       only screen and (min-device-pixel-ratio: 2) and (max-device-width:420px) and (orientation: portrait),
       only screen and (min-resolution:192dpi) and (max-device-width:420px) and (orientation: portrait),
       only screen and (min-resolution:2dppx) and (max-device-width:420px) and (orientation: portrait){
            #Feature{height:auto;}
}