@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:#353535; 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:100; line-height:140%; margin:5px 0px; letter-spacing:1px;}
h1{font-size:calc(28px + 1vw); font-weight:900; line-height:120%; padding:calc(30px + 1vw) 0px; text-align:center; margin:0px;}
h1 span{display:inline-block;}
h2{font-size:calc(26px + 0.8vw); font-weight:900; line-height:normal; padding:calc(30px + 1vw) 0px; text-align:center; margin:0px;}
h3{font-size:calc(18px + 0.5vw); font-weight:900; line-height:normal; padding:25px 0px 10px 0px; margin:0px;}
h3 + p{margin-top:0.4vw;}
h5{font-size:calc(12px + 0.4vw); font-weight:900; line-height:normal;  margin:1vw 0px 2vw 0px; color:#345e81;}
h6{font-size:calc(8px + 0.4vw); font-weight:100; line-height:normal; text-align:center; margin:1vw 0px 2vw 0px;}
a, a:hover{color:#FFFFFF; text-decoration:none;}

.Container{width:100%; max-width:1280px; padding:0px 30px 55px 30px; display:block; position:relative; margin:auto;}
.Container.Large{max-width:1600px;}
.DynamicPadding{padding-left:0px; padding-right:0px;}
.Container.Full{max-width:none;}


#TriggerA{width:100px; height:12%; position:absolute; top:10%; left:0%; pointer-events:none; z-index:100000000000000000000000;}
#TriggerB{width:100px; height:12%; position:absolute; top:10%; left:0%; pointer-events:none; z-index:100000000000000000000000;}

#LangWrapper{width:auto; display:flex; flex-wrap:nowrap; justify-content:center; position:absolute; top:0px; right:0px; z-index:10000; background-color:rgba(0,4,40,0.8); border-top-left-radius:6px; border-bottom-left-radius:6px;}
#LangWrapper a{flex:0 0 auto; padding:10px 12px; color:rgba(255,255,255,0.8); text-decoration:none; font-size:calc(15px + 0.3vw);; line-height:100%;}
#LangWrapper a.Selected{color:#FFFFFF;}

#HeaderContainer{display:flex; flex-wrap:wrap;}
#HeaderVisual{background-image:linear-gradient(111.5deg, rgba(4,78,116,1) 11.1%, rgba(187,232,255,1) 107.5%);position:relative;}
#HeaderDarkBg{position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; opacity:0; z-index:1; background-image:linear-gradient(109.6deg, rgba(15,2,2,1) 11.2%, rgba(36,163,190,1) 91.1%); transition:opacity 0.3s ease-in;}
#HeaderDarkBg.Show{opacity:1; transition:opacity 0.3s ease-out;}
#HeaderVisual, #HeaderVisual .Container{height:auto;}
#KeyVisual{position:relative; margin:auto; width:60vw; max-width:320px; height:120vw; max-height:640px; display:block; z-index:10; font-size:0px; line-height:0px;}
#KeyVisual img, #KeyVisual video{position:absolute; top:0px; left:0px; display:block; width:100%; object-fit:contain;}
#KeyVisual::after{display:block; position:absolute; top:12%; left:12%; width:90%; height:90%; content:""; background-color:rgba(0,0,0,0.8); -webkit-filter:blur(calc(10px + 0.3vw)); filter:blur(calc(10px + 0.3vw));}
#KeyVisualBody{z-index:1;}
#KeyVisualNormal{z-index:3; transition:opacity 0.3s ease-in; object-fit:cover; position:fixed; width:86.8603% !important; top:3.06% !important; left:6.5% !important;}
#KeyVisualDark{z-index:2;}
#KeyVisualNormal.Hide{opacity:0;; transition:opacity 0.3s ease-out;}
.MainCurveContainer{width:100%; height:100%; position:absolute; top:0px; left:0px; overflow:hidden;}
.MainCurve{width:200%; height:auto; position:absolute; left:-40%; bottom:-1%; z-index:2;}
.MainCurve svg{width:100%;}
#MainGreen{animation:CurveAnimation 14s infinite linear alternate;}
#MainRed{animation:CurveAnimation 8s infinite linear alternate-reverse;}
#HeaderWave{width:160%; height:auto; position:absolute; left:-30%; bottom:-1%; z-index:9;}
#HeaderWave img{width:100%;}

#ProductName {
    position: relative;
    width: 100%;
    z-index: 5;
    flex: 0 0 100%;
}

#ProductName p {
    line-height: normal;
    margin: 0px;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0 0 20px rgba(0,0,0,0.2);
}

#ProductName p:first-of-type {
    font-size: calc(18px + 1vw);
    font-weight: 500;
    letter-spacing: -1px;
    margin-top: 20px;
}

#ProductName p:first-of-type span {
    font-weight: 500;
}

#ProductName p:nth-of-type(2) {
    font-size: calc(42px + 2.5vw);
    font-weight: 900;
}

#ProductName p:nth-of-type(3) {
    font-size: calc(14px + 0.5vw);
    font-weight: 500;
    margin: 0px 0px 1vw 0px;
}

#ProductName p:last-of-type {
    font-size: calc(20px + 0.5vw);
    font-weight: 500;
    margin: 3vw 0px;
}

#ProductName p:last-of-type span {
    display: inline-block;
    margin: 0px 15px;
}
#HeaderAppIcon{width:15vw; max-width:100px; height:auto; margin:0.5vw auto 3vw auto; border-radius:10%; overflow:hidden; font-size:0px; line-height:0px; -webkit-box-shadow:0px 30px 20px -10px rgba(38,28,56,0.6); box-shadow:0px 30px 20px -10px rgba(38,28,56,0.6);}
#HeaderAppIcon img{width:100%;}
.PopMsg{display:block; width:100%; text-align:center; padding:0px; font-size:calc(14px + 0.5vw); font-weight:500; color:#FFFFFF; text-shadow:0 0 20px rgba(0,0,0,0.2);}
.PopMsg span{margin:0px; display:inline-block;}
.HeaderRemark{font-size:calc(8px + 0.4vw); font-weight:100; line-height:normal; text-decoration:underline; display:block; margin:auto; text-align:center; padding:20px 0px 10vw 0px;}
.HeaderRemark:hover{text-decoration:underline;}

#ShortcutWrapper{width:100%; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center; padding:8px 0px; position:fixed; left:0px; bottom:0px; z-index:99999999999999; -webkit-box-shadow:0px -20px 20px -10px rgba(0,0,0,0.2); box-shadow:0px -20px 20px -10px rgba(0,0,0,0.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); background:rgba(0,4,40,0.9); background:-webkit-linear-gradient(to right, rgba(0,78,146,0.9), rgba(0,4,40,0.9)); background:linear-gradient(to right, rgba(0,78,146,0.9), rgba(0,4,40,0.9));}
#ShortcutWrapper > a{flex:0 0 auto; font-size:calc(15px + 0.2vw); font-weight:500; color:#FFFFFF; background-color:transparent; border:1px solid rgba(255,255,255,0.6);  border-radius:40px; margin:calc(2px + 0.5vw); display:block; background-size:200% auto; padding:calc(7px + 0.5vw) calc(12px + 1vw); text-align:center; position:relative;transition:background-color 0.3s ease-in;}
#ShortcutWrapper > a:hover{background-color:rgba(10,37,78,1); transition:all 0.5s ease-out;}

.inactive{color:rgba(255,255,255,0.3) !important; border-color:rgba(255,255,255,0.3) !important; cursor:default;}
.inactive:hover{background-color:transparent !important;}

#Lead{z-index:2;}
#LeadWrapper > div{width:100%;}
#LeadWrapper h1{text-align:left;}
#FreeTrialWrapper{width:100%; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; margin-top:2vw; margin-bottom:5vw;}
#FreeTrialWrapper > a{flex:0 0 auto; font-size:calc(15px + 0.2vw); font-weight:500; color:#345e81; background-color:transparent; border:1px solid #345e81;  border-radius:40px; margin:calc(2px + 0.2vw); display:block; background-size:200% auto; padding:calc(7px + 0.5vw) calc(16px + 1vw); text-align:center; position:relative;transition:background-color 0.3s ease-in;}
#FreeTrialWrapper > a:hover{background-color:#345e81; color:#FFFFFF; transition:all 0.5s ease-out;}



#Feature{position:relative; z-index:1;}
#FeatureWrapper .pin-spacer{z-index:2 !important;}
#FeatureWrapper{width:100%; position:relative; display:flex; flex-wrap:wrap; align-content:flex-start;}
#FeatureVisual, #FeatureContent{flex:0 0 100%; position:relative;}
#FeatureVisual{order:1; height:70vw; max-height:350px;}
#FeatureContent{order:2;}
#FeatureVisual > div{width:88vw; max-width:700px; min-width:500px; height:70vw; max-height:350px; min-height:300px; position:absolute; top:0px; right:12%;}
#FeatureVisual > div img{width:100%; z-index:3; position:absolute; top:0px; left:0px;}
#FeatureVisual > div::after{display:block; position:absolute; top:calc(10px + 3vw); left:10%; width:80%; max-width:600px; height:80%; max-height:300px; content:""; z-index:1; background-color:rgba(0,0,0,0.8); -webkit-filter:blur(calc(20px + 0.4vw)); filter:blur(calc(20px + 0.4vw));}
#FeatureWrapper::before{content:""; display:none; width:70%; height:0px; padding-top:70%; font-size:0px; line-height:0px; border-radius:50%; position:absolute; top:-10%; left:-20%; background-image:linear-gradient(68.4deg, rgba(248,182,204,1) 0.5%, rgba(192,198,230,1) 49%, rgba(225,246,240,1) 99.8%); animation:BeforeAnimation 8s infinite linear alternate;}
#FeatureWrapper::after{content:""; display:none; width:50%; height:0px; padding-top:50%; font-size:0px; line-height:0px; border-radius:50%; position:absolute; top:40%; right:20%; background-image:linear-gradient(117.9deg, rgba(183,248,193,0.7) -3.5%, rgba(169,212,250,1) 53.8%, rgba(148,231,255,1) 100.4%); mix-blend-mode:multiply; animation:AfterAnimation 6s infinite linear alternate;}

#Highlight{margin-top:5vw;}
#HighlightWrapper{width:calc(100% - 5vw - 20px); padding:0px; margin:auto; display:flex; flex-wrap:wrap; align-content:flex-start;}
#HighlightWrapper > .HighlightContainer{flex:0 0 100%; padding:calc(10px + 1vw); margin-bottom:calc(10px + 1vw); display:flex; flex-wrap:nowrap; align-items:center; border-radius:32px; position:relative; -webkit-box-shadow:0px 15px 40px -10px rgba(0,0,0,0.3); box-shadow:0px 15px 40px -10px rgba(0,0,0,0.3); cursor:pointer; user-select:none; transition:all 0.2s ease-in;}
#HighlightWrapper > .HighlightContainer:hover{-webkit-box-shadow:0px 7px 10px -5px rgba(0,0,0,0.5); box-shadow:0px 7px 10px -5px rgba(0,0,0,0.5); transition:all 0.2s ease-out;}
#HighlightWrapper > .HighlightContainer .HighlightThumbnail{width:150px; height:auto; flex:0 0 150px; position:relative; font-size:0px; line-height:0px; overflow:visible; -webkit-box-shadow:0px 4px 6px 0px rgba(0,0,0,0.5); box-shadow:0px 4px 6px 0px rgba(0,0,0,0.5); border-radius:30px; background-color:transparent;}
#HighlightWrapper > .HighlightContainer .HighlightThumbnail img{width:100%; height:auto;}
#HighlightWrapper > .HighlightContainer .HighlightContent{width:auto; flex:1 1 auto; padding-left:3vw; padding-right:2vw;}
#HighlightWrapper > .HighlightContainer .HighlightContent .FuncName{font-size:calc(13px + 0.3vw); font-weight:500; line-height:normal; color:#666666;}
#HighlightWrapper > .HighlightContainer .HighlightContent .BigMessage{font-size:calc(18px + 0.5vw); font-weight:900; line-height:normal; margin:calc(4px + 0.5vw) 0px calc(5px + 1vw) 0px;}
.Soon{display:inline-block; background-color:red; color:#FFFFFF; font-size:calc(11px + 0.2vw); padding:1px 3px;}

.VideoSection{width:100%; padding:30px 0;}
#VideoA{margin-top:5vw; background:rgba(4,78,116,1); box-shadow:inset 0px 20px 50px -20px rgba(0,0,0,0.5);}
#VideoB{background:rgba(0,4,40,1);}
.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;}
.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;}



#FullList{margin-top:5vw; margin-bottom:5vw;}
#FullListWrapper{width:calc(100% - 5vw - 20px); padding:0px; margin:auto; display:flex; flex-wrap:wrap; align-content:flex-start;}
#FullListWrapper > div{flex:0 0 100%; display:flex; flex-wrap:nowrap; align-content:flex-start; border-top:1px solid #E2E3E4; margin-top:calc(10px + 1vw); padding-top:calc(10px + 1vw);}
#FullListWrapper > div > div{flex:1 1 auto; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:flex-start;}
#FullListWrapper > div > div.FullListSubHeader{flex:0 0 30%; font-size:calc(13px + 0.3vw); font-weight:900; line-height:normal; color:#333333;}
#FullListWrapper > div > div.FullListSubHeader:first-of-type{border-top:none;}
#FullListWrapper > div > div > div{font-size:calc(13px + 0.3vw); font-weight:100; line-height:normal; flex:0 0 32%;padding-right:3vw;}


#Price{background-image:linear-gradient(109.6deg, rgba(163,217,207,1) 11.2%, rgba(4,178,217,1) 100.2%); padding-top:5vw; padding-bottom:120px; -webkit-box-shadow:inset 0px 20px 50px -20px rgba(0,0,0,0.5); box-shadow:inset 0px 20px 50px -20px rgba(0,0,0,0.5);}
#PriceWrapper p{line-height:normal; margin:20px 0px; color:#FFFFFF; text-align:center; text-shadow:0 0 20px rgba(0,0,0,0.2);}
#PriceWrapper p{font-size:calc(18px + 1vw); font-weight:500; letter-spacing:-1px;}
#PriceWrapper p span{font-size:calc(12px + 1vw); font-weight:500;}
#PriceWrapper p span.Special{font-size:calc(20px + 0.5vw); font-weight:900; padding:10px 22px; margin:20px 0px; border-radius:6px; background:rgba(0,4,40,0.9); background:-webkit-linear-gradient(to right, rgba(0,78,146,0.9), rgba(0,4,40,0.9)); background:linear-gradient(to right, rgba(0,78,146,0.9), rgba(0,4,40,0.9)); -webkit-box-shadow:0px 20px 20px -10px rgba(0,0,0,0.2); box-shadow:0px 20px 20px -10px rgba(0,0,0,0.2);}
#PriceWrapper p:last-of-type{font-size:calc(60px + 2.5vw); font-weight:900;}
#PriceWrapper p:last-of-type span{font-size:calc(42px + 2vw); font-weight:900;}

#DownloadWrapper{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#DownloadWrapper > div{flex:0 0 auto; margin:3vw 0.5vw; display:flex; justify-content:center;}
#DownloadWrapper > div > a{flex:0 0 auto; padding:0px; border-radius:16px; background-color:transparent; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0); display:flex; flex-wrap:wrap; transition:all 0.2s ease-in;}
#DownloadWrapper > div > a > div{flex:0 0 auto; height:40px; overflow:hidden; font-size:0px; line-height:0px;}
#DownloadWrapper > div > a > div:first-of-type{display:none;}
#DownloadWrapper > div > a > div img{height:100%;}
#Link{width:100%;}
#Link h3, #Link p{text-align:center; color:#FFFFFF; font-weight:500; text-shadow:0 0 20px rgba(0,0,0,0.2);}
#Link h3{padding:45px 0px 0px 0px;}
#Price .Logo{display:block; margin:80px 0px; text-align:center;}
#Price .Logo img{width:120px; display:block; margin:auto;}
#Price .Disclaimer{font-size:calc(11px + 0.1vw); font-weight:500; line-height:normal; text-align:center; color:#FFFFFF;}
.Wtsap img{display:block; margin:auto; width:120px;}

.PriceButtonWrapper{width:100%; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center;margin-bottom: 30px;}
.PriceButtonWrapper > a{flex:0 0 auto; font-weight:500; color:#FFFFFF; background-color:transparent; border:1px solid #FFFFFF;  border-radius:40px; margin:0px 10px; display:block; background-size:200% auto; padding:calc(7px + 0.5vw) calc(16px + 1vw); text-align:center; position:relative;transition:background-color 0.3s ease-in;}
.PriceButtonWrapper > a:hover{background-color:#345e81; color:#FFFFFF; transition:all 0.5s ease-out;}
#ApplyTrigger{background-image:radial-gradient(circle farthest-corner at -14.3% -17.5%, rgba(211,232,242,1) 1.7%, rgba(122,197,214,1) 51.1%, rgba(42,136,157,1) 95.5%); color:#012561 !important; font-weight:900 !important;}
#PriceTrigger{position:relative;}
#PriceTrigger::after{content:"SPECIAL"; width:50px; height:16px; line-height:16px; font-size:10px; font-weight:bold; background-image:radial-gradient(circle farthest-corner at -14.3% -17.5%, rgba(211,232,242,1) 1.7%, rgba(122,197,214,1) 51.1%, rgba(42,136,157,1) 95.5%); color:#012561; position:absolute; top:-6px; right:0; border-radius:200px;}


#OverlayWrapper{position:fixed; top:0px; left:0px; width:100%; height:100vh; overflow:hidden; z-index:1000000000000000000000; background-image:linear-gradient(94.3deg, rgba(26,33,64,0.95) 10.9%, rgba(81,84,115,0.95) 87.1%); flex-wrap:wrap; align-items:center; justify-content:center; display:none; pointer-events:none; opacity:0;}
#OverlayWrapper .OverlayImgContainer{display:block; width:auto; height:auto; flex:0 0 auto; max-width:80vw; max-height:80vh; margin:auto; position:relative; object-fit:contain;}
#OverlayWrapper .OverlayImgContainer::after{display:block; position:absolute; top:12%; left:12%; width:90%; height:90%; content:""; border-radius:12%; background-color:rgba(0,0,0,1); -webkit-filter:blur(calc(10px + 0.3vw)); filter:blur(calc(10px + 0.3vw)); z-index:-1; mix-blend-mode:multiple;}
#OverlayWrapper .OverlayImgContainer img{width:auto; height:auto; max-width:80vw; max-height:80vh; z-index:2;}
#OverlayWrapper.Show{display:flex; pointer-events:all; opacity:1;}
#OverlayWrapper #CloseOverlay{width:71px; height:71px; position:absolute; top:50%; transform:translateY(-50%); right:10px; display:block; cursor:pointer; background-color:rgba(0,0,0,0.8); border-radius:100%; z-index:100000000000000;}
#OverlayWrapper #CloseOverlay::before, #OverlayWrapper #CloseOverlay::after{content:""; width:41px; height:2px; background-color:#FFFFFF; font-size:0px; line-height:0px; position:absolute; top:34px; left:15px; transform-origin:center center;}
#OverlayWrapper #CloseOverlay::before{transform:rotate(45deg);}
#OverlayWrapper #CloseOverlay::after{transform:rotate(-45deg);}
#OverlayWrapper h3{flex:0 0 100%; color:#FFFFFF; text-align:center; margin:0px; padding:0px;}

#BackToTop{display:block; width:60px; height:60px; border-radius:50%; overflow:hidden; position:fixed; bottom:120px; 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;}


@keyframes CurveAnimation{
    0%{transform:translateX(0%);}
    100%{transform:translateX(8%);}
}

@keyframes BeforeAnimation{
    0%{transform:translate(0%,0%);}
    100%{transform:translate(-4%, 0%);}
}

@keyframes AfterAnimation{
    0%{transform:translate(0%,0%);}
    100%{transform:translate(100%, 0%);}
}





@media only screen and (min-width:768px){
    #TriggerA{top:20%; height:45%;}
    #HeaderContainer{flex-wrap:nowrap; align-items:center; justify-content:space-between;}
    #HeaderContainer > div{margin:0px;}
    #HeaderVisual, #HeaderVisual .Container{height:auto; min-height:50vw;}
    #KeyVisual{width:40vw; height:80vw; max-width:400px; max-height:800px; margin-left:0px;}
    #KeyVisual::after{width:80%; height:80%; max-width:320px; max-height:640px; left:10%; top:22%;}
    #HeaderWave{width:102%; left:-1%;}
    #ProductName {flex: 0 0 55%; align-self: center;}
    #ProductName p:first-of-type, #ProductName p:last-of-type {font-weight: 900;}
    .MainCurve{width:120%; left:-10%;}
    #HeaderWave{bottom:-2%;}
    #LeadWrapper{padding-top:0px; transform:translateY(0%); z-index:20;}
    #LeadWrapper > div{width:55%;}
    #LeadWrapper h1{padding-top:0px;}
    #FeatureVisual{flex:0 0 40%;}
    #FeatureVisual > div{width:60vw; height:60vw; right:0px;}
    #FeatureContent{flex:0 0 55%; margin-left:5%;}
    #HighlightWrapper{justify-content:space-between;}
    #HighlightWrapper > .HighlightContainer{flex:0 0 49%; width:49%; }
    #HighlightWrapper > .HighlightContainer .HighlightContent{padding-left:1.5vw; padding-right:0.5vw;}
    #FullListWrapper > div > div.FullListSubHeader{flex:0 0 25%;}
    #FullListWrapper > div > div > div{flex:0 0 25%;}
    #DownloadWrapper > div{flex:0 0 160px; margin:0.5vw;}
    #DownloadWrapper > div > a, #DownloadWrapper > div > a > div{flex:0 0 100%; height:auto;}
    #DownloadWrapper > div > a > div:first-of-type{display:block;}
    #DownloadWrapper > div > a > div:first-of-type img{width:100%; height:auto;}
    #DownloadWrapper > div > a > div:last-of-type img{width:auto; height:40px; display:block; margin:auto;}
    #DownloadWrapper > div > a{padding:calc(8px + 0.2vw); background-color:#FFFFFF; -webkit-box-shadow:0px 20px 20px -5px rgba(0,0,0,0.3); box-shadow:0px 20px 20px -5px rgba(0,0,0,0.3);}
    #DownloadWrapper > div > a:hover{-webkit-box-shadow:0px 4px 6px 0px rgba(0,0,0,0.5); box-shadow:0px 4px 6px 0px rgba(0,0,0,0.5); transition:all 0.2s ease-out;}
    #FeatureWrapper::before{width:40%; padding-top:40%; top:-10%; left:-25%; display:block;}
    #FeatureWrapper::after{width:3%; padding-top:3%; top:60%; left:5%; display:block;}
}

@media only screen and (min-width:900px){
}

@media only screen and (min-width:1200px){
	.MainCurve{bottom:-5%;}
    #HeaderWave{bottom:-12%;}
    #FullListWrapper > div > div.FullListSubHeader{flex:0 0 20%;}
    #FullListWrapper > div > div > div{flex:0 0 20%;}
}
@media only screen and (min-width:1340px){
    #HighlightWrapper{width:100%;}
    #FullListWrapper > div > div.FullListSubHeader{flex:0 0 24%;}
    #FullListWrapper > div > div > div{flex:0 0 16.5%;}
}

@media 	only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:900px) and (orientation: landscape),
	only screen and (min-device-pixel-ratio: 2) and (max-device-width:900px) and (orientation: landscape),
	only screen and (min-resolution:192dpi) and (max-device-width:900px) and (orientation: landscape),
	only screen and (min-resolution:2dppx) and (max-device-width:900px) and (orientation: landscape){
        #OverlayWrapper{overflow:auto;}
        #OverlayWrapper .OverlayImgContainer img{max-height:none;}

}


@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){


}