@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-size:18px; font-weight:normal; background-color:#FFFFF; color:#333333; font-feature-settings:'kern'; text-rendering:optimizeLegibility; -webkit-overflow-scrolling:touch;}
img{transform:translateZ(0); will-change:transform;}
*{box-sizing:border-box;}
a, .Print{color:#039BE5; text-decoration:underline;}
.Print{display:inline-block; margin:0px 3px; cursor:pointer;}
h2{font-size:0.9rem; font-weight:900; text-indent:10px;}
h6{font-size:0.7rem; font-weight:500;}
p{font-size:0.85rem;}

.Increment ol{list-style-type:none; counter-reset:item; margin:0; padding:0;}
.Increment ol > li {display:table; counter-increment:item; margin-bottom:0.6em; font-size:0.75rem; line-height:normal; padding:0.6rem 0;}
.Increment ol > li:before{content:counters(item, ".") ". "; display:table-cell; padding-right:0.6em;}
.Increment ol > li > ol{list-style-type:lower-roman; margin:0; padding:0;}
.Increment ol > li > ol > li{margin:0; padding:0.2rem 0;}

ol{list-style-type:decimal; margin:0; padding:0 0 0 18px;}
ol > li {display:list-item; margin-bottom:0.6em; font-size:0.75rem; line-height:normal; padding:0.6rem 0;}
ol > li > ol{margin:0; list-style-type:lower-roman; list-style-position:inside; padding:0 0 0 1px;}
ol > li > ol > li{margin:0; padding:0.2rem 0;}

ul.Remark li{font-size:0.75rem; padding:0.2rem;}
.InvoiceNumber{font-size:1.5rem; color:#000000; font-weight:900; word-break:break-word;}
.FootNote{font-size:0.7rem; font-weight:500;}

/* Grid ******************************************************************************************************************************************************************************************************/
#MainWrapper{width:100%; height:auto; min-height:100vh; position:relative; background-color:#F5F6F7;}
.Container{width:100%; max-width:1600px; padding:calc(12px + 1vw); margin:auto;}
.Card{width:100%; background-color:#FFFFFF; padding:calc(16px + 1.5vw); border-radius:6px; position:relative; -webkit-box-shadow:0px 5px 16px -5px rgba(0,0,0,0.1); box-shadow:0px 5px 16px -5px rgba(0,0,0,0.1);}
.FlexBox{display:flex; flex-wrap:wrap; align-content:stretch; justify-content:flex-start;}
.FlexBox > div{padding:calc(16px + 1vw); padding-bottom:0px;}
.Card h2, .Card p{flex:0 0 100%; width:100%; text-indent:0px; padding:0px;}
.Card h2{margin-bottom:0.2rem;}
.Card p{margin:0.2rem 0px; font-size:0.75rem;}

/* Header ******************************************************************************************************************************************************************************************************/
header{width:100%; position:relative; background-color:rgba(56,24,40,1); -webkit-box-shadow:0px 5px 16px -5px rgba(0,0,0,0.3); box-shadow:0px 5px 16px -5px rgba(0,0,0,0.3); user-select:none; -ms-user-select:none; z-index:1000; background-image: linear-gradient(112.6deg, rgba(56,24,40,1) -10.7%, rgba(23,148,185,1) 100.2%);}
#HeaderWrapper{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch;}
#HeaderWrapper > div{flex:0 0 100%; width:100%;}
#HeaderName{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-start;}
#HeaderName > div{flex:0 0 100%; width:100%; display:block; color:#FFFFFF;}
#ProductName{font-size:2rem; font-weight:900;}
#ProductDescription{font-size:0.75rem; font-weight:500; color:#666666;}





/* Button ******************************************************************************************************************************************************************************************************/
#TriggerSection{position:-webkit-sticky; position:sticky; left:0; bottom:0; z-index:100;}
#TriggerWrapper{display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; margin-bottom:5rem; background-color:#F5F6F7;}
#TriggerWrapper > a{flex:0 0 auto; font-size:0.8rem; font-weight:900; line-height:1rem; padding:0.6rem 1.1rem; margin:0px 5px; color:#666666; display:block; text-decoration:none; border-radius:10px; text-align:center;}
.Submit{border:1px solid rgba(255,255,255,0.3); -webkit-box-shadow:0px 15px 15px -5px rgba(0,0,0,0.15); box-shadow:0px 15px 15px -5px rgba(0,0,0,0.15); color:#FFFFFF !important; background-image:radial-gradient(circle farthest-corner at 10% 20%, rgba(25,120,190,1) 0%, rgba(37,60,119,1) 90% ); transition:-webkit-box-shadow 0.2s ease-in, box-shadow 0.2s ease-in;}
.Reset{background-color:transparent; border:1px solid #E2E3E4;}
.Submit:hover{-webkit-box-shadow:0px 5px 5px 0px rgba(0,0,0,0.3); box-shadow:0px 5px 5px 0px rgba(0,0,0,0.3); transition:all 0.2s ease-out;}


/* Footer ******************************************************************************************************************************************************************************************************/
footer{background-color:#FFFFFF;}
.Logo{width:auto; height:40px; display:block; margin:30px auto; text-align:center;}
.Logo img{height:100%;}
.Copyright{display:block; text-align:center; font-size:0.65rem;}
.LinkWrapper{width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:30px auto;}
.LinkWrapper > a{margin:0px 10px; flex:0 0 auto; display:block; text-decoration:none; color:#333333; font-size:0.65rem; text-align:center;}


@media only screen and (min-width:415px){
	#TriggerWrapper > a{padding:1rem 2rem; font-size:1rem; line-height:1.2rem;}
}

@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:1366px) and (orientation: landscape),
	only screen and (min-device-pixel-ratio: 2) and (max-device-width:1366px) and (orientation: landscape),
	only screen and (min-resolution:192dpi) and (max-device-width:1366px) and (orientation: landscape),
	only screen and (min-resolution:2dppx) and (max-device-width:1366px) and (orientation: landscape){
		#TriggerWrapper > a{font-size:0.8rem; line-height:1rem; padding:0.6rem 1.1rem;}
}

@media only screen and (min-width:1024px){
	html {--top-spacing: 100px;scroll-padding-top: var(--top-spacing);}
    html, body{font-size:20px;}
    header{width:100%; position:-webkit-sticky; position:sticky;top:0px; left:0px;}
    #HeaderWrapper > div{flex:0 0 auto; width:auto;}
    #StepWrapper{margin-top:0px;}
    .FlexBox > div{padding:calc(10px + 1vw) calc(20px + 2vw) 0px calc(20px + 2vw);}
    .FlexBox.Col2 > div{flex:0 0 50%;}
    .FlexBox.Col2 > div:nth-of-type(odd){padding-right:calc(10px + 1vw);}
    .FlexBox.Col2 > div:nth-of-type(even){padding-left:calc(10px + 1vw);}
    .FlexBox.Col2 > div.Large{flex:0 0 100%; padding-left:calc(20px + 2vw); padding-right:calc(20px + 2vw);}
    
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    html, body{min-width:800px;}
    header, #HeaderWrapper{display:block; float:none;}
    #HeaderName, #StepWrapper, #StepWrapper > div{display:inline-block; vertical-align:middle;}
    #HeaderWrapper > div{flex:0 0 auto; width:auto;}
    #StepWrapper{float:right; margin-top:0px;}
    #StepWrapper > div{padding:5px 10px;}
    .FlexBox{display:block; width:100%;}
    .InputWrapper{display:inline-block; width:49%;}
    .FlexBox.Col2 > div{padding:1% 4%; vertical-align:top;}
    .FlexBox.Col2 > div:nth-of-type(odd){padding-right:2%;}
    .FlexBox.Col2 > div:nth-of-type(even){padding-left:2%;}
    .FlexBox > div.Large, .FlexBox.Col2 > div.Large{width:98%; padding-left:4%; padding-right:4%;}
    .SelectorDiv{margin-left:0px;}
    .Selector{padding-right:0px;}
    .SelectorDiv::before, .SelectorDiv::after{content:""; display:none;}
    .InputWrapper.NoWrap > div{margin:0px; width:auto; display:inline-block;}
    input, textarea, select{border:1px solid #E2E3E4;}
}