@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:#FFFFFF; color:#333333; font-feature-settings:'kern'; text-rendering:optimizeLegibility; -webkit-overflow-scrolling:touch;}
img{transform:translateZ(0); will-change:transform;}
*{box-sizing:border-box;}
form{margin:0px; padding:0px; position:relative;}
input, textarea, input[type=number]::-webkit-inner-spin-button, select{-webkit-appearance:none; appearance:none; outline:none; border-radius:0px; border:1px solid #E2E3E4; display:inline-block; background-color:#FFFFFF; font-size:17px; font-family:Montserrat,NotoSansHK,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif;}
input{width:100%; height:2rem; line-height:2rem; padding:0px 0.5rem; border-radius:5px; font-size:0.85rem;}
textarea{resize:none; width:100%; height:6rem; padding:0.5rem 0.5rem; border-radius:5px; font-size:0.85rem;}
select{width:100%; height:2rem; line-height:2rem; padding:0px 0.5rem; border-radius:5px; font-size:0.85rem;}
.SelectorDiv{position:relative; margin-left:10px;}
.Selector{display:block; font-size:0.85rem; font-weight:100; font-family:MyriadPro,NotoSans,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; padding:0px 10px; width:100%; max-width:100%; padding-right:50px; height:40px; box-sizing:border-box; margin:0; position:relative; }
.SelectorDiv::before, .SelectorDiv::after{content:""; width:14px; height:14px; position:absolute; top:11px; right:20px; border-bottom:1px solid #999999; background-color:transparent; transform-origin:center bottom; z-index:2; pointer-events:none;}
.SelectorDiv::before{transform:rotate(-45deg) translate(7px, 0px);}
.SelectorDiv::after{transform:rotate(45deg) translate(-7px, 0px);}
input:focus, textarea:focus, select:focus{border-color:#90A4AE !important;}
::-webkit-input-placeholder{color:#999999; font-size:0.75rem; text-indent:5px;}
:-moz-placeholder{color:#999999; font-size:0.75rem; text-indent:5px;}
::-moz-placeholder{color:#999999; font-size:0.75rem; text-indent:5px;}
:-ms-input-placeholder{color:#999999; font-size:0.75rem; text-indent:5px;}
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.9rem;}
ul{width:100%; list-style:disc; padding-left:30px;}
ul li{font-size:1rem; line-height:normal; padding:0.6rem;}
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; 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); padding-top:calc(10px + 1vw); padding-bottom:calc(20px + 2vw);}
.FlexBox{display:flex; flex-wrap:wrap; align-content:stretch; justify-content:flex-start;}
.FlexBox > div{padding:calc(16px + 1vw); padding-bottom:0px;}


/* 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;}
#StepWrapper{display:flex; flex-wrap:nowrap; margin-top:1.5rem;}
#StepWrapper > div{flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; padding:5px 0px 10px 0px; margin:0px 0.2rem;}
#StepWrapper > div > p{flex:0 0 100%; width:100%; margin:0px; padding:0px; text-align:center; color:rgba(255,255,255,0.4); line-height:normal;}
#StepWrapper > div > p:first-of-type{font-size:2rem; font-weight:900;}
#StepWrapper > div > p:last-of-type{font-size:0.7rem; font-weight:100;}
#StepWrapper > div.Active{border:1px solid rgba(255,255,255,0.5); border-radius:10px;-webkit-box-shadow:0px -10px 10px -2px rgba(0,0,0,0.5); box-shadow:0px -10px 10px -2px rgba(0,0,0,0.5);background-image: linear-gradient(358.7deg, rgba(42,136,157,0.8) 1.7%, rgba(122,197,214,0.8) 51.1%, rgba(211,232,242,0.8) 95.5%);}
#StepWrapper > div.Active > p{color:#FFFFFF;}
#StepWrapper > div.Pointer{flex:0 0 13px; padding:0px; margin:0px 0px 0px 10px;}
#StepWrapper > div.Pointer::before{content:""; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:12px solid rgba(255,255,255,0.4); width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px 3px 0px 0px; float:left; vertical-align:bottom;}



/* Form ******************************************************************************************************************************************************************************************************/
.InputWrapper{width:100%; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:flex-start;}
.InputWrapper > div{margin:4px 0px; flex:0 0 100%; word-break:break-word; font-size:0.85rem; line-height:1rem;}
.InputWrapper.NoWrap{flex-wrap:nowrap;}
.InputWrapper.NoWrap > div{margin:0px; flex:0 1 auto;}
.InputWrapper.NoWrap > div.FieldName{flex:0 0 auto;}
.InputWrapper.CenterAlign{align-items:center;}
.InputWrapper.Error .FieldAlert{display:inline-block;}
.InputWrapper.Error input, .InputWrapper.Error textarea, .InputWrapper.Error select{border-color:#F44336;}
.InputWrapper.Error input.Optional{border-color:#E2E3E4;}
.FieldName, .FieldOption{font-size:0.85rem; font-weight:500; line-height:1rem;}
.FieldOption input{width:100%;}
.FieldOption input.Half{width:48%;}
.FieldOption input.Half:first-of-type{margin-right:2%;}
.FieleRemark{font-size:0.65rem !important; font-weight:100;}
.FieldRemark{font-size:0.65rem !important; font-weight:100;}
.FleldSegment{width:auto; display:flex; flex-wrap:nowrap; align-content:stretch; justify-content:flex-start;}
.FleldSegment > div{flex:0 0 auto; padding:0px 1rem; line-height:2rem; font-size:0.85rem; border:1px solid #E2E3E4; border-radius:4px; margin-right:5px; cursor:pointer;}
.FleldSegment > div.Selected{background-color:#039BE5; border-color:#039BE5; color:#FFFFFF; -webkit-box-shadow:inset 0px 5px 5px 0px rgba(0,0,0,0.15); box-shadow:inset 0px 5px 5px 0px rgba(0,0,0,0.15);}
.FieldAlert{margin-left:10px; font-size:0.7rem; color:#F44336; display:none;}
.FieldCheckbox{display:block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin-bottom:0.5vw; padding-left:30px; font-size:0.85rem; line-height:normal;}
.FieldCheckbox > a{border-bottom:1px dotted #E2E3E4;}
.FieldCheckbox input{position:absolute; opacity:0; cursor:pointer; height:0; width:0;}
.FieldCheckboxCheckmark{position:absolute; top:0; left:0; height:25px; width:25px; border-width:1px; border-style:solid; border-color:#E2E3E4; background-color:transparent; transition:border-color 0.2s ease-in-out; border-radius:3px;}
.FieldCheckbox:hover input ~ .FieldCheckboxCheckmark{border-color:#90A4AE; transition:border-color 0.2s ease-in-out;}
.FieldCheckbox input:checked ~ .FieldCheckboxCheckmark{background-color:#039BE5;}
.FieldCheckbox input:disabled ~ .FieldCheckboxCheckmark{background-color:#E2E3E4;}
.FieldCheckboxCheckmark:after{content:""; position:absolute; display:none;}
.FieldCheckbox input:checked ~ .FieldCheckboxCheckmark:after{display:block;}
.FieldCheckbox .FieldCheckboxCheckmark:after{left:7px; top:4px; width:5px; height:10px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.FieldCheckbox + textarea{margin-top:10px;}
.TotalPrice{font-size:1.2rem; font-weight:900; line-height:1.4rem; color:#039BE5;}


/* Button ******************************************************************************************************************************************************************************************************/
#TriggerWrapper{display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; margin-bottom:5rem;}
#TriggerWrapper > a{flex:0 0 auto; font-size:1rem; font-weight:900; line-height:1.2rem; padding:1rem 2rem; margin:0px 5px; color:#666666; display:block; text-decoration:none; border-radius:10px; text-align:center;}
.Submit{cursor: pointer;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{cursor: pointer;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:1024px){
    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;}
}

/* Additional Style ******************************************************************************************************************************************************************************************************/
#TriggerWrapper a:hover{ cursor:pointer; }