html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {margin:0;padding:0;}
fieldset, img {border:0;}
ol, ul {list-style:none;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; margin: 0; padding: 0;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.fx {-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.hidden {display: none!important;}   
.dko {display: block;}
.mbo {display: none!important;}
* html .clearfix {zoom:1;}
/* IE6 */*:first-child+html .clearfix {zoom:1;}
/* IE7 */img {max-width:100%;}
a {text-decoration:none;}
.noScroll {overflow:hidden;}

@media (max-width: 48rem) {
  .dko {display: none!important;}
  .mbo {display: block!important;}
}
img {max-width: 100%;display: block;}
img.ctrImg {display: block; margin: auto;}
img.fullwidth {width: 100%;}
p {line-height: 1.6; font-size: 14px;}
small {font-size: .5rem;}
a {text-decoration: none;}
div {-webkit-overflow-scrolling: touch; position: relative;}
.line-clamp {display: block; display : -webkit-box; -webkit-box-orient : vertical; position: relative; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; }
.line-clamp:after {content: ''; text-align : right; bottom: 0; right: 0; width: 25%; display : block; position: absolute; height: calc(1em * 1.2); background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%); }
@supports (-webkit-line-clamp: 1) {.line-clamp:after {display : none !important; } }
.line-clamp-1 {-webkit-line-clamp : 1; height : calc(1em * 1.25 * 1); }
.line-clamp-2 {-webkit-line-clamp : 2; height : calc(1em * 1.25 * 2); }
.line-clamp-3 {-webkit-line-clamp : 3; height : calc(1em * 1.25 * 3); }
.line-clamp-4 {-webkit-line-clamp : 4; height : calc(1em * 1.25 * 4); }

.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#000;background:rgba(0,0,0,0.8);outline:none!important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}
.lity.lity-opened{opacity:1}
.lity.lity-closed{opacity:0}
.lity-active {overflow: hidden;}
.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none!important}
.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;}
.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}
.lity-loading .lity-loader{opacity:1}
.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none!important}
.lity-content{z-index:9993;width:101%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease; position: relative; max-height: 100vh!important;}
.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}
.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:10px; top: 10px; margin:auto;background-color: #000; -webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:32px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;outline:0;-webkit-box-shadow:none; box-shadow: 0 2px 3px rgba(0,0,0,.6); border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%; border: 2px solid #fff;}
.lity-close::-moz-focus-inner{border:0;padding:0}
.lity-image img{max-width:100%;display:block;line-height:0;border:0}
.lity-iframe .lity-container{width:100%;}
.lity-iframe-container{width:100%;height:0;padding-top:100vh;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}
.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}
.lity-hide{display:none}


body {position: relative; height: 100%;font-family: Noto Sans TC, Arial,'Microsoft YaHei',"Microsoft JhengHei","Source Han Sans","PingFangHK","Heiti TC",Verdana,Geneva,sans-serif; color: #483e32;}

@media (max-width: 48rem) {
  html, body {font-size: 12px;}
}

#bodyWrap {position: relative; width: 100%; margin:auto; max-width: none; min-width: 62.5rem; background: #ebf7ed; overflow: hidden;}
@media (max-width: 48rem) {
	#bodyWrap {max-width: 768px; min-width: 0;}
}


#bodyContent {display: block; width: 100%; opacity: 0; }
#bodyContent:not(.hidden) {animation: reveal 1s .2s forwards;}

@media (min-width: 48rem) {
  
}

@media (max-width: 48rem) {
  #bodyContent {}
}


#pageTop {background: linear-gradient(0deg, #ffe87b 0%, #ffd400 100%)}
#pageBottom {background: #fefefe; background: linear-gradient(to bottom, #feffea 60%, #fff); padding: 5rem 0; min-height: 40vh; position: relative;}
#pageBottom:after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: url(../images/bg-pattern.png) center / 77% auto; opacity: .45;}
@media (max-width: 48rem) {
  #pageBottom {padding: 1rem 1.25rem;}
  #pageBottom:after {background-size: 120% auto; }
}

#pageTop > .container {padding: 2vw 4vw 3.5vw; position: relative;}
@keyframes revealPhone {100% {opacity: 1; transform: translateX(0);}}
#pageTop .ORlogo {display: block; width: 10vw;}
#pageTop .ORlogo img {width: 100%;}
#pageTop .siteInfoBlock {max-width: 98%; margin: 3vw auto 0;}
#pageTop .siteInfoBlock h2 {color: #4e3c2e; font-size: 2.3vw; line-height: 1; font-weight: 600; padding-left: 1vw;}
#pageTop .siteInfoBlock .box {border-radius: 1.35vw; background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .3)); padding: 2.25vw 2vw 2.75vw; margin: 1.25vw 0 1.35vw; max-width: 80%;}
#pageTop .siteInfoBlock .box p {color: #4e3c2e; font-size: 1.3vw; font-weight: 500; line-height: 1.2; position: relative; padding-left: 1.85vw; margin-bottom: 1.65vw;}
#pageTop .siteInfoBlock .box p:last-child {margin-bottom: 0;}
#pageTop .siteInfoBlock .box p:before {content: ''; display: block; position: absolute; width: .65vw; height: .65vw; border-radius: 50%; background-color: #4e3c2e; left: 0; top: 0; bottom: 0; margin: auto;}
#pageTop .siteInfoBlock .downloads {display: flex; flex-flow: row wrap; margin-left: 2vw;}
#pageTop .siteInfoBlock .downloads a {background-color: #e64d28; color: #fff; font-size: 1.25vw; line-height: 2.5; display: block; border-radius: .65vw; padding: 0 1.35rem; margin-right: 2.5vw; min-width: 12vw; text-align: center;}

@media (min-width: 48rem) {
  #pageTop > .container:after {content: ''; display: block; position: absolute; bottom: 0; right: 3.5vw; width: 40vw; height: 34vw; background: url(../images/phone.png) no-repeat center / contain; opacity: 0; transform: translateX(10%); animation: revealPhone .8s .3s forwards;}
  #pageTop .siteInfoBlock h2 span {margin-left: -1.25vw;}
}

@media (max-width: 48rem) {
  #pageTop > .container {padding: 5vw 3vw;}
  #pageTop .ORlogo {width: 26vw; margin-left: 2vw;}
  #pageTop .siteInfoBlock {max-width: 100%; margin-top: 2vw;}
  #pageTop .siteInfoBlock h2 {font-size: 5.3vw; text-align: center; line-height: 1.1;}
  #pageTop .siteInfoBlock h2 span {margin-top: .85vw; display: block;}
  #pageTop .siteInfoBlock .box {max-width: 100%; border-radius: 3.25vw; padding: 2.5vw 3vw 2.5vw 4vw; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .7) 70%, rgba(255, 255, 255, .5) 85%, rgba(255, 255, 255, 0) 100%); position: relative; margin-top: 52vw;}
  #pageTop .siteInfoBlock .box:before {content: ''; display: block; position: absolute; bottom: 100%; left: 0; right: 0; margin: auto; padding-bottom: 53vw; background: url(../images/phone.png) no-repeat center / contain;}
  #pageTop .siteInfoBlock .box p {font-size: 3vw; margin-bottom: 1.5vw; padding-left: 4.5vw;}
  #pageTop .siteInfoBlock .box p:before {width: 1.6vw; height: 1.6vw;}
  #pageTop .siteInfoBlock .downloads {width: 100%; margin-left: 0; padding-left: 2vw; justify-content: space-between; margin-top: 5vw;}
  #pageTop .siteInfoBlock .downloads a {min-width: 31vw; font-size: 3.25vw; border-radius: 1.75vw; padding: 0 5vw;}
}



#formSection {position: relative; max-width: 42rem; margin: auto; z-index: 1;}

#regForm {position: relative; height: 100%;}

#regForm .pageInstructionTxt {width: 100%; margin: 0 auto 1rem; text-align: center; position: relative;}
#regForm .pageInstructionTxt:before {content: ''; display: block; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/pageTT-deco.svg) no-repeat 50% 180% / 95% auto;}
#regForm .pageInstructionTxt span {display: block; position: relative; line-height: 1.3; font-size: 1.85rem; font-weight: 600; color: #4e3c2e; z-index: 1;}

#regForm .zh-inputRow {margin-top: 4rem;}
#regForm .zh-label {color: #000; font-size: 1.55rem; font-weight: 600; line-height: 1; margin-bottom: .85rem;}
#regForm .zh-label .asterisk {color: #ff0000;}
#regForm input[type="text"], #regForm textarea {border: none; background-color: #fff; display: block; width: 100%; padding: .75rem 1.5rem; font-size: 1.65rem; border: 1px solid #ccc; border-radius: .65rem; font-family: Noto Sans TC, Arial,'Microsoft YaHei',"Microsoft JhengHei","Source Han Sans","PingFangHK","Heiti TC",Verdana,Geneva,sans-serif;}
#regForm input[type="text"]:-webkit-autofill, #regForm input[type="text"]:-webkit-autofill:hover, #regForm input[type="text"]:-webkit-autofill:focus, #regForm input[type="text"]:-webkit-autofill:active {background-color: transparent!important; -webkit-box-shadow: none; -webkit-background-clip: text; transition: background-color 5000s ease-in-out 0s;}
#regForm textarea {overflow: hidden; resize: none; }

#regForm .twoColumn {display: flex; flex-flow: row wrap; justify-content: space-between;}
#regForm .twoColumn:not(:last-child) {margin-bottom: 2rem;}
#regForm .twoColumn .column.shopNum {-ms-flex: 0 0 48%; -webkit-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;}
#regForm .twoColumn .column.floor {-ms-flex: 0 0 48%; -webkit-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;}
#regForm .twoColumn .column.streetName {-ms-flex: 0 0 70%; -webkit-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%;}
#regForm .twoColumn .column.district {-ms-flex: 0 0 26%; -webkit-flex: 0 0 26%; flex: 0 0 26%; max-width: 26%;}
#regForm .twoColumn .column.district input {margin-top: 1.95rem;}
#regForm .twoColumn .column .subHeading {font-size: 1.1rem; line-height: 1.3; color: #777; font-weight: 500; display: block; margin-top: .35rem;}

#brCopyRow .wrapper {background-color: #fff; border: 1px dashed #ccc; border-radius: .65rem; padding: 2.5rem 2.5rem 2.5rem 2rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
#brCopyRow .wrapper .column:first-child {-ms-flex: 0 0 calc(100% - 2.5rem); -webkit-flex: 0 0 calc(100% - 2.5rem); flex: 0 0 calc(100% - 2.5rem); max-width: calc(100% - 2.5rem); display: flex; flex-flow: row nowrap; align-items: center;}
#brCopyRow .wrapper .column:last-child {-ms-flex: 0 0 2.5rem; -webkit-flex: 0 0 2.5rem; flex: 0 0 2.5rem; max-width: 2.5rem;}

#brCopyRow #imageUploadBtn {-ms-flex: 0 0 10rem; -webkit-flex: 0 0 10rem; flex: 0 0 10rem; max-width: 10rem; font-size: 1.5rem; line-height: 1; padding: .6rem 0 .9rem; border: 1px solid #888; border-radius: 7px; text-align: center; cursor: pointer; color: #000; background-color: #eee; margin-right: 1rem;}
#brCopyRow .filename {-ms-flex: 0 0 calc(100% - 11rem); -webkit-flex: 0 0 calc(100% - 11rem); flex: 0 0 calc(100% - 11rem); max-width: calc(100% - 11rem); font-size: 1.45rem; color: #787878; line-height: 1;}
#brCopyRow #imageUploadIcon {position: relative; padding: 0; cursor: pointer; background: url(../images/upload.svg) no-repeat center / contain; width: 2.5rem; height: 2.5rem;}
#brCopyRow #imageUploadDeleteIcon {position: relative; padding: 0; cursor: pointer; background: url(../images/cross.svg) no-repeat center / contain; width: 2.5rem; height: 2.5rem;}
#brCopyRow .imageUploadInput {display: none;}

#regForm .twoColumn .column.firstname {-ms-flex: 0 0 48%; -webkit-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;}
#regForm .twoColumn .column.lastname {-ms-flex: 0 0 48%; -webkit-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;}

#regForm .checkboxRow {margin: 2rem 0 2.5rem;}
#regForm .checkboxRow input[type="checkbox"] {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
#regForm .checkboxRow label {color: #000; font-size: 1.5rem; font-weight: 500; line-height: 1; position: relative; padding-left: 3.5rem; display: inline-block; cursor: pointer;}
#regForm .checkboxRow label .checkmark {display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 2.25rem; height: 2.25rem; border: 1px solid #ccc; background-color: #fff;     border-radius: 3px;}
#regForm .checkboxRow label .checkmark:after {content: ""; position: absolute; left: 12px; top: 5px; width: 10px; height: 20px; border: solid #000; border-width: 0 3px 3px 0; transform: rotate(45deg); display: none;}
#regForm .checkboxRow input[type="checkbox"]:checked ~ label .checkmark {background-color: #fff;}
#regForm .checkboxRow input[type="checkbox"]:checked ~ label .checkmark:after {display: block;}


#regForm .formErrorMsg {color: #ff0000; font-size: 1.15rem; display: block; margin-top: .25rem; position: absolute; top: 100%; left: 0; width: 100%; line-height: 1.1;}
#shopAddressRow .formErrorMsg {margin-top: 0;}
/* #regForm .redtxt {color: #ff0000;} */


#submitBtn {cursor: pointer; display: block; font-size: 1.85rem; border-radius: .5rem; margin: 3rem auto 0; line-height: 1; padding: .85rem 0; width: 13rem; text-align: center; color: #fff; background-color: #e64d28; border: none;}
#submitBtn.disabled {cursor: default; pointer-events: none; background-color: #c1b6b4;}

@media (min-width: 48rem) {
  
}

@media (max-width: 48rem) {
  #regForm .pageInstructionTxt:before {background-position: 40% 230%;}
  #regForm .pageInstructionTxt span {font-size: 4.25vw;}
  #regForm .zh-inputRow {margin-top: 3vw;}
  #regForm .zh-label {font-size: 3.5vw; font-weight: 500;}
  #regForm input[type="text"], #regForm textarea {font-size: 3.5vw; padding: 1.85vw 2.5vw;}
  #regForm .twoColumn .column.streetName {-ms-flex: 0 0 63%; -webkit-flex: 0 0 63%; flex: 0 0 63%; max-width: 63%;}
  #regForm .twoColumn .column.district {-ms-flex: 0 0 33%; -webkit-flex: 0 0 33%; flex: 0 0 33%; max-width: 33%;}
  #regForm .twoColumn .column.district input {margin-top: 5.1vw;}
  #regForm .twoColumn .column .subHeading {font-size: 2.5vw; margin-top: .85vw;}
  #regForm .formErrorMsg {font-size: 2.5vw;}
  #brCopyRow .wrapper {padding: 6vw 3vw;}
  #brCopyRow #imageUploadBtn {-ms-flex: 0 0 26vw; -webkit-flex: 0 0 26vw; flex: 0 0 26vw; max-width: 26vw; padding: 1.6vw 0 2.5vw; border-radius: 1.5vw; font-size: 3.75vw; margin-right: 2vw;}
  #brCopyRow .filename {font-size: 3.65vw; -ms-flex: 0 0 calc(100% - 28vw); -webkit-flex: 0 0 calc(100% - 28vw); flex: 0 0 calc(100% - 28vw); max-width: calc(100% - 28vw);}
  #brCopyRow #imageUploadIcon, #brCopyRow #imageUploadDeleteIcon {width: 5.5vw; height: 5.5vw;}
  #regForm .checkboxRow {margin: 4vw 0 6vw;}
  #regForm .checkboxRow label {font-size: 3.5vw; padding-left: 8vw;}
  #regForm .checkboxRow label .checkmark {width: 5.25vw; height: 5.25vw;}
  #regForm .checkboxRow label .checkmark:after {left: 1.5vw; top: 0.5vw; width: 1.5vw; height: 3vw; border-width: 0 2px 2px 0;}
  #submitBtn {font-size: 4.75vw; width: 34vw; float: right; padding: 2vw 0; border-radius: 1.85vw; margin: 8vw auto 0;}
}





#bodySubmit {position: relative; opacity: 0; z-index: 1;}
#bodySubmit:not(.hidden) {animation: reveal 1s .2s forwards;}
@keyframes reveal {100% {opacity: 1;}}

#bodySubmit .container {margin: auto; max-width: 57rem; background: #fff; border-radius: 2rem; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .1); padding: 3rem 1rem;}

#submitLoading {text-align: center;}
#submitLoading p {font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: #483e32;}
#submitLoading .loader {width: 3rem; margin: auto; aspect-ratio: 1; display: grid; border-radius: 50%; background: linear-gradient(0deg ,rgb(26, 28, 27, .5) 25%,#0000 0 75%,rgb(26, 28, 27, 1) 0) 50%/6% 100%, linear-gradient(90deg,rgb(26, 28, 27, .25) 25%,#0000 0 75%,rgb(26, 28, 27, .75) 0) 50%/100% 6%; background-repeat: no-repeat; animation: l23 1s infinite steps(12);}
#submitLoading .loader::before, #submitLoading .loader::after {content: ""; grid-area: 1/1; border-radius: 50%; background: inherit; opacity: 0.915;transform: rotate(30deg);}
#submitLoading .loader::after {opacity: 0.83;transform: rotate(60deg);}
@keyframes l23 {100% {transform: rotate(1turn)}}


#submittedBlock {text-align: center;}
#submittedBlock h3 {font-size: 2.2rem; line-height: 1.2; margin-bottom: 1.85rem; color: #483e32;}
#submittedBlock p {font-size: 1.5rem; line-height: 1.2; font-weight: 500; margin-bottom: 1.5rem;}
#submittedBlock p a {font-size: 1.2em; display: inline-block; margin-top: .5rem; color: #1562dd; text-decoration: underline;}
#bodySubmit .backBtn {cursor: pointer; font-size: 1.75rem; border-radius: .5rem; margin: 2rem auto 0; line-height: 1; max-width: 12rem; color: #fff; background-color: #de4e24; border: none; text-align: center; padding: .75rem 0 1rem;}

#errorBlock {text-align: center;}
#errorBlock p {font-size: 1.35rem;}


@media (min-width: 62.5rem) {
  #submitLoading .loader {width: 4vw;}
}

@media (max-width: 48rem) {
  #bodySubmit .container {max-width: 90%; border-radius: 5vw;}
  #submitLoading p {font-size: 3.5vw;}
  #submittedBlock h3 {font-size: 4.5vw; margin-bottom: 4vw;}
  #submittedBlock p, #errorBlock p {font-size: 3.5vw; font-weight: 500;}
  #submittedBlock p {margin-bottom: 3.5vw;}
  #bodySubmit .backBtn {width: 100%; max-width: 35vw; font-size: 4vw; margin-top: 6vw;}
}




.footerWrap .footerTop {background-color: #4d3c2e; padding: 2rem 3vw 3rem; position: relative;}
.footerWrap .container {max-width: 76rem; margin: auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end;}
.footerWrap .container .column {-ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.footTopTxt {color: #fff;}
.footTopTxt p {font-weight: 600; font-size: 1.1rem; line-height: 1.2;}
.footTopSocialGroup {text-align: right;}
.footTopSocialGroup .foot-social {display: inline-block; vertical-align: middle; margin: 0 5px; }
.footTopSocialGroup .foot-social.ig {background: url(../images/social-icons/instagram.svg) no-repeat center center; width: 20px; height: 20px;}
.footTopSocialGroup .foot-social.yt {background: url(../images/social-icons/youtube.svg) no-repeat center center; width: 20px; height: 20px;}
.footTopSocialGroup .foot-social.fb {background: url(../images/social-icons/facebook.svg) no-repeat center center; width: 20px; height: 20px;}
.footerCR {color: #fff; margin-top: 5px; text-align: right;}
.footerCR > span {display: inline-block; vertical-align: middle;}
.footerCR > span.copyright-text {font-size: .7rem; margin-left: 5px;}

@media only screen and (max-width: 48rem) {
  .footerWrap .container .column {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
  .footTopTxt {text-align: center;}
  .footTopTxt p {font-size: 2.85vw;}
  .footTopSocialGroup {text-align: center; margin-top: 20px;}
  .footTopSocialGroup .foot-social.ig, .footTopSocialGroup .foot-social.yt, .footTopSocialGroup .foot-social.fb {width: 17px; height: 17px;}
  .footerCR {text-align: center;}
  .footerCR > span.copyright-text {font-size: 1.85vw; margin-left: 0;}
}