@charset "UTF-8"; /* Remove all the styles of the "User-Agent-Style sheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ html { height: 100%; font-size: 16px; } html.bigFontSize { font-size: 24px; } @media (min-width: 992px) { html.bigFontSize .sys__remind li::before { top: 9px; } } @media (max-width: 991px) { html.bigFontSize .sys__remind li::before { top: 8px; } } @media (min-width: 992px) { html.bigFontSize .sys__remind li:nth-child(n+2)::before { top: 18px; } } @media (max-width: 991px) { html.bigFontSize .sys__remind li:nth-child(n+2)::before { top: 17px; } } html.bigFontSize .sys__title a::before { color: #bbb; } html.bigFontSize .sys__title a::after { color: #C52100; } @media (min-width: 992px) { html.bigFontSize .sys-form__title { padding-top: 4px; } } html.bigFontSize .sys-form__terms p::before { margin-top: 5px; } html.bigFontSize .sys-form__checkbox { padding: 3px 0; } html.bigFontSize .sys-form__checkbox p::before { margin-top: 5px; } html.bigFontSize .sys-form__radio { padding: 2px 0; } html.bigFontSize .sys-form__radio p i { margin-top: 5px; } html.bigFontSize .sys-form__error { position: static; margin-top: 3px; } html.bigFontSize .service-checkbox__item p::before { margin-top: 5px; } @media (min-width: 992px) { html.bigFontSize .service-account__title { padding-top: 4px; } } html.bigFontSize .service-account__remove { margin-top: 3px; } html.bigFontSize .sys-dialog__otp-input { width: calc(100% - 125px); } html.bigFontSize .sys-dialog__otp-timer { width: 120px; } @media (max-width: 991px) { html.bigFontSize .sys__page { min-height: calc(100vh - 176px); min-height: calc(100dvh - 176px); } } @media (max-width: 575px) { html.bigFontSize .sys__page { min-height: calc(100vh - 216px); min-height: calc(100dvh - 216px); } } @media (max-width: 379px) { html.bigFontSize .sys__page { min-height: calc(100vh - 236px); min-height: calc(100dvh - 236px); } } @media (max-width: 991px) { html.bigFontSize .footer { height: 120px; } } @media (max-width: 575px) { html.bigFontSize .footer { height: 160px; } } @media (max-width: 379px) { html.bigFontSize .footer { height: 180px; } } body { height: 100%; font-family: "Montserrat", "Microsoft JhengHei", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.7; word-wrap: break-word; } *, *::before, *::after { padding: 0; margin: 0; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; -webkit-tap-highlight-color: transparent; } /* Reapply the pointer cursor for anchor tags */ a, button { display: block; cursor: pointer; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { display: block; max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } input::-ms-clear { display: none; } select::-ms-expand { display: none; } button { background-color: transparent; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .sys__loading { position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; min-height: 100dvh; background-color: rgba(0, 0, 0, 0.5); z-index: 999999; } .sys__loading::before { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 100px; height: 100px; background-image: url(../images/loading.svg); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sys__error { width: 100%; padding: 50px 0; } .sys__error img { width: 60px; margin: 0 auto; } .sys__error p { width: 100%; margin-top: 15px; font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 18px; line-height: 1.4; color: #990800; text-align: center; } .sys__main { width: 100%; min-height: 100vh; min-height: 100dvh; padding-top: 60px; overflow: hidden; } @media (max-width: 991px) { .sys__main { padding-top: 56px; } } .sys__page { width: 100%; min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px); padding: 55px 0; background-color: #F6F6F6; } @media (max-width: 991px) { .sys__page { min-height: calc(100vh - 136px); min-height: calc(100dvh - 136px); padding: 0; background-color: #fff; } } @media (max-width: 767px) { .sys__page { min-height: calc(100vh - 146px); min-height: calc(100dvh - 146px); } } .sys__container { width: 100%; padding: 0 10px; margin: 0 auto; } @media (min-width: 1200px) { .sys__container { max-width: 1160px; } } @media (max-width: 1199px) and (min-width: 992px) { .sys__container { max-width: 980px; } } @media (max-width: 991px) { .sys__container { max-width: 768px; padding: 0; } } .sys__content { width: 100%; } @media (max-width: 991px) { .sys__content { padding: 25px 10px; } } .sys__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .sys__title p { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 0; } @media (max-width: 991px) { .sys__title p { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .sys__title p img { width: 24px; margin-right: 10px; } @media (max-width: 991px) { .sys__title p img { display: none; } } .sys__title p > span:not(.sys__timer) { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: #444; } @media (max-width: 991px) { .sys__title p > span:not(.sys__timer) { font-size: 1.25rem; } } .sys__title a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; width: 70px; height: 40px; padding: 7px 0; background-color: #fff; border-radius: 20px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transition-property: -webkit-box-shadow; transition-property: -webkit-box-shadow; transition-property: box-shadow; transition-property: box-shadow, -webkit-box-shadow; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 991px) { .sys__title a { width: 60px; height: 36px; } } .sys__title a:hover { -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); } .sys__title a::before { content: "A"; margin-bottom: 2px; font-size: 16px; font-weight: 700; line-height: 1; color: #C52100; } @media (max-width: 991px) { .sys__title a::before { font-size: 14px; } } .sys__title a::after { content: "A"; margin-left: 5px; font-size: 26px; font-weight: 700; line-height: 1; color: #bbb; } @media (max-width: 991px) { .sys__title a::after { font-size: 22px; } } .sys__timer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 10px; font-size: 1rem; line-height: 1; color: #c70000; } @media (max-width: 991px) { .sys__timer { margin: 10px 0 0; } } .sys__timer::before { content: ""; display: block; width: 18px; height: 18px; margin-right: 6px; background-image: url("../images/time_icon.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .sys__box { width: 100%; margin-top: 20px; } @media (min-width: 992px) { .sys__box { padding: 40px; background-color: #fff; border-radius: 20px; -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); } } .sys__box--noMargin { margin: 0; } .sys__remind { width: 100%; padding: 30px; background-color: #f8f8f8; border-radius: 10px; } @media (max-width: 991px) { .sys__remind { padding: 20px; } } .sys__remind p { width: 100%; font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: #555; } @media (max-width: 991px) { .sys__remind p { font-size: 1.125rem; } } .sys__remind ul { width: 100%; margin-top: 15px; counter-reset: sysRemindCounter; } .sys__remind li { position: relative; width: 100%; padding-left: 30px; font-size: 0.9375rem; color: #555; } .sys__remind li:nth-child(n+2) { padding-top: 10px; margin-top: 10px; border-top: 1px solid #ddd; } @media (max-width: 991px) { .sys__remind li:nth-child(n+2) { padding-top: 8px; margin-top: 8px; } } .sys__remind li:nth-child(n+2)::before { top: 13px; } @media (max-width: 991px) { .sys__remind li:nth-child(n+2)::before { top: 11px; } } .sys__remind li::before { counter-increment: sysRemindCounter; content: counter(sysRemindCounter); position: absolute; top: 3px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20px; height: 20px; font-size: 15px; font-weight: 500; line-height: 1; color: #fff; background-color: #555; border-radius: 4px; } @media (max-width: 991px) { .sys__remind li::before { top: 2px; } } .sys__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-top: 30px; } .sys__buttons button:nth-child(n+2) { margin-left: 15px; } @media (max-width: 991px) { .sys__buttons button:nth-child(n+2) { margin-left: 5px; } } .sys__prev { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 50px; padding: 0 15px; background-color: #DDE2E6; border-radius: 25px; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } @media (min-width: 992px) { .sys__prev { min-width: 160px; } } @media (max-width: 991px) { .sys__prev { width: 35%; } } .sys__prev:disabled { background-color: #c9d0d6; cursor: not-allowed; } .sys__prev:not(:disabled):hover { background-color: #c9d0d6; } @media (max-width: 991px) { .sys__prev + .sys__next { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .sys__prev p { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.125rem; line-height: 1; color: #999; } @media (max-width: 991px) { .sys__prev p { font-size: 1.0625rem; } } .sys__next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 50px; padding: 0 15px; background-color: #C52100; border-radius: 25px; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } @media (min-width: 992px) { .sys__next { min-width: 160px; } } @media (max-width: 991px) { .sys__next { width: 100%; } } .sys__next:disabled { background-color: #801500; cursor: not-allowed; } .sys__next:not(:disabled):hover { background-color: #801500; } @media (min-width: 992px) { .sys__next--long { min-width: 350px; } } @media (min-width: 992px) { .sys__next--longer { min-width: 450px; } } .sys__next p { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.125rem; line-height: 1; color: #fff; } @media (max-width: 991px) { .sys__next p { font-size: 1.0625rem; } } .sys__next img { width: 16px; margin-right: 10px; } .sys__link { display: inline; color: #1A64D3; text-decoration: underline; } .sys__link--blank::after { background-image: url("../images/link_blank_icon.svg"); } .sys__link::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 5px; background-size: cover; background-position: center; background-repeat: no-repeat; } .sys-step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; width: 100%; padding: 0 10px; } @media (min-width: 1200px) { .sys-step { max-width: 1160px; } } @media (max-width: 1199px) and (min-width: 992px) { .sys-step { max-width: 980px; } } @media (min-width: 992px) { .sys-step { margin: 0 auto 44px; } } @media (max-width: 991px) { .sys-step { padding: 30px 0 26px; background-color: #F6F6F6; } } .sys-step__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 992px) { .sys-step__item { width: 20%; padding-bottom: 26px; } } @media (max-width: 991px) { .sys-step__item { width: 12%; } .sys-step__item:nth-child(1) { width: 32%; } .sys-step__item:nth-child(1)::before { left: 18.75%; } .sys-step__item:nth-child(5) { width: 32%; } .sys-step__item:nth-child(5)::before { left: 81.25%; } } .sys-step__item::before { content: ""; position: absolute; bottom: -9px; left: 50%; width: 22px; height: 22px; background-color: #fff; border-radius: 50%; border: 5px solid #999; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } @media (min-width: 992px) { .sys-step__item::before { left: 50%; } } .sys-step__item::after { content: ""; position: absolute; bottom: 0; left: 50%; display: block; width: 100%; height: 4px; margin-top: 24px; background-color: #ddd; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .sys-step__item img { width: 36px; opacity: 0.9; } @media (max-width: 991px) { .sys-step__item img { display: none; } } .sys-step__item p { width: 100%; margin-top: 10px; font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: #444; text-align: center; opacity: 0.9; } @media (max-width: 991px) { .sys-step__item p { display: none; } } .sys-step__item--active:nth-child(1)::after { background: -webkit-gradient(linear, left top, right top, from(#C52100), to(#C52100)); background: linear-gradient(to right, #C52100 0%, #C52100 100%); } @media (max-width: 991px) { .sys-step__item--active:nth-child(5)::after { background: -webkit-gradient(linear, left top, right top, from(#C52100), color-stop(81.24%, #C52100), color-stop(81.26%, #ddd), to(#ddd)); background: linear-gradient(to right, #C52100 0%, #C52100 81.24%, #ddd 81.26%, #ddd 100%); } } .sys-step__item--active::before { background-color: #C52100; border-color: #fff; -webkit-box-shadow: 0 0 6px rgba(197, 33, 0, 0.3); box-shadow: 0 0 6px rgba(197, 33, 0, 0.3); } .sys-step__item--active::after { background: -webkit-gradient(linear, left top, right top, from(#C52100), color-stop(49.1%, #C52100), color-stop(50.1%, #ddd), to(#ddd)); background: linear-gradient(to right, #C52100 0%, #C52100 49.1%, #ddd 50.1%, #ddd 100%); } .sys-step__item--active img { width: 50px; opacity: 1; } .sys-step__item--active p { display: none; } .sys-step__item--active ~ .sys-step__item::before { background-color: #C52100; border-color: #fff; -webkit-box-shadow: 0 0 6px rgba(197, 33, 0, 0.3); box-shadow: 0 0 6px rgba(197, 33, 0, 0.3); } .sys-step__item--active ~ .sys-step__item::after { background-color: #C52100; } .sys-step__item--active ~ .sys-step__item img { opacity: 1; } .sys-step__item--active ~ .sys-step__item p { opacity: 1; } .sys-dialog { width: calc(100vw - 30px); max-width: 460px; padding: 35px 30px; border-radius: 15px; } @media (max-width: 991px) { .sys-dialog { padding: 30px 20px; } } .sys-dialog__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .sys-dialog__title img { width: 22px; margin-right: 10px; } .sys-dialog__title p { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.125rem; font-weight: 700; line-height: 1; color: #444; } .sys-dialog__text { width: 100%; padding: 25px 0; margin-top: 15px; font-size: 1rem; color: #555; text-align: center; border-top: 1px solid #ddd; } .sys-dialog__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .sys-dialog__confirm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 160px; height: 40px; font-size: 1rem; line-height: 1; color: #fff; background-color: #C52100; border-radius: 20px; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } .sys-dialog__confirm:hover { background-color: #801500; } .sys-dialog__confirm + .sys-dialog__cancel { margin-top: 10px; } .sys-dialog__cancel { font-size: 1rem; line-height: 1; color: #aaa; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } .sys-dialog__cancel:hover { color: #777; } .sys-dialog__otp { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .sys-dialog__otp-image { width: 68px; margin: 0 auto; } .sys-dialog__otp-text { width: 100%; margin: 15px 0; } .sys-dialog__otp-input { width: calc(100% - 95px); height: 50px; padding: 0 10px; font-size: 1rem; line-height: 48px; color: #333; text-align: center; background-color: #fff; border-radius: 5px; border: 1px solid #ddd; } .sys-dialog__otp-input::-webkit-input-placeholder { color: #bbb; } .sys-dialog__otp-input::-moz-placeholder { color: #bbb; } .sys-dialog__otp-input:-ms-input-placeholder { color: #bbb; } .sys-dialog__otp-input::-ms-input-placeholder { color: #bbb; } .sys-dialog__otp-input::placeholder { color: #bbb; } .sys-dialog__otp-input:disabled { background-color: #eee; } .sys-dialog__otp-input:not(:disabled):hover { border-color: #777; } .sys-dialog__otp-input:not(:disabled):focus, .sys-dialog__otp-input:not(:disabled):active { border-color: #5592ED; } .sys-dialog__otp-timer { width: 90px; margin-left: 5px; } .sys-dialog__otp-timer p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 50px; font-size: 0.9375rem; line-height: 1; color: #026a9a; background-color: #bdeafd; border-radius: 5px; border: 1px solid #1297d4; } .sys-dialog__otp-timer a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 50px; font-size: 0.9375rem; line-height: 1; color: #fff; background-color: #026a9a; border-radius: 5px; } .sys-form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 40px); margin: -30px -20px 0; } .sys-form__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 50%; padding: 0 20px; margin-top: 30px; } @media (max-width: 991px) { .sys-form__row { width: 100%; } } .sys-form__row--full { width: 100%; } .sys-form__row--error .sys-form__select select { border-color: #C52100 !important; } .sys-form__row--error .sys-form__input input { border-color: #C52100 !important; } .sys-form__row--error .sys-form__error { display: block; } .sys-form__title { width: 140px; } @media (min-width: 992px) { .sys-form__title { margin-right: 10px; padding-top: 9px; } } @media (max-width: 991px) { .sys-form__title { width: 100%; } } .sys-form__title--required > p::after { content: "*"; color: #DE0615; } .sys-form__title > p { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 0.9375rem; line-height: 1.4; color: #555; } .sys-form__field { position: relative; width: calc(100% - 150px); } @media (max-width: 991px) { .sys-form__field { width: 100%; margin-top: 10px; } } .sys-form__notice { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-bottom: 5px; } .sys-form__notice p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 1px; padding: 1px 5px; background-color: #DAEFFF; border-radius: 10px; } .sys-form__notice p::before { content: ""; display: block; width: 14px; min-width: 14px; height: 14px; min-height: 14px; margin-right: 5px; background-image: url("../images/notice_icon.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .sys-form__notice p span { font-size: 0.8125rem; line-height: 1.4; color: #345B95; } .sys-form__error { position: absolute; top: calc(100% + 2px); left: 0; display: none; width: 100%; font-size: 0.8125rem; line-height: 1.4; color: #DE0615; } .sys-form__error::before { content: "Ｘ "; font-weight: 700; } .sys-form__input { width: 100%; } @media (min-width: 1200px) { .sys-form__input { max-width: 350px; } } @media (max-width: 1199px) and (min-width: 992px) { .sys-form__input { max-width: 260px; } } @media (max-width: 991px) and (min-width: 576px) { .sys-form__input { max-width: 300px; } } .sys-form__input input { width: 100%; height: 40px; padding: 0 20px; font-size: 1rem; line-height: 38px; color: #333; background-color: #fff; border-radius: 20px; border: 1px solid #ddd; } @media (max-width: 991px) { .sys-form__input input { padding: 0 15px; } } .sys-form__input input::-webkit-input-placeholder { color: #bbb; } .sys-form__input input::-moz-placeholder { color: #bbb; } .sys-form__input input:-ms-input-placeholder { color: #bbb; } .sys-form__input input::-ms-input-placeholder { color: #bbb; } .sys-form__input input::placeholder { color: #bbb; } .sys-form__input input:disabled { background-color: #eee; } .sys-form__input input:-moz-read-only { background-color: #eee; } .sys-form__input input:read-only { background-color: #eee; } .sys-form__input input:not(:disabled):not(:-moz-read-only):hover { border-color: #777; } .sys-form__input input:not(:disabled):not(:read-only):hover { border-color: #777; } .sys-form__input input:not(:disabled):not(:-moz-read-only):focus, .sys-form__input input:not(:disabled):not(:-moz-read-only):active { border-color: #5592ED; } .sys-form__input input:not(:disabled):not(:read-only):focus, .sys-form__input input:not(:disabled):not(:read-only):active { border-color: #5592ED; } .sys-form__input input:not(:disabled):hover { border-color: #777; } .sys-form__input input:not(:disabled):focus, .sys-form__input input:not(:disabled):active { border-color: #5592ED; } .sys-form__input input:not(:-moz-read-only):hover { border-color: #777; } .sys-form__input input:not(:read-only):hover { border-color: #777; } .sys-form__input input:not(:-moz-read-only):focus, .sys-form__input input:not(:-moz-read-only):active { border-color: #5592ED; } .sys-form__input input:not(:read-only):focus, .sys-form__input input:not(:read-only):active { border-color: #5592ED; } .sys-form__select { position: relative; width: 100%; } @media (max-width: 991px) and (min-width: 576px) { .sys-form__select { max-width: 300px; } } .sys-form__select select { position: relative; width: 100%; height: 40px; padding: 0 30px 0 20px; font-size: 1rem; line-height: 38px; color: #333; background-color: #fff; background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+); background-position: calc(100% - 10px) 50%; background-size: 20px 20px; background-repeat: no-repeat; border-radius: 20px; border: 1px solid #ddd; z-index: 1; } @media (max-width: 991px) { .sys-form__select select { padding: 0 25px 0 15px; background-position: calc(100% - 5px) 50%; } } .sys-form__select select:disabled { background-color: #eee; } .sys-form__select select:not(:disabled):hover { border-color: #777; } .sys-form__select select:not(:disabled):focus, .sys-form__select select:not(:disabled):active { border-color: #5592ED; } .sys-form__select select:has(option[value]:checked) + .sys-form__selectPlaceholder { display: none; } .sys-form__selectPlaceholder { position: absolute; top: 0; left: 21px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(100% - 60px); height: 100%; font-size: 1rem; line-height: 1; color: #bbb; white-space: nowrap; pointer-events: none; overflow: hidden; z-index: 2; } .sys-form__taiwanDate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .sys-form__taiwanDate .sys-form__select { max-width: 150px; } .sys-form__taiwanDate > *:nth-child(n+2) { margin-left: 5px; } @media (min-width: 992px) { .sys-form__taiwanDate > *:nth-child(n+2) { margin-left: 10px; } } .sys-form__taiwanDate > p { font-size: 1rem; line-height: 1; color: #333; white-space: nowrap; } .sys-form__idNoDate { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } @media (min-width: 992px) { .sys-form__idNoDate .sys-form__select { width: 150px; } } @media (min-width: 992px) and (max-width: 1199px) { .sys-form__idNoDate .sys-form__select { width: 114px; } } @media (max-width: 991px) { .sys-form__idNoDate .sys-form__select { max-width: 150px; } } .sys-form__idNoDate-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 991px) { .sys-form__idNoDate-row { width: 100%; } } .sys-form__idNoDate-row:nth-child(1) > *:nth-child(n+2) { margin-left: 5px; } @media (min-width: 992px) { .sys-form__idNoDate-row:nth-child(1) > *:nth-child(n+2) { margin-left: 10px; } } .sys-form__idNoDate-row:nth-child(1) > p { font-size: 1rem; line-height: 1; color: #333; white-space: nowrap; } @media (min-width: 992px) { .sys-form__idNoDate-row:nth-child(2) { margin-left: 10px; } } @media (max-width: 991px) { .sys-form__idNoDate-row:nth-child(2) { margin-top: 10px; } } @media (min-width: 992px) { .sys-form__idNoDate-row:nth-child(2) > *:nth-child(n+2) { margin-left: 10px; } } @media (max-width: 991px) { .sys-form__idNoDate-row:nth-child(2) > *:nth-child(n+2) { margin-left: 5px; } } .sys-form__address { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sys-form__address .sys-form__select { width: calc(50% - 30px); max-width: 180px; } @media (max-width: 991px) { .sys-form__address .sys-form__select { width: calc((100% - 50px) / 2); } } .sys-form__address .sys-form__select:nth-child(n+2) { margin-left: 10px; } @media (max-width: 991px) { .sys-form__address .sys-form__select:nth-child(n+2) { margin-left: 5px; } } .sys-form__address .sys-form__input { width: 100%; max-width: none !important; margin-top: 10px; } .sys-form__address > p { margin-left: 10px; font-size: 16px; line-height: 1; color: #333; } @media (max-width: 991px) { .sys-form__address > p { margin-left: 5px; } } .sys-form__terms { width: 100%; padding-top: 30px; margin-top: 30px; border-top: 1px solid #ddd; } .sys-form__terms label { cursor: pointer; } .sys-form__terms label input { display: none; } .sys-form__terms label input:checked + p { color: #fff; background-color: #0C98E3; } .sys-form__terms label input:checked + p .sys__link { color: #fff; } .sys-form__terms label input:checked + p .sys__link--blank::after { background-image: url("../images/link_blank_icon_white.svg"); } .sys-form__terms label input:checked + p::before { background-image: url("../images/terms_check.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .sys-form__terms label p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; padding: 12px 10px; font-size: 0.9375rem; line-height: 1.4; color: #555; background-color: #eee; border-radius: 5px; } .sys-form__terms label p::before { content: ""; display: block; width: 20px; height: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; } .sys-form__terms label p span { max-width: calc(100% - 30px); margin-left: 10px; } .sys-form__checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 20px); margin: -15px 0 0 -20px; padding: 9px 0; } .sys-form__checkbox-item { display: block; min-width: 1px; margin: 15px 0 0 20px; cursor: pointer; } .sys-form__checkbox-item:hover input:not(:checked):not(:disabled) + p::before { border-color: #777; } .sys-form__checkbox-item input { display: none; } .sys-form__checkbox-item input:checked + p::before { background-color: #0C98E3; background-image: url("../images/checkbox_check.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; border-color: #0C98E3; } .sys-form__checkbox-item input:checked:disabled + p::before { background-color: #999; border-color: #999; } .sys-form__checkbox-item input:disabled + p::before { background-color: #eee; } .sys-form__checkbox-item p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .sys-form__checkbox-item p::before { content: ""; display: block; width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin-right: 10px; border-radius: 5px; border: 1px solid #ddd; } .sys-form__checkbox-item p span { display: block; font-size: 1rem; line-height: 1.4; color: #555; } .sys-form__radio { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 20px); margin: -15px 0 0 -20px; padding: 8px 0; } .sys-form__radio-item { display: block; min-width: 1px; margin: 15px 0 0 20px; cursor: pointer; } .sys-form__radio-item:hover input:not(:checked):not(:disabled) + p i { border-color: #777; } .sys-form__radio-item input { display: none; } .sys-form__radio-item input:checked + p i::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color: #DE0615; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sys-form__radio-item input:checked:disabled + p i { background-color: #999; border-color: #999; } .sys-form__radio-item input:checked:disabled + p i::before { background-color: #fff; } .sys-form__radio-item input:disabled + p i { background-color: #eee; } .sys-form__radio-item p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .sys-form__radio-item p i { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin-right: 10px; border-radius: 50%; border: 1px solid #ddd; } .sys-form__radio-item p span { display: block; padding-top: 1px; font-size: 1rem; line-height: 1.4; color: #555; } .sys-form__search { position: relative; width: 100%; } .sys-form__search button { position: absolute; top: 50%; right: 21px; width: 16px; height: 16px; background-image: url("../images/search_icon.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.6; z-index: 2; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } .sys-form__search button:hover { opacity: 1; } .sys-form__search .sys-form__input { position: relative; z-index: 1; } .sys-form__search .sys-form__input input { padding: 0 56px 0 20px; } .sys-form__files { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (min-width: 992px) { .sys-form__files { width: calc(100% + 20px); margin: -15px 0 0 -20px; } } @media (max-width: 991px) { .sys-form__files { width: 100%; } } .sys-form__files a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 1px; min-height: 40px; padding: 8px 20px; background-color: #f0f0f0; border-radius: 20px; border: 1px solid #ddd; } @media (min-width: 992px) { .sys-form__files a { margin: 15px 0 0 20px; } } @media (max-width: 991px) { .sys-form__files a { width: 100%; } } @media (max-width: 991px) { .sys-form__files a:nth-child(n+2) { margin-top: 10px; } } .sys-form__files a.active { background-color: #EFF6ED; border-color: #2CBA54; } .sys-form__files a.active::before { background-color: #2CBA54; background-image: url("../images/files_check.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .sys-form__files a:not(.active):hover { border-color: #777; } .sys-form__files a::before { content: ""; display: block; width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin-right: 10px; background-color: #ccc; border-radius: 50%; } .sys-form__files a p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sys-form__files a p::before { content: ""; display: block; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin-right: 6px; background-image: url("../images/files_icon.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .sys-form__files a p span { display: block; font-size: 1rem; line-height: 1.4; color: #555; } .sys-detail { width: 100%; overflow: hidden; } .sys-detail__box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 40px); margin: -20px -20px 0; } .sys-detail__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 50%; padding: 20px 20px 0; margin-top: 20px; border-top: 1px dotted #ddd; } @media (max-width: 991px) { .sys-detail__row { width: 100%; } } .sys-detail__row:first-child { padding-top: 0; border-top: none; } @media (min-width: 992px) { .sys-detail__row:first-child:not(.sys-detail__row--full) + .sys-detail__row { padding-top: 0; border-top: none; } } .sys-detail__row--full { width: 100%; } .sys-detail__title { width: 140px; } @media (min-width: 992px) { .sys-detail__title { margin-right: 10px; } } @media (max-width: 991px) { .sys-detail__title { width: 100%; } } .sys-detail__title > p { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 0.9375rem; line-height: 1.4; color: #555; } .sys-detail__field { width: calc(100% - 150px); } @media (max-width: 991px) { .sys-detail__field { width: 100%; margin-top: 10px; } } .sys-detail__field p { font-size: 1rem; line-height: 1.4; color: #345B95; } .sys-detail__field p span { color: #DE0615; } .sys-detail__field ul li { font-size: 1rem; line-height: 1.4; color: #345B95; } .sys-detail__field ul li:nth-child(n+2) { margin-top: 5px; } .fancybox-active { height: 100%; } .fancybox-is-open .fancybox-bg { opacity: 0.6; } .header { position: fixed; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 60px; padding: 0 20px; background-color: #C52100; z-index: 99; } @media (max-width: 991px) { .header { height: 56px; padding: 0 10px; } } .header__logo img { height: 30px; } @media (max-width: 991px) { .header__logo img { height: 28px; } } .header__name { margin-left: 15px; font-size: 1.25rem; line-height: 1; color: #fff; } @media (max-width: 991px) { .header__name { margin-left: 10px; font-size: 1.125rem; } } .footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; height: 80px; padding: 15px 10px; background-color: #9e9e9e; } @media (max-width: 767px) { .footer { height: 90px; padding: 0 10px; } } .footer p { width: 100%; font-size: 0.8125rem; line-height: 1.4; color: #fff; text-align: center; } .footer p:nth-child(n+2) { margin-top: 5px; } .index { width: 100%; } .index + .sys__remind { margin-top: 30px; } .index__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .index__item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc((99.999% - 100px) / 3); } @media (max-width: 1199px) { .index__item { width: calc((99.999% - 50px) / 3); } } @media (max-width: 991px) { .index__item { width: 100%; } .index__item:nth-child(n+2) { margin-top: 25px; } } .index__icon { position: relative; width: 100px; border-radius: 50%; border: 6px solid #FFDADA; } @media (max-width: 991px) { .index__icon { width: 85px; border-width: 5px; } } .index__icon::before { content: ""; display: block; width: 100%; padding-bottom: 100%; } .index__icon img { position: absolute; top: 50%; left: 50%; width: 55%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .index__content { width: calc(100% - 110px); padding-top: 5px; } @media (max-width: 991px) { .index__content { width: calc(100% - 95px); padding-top: 6px; } } .index__step { width: 100%; font-size: 0.9375rem; font-weight: 500; line-height: 1; color: #F29303; } .index__title { width: 100%; margin-top: 5px; font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.4; color: #333; } .index__text { width: 100%; margin-top: 8px; font-size: 0.9375rem; line-height: 1.4; color: #555; } .service { width: 100%; } .service + .sys__remind { margin-top: 30px; } .service__title { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 0.9375rem; line-height: 1.4; color: #555; } .service__title::after { content: "*"; color: #C52100; } .service__form { width: 100%; margin-top: 20px; } .service__row { width: 100%; } .service__row:nth-child(n+2) { padding-top: 30px; margin-top: 30px; border-top: 1px dotted #ccc; } .service__subRow { width: 100%; padding-left: 34px; margin-top: 15px; } .service__subBox { width: 100%; padding-top: 15px; border-top: 1px solid #777; } .service__subForm { width: calc(100% + 40px); margin: -30px -20px 0; } .service-checkbox { width: 100%; } .service-checkbox__item { display: block; min-width: 1px; cursor: pointer; } .service-checkbox__item:hover input:not(:checked):not(:disabled) + p::before { border-color: #777; } .service-checkbox__item input { display: none; } .service-checkbox__item input:checked + p::before { background-color: #0C98E3; background-image: url("../images/checkbox_check.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; border-color: #0C98E3; } .service-checkbox__item input:checked:disabled + p::before { background-color: #999; border-color: #999; } .service-checkbox__item input:disabled + p::before { background-color: #eee; } .service-checkbox__item p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .service-checkbox__item p::before { content: ""; display: block; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin-right: 10px; border-radius: 5px; border: 1px solid #ddd; } .service-checkbox__item p > span { display: block; padding-top: 2px; font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1rem; line-height: 1.4; color: #555; } .service-checkbox__item p > span > span { display: block; width: 100%; margin-top: 5px; font-family: "Montserrat", "Microsoft JhengHei", sans-serif; font-size: 0.875rem; line-height: 1.4; color: #777; } .service-account { width: 100%; } .service-account__text { width: 100%; font-size: 0.9375rem; line-height: 1.4; color: #555; } .service-account__text span:nth-child(1) { color: #DE0615; } .service-account__text span:nth-child(2) { color: #345B95; } .service-account__list { width: 100%; margin-top: 30px; border-top: 1px dotted #ddd; } .service-account__item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; padding: 30px 0; border-bottom: 1px dotted #ddd; } .service-account__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100px; } @media (min-width: 992px) { .service-account__title { padding-top: 9px; margin-right: 10px; } } @media (max-width: 991px) { .service-account__title { width: 100%; } } .service-account__title p { width: calc(100% - 28px); font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 0.9375rem; line-height: 1.4; color: #4B6B9A; } .service-account__field { width: calc(100% - 110px); } @media (min-width: 992px) { .service-account__field .sys-form__row:nth-child(-n+3) .sys-form__input { max-width: 230px; } .service-account__field .sys-form__title { width: 110px; } .service-account__field .sys-form__field { width: calc(100% - 120px); } } @media (max-width: 991px) { .service-account__field { width: 100%; margin-top: 10px; } } .service-account__remove { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 22px; height: 22px; margin-right: 6px; background-color: #DE0615; border-radius: 50%; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } .service-account__remove:disabled { opacity: 0.7; cursor: not-allowed; } .service-account__remove:not(:disabled):hover { background-color: #b5020e; } .service-account__remove::before, .service-account__remove::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background-color: #fff; } .service-account__remove::before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .service-account__remove::after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .service-account__add { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 190px; height: 40px; margin-top: 30px; background-color: #555; border-radius: 20px; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0s; transition-delay: 0s; } .service-account__add:disabled { opacity: 0.7; cursor: not-allowed; } .service-account__add:not(:disabled):hover { background-color: #333; } .service-account__add p { font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1rem; line-height: 1; color: #fff; } .success { width: 100%; text-align: center; } .success__image { width: 100%; } .success__image img { height: 140px; margin: 0 auto; } @media (max-width: 991px) { .success__image img { height: 190px; } } .success__title { width: 100%; margin-top: 20px; font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.5rem; font-weight: 500; line-height: 1.4; color: #333; } @media (max-width: 991px) { .success__title { font-size: 1.25rem; } } .success__no { width: 100%; margin-top: 15px; font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: #333; } @media (max-width: 991px) { .success__no { font-size: 1.0625rem; } } .success__no .number { color: #345B95; } .success__no .notice { font-family: "Montserrat", "Microsoft JhengHei", sans-serif; font-size: 0.9375rem; font-weight: 400; color: #555; } @media (max-width: 991px) { .success__no .notice { display: block; } } .success__no .notice span { color: #DE0615; } .success__text { width: 100%; margin-top: 10px; font-size: 1rem; color: #555; } @media (max-width: 991px) { .success__text { padding: 0 30px; font-size: 0.875rem; } } .success__text span { color: #DE0615; }