@charset "UTF-8"; /**/ body { font-style: normal; line-height: 1.5; font-weight: 400; color: #5b5b5b; position: relative; } a.mbr-iconfont:hover { text-decoration: none; } .article .lead p, .article .lead ul, .article .lead ol, .article .lead pre, .article .lead blockquote { margin-bottom: 0; } a { font-style: normal; font-weight: 400; cursor: pointer; } a, a:hover { text-decoration: none; } .mbr-text { font-style: normal; line-height: 1.7; } h1, h2, h3, h4, h5, h6, span, p, a { line-height: 1; word-break: break-word; word-wrap: break-word; font-weight: 400; } b, strong { font-weight: 700; } .mbr-white { color: #ffffff; } .align-left { text-align: left; } .align-center { text-align: center; } .btn { font-weight: 600; font-style: normal; } .btn-sm { font-weight: 600; letter-spacing: 0px; } .btn-md { font-weight: 600; letter-spacing: 0px; } .btn-lg { font-weight: 600; letter-spacing: 0px; } html, body { height: auto; min-height: 100vh; } .alert { color: #ffffff; font-size: 1.1rem; line-height: 1.5; } .form-control { color: #232323; line-height: 1rem !important; } textarea.form-control { line-height: 1.5rem !important; } blockquote { font-style: italic; font-size: 1.09rem; } body { font-family: 'Verdana','Consolas', 'Courier','monospace','微軟正黑體'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .btn-primary, .btn-primary:active { color: #706d55 !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary.active { color: #ffffff !important; } .btn-primary.disabled, .btn-primary:disabled { color: #706d55 !important; } .btn-secondary, .btn-secondary:active { color: #ffffff !important; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary.active { color: #ffffff !important; } .btn-secondary.disabled, .btn-secondary:disabled { color: #ffffff !important; } .btn-info, .btn-info:active { color: #ffffff !important; } .btn-info:hover, .btn-info:focus { color: #ffffff !important; } .btn-info:disabled { color: #fff!important; } .btn-success, .btn-success:active { color: #ffffff !important; } .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success.active { color: #ffffff !important; } .btn-success.disabled, .btn-success:disabled { color: #ffffff !important; } .btn-warning, .btn-warning:active { color: #000000 !important; } .btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning.active { color: #ffffff !important; } .btn-warning.disabled, .btn-warning:disabled { color: #000000 !important; } .btn-danger, .btn-danger:active { color: #ffffff !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger.active { color: #ffffff !important; } .btn-danger.disabled, .btn-danger:disabled { color: #ffffff !important; } .btn-white, .btn-white:active { color: #7a7a7a !important; } .btn-white:hover, .btn-white:focus, .btn-white.focus, .btn-white.active { color: #4f4f4f !important; } .btn-white.disabled, .btn-white:disabled { color: #7a7a7a !important; } .btn-black, .btn-black:active { color: #ffffff !important; } .btn-black:hover, .btn-black:focus, .btn-black.focus, .btn-black.active { color: #ffffff !important; } .btn-black.disabled, .btn-black:disabled { color: #ffffff !important; } .btn-primary-outline, .btn-primary-outline:active { color: #e6e5de; } .btn-primary-outline:hover, .btn-primary-outline:focus, .btn-primary-outline.focus, .btn-primary-outline.active { color: #c1bead !important; } .btn-primary-outline.disabled, .btn-primary-outline:disabled { color: #706d55 !important; } .btn-secondary-outline, .btn-secondary-outline:active { color: #ff6666; } .btn-secondary-outline:hover, .btn-secondary-outline:focus, .btn-secondary-outline.focus, .btn-secondary-outline.active { color: #ff0f0f !important; } .btn-secondary-outline.disabled, .btn-secondary-outline:disabled { color: #ffffff !important; } .btn-info-outline, .btn-info-outline:active { color: #19bcd3; } .btn-info-outline:hover, .btn-info-outline:focus, .btn-info-outline.focus, .btn-info-outline.active { color: #138a9e !important; } .btn-info-outline.disabled, .btn-info-outline:disabled { color: #ffffff !important; } .btn-success-outline, .btn-success-outline:active { color: #2cccce; } .btn-success-outline:hover, .btn-success-outline:focus, .btn-success-outline.focus, .btn-success-outline.active { color: #1d8587 !important; } .btn-success-outline.disabled, .btn-success-outline:disabled { color: #ffffff !important; } .btn-warning-outline, .btn-warning-outline:active { color: #ffff00; } .btn-warning-outline:hover, .btn-warning-outline:focus, .btn-warning-outline.focus, .btn-warning-outline.active { color: #a8a800 !important; } .btn-warning-outline.disabled, .btn-warning-outline:disabled { color: #000000 !important; } .btn-danger-outline, .btn-danger-outline:active { color: #e85d75; } .btn-danger-outline:hover, .btn-danger-outline:focus, .btn-danger-outline.focus, .btn-danger-outline.active { color: #ff0653 !important; } .btn-danger-outline.disabled, .btn-danger-outline:disabled { color: #ffffff !important; } .btn-black-outline, .btn-black-outline:active { color: #232323; } .btn-black-outline:hover, .btn-black-outline:focus, .btn-black-outline.focus, .btn-black-outline.active { color: #000000 !important; } .btn-black-outline.disabled, .btn-black-outline:disabled { color: #ffffff !important; } .btn-white-outline, .btn-white-outline:active { color: #fafafa; } .btn-white-outline:hover, .btn-white-outline:focus, .btn-white-outline.focus, .btn-white-outline.active { color: #cfcfcf !important; } .btn-white-outline.disabled, .btn-white-outline:disabled { color: #7a7a7a !important; } .text-primary { color: #e6e5de !important; } .text-secondary { color: #ff6666 !important; } .text-success { color: #19bcd3 !important; } .text-info { color: #19bcd3 !important; } .text-warning { color: #ffff00 !important; } .text-danger { color: #e85d75 !important; } .text-white { color: #fafafa !important; } .text-black { color: #232323 !important; } a.text-primary:hover, a.text-primary:focus, a.text-primary.active { color: #bab7a4 !important; } a.text-secondary:hover, a.text-secondary:focus, a.text-secondary.active { color: #ff0000 !important; } a.text-success:hover, a.text-success:focus, a.text-success.active { color: #1a797a !important; } a.text-info:hover, a.text-info:focus, a.text-info.active { color: #117e90 !important; } a.text-warning:hover, a.text-warning:focus, a.text-warning.active { color: #999900 !important; } a.text-danger:hover, a.text-danger:focus, a.text-danger.active { color: #f6004c !important; } a.text-white:hover, a.text-white:focus, a.text-white.active { color: #e7e7e7 !important; } a.text-black:hover, a.text-black:focus, a.text-black.active { color: #000000 !important; } a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]) { position: relative; background-image: transparent; background-size: 10000px 2px; background-repeat: no-repeat; background-position: 0px 1.2em; background-position: -10000px 1.2em; } a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):hover { transition: background-position 2s ease-in-out; background-image: linear-gradient(currentColor 50%, currentColor 50%); background-position: 0px 1.2em; } .mbr-gallery-filter li.active .btn { color: #7f7b60; } a, a:hover { color: #e6e5de; } .mbr-plan-header.bg-primary .mbr-plan-subtitle, .mbr-plan-header.bg-primary .mbr-plan-price-desc { color: #ffffff; } .mbr-plan-header.bg-success .mbr-plan-subtitle, .mbr-plan-header.bg-success .mbr-plan-price-desc { color: #d1f5f5; } .mbr-plan-header.bg-info .mbr-plan-subtitle, .mbr-plan-header.bg-info .mbr-plan-price-desc { color: #d9f6fa; } .mbr-plan-header.bg-warning .mbr-plan-subtitle, .mbr-plan-header.bg-warning .mbr-plan-price-desc { color: #ffffcc; } .mbr-plan-header.bg-danger .mbr-plan-subtitle, .mbr-plan-header.bg-danger .mbr-plan-price-desc { color: #ffffff; } .form-control { font-size: 1.2rem; line-height: 1.5; font-weight: 400; } .form-control > .mbr-iconfont { font-size: 1.5rem; } .form-control:-webkit-input-placeholder { font-size: 1.2rem; line-height: 1.5; font-weight: 400; } .form-control:-webkit-input-placeholder > .mbr-iconfont { font-size: 1.5rem; } .jq-selectbox li:hover, .jq-selectbox li.selected { color: #000000; } .jq-selectbox__select-text { line-height:1.2; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { color: #000000 !important; } .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { color: #000000 !important; } body { overflow-x: hidden; } a { transition: color 0.6s; } /**/ :root { --background_color: #f5f5f5; --background_ads: transparent; --sp88blue: #19bcd3; --sp88blue_hover: #1cd3ec; --sp88bluelink: #16acc0; } @font-face { font-family: MyCustomFont; font-weight: bold; /**/ unicode-range: U+00-024F; /**/ src: local(Courier), local(monospace), local(Menlo); /**/ } @font-face { font-family: MyFixedFont; /**/ unicode-range: U+00-024F; /**/ src: local("Noto Sans Mono CJK TC"), local("Noto Sans Mono CJK SC"), local("Noto Sans Mono CJK JP"), local("Noto Sans Mono CJK KR"), local("Noto Sans Mono"), local("Roboto Mono"), local("Courier New"), local("Consolas"), local("Menlo"), local("monospace"); /**/ } a[href^="tel"] { pointer-events: none; color: inherit; text-decoration: none; } small { font-size: 80% !important; } strong { font-weight: 700 !important; } strong small { font-weight: 700 !important; } /**/ :root { --font-size-desktop-latin: 13px; --font-size-desktop-cjk: 15px; --font-size-mobile: 14px; --line-height: 1.6; --letter-spacing: normal; --letter-spacing-cjk: 0.02em; } /**/ html, body { font-family: "Noto Sans", "Poppins", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important; } html { font-size: var(--font-size-desktop-latin); letter-spacing: var(--letter-spacing); line-height: var(--line-height); overflow-wrap: break-word; word-break: normal; } /**/ /**/ /**/ html[lang="zh-TW"], html[lang="zh-TW"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft JhengHei", "Noto Sans TC", "PingFang TC", sans-serif !important; } /**/ html[lang="zh-HK"], html[lang="zh-HK"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft JhengHei", "Noto Sans HK", "PingFang HK", sans-serif !important; } /**/ html[lang="zh-CN"], html[lang="zh-CN"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif !important; } /**/ html[lang="ja"], html[lang="ja"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif !important; } /**/ html[lang="ko"], html[lang="ko"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif !important; } html[lang="zh-TW"], html[lang="zh-HK"], html[lang="zh-CN"], html[lang="ja"], html[lang="ko"] { font-size: var(--font-size-desktop-cjk); letter-spacing: var(--letter-spacing-cjk); } body { line-height: var(--line-height); overflow-wrap: break-word; } @media (max-width: 767.98px) { html, html[lang="zh-TW"], html[lang="zh-HK"], html[lang="zh-CN"], html[lang="ja"], html[lang="ko"] { font-size: var(--font-size-mobile); } } html[lang="zh-TW"] .lang-cjk-bold, html[lang="zh-CN"] .lang-cjk-bold, html[lang="zh-HK"] .lang-cjk-bold, html[lang="ja"] .lang-cjk-bold, html[lang="ko"] .lang-cjk-bold { font-weight: 700; } /**/ .cursor_default { cursor: default; } .emoji { font-family: "Noto Emoji" !important; } .fixed_width_font { font-family: MyFixedFont !important; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .inline { display: inline !important; } .inline-block { display: inline-block !important; } .m0 { margin: 0 !important; } .mb0 { margin-bottom: 0px !important; } .mb10 { margin-bottom: 10px !important; } .mb20 { margin-bottom: 20px !important; } .mb3 { margin-bottom: 3px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb5 { margin-bottom: 5px !important; } .mb50 { margin-bottom: 50px !important; } .mb60 { margin-bottom: 60px !important; } .mr3 { margin-right: 3px !important; } .mt10 { margin-top: 10px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt5 { margin-top: 5px !important; } .mt60 { margin-top: 60px !important; } .none { display: none !important; } .nowrap { white-space: nowrap !important; overflow: auto; word-wrap: normal; } .p20 { padding: 20px !important; } .pb2 { padding-bottom: 2px !important; } .pointer { cursor: pointer; } .scroll_m10 { scroll-margin: 10px; scroll-padding: 10px; } .text-align-center { text-align: center !important; } .text-auto-hide { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .underline { text-decoration: underline; } .valign-m { vertical-align: middle !important; } .w100 { width: 100px !important; } .w1000 { width: 100% !important; max-width: 1000px !important; } .w110 { width: 110px !important; } .w120 { width: 120px !important; } .w1200 { width: 100% !important; max-width: 1200px !important; } .w125 { width: 125px !important; } .w130 { width: 130px !important; } .w140 { width: 140px !important; } .w150 { width: 150px !important; } .w160 { width: 160px !important; } .w170 { width: 170px !important; } .w180 { width: 180px !important; } .w190 { width: 190px !important; } .w85p { width: 85%; } @media (max-width: 479px) { .m_block { display: block !important; } } @media (max-width: 767px) { .mmt20p { margin-top: 20px; } } @media (min-width: 480px) { .m_block { display: inline !important; margin-top: 3px !important; white-space: nowrap; } } @media (max-width: 575px) { .m_mb0 { margin-bottom: 0 !important; } } @media (max-width: 767px) { .m-center { margin: auto; text-align: center; } } @media (max-width: 767px) { .m-text-align-center { text-align: center !important; } } @media (max-width: 767px) { .mobile_hide { display: none !important; } } /**/ hr { border: none !important; height: 1px !important; background-image: linear-gradient(to right, transparent, #ccc, transparent) !important; } .c1 { color: #c1c1c1; } .fw-normal { font-weight: normal !important; } .icon_red { color: rgb(228, 63, 63); } .mbr-yellow { color: #FFFF00; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml18 { margin-left: 18px !important; } .ml20 { margin-left: 20px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml5 { margin-left: 5px !important; } .ml8 { margin-left: 8px !important; } .page_title, .page_title_home { font-size: 3rem; } .small { font-size: smaller !important; } .sp88_icon { color: var(--sp88blue) !important; line-height: 1rem !important; } .sp88blue { color: var(--sp88blue) !important; } .text-info { color: var(--sp88blue) !important; } .text-shadow { padding: 8px; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); } .text-sp88blue { color: var(--sp88blue); } .text_red { color: #FF6666; } a.nohover { text-decoration: none !important; color: inherit; } @media (max-width: 767px) { .donate { margin-left: 45px !important; margin-right: 45px !important; } } @media (max-width: 575px) { .page_title { font-size: 2.2rem !important; margin-top: -2px; text-align: left; } } @media (max-width: 575px) { .page_title_home { font-size: 2.2rem !important; margin-top: -2px; } } .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7, .display-8 { word-break: break-word !important; overflow-wrap: break-word !important; /**/ } .display-1 { font-size: clamp(2.8rem, 5vw, 4.2rem) !important; line-height: 1.1 !important; } .display-2 { font-size: clamp(2.5rem, 4.3vw, 3.6rem) !important; line-height: 1.15 !important; } .display-3 { font-size: clamp(2.2rem, 3.7vw, 3rem) !important; line-height: 1.2 !important; } .display-4 { font-size: clamp(1.9rem, 3.1vw, 2.5rem) !important; line-height: 1.3 !important; } .display-5 { font-size: clamp(1.6rem, 2.5vw, 2rem) !important; line-height: 1.4 !important; } .display-6 { font-size: clamp(1.3rem, 1.8vw, 1.5rem) !important; line-height: 1.5 !important; } .display-7 { font-size: clamp(1.05rem, 1.3vw, 1.125rem) !important; line-height: 1.5 !important; } .display-8 { font-size: clamp(0.9rem, 1vw, 0.95rem) !important; line-height: 1.5 !important; } .my_txt_color { color: var(--my_txt_color); } .no-select { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } .lh16 { line-height: 1.6 !important; font-size: 1rem; } .lh12 { line-height: 1.2 !important; font-size: 1rem; } .sz16 { font-size: 16px; } .info { font-size: 1rem !important; } .bd_bgcolor { background-color: #f5f5f5 !important; /**/ } .bg_f8 { background-color: #f8f8f8 !important; } .border_555 { border-color:#555 !important; } .w_fit_content { width: fit-content !important; } .min-w-180 { min-width: 180px; } .min-w-170 { min-width: 170px; } .min-w-160 { min-width: 160px; } .min-w-150 { min-width: 150px; } .min-w-140 { min-width: 140px; } .min-w-130 { min-width: 120px; } .min-w-120 { min-width: 120px; } .scrollbar { overflow-y: auto !important; /**/ } .no-transition { transition: none !important; } .truncate { white-space: nowrap; /**/ overflow: hidden; /**/ text-overflow: ellipsis; /**/ } .gap-2 { gap: 3px; } .text-monospace { font-family: "Noto Sans Mono", /**/ Consolas, /**/ Menlo, /**/ "Roboto Mono", /**/ "Courier New", /**/ monospace !important; } @media screen and (max-width: 575.98px) { .m-mt0 { margin-top: 0 !important; } } @media screen and (max-width: 767px) { .m-text-left { text-align: left !important; } } @media screen and (max-width: 575.98px) { .m_top10 { margin-top: 10px; } } @media screen and (max-width: 991.98px) { .ipad_hide { display: none !important; } } @media screen and (min-width: 767.98px) { .desktop_hide { display: none !important; } } @media screen and (max-width: 767.98px) { .ipad_hide { display: none !important; } } @media screen and (max-width: 767.98px) { .ipad_center { text-align: center !important ; } } @media screen and (max-width: 767.98px) { .ipad_pl_2 { padding-left: 10px !important ; } } .border10 { border-radius: 10px; } /**/ :root { --anno_bg: #d32952; /**/ --anno_bg_panel: #f8f8f8; /**/ /**/ /**/ --gray: #aaaaaa; /**/ /**/ /**/ --icon_color: #19bcd3; /**/ --draw_color: #e90000; /**/ --stop_color: #999999; /**/ --nav_bg_color: var(--sp88blue); /**/ --panel_bg_color: #ffffff; /**/ --top_height: 370px; /**/ /**/ --my_txt_color: #555555; --panel_txt_color: #555555; --icon_color_hover: #19bcd3; /**/ --draw_color_hover: #e90000; /**/ --stop_color_hover: #999999; /**/ --icon_txt_color: #ffffff; /**/ --draw_txt_color: #ffffff; /**/ --stop_txt_color: #ffffff; /**/ }