/* --- bootstrap.min.css --- */ @charset "UTF-8";/*! * Bootstrap v5.0.1 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-font-sans-serif);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.2em;background-color:#fcf8e3}sub{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.img-fluid{max-width:100%;height:auto}.figure{display:inline-block}.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x)/ -2);margin-left:calc(var(--bs-gutter-x)/ -2)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)/ 2);padding-left:calc(var(--bs-gutter-x)/ 2);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;--bs-table-striped-color:#212529;--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:#212529;--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:#212529;--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:#212529;vertical-align:top;border-color:#dee2e6}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:last-child)>:last-child>*{border-bottom-color:currentColor}.table-active{--bs-table-accent-bg:var(--bs-table-active-bg);color:var(--bs-table-active-color)}.table-hover>tbody>tr:hover{--bs-table-accent-bg:var(--bs-table-hover-bg);color:var(--bs-table-hover-color)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}textarea.form-control{min-height:calc(1.5em + .75rem + 2px)}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4){border-top-right-radius:0;border-bottom-right-radius:0}.form-control.is-valid,.was-validated .form-control:valid{border-color:#198754;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0a58ca;border-color:#0a53be}.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#565e64;border-color:#51585e}.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(130,138,145,.5)}.show>.btn-success.dropdown-toggle{color:#fff;background-color:#146c43;border-color:#13653f}.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.show>.btn-info.dropdown-toggle{color:#000;background-color:#3dd5f3;border-color:#25cff2}.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(11,172,204,.5)}.show>.btn-warning.dropdown-toggle{color:#000;background-color:#ffcd39;border-color:#ffc720}.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#bb2d3b;border-color:#b02a37}.btn-danger:focus{color:#fff;background-color:#bb2d3b;border-color:#b02a37;box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#b02a37;border-color:#a52834}.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.show>.btn-light.dropdown-toggle{color:#000;background-color:#f9fafb;border-color:#f9fafb}.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(211,212,213,.5)}.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1a1e21;border-color:#191c1f}.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(66,70,73,.5)}.btn-outline-primary.dropdown-toggle.show{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-outline-primary.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.5)}.btn-outline-secondary.dropdown-toggle.show{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(108,117,125,.5)}.btn-outline-success.dropdown-toggle.show{color:#fff;background-color:#198754;border-color:#198754}.btn-outline-success.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-outline-info.dropdown-toggle.show{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-outline-info.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(13,202,240,.5)}.btn-outline-warning.dropdown-toggle.show{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-outline-danger.dropdown-toggle.show{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-outline-light.dropdown-toggle.show{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(248,249,250,.5)}.btn-outline-dark.dropdown-toggle.show{color:#fff;background-color:#212529;border-color:#212529}.btn-outline-dark.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(33,37,41,.5)}.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.dropdown{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:.125rem}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(0,0,0,.15)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#1e2125;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#0d6efd}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#212529}.dropdown-menu-dark{color:#dee2e6;background-color:#343a40;border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item{color:#dee2e6}.dropdown-menu-dark .dropdown-item:focus,.dropdown-menu-dark .dropdown-item:hover{color:#fff;background-color:rgba(255,255,255,.15)}.dropdown-menu-dark .dropdown-item.active,.dropdown-menu-dark .dropdown-item:active{color:#fff;background-color:#0d6efd}.dropdown-menu-dark .dropdown-item.disabled,.dropdown-menu-dark .dropdown-item:disabled{color:#adb5bd}.dropdown-menu-dark .dropdown-divider{border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item-text{color:#dee2e6}.dropdown-menu-dark .dropdown-header{color:#adb5bd}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem;color:#0d6efd;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:#0a58ca}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-link{margin-bottom:-1px;background:0 0;border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6;isolation:isolate}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-nav .dropdown-menu{position:static}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.accordion-item:last-of-type .accordion-button.collapsed{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.accordion-item:last-of-type .accordion-collapse{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.accordion-flush .accordion-collapse{border-width:0}.pagination{display:flex;padding-left:0;list-style:none}.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:1rem}}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.toast{width:350px;max-width:100%;font-size:.875rem;pointer-events:auto;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);border-radius:.25rem}.toast:not(.showing):not(.show){opacity:0}.modal{position:fixed;top:0;left:0;z-index:1060;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.modal-header .btn-close{padding:.5rem .5rem;margin:-.5rem -.5rem -.5rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}.modal-footer>*{margin:.25rem}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}.modal-fullscreen .modal-footer{border-radius:0}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}.modal-fullscreen-sm-down .modal-footer{border-radius:0}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}.modal-fullscreen-md-down .modal-footer{border-radius:0}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}.modal-fullscreen-lg-down .modal-footer{border-radius:0}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}.modal-fullscreen-xl-down .modal-footer{border-radius:0}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}.modal-fullscreen-xxl-down .modal-footer{border-radius:0}}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.d-block{display:block!important}.d-flex{display:flex!important}.d-none{display:none!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.m-3{margin:1rem!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.p-0{padding:0!important}.text-center{text-align:center!important}.visible{visibility:visible!important}@media (min-width:768px){.d-md-block{display:block!important}}@media (min-width:992px){.d-lg-block{display:block!important}.d-lg-none{display:none!important}} /* --- bootstrap-icons.css --- */ @font-face { font-family: "bootstrap-icons"; src: url("fonts/bootstrap-icons_q_cr0ncd.woff2") format("woff2"), url("fonts/bootstrap-icons_q_cr0ncd.woff") format("woff"); } [class^="bi-"]::before, [class*=" bi-"]::before { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bi-arrows-collapse::before { content: "\f14b"; } .bi-door-open::before { content: "\f308"; } .bi-envelope-open::before { content: "\f32e"; } .bi-folder2-open::before { content: "\f3d8"; } .bi-list::before { content: "\f479"; } /* --- gr66-base.css --- */ /* gr66-base.css — 剝色骨架（自動產生，勿手改） 來源：style.css, member.css, marquee.css, fixmenu.css 版面宣告一條不動，只把顏色類拿掉，讓 gr66-brand.css 的 token 接手上色。 */ /* ---- from style.css ---- */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{color:inherit;margin:0;padding:0;min-height:100%;height:100%} main{margin-top:15px;width:100%;min-height:480px;background:url("../images/bg_200.png.webp")} a{text-decoration:none;color:inherit;cursor:pointer} a:hover{color:inherit;text-decoration:none} h1, h2, h3, h4, h5, h6{font-family:"Noto Sans TC", sans-serif;font-weight:600} .small, small{font-size:50%} .button{color:inherit !important;text-transform:uppercase;padding:6px 20px;border:2px solid var(--g-line);min-width:100px} .button:hover{color:inherit} #header{height:85px;transition:all 0.5s;z-index:997;transition:all 0.5s} #header .logo a span{font-size:28px;margin-left:12px;line-height:1;letter-spacing:2px;text-transform:uppercase;color:inherit;font-family:"cwTeXYen", sans-serif} #header .logo{text-align:center} #header .logo img{padding:0;max-height:65px} @media (max-width: 1410px){#header .logo a span{font-size:24px}} @media (max-width: 1199px){#header{height:70px}#header .logo img{margin:auto;padding-top:6px}#header .logo{flex:none}} @media (max-width: 767px){main{margin-top:0px;padding-bottom:70px}#header{height:70px}#header .logo img{max-height:60px;padding:6px}} .navbar-bg{padding:0;color:inherit;display:flex;align-items:center;height:85px} .navbar{padding:0;margin:auto} .navbar ul{margin:0;padding:0;display:flex;list-style:none;align-items:center} .navbar li{position:relative} .navbar a, .navbar a:focus{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1rem;color:inherit;text-transform:uppercase;white-space:nowrap;transition:0.3s;height:85px} .navbar a i, .navbar a:focus i{font-size:12px;line-height:0;margin-left:5px} .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a{color:inherit} .navbar a span{color:inherit;font-size:12px;display:none} .btn-login span, .btn-register span{font-size:.8em !important;color:inherit;display:none !important} .btn-login{color:inherit !important;padding:6px 20px;border-right:0;width:100px;height:85px;display:flex !important;align-items:center !important;justify-content:center !important} .btn-register{color:inherit !important;padding:6px 20px;width:100px;height:85px;display:flex !important;align-items:center !important;justify-content:center !important} .btn-login:hover{color:inherit !important;transform:scale(1.025)} .btn-register:hover{color:inherit !important;transform:scale(1.025)} .btn-icon{max-width:40px;max-height:40px;padding:4px} .u-login{padding:6px 12px;width:230px;height:85px;font-size:14px;display:flex;flex-direction:row;align-items:center} .u-login .u-info{padding:0 6px;display:flex;flex-direction:column} .uuid, .uucash{width:128px;margin:2px 0px;display:flex;overflow:hidden} .u-login .link{display:flex;flex-direction:column;align-items:center;justify-content:center} .u-login .btn-tsfr, .u-login .btn-dpst, .u-login .btn-tsfr:hover, .u-login .btn-dpst:hover, .u-login .btn-tsfr:focus, .u-login .btn-dpst:focus{font-size:14px !important;height:32px !important;width:100% !important;display:flex !important;flex-direction:row !important;border-radius:24px;margin:2px} @media (max-width: 1366px){.navbar .dropdown .dropdown ul{left:-90%}.navbar .dropdown .dropdown:hover > ul{left:-100%}} @media (max-width: 990px){.btn-login, .btn-register{width:200px;font-size:2rem !important;display:flex !important;flex-direction:row !important;align-content:center !important;justify-content:center !important;align-items:center !important}.btn-sm{width:80px;height:30px;padding:6px 10px;font-size:14px !important;border-radius:20px;margin:0}.btn-login{border-radius:20px 0 0 20px}.btn-register{border-radius:0 20px 20px 0}.btn-icon{max-width:30px;max-height:28px;padding:2px 5px}} .mobile-nav-toggle{color:inherit;font-size:2rem;font-weight:900;cursor:pointer;display:none;line-height:0;transition:0.5s;padding:20px;margin:-12px} @media (max-width: 991px){.navbar{padding:12px 0;margin:0}.navbar-bg{padding:0 !important;height:70px}.mobile-nav-toggle{display:block}.navbar ul{display:none}.navbar a, .navbar a:focus{display:flex;flex-direction:row;justify-content:center}.navbar a span{margin-left:.8rem}} .navbar-mobile .dropdown ul{position:static;display:none;margin:10px 20px;padding:10px 0;z-index:99;opacity:1;visibility:visible} .navbar-mobile .dropdown ul li{min-width:200px} .navbar-mobile .dropdown ul a{padding:10px 20px} .navbar-mobile .dropdown ul a i{font-size:12px} .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a{color:inherit} .navbar-mobile .dropdown > .dropdown-active{display:block} section{overflow:hidden} .testimonials{padding:0} .testimonials .testimonial-title{position:absolute;left:25%;top:25%;transform:rotate(-4deg);-webkit-filter:drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));filter:drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));display:none} .Wbtn{width:50% !important;display:flex;width:80px;height:32px;border-radius:10px;border:solid var(--g-line);padding:4px;text-align:center;font-size:.8em;color:inherit !important;align-items:center;justify-content:center;margin:2px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px} .btn-dpst{border:solid var(--g-line);margin-top:-4px;height:38px} .btn-tsfr{border:1px solid var(--g-line);margin-top:-4px;height:38px} .Wbtn img{width:20px;height:20px;margin-right:4px} .featured{padding:80px 0} @media (max-width: 960px){.tab-content .container{max-width:430px}} .btn{position:relative;display:inline-block;font-size:.875rem;line-height:1.25;min-width:180px;border-radius:6.25rem;text-align:center;padding:0.75rem 1.875rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;transition:color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease} @media (min-width: 48em){.btn{padding:0.75rem 2.5rem;font-size:1rem;letter-spacing:2px}} @media (max-width: 768px){.btn{border-width:2px;margin-top:12px;max-width:80%}} @media (max-width: 425px){.btn{min-width:180px}} section#faq{padding:60px 20px} .faq .container{max-width:960px} .faq .faq-list{padding:0;list-style:none;color:inherit} .faq .faq-list li{padding:10px;border:4px solid var(--g-line);border-radius:20px;overflow:hidden;margin-bottom:20px} .faq .faq-list a{display:contents;position:relative;font-size:18px;line-height:24px;font-weight:400;padding-right:25px;cursor:pointer;color:inherit} .faq .faq-list .btn{display:initial;padding:6px 24px;color:inherit;font-size:.8em} .faq .faq-list img{position:relative;border-radius:20px} .faq .faq-list i{font-size:24px;position:absolute;right:4px;top:4px;color:inherit;padding:6px;border-radius:12px} .faq .faq-list p{margin-bottom:0;padding:1rem 3rem} .faq .faq-list .icon-show{display:none} .faq .faq-list a.collapsed{color:inherit} .faq .faq-list a.collapsed:hover{color:inherit} .faq .faq-list a.collapsed .icon-show{display:inline-block} .faq .faq-list a.collapsed .icon-close{display:none} @media (max-width: 768px){section#faq{padding:40px 0}.faq .faq-list p{font-size:.8em;padding:1rem 1rem}} #footer{background:url("../images/footer-bg.png.webp") repeat;color:inherit;font-size:1em;position:relative} #footer ul{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding-left:0} #footer ul li{list-style:none;margin:4px 2px;padding:0} #footer a{color:inherit;font-size:1em} @media (max-width: 768px){#footer{font-size:14px;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}#footer ul{display:flex;flex-direction:row;flex-wrap:wrap}#footer ul li{padding:4px}} .modal{top:10%} .modal-header{color:inherit;font-weight:900;border-bottom:0} .modal-header .close{color:inherit;font-size:2rem;padding:1rem 1rem;margin:-1rem -0.2rem -1rem auto;padding:0;border:0} .close{float:right;font-size:1.5rem;font-weight:700;line-height:1;opacity:1} .modal-footer{border:0} h4.modal-title{color:inherit} .modal-content{color:inherit;border:1px solid var(--g-line);border-radius:16px;overflow:hidden} .modal-body{max-height:50vh;overflow-y:scroll} .login_form .form-control{font-size:18px;color:inherit;border-radius:0;border:0;border-bottom:1px solid;background:0 0} .login_form label{margin:10px 6px;font-size:16px;font-weight:600;letter-spacing:2px} #notice .nav-tabs{display:flex;flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid var(--g-line)} #notice .tab-content li{margin-bottom:12px;border-bottom:1px dotted var(--g-line)} #notice .nav-link{display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:.8em;color:inherit} .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{border:0 !important;border-bottom:4px solid var(--g-line) !important} #notice .nav-link.active{border:0;border-bottom:4px solid var(--g-line) !important} #notice .nav-link img{max-height:30px} #notice .tab-content .date{font-size:.8em;color:inherit} section#register{min-height:80vh;padding:60px 40px 120px 40px} .ft-navbar{padding:8px 0 24px 0} .ft-navbar ul{margin:auto;height:40px;color:inherit} .ft-navbar ul li{list-style:none;padding:6px 0px;text-align:center;min-width:46px} a.ft-link{line-height:0;font-size:.8em;color:inherit;font-family:"Noto Sans TC", sans-serif} .ft-link img{margin-bottom:10px;width:24px;height:24px} a.ft-link div{margin:4px auto;text-align:center} .register h4{color:inherit;font-weight:600;font-size:24px;margin-bottom:12px} .google div{color:inherit;width:272px !important;height:47px;border-radius:40px;padding:6px 20px;margin:auto;text-align:center;display:flex;justify-content:space-between;align-items:center} .authModal{display:none;position:fixed;z-index:1040;left:0;top:0;width:100%;height:100%} .authModal .modal-box{position:absolute;transform:translateX(-50%);width:100%;max-width:600px;padding:0px 0px 16px 0px;animation:slideUp 0.4s ease;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)} @media (min-width: 768px){.modal-box{top:10%;left:50%;transform:translate(-50%, -50%);animation:fadeInUp 0.3s ease}} @media (max-width: 767px){.modal-box{bottom:0;left:50%;transform:translateX(-50%);border-radius:20px 20px 0 0;animation:slideUp 0.4s ease}} @keyframes slideUp { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } } @keyframes fadeInUp { from { transform: translate(-50%, 60%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } } @keyframes fadeIn { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 0.6); } } .authModal .close_m{position:absolute;right:10px;top:-51px;font-size:2em;line-height:1.1;border-radius:100%;width:40px;height:40px;text-align:center;cursor:pointer} .authModal .tab-header{display:flex;justify-content:space-around;margin-bottom:15px} .authModal .tab-btn{flex:1;padding:10px;border:none;color:inherit;cursor:pointer} .authModal .tab-btn.active{color:inherit;font-weight:bold} .authModal .tab-content{padding:20px;text-align:center} .authModal .tab-content input ,.authModal .tab-content select{width:100%;padding:10px;margin:10px 0;border:1px solid var(--g-line);border-radius:5px;color:inherit} .authModal .login, .authModal .register, .authModal .transfer, .authModal .history{width:100%;padding:20px;color:inherit;border:none;border-radius:30px;font-weight:bold;margin-top:20px;cursor:pointer} .authModal h5{color:inherit;font-weight:400} .authModal .login-else-box{margin-top:13px;border-top:1px solid var(--g-line);padding:5px 0px} .login-else-box .log-img img{width:50px;margin-right:4px} #authModalTransfer .modal-box .content{padding:40px 30px 85px 30px;text-align:center} /* ---- from member.css ---- */ section.member{padding:40px 0 40px 0;color:inherit} section.member .container{display:flex;justify-content:space-between} .member a{color:inherit} .member a:hover{color:inherit;text-decoration:none} .member h1, .member h2, .member h3, .member h4, .member h5, .member h6{font-family:"微軟正黑體", sans-serif;color:inherit;font-weight:bold} .member .btn{display:inline-block;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0.375rem 0.75rem;font-size:1rem;border-radius:0.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out} .member-modal{top:10%} .member-modal .modal-header{color:inherit;font-weight:900;border-bottom:0} .member-modal .modal-header .close{color:inherit} .member-modal .modal-content{border:1px solid var(--g-line)} .member-modal .modal-body{text-align:center} .member-modal h4{color:inherit !important} .member-modal .form-group{display:inline-flex;margin-bottom:12px} .member-modal .form-control, .member-modal .input-group-text, .member-modal .form-control:focus{display:block;width:100%;padding:0.375rem 0.75rem;font-size:1rem;font-weight:400;line-height:1.5;color:inherit;border:0;border-bottom:1px solid var(--g-line);border-radius:0} .member-modal label{display:inline-block;width:160px;margin-right:0;color:inherit;line-height:1;padding:5px 10px;text-align:left} @media only screen and (max-width: 767px){section.member{padding:16px 0}} .member-page{width:79%;min-height:calc(80vh - 12px);padding:20px 30px;border-radius:20px;font-size:14px} .member-page .login_form label{margin:10px 6px;font-size:16px;color:inherit;font-weight:600} .member-page .form-group{display:flex;align-items:center;margin-bottom:20px} .member-page label{display:inline-block;width:130px;margin-right:16px;color:inherit} .member-page label span, .member-modal label span{font-size:x-small} .member-page .content span{font-weight:bold;letter-spacing:1px} .member-page .btn, .member-modal .btn{border-radius:20px;font-size:12px;min-width:100px;max-width:200px} .member-page .inline-block{display:flex;align-items:center} .member-page ul.note{font-size:14px;margin-top:24px;color:inherit} @media only screen and (max-width: 960px){.member-page{width:auto;margin-left:10px}} @media only screen and (max-width: 767px){.member-page{width:100%;padding:20px 20px;margin:0}} .game-cash-box .btn{font-size:12px} .game-cash-box .btn img{width:12px} .form-control:disabled{opacity:1} .member-page table{text-align:center;font-size:12px} .member-page th{padding:16px 10px !important;text-align:center} .pay{text-align:center;margin:10px 0;padding:15px} .pay .current::after{content:"";position:absolute;bottom:-30px;left:50%;margin-left:-15px;width:0;height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:var(--g-line)} .pay .current img{-webkit-filter:grayscale(0);-moz-filter:grayscale(0);-ms-filter:grayscale(0);-o-filter:grayscale(0);filter:grayscale(0)} .member .google div{color:inherit;width:272px !important;height:47px;border-radius:40px;padding:6px 20px;margin:auto;text-align:center;display:flex;justify-content:space-between;align-items:center} @media only screen and (max-width: 450px){.badge{position:absolute;left:-6px;top:-10px}.member-page.notice .btn{width:60px !important;max-width:fit-content;min-width:auto}.member-page.notice .btn-danger{width:80px !important}} /* ---- from marquee.css ---- */ .marquee-wrapper{width:100%;height:26px;overflow:hidden;position:relative;color:inherit} .marquee-content{display:flex;width:max-content;animation:scroll-left 90s linear infinite} .marquee-content li{display:inline-block;padding:0 10px;white-space:nowrap;font-size:16px} .marquee-content:hover{animation-play-state:paused} .marquee-content li a{color:inherit} @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media only screen and (max-width: 768px){.marquee-content li a{color:inherit}ul.marquee-content{margin:5px}} /* ---- from fixmenu.css ---- */ /* --- gr66-theme-native.css --- */ /* ============================================================ Theme Native — 沿用 gr66.net 現有的顏色風格 ------------------------------------------------------------ 不是新配色，是把 dbi88.gr66.net 首頁本來就在用的顏色原封不動搬過來： - 登入／註冊按鈕：style.css 原本的放射狀漸層（金 / 紅）+ 黑色陰影， 這兩段漸層跟陰影是直接從線上首頁量出來的，數字沒有改。 - 遊戲分類卡：linear-gradient(180deg,#ffe4be 20%,#c3a064 70%,#ffdbab 100%)， 也是首頁 action-game 卡片本來的漸層。 - 淺色底 + 米色分隔線（member.css 原本 .box 的 #e8e3d3），不是我發明的深色系。 在這套原生配色上，補 sa999/dg66 那輪量出來的尺寸（控件 48px、圓角加大、 留白加寬），讓它更舒服，但顏色語言完全是 gr66 自己的。 ============================================================ */ :root{ --g-ink: #fbf8f2; /* 頁面底：接近首頁的米白 */ --g-ink-2: #f3ecdf; --g-panel: #ffffff; /* 卡片：白 */ --g-panel-2: #f7f1e4; /* 卡片內次級塊：淺米 */ --g-gold: #d8a338; --g-gold-hi: #efff00; /* 按鈕漸層最亮那一階，跟首頁一致 */ --g-gold-dim: #df9a00; --g-text: #2b2013; /* 深咖啡黑，不用純黑 */ --g-text-dim: #6b6152; --g-muted: #9c917c; --g-line: #e8e3d3; /* member.css 原本的米色分隔線 */ --g-line-2: #efe9db; --g-on-gold: #24170a; --g-ruby: #aa0212; --g-ruby-hi: #dc3545; --g-ruby-dim: #5f0000; } body{ background:var(--g-ink); color:var(--g-text); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; font-size:18px; } /* member.css 在 .member-page 容器本身寫死 font-size:14px（不是顏色，剝色腳本不會碰）， 底下所有文字都繼承這個 14px，body 的 18px 傳不進來。要在容器層級蓋掉才有效。 */ .member-page{ font-size:18px !important; } main{ background:var(--g-ink) !important; color:var(--g-text); } .member, section{ color:inherit; } /* 卡片：白底 + 米色細邊 + 柔陰影，圓角比照 dg66/sa999 實測放大到 16px。 之前 .member-page（外層容器）跟 .box（裡面的「帳戶資訊」區塊）套了同一條規則， 變成卡片包卡片、兩層邊框陰影疊在一起，看起來「包著又包著」很複雜。 改成只有 .box／.card／.memberMenu 這種「真正的區塊」是卡片，.member-page 這個外層容器改成透明，就是頁面本身的留白，不再是另一層框。 */ .member .card, .member .box, .panel, .modal-content, .tab-content{ background:var(--g-panel) !important; color:var(--g-text); border:1px solid var(--g-line) !important; border-radius:16px !important; box-shadow:0 10px 26px -14px rgba(43,32,19,.35) !important; } .member .member-page{ background:transparent !important; border:none !important; box-shadow:none !important; color:var(--g-text); } .member .box{ padding:26px 22px !important; } .member .box + .box{ margin-top:20px; } .thead, thead, .table thead th, .nav-tabs, .modal-header, .modal-footer{ background:var(--g-panel-2) !important; color:var(--g-text); border-color:var(--g-line) !important; } /* .content 是純文字「標籤—值」列，不是卡片：清單排列，米色髮絲分隔線。 原本 justify-content:space-between + flex-wrap:wrap 在窄的手機寬度下，值只要 比label長一點就會整個換到下一行，同一個區塊裡有的一行、有的兩行，看起來很亂。 改成強制單行、值靠右對齊、超長截斷——每一列高度、對齊方式都一致，才像「一個區塊」。 */ .member-page .form-group{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:16px; padding:15px 2px; border-bottom:1px solid var(--g-line); } .member-page .form-group:last-child{ border-bottom:none; } .member-page .form-group label{ color:var(--g-text-dim); font-weight:500; font-size:14px; flex-shrink:0; margin:0; white-space:nowrap; } .member-page .form-group label span{ color:var(--g-muted); font-size:12px; } .member-page .content{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; color:var(--g-text) !important; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap; min-width:0; flex:1; } .member-page .content span{ color:var(--g-text); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .member-page .content .btn{ flex-shrink:0; white-space:nowrap; } .member-page .form-group > button{ margin-left:auto; } /* Google／Line 綁定：原本是兩顆獨立的品牌色（藍紅黃綠、Line綠）膠囊按鈕，剝色後 變成沒填色的空心形狀，跟上下的清單列脫節。既然帳戶資訊本來就是一條一條的清單， 這兩列也收進同一套「一列一行、米色分隔線」節奏，不再是插在中間的兩顆大按鈕。 */ .member-page .google div{ width:100% !important; height:auto !important; background:transparent !important; padding:0 !important; margin:0 !important; border-radius:0 !important; text-align:left !important; display:flex; align-items:center; justify-content:flex-start; } /* Line 圖示原本是白色線稿，原始設計是疊在綠底膠囊上才看得見；拿掉整條綠底膠囊後 圖示會變成白圖疊白卡、完全隱形，所以在圖示本身留一小塊 Line 綠當底，不是整條染色 */ /* 標題不用襯線字——gr66.net 本身從頭到尾都是 Noto Sans TC，沒有任何襯線字， 混進一支站上沒有的字型才是真正「不高級」的原因（而且 Noto Serif TC 這支字 head.php 原本根本沒載，會 fallback 到系統預設中文襯線字，那個才難看）。 改成同一套黑體、拉重字重 + letter-spacing 做層級，跟站台維持同一種字感。 */ h1,h2,h3,h4,h5,h6, .member h1,.member h2,.member h3,.member h4,.member h5,.member h6, .title, .modal-title{ color:var(--g-text) !important; font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; font-weight:900; letter-spacing:.01em; } p, li, dd, dt, span, div, label, small, td, th{ color:inherit; } .muted, .note, .desc, .sub, small{ color:var(--g-text-dim) !important; } a{ color:var(--g-gold-dim); } a:hover{ color:var(--g-gold); } /* 內文連結的金字加深（#a97a1a 在白底只有約 3.8:1，小字不及格） */ .member a, .member-page a{ color:#8a5c06 !important; } .member a:hover{ color:#a9720a !important; } a.btn, a.btn:hover, .btn a{ color:inherit !important; } /* 上面那條 inherit 是為了不讓按鈕吃到連結金字，但 （儲值） 會因此繼承到深色內文字、壓在金漸層上變成金上金——實心色按鈕一律強制白字 */ /* 卡片標題：全站統一成「標題＋底部金線」（會員中心重構定案的樣式）， 取代原本的左側色條，所有會員頁一致 */ .member h4{ border-left:none !important; border-bottom:2px solid var(--g-gold); padding:0 0 10px !important; margin:0 0 18px !important; font-weight:900; font-size:18px; } /* 其他會員頁還在用的 member-top（會員中心｜帳戶管理 那條）：升格成頁面標題樣式 */ /* 有輸入框的表單列改成「label 在上、輸入框在下」（dg66 版式）； 純文字的「標籤—值」列（.content）維持單行清單，兩種用 :has() 區分 */ .member-page .form-group:has(.form-control), .member-page .form-group:has(select), .member-page .form-group:has(textarea){ display:block; border-bottom:none; padding:0 0 4px; margin-bottom:14px; } .member-page .form-group:has(.form-control) label, .member-page .form-group:has(select) label, .member-page .form-group:has(textarea) label{ display:block; width:auto !important; margin:0 0 6px !important; font-weight:700; font-size:14px; color:var(--g-text) !important; white-space:normal; } /* 按鈕：原封不動搬 style.css 的 .btn-login/.btn-register 放射狀漸層 + 陰影， 只放大尺寸（48px）、兩顆分開留白（不拼成一片膠囊，避免糊在一起）。 */ .btn, .Wbtn, button.btn, input[type=submit], input[type=button], button[type=submit]{ border-color:var(--g-line); min-height:46px; padding-left:24px !important; padding-right:24px !important; border-radius:12px !important; } input[type=submit], button[type=submit]{ /* 2026-08-27 Owner 最終定案：主鈕「淡藍填色」（重量 B）。 淺藍底＋深藍字＋細藍邊——比實心輕、比描邊有份量；次要鈕維持純文字降級 */ background:#e3eefc !important; border:1px solid #b9d4f7 !important; color:#1d55a8 !important; font-weight:700; letter-spacing:.06em; box-shadow:none !important; text-shadow:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1; } input[type=submit]:hover, button[type=submit]:hover{ background:#d7e7fb !important; } .close, .closebtn{ background:#fff !important; border:1px solid var(--g-line) !important; color:var(--g-text) !important; } /* 右上角按鈕定案：03 描邊＋實金（2026-08-27 Owner 選定）。 次要動作（登入/登出）＝米白底金描邊幽靈按鈕；主要動作（註冊/會員）＝實心暖金。 注意 header.php 的 class 在桌機登入後是反過來的：登出掛 .btn-register、 會員掛 .btn-login.btn-member——用 href 與類名把語意拉回來，不能只看 class 字面。 */ .btn-login, .btn-register{ width:auto !important; height:36px !important; border-radius:9px !important; font-weight:700; letter-spacing:.03em; padding:0 16px !important; font-size:13px !important; /* 原始 style.css 是 100×85 的直排大按鈕（圖示在上字在下），flex-direction:column 會留下來，桌機版兩顆就變成疊的——要明確改回橫排 */ display:inline-flex !important; flex-direction:row !important; align-items:center; justify-content:center; gap:5px; } .btn-login .btn-icon, .btn-register .btn-icon{ max-width:15px !important; max-height:15px !important; margin:0 !important; } /* 次要（登入、登出）：Owner 指示也要上色。用暖金色的淡填色，跟主要動作（會員/註冊） 的淡藍填色成對比——同樣是填色按鈕，但色系不同、明度更低，主次仍分得開。 */ .btn-login, .btn-register[href*="logout"]{ background:#f7f0df !important; border:1px solid #e3d6b4 !important; color:#6b4f0e !important; box-shadow:none !important; text-shadow:none; } .btn-login:hover, .btn-register[href*="logout"]:hover{ background:#f1e7cd !important; } .btn-login .btn-icon, .btn-register[href*="logout"] .btn-icon{ filter:brightness(0) saturate(100%) invert(30%) sepia(45%) saturate(900%) hue-rotate(5deg) brightness(95%) !important; } .btn-login .btn-icon, .btn-register[href*="logout"] .btn-icon{ filter:brightness(0) opacity(.7) !important; } /* 主要（註冊、會員）：淡藍填色，跟 .btn-warning 同一組 */ .btn-register, .btn-login.btn-member{ background:#e3eefc !important; border:1px solid #b9d4f7 !important; color:#1d55a8 !important; box-shadow:none !important; text-shadow:none; } /* 藍字配藍圖示：白線稿轉成藍色 */ .btn-register .btn-icon, .btn-login.btn-member .btn-icon{ filter:brightness(0) saturate(100%) invert(31%) sepia(72%) saturate(1600%) hue-rotate(203deg) brightness(92%) !important; } /* 幽靈的特異性（class+屬性）比實金的單一 class 高，登出/登入不會被上面這條蓋回金色 */ .btn-login:hover, .btn-register:hover{ filter:brightness(1.04); } /* 桌機版右上角整排重排：登出/會員原本是 .navbar ul 底下兩個獨立
  • ，貼在一起 是因為 .navbar ul 本來完全沒有 gap；.u-login／.u-info／.uuid／.uucash 又是 桌機時代寫死的窄版寬度（230px/128px），擠在一起才會看起來一團亂。 統一放寬、加間距，儲值/轉點原本是站上另一色系（紫/橘）跟這次的金/酒紅無關， 一起收進同一套色系，不然四顆按鈕四種顏色本身就是亂源。 */ .navbar ul{ gap:14px; } .u-login{ width:auto !important; height:auto !important; gap:12px; } .u-login .u-info{ padding-right:4px; } .uuid, .uucash{ width:auto !important; white-space:nowrap; } /* 儲值/轉點原始是直排（column），會疊成一柱溢出頁首高度，要明確改橫排置中 */ .u-login .link{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px; } li:has(> .btn-register:only-child), li:has(> .btn-login.btn-member){ margin-left:4px; } /* 手機版的登出/會員不在
  • 裡，是直接兩顆 塞進一個 d-flex justify-content-between 的 div，內容剛好頂到寬度時 space-between 等於沒有間距——用 :has() 精準抓這個容器加 gap，不要用類名選到別的地方。 */ div:has(> .btn-login.btn-sm){ gap:8px; } .Wbtn.btn-dpst, .Wbtn.btn-tsfr{ background:transparent !important; border:none !important; color:#6b6152 !important; border-radius:9px !important; height:34px !important; font-weight:700; font-size:12.5px; box-shadow:none !important; } .Wbtn.btn-dpst:hover, .Wbtn.btn-tsfr:hover{ color:#2668c7 !important; background:transparent !important; } .Wbtn.btn-dpst img, .Wbtn.btn-tsfr img{ filter:none; } @media (max-width:990px){ /* 手機斷點原本是 .btn-sm{width:80px;height:30px}，一樣要用 width/height 蓋掉， 不能只設 min-height */ .btn-login, .btn-register{ width:auto !important; height:34px !important; border-radius:9px !important; white-space:nowrap !important; font-size:12.5px !important; padding:0 12px !important; } /* 圖示濾鏡不在這裡寫死，跟著幽靈/實金各自的規則走（幽靈是深字配深圖示） */ .btn-login .btn-icon, .btn-register .btn-icon{ max-width:14px !important; max-height:14px !important; padding:0 3px 0 0 !important; } .u-login{ gap:8px; } } /* 輸入框：淺米底、素邊，focus 才亮金邊（照 sa999 的邏輯：不是滿版都鑲金） */ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea, .form-control{ background:var(--g-panel-2) !important; border:1px solid var(--g-line) !important; border-radius:12px !important; color:var(--g-text) !important; min-height:46px; padding:10px 16px !important; font-size:16px !important; } input::placeholder, textarea::placeholder{ color:#857a63 !important; } input:focus, .form-control:focus{ border-color:var(--g-gold) !important; box-shadow:0 0 0 3px rgba(216,163,56,.18) !important; background:#fff !important; } /* 底部固定列：首頁截圖裡這條本來就是深色配金圖示，維持這個對比（唯一保留的深色元件） */ .ft-navbar, .fixed-bottom{ background:linear-gradient(180deg,#241b10,#1c160e) !important; border-top:1px solid rgba(216,163,56,.3) !important; } .ft-link{ color:#c9b490 !important; } .ft-link.active, .ft-link:hover{ color:var(--g-gold-hi) !important; } .ft-navbar img, .ft-link img{ filter:invert(1) brightness(1.15); } .ft-navbar .logo img, .navbar-bg .logo img, img[src*="logo"]{ filter:none; } #header, .navbar-bg{ background:#fff !important; border-bottom:1px solid var(--g-line); } #navbar .nav-link, #navbar a{ color:var(--g-text-dim) !important; } #navbar .nav-link:hover, #navbar a:hover{ color:var(--g-gold-dim) !important; } /* ============================================================ 會員中心內容重構（2026-08-27，照 dg66 的排版邏輯、gr66 自己的配色） 對應本機覆寫樣板 views-override/www/account.php 的 pf- 元件。 ============================================================ */ /* 手機版橫向分頁列（桌機沿用左側選單，d-md-none 控制） */ /* 個人資料卡 */ /* Line 圖示是白色線稿，要留一小塊 Line 綠當底才看得見（同上次教訓） */ /* 卡片標題：dg66 那種「標題＋底部金線」，取代原本的左側色條 （.member .pf-h 兩層 class 特異性比 .member h4 高，不吃前面那條規則） */ /* 表單：label 在上、輸入框在下（member.css 原本 label 寫死 130px 寬靠左排，要蓋掉） */ /* 上傳檔案框：原生 file input 太生硬，包一層虛線框收進卡片語言 */ /* ============ 2026-08-27 全會員區鋪版第二輪修正 ============ */ /* 按鈕字級：member.css 寫死 .member-page .btn{font-size:12px;max-width:200px}， Owner 裁示「尺寸對、字放大」——字升到 16px，寬度上限放掉（w-100 的按鈕才不會被夾住） */ .member-page .btn, .member-modal .btn{ font-size:17px !important; max-width:none !important; } /* member-top（會員中心｜儲值紀錄 + 返回）：原本 col-8/col-4 網格會把 22px 標題折行， 改 flex 兩端對齊、標題不折行 */ /* .box 裡再包一層 .box-user 又是卡片包卡片（history/transfer 的查詢框）， 巢狀時拆掉內層的框；.box-user 單獨存在時（withdrawal 總資產卡）維持卡片 */ /* history 的日期查詢列：兩顆原生 date input 沒掛 form-control，吃到 46px 內距後 直接溢出卡片右緣——改成可折行的 flex，input 各占一行寬度內縮 */ .member-page input[type="date"], .member-page input[type="number"]{ flex:1 1 140px; min-width:0; max-width:100%; box-sizing:border-box; } /* 快速日期鈕（今日/3天/本週/本月、遊戲紀錄的本日～上月）： 一整排大實金塊太吵，降為描邊幽靈小鈕；「搜尋」「開始查詢」這種主動作維持實金 */ /* （遊戲紀錄重排後「搜尋」已移出 btn-group1 改掛 btn-warning，這裡不再放 first-child 例外） */ /* 會員中心 hub（member.php）：等級圖 + 帳號原本橫排擠到溢出，改直排置中 */ /* 登入/註冊等頁掛著 data-aos 進場動畫，AOS 沒初始化前整頁 opacity:0—— 換膚版直接取消動畫，內容立刻可見（也避免 WP Rocket 延後 JS 時整頁空白） */ /* 登入/註冊頁：頁內的「註冊」連結（href 帶 register）當次要動作走幽靈樣式， 不跟主動作「登入」（submit 鈕，實金）搶戲；頁首右上的註冊是 javascript:void(0) 不會被這條選到，維持實金 */ a.btn-register[href*="register"]{ background:transparent !important; border:none !important; color:#6b6152 !important; box-shadow:none !important; text-shadow:none; } a.btn-register[href*="register"]:hover{ color:#2668c7 !important; } a.btn-register[href*="register"] .btn-icon{ filter:brightness(0) opacity(.7) !important; } /* Line 白色線稿圖示的綠底墊片，擴大到登入/註冊頁（原本只包 .member-page） */ /* ============ 遊戲紀錄頁重排（查詢條件卡/統計卡/明細卡） ============ */ /* 廠商篩選：描邊小 chip，不是一排大實金塊 */ /* 日期區間：兩顆並排、窄螢幕自動折行 */ /* 統計數字卡：值上標下，手機 2 欄、桌機 4 欄；此頁小計 3 欄 */ /* 輸贏紅綠沿用 bootstrap 類，但加深到淺底上夠對比 */ /* 桌機的 w-100 主動作鈕不拉滿卡片，收到合理寬度靠右 */ /* 上傳列改自訂樣式：中文膠囊鈕＋檔名提示，原生 input 藏起來但仍可點可送出 （原生 Choose File 是英文又會溢出虛線框） */ /* ============ 資料表：左右捲動 + 標題列/第一欄凍結 ============ 原本欄位被壓到最窄，中文被擠成一字一行的直排。改成整張表可水平捲動、 儲存格不折行；捲動時標題列（列）與第一欄（欄）固定不動。 注意：邊框在 sticky 儲存格上捲動時會消失，分隔線改用 box-shadow 畫。 */ /* 標題列凍結 */ /* 第一欄凍結 */ /* 兩者交會的那一格要壓在最上層 */ /* 單號等多行內容在凍結欄裡維持可讀，不要被 nowrap 拉太長 */ /* 捲動容器不再需要外層卡片的內距擠壓 */ /* 2026-08-27 Owner 指示：底部那排頁碼（123）拿掉。 只隱藏顯示、不動樣板輸出，要恢復就移除這條規則。 注意：隱藏後使用者只看得到第一頁的紀錄，翻頁功能等同關閉。 */ .member-page .pagination{ display:none !important; } /* 儲值頁底部送出列：白底、細上緣線、往上的柔陰影，讓它像「浮在內容之上的動作列」， 不是被塗黑的一條。按鈕收窄留白、字級拉大，跟其他主鈕同一套淡藍填色。 */ /* 頁面標題：會員中心（主）＋當前頁名（副），副標排在主標下方 */ /* 手機版卡片放寬：.container(12px) 與 .member-page(20px) 兩層水平內距疊在一起， 390px 螢幕上卡片只剩 306px。內距只留最外層一層，卡片本身的 22px 內距不動。 */ @media (max-width:767px){ .member .container{ padding-left:14px !important; padding-right:14px !important; } /* 960px 斷點留下的 margin-left:10px 也要一起歸零，不然卡片會偏右 */ .member-page{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; width:100% !important; } .member .box{ padding:22px 18px !important; } } /* 頁面標題已改成「會員中心＋頁名副標」，樣板原本那條 member-top （會員中心｜儲值紀錄）就重複了：只留右邊的返回連結，標題文字隱藏。 */ /* .user-info 是樣板裡包住所有卡片的中介層，10px 內距讓手機卡片再縮一圈 */ /* 會員中心入口（member.php）的側欄沒有掛 d-none d-md-block，手機上會與內容並排， 把帳戶管理整塊擠出畫面。手機一律改直排：側欄滿版在上、內容接在下面。 */ @media (max-width:767px){ .member .container{ display:block !important; } .member .member-page{ float:none !important; } } /* 儲值頁「取得代碼」維持鎖在底部，但不能壓到快選金額那六格。 底部被佔掉的高度＝固定列 83px ＋ 底部導覽 72px；頁面要留出等高的收尾空間， 內容才捲得出來。（原本 padding-bottom:0，最後一段永遠被蓋住。） */ /* 桌機沒有底部導覽（d-block d-lg-none），固定列要貼齊視窗底部，留白也收回來 */ /* 遊戲頁（電子廠商機台清單）不納入本次改版：2026-08-27 Owner 裁示先不做、也不改動， 等正式版上線後那批頁面要刪除（屆時另外出清單升核）。原本試做的 .gl-* 樣式已移除， 這支皮膚不碰任何遊戲頁。 */ /* ============ 儲值頁重新整理（Owner：很混亂） ============ 原本一頁裡有四種容器：英文大寫小標、三張獨立的支付卡、金額卡、卡外的注意事項， 層級看不出來。改成跟其他會員頁一樣的三張卡：支付方式／存款金額／注意事項。 */ /* 支付方式：三個選項收進同一張卡，改成清單列（不再各自是一張浮起的卡） */ /* 選中的圓點改成藍色系，跟主動作同一套 */ /* 子選項（LINE Pay / 街口）縮排成子清單 */ /* 金額卡：卡中卡拿掉，輸入框與快選同一層 */ /* 注意事項：卡片內的條列，行距拉開 */ /* 頁尾整組不要（Owner 2026-08-27）：這些頁是登入後的操作介面， 頁尾那串連結與版權區在這裡沒有作用（天條 53：noindex 的 PHP 端不留純 SEO 敘述）。 只隱藏顯示、樣板沒動；底部固定導覽列（.ft-navbar）是導覽不是頁尾，保留。 */ #footer, footer#footer{ display:none !important; } /* ===== 核准稿 ===== */ :root{ --ink:#1c160e; --panel:#2a2116; --panel-2:#362b1c; --gold:#d8a338; --gold-soft:#c3a064; --gold-bright:#ffcc00; --cream:#ffe4be; --cream-2:#ffdbab; --text:#fff6e8; --text-dim:#c9b490; --line:rgba(216,163,56,.28); --line-soft:rgba(216,163,56,.15); --danger:#dc3545; --on-gold:#241a08; --rail-w:74px; --header-h:60px; --bottomnav-h:64px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--ink);color:var(--text); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased; padding-bottom:0; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:"Noto Serif TC","Noto Sans TC",serif;margin:0;font-weight:900;text-wrap:balance} button{font:inherit} /* header */ header.site{ position:sticky;top:0;z-index:50;height:var(--header-h); background:linear-gradient(180deg,#221a10,#1c160e); border-bottom:1px solid var(--line); display:flex;align-items:center; } .btn{ display:inline-flex;align-items:center;justify-content:center; min-height:40px;padding:0 18px;border-radius:8px; font-size:14px;font-weight:700;border:1px solid transparent;white-space:nowrap; } /* hero (compact, real activity banners — native 4:1 crop) */ .hero{position:relative;background:var(--ink)} .hero-slide{position:relative;aspect-ratio:4/1;overflow:hidden} .hero-slide img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .5s ease; } .hero-slide img.on{opacity:1} .hero-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2} .hero-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.4)} .hero-dots button.on{background:var(--gold-bright);width:16px;border-radius:4px} /* ticker */ .ticker-wrap{background:var(--panel-2);border-bottom:1px solid var(--line);overflow:hidden} .ticker{display:flex;align-items:center;gap:40px;white-space:nowrap;padding:9px 16px;animation:scroll 30s linear infinite;font-size:13px;color:var(--text-dim)} .ticker b{color:var(--gold-bright);margin-right:6px} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker{animation-duration:75s}} /* app shell */ .shell{display:flex;max-width:1180px;margin:0 auto;min-height:60vh} .rail{ width:var(--rail-w);flex-shrink:0; display:flex;flex-direction:column;gap:10px; padding:14px 8px;position:sticky;top:calc(var(--header-h) + 1px); align-self:flex-start;height:calc(100vh - var(--header-h));overflow-y:auto; } .rail button{ display:flex;flex-direction:column;align-items:center;gap:5px; padding:10px 4px;border-radius:12px;border:1px solid transparent; background:transparent;color:var(--text-dim);cursor:pointer; min-height:44px; } .rail button svg{width:22px;height:22px} .rail button span{font-size:12px;font-weight:600} .rail button[aria-selected="true"]{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border-color:var(--line);color:var(--gold-bright); } .content{flex:1;min-width:0;padding:18px 16px 40px} .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px} .game-card{ position:relative;border-radius:14px;overflow:hidden; background:linear-gradient(160deg,var(--panel),var(--panel-2)); border:1px solid var(--line);aspect-ratio:3/4; } .game-card img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} .game-card .badge{ position:absolute;top:8px;left:8px;background:rgba(28,22,14,.72); border-radius:8px;padding:4px 8px;backdrop-filter:blur(2px); } .game-card .badge img{height:16px;width:auto} .game-card .name-bar{ position:absolute;left:0;right:0;bottom:0; background:linear-gradient(0deg, rgba(20,15,9,.92), rgba(20,15,9,0)); padding:26px 10px 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px; } .game-card .name{font-size:13px;font-weight:700;color:var(--text)} .game-card .tag{font-size:10px;font-weight:700;color:var(--on-gold);background:var(--gold-bright);padding:2px 7px;border-radius:999px;white-space:nowrap} .thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px} .thumb-card{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel);aspect-ratio:1/1} .thumb-card img{width:100%;height:100%;object-fit:cover} .tab-panel{display:none} .tab-panel.active{display:block} /* footer (desktop) */ footer.site{border-top:1px solid var(--line);padding:22px 16px;margin-top:20px} /* bottom nav (mobile) */ @container gr66frame (max-width:860px){ :root{--rail-w:64px} .rail button span{font-size:11px} footer.site{display:none} .shell{padding-bottom:var(--bottomnav-h)} .card-grid{grid-template-columns:repeat(2,1fr);gap:10px} .game-card{aspect-ratio:1/1} .game-card .name{font-size:12px} .game-card .tag{font-size:9px;padding:2px 6px} .thumb-grid{grid-template-columns:repeat(2,1fr)} } /* 頁尾只留版權字（Owner 2026-09-01）：space-between 只剩一項會跑到左邊 */ /* 還原核准稿的容器（原本是提案頁的 .device-frame） */ .gr66frame{ container-type:inline-size; container-name:gr66frame; } /* 公告列：任何情況都不出現捲軸（含系統開減少動畫時） */ .ticker-wrap{ overflow:hidden !important; } .ticker{ overflow:visible !important; animation-name:scroll !important; animation-timing-function:linear !important; animation-iteration-count:infinite !important; } .ticker::-webkit-scrollbar{ display:none; } /* ===== 亮色層 ===== */ /* ============================================================ 首頁亮色層（2026-08-27 Owner：首頁也要改亮色系） ------------------------------------------------------------ 核准稿的版面結構一個字不動，只換顏色：色票直接對映會員區那套 （米白底 / 白卡片 / 米色細線 / 金色重點 / 淡藍主動作）。 遊戲卡片本身維持深色底 —— 機台美術是深色去背，換成白底會整片糊掉， 卡片是「圖」不是「面」，這是刻意保留的例外。 ============================================================ */ :root{ --ink:#fbf8f2; /* 頁面底：米白 */ --panel:#ffffff; /* 卡片：白 */ --panel-2:#f7f1e4; /* 次級塊：淺米 */ --gold:#d8a338; --gold-soft:#c3a064; --gold-bright:#a9720a; /* 亮底上的金要壓深，不然看不見 */ --text:#2b2013; --text-dim:#6b6152; --line:#e8e3d3; --line-soft:#efe9db; --on-gold:#24170a; } body{ background:var(--ink); color:var(--text); } /* 頁首：白底＋米色細線，跟會員區一致 */ header.site{ background:#fff !important; border-bottom:1px solid var(--line); } /* 頁首按鈕：登入＝暖金淡填色、註冊＝淡藍填色（與會員區同一套） */ /* 輪播底色、跑馬燈 */ .hero{ background:var(--ink); } .ticker-wrap{ background:var(--panel-2); border-bottom:1px solid var(--line); } .ticker{ color:var(--text-dim); } .ticker b{ color:#a9720a; } .hero-dots button{ background:rgba(43,32,19,.25); } .hero-dots button.on{ background:var(--gold); } /* 側欄分類：白底卡感，選中用淺金底＋金字 */ .rail{ background:#fff; border-right:1px solid var(--line); } .rail button{ color:var(--text-dim); } .rail button[aria-selected="true"]{ background:#faf3e0 !important; border-color:#e2cf9a !important; color:#8a5c06 !important; } .content{ background:var(--ink); } /* 遊戲卡：整張改白卡，跟亮色系一致（原本深色底夾在米白畫面裡很跳）。 人物美術本身是深色背景的圖，所以圖只佔卡片上方、下面留白放名稱， 不再讓圖填滿整張卡——這樣白卡才成立。 */ .game-card{ background:#fff !important; border:1px solid var(--line) !important; box-shadow:0 10px 26px -18px rgba(43,32,19,.35); aspect-ratio:auto !important; display:flex; flex-direction:column; padding-bottom:0; } .game-card img.art{ position:static !important; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:top center; border-radius:13px 13px 0 0; } /* 名稱改成卡片下方的白底文字列，不再是壓在圖上的漸層 */ .game-card .name-bar{ position:static !important; background:none !important; padding:10px 10px 12px !important; display:flex; align-items:center; justify-content:space-between; gap:6px; } .game-card .name{ color:var(--text) !important; font-weight:800; } .game-card .tag{ background:#faf3e0; color:#8a5c06; border:1px solid #e2cf9a; } /* 廠商 LOGO 徽章仍疊在圖上，圖是深色所以底維持半透明深色 */ .game-card .badge{ background:rgba(28,22,14,.72) !important; } .thumb-card{ background:#fff !important; border-color:var(--line) !important; } /* 頁尾（電腦版）：白底 */ footer.site{ background:#fff; border-top:1px solid var(--line); } /* 底部固定導覽維持深色 —— 會員區也是深色，兩邊一致 */ /* 區塊標題等文字 */ h1,h2,h3{ color:var(--text); } /* 底部導覽換成全站共用的 .ft-navbar 後，內容要留出它的高度（原本留的是 .bottomnav 的） */ @container gr66frame (max-width:860px){ .shell{ padding-bottom:80px; } } /* ============ 電腦版卡片放大（Owner：小卡尺寸可以放大） ============ 核准稿是 minmax(148px) 自動填滿，1180px 寬會排成 6 欄、每張只有 169px。 改成依螢幕給固定欄數：≥1280 四欄、≥1600 五欄，卡片明顯變大。 */ @media (min-width:1280px){ .shell{ max-width:1320px; } .card-grid{ grid-template-columns:repeat(4,1fr) !important; gap:18px !important; } .game-card .name{ font-size:15px; } .game-card .tag{ font-size:11px; } } @media (min-width:1600px){ .shell{ max-width:1560px; } .card-grid{ grid-template-columns:repeat(5,1fr) !important; gap:20px !important; } } /* 底部導覽鎖在畫面底部（Owner：往上滑會跑出空白）： 首頁外層 .gr66frame 用了 container-type:inline-size（手機排版規則靠它）， 而 containment 會讓子元素的 position:fixed 改以這個容器為基準， 導覽就不再貼著視窗底、滑動時會跟著跑掉，下面露出一塊白。 改用 position:sticky + bottom:0：容器涵蓋整頁，效果等同固定在底部。 */ .gr66frame .ft-navbar{ position:sticky !important; bottom:0 !important; left:auto !important; right:auto !important; width:100%; z-index:60; margin-top:auto; } .gr66frame{ min-height:100vh; display:flex; flex-direction:column; } .gr66frame > .shell, .gr66frame > main{ flex:1 0 auto; } /* 內容比側欄短時，側欄的高度會把頁面撐出一段空白： 讓 shell 只佔實際內容高度，側欄不強制滿高。 */ .gr66frame{ min-height:0; } .gr66frame .shell{ min-height:0 !important; align-items:flex-start; } @container gr66frame (max-width:860px){ .rail{ height:auto !important; max-height:none !important; position:static !important; } .shell{ padding-bottom:0 !important; } } .gr66frame .content{ padding-bottom:16px !important; } /* 電腦版網格尾巴（天條 55）：真人 6 張排 4 欄會剩 2 張靠左， 1600 以上排 5 欄更慘、剩 1 張。改用 flex 讓最後一排置中， 卡片尺寸維持核准稿的比例不動。 */ @media (min-width:1280px){ .gr66frame .card-grid{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:18px !important; } .gr66frame .card-grid > *{ flex:0 0 calc((100% - 54px) / 4); max-width:calc((100% - 54px) / 4); } .gr66frame .thumb-grid{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:12px !important; } .gr66frame .thumb-grid > *{ flex:0 0 calc((100% - 24px) / 3); } } @media (min-width:1600px){ .gr66frame .card-grid{ gap:20px !important; } .gr66frame .card-grid > *{ flex:0 0 calc((100% - 80px) / 5); max-width:calc((100% - 80px) / 5); } } /* ============================================================ 大廳帳號區（Owner 2026-08-28 指定） 位置照線上版：公告下面、分類上面。內容是帳號、餘額、三顆快捷。 按鈕沿用本站的系統（儲值＝淡藍主要動作，轉點／提領＝淡金次要）， 不照搬線上那組紫橘漸層——那組跟改版後的亮色系會打架。 ============================================================ */ .gr66frame .lb-account{ margin:14px 20px 0; padding:14px 16px; background:#fff; border:1px solid #ece4d6; border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:0 1px 2px rgba(43,32,19,.04); } .gr66frame .lb-id{ display:flex; align-items:center; gap:22px; min-width:0; } .gr66frame .lb-row{ display:flex; align-items:center; gap:8px; margin:0; min-width:0; } .gr66frame .lb-row img{ width:22px; height:22px; flex:none; } .gr66frame .lb-name{ font-size:15px; font-weight:700; color:#3b3226; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gr66frame .lb-bal{ font-size:20px; font-weight:900; color:#8a5c06; letter-spacing:.02em; } .gr66frame .lb-acts{ display:flex; gap:10px; flex:none; } .gr66frame .lb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 18px; border-radius:12px; text-decoration:none; font-size:15px; font-weight:700; letter-spacing:.04em; background:#faf3e0; border:1px solid #e2cf9a; color:#6b4f0e; } .gr66frame .lb-btn img{ width:20px; height:20px; } .gr66frame .lb-btn:hover{ filter:brightness(.97); } /* 手機：左邊帳號與餘額上下疊，右邊兩顆＋一顆通欄，照線上版的排法 */ @container gr66frame (max-width:860px){ .gr66frame .lb-account{ margin:12px 12px 0; padding:12px; gap:12px; align-items:stretch; } .gr66frame .lb-id{ flex-direction:column; align-items:flex-start; gap:8px; justify-content:center; } .gr66frame .lb-acts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; flex:1 1 auto; min-width:0; } .gr66frame .lb-btn{ padding:0 10px; font-size:14px; } } /* 分類欄收邊（Owner 2026-08-28 指出左上角沒收好） 原本白底一路貼到螢幕左邊、四角是方的，又比第一張卡高 18px， 接在圓角的帳號卡下面就露出一塊四方形白色缺口。 改成跟帳號卡、遊戲卡同一套卡片邊界：內縮、圓角、四邊都有框、頂端對齊第一張卡。 */ .gr66frame .rail{ border:1px solid #e8e3d3 !important; border-radius:14px; box-shadow:0 1px 2px rgba(43,32,19,.04); } @container gr66frame (max-width:860px){ .gr66frame .rail{ width:62px !important; margin:18px 0 0 12px !important; padding:10px 4px !important; } .gr66frame .rail button{ padding:9px 2px !important; } } /* 電腦版：帳號卡與分類欄跟遊戲區同一條左邊界（原本帳號卡內縮 20、分類欄 60， 兩條線對不齊），分類欄頂端也對齊第一張卡。 */ @container gr66frame (min-width:861px){ .gr66frame .lb-account{ max-width:1560px; width:calc(100% - 120px); margin-left:auto; margin-right:auto; } .gr66frame .rail{ margin-top:18px; } } /* 快捷改成四顆，各自一個顏色（Owner 2026-08-28）。 紅利＝線上版的「紅利提領」，接會員中心的紅利返水頁 Manger/refund。 四個色都用同一套做法：淡底＋同色系描邊＋深色文字，對比拉開（天條 41）。 */ .gr66frame .lb-btn.lb-dep{ background:#e3eefc; border-color:#b9d4f7; color:#1d55a8; } /* 儲值 藍 */ .gr66frame .lb-btn.lb-tra{ background:#faf3e0; border-color:#e2cf9a; color:#6b4f0e; } /* 轉點 金 */ .gr66frame .lb-btn.lb-bon{ background:#fdeef0; border-color:#f3cbd3; color:#a03a52; } /* 紅利 玫瑰 */ .gr66frame .lb-btn.lb-wdr{ background:#e8f5ec; border-color:#bfe3cb; color:#1f6b42; } /* 提領 綠 */ @container gr66frame (max-width:860px){ /* 手機：四顆排 2×2，不再有通欄那顆 */ .gr66frame .lb-acts{ grid-template-columns:repeat(2, minmax(0,1fr)); } } /* 分類欄改成「一格一張小卡」（Owner 2026-08-28 指出整片白底長條跟版面不搭） 對照站的做法是每個分類自成一塊，跟右邊遊戲卡同一套圓角、邊框、間距， 欄位高度也跟著內容走，不會在下面留一大片空白。 */ .gr66frame .rail{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; gap:10px !important; height:auto !important; align-self:flex-start; } .gr66frame .rail button{ background:#fff !important; border:1px solid #ece4d6 !important; border-radius:12px !important; box-shadow:0 1px 2px rgba(43,32,19,.04); padding:10px 4px !important; gap:6px !important; } .gr66frame .rail button[aria-selected="true"]{ background:#faf3e0 !important; border-color:#e2cf9a !important; color:#8a5c06 !important; box-shadow:0 1px 3px rgba(138,92,6,.12); } /* 圖示本身已經是一塊方牌，外面再加卡片框會變成框中框； 這裡只留方牌的底色、拿掉它的外框。 */ .gr66frame .rail button svg > rect{ stroke:none !important; } /* 分類小卡的比例與顏色：原本欄位偏窄、圖示灰到像沒啟用， 跟右邊那些高對比的遊戲卡擺在一起就顯得虛。 */ .gr66frame .rail{ gap:8px !important; } .gr66frame .rail button{ padding:12px 4px !important; color:#6b6459 !important; } .gr66frame .rail button svg{ width:26px !important; height:26px !important; } .gr66frame .rail button span{ font-size:12px !important; font-weight:700 !important; letter-spacing:.04em; } /* 方牌底色改成品牌金的淡色，未選中也看得出是同一個系統 */ .gr66frame .rail button svg > rect{ fill:#d8a338 !important; fill-opacity:.14 !important; } .gr66frame .rail button[aria-selected="true"] svg > rect{ fill-opacity:.26 !important; } @container gr66frame (max-width:860px){ .gr66frame .rail{ width:72px !important; } } /* 邊界對齊：左右留白本來不對稱（手機左 12 右 16、電腦左 60 右 76）， 加上分類欄與卡片之間的間距又跟卡片彼此的間距不同，看起來就鬆散。 */ @container gr66frame (max-width:860px){ .gr66frame .content{ padding-left:12px !important; padding-right:12px !important; } } @container gr66frame (min-width:861px){ .gr66frame .content{ padding-right:0 !important; } } /* 手機兩欄時，張數是單數就會剩一張靠左、右邊空一格（天條 55）。 讓落單那張跨兩欄再置中，寬度維持跟其他卡一樣。 */ @container gr66frame (max-width:860px){ .gr66frame .card-grid > *:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; width:calc(50% - 5px); } } /* 遊戲卡的圖區加一層淡底：去背圖浮在純白上會顯得小又空， 跟真人那種滿版照片擺一起就不像同一套。加底之後每張卡都是「有背景的框」。 */ .gr66frame .game-card .art{ background:linear-gradient(180deg,#f7f1e4 0%,#fdfbf7 62%,#fff 100%); } /* 觸控尺寸：底部導覽的 只有 34px，可點區域撐到整格（外觀不變，天條 34） */ .gr66frame .ft-navbar .ft-link{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; min-height:56px; } /* 頁首在 1000～1400 這段寬度會超出容器（量到 24px），整頁就出現橫向捲軸—— 也就是公告列下面那條捲軸的來源。讓容器放寬、導覽可收縮。 */ @media (min-width:992px) and (max-width:1399px){ .gr66frame .navbar-bg .container{ max-width:100% !important; padding-left:16px; padding-right:16px; } .gr66frame .navbar{ min-width:0; max-width:100%; } .gr66frame .navbar ul{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:0; padding:0; } .gr66frame .navbar ul li{ white-space:nowrap; } } /* ═══ 登入／註冊玻璃彈窗（抽自 gr66-theme-native.css，2026-09-02 接回首頁） ═══ */ /* ============ 登入／註冊：玻璃感彈窗（Owner 2026-08-27） ============ 站上本來就有 #authModal 這個彈窗（登入與註冊是同一個彈窗的兩個分頁）， 所以不另做頁面，直接把它的外觀改成玻璃感：半透明白 + 背景模糊 + 細邊 + 柔光。 背後遮罩也用模糊，才有「浮在頁面之上」的層次。 */ .authModal{ background:rgba(43,32,19,.42) !important; backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%); } .authModal .modal-box{ background:rgba(255,255,255,.82) !important; backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.75) !important; border-radius:22px !important; box-shadow:0 24px 60px -20px rgba(43,32,19,.5), inset 0 1px 0 rgba(255,255,255,.9) !important; padding:26px 22px 24px !important; max-width:420px; width:calc(100% - 32px); margin:auto; } /* 關閉鈕做成圓形玻璃按鈕 */ .authModal .close_m{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.75); border:1px solid rgba(43,32,19,.12); display:flex; align-items:center; justify-content:center; color:var(--g-text) !important; font-size:20px; line-height:1; opacity:1 !important; top:14px; right:14px; } .authModal .close_m:hover{ background:#fff; } /* 登入／註冊分頁：玻璃底上的兩顆膠囊，選中的用淡藍填色 */ .authModal .tab-header{ display:flex; gap:8px; margin:2px 0 20px; padding:5px; background:rgba(43,32,19,.06); border-radius:999px; } .authModal .tab-btn{ flex:1; min-height:42px; border:none !important; border-radius:999px !important; background:transparent !important; color:var(--g-text-dim) !important; font-size:15px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:6px; } .authModal .tab-btn img{ width:16px; height:16px; filter:brightness(0) opacity(.5); } .authModal .tab-btn.active{ background:#e3eefc !important; color:#1d55a8 !important; box-shadow:0 2px 8px -2px rgba(29,85,168,.35); } .authModal .tab-btn.active img{ filter:brightness(0) saturate(100%) invert(31%) sepia(72%) saturate(1600%) hue-rotate(203deg); } /* 表單：玻璃底上的輸入框要更白一點才看得清楚 */ .authModal .form-control{ background:rgba(255,255,255,.9) !important; border:1px solid rgba(43,32,19,.14) !important; border-radius:12px !important; min-height:48px; font-size:16px !important; margin-bottom:12px; } .authModal .form-control:focus{ border-color:#b9d4f7 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(61,132,230,.16) !important; } .authModal form{ margin:0 !important; } /* 主要動作鈕：跟全站同一套淡藍填色，滿版 */ .authModal button.login, .authModal button[type=submit]{ width:100%; min-height:50px; border-radius:12px !important; background:#e3eefc !important; border:1px solid #b9d4f7 !important; color:#1d55a8 !important; font-size:17px; font-weight:800; letter-spacing:.06em; box-shadow:none !important; text-shadow:none !important; } .authModal button.login:hover{ background:#d7e7fb !important; } .authModal a{ color:#8a5c06 !important; font-size:14px; } /* 其他方式登入：分隔線＋圖示列 */ .authModal .login-else-box{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid rgba(43,32,19,.1); } .authModal .login-else-box span{ font-size:13.5px; color:var(--g-text-dim); } .authModal .codeimg{ border-radius:8px; margin-bottom:12px; } /* 玻璃彈窗收尾：分頁內容本來是白底方塊，會把玻璃感整個蓋掉；改成透明 */ .authModal .tab-content{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; } .authModal .modal-box > .tab-content{ margin:0 !important; } /* 註冊分頁的送出鈕沒有 .login class，補上同一套樣式 */ .authModal button[type=submit], .authModal .register, .authModal button.reg{ width:100%; min-height:50px; border-radius:12px !important; background:#e3eefc !important; border:1px solid #b9d4f7 !important; color:#1d55a8 !important; font-size:17px; font-weight:800; letter-spacing:.06em; box-shadow:none !important; text-shadow:none !important; } .authModal button[type=submit]:hover{ background:#d7e7fb !important; } /* 驗證碼圖與說明置中對齊 */ .authModal .codeimg{ display:block; margin:0 auto 12px; } .authModal form > a{ display:block; text-align:center; margin:10px 0 0; } /* 彈窗置中：站上的 JS 只把 .authModal 設成 display:block， 所以置中要靠內層 box 自己定位（外層不能改成 flex，會被 JS 的 inline style 蓋掉）。 */ .authModal .modal-box{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* 欄位標籤：照獨立頁的排法，標籤在上、輸入框在下 */ .authModal .fld{ display:block; font-size:14px; font-weight:700; color:var(--g-text) !important; margin:2px 0 6px; } .authModal input[type=text], .authModal input[type=password]{ width:100%; background:rgba(255,255,255,.9) !important; border:1px solid rgba(43,32,19,.14) !important; border-radius:12px !important; min-height:48px; padding:10px 14px !important; font-size:16px !important; margin-bottom:12px; } /* 註冊分頁：社群註冊排在最上面，下面一條分隔線 */ .authModal .login-else-box.top{ margin:0 0 16px; padding:0 0 14px; border-top:none; border-bottom:1px solid rgba(43,32,19,.1); } .authModal .login-else-box img{ height:38px; width:auto; } .authModal .register{ margin-top:4px; } /* 忘記密碼做成次要按鈕（照獨立登入頁） */ .authModal form > a[href*="Forget"], .authModal form > a[href*="forget"]{ display:block; text-align:center; margin:12px auto 0; max-width:220px; min-height:44px; line-height:44px; border-radius:12px; background:rgba(255,255,255,.75); border:1px solid rgba(43,32,19,.12); color:var(--g-text-dim) !important; font-weight:700; } /* 彈窗表單收尾：標籤靠左、驗證碼圖排在欄位下方靠左，不要被表單的置中規則帶著跑 */ .authModal .tab-content form{ text-align:left !important; } .authModal .fld{ text-align:left !important; } .authModal .codeimg{ display:block; margin:0 0 12px !important; max-width:130px; border-radius:8px; } .authModal .login-else-box.top{ justify-content:flex-start; } /* 彈窗高度：內容多時可捲，捲軸不要貼齊圓角 */ .authModal .modal-box{ padding-right:18px !important; } /* 手機號碼＋簡訊驗證：驗證碼欄與「發送驗證簡訊」排成一行 */ .sms-row{ display:flex; gap:8px; align-items:stretch; } .sms-row input{ flex:1; min-width:0; margin-bottom:0 !important; } .btn-sms{ flex-shrink:0; min-height:48px; padding:0 14px; border-radius:12px; background:#faf3e0 !important; border:1px solid #e2cf9a !important; color:#6b4f0e !important; font-size:14px; font-weight:800; white-space:nowrap; } .btn-sms:hover{ background:#f5ead0 !important; } /* 彈窗裡也並排（登入分頁的登入鈕＋切到註冊） */ /* ============ Google／Line 改成淡色實心（Owner 2026-08-28） ============ 跟主按鈕同一種語言：淡填色 + 細邊 + 深字，不用白底玻璃、也不用品牌滿版色。 兩顆等寬並排。 */ #register .login-else-box, .authModal .login-else-box{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; max-width:440px; margin:14px auto 0 !important; } .authModal .login-else-box a{ min-height:52px !important; border-radius:14px !important; display:flex !important; align-items:center; justify-content:center; gap:9px; box-shadow:none !important; backdrop-filter:none !important; margin:0 !important; font-weight:800; font-size:14.5px; } /* 彈窗裡的社群鈕同一套（那裡只有圖示，補上淡底方塊） */ .authModal .login-else-box{ grid-template-columns:auto 1fr 1fr; align-items:center; } .authModal .login-else-box span{ grid-column:1; font-size:13.5px; color:var(--g-text-dim); } .authModal .login-else-box a{ background:#eef1f5 !important; border:1px solid #dfe3e8 !important; padding:6px 10px; } .authModal .login-else-box a:last-child{ background:#e4f6ec !important; border-color:#c6ead6 !important; } .authModal .login-else-box img{ height:26px !important; width:auto; } /* 登入／註冊玻璃彈窗：站上的 .modal-box 是 height:50%（390×844 上算出來 422px）， 內容有 691px，等於一開啟就被裁掉一半，登入按鈕要在框內再捲一次才看得到。 改成高度跟著內容走，只在螢幕不夠高時才封頂捲動。 */ #authModal .modal-box{ height:auto !important; bottom:auto !important; /* 同時有 top 與 bottom 時，高度由偏移決定，height:auto 會被無視 */ max-height:86vh !important; overflow-y:auto !important; } /* Owner 2026-09-02 裁示：彈出視窗不滿版，高度約七五成 */ #authModal .modal-box, .authModal .modal-box{ max-height:75vh !important; } /* ── 登入彈窗：第三方登入那列（Owner 2026-09-02 回報跑版）────────── 原本是「標籤 + 兩顆鈕」三欄格線，390px 以下塞不下就折行； 註冊分頁更明顯，LINE 會掉到下一行。改成標籤獨立一行、兩顆等寬並排。 */ .authModal .login-else-box{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; align-items:center; } .authModal .login-else-box span{ grid-column:1 / -1 !important; text-align:center; margin-bottom:2px; } .authModal .login-else-box a{ width:100% !important; margin:0 !important; min-height:52px; } /* LINE 的圖帶 inline width:54px、Google 只有 28px，一大一小。統一高度、寬度自適應 */ .authModal .login-else-box a img{ width:auto !important; height:30px !important; max-height:30px !important; object-fit:contain; } /* ── 底部固定列：首頁改用內頁那套（Owner 2026-09-02 指定會員中心那條為準）── 直接抄 gr66-theme-native.css 的現況，首頁載不到那支，抄過來兩邊才不會再漂。 */ /* 底部固定列：首頁截圖裡這條本來就是深色配金圖示，維持這個對比（唯一保留的深色元件） */ .ft-navbar, .fixed-bottom{ background:linear-gradient(180deg,#241b10,#1c160e) !important; border-top:1px solid rgba(216,163,56,.3) !important; } .ft-navbar img, .ft-link img{ filter:invert(1) brightness(1.15); } .ft-navbar .logo img, .navbar-bg .logo img, img[src*="logo"]{ filter:none; } /* 儲值頁底部送出列：白底、細上緣線、往上的柔陰影，讓它像「浮在內容之上的動作列」， 不是被塗黑的一條。按鈕收窄留白、字級拉大，跟其他主鈕同一套淡藍填色。 */ /* 頁尾整組不要（Owner 2026-08-27）：這些頁是登入後的操作介面， 頁尾那串連結與版權區在這裡沒有作用（天條 53：noindex 的 PHP 端不留純 SEO 敘述）。 只隱藏顯示、樣板沒動；底部固定導覽列（.ft-navbar）是導覽不是頁尾，保留。 */ #footer, footer#footer{ display:none !important; } .ft-navbar .ft-link{ min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; } /* 儲值頁底部送出列重做（Owner：這條做的有點醜）： 原本整條白底＋厚留白，像多壓一塊板子。改成毛玻璃底、貼齊卡片寬度、 按鈕本身變成實心主動作（頁面上唯一的實心，責任明確）。 */ /* 送出列比例重調（Owner：取代按鈕那一列比例不對）： ①按鈕寬度對齊卡片內容寬（不再整條拉滿），高度 48、圓角 12、字級 16.5，看起來不會胖； ②固定列是 position:fixed 不佔版面，內容要留出等高的空間，否則最後一段被壓在底下（先前就是這個問題）。 */ /* 送出列比例再修（Owner：這個比例還是不對）： 問題不在尺寸而在「它跟全站主鈕長得不一樣」——別頁的主要動作都是淡藍填色 48px， 這裡卻是一整條飽和深藍，看起來又胖又重。統一成同一種按鈕即可。 */ /* 送出列間距最終校正（Owner 反覆指出上下不協調）： 數字上其實對稱（上 11 / 下 12），但底部導覽自己還有 24px 安全區留白， 兩者相加後視覺重心偏下。做法：①上下都給 14px；②列的底邊貼齊導覽高度（73px）， 中間不留縫；③列與導覽之間用一條髮絲線分界，不靠留白區隔。 */ @media (min-width:992px){ /* 桌機沒有底部導覽，列直接貼底 */ } /* 捲動時出現黑色殘影的處理（iOS 常見）： 毛玻璃（backdrop-filter）疊在固定/黏著元素上，捲動時容易重繪失敗留下黑塊。 固定送出列改用實色背景，導覽與送出列都提升成獨立圖層，避免殘影。 */ .ft-navbar{ transform:translateZ(0); will-change:transform; } /* 觸控尺寸（天條 34，上線前檢查） 底部導覽的 只有 34px（外觀不變，把可點區域撐到整格高）； 紀錄頁的日期篩選鈕 38px，一併補到 44。 */ .ft-navbar .ft-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; } @media (min-width:992px){ /* 送出鈕是 inline-flex，margin:auto 對行內元素不生效，要靠父層置中 */ } /* 底部導覽六格等分，字大了圖示要收一點才排得下 */ .ft-nav .ft-link img, .ft-navbar .ft-link img{ max-height:20px; } /* ── 底部導覽收留白（Owner 2026-09-01）───────────────────────── 原本圖示上面空了 24px，太鬆。收到 6px，圖示與文字之間 4px， 文字下方留 8px 不貼邊。整條 仍保持 44px 以上的觸控目標（天條 34）。 */ .ft-navbar, nav.fixed-bottom, .fixed-bottom.ft-navbar{ padding-top:6px !important; padding-bottom:5px !important; } .ft-navbar ul, nav.fixed-bottom ul, .ft-navbar li, nav.fixed-bottom li{ padding-top:0 !important; margin-top:0 !important; } .ft-navbar .ft-link, nav.fixed-bottom .ft-link, .ft-navbar li > a, nav.fixed-bottom li > a{ padding-top:0 !important; padding-bottom:0 !important; min-height:44px; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px; } .ft-navbar .ft-link img, nav.fixed-bottom .ft-link img, .ft-navbar li > a img, nav.fixed-bottom li > a img{ margin-bottom:0 !important; margin-top:0 !important; } /* ══ 底部導覽 A 版：貼底深色條（Owner 2026-09-01 改選 A）══════════ 深色條維持站上原本的調性，只把「目前所在頁」做出來： 頂端一道金線 + 圖示與文字一起提亮。沒有凸出的元件，內容不必額外讓位。 */ .ft-navbar, nav.fixed-bottom{ background:linear-gradient(180deg,#241b10,#1c160e) !important; border-top:1px solid rgba(216,163,56,.3) !important; } .ft-navbar .ft-link, nav.fixed-bottom .ft-link{ color:#c9b490 !important; position:relative; } .ft-navbar .ft-link img, nav.fixed-bottom .ft-link img{ filter:invert(1) brightness(1.05) !important; opacity:.72; } /* 目前所在頁 */ .ft-navbar .ft-link.pf-here, nav.fixed-bottom .ft-link.pf-here{ color:#f0c76a !important; } .ft-navbar .ft-link.pf-here img, nav.fixed-bottom .ft-link.pf-here img{ filter:invert(1) brightness(1.35) !important; opacity:1; } .ft-navbar .ft-link.pf-here::before, nav.fixed-bottom .ft-link.pf-here::before{ content:""; /* 金線要在深色條裡面貼著上緣，-6 會跑到條子外面壓在頁面上 */ position:absolute; top:0; left:50%; transform:translateX(-50%); width:30px; height:2px; background:#d8a338; border-radius:0 0 2px 2px; } /* ── 底部導覽比例重配（Owner 2026-09-01）───────────────────────── 根因：標籤的 line-height 被設成 0，盒高也是 0 —— 字是溢出到盒外才看得到的，垂直置中卻照「0 高的盒子」在算， 結果圖示偏上、文字偏下，下方看起來空一塊。 給標籤真正的行高之後再配：圖示 20 ＋ 間距 3 ＋ 文字 18 = 41， 上下各 6，觸控目標仍保 44 以上。 */ .ft-navbar, nav.fixed-bottom{ /* 不加 env(safe-area-inset-bottom)：站上原本只有 #footer 用它，底部導覽從來沒有。 我加上去之後 iPhone 會多出 34px，桌機無頭瀏覽器卻量到 0，所以一直沒發現。 */ /* 高度交回自動：原本被寫死 55px，但 li 自己 55.4px 會溢出去， 結果下內距等於沒作用，看起來就是「上下不對、下面空一塊」 */ height:auto !important; padding-top:5px !important; padding-bottom:5px !important; } .ft-navbar ul, nav.fixed-bottom ul{ height:auto !important; align-items:stretch !important; } .ft-navbar li, nav.fixed-bottom li{ height:auto !important; padding:0 !important; margin:0 !important; /* li 是行內容器時會留下行高造成的空隙，本來想改成 flex 收掉， 但 display:flex !important 會把 .d-none（Menu／Close／登出）一起叫出來、 還互相重疊 —— 只對「沒有被隱藏的」那些生效。 */ line-height:0 !important; } .ft-navbar li:not(.d-none), nav.fixed-bottom li:not(.d-none){ display:flex !important; } .ft-navbar li > a, nav.fixed-bottom li > a{ flex:1 1 auto; } .ft-navbar .ft-link, nav.fixed-bottom .ft-link{ gap:4px !important; padding:0 !important; min-height:44px; justify-content:center; } .ft-navbar .ft-link > div, nav.fixed-bottom .ft-link > div{ line-height:1.15 !important; font-size:16px !important; display:block; /* 標籤自己帶外距，gap 就被墊高了，圖到字量到 7px 而不是設定的 4 */ margin:0 !important; padding:0 !important; } .ft-navbar .ft-link img, nav.fixed-bottom .ft-link img{ height:20px !important; max-height:20px !important; margin:0 !important; display:block; } /* 首頁自己那條 .gr66frame .ft-navbar .ft-link{min-height:56px} 優先權比較高， 會讓首頁的列高變 68px、內頁 56px。用同層級選擇器壓成 44（與內頁一致， 仍符合天條 34 的 44px 觸控下限）。 */ .gr66frame .ft-navbar .ft-link{ min-height:44px !important; } /* ── 底部導覽真正固定在畫面底（Owner 2026-09-02：拉到底還有留白）────── 導覽原本在 .gr66frame 裡，那層的 container-type 會讓 fixed 以容器為基準， 所以當初退而用 sticky —— sticky 黏的是「文件」底部，iOS 工具列縮放讓 可視高度變大時就露出一塊背景。現在導覽已移到框外，改回 fixed。 */ body > .ft-navbar, body > nav.fixed-bottom{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; z-index:60; padding-bottom:calc(5px + env(safe-area-inset-bottom, 0px)) !important; } /* 導覽移出後 .gr66frame 前綴的那條就套不到了，補一條同效果的 */ .ft-navbar .ft-link{ min-height:44px !important; } /* 內容尾端留出導覽高度，最後一排卡片才不會被壓住（含 iPhone 的安全區） */ .gr66frame{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); } /* ── 快速轉帳彈窗（Owner 2026-09-02 重做）──────────────────────────── 舊版把「轉出／轉入」硬排成一行，手機寬度下選單被壓到剩幾個字， 「全部轉入」變成圓形、動作鈕被切在框外。改成單欄由上往下， 欄位樣式與登入彈窗一致。 */ #authModalTransfer .modal-box .content{ padding:22px 18px 20px !important; text-align:left !important; } /* 箭頭改成向下：單欄排列時橫向箭頭指不到東西 */ /* 金額列：輸入框與「全部轉入」同一列，按鈕不再被壓成圓形 */ /* 兩顆動作鈕等寬並排，高度足夠不被切 */ /* ── 底部導覽高度（Owner 2026-09-02：扁扁的擠壓到）────────────────── 圖 20px ＋ 間距 4px ＋ 字 16px 已經 40px，塞在 44px 的可點區裡上下貼死。 放到 52px，圖與字都不動，只把留白加回來。 */ .ft-navbar .ft-link, nav.fixed-bottom .ft-link, .gr66frame .ft-navbar .ft-link{ min-height:52px !important; } .ft-navbar, nav.fixed-bottom{ padding-top:7px !important; padding-bottom:6px !important; } /* 驗證彈窗的說明與錯誤訊息 */ /* ── 遊戲清單頁的頁首橫幅：線上四張圖都是 404（Owner 2026-09-02 回報破圖框）── */ /* ── 分類側欄放大（Owner 2026-09-02：框內容可以再大點）────────────── */ .gr66frame .rail{ width:84px !important; gap:9px !important; } .gr66frame .rail button{ padding:14px 4px !important; gap:7px !important; } .gr66frame .rail button svg{ width:30px !important; height:30px !important; } .gr66frame .rail button span{ font-size:13.5px !important; } /* 驗證彈窗的內容區（Owner 2026-09-03：打開是空白框） 不能沿用 .tab-content —— 站上的 openAuthModal 會把彈窗裡所有 .tab-content 藏起來， 只留 tabId 指定的那一個。這裡改用 .vf-pane，樣式比照 .tab-content。 */ /* 登入／註冊彈窗面板底色：B 案暖金卡（Owner 2026-09-04 選定）。 9/4 那次只加在 gr66-theme-native.css，首頁 index.php 只載這一支，所以首頁的彈窗一直是舊的半透白， 會員頁才是新的。同一條規則抄過來，兩邊一致。只換底色與邊框，版面不動。 */ .authModal .modal-box{ background:linear-gradient(180deg,#fffdf6,#f7edd6) !important; border:1px solid #e2cf9a !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ── 登入／註冊彈窗收緊（Owner 2026-09-06：一個畫面看得到下面的快速登入，不用再捲）── 只動間距、欄位高度與排法，顏色與元件樣式不動。同一段同時放在 gr66-home.css（首頁） 與 gr66-theme-native.css（會員頁），兩邊才不會漂。 */ #authModal .modal-box, .authModal .modal-box{ padding:16px 18px 16px !important; max-height:calc(100vh - 20px) !important; max-width:520px; } .authModal .close_m{ top:10px; right:10px; width:30px; height:30px; font-size:18px; } .authModal .tab-header{ margin:0 0 10px; padding:4px; } .authModal .tab-btn{ min-height:38px; font-size:14px; } .authModal .fld{ font-size:13px; margin:0 0 3px; line-height:1.4; } .authModal .form-control, .authModal input[type=text], .authModal input[type=password], .authModal input[type=tel]{ min-height:42px !important; padding:8px 12px !important; font-size:15px !important; margin-bottom:8px !important; } /* 圖形驗證碼：欄位與圖同一行，省掉一整列 */ .authModal #chknum{ display:inline-block !important; width:calc(100% - 130px) !important; vertical-align:top; } .authModal #chkImg.codeimg{ display:inline-block !important; vertical-align:top; width:120px; height:42px; object-fit:contain; margin:10px 0 8px 6px !important; border:1px solid #e2cf9a; } .authModal #regImg.codeimg{ display:block !important; width:120px; height:42px; object-fit:cover; margin:0 0 8px !important; border:1px solid #e2cf9a; } /* 主鈕與忘記密碼：鈕 44 高、忘記密碼改回一行文字連結 */ .authModal button.login, .authModal button[type=submit], .authModal .register, .authModal button.reg{ min-height:44px; font-size:16px; margin:2px 0 0 !important; } .authModal button.login.mb-3{ margin-bottom:0 !important; } .authModal form > a[href*="Forget"], .authModal form > a[href*="forget"]{ background:none !important; border:none !important; min-height:32px; line-height:32px; margin:4px auto 0; font-size:13.5px; max-width:none; } .authModal .login-else-box{ margin-top:8px !important; padding-top:8px !important; gap:6px 8px !important; } .authModal .login-else-box img{ height:30px !important; } .authModal .login-else-box.top{ margin:0 0 10px !important; padding:0 0 8px !important; } .authModal .btn-sms{ min-height:42px; } /* 註冊分頁桌機版：明確指定格位。 原本用 grid-auto-flow:column 讓兩欄各自往下填，label 和自己的 input 會排到不同列， 兩欄一錯開就出現「右欄先結束、左欄落單」的空洞（Owner 2026-09-07 回報）。 版面：帳號整行 → 密碼｜確認密碼 → 姓名｜手機 → 簡訊驗證碼整行 → 驗證碼＋圖 → 送出 → 快速註冊。 */ @media (min-width:600px){ .authModal #signForm{ display:grid; grid-template-columns:1fr 1fr; column-gap:12px; grid-auto-flow:row; align-items:start; } /* hidden 欄位不佔格 */ .authModal #signForm input[type=hidden]{ display:none; } .authModal #signForm .fld{ margin-top:0; align-self:end; } .authModal #signForm label[for="u_id"]{ grid-column:1 / -1; grid-row:2; } .authModal #signForm #u_id{ grid-column:1 / -1; grid-row:3; } .authModal #signForm label[for="u_password"]{ grid-column:1; grid-row:4; } .authModal #signForm label[for="u_password2"]{ grid-column:2; grid-row:4; } .authModal #signForm #u_password{ grid-column:1; grid-row:5; } .authModal #signForm #u_password2{ grid-column:2; grid-row:5; } .authModal #signForm label[for="u_name"]{ grid-column:1; grid-row:6; } .authModal #signForm label[for="phone"]{ grid-column:2; grid-row:6; } .authModal #signForm #u_name{ grid-column:1; grid-row:7; } .authModal #signForm #phone{ grid-column:2; grid-row:7; } .authModal #signForm label[for="sms_code"]{ grid-column:1 / -1; grid-row:8; } .authModal #signForm .sms-row{ grid-column:1 / -1; grid-row:9; } .authModal #signForm label[for="checknum"]{ grid-column:1 / -1; grid-row:10; } .authModal #signForm #checknum{ grid-column:1; grid-row:11; } .authModal #signForm #regImg.codeimg{ grid-column:2; grid-row:11; align-self:center; margin:0 0 8px !important; } .authModal #signForm .login-else-box{ grid-column:1 / -1; grid-row:1; } .authModal #signForm #submitBtn{ grid-column:1 / -1; grid-row:12; } } /* 手機：收成一欄、欄位標籤照樣顯示（Owner 2026-09-07：兩欄把提示字切掉、驗證碼撞到隔壁欄， 標籤藏起來也看不懂哪格是什麼）。整張會變長要捲，是 Owner 拍板的取捨。 */ @media (max-width:599px){ .authModal #signForm{ display:block; } } /* 公告彈窗（首頁）── 首頁不載 Bootstrap 的 CSS 與 JS，共用的 #notice 在這裡沒有版面， 所以把內頁那套外觀補齊。只加規則，內頁靠 header.php 的 style 照舊，兩邊互不影響。 */ #notice.modal{ /* 遮罩底部收在底部導覽列上方，讓導覽保持明亮可點：使用者本來要點底部按鈕的那一下 就能直接導航，不會被公告遮罩吃掉（離開首頁公告自然收掉）。height:auto 必要， 否則 bootstrap 的 .modal{height:100%} 會讓 bottom 失效。 */ display:none; position:fixed; top:0; left:0; right:0; bottom:calc(var(--bnav,73px) + env(safe-area-inset-bottom)); height:auto; z-index:9999; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); overflow-y:auto; padding:24px 16px; } #notice.modal.is-open{ display:block; } #notice .modal-dialog{ width:100%; max-width:600px; margin:0 auto; } #notice .modal-content{ background:linear-gradient(180deg,#fffdf6,#f7edd6); border:1px solid #e2cf9a; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3); } #notice .modal-header{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border-bottom:3px solid #c9a050; padding:16px 20px; } #notice .modal-title{ margin:0; flex:1; color:#fff; font-size:18px; font-weight:700; letter-spacing:4px; text-align:center; } #notice .modal-header .close{ background:none; border:0; color:#fff; font-size:26px; line-height:1; width:40px; height:40px; cursor:pointer; opacity:.85; } #notice .modal-header .close:hover{ opacity:1; } #notice .modal-body{ padding:18px 20px 6px; } #notice .nav-tabs{ display:flex; gap:8px; list-style:none; margin:0 0 12px; padding:0; } #notice .nav-tabs .nav-link{ display:flex; align-items:center; gap:6px; min-height:38px; padding:6px 14px; border-radius:10px; background:#fff; border:1px solid #e2cf9a; color:#6b5a33; font-size:14px; font-weight:700; text-decoration:none; } #notice .nav-tabs .nav-link img{ width:18px; height:18px; } #notice .tab-content ul{ list-style:none; margin:0; padding:0; } #notice .tab-content li{ margin-bottom:12px; padding:12px 14px; border-radius:12px; background:#fff; border:1px solid #f1f5f9; } #notice .tab-content li a{ text-decoration:none; color:inherit; display:block; } #notice .tab-content li h5{ display:flex; align-items:center; margin:0 0 4px; font-size:16px; font-weight:700; color:#2b2013; } #notice .tab-content li h5::before{ content:""; width:4px; height:16px; background:#c9a050; margin-right:12px; display:inline-block; flex:0 0 4px; } #notice .tab-content li p{ margin:0; font-size:14px; line-height:1.7; color:#5c5140; } #notice .modal-footer{ padding:12px 20px 20px; text-align:center; } #notice .btn-close-notice{ background:linear-gradient(135deg,#c9a050 0%,#a6823d 100%); color:#fff !important; min-height:44px; padding:8px 30px; border-radius:8px; border:none; font-size:16px; font-weight:700; cursor:pointer; } @media (max-width:599px){ #notice.modal{ padding:16px 12px; } #notice .modal-title{ font-size:16px; letter-spacing:2px; } #notice .tab-content li h5{ font-size:15px; } } /* .fade:not(.show) 會把它壓成透明，開啟時一律看得見 */ #notice.modal.is-open{ opacity:1 !important; } #notice.modal.is-open .modal-dialog{ transform:none !important; } /* 公告彈窗的兩顆鈕：主要動作是「我知道了」，「不再顯示」是次要 */ #notice .modal-footer{ display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap; } #notice .btn-no-more-notice{ background:#fff; color:#6b5a33; border:1px solid #e2cf9a; min-height:44px; padding:8px 20px; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; } #notice .btn-no-more-notice:hover{ background:#faf6ec; } @media (max-width:599px){ #notice .modal-footer{ justify-content:stretch; } #notice .btn-no-more-notice, #notice .btn-close-notice{ flex:1; padding:8px 12px; } } /* ── 手機版彈窗（Owner 2026-09-07：底部被導覽列遮到、整張太滿不好看）────────── 原本 .modal-box 在 767 以下是 bottom:0 的貼底面板，高度吃到 calc(100vh - 20px)， 等於整個畫面塞滿；而站上有一條 64px 的固定底部導覽，正好蓋住「註冊」鈕與快速註冊那一列。 改成浮起來的卡片：上下留白、底部讓開導覽列、四角圓、內距放鬆。只加規則，桌機不受影響。 */ @media (max-width:599px){ #authModal .modal-box, .authModal .modal-box{ top:auto !important; bottom:calc(72px + env(safe-area-inset-bottom)) !important; left:50% !important; width:calc(100% - 24px) !important; max-width:none !important; max-height:calc(100vh - 160px) !important; border-radius:18px !important; padding:14px 16px 18px !important; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* 站上另有一條 transform:translate(-50%,-50%)（給置中用的）， 在貼底定位時會把卡片往上拉半個高度，只保留水平置中 */ #authModal .modal-box, .authModal .modal-box{ transform:translateX(-50%) !important; -webkit-transform:translateX(-50%) !important; } /* 欄位之間鬆一點，一眼看過去不會那麼擠 */ .authModal .fld{ margin:0 0 6px !important; } .authModal .form-control, .authModal input[type=text], .authModal input[type=password], .authModal input[type=tel]{ margin-bottom:14px !important; } .authModal .sms-row{ margin-bottom:14px; } .authModal #regImg.codeimg{ margin:0 0 14px !important; } .authModal .tab-header{ margin:0 0 12px !important; } .authModal button.login, .authModal .register{ margin-top:6px !important; } .authModal .login-else-box{ margin-top:12px !important; padding-top:12px !important; } } /* ── 手機版彈窗頂部（Owner 2026-09-08：分頁列太上面、被 Safari 網址列擠到）────── 1) 兩顆分頁鈕原本 44px/14px，比下面那顆「登入」（44px/16px，實際 58px 高）矮一截，拉成同一級。 2) 分頁列的 margin-top 原本是 0，直接貼著卡片內距，補上留白。 3) 高度限制原本吃 100vh；iOS Safari 的 100vh 不扣網址列，卡片被撐到超出可視範圍， 頂端就被切掉。改吃 100svh（扣掉網址列後的高度）；讀不懂 svh 的瀏覽器會跳過那一行， 自動退回上面那條 100vh，不會壞版。只加規則，桌機與平板不受影響。 */ @media (max-width:599px){ #authModal .modal-box, .authModal .modal-box{ padding-top:20px !important; max-height:calc(100dvh - 160px) !important; max-height:calc(100svh - 150px) !important; } .authModal .tab-header{ margin:8px 0 16px !important; padding:5px !important; } .authModal .tab-btn{ min-height:48px !important; font-size:16px !important; } .authModal .tab-btn img{ width:18px !important; height:18px !important; } } /* ── 巡檢修正（Owner 2026-09-09 指示）───────────────────────────── 1) 手機版頁首「登入／註冊」原本 69×34，主要操作的觸控底線是 44×44。 2) 主視覺輪播的指示點只有 6×6，手指點不到。圓點看起來不變， 用透明的 ::after 把可點範圍撐到 28，間距一起放寬到中心距 33，兩顆才不會重疊。 3) 遊戲卡標籤 9px 太小，放大到 10.5；名字同時改成不折行 —— 標籤一變寬就會把「DG真人」擠成兩行，比原本更糟。 4) 頁尾版權對比只有 3.11（11px 小字需要 4.5），改成 6.07。 5) 站內公告兩頁的標題與副標貼齊螢幕邊緣，跟底下表格的 30px 對不齊。 只加規則，既有的一行都沒動。 */ @media (max-width:991px){ .d-block.d-lg-none > a.btn-login.btn-sm, .d-block.d-lg-none > a.btn-register.btn-sm{ min-height:44px !important; padding:0 14px !important; font-size:14px !important; } } .hero-dots{ gap:22px !important; } .hero-dots button{ position:relative; } .hero-dots button::after{ content:""; position:absolute; left:50%; top:50%; width:28px; height:28px; transform:translate(-50%,-50%); } .game-card .name-bar{ gap:6px !important; } .game-card .name-bar .name{ white-space:nowrap !important; } .game-card .name-bar .tag{ font-size:10.5px !important; padding:2px 6px !important; white-space:nowrap !important; flex:0 1 auto !important; min-width:0 !important; } /* 側欄那組（.service-box）本來就沒有定位樣式 —— position:static、寬 32px， 等於在文件流裡插一小塊，ul 還帶著 disc 項目符號，畫面上那幾個黑點就是它。 消掉項目符號、把圖示尺寸定住；手機版整個收起來（它的左緣會被切出畫面， 而底部導覽本來就有客服入口）。 */ /* ── 站內公告兩頁的內容欄（Owner 2026-09-09：電腦版內容擠在右半邊、左邊留 600px 空白）── 兩層原因疊在一起： ① 舊的 member.css 給 .member-page 寫死 width:79%，後來補的 .member .member-page{width:auto} 要 body.member 才命中 —— 公告頁的 body 是 .news，吃不到。 ② section.content 是 flex + justify-content:flex-end，而 .wapper 是 flex:0 1 auto 不會成長， 內容就只有自己的寬度、還被推到那 79% 的最右邊。 另外側欄那兩顆圖示原本垂直置中，浮在表格左側中間，一起改成靠上。 內文欄限寬 760 —— 拉滿 1182 的話一行會塞七十幾個中文字，超過可讀行寬（天條 34）。 只認 .notice-page，真正的會員頁不受影響。 */ /* ─────────────────────────────────────────────────────────────── * 2026-10-22 Owner「手機登入驗證碼都會錯誤」案:實測非程式 bug,正確碼可登入; * 真因是驗證碼原生圖 270×75 被 #chkImg 縮成 120×42(還比例不符再 letterbox)→ 手機難讀、 * 容易看錯一碼被判錯,而紅字錯誤不顯眼,使用者只看到「又換一張」。 * 修法:圖放大到接近原生、比例釘 18/5(=270/75)不變形、輸入框與圖各自一行; * 錯誤訊息放大加粗 + 紅底輕微抖動,讓「打錯」看得出來。純前端、只動登入(#chkImg)。 * ─────────────────────────────────────────────────────────────── */ .authModal #chknum{ display:block !important; width:100% !important; } .authModal #chkImg.codeimg{ display:block !important; width:min(248px, 100%) !important; height:auto !important; /* 明確寬度→aspect 算高;248÷(18/5)≈69,接近原生 270×75、銳利 */ max-width:100% !important; /* 蓋掉上面 .authModal .codeimg 的 max-width:130px(否則寬度被卡在 130) */ aspect-ratio:18 / 5; object-fit:contain; margin:12px auto 10px !important; padding:4px; background:#fff; } .authModal #LoginError.alert{ font-size:16px !important; font-weight:700 !important; padding:10px 12px !important; border-radius:8px !important; margin:4px 0 12px !important; } .authModal #LoginError.alert-danger{ background:#fdecea !important; color:#c0392b !important; border:1px solid #e74c3c !important; animation:gr66ShakeErr .4s ease; } @keyframes gr66ShakeErr{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} } /* ─────────────────────────────────────────────────────────────── * 2026-10-22 Owner「首頁下方 SEO 內容補回來、只做登入前」:舊 WP 首頁門面的 #games / #about / #faq * 三段接在大廳下面（screens/Home.jsx 未登入才畫，內容在 data/grHomeSeo.js）。 * 規則從 WP 的 Customizer 樣式表（.tjwrap 那套）抄需要的部分，前綴改 .gr-seo、色票變數掛在容器上不外漏。 * 只加不改;還原就是拿掉這一段 + Home.jsx 那一行。 * ─────────────────────────────────────────────────────────────── */ .gr-seo{ --ink:#fbf8f2; --ink2:#f3ecdf; --panel:#fff; --panel2:#f7f1e4; --gold:#d8a338; --gold-dim:#8a5f00; --gold-ink:#a9720a; --text:#2b2013; --dim:#6b6152; --muted:#9c917c; --line:#e8e3d3; --tag-bg:#faf3e0; --tag-line:#e2cf9a; --tag-ink:#8a5c06; --shadow:0 10px 26px -18px rgba(43,32,19,.35); color:var(--text); font-size:16px; line-height:1.85; text-align:left; } .gr-seo *{ box-sizing:border-box; } .gr-seo img{ max-width:100%; display:block; border-radius:0; } .gr-seo a{ color:var(--gold-dim); } .gr-seo .wrap{ max-width:1180px; margin:0 auto; padding:0 16px; } .gr-seo section{ padding:26px 0; } .gr-seo h2{ margin:0 0 6px; color:var(--text); font-size:20px; font-weight:900; line-height:1.5; padding-bottom:8px; border-bottom:2px solid var(--gold); } .gr-seo section > .wrap > p.intro{ margin:10px 0 16px; color:var(--dim); max-width:68ch; } .gr-seo h3{ margin:0 0 4px; color:var(--text); font-size:16px; font-weight:800; } .gr-seo p{ margin:0; } /* 遊戲平台六張卡:手機兩欄、電腦三欄;整張可點（a.more 的覆蓋層） */ .gr-seo .cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .gr-seo .cards article{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:0; overflow:hidden; display:flex; flex-direction:column; } .gr-seo .cards .art{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--panel2); } .gr-seo .cards .art img{ width:100%; height:100%; object-fit:cover; object-position:top center; } .gr-seo .cards .art .badge{ position:absolute; top:8px; left:8px; background:rgba(28,22,14,.72); border-radius:8px; padding:4px 8px; } .gr-seo .cards .art .badge img{ height:16px; width:auto; } .gr-seo .cards article > .in{ padding:10px 10px 12px; display:flex; flex-direction:column; gap:4px; } .gr-seo .cards h3{ font-size:15px; margin:0; } .gr-seo .cards article p{ margin:0; color:var(--dim); font-size:14px; line-height:1.75; } .gr-seo .cards a.more{ font-weight:800; font-size:14px; text-decoration:none; color:var(--gold-ink); display:inline-flex; align-items:center; min-height:36px; } .gr-seo .cards article a.more::after{ content:""; position:absolute; inset:0; z-index:1; } .gr-seo .tag{ display:inline-block; font-size:12px; font-weight:700; color:var(--tag-ink); background:var(--tag-bg); border:1px solid var(--tag-line); border-radius:999px; padding:2px 8px; line-height:1.6; align-self:flex-start; } /* 關於:三欄卡 */ .gr-seo .about .cols{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; } .gr-seo .about article{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); } .gr-seo .about h3{ margin:0 0 6px; font-size:17px; } .gr-seo .about p{ color:var(--dim); font-size:16px; line-height:1.9; margin:0; } .gr-seo .about .note{ margin-top:14px; } .gr-seo .about a{ color:var(--gold-ink); text-decoration:underline; display:inline-block; padding:4px 2px; min-height:32px; box-sizing:border-box; } /* 內文連結觸控目標 ≥32（天條 34） */ /* 常見問題:手風琴，summary 44 高（天條 34） */ .gr-seo .faq{ display:grid; gap:10px; } .gr-seo .faq details{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); } .gr-seo .faq summary{ font-weight:800; font-size:16px; cursor:pointer; list-style:none; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .gr-seo .faq summary::-webkit-details-marker{ display:none; } .gr-seo .faq summary::after{ content:"＋"; color:var(--gold-ink); flex:none; } .gr-seo .faq details[open] summary::after{ content:"－"; } .gr-seo .faq p{ margin:8px 0 0; color:var(--dim); font-size:16px; line-height:1.9; } @media (min-width:900px){ .gr-seo h2{ font-size:24px; } .gr-seo h3{ font-size:17px; } .gr-seo section{ padding:34px 0; } .gr-seo .cards{ grid-template-columns:repeat(3,1fr); gap:18px; } .gr-seo .cards article > .in{ padding:12px 14px 14px; } .gr-seo .cards h3{ font-size:16px; } .gr-seo .about .cols{ grid-template-columns:repeat(3,1fr); gap:16px; } } /* 2026-10-22 Owner「整頁回到 WP 版的樣子、H1 補」:登入前首頁其餘區塊（文字主視覺卡、熱門機台圖牆、優惠輪播）。 * 一樣從 WP 的 .tjwrap 規則抄，class 改 gr- 前綴避開站上本來就有的 .hero / .card / .strip / .promo。 */ .gr-seo .gr-intro{ padding:16px 0 0; } .gr-seo .gr-intro-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:20px 18px; } .gr-seo .gr-intro h1{ margin:0; color:var(--text); font-size:24px; font-weight:900; line-height:1.45; letter-spacing:.01em; } .gr-seo .gr-intro h1 em{ font-style:normal; color:var(--gold-ink); } .gr-seo .gr-intro p.lead{ margin:8px 0 0; font-size:16px; color:var(--dim); } .gr-seo .gr-intro .go{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .gr-seo .gr-intro .go a{ flex:1 1 150px; display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:12px; padding:12px 18px; font-weight:800; font-size:15px; text-decoration:none; text-align:center; } .gr-seo .gr-intro .go a.j{ background:#e3eefc; border:1px solid #b9d4f7; color:#1d55a8; } .gr-seo .gr-intro .go a.s{ background:#f7f0df; border:1px solid #e3d6b4; color:#6b4f0e; } .gr-seo .gr-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; } .gr-seo .gr-facts div{ background:var(--tag-bg); border:1px solid var(--tag-line); border-radius:12px; padding:10px 12px; } .gr-seo .gr-facts b{ display:block; font-size:19px; color:var(--tag-ink); line-height:1.4; } .gr-seo .gr-facts span{ font-size:13.5px; color:var(--dim); } /* 熱門機台:橫向滑動的 108px 方圖 */ .gr-seo .gr-strip{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; } .gr-seo .gr-strip::-webkit-scrollbar{ display:none; } .gr-seo .gr-strip img{ flex:0 0 108px; width:108px; height:108px; border-radius:14px; object-fit:cover; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); } /* 優惠輪播:scroll-snap 橫向滑，整張可點 */ .gr-seo .gr-promo-track{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; } .gr-seo .gr-promo-track::-webkit-scrollbar{ display:none; } .gr-seo .gr-promo-track > article{ position:relative; flex:0 0 86%; scroll-snap-align:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); } .gr-seo .gr-promo-track img{ width:100%; aspect-ratio:4/1; object-fit:cover; } .gr-seo .gr-promo-track .in{ padding:12px 14px 14px; } .gr-seo .gr-promo-track h3{ margin:0 0 4px; font-size:16px; } .gr-seo .gr-promo-track p{ margin:0 0 10px; color:var(--dim); font-size:14px; line-height:1.8; } .gr-seo .gr-promo-track a.go{ display:inline-flex; align-items:center; min-height:36px; background:#e3eefc; border:1px solid #b9d4f7; color:#1d55a8; border-radius:9px; padding:0 14px; font-weight:700; font-size:13.5px; text-decoration:none; } .gr-seo .gr-promo-track article a.go::after{ content:""; position:absolute; inset:0; } @media (min-width:760px){ .gr-seo .gr-promo-track > article{ flex:0 0 46%; } } @media (min-width:900px){ .gr-seo .gr-intro{ padding:22px 0 0; } .gr-seo .gr-intro-card{ padding:26px 28px; display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; } .gr-seo .gr-intro h1{ font-size:32px; } .gr-seo .gr-intro .go{ margin-top:18px; } .gr-seo .gr-facts{ margin-top:0; } } /* ─────────────────────────────────────────────────────────────── * 2026-10-22 Owner 登入／註冊彈窗手機版重排:「快速登入不用滑就看得到」「驗證碼放輸入框右邊」 * 「置中、上下留白寬一點才大器」「註冊頁也重排」。只掛 ≤767px，電腦版不動;驗證碼圖維持清楚（高 44，不縮成 120×42）。 * 登入:置中卡 → 頁籤 → 三欄位（驗證碼與圖同列）→ 登入鈕 → 忘記密碼 → Google / Line / Telegram 三顆同排（不印「其他方式登入」）。 * 註冊:快速註冊一排 → 帳號 → 密碼｜確認密碼 → 姓名｜手機 → 簡訊驗證碼＋發送鈕 → 驗證碼＋圖 → 註冊鈕，一屏放得下。 * 選擇器用 #authModal.authModal .modal-box 壓過前面所有 .authModal 規則;還原就是拿掉這一段。 * ─────────────────────────────────────────────────────────────── */ @media (max-width:767px){ #authModal.authModal .modal-box{ padding:22px 18px 24px !important; border-radius:20px !important; top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) !important; max-height:calc(100vh - 32px) !important; max-height:calc(100svh - 32px) !important; } #authModal.authModal .modal-box .close_m{ top:10px !important; right:10px !important; } #authModal.authModal .modal-box .tab-header{ margin:0 0 14px !important; padding:3px !important; min-height:0 !important; } #authModal.authModal .modal-box .tab-btn{ min-height:38px !important; height:38px !important; padding:4px 10px !important; line-height:1.2 !important; } #authModal.authModal .modal-box .tab-content{ padding:0 !important; } #authModal.authModal .modal-box .login_form.m-3{ margin:0 !important; } #authModal.authModal .modal-box .fld{ margin:0 0 6px !important; font-size:14px !important; } #authModal.authModal .modal-box .form-control, #authModal.authModal .modal-box input[type=text], #authModal.authModal .modal-box input[type=password], #authModal.authModal .modal-box input[type=tel]{ min-height:44px !important; height:44px !important; padding:8px 12px !important; margin:0 0 12px !important; } #authModal.authModal .modal-box button.login, #authModal.authModal .modal-box button[type=submit], #authModal.authModal .modal-box .register{ min-height:48px !important; padding:10px 16px !important; margin:4px 0 0 !important; } #authModal.authModal .modal-box form > a[href*="Forget"], #authModal.authModal .modal-box form > a[href*="forget"]{ min-height:28px !important; line-height:28px !important; margin:6px auto 0 !important; } /* 快速登入／註冊:三顆等寬同排，不印文字 */ #authModal.authModal .modal-box .login-else-box{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:10px !important; margin:14px 0 0 !important; padding:14px 0 0 !important; } #authModal.authModal .modal-box .login-else-box.top{ margin:0 0 14px !important; padding:0 0 14px !important; border-top:0 !important; border-bottom:1px solid #e2cf9a; } #authModal.authModal .modal-box .login-else-box span{ display:none !important; } #authModal.authModal .modal-box .login-else-box a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:1 1 0 !important; min-width:0 !important; width:auto !important; min-height:44px !important; padding:6px 8px !important; margin:0 !important; } #authModal.authModal .modal-box .login-else-box a img, #authModal.authModal .modal-box .login-else-box a svg{ height:30px !important; width:auto !important; } /* 登入表單:grid 兩欄，只有驗證碼那一列用到第二欄 */ #authModal.authModal .modal-box #LoginForm{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; column-gap:8px !important; align-items:center; } #authModal.authModal .modal-box #LoginForm > *{ grid-column:1 / -1; } #authModal.authModal .modal-box #LoginForm #chknum{ grid-column:1 !important; display:block !important; width:100% !important; margin:0 0 12px !important; } #authModal.authModal .modal-box #LoginForm #chkImg.codeimg{ grid-column:2 !important; display:block !important; height:44px !important; width:auto !important; aspect-ratio:18/5; max-width:none !important; margin:0 0 12px !important; padding:2px !important; border:1px solid #e2cf9a; border-radius:8px; background:#fff; } #authModal.authModal .modal-box #LoginForm > a{ justify-self:center; } /* 註冊表單:兩欄，列號寫死（跟上面桌機版同一招，自動排會錯位） */ #authModal.authModal .modal-box #signForm{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:10px !important; align-items:center; } #authModal.authModal .modal-box #signForm > *{ grid-column:1 / -1; } #authModal.authModal .modal-box #signForm input[type=hidden]{ display:none; } #authModal.authModal .modal-box #signForm label[for=u_password], #authModal.authModal .modal-box #signForm #u_password, #authModal.authModal .modal-box #signForm label[for=u_name], #authModal.authModal .modal-box #signForm #u_name, #authModal.authModal .modal-box #signForm #checknum{ grid-column:1 !important; } #authModal.authModal .modal-box #signForm label[for=u_password2], #authModal.authModal .modal-box #signForm #u_password2, #authModal.authModal .modal-box #signForm label[for=phone], #authModal.authModal .modal-box #signForm #phone, #authModal.authModal .modal-box #signForm #regImg{ grid-column:2 !important; } #authModal.authModal .modal-box #signForm .login-else-box{ grid-row:1; } #authModal.authModal .modal-box #signForm label[for=u_id]{ grid-row:2; } #authModal.authModal .modal-box #signForm #u_id{ grid-row:3; } #authModal.authModal .modal-box #signForm label[for=u_password], #authModal.authModal .modal-box #signForm label[for=u_password2]{ grid-row:4; } #authModal.authModal .modal-box #signForm #u_password, #authModal.authModal .modal-box #signForm #u_password2{ grid-row:5; } #authModal.authModal .modal-box #signForm label[for=u_name], #authModal.authModal .modal-box #signForm label[for=phone]{ grid-row:6; } #authModal.authModal .modal-box #signForm #u_name, #authModal.authModal .modal-box #signForm #phone{ grid-row:7; } #authModal.authModal .modal-box #signForm label[for=sms_code]{ grid-row:8; } #authModal.authModal .modal-box #signForm .sms-row{ grid-row:9; margin:0 0 10px !important; } #authModal.authModal .modal-box #signForm label[for=checknum]{ grid-row:10; } #authModal.authModal .modal-box #signForm #checknum, #authModal.authModal .modal-box #signForm #regImg{ grid-row:11; } #authModal.authModal .modal-box #signForm .register{ grid-row:13; } #authModal.authModal .modal-box #signForm #regImg.codeimg{ display:block !important; height:44px !important; width:auto !important; aspect-ratio:18/5; object-fit:contain !important; justify-self:end; max-width:100% !important; margin:0 0 10px !important; padding:2px !important; border:1px solid #e2cf9a; border-radius:8px; background:#fff; } #authModal.authModal .modal-box #signForm .fld{ margin:0 0 4px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #authModal.authModal .modal-box #signForm input[type=text], #authModal.authModal .modal-box #signForm input[type=password], #authModal.authModal .modal-box #signForm input[type=tel]{ margin:0 0 10px !important; } #authModal.authModal .modal-box #signForm .sms-row .btn-sms, #authModal.authModal .modal-box #signForm .sms-row button{ min-height:44px !important; height:44px !important; padding:0 10px !important; } #authModal.authModal .modal-box #signForm input::placeholder{ font-size:14px; } } /* 2026-10-22 Owner「這裡有點怪」:首頁 H1 在手機排成「2026 淘金娛樂城：台／灣現金版線上娛樂城推／薦，七家廳別免轉點」、右邊空一大塊。 * 病因:本檔開頭全域 h1,h2,h3{ text-wrap:balance; font-family:Noto Serif TC } —— 給大廳用的，套到 SEO 區塊的長中文標題上， * balance 會把三行硬拉成一樣長、每行只排到六成寬。SEO 區塊（.gr-seo）照 WP 原稿:一般換行、黑體。只加不改。 */ .gr-seo h1, .gr-seo h2, .gr-seo h3{ text-wrap:wrap; font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; } /* ─────────────────────────────────────────────────────────────── * 2026-10-22 Owner「跳彈出視窗時背景變那樣的霧好像有點不高級」:遮罩不要整片霧（原 :3968 的 blur(10px)+淡咖啡 .42）， * 改成不模糊的深色暗化（中央略亮、四角略暗），彈窗卡加一圈細金邊與深陰影讓卡浮起來。 * 電腦版（≥768）順便套手機那套整理:拿掉「其他方式登入」字、三顆社群鈕同排、驗證碼圖放輸入框右邊（原本三顆 2+1 排）。 * 只加不改;還原就是拿掉這一段。 * ─────────────────────────────────────────────────────────────── */ #authModal.authModal{ background:radial-gradient(120% 90% at 50% 40%, rgba(12,9,5,.66) 0%, rgba(12,9,5,.86) 100%) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } #authModal.authModal .modal-box{ box-shadow:0 30px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(216,163,56,.35) !important; } @media (min-width:768px){ #authModal.authModal .modal-box .login-else-box span{ display:none !important; } #authModal.authModal .modal-box .login-else-box{ display:flex !important; gap:12px !important; align-items:center !important; justify-content:center !important; margin:16px 0 0 !important; padding:16px 0 0 !important; } #authModal.authModal .modal-box .login-else-box a{ flex:1 1 0 !important; min-width:0 !important; width:auto !important; min-height:48px !important; padding:8px 10px !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } #authModal.authModal .modal-box .login-else-box a img, #authModal.authModal .modal-box .login-else-box a svg{ height:32px !important; width:auto !important; } #authModal.authModal .modal-box #LoginForm{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; column-gap:10px !important; align-items:center; } #authModal.authModal .modal-box #LoginForm > *{ grid-column:1 / -1; } #authModal.authModal .modal-box #LoginForm #chknum{ grid-column:1 !important; display:block !important; width:100% !important; } #authModal.authModal .modal-box #LoginForm #chkImg.codeimg{ grid-column:2 !important; display:block !important; height:46px !important; width:auto !important; aspect-ratio:18/5; max-width:none !important; margin:0 0 8px !important; padding:2px !important; border:1px solid #e2cf9a; border-radius:8px; background:#fff; } #authModal.authModal .modal-box #LoginForm > a{ justify-self:center; } } /* 2026-10-22 Owner「留白處太多」:首頁 FAQ 最後一張卡到頁尾之間空 100px 多（#faq 的 padding-bottom 40 + .gr66frame 的 padding-bottom 64， * 後者是原本給自家版權列留的）。登入前現在接的是全站共用頁尾，自己留的那段拿掉;SEO 區塊最後一段只留 12px。 */ .gr-seo section:last-of-type{ padding-bottom:12px; } .gr66frame{ padding-bottom:0; } /* 2026-10-23 Owner「熱門分頁混排」:熱門 = 百家樂 × 電子精選 16 張混排（screens/Home.jsx 的 HOT_BAC / HOT_GAMES）， * 不分區、無標題，格線沿用 .card-grid。頁面原本一格到底太長 → 分頁內容固定高度、內部上下捲 * （開頁第四排露頭暗示可往下滑），右側金色細捲軸。桌機（≥1280 變四欄）頁面不長，維持整頁捲不設上限。 */ @media (max-width:1279.98px){ .gr66frame .shell .content{ max-height:640px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-right:6px; scrollbar-width:thin; scrollbar-color:#c9a254 rgba(0,0,0,.06); } .gr66frame .shell .content::-webkit-scrollbar{ width:4px } .gr66frame .shell .content::-webkit-scrollbar-track{ background:rgba(0,0,0,.06); border-radius:999px } .gr66frame .shell .content::-webkit-scrollbar-thumb{ background:#c9a254; border-radius:999px } } /* ─────────────────────────────────────────────────────────────── * 2026-10-23 Owner「底部都被切到」（登入後的大廳最後一排被底部列蓋住）: * 這支檔的 body{padding:0}（:1568 / :3478）把全站 body 的 padding-bottom（--bnav + 安全區 + 15px）蓋掉; * 登入前有 SiteFooter 用負 margin 自己鋪到底部列，登入後 SiteFooter 不畫、.gr66frame 的 padding-bottom * 又在上一段歸零 → 最後一排遊戲卡壓在底部列下面。只給登入後的框（Home.jsx 加的 .gr66frame--member）補回來， * 登入前維持 0。--bnav 是 base.css 定的（73px），沒有就退 73。 * ─────────────────────────────────────────────────────────────── */ .gr66frame.gr66frame--member{ padding-bottom:calc(var(--bnav, 73px) + env(safe-area-inset-bottom, 0px) + 15px) !important; } @media (min-width:992px){ .gr66frame.gr66frame--member{ padding-bottom:32px !important; } } /* 2026-10-23 Owner「這裡不能滑動」（登入後大廳，iPhone）:上面那段把分頁內容做成 max-height 640 的內捲盒， * 又加 overscroll-behavior:contain。手機上盒子頂端在 293px、底部列在 588px，盒子有一半壓在底部列與畫面外; * 手指放在卡片上只捲盒子、不會帶動整頁（contain 擋掉），最後幾排永遠露不出來 → 看起來就是「滑不動」。 * 手機（<768）改回整頁捲:盒子不限高、不內捲;平板到 1279 維持原本的內捲。實測整頁可捲 1186px、最後一排底在 576 < 底部列 588。 */ @media (max-width:767.98px){ .gr66frame .shell .content{ max-height:none; overflow:visible; overscroll-behavior:auto; padding-right:16px; } } /* 2026-10-23 Owner「小卡字樣有跑」:熱門分頁的機台縮圖是廠商的圖（雷神之錘、開心農場是 500×300 橫圖，圖上有字）， * 卡片手機 1:1、電腦 3:4 用 cover 會把圖裁掉、字被切半。API 來的縮圖（Home.jsx 加 art-fit）改 contain、深底補邊，字不裁; * 自家的館別卡（home-card-*，480×480 直人像）維持 cover 不變。 */ .gr66frame .game-card img.art.art-fit{ object-fit:contain; object-position:center; background:#140f08; } /* 2026-10-23 Owner「不一樣」:熱門分頁的「DG百家樂」比「DG真人」多一個字，390 寬的卡片名稱列只有 108px， * 名稱 54 + 間距 6 + 標籤 56 塞不下 → 上面那條 .tag{flex:0 1 auto;min-width:0} 讓標籤被壓扁、貼著名稱（名稱＋標籤擠在一起）。 * 手機改:名稱列左右內距 10→8、間距 4、標籤字 10px 內距 5 且不再被壓（flex:none）;真的塞不下就讓標籤換到第二行，不疊字。 */ @media (max-width:991px){ .gr66frame .game-card .name-bar{ padding-left:8px !important; padding-right:8px !important; gap:2px 4px !important; flex-wrap:wrap; } .gr66frame .game-card .name-bar .name{ flex:0 1 auto; min-width:0; } .gr66frame .game-card .name-bar .tag{ flex:none !important; font-size:10px !important; padding:2px 5px !important; } } /* 2026-10-23 註冊分頁的快速登入鈕改成「先註冊再綁」:被選到的那顆亮框（GrAuthModal SocialIcons 的 is-on） */ #authModal.authModal .login-else-box a.log-img.is-on{ outline:2px solid #8a5c06; outline-offset:1px; background:#faf3e0 !important; }