@media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1140px } }
body { margin-top: 55px; margin-bottom: 55px; font-size: 1rem; font-family: 'Microsoft JhengHei'; }
.h1 { text-align: center; padding: 1rem; }
.h2 { font-size: 1.5rem; }
.h3 { color: #933; font-size: 1.25rem; font-weight: 700; }
.cursor-pointer { cursor: pointer; }
ol.breadcrumb { background-color: #fff; margin-bottom: 0; }
ol.breadcrumb > li > a { text-decoration: none; }
.gotop { display: none; position: fixed; z-index: 9999; right: 20px; bottom: 60px; opacity: .8; border-radius: 50%; }
.cartfixed { position: fixed; z-index: 1040; right: 10px; bottom: 60px; opacity: .9; border-radius: 50%; }
.purple { color: #a370f7; }
.modal { padding-right: 0px !important; }
/* btn */
.btn-purple { color: #fff; background-color: #a370f7; border-color: #a8f; }
.btn-purple:hover { color: #fff!important; background-color: #6f42c1!important; }
.btn-outline-purple { border-color: #a8f; }
.btn-outline-purple:hover { color: #fff!important; background-color: #6f42c1!important; }
.divbtnp .btn { font-size: 1.25rem; padding: 2px 6px; margin: .25rem; border-color: #a8f; }
.divbtnp span:hover { color: #fff; background-color: #a8f; }
/* card */
.cardimg { height: 200px; overflow: hidden; }
.cardimg img { width: 100%; }
/* edit */
.btn-gv { font-size: 12px; padding: 2px 8px; white-space: nowrap; }
.img-gv { max-height: 80px; }
.img-gvb { max-height: 130px; }
.w50px { width: 50px; min-width: 50px; }
.w80px { width: 80px; min-width: 80px; }
.w85px { width: 85px; min-width: 85px; }
.w100px { width: 100px; min-width: 100px; }
.w120px { width: 120px; min-width: 120px; }
.w150px { width: 150px; min-width: 150px; }
.w180px { width: 180px; min-width: 180px; }
.w200px { width: 200px; min-width: 200px; }
.maw100 { max-width: 100px; overflow: hidden; }
.h50 { height: 50px; max-height: 50px; overflow: hidden; }
.h60 { height: 60px; max-height: 60px; overflow: hidden; }
.mah80 { max-height: 80px; overflow: hidden; }
.mah100 { max-height: 100px; overflow: hidden; }
.mah130 { max-height: 130px; overflow: hidden; }
.mah180 { max-height: 180px; overflow: hidden; }
/* Form */
.form-check { padding-top: .25rem; padding-left: 0; }
.form-check input[type='checkbox'], .form-check input[type='radio'] { width: 1rem; height: 1rem; margin-left: .5rem;}
.form-check label { vertical-align: middle; padding-left: .25rem; padding-right: .25rem; margin-top: -.5rem; }
.form-control::placeholder { color: silver; opacity: 1; }
input:focus::placeholder { color: transparent; }
/* mobile bottom bar */
.mbar { padding-top: .5rem; padding-bottom: .25rem; border-top: 1px solid silver; line-height: 1rem; }
.mbar a { font-size: .9em; color: #6c757d; text-decoration: none; }
/* Navbar Scroll */
.nav-scroller { /*position: relative; z-index: 2;*/ height: 2.5rem; overflow-y: hidden; }
.nav-scroller .nav { /*display: flex; display: -ms-flexbox; color: rgba(255, 255, 255, .75); text-align: center; width: max-content;*/
    white-space: nowrap; flex-wrap: nowrap; -ms-flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    margin-top: -4px; padding-bottom: 1rem; overflow-x: auto; }
.nav-underline .nav-link { padding-top: .75rem; padding-bottom: .75rem; font-size: .875rem; color: #6c757d; }
.nav-underline .nav-link:hover { color: #007bff; }
.nav-underline .active { font-weight: 500; color: #343a40; }
/* NavBar */
.navbar { background-color: #eee; border-bottom: 2px solid #a8f; padding: 0 1rem; opacity: 0.95;
          -webkit-box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); box-shadow: 0 .25rem .75rem rgba(0, 0, 255, .05); }
.navbar-brand img { max-height: 40px; }
.navbar ul li { padding-top: 10px; }
.navbar-nav > li:hover { background-color: #a8f; color: #fff; }
.navbar-nav > li:hover > a { color: #fff; }
.navbar-nav > .nav-item { padding: 4px 0; }
.navbar-nav > .nav-item > .nav-link { color: rgba(0,0,0,.7); }
.navbar-nav > .nav-item > .nav-link:hover { color: #eee; }
.navbar-toggler { /*margin: 6px;*/ }
li.dropdown:hover > .dropdown-menu { display: block; }
.dropdown-menu { margin-top: 0; }
.dropdown-item:hover { color: #fff; background-color: #a8f; }
.dropdown-item:active { background-color: #86f; }
/* form-floating */
.form-floating > .form-control, .form-floating > .form-control-plaintext { padding: .375rem .75rem; }
.form-floating > .form-select { padding: .375rem 2.25rem .375rem .75rem; }
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select { height: auto; min-height: auto; line-height: 1.5; }
.form-floating > label { padding: 6px .75rem; }
.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-1rem) translateX(.65rem); background-color: white; height: auto; padding-top: 0; padding-bottom: 0; color: #0d6efd; }
.form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { padding: .375rem .75rem; }