/*bootstrap*/
html , body {
    height: 100%;
	font-smooth: auto;
    -webkit-font-smoothing: antialiased;
}
body {
    margin: 0;	
}
a {
    text-decoration: none;    
    transition: color .15s ease-in-out, background-color .15s ease-in-out, opacity .15s ease-in-out;
}
a:hover {
    text-decoration: none;
}

.form-control {
    height: auto;
    padding: 6px 10px;
    font-size: inherit;
    font-weight: normal;
    line-height: normal;
    color: #595757;
    border: 1px solid #DCDDDD;
    border-radius: 4px;
}
.form-control:focus {
    color: #595757;
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(87,172,172,.25);
}
.form-control::-webkit-input-placeholder {
    color: #9fa0a0;
    opacity: .6;
}
.form-control::-moz-placeholder {
    color: #9fa0a0;
    opacity: .6;
}
.form-control:-ms-input-placeholder {
    color: #9fa0a0;
    opacity: .6;
}
.form-control::-ms-input-placeholder {
    color: #9fa0a0;
    opacity: .6;
}
.form-control::placeholder {    
    color: #9fa0a0;
    opacity: .6;
}
select.form-control:focus::-ms-value {
    color: inherit;
}
.valid-feedback {
    color: #28a745;
}
.valid-tooltip {
    padding: 8px;
    margin-top: 4px;
    font-size: inherit;
    line-height: normal;
    color: #fff;
    background-color: rgba(40,167,69,.8);
    border-radius: 4px
}
.form-control.is-valid, .was-validated .form-control:valid {
    border-color:#28a745;
    background-position:center right 8px;    
    /*background-image: none;*/
}
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
    padding-right: 20px;
}
.invalid-feedback {
    color: #e60012;
}
.invalid-tooltip {
    padding: 8px;
    margin-top: 4px;
    font-size: inherit;
    line-height: normal;
    background-color: rgba(230,0,18,.8);
    border-radius: 4px
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color:#e60012;
    background-position:center right 8px;    
    /*background-image: none;*/
}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    border-color: #e60012;
    box-shadow: 0 0 0 3px rgba(230,0,18,.25);
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: 20px;
}
.custom-file-input.is-invalid~.custom-file-label, .was-validated .custom-file-input:invalid~.custom-file-label {
border-color:#e60012
}
.btn {
    font-weight: normal;    
    white-space: nowrap;
    /*
    color: inherit;
    background-color: transparent;
    border: 1px solid transparent;
    */
    font-family: "微軟正黑體"!important;
    padding: 6px 10px;
    font-size: inherit;
    line-height: normal;
    border-radius: 4px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:hover {
    text-decoration: none
}
.btn:focus {
    text-decoration: none
}
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0rem rgba(0,0,0,.0)
}
.btn-group-lg>.btn, .btn-lg {
    padding: 8px 16px;
    font-size: 20px;
    line-height: 1.5;
    border-radius: 4px;
}
.btn-outline-secondary {
    color: #9fa0a0;
    border-color: #DCDDDD;
}
@media (hover: hover) {
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #e60012;
    border-color: #e60012;
}
}
.btn-outline-secondary.focus, .btn-outline-secondary:focus {
    box-shadow: 0 0 0 0rem rgba(0,0,0,0);
}
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #e60012;
    border-color: #e60012;
}
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-secondary.dropdown-toggle:focus {
    color: #fff;
    background-color: #e60012;
    border-color: #e60012;
    box-shadow: 0 0 0 0rem rgba(0,0,0,0);
}
.fade {
    transition: opacity .15s linear;
}
.collapsing.fast {
    transition: height .15s ease;
}
.collapsing.fasts {
    transition: height 0s ease;
}
.custom-file-input:lang(en)~.custom-file-label::after {
    content: "檔案上傳";
}
.custom-file-label {
    color: inherit;
    border: 1px solid #DCDDDD;
}
.custom-file-label::after {
    content: "檔案上傳";
    border-left: 1px solid #DCDDDD;
}
.nav-pills .nav-link {
    border-radius: 0px;
    display: block;
    padding: 0px 0px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: inherit;
    background-color: inherit;
}
.breadcrumb {
    padding: 10px 0px;
    margin-bottom: 0px;
    background-color: transparent;
}
.breadcrumb a {
    cursor: pointer;
}
@media (hover: hover) {
.breadcrumb a:hover {
    color: #e60012;
}
}
.breadcrumb-box {
    overflow: hidden;
    
    /*iOS觸控滾動*/
    -webkit-overflow-scrolling: touch;
    
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
@media only screen and (max-device-width: 1024px) {
.breadcrumb-box {
    overflow-x: auto;
}
}
.breadcrumb-item+.breadcrumb-item::before {
    color: #9fa0a0;
}
.breadcrumb-item.active {
    color: #9fa0a0
}
.page-link {
    line-height: normal;
    color: inherit;
    border: 1px solid #EFEFEF;
    cursor: pointer;
}
.page-link:hover {
    color: #e60012;
    background-color: #EFEFEF;
    border-color: #EFEFEF;
}
.page-link:focus {
    box-shadow: 0 0 0 0 rgba(0,0,0,0)
}
.page-link-t {
    position: relative;
    display: block;
    padding: 8px 12px;
}
.page-link-btn {
    position: relative;
    display: block;
    padding: 8px 12px;
    border: 1px solid #EFEFEF;
    border-radius: 4px;
}
.page-link.ellipsis {
    border: 0px solid #EFEFEF;
    border-left: 1px solid #EFEFEF;
}
.page-item.active .page-link {
    background-color: #e60012;
    border-color: #e60012;
}
.page-item.disabled .page-link {
    color: #9fa0a0;
    pointer-events: none;
    border-color: #EFEFEF;
}
.badge-danger {
    background-color: #e60012;
}
a.badge-danger:focus, a.badge-danger:hover {
    background-color: #e60012;
}
a.badge-danger.focus, a.badge-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(230,0,18,.25);
}
.alert {
    position: relative;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid transparent;
    border-radius: 0px;
}
.alert-dismissible .close {
    padding: 10px 20px;
}
.close {
    font-family: inherit;
    font-weight: 100;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .15s ease-in-out;
}
@media (hover: hover) {
.close:hover {
    opacity: .8;
}
}
.close:focus {
    opacity: .8;
    outline: 0;
}
.modal-dialog {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.modal.fade .modal-dialog {
    transition: -webkit-transform .2s linear;
    transition: transform .2s linear;
    transition: transform .2s linear, -webkit-transform .2s linear;
    will-change: transform;
}
.modal.show .modal-dialog {
    will-change: transform;
}
.modal-content {
    border: 1px solid #EFEFEF;
    border-radius: 4px;
}
.modal-header {
    display: table;
    
    width: 100%;
    text-align: left;
    padding: 0px 10px;
    border-bottom: 1px solid #EFEFEF;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 46px;
	z-index: 2;
}
.modal-header .close {
    font-size: 50px;
    font-weight: 100;
    color: #9fa0a0;
    position: absolute;
    top :-7px;
    right: 4px;
    width: 40px;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0;
    
    overflow-x: hidden;
    overflow-y: auto;
	backface-visibility: hidden;
    
    /*iOS觸控滾動*/
    -webkit-overflow-scrolling: touch; 
    z-index: 1;
}
.modal-body-iframe {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0;
    
	backface-visibility: hidden;
    
    /*iOS觸控滾動*/
    -webkit-overflow-scrolling: touch; 
    z-index: 1;
}
.modal-footer {
    display: table;
    
    width: 100%;
    text-align: center;
    padding: 0px 10px;
    border-top: 1px solid #e9ecef;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;    
    height: 46px;
	z-index: 2;
}
.modal-footer>:not(:first-child) {
    margin-left: 0px;
}
.modal-footer>:not(:last-child) {
    margin-right: 0px;
}
@media (min-width:1101px) {
.modal-dialog {    
	max-width: 1100px;
}
    
.modal-dialog-centered {
	min-height:calc(100% - (28px * 2))
}
}
@media (min-width:681px) {
.modal-dialog {
	max-width: 1100px;
    margin: 0 auto;
}
}
.tooltip {
    font-family: "微軟正黑體";
}

.popover {
    font-family: "微軟正黑體";
    border: 1px solid #DCDDDD;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    
    position: fixed!important;
}
.col-md-12 .popover {
    position: absolute!important;
}
.popover-header {
    font-weight: 700;
    background-color: #fff;
    border-bottom: 1px solid #EFEFEF;
}
.popover-header::before {
    content: "\f05a";
    color: #e60012;
    margin-right: 4px;
    font-family: 'Font Awesome\ 5 Free';
}
.popover-body {
    font-size: 14px;
    color: #9fa0a0;
}
@media (max-width: 680px) {
.popover-header {
    font-size: 14px;
}
.popover-body {
    font-size: 13px;
}
}
.border {
    border: 0px solid #dee2e6!important;
}
.fixed-top {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    will-change: transform;
    transition: transform .3s ease-out;
}
.fixed-bottom {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    will-change: transform;
    transition: transform .3s ease-out;
}
.fixed-right {
    position: fixed;
    right: 0;
    z-index: 1030;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    will-change: transform;
    transition: transform .3s ease-out;
}
.text-monospace {
    font-family: "微軟正黑體"!important;
}


.form-invalid-box .invalid-tooltip {
    position: relative;
}
.form-box .invalid-tooltip {
    position: relative;
}
.form-box.show .invalid-tooltip {
    display: block;
}
.was-validated .input-invalid:invalid~.invalid-tooltip {
    display:block
}
.form-label-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 8px;
}
.form-label-box > label {
    margin-bottom: 0px!important;
    padding-left: 4px;
}
.form-label-box .form-check-input {
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
}
.custom-control-input {
    position: relative;
    z-index: -1;
    opacity: 0;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #595757;
    border: #595757 solid 1px;
}
.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(0,0,0,.0);
}
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #adb5bd
}
.custom-control-label::before {
    position: absolute;
    top: 9px;
    left: -17px;
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}
.custom-control-label::after {
    position: absolute;
    top: 9px;
    left: -17px;
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    background: no-repeat 50%/50% 50%;
}
/*bootstrap*/

/*bootstrap toast*/
.bootstrap-toast {
    max-width: 350px;
    overflow: hidden;
    font-size: 14px;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0
}
.bootstrap-toast:not(:last-child) {
    margin-bottom: 12px;
}
.bootstrap-toast.showing {
    opacity: 1
}
.bootstrap-toast.show {
    display: block;
    opacity: 1
}
.bootstrap-toast.hide {
    display: none
}
.bootstrap-toast-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 4px 12px;
    color: #6c757d;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,.05)
}
.bootstrap-toast-body {
    padding: 12px;
}
/*bootstrap toast*/

/*select 箭頭隱藏*/
select { 
    -webkit-appearance: none; /*Chrome*/
    -moz-appearance: none; /*FF*/
    appearance: none;/*CSS3*/
}
select::-ms-expand {
    display: none; /*IE*/
}
select.form-control {
    /*color: rgba(159,160,160,0.6);*/
    padding-right: 24px;
    background: url("select-arrow.png") #fff no-repeat center right 8px;
    background-size: 12px;
}
/*select 箭頭隱藏*/

/*------------- 通用 -------------*/

/*表單*/
.form-control.valid {
    border-color: #28a745;
    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='%2328a745' 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: center right 8px;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.valid~.invalid-tooltip {
    display: none!important;
}
.form-control.valid:focus {
border-color: #28a745;
box-shadow:0 0 0 .2rem rgba(40,167,69,.25)
}
.form-control.invalid {
    border-color: #e60012;
    padding-right: calc(1.5em + .75rem);
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 8px;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.invalid:focus {
border-color: #e60012;
box-shadow: 0 0 0 .2rem rgba(230,0,18,.25)
}
/*表單*/

/*區塊*/
.d-flex-center-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
.d-flex-column-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}
.d-flex-header-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: auto;
    width: 100%;
}
.d-flex-body-box {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -ms-flex-negative: 0!important;
    flex-shrink: 0!important;
    width: 100%;
}
.d-flex-footer-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: auto;
    width: 100%;
}

/*滾動*/
.overflow-hide {
    /*
    overflow: hidden;
    padding-right: 0!important;
	*/
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-y: scroll!important;
    /*overflow-y: hidden!important;*/
    overflow-x: hidden!important;
}
@media only screen and (max-device-width: 1024px) {
.overflow-hide-device {
    overflow: hidden;
}
}

/*preloader*/
.preloader {
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFF;
    z-index: 99999;
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}
.loaded-c {
/*
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -18px 0px 0px -18px;
*/
}

/*modal 動態視窗*/
.modal-body-n {
    -ms-user-select: none;
    user-select: none;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    backface-visibility: hidden;
    /*iOS觸控滾動*/
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}
.modal-dialog.c {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;/*
    -webkit-overflow-scrolling: touch; 
    z-index: 1;
    */
}
@media (min-width:1101px) {
.modal-dialog.c {
    max-width: 1100px;
}
}
.modal .modal-dialog.modal-top {
    top: 0;
}
.modal .modal-dialog.modal-left {
    left: 0;
}
.modal .modal-dialog.modal-right {
    right: 0;
}
.modal .modal-dialog.modal-bottom {
    bottom: 0;
}
.modal .modal-dialog.modal-top-left {
    top: 10px;
    left: 10px;
}
.modal .modal-dialog.modal-top-right {
    top: 10px;
    right: 10px;
}
.modal .modal-dialog.modal-bottom-left {
    bottom: 10px;
    left: 10px;
}
.modal .modal-dialog.modal-bottom-right {
    bottom: 10px;
    right: 10px;
}
.modal.fade.top:not(.show) .modal-dialog {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    will-change: transform;
}
.modal.fade.left:not(.show) .modal-dialog {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    will-change: transform;
}
.modal.fade.right:not(.show) .modal-dialog {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    will-change: transform;
}
.modal.fade.bottom:not(.show) .modal-dialog {
    -webkit-transform: translate(0, 25%);
    transform: translate(0, 25%);
    will-change: transform;
}
.modal .modal-side {
    width: auto;
    margin: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.modal .modal-full-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
}
.modal .modal-full-height.modal-top {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    bottom: auto;
}
.modal .modal-full-height.modal-bottom {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    top: auto;
}
.modal .modal-full-height.navModal {
    width: 268px;
    top: 0;
    left: 0;
}

.modal .modal-full-height.normalModal {
    width: 860px; /*max-width 不支持IE*/
    height: 95%;
    max-height: max-content;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.modal .modal-full-height.shareModal {
    width: 200px;
    height: 298px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.modal .modal-full-height.qrcodeModal {
    width: 200px;
    height: 268px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#iframeModal .modal-full-height.normalModal {
    max-height: inherit;
}
@media (max-width: 930px) {
.modal .modal-full-height.normalModal {
    width: 95%;
    height: 95%;
}
}

@media (max-width: 680px) {
.modal .modal-full-height.navModal {
    /*width: 100%;*/
}
}
.modal .modal-fluid, .modal .modal-frame {
    width: 100%;
    max-width: 100%;
}
.modal .modal-frame {
    position: absolute;
}
.modal .modal-frame.modal-bottom {
    bottom: 0;
}
body.scrollable {
/*overflow-y: auto*/
}
.modal.modal-scrolling {
    position: relative;
}
.modal.modal-scrolling .modal-dialog {
    position: fixed;
    z-index: 1051;
}
.modal.modal-content-clickable {
    padding-right: 0!important;
    top: auto;
    bottom: 0;
}
.modal.modal-content-clickable .modal-dialog {
    position: relative;
}
.modal .modal-fluid .modal-content {
    width: 100%;
}
.modal-content.navModal {
    border: 0;
    border-radius: 0;
}

/*iframe box*/
.embed-responsive-iframe {
    /*iOS*/
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    /*iOS*/
    
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    /*overflow: hidden*/
}
.embed-responsive-iframe::before {
    display: block;
    content: ""
}
.embed-responsive-iframe .embed-responsive-item, .embed-responsive-iframe embed, .embed-responsive-iframe iframe, .embed-responsive-iframe object, .embed-responsive-iframe video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

/*scrollbar滾動樣式*/
.scrollbar-black-show::-webkit-scrollbar {
    width: 6px;
	height: 6px;
}
.scrollbar-black-show::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 background-color: #EFEFEF;
 border-radius: 0px;
 transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.scrollbar-black-show::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 background-color: #3E3A39;
 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 (min-width: 769px) {
.scrollbar-black::-webkit-scrollbar {
    width: 6px;
}
.scrollbar-black::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 background-color: #EFEFEF;
 border-radius: 0px;
 transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.scrollbar-black::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 background-color: #3E3A39;
 transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
}

/*返回上方*/
.scrollup {
    padding: 15px 16px;
    text-align: center;
    color: #fff;
    position: fixed;
    right: 2px;
    bottom: 0px;
    display: none;
    background-color: #3E3A39;
    opacity: .6;
    border-radius: 4px;
    z-index: 1001;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px);
    will-change: transform;
    transition: transform .3s ease-out;
}

/*背景圖片*/
.image-size-contain {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    border-radius: 0px;
    object-fit: contain;
    object-position: center;
}
.image-size-contain.none {
    background-image: url(../images/object_none.jpg)!important;
}
.image-size-contain.loading {
    background-image: url(AjaxLoader.gif)!important;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.image-size-contain.lazy {
    background-image: none!important;
}
.image-size-cover {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 0px;
    object-fit: cover;
    object-position: center;
}
.image-size-cover.radius4 {
    border-radius: 4px;
}
.image-size-cover.none {
    background-image: url(../images/object_none.jpg)!important;
    background-position: 50% 50%;
}
.image-size-cover.loading {
    background-image: url(AjaxLoader.gif)!important;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.image-size-cover.lazy {
    background-image: none!important;
}

/*顏色*/
.color-1 {
    color: #e60012; /*R230 G0 B18 C0 M100% Y100% K0*/
}
.color-2 {
    color: #ffe100; /*R255 G255 B0 C0 M10% Y100% K0*/
}
.color-3, .color-3:link, .color-3:hover, .color-3:active, .color-3:active, .color-3:focus {
    color: #FFF!important;
}
.color-4 {
    color: #3E3A39; /*R62 G58 B57 K90%*/
}
.color-5 {
    color: #9fa0a0; /*R159 G160 B160 K50%*/
}
.color-6, .color-6:link, .color-6:hover, .color-6:active, .color-6:active, .color-6:focus {
    color: #595757; /*R89 G87 B87 K80%*/
}
.color-7 {
    color: #B5B5B6; /*R181 G181 B182 K40%*/
}
.color-8 {
    color: #F8B62D; /*R181 G181 B182 K40%*/
}
.color-9 {
    color: #3a84df; 
}
.color-10, .open-color {
    color: #28a745;
    /*color: #00c43e;*/
}

/*背景顏色*/
.bg-c1 {
    background-color: #e60012;
}
.bg-c2 {
    background-color: #3E3A39;
}
.bg-c3 {
    background-color: #231815;
}
.bg-c4 {
    background-color: #EFEFEF;
}
.bg-c5 {
    background-color: #FBFBFB;
}
.bg-c6 {
    background-color: #FFFFFF;
}
.bg-c7 {
    background-color: #ffe100;
}
.bg-c8 {
    background-color: #F39800;
}
.bg-c9 {
    background-color: #F7F8F8;
}
.bg-c10 {
    background-color: #DCDDDD;
}
.bg-c11 {
    background-color: #28a745;
}
.bg-c12 {
    background-color: #1CADB3;
}
.bg-c13 {
    background-color: #95bee8;
}
.bg-c14 {
    background-color: #9fa0a0;
}
.bg-c15 {
    background-color: #efb400;
}
.bg-c16 {
	background-color: rgba(245, 245, 245, 1);
}


/*字體大小*/
.font-10 {
    font-size: 10px;
}
.font-11 {
    font-size: 11px;
}
.font-12 {
    font-size: 12px;
}
.font-13 {
    font-size: 13px;
}
.font-14 {
    font-size: 14px;
}
.font-15 {
    font-size: 15px;
}
.font-15t {
    font-size: 15px;
}
.font-16 {
    font-size: 16px;
}
.font-16t {
    font-size: 16px;
}
.font-18 {
    font-size: 18px;
}
.font-18t {
    font-size: 18px;
}
.font-20 {
    font-size: 20px;
}
.font-20t {
    font-size: 20px;
}
.font-20-list {
    font-size: 20px;
}
.font-22t {
    font-size: 22px;
}
.font-24t {
    font-size: 24px;
}
.font-24 {
    font-size: 24px;
}
.font-28 {
    font-size: 28px;
}
.font-28t {
    font-size: 28px;
}
.font-32 {
    font-size: 32px;
}
.font-36 {
    font-size: 36px;
}
.font-44 {
    font-size: 44px;
}
.font-48 {
    font-size: 48px;
}
.font-60 {
    font-size: 60px;
}
.font-60t {
    font-size: 60px;
}

@media (min-width: 321px) and (max-width: 768px) {
.font-10 {
    font-size: 10px;
}
.font-11 {
    font-size: 11px;
}
.font-12 {
    font-size: 12px;
}
.font-13 {
    font-size: 13px;
}
.font-14 {
    font-size: 13px;
}
.font-15 {
    font-size: 14px;
}
.font-15t {
    font-size: 13px;
}
.font-16 {
    font-size: 15px;
}
.font-18 {
    font-size: 16px;
}
.font-20 {
    font-size: 18px;
}
.font-20-list {
    font-size: 16px;
}
.font-24 {
    font-size: 20px;
}
.font-28 {
    font-size: 24px;
}
.font-32 {
    font-size: 28px;
}
.font-36 {
    font-size: 32px;
}
.font-44 {
    font-size: 26px;
}
.font-60 {
    font-size: 40px;
}
}
@media (max-width: 320px) {
.font-10 {
    font-size: 10px;
}
.font-11 {
    font-size: 11px;
}
.font-12 {
    font-size: 11px;
}
.font-13 {
    font-size: 12px;
}
.font-14 {
    font-size: 12px;
}
.font-15 {
    font-size: 13px;
}
.font-15t {
    font-size: 12px;
}
.font-16 {
    font-size: 13px;
}
.font-18 {
    font-size: 16px;
}
.font-18t {
    font-size: 17px;
}
.font-20 {
    font-size: 18px;
}
.font-20-list {
    font-size: 16px;
}
.font-24 {
    font-size: 20px;
}
.font-28 {
    font-size: 24px;
}
.font-32 {
    font-size: 24px;
}
.font-36 {
    font-size: 30px;
}
.font-44 {
    font-size: 24px;
}
.font-60 {
    font-size: 36px;
}
}

/*按鈕 button*/
.s-btn-r {
    color: #fff;
    background-color: #e60012;
    cursor: pointer;
}
.s-btn-r:hover {
    box-shadow: 0 0 0 2px rgba(230,0,18,.5)
}
.s-btn-g {
    color: #fff;
    background-color: #898989;
    cursor: pointer;
}
.s-btn-g:hover {
    box-shadow: 0 0 0 2px rgba(137,137,137,.5)
}
.s-btn-green {
    color: #fff;
    background-color: #28a745;
    cursor: pointer;
}
.s-btn-green:hover {
    box-shadow: 0 0 0 2px rgba(40,167,69,.5)
}
.s-btn-orange {
    color: #fff;
    background-color: #efb400;
    cursor: pointer;
}
.s-btn-orange:hover {
    box-shadow: 0 0 0 2px rgba(239,180,0,.5)
}
.s-btn-b {
    color: #fff;
    background-color: #3E3A39;
    cursor: pointer;
}
.s-btn-b:hover {
    box-shadow: 0 0 0 2px rgba(62,58,57,.5)
}
.s-btn-blue {
    color: #fff;
    background-color: rgba(13,80,213,1.00);
    cursor: pointer;
}
.s-btn-blue:hover {
    box-shadow: 0 0 0 2px rgba(13,80,213,.5)
}
.s-btn-w {
    color: #595757;
    background-color: #fff;
    border: 1px solid #DCDDDD;
    cursor: pointer;
}
.s-btn-w:hover {
    box-shadow: 0 0 0 2px rgba(159,160,160,.2)
}
.s-btn-w.active {
    color: #fff;
    background-color: #e60012;
    border: 1px solid #e60012;
    cursor: pointer;
}
.s-btn-w.active:hover {
    box-shadow: 0 0 0 2px rgba(230,0,18,.5)
}
.ss-btn-w {
    color: #9fa0a0;
    background-color: #fff;
    border: 1px solid #9fa0a0;
    cursor: pointer;
}
.ss-btn-w:hover {
    color: #fff;
    background-color: #e60012;
    border: 1px solid #e60012;
}
.s-btn-outline-c {
    border: 1px solid #DCDDDD;
    border-left: 0px;
    border-radius: 0px 4px 4px 0px;
    color: #595757;
    background-color: #fff;
    cursor: pointer;
}
.s-btn-outline-c:hover {
    color: #3E3A39;
}

/*form 表單*/
.form-control.w1 {
    max-width: 160px;
}
.form-control.w2 {
    max-width: 240px;
}
.form-control.w3 {
    max-width: 100px;
}
.form-control.w4 {
    max-width: 104px;
}
.form-control.w5 {
    max-width: 360px;
}
.form-control.w6 {
    max-width: 100px;
}
.form-control.w7 {
    max-width: 68px;
}
.form-control.verification {
    max-width: 100px;
}
@media (max-width: 768px) {
.form-control.w1 {
    max-width: 100%;
}
.form-control.w2 {
    max-width: 100%;
}
.form-control.w3 {
    max-width: 100%;
}
.form-control.w4 {
    max-width: 100%;
}
.form-control.w5 {
    max-width: 100%;
}
}

/*collapse 折疊*/
.collapse {    
}
.collapse-body .collapse-box:not(:first-of-type):not(:last-of-type) {
	border-top: 0;
	border-bottom: 0;
	border-radius: 0;
}
.collapse-body .collapse-box:first-of-type {
	border-top: 0;
	border-bottom: 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.collapse-body .collapse-box:last-of-type {
	border-top: 0;
	border-bottom: 0;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}    
.collapse-body .collapse-box:first-of-type .collapse-header:first-child {    
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.collapse-body .collapse-box:last-of-type .collapse-header {
	border-bottom-left-radius: 4px; 
	border-bottom-right-radius: 4px;
}
.collapse-body .collapse-box:last-of-type .collapse-content {
	border-bottom-left-radius: 4px; 
	border-bottom-right-radius: 4px;
}    
.collapse-box {
	position: relative;
    /*
	display: -ms-flexbox;
	display: flex;
    */
	-ms-flex-direction: column;
	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);
}
.collapse-header {    
	text-align: center;
	padding: 12px 12px;
	background-color: rgba(0,0,0,.03);
	border-bottom: 1px solid rgba(0,0,0,.125);
    cursor: pointer;
    
    border-top: 1px solid rgba(0,0,0,.125);
    margin-bottom: -1px;
}
.collapse-header.left-b {    
	text-align: left;
    padding: 12px 40px 12px 12px;
    font-weight: 700!important;
}
.collapse-content {
    /*
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
    */
	padding: 16px 16px;
	/*border-bottom: 1px solid rgba(0,0,0,.125);*/
}
/*
.collapse-content-b1 {
	border-bottom: 1px solid rgba(0,0,0,.125);
}
*/
.collapse-box:last-child .collapse-content {
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.collapse .show {
	display: block
}
.collapse-btn {
	color: #595757;
	background-color: transparent;     
    border: 0;
	display: inline-block;
	/*white-space: nowrap;*/
	vertical-align: middle;
}
.collapse-btn:focus {
	outline: 0;
}
.collapse-body .collapse-box .collapse-header .fa-angle-down {    
    position: absolute;
    top: 18px;
    right: 20px;
}    
.collapse-body .collapse-box .collapse-header:not(.collapsed) .rotate-icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.collapse .active .rotate-icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 150ms ease-in 0s;
    -o-transition: all 150ms ease-in 0s;
    transition: all 150ms ease-in 0s;
}

/*text-size 字體大小*/
.text-size-main>div {
    margin-right: 8px;
}
.text-size-main>div:last-child {
    margin-right: 0px;
}
.table-form.handbook.show .text-size-main {
    -ms-flex-pack: center!important;
    justify-content: center!important
}
.text-size-box {    
    padding: 6px 8px;
    border: 1px solid #C9CACA;
    border-radius: 4px;
    background-color: #DCDDDD;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.text-size-box.active {

    background-color: #fff;
}
@media (max-width: 680px) {
.text-size-main {
    /*
    -ms-flex-pack: center!important;
    justify-content: center!important
    */
}
}
.text-small, .text-mid, .text-big {
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

/*其他通用*/

.hidden-arrows input::-webkit-outer-spin-button,
.hidden-arrows input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hidden-arrows input[type=number] {
  -moz-appearance:textfield;
}

.border-radius-4 {
	border-radius: 4px;
}
.pointer-events-none {
    pointer-events: none!important;
}

@media (max-width: 680px) {
.div-mb16-m>div, .div-mb16-m>a {
    margin-bottom: 16px;
}
.div-mb16-m>div:last-child, .div-mb16-m>a:last-child {
    margin-bottom: 0px;
}
.div-mb8-m>div, .div-mb8-m>a {
    margin-bottom: 8px;
}
.div-mb8-m>div:last-child, .div-mb8-m>a:last-child {
    margin-bottom: 0px;
}
}

.div-my4>div {
	margin-top: 4px;
	margin-bottom: 4px;
}

.div-mb16>div, .div-mb16>a {
    margin-bottom: 16px;
}
.div-mb16>div:last-child, .div-mb16>a:last-child {
    margin-bottom: 0px;
}
.div-mb8>div, .div-mb8>a {
    margin-bottom: 8px;
}
.div-mb8>div:last-child, .div-mb8>a:last-child {
    margin-bottom: 0px;
}
.div-mb4>div, .div-mb4>a {
    margin-bottom: 4px;
}
.div-mb4>div:last-child, .div-mb4>a:last-child {
    margin-bottom: 0px;
}
.div-mr8>div, .div-mr8>a {
    margin-right: 8px;
}
.div-mr8>div:last-child, .div-mr8>a:last-child {
    margin-right: 0px;
}
.div-ml8>div, .div-ml8>a {
    margin-left: 8px;
}
.div-ml8>div:last-child, .div-ml8>a:last-child {
    margin-left: 0px;
}
.div-mr16>div, .div-mr16>a {
    margin-right: 16px;
}
.div-mr16>div:last-child, .div-mr16>a:last-child {
    margin-right: 0px;
}
.div-px8>div, .div-px8>a {
	padding-left: 8px;
	padding-right: 8px;
}
.div-px4>div, .div-px4>a {
	padding-left: 4px;
	padding-right: 4px;
}
@media (max-width: 680px) {
.div-mr16.mobile>div, .div-mr16.mobile>a {
    margin-right: 0px;
}
.div-px8>div, .div-px8>a {
	padding-left: 0px;
	padding-right: 0px;
}
.div-px4>div, .div-px4>a {
	padding-left: 0px;
	padding-right: 0px;
}
}
.div-mx4>div, .div-mx4>a {
	margin-left: 4px;
	margin-right: 4px;
}
.div-mx8>div, .div-mx8>a {
	margin-left: 8px;
	margin-right: 8px;
}
.div-inline-block>div, .div-inline-block>a {
    display: inline-block;
}
.li-mb16>li {
    margin-bottom: 16px;
}
.li-mb16>li:last-child {
    margin-bottom: 0px;
}
.li-mb8>li {
    margin-bottom: 8px;
}
.li-mb8>li:last-child {
    margin-bottom: 0px;
}
.li-mb4>li {
    margin-bottom: 4px;
}
.li-mb4>li:last-child {
    margin-bottom: 0px;
}
.lh24 {
    line-height: 24px;
}
.my12 {
    margin-top: 12px;
    margin-bottom: 12px;
}
.margin-center {
    margin-left: auto;
    margin-right: auto;
}
.border-1 {
    border: 1px solid #DCDDDD;
}
.radius4 {
    border-radius: 4px;
}
.box-shadow-inset {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
}
.cursor {
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text-line-through {
    text-decoration: line-through;
}
.text-word-break {
    word-break: break-all;
}
.box-shadow {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
}
.box-shadow-b {
    box-shadow: 0 -2px 2px rgba(0, 0, 0, .1);
}
.border-t1 {
    border-top: 1px solid #EFEFEF;
}
.border-b1 {
    border-bottom: 1px solid #DCDDDD;
}
.m-flex-direction-h {
    -ms-flex-direction: row;
    flex-direction: row;
}
.m-show {
    display: none!important;
    visibility: hidden;
}
.ms-show {
    display: none;
    visibility: hidden;
}
@media (max-width: 768px) {
.m-flex-direction-h {
    -ms-flex-direction: column;
    flex-direction: column;
}
.m-show-mb-2 {
    margin-bottom: 8px;
}
.m-mr-2 {
    margin-right: 0px;    
}
.m-hide {
    display: none!important;
    visibility: hidden!important;
}
.m-show {
    display: block!important;
    visibility: visible;
}
}
@media (max-width: 350px) {
.ms-hide {
    display: none!important;
    visibility: hidden!important;
}
.ms-show {
    display: block!important;
    visibility: visible!important;
}
}
.mobile-overflow-x-auto {
	overflow-y: hidden;
    overflow-x: auto;
    
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    
    /*iOS觸控滾動*/
    -webkit-overflow-scrolling: touch;
    
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
.mobile-overflow-x {
    overflow: hidden;    
    
    /*iOS觸控滾動*/
    -webkit-overflow-scrolling: touch;
    
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
.mobile-justify-content {
    -ms-flex-pack: center!important;
    justify-content: center!important
}
@media only screen and (max-device-width: 1024px) {
.mobile-overflow-x {    
    overflow-x: auto;

    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.mobile-justify-content {
    -ms-flex-pack: start!important;
    justify-content: start!important
}
}

.iframe-scrollup {
    padding: 15px 16px;
    text-align: center;
    color: #fff;
    position: fixed;
    right: 0px;
    bottom: 0px;
    display: none;
    background-color: #3E3A39;
    opacity: .6;
    border-radius: 4px;
    z-index: 1001;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px);
    will-change: transform;
    transition: transform .3s ease-out;
}
/*------------- 通用 -------------*/