/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
@import "propcmain.min.css";
datalist {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
    width: 200px;
}

datalist>option {
    padding: 0;
}
input.datalist[type="range"] {
    width: 200px;
    margin: 0;
}
.border-radius-0 {
    border-radius: 0;
}
.n5i1w50 div:nth-child(5n+1), .n5i2w50 div:nth-child(5n+2), .n5i3w50 div:nth-child(5n+3), .n5i4w50 div:nth-child(5n+4), .n5i4w50 div:nth-child(5n+5) {
    width: 50% !important;
}
.blockUI, .blockUI h1, .blockUI h2, .blockUI div {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
@-webkit-keyframes to_scale_bg {
    from {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes to_scale_bg {
    from {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.carousel-item.active .scalebg {
    visibility: visible;
    -webkit-animation: to_scale_bg 6s linear forwards;
    animation: to_scale_bg 6s linear forwards;
}
.col-shrink {
    max-width: 160px; /* 桌機限制 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.moveatob_object {
    width: 90px;
    height: 80px;
    position: relative;
    animation-name: move001atob;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    background-repeat: no-repeat;
}

@keyframes move001atob {
    0% {
        background-image: url(/t/img/move/move_001_1.png);
        left: 0px;
        top: 0px;
    }

    50% {
        background-image: url(/t/img/move/move_001_2.png);
        left: 0px;
        top: 0px;
    }

    60% {
        background-image: url(/t/img/move/move_001_3.png);
        left: 0px;
        top: 0px;
    }

    80% {
        background-image: url(/t/img/move/move_001_2.png);
        left: 0px;
        top: 0px;
    }

    100% {
        background-image: url(/t/img/move/move_001_1.png);
        left: 0px;
        top: 0px;
    }
}
/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
    padding: 0;
    margin: 0 auto 20px auto;
    list-style: none;
    text-align: center;
}

    .portfolio .portfolio-filters li {
        cursor: pointer;
        display: inline-block;
        padding: 8px 20px;
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 5px;
        border-radius: 4px;
        transition: all 0.3s ease-in-out;
        font-family: var(--heading-font);
    }

        .portfolio .portfolio-filters li:hover,
        .portfolio .portfolio-filters li.filter-active {
            color: var(--contrast-color);
            background-color: var(--accent-color);
        }

        .portfolio .portfolio-filters li:first-child {
            margin-left: 0;
        }

        .portfolio .portfolio-filters li:last-child {
            margin-right: 0;
        }

@media (max-width: 575px) {
    .portfolio .portfolio-filters li {
        font-size: 14px;
        margin: 0 0 10px 0;
    }
}

.portfolio .portfolio-item {
    position: relative;
    overflow: hidden;
}

    .portfolio .portfolio-item .portfolio-info {
        opacity: 0;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -100%;
        z-index: 3;
        transition: all ease-in-out 0.5s;
        background: color-mix(in srgb, var(--surface-color), transparent 10%);
        padding: 15px;
    }

        .portfolio .portfolio-item .portfolio-info h4 {
            font-size: 18px;
            font-weight: 600;
            padding-right: 50px;
        }

        .portfolio .portfolio-item .portfolio-info p {
            color: color-mix(in srgb, var(--default-color), transparent 30%);
            font-size: 14px;
            margin-bottom: 0;
            padding-right: 50px;
        }

        .portfolio .portfolio-item .portfolio-info .preview-link,
        .portfolio .portfolio-item .portfolio-info .details-link {
            position: absolute;
            right: 50px;
            font-size: 24px;
            top: calc(50% - 14px);
            color: color-mix(in srgb, var(--default-color), transparent 30%);
            transition: 0.3s;
            line-height: 0;
        }

            .portfolio .portfolio-item .portfolio-info .preview-link:hover,
            .portfolio .portfolio-item .portfolio-info .details-link:hover {
                color: var(--accent-color);
            }

        .portfolio .portfolio-item .portfolio-info .details-link {
            right: 14px;
            font-size: 28px;
        }

    .portfolio .portfolio-item:hover .portfolio-info {
        opacity: 1;
        bottom: 0;
    }

.ck-content .nav-tabs {
    list-style: none !important;
}

.contentTest {
    content: "test" !important;
}
.d-grid .w-k-auto {
    width: auto;
}
.d-grid .h-k-auto {
    height: auto;
}
    .d-grid .w-k-auto .fa-k-4x {
        font-size: 4em;
    }
/*@import "/t/css/ckeditor5i.css"; */
.col-100 {
    flex: 0 0 auto;
    width: 10%;
}
.col-125 {
    flex: 0 0 auto;
    width: 12.5%;
}
.col-200 {
    flex: 0 0 auto;
    width: 20%;
}
.col-300 {
    flex: 0 0 auto;
    width: 30%;
}
.col-400 {
    flex: 0 0 auto;
    width: 40%;
}
.col-600 {
    flex: 0 0 auto;
    width: 60%;
}
.col-700 {
    flex: 0 0 auto;
    width: 70%;
}
.col-800 {
    flex: 0 0 auto;
    width: 80%;
}
.col-900 {
    flex: 0 0 auto;
    width: 90%;
}
@media print {
    @media (max-width: 464px) {
        @page {
            margin: 5mm 5mm;
            size: auto;
        }
        .printer-max-footer {
            position: relative !important;
        }

        .testtextx::before {
            content: "464px,auto position-relative";
        }
    }	
    .barcode {
        font-family: 'Free 3 of 9', 'BarcodeFont';
        font-size: 20px;
        letter-spacing: 0px;
    }

    a, b, div, span, li, td {
        font-weight: 700 !important;
    }
    body{height:unset!important;}
    /*
    body,div{overflow-x:hidden!important;overflow-y:auto!important}
    */

    .justview{display:none;}
    .pbreaka{page-break-after:always;}
    .pbreakb{page-break-before:always;}
}
.contentempty {
    content: "" !important;
}
.f-w500 {
    font-weight: 500 !important;
}
.f-w700 {
    font-weight: 700 !important;
}
.f-w900 {
    font-weight: 900 !important;
}
.content-topbar .dropdown-menu, .nav-sidebar .dropdown:not(.menu-open) > .dropdown-menu {
    z-Index: -1;
    display:none;
}
.rounded-pill-top-start {
    border-top-left-radius: 50rem;
}
.rounded-pill-top-end {
    border-top-right-radius: 50rem;
}
.rounded-pill-bottom-start {
    border-bottom-left-radius: 50rem;
}
.rounded-pill-bottom-end {
    border-bottom-right-radius: 50rem;
}
.rounded-circle-top-start {
    border-top-left-radius: 50%;
}
.rounded-circle-top-end {
    border-top-right-radius: 50%;
}
.rounded-circle-bottom-start {
    border-bottom-left-radius: 50%;
}
.rounded-circle-bottom-end {
    border-bottom-right-radius: 50%;
}
.rounded-top-start-5 {
    border-top-left-radius: 5rem;
}
.rounded-top-end-5 {
    border-top-right-radius: 5rem;
}
.rounded-bottom-start-5 {
    border-bottom-left-radius: 5rem;
}
.rounded-bottom-end-5 {
    border-bottom-right-radius: 5rem;
}
.rounded-top-start-5p {
    border-top-left-radius: 5%;
}

.rounded-top-end-5p {
    border-top-right-radius: 5%;
}

.rounded-bottom-start-5p {
    border-bottom-left-radius: 5%;
}

.rounded-bottom-end-5p {
    border-bottom-right-radius: 5%;
}
.admin .d-none-admin, .web .d-none-web {
    display: none !important;
}
.admin .d-block-admin, .web .d-block-web {
    display: block !important;
}
.admin .carousel-item.d-block-admin {
    margin: 0;
    opacity: 1;
}
.checkbox .form-check-input:checked[type="checkbox"], .checkbox .btn-RangeFilter.Fuse[max="1"], .checkbox.form-check-input:checked[type="checkbox"], .checkbox.btn-RangeFilter.Fuse[max="1"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}
@media (max-width: 575px) {
}
@media (max-width: 767px) {
}
@media (max-width: 991px) {


    .content-topbar .navbar-nav {
        display:block!important;
    }
    .content-topbar .navbar-nav li {
        width: 100% !important;
    }
    .content-topbar {
        white-space: nowrap;
        overflow: unset;
    }
    .content-topbar, .content-topbar::before {
        margin-left: -100% !important;
        z-Index: -1;
        position: absolute;
    }
    .sidebar-content-topbar-collapse .content-topbar, .sidebar-content-topbar-collapse .content-topbar::before {
        margin-left: 0 !important;
        z-index: 100000;
    }
    .content-topbar .dropdown.menu-open > .dropdown-menu {
        z-Index: 10000;
        display: block !important;
    }
}
@media (max-width: 1199px) {
}
@media (max-width: 1399px) {
}
@media (min-width: 576px) {
    .col-sm-100 {
        flex: 0 0 auto;
        width: 10%;
    }
    .col-sm-125 {
        flex: 0 0 auto;
        width: 12.5%;
    }
    .col-sm-200 {
        flex: 0 0 auto;
        width: 20%;
    }
    .col-sm-300 {
        flex: 0 0 auto;
        width: 30%;
    }
    .col-sm-400 {
        flex: 0 0 auto;
        width: 40%;
    }
    .col-sm-600 {
        flex: 0 0 auto;
        width: 60%;
    }
    .col-sm-700 {
        flex: 0 0 auto;
        width: 700%;
    }
    .col-sm-800 {
        flex: 0 0 auto;
        width: 800%;
    }
    .col-sm-900 {
        flex: 0 0 auto;
        width: 900%;
    }
}
@media (min-width: 768px) {
    .col-md-100 {
        flex: 0 0 auto;
        width: 10%;
    }
    .col-md-125 {
        flex: 0 0 auto;
        width: 12.5%;
    }
    .col-md-200 {
        flex: 0 0 auto;
        width: 20%;
    }
    .col-md-300 {
        flex: 0 0 auto;
        width: 30%;
    }
    .col-md-400 {
        flex: 0 0 auto;
        width: 40%;
    }
    .col-md-600 {
        flex: 0 0 auto;
        width: 60%;
    }
    .col-md-700 {
        flex: 0 0 auto;
        width: 700%;
    }
    .col-md-800 {
        flex: 0 0 auto;
        width: 800%;
    }
    .col-md-900 {
        flex: 0 0 auto;
        width: 900%;
    }
}
@media (min-width: 992px) {
    .dropdown-menu .dropdown-menu {
        display: none;
    }

    .dropdown-menu-li .dropdown-menu {
        display: none !important;
    }

    .dropdown-menu-li:hover .dropdown-menu {
        display: block !important;
    }
    .nav-sidebar .dropdown:hover:not(.menu-open) > .dropdown-menu, .content-topbar .dropdown.menu-open > .dropdown-menu {
        z-Index: 10000;
        display: block !important;
    }
    .nav-sidebar .dropdown:hover:not(.menu-open) > .nav-link i.right {
        transform: rotate(-90deg);
    }
    .col-lg-100 {
        flex: 0 0 auto;
        width: 10%;
    }
    .col-lg-125 {
        flex: 0 0 auto;
        width: 12.5%;
    }
    .col-lg-200 {
        flex: 0 0 auto;
        width: 20%;
    }
    .col-lg-300 {
        flex: 0 0 auto;
        width: 30%;
    }
    .col-lg-400 {
        flex: 0 0 auto;
        width: 40%;
    }
    .col-lg-600 {
        flex: 0 0 auto;
        width: 60%;
    }
    .col-lg-700 {
        flex: 0 0 auto;
        width: 700%;
    }
    .col-lg-800 {
        flex: 0 0 auto;
        width: 800%;
    }
    .col-lg-900 {
        flex: 0 0 auto;
        width: 900%;
    }
}
@media (min-width: 1200px) {
    .col-xl-100 {
        flex: 0 0 auto;
        width: 10%;
    }
    .col-xl-125 {
        flex: 0 0 auto;
        width: 12.5%;
    }
    .col-xl-200 {
        flex: 0 0 auto;
        width: 20%;
    }
    .col-xl-300 {
        flex: 0 0 auto;
        width: 30%;
    }
    .col-xl-400 {
        flex: 0 0 auto;
        width: 40%;
    }
    .col-xl-600 {
        flex: 0 0 auto;
        width: 60%;
    }
    .col-xl-700 {
        flex: 0 0 auto;
        width: 700%;
    }
    .col-xl-800 {
        flex: 0 0 auto;
        width: 800%;
    }
    .col-xl-900 {
        flex: 0 0 auto;
        width: 900%;
    }
}
@media (min-width: 1400px) {
    .col-xxl-100 {
        flex: 0 0 auto;
        width: 10%;
    }
    .col-xxl-125 {
        flex: 0 0 auto;
        width: 12.5%;
    }
    .col-xxl-200 {
        flex: 0 0 auto;
        width: 20%;
    }
    .col-xxl-300 {
        flex: 0 0 auto;
        width: 30%;
    }
    .col-xxl-400 {
        flex: 0 0 auto;
        width: 40%;
    }
    .col-xxl-600 {
        flex: 0 0 auto;
        width: 60%;
    }
    .col-xxl-700 {
        flex: 0 0 auto;
        width: 700%;
    }
    .col-xxl-800 {
        flex: 0 0 auto;
        width: 800%;
    }
    .col-xxl-900 {
        flex: 0 0 auto;
        width: 900%;
    }
}
.w60mm{width:60mm!important;width:3276mm!important;min-width:60mm!important;max-width:60mm!important;padding:0px!important;}
.w80mm{width:80mm!important;width:3276mm!important;min-width:80mm!important;max-width:80mm!important;padding:0px!important;}
.w100mm{width:100mm!important;width:3276mm!important;min-width:100mm!important;max-width:100mm!important;padding:0px!important;}
.w1200mm{width:120mm!important;width:3276mm!important;min-width:120mm!important;max-width:120mm!important;padding:0px!important;}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, a, body {
    font-family: "微軟正黑體","Microsoft JhengHei Bold","Microsoft JhengHei","Open Sans",sans-serif;
    font-weight: 700 !important;
}
.width-80-px {
    width: 80px !important;
}

.height-80-px {
    height: 80px !important;
}

.width-100-px {
    width: 100px !important;
}

.height-100-px {
    height: 100px !important;
}
input[type="checkbox"]{
height:20px;
width:20px;
}
a.navbar-brand {
  /*white-space: normal;*/
  text-align: center;
  word-break: break-all;
}
.overflow-wrap-anywhere {
    overflow-wrap: anywhere
}
.mw3rem {
    max-width: 3rem !important;
}
.mw4rem {
    max-width: 4rem !important;
}
.mw5rem {
    max-width: 5rem !important;
}
.mw6rem {
    max-width: 6rem !important;
}
/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}
.zindex-1000 {
    z-index: 1000 !important;
}
.zindex-1001 {
    z-index: 1001 !important;
}
.zindex-1041 {
    z-index: 1041 !important;
}
.zindex-1051 {
    z-index: 1051 !important;
}
.zindex-1061 {
    z-index: 1061 !important;
}
.zindex-10000 {
    z-index: 10000 !important;
}
.zindex-100000 {
    z-index: 100000 !important;
}
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
/*詳細標籤選Bar*/
.nav-pillsx .nav-link.active, .nav-pillsx .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open .nav-treeview .menu-open > .nav-link {
    background-color: rgba(255,255,255,.1);
    color: #fff;
}
.apointer, .btn-select, .btn-delete {
    cursor: pointer;
}
.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.web body {
    padding-top:4rem;
}
.d-0 {
    display: none;
}
.footer-absolute {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}
.dn {
    display:none;
}
img {
    max-width: 100%;
    height:auto;
}
.Foff {
    background-color:gray;
}
.Fuse {
    background-color: blue;
}
.Fadd {
    background-color: red;
}
.maxwidth100 {
    max-width: 100%;
}
.height3px {
    height:3px;
}
.height100vh {
    height:100vh;
}
.opacity0p5 {
    opacity:0.5;
}
.detail a:hover img {
    transform: scale(1.07);
}
.detail a img {
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}

body {
    font-family: 'Noto Sans TC','微軟正黑體',sans-serif;
    /*
    font-size: 16px;
    line-height: 1.5;
    color: #394342;
*/
}

.SelectBox .Deldiv, .SelectList .ListiTitle {
    display: block !important;
}
.bg-none {
    background: unset !important;
}
@media (min-width: 768px) {
    .position-md-relative {
        position: relative !important;
    }
}
@media screen and (min-width: 768px) {
    .OverflowX {
        overflow-x: auto !important;
        white-space: nowrap;
        /*webkit-overflow-scrolling: touch;*/
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
        .OverflowX table, .OverflowX tbody, .OverflowX td, .OverflowX tfoot, .OverflowX th, .OverflowX thead, tr {
            width: auto !important;
        }
        .OverflowX .d-md-block, .OverflowX .float-start {
            float: unset !important;

        }
    .divtd1 {
        display: block !important;
        clear: both;
    }
    .OverflowX .d-md-block, .OverflowX .float-start:not(.d-md-none) {
        display: inline-block !important;
    }
}
@media screen and (max-width: 992px) {

    html {
        font-size: 16px;
    }
  
}


.navbar-toggler:focus {
    box-shadow: none;
}
button.navbar-toggler {
    position: relative;
    height:1.5rem;
}
button.navbar-togglerx {
    position: fixed;
    top: 0;
    right: 0;
    height: 27px;
    width: 35px;
    cursor: pointer;
    z-index: 100;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
    z-index: 999;
}

button.navbar-toggler:hover {
    opacity: .7;
}

button.navbar-toggler span {
    top: 10px;
    opacity: 1;
    border: none;
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}
button.navbar-toggler .middle {
    opacity: 0;
    background: #FFF;
}
button.navbar-toggler span:nth-of-type(1) {
    opacity: 1;
    top: -20px;
    -webkit-transform: translateY(30px) translateX(0) rotate(45deg);
    transform: translateY(30px) translateX(0) rotate(45deg);
    /*background:#006bb4;*/
}

button.navbar-toggler span:nth-of-type(3) {
    top: 40px;
    opacity: 1;
    -webkit-transform: translateY(-30px) translateX(0) rotate(-45deg);
    transform: translateY(-30px) translateX(0) rotate(-45deg);
    /*background:#006bb4;*/
}
button.navbar-toggler span.navbar-toggler-icon:nth-of-type(2) {
    opacity: 0;
}

button.navbar-toggler.collapsed span:nth-of-type(2) {
    opacity: 1;
}
button.navbar-toggler.collapsed span {
    top: 10px;
    /*background: #F00;*/
    opacity: 1;
    border: none;
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}
button.navbar-toggler.collapsed.middle {
    opacity: 1;
    /*background:#006bb4;*/
}
button.navbar-toggler.collapsed span:nth-of-type(1) {
    top: -20px;
    opacity: 1;
    -webkit-transform: translateY(20px) translateX(0) rotate(0deg);
    transform: translateY(20px) translateX(0) rotate(0deg);
    /*background: #F00;*/
}

button.navbar-toggler.collapsed span:nth-of-type(3) {
    top: 40px;
    opacity: 1;
    -webkit-transform: translateY(-20px) translateX(0) rotate(0deg);
    transform: translateY(-20px) translateX(0) rotate(0deg);
    /*background: #F00;*/
}
.cursorPointer, .nav-link, .btn-link {
    cursor: pointer;
}
.width05r {
    width: 0.5rem;
}
.width10r {
width:1rem;
}
.width15r {
    width: 1.5rem;
}
.width20r {
    width: 2rem;
}
.width25r {
    width: 2.5rem;
}
.width30r {
    width: 3rem;
}
.height05r {
    height: 0.5rem;
}

.height10r {
    height: 1rem;
}

.height15r {
    height: 1.5rem;
}

.height20r {
    height: 2rem;
}

.height25r {
    height: 2.5rem;
}

.height30r {
    height: 3rem;
}
.height1rem {
    height: 1rem;
}
.height2rem {
    height: 2rem;
}
.height3rem {
    height: 3rem;
}
.height4rem {
    height: 4rem;
}
.height5rem {
    height: 5rem;
}
.height6rem {
    height: 6rem;
}
.height7rem {
    height: 7rem;
}
.height8rem {
    height:8rem;
}
.height9rem {
    height: 9rem;
}
.height10rem {
    height: 10rem;
}


.heght1p5rem {
    height: 1.5rem !important;
}
.heght2p5rem {
    height: 2.5rem !important;
}

.heght3p5rem {
    height: 3.5rem !important;
}
.heght4p5rem {
    height: 4.5rem !important;
}

#folder img {
    max-height:100%;
}
.height4rem img, .height5rem img, .height6rem img, .height7rem img, .height8rem img, .height9rem img, .height10rem img {
    max-height: 100%;
}
body.admin .content-wrapper {
    background-color: transparent !important;
}
.ke-edit-textarea {
    width: 100%;
}
.KindEditorBox .ke-container, .KindEditorBox .ke-container iframe, body.ke-content {
    background: transparent!important;
}
.KindEditorBox .toolsno .ke-container .ke-toolbar {
    display:none!important;
}
.home-page:before, .home-page:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.translateYM150 {
    transform: translateY(-150%);
}
.translateYM125 {
    transform: translateY(-125%);
}
.translateYM100 {
    transform: translateY(-100%);
}
.translateYM75 {
    transform: translateY(-75%);
}
.translateYM50 {
    transform: translateY(-50%);
}
.translateYM25 {
    transform: translateY(-25%);
}
.home-page::after {
    background-image: url(/upload/images/wbk.jpg);
    background-size: cover;
    left: 0;
    opacity: .4;
    z-index: -1;
}
.home-page:before {
    background-color: #eee;
    z-index: -1;
}
.z-index1 {
    z-index: 1;
}
.containerBox {

}
.bottom--20 {
   bottom:-20px;
}
.HrBorder {
    height: 1px;
    display: block;
    margin-bottom: -1px;
    background-color: #c0c0c0;
    flex: 1;
}

/*web*/
.web body {
    padding-top: 0;
}
/*#0f5132*/
/*#146c43*/
img.logo {
    max-height: 100px;
}

.topmenubar {
    width: 100%;
    right: 0;
    left: auto;
    opacity: 0.8;
    /*background-color: rgb(20 108 51 / 80%);*/

    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}

.navdef {
    background: linear-gradient(90deg,rgb(255 255 255 / 0),rgb(0 0 0 / .85));
}

.mb--20px {
    bottom: -20px;
}
.mt-10rem {
    margin-top: 10rem;
}
.rounded-1rem {
    border-radius: 1rem !important;
}

nav li::marker, li::marker {
    display: none !important;
	  content: '';
}


.navbar-nav .nav-link:before {
    position: absolute;
    content: '';
    width: 0;
    height: 2px;
    background-color: #ec1b3b;
    right: 0;
    bottom: 0;
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}

.nav-link {
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}


@-o-keyframes grow {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.25)
    }
}

@-webkit-keyframes grow {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.25)
    }
}

@-moz-keyframes grow {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.25)
    }
}

@keyframes grow {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.25)
    }
}

.carousel-item { /*! position: relative; */
}

.carousel-control-next, .carousel-control-prev {
    z-index: 10;
}
body.web .nav.nav-pills .nav-item>a.active {
    background-color: #e9ecef !important;
    color: #000 !important;
}
body.web .nav.nav-pills .nav-item > a {
    background-color: #FFFFFF !important;
    color: #adb5bd !important;
}

.logo {
    max-width: 250px;
    max-height: 100px;
}

.background-size-cover {
    background-size: cover !important;
}

.Bigbanner {
    background: url(/Upload/isgood1920.jpg);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    height: 25vw;
}

.Itembox:hover .trans:nth-of-type(1) {
    transform: translate3d(0,-50%,0);
    opacity: 0;
}

.Itembox .trans:nth-of-type(2) {
    transform: translate3d(0,0,0);
    opacity: 0;
}

.Itembox:hover .trans:nth-of-type(2) {
    transform: translate3d(0,-50%,0);
    opacity: 1;
}

.Itembox .trans-0:nth-of-type(2) {
    transform: translate3d(0,0,0);
    opacity: 0;
}

.Itembox:hover .trans-0:nth-of-type(2) {
    transform: translate3d(0,0%,0);
    opacity: 1;
}


.Itembox:hover .trans {
    /* CSS3淡出淡入效果,1秒
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
 */
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition: all .3s linear;
}

.Bigbanner .title {
    background: rgba(238 238 238 / .6);
}
/*198754*/
.topmenux {
    opacity: 0.8;
    /*background-color: rgb(53 53 53 / 80%);*/
    background: -webkit-linear-gradient(90deg,rgb(25 137 94 / 0),rgb(0 0 0 / .8)100%);
    background: linear-gradient(90deg,rgb(25 137 94 / 0),rgb(0 0 0 / .85)100%);
    /*padding-left: 100px;*/
    /*width: 100%;*/
}
/*0a3622*/
.topmenuright {
    opacity: 0.8;
    background: -webkit-linear-gradient(120deg,rgb(10 54 24 / 0),rgb(0 0 0 / .8)100%);
    background: linear-gradient(120deg,rgb(10 54 24/ 0),rgb(0 0 0 / .85)100%);
}

.myCarousel .carousel-inner:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    background: -webkit-linear-gradient(180deg,rgb(34 75 68 / 0),rgb(34 75 68 / .5)100%);
    background: linear-gradient(180deg,rgb(34 75 68 / 0),rgb(34 75 68 / .5)100%);
    z-index: 1;
    opacity: .5;
}

.myCarousel .carousel-inner:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 30%;
    background: #004740;
    background: -webkit-linear-gradient(180deg,rgb(34 75 68 / 0),rgb(34 75 68 / .5)100%);
    background: linear-gradient(180deg,rgb(34 75 68 / 0),rgb(24 49 45)90%);
    z-index: 1;
    bottom: 0;
}
.myCarousel .carousel-item .divimg {
    --keyimage: attr(data-image);
    background-image: var(--keyimage);
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
}
.myCarousel .carousel-item img, .carousel-item .divimg {
    width: 100%;
    height: 100vh;
    -o-animation: grow 30s linear 5ms infinite;
    -webkit-animation: grow 30s linear 5ms infinite;
    -moz-animation: grow 30s linear 5ms infinite;
    animation: grow 30s linear 5ms infinite;
    transition: all 0.2s ease-in-out;
}
.detail-box img {
    max-width: 100%;
}

.dataimg img {
    max-height: 100%;
}

.detail-carousel:not(.updwon) .carousel-inner {
    width: 83.33333333%;
}

.detail-carousel:not(.updwon) .carousel-item {
    width: 33.3333%;
    max-height: 100px;
}

.detail-carousel:not(.updwon) .carousel-control-prev,
.detail-carousel:not(.updwon) .carousel-control-next {
    width: 8.3333%
}

.detail-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.detail-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.detail-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
}

.detail-carousel .carousel-inner .carousel-item.active,
.detail-carousel .carousel-inner.item3 .active + .carousel-item, .detail-carousel .carousel-inner.item4 .active + .carousel-item, .detail-carousel .carousel-inner.item5 .active + .carousel-item,
.detail-carousel .carousel-inner.item3 .active + .carousel-item + .carousel-item, .detail-carousel .carousel-inner.item4 .active + .carousel-item + .carousel-item .detail-carousel .carousel-inner.item5 .active + .carousel-item + .carousel-item,
.detail-carousel .carousel-inner.item4 .active + .carousel-item + .carousel-item + .carousel-item, .detail-carousel .carousel-inner.item5 .active + .carousel-item + .carousel-item + .carousel-item,
.detail-carousel .carousel-inner.item5 .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    display: block;
}

.top-150 {
    top: 150% !important;
}
.top-200 {
    top: 200% !important;
}
.top-250 {
    top: 250% !important;
}
.top-300 {
    top: 300% !important;
}
.top-350 {
    top: 350% !important;
}
.top-400 {
    top: 400% !important;
}

.height-150 {
    height: 150% !important;
}

.height-200 {
    height: 200% !important;
}

.height-250 {
    height: 250% !important;
}

.height-300 {
    height: 300% !important;
}

.height-350 {
    height: 350% !important;
}

.height-400 {
    height: 400% !important;
}
.detail-carousel:not(.updwon) .carousel-inner .active + .carousel-item {
    left: 100%;
}

    .detail-carousel:not(.updwon) .carousel-inner .active + .carousel-item + .carousel-item {
        left: 200%;
    }
.card-body {
    max-width:100%;
}
@media screen and (min-width: 2000px) {
}
@media screen and (min-width: 1800px) {
}
@media screen and (min-width: 1400px) {
    .ui-col-xxl-2 > [class^="col-"] {
        flex: 0 0 auto;
        width: 16.66666667% !important;
    }
    .ui-col-xxl-3 > [class^="col-"] {
        flex: 0 0 auto;
        width: 25% !important;
    }
    .ui-col-xxl-4 > [class^="col-"] {
        flex: 0 0 auto;
        width: 33.33333333%!important;
    }
}
@media screen and (min-width: 1200px) {
    .detail-carousel.updwon .carousel-inner {
        overflow: unset;
    }

        .detail-carousel.updwon .carousel-inner .active + .carousel-item {
            top: 100%;
            position: absolute;
        }

            .detail-carousel.updwon .carousel-inner .active + .carousel-item + .carousel-item {
                top: 200%;
                position: absolute;
            }

        .detail-carousel.updwon .carousel-inner.item4 .active + .carousel-item + .carousel-item + .carousel-item, .detail-carousel.updwon .carousel-inner.item4 .active + .carousel-item + .carousel-item + .carousel-item {
            top: 300%;
            position: absolute;
        }

        .detail-carousel.updwon .carousel-inner.item5 .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            top: 400%;
            position: absolute;
        }
    .ui-col-xl-2 > [class^="col-"] {
        flex: 0 0 auto;
        width: 16.66666667% !important;
    }
    .ui-col-xl-3 > [class^="col-"] {
        flex: 0 0 auto;
        width: 25% !important;
    }
}
@media screen and (min-width: 992px) {
    .ui-col-lg-2 > [class^="col-"] {
        flex: 0 0 auto;
        width: 16.66666667% !important;
    }
    .ui-col-lg-3 > [class^="col-"] {
        flex: 0 0 auto;
        width: 25% !important;
    }
}
@media screen and (min-width: 768px) {
    .ui-col-md-2 > [class^="col-"] {
        flex: 0 0 auto;
        width: 16.66666667% !important;
    }
    .ui-col-md-3 > [class^="col-"] {
        flex: 0 0 auto;
        width: 25% !important;
    }

    .h-md-50vh {
        height:50vh!important;
    }
}
@media screen and (min-width: 640px) {
}
@media screen and (min-width: 576px) {
    .ui-col-sm-2 >[class^="col-"] {
        flex: 0 0 auto;
        width: 16.66666667% !important;
    }
    .ui-col-sm-3 > [class^="col-"] {
        flex: 0 0 auto;
        width: 25% !important;
    }
}

@media screen and (max-width: 1999px) {
}
@media screen and (max-width: 1799px) {
}
@media screen and (max-width: 1399px) {
}
@media screen and (max-width: 1199px) {
    .carousel-item imgm, .carousel-item .divimg {
        height: 80vh;
    }
}
@media screen and (max-width:991px) {
    .myCarousel .carousel-item img, .carousel-item .divimg {
        height: 60vh;
    }

    nav.navbar {
        background-color: #333;
    }

    img.logo {
        max-height: 42px;
        padding: 0;
        padding-top: 4px;
        max-width: 100px;
    }

    .topmenu {
        background: transparent;
    }

    .topmenuright {
        position: absolute;
        max-height: 52px;
    }
}
@media screen and (max-width:767px) {
    .myCarousel .carousel-item img, .carousel-item .divimg {
        height: 50vh;
    }
}
@media screen and (max-width:639px) {
    .myCarousel .carousel-item img, .carousel-item .divimg {
        height: 40vh;
    }
}
@media screen and (max-width:575px) {
    .myCarousel .carousel-item img, .carousel-item .divimg {
        height: 30vh;
    }
}

@media (min-width:2000px) {
}
@media (min-width:1800px) {
}
@media (min-width:1400px) {
}
@media (min-width:1200px) {
}
@media (min-width:992px) {
}
@media (min-width:768px) {
}
@media (min-width:640px) {
}
@media (min-width:576px) {
}

@media (max-width:1999px) {
}
@media (max-width:1799px) {
}
@media (max-width:1399px) {
}
@media (max-width:1199px) {
}
@media (max-width:991px) {
}
@media (max-width:767px) {
}
@media (max-width:639px) {
}
.label-sub1 {
    position: absolute !important;
    top: -0.75rem !important;
    left: -0.75rem !important;
    font-size: 0.75em !important;
}
.label-sub075 {
    position: absolute !important;
    top: -0.75rem !important;
    left: -0.75rem !important;   
    font-size: 0.75em !important;
}
.label-sub05 {
    position: absolute !important;
    top: -0.75rem !important;
    left: -0.75rem !important;
    font-size: 0.75em !important;
}
@media (max-width: 576px) {
    /* ✅ 手機小螢幕時，給輸入框更多空間 */
    .JsonForm.table-responsive .form-control {
        min-width: 150px;
    }
    .switchi {
        min-width: 3rem !important;
    }
    .JsonForm.table-responsive .col-shrink {
        max-width: 120px;
    }
}
.breadcrumb-itemi > span {
    padding: 0;
    padding-top: 0.5rem;
}

    .breadcrumb-itemi > span > i {
        float: left;
    }

    .breadcrumb-itemi > span > p {
        float: left;
        line-height: 100%;
    }
.justimage1 .Listi[class*="col-"] {
    width: 100% !important;
}
.justimage1 [type="text"]{
    display: none !important;
}

.justimage1 .text {
    display: none !important;
}


.border-dashed {
    border-style: dashed !important;
}
.border-double {
    border-style: double !important;
}
.border-groove {
    border-style: groove !important;
}
.border-ridge {
    border-style: ridge !important;
}
.border-outset {
    border-style: outset !important;
}

.border-top-dashed {
    border-top-style: dashed !important;
}
.border-top-double {
    border-top-style: double !important;
}
.border-top-groove {
    border-top-style: groove !important;
}
.border-top-ridge {
    border-style: ridge !important;
}
.border-top-outset {
    border-top-style: outset !important;
}



.border-bottom-dashed {
    border-bottom-style: dashed !important;
}

.border-bottom-double {
    border-bottom-style: double !important;
}

.border-bottom-groove {
    border-bottom-style: groove !important;
}

.border-bottom-ridge {
    border-bottom-style: ridge !important;
}

.border-bottom-outset {
    border-bottom-style: outset !important;
}




.border-start-dashed {
    border-left-style: dashed !important;
}
.border-start-double {
    border-left-style: double !important;
}
.border-start-groove {
    border-left-style: groove !important;
}

.border-start-ridge {
    border-left-style: ridge !important;
}

.border-start-outset {
    border-left-style: outset !important;
}
.border-end-dashed {
    border-right-style: dashed !important;
}

.border-end-double {
    border-right-style: double !important;
}

.border-end-groove {
    border-right-style: groove !important;
}

.border-end-ridge {
    border-right-style: ridge !important;
}

.border-end-outset {
    border-right-style: outset !important;
}