body {
    font-family: Microsoft JhengHei, Avenir, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none !important;
    cursor: pointer;
}

/* bs-theme */

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: 0 0 0 .15rem rgb(208, 206, 206);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #a4abb2;
}

.product-list-toggle:not(.collapsed) svg {
    transform: rotate(-180deg);
}

.product-list-toggle svg {
    transition: transform .2s ease-in-out;
}

/* bi */
.align-125em .bi {
    display: inline-block;
    vertical-align: -.125em;
}

/* text color */

.text-B22222 {
    color: #B22222;
}

/* bg */

.bg-cover {
    background-size: cover;
}

.bg-contain {
    background-size: contain;
}

.bg-666666 {
    background-color: #666666;
}

.bg-545454 {
    background-color: #545454;
}

.bg-fffc {
    background-color: #fffc;
}

.bg-000c {
    background-color: #000c;
}

/* border */

.border-ffffff24 {
    border-color: #ffffff24 !important;
}

.border-white {
    border-color: #fff !important;
}

.border-ccc {
    border-color: #ccc !important;
}

/* fs */

.fs-6 {
    font-size: 1.1rem !important;
}

.fs-7 {
    font-size: .85rem !important;
}

.fs-8 {
    font-size: .75rem !important;
}

@media (min-width: 576px) {
    .fs-sm-1rem {
        font-size: 1rem !important;
    }
}

/* margin */

.mb-6rem {
    margin-bottom: 6rem;
}

/* height */

.h-380px {
    height: 380px;
}

/* width */

.w-4rem {
    width: 4rem;
}

/* btn */

.btn-white {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.btn-white:focus {
    box-shadow: 0 0 0 .15rem rgb(208, 206, 206);
}

/* ratio */

.ratio-128x35 {
    --bs-aspect-ratio: calc(35 / 128 * 100%);
}

.ratio-4x1 {
    --bs-aspect-ratio: calc(1 / 4 * 100%);
}

/* position */

.top-3 {
    top: 1rem;
}

.bottom-n3 {
    bottom: -1rem;
}

.start-n3 {
    left: -1rem;
}

.translate-bottom {
    transform: translateY(100%);
}

/* table */

@media (max-width: 575.98px) {
    .table-nsm-sm> :not(caption)>*>* {
        padding: .25rem .25rem;
    }
}

/* home */

.home-demo .bg-545454 {
    transition: .2s;
}

.home-demo:hover .bg-545454 {
    background-color: #212529;
}

.home-demo:hover .border-ccc {
    border-color: #ff672b !important;
}

/* news */

.news-list-group {
    display: block;
    background-color: #545454;
    color: #fff;
    padding: .5rem 1rem;
    margin-bottom: 1px;
    border-left: .25rem solid #a9a9a9;
    transition: .2s;
}

.news-list-group .news-brif {
    color: #e7e7e7;
    transition: .2s;
}

.news-list-group .news-date {
    color: #999999;
    transition: .2s;
}

.news-list-group:hover {
    color: #fff;
}

.news-list-group:hover {
    border-color: #c4c4c4 !important;
    background: #363636;
    color: #fff;
}

.news-list-group:hover .news-brif {
    color: #fff;
}

.news-list-group:hover .news-date {
    color: #999999;
}

.news-list-group.active {
    border-color: #ff9326 !important;
}

/* about-list-group */

.about-list-group {
    display: block;
    background-color: #545454;
    color: #fff;
    padding: .5rem 1rem;
}

.about-list-group:hover {
    background: #363636;
    color: #fff;
}

.about-list-group.active {
    background-color: #ff672b;
    color: #fff;
}

/* product-list-group */

.product-list-group,
.product-list-toggle {
    display: block;
    background-color: #545454;
    color: #fff;
    padding: .5rem 1rem;
}

.product-list-group:hover,
.product-list-toggle:hover {
    background-color: #363636;
    color: #fff;
}

.product-list-group.active {
    background-color: #ff672b;
    color: #fff;
}

.product-list-group.active+.product-list-toggle {
    background-color: #ff743d;
}

.product-list-group.active+.product-list-toggle:hover {
    background-color: #ff5c1c;
}

.product-link {
    display: block;
    color: #000;
    background-color: #eeeeee;
    padding: .25rem 1rem;
}

.product-link:hover {
    color: #000;
    background-color: #e6e6e6;
}

.product-link.active {
    color: #fff;
    background-color: #FF6022;
}

.prd-box .prd-title-bg {
    background-color: #363636;
    color: #fff;
    transition: .2s;
}

.prd-box:hover .prd-title-bg {
    background-color: #FF6022;
}

.prd-triangle {
    position: absolute;
    top: -1px;
    left: 0;
    transform: translateY(-100%);
    border-top: 0;
    border-right: 0;
    border-bottom: 1rem solid #363636;
    border-left: 1rem solid transparent;
    transition: .2s;
}

.prd-box:hover .prd-triangle {
    border-bottom: 1rem solid #ff9c75;
}

.ug-page-link {
    background-color: #fff;
    color: #000;
    transition: .2s;
    padding: .5rem;
    margin: 0 .25rem;
}

.ug-page-link.active+.ug-page-link:last-child {
    visibility: hidden !important;
}

.ug-page-link:hover {
    background-color: #eaeaf0;
    color: #000;
}

.ug-page-link.active {
    background-color: #FF6022;
    color: #fff;
}

/* prd inner page */

#prd-carousel .carousel-indicators {
    margin: 0;
}

#prd-carousel .carousel-indicators [data-bs-target] {
    flex: 0 1 auto;
    width: inherit;
    height: inherit;
    padding: 0 !important;
    margin: 3px !important;
    background-color: #fff;
    background-clip: padding-box;
    border: 3px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}

#prd-carousel .carousel-indicators [data-bs-target].active {
    border-color: #FF6022 !important;
    opacity: 1;
}

/* inquiry */

.inquiry-table-number {
    width: 1rem;
}

.inquiry-table-img {
    width: calc(4vw + 2rem);
}

.inquiry-table-amount {
    width: 3rem;
}

.inquiry-table-delete {
    width: 2.5rem;
}

.inquiry-table-q {
    width: 4.5rem;
}


@media (min-width: 576px) {
    .inquiry-table-number {
        width: 2rem;
    }

    .inquiry-table-img {
        width: calc(4vw + 3rem);
    }

    .inquiry-table-amount {
        width: 4rem;
    }

    .inquiry-table-delete,
    .inquiry-table-q {
        width: 5.5rem;
    }
}

/* navbar */

/* pc */

#navbar-pc .dropdown-menu {
    z-index: 1100;
}

#navbar-pc .nav-item>a {
    display: inline-flex;
    color: #fff;
    min-height: 3.5rem;
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

#navbar-pc .nav-item>a span {
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
}

@media (min-width: 992px) {
    #navbar-pc .nav-item>a.active {
        background-color: #ff672b;
    }
}

@media (min-width: 1200px) {
    #navbar-pc .nav-item>a {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

#navbar-pc .nav-item:hover {
    transition: .2s;
}

#navbar-pc .nav-item:hover {
    background-color: #000;
}

#navbar-mb .logo-black {
    width: 80px;
}

[aria-expanded=false] svg.bi-x {
    display: none;
}

[aria-expanded=true] svg.bi-list {
    display: none;
}