body {
    font-family: roboto, 'Microsoft JhengHei';
}

@font-face {
    font-family: QuanZhenCuMingTi;
    src: url(../assets/font-family/QuanZhenCuMingTi/QuanZhenCuMingTi-2.ttf);
}

.font-QuanZhenCuMingTi {
    font-family: QuanZhenCuMingTi, Microsoft JhengHei;
}

.ink-font-line {
    writing-mode: tb-rl;
}

/*.font-Microsoft-Yahei {    font-family: Microsoft Yahei;}*/
a {
    color: inherit;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

a:focus {
    outline: none;
}

/*navbar*/
#navbar .nav-bg {
    background: -webkit-linear-gradient(left, rgb(0, 215, 163) 0%, rgb(0, 150, 227) 25%, rgb(223, 0, 104) 75%, rgb(213, 191, 0) 100%);
    background: -o-linear-gradient(left, rgb(0, 215, 163) 0%, rgb(0, 150, 227) 25%, rgb(223, 0, 104) 75%, rgb(213, 191, 0) 100%);
    background: -moz-linear-gradient(left, rgb(0, 215, 163) 0%, rgb(0, 150, 227) 25%, rgb(223, 0, 104) 75%, rgb(213, 191, 0) 100%);
    background: linear-gradient(to right, rgb(0, 215, 163) 0%, rgb(0, 150, 227) 25%, rgb(223, 0, 104) 75%, rgb(213, 191, 0) 100%);
    transition: 0.5s;
}

#navbar .nav-bg {
    opacity: 0;
}

#navbar.scroll .nav-bg {
    opacity: 1;
}

.expanded+.nav-bg {
    opacity: 1 !important;
}

@media only screen and (max-width: 991.98px) {
    #navbar .logo-width {
        width: 220px;
    }

    #navbar .navbar-brand {
        padding: 0;
    }
}

@media only screen and (max-width: 1199.98px) {
    #navbar {
        font-size: .95rem;
    }
}

@media only screen and (min-width: 992px) {
    #navbar .logo-width {
        width: 315px;
        transition: .5s;
    }

    #navbar.scroll .logo-width {
        width: 220px;
    }

    #navbar .navbar-brand {
        transition: .5s;
    }

    #navbar.scroll .navbar-brand {
        padding: 0;
    }
}

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

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

/*header css*/
.bg-colors {
    background: -webkit-linear-gradient(left, #00eab1 0%, #009aea 25%, #ea006d 75%, #ead200 100%);
    background: -o-linear-gradient(left, #00eab1 0%, #009aea 25%, #ea006d 75%, #ead200 100%);
    background: -moz-linear-gradient(left, #00eab1 0%, #009aea 25%, #ea006d 75%, #ead200 100%);
    background: linear-gradient(to right, #00eab1 0%, #009aea 25%, #ea006d 75%, #ead200 100%);
}

.top-navbar-height {
    top: 60px;
}

/*RWD lg上下 nav-link樣式*/

@media only screen and (max-width: 1199.98px) {
    .navbar-nav {
        margin-top: 1.25rem;
    }

    .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
        padding-top: .25rem;
        padding-bottom: .25rem;
        margin-bottom: .5rem;
        color: #f8f9fa;
        border-width: 1.5px;
        border-style: solid;
        border-color: #f8f9fa;
        border-radius: .25rem;
    }

    .navbar-nav .nav-link.active {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

    .navbar-nav .nav-link:hover {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

    .navbar-nav .nav-link:focus {
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5);
    }
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
    .navbar-nav .nav-item {
        width: calc(24.99% - 1rem);
    }

    .navbar-nav .nav-link {
        width: 100%;
    }
}

@media only screen and (max-width: 384.98px) {
    .navbar-nav .nav-link {
        padding-right: .4rem;
        padding-left: .4rem;
        padding-top: .2rem;
        padding-bottom: .2rem;
        border-width: 1px;
    }
}

@media only screen and (min-width: 992px) {

    .navbar-nav .nav-link,
    .language-shift a {
        position: relative;
    }

    .navbar-nav .nav-link::after,
    .language-shift a::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%) scaleX(0);
        -webkit-transform: translateX(-50%) scaleX(0);
        transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        width: 100%;
        height: 1.5px;
        background-color: rgba(255, 255, 255, 1);
        transition: transform 250ms;
        -webkit-transition: transform 250ms;
    }

    .navbar-nav .nav-link:hover::after,
    .language-shift a:hover::after {
        transform: translateX(-50%) scaleX(1);
        -webkit-transform: translateX(-50%) scaleX(1);
    }
}

/*usage*/
/*color control*/
#theme,
.theme-text-default,
.theme-border-default,
.usage-product.active,
.fits-machines-color,
.usage-title-color {
    transition: .3s;
}

/*搜尋框框的focus沒有寫進去*/
/*Turquoise*/
.theme-turquoise {
    background-color: rgb(245, 252, 251) !important
}

.theme-turquoise .theme-text-default {
    color: #3AC8AD;
}

.theme-turquoise .theme-border-default {
    border-color: #3AC8AD !important;
}

.theme-turquoise .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(58, 200, 173, 0.25)
}

.theme-turquoise .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(245, 252, 251, 0) 0%, rgba(245, 252, 251, .95) 100%);
    background: -o-linear-gradient(left, rgba(245, 252, 251, 0) 0%, rgba(245, 252, 251, .95) 100%);
    background: -moz-linear-gradient(left, rgba(245, 252, 251, 0) 0%, rgba(245, 252, 251, .95) 100%);
    background: linear-gradient(to right, rgba(245, 252, 251, 0) 0%, rgba(245, 252, 251, .95) 100%);
}

.theme-turquoise .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(58, 200, 173, 0.5) !important;
}

.theme-turquoise~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(58, 200, 173, 0.2) !important;
    color: #3AC8AD
}

.theme-turquoise~.container .usage-title-color {
    border-bottom-color: #3AC8AD;
}

/*Blue*/
.theme-blue {
    background-color: rgb(242, 251, 254) !important
}

.theme-blue .theme-text-default {
    color: #06A6E6;
}

.theme-blue .theme-border-default {
    border-color: #06A6E6 !important;
}

.theme-blue .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25)
}

.theme-blue .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(242, 251, 254, 0) 0%, rgba(242, 251, 254, .95) 100%);
    background: -o-linear-gradient(left, rgba(242, 251, 254, 0) 0%, rgba(242, 251, 254, .95) 100%);
    background: -moz-linear-gradient(left, rgba(242, 251, 254, 0) 0%, rgba(242, 251, 254, .95) 100%);
    background: linear-gradient(to right, rgba(242, 251, 254, 0) 0%, rgba(242, 251, 254, .95) 100%);
}

.theme-blue .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.5) !important;
}

.theme-blue~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(6, 166, 230, 0.2) !important;
    color: #06A6E6;
}

.theme-blue~.container .usage-title-color {
    border-bottom-color: #06A6E6;
}

/*Purple*/
.theme-purple {
    background-color: rgb(247, 247, 252) !important
}

.theme-purple .theme-text-default {
    color: #5c62c6;
}

.theme-purple .theme-border-default {
    border-color: #5c62c6 !important;
}

.theme-purple .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(92, 98, 198, 0.25)
}

.theme-purple .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(247, 247, 252, 0) 0%, rgba(247, 247, 252, .95) 100%);
    background: -o-linear-gradient(left, rgba(247, 247, 252, 0) 0%, rgba(247, 247, 252, .95) 100%);
    background: -moz-linear-gradient(left, rgba(247, 247, 252, 0) 0%, rgba(247, 247, 252, .95) 100%);
    background: linear-gradient(to right, rgba(247, 247, 252, 0) 0%, rgba(247, 247, 252, .95) 100%);
}

.theme-purple .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(92, 98, 198, 0.5) !important;
}

.theme-purple~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(92, 98, 198, 0.2) !important;
    color: #5c62c6
}

.theme-purple~.container .usage-title-color {
    border-bottom-color: #5c62c6;
}

/*Pink*/
.theme-pink {
    background-color: rgb(252, 247, 251) !important
}

.theme-pink .theme-text-default {
    color: #c65cb5;
}

.theme-pink .theme-border-default {
    border-color: #c65cb5 !important;
}

.theme-pink .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(198, 92, 181, 0.25)
}

.theme-pink .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(252, 247, 251, 0) 0%, rgba(252, 247, 251, .95) 100%);
    background: -o-linear-gradient(left, rgba(252, 247, 251, 0) 0%, rgba(252, 247, 251, .95) 100%);
    background: -moz-linear-gradient(left, rgba(252, 247, 251, 0) 0%, rgba(252, 247, 251, .95) 100%);
    background: linear-gradient(to right, rgba(252, 247, 251, 0) 0%, rgba(252, 247, 251, .95) 100%);
}

.theme-pink .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(198, 92, 181, 0.5) !important;
}

.theme-pink~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(198, 92, 181, 0.2) !important;
    color: #c65cb5
}

.theme-pink~.container .usage-title-color {
    border-bottom-color: #c65cb5;
}

/*Red*/
.theme-red {
    background-color: rgb(253, 245, 245) !important
}

.theme-red .theme-text-default {
    color: #d04747;
}

.theme-red .theme-border-default {
    border-color: #d04747 !important;
}

.theme-red .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(208, 71, 71, 0.25)
}

.theme-red .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(253, 245, 245, 0) 0%, rgba(253, 245, 245, .95) 100%);
    background: -o-linear-gradient(left, rgba(253, 245, 245, 0) 0%, rgba(253, 245, 245, .95) 100%);
    background: -moz-linear-gradient(left, rgba(253, 245, 245, 0) 0%, rgba(253, 245, 245, .95) 100%);
    background: linear-gradient(to right, rgba(253, 245, 245, 0) 0%, rgba(253, 245, 245, .95) 100%);
}

.theme-red .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(208, 71, 71, 0.5) !important;
}

.theme-red~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(208, 71, 71, 0.2) !important;
    color: #d04747
}

.theme-red~.container .usage-title-color {
    border-bottom-color: #d04747;
}

/*Orange*/
.theme-orange {
    background-color: rgb(254, 249, 244) !important
}

.theme-orange .theme-text-default {
    color: #e68035;
}

.theme-orange .theme-border-default {
    border-color: #e68035 !important;
}

.theme-orange .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(230, 128, 53, 0.25)
}

.theme-orange .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(254, 249, 244, 0) 0%, rgba(254, 249, 244, .95) 100%);
    background: -o-linear-gradient(left, rgba(254, 249, 244, 0) 0%, rgba(254, 249, 244, .95) 100%);
    background: -moz-linear-gradient(left, rgba(254, 249, 244, 0) 0%, rgba(254, 249, 244, .95) 100%);
    background: linear-gradient(to right, rgba(254, 249, 244, 0) 0%, rgba(254, 249, 244, .95) 100%);
}

.theme-orange .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(230, 128, 53, 0.5) !important;
}

.theme-orange~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(230, 128, 53, 0.2) !important;
    color: #e68035
}

.theme-orange~.container .usage-title-color {
    border-bottom-color: #e68035;
}

/*Yellow*/
.theme-yellow {
    background-color: rgb(255, 253, 244) !important
}

.theme-yellow .theme-text-default {
    color: #f0d82d;
}

.theme-yellow .theme-border-default {
    border-color: #f0d82d !important;
}

.theme-yellow .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(240, 216, 45, 0.25)
}

.theme-yellow .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(255, 253, 244, 0) 0%, rgba(255, 253, 244, .95) 100%);
    background: -o-linear-gradient(left, rgba(255, 253, 244, 0) 0%, rgba(255, 253, 244, .95) 100%);
    background: -moz-linear-gradient(left, rgba(255, 253, 244, 0) 0%, rgba(255, 253, 244, .95) 100%);
    background: linear-gradient(to right, rgba(255, 253, 244, 0) 0%, rgba(255, 253, 244, .95) 100%);
}

.theme-yellow .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(240, 216, 45, 0.5) !important;
}

.theme-yellow~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(240, 216, 45, 0.2) !important;
    color: #f0d82d
}

.theme-yellow~.container .usage-title-color {
    border-bottom-color: #f0d82d;
}

/*Green*/
.theme-green {
    background-color: rgb(249, 253, 246) !important
}

.theme-green .theme-text-default {
    color: #8CD45B;
}

.theme-green .theme-border-default {
    border-color: #8CD45B !important;
}

.theme-green .usage-search-focus:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(140, 212, 91, 0.25)
}

.theme-green .inner-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(249, 253, 246, 0) 0%, rgba(249, 253, 246, .95) 100%);
    background: -o-linear-gradient(left, rgba(249, 253, 246, 0) 0%, rgba(249, 253, 246, .95) 100%);
    background: -moz-linear-gradient(left, rgba(249, 253, 246, 0) 0%, rgba(249, 253, 246, .95) 100%);
    background: linear-gradient(to right, rgba(249, 253, 246, 0) 0%, rgba(249, 253, 246, .95) 100%);
}

.theme-green .usage-product.active {
    box-shadow: 0 0 0 .2rem rgba(140, 212, 91, 0.5) !important;
}

.theme-green~.container .fits-machines-color {
    box-shadow: 0 .05rem .2rem rgba(140, 212, 91, 0.2) !important;
    color: #8CD45B
}

.theme-green~.container .usage-title-color {
    border-bottom-color: #8CD45B;
}

/*控制這些btn的顏色*/
a[class*="btn-outline-default-"] {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    background-color: #fff;
    color: #676767;
    border-style: solid;
    border-width: 1px;
    border-color: #676767;
}

a[class*="btn-outline-default-"]:hover {
    color: #676767;
}

a[class*="btn-outline-default-"]:active,
a[class*="btn-outline-default-"].active {
    color: #fff;
    border-width: 1px;
}

@media only screen and (min-width: 576px) {

    a[class*="btn-outline-default-"]:active,
    a[class*="btn-outline-default-"].active {
        border-width: 3px;
    }
}

a[class*="btn-outline-default-"].active-icon,
a[class*="btn-outline-default-"].not-active-icon {
    margin-bottom: .25rem;
}

a[class*="btn-outline-default-"]:active .active-icon {
    display: none;
}

a[class*="btn-outline-default-"]:active .not-active-icon {
    display: inline-block !important;
}

/*turquoise*/
.btn-outline-default-turquoise:hover {
    background-color: rgba(58, 200, 173, .2);
}

.btn-outline-default-turquoise:active,
.btn-outline-default-turquoise.active {
    background-color: #3AC8AD;
    border-color: #1D9B83;
}

.btn-outline-default-turquoise.circle-control.active+.angle {
    border-top-color: #3AC8AD !important;
}

/*blue*/
.btn-outline-default-blue:hover {
    background-color: rgba(6, 166, 230, .2);
}

.btn-outline-default-blue:active,
.btn-outline-default-blue.active {
    background-color: #06A6E6;
    border-color: #0D83B2;
}

.btn-outline-default-blue.circle-control.active+.angle {
    border-top-color: #06A6E6 !important;
}

/*purple*/
.btn-outline-default-purple:hover {
    background-color: rgba(92, 98, 198, .2);
}

.btn-outline-default-purple:active,
.btn-outline-default-purple.active {
    background-color: #5c62c6;
    border-color: #29309d;
}

.btn-outline-default-purple.circle-control.active+.angle {
    border-top-color: #5c62c6 !important;
}

/*pink*/
.btn-outline-default-pink:hover {
    background-color: rgba(198, 92, 181, .2);
}

.btn-outline-default-pink:active,
.btn-outline-default-pink.active {
    background-color: #c65cb5;
    border-color: #9f2f8d;
}

.btn-outline-default-pink.circle-control.active+.angle {
    border-top-color: #c65cb5 !important;
}

/*red*/
.btn-outline-default-red:hover {
    background-color: rgba(208, 71, 71, .2);
}

.btn-outline-default-red:active,
.btn-outline-default-red.active {
    background-color: #d04747;
    border-color: #ac2121;
}

.btn-outline-default-red.circle-control.active+.angle {
    border-top-color: #d04747 !important;
}

/*orange*/
.btn-outline-default-orange:hover {
    background-color: rgba(230, 128, 53, .2);
}

.btn-outline-default-orange:active,
.btn-outline-default-orange.active {
    background-color: #e68035;
    border-color: #b35a18;
}

.btn-outline-default-orange.circle-control.active+.angle {
    border-top-color: #e68035 !important;
}

/*yellow*/
.btn-outline-default-yellow:hover {
    background-color: rgba(240, 216, 45, .2);
}

.btn-outline-default-yellow:active,
.btn-outline-default-yellow.active {
    background-color: #f0d82d;
    border-color: #d4bb14;
}

.btn-outline-default-yellow.circle-control.active+.angle {
    border-top-color: #f0d82d !important;
}

/*green*/
.btn-outline-default-green:hover {
    background-color: rgba(140, 212, 91, .2);
}

.btn-outline-default-green:active,
.btn-outline-default-green.active {
    background-color: #8CD45B;
    border-color: #6DB23D;
}

.btn-outline-default-green.circle-control.active+.angle {
    border-top-color: #8CD45B !important;
}

.choice-first {
    cursor: default;
}

/*---------------------------------------*/
#homePills-tab.nav-pills .nav-link.active {
    color: #fff;
    background-color: #676767;
}

#homePills-tab.nav-pills .nav-item {
    position: relative;
}

#homePills-tab.nav-pills img[class*="active-icon"] {
    width: 35px;
}

#homePills-tab.nav-pills .active .active-icon {
    display: none;
}

#homePills-tab.nav-pills .not-active-icon {
    display: none;
}

#homePills-tab.nav-pills .active .not-active-icon {
    display: inline-block;
}

.circle-control {
    position: relative;
    width: 75px;
    height: 75px;
    border-radius: 50% !important;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.2) !important;
    z-index: 2;
}

.circle-control:focus {
    outline: none;
}

/*[100%-(75px*4)]/3*/
.auto-y-gap {
    padding-top: calc(33.333% - 100px);
}

@media only screen and (min-width: 385px) {
    #homePills-tab.nav-pills img[class*="active-icon"] {
        width: 38px;
    }

    .circle-control {
        width: 81px;
        height: 81px;
    }

    /*[100%-(81px*4)]/3*/
    .auto-y-gap {
        padding-top: calc(33.333% - 108px);
    }
}

@media only screen and (min-width: 576px) {
    #homePills-tab.nav-pills img[class*="active-icon"] {
        width: 50px;
    }

    .circle-control {
        width: 104px;
        height: 104px;
    }

    /*[100%-(104px*4)]/3*/
    .auto-y-gap {
        padding-top: calc(33.333% - 138.667px);
    }
}

@media only screen and (min-width: 992px) {
    .circle-control.active+.angle {
        position: absolute;
        top: 102px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        vertical-align: .255em;
        border-top: .8em solid #000;
        border-right: .5em solid transparent;
        border-bottom: 0;
        border-left: .5em solid transparent;
        z-index: 1;
    }
}

@media only screen and (min-width: 768px) {
    .article-dashed {
        margin-bottom: auto;
        padding-top: 51px;
        border-bottom: 2px dashed #bfbfbf;
        width: 2rem;
    }
}

@media only screen and (min-width: 992px) {
    .article-dashed {
        padding-top: 50.5px;
        border-bottom: 1px dashed #bfbfbf;
        width: .5rem;
    }
}

@media only screen and (min-width: 1200px) {
    .article-dashed {
        padding-top: 51px;
        border-bottom: 2px dashed #bfbfbf;
        width: 2rem;
    }
}

/*usage box*/
.inner-shadow-right,
.inner-white-shadow-right {
    position: relative;
}

.inner-shadow-right::before,
.inner-white-shadow-right::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 95%;
    z-index: 1;
}

.inner-white-shadow-right.video-menu::before {
    left: calc(100% - .25rem);
}

.inner-white-shadow-right::before {
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 100%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 100%);
}

/*usage inside*/
.usage-product-box-shadow {
    box-shadow: 0 0 1rem rgba(0, 0, 0, .15) !important;
}

.usage-product-shadow {
    box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.19) !important;
}

.usage-product {
    width: 100%;
    display: inline-flex !important;
    display: -ms-inline-flexbox !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    transition: .3s;
}

.usage-product.active {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(50, 50, 50, 0.5);
    background-color: #fff;
}

.usage-product.home {
    width: 100px;
    padding-right: 0;
    padding-left: 0;
}

.usage-product:not(.home) {
    -ms-flex: 0 0 calc(33.333333% - 1rem);
    flex: 0 0 calc(33.333333% - 1rem);
    max-width: calc(33.333333% - 1rem);
    margin-right: .5rem;
    margin-left: .5rem;
    margin-bottom: 1rem;
}

@media only screen and (min-width: 576px) {
    .usage-product.home {
        width: 135px;
    }

    .usage-product:not(.home) {
        -ms-flex: 0 0 calc(25% - 1rem);
        flex: 0 0 calc(25% - 1rem);
        max-width: calc(25% - 1rem);
    }
}

@media only screen and (min-width: 768px) {
    .usage-product.home {
        width: 160px;
    }

    .usage-product:not(.home) {
        -ms-flex: 0 0 calc(16.666667% - 1rem);
        flex: 0 0 calc(16.666667% - 1rem);
        max-width: calc(16.666667% - 1rem);
    }
}

/*---------------------------------------*/

/* .usage-machine.home {
    display: inline-block;
    width: 220px;
}

@media only screen and (min-width: 768px) {
    .usage-machine.home {
        width: 280px;
    }
}

.usage-title {
    width: auto;
    height: 0;
    margin: 0;
    vertical-align: text-top;
    border-right: 15px solid transparent;
    border-bottom-width: 34px;
    border-bottom-style: solid;
    display: inline-block;
    line-height: 34px;
    font-weight: 700;
    font-size: .9rem;
    font-family: QuanZhenCuMingTi, Microsoft JhengHei;
    letter-spacing: 1px;
}

@media only screen and (min-width: 768px) {
    .usage-title {
        border-right: 20px solid transparent;
        border-bottom-width: 40px;
        line-height: 40px;
        font-size: 1rem;
    }
}

.usage-machine-infobox {
    position: relative;
    overflow: hidden;
    display: block;
    box-shadow: 0 0rem .35rem rgba(0, 0, 0, 0.3);
}

.usage-machine-image {
    background-size: cover !important;
    background-position: center !important;
    padding-top: 100%;
}

.usage-machine-info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(98, 98, 98, 0.64);
    color: white;
}

.usage-machine-info .machine-name {
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
}

.usage-machine-info .machine-id {
    font-size: .85rem;
}

@media only screen and (min-width: 576px) {
    .usage-machine-info .machine-name {
        font-size: 1.2rem;
    }

    .usage-machine-info .machine-id {
        font-size: 1rem;
    }
}

@media only screen and (min-width: 768px) {
    .usage-machine-info .machine-name {
        font-size: 1.5rem;
    }
} */
.usage-machine.home {
    display: inline-block;
    width: 220px;
}

@media only screen and (min-width: 768px) {
    .usage-machine.home {
        width: 280px;
    }
}

.usage-machine {
    border: 1px solid #efefef !important;
    border-radius: 1% !important;
    position: relative;
    overflow: hidden;
}

.usage-title {
    width: auto;
    height: 0;
    margin: 0;
    vertical-align: text-top;
    border-right: 15px solid transparent;
    border-bottom-width: 34px;
    border-bottom-style: solid;
    display: inline-block;
    line-height: 34px;
    font-weight: 700;
    font-size: .9rem;
    font-family: QuanZhenCuMingTi, Microsoft JhengHei;
    letter-spacing: 1px;
}

@media only screen and (min-width: 768px) {
    .usage-title {
        border-right: 20px solid transparent;
        border-bottom-width: 40px;
        line-height: 40px;
        font-size: 1rem;
    }
}

.usage-machine-infobox {
    display: block;
    padding-top: 1rem;
    padding-bottom: .5rem;
}

.usage-machine-image {
    background-size: contain !important;
    background-position: center !important;
    padding-top: 75%;
    background-repeat: no-repeat;
}

.usage-machine-info {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: 1rem;
}

.usage-machine-info .machine-name {
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
}

.usage-machine-info .machine-id {
    font-size: .85rem;
}

@media only screen and (min-width: 576px) {
    .usage-machine-info .machine-name {
        font-size: 1rem;
    }

    .usage-machine-info .machine-id {
        font-size: .9rem;
    }
}

@media only screen and (min-width: 768px) {
    .usage-machine-info {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1.5rem;
    }

    .usage-machine-info .machine-name {
        font-size: 1.2rem;
    }
}

.usage-check-box {
    border-top: 1px solid #e9e9e9;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .1s;
    font-size: .9rem;
    /* box-shadow: 0 0rem .35rem rgba(0, 0, 0, 0.3); */
}

@media only screen and (min-width: 576px) {
    .usage-check-box {
        font-size: 1rem;
    }
}

/* .usage-check-box:hover {
    background-color: #edf8ef;
}

.usage-check-box.active {
    background-color: #70C684;
    color: white;
} */

.usage-check-box.active {
    background-color: #f9fffa;
    color: #7bc288;
}

.usage-check-box svg {
    /* box-shadow: 0 .05rem .25rem rgba(0, 0, 0, 0.25) !important; */
    transition: .1s;
    width: 24px;
    height: 24px;
}

.usage-check-box svg.checked {
    display: none;
}

.usage-check-box.active svg.plus {
    display: none;
}

.usage-check-box.active svg.checked {
    display: inline-block;
    /* background-color: #549759; */
}

@media only screen and (min-width: 576px) {
    .usage-check-box svg {
        width: 32px;
        height: 32px;
    }
}

.cart-box {
    background: linear-gradient(to bottom, #858585 0%, #858585 100%);
    padding: 18px;
    transition: .1s;
}

.usage-check-box.active .cart-box {
    background: linear-gradient(to bottom, #F28250 0%, #FF5E5E 100%);
    transition: .1s;
}

/*usage title color*/
/*turquoise*/
.usage-title-turquoise {
    border-bottom-color: #3AC8AD !important;
}

/*blue*/
.usage-title-blue {
    border-bottom-color: #06A6E6 !important;
}

/*darkblue*/
.usage-title-darkblue {
    border-bottom-color: #5c62c6 !important;
}

/*purple*/
.usage-title-purple {
    border-bottom-color: #8559c6 !important;
}

/*pink*/
.usage-title-pink {
    border-bottom-color: #c65cb5 !important;
}

/*red*/
.usage-title-red {
    border-bottom-color: #d04747 !important;
}

/*orange*/
.usage-title-orange {
    border-bottom-color: #e68035 !important;
}

/*yellow*/
.usage-title-yellow {
    border-bottom-color: #f0d82d !important;
}

/*green*/
.usage-title-green {
    border-bottom-color: #8CD45B !important;
}

/*dark*/
.usage-title-dark {
    border-bottom-color: #727272 !important;
}

/*FX*/
.usage-title-TPGL {
    border-bottom-color: #5fddcb;
}

/*SR*/
.usage-title-SR {
    border-bottom-color: #69bfed;
}

/*SL*/
.usage-title-SL {
    border-bottom-color: #f98e96;
}

/*PY*/
.usage-title-PY {
    border-bottom-color: #ff784e;
}

/*MSW*/
.usage-title-MSW {
    border-bottom-color: #b5cb6a;
}

/*UVGL*/
.usage-title-UVGL {
    border-bottom-color: #9aa7b3;
}

/*PU*/
.usage-title-PU {
    border-bottom-color: #fdbb95;
}

/*TPC*/
.usage-title-TPC {
    border-bottom-color: #577fff;
}

/*MGLA*/
.usage-title-MGLA {
    border-bottom-color: #a46fe6;
}

/*footer top btn*/
.top-btn {
    transform: rotate(45deg);
    transition: .3s;
    width: 46px;
    height: 46px;
    border: 4px solid #666666;
    background-color: #fff;
}

.top-btn:hover {
    transform: rotate(135deg);
    transition: .3s;
    border: 4px solid #fff;
    background-color: #666666;
}

.top-btn .top-btn-icon {
    transform: rotate(-45deg);
    transition: .3s;
    color: #666666;
}

.top-btn:hover .top-btn-icon {
    transform: rotate(-135deg);
    transition: .3s;
    color: #fff;
}

/*inner page*/

.cat-link {
    display: inline-block;
    padding: .125rem .25rem;
    margin: .125rem .5rem;
    border-bottom: 1.5px solid transparent;
}

@media only screen and (min-width: 768px) {
    .cat-link {
        margin: 0 0 .4rem;
    }
}

.cat-link:hover,
.cat-link.active {
    color: #ff975c;
    border-bottom: 1.5px solid #ff975c;
}

h1.bottom-line {
    margin-bottom: 1rem;
}

h1.bottom-line span.to-left {
    position: relative;
    display: inline-block;
}

h1.bottom-line span.to-left::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: -.5rem;
    background: #fff;
    width: 100vw;
    height: 1px;
}

/*頁簽*/

#device-page.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #fc685a;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-link:hover {
    z-index: 2;
    color: #d83424;
    text-decoration: none;
    background-color: #fff1f1;
    border-color: #dee2e6;
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(253, 149, 139, 0.49);
}

.page-item.active .page-link {
    background-color: #fc685a;
    border-color: #fc685a;

}

/*aboutus*/

.aboutus-bg {
    position: relative;
}

.aboutus-bg::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgb(231, 246, 255, .05), #e6f5fe, #86d0fb, #6eb8e3, #5da7d2, #4590bb, #2d78a3, #124e70);
    width: calc(3vw - .5rem)
}

.border-2px {
    border-width: 1px;
    border-style: solid;
}

.circle-20px {
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.circle-center-r {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%)
}

.circle-center-l {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%)
}

/*color 86d0fb*/

.bg-86d0fb {
    background-color: #86d0fb;
}

.border-86d0fb {
    border-color: #86d0fb;
}

.text-86d0fb {
    color: #86d0fb;
}

/*color 6eb8e3*/

.bg-6eb8e3 {
    background-color: #6eb8e3;
}

.border-6eb8e3 {
    border-color: #6eb8e3;
}

.text-6eb8e3 {
    color: #6eb8e3;
}

/*color 5da7d2*/

.bg-5da7d2 {
    background-color: #5da7d2;
}

.border-5da7d2 {
    border-color: #5da7d2;
}

.text-5da7d2 {
    color: #5da7d2;
}

/*color 4590bb*/

.bg-4590bb {
    background-color: #4590bb;
}

.border-4590bb {
    border-color: #4590bb;
}

.text-4590bb {
    color: #4590bb;
}

/*color 2d78a3*/

.bg-2d78a3 {
    background-color: #2d78a3;
}

.border-2d78a3 {
    border-color: #2d78a3;
}

.text-2d78a3 {
    color: #2d78a3;
}

/*color 124e70*/

.bg-124e70 {
    background-color: #124e70;
}

.border-124e70 {
    border-color: #124e70;
}

.text-124e70 {
    color: #124e70;
}

/*circle glowing animation*/

.circle-glowing {
    background-color: rgba(80, 80, 80, .06);
    border-radius: 50%;
    animation-name: circleglowing;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

@keyframes circleglowing {
    0% {
        opacity: 1;
        width: 0;
        height: 0;
    }

    60% {
        opacity: 1;
        width: 60px;
        height: 60px;
    }

    98% {
        opacity: 0;
        width: 60px;
        height: 60px;
    }

    99% {
        opacity: 0;
        width: 0;
        height: 0;
    }

    100% {
        opacity: 1;
        width: 0;
        height: 0;
    }
}

/*video*/

.video-infobox .video-img {
    transform: scale(1.4, 1.4);
    transition: 0.5s;
}

.video-infobox:hover .video-img {
    transform: scale(1.6, 1.6);
}

.video-infobox .video-icon {
    color: rgb(0, 0, 0);
    transition: 0.5s;
}

.video-infobox:hover .video-icon {
    color: rgb(255, 255, 255);
}

[data-video-type*="video-"] {
    transition: .3s;
}

/*usage title color, appointed name is only for page device and video*/
/*turquoise 移印機*/
.usage-title-turquoise {
    border-bottom-color: #3AC8AD !important;
}

.btn-default-turquoise {
    color: #fff;
    border-color: #3ac8ad;
    background-color: #3ac8ad;
}

.btn-default-turquoise:hover {
    color: #fff;
    background-color: #2c9a85;
    border-color: #2c9a85;
}

.btn-default-turquoise:focus {
    box-shadow: 0 0 0 .2rem rgba(58, 200, 173, 0.34);
}

/*blue 網印機*/
.usage-title-blue {
    border-bottom-color: #06A6E6 !important;
}

.btn-default-blue {
    color: #fff;
    border-color: #06a6e6;
    background-color: #06a6e6;
}

.btn-default-blue:hover {
    color: #fff;
    background-color: #0b8ec3;
    border-color: #0b8ec3;
}

.btn-default-blue:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*darkblue 熱轉燙印*/
.usage-title-darkblue {
    border-bottom-color: #5c62c6 !important;
}

.btn-default-darkblue {
    color: #fff;
    border-color: #5c62c6;
    background-color: #5c62c6;
}

.btn-default-darkblue:hover {
    color: #fff;
    background-color: #4a4f9e;
    border-color: #4a4f9e;
}

.btn-default-darkblue:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*purple 印刷機*/
.usage-title-purple {
    border-bottom-color: #8559c6 !important;
}

.btn-default-purple {
    color: #fff;
    border-color: #8559c6;
    background-color: #8559c6;
}

.btn-default-purple:hover {
    color: #fff;
    background-color: #693aae;
    border-color: #693aae;
}

.btn-default-purple:focus {
    box-shadow: 0 0 0 .2rem rgba(92, 98, 198, 0.25);
}

/*pink 移網印製版*/
.usage-title-pink {
    border-bottom-color: #c65cb5 !important;
}

.btn-default-pink {
    color: #fff;
    border-color: #c65cb5;
    background-color: #c65cb5;
}

.btn-default-pink:hover {
    color: #fff;
    background-color: #ae3d9c;
    border-color: #ae3d9c;
}

.btn-default-pink:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*red 火焰處理機*/
.usage-title-red {
    border-bottom-color: #d04747 !important;
}

.btn-default-red {
    color: #fff;
    border-color: #d04747;
    background-color: #d04747;
}

.btn-default-red:hover {
    color: #fff;
    background-color: #bb2929;
    border-color: #bb2929;
}

.btn-default-red:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*orange 油墨*/
.usage-title-orange {
    border-bottom-color: #e68035 !important;
}

.btn-default-orange {
    color: #fff;
    border-color: #e68035;
    background-color: #e68035;
}

.btn-default-orange:hover {
    color: #fff;
    background-color: #e68035;
    border-color: #e68035;
}

.btn-default-orange:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*yellow UV/IR乾燥設備*/
.usage-title-yellow {
    border-bottom-color: #f0d82d !important;
}

.btn-default-yellow {
    color: #fff;
    border-color: #f0d82d;
    background-color: #f0d82d;
}

.btn-default-yellow:hover {
    color: #fff;
    background-color: #e8cc08;
    border-color: #e8cc08;
}

.btn-default-yellow:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*green 其他機械*/
.usage-title-green {
    border-bottom-color: #8CD45B !important;
}

.btn-default-green {
    color: #fff;
    border-color: #8CD45B;
    background-color: #8CD45B;
}

.btn-default-green:hover {
    color: #fff;
    background-color: #8CD45B;
    border-color: #8CD45B;
}

.btn-default-green:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*dark 墨杯*/
.usage-title-dark {
    border-bottom-color: #727272 !important;
}

.btn-default-dark {
    color: #fff;
    border-color: #727272;
    background-color: #727272;
}

.btn-default-dark:hover {
    color: #fff;
    background-color: #727272;
    border-color: #727272;
}

.btn-default-dark:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 166, 230, 0.25);
}

/*position*/
.trbl-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.trbl-tbl-0 {
    top: 0;
    bottom: 0;
    left: 0;
}

.trbl-rl-0 {
    right: 0;
    left: 0;
}

/*row-col-gutters*/

.gutters-1 {
    margin-left: -.25rem !important;
    margin-right: -.25rem !important;
    margin-top: -.25rem !important;
    margin-bottom: -.25rem !important;
}

.gutters-1>[class*="col"] {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.gutters-2 {
    margin-left: -.5rem !important;
    margin-right: -.5rem !important;
}

.gutters-2>[class*="col"] {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

@media only screen and (min-width: 576px) {
    .gutters-sm-2 {
        margin-left: -.5rem !important;
        margin-right: -.5rem !important;
    }

    .gutters-sm-2>[class*="col"] {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }
}

@media only screen and (min-width: 996px) {
    .gutters-lg-2 {
        margin-left: -.5rem !important;
        margin-right: -.5rem !important;
    }

    .gutters-lg-2>[class*="col"] {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }
}

@media only screen and (min-width: 576px) {
    .gutters-sm-3 {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        margin-bottom: -1rem !important;
        margin-top: -1rem !important;
    }

    .gutters-sm-3>[class*="col"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
        padding-top: 1rem !important;
    }
}

/*img*/
.img-brightness-90 {
    filter: brightness(0.90);
}

.smallsize-img {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    padding-top: 100%;
}

/*bg-image*/
.bg-cover {
    background-size: cover !important;
}

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

.bg-center {
    background-position: center;
}

.bg-no-repeat {
    background-repeat: no-repeat !important;
}

.bg-attachment-fixed {
    background-attachment: fixed;
}

.bg-position-top {
    background-position: 50% 0;
}

.bg-position-bottom {
    background-position: 50% 100%;
}

.bg-position-right {
    background-position: 100% 50%;
}

/*bg-color*/
.bg-black {
    background-color: #000
}

.bg-default {
    background-color: #676767
}

.bg-transparent {
    background-color: transparent;
}

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

.bg-3B76FF {
    background-color: #3B76FF;
}

.bg-6BCE36 {
    background-color: #6BCE36;
}

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

/*btn*/
.btn-outline-white {
    color: #fff;
    border-color: #fff;
}

.btn-outline-white:hover {
    color: #212529;
    background-color: #fff;
    border-color: #fff;
}

.btn-outline-white:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5);
}

.btn-outline-and-white {
    color: #fff;
    background-color: rgba(255, 255, 255, .25);
    border-color: #fff;
}

.btn-outline-and-white:hover {
    color: #212529;
    background-color: #fff;
    border-color: #fff;
}

.btn-outline-and-white:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5);
}

#product-img-tab.nav-pills .nav-link.active,
#product-img-tab.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #ff975c;
}

#product-img-tab .nav-link {
    padding: .2rem .2rem;
}

.btn-orange {
    color: #fff;
    border-color: #ff975c;
    background-color: #ff975c;
}

.btn-orange:hover {
    color: #fff;
    background-color: #ff8540;
    border-color: #ff8540;
}

.btn-orange:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #ff8540;
    border-color: #ff8540;
}

.btn-orange:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 151, 92, 0.52);
}

.btn-outline-orange {
    color: #ff975c;
    border-color: #ff975c;
    background-color: #fff;
}

.btn-outline-orange:hover {
    color: #fff;
    background-color: #ff975c;
    border-color: #ff975c;
}

.btn-outline-orange:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #ff975c;
    border-color: #ff975c;
}

.btn-outline-orange:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 151, 92, 0.52);
}

.btn-outline-green {
    position: relative;
    color: #28a745;
    border-color: #28a745;
    background-color: #fff;
    z-index: 10000;
}

.btn-outline-green:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-outline-green:focus {
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5);
}

.btn-outline-5085ff {
    color: #5085ff;
    border-color: #5085ff;
    background-color: #fff;
}

.btn-outline-5085ff:hover {
    color: #fff;
    background-color: #5085ff;
    border-color: #5085ff;
}

.btn-outline-5085ff:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #5085ff;
    border-color: #5085ff;
}

.btn-outline-5085ff:focus {
    box-shadow: 0 0 0 .2rem rgba(80, 133, 255, 0.32);
}

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

.btn-fc685a:hover {
    color: #fff;
    background-color: #e23a2a;
    border-color: #e23a2a;
}

.btn-fc685a:focus {
    box-shadow: 0 0 0 .2rem rgba(254, 7, 7, 0.28);
}

.btn-outline-fc685a {
    color: #fc685a;
    border-color: #fc685a;
    background-color: #fff;
}

.btn-outline-fc685a:hover {
    color: #fff;
    background-color: #fc685a;
    border-color: #fc685a;
}

.btn-outline-fc685a:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #fc685a;
    border-color: #fc685a;
}

.btn-outline-fc685a:focus {
    box-shadow: 0 0 0 .2rem rgba(252, 104, 90, 0.39);
}


/*w*/
.w-65px {
    width: 65px;
}

@media only screen and (min-width: 992px) {
    .w-lg-85px {
        width: 85px;
    }
}

/*font-size*/
.font-xs,
.font-08rem,
.font-0-8rem {
    font-size: .8rem;
}

.font-sm,
.font-0-9rem {
    font-size: .9rem;
}

.font-lg,
.font-1-1rem {
    font-size: 1.1rem;
}

.font-xl,
.font-1-2rem {
    font-size: 1.2rem;
}

.font-xxl,
.font-1-5rem {
    font-size: 1.5rem;
}

.font-1-7rem {
    font-size: 1.7rem;
}

.font-2rem {
    font-size: 2rem;
}

.font-2-2rem {
    font-size: 2.2rem;
}

.font-3rem {
    font-size: 3rem;
}

.font-20 {
    font-size: 20px;
}

.font-21 {
    font-size: 21px;
}

.font-24 {
    font-size: 24px;
}

.font-48 {
    font-size: 48px;
}

.font-50 {
    font-size: 50px
}

@media only screen and (min-width: 576px) {
    .font-sm-1rem {
        font-size: 1rem;
    }

    .font-sm-lg,
    .font-sm-1-1rem {
        font-size: 1.1rem;
    }

    .font-sm-1-25rem {
        font-size: 1.25rem;
    }

    .font-sm-18 {
        font-size: 18px;
    }
}

@media only screen and (min-width: 768px) {
    .font-md-1-25rem {
        font-size: 1.25rem;
    }

    .font-md-2rem {
        font-size: 2rem;
    }

    .font-md-2-5rem {
        font-size: 2.5rem;
    }
}

@media only screen and (min-width: 992px) {

    .font-lg-lg,
    .font-lg-1-1rem {
        font-size: 1.1rem;
    }

    .font-lg-xxl,
    .font-lg-1-5rem {
        font-size: 1.5rem;
    }

    .font-lg-3rem {
        font-size: 3rem;
    }
}

/*letter space*/
.letter-spacing-1px {
    letter-spacing: 1px !important;
}

.letter-spacing-2px {
    letter-spacing: 2px !important;
}

.letter-spacing-4px {
    letter-spacing: 4px !important;
}

/*m&p*/

.pl-5rem {
    padding-left: 5rem;
}

.pl-6rem {
    padding-left: 6rem;
}

.pl-7rem {
    padding-left: 7rem;
}

.pt-2rem {
    padding-top: 2rem;
}

.pt-100 {
    padding-top: 100%;
}

.pt-70 {
    padding-top: 70%;
}

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

.ml-extend-1 {
    margin-left: -.25rem;
}

.mr-extend-1 {
    margin-right: -.25rem;
}

.mx-extend-2 {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.ml-sub30px {
    margin-left: -30px;
}

@media only screen and (min-width: 1200px) {
    .mx-xl-sub3 {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

/*text*/
.text-default {
    color: #222
}

.text-615cc6 {
    color: #615cc6
}

/*text shadow*/

.text-shadow-dark {
    text-shadow: 1px 1px 0 #000;
}

.text-shadow-dark-2 {
    text-shadow: 0 0 2px #000;
}

.text-shadow-white {
    text-shadow: 0 0 1px #fff;
}

/*border*/
.border-default {
    border-color: #676767 !important;
}

.border-615cc6 {
    border-color: #615cc6 !important;
}

.border-2px-615cc6 {
    border: 2px solid #615cc6;
}

.border-2px-615cc6 {
    border: 2px solid #615cc6;
}

.shadow-darker {
    box-shadow: 0 .1rem .6rem rgba(20, 30, 30, 0.5) !important;
}

/*line hight*/
.lh-100 {
    line-height: 1;
}

.lh-125 {
    line-height: 1.25;
}

/*opacity*/

.opacity-0 {
    opacity: 0;
}

.opacity-8 {
    opacity: .8;
}

/**/
.cursor-pointer {
    cursor: pointer;
}

.box-middle {
    transform: translateY(-50%);
}

/*旁邊的圈圈*/
/*576以下不要有*/
@media only screen and (max-width: 576px) {
    #sticky-bottom {
        display: none !important
    }
}

#sticky-bottom {
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 1030;
    color: #5e5e5e;
}

#sticky-bottom .sticky-search-box {
    height: 50px;
    border: 1.5px solid #888;
    border-radius: 50rem;
    background-color: rgba(255, 255, 255, .4);
    transition: .2s;
}

#sticky-bottom .sticky-search-box i {
    color: #5e5e5e;
}

#sticky-bottom .sticky-search-box .sticky-search-input {
    width: 46px;
    transition: .2s;
    border-radius: 50rem;
}

#sticky-bottom .sticky-search-box:hover {
    background-color: rgba(241, 236, 248, .95);
    color: #404040;
    border: 1.5px solid #404040;
}

#sticky-bottom .sticky-search-box:hover i {
    color: #404040;
}

#sticky-bottom .sticky-search-box:hover .sticky-search-input {
    width: 200px;
}

#sticky-bottom .sticky-search-box .sticky-search-input:focus {
    width: 200px;
    background-color: rgba(241, 236, 248, .95) !important;
    box-shadow: 0 0 0 .2rem rgba(241, 236, 248, 0.25);
    outline: 0;
}

#sticky-bottom .circle-btn {
    width: 50px;
    height: 50px;
    border: 1.5px solid #888;
    border-radius: 50rem;
    background-color: rgba(255, 255, 255, .4);
    transition: .2s;
}

#sticky-bottom .circle-btn:hover {
    background-color: rgba(241, 236, 248, .95);
    color: #404040;
    border: 1.5px solid #404040;
}

/*麵包屑*/

.breadcrumb {
    background: none;
}

.breadcrumb-item.active {
    color: #000 !important;
}

/*contactus*/

.nav-contactus {
    color: #676767;
    background-color: #fff;
    border-top: 1px solid #dee2e6 !important;
    border-left: 1px solid #dee2e6 !important;
}

.nav-contactus.active {
    color: #fff !important;
    background-color: #5085ff !important;
}

.nav-theform {
    color: #676767;
    background-color: #fff;
    border-top: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;
}

.nav-theform.active {
    color: #fff !important;
    background-color: #fc685a !important;
}

@media only screen and (max-width: 575.9px) {
    .nav-theform {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .nav-contactus {
        border-bottom: 1px solid #dee2e6 !important;
    }
}

@media only screen and (min-width: 576px) {
    .contactus-card {
        border: 1px solid #dee2e6;
        background-color: #fff;
    }

    .bg-f2f6ff {
        background-color: #f2f6ff !important;
    }

    .bg-fff1f0 {
        background-color: #fff1f0 !important;
    }
}

.form-color {
    background-color: #ebf3ff;
    border: 1px solid #676767;
}

.contactus-other {
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border-radius: .25rem;
}

.contactus-other:focus {
    color: #495057;
    background-color: #ebf3ff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.form-control:focus {
    color: #495057;
    background-color: #ebf3ff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.text-orange {
    color: #fc685a;
}

.text-blue {
    color: #5085ff;
}

/*文字左右線條*/

/*灰色*/

.line-676767 {
    text-align: center;
    color: #676767;
    position: relative;
}

.line-676767::before {
    right: 0;
}

.line-676767::after {
    left: 0;
}

.line-676767::before,
.line-676767::after {
    content: "";
    position: absolute;
    top: 50%;
    background: #aaa;
    width: calc(50% - 36px);
    height: 1px;
}

/*橘色*/

.line-ff975c {
    text-align: center;
    color: #ff975c;
    position: relative;
}

.line-ff975c::before {
    left: 0;
}

.line-ff975c::after {
    right: 0;
}

.line-ff975c::before,
.line-ff975c::after {
    content: "";
    position: absolute;
    top: 50%;
    background: #ff975c;
    width: calc(50% - 63px);
    height: 1px;
}

/*綠色*/

.line-17A680 {
    text-align: center;
    color: #17A680;
    position: relative;
}

.line-17A680::before {
    left: 0;
}

.line-17A680::after {
    right: 0;
}

.line-17A680::before,
.line-17A680::after {
    content: "";
    position: absolute;
    top: 50%;
    background: #17A680;
    width: calc(100%);
    height: 1px;
}

/*文字左右線條結束*/

@media only screen and (min-width: 768px) {
    .border-right-md-4px {
        border-right: 4px solid #fff;
    }

}

/*Q&A*/

.check-icon-change {
    cursor: pointer;
}

.check-icon-change[aria-expanded="true"] .icon-change {
    transform: rotateX(180deg);
    transition: .3s;
}

.icon-change {
    cursor: pointer;
    transform: rotateX(0);
    transition: .3s;
}

/*dropdown-mnue結束*/

/* 產品 column */
@media only screen and (min-width: 576px) {
    .column-count-sm-2 {
        column-count: 2;
    }
}

@media only screen and (min-width: 768px) {
    .column-count-md-2 {
        column-count: 2;
    }
}

@media only screen and (min-width: 992px) {
    .column-count-lg-2 {
        column-count: 2;
    }
}

@media only screen and (min-width: 1200px) {
    .column-count-xl-2 {
        column-count: 2;
    }
}

.column-count-sm-2 ul,
.column-count-md-2 ul,
.column-count-lg-2 ul,
.column-count-xl-2 ul {
    margin: 0;
    margin-left: 17px;
    padding: 0;
}

/* 側欄 */
.check-icon-spin {
    cursor: pointer;
}

.check-icon-spin[aria-expanded="true"] .icon-spin {
    transform: translate(-50%, -50%) rotate(0deg);
}

.check-icon-spin[aria-expanded="true"] .icon-spin-2 {
    transform: translate(-50%, -50%) rotate(0deg);
}

.icon-spin {
    transition: .3s;
    transform: translate(-50%, -50%) rotate(-180deg);
}

.icon-spin-2 {
    transform: translate(-50%, -50%) rotate(-90deg);
    transition: .3s;
}

.icon-dash {
    position: absolute;
    top: 50%;
    right: 0;
    cursor: pointer;
}

.icon-line {
    background-color: #676767 !important;
    width: .75rem;
    height: 2px;
}

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

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

.product-cat-link {
    display: inline-block;
    border-bottom: 1.5px solid transparent;
}

.product-cat-link:hover,
.product-cat-link.active {
    font-weight: 600;
}

.list-cat-link {
    padding-top: .3rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    padding-bottom: .3rem;
    border-bottom: 1.5px solid transparent;
    list-style: none;
}


.list-cat-link:first-child {
    padding-top: .6rem;
}


.list-cat-link:last-child {
    padding-bottom: .6rem;
}

.list-cat-link:hover,
.list-cat-link.active {
    font-weight: 600;
}

.h-55 {
    height: 55%;
}

/* 側欄結束 */

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-1 {
    width: 116px !important;
}

.swiper-2 {
    width: 237px !important;
}

@media (min-width: 576px) {
    .swiper-1 {
        width: 155px !important;
    }
}

@media (min-width: 768px) {
    .swiper-1 {
        width: 177px !important;
    }

    .swiper-2 {
        width: 300px !important;
    }
}