@charset "utf-8";
/*// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }*/
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Mukta&display=swap');
/*去除按鈕框線*/
.button:active, button:active, .button:focus, button:focus, .button:hover, button:hover {
    outline: none !important;
}
textarea:focus, textarea.form-control:focus, input.form-control:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, [type=text].form-control:focus, [type=password].form-control:focus, [type=email].form-control:focus, [type=tel].form-control:focus, [contenteditable].form-control:focus {
    box-shadow: none;
}
.container {
    transition: all 0.9s ease 0s;
}
button {
    cursor: pointer;
}
html {
    font-size: 100%;
}
body {
    font-family: 'Tahoma'，'Verdana'，'Segoe'， 'Mukta', sans-serif；;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden;
    font-display: swap;
}
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #003882;
    text-decoration: none;
    transition: all 0.9s;
}
/*全選底色*/
::selection {
    background: #003882;
    color: #FFF;
}
/*通用顏色*/
.c-003882 {
    color: #003882;
}
/*上選單*/ 
.top-menu {
    background: #d9e5f0;
    width: 100vw;
    font-size: 1.3em;
}
.top-menu a.nav-link:hover {
    background: #003882;
    color: #FFF!important;
}
.navbar-mobile {
    font-size: 1.125em;
}
.moble-sub-nav li{
    border-left: solid 3px #FFF;
    padding-left: 15px;
}
.moble-sub-nav li li{
    border-left: solid 0px #003882;
    padding-left: 0px;

    
}
.moble-sub-nav li li:before{
    content: '▪ ';
}
.bsnav-mobile .navbar {
    padding: 140px 0 15px;
}
header .navbar-expand-lg .navbar-nav .nav-link,header .navbar-nav .nav-link {
    padding: 10px 57px;
}
@media (max-width: 767.98px) {
.navbar-brand img {
    width: 200px;
}
.navbar-brand h4 {
    font-size: 1em;
}
}
/*2選單*/ 
.index-item {
    background: #003882;
    color: #FFF;
    text-align: center;
    font-size: 1.5em;
}

/*輪播*/ 
.carousel-control-prev, .carousel-control-next {
    z-index: 45;
}
.carousel-indicators {
    bottom: -15px;
}
.carousel-caption {
    position: absolute;
    right: 0;
    bottom: 25px;
    left: auto;
    z-index: 10;
    padding: 20px 40px;
    color: #fff;
    text-align: center;
    background: rgba( 0,0,0,.4);
    width: 100%;
}
.carousel-caption h5 {
    font-size: 2em;
    margin-bottom: 0;
}
.carousel-caption p {
    font-size: 1em;
}
.carousel-control-prev, .carousel-control-next {
    width: 5%;
}
@media (max-width: 767.98px) {
.carousel-caption {
    bottom: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.carousel-caption h5 {
    font-size: 1.2em;
    margin-bottom: 0;
}
.carousel-caption p {
    font-size: .7em;
    ;
}
}
/* ------滑入圖片放大------ */
.img-zoom:hover img {
    opacity: 1;
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
    filter: brightness(110%);
}
.img-zoom:hover p {
    color: #7fa7cb;
}
.img-zoom img {
    margin: 0 auto;
    display: block;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    filter: brightness(100%);
}
.img-zoom > div {
    overflow: hidden;
}
.link-pointer {
    cursor: pointer;
}
/*回到最上*/
.to-top a.to-top {
    width: 50px;
    height: 50px;
    background: #FFF;
    color: #003882;
    border: solid 1px #003882;
    align-items: center;
    justify-content: center;
    display: flex;
    text-decoration: none;
    transition: all 0.9s ease 0s;
    border-radius: 0%;
    font-size: 30px;
}
.to-top a.to-top:hover {
    background: #003882;
    color: #FFF;
    text-decoration: none;
    border-radius: 50%;
}
footer {
    font-size: .8em;
    background: #EEE;
}

/*主標區*/
.ibg {
 color: #FFF;
   background:url("../images/ibg.jpg");
   background-position: top center;
   background-size: cover;
   height: 120px;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
}

.ibg h3 {
   font-size: 3.5em;
   font-weight: 600;
   letter-spacing: 2px;
   text-align: center;
   font-variant-caps: all-petite-caps;
    color: #FFF;
}
@media (max-width: 767.98px) {
.ibg {
   height: 90px;
}

.ibg h3 {
   font-size: 2.5em;
}
}
/*路徑*/
.breadcrumb {
    background-color: transparent;
}

/*產品左選單*/
.left-mav-box h3{
    background: #003882;
    color: #FFF;
    padding: 5px 20px;
    
}
.left-mav-box{
   font-size: 1.125em;
}
.left-mav-box .navbar-nav{
    border-left: solid 2px #EEE;
    margin-top: 10px;
}
.nav-title{
    font-weight: bold;
    margin-top:10px;
    display: block;
    color: #003882;
}
.left-mav-box ul{
    padding: 5px 20px;

}

/*右產品*/
.product-box{
    margin-bottom: 20px;
}
/*右產品表格*/
.bg-E9ECEF{
    background:#E9ECEF ;
}
.table th, .table td {
    padding: 0.75rem;
    vertical-align:middle;
    border-top: 1px solid #dee2e6;
}

/*-----button------*/
.button {
    text-align: center;
    border: 0px solid transparent;
    background: #003882;
    color: #ffffff;
    display: inline-block;
    text-transform: capitalize;
    vertical-align: middle;
    padding: 8px 10px;
    transform: perspective(1px) translateZ(0);
    position: relative;
    transition-property: color;
    transition-duration: 0.5s;
}
.button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}
.button:hover, .button:focus, .button:active {
    color: #ffffff;
    text-decoration: none;
}
.button:hover:before, .button:focus:before, .button:active:before {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.50);
}



.caret-active{
    color: #003882;
}

.product-table i{
    color: #FFF;padding: 0;margin: 0;
}

/*-----分頁------*/
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #003882;
    border-color: #003882;
}



/* 表格先隱藏 */
div#example_length {
    display: none;
}

div#example_paginate {
    display: none;
}


div#example_info {
    display: none;
}
.product_info table{
    max-width: 100%;
}

.navbar{
    display: block;
    padding: 0;
}
.bsnav-brand-top .navbar-brand{
    margin: 15px;
    margin-left: 10%;
}
@media screen and (max-width: 991px){
    .bsnav-brand-top .navbar-brand{
        margin: 15px;
        margin-left: 0;
    }
    .bsnav-brand-top.navbar-expand-lg .navbar-brand{

    left: 5%;
    transform:none;
    }
    .navbar-toggler{
        position: absolute;
        right: 20px;
        top: 60px;
    }
}
.prdList .prdImg{
    height: 200px;
    width: 200px;
    object-fit: contain;
}
/*
.bsnav-brand-top{
    padding-top: 5px;
}
*/