@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
    margin: 0px;
    padding: 0px;
}
.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}
/* 搜尋框下拉效果 */
	.ui-autocomplete {
		text-align: left;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding:0 10px;
		font-family: "PT Serif", serif;
		font-size: 20px;
		font-weight: 700;
		font-style: italic;		
	}
    .ui-menu-item {
        border-bottom: 1px dashed;
		color: #fff;
		padding:2px 0;			
    }
	.ui-state-active,
	.ui-widget-content .ui-state-active,
	.ui-widget-header .ui-state-active,
	a.ui-button:active,
	.ui-button:active,
	.ui-button.ui-state-active:hover {
		border: 1px solid #000000;
		background-color: rgba(0, 0, 0, 0.5);
		font-family: "PT Serif", serif;
		font-size: 24px;
		font-weight: 900;
		font-style: italic;
	}
/* 搜尋框下拉效果END */	

.hr-dashed2 {
    border: 0;
    border-top: 2px dashed #000000;
	margin-top: 40px;
	margin-bottom: 40px;
}

/* welcome start */


/* 產品照片 =============================================== */
.picbox {
    cursor: pointer;
    margin: 1.25%;
    flex: none;
    display: flex;
    width: 22.5%;
    text-align: center;
    height: 257px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-top: none;
    border-right: none;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    box-shadow: 5px 5px 5px -5px #9a9999;
}

.product_picbox{ /*最終產品頁的照片DIV*/
    max-width: 600px; /* 默认宽度 */
    max-height: 600px; /* 容器高度根据内容调整 */
    object-position: center center;
    object-fit: scale-down;	
    display: flex; /* 避免不必要的额外宽度 */
    overflow: hidden; /* 确保内容不会溢出 */
    flex: none;
    border-radius: 10px;
    box-shadow: 5px 5px 5px -5px #9a9999;
    background-color: white;
    margin-right: 20px;
}

.product_pic {
    width: 100%; /* 默认图片宽度填充容器 */
    height: auto; /* 保持图片比例 */
    object-fit: contain; /* 根据需要调整为 cover/contain */
    max-height: 600px; /* 限制高度 */
    max-width: 600px; /* 限制宽度 */
    margin: auto;
}

.product_box{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: auto;
    margin-bottom: 10px;
}

.product_detail hr, .product_detail .p1{
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

.detail{
    padding: 10px;
    flex: 1 1 auto; /* 可选：灵活占据空间 */
    gap: 10px; /* 可选：子元素间距 */
}

.col{
    line-height: 1.8;
    border-bottom: 1px solid #ccc; /* 添加底线 */
}

.caption{
    color: rgb(17, 61, 109);
}

.picbox:hover {
    box-shadow: 3px 5px 5px -5px rgb(0, 0, 0);
}

.picbox:hover:before{ 
    display: none; 
}

.picbox::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 50%;
    border-radius: 5px;
    background: -webkit-linear-gradient(top, rgba(222, 217, 123, 0.7) 0%,rgba(255, 255, 255, 0.753) 1%,rgba(255,255,255,0.55) 14%,rgba(255,255,255,0.48) 23%,rgba(255,255,255,0) 87%);
    z-index: 5;
}

.model{
    position: absolute;
    top: 197px;
    width: 100%;
    height: 60px;
    z-index: 1;
    align-items: center; /* 垂直居中 */
    display: flex;
}

.model p{
    width: 100%;
    padding-left: 8px;
    padding-right: 5px;
    margin: auto !important;
    font-weight: 500;
    color: #757575;
    overflow-wrap: break-word;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.picbox p:first-of-type{
    left: 10px;
}
.picbox p:nth-of-type(2){
    right: 10px;
}

.pic_inset, .pic{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 197px;
    border-radius: 8px 8px 0px 0px;
	font-size: 0.8em;
}

.pic_inset:hover{
    box-shadow: inset 3px 6px 12px -5px rgb(106, 105, 105);
}

.pic{
	object-fit: contain; /* 確保圖片不變形並且不填滿 */	
}

.title{
    position: absolute;
    top: 157px;
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(106,112,84,0.6) 100%);
}

.title p{
    height: 40px;
    line-height: 40px !important;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    left: 10px;
    float: left;
    margin: auto !important;
}

@media (max-width:1200px) {
    .picbox {
        margin: 1.75%;
        width: 29%;
    }
    .product_detail{
        width: 520px;
    }
}

@media (max-width:1000px) {
    .product_detail{
        width: 45%;
    }
}

@media (max-width:825px) {
    .product_box{
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    .product_picbox{ /*最終產品頁的照片DIV*/
        margin: auto;
    }
    .product_detail{
        width: 420px;
    }
}

@media (max-width:720px) {
    .picbox {
        margin: 1.75%;
        width: 46.5%;
    }
}

@media(max-width:480px) {
    .picbox {
        margin: 5%;
        width: 90%;
    }
    .product_picbox{ /*最終產品頁的照片DIV*/
        width: 90%; /* 默认宽度 */
        }
    
        .product_pic {
            max-width: 100%; /* 限制宽度 */
        }
}
/* welcome End */

/* style start */
body {
    margin: 0px;
    font-size: 16px;
    text-align: center;
    padding-top: 80px;
    font-family: 'verdana';
    background: #67717d ;
}

button, input{
    border: none;
    background-color: white;
    border-radius: 5px;
}

input[disabled], button[disabled]{
    cursor: not-allowed;
}

input, button:focus{
    outline: none;
}
.hidden{
    display: none;
}

/* 方便處理底色的容器 */
#page-container{
    background: radial-gradient(ellipse at bottom right, #D9D9D9 25%,#F2F2F2 62%,#f2f2f2 100%);
}

#go_top{
    cursor: pointer;
    position: fixed;
    right: 0;
    bottom: 10vh;
    width: 50px;
    height: 40px;
    background-color: #c2c1c1;
    border-radius: 5px 0  0 5px;;
    opacity: 0.9;
    font: 22px;
    color: white;
    font-weight: bold;
    line-height: 36px;
    text-shadow: inset 1px 1px 1px #adabab;
    z-index: 3;
}

#go_top:hover{
    opacity: 0.9;
    background-color: #9f9f9f;
}

/* nav ================================================================= */
nav{
    position: fixed;
    background: linear-gradient(210deg, #ffffff 10%,#f2f2f2 100%);
    display: flex;
    justify-content:center;
    align-items: center;
    box-shadow: 2px 5px 5px -5px #9a9999;
    top: 0px;
    width: 100%;
    height: 90px;
    z-index: 3;
    border: 0;
}

.frame{
    display: flex;
    align-items: center;
    width: 1200px;
    height: 34px;
}

.logo{
    height: 80px;
    cursor: pointer;
    position: relative;
}

[hint]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.3s;
    visibility: visible;
    font-size: 16px;
}
[hint]:after {
    content: attr(hint);
    position: absolute;
    bottom: -2em;
    left: 0;
    padding: 4px 10px;
    color: #757575;
    white-space: nowrap; 
    background-color: #f8f8f8;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #cbcaca;  
    opacity: 0;
    z-index: 999;
    visibility: hidden;
}


[errhint]:after{
    content: attr(errhint);
    position: absolute;
    bottom: 2.9em;
    right: 0.75em;
    padding: 3px 8px 0px;
    color: darkolivegreen;;
    line-height: 1.6;
    letter-spacing: 0.5px;
    vertical-align: middle;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    background-color: beige;
    box-shadow: 1px 1px 2px #cbcaca;
    border-radius: 5px;
    opacity: 0.8;
    z-index: 999;
    visibility: visible;
}

[hint],[errhint] {
    position: relative;
}

.right{
    margin-top: 12px; 
    display: flex;
    /* justify-content: flex-end; */
    flex: auto;
    position: relative;
    align-items: center;
}

.item {
    cursor: pointer; 
    font-style: italic;	
    font-size: 18px;
    font-weight: 500;
    color: #666666;
    padding: 8px;
    margin: 3px;
}

.item:hover, .active-item {
    background: #e8e8e8a0;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    box-shadow: 1px 0px 2px #cbcaca;  
}

/* nav 縮小時的三 ===============================================================*/
.mobile {
    display: none;
}

.mobile #search{
    width: 180px;
    filter: drop-shadow(1px 0px 0px #c8d7e6); 
    box-shadow: inset 1px 2px 1px  rgb(167, 163, 163);
}

.nav-item:hover, .active-nav-item {
    background-color: rgba(249, 249, 249, 0.959);
    font-weight: 600;
    font-size: 20px;
    font-family: "PT Serif", serif;
    font-style: italic;
}

.nav-item{ /*bootstrap*/
    cursor: pointer;
    font-style: italic;	
    text-align: left;
    padding: 8px;
    margin: 3px;
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl{
    --bs-offcanvas-width: 300px;
    background-color: #ffffffd7;
}

.offcanvas-header {
    padding-bottom: 2px;
}

.offcanvas-header img{
    height: 70px;
}

.offcanvas-body form{
    margin-bottom: 20px;
}

/* 縮小時的三 END ===============================================================*/

/* welcome page serch 橫幅 =====================================================*/
/* 最外層 */
.welcome {
    background:url(/dist/pic/welcome21.png) no-repeat right;
    background-size: cover;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    box-shadow: 2px 5px 5px -5px #9a9999;
    z-index: 1000; /* 确保在前 */
    will-change: transform; /* 优化渲染 */
}

/* 第2層 */
.slogan{
    width: 1200px;
    height: 169px;
}

.slogan span, .slogan h1{
    text-align: left;
    display: flex;
    color: #F8F8F8;
}

.slogan h1{
    height: 41px;
    margin: 25px auto 20px;
    font-family: "PT Serif", serif;
    text-shadow:0.5px 0.8px 2px #655d5dca;
    font-style: italic;
}

.searchbox{
    position: relative;
}

#search{
    width: 400px;
    height: 46px;
    border-radius: 5px 0  0 5px;
    /* border: none !important; */
    border: 0.8px solid #E8E8E8;
    box-shadow: inset 2px 3px 2px  rgb(167, 163, 163);
    padding: 15px;
    padding-top: 18px;
    background: #FFFFFF;
    filter: drop-shadow(0px 0px 20px #AABBCC);
    font-weight: bold;
    font-size: 16px;
    line-height: 1em;
    color: #757575;
}

#search_icon{
    height: 46px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    width: 60px;
    background: url(/dist/pic/ico_search.png) center center no-repeat;
    background-size: 30px 30px;
    background-color:#448899;
}

/* footer ===================================================================*/
footer{
    height: 140px; 
    width: 100%;
    background: #67717d ;
    box-shadow: 2px -5px 5px -5px #9a9999;
    display: flex;
}

.footer-box{
    width: 90%;
    margin: auto;
}

footer p{
    font-weight:500;
    font-size: 15px;
    position: relative;
    line-height: 120%;
    padding: 1px 3px;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
}

footer i{
    color: #c8dcd9;
}

.copyright{
    font-family: "PT Serif", serif;
    font-style: italic;
    color: #f6feff;
    font-weight: 600;
    text-shadow:0.8px 0.8px 2.5px #716969ca;
}

a{text-decoration:none;}
footer a:link{
    color:#f0ffbe;
}

footer a:hover {
    color:#ffff92;
}
/* footer END===================================================================*/

/* main區塊共用的段落格式 */
#main {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: flex-start;
    padding-bottom: 55px;
}

#line {
    width: 1200px;
    margin: auto;
    padding-bottom: 55px;
}

#line div{
    text-align: left;
}

#line a{
    color: #4e4a4a;
}

#line p{
    text-align: left;
    margin-bottom: 15px;
    line-height: 1.5;	
}

.p1{
    font-family: "PT Serif", serif;
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
}

.p2{
    color:#2E75B6;
    font-weight: 900;
}

/* home的照片 */
.home_pic{
    box-shadow: 2px 5px 5px -5px #9a9999;
    object-fit: contain;

}

/* .btnflex{
    display: flex;
    gap:8px;
    margin-top: 15px;
} */	
@media (max-width:1200px) {
    .slogan{
        margin: 20px;
    }
    #main,#line {
        width: 95%;
    }
    #go_top{
        width: 30px;
        height: 40px;
    }
}

@media (max-width: 768px) { /* 當視窗寬度小於 768px 時 */
    .home_pic {
      width: 80%; /* 圖片寬度調整為頁面寬度的 80% */
    }
    .mobile {
        display: block;
    }
    .item{
        display: none;
    }
    footer{
        height: 180px; 
    }
}

@media(max-width:666px) {
    #search{
        width: 300px;
    }
}

@media(max-width:576px) {
    .md-set-top-30{
        margin-top: 30px;
    }	
}

@media(max-width:500px) {
    #search{
        width: 230px;
    }
    #main, #line {
        width: 90%;
    }	
}

@media(max-width:400px){
    nav{
        height: 85px;
    }
    .logo{
        height: 70px;
    }
    footer p, .copyright{
        font-size: 0.85rem;
    }
}
@media(max-width:300px){
    .item{
        font-size: 15px;
        padding: 5px;
    }
    .welcome{
        margin-bottom: 30px;
    }
    .slogan{
        width: 90%;
    }
    .slogan h1{
        font-size: 24px;
        padding: 0px;
    }

    #search{
        width: 190px;
    }
    #search_icon{
        width: 50px;
    }
}
.offset-top-20 {	
	margin-top: 20px;
}
/* style End */

/* demo start */
section{
    box-sizing: border-box;
    padding: 15px;
    width: 800px;
    text-align:center;
    position: relative;
    background: #edebeb;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -16px rgb(130, 128, 128);
    /* -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent 92%,rgba(0,0,0,.2)); */
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 30px;
    transition: transform 0.2s ease; /* 平滑縮放效果 */
}

.demo{
    box-sizing: border-box;
    position: relative;
    height: 360px;
    width: 100%;
    margin: auto;
    padding-top: 56.25%; /* 設置 16:9 的比例 */
}

/* 讓 iframe 充滿 .demo 容器並保持比例 */
.demo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

.demo_inset{
    box-shadow: inset 2px 5px 5px -5px rgb(0, 0, 0);
    pointer-events: none;
}

h6{
    font-weight: 600;
    text-align: center;
    /* color: #448899; */
}


@media (max-width: 768px) {
    section {
      width: 100%; /* 手機上設置寬度為視窗的 90%，保持等比例縮小 */
    }
    .demo {
      width: 100%; /* 調整影片寬度為 100%，使其自適應 section */
      height: auto; /* 自動調整高度，保持比例 */
    }
}
/* demo End */

/* ebook start */
[pic_dialog], [pic_dialog] img{
    cursor: pointer;
    width: 300px;
}

.dialog{
    box-sizing: border-box;
    position: relative;
    /* height: 100%; */
    /* height: 600px; */
    margin: auto;
    box-shadow: 0px 4px 60px #AAAAAA;
    border:none;
    outline: none;
    border-top: 10px solid;
    border-image: linear-gradient(270deg, #337788e1 0%, #66aabbd8 100%) 1;
    clip-path: inset(0 round 10px);
    border-radius: 6px;
    padding: 0;
    overflow: auto;            /* 滾動支持，方便在小屏幕下查看 */
    resize: both;              /* 支持水平和垂直縮放 */
}


dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.673); /* 半透明灰色背景 */
}

.dialog_title {
    height: 32px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 10;
    display: flex; /* 水平排列 */
    justify-content: space-between;
    align-items: center;
    padding: 3px;
    box-sizing: border-box;
}

.dialog img{
    top: 30px;
    width: 640px;
    margin: 6px;
}

/* .dialog_btn{
    cursor: pointer;
    background: #448899;
    font-weight: 400;
    font-size: 19px;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
} */
.dialog h6{
    flex: auto;
    top: 10px;
    text-align: center;
    margin: auto;
}
.close{
    cursor: pointer; 
    flex: none;
    position: sticky;
    width: 14px;
    height: 14px;
    top: 10px;
    right: 10px; /* 距離對話框右側10px */
    background: url(/dist/pic/ico_close.png);
    background-size: cover;
}

@media (max-width: 600px) {
    [pic_dialog], [pic_dialog] img{
        width: 90%;
        height: auto;
    }
}


@media (max-width: 420px) {
    [pic_dialog], [pic_dialog] img{
        width: 90%;
    }
}
/* ebook End */

/* map start */
.map_box{
    width: 97%;
    height: 450px;
    position: relative;
    margin: auto;
}

.map_box iframe, .map_inset{
    width: 100%;
    height: 450px;
    border-radius: 15px;
}

.map_box iframe{
    position: absolute;
    left: 0;
    border: none;
    margin: 0;
}

.map_inset{
    position: absolute;
    left: 0;
    box-shadow: inset 8px 8px 10px -10px rgb(81, 77, 77);
    pointer-events: none;
}

.btn-success{
    background: linear-gradient(155deg, #68a5b4 10%,#377985 70%);
}

.btn-success:hover{
    background: linear-gradient(155deg, rgb(77, 122, 123) 10%,rgb(49, 93, 94) 90%);
}


.btn-primary{
    background: linear-gradient(155deg, rgb(142, 162, 180) 10%,#4963a4 70%);
}

.btn-primary:hover{
    background: linear-gradient(155deg, #4d5e8c 10%,#3b436e 70%);
}

/* map End */

/* product start */
#product_desc p{
    margin-bottom: 2px;
}

#product_desc{
    margin-bottom: 15px;
}
.active{
    color: 0.2px 0.2px 0.5px rgba(78, 92, 92, 0.886) !important;
}

.breadcrumb-item a{
    color: rgb(166, 178, 178) !important;
    font-weight: 600;
}

.breadcrumb-item a:hover{
    font-weight: bold !important;
    color: rgb(102, 108, 108) !important;
}

.p1{
    font-size: 22px;
}

.kind_box{
    display: flex;
    flex-wrap: wrap;
}
.kind{
    flex: none;
    width: 32%;
    padding: 10px;
    font-size: 19px;
    cursor: pointer;
    background-color:rgb(232, 236, 237);
    margin: 6px 4px;
    box-shadow: 2px 4px 4px -5px #9a9999;
}
.kind:hover{
    color: rgb(83, 136, 136);
    font-size: larger;
    font-weight: bolder;
    background-color:rgba(221, 237, 241, 0.673);
    box-shadow: 2px 5px 4px -5px #9a9999;
}
.count{
    font-size: 16px;
    color: #9aa9b5e7;
}


@media(max-width:680px) {
    .kind{
        width: 45%;
    }
    .p1{
        font-size: 20px;
    }
}

@media(max-width:470px) {
    .kind{
        font-size: smaller;
    }
}
/* product End */