@charset "utf-8";
/* CSS Document */
/*=====================default page set=====================*/
/*A10401d0 首頁產品格狀區*/
.A10401d0{border-top:2px solid #fff;}
.A10401d0 .page{max-width:1900px; padding:0;}
.A10401d0 .dhotpro{display:flex; flex-wrap:wrap;}
.A10401d0 .list .frm{background:#fff;}
.A10401d0 .list figure{height:clamp(280px,24vw,420px); overflow:hidden; background:#eef1f2;}
.A10401d0 .list figure img{width:100%; height:100%; object-fit:cover; display:block;}
.A10401d0 .list .frm section{justify-content:flex-start; padding:clamp(14px,1.6vw,22px) clamp(16px,1.6vw,24px) clamp(22px,2.2vw,32px);}
.A10401d0 .list h3.subject{font-size:clamp(17px,1.4vw,22px); font-weight:400; color:#2b3236; padding:0; line-height:1.4;}
.A10401d0 .list .innerhtml{font-size:0.9375rem; color:#8b979d; padding:6px 0 0 0; line-height:1.6;}
/*欄寬需蓋過頁面內嵌樣式(較晚載入)，故加div提高權重*/
@media screen and (max-width:1280px){
div.A10401d0 .dhotpro .list{width:25%;}
}
@media screen and (max-width:960px){
div.A10401d0 .dhotpro .list{width:33.333%;}
}
@media screen and (max-width:767px){
div.A10401d0 .dhotpro .list{width:100%;}
}

/*A10401d2 首頁製作流程區*/
.A10401d2{background:#f4f5f5; padding:30px 0 80px 0;}
.A10401d2 .dhotpro{display:flex; flex-wrap:wrap;}
div.A10401d2 .dhotpro .list{padding:clamp(6px,0.7vw,10px);}
div.A10401d2 .dhotpro .list .frm{background:#fff; border:1px dashed #c9ced1; padding:clamp(18px,1.8vw,24px) clamp(16px,1.6vw,22px); display:flex; flex-direction:row; align-items:center; gap:clamp(18px,2.4vw,32px);}
.A10401d2 .list figure{flex:none; width:clamp(64px,7vw,100px); height:clamp(64px,7vw,100px); border-radius:50%; overflow:hidden; background:#eef1f2;}
.A10401d2 .list figure img{width:100%; height:100%; object-fit:cover; display:block;}
/*column-reverse: 版面上Step小字在上、標題在下，與資料欄位順序相反*/
.A10401d2 .list section{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:6px;}
.A10401d2 .list h3.subject{font-size:clamp(19px,1.6vw,26px); font-weight:700; color:#3f4a50; padding:0; line-height:1.3;}
.A10401d2 .list .innerhtml{font-size:clamp(15px,1.2vw,18px); letter-spacing:1px; color:#3f4a50; padding:0; line-height:1.5;}


/*Header區定義*/

@media screen and (max-width:767px){/*desktop-small pad*/
.logo a{padding:10px;}
}
/*footerTs區定義*/
#footerTs{font-size:.85rem; overflow:hidden; padding:40px 0 0 0;}
#footerTs .BottomList{display:none;}
#footerTs .BottomCntA{width:100%; display:flex; align-items:top; flex-grow:1; justify-content: space-between;}
#footerTs .BottomCntB{flex-direction:column; margin-top:20px; padding:20px 0; position:relative; color:#fff;}
#footerTs .BottomCntB::before{content:""; width:300%; height:100%; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%);}

#footerTs .copyright{display:none;}
#footerTs .comname{text-align:center; margin:50px 0;}
@media screen and (max-width:767px){/*desktop-small pad*/
#footerTs .BottomCntA{width:100%; flex-wrap: wrap; flex-direction:column;}
#footerTs .BottomCntB{width:100%; flex-wrap: wrap; justify-content:center;}

}

#defaultimg .page{max-width:1900px;}
/*--------- #defaultimg 橫幅遮罩 .mask ---------*/
/* .mask 改以 .page 為定位基準(原本相對 #defaultimg,寬度會超出 .page) */
#defaultimg .page{position:relative;}
/* 情境一:.banner 有底圖 → 遮罩疊在圖上,寬度=.page 寬,高度由內容撐開,水平垂直置中 */
#defaultimg .mask{width:100%; height:auto; position:absolute; top:50%; bottom:auto; left:0; transform:translateY(-50%); white-space:normal;}
/* 情境二:未上傳底圖,或被設定為不顯示底圖(後端會加 .fixed) → 不可用 absolute,回到正常流 */
#defaultimg .mask.fixed{width:100%; height:auto; position:relative; top:auto; bottom:auto; left:0; transform:none; float:none; margin:20px 0;}
/* 情境三:沒有底圖也沒有標題文字 → 保留與 #header 等高的空間,避免固定式選單蓋住下方內容。
   --headerH 由 js.js 依實際 #header 高度即時寫入,後方 83px 僅為取不到時的備援值 */
#defaultimg:not(:has(img)):not(:has(.mask)){min-height:var(--headerH, 83px);}
/*=====================default page set end=====================*/

.nav,.nav .syisnav{justify-content:center !important; align-items:center !important;}
.prolist .main .list .frm:hover{box-shadow:0 0 1px rgba(100,100,100,1);}
/*以下為預設功能用*/

/*prodetail*/
.prodetail .main h1.syis{width:100%; float:right;}
.prodetail .main .sum{width:100% !important; float:right;}
.prodetail .main figure{padding-right:3em; width:100%;}
.prodetail .main .cnt::before{content:"詳細介紹"; font-size:1rem; color:#999; display:block; width:100%; border-bottom:1px solid #ccc; font-weight:700; letter-spacing: 1px; margin:2em 0 1em 0;}
@media screen and (max-width:767px){/*phone*/
.prodetail .main h1.syis{width:100%; float:right;}
.prodetail .main .sum{width:100% !important; float:right;}
}
/*Contact4*/
.Contact4{padding-bottom:0;}
.Contact4 .gmap .page{max-width:100%; width:100%;}
/*A0201 style*/
.A0201 .main .list .frm{background:#fff; box-shadow:0 0 5px rgba(200,200,200,.2);}
.A0201_detail h1.syis{text-align:center;}
/*A0202 style*/
.A0202 .page{max-width:960px;}
.A0202 .main .list{border-bottom:1px solid #ccc;}
/*A0203 A0204 style*/
@media screen and (max-width:767px){/*phone*/
.A0203_detail .side, .A0204_detail .side{display: none;}
}
/*A0204 style*/
/*A0205 style*/
.A0205 .page{max-width:960px;}
.A0205 .main .list h3.subject{width:calc(100% - 7em); display: inline-block;}
.A0205 .main .list .path{width:6em; display: inline-block;}
.A0205 .main .list .more{width:4em; display: inline-block;}
.A0205 .main .list{border-bottom:1px dotted #ccc;}
@media screen and (max-width:767px){/*phone*/
.A0205 .main .list section{ flex-wrap: wrap;}
.A0205 h3.subject{width:100%;}
.A0205 .main .list .path {width:50%;}
.A0205 .main .list .more{width:50%; text-align: right;}
}
/*A0207*/
.A0207_class .main .list{text-align: center;}
.A0207_class .main .list .frm{background:#fff; box-shadow: 0 0 3px rgba(0,0,0,0.1);}
/*A0208*/
.A0208 .main .ptit{display:none;}
/*A0209*/
.A0209 .main .list h3.subject{width:calc(100% - 7em); display: inline-block;}
.A0209 .main .list .path{width:6em; display: inline-block;}
.A0209 .main .list .more{width:4em; display: inline-block;}
.A0209 .main .list{border-bottom:1px dotted #ccc;}
@media screen and (max-width:960px){/*desktop-small pad*/
/*A0209*/
.A0209 .main .list h3.subject{width:100%; display: inline-block;}
.A0209 .main .list .path{width:6em; display: inline-block; }
.A0209 .main .list .more{width:4em; display: inline-block; float:right;}
}
/*A0301*/
.A0301_detail .main h1{display:none;}
/*A0302*/
.A0302 .main .list{text-align:center;}
/*A0306*/
.A0306 .main .list .more{text-align:center;}
/*A0403*/
.A0403_class .main .list{text-align:center;}
.A0403 .main .list h3.subject{font-size:0.9375rem;}
/*A0404*/
.A0404_class .main .list{text-align:center;}
.A0404_class .main .list h3.subject{border-top:3px solid #666; background:#f5f5f5;}
.A0404_detail .subtit{display:none;}
.A0404_detail .prodetail .rr{width:100%;}
/*A0405*/
.A0405 .main .list .frm{padding:0;}
.A0405 .main .list h3.subject{font-size:1rem;}
/*A0406*/
.A0406 .main .list figure, .A0406 .main .list section{width:50%; padding:0.5em; display:inline-block; float:left;}
.A0406 .main .list.rr figure{float:right;}
/*A0407*/
.A0407 .ptit{display:none;}
/*A0408*/
.A0408_BCat .main .list{text-align:center;}
.A0408_BCat .main .list .frm{background:#fff; box-shadow:0 0 3px rgba(0,0,0,0.1);}
.A0408 .main .list h3.subject{font-size:1rem;}
/*A0501*/
.A0501 .main .list .frm{background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.A0501 .main .list .innerhtml{padding-left:30px; border-top:1px solid #ccc;}
/*A0502*/
.A0502 .main .list .frm{border:1px solid #ccc; position:relative;}
.A0502 .main .list .frm::before{content:""; width:45px; height:100%; position:absolute; top:0; left:0; background:#ccc; display: block; z-index: -1;}
.A0502 .main .list .innerhtml{padding:5px 0 5px 45px; border-top:1px solid #ccc;}
.A0502 .main .list h3.subject{padding:5px; margin-left:45px !important; text-indent: -45px !important;}
.A0502 .main .list h3.subject .foricon{color:#fff; text-align: center; font-size:1.875rem; width:40px; line-height: 32px; margin-right:5px; display: inline-block; text-indent:initial;}
/*A0503*/
.A0503 .main .list{padding:0;}
.A0503 .main .list h3.subject{border-bottom:1px solid #ccc;}
.A0503 .main .list .innerhtml{padding-left:30px;}
/*A0601*/
.A0601 .main .list h3.subject .foricon{display:none;}
.A0601 .main .list .frm{background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1);}
/*A0602*/
.A0602 .main .list .frm{background:#fff; border:1px solid #efefef;}
.A0602 .main .list h3.subject{font-weight:normal;}
.A0602 .main .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0602 .main .list h3.subject .foricon images{width:10px; height:auto; padding-top:10px;}
/*A0603*/
.A0603 .main .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0603 .main .list .frm{background:#fff; border-radius:1em;}
/*A0604*/
.presentall .list, .presentall .list .frm{margin:0; padding:0;}
.presentall .list{margin-top:0.5em;}
.A0604 .list h3.subject{font-weight:normal; width:calc(100% - 5em); display:inline-block;}
.A0604 .list .more{width:5em; display:inline-block;}
.A0604 .list .more span{display:inline-block; border-radius:1em; padding:2px 6px; background:#666; color:#fff;}
.A0604 .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0604 .list{border-bottom:1px dotted #999; padding:0; margin:0;}
.A0604 .list .frm{padding:0;}
.A0604 .list .frm:hover .more span{background:#333;}
/*A0701*/
.A0701 .main .list{text-align:center;}
/*A0702*/
.A0702 .main .list h3.subject{font-weight:normal; width:calc(100% - 5em); display:inline-block;}
.A0702 .main .list .more{width:5em; display:inline-block;}
.A0702 .main .list .more span{display:inline-block; border-radius:1em; padding:2px 6px; background:#666; color:#fff;}
.A0702 .main .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0702 .main .list{border-bottom:1px dotted #999; padding:0; margin:0;}
.A0702 .main .list .frm{padding:0;}
.A0702 .main .list .frm:hover .more span{background:#333;}
/*A1702*/
.A1702 .main .list{border-bottom:1px dotted #ccc;}
/*Contact4*/
.Contact4{padding-bottom:0;}
.Contact4 .gmap .page{max-width:100%; width:100%;}
/*A0901*/
.MBLayout h1{width:66%; float:right;}
.MBLayout figure{width:33%;}
.MBLayout .innerhtml.sum{width:66%; padding-left:2em;}
.MBLayout .innerhtml{margin-top:2em;}
@media screen and (max-width:767px){/*phone*/
.MBLayout figure,.MBLayout h1{width:100%; text-align: left; font-size:1.25rem;}
.MBLayout .innerhtml.sum{width:100%; padding-left:0;}
}
/*QALayout*/
.QALayout .main .list h3.subject{text-indent:-30px; margin-left:30px;}
/*syis default product*/
.Ctlist .main .list{text-align:center;}

/*syis default download*/
.DWlist .main .list{border-bottom:1px dotted #ccc;}
.DWlist .main .list h3.subject, .DWlist .main .list .path{display:inline-block; vertical-align: top;}
.DWlist .main .list .frm{padding:0;}
.DWlist .main .list .path{width:6em; line-height:180%; padding:0.5em 0;}
.DWlist .main .list h3.subject{width:calc(100% - 6em); }