/* 註解或備用參考..... 

@media screen and (max-width:100px) { 
body { background: url("../img/001.gif") repeat 0px 0px; padding: 10px 10px; margin: 0px; }  控固定背景色---使用圖形
body { background: #fff; } 控固定背景色 fff 白色
.wrap { margin-left:auto; margin-right:auto; width:100%; }
.wrap img { max-width: 100%; display: block; margin: auto; padding: 0px; margin-bottom: 0px; } 

wrap 抬頭圖示、選單，解析度大於時 1600px ，酌需求更改
margin-left:auto; margin-right:auto; width:1600px;  置中顯示，指定寬數值 width:1600px，或指定寬 width:100%
max-width:100%; display:block; margin:auto;  最大依原尺寸顯示，並置中顯示

.wrap { margin-left:auto; margin-right:auto; width:1820px;} 1920 x 1080 置中範例  . headFlash_html.asp 背景圖 100 % 未改
.wrap img { max-width: 1820px; display: block; margin: auto; padding: 0px; margin-bottom: 0px; } 圖片不能以 % 設定. 除 100


@media (min-width: 768px) { 
.wrap_new { margin-left: auto; margin-right: auto; text-align: left; width: 744px; position: relative; clear: both; overflow: hidden; z-index: 1; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: "微軟雅黑" , "新細明體" , "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; }
}
@media (min-width: 992px) { 
.wrap_new { margin-left: auto; margin-right: auto; text-align: left; width: 960px; position: relative; clear: both; overflow: hidden; z-index: 1; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: "微軟雅黑" , "新細明體" , "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; }
}
@media (min-width: 1240px) { 
.wrap_new { margin-left: auto; margin-right: auto; text-align: left; width: 1200px; position: relative; clear: both; overflow: hidden; z-index: 1; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: "微軟雅黑" , "新細明體" , "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; }
}

@media screen  and (min-width:  1280px) { 
.wrap_new { margin-left: auto; margin-right: auto; text-align: left; width: 1300px; position: relative; clear: both; overflow: hidden; z-index: 1; font-size: 18px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: Arial , STHeiti , "Microsoft JhengHei" , "微軟正黑體" , "微軟雅黑" , "新細明體" , sans-serif; "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; }
}



@media (min-width: 992px) { 
.content_falsh { text-align: left; margin-left: auto; margin-right: auto; position: relative; left: 50%; margin-left: -480px; width: 960px; font-size: 18px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: Arial , STHeiti , "Microsoft JhengHei" , "微軟正黑體" , "微軟雅黑" , "新細明體" , sans-serif; "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; background: #fff; }
}
@media (min-width: 1240px) {   
.content_falsh { text-align: left; margin-left: auto; margin-right: auto; position: relative; left: 50%; margin-left: -600px; width: 1200px; font-size: 18px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: Arial , STHeiti , "Microsoft JhengHei" , "微軟正黑體" , "微軟雅黑" , "新細明體" , sans-serif; "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; background: #fff; }
}


@media screen  and (min-width: 1280px) { 
.content_falsh { text-align: left; margin-left: auto; margin-right: auto; position: relative; left: 50%; margin-left: -600px; width: 1200px; font-size: 18px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: Arial , STHeiti , "Microsoft JhengHei" , "微軟正黑體" , "微軟雅黑" , "新細明體" , sans-serif; "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; background: #fff; }
}



@media (min-width: 768px) { 
.content_txt { margin-left: 10px; margin-right: 10px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555;  background: #fff; } 
}
@media (min-width:  992px) { 
.content_txt { margin-left: 10px; margin-right: 10px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555;  background: #fff; }
}
@media (min-width:  1240px) { 
.content_txt { margin-left: 10px; margin-right: 10px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555;  background: #fff; } 
}
@media screen  and (min-width: 1280px) { 
.content_txt { margin-left: 10px; margin-right: 10px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; background: #fff; }
}

.content_txt  { font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: "微軟雅黑" , "新細明體" , "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; background: url("img/product_bg-2.gif") repeat 0px 0px; } 
}


body {letter-spacing:2px;line-height:180%;color: #555; font-family: "Microsoft JhengHei" , "Microsoft Yahei" , "微軟正黑體" , "微軟雅黑" , "新細明體" , "mingliu" , "Arial Black" , "sans-serif" , "fantasy" , "verdana" ; background: #fff;}  


--2023-11-12-- body {letter-spacing:2px;line-height:180%;color: #555; font-family: "Microsoft JhengHei" , "Microsoft Yahei" , "微軟正黑體" , "微軟雅黑" , "新細明體" , "mingliu" , "Arial Black" , "sans-serif" , "fantasy" , "verdana" ; background: #fff;}  



========== 上---註解或備用參考..... */



@charset "UTF-8";

.wrap { margin-left:auto; margin-right:auto; width:100%; letter-spacing: 5px; }  /* width:100%; 選單背景滿版  */

.wrap img { max-width: 100%; display: block; margin: auto; padding: 0px; margin-bottom: 0px; } 


.container_new: after { clear: both; }


.container-fluid { margin-right: auto; margin-left: auto; padding-left: 0px; padding-right: 0px; }

.container-fluid: after { clear: both; }


/* header */

.logo-block { margin-left: 0px; float:  left; margin-top:  0px; } /* 圖片上緣邊界 */

/* .logo-block a { background:  url(../img/pchead.jpg) no-repeat; height: 140px; width: 980px; } */


/* font-family: "微軟雅黑" , "新細明體" , "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; font-weight: bold; font-size: 16px; text-indent: 10px; display: block; background-size: cover; } */

/* 2023-11-12--- font-family: "微軟雅黑" , "新細明體" , "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; font-weight: bold; font-size: 16px; text-indent: 10px; display: block; background-size: cover; } */




/* .container_header { max-width: 980px; margin: auto; } */


.logo-padding { padding: 0px 0; position: relative; } /* 圖片上緣邊界 */


/*  .img { border: 0; margin-left: auto; margin-right: auto; -ms-interpolation-mode: bicubic; max-width: 980px; height: auto; }抬頭圖檔顯示大小 */


.title_pic img { box-shadow: 1px 3px 4px #888888; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* 設定產品小圖陰影，圓繳弧度-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;  */

.content img {  box-shadow: 1px 3px 4px #888888; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/* 版面大小，抬頭圖檔大小 */

.productsmallpic img { margin-right: 15px; box-shadow: 1px 2px 3px #888888; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /* 設定產品小圖陰影，圓繳弧度-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;  */

.productname_list { margin-left: 15px; } /* VIP Product_vip.asp 產品圖與說明間距 */



.productbigpic img { box-shadow: 1px 3px 4px #888888; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* 設定產品小圖陰影，圓繳弧度-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;  */


.foot { width: 100%; font-size: 16px; letter-spacing: 1px; text-align: left; } /* margin:  0px auto;  置中 */

.foot p { margin-left: 10px; }


.content_table { text-align: left; margin-left: auto; margin-right: auto; position: relative; left: 50%; margin-left: -490px; width: 980px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; }



.content_table_new: after { clear: both; }
@media (min-width: 768px) { 
.content_table_new { text-align: left; margin-left: auto; margin-right: auto; position: relative; left: 50%; margin-left: -372px; width: 744px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; }
}
@media (min-width: 992px) { 
.content_table_new { text-align: left; margin-left: auto; margin-right: auto; position: relative; left: 50%; margin-left: -480px; width: 960px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; }
}
@media (min-width: 1240px) { 
.content_table_new { text-align: left; margin-left: auto; margin-right: auto; position: relative; left: 50%; margin-left: -600px; width: 1200px; font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; }
}



/* .img { border: 0; -ms-interpolation-mode: bicubic; max-width: 980px; } /* 抬頭圖檔顯示大小-->設高 height: auto; 則產品小圖不一時高度會不同 */

body .container { width: 100%; text-align: left; margin: 0 auto; min-width: 320px; height: 100%; max-width: 980px; } /* 版面大小，抬頭圖檔大小 */


/* .content_box .text img  {  font-size: 16px; letter-spacing: 1px; line-height: 180%; text-align: left; color: #555; font-family: "微軟雅黑" , "新細明體" , "Microsoft Yahei" , "mingliu" , "Arial Black" , "verdana"; background: #fff;    margin:  0 auto;  max-width: 100%;  height: auto;  box-shadow:  1px 4px 3px #888888; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } 設定內容大圖陰影(單獨網頁); --->圓繳弧度-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;  */

.content_box .text img { box-shadow: 1px 2px 3px #888888; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }


.center_box { margin: 0; text-align: center; } /* 網頁置中 */

.left_box { position: absolute; left: 0px; } /* 網頁置左 */


.content_txt_falsh { margin-left: 20px; margin-right: 20px; } /* 影片首頁內容區 */


/* 產品內容區 */



.pro_boxindex .pro_imgindex img { max-width: 980; height: auto; border: none; }

.pro_box .pro_img img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 1px 2px rgba(0 , 0 , 0 , 0.9); } /* 設定小圖邊框 */
.content_box .list_box .list_pro .pro_box .pro_img img { width: 100%; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* 小圖圓角弧度 */

.pro_box2 .pro_img2 img { box-shadow: 1px 2px 3px #888888; } /* 設定內容大圖陰影 */

.content_productbox .producttext img { box-shadow: 1px 4px 3px #888888; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* 不設定PC產品小圖大小--由程式指定; --->圓繳弧度-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;  */



/* 文繞圖---左圖右文 webmenu */
.image1 { float: left; margin-right: 20px; }
.image2 { float: left; margin-right: 10px; }
.image3 { float: right; margin-right: 10px; }
/* .image1-wrapper {  margin-left:  10px;  margin-right:  10px;  border:  3px dashed black;  }加虛線框 */

.image1-wrapper { margin-left: 10px; margin-right: 20px; }

.p-txt { text-indent: 2.4em; word-spacing: 0px; letter-spacing: 2px; }
.span-txt { text-indent: 2.4em; word-spacing: 0px; letter-spacing: 2px; }
.clear-fix { overflow: auto; zoom: 1; }



/* article two pic  圖形圓角 */
.content img { max-width: 100%; height: auto; box-shadow: 1px 3px 4px #888888; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* 版面大小，抬頭圖檔大小 */

/* article two pic  顯示 */
.clearfix: after { content: ''; display: table; clear: both; }
.news li { float: left; width: 47.33333%; margin: 5px; }

@media only screen  and (min-width: 481px) and (max-width: 767.99999px) {  
.news li { width: 48%; }
}

/* (orientation: portrait)裝置直擺 ；(orientation: landscape)裝置橫擺 */
@media screen  and (orientation: portrait) and (min-width: 0px) and (max-width: 480.99999px) {   
.news li  { width:  98%; }
}




@media (min-width: 768px) { 
.article_pic { padding: 10px; position: absolute; top: 36px; left: 205px; }
}

@media (min-width: 992px) { 
.article_pic { padding: 10px; position: absolute; top: 36px; left: 205px; }
}

@media (min-width: 1240px) { 
.article_pic { padding: 10px; position: absolute; top: 36px; left: 255px; }
}

@media screen  and (min-width: 1280px) { 
.article_pic { padding: 10px; position: absolute; top: 36px; left: 265px; }
}


/*=========新增==article Three pic===========*/

/* article three pic  顯示 */
.clearfix: after { content3: ''; display: table; clear: both; }
.news3 li { float: left; width: 31.33333%; margin: 5px; }

@media (min-width: 768px) { 
.news3 li { width: 48%; }
}

@media (min-width: 992px) { 
.news3 li { width: 31%; }
}

@media (min-width: 1240px) { 
.news3 li { width: 31%; }
}

@media screen  and (min-width: 1280px) { 
.news3 li { width:  31.3333%; }
}


/* 產品輪播圖 */

.index_product { background: url("../img/product_scroll_bg.gif") no-repeat 0px 0px; padding: 10px; width: 1200px; margin: 0px; }
.change_product_list1 { border: #666666 solid 1px; width: 150px; margin: 5px; float: left; }
.change_product_list3 { border: #333 solid 1px; width: 150px; margin: 5px; }
.gd  { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; text-align: center; OVERFLOW: hidden; PADDING-TOP: 0px; }
.product_list1 { border: #aaa solid 1px; width: 150px; margin: 5px; float: left; }
.product_list2 { width: 140px; height: 105px; border: #ffffff solid 5px; background-color: #f3faff; }
.product_list3 { border: #aaa solid 1px; width: 150px; margin: 5px; }
.product_list4 { width: 180px; height: 105px; border: #ffffff solid 5px; background-color: #f3faff; }
.product_list5 { border: #aaa solid 1px; width: 160px; margin: 5px; }









/* Go Top 按鈕 */
#goTop {
position: fixed;
bottom: 240px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 10px; /* 與右方的距離 */
width: 50px; /* 按鈕原始寬度 */
height: 50px; /* 按鈕原始高度 */
opacity: 0.5; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
transition: all .5s; /* 動畫效果 持續期間 */
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
#goTop:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
width: 60px; /* 按鈕寬度 */
height: 60px; /* 按鈕高度 */
}




/* Go Top 按鈕 使用 Messenger 洽談外掛程式時 */

@media only screen and (min-width: 1200px) {
#goTop-Messenger {
position: fixed;
bottom: 90px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 12px; /* 與右方的距離 */
width: 75px; /* 按鈕原始寬度 */
height: 75px; /* 按鈕原始高度 */
opacity: 0.3; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
transition: all .5s; /* 動畫效果 持續期間 */
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
#goTop-Messenger:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
width: 78px; /* 按鈕寬度 */
height: 78px; /* 按鈕高度 */
}
}

@media only screen and (max-width: 1200px) {
#goTop-Messenger {
position: fixed;
bottom: 120px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 12px; /* 與右方的距離 */
width: 75px; /* 按鈕原始寬度 */
height: 75px; /* 按鈕原始高度 */
opacity: 0.8; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
transition: all .5s; /* 動畫效果 持續期間 */
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
#goTop-Messenger:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
width: 75px; /* 按鈕寬度 */
height: 75px; /* 按鈕高度 */
}
}

/* === 仿手機版 ===*/

/* article */

.RightNav_article span { color: #296cd4; }
.ClassNav_article { padding: 10px 10px; }
.ClassNav_article .NavTree_article ul { padding-left: 0px; }
.ClassNav_article .NavTree_article ul li { position: relative; width: 145px; height: 30px; overflow: hidden; float: left; padding-left: 10px; }

/* menu links style */
.ClassNav_article .NavTree_article ul li a { width: 135px; text-align: center; height: 30px; line-height: 30px; background: url("../img/navtree_page_url.gif") repeat-x 0px top; display: block; overflow: hidden; }	
.ClassNav_article .NavTree_article ul li a: hover { background: url("../img/navtree_page_hover.gif") repeat-x 0px top; color: #FFF; text-decoration: none; }


/* article end */

table , div , ul , li { margin: 0; padding: 0; }
li { list-style: none; list-style-type: none; }

td { font-size: 18px; letter-spacing: 1px; line-height: 200%; } /* PC 產品分頁現在位置文字大小 */

/* 2023-11-12-- */

/* 2023-11-12-- h1 { font-size: 1.2em; line-height: 35px; height: 25px; font-family: "微軟雅黑" , "新細明體"; letter-spacing: 1px; padding-left: 2px; } */
/* 2023-11-12-- h2 { font-size: 1.3em; line-height: 30px; height: 15px; font-family: "微軟雅黑" , "新細明體"; letter-spacing: 1px; } */ /* letter-spacing: 2px; 字距 ; line-height: 5px 顯示的上下位置;  height: 0px;  與動態選單間距 */
 2023-11-12-- h3 { font-size: 1.2em; line-height: 30px; height: 15px; font-family: "微軟雅黑" , "新細明體"; letter-spacing: 1px; } */



/* b { font-size: 19px; line-height: 22px; height: 22px;  font-family: "微軟雅黑" , "新細明體"}  PC 產品分頁筆數數字大小 */



.red  {  color: red; }
/* === Link ===*/
a: link { color: #006699; text-decoration: none; }
a: visited { text-decoration: none; color: #800080; }
a: hover { text-decoration: none; color: #CC0066; }
a: active { text-decoration: none; color: #fF00ff; }

/* === Format control ===*/
.logo { width: 160px; height: 80px; }

/* .left  {  width: 200px;  background: #f3f9fd;  overflow: hidden; } 與產品目錄 product_menu.css 衝突 暫關閉*/ 



.right { width: 750px; overflow: hidden; }

#mobile { width: 960px; height: 300px; margin: 0; } /* 設定(手機版)Banner圖檔大小 */






/* ===index.asp 仿手機版 輪播 ===*/

/* ===========================================

.swipe { width: 100%; overflow: hidden; position: relative; }
.swipe img { margin-left: auto; margin-right: auto; width: 100%; height: auto; }

/* PC 特定樣式 */
@media screen and (min-width: 768px) {
  .swipe ul { width: 768px; } /* 假設輪播圖容器在 PC 上的最大寬度為 768px */
  .swipe .pc { display: block; } /* 在 PC 解析度下顯示 .pc 元素 */
  .swipe .tablet, .swipe .mobile { display: none; } /* 在 PC 解析度下隱藏 .tablet 和 .mobile 元素 */
}

/* Tablet 特定樣式 */
@media screen and (max-width: 767px) and (min-width: 481px) {
  .swipe ul { width: 480px; } /* 假設輪播圖容器在 Tablet 上的最大寬度為 480px */
  .swipe .tablet { display: block; } /* 在 Tablet 解析度下顯示 .tablet 元素 */
  .swipe .pc, .swipe .mobile { display: none; } /* 在 Tablet 解析度下隱藏 .pc 和 .mobile 元素 */
}

/* Mobile 特定樣式 */
@media screen and (max-width: 480px) {
  .swipe ul { width: 320px; } /* 假設輪播圖容器在 Mobile 上的最大寬度為 320px */
  .swipe .mobile { display: block; } /* 在 Mobile 解析度下顯示 .mobile 元素 */
  .swipe .pc, .swipe .tablet { display: none; } /* 在 Mobile 解析度下隱藏 .pc 和 .tablet 元素 */
}

.swipe #pagenavi { position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%; }
.swipe #pagenavi a { width: 14px; height: 14px; line-height: 99em; background: #b5b5b5; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 0 4px; overflow: hidden; cursor: pointer; display: inline-block; *display: inline; *zoom: 1; }
.swipe #pagenavi a.active { background: #C80002; }

==============================================================  */


/* ==================
.swipe { width: 100%; height: 100%; overflow: hidden; position: relative; }
.swipe img { margin-left: auto; margin-right: auto; width: 100%; height: auto; }


@media screen and (min-width: 768px) {
  .swipe ul { width: 768px; } 
}

@media screen and (max-width: 767px) and (min-width: 481px) {
  .swipe ul { width: 480px; } 
}


@media screen and (max-width: 480px) {
  .swipe ul { width: 320px; } 
}




.swipe #pagenavi { position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%; }
.swipe #pagenavi a { width: 14px; height: 14px; line-height: 99em; background: #b5b5b5; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 0 4px; overflow: hidden; cursor: pointer; display: inline-block; *display: inline; *zoom: 1; }
.swipe #pagenavi a.active { background: #C80002; }

 ================== */


/* ======舊 ok  */

.swipe { width: 100%; height: 100%; overflow: hidden; position: relative; } 
.swipe ul { -webkit-transition: left 800ms ease-in 0; -moz-transition: left 800ms ease-in 0; -o-transition: left 800ms ease-in 0; -ms-transition: left 800ms ease-in 0; transition: left 800ms ease-in 0; }
.swipe #pagenavi { position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%; }
.swipe #pagenavi a { width: 14px; height: 14px; line-height: 99em; background: #b5b5b5; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 0 4px; overflow: hidden; cursor: pointer; display: inline-block; *display: inline; *zoom: 1; }
.swipe #pagenavi a.active { background: #C80002; }
/* .swipe img { margin-left: auto; margin-right: auto; width: 100%; height: auto; } 設定 Rwd 手機輪播，圖形高度 height: auto; 圖形高度顯示很小時，輪播圖應用 4 : 3 比例圖檔；height: auto ; auto可以強迫指定多少像素px */
.swipe img { margin-left: auto; margin-right: auto; width: 100%; height: auto;}



/* #flasesize 指定圖檔顯示 */

@media (width: 1280px) { 
#flasesize img {width:1280px; height: auto; }}
@media (width: 1360px) { 
#flasesize img {width:1360px; height: auto; }}
@media (width: 1600px) { 
#flasesize img {width:1600px; height: auto; }}
@media (width: 1920px) { 
#flasesize img {width:1920px; height: auto; }}
@media (min-width: 1921px) { 
#flasesize img {width:100%px; height: auto; }}



/* #Index 指定顯示主區域 */

/* 設定首頁Banner圖檔大小，margin: 0; margin-left: auto; margin-right: auto;置中 要擺 width.height % 前*/
 
#Index {margin: 0; margin-left: auto; margin-right: auto; width: 100%; height: 400px;} /* 1920 x 1440 ====>>> 1440/1920 x 1280解析度 =960 */

#Support {margin: 0; margin-left: auto; margin-right: auto; width: 100%; height: 400px;} /* 1920 x 1440 ====>>> 1440/1920 x 1280解析度 =960 */




/* 設定單獨網頁Banner圖檔大小

@media (min-width: 768px) { 
#Support { width: 744px; height: 300px; margin: 0; }
}
@media (min-width: 992px) { 
#Support { width: 960px; height: 300px; margin: 0; }
}
@media (min-width: 1240px) { 
#Support { width: 1200px; height: 300px; margin: 0; }
}
 */

/* 設定產品Banner圖檔大小 */

@media (min-width: 768px) { 
#Product { width: 744px; height: 300px; margin: 0; }
}
@media (min-width: 992px) { 
#Product { width: 960px; height: 300px; margin: 0; }
}
@media (min-width: 1240px) { 
#Product { width: 1200px; height: 250px; margin: 0; }
}

/* 設定文章Banner圖檔大小 */

@media (min-width: 768px) { 
#Article { width: 744px; height: 300px; margin: 0; }
}
@media (min-width:  992px) { 
#Article { width: 960px;  height: 300px;  margin: 0; }
}
@media (min-width: 1240px) { 
#Article { width: 1200px; height: 300px; margin: 0; }
}


.h { clear: both; width: 100%; height: 10px; }
.w { clear: both; height: 100%; width: 10px; }

/* === Index or/List Content ===*/
.l1 { margin: 5px; }
.l1 ul li { background: url(img/a2.gif) left no-repeat; line-height: 24px; height: 24px; clear: both; overflow: hidden; }
.l1 ul li a { margin-left: 8px; }
.l1 ul li b { font-weight: normal; float: right; display: none; }

.l2 { margin: 5px; }
.l2img { width: 130px; height: 100px; }
.l2 span { width: 120px; display: block; line-height: 22px; height: 22px; overflow: hidden; }

/* === Frame and Title :  iTitle/Index | eTitle/Inside Pages ===*/
.b1 { border: #CCCCCC solid 1px; }
.t1 { background: url(img/tbg.gif) repeat-x center; border-bottom: #e3e3e3 solid 1px; font-weight: bold; height: 26px; line-height: 26px; text-indent: 5px; }
.t1 span { float: right; font-weight: normal; margin-right: 5px; }

.b2 { border: #CCCCCC solid 1px; }
.t2 { background: url(img/tbg.gif) repeat-x center; border-bottom: #e3e3e3 solid 1px; font-weight: bold; height: 26px; line-height: 26px; text-indent: 5px; }

.a1 { line-height: 180%; text-align: left; margin: 8px; }
.a1 p { margin: 0; padding: 0; }

/* === Inside or/List Content ===*/
.l3 { margin: 8px; }
.l3 ul { font-size: 13px; }
.l3 ul li { line-height: 25px; height: 25px; margin: 1px 5px; clear: both; overflow: hidden; }
.l3 ul li a { margin-left: 3px; float: left; }
.l3 ul li b { float: left; font-weight: normal; }
.l3 ul li span { float: right; color: #888888; }

/* === List Content ===*/
.b3 { }
.t3 { background: url(img/tbg.gif) repeat-x center; border-bottom: #e3e3e3 solid 1px; height: 26px; line-height: 26px; position: relative; }
.t3 .t31 { float: left; margin-left: 15px; padding-left: 10px; font-weight: bold; background: url(img/arrow.gif) left no-repeat; }
.t3 .t32 { float: right; text-align: right; font-weight: normal; }


.content { line-height: 168%; text-align: left; margin: 0px; word-wrap: break-word; word-break: break-all; font-size: 16px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* text-align: justify */
.content h1 { font-size: 1.2em; line-height: 36px; height: 25px; font-family: "微軟雅黑" , "新細明體"; letter-spacing: 1px; padding-left: 2px; }




.t4 { border-bottom: #e3e3e3 solid 1px; height: 26px; line-height: 26px; position: relative; }
.t4 .t41 { float: left; margin-left: 3px; font-weight: bold; }
.t4 .t42 { float: right; text-align: right; font-weight: normal; }

/* === Page ===*/
.page { border-top: #CCCCCC solid 1px; text-align: center; margin: 8px; padding: 8px 0px; }
.page span { margin: 1px 3px; }
.page span a { border: #CCCCCC solid 1px; background: #ffffee; text-align: center; padding: 2px 5px; }

.note { color: #666666; padding: 5px; margin: 8px; border-top: #e3e3e3 1px solid; text-align: right; clear: both; }
.pn  { border-top: #e3e3e3 1px solid;  padding: 5px;  clear: both;  margin: 8px; }
.pn span { display: block; line-height: 25px; }

/* === Left or Navigation ===*/
#menu ul { margin: 5px; }
/* 1級菜單 */
#menu ul li { text-align: left; line-height: 25px; margin: 8px 10px; background: #eeeeff; border-radius: 4px; border: #CCCCCC solid 1px; }
#menu ul li: hover { background: #f8f8f8; }
#menu ul li a { font-weight: bold; padding-left: 10px; background: url(img/a2.gif) left no-repeat; margin-left: 20px; }
/* 2級菜單 */
#menu ul li ul { display: none; } /* display: none;  */
#menu ul li ul li { text-align: left; }
#menu ul li ul li a { font-weight: normal; line-height: 25px; margin-left: 30px; padding-left: 10px; background: none; }
/* 3級菜單 */
#menu ul li ul li ul { display: none; }  /* */
#menu ul li ul li ul li { text-align: left; }
#menu ul li ul li ul li a { font-weight: normal; line-height: 25px; margin-left: 40px; padding-left: 10px; background: none; }

/* === Other ===*/

#top_keword_contents { position: relative; width: 100%; margin: 0 auto; height: auto; text-align: center; }


/* === 內容隱償 ===*/
#askfoot { height: 0; overflow: hidden; padding: 0 15px; line-height: 14px; }
#ask_qa { height: 0; overflow: hidden; padding: 0 15px; line-height: 14px; }

.ccc { background: #eeeeee; }
.lnk1 { margin: 5px; }
.lnk1 a { padding: 2px; margin-right: 8px; display: inline-block; }

.tab1 td { border: #ddd 1px solid; border-collapse: collapse; height: 20px; line-height: 20px; padding: 3px; }

#full { display: none; position: fixed; left: 50%; top: 480px; margin-left: 493px; z-index: 100; text-align: center; cursor: pointer; font-size: 12px; background: #ddd; padding: 3px; color: #000000; }
#full a { color: #000000; display: block; font-family: "微軟雅黑" , "新細明體"; }


body ,  div ,  ul ,  li { padding: 0px; margin: 0px; }
li { list-style-type: none; }
img { border: 0; }
.gray { color: #666666; }
a { color: #333333; text-decoration: none; }
a: hover { text-decoration: none; color: #0063a5; }
a: active { text-decoration: underline; }

.LineLink a { text-decoration: underline; }
.LineLink a: hover { text-decoration: none; color: #0063a5; }

.ColorLink a { color: #0063a5; }
.ColorLink a: hover { color: #0063a5; }

.WidthTab { width: 10px; height: 1px; float: left; }
.WidthTab2 { width: 20px; height: 1px; float: left; }	
.HeightTab { height: 10px; width: 1px; overflow: hidden; }

.HeightTab2 { height: 20px; width: 1px; overflow: hidden; }



/* 2023-11-12--- p { line-height: 180%; } */
.ListDate { color: #666666; }

/* body { font-family: "Microsoft Yahei" , Arial ,  Helvetica ,  sans-serif; width: 100%; background: #FFFFFF; } 控制固定網頁背景 */





/*CSS botry article style pagination*/

@media only screen  and (max-width: 544px) {  
DIV.botry { height: 30px; line-height: 3; padding: 0px 0px 60px 0px; MARGIN-TOP: 10px; MARGIN-BOTTOM: 80px; }
}
@media only screen  and (min-width: 544px) {  
DIV.botry { MARGIN-TOP: 10px; MARGIN-BOTTOM: 10px; }
}

DIV.botry A { BORDER-RIGHT: #8db5d7 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #8db5d7 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #8db5d7 1px solid; COLOR: #008800; MARGIN-RIGHT: 4px; PADDING-TOP: 2px; BORDER-BOTTOM: #8db5d7 1px solid; color: #004160; }
DIV.botry A: hover { BORDER-RIGHT: #004160 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #004160 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #004160 1px solid; MARGIN-RIGHT: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #004160 1px solid; BACKGROUND-COLOR: #004160; color: #fff; }
DIV.botry A: active { BORDER-RIGHT: #004160 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #004160 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #004160 1px solid; MARGIN-RIGHT: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #004160 1px solid; }
DIV.botry SPAN.current { BORDER-RIGHT: #e89954 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #e89954 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #e89954 1px solid; COLOR: #008800; MARGIN-RIGHT: 4px; PADDING-TOP: 2px; BORDER-BOTTOM: #e89954 1px solid; BACKGROUND-COLOR: #ffca7d; }
DIV.botry SPAN.disabled { BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px solid; COLOR: #ccc; MARGIN-RIGHT: 4px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px solid; }





#foot_txtl { width: 47%; float: left; padding: 10px; margin-right: 20px; text-align: left; background-color: #FFD4D4; }
#foot_txtr { width: 48%; float: left; text-align: left; background-color: #FFD382; }

#foot { width: 100%; background-color: #889382; padding: 10px; margin-right: 200px; text-align: left; }



#rwd-content { text-align: center; }
.crumb { text-align: left; }
.crumb ul ,  .crumb li { margin: 0; padding: 0; list-style: none; }
.crumb li { display: inline-block; font-size: 16px; line-height: 30px; }
.crumb li: after { display: inline-block; content: "\e903"; padding: 0 10px; font-family: 'icomoon' !important; font-size: 14px; color: #3f3f3f; vertical-align: middle; opacity: 0.65; }
.crumb li: last-child: after { display: none; }
.crumb li a { display: inline-block; color: #717171; text-decoration: underline; }
}

.contact-box { padding: 0 20px; font-size: 14px; }
.contact-conent { margin-bottom: 20px; }


.contact-conent img { max-width:100%;padding:0px 0px 0px 0px;margin-bottom:10px;}
.contact-conent h1 {font-size:25px;height:22px;line-height:1.0;padding:10px 0px 40px 0px;color:#933131;}


.contact-conent h2 { font-size: 18px; font-weight: normal; line-height: 1.4; }
.contact-conent p { margin-top: 10px; }
.contact-conent p.require: after { position: relative; display: inline-block; content: "※"; bottom: -2px; color: #f00; font-weight: bold; margin-left: 3px; }
.contact-conent .form-control { background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0; }
.form-control: focus { background-color: #fff; border-color: #ffbf00; outline: 0; box-shadow: inset 0 1px 2px rgba(0 ,  0 ,  0 ,  0.1) ,  0 0 8px rgba(255 ,  190 ,  0 ,  0.6); }
.contact-conent label { font-weight: normal; }
.contact-conent label input[type="checkbox"]  { margin-right: 10px; }
.contact-conent .form-group  { margin-top: -1px; }
.contact-conent .input-group-addon {  padding: 0;  width: 80px; height: 35px; background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0; }
.contact-conent .input-group { width: 100%; }
.contact-conent .input-group .input-group-addon: first-child { padding: 0 10px; border-right: 0; }
.contact-conent .input-group .input-group-addon: last-child { border-left: 0; padding: 0 10px; }
.contact-conent .button  { display: block; margin: 0; padding: 0 20px; width: 100%; background-color: #3f3f3f; font-size: 18px; line-height: 35px; color: #fff; font-weight: 700; border: 0; border-radius: 3px; transition: all linear 0.2s; }
.contact-conent .pull-left { float: none !important; }
.contact-conent .button: hover , 
.contact-conent .button: focus { background-color: #ffbf00; color: #3f3f3f; box-shadow: inset 0 1px 2px rgba(0 ,  0 ,  0 ,  0.1) ,  0 0 8px rgba(255 ,  190 ,  0 ,  0.6); }

/* reg 表單end */
.button_amount { 
	font-size: 20px; 
	font-family: 微軟雅黑; 
	font-weight: bold; 
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px; 
	border-radius: 8px; 
	border: 1px solid #337fed; 
	padding: 0px 18px;  /*padding: 9px 18px; 設定按鈕大小*/
	text-decoration: none; 
	background: -moz-linear-gradient( center top ,  #3f3f3f 5% ,  #1e62d0 100% ); 
	background: -ms-linear-gradient( top ,  #3f3f3f 5% ,  #1e62d0 100% ); 
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6' ,  endColorstr='#1e62d0'); 
	background: -webkit-gradient( linear ,  left top ,  left bottom ,  color-stop(5% ,  #3f3f3f) ,  color-stop(100% ,  #1e62d0) ); 
	background-color: #3f3f3f; 
	color: #ffffff; 
	display: inline-block; 
	text-shadow: 1px 1px 0px #1570cd; 
 	-webkit-box-shadow: inset 1px 1px 0px 0px #97c4fe; 
 	-moz-box-shadow: inset 1px 1px 0px 0px #97c4fe; 
 	box-shadow: inset 1px 1px 0px 0px #97c4fe; }


.button_amount: hover { 
	background: -moz-linear-gradient( center top ,  #1e62d0 5% ,  #3d94f6 100% ); 
	background: -ms-linear-gradient( top ,  #1e62d0 5% ,  #3d94f6 100% ); 
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0' ,  endColorstr='#3d94f6'); 
	background: -webkit-gradient( linear ,  left top ,  left bottom ,  color-stop(5% ,  #1e62d0) ,  color-stop(100% ,  #3d94f6) ); 
	background-color: #1e62d0; }

.button_amount: active { position: relative; top: 1px; }


.button_pay { 
	font-size: 18px; 
	font-family: 微軟雅黑; 
	font-weight: bold; 
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px; 
	border-radius: 8px; 
	border: 1px solid #d83526; 
	padding: 0px 18px;  /*padding: 9px 18px; 設定按鈕大小*/
	text-decoration: none; 
	background: -moz-linear-gradient( center top ,  #fa665a 5% ,  #d34639 100% ); 
	background: -ms-linear-gradient( top ,  #fa665a 5% ,  #d34639 100% ); 
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fa665a' ,  endColorstr='#d34639'); 
	background: -webkit-gradient( linear ,  left top ,  left bottom ,  color-stop(5% ,  #fa665a) ,  color-stop(100% ,  #d34639) ); 
	background-color: #fa665a; 
	color: #ffffff; 
	display: inline-block; 
	text-shadow: 1px 1px 0px #98231a; 
 	-webkit-box-shadow:  1px 1px 0px 0px #fab3ad; 
 	-moz-box-shadow:  1px 1px 0px 0px #fab3ad; 
 	box-shadow:  1px 1px 0px 0px #fab3ad; }

.button_pay: hover { 
	background: -moz-linear-gradient( center top ,  #d34639 5% ,  #fa665a 100% ); 
	background: -ms-linear-gradient( top ,  #d34639 5% ,  #fa665a 100% ); 
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#d34639' ,  endColorstr='#fa665a'); 
	background: -webkit-gradient( linear ,  left top ,  left bottom ,  color-stop(5% ,  #d34639) ,  color-stop(100% ,  #fa665a) ); 
	background-color: #d34639; }


.button_pay: active { position: relative; top: 1px; }


.button_shopping { 
	font-size: 18px; 
	font-family: 微軟雅黑; 
	font-weight: bold; 
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px; 
	border-radius: 8px; 
	border: 1px solid #83c41a; 
	padding: 0px 18px; /*padding: 9px 18px; 設定按鈕大小*/
	text-decoration: none; 
	background: -moz-linear-gradient( center top ,  #9dce2c 5% ,  #8cb82b 100% ); 
	background: -ms-linear-gradient( top ,  #9dce2c 5% ,  #8cb82b 100% ); 
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c' ,  endColorstr='#8cb82b'); 
	background: -webkit-gradient( linear ,  left top ,  left bottom ,  color-stop(5% ,  #9dce2c) ,  color-stop(100% ,  #8cb82b) ); 
	background-color: #9dce2c; 
	color: #ffffff; 
	display: inline-block; 
	text-shadow: 1px 1px 0px #689324; 
 	-webkit-box-shadow:  1px 1px 0px 0px #c1ed9c; 
 	-moz-box-shadow:  1px 1px 0px 0px #c1ed9c; 
 	box-shadow:  1px 1px 0px 0px #c1ed9c; }


.button_shopping: hover { 
	background: -moz-linear-gradient( center top ,  #8cb82b 5% ,  #9dce2c 100% ); 
	background: -ms-linear-gradient( top ,  #8cb82b 5% ,  #9dce2c 100% ); 
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b' ,  endColorstr='#9dce2c'); 
	background: -webkit-gradient( linear ,  left top ,  left bottom ,  color-stop(5% ,  #8cb82b) ,  color-stop(100% ,  #9dce2c) ); 
	background-color: #8cb82b; }


.button_shopping: active { position: relative; top: 1px; }


/* Search */
@media (-webkit-min-device-pixel-ratio: 2) , (min-resolution: 192dpi) { 
.icon_search { background-image: url(/img/sprite-2x.png); background-size: 215px 211px; }
}

#wrapper.contact { background: hsla(0 , 0% , 100% , 0); 
background: -webkit-gradient(left top , left bottom , color-stop(calc(100% - 150px) , hsla(0 , 0% , 96% , .4)) , color-stop(100% , rgba(68 , 192 , 230 , .5))); 
background: linear-gradient(180deg , hsla(0 , 0% , 96% , .4) calc(100% - 150px) , rgba(68 , 192 , 230 , .5)); 
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffffff" , endColorstr="#44c0e6" , GradientType=0)}


.font_blue { color: #35bbec}[class^=icon_] { display: inline-block; margin-top: -3px; vertical-align: middle}
.icon_global { background-image: url(/img/sprite.png); background-position: -192px -45px; width: 21px; height: 22px}
@media (-webkit-min-device-pixel-ratio: 2) , (min-resolution: 192dpi) { 
.icon_global { background-image: url(/img/sprite-2x.png); background-size: 215px 211px}}



.icon_search { background-image: url(/img/sprite.png); background-position: -192px 0; width: 23px; height: 23px}
@media (-webkit-min-device-pixel-ratio: 2) , (min-resolution: 192dpi) { 
.icon_search { background-image: url(/img/sprite-2x.png); background-size: 215px 211px}}

input[type=search] , textarea { padding: 6px; }
button , input[type=button] , input[type=reset] , input[type=submit] { 
border: none; background-color: transparent; transition: all .2s ease-in-out}
button: focus , input[type=button]: focus , input[type=reset]: focus , input[type=submit]: focus { outline: none}


.search_bar
.search { display: inline-block; width: 100px; height: 28px; border: 1px solid #3e3a39; border-radius: 10px; box-sizing: border-box; background: #ededee; font-size: .75rem; vertical-align: middle}


.head-search { font-size: 12px; line-height: 40%; margin-top: 10px; }

/* Search end*/