@charset "UTF-8";



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



.wrap { margin-left:auto; margin-right:auto; width:100%; letter-spacing: 5px; }  

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




/* ===== RWD抬頭圖示 */ 



/* RWD-抬頭圖示樣式--有輪播 */ 
@media only screen and (min-width: 768px) { /* pc-head.png> 768 */
#head-falsh .inner_head-falsh .left_head-falsh .Sbox_head-falsh .topic_head-falsh{ 
background: url("../img/logo.png") no-repeat center; 
height:150px; /* 圖檔高度 */
background-size:100% 100%;
}} 
@media only screen and (min-width: 480px) and (max-width: 767.99999px) { 
#head-falsh .inner_head-falsh .left_head-falsh .Sbox_head-falsh .topic_head-falsh{ 
background: url("../img/logo-tab.png") no-repeat center; 
height:150px; /* 圖檔高度 */
background-size:100% 100%;
}} 
@media screen and (orientation:portrait) and (min-width: 0px) and (max-width: 479.99999px){ /* (orientation:portrait)裝置直擺 ；(orientation:landscape)裝置橫擺 */
#head-falsh .inner_head-falsh .left_head-falsh .Sbox_head-falsh .topic_head-falsh{ 
background: url("../img/logo-mob.png") no-repeat center; 
height:150px; /* 圖檔高度 */
background-size:100% 100%;
}} 
/* 抬頭圖示樣式 --有輪播 END */ 

@media only screen and (min-width: 1025px) {
  #head-falsh .inner_head-falsh .left_head-falsh .Sbox_head-falsh .topic_head-falsh {
    background: url("../img/pc-head.jpg") no-repeat center;
    height: 300px;
    background-size: 100% 100%;
  }
}
 
/* 抬頭圖示樣式 --有輪播 END */ 



@media only screen and (max-width: 1200px) { /* Mobile 抬頭圖片與內文的間距 */
.rwd-content-bottom { padding-top:20px; }
}

        /* 示例裝飾樣示 */
        .decoration-bar {
            height: 5px;
            background: linear-gradient(90deg, #1a5c3a, #27ae60, #f1c40f);
            width: 100%;
        }




/* ********* 舊的左圖右文樣式 ********* */

.image-container{
line-height:188%;
max-width: 100%;
margin: 20px 0 30px 0px;
padding-left: 0px;
padding-right: 0px;
}

@media screen and (min-width: 1024px) {
.image-container span {
font-size:26px;
font-weight: bold; color:#00537B;
}}

@media screen and (max-width: 1024px) {
.image-container span {
font-size:26px;
font-weight: bold; color:#00537B;
}}


.image-container a {
font-weight: bold; 
}

@media screen and (min-width: 1024px) {
.image-container .image_left{ float: left; margin-right: 20px; max-width:750px; padding-bottom:2px;}
.image-container .image_right{ float: right; margin-left: 20px; max-width:750px; padding-bottom:2px;}
}

@media screen and (max-width: 1024px) {
.image-container .image_left{ float: left; margin-right: 20px; max-width:100%; padding-bottom:2px;}
.image-container .image_right{ float: right; margin-left: 20px; max-width:100%; padding-bottom:2px;}
}

.image-wrapper{
border: 0px dashed black;padding-bottom:2px;
}

.clear-fix {
overflow: hidden;  zoom: 1;
}
.image-wrapper span { display: block;  margin-top: 10px;}

@media screen and (max-width: 767px) {
.image-container {max-width: 100%; }
}

@media only screen and (min-width: 280px) and (max-width: 1024px) {
.image-container img {margin-bottom:20px;} 
}












.footer {padding-top: 10px; overflow:hidden; background-color:#800080;color:#fff; } 




/* ********************* footer design 頁尾計數器********************** */


/* 當螢幕寬度大於等於768px時，.webdesign類別會套用float: right;和 右邊距：30px；樣式，而當螢幕寬度小於768px時，這些樣式將被覆蓋為float: none;和 右邊距：0； */

@media (min-width: 768px) {
.webdesign { float: right; margin-right: 30px; }}
@media (max-width: 767px) {
.webdesign { float: none; margin-right: 0; }}



.footer_content span {font-size:26px;color:#aaa;letter-spacing:1px;}
.copyright {padding-top:10px;font-size:20px;}
.copyright b {font-size:20px;}
}


@media only screen and (min-width: 1600px) and (max-width: 1920px) {

.copyright {padding-top:0px;font-size:18px;}
.copyright b {font-size:18px;}
}



@media only screen and (min-width: 1280px) and (max-width: 1600px) {

.copyright {padding-top:10px;font-size:16px;}
.copyright b {font-size:16px;}
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {

.copyright {padding-top:10px;font-size:16px;}
.copyright b {font-size:16px;}
}


@media only screen and (min-width: 544px) and (max-width: 1024px) {


.copyright {padding-top:10px;font-size:16px;}
.copyright b {font-size:16px;}
}

@media only screen and (max-width: 544px) {

.copyright {padding-top:10px;font-size:16px;}
.copyright b {font-size:16px;}
}


.copyright > li {display: inline-block;vertical-align: top;}
.copyright > li a, .list-float > li a {display: inline-block;}





/* ********************* footer design 頁尾計數器********************** */


@media only screen and (min-width: 1920px) {
.footer_foot_design {background: #285179;padding-left: 60px;line-height:32px;font-size: 18px; color: #fff;}
/* .footer_foot_design a {float:right;padding-right: 60px;} */
}


@media only screen and (min-width: 1600px) and (max-width:1920px) {
.footer_foot_design {background: #285179;padding-left: 60px;line-height:32px;font-size: 18px; color: #fff;}
/* .footer_foot_design a {float:right;padding-right: 60px;} */
}

@media only screen and (min-width: 1280px) and (max-width:1600px) {
.footer_foot_design {background: #285179;padding-left: 40px;line-height:25px;font-size: 18px; color: #fff;}
}

@media only screen and (min-width: 1024px) and (max-width:1280px) {
.footer_foot_design {background: #285179;padding: 0px 5px 10px 35px;font-size: 18px; color: #fff;}
}

@media only screen and (min-width: 768px) and (max-width:1024px) {
.footer_foot_design {background:#285179;padding: 0px 10px 20px 35px;font-size:16px;color:#fff;}
.footer_foot_design {margin-bottom:55px;}}


@media only screen and (min-width: 980px) and (max-width:1030px) {
.footer_foot_design {margin-bottom:-55px;}}




@media only screen and (min-width: 544px) and (max-width:768px) {
.footer_foot_design {background:#285179;padding: 0px 10px 20px 20px;line-height:32px;font-size:16px;color:#fff;}
.footer_foot_design {margin-bottom:55px;}}


@media only screen and (max-width: 544px) {
.footer_foot_design {background:#285179;padding: 0px 10px 20px 20px;line-height:32px;color:#fff;}
.footer_foot_design {margin-bottom:50px;}
/* .footer_foot_design_product {margin-bottom:15px;} 產品頁尾 - RWD 網頁更新於...高度，已修正 REG.CSS */
}

/* 當螢幕寬度大於等於768px時，.webdesign類別會套用float: right;和 右邊距：30px；樣式，而當螢幕寬度小於768px時，這些樣式將被覆蓋為float: none;和 右邊距：0； */

@media (min-width: 768px) {
.webdesign { float: right; margin-right: 30px; }}
@media (max-width: 767px) {
.webdesign { float: none; margin-right: 0; }}





/* 頁尾電話.LINE 設定 Class 給 GTM */
.line-com{color:#cc3306}
.line-1{color:#cc3306}
.line-2{color:#cc3306}
.tel-1{color:#993300}
.tel-2{color:#660033}
.tel-3{color:#660033}





.body_footer ul{width:100%;margin:8px auto;height:50px;line-height:40px;}
.body_footer ul li{width:25%;float:left;color:#fff;}
.body_footer ul li dl{width:auto;text-align:center;}
.body_footer ul li dt{width:auto;height:48px;overflow:hidden;}
.body_footer ul li dd{width:auto;height:45px;font-size:18px;font-weight:normal;color:#fff;line-height:45px;overflow:hidden;background:-moz-linear-gradient(top, #3b3b3b, #131313);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b3b3b,endColorstr=#131313,grandientType=0);bottom:0;border-top:0px solid #fff;}  /* background:-moz-linear-gradient 背景漸層 */

.body_footer ul li dd{width:auto;height:45px;font-size:18px;font-weight:normal;color:#fff;line-height:45px;overflow:hidden;background:-webkit-linear-gradient(top, #3b3b3b, #131313);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b3b3b,endColorstr=#131313,grandientType=0);bottom:0;border-top:0px solid #fff;} /* background:-webkit-linear-gradient 背景線型漸變；border-top:0px RWD圖形下邊緣線，手機才能看到，PC不影響 */


/* 更改頁尾顏色 black ( z-index:2000;顯示在產品選單上方,不被覆蓋  */

.body_footer{width:100%;height:60px;width:100%;background:-moz-gradient(linear, 0 0, 0 100%, from(#3b3b3b), to(#131313));background:-moz-linear-gradient(top, #3b3b3b, #131313);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b3b3b,endColorstr=#131313,grandientType=0);bottom:0;border-top:3px solid #E18700;z-index:2000;}

/* 黑背景 .body_footer{width:100%;height:60px;width:100%px;background:-webkit-gradient(linear, 0 0, 0 100%, from(#3b3b3b), to(#131313));background:-webkit-linear-gradient(top, #3b3b3b, #131313);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b3b3b,endColorstr=#131313,grandientType=0);bottom:0;border-top:3px solid #E18700;} */

.body_footer{background:-webkit-gradient(linear, 0 0, 0 100%, from(#3b3b3b), to(#131313));background:-webkit-linear-gradient(top, #3b3b3b, #131313);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b3b3b,endColorstr=#131313,grandientType=0);bottom:0;border-top:3px solid #E18700;} 




.body_footer dd{padding:0px;}

.body_footer ul li a{width:100%;height:30px;display:block;border-right:0px solid #3b3b3b;border-left:0px solid #131313;} /* border-right:0px圖形分格線 */



@media screen and (min-width: 768px) { /* 當螢幕尺寸大於或等於 768px 時，應用以下CSS樣式 */
.service img { max-width:100%; height:auto; padding-top:15px; padding-bottom:20px; display:block;}
}
@media screen and (max-width: 767px) { /* 當螢幕尺寸小於或等於 767px 時，應用以下CSS樣式 */
.service img { max-width:320px; height:auto; padding-top:15px; padding-bottom:15px; display:block;}
}



/* FOOT 頁尾選單 */

.btn_footmenu, .btn_footmenu:visited { 
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); 
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); 
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
cursor: pointer;
}

.btn_footmenu {
display: inline-block;
padding: 10px 15px; /* 產品、案例大類，選單按鈕，padding: 10px 15px; 上下.左右間距 */
line-height: 20px; /* 設置按鈕內容區域的高度 */
vertical-align: middle; /* 調整文字的垂直對齊 ﹔line-height: 30px; 調整文字的垂直對齊 ﹔vertical-align: bottom; 將按鈕向下對齊 */
}



.btn_footmenu {margin-right: 12px; margin-top: 20px;} /* 所有產品、案例大類，選單btn樣式，選單加間距 margin: 8px; ；margin-top: 20px; 與上間距 */

.btn_footmenu:link {background-color: #4C4C4C;} 
.btn_footmenu:visited {background-color: #464646;} 
.btn_footmenu:hover {background-color: #B5005A;} /* #EA7500 */
.btn_footmenu:active {background-color: #777;} 
.btn_footmenu span { font:bold 10px/120%; font-size:20px;} /* font:bold 10px/120% Tahoma; 字型 */

.btn_foot {color: #fff;}
.btn_foot:hover {color: #FFCC00;} /* #ccff99 */


/* 選單按鈕文字大小--▼▼▼忽略 

@media only screen and (min-width: 1600px) {
.btn_footmenu span{font-size:22px}
}
@media only screen and (min-width: 1280px) and (max-width: 1600px) {
.btn_footmenu span{font-size:20px}
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
.btn_footmenu span{font-size:20px}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.btn_footmenu span{font-size:18px}
}
@media only screen and (max-width: 768px) {
.btn_footmenu span{font-size:20px}
}