@charset "UTF-8";


/*** 抬頭 Head  inc/headFlash_css、headFlash_pic.asp、headFlash.asp ***/


/* RWD 抬頭固定 */

.header_top{position:fixed;top:0;left:0;right:0;z-index:2}

.header_menu{position:static;z-index:3}

/* H1 標籤底圖設置 topic_indexh1 首頁 H1 */

@media only screen and (min-width: 801px) {
/* 螢幕大於801PX的時候 */
#body_indexh1 .inner_indexh1 .left_indexh1 .Sbox_indexh1 .topic_indexh1{



	font-size:32px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 0px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}

@media only screen and (min-width: 581px) and (max-width: 800px) {

#body_indexh1 .inner_indexh1 .left_indexh1 .Sbox_indexh1 .topic_indexh1{
background: url("../img/pageh1-tab.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 0px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}


@media only screen and (min-width: 381px) and (max-width: 580px) {

#body_indexh1 .inner_indexh1 .left_indexh1 .Sbox_indexh1 .topic_indexh1{
background: url("../img/pageh1-tab2.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 0px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}



@media only screen and (min-width: 0px) and (max-width: 380px) { /* (orientation:portrait)裝置直擺 ；(orientation:landscape)裝置橫擺*/
#body_indexh1 .inner_indexh1 .left_indexh1 .Sbox_indexh1 .topic_indexh1{

.webmenu_top{ margin-top:10px;}

background: url("../img/pageh1-mob.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px -10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}












/* H1 標籤底圖設置 topic_index 網頁 */




@media only screen and (min-width: 801px) {
/* 螢幕大於801PX的時候 */
#body_index .inner_index .left_index .Sbox_index {

	font-size:20px; /* 抬頭文字大小xxxxxxxxxxx*/
	height:50px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:100px; margin-top:0px;/* 抬頭文字上下位置 */
	text-align:center;
	color:#888;
	font-weight:normal;}}

@media only screen and (min-width: 581px) and (max-width: 800px) {

#body_index .inner_index .left_index .Sbox_index .topic_index{
background: url("../img/page-tab.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}


@media only screen and (min-width: 381px) and (max-width: 580px) {

#body_index .inner_index .left_index .Sbox_index .topic_index{
background: url("../img/page-tab2.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}



@media only screen and (min-width: 0px) and (max-width: 380px) { /* (orientation:portrait)裝置直擺 ；(orientation:landscape)裝置橫擺*/
#body_index .inner_index .left_index .Sbox_index .topic_index{


background: url("../img/page-mob.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}
}











/* 動態文字兩行選單---適RWED */

nav-txt-menu {width: 100%;margin: 10px auto;overflow: hidden;}
nav-txt-menu ul {list-style: none;overflow: hidden;}
nav-txt-menu li a {background: #444;border-right: 1px solid #fff;color: #fff;display: block;float: left;padding: 10px;text-align: center;text-decoration: none;text-transform: uppercase;width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}

nav-txt-menu li a:hover {background: #222;}
nav-txt-menu small {text-transform: none;color: #aaa;}
nav-txt-menu li:last-child a {border: none;}

/*BLUE MENU*/
nav-txt-menu .blue {margin-top: 50px;}
.blue li a {background: #75b1de;}
.blue small {color: white;}
.blue li a:hover {background: #444;}

/*RED MENU*/
nav-txt-menu .red {margin-top: 50px;}
.red li a {background: #5C0002;}
.red small {color: white;}
.red li a:hover {background: #a60306;}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
nav-txt-menu li a {
}	
nav-txt-menu small {
}
}

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav-txt-menu li a {width: 25%;border-bottom: 1px solid #fff;}	
nav-txt-menu li:last-child a, nav-txt-menu li:nth-child(4) a {border-right: none;}
nav-txt-menu li:nth-child(5) a, nav-txt-menu li:nth-child(6) a, nav-txt-menu li:nth-child(7) a, nav-txt-menu li:nth-child(8) a {border-bottom: none;}
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav-txt-menu li a {width: 50%;font: 800 38px/1.5 'Cutive', "Microsoft Yahei",Arial, Helvetica, sans-serif, Verdana, Arial;border-bottom: 2px solid #fff;padding-top: 30px;padding-bottom: 30px;}
nav-txt-menu li:nth-child(even) a {border-right: none;}
nav-txt-menu li:nth-child(5) a, nav-txt-menu li:nth-child(6) a {border-bottom: 2px solid #fff;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
nav-txt-menu li a {font: 400 24px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;}
}

/* dynamic-txt-menu END */




/* 選單共用 emphasize 強調網頁 H2 */

.content_box .list_box {width:100%;margin-left:auto;margin-right:auto; }
.content_box .list_box .list_class li { width:100%;float:left;height:50px;margin-bottom:6px;font-size:1.5rem; display:inline;}
.content_box .list_box .list_class li a {width:100%;height:50px;line-height:50px;text-decoration:none;display:block;background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#efefef));background:-moz-linear-gradient(top, #ffffff, #f0f0f0);/* Firefox */filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#efefef,endColorstr=#f0f0f0,grandientType=0);border-bottom:#dfdfdf solid 1px;margin:0; text-indent:10px; font-weight:bold;}
.content_box .list_box .list_class li a:hover { background:#61a0cc; color:#FFFFFF;}
.content_box .list_box .list_class li a:active { background:#61a0cc; color:#FFFFFF;}
.content_box .list_box .list_class li a span { width:30px; height:50px; float:right; background:url(../img/menupic.png) left center no-repeat;}

.content_box_emphasize .list_box_emphasize {width:100%;margin-left:auto;margin-right:auto; }
.content_box_emphasize .list_box_emphasize .list_class_emphasize li h2 {position:relative; top:0px; left:0px; line-height:40px; color:#E13800; font-size:1.5rem; display:inline;} /*  relative 相對定位，可以使用 top, right, bottom, left 屬性來指定物件的偏移量 */
.content_box_emphasize .list_box_emphasize .list_class_emphasize li { width:100%;float:left;height:50px;margin-bottom:6px;font-size:1.5rem; display:inline;}
.content_box_emphasize .list_box_emphasize .list_class_emphasize li a {width:100%;height:50px;line-height:50px;text-decoration:none;display:block;background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#efefef));background:-moz-linear-gradient(top, #ffffff, #f0f0f0);/* Firefox */filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#efefef,endColorstr=#f0f0f0,grandientType=0);border-bottom:#dfdfdf solid 1px;margin:0; text-indent:10px; font-weight:bold;}
.content_box_emphasize .list_box_emphasize .list_class_emphasize li a:hover { background:#800080; color:#FFFFF0;} /* 紫色 #800080 、 深灰 #595959 、橙色 #FFA500 #E13800橙紅 */
.content_box_emphasize .list_box_emphasize .list_class_emphasize li a:active { background:#61a0cc; color:#FFFFFF;}
.content_box_emphasize .list_box_emphasize .list_class_emphasize li a span { width:30px; height:50px; float:right; background:url(../img/menupic.png) left center no-repeat;}


/* 選單共用 END */




/* 選單---首頁+網頁 */


@media only screen and (min-width: 1600px) {
.content-h2 h2 {margin-top:0px; margin-bottom:30px;font-size:25px;color:#24496F;}
}
@media only screen and (min-width: 1280px) and (max-width: 1600px) {
.content-h2 h2 {margin-top:0px; margin-bottom:30px;font-size:24px;color:#24496F;}
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
.content-h2 h2 {margin-top:0px; margin-bottom:30px;font-size:22px;color:#24496F;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.content-h2 h2 {margin-top:0px; margin-bottom:20px;font-size:22px;color:#24496F;}
}
@media only screen and (min-width: 544px) and (max-width: 768px) {
.content-h2 h2 {margin-top:30px; padding:40px 20px 50px 0px; line-height:40px; margin-bottom:20px;font-size:20px;color:#24496F;}
}
@media only screen and (max-width: 544px) { 
.content-h2 h2 {margin-top:30px; padding:50px 10px 50px 0px; line-height:40px; margin-bottom:20px;font-size:22px;color:#24496F;}
}







@media only screen and (max-width: 800px) {
.content_box_reg .list_box_reg .list_class_reg li { font-size:20px;}
.content_box_reg .list_box_reg .list_class_reg li a span { width:30px; height:50px;float:right; background:url(menupic.png) left center no-repeat;}
}
@media only screen and (max-width: 800px) {
.content_box_reg .list_box_reg .list_class_reg li{width:100%;float:left;padding-bottom:30px;height:30px;}
.content_box_reg .list_box_reg .list_class_reg li a {width:100%;height:30px;line-height:30px;text-decoration:none;display:block;background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#efefef));background:-moz-linear-gradient(top, #ffffff, #f0f0f0);/* Firefox */filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#efefef,endColorstr=#f0f0f0,grandientType=0);border-bottom:#dfdfdf solid 1px;margin:0; text-indent:10px; font-weight:bold;}
}









/* content_box_full ===ok */









/*product*/

.RightNav span{
	color:#296cd4;}
 .ClassNav{
	padding:10px 10px;}
	
 .ClassNav .NavTree ul{
	padding-left:10px;
	}
	
 .ClassNav .NavTree ul li{
position: relative;
	width:145px;
	height:50px;
	overflow:hidden;
	float:left;
	padding-left:10px;}
	


/* menu links style */
 .ClassNav .NavTree 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 .NavTree ul li a:hover{
	background: url("../img/navtree_page_hover.gif") repeat-x 0px top;
	color:#FFF;
	text-decoration:none;
}


.works-item {
    display: inline-block;
    min-width: 270px; /* 四張 min-width: 150px; 三張 270px 兩張 420 px 【圖片 4 : 3 縮放；註 min-width (px) 的 padding-bottom: 75% 】*/
    width: calc(20% - 1em);
    margin: 20px .5em 0;
    vertical-align: top;
}
.works-item-t {
    padding-bottom: 75%; /* 【圖片 4 : 3 縮放；註 min-width (px) 的 padding-bottom: 75% 】*/
    position: relative;

}
.works-item-t > img {
    position: absolute;
    width: 100%; height: 100%;
}