@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------*/
/* Topper */
@media screen and (max-width: 1199px) {
	#Topper .top_links > ul > li { margin:0; }
}

/*----------------------------------------------------------------------*/
/* Header */
#Header { margin-top:49px; }
#Header > div { height:110px; }
#Header .logo { float:left; }
#Header .online_service { top:20px; }
#Header .online_service a { 
	padding:0 12px 0 36px; border:1px solid #ff7f30; line-height:30px; 
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	}
#Header .online_service::before { top:7px; left:12px; width:18px; height:18px; }


/*----------------------------------------------------------------------*/
/* Menu */
#Menu{position:relative;}
#Menu > div, #Menu .superfish { overflow:hidden; }
#Menu > div, #Menu .superfish.sf-js-enabled { overflow:visible; }
#Menu { margin-top:-58px; }
#Menu > div { max-width:1280px; padding:0 10px; margin:0 auto; box-sizing:border-box; position:relative; z-index:10000; }
#Menu > div::after { content:''; display:block; width:100%; clear:both; }
#Menu .superfish { float:right; }
#Menu .superfish li { position:relative; }
#Menu .superfish a { display:block; text-decoration:none; color:#333; }

#Menu .superfish > li { float:left; padding:20px 0 14px; position:relative; }
#Menu .superfish > li::before { 
	content:''; display:block; position:absolute; top:22px; right:0; width:1px; height:20px; background-color:#e1e1e1; 
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
	}
#Menu .superfish > li > a { font-size:16px; line-height:24px; }
@media screen and (max-width: 1199px) {
	#Menu .superfish > li > a { padding:0 16px; }
}
@media screen and (min-width: 1200px) {
	#Menu .superfish > li > a { padding:0 20px; }
}
#Menu .superfish > li:hover > a { color:#de1e19; }
#Menu .superfish > li:last-child::before { display:none; }
#Menu .superfish > li:last-child > a { padding-right:0; }
#Menu .superfish > li:first-child { 
	width:90px; background:url("../images/logo.png") no-repeat center center; background-size:contain; 
	margin-right:20px; text-indent:-10000px; display:none;
	}
#Menu .superfish > li:first-child::before { display:none; }

#Menu .superfish ul { 
	position:absolute; width:155px; background-color:#fff; 
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.15);
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.15);
	box-shadow:0 0 10px rgba(0,0,0,0.15);
	}
	#Menu .superfish > li > ul { top:58px; right:0; border-top:5px solid #de1e19; }
	#Menu .superfish > li > ul ul { top:0; left:150px;  }
#Menu .superfish ul li { border-top:1px dashed #cacaca; }
#Menu .superfish ul > li:first-child { border-top:0; }
#Menu .superfish ul a { padding:12px 20px; line-height:18px; color:#333333; font-size:14px; position:relative; }
#Menu .superfish ul a:hover { background-color:#ececec; color:#de1e19; }
#Menu .superfish ul a.sf-with-ul::after { 
	content:''; position:absolute; top:18px; right:12px; width:5px; height:5px; border-top:1px solid #5a5a5a; border-right:1px solid #5a5a5a;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	}
#Menu .superfish ul a:hover.sf-with-ul::after { border-top:1px solid #de1e19; border-right:1px solid #de1e19; }

/* 浮動效果 */
#Menu.MenuFix { position:fixed; top:0; left:0; margin-top:0; z-index:10003; }
#Menu.MenuFix .superfish { float:none; }
#Menu.MenuFix .superfish > li { padding:0; }
#Menu.MenuFix .superfish > li:first-child { display:block; }
#Menu.MenuFix .superfish > li::before { top:14px; }
#Menu.MenuFix .superfish > li > a { font-size:14px; line-height:48px; }
#Menu.MenuFix .superfish > li > ul { top:46px; }
@media screen and (max-width: 1199px) {
	#Menu.MenuFix .superfish > li > a { padding:0 8px; }
}
@media screen and (min-width: 1200px) {
	#Menu.MenuFix .superfish > li > a { padding:0 12px; }
}


/*----------------------------------------------------------------------*/
/* Key visual */
#KeyVisual .bx-wrapper .bx-controls-direction a { width:48px; height:48px; margin-top:-24px; }
#KeyVisual .bx-wrapper .bx-prev { background-position:0 0; left:10px; }
#KeyVisual .bx-wrapper .bx-next { background-position:-48px 0; right:10px; }


/*----------------------------------------------------------------------*/
/*上方圖像牆 */
.IndexPictureWall .pw-style .title span{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.IndexPictureWall > div{ padding:0 10px;}
	.IndexPictureWall .pw-style .item{ width:31.7%; padding-left:8px; padding-right:8px;}
}


/*----------------------------------------------------------------------*/
/*成功案例*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.IndexCase > div{ padding:0 10px;}
	.IndexCase .case-style .item{ width:31.7%; padding-left:8px; padding-right:8px;}
}


/*----------------------------------------------------------------------*/
/*驱动下载&防伪查询*/
@media screen and (min-width: 1280px) {
	.IndexToolBlock > div { padding-left:10px; padding-right:10px;}
}
@media screen and (max-width: 1200px) {
	.IndexToolBlock .btn{ margin-right:5%;}
}

/*----------------------------------------------------------------------*/
/* BtnTop */
.BtnTop { bottom:65px; }

/*----------------------------------------------------------------------*/
/* Footer */
@media screen and (max-width: 1439px) {
	#Footer > div{padding: 40px 10px 30px 65px;	}
}


/*----------------------------------------------------------------------*/
/* Copyright */
#Copyright > div { padding-right:10px; }
#Copyright .col_left { float:left; padding-left:165px; line-height:60px; }
#Copyright .logo { 
	display:block; position:absolute; top:0; left:10px; width:155px; height:60px; 
	background:url("../images/logo_white.png") no-repeat right center; background-size:contain; text-indent:-10000px; 
	}
	
#Copyright .col_right { float:right; display:table; }
#Copyright .col_right .contact_info { display:table-cell; padding:10px 0; height:60px; vertical-align:middle; box-sizing:border-box; }
#Copyright .col_right .contact_info span { display:block; float:right; line-height:20px; }
#Copyright .col_right .contact_info span:nth-child(2) { clear:right; }

@media screen and (max-width: 1439px) {
	#Copyright{ padding-left:50px;}
}
@media screen and (max-width: 1379px) {
	#Copyright .col_right { padding-right:50px; }
}


/*----------------------------------------------------------------------*/
/* 內頁 */
#ColumnCenter { padding-bottom:15px;}
#ColumnLeft { float:left; width:220px;}
#ColumnRight { position:absolute; top:190px; right:45px; width:150px; }
#ColumnLeft + #ColumnCenter { margin:0 180px 0 250px; }
#ColumnLeft + #ColumnCenter #MainContent { padding:20px; }

/*----------------------------------------------------------------------*/
/* 內頁元素 */
#Content { padding-left:20px; padding-right:20px; }
.PageTitle { padding-top:20px; }

/* 工具列 */
.ToolBar dl.font_size, .ToolBar dl.share { height:32px; }
.ToolBar .colm_left a, .ToolBar dl.font_size, .ToolBar dl.share { line-height:32px; }
.ToolBar .colm_left a span, .ToolBar dl.font_size dd, .ToolBar dl.font_size a, .ToolBar dl.share dd, .ToolBar dl.share a { width:32px; height:32px; }
.ToolBar .colm_right { float:right; }
.ToolBar dl.font_size { float:left; }
.ToolBar dl.share { float:left; padding-left:8px; }

/* 分類下拉 */
.CatTitle h2 { float:left; }
.CatTitle .cat_select { float:right; }

/* 列表搜尋 */
.ListSearch .BtnCommon input { line-height:30px; }

/* 頁碼 */
#Pagination a { margin:0 2px; color:#666; }
#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last { background-color:transparent; }
#Pagination .current { display:none; }
#Pagination a:hover { color:#000; background-color:#f0f0f0; border-radius:5px;}
#Pagination a.focuz { color:#fff; background-color:#f16e00; border-radius:5px;}
@media screen and (max-width: 1230px) {
	#Pagination a{ width:23px; line-height:23px; margin:0 1px;}
	#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last{ background-image:none; padding: 0 2px; }
	#Pagination a.first:hover, #Pagination a.prev:hover, #Pagination a.next:hover, #Pagination a.last:hover{  background-color:inherit; text-decoration:underline;}
	#Pagination .pages{ margin-bottom:10px;}
}


/* 文章标签 */
.article_tag dl > * { height:26px; line-height:26px; }
.article_tag dl dt { background-color:#e4e4e4; padding:0 20px 0 10px; margin-right:5px; }
.article_tag dl dt::after { content:''; display:block; position:absolute; top:0; right:0; border-left:8px solid #e4e4e4; border-top:13px solid #fff; border-bottom:13px solid #fff; }
.article_tag dl dd a { color:#eb5902; }

/* 文章前言 */
.article_brief { font-size:125%; }

/* colorbox */
#colorbox_thum a { width:225px; margin:10px 0px 10px 20px;}
#colorbox_thum a:nth-child(5n+1){ margin-left:0;}
@media screen and (max-width: 1320px) {
	#colorbox_thum a {width:215px; height:143px; margin:10px;}
	#colorbox_thum a:nth-child(5n+1){ margin-left:10px;}
}

/* 延伸阅读 */
.related_articles { padding:40px 40px 25px; }
.related_articles .item { width:23.5%; margin-left:2%; }
.related_articles .item:first-child { margin-left:0; }


/*----------------------------------------------------------------------*/
/* 表單 */
.FormTable > tbody > tr > th, .FormTable > tbody > tr > td { vertical-align:top; }
.FormTable > tbody > tr > th { width:120px; padding:15px 20px 15px 0; text-align:right; }
.FormTable > tbody > tr > th::after { content:'：'; position:absolute; top:14px; right:6px; }
.FormTable > tbody > tr > th:empty::after { display:none; }
.FormTable > tbody > tr > td { padding:10px 0 4px; }
.FormTable > tbody > tr:nth-child(even) > th, .FormTable > tbody > tr:nth-child(even) > td {  }

/* item */
.FormTable .item_wrap { margin-top:-5px; }
.FormTable .item_wrap > div.half { float:left; width:48%; padding-right:4%; }
.FormTable .item_wrap > div.half + div.half { padding-right:0; }
.FormTable .item_wrap > div.fullwidth { float:none; clear:both; width:100%; padding-right:0; }

.FormTable .item_wrap.inline { padding:0 40px 0 50px; }
.FormTable .item_wrap.inline span { top:10px; }
.FormTable .item_wrap.inline > div { padding-top:0; display:inline-block; margin-right:10px; }
.FormTable .item_wrap.inline > div label { display:inline-block; }

.input_table li { width:25%; }


/*----------------------------------------------------------------------*/
/* 登录 */
.LoginBox .colm_left { float:left; width:50%; padding-right:20px; box-sizing:border-box; }
.LoginBox .colm_right { float:right; width:50%; padding-left:20px; box-sizing:border-box; border-left:1px solid #e5e5e5; }


/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable th { 
	padding:12px 10px; border-top:2px solid #c6c6c6; border-bottom:2px solid #c6c6c6; white-space:nowrap; 
	background:#f0f0f0 url("../images/table_th_divide.png") no-repeat 0 center;
	}
	.ListTable  tr th:first-child { background-image:none; }
.ListTable td { padding:12px 10px; border-bottom:1px solid #e2e2e2; line-height:24px; vertical-align:middle; }
.ListTable tr:nth-child(2n+3) { background-color:#fdfdfd; }

.ListTable th.no { width:30px; }
.ListTable td.no { width:30px; color:#7e7e7e; font-size:92.857%; font-family:Arial, Helvetica, sans-serif; white-space:nowrap; text-align:right; }
.ListTable th.date { width:70px; }
.ListTable td.date { width:70px; color:#7e7e7e; font-size:92.857%; font-family:Arial, Helvetica, sans-serif; white-space:nowrap; }
.ListTable th.date.range, .ListTable table td.date.range { width:140px; }
.ListTable th.cat { width:100px; }
.ListTable td.cat { width:100px; text-align:center; }
.ListTable th.unit { width:140px; }
.ListTable td.unit { width:140px; text-align:center; }
.ListTable th.download { width:80px; }
.ListTable th.download.desc { width:auto; }
.ListTable td.download { width:80px; }
.ListTable td.download.desc { width:auto; }
.ListTable td.download li a { line-height:20px; }

/*table_st1*/
.table_st1 th{ background-color:#f6ede2; background-image:none; border:0;}
.table_st1 .st1_center{ text-align:center;}


/*----------------------------------------------------------------------*/
/* 圖文列表 */
.ListPicText .item { float:left; width:32.3%; }
.ListPicText .item:nth-child(3n+1){ margin-right:12px;}
.ListPicText .item:nth-child(3n+2){ margin-right:6px; margin-left:6px;}
.ListPicText .item:nth-child(3n+3){ margin-left:12px;}

@media screen and (max-width: 1269px) {
	.ListPicText .item {width:32.2%; }
}

@media screen and (max-width: 1169px) {
	.ListPicText .item {width:32.1%; }
}

@media screen and (max-width: 1080px) {
	.ListPicText .item { width:32%;}
}

/* style1 */
.ListPicText.style1 .title a{ padding:0 20px; }
.ListPicText.style1 .desc{ padding-left:20px; padding-right:20px;}

/* style2 */
.ListPicText.style2 .item > div { overflow:hidden; }
.ListPicText.style2 .item:hover .img { transform:scale(1.03); }
.ListPicText.style2 .item:hover .img::after { opacity:0.5; }
.ListPicText.style2 .item .desc, .ListPicText.style2 .item .btn { max-height:0; opacity:0; overflow:hidden; }
.ListPicText.style2 .item { margin-bottom:25px; border:1px solid #ddd;}
.ListPicText.style2 .item .cont { background-color:rgba(255,255,255,0.85); position:absolute; left:0; bottom:0; width:100%; z-index:2; padding-left:20px; padding-right:20px; }
.ListPicText.style2 .item .title { padding-bottom:10px; }
.ListPicText.style2 .item .title a { width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.ListPicText.style2 .item .desc { color:#333; }

@media screen and (max-width: 1279px) {
	.ListPicText.style2 .item .cont { padding-top:10px; }
	.ListPicText.style2 .item .desc { font-size:81.25%;}
}
@media screen and (min-width: 1280px) {
	.ListPicText.style2 .item .cont { padding-top:10px; }
	.ListPicText.style2 .item .desc { font-size:87.5%; }
}

/* hover效果 */
.ListPicText.style2 .item .img, 
.ListPicText.style2 .item .img::after, 
.ListPicText.style2 .item .tag,
.ListPicText.style2 .item .btn, 
.ListPicText.style2 .item .btn a { 
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}
.ListPicText.style2 .item .desc { 
	-webkit-transition: opacity, max-height 0.5s ease;
	-moz-transition: opacity, max-height 0.5s ease;
	transition: opacity, max-height 0.5s ease;
	}
.ListPicText.style2 .item:hover .desc, .ListPicText.style2 .item:hover .btn { max-height:85px; opacity:1; }
.ListPicText.style2 .item:hover .desc { margin-top:-5px; }
.ListPicText.style2 .item:hover .btn { padding-top:10px; padding-bottom:15px; }


/*----------------------------------------------------------------------*/
/* 销售网点 */
.searchBox.sale-location .select { float:left; margin-right:20px;}
.searchBox.sale-location .select label { float:left;}
.searchBox.sale-location .select select { width:200px; max-width:200px;}

@media screen and (max-width: 1200px) {
	.searchBox.sale-location{ padding:15px 20px; }
	.searchBox.sale-location span{clear:both;}
	.searchBox.sale-location .select { margin-bottom:10px; width:33.3333%; margin-right:0; padding-right:10px;}
	.searchBox.sale-location .select select { width:100%; max-width:inherit; }
	.searchBox.sale-location .select label{ float:inherit;}
}


/*----------------------------------------------------------------------*/
/* 商品情報 */
/* 商品列表 */
.ProductList .item { float:left; margin-bottom:25px; }
	.ProductList.cate .item { width:50%; }
	.ProductList.list .item { width:33.3333%; }
	.ProductList.cate .item:nth-child(2n+1) > a { padding-right:15px; }
	.ProductList.cate .item:nth-child(2n+2) > a { padding-left:15px; }
	.ProductList.list .item:nth-child(3n+1) > a { padding-right:8px; }
	.ProductList.list .item:nth-child(3n+2) > a { padding-right:4px; padding-left:4px; }
	.ProductList.list .item:nth-child(3n+3) > a { padding-left:8px; }
.ProductList.cate .item .img img { height:180px; }


/*----------------------------------------------------------------------*/
/* 商品內頁 */
.ProductBrief .img { float:left; width:40%; padding-right:10px; }
.ProductBrief .desc { float:right; width:60%; padding-left:10px; }

/* 商品內容頁籤 */
.ProductCont .tab_cont { padding:0; transform:scaleY(0); height:0; visibility:hidden; opacity:0; }
.ProductCont .tab_cont.active { padding:20px 0; transform:scaleY(1); height:auto; visibility:visible; opacity:1; }
	/* 遮蔽可選區域 */
	.ProductCont .tab_cont > .title { position:relative; display:none;}
	.ProductCont .tab_cont > .title::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; }
	
.ProductCont .tab_cont > .title { margin-bottom:25px; }
.ProductCont .tab_cont > .title span { border-bottom:1px solid #dddddd; padding:8px 0; color:#666666; font-size:125%; line-height:24px; }
.ProductCont .tab_cont > .title span img.mobile { display:none; }

/* 商品規格 */
.ProductSpec { border-top:1px solid #ddd; border-right:1px solid #ddd; margin-bottom:30px; }
.ProductSpec tr:nth-child(even) td, .ProductSpec tr:nth-child(even) th{ background-color:#f5f5f5;}
.ProductSpec th, .ProductSpec td { border-bottom:1px solid #ddd; border-left:1px solid #ddd; padding:10px 20px; line-height:150%; color:#444; font-size:93.75%; }
.ProductSpec th { background-color:#fff; width:120px; padding-left:40px; text-align:left; }
.ProductSpec td { background-color:#fff; }


/* 成功案例 */
.CaseList .item { float:left; width:50%; }
.CaseList .item:nth-child(2n+1) > div { margin-right:10px; }
.CaseList .item:nth-child(2n+2) > div { margin-left:10px; }
.CaseList .item .cont { padding:15px 10px; }


/* 驱动程式下载 */
.searchBox.download{ padding:20px 40px 5px;}


/*----------------------------------------------------------------------*/
/* 聯絡我們 */
#map { height:450px; }


/*----------------------------------------------------------------------*/
/* FIX防伪查询按鈕*/
.FixSecurityBottom{ position:fixed; bottom:5px; left:5px; z-index:99999; margin-left:5px; margin-bottom:5px;}
.FixSecurityBottom a { display:block; background-color:#ea833d; padding:15px 10px; max-width:180px;  border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; 
	box-shadow: 0 0 8px 3px rgba(0,0,0,0.12);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.FixSecurityBottom a:hover { background-color:#a05825;}
.FixSecurityBottom:after{ content:''; display:block; width:21px; height:20px; background:url(../images/icon_security3.png) no-repeat; position:absolute; bottom:0; right:0;}
.FixSecurityBottom > a:before{ content:''; display:inline-block; width:35px; height:41px; background:url(../images/icon_security2.png) no-repeat; 
	position:absolute; top:18px; left:15px; background-size:cover;}
.FixSecurityBottom a span{ display:inline-block; margin-left:50px; }
.FixSecurityBottom a span.text{ color:#fff; border-bottom:1px solid #f5b68b; padding-bottom:3px; font-size:14px;}
.FixSecurityBottom a:hover span.text{border-bottom:1px solid #c57f50;  }
.FixSecurityBottom a span.search{ color:#fff47b; position:relative; padding-top:3px; font-size:16px;}
.FixSecurityBottom a span.search:after{ content:''; display:inline-block; top:7px; right:-20px; position:absolute; background:url(../images/icon_search3.png) no-repeat; width:15px; height:15px;}


@media screen and (max-width: 1650px) {
	.FixSecurityBottom{ bottom:5px; left:5px;}
	.FixSecurityBottom:after{ display:none;}
	.FixSecurityBottom > a:before{ width:30px; height:35px; background-size:cover;}
	.FixSecurityBottom a{ max-width:50px; padding: 8px; box-sizing:border-box;}
	.FixSecurityBottom a span{ display:block;  margin-left:0; margin-top:40px;}
	.FixSecurityBottom a span.text{ display:none;}
	.FixSecurityBottom a span.search:after{ display:none;}
	.FixSecurityBottom > a:before{ left:10px; top:15px;}
	.FixSecurityBottom a span.search{ text-align:center; font-size:87.5%;}
}


/*----------------------------------------------------------------------*/
/* 提醒視窗 */
.alert_box > div { width:930px; margin:auto; max-height:80%; }
.alert_box > div { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.alert_box .close { position:fixed; top:5px; right:5px; }

.service_box .alert_contboxBody { height:365px; }
@media screen and (min-width: 1280px) {
	.alert_box.service_box > div { width:1050px; }
	.alert_box.download_box > div { width:1100px; }
}
