@charset "big5";
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
@import url("_reset.css");
@import url("_common.css");
@import url("https://xdb2.x-legend.com.tw/css/component/_footer.css");
@import url("_layout.css");

/* ==========================================================================
   common
============================================================================= */

.pages_content .img img { background: #FFF; padding: 5px; border: 1px solid #ccc; }
.textCenter {text-align: center;}
.textLeft {text-align: left;}
.textRight {text-align: right;}
.article {
	font-size: 13px;
	line-height: 1.6em;
	padding: 8px 10px 25px;
	color: #444;
}
.article p,.section {
	margin-bottom: 15px;
}

.article a {text-decoration: underline;}
.article a:hover {text-decoration: none;}
.newsList a {color: #444;text-decoration: none;}
.newsList a:hover {color: #0453b4; text-decoration: underline;}
/* ==========================================================================
   Page title
============================================================================= */

.title {
  height: 106px;
  position: relative;
  background: url('../images/title.jpg') 0 0 no-repeat;
  margin-bottom: 10px;
}
.title p {
  position: absolute;
  left: 17px;top: 51px;
  font-family: "微軟正黑體";
  color: #fff;
  font-size: 16px;
}

.title_1 {background-position: 0 0;}
.title_2 {background-position: 0 -106px;}
.title_3 {background-position: 0 -212px;}
.title_4 {background-position: 0 -318px;}
.title_5 {background-position: 0 -424px;}
.title_6 {background-position: 0 -530px;}

/* ==========================================================================
   Page nav
============================================================================= */
.pages_nav {
	background: #e4e4e4;
	margin-bottom: 30px;
}
.pages_nav li {
	float: left;
	text-align: center;
	font-family:"微軟正黑體";
	font-weight: bold;
	font-size: 14px;
}
.pages_nav a {
	display: block;
	height: 14px;
	padding: 18px 0 16px;
	border-bottom:4px solid #afafaf;
	color: #000;
	text-decoration: none;
}
.pages_nav li.unlink {
	display: block;
	height: 14px;
	padding: 18px 0 16px;
	border-bottom:4px solid #afafaf;
	color: #888;
	text-decoration: none;
}
.pages_nav a:hover,
.pages_nav li.active a,
.member_1 .pages_nav li.pages_nav_1 a,
.member_3 .pages_nav li.pages_nav_3 a,
.member_8 .pages_nav li.pages_nav_8 a,
.intro_4 .pages_nav li.pages_nav_4 a,
.product_1 .pages_nav li.pages_nav_1 a,
.product_1 .pages_nav li.pages_nav_1 a,
.download_1 .pages_nav li.pages_nav_1 a,
.download_2 .pages_nav li.pages_nav_2 a,
.download_3 .pages_nav li.pages_nav_3 a,
.download_4 .pages_nav li.pages_nav_4 a,
.service_4 .pages_nav li.pages_nav_4 a,
.service_5 .pages_nav li.pages_nav_5 a,
.service_6 .pages_nav li.pages_nav_6 a,
.service_7 .pages_nav li.pages_nav_7 a,
.service_8 .pages_nav li.pages_nav_8 a {
	border-bottom: none;
	padding: 14px 0 20px;
	border-top: 4px solid #5ed3f8;
	background: #fff;
	color: #0453b4;
	text-decoration: none;
}

#news .pages_nav li {width: 16.66%;}
#member .pages_nav li {width: 11%;}
#member .pages_nav li.pages_nav_8 ,
#member .pages_nav li.pages_nav_2 {
	width: 17%;
}
#product .pages_nav li {width: 50%;}
#intro .pages_nav li,
#download .pages_nav li {width: 25%;}

#service .pages_nav li {width: 12%; font-size: 13px; }
#service .pages_nav li.pages_nav_4 {
	width: 8%;
}
#service .pages_nav li.pages_nav_5 ,
#service .pages_nav li.pages_nav_6 {
	width: 16%;
}

/*
#service .pages_nav li {width: 8.5%;font-size: 13px;}
#service .pages_nav li.pages_nav_1 ,
#service .pages_nav li.pages_nav_3 ,
#service .pages_nav li.pages_nav_4 { 
	width: 13%;
}

#service .pages_nav li.pages_nav_5 ,
#service .pages_nav li.pages_nav_6 {
	width: 14%;
}
#service .pages_nav li.pages_nav_2 {
	width: 16%;
}
*/
/* ==========================================================================
   Btns
============================================================================= */
.pages_content .btns {
	position: relative;
	text-decoration: none;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
  	zoom: 1;
  	*display: inline;
	border: 1px solid #676767;
	text-align: center;
	-webkit-border-radius:  3px;
	-moz-border-radius:     3px;
	-ms-border-radius:      3px;
	-o-border-radius:       3px;
	border-radius:          3px;
	font-family:"微軟正黑體";
	font-weight: bold;
	color: #1b3e65;
	background: #5fa1a6;	
	background: -webkit-linear-gradient(top, #99ded8, #5fa1a6);
	background: -moz-linear-gradient(top, #99ded8, #5fa1a6);
	background: -ms-linear-gradient(top, #99ded8, #5fa1a6);
	background: -o-linear-gradient(top, #99ded8, #5fa1a6);
	background: linear-gradient(top,#99ded8, #5fa1a6);
	margin:0 2px 10px;
}
.pages_content .btns:hover {
	text-decoration: none;
	color: #fff;
	background: #779dbb;	
	background: -webkit-linear-gradient(top, #779dbb, #c2dafc);
	background: -moz-linear-gradient(top, #779dbb, #c2dafc);
	background: -ms-linear-gradient(top, #779dbb, #c2dafc);
	background: -o-linear-gradient(top, #779dbb, #c2dafc);
	background: linear-gradient(top,#779dbb, #c2dafc);
}
.btns:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-top:2px solid rgba(255,255,255,0.5);
}
.btns span {
	color: #fff;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	font-weight: normal;
}
.btns em {
	color: #007192;
	font-style: normal;
}

.btn_large {
	font-size: 24px;
	padding: 18px 5px 12px;	
	width: 314px;	
}
.btn_large span {
	font-size: 14px;
	margin-top: 5px;
}
.btn_large:hover em {
	color: #fff;
}

.btn_medium {
	font-size: 18px;
	padding: 14px 0;	
	width: 220px;	
}
.btn_medium span {
	 font-size: 14px;
	 color: #FFF;
	 line-height: 15px;
	 font-weight: bold;
	 font-family: "微軟正黑體";	 
}
.btn_small {
	font-size: 14px;
	padding: 10px 0;	
	width: 130px;	
}
/*X-Downloader*/
.xDownloader {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
  	zoom: 1;
  	*display: inline;
  	-webkit-border-radius:  3px;
	-moz-border-radius:     3px;
	-ms-border-radius:      3px;
	-o-border-radius:       3px;
	border-radius:          3px;
	width: 222px;
	/*height: 50px;*/
	overflow: hidden;
	position: relative;
	margin:0 2px 10px;
}
.xDownloader .btns {
	margin: 0;
}
.xDownloader p {
	position: absolute;
	margin: 0;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
	bottom: -20px;
	left: 0;
	font-size: 12px;
}
.xDownloader a {
	color: #fff;
}
/* ==========================================================================
   News
============================================================================= */

#news .article {
	font-size: 15px;
}

.pages_content .newsList li {
	margin-bottom: 7px;
}

.pages_control,.btn_back {
	text-align: center;
	padding: 10px 0;
}

.pages_prev,.pages_next,.page_list,.page_list li { display: inline-block;}
.pages_control a,
.pages_control span,
.btn_back a {
	display: inline-block;
	vertical-align: top;
  	zoom: 1;
  	*display: inline;
	width: 13px; 
	margin: 0 2px; 
	padding: 0 5px; 
	height: 22px; 
	font-size: 12px; 
	line-height: 22px; 
	text-align: center; 
	text-decoration: none;
	border: 1px solid #666864;
	-webkit-border-radius:  3px;
	-moz-border-radius:     3px;
	-ms-border-radius:      3px;
	-o-border-radius:       3px;
	border-radius:          3px;
}
.btn_back a {
	width: 40px;
}
.pages_control a,
.btn_back a {
	color: #fff;
	background: #5e5e5e;	
	background: -webkit-linear-gradient(top, #a1a1a1, #5e5e5e);
	background: -moz-linear-gradient(top, #a1a1a1, #5e5e5e);
	background: -ms-linear-gradient(top, #a1a1a1, #5e5e5e);
	background: -o-linear-gradient(top, #a1a1a1, #5e5e5e);
	background: linear-gradient(top,#a1a1a1, #5e5e5e);
}
.pages_control a:hover,
.btn_back a:hover {
	color: #fff;
	background: #1d1d1d;	
	background: -webkit-linear-gradient(top, #1d1d1d, #6c6c6c);
	background: -moz-linear-gradient(top, #1d1d1d, #6c6c6c);
	background: -ms-linear-gradient(top, #1d1d1d, #6c6c6c);
	background: -o-linear-gradient(top, #1d1d1d, #6c6c6c);
	background: linear-gradient(top,#1d1d1d, #6c6c6c);
}
.pages_control span {
	color: #3b3b3d;
	background: #a2a2a2;
	background: -webkit-linear-gradient(top, #f9f9f9, #a2a2a2);
	background: -moz-linear-gradient(top, #f9f9f9, #a2a2a2);
	background: -ms-linear-gradient(top, #f9f9f9, #a2a2a2);
	background: -o-linear-gradient(top, #f9f9f9, #a2a2a2);
	background: linear-gradient(top,#f9f9f9, #a2a2a2);
}

.pages_content h1 {
	clear: both;
	font-family:"微軟正黑體";
	border: 2px solid #e6e6e6;
	border-width: 2px 0;
	padding: 1px 0;
	background: #fff;
	font-size: 16px;
	font-weight: bolder;
	margin-bottom: 10px;
}
h1 div {
	background: #f7f8fc;
	color: #5A3CC5;
	padding: 10px 12px;
}
.h1 div:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html h1 div,
*:first-child+html .h1 div { zoom: 1; }
h1 tt {
	color: #333;
	float: right;
	font-size: 12px;
}
h1 span {
	color: #259CBF;
	margin-left: 5px;
}

.pages_content h2 {
	font-size: 13px;
	color: #242424;
	font-weight: bolder;
	margin-bottom: 1em;
}

.share {padding-right: 10px;line-height: }
.share a {
	color: #4560af;
	font-size: 17px;
	display: inline-block;
	margin-left: 2px;
  	zoom: 1;
  	*display: inline;
}

/* ==========================================================================
   Table
============================================================================= */

.tbstyle_1 { 
	background: #FFF; 
	border: 3px solid #dedede; 
	padding:1px; 
	margin: 0px 0px 20px ; 
	line-height: 1.6em; 
	text-align: center;
}
.tbstyle_1 table { 
	border: 1px solid #ccc; 
	border-width:1px 1px 0px 0px; 
}
.tbstyle_1 th,.tbstyle_1 td { 
	padding: 8px 5px; 
	border:1px solid #ccc; 
	border-width: 0px 0px 1px 1px; 
}
.tbstyle_1 th { 
	background: #5fa4b8; 
	color: #fff;
	color: rgba(255,255,255,0.8);
	font-size: 15px; 
	font-family:"微軟正黑體", Verdana;
}
.tbstyle_1 td { background: #fff; }
.tbstyle_1 td.odd,
.tbstyle_1 tr.odd td { background: #f3f3f3; }
.tbstyle_1 tr td.odd2 { background: #7C96AE; color: #fff; }

.tbstyle_1 table .table_title { float: left; font-size:13px; color: #4789B8; font-weight: bold; vertical-align: middle; background:url('/images/tools/h3_bg.gif') 0px 6px no-repeat; padding-left: 14px; }

.errorTable td { text-align: left; }
.errorTable td.odd,
.errorTable tr.odd td,
.introTable td.odd,
.introTable tr.odd td,
.productTable td.odd,
.productTable tr.odd td { background: #FFF; }

/* ========================================================================== 
   btn_top
==========================================================================*/
.btnTop { position: fixed; z-index: 99; bottom: 160px; left: 50%; margin-left: 500px;display: none;}
.btnTop a {
  display: block; 
  width: 44px; 
  height: 44px; 
  background: url('/images/btn_top.png') 0 0 no-repeat;
  white-space: nowrap;
  text-indent: 200%;
  overflow: hidden;
}
.btnTop a:hover { background-position: 0px -44px; }

/* ========================================================================== 
   FAQ
==========================================================================*/
.faqWidget {
	margin-bottom: 15px;
}
.faqWidget dt {
	cursor: pointer;
	color: #0453b4;
	line-height: 2em;
	text-decoration:none;
}
.faqWidget dt.hover {text-decoration:none; }
.faqWidget dt.open,
.faqWidget dt.hover.open {}
.faqWidget dt span,
.faqWidget dt.hover span {
	color: #444;
}
.faqWidget dd {padding:5px 0px 15px 22px;display:none;}

.faqWidget ul,
.faqWidget ol {margin-left:10px;padding-left:15px;}
.faqWidget ol li { list-style-type:decimal;}
.faqWidget ul li ,
.faqWidget ol ul li { list-style-type: disc;}

/* ========================================================================== 
   Wallpaper
==========================================================================*/
.wallpaper {
	width: 664px;
	margin: 0 auto;
}
.art {
	width: 678px;
	margin: 0 auto;
}
.wallpaper li {
	width: 292px;
}
.wallpaper li,
.art li {
	float: left;
	margin: 20px;
	text-align: center;
}
.wallpaper .img,
.art .img {
	margin-bottom: 5px;
}