* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
	font-size: 13px;
	line-height: 22px;
	font-family: arial, sans-serif;
	color: #666;
	background: url(images/body.jpg) repeat 0 0;
	min-width: 100%;
}


.date{
	font-size:15px;
	color:#2D406C;
	font-weight:600;
	line-height:35px;	
    background: #D9F2F3;
    width: 90%;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


.news{
	font-size:14px;
	color: #3A3442;
	font-family:"微軟正黑體";	
	line-height:35px;	
    background: #FDFFE4;
    width: 90%;
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
/*font-family: 'Ubuntu', sans-serif;*/

a { color: #1A92A2; text-decoration: none; cursor: pointer; }
a:hover { text-decoration:underline; }
a img { border: 0; }
a.more { color: #2b9208; text-decoration: none; padding-right: 8px; padding-left:11px;  background: url(images/arr-ico.png) no-repeat 0px 8px; float:right; margin-left:200px; margin-top:10px;}
a.more:hover { text-decoration:underline;;  }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

article, aside, details, footer, header, menu, nav, section { display: block; }

.shell { width: 990px; margin: 0 auto; background: white;}
.container { background:url(images/header_bg.jpg) no-repeat; box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; -moz-box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; -webkit-box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; -o-box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ;  }
#header { height: 120px; text-align:center; }
#logo { font-size: 0; line-height: 0; display: inline-block; margin-top: 10px;}
#logo img{ float:left;}
#logo a { height: 93px; display: block; }

#navigation { 
	height: 45px; 
	padding-top: 4px; 
	font-family: 'Ubuntu', sans-serif; 
	font-weight: 700; 
	text-align: center;
	background: #FFF;
	box-shadow: 0px -1px 2px rgba(0,0,0,0.1); 
	-moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); 
	-webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); 
	-o-box-shadow: 0px -1px 2px rgba(0,0,0,0.1);
	border-top: 2px solid #A3C6D4;
	border-bottom:  1px solid #BCD2DA;
	  }

#navigation ul { list-style: none; list-style-position: outside; }
#navigation ul li { 
	display: inline-block;
    line-height: 23px;
    font-size: 13px;
    text-transform: uppercase;
    border-left: 2px solid #A6BFCC;
    margin-top: 9px;
	}

#navigation ul li:first-child { 
	border: none;
}
#navigation ul li a { display: block; padding: 0 28px 0 28px; color: #666; font-size:15px; font-family:微軟正黑體;  }
#navigation ul li a:hover,
#navigation ul li.active a  { text-decoration: none; color: #21A2C3; }
#navigation ul li.first a { padding-left:38px; }
#navigation a.nav-btn { display: none; }


.slider { width: 990px;  height: 300px; position: relative;  background: url(images/slide-img.jpg) no-repeat 0 0;}

.flex-control-nav { left: 480px; }
.main a.m-btn-grey { display: none; }

.main { padding:10px 0px 0px; }
.main h2 { font-size: 22px; color: #2869C1; line-height: 22px; padding-bottom: 15px; font-family:Helvetica, Arial, sans-serif, 微軟正黑體; font-weight: 600; }
.main h3 { font-size: 18px; color: #5e5e5e; line-height: 22px; padding-bottom: 8px; font-family:Helvetica, Arial, sans-serif, 微軟正黑體;font-weight: 600;  }
.main section { clear: both; background: url(images/section-shadow.png) no-repeat center bottom; padding: 0 20px 60px; }
.main ul { list-style: none; list-style-position: outside; }
.main ul li { padding-bottom: 6px; padding-left: 10px; background: url(images/arr-ico.png) no-repeat 0 8px; }
.main ul li a { color: #2b9208; text-decoration: underline; } 
.main ul li a:hover { text-decoration: none; } 

.main .cols { width: 620px; padding-left:30px; padding-right: 0; float:left;}
.main .cols .col {width: 620px; padding-left:30px; float:left; }
.main .cols img{ width: 600px; float:left; }
.main .cols .col:after { content:''; width: 100%; clear: both; }

.main .cols .col img { float: left; margin-right:3px; width:auto;}
.main .cols .col-cnt { width: 610px; float: right; padding-bottom:20px; padding-right:40px;}



.main .cols .col .text{ border-left: solid 2px #E0E0E0; padding-left:20px; margin-left:10px; margin-top:10px; padding-right:20px; }

.main .cols .col  .pic{ width:190px; height:170px; text-align: center; float:left; margin-right:5px; margin-bottom:15px;}

.main .cols .col  .p4_pic{ width:180px; height:150px; text-align: center; float:left; margin-right:5px; margin-bottom:15px;}

.main .cols .col  .p4_pic img{ width:180px;}


.main .cols .col .text table{  width:550px; float:left;} 
	
.main .cols .col-cnt table tr td{ padding:5px;}

.main .cols .col-cnt .downloadlink { font-size:15px; font-family:"微軟正黑體"; line-height:35px;}

.main .cols .col-cnt ol { text-decoration:none;}
.main .cols .col-cnt li { margin-left:35px;}
.main .left_cols { width:330px; height:665px; float:left; padding: 0;}

.main .left_cols  .links{
	background:url(images/link_bg.png) center top no-repeat;
	padding:40px 20px 0px 30px;
	text-align:center;
	position: relative;
	left: 10px;
	
}

	.main .cols .col .text  .link_pic{
		float:none; width:auto;
	}
	
	
.links .link01 img{ height:43px; border:0px;}
.links .link02 img{ height:44px; border:0px;}
.links .link03 img{ width:278px; border:0px;}
.links .link04 img{ height:36px; border:0px;}
.links .link05 img{ height:36px; border:0px;}
.links .link06 img{ height:30px; border:0px;}
.links .link07 img{ height:30px; border:0px;}

.main .left_cols .links .date{
	width: 100%;
	padding-left: 0px;
}

.counter{ margin-top: 20px;}

.main .post  { background: url(images/cols-shadow.png) no-repeat 0 bottom; padding-top: 28px; padding-left: 40px;  }
.main .post .video-holder { width: 435px; height: 245px; float: left; margin-right: 20px; }
.main .post h2 { padding-bottom: 15px; }
.main .post p { padding-bottom: 8px; }
.main .post p strong { display: block; }
.main .post-cnt { float: right; width: 475px; }

.main .testimonial { padding-top: 20px; padding-bottom: 20px;  text-align: center; background: transparent; }
.main .testimonial strong.quote { font-size: 28px; font-family: georgia ,arial, helvetica, serif; position: relative; top: 10px; left: -6px; }
.main .cols .col .col-cnt .img_text { width:270px; float:right; text-align:center; margin-right:5px; padding-bottom:15px; margin-top:10px;}
.main .cols .col .col-cnt .img_text img{ width:270px;}
.guide{	
	padding-left:10px; 
	font-size:13px; 
	font-family:"微軟正黑體"; 
	float:left;  
	margin-bottom:20px;
	margin-left: 20px;
	}
.guide a{ font-size:13px; font-family:微軟正黑體; text-decoration:none; color: #069;}
.guide a:hover{ text-decoration:none; color: #393;
	}

 .cols table{
	 background: #B4B4B4;
	 width:540px;
	 float:right;
	 margin:10px 50px 0px 0px ;
 }

.cht_num{
	width:60px;
	text-align:right;
	vertical-align: top;
	float:left;	
}

.sentence{
	float:left;
	width:550px;
	position:relative;
}

.sentence ul{
	padding-top:7px;
}
.sentence ul li{
background:none;
line-height:18px;
padding-left:0px;	
}

.testimonial h2 { padding-bottom: 12px; }
.testimonial p { padding-bottom: 6px; }
.testimonial p.author { text-align: right; }

.socials { height:100%;  }

#footer { 
	background: #2171A7;
	height:80px; }
#footer h2 { font-size:12px; color: #fff; font-family: 'Ubuntu', sans-serif; font-weight: 400; padding-bottom: 18px;  }
.footer-cols { padding: 12px 24px;}
.footer-cols .col { float: left;  width:70%;}
.footer-cols .col ul { 
	list-style: none; 
	list-style-position: outside; 
	}
.footer-cols .col ul li { 
	color: #fff; 
	font-size: 12px; 
	line-height:20px; 
	padding-left:9px;  
	width:100%; 
	}
.footer-cols .col ul li a { color: #FFF892; }

.footer-cols .a_plus{ position:relative; float:right; margin-top:15px;}



/* #Media Queries
================================================== */

/* ipad portrait */
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
	body { width: 768px; }
	.shell { width: 748px; }
	.container { background:url(images/header_bg.jpg) no-repeat ;box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; background-position: center top; }
	
	#navigation ul li a { padding: 0 15px;  }
	#navigation ul li.first a { padding-left:10px; }
	
	.main .cols .col .text  .link_pic{
		float:none; width:auto;
	}
	.slider-holder { position: relative; }
	.slider-holder span.slider-b { background: url(images/t-slider-bottom.jpg) no-repeat 0 0;  width: 748px; height: 30px; position: absolute; bottom: -13px; left: 0px; z-index: 100;}
	.slider-holder span.slider-shadow { background: transparent; display: none;  }
	.flex-control-nav { left: 346px; }

	.slider { width: 748px; height: 292px; position: relative; background: url(images/t-slide-img.jpg) no-repeat 0 0;}
	.slider ul.slides { list-style: none; list-style-position: outside; }
	.slider ul.slides li { width: 748px  !important; height: 292px; float: left; position: relative; }

	.slider ul.slides li .img-holder { width: 537px; height: 266px; position: absolute; bottom: 0px; right: 0px; }
	.slider ul.slides li .img-holder img { width: 537px  !important; height: 266px  !important; }

	.slider ul.slides li .slide-cnt { width: 320px; padding: 0px 0 0 34px; }
	.slider ul.slides li .box-cnt { width: 285px; }
	.slider ul.slides li .slide-cnt h2 { font-size: 40px; line-height: 40px; padding-bottom: 16px; color: #fff; text-shadow: rgba(0,0,0,0.4) 0px 1px 2px; font-family: 'Ubuntu', sans-serif; font-weight: 700; }
	
	.main { padding:10px 0 0 0;  }
	.main section { background: url(images/t-section-shadow.png) no-repeat center bottom; padding-left: 20px; padding-right: 20px;  }
	.main .cols { width:460px; margin: 0 0 0 0; padding-right: 15px;   }
.main .cols .col { width: 460px; float:left; }
.main .cols .col:after { content:''; width: 100%; clear: both; }
.main .cols img { float: left; margin-right:3px; width:100%;}
.main .cols .col img { float: left;  margin-right:3px;   }
.main .cols .col-cnt { width:490px; float: right;  padding-bottom:20px;  padding-right:0px;}
.main .cols .col-cnt img{ width:95%;}


.main .cols .col-cnt embed{ height:480px;}

	.main .cols .col .text table{  width:430px; } 
	
.main .left_cols{ width:230px; height:500px; float:left; text-align:center; padding: 0;}
.main .left_cols img{ width:230px;}

.main .left_cols  .links{
	background:url(images/link_bg.png) center top no-repeat;
	padding:40px 15px 0px 15px;
	text-align:center;
	
}
.links .link01 img{ width:140px; height:30px; border:0px;}
.links .link02 img{ width:50px; height:30px; border:0px;}
.links .link03 img{ width:195px; border:0px;}
.links .link04 img{ width:140px; height:25px; border:0px;}
.links .link05 img{ width:50px; height:25px; border:0px;}
.links .link06 img{ width:130px; height:25px; border:0px;}
.links .link07 img{ width:60px; height:25px; border:0px;}



	.main .testimonial { background: transparent; }
	.main .post { background: url(images/t-section-post.png) no-repeat center bottom; padding-left: 20px ;  }
	.main .post .video-holder { width: 435px; height: 245px; float: none; display: block;  margin-right: 0px; margin-bottom: 20px;  }
	.main .post-cnt { float: none; display: block;  width: 100%; }
	
	.main .cols .col .col-cnt .img_text { width:240px; float:left; text-align:center; margin-right:5px; padding-bottom:15px;}
.main .cols .col .col-cnt .img_text img{ width:240px;}
.main .cols .col .col-cnt iframe{ width:480px; height:320px;}


 .cols table{
	 background: #B4B4B4;
	 width:410px;
	 float:right;
	 margin:10px 20px 0px 0px ;
 }
 
.sentence{
	float:left;
	width:420px;
	position:relative;
}



.guide{	
	padding-left:15px; 
	font-size:13px; 
	font-family:"微軟正黑體"; 
	margin-bottom:20px;
	}



	
#footer { }
#footer h2 { font-size:12px; color: #fff; font-family: 'Ubuntu', sans-serif; font-weight: 400; padding-bottom: 18px;  }
.footer-cols { padding: 12px 24px;}
.footer-cols .col { float: left;  width:70%;}
.footer-cols .col ul { list-style: none; list-style-position: outside; }
.footer-cols .col ul li { color: #fff; font-size: 12px;  background: url(images/arr-footer-col.png) no-repeat 0 8px; padding-left:9px;  width:100%; }
.footer-cols .col ul li a { color: #FFF892; }

.footer-cols .a_plus{ position:relative; float:right; margin-top:15px;}

	.footer-bottom .footer-nav { float: none; display: block; text-align: center; padding-bottom: 18px;  }
	.footer-bottom p.copy { float: none; display: block; text-align: center;  }
}

/* phone portrait */
@media only screen and ( max-width: 767px) { 
	body { width: auto; }

	#navigation ul li{
		margin-top: 0;
		border-left: none;
		background: #fff;
		border-bottom: 1px solid #CCD5DE;
	}
	.shell { width: 320px; margin: 0 auto;  }
	.container { background:url(images/header_bg.jpg) no-repeat ;box-shadow: 0px 0px 13px rgba(0,0,0,0.3) ; background-position: -287px top;}
	
	#header { height:112px; position: relative; z-index: 1000; padding-left:0px; background-size: cover;}
	
		#logo { width: 300px; font-size: 0; line-height: 0;}
		#logo img{ width: 300px;  float: left; font-size: 0; line-height: 0;}
	#logo a { height: 60px; display: block; }

	#navigation { padding: 0 0 0 0; height: 45px; }
	#navigation a.nav-btn { 
		display: block; 
		font-size: 15px; 
		line-height: 45px;  
		padding-top: 0px; 
		height: 28px; 
		text-transform: uppercase; 
		color: #666;  
		font-family: 'Ubuntu', sans-serif; 
		font-weight: 700; 
		}
	#navigation a.nav-btn:hover { text-decoration: none; }
	#navigation a.nav-btn span.arr { background: url(images/nav-arr.png) no-repeat 0 0; width: 13px; height: 9px; position: absolute; right: 14px; top: 17px; }
	#navigation a.nav-btn span.arr.active { background: url(images/nav-arr.png) no-repeat 0 bottom; }

	#navigation { position: relative; z-index: 1000; }
	#navigation ul { display: none; position: absolute; top: 46px; left: 0;  width: 100%;}
	#navigation ul li { 
		display: block; 
		line-height: 45px !important; 
		float: none;  
		}
	#navigation ul li a { padding: 0 22px; }
	#navigation ul li.first a { padding-left: 26px; display: none; }

	.flex-control-nav { left: 130px; }

	.slider { width: 320px; height: 170px; overflow: hidden; position: relative; background: url(images/m-slide-img.jpg) no-repeat 0 0;}
	
	.main .cols .col .text  .link_pic{
		float:none; width:100%;
	}
	
	
	.main .cols .col .text  .link_text{
		font-size:14px;
	}
	
	.main { padding:10px 0 0 0; }
	.main section { background: url(images/m-section-shadow.png) no-repeat center bottom; padding: 0 20px 20px 20px; }
	.main .cols { width:300px; margin: 0 0 0 0; padding-left:15px; margin-right:0px;}
	.main .cols .col { width:300px; float:left; padding-left:0px;display: block; padding-bottom: 22px;  margin: 0 auto; }
	.main .cols h2{ font-size:20px}
	.main .cols img { float: left; margin-right:3px; width:280px;}
	.main .cols .col img { float: none; width:280px;}
	.main .cols .col + .col { padding-left: 0px; }
	.main .cols .col-cnt { width:280px; padding-left:8px; text-align:left; float: none; display: block;  padding-bottom:20px; }
	
	
	.main .cols .col .text{ border-left: none; padding-left:0px; margin-left:0px; padding-right:0px; margin-right:0px;}
	.main .cols .col .text table{  width:270px; } 
	
	.main .left_cols { display:none;}
	
	.main a.m-btn-grey { display: block; background: url(images/m-btn-grey.png) repeat-x 0 0; margin: 0 10px 14px;  height: 39px; text-align: center; line-height: 39px; border: 1px solid #9e9f9f; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; display: block; font-weight: bold; font-size: 18px;  color: #636363; text-shadow: rgba(255,255,255,0.4) 0px 1px 0px; }
	.main a.m-btn-grey:hover { background-position: 0 bottom; text-decoration: none; }

	.main .post  { background: url(images/m-section-post.png) no-repeat center bottom; padding-top: 28px; padding-left: 20px;   }
	.main .post .video-holder { width: 280px; height: 162px; float: none; display: block;  margin: 0 auto 20px;  }
	.main .post .video-holder img { width: 280px; height: 162px; }
	.main .post-cnt { float: none; display: block;  width: 100%; }
	.main .post-cnt p strong { display: block; padding-bottom: 12px; }
	
	.main .cols .col .col-cnt .img_text { width:280px; float:left; text-align:center; margin-right:5px; padding-bottom:15px;}
.main .cols .col .col-cnt .img_text img{ width:280px;}
.main .cols .col .col-cnt iframe{ width:280px; height:180px;}

.tdata_p22{
	position:relative;
	left:-15px;	
}


 .cols table{
	 background: #B4B4B4;
	 width:285px;
	 float:right;
	 margin:10px 15px 0px 0px ;
 }
 

.sentence{
	float:left;
	width:220px;
	position:relative;
}

 .cols .col .col-cnt  .text  p .h2{
	font-size:14px;
	font-weight:600;
	font-family:"微軟正黑體";
	
}

.guide{	padding-left:20px; font-size:13px; font-family:微軟正黑體; float:left;  margin-bottom:10px;}

	.testimonial h2 { font-size: 21px; }
	.testimonial p.author { text-align: center; }
  
  
	
	#footer{ height:150px;}
	#footer h2 { padding-bottom: 12px; }
	.footer-cols { padding-left: 10px; padding-right:0px; padding-bottom: 0; float:left;}
	.footer-cols .col {width:290px;  float:left; display: block; }
	.footer-cols .col ul li { font-size: 12px; width:100%; }

	.footer-cols .a_plus{ position:relative; float:right; margin-top:0px; margin-right:10px;}

	.footer-bottom { height: 58px; }
	.footer-bottom { padding: 10px 9px 20px; height: 100%; }

	.footer-bottom .footer-nav { float: none; display: block; text-align: center; padding: 0 0px 18px; }
	.footer-bottom .footer-nav ul li { padding: 0 4px; border: 0; font-size: 10px !important;  }

	.footer-bottom p.copy { float: none; display: block; text-align: center;  }
	.footer-bottom p.copy strong { display: block;  padding-top: 10px; }
	.footer-bottom p.copy span { display: none; }
}