﻿@charset "utf-8";
/*default & reset*/
*{box-sizing:border-box;}

html,body {
	height:100%;
	margin:0;
	padding:0;
}
#main {
  display:block;
}
body{
    font:100%/1 Verdana, Geneva, "PingFang TC", "微軟正黑體", "Microsoft JhengHei";
    -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
            text-size-adjust:100%;
}
a {
	color:#00F;
	text-decoration:none;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
a:hover,
a:focus {
	text-decoration:none;
	color:#F30;
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {
	outline:1px dashed #e84417;
}
a, button, textarea, select, input{
	-webkit-appearance:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-border-radius:0;
	   -moz-border-radius:0;
			border-radius:0;
}
img {
	border:none;
	vertical-align:middle;
	max-width:100%;
	height:auto;
}
.hide-item{
	display:none;
}
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0;
}
.sr-only-focusable {
    position:fixed;
	top:0;
	left:0;
	color:#000;
	opacity:0;
	z-index:9999;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
	color:#FFF;
	font-size:0.8em;
	padding:5px 10px;	
	opacity:1;
	background:rgba(0,0,0,.7);
}
.acKey,
.acKey a {
    color:transparent;
    font-size:0.8rem;
}
.acKey:hover,
.acKey:focus,
.acKey a:hover,
.acKey a:focus {
    color:#F30;
}
.container{
	width:100%;
	max-width:1200px;
	padding:0 15px;
	box-sizing:border-box;
	margin:0 auto;
}
.row {
    margin-right:-10px;
    margin-left:-10px;
}
.left-part { float:left; }
.right-part { float:right; }
@media screen and (max-width:990px) {
    .pc-mode,
	.mobile-mode { display:none !important; }
}
@media screen and (min-width:991px) {
    .sp-mode { display:none !important; }
}
@media screen and (min-width:1200px) {
	.container{ padding:0; }
}

.noscript {
	display:block;
	width:100%;
	font-size:1em;
	line-height:120%;
	padding:20px 0px;
	margin:0 auto;
	box-sizing:border-box;
	background:#ffe5e6;
}

.cf{
  content:"";
  display:table;
  clear:both;
}
form .grayFont{
	color:#959595;
}
form .darkFont{
	color:#333;
}
/*for RWD Youtube,Vimeo*/
.video-container{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;height:0;overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/*checkbox,radio自訂樣式*/
input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 0px; /*change*/
  margin  : 0;
  padding : 0;
  opacity : 0;
}
input[type=checkbox]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  line-height  : 24px;
  background   : url('../images/checks.png') no-repeat 0 -48px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -73px;
}

input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -24px;
  padding-left : 28px;
  line-height  : 24px;
  background   : url('../images/checks.png') no-repeat 0 3px;
}
input[type=radio]:not(old):checked + label{
  background-position : 0 -22px;
}
label input[type="radio"] {
	position:relative;
	display:inline-block;
	width:25px;
    height:25px;	
	margin:0 5px 0 0;
	border:1px solid #CCC;
	background:#f7f7f7;
	opacity:1;
	vertical-align:top;
	cursor:pointer;
	-webkit-appearance:none !important;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
            border-radius:100%;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
label input[type="radio"]:checked:before {
	content:"";
	position:absolute;
    display:block;
	top:4px;
	left:4px;
	width:15px;
    height:15px;
	background:#000;
    z-index:2;
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
            border-radius:100%;
}
/*單行文字溢出*/
.ellipsis{
	display:block;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;/*IE Safari*/
	-ms-text-overflow:ellipsis;
	-o-text-overflow:ellipsis;/*Opera*/
	-moz-binding:url("ellipsis.xml#ellipsis");/*FireFox*/
}
.ellipsis-muti-2-lines{
	verflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; /*var*/
	line-height:1.25em; /*var*/
	height:2.50em; /*var*/
}
/*四大社群按鈕*/
.social{
	display:inline-block;
	width:auto;
	float:none;/*float-none*/
	margin:20px 0 0 0;	
}
.social a.trigger{
	display:none;
}
.social:after {
	content:"";
	display:table;
	clear:both;
}
.social h2{
	display:none;
}
.social .btns-box{
	float:right; /*float*/
	display:inline-block;
}
.social .btns-box ul{
	display:inline-block;
}
.social .btns-box li{
	display:inline-block;
	margin:0 8px;
}
.social .btns-box li a {
	display:inline-block;
	width:39px;
	height:39px;
	font-size:0;
	margin:0 2px;
	border-radius:50%;
}
.social .btns-box li a::before{
	content:"";
	width:100%;
	height:100%;
	display:block;
	margin:0 auto;
	background-image:url(../images/fat-social.svg);
	background-repeat:no-repeat;
    background-size:auto 39px;
}
.social .btns-box li a.fb {background-color:#3b5998;}
.social .btns-box li a.fb::before {
	background-position:0 0;
}
.social .btns-box li a.tw {background-color:#00aced;}
.social .btns-box li a.tw::before {
	background-position:-39px 0;
}
.social .btns-box li a.li {background-color:#00b900;}	
.social .btns-box li a.li::before {
	background-position:-78px 0;
}
.social .btns-box li a.fb:hover,
.social .btns-box li a.fb:focus {
	background-color:#193266;
}
.social .btns-box li a.tw:hover,
.social .btns-box li a.tw:focus {
	background-color:#0b95da;
}
.social .btns-box li a.li:hover,
.social .btns-box li a.li:focus {
	background-color:#008f00;
}

/*-- sm1-txt-btn --*/
/*-- sm2-txt-btn --*/
/*-- sm3-txt-btn --*/
/*more-btn*/
a.more-btn{
	display:inline-block;
	color:#FF4000;
	font-size:1.088em;
	border:1px #FF4000 solid;
	border-radius:4px;
	padding:10px 20px;
}
a.more-btn:hover,
a.more-btn:focus,
a.more-btn:active {
	color:#fff;
	background:#FF4000;
}
/*sm-back-btn*/
/*sm-submit-btn*/
/*sm-reset-btn*/
/*gototop*/
.gototop{
	position:fixed;
	display:inline-block;
	bottom:18px;
	right:18px;
	z-index:997;
}
.gototop a{
	display:block;
}
.gototop a.go-to-top-btn{
	display:inline-block;
	width:50px;
	height:50px;
	border-radius:50%;
	border:1px #F30 solid;
	background:url(../images/go-to-top-btn.png) center center no-repeat;
	text-indent:-9999px;
	cursor:pointer;
}
.gototop a.go-to-top-btn:hover,
.gototop a.go-to-top-btn:focus,
.gototop a.go-to-top-btn:active {
	background:#F30 url(../images/go-to-top-btn-hover.png) center center no-repeat;
}


#wrapper {
	position:relative;
	float:left;
	width:100%;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
/*footer*/
#footer {
	clear:both;
}
#footer .contact {
	width:100%;
	text-align:center;
	padding:35px 20px;
	background:#462300;
	border-top:8px #FF4000 solid;
}
#footer .contact img.logo {
	display:inline-block;
	width:191px;
	height:51px;
	margin-top:35px;
}
#footer .contact .txt {
	display:block;
	color:#FFEDDF;
	font-size:0.868em;
	line-height:165%;
	letter-spacing:0.03em;
	margin:20px 0;
}
#footer .contact .txt a {
	color:#FFEDDF;
}
#footer .contact .txt a.announce{
	color:#FFEDDF;
	text-decoration:underline;
}
#footer .contact .count-data {
	display:inline-block;
	padding:20px 0 0 0;
	margin:0;
	border-top:1px #85B200 solid;
}
#footer .contact .txt ul{
	list-style:none;
	letter-spacing:-9px;
	margin:-5px -10px;
}
#footer .contact .txt ul li{
	display:inline-block;
	letter-spacing:0;
	padding:5px 10px;
}
#footer .contact .others {
	font-size:0.955em;
	margin:0px 0 15px;
}
#footer .contact .others ul{
	padding:0;
	margin:0;
	list-style:none;
}
#footer .contact .others ul li{
	color:#ccc;
	line-height:1.65em;
	letter-spacing:0.05em;
}
#footer .contact .others ul li a{
	color:#ccc;
	vertical-align:text-bottom;
	text-decoration:underline;
}
#footer .contact .others ul li a span.ico{
	display:inline-block;
	width:16px;
	height:16px;
	background:url(../images/tail-announce-ico.png) left top no-repeat;
	vertical-align:sub;
	margin:0 3px 0 0;
}
#footer .contact .social {
	display:block;
	width:100%;
	height:auto;
	text-align:center;
	margin:20px 0;
}
#footer .contact .social ul {
	letter-spacing:-9px;
	list-style:none;
	margin:0 -7px;
}
#footer .contact .social ul li {
	display:inline-block;
	letter-spacing:0;
	padding:0 7px;
}
#footer .contact .social ul li a {
	display:inline-block;
	width:39px;
	height:39px;
	color:#ffffff;
	font-size:0;
	border-radius:50%;
}
#footer .contact .social ul li a::before{
	content:"";
	width:100%;
	height:100%;
	display:block;
	margin:0 auto;
	background-image:url(../images/fat-social.svg);
	background-repeat:no-repeat;
    background-size:auto 39px;
}
#footer .contact .social ul li a.fb { background-color:#3b5998;}
#footer .contact .social ul li a.fb::before {
	background-position:0 0;
}
#footer .contact .social ul li a.tw { background-color:#00aced;}
#footer .contact .social ul li a.tw::before {
	background-position:-39px 0;
}
#footer .contact .social ul li a.li { background-color:#00b900;}
#footer .contact .social ul li a.li::before {
	background-position:-78px 0;
}
#footer .contact .social ul li a.fb:hover,
#footer .contact .social ul li a.fb:focus {
	background-color:#193266;
}
#footer .contact .social ul li a.tw:hover,
#footer .contact .social ul li a.tw:focus {
	background-color:#0b95da;
}
#footer .contact .social ul li a.li:hover,
#footer .contact .social ul li a.li:focus {
	background-color:#008f00;
}
#footer .resolution{
	display:none;/*none*/
}
#footer .QRcode-box{
	display:block;
}
#footer .QRcode-box img.QRcode{
	display:inline-block;
	width:95px;
	height:95px;
}
#footer .contact .name-sign{
	display:block;
	width:100%;
	margin:20px 0;
}
#footer .contact .name-sign ul {
	list-style:none;
	letter-spacing:-9px;
	margin:-10px;
}
#footer .contact .name-sign ul li {
	display:inline-block;
	letter-spacing:0;
	padding:10px;
}
#footer .contact .name-sign ul li a {
	display:inline-block;
}
#footer .contact .name-sign ul li a img.itri{
	width:191px;
	height:44px;
}
#footer .contact .name-sign ul li a img.eeb{
	width:191px;
	height:51px;
}
#footer .contact .name-sign ul li span {
	color:#FFE5CC;
	font-size:0.8em;
	vertical-align:super;
}

#footer .sitemap {
	display:block;/*none*/
	position:relative;/*pos*/
	width:100%;
	padding-bottom:145px;
	background:#336600 url(../images/sitemap-bg-ill.png) bottom center no-repeat;
	z-index:1;
}
#footer .sitemap .top-light-green-box {
	display:block;	
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:50px;
	background:#85B200;	
	z-index:-1;
}
#footer .sitemap .sitemap-box {
	margin:0 auto;
}
.sitemap-box > ul {
	letter-spacing:-9px;
	list-style:none;
}
.sitemap-box > ul > li {
	display:inline-block;
	letter-spacing:0;
	margin-left:20px;
	box-sizing:border-box;
}
.sitemap-box > ul > li:nth-child(1){
	width:280px;
}
.sitemap-box > ul > li:nth-child(2){
	width:320px;
}
.sitemap-box > ul > li p {
	color:#FFF;
	font-size:1.428em;
	font-weight:normal;
	line-height:50px;
}
.sitemap-box > ul > li > ul {
	list-style:none;
	padding:8px 0 0 0;
}
.sitemap-box > ul > li > ul > li{
	float:none;
	line-height:1.88em;
}
.sitemap-box > ul > li > ul > li a{
	color:#fff;
	font-size:1.088em;
	background:url(../images/sitemap-li-a-icon.png) left top no-repeat;
	padding:0 0 0 18px;
	background-position:0px 6px;
}
.sitemap-box > ul > li > ul > li a:hover,
.sitemap-box > ul > li > ul > li a:focus {
	color:#ECFFB4;
}
@media screen and (max-width: 640px){
	#footer .sitemap {
		padding-bottom:95px;
		background-size:auto 85px;
	}
	#footer .sitemap .top-light-green-box {
		display:none;
	}
	.sitemap-box > ul {
		margin:0;
		list-style:none;
	}
	.sitemap-box > ul > li {
		padding:0 10px;
		margin:20px 0 0 0;
	}
	.sitemap-box > ul > li:nth-child(1),
	.sitemap-box > ul > li:nth-child(2){
		width:auto;
	}
	.sitemap-box > ul > li p {
		line-height:145%;
	}
}
@media screen and (min-width:991px){
	/*footer,contact*/
	#footer .contact{
		padding:25px 0;
		border-top:none;
		border-bottom:8px #FF4000 solid;
	}
	#footer .contact .contact-box {
		display:flex;
		width:100%;
		margin:0 auto;
		position:relative;
		text-align:left;
		flex-direction:row;
		align-content:space-between;
		flex-wrap:wrap;
		padding-left:110px;
	}
	#footer .contact img.logo {
		display:inline-block;
		width:191px;
		height:51px;
		margin-top:20px;/*syc*/
		float:left;/*float*/
	}
	#footer .contact .txt {
		color:#FFEDDF;
		font-size:0.868em;
		line-height:1.68em;
		letter-spacing:0.03em;
		padding:0px;
		margin-top:0px;/*syc*/
		float:none;/*float*/
	}
	#footer .contact .txt a {
		color:#FFEDDF;
	}
	#footer .contact .txt a:hover,
	#footer .contact .txt a:focus {
		color:#ff6f3f;
	}
	#footer .contact .social {
		display:inline-block;
		width:auto;
		height:auto;
		text-align:left;
		padding:0;
		margin:6px 0;
	}
	#footer .resolution{
		display:none;/*none*/
	}
	#footer .QRcode-box{
		position:absolute;
		left:0;
		top:50%;
		margin-top:-47.5px;
	}
	#footer .contact .copyright {
		display:block;
		width:100%;
		margin:0;
		font-size:0.828em;
	}
	#footer .contact .count-data {
		border-top:none;
		margin:0;
		padding:0;
	}
	#footer .contact .count-data ul {
		margin:0;
	}
	#footer .contact .count-data ul li {
		margin:0 28px 0 0;
		background:url(../images/footer-count-data-arrow.png) left top no-repeat;
		background-position:0px 6px;
		padding:0 0 0 14px;
	}
	#footer .contact .name-sign {
		width:calc(100% - 145px);
		text-align:right;
		margin:0;
	}
}
@media screen and (min-width:1200px){
	#footer .contact .name-sign ul {
		margin:0 -15px;
	}
	#footer .contact .name-sign ul li {
		padding:0 15px;
	}
}