@charset "utf-8";

html,body {
	height:100%;
	margin:0;
	padding:0;
}
main {
  display:block;
}
body {
	font:62.5%/1 "PingFang TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	background-image:linear-gradient(180deg,#0d58a8 0%,#88b6df 20vw,rgba(255,255,255,0) 40vw);
	background-repeat:repeat-x;
    -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
            text-size-adjust:100%;
}
body.font-size-s {
    font-size:56.3%;
}
body.font-size-l {
	font-size:68.8%;
}
@media screen and (min-width: 768px) {
	body {background-image:linear-gradient(180deg,#0d58a8 0%,#88b6df 10vw,rgba(255,255,255,0) 20vw);}
}
@media screen and (min-width: 991px) {
	body {background-image:linear-gradient(180deg,#0d58a8 0%,#88b6df 5vw,rgba(255,255,255,0) 10vw);}
}
/* 修正粗體 */
@font-face {
    font-family:"微軟正黑體修正";
    unicode-range:U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style:normal;
    font-weight:bold;
    src:local(Yu Gothic), local(MS Gothic);
}
/* 一般粗細的時候改回微軟正黑 */
@font-face {
    font-family:"微軟正黑體修正";
    unicode-range:U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style:normal;
	font-weight:normal;
    src:local("微軟正黑體");
}
a {
	color:#D94800;
	text-decoration:none;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
a:hover,
a:focus {
	color:#D60000;
	text-decoration:none;
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {
	outline:2px dashed #F06400;
}
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;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
img {
	max-width:100%;
	height:auto;
    border:none;
    vertical-align:middle;
}
sub,
sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup {
    top:-0.5em;
}
sub {
    bottom:-0.25em;
}
.ellipsis {
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ellipsis-2, .ellipsis-3, .ellipsis-4, .ellipsis-5, .ellipsis-6, .ellipsis-7{
	overflow : hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
}
.ellipsis-2 {-webkit-line-clamp: 2 !important;}
.ellipsis-3 {-webkit-line-clamp: 3 !important;}
.ellipsis-4 {-webkit-line-clamp: 4 !important;}
.ellipsis-5 {-webkit-line-clamp: 5 !important;}
.ellipsis-6 {-webkit-line-clamp: 6 !important;}
.ellipsis-7 {-webkit-line-clamp: 7 !important;}
.comingSoon {
	width: 100%;
	float: left;
	padding: 100px 0;
	font-size: 2.5em;
	font-weight:bold;
	font-family: "Times New Roman", Times, serif;	
	line-height: 1.5;
	color: #ddd;
	text-align: center;
	margin: 0;
	font-style: italic;
}
.comingSoon p{ 
	font-family:Arial, "微軟正黑體", Helvetica, sans-serif;
	font-size:0.4em;
	color: #ddd;
	font-weight:normal;
	font-style:normal;
}
@media screen and (min-width: 768px) {
	.comingSoon {font-size:4em;}
}
.font-red{
	color:#d60000;
}


/** Layout **/
#wrapper {
	position:relative;
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
.noscript {
	display:block;
	width:100%;
	font-size:1.5em;
	line-height:120%;
	padding:20px 0px;
	margin:0 auto;
	box-sizing:border-box;
	background:#ffe5e6;
}
.hide-panel {
    display:none !important;
}
.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:1.2em;
	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:#D60000;
}
.container {
    width:100%;
    margin:0 auto;
}
@media screen and (max-width:990px) {
    .pc-mode {
        display:none !important;
    }
    .container {
        width:calc(100% - 40px);
    }
}
@media screen and (min-width:991px) {
    .sp-mode {
        display:none !important;
    }
	.container {
        width:calc(100% - 60px);
    }
}
@media screen and (min-width:1240px) {
    .container {
        max-width:1200px;
    }
}
/** header **/
#header {
	position:relative;
	width:100%;
	margin:0 auto;
	z-index:1;
	background-color:transparent;
	padding-bottom:15px;
}
/* ----- topHead ----- */
#topHead {
	position:relative;
	width:100%;
	padding:10px 0;
	box-sizing:border-box;
	margin:0 auto;
}
#topHead .container {
	display:flex;
	justify-content:space-between;
	align-items:center;
	box-sizing:border-box;
}
#topHead .logo {
	position:relative;
	float:left;
}
#topHead .logo a {
	float:left;
	display:block;
	width:224px;
	height:47px;
	background:url(../images/logo.png) no-repeat 0 50%;
	background-size: contain;
}
@media screen and (min-width:768px) {
	#topHead .logo a {
		width:320px;
		height:68px;
	}
}
/* ----- addon ----- */
#addon {
	display:inline-block;
	text-align:right;
}
/* ----- addon-sp ----- */
#addon-sp {
    width:100%;
	background-color:transparent;
}
#addon-sp #addonLink > ul { 
	width:100%;
	text-align:center;
	display:flex;
	justify-content: center;
	align-items:center;
	margin:0 auto;
	padding:15px 0;
	box-sizing:border-box;	
}
#addon-sp #addonLink > ul > li {
	display:inline-block;
	width:auto;
	letter-spacing:0px;
	box-sizing:border-box;	
	padding:0 10px;
	margin:0;
}
#addon-sp #addonLink > ul > li:after {
	display: none;
}
#addon-sp #addonLink > ul > li + li {
	border-left: 1px dashed #ccc;
}
@media screen and (max-width:640px) {
	#addon-sp #addonLink > ul {
		width:100%;
	}
}
/** addonLink **/
#addonLink{
	width:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	box-sizing:border-box;
} 
#addonLink > ul{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#addonLink > ul > li + li{ margin-left:10px;}
#addonLink > ul > li a{
	position:relative;	
	font-size:1.4em;
	color:#fff;	
	font-weight:bold;
	box-sizing:border-box;
	padding-left:16px;	
}
#addonLink > ul > li a:hover,
#addonLink > ul > li a:focus {
	color:#F3EF82;
}
#addonLink > ul > li a::before{
	content:"";
	width:6px;
	height:6px;
	border-radius:6px;
	display:block;
	background-color:#d2ffc8;
	position:absolute;
	left:0;top:50%;
	margin-top:-3px;
}
#addonLink > ul > li a:hover::before,
#addonLink > ul > li a:focus::before{
	background-color:#cf3728;
	border:2px solid #fff;
	margin-top:-5px;
	margin-left:-2px;
}
@media screen and (min-width:991px) {
	#addonLink{
		background-image:linear-gradient(0deg, #0f6eaf 0%, #0a4e9b 100%);
		padding:8px;
		border-radius:4px;
	}
}
/** main **/
#main {
	position:relative;
    width:100%;
	padding:0;
    margin:0 auto;
	z-index:1;
	background-image:url(../images/underGraphic.png);
	background-repeat:no-repeat;
	background-position:bottom center;
}
#main.homeMain .acKey {
	position:absolute;
	left:20px;
	top:20px;
	margin-top:-15px;
	z-index:2;
}
/** homebox **/
#main > .container {
	position:relative;
	display:flex;
	flex-direction: column;
}
#main > .container .leftWrap{
	position:relative;
	width:100%;
}
#main > .container .rightWrap{
	position:relative;
	width:100%;
	padding-bottom:130px;
}
.sloganWrap{
	width:100%;
	box-sizing:border-box;
	padding-top:10px;
	padding-bottom:20px;
	padding-left:20px;
	position:relative;
}
.sloganWrap .sg1 {
	font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
	font-weight: 900;
	font-size: 2.5em;
	color:#003366;
}
.sloganWrap .sg1 .letter {
	display: inline-block;
	line-height: 1em;
}
.sloganWrap .sg2 {
	position: relative;
	font-family:Eras Light ITC, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size:1.8em;
	line-height:150%;
	color:#ff3300;
	text-shadow:0px 0px 1px rgba(255,255,255,1),1px 1px 2px rgba(255,255,255,1),2px 2px 3px rgba(255,255,255,1);
}
.sloganWrap .sg2 .text-wrapper {
	position: relative;
	display: inline-block;
	padding-top: 0.2em;
	padding-right: 0.05em;
	padding-bottom: 0.1em;
	overflow: hidden;
}
.sloganWrap .sg2 .letter {
  display: inline-block;
  line-height: 1em;
}
.sloganWrap .sloganBg{
	width:60%;
	position:absolute;
	right:0;
	top:10px;
	z-index:-1;
}
.sloganWrap .sloganBg::before{
	content:"";
	width:100%;
	padding-bottom:19%;
	display:block;
	background-image:url(../images/sloganBg.png);
	background-repeat:no-repeat;
	background-size:contain;
}
.comHead{
	border:5px solid #68aadc;
	border-radius:4px;
	background-color:#fff;
	background-image:url(../images/comHead.jpg);
	background-repeat:no-repeat;
	background-position:left bottom;
	background-size: auto 100%;
	padding-top:20px;
}
.sloganWrap.comHead .sloganBg{
	width:40%;
	right:20%;
	top:-50%;
}
.sloganWrap.comHead::before{
	content:"";
	display:block;
	width:54px; height:54px;
	position:absolute;
	left:40%;bottom:-16px;
	background-image:url(../images/comHead_tree.png);
	background-repeat:no-repeat;
	background-size:contain;
}
.comMain{
	width:40%;
	position:absolute;
	right:0;bottom:0;
	z-index:1;
	max-width:355px;
}
.comMain::before{
	content:"";
	width:100%;
	padding-bottom:41%;
	display:block;
	background-repeat:no-repeat;
	background-size:contain;
}
.comMain.cm1::before{background-image:url(../images/comMain1.png);}
.comMain.cm2::before{background-image:url(../images/comMain2.png);}
.comMain.cm3::before{background-image:url(../images/comMain3.png);}
.comMain.cm4::before{background-image:url(../images/comMain4.png);}
@media screen and (max-width:480px) {	
	.comMain{width:30%;}
	.sloganWrap.comHead::before{
		width:10vw; height:10vw;
	}
}
@media screen and (min-width:991px) {	
	#main > .container {
		flex-direction: row;
		justify-content:space-between;
		min-height:600px;
	}
	#main > .container .leftWrap{
		width:20%;		
		margin:0 30px 0 0;
	}
	#main > .container .rightWrap{
		width:calc(80% - 30px);
		margin-top:0;
	}
	.homeWrap #main > .container .leftWrap{
		width:32%;
		margin:0 2.5vw 0 0;
	}
	.homeWrap #main > .container .rightWrap{
		width:calc(68% - 2.5vw);
	}
	.navBot{
		width:100%;
		padding-bottom:96%;
		display:block;
		position:absolute;
		bottom:0;
		left:0;
		background-image:url(../images/prospect01.png);
		background-repeat:no-repeat;
		background-position:left bottom;
		background-size:contain;
	}
	.sloganWrap .sg1 {font-size: 3em;}
	.sloganWrap .sg2 {font-size:2.3em;}
	.sloganWrap .sloganBg{width:60%;}
	.comMain{width:60%;bottom:-1px;}
}
@media screen and (min-width:1240px) {
	#main > .container .leftWrap{width:250px;}
	#main > .container .rightWrap{width:calc(100% - 250px);}
	.homeWrap #main > .container .leftWrap{width:450px;}
	.homeWrap #main > .container .rightWrap{width:calc(100% - 450px);}
	.homeWrap .navBot{ background-size:auto;}
}
/** titHead **/
.homebox + .homebox{ margin-top:20px;}
.titHead {
	width:100%;
	margin:0 auto 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom:1px solid #ddd;
	padding-bottom:10px;
}
.titHead h2 {
	position:relative;
	font-size:2em;
	line-height:120%;
	font-weight:bold;
	color:#000;	
	display:flex;
	flex-direction: column;
	text-align:left;
	box-sizing:border-box;
	padding-left:16px;
}
.titHead h2::before{
	content:"";
	display:block;
	position:absolute;
	left:0;top:0;
	width:8px;
	height:100%;
	background-image:linear-gradient(180deg, #51a500 70%, #9f9f9f 70%);
}
#newsSection .titHead h2::before{
	background-image:linear-gradient(180deg, #d86d00 70%, #9f9f9f 70%);
}
#comPage .titHead h2::before{
	background-image:linear-gradient(180deg, #d82500 70%, #9f9f9f 70%);
}
.titHead h2 > span{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.5em;
	line-height:100%;
	color:#aaa;
}
/* ----- footer ----- */
#footer {
    position:relative;
    width:100%;
	padding:20px 0;
    margin:0 auto;
	background:#fff;
}
.copyright {
	width:100%;
	text-align:center;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
}
.copyright .fotWrap{
	width:100%;
	text-align:left;
	display:flex;
	flex-wrap:wrap;
	font-size:140%;
	line-height:150%;
    font-weight:normal;
	color:#757575;
}
.flexWrap{display:flex;flex-wrap:wrap;}
.fotWrap .topInfo{
	margin:0.75em 0;
}
.fotWrap .topInfo span{
	display:inline-block;
	width:2em;
}
.fotWrap .mark{
	display:inline-block;
	width:40px;
	padding:0.75em 0;
	margin-right:5px;
}
.fotWrap .wd{
	width:auto;
	box-sizing:border-box;
	margin-left:15px;
	padding-left:15px;
	border-left:1px solid #ddd;
	align-content: flex-end;
}
#footer.engFot .fotWrap .wd{width:50%;}
.pointUl{list-style-type:none;}
.pointUl > li{
	margin:1px 0;
	position:relative;
	box-sizing:border-box;
	padding-left:1em;
}
.pointUl > li > strong{
	color:#000;
}
.pointUl li::before{
	content:"";
	display:block;
	width:3px;
	height:3px;
	border-radius:3px;
	background-color:#787878;
	position:absolute;
	left:0;top:0.75em;
}
.pointUl.twoCol{display:flex;flex-wrap:wrap;}
.pointUl.twoCol > li{width:50%;}
.pointUl.twoCol a{color:#1d7723;}
.pointUl.twoCol a:hover,
.pointUl.twoCol a:focus{
	color:#d82500;
	text-decoration:underline;
}
.itemWrap{
	display:flex;
	flex-wrap:wrap;
}
.itemWrap li{
	padding-right:1em;
	margin-bottom:0.75em;
}
.fotWrap span.fotline{
	width:1px; height:16px;
	border-right:1px solid #cbcdce;
	padding:0;margin:0 10px;
	display:inline-block;
	vertical-align:middle;
}
.copyright a{ color:#212329;}
.copyright a:hover,
.copyright a:focus{ color:#d60000;}
@media screen and (max-width:620px) {
	.copyright .fotWrap{font-size:100%;}
	.fotWrap .wd{
		width:100%;
		padding-left:0;
		margin-top:0;
		border-left:none;
	}
	#footer.engFot .fotWrap .wd,
	.pointUl.twoCol > li{width:100%;}		
}
 
/* gMenu */
#gMenu {
	position:fixed;
	right:20px;
	bottom:20px;
	width:45px;
	text-align:right;
	z-index:90;
}
@media screen and (min-width:991px) {
	#gMenu {
		width:55px;
	}
}
/* ----- goTop ----- */
.goTop {
	display:none;
	float:right;
	margin-top:5px
}
.goTop a {
	position:relative;
	display:block;
	width:45px;
	height:45px;
	overflow:hidden;
	background:rgba(0,0,0,.8);
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
			border-radius:100%;
}
.goTop a:hover,
.goTop a:focus {
	background-color:#cc0000;
}
.goTop a::before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:21px;
	height:21px;
	margin:-10.5px 0 0 -10.5px;
	background:url(../images/icon-top.svg) 50% 50% no-repeat;
	background-size:cover;
}
@media screen and (min-width:991px) {
	.goTop a {
		width:55px;
		height:55px;
	}
}
/* ----- tailshareBtn ----- */
.tailshareBtn {
	position:relative;
	display:none;
	margin-top:5px;
}
.tailshareBtn > a {
	position:relative;
	display:block;
	width:45px;
	height:45px;
	overflow:hidden;
	background:#50a2b3;
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
			border-radius:100%;
}
.tailshareBtn > a.open:before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:19px;
	height:19px;
	margin:-9.5px 0 0 -9.5px;
	background:url(../images/icon-share.svg) 50% 50% no-repeat;
	background-size:cover;
}
.tailshareBtn > a.close:before,
.tailshareBtn > a.close:after {
	content:"";
	position:absolute;
	display:block;
	width:2px;
	height:24px;
	top:50%;
	left:50%;
	border:none;
	margin:-12px 0 0 -1px;
	background-color:#FFF;
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
			border-radius:100%;
	-webkit-transform:rotate(45deg);
	   -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
         -o-transform:rotate(45deg);
            transform:rotate(45deg);
}
.tailshareBtn > a.close:after {
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
         -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
}
.tailshareBtn > a span {
	position:relative;
	display:block;
	color:#FFF;
	font-size:1.2em;
	text-align:center;
	padding-top:32px;
}
.tailshareBtn .tailshareMenu {
	display:none;
	position:absolute;
	bottom:45px;
	z-index:100;
}
.tailshareBtn .tailshareMenu ul {
	width:45px;
	list-style:none;
	letter-spacing:-9px;
}
.tailshareBtn .tailshareMenu li {
	display:inline-block;
	letter-spacing:0;
	margin-bottom:5px;
}
.tailshareBtn .tailshareMenu a {
	position:relative;
	display:block;
	width:45px;
	height:45px;
	text-align:left;
	text-indent:-999px;
	overflow:hidden;
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
			border-radius:100%;
}
.tailshareBtn .tailshareMenu a:before {
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:25px;
	height:25px;
	margin:-12.5px 0 0 -12.5px;
	background-size:100% auto;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.tailshareBtn .tailshareMenu a.icon-fb {
	background-color:rgba(8,102,255,1);
}
.tailshareBtn .tailshareMenu a.icon-fb:before {
	background-image:url(../images/icon-FB.svg);
}
.tailshareBtn .tailshareMenu a.icon-twitter {
	background-color:#000;
}
.tailshareBtn .tailshareMenu a.icon-twitter:before {
	background-image:url(../images/icon-Twitter-X.svg);
}
.tailshareBtn .tailshareMenu a.icon-line {
	background-color:rgba(1,185,1,1);
}
.tailshareBtn .tailshareMenu a.icon-line:before {
	background-image:url(../images/icon-LINE.svg);
}
.tailshareBtn .tailshareMenu a:hover:before {
    -webkit-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
			transform:rotate(360deg);
}
@media screen and (min-width:991px) {
	.tailshareBtn > a {
		width:55px;
		height:55px;
	}
	.tailshareBtn > a.open:before {
		width:21px;
		height:21px;
		margin:-10.5px 0 0 -10.5px;
	}
	.tailshareBtn .tailshareMenu {
		bottom:55px;
	}
	.tailshareBtn .tailshareMenu ul {
		width:55px;
	}
	.tailshareBtn .tailshareMenu a {
		width:55px;
		height:55px;
	}
	.tailshareBtn .tailshareMenu a:before {
		width:30px;
		height:30px;
		margin:-15px 0 0 -15px;
	}
}


/*PRINT*/
@media print {
	body {
		margin:0!important;
		padding:0!important;
	}
	h1, h2, h3, h4, h5, h6 {
		page-break-after:avoid;
		page-break-inside:avoid;
	}
	blockquote, table, pre {
		page-break-inside:avoid;
	}
	ul, ol, dl {
		page-break-before:avoid;
	}
	img {
		max-width:100%!important;
		page-break-inside:avoid;
	}
	#addon,
	#navMenu,
	.searchZone,
	.donate,
	.fatfooter .trigger,
	.fatfooter .fat-nav,
	.faqHelper,
	#gMenu {
		display:none!important;
	}
	#wrapper {
		padding-top:60px;
		background:none!important;
	}
	#header {
		position:absolute!important;
		background:#FFFFFF!important;
	}
	#footer {
		padding:20px!important;
	} 
	.add_info {
		padding:0!important;
		margin:0 auto;
	}
}

@page {
	size:A4 portrait; /*a4尺寸 直式 */
    margin:1cm; /*邊距1公分 */
    orphans:2; /*頁面最後一段段落行數，預設值為2 */
    widows:2; /*頁面第一段段落行數，預設值為2 */
}