@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;
	text-size-adjust:100%;
	background-color:#CEDED6;
}
body.font-size-s {
    font-size:56.3%;
}
body.font-size-l {
	font-size:68.8%;
}
/* 修正粗體 */
@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:#0944A5;
	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 #C10606;
}
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;
}
.font-red{color:#C10606;}
.noscript {
	display:block;
	width:100%;
	font-size:1.5em;
	line-height:120%;
	padding:20px 0px;
	margin:0 auto;
	box-sizing:border-box;
	background:#ffe5e6;
	position:relative;
	z-index:1;
}
.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:calc(100% - 40px);
    margin:0 auto;
}
@media screen and (max-width:990px) {
    .pc-mode { display:none !important;}
}
@media screen and (min-width:991px) {
    .sp-mode {display:none !important;}
}
@media screen and (min-width:1640px) {
    .container { max-width:1600px;}
}
/** Layout **/
#wrapper {
	position:relative;
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
/** header **/
#header {
	position:relative;
	width:100%;
	margin:0 auto;
	z-index:1;
	background-color:transparent;
	padding-bottom:15px;
}
/* ----- topHead ----- */
#topHead {
	width:100%;
	padding:30px 0 0;
	box-sizing:border-box;
	margin:0 auto;
	position:relative;
}
#topHead .container{
	position:relative;
	z-index:1;
}
.bgWrapper,.bgRoad{
	display:block;
	position:absolute;
	left:50%;
	width:100%;
	transform-origin:left;
	transform:skewY(18deg) translate3d(-50%, 0, 0);
}
.bgWrapper{
	background-color:#108467;
	padding-bottom:105vw;
	bottom:-5vw;
}
.bgRoad{
	background-color:#424b63;
	padding-bottom:6vw;
	bottom:2vw;
}
@media screen and (min-width:768px) {
	.bgWrapper{bottom:-30px;}
	.bgRoad{
		padding-bottom:4vw;
		bottom: 1.8vw;
	}
}
@media screen and (min-width:991px) {
	.bgWrapper{bottom:-5vw;}
}
.pvWrap{
	width:100%;
	display:flex;
	align-items: center;
	justify-content:space-between;
	box-sizing:border-box;
}
.pvWrap .pvLeft{
	width:42%;
	position:relative;
}
.pvWrap .pvRight{
	width:51.4%;
	padding-right:15px;
	margin-bottom:-10%;
}
.pvawardPic{
	width:100%;
	padding-bottom:89%;
	display:block;
	background-image:url(../images/pv_award01.svg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	transform: translate3d(-2%, 0, 0);
}
.pvawardPicbg{
	position:absolute;
	right: 51%;
    top: 9.5%;
    width: 200%;
    z-index: -1;
}
.pvawardPicbg::before{
	content:"";
	display:block;
	width:100%;
	padding-bottom:91%;
	display:block;
	background-image:url(../images/pv_award02.svg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position: center right;
}
.sloganTop{ width:83.8%;}
.sloganA{
	width:100%;
	padding-bottom:17%;
	display:block;
	background-image:url(../images/pv_award03.svg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	margin-bottom:1%;
}
.sloganB{
	width:100%;
	padding-bottom:52%;
	display:block;
	background-image:url(../images/pv_award04.svg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
@media screen and (min-width:1240px) {
	.pvWrap .pvRight{
		width:53.4%;
		padding-right:0%;
	}
}
/* ----- addon ----- */
#addon {
	display:inline-block;
	text-align:right;
	position:absolute;
	right:2%;top:0;
}
#addon-sp {
    width:100%;
	background-color:transparent;
}
#addon-sp #addonLink > ul { 
	width:100%;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;	
}
#addon-sp #addonLink > ul > li {
	display:block;
	width:100%;
	letter-spacing:0px;
	box-sizing:border-box;	
	padding:0;
	margin:0;
	border-bottom:1px solid rgba(255,255,255,.3);
}
#addon-sp #addonLink > ul > li:after {display: none;}
#addon-sp #addonLink > ul > li a{
	display: block;
	box-sizing:border-box;	
	padding:15px;
}
@media screen and (max-width:640px) {
	#addon-sp #addonLink > ul {width:100%;}
}
@media screen and (min-width:1240px) {
	#addon {right:0;}
}
/** 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.7em;
	color:#fff;	
	font-weight:bold;
	box-sizing:border-box;
	padding:20px;	
}
#addonLink > ul > li a:hover,
#addonLink > ul > li a:focus {
	color:#F3EF82;
}
@media screen and (min-width:768px) {
	#addonLink{
		padding:8px;
		border-radius:4px;
	}
	#addonLink > ul > li a{
		padding:0;
		padding-left:16px;
		font-size:1.4em;
	}
	#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;
	}
}
/** main **/
#main {
    width:100%;
	padding:20px 0;
    margin:0 auto;
}
#wrapper main{
	position:relative;
	z-index:1;
}
main > .container {
	position:relative;
	display:flex;
	flex-direction: column;
}
main .acKey {
	position:absolute;
	left:20px;
	top:20px;
	margin-top:-15px;
	z-index:2;
}
main .centerWrap{
	position:relative;
	width:100%;
	box-sizing:border-box;
}
@media screen and (min-width:991px) {
	main .centerWrap{padding:4%;}
}
/*animate*/
.scroll-zone .is-inview {
    animation-name: fadeInUp;
    animation-duration:1s;
	animation-delay:0;
	z-index:2
}
.scroll-zone *[data-scroll]{
	opacity:0;
	transition:opacity .7s ease;
}
.scroll-zone *.is-inview[data-scroll]{opacity:1;}
@keyframes fadeInUp{
	0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0;}
	to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1;}
}
@-webkit-keyframes fadeInUp{
	0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0;}
	to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1;}
}
/* ----- sloganWrap{ ----- */
.sloganWrap{
	width:100%;
	background-color:#108467;
	box-sizing:border-box;
	padding:40px 15px;
}
.autoTx{display:inline-block;}
.sloganWrap .inBox{
	font-size:1.8em;
	line-height:180%;
	color:#ffffff;
	box-sizing:border-box;
	text-align:center;
}
.sloganWrap .inBox p{
	font-weight:bold;
}
.sloganWrap .inBox dl{
	display:flex;flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	flex-direction: row;
	box-sizing:border-box;
	padding:10px;
}
.sloganWrap .inBox dl dt{
	background-color:#fff;
	padding:10px;
}
.sloganWrap .inBox dl dd{
	text-align:left;
	color:#f0eb8f;
	padding:10px;
	word-break: break-word;
}
.codeWrap{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:center;
}
.codeWrap .qrCode{
	width:80px;
	background-color:#fff;
	padding:10px;
	display:inline-block;
	border-radius: 2px;
}
.codeWrap .inTx{
	text-align:left;
	width:auto;
	margin-left:10px;
}
.codeWrap .url{
	font-size:0.6125em;
	color:#CEDED6;
}
.commWrap span{
	margin:5px;
	display:inline-block;
}
.commWrap .tag{
	border:1px solid #555;
	padding:6px 15px;
	line-height:100%;
	border-radius:20px;
	font-size:0.9375em;
}
.mixGroups .commWrap{
	padding:0 5px;
	box-sizing:border-box;
}
@media screen and (max-width:400px) {
	.codeWrap .inTx{
		width:100%;
		text-align:center;
		margin-left:0;
	}
}
@media screen and (max-width:767px) {
	.sloganWrap .inBox dl{flex-direction:column;}
	.codeWrap ,.commWrap{ text-align:center;}
}
@media screen and (min-width:768px) {
	.sloganWrap .inBox dl{
		justify-content:center;
		flex-direction: row;
	}
	.sloganWrap .inBox dl dt,
	.sloganWrap .inBox dl dd{
		width:auto;
		margin:10px;
	}
}
@media screen and (min-width:991px) {
	.sloganWrap .inBox{padding:0 4%;}
	.sloganWrap .inBox > p{font-size:2em;}
	.sloganWrap .inBox dl,
	.codeWrap{
		font-size:1.25em;
		margin-top:1.5em;
	}
	.codeWrap .qrCode{width:100px;}
}
/* ----- footer ----- */
#footer {
    position:relative;
    width:100%;
	padding:20px 0;
    margin:0 auto;
}
.copyright {
	width:100%;
	text-align:center;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
}
.copyright .fotWrap{
	width:100%;
	box-sizing:border-box;
	text-align:center;
	font-size:160%;
	line-height:150%;
    font-weight:normal;
	color:#555555;
}
.flexWrap{display:flex;flex-wrap:wrap;}
.fotWrap .topInfo{
	margin:0.75em 0;
	box-sizing:border-box;
	text-align:center;
}
.fotWrap .topInfo:has(+.commWrap){
	margin-bottom:0;
}
.fotWrap .topInfo span{
	display:inline-block;
}
.fotWrap .topInfo * + span{
	position:relative;
}
.fotWrap .topInfo * + span::before{
	content:"";
	display:inline-block;
	vertical-align:middle;
	width:4px; height:4px;
	background-color:#757575;
	border-radius:3px;
	margin:0 0.75em;
}
.fotWrap .mark{
	display:inline-block;
	width:88px;
	padding:0 10px;
}
.fotWrap span.fotline{
	width:3px; height:3px;
	background-color:#757575;
	border-radius:3px;
	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:480px) {
	.copyright .fotWrap{font-size:150%;}
}
@media screen and (min-width:481px) {
	.copyright .fotWrap{
		text-align:left;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;
		padding:0 50px;
	}
	.fotWrap .topInfo{padding:0 10px;}
}
/* 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,#gMenu,
	.sloganWrap,#footer{display:none!important;}
	.scroll-zone{
		transform: none!important;
		pointer-events: none!important;
	}
	#topHead {padding-top:10px;}
	.bgWrapper{bottom:-30px;}
	.bgRoad{ padding-bottom:40px;bottom:2%;}
	.pvWrap .pvawardPic{background-image:url(../images/pv_award01.png);}
	.pvawardPicbg{bottom:-80%;}
	.pvawardPicbg::before{background-image:url(../images/pv_award02.png);}
	.pvWrap .sloganA{background-image:url(../images/pv_award03.png);}
	.pvWrap .sloganB{background-image:url(../images/pv_award04.png);}
}

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