@charset "utf-8";
:root {
	--body-color: #28221D;
	--main-color: #233253;
	--sub-color: #EC7147;
	--third-color: #56B878;
	--foruth-color:#71B6E5;
	--main-color-dark: #038fa5;
	--cata-color: #526366;
	--sectionpd: 3.5em;
	--unitcolor:#2E1D41;;
	/*112px*/
	--rowpd: 1.5em;
	--titlepd: 1em;
	/*32px*/
	--ppd: 0.5em;
	--headerWidth:70px;
}

@media screen and (min-width: 768px) {
	:root {
		--sectionpd: 8em;
		--rowpd: 2em;
		--titlepd: 2em;
		--ppd: 1em;
	}
}

ul,
li {
	list-style: none;
}

dd {
	padding-left: 0px;
	float: left;
	margin-left: 0px;
}

* {
	margin: 0;
	padding: 0;
}
.site-blue{
	color:var(--main-color)
}
.site-red{color:#EC7147}

@font-face {
	font-family: 'IBM';
	src: url("../font/IBM/IBMPlexSans-Regular.ttf") format("truetype");
}
.ch {
	font-family: 'Noto Serif TC', serif;
}
.fontb{font-family:"NotoSansTC";}
.en {
	font-family: 'arial', serif;
}
.ibm{font-family: 'IBM';}
.blue{color:#387287}
.olnum{  counter-reset: item;}
.olnum li{padding-left: 30px;
position: relative;
font-weight: bold;
}
.olnum li:before {
	position: absolute;
	left:0px;
    content: counters(item, ".") ". ";
    counter-increment: item
}
.dotlist li{
	font-weight: bold;
	margin-bottom: 0.5rem;
	padding-left: 30px;
	background-image: url(../img/page/dot2.svg);
	background-repeat: no-repeat;
	background-position: left 8px;
	background-size:15px auto ;
	font-size: 1rem;
}
/*body------------------------------
------------------------------------*/

body {
	font-size: 1em;
	line-height: 1.6;
	min-height: 100vh;
	overflow-y: auto;
	font-weight: normal;
	font-family: 'Microsoft JhengHei', sans-serif;
	color:#000000;
	background-image: url(../img/all/bg-body.jpg);
}

.section-bigpt {
	z-index: 2;
	margin-bottom: var(--sectionpd)*2;
	margin-top: var(--sectionpd)*2;
}

.pc {
	display: none;
}

.mobile {
	display: block;
}

@media screen and (min-width: 768px) {
	body {
		font-size: 1em;
		line-height: 1.8;
	}

	.pc {
		display: block;
	}

	.mobile {
		display: none;
	}

}

/* ---------------------------------------------------------
  Header (.site-header[-*])
----------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
	max-width: 100%;
	height:80px;
}

.site-header__btn{
	width: var(--headerWidth);
    height:60px;
	font-weight: normal;
	font-family: "NotoSansTC";
	background-color: #EF8E9F;
	border:1px solid rgba(239, 142, 159,0);
	color:#ffffff;
	cursor: pointer;
	font-size: 0.9rem;
	line-height:1rem;
	position: fixed;
	top:0px;
	right:50px;
	margin-top: 0px;
	}
	.site-header__btn br{
		display: none;
	}
.site-header__btn:hover{background-color:#c7e7fa;color:#EF8E9F;border:1px solid rgba(239, 142, 159,1);}
.site-header_logo {
	min-width: 100px;
	max-width:50%;
	margin-right: 5%;
	display: flex;
}
.site-header.active .site-header_logo {
	display: none;
}
.site-header_nav {
	height: auto;
	position: relative;
	z-index: 100;
	border-color: #63B8C9;
}
.site-header_nav--in{
	display: flex;
	height: 100%;
	width: 100%;
	gap: 0px;
}
.site-heade_in {
	position: relative;
	z-index: 100;
}

.site-header_navcontent {
	background-image: url(../img/all/bg-body.jpg);
	width: 0%;
	position: absolute;
	right: 0px;
	top: 0;
	height: 100vh;
	z-index: 99;
	overflow-x: hidden;
	overflow-y: auto;
	opacity: 0;
	-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	-webkit-transition: 0.6s;
	transition: 0.6s;

}

.site-header_navcontent.active {
	-webkit-clip-path: polygon(-15% 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(-15% 0, 100% 0, 100% 100%, 0 100%);
	-webkit-animation: ani-right 0.5s forwards;
	-moz-animation: ani-right 0.5s forwards;
	-o-animation: ani-right 0.5s forwards;
	animation: ani-right 0.5s forwards;
}
.site-header__banner--in{position: relative;}

.navi-banner{
	position: relative;
	width: 100%;
	margin-top: 10%;
}
.navi-banner__logo{
	position: absolute;
	z-index: 2;
	width: 25%;
	left:3%;
	top:0%;
	margin-top: -7%;
}
.site-header__gift{
	position: absolute;
	display: block;
	width:25%;
	top:15%;
	right:15%
}
.site-header_openNavi,.site-header_openFooter{
	max-width: 950px;
	margin-left: auto;
	margin-right: auto;
}
.site-header_openFooter{
	font-size: 0.9rem;
	color: rgba(255,255,255,0.8);
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255,255,255,0.25);
	margin-top: 3rem;
	margin-bottom: 1rem;
	padding-left: 1rem;
	padding-right:1rem ;
	text-align: center;
}
@media screen and (min-width: 950px) {
	.navi-banner{
		width: 80%;
		margin-top: -3%;
	}
	.site-header__gift{
		position: relative;
		display: block;
		flex:0 0 auto;
		width: 250px;
		top:0px;
		right:auto
	}
	.navi-banner__logo{
		width: 16%;
		left:calc(50% - 8%);
		top:0%;
		margin-top: 5%;
	}
}
/*
*site-header_ul
*/

.site-header_li {
	color: var(--main-color);
	position: relative;
	cursor: pointer;
}

.site-header_li--in {
	padding-left: 2.5em;
	padding-right: 2.5em;
	color: #000000;
	display: flex;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	position: relative;
}
.site-header_li--in span{
	padding-bottom: 0.5rem;
	position: relative;
}
.site-header_li--in span:after{
	transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	background-color: rgba(0, 0, 0, 0);
	width: 0%;
	height: 1px;
	content:'';
	position: absolute;
	bottom: 0px;
	left: 0px;	
}
.site-header_li:hover .site-header_li--in span:after{
	background-color: rgba(0, 0, 0, .5);
	width: 100%;
}
.site-header__follows{
	position: fixed;
	width: var(--headerWidth);
	height: auto;
	right: 0;
	bottom: 0;
	z-index: 101;
	display: none;
}

.site-header_dt div {
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px auto;
	color: #000000;
	font-size: 0.9em;
	width: 50px;
	height: 50px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.site-header_dt div:hover {
	color: #FEE21C;
}

.site-header_dt__kt {
	background-image: url(../img/all/icon_kt.svg);
}

.site-header_dt__fb {
	background-image: url(../img/all/icon_fb.svg);
}
.site-header_dt__line{
	background-image: url(../img/all/icon_line.svg);
}


@media screen and (min-width:950px) {

	.site-header {
		width: var(--headerWidth);
		max-width: var(--headerWidth);
		height: 100vh;
		background-color: #C7E7FA;
	}


	.site-header_nav {
		height: 100vh;
		background-color: #C7E7FA;
	}

	.site-header_nav--in{
		display: flex;
		height: 100%;
		gap: 0px;
	}
	.site-header__btn{	
		width: var(--headerWidth);
  		height:var(--headerWidth);
		top:0px;
		right:0px;
		margin-top: 65px;	
		}
		.site-header__btn br{
			display: block;
		}
		.site-header__follows{
			display: block;
		}
}
/* -----------------------------------------------
  Header END
----------------------------------------------- */
.site-gotop {
	width: 50px;
	height: 50px;
	cursor: pointer;
	overflow: hidden;
	z-index: 100;
	background-image: url(../img/all/scrolltop.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 45px 45px;
	right:0px;
	position: fixed;
	bottom:1em;
	display: none;
}

.site-gotop.active {display: block;}
/*FOOTER*/
.site-footer {
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.site-footer_in {
	position: relative;
	z-index: 2;
	left: 0;
	top: 0;
	gap: 1em;
	font-size: 1em;
	margin-top: var(--sectionpd);
	padding-bottom: 2em;
	padding-top: 2em;
	/* border-top: 1px solid rgba(255,255,255,0.3); */
}

.site-footer__gotop {
	margin: 2.5em 0px;
	border-top: solid 1px var(--main-color);
}

.site-footer__units {
	max-width: 950px;
	font-size: 0.9em;
}

.site-footer__units--col {
	margin-bottom: 0.8rem;
}



.box-unit:before {
	display: block;
	font-weight: bolder;
	font-family: 'IBM';
	padding-right: 10px;
	/* background-image: none; */
	background-position: right center;
	background-repeat: no-repeat;
	opacity:0.8;
	color:var(--bs-primary)
}
.box-unit a{color: #000;}
.box-unit__u {
	padding: 0px 0px;
	display: block;
	font-weight: bold;
	color: #47a2b4;
	margin-top: 10px;
}
.box-unit__name {
	padding: 0px 0px;
	padding-right: 10px;
	display:inline-block;
	font-weight: bold;
	color: #47a2b4;
	margin-top: 10px;
}
.box-unit__u img {
	width: auto;
    height: 30px;
}
.box-unit__u.kt img{
	width: auto;
    height: 35px;
} 

.box-unit__u.kun img{
	width: auto;
	height: 23px;
} 
.box-unit__u.shi img{
	width: auto;
	height: 35px;
} 
.box-unit__u.chu img{
	width: auto;
	height: 28px;
}

.box-unit.u1:before {
	content: '主辦單位:';
	font-family: 'IBM';
	color:var(--bs-primary)
}

.box-unit.u2:before {
	content: '承辦單位:';
	font-family: 'IBM';
	color:var(--bs-primary)
}

.box-unit.u3:before {
	content: '協辦單位:';
	font-family: 'IBM';
	color:var(--bs-primary)
}

.box-unit.u4:before {
	content: '媒體宣傳:';
	font-family: 'IBM';
	color:var(--bs-primary);
}

.site-social {
	gap: 1em;

}

.site-social_li {
	font-size: 1.5em;
}

.site-paragraph {
	padding-bottom: var(--rowpd);
	font-weight: bold;
}

.site-title {
	margin-bottom: var(--titlepd);
	position: relative;
	width:100%;
	margin-left: auto;
}
.site-title__bg{
	position: absolute;
	z-index: 0;
	width: 100%;
	right: 0;
	top:-28%;
	display: none;
}
.site-title__in{
	position: relative;
	z-index: 1;
	color:var(--bs-primary);
	padding-top: 0rem;	
	padding-left: 0%;
	text-align: center;
}
.site-title h1{
	font-family: 'IBM';
	font-weight: bold;
	font-size: clamp(2.2rem, 3vw, 5rem);
}
.site-title h1:before{
	content:'';
	background-color: #ffffff;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;

}
.site-title h2{font-size: clamp(0.9rem, 1vw, 1rem);
text-transform: uppercase;}
.site-item {
	color: #ffffff;
	font-size: clamp(1.3rem, 1.5vw, 1.5rem);
	font-weight: bolder;
	padding-left:35px;
	background-image: url(../img/all/dot.png);
	background-repeat:no-repeat;
	background-position:left 5px;
}
.site-row{
	margin-bottom: 1.8rem;
}
.site-label{
	color: #ffffff;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.3);
	padding: 0.2rem 0.5rem;
}
.site-label b{
	margin-left: 5px;
}
.container.site-container {
	position: relative;
	padding-left: 2.5em;
	padding-right: 2.5em;
	max-width: 1200px;
	z-index: 2;
}
.table{
	text-align: center !important;
	font-weight: bold;
	vertical-align: middle;
}
.custtb{
	background-color: #036995;
	color: #ffffff;
}
.custtb td:not(:last-child){border-right: solid 1px rgba(255,255,255,0.3) !important;
	}

@media screen and (min-width: 650px) {
	.box-unit.u1:before {
		content: '主辦單位';
		font-family: 'IBM';
	color:var(--bs-primary)
	}
	
	.box-unit.u2:before {
		content: '承辦單位';
		font-family: 'IBM';
	color:var(--bs-primary)
	}
	
	.box-unit.u3:before {
		content: '協辦單位';
		font-family: 'IBM';
	color:var(--bs-primary)
	}
	
	.box-unit.u4:before {
		content: '媒體宣傳';
		font-family: 'IBM';
	color:var(--bs-primary);
	}
	
	.box-unit:before {
		display: inline-block;
		background-image: url(../img/all/line.jpg);
		opacity: 1;
	}

	.box-unit__u {
		padding: 0px 5px;
		display: inline-block;
	}
}


@media screen and (min-width: 768px) {
	.site-item {
		padding-left:60px;
		background-image: url(../img/all/dot2.png);
		background-repeat:no-repeat;
		background-position:left 10px;
	}
	.site-title__bg{	
		display: block;
	}
	.site-title__in{
		padding-top: 2rem;	
		padding-left: 25%;
		text-align: left;
	}
	.site-title h1:before{
		display: none;
	}
	.site-footer__units--col {
		margin-bottom: 0.1rem;
	}
	.site-header_logo {
		max-width: 50%;
		margin-top: -50px;
		margin-left: -50px;
		display: none;
	}

}

@media screen and (min-width: 950px) {
	.site-title {
		width: 70%;
	}
	}
@media screen and (min-width: 1200px) {
.site-title {
	width: 60%;
}
}
/* ---------------------------------------------------------
  Mag
----------------------------------------------- */
#mag {
	width: 50px;
	height: 60px;
	--magcolor: #3B294C;
	--magwidth: 35px;
	--magheight:2px;
	overflow: hidden;
	cursor: pointer;
	top:0px;
	right:0px;
	z-index: 100;
	position: fixed;
	background-color: #c7e7fa;	
	padding-top: 17px;
	padding-left: 8px;
}
#mag:hover:before{
	color: #ffffff;
}
.magline{
    position: relative;
	height:var(--magheight);
	width: var(--magwidth);
	background-color: var(--magcolor);
	display: block;
	}
.magline:before{
	content:'';
	height:var(--magheight);
	width: calc(var(--magwidth) * 0.7);
	background-color: var(--magcolor);
	display: block;
	position: absolute;
	top:5px;
	right: 0;
	transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
}
#mag:hover .magline:before{	width: calc(var(--magwidth) * 1);}
.magline:after{
	content:'';
	height:var(--magheight);
	width: var(--magwidth);
	background-color: var(--magcolor);
	display: block;
	position: absolute;
	top:10px
}
#mag.active .magline{
	transform: rotate(-30deg);
	position: absolute;
	top:20px
}
#mag.active .magline:before{
	display: none;
}
#mag.active .magline:after{
	transform: rotate(-302deg);
	top:0px
}
.magw{
	color: var(--magcolor);
	font-weight: normal;
	margin-top: 15px;
	font-size:0.8rem;
}

@media screen and (min-width: 950px) {
	#mag.active .magline{
		top:0px
	}
	#mag {
		width: 60px;
	height: 60px;
	--magwidth: 40px;
	--magheight:2px;
		margin-left:20px;
	}
	.magw{
		margin-top: 20px;
	}

	#mag.active .magline{
		top:30px
	}
	.magline:before{
		top:10px
	}
	.magline:after{
		top:20px
	}
}
/*BTN----------------------------------
------------------------------------------*/
.btn-i{
	background-color: #ffffff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	overflow: hidden;
	position: relative;
}
.btn:hover .btn-i{background-color:var(--main-color);}
.btn-i:before{
	content: "";
	background-image:url(../img/all/btn-arrow.svg);
	background-repeat:no-repeat ;
	background-size: 12px auto;
	background-position:center ;
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 2;

}
.btn-i:after{
	content: "";
	background-image:url(../img/all/btn-arrow-w.svg);
	background-repeat:no-repeat ;
	background-size: 12px auto;
	background-position:center ;
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	margin-left: -50px;
	z-index: 1;
}
.btn:hover .btn-i:before{margin-left: 50px;}
.btn:hover .btn-i:after{margin-left: 0px;}

.btn-rule{
	background-color: var(--bs-primary);
	color: var(--bs-secondary);
	font-weight: bold;
	font-size: 1.1rem;
}
.btn-rule:hover,.btn.btn-rule:focus,.btn.btn-rule:active  {
	background-color: #DF6D3C;
	color: #ffffff;
}
/* .btn.btn-rule:focus {
	z-index: 5;
  } */
.fb{
	font-size: 1.1rem;
	font-weight: bold;
}
/*-------------------------------FILEWRAP
----------------------------------------*/
.wrapper-file{
    padding-top: var(--titlepd);
    border-top: rgba(255,255,255,.3) 1px dashed;
    margin-top: var(--rowpd);
}
.list-file{
    color:#ffffff;
    font-size: 0.9rem;
    display: flex;
    align-items: start;
    gap: 0.5rem;
	position: relative;
	padding-left: 50px;
	font-weight: bold;
	overflow: hidden;
	line-height: 30px;
}
.list-file:before{
    content:"";
    background-image: url(../img/all/btn-arrow-w.svg);
   background-size:18px auto;
   background-repeat:no-repeat;
   background-position: center;
   width: 30px;
   height: 30px;
   position: relative;
   overflow: hidden;
   position: absolute;
   top:0;
   left: 0;
   border-radius: 50%;
  }
  .list-file:after{
    content:"";
    background-image: url(../img/all/btn-arrow.svg);
   background-size:18px auto;
   background-repeat:no-repeat;
   background-position: center;
   width: 30px;
   height: 30px;
   position: relative;
   overflow: hidden;
   position: absolute;
   top:-50px;
   left:0px;
   border-radius: 50%;
  }
.list-file:hover{
	color: #000000;
	 text-decoration: underline;}
.list-file:hover:after{
	top:0px;
}
/*-------------------------------PAGEITEM
----------------------------------------*/
.pageitem{
    color: #50A2B2;
    margin-bottom: 1em;
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
}
.pageitem.smb{ margin-bottom: 0px;}
.pageitem span{
	padding: 0.5rem;
	background-image:url(../img/all/slash.svg);
	background-repeat: repeat-x;
	background-position: left top;
background-size: auto 100%;}
/*LOADMORE===================================*/
.show-more {
	width: 100vw;
    height: 100vh;
	text-align: center;
	padding: 10px;
	color: #FFF;
	display: none;
	background-image: url(../img/all/loading.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50px 50px;
	position: fixed;
    background-color: rgba(255,255,255,.5);
    left:0;
    top:0;
    z-index: 20000;
}
.show-more span{
    width: 100%;
	padding-bottom: 50px;
	color:#ffffff;	
}
/*LOADMOREEND=====================================*/
/*others----------------------------------
------------------------------------------*/
.transiA,
a,
.btn,
#mag,
.site-header__btn,
.site-header_li--in,
.site-gotop span:after,
.site-header_li--in .en,
.site-header_dt div,
.box-program-icon span:before,
.btn-i:before,
.btn-i:after,
.list-file:after,
.cata-list li,
.box-work__des--workname,
.box-pic img,
.box-sign__icon,
.icon-arrow:after{
	transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-moz-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-webkit-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-ms-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-o-webkit-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
}

.nowrap {
	white-space: nowrap;
	display: inline-block
}
.awtb table {
	border: 1px solid #036995;
	clear: both;
	width: 100%;
	max-width: 100%;
	background-color: rgba(251, 242, 225,0.1);
	display: table;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
	color: #000;
}

.awtb tr:first-child td{
	background-color: #036995;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
.awtb tr:first-child td:not(:last-child){
	border-right: 1px solid rgba(255,255,255,.3);}
.awtb tr:nth-child(even){
	background-color: rgba(251, 242, 225,0.5);
}
.awtb tr:nth-child(odd){
	background-color: #e7eef1;
}
.awtb td,.signtb td {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #036995;
	display: table-cell;
	padding: 5px;
	text-align:center
}
.awtb
/*IMG*/

img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.miximg {
	mix-blend-mode: multiply;
}

@media screen and (max-width: 375px) {

	/*限制縮到最小狀況*/
	body,
	html {
		width: 375px;
		overflow-x: hidden;
	}
}