@import url("reset.css");

*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

html{ 
	font-family:Arial, Helvetica, sans-serif, "微軟正黑體";
	font-family:-apple-system,system-ui,“Segoe UI”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol;
	-webkit-text-size-adjust:none; width:100%; height:100%;} 
a{ color: #fff; text-decoration: none;}
	#sp_item1::before{ content:"指導單位｜"; }
	#sp_item2::before{ content:"主辦單位｜"; }
	#sp_item3::before{ content:"承辦單位｜"; }
	#sp_item4::before{ content:"媒體協辦｜"; }
	#sp_item5::before{ content:"協力單位｜"; }
/* DeskTop First 桌機版優先－－－－－－－－－－－－－－－－－－ */
@media screen and (min-width: 1400px) {
	body{ color: rgba(255, 255, 255, 0.8); font-size: 18px; letter-spacing:0.01em;}

	.sp_container{ position: relative; width: calc(95% - 80px);min-width: 1310px; max-width: 1400px; left:100px; display: inline-flex; flex-flow: row wrap; justify-content:flex-start; align-items:stretch; margin: 2px auto; padding: 2px;  }
	.sp_container li { display:flex; flex-flow: row wrap; align-items:center;justify-content:center; margin: 3px 1px ; min-height: 15px; padding: 5px 10px 0; }
	.sp_container li img{ vertical-align:middle; text-align:center;  width: auto; height: 30px;}
	#img_exh{ height: 42px;}
	#sp_item1::before ,#sp_item2::before ,#sp_item3::before ,#sp_item4::before ,#sp_item5::before { position: absolute; width: 100%; left:-100px;line-height: 3em;}


	.bottom{width: 100%; display: inline-flex; flex-flow: row wrap; justify-content:center; margin: 2.5em auto; }
	.bottom .item_info{ margin: 0 10px;letter-spacing:0.01em;}

}


/* 以下為 平板電腦－－－－－－－－－－－－－－－－－－以下為 平板電腦－－－－－－－－－－－－－－－－－－以下為 平板電腦－－－－－－－－－－－－－－－－－－ */ 
@media screen and (min-width: 35.6em) and (max-width: 1399px) {
body{ color: rgba(255, 255, 255, 0.8); font-size: 18px; letter-spacing:0.01em;}


	.sp_container{ position: relative; width: calc(95% - 80px);min-width: 700px; max-width: 1399px; left:100px; display: inline-flex; flex-flow: row wrap; justify-content:flex-start; align-items:stretch; margin: 2px auto; padding: 2px;  }
	.sp_container li { display:inline-flex; flex-flow: row wrap; justify-content:center;  align-items:center; margin: 2px 1px ; min-height: 15px; padding: 5px 10px 0;}
	.sp_container li img{display:table-cell; vertical-align:middle; text-align:center; width: auto; height: 28px;}
	#img_exh{ height: 40px;}
	#sp_item1::before ,#sp_item2::before ,#sp_item3::before ,#sp_item4::before ,#sp_item5::before { position: absolute; width: 100%; left:-100px;line-height: 3em;}

	.bottom{width: 100%; display: inline-flex; flex-flow: row wrap; justify-content:center; margin: 2.5em auto; }
	.bottom .item_info{ margin: 0 10px;letter-spacing:0.01em; font-size: 0.8em;}
	
}



/* 以下為 手機版－－－－－－－－－－－－－－－－－－ 以下為 手機版－－－－－－－－－－－－－－－－－－ 以下為 手機版－－－－－－－－－－－－－－－－－－ */
@media screen and (max-width: 766px) {
	body{ color: rgba(255, 255, 255, 0.8); font-size: 18px; letter-spacing:0.01em;}

	.sp_container{ position: relative;width: calc(100% - 60px); min-width: 250px; max-width: 750px;  height: fit-content; padding-bottom: 10%; left:32px; display: flex; flex-flow: row wrap; justify-content:flex-start; align-items:stretch; margin: 5px auto 10px auto ; padding: 2px ; overflow:visible;}
	.sp_container li { display:flex; align-items:center;justify-content:center; margin: 0px 1px ; min-height: 15px; padding: 2px 10px 0; }
	.sp_container li img{ width: auto; height: 23px;}
	#img_exh{ height: 30px;}
	#sp_item1::before ,#sp_item2::before ,#sp_item3::before ,#sp_item4::before ,#sp_item5::before { position: absolute; left:-58px; top:0;line-height: 2.5em; font-size: 0.7em;}

	.bottom{width: 100%; display: inline-flex; flex-flow: row wrap; justify-content:center; margin: 1em auto 1.5em auto;; }
	.bottom .item_info{ margin: 0 10px;letter-spacing:0.01em; font-size: 0.6em;}
	
}