@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
html{ height:100%; width:100%; margin:0; padding:0;}
body { font-family: "Noto Sans TC", "微軟正黑體", "新細明體", "Microsoft JhengHei", Arial, Helvetica, sans-serif; margin:0; padding:0; width:100%;}
html, body, div, span, h1, h2, h6, h3, h4, h5, a, ul, li,
dl, dt, dd, ol{
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	text-decoration: none;
}
a{
	color: #000;
	}
:root {
    --letterSpacing20: .02em;
    --letterSpacing30: .03em;
    --letterSpacing40: .04em;
    --letterSpacing50: .05em;
    --letterSpacing100: .1em;
    --letterSpacing150: .15em;
    --letterSpacing200: .2em;
    --letterSpacing300: .3em;
}
/* 定義閃爍動畫 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
/*------------------------------------------------------------
	通用上方
------------------------------------------------------------*/
menu, nav, section, summary {
	display: block;
}
ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

/*------------------------------------------------------------
	電腦首頁
------------------------------------------------------------*/
#container {
	padding-top: 0;
	margin: 0 auto;

}

#gHeader {
	width: 100%;
}

#main {
	width: 100%;
}

#gFooter {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 801 !important;
}
#main::after, #gFooter::after {
    content: '';
    display: block;
    clear: both; /* 清除浮动 */
}

.jsAnimate {
	top: 0 !important;
	opacity:1 !important;
}

.animate {
	transition:all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	transform:translate(0,-20px) !important;
	opacity:0 !important;
}

.chkbox{
	width: 18px;
	height: 18px;
}
.chkradio{
	width: 18px;
	height: 18px;
}

.line1{
	display: inline-block;
}
.line2{
	display: block;
}
.GO_TOP {
	position: fixed;
/*	width: 80px;
	height: 30px;*/
	width: 82px;
	height: 82px;
	display:block;
	top: calc(50% + 90px);
	right: 5%;
  	color: #FFF;
  	font-size: 65px;
  	line-height: 107px;
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
  	text-align: center;
  	background-color: rgba(13, 170, 186, 0.6);
/*	border-radius: 15px 15px 0 0;*/
  	background-color: rgba(13, 170, 186, 0.6);
	border-radius: 55px;
 	padding: 0;
	z-index: 9999;
}
/*.GO_TOP img {
	width: 80px;
	height: 80px;
}*/
.GO_LIST {
	position: fixed;
	display:block;
	width: 82px;
	height: 56px;
	top: calc(50% + 180px);
	right: 5%;
  	color: #FFF;
  	font-size: 24px;
  	line-height: 28px;
  	text-align: center;
  	background-color: rgba(13, 170, 186, 0.6);
	border-radius: 55px;
 	padding: 12px 0;
	z-index: 9999;
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
@media all and (min-width: 1025px) and (max-width: 1280px)  {
	.GO_TOP {
		right: 2%;
	}
	.GO_LIST {
		right: 2%;
	}
}
@media all and (min-width: 769px) and (max-width: 1024px)  {
	#gHeader {
		width: 100%;
		min-width: 100%;
	}
	#main {
		width: 100%;
		min-width: 100%;
	}	
	#gFooter {
		width: 100%;
		min-width: 100%;
	}
	.GO_TOP {
		width: 75px;
		height: 75px;
	  	font-size: 65px;
	  	line-height: 104px;
	  	right: 2%;
	}
	.GO_LIST {
		width: 75px;
		height: 48px;
	  	font-size: 23px;
	  	line-height: 23px;
	 	padding: 10px 0;
	  	right: 2%;
	}
}
@media all and (min-width: 361px) and (max-width: 768px)  {
	#gHeader {
		width: 100%;
		min-width: 100%;
	}
	#main {
		width: 100%;
		min-width: 100%;
	}
	#gFooter {
		width: 100%;
	}
	.GO_TOP {
		width: 70px;
		height: 70px;
	  	font-size: 60px;
	  	line-height: 96px;
	  	top: 60%;
	  	right: 2%;
	}
	.GO_LIST {
		width: 72px;
		height: 48px;
	  	font-size: 22px;
	  	line-height: 23px;
	 	padding: 10px 0;
		top: calc(60% + 80px);
	  	right: 2%;
	}
}

@media all and (min-width: 0) and (max-width: 360px)  {
	#container {
	}

	#gHeader {
		width: 100%;
		min-width: 100%;
	}
	#main {
		margin-bottom: 0;
		min-width: auto;
		width: 100%;
	}
	#gFooter {
		width: 100%;
	}
	.GO_TOP {
		width: 60px;
		height: 60px;
	  	font-size: 60px;
	  	line-height: 86px;
	  	top: 60%;
	  	right: 2%;  	
	}
	.GO_LIST {
		width: 60px;
		height: 40px;
	  	font-size: 18px;
	  	line-height: 20px;
	 	padding: 8px 0;
		top: calc(60% + 80px);	
  		right: 2%;
	}
}