@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,900&subset=chinese-traditional'); 中文:NOTO */
/* CSS Document */
/* Art Tangency Creation - 天井創意 CaGe Wei @art-tangency.com */
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,input,select,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li, fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,hr{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;}
body, div {
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a,span,i{text-decoration:none; vertical-align:baseline;}
img{max-width:100%;}
/* ============= Basic ============= */
body,div,ul,ol,li,dl,dt,dd,img,table,a,input,select  {
	margin:0px; padding:0px; border:0px none; text-decoration:none;
	font-family:"PingFangTC","LiHei Pro Medium","Apple LiGothic Medium",'Noto Sans TC',"Microsoft JhengHei",'Quicksand';
}
.ta-R{text-align:right;}
.ta-L{text-align:left;}
.ta-C{text-align:center;}
.mag_C {margin:0px auto;}
.fl-R{float:right;}
.fl-L{float:left;}
.clear::after {content:""; display:table; clear:both; height:0px;}
.clear {zoom:1;/*IE6+7*/}
.line_over {overflow-x:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pos-re {position:relative;}
.pos-ab{position:absolute;}
.hid {visibility:hidden;}
.false {display:none;}
.cssFlex {display:flex;}
.cssFlex > * {width:100%;}
.cssTable {display:table; width:100%;}
.cssTable > dl, .cssTable > ul {display: table-row;}
.cssTable > dl > dt, .cssTable > dl > dd, .cssTable > ul > li {display: table-cell;}
.v-base{vertical-align:baseline;}/* vertical align baseline */
.v-top{vertical-align:top;}/* vertical align top */

/* ============= botton ============= */
.btnFace, a, .backTop, .btnFaceN {cursor:pointer;}
.CGc, .CGt * {-webkit-transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1); -moz-transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1); -o-transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1); transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1);}
.CGc:hover, .CGt *:hover {-webkit-transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1); -moz-transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1); -o-transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1); transition: all 0.3s cubic-bezier(0.21, 1, 0.9, 1);}
.opa {opacity:0; -webkit-animation:opacity 10s ease 0s forwards; animation:opacity 10s ease 0s forwards;}
@keyframes opacity {0%{opacity:0;} 50% {} 51% {} 60% {} 100%{opacity:1;}}
@-webkit-keyframes opacity {from{opacity:0;} to{opacity:1;}}



/* ============= Loader ============= */
/* Loader */
#pop_loader {width:100%; height:100vh; position:fixed; top:0px; left:0px; box-sizing:border-box; padding-top:40vh; z-index:999;}
#pop_loader .loader {
	max-width:200px; width:50%; height:120px; border-radius:10px; margin:0px auto;
	position:relative; background-color:rgba(0,0,0,0.8);
}
#pop_loader .loader p {
	text-align:center; color:#fff; font-size:0.9rem;
	padding-top:80px;
}
@-webkit-keyframes line-spin-fade-loader {
	50% {opacity: 0.1;} 100% {opacity: 1;} 
}
@keyframes line-spin-fade-loader {
	50% {opacity: 0.1;} 100% {opacity: 1;} 
}
.line-spin-fade-loader {
	position:absolute; top:35px; left:calc(50% - 5px); 
}
	.line-spin-fade-loader > i:nth-child(1) {
		top: 15px;
		left: 0;
		-webkit-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; }
	.line-spin-fade-loader > i:nth-child(2) {
		top: 10.63636px;
		left: 10.63636px;
		-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
		-webkit-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; }
	.line-spin-fade-loader > i:nth-child(3) {
		top: 0;
		left: 15px;
		-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
		-webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; }
	.line-spin-fade-loader > i:nth-child(4) {
		top: -10.63636px;
		left: 10.63636px;
		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
		-webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; }
	.line-spin-fade-loader > i:nth-child(5) {
		top: -15px;
		left: 0;
		-webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; }
	.line-spin-fade-loader > i:nth-child(6) {
		top: -10.63636px;
		left: -10.63636px;
		-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
		-webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; }
	.line-spin-fade-loader > i:nth-child(7) {
		top: 0;
		left: -15px;
		-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
		-webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; }
	.line-spin-fade-loader > i:nth-child(8) {
		top: 10.63636px;
		left: -10.63636px;
		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
		-webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
				animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; }
	.line-spin-fade-loader > i {
		display:block;	background-color: #fff;
		width: 3px; height: 12px; border-radius: 2px; margin: 2px;
		-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
		position: absolute;
		/* width: 5px;
		height: 15px; */
	}

/* ============= utf8 - FONT ============= */
/* CJK Unified Ideographs U+4E00-U+9FFF */
@font-face {font-family:sans-serif; src:local(Heiti TC), local("微軟正黑體"), local("Microsoft JhengHei"); unicode-range:U+4E00-9FFF;}
@font-face {font-family:serif; src:local(LiSong Pro), local("新細明體"), local("PMingLiU"); unicode-range:U+4E00-9FFF;}
/* Japanese Kana U+3040-U+30FF */
@font-face {font-family:sans-serif; src:local(Hiragino Kaku Gothic Pro), local(Meiryo); unicode-range:U+3040-30FF;}
@font-face {font-family: serif; src: local(Hiragino Mincho Pro), local(MS PMincho); unicode-range: U+3040-30FF;}
/* Bopomofo U+3105-U+312C */
@font-face {font-family:sans-serif; src:local(LiHei Pro), local("微軟正黑體"), local(Microsoft JhengHei); unicode-range:U+3105-312C;}
@font-face {font-family:serif; src:local(LiSong Pro), local("新細明體"), local(PMingLiU);  unicode-range: U+3105-312C;}
/* Latin, Latin1, Latin Ext-A, Latin Ext-B */
@font-face {font-family:sans-serif; src:local(Helvetica), local(Arial); unicode-range: U+00-024F;}
@font-face {font-family:serif; src:local(Times), local(Times New Roman); unicode-range: U+00-024F;}