/*--------------copyright by alva start-------------------------------*/
* {
    padding: 0px;
    margin: 0px;
}

ul {
    margin-bottom: 0px;
	list-style:none;
}

body {
    font-family:Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei";
    position: relative;
    font-size: 16px;
	line-height:35px;
	letter-spacing:2px;
	background:#fff;
	color:#fff;
}

a {
    display: block;
}
a:hover {
	text-decoration:none;
}
.clear {
	clear:both;
}

/*----header area-------------------------------------------------------------------------------------------------------------------*/
.header {
	position:relative;
}
.logo {
	text-align:center;
	position:absolute;
	top:16%;
	left:calc(50% - 171px);
}
	.logo img {
		-webkit-filter:drop-shadow(3px 3px 1px rgba(0,0,0,.5));
		filter:drop-shadow(3px 3px 1px rgba(0,0,0,.5));
	}
.mask {
	background:url(../../images/mask.png) top center no-repeat;
	background-size:cover;
	height:100vh;
}
div#imgs {
}
.bg {
  position: fixed;
  left: 0;
  top: 0;
  z-index:-100;
  width:100vw;
  height:95vh;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
  opacity:0;
}

#bg1 {
  background:url(../../flash/dex1.jpg) top center no-repeat;
  width: 100%;
  background-size:cover;
}

#bg2 {
  background:url(../../flash/dex2.jpg) top center no-repeat;
  background-size:cover;
  width: 100%;
}

#bg3 {
  background:url(../../flash/dex3.jpg) top center no-repeat;
  background-size:cover;
  width: 100%;
}

.fadein {
  opacity: 100;
  filter: alpha(opacity=100);
}
	@media screen and (max-width:600px) {
		.logo {
			width:55%;
			left:23%;
			top:20%;
		}
			.logo img {
				width:100%;
			}
		.bg {
			position:absolute;
		}
		.mask {
			height:90vh;
		}
	}
/*---navbar--------------------------------------------------------------------------------------------------------------------------------*/
.navbar {
	background:#fff;
	text-align:center;
	padding:25px 0;
	box-shadow:0px 0px 10px rgba(0,0,0,0.3);
	border-radius:0px;
	margin:0;
	border:none;
	position:sticky;
	top:0;
	z-index:99;
}
	/*navlogo*/
	.navlogo {
	}
	@media screen and (max-width:500px) {
		.navbar {
			padding:17px 0;
		}
	}
	@media screen and (max-width:400px) {
		.navbar {
			padding:12px 0;
		}
		.navbar img {
			width:70%;
		}
	}
/*---nt-----------------------------------------------------------------------------------------------------------------------------------*/
#nt {
	color:#000;
	background:url(../../images/footprint.png) bottom left no-repeat, url(../../images/line.png) bottom right no-repeat,#ffc127;
	background-size:auto;
	padding:3% 8%;
}
	/*nt_text*/
	.nt_text {
		display:inline-block;
		width:43%;
		padding:0 0;
		vertical-align:top;
	}
		/*nt_title*/
		.nt_title {
			color:#fff;
			padding:5% 0 18% 0;
		}
			.nt_title img {
				vertical-align:bottom;
				width:96%;
			}
		/*nt_intro*/
		.nt_intro {
			text-align:left;
			padding: 4% 15% 0% 7%;
		}
			.nt_intro strong {
				font-size:24px;
			}
		/*source*/
		.source {
			color:#bb8500;
			text-align:right;
			padding:4% 0;
		}
	/*nt_map*/
	.nt_map {
		display:inline-block;
		width:54%;
		padding:6% 1% 0;
		vertical-align:top;
		margin-bottom: -12%;
	}
		 .nt_map a {
			 display:none;
		 }
/*---nt_area-------------------------------------------------------------------------------------------------------------------------------*/
#nt_area {
	background:url(../../images/map_bg.jpg) top center no-repeat;
	background-size:cover;
	text-align:center;
}
	/*ntarea_title*/
	.ntarea_title {
		margin: 10% 2% 3%;
		font-size: 26px;
		color: #000;
		font-weight: bolder;
		display: inline-block;
		padding: 10px 2%;
		letter-spacing: 1px;
		border: solid 3px;
	}
	#nt_area ul {
		padding:0 14% 6%;
		text-align:left;
	}
		#nt_area li {
			display:inline-block;
			vertical-align:bottom;
			width:18%;
			padding:6px;
		}
			#nt_area a {
			}
				#nt_area li img {
					width:100%;
				}
				@media screen and (max-width:1440px) {
					#nt {
						padding:5% 6%;
					}
					.ntarea_title {
						margin:9% 2% 3%;
					}
					#nt_area ul {
						padding: 0 10% 7%;
					}
				}
				@media screen and (max-width:1024px) {
					.nt_text {
						padding:2% 5%;
						width:100%;
					}
					.nt_title {
						padding: 5% 5% 6%;
					}
					.nt_intro {
						padding: 4% 5% 0% 5%;
					}
					.nt_map {
						width:100%;
						padding:6% 0 0;
					}
					#nt_area li {
						width:30%;
						padding:2%;
					}
				}
				@media screen and (max-width:700px) {
					.nt_title {
						padding: 5% 0% 6%;
					}
					#nt_area ul {
						padding: 0 4% 7%;
					}
					#nt {
						background-size:30%;
					}
				}
				@media screen and (max-width:500px) {
					#nt {
						padding: 5% 1%;
					}
					#nt_area li {
						width: 48%;
						padding: 3%;
					}
					.ntarea_title {
						margin: 12% 2% 3%;
					}
				}
				@media screen and (max-width:400px) {
					.nt_text {
						padding:2% 1%;
					}
					.nt_intro strong {
						font-size: 20px;
					}
					.ntarea_title {
						font-size:20px;
						padding: 6px 5%;
					}
					#nt_area li {
						padding:1%;
					}
				}
/*---qktour_area--------------------------------------------------------------------------------------------------------------------------*/
#qktour_area {
	text-align:center;
	box-shadow:inset 0px 0px 60px rgba(0,0,0,.5);
}
	#qktour_area img {
		padding:13% 0 0 0;
	}
	@media screen and (max-width:1200px) {
		#qktour_area img {
			padding:16% 0 0 0;
			width:65%;
		}
	}
	@media screen and (max-width:600px) {
		#qktour_area {
			background:url(../../images/qktour_bg.jpg) top center no-repeat;
			background-size:cover;
		}
		#qktour_area img {
			width:70%;
			padding:24% 0 0 0;
		}
	}
/*---gotop----*/
#gotop {
	position:fixed;
	bottom:1%;
	right:1%;
	cursor:pointer;
	display:none;
	z-index:10;
}
	@media screen and (max-width:600px) {
		#gotop {
			width:11%;
		}
			#gotop img {
				width:100%;
			}
	}
	@media screen and (max-width:400px) {
		#gotop {
			width:14%;
			right:2%;
		}
	}
/*---svg---------------------------------------------------------------------------------------------------------------------------------*/
svg {
	min-height:697px;
}
#pctgn-3c69a38c {
	position:relative;
	margin-bottom:-24%;
}
#pctgn-3c69a38c:last-of-type a  {
	display:none;
}
	@media screen and (max-width:1024px) {
		#pctgn-3c69a38c {
			margin-bottom:-3%;
		}
	}
	@media screen and (max-width:768px) {
		svg {
			min-height:570px;
		}
	}
	@media screen and (max-width:650px) {
		svg {
			min-height:478px;
		}
	}
	@media screen and (max-width:500px) {
		svg {
			min-height:406px;
		}
	}
	@media screen and (max-width:375px) {
		svg {
			min-height:300px;
		}
	}

/*---ad--------------------------------------------------------------------------------------------------------------------------------------*/
/*ad*/
.ad {
}
	/*adarea*/
	.adarea {
		text-align:center;
	}
		/*adtop*/
		.adtop {
		}
		.adtop1 {
			background:url(../../images/ipattern01.png) repeat,url(../../images/ibg01.png) top center no-repeat fixed;
			background-size:auto,cover;
		}
		.adtop2 {
			background:url(../../images/ibg02.png) top center no-repeat fixed;
			background-size:cover;
		}
		.adtop3 {
			background:url(../../images/ibg03.png) top center no-repeat fixed;
			background-size:cover;
		}
		.adtop4 {
			background:url(../../images/ibg04.png) top center no-repeat fixed;
			background-size:cover;
		}
			/*adtitle*/
			.adtitle {
				margin-bottom: -2%;
				padding-top:20vh;
			}
			/*ideco*/
			.ideco {
				min-height:80px;
			}
			.ideco1 {
				background:url(../../images/ipattern01.png) repeat,url(../../images/ideco.png) bottom center no-repeat;
				background-size:auto,cover;
			}
			.ideco2 {
				background:url(../../images/ipattern02.png) repeat,url(../../images/ideco.png) bottom center no-repeat;
				background-size:auto,cover;
			}
			.ideco3 {
				background:url(../../images/ipattern03.png) repeat,url(../../images/ideco.png) bottom center no-repeat;
				background-size:auto,cover;
			}
			.ideco4 {
				background:url(../../images/ipattern04.png) repeat,url(../../images/ideco.png) bottom center no-repeat;
				background-size:auto,cover;
			}
		/*adinner*/
		.adinner {
			padding:2% 5% 3%;
		}
		.adinner1 {
			background:url(../../images/ipattern01.png) repeat,#fff;
		}
		.adinner2 {
			background:url(../../images/ipattern02.png) repeat,#fff;
		}
		.adinner3 {
			background:url(../../images/ipattern03.png) repeat,#fff;
		}
		.adinner4 {
			background:url(../../images/ipattern04.png) repeat,#fff;
		}
			/*adimg*/
			.adimg {
				text-align:center;
				display:inline-block;
				margin:10px 15px;
				vertical-align:top;
				position:relative;
				width:340px;
				height:340px;
				overflow:hidden;
			}
				.adimg a {
					transition:.3s ease-in;
				}
					/*adimgtit*/
					.adimgtit {
						font-size:16px;
						color:#fff;
						z-index: 5;
						position: relative;
						transition:.2s ease-in;
					}
						.adimgtit img {
							width:25%;
							display:block;
							margin:0 auto;
							padding: 22% 0 5%;
						}
						.adimgtit img:last-of-type {
							width:auto;
							display:inline-block;
							padding:0;
						}
						.adimgtit span {
							display:block;
							font-size:18px;
						}
					/*adimgbg*/
					.adimgbg {
						position:absolute;
						top:0;
						left:0%;
					}
						.adimgbg img {
							-webkit-filter:blur(2px);
							filter:blur(2px);
							border-radius:100%;
							width:100%;
						}
						.adimg a:hover .adimgbg img  {
							-webkit-filter:blur(0);
							filter:blur(0);
						}
						.adimg a:hover .adimgtit {
							opacity:0;
						}
						@media screen and (max-width:1200px) {
							.adinner {
								padding:2% 5% 0;
							}
						}
						@media screen and (max-width:899px) {
							.adinner {
								padding:2% 5% 3%;
							}
							.adimgbg {
								left:2%;
							}
						}
						@media screen and (max-width:700px) {
							.adimg {
								height:285px;
							}
						}
						@media screen and (max-width:619px) {
							.adimg {
								height:341px;
							}
							.adinner {
								padding: 2% 18% 5%;
							}
							.adtop {
								background-attachment: inherit;
							}
							.adtitle {
								margin-bottom: -5%;
								padding-top: 17vh;
							}
								.adtitle img {
									width:50%;
								}
							.ideco {
								min-height:70px;
							}
						}
						@media screen and (max-width:490px) {
							.adtitle img {
								width: 55%;
							}
							.adinner {
								padding: 2% 15% 0%;
							}
						}
						@media screen and (max-width:430px) {
							.adimg {
								height:280px;
							}
						}
						@media screen and (max-width:375px) {
							.adinner {
								padding: 2% 10% 0%;
							}
							.adimgtit img {
								padding:18% 0 5%;
							}
						}
						@media screen and (max-width:350px) {
							.adimg {
								height:250px;
							}
						}
	
.pictogon-tooltip {
	top:0;
}
@media screen and (max-width:500px) {
	.pictogon-tooltip {
		display:none !important;
	}
}