@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");

html{
	overflow-x:hidden;
	scroll-behavior:smooth;
}

body{
	font-family:"Noto Sans TC","Arial",sans-serif;
	margin:0px;
}

ul,ol,li,h1,h2,h3,h4,h5,h6{
	font-size:20px;
	padding:0px;
	margin:0px;
}

a{
	text-decoration:none;
}

#particles-js{
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	position:fixed;
	z-index:1;
}

.br1,.br2{
	display:none;
}

nav{
	top:0px;
	position:sticky;
	background:#2275b2;
	box-shadow:rgba(0,0,0,0.15) 0px 3px 3px 0px;
	z-index:100;
}

nav ul{
	width:1000px;
	list-style:none;
	justify-content:space-evenly;
	padding:0px;
	margin:0px auto;
	display:flex;
}

nav a{
	color:#2275b2;
	background:#ffffff;
	font-size:28px;
	font-weight:500;
	text-align:center;
	text-decoration:none;
	border:2px solid #2275b2;
	box-shadow:2px 2px 0px #004570;
	padding:4px 40px;
	margin:16px 0px;
	display:block;
	transition:transform 0.2s;
}

nav a:hover{
	transform:scale(0.88);
}

@media(max-width:1050px){
	nav ul{
		width:700px;
	}

	nav a{
		font-size:28px;
		border:2px solid #2275b2;
		box-shadow:2px 2px 0px #004570;
		padding:4px 20px;
		margin:16px 0px;
	}
}

@media(max-width:750px){
	nav ul{
		width:500px;
	}

	nav a{
		font-size:24px;
		border:2px solid #2275b2;
		box-shadow:2px 2px 0px #004570;
		padding:2px 8px;
		margin:16px 0px;
	}
}

@media(max-width:550px){
	nav ul{
		width:98%;
	}

	nav a{
		font-size:20px;
		border:2px solid #2275b2;
		box-shadow:2px 2px 0px #004570;
		padding:2px 8px;
		margin:12px 0px;
	}
}

@media(max-width:450px){
	nav ul{
		width:98%;
	}

	nav a{
		font-size:20px;
		line-height:24px;
		border:2px solid #2275b2;
		box-shadow:2px 2px 0px #004570;
		padding:2px 8px;
		margin:12px 0px;
	}

	.br1{
		display:inline;
	}
}

#bg2{
	position:relative;
	background:#abedff;
	padding:100px 0px;
}

#block2{
	width:1200px;
	position:relative;
	margin:0px auto;
	flex-wrap:wrap;
	display:flex;
	z-index:1;
}

#block2 h1{
	width:900px;
	color:#00588e;
	font-size:50px;
	font-weight:bold;
	text-align:center;
	border-top:4px solid #00588e;
	border-bottom:4px solid #00588e;
	padding:10px 0px;
	margin:0px auto 20px auto;
}

#block2 h1 span{
	font-size:40px;
}

#block2 div{
	width:100%;
	height:180px;
	position:relative;
	background:#ffffff;
	border-top-right-radius:8px;
	border-bottom-right-radius:8px;
	margin-top:20px;
	overflow:hidden;
}

#block2 img{
	top:0px;
	left:0px;
	position:absolute;
	clip-path:polygon(0% 0%,90% 0%,100% 50%,90% 100%,0% 100%);
}

#block2 h2{
	color:#00588e;
	font-size:30px;
	font-weight:bold;
	padding:20px 20px 0px 240px;
}

#block2 h3{
	color:#000000;
	font-size:24px;
	font-weight:400;
	padding:10px 20px 0px 240px;
}

@media(max-width:1250px){
	#bg2{
		padding:100px 0px;
	}

	#block2{
		width:900px;
	}

	#block2 h1{
		width:600px;
		font-size:40px;
		border-top:4px solid #00588e;
		border-bottom:4px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block2 h1 span{
		font-size:30px;
	}

	#block2 div{
		width:100%;
		height:180px;
		border-top-right-radius:8px;
		border-bottom-right-radius:8px;
		margin-top:20px;
	}

	#block2 img{
		top:0px;
		left:0px;
		clip-path:polygon(0% 0%,90% 0%,100% 50%,90% 100%,0% 100%);
	}

	#block2 h2{
		font-size:28px;
		padding:20px 20px 0px 240px;
	}

	#block2 h3{
		font-size:22px;
		padding:10px 20px 0px 240px;
	}
}

@media(max-width:950px){
	#bg2{
		padding:100px 0px;
	}

	#block2{
		width:600px;
	}

	#block2 h1{
		width:90%;
		font-size:40px;
		border-top:4px solid #00588e;
		border-bottom:4px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block2 h1 span{
		font-size:30px;
	}

	#block2 div{
		width:100%;
		height:140px;
		border-top-right-radius:8px;
		border-bottom-right-radius:8px;
		margin-top:20px;
	}

	#block2 img{
		top:0px;
		left:0px;
		height:140px;
		clip-path:polygon(0% 0%,90% 0%,100% 50%,90% 100%,0% 100%);
	}

	#block2 h2{
		font-size:26px;
		padding:10px 10px 0px 190px;
	}

	#block2 h3{
		font-size:20px;
		padding:5px 10px 0px 190px;
	}
}

@media(max-width:650px){
	#bg2{
		padding:80px 0px;
	}

	#block2{
		width:98%;
	}

	#block2 h1{
		width:90%;
		font-size:30px;
		border-top:2px solid #00588e;
		border-bottom:2px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block2 h1 span{
		font-size:24px;
	}

	#block2 div{
		width:100%;
		height:140px;
		border-top-right-radius:8px;
		border-bottom-right-radius:8px;
		margin-top:20px;
	}

	#block2 img{
		top:0px;
		left:-20px;
		height:140px;
		clip-path:polygon(0% 0%,80% 0%,90% 50%,80% 100%,0% 100%);
	}

	#block2 h2{
		font-size:22px;
		padding:4px 4px 0px 140px;
	}

	#block2 h3{
		font-size:18px;
		padding:2px 4px 0px 140px;
	}
}

@media(max-width:400px){
	#bg2{
		padding:80px 0px;
	}

	#block2{
		width:98%;
	}

	#block2 h1{
		width:90%;
		font-size:28px;
		border-top:2px solid #00588e;
		border-bottom:2px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block2 h1 span{
		font-size:22px;
	}

	#block2 div{
		width:100%;
		height:140px;
		border-top-right-radius:8px;
		border-bottom-right-radius:8px;
		margin-top:20px;
	}

	#block2 img{
		top:0px;
		left:-30px;
		height:140px;
		clip-path:polygon(0% 0%,70% 0%,80% 50%,70% 100%,0% 100%);
	}

	#block2 h2{
		font-size:20px;
		padding:4px 4px 0px 110px;
	}

	#block2 h3{
		font-size:16px;
		padding:2px 4px 0px 110px;
	}
}

#bg3{
	position:relative;
	background:url('../img/bg1.png'),#22d0ff;
	padding:100px 0px;
	z-index:1;
}

#block3{
	width:1200px;
	margin:0px auto;
	flex-wrap:wrap;
	display:flex;
}

#block3 h1{
	width:900px;
	color:#ffffff;
	font-size:50px;
	font-weight:bold;
	text-align:center;
	border-top:4px solid #ffffff;
	border-bottom:4px solid #ffffff;
	padding:10px 0px;
	margin:0px auto 20px auto;
}

#block3 div{
	width:360px;
	position:relative;
	background:#e6f8ff;
	border-radius:6px;
	padding:10px;
	padding-top:70px;
	margin:20px auto 0px auto;
}

#block3 div:last-child{
	background:transparent;
}

#block3 div img{
	width:160px;
	margin:0px auto;
	display:block;
}

#block3 div h2{
	color:#00476b;
	font-size:28px;
	font-weight:bold;
	text-align:center;
	margin-top:12px;
}

#block3 div h3 ol li{
	color:#00476b;
	font-size:22px;
	font-weight:500;
	letter-spacing:2px;
	list-style-type:square;
	margin:12px 0px 12px 24px;
}

#block3 div h3 ol li span{
	color:#e20000;
}

#block3 div button{
	top:20px;
	right:20px;
	position:absolute;
	color:#00476b;
	background:#ffffff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	border:2px solid #00476b;
	border-radius:4px;
	padding:6px;
	cursor:pointer;
	transition:0.2s;
}

#block3 div button:hover{
	color:#ffffff;
	background:#00476b;
	transition:0.2s;
}

#block3 div button i{
	font-size:24px;
	margin-right:4px;
}

@media(max-width:1250px){
	#bg3{
		padding:100px 0px;
	}

	#block3{
		width:900px;
	}

	#block3 h1{
		width:600px;
		font-size:40px;
		border-top:4px solid #ffffff;
		border-bottom:4px solid #ffffff;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block3 div{
		width:400px;
		border-radius:6px;
		padding:10px;
		padding-top:70px;
		margin:20px auto 0px auto;
	}

	#block3 div:last-child{
		display:none;
	}

	#block3 div img{
		width:160px;
	}

	#block3 div h2{
		font-size:28px;
		margin-top:12px;
	}

	#block3 div h3 ol li{
		font-size:22px;
		letter-spacing:2px;
		margin:12px 0px 12px 24px;
	}

	#block3 div button{
		top:20px;
		right:20px;
		font-size:20px;
		border:2px solid #00476b;
		border-radius:4px;
		padding:6px;
	}

	#block3 div button i{
		font-size:24px;
		margin-right:4px;
	}
}

@media(max-width:950px){
	#bg3{
		padding:100px 0px;
	}

	#block3{
		width:600px;
	}

	#block3 h1{
		width:90%;
		font-size:40px;
		border-top:4px solid #ffffff;
		border-bottom:4px solid #ffffff;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block3 div{
		width:260px;
		border-radius:6px;
		padding:10px;
		padding-top:80px;
		margin:20px auto 0px auto;
	}

	#block3 div:last-child{
		display:none;
	}

	#block3 div img{
		width:160px;
	}

	#block3 div h2{
		font-size:24px;
		margin-top:12px;
	}

	#block3 div h3 ol li{
		font-size:20px;
		letter-spacing:2px;
		margin:12px 0px 12px 24px;
	}

	#block3 div button{
		top:20px;
		right:20px;
		font-size:20px;
		border:2px solid #00476b;
		border-radius:4px;
		padding:6px;
	}

	#block3 div button i{
		font-size:24px;
		margin-right:4px;
	}
}

@media(max-width:650px){
	#bg3{
		padding:80px 0px;
	}

	#block3{
		width:98%;
	}

	#block3 h1{
		width:90%;
		font-size:30px;
		border-top:2px solid #ffffff;
		border-bottom:2px solid #ffffff;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block3 div{
		width:100%;
		border-radius:6px;
		padding:10px;
		padding-top:80px;
		margin:20px auto 0px auto;
	}

	#block3 div:last-child{
		display:none;
	}

	#block3 div img{
		width:160px;
	}

	#block3 div h2{
		font-size:24px;
		margin-top:12px;
	}

	#block3 div h3 ol li{
		font-size:20px;
		letter-spacing:2px;
		margin:12px 0px 12px 24px;
	}

	#block3 div button{
		top:20px;
		right:20px;
		font-size:20px;
		border:2px solid #00476b;
		border-radius:4px;
		padding:6px;
	}

	#block3 div button i{
		font-size:24px;
		margin-right:4px;
	}
}

@media(max-width:400px){
	#bg3{
		padding:80px 0px;
	}

	#block3{
		width:98%;
	}

	#block3 h1{
		width:90%;
		font-size:28px;
		border-top:2px solid #ffffff;
		border-bottom:2px solid #ffffff;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block3 div{
		width:100%;
		border-radius:6px;
		padding:10px;
		padding-top:80px;
		margin:20px auto 0px auto;
	}

	#block3 div:last-child{
		display:none;
	}

	#block3 div img{
		width:140px;
	}

	#block3 div h2{
		font-size:22px;
		margin-top:12px;
	}

	#block3 div h3 ol li{
		font-size:18px;
		letter-spacing:2px;
		margin:12px 0px 12px 24px;
	}

	#block3 div button{
		top:20px;
		right:20px;
		font-size:20px;
		border:2px solid #00476b;
		border-radius:4px;
		padding:6px;
	}

	#block3 div button i{
		font-size:22px;
		margin-right:4px;
	}
}

#bg4{
	position:relative;
	background:#abedff;
	padding:100px 0px;
}

#block4{
	width:1200px;
	position:relative;
	margin:0px auto;
	flex-wrap:wrap;
	display:flex;
	z-index:1;
}

#block4 h1{
	width:900px;
	color:#00588e;
	font-size:50px;
	font-weight:bold;
	text-align:center;
	border-top:4px solid #00588e;
	border-bottom:4px solid #00588e;
	padding:10px 0px;
	margin:0px auto 20px auto;
}

#block4 div{
	width:360px;
	background:#ffffff;
	border-radius:12px;
	margin:20px auto 0px auto;
	overflow:hidden;
}

#block4 h2{
	width:100%;
	color:#00588e;
	font-size:32px;
	text-align:center;
	margin:20px 0px;
}

#block4 h2 span{
	color:#ffffff;
	border-radius:4px;
	padding:0px 10px;
	margin:0px 10px;
}

#block4 div h3{
	color:#ffffff;
	font-size:28px;
	font-weight:bold;
	text-align:center;
	padding:10px 0px;
}

#block4 div img{
	width:240px;
	margin:10px auto;
	display:block;
}

#block4 div h4{
	color:#000000;
	font-size:24px;
	font-weight:500;
	text-align:center;
	line-height:30px;
	letter-spacing:1px;
	padding:0px 0px 10px 0px;
}

.textcolor1{
	background:#d80024;
}

.textcolor2{
	background:#008cff;
}

.textcolor3{
	background:#10b2a2;
}

.divcolor1{
	border:2px solid #d80024;
}

.divcolor2{
	border:2px solid #008cff;
}

.divcolor3{
	border:2px solid #10b2a2;
}

@media(max-width:1250px){
	#bg4{
		padding:100px 0px;
	}

	#block4{
		width:900px;
	}

	#block4 h1{
		width:600px;
		font-size:40px;
		border-top:4px solid #00588e;
		border-bottom:4px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block4 div{
		width:260px;
		border-radius:12px;
		margin:20px auto 0px auto;
	}

	#block4 h2{
		font-size:28px;
		margin:20px 0px;
	}

	#block4 h2 span{
		border-radius:4px;
		padding:0px 10px;
		margin:0px 10px;
	}

	#block4 div h3{
		font-size:24px;
		padding:10px 0px;
	}

	#block4 div img{
		width:200px;
		margin:10px auto;
	}

	#block4 div h4{
		font-size:20px;
		line-height:30px;
		letter-spacing:1px;
		padding:0px 0px 10px 0px;
	}
}

@media(max-width:950px){
	#bg4{
		padding:100px 0px;
	}

	#block4{
		width:600px;
	}

	#block4 h1{
		width:90%;
		font-size:40px;
		border-top:4px solid #00588e;
		border-bottom:4px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block4 div{
		width:180px;
		border-radius:12px;
		margin:20px auto 0px auto;
	}

	#block4 h2{
		font-size:28px;
		line-height:48px;
		margin:8px 0px;
	}

	#block4 h2 span{
		border-radius:4px;
		padding:0px 10px;
		margin:0px 10px;
	}

	#block4 div h3{
		font-size:24px;
		padding:10px 0px;
	}

	#block4 div img{
		width:140px;
		margin:10px auto;
	}

	#block4 div h4{
		font-size:20px;
		line-height:30px;
		letter-spacing:1px;
		padding:0px 0px 10px 0px;
	}
}

@media(max-width:650px){
	#bg4{
		padding:80px 0px;
	}

	#block4{
		width:98%;
	}

	#block4 h1{
		width:90%;
		font-size:30px;
		border-top:2px solid #00588e;
		border-bottom:2px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block4 div{
		width:100%;
		border-radius:12px;
		margin:20px auto 0px auto;
	}

	#block4 h2{
		font-size:24px;
		line-height:40px;
		margin:8px 0px;
	}

	#block4 h2 span{
		border-radius:4px;
		padding:0px 10px;
		margin:0px 10px;
	}

	#block4 div h3{
		font-size:24px;
		padding:10px 0px;
	}

	#block4 div img{
		width:160px;
		margin:10px auto;
	}

	#block4 div h4{
		font-size:20px;
		line-height:30px;
		letter-spacing:1px;
		padding:0px 0px 10px 0px;
	}

	.br2{
		display:inline;
	}
}

@media(max-width:400px){
	#bg4{
		padding:80px 0px;
	}

	#block4{
		width:98%;
	}

	#block4 h1{
		width:90%;
		font-size:28px;
		border-top:2px solid #00588e;
		border-bottom:2px solid #00588e;
		padding:10px 0px;
		margin:0px auto 20px auto;
	}

	#block4 div{
		width:100%;
		border-radius:12px;
		margin:20px auto 0px auto;
	}

	#block4 h2{
		font-size:22px;
		line-height:36px;
		margin:0px 0px;
	}

	#block4 h2 span{
		border-radius:4px;
		padding:0px 10px;
		margin:0px 4px;
	}

	#block4 div h3{
		font-size:20px;
		padding:10px 0px;
	}

	#block4 div img{
		width:160px;
		margin:10px auto;
	}

	#block4 div h4{
		font-size:18px;
		line-height:30px;
		letter-spacing:1px;
		padding:0px 0px 10px 0px;
	}

	.br2{
		display:inline;
	}
}

#top{
	bottom:20px;
	right:20px;
	position:fixed;
	color:#ffffff;
	background:#004f84;
	font-size:18px;
	text-align:center;
	line-height:1.2;
	border-radius:100%;
	padding:11px 17px;
	cursor:pointer;
	z-index:10;
}

#line{
	bottom:95px;
	right:20px;
	position:fixed;
	color:#ffffff;
	background:#ff8b00;
	font-size:20px;
	text-align:center;
	line-height:1.2;
	border-radius:100%;
	padding:10px 15px;
	cursor:pointer;
	transition:bottom 0.2s,background 0.2s;
	z-index:10;
}

#line:hover{
	bottom:100px;
	background:#b20000;
}

@media(max-width:650px){
	#top{
		bottom:10px;
		right:10px;
		font-size:14px;
		line-height:1.2;
		padding:8px 12px;
	}

	#line{
		bottom:70px;
		right:10px;
		font-size:16px;
		line-height:1.2;
		padding:7px 11px;
	}

	#line:hover{
		bottom:75px;
		background:#b20000;
	}
}

.iframe{
	width:100%;
	position:relative;
	background:#99ccff;
	padding:7vh 0px;
	z-index:1;
}

.iframe .ifr{
	width:95%;
	max-width:1000px;
	background:#ffffff;
	border-radius:30px;
	margin:2vh auto;
}

.iframe .imgbox{
	justify-content:center;
	display:flex;
	flex-wrap:wrap;
}

.iframe .imgbox img{
	margin:1vh 1vw;
	transition:0.2s;
} 

.iframe .imgbox img:hover{
	transform:rotate(-3deg);
}

@media all and (max-width:767px){
	.iframe .iframe-title img{
		width:65%;
	}
}

footer{
	bottom:0px;
	position:relative;
	color:#ffffff;
	background:#0066cc;
	line-height:1.8;
	padding:40px 0px;
	z-index:1;
}

footer div{
	width:100%;
	margin:0px auto;
}

footer div article{
	width:500px;
	text-align:center;
	margin:0px auto;
}

footer h1{
	font-size:28px;
	font-weight:bold;
	text-align:center;
}

footer h2{
	font-size:54px;
	font-weight:bold;
	text-align:center;
}

footer h3{
	font-size:32px;
	font-weight:bold;
	text-align:center;
	border-top:2px solid;
	border-bottom:2px solid;
	padding:10px 0px;
	margin:10px 0px;
}

footer a,footer a:hover{
	color:#ffffff;
}

footer i{
	font-size:40px;
	text-align:center;
	margin:12px 12px;
}

footer h4{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	margin-top:20px;
}

.footerbr{
	display:none;
}

@media(max-width:1000px){
	footer h4 span{
		display:none;
	}

	.footerbr{
		display:inline;
	}
}

@media(max-width:600px){
	footer div{
		width:98%;
	}

	footer div article{
		width:100%;
	}

	footer h1{
		font-size:22px;
		font-weight:500;
	}

	footer h2{
		font-size:36px;
	}

	footer h3{
		font-size:22px;
		font-weight:500;
	}

	footer h4{
		font-size:15px;
		font-weight:500;
	}
}