@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
}
@font-face {
	font-family: Arial, 'Noto Sans TC';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}
h1, h2, h3, h4, h5, h6, p {
	font-size: 100%;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
body {
	font-size: 16px;
	font-family: arial,"Noto Sans TC", "sans", "sans-serif";/*	background-image: url(../images/bg.jpg);*/
}
.wrapper {
	position: relative;
	background-image: url(images/banner002.jpg);
	overflow: hidden;
}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.move {
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.NO {
	display: none;
}
/* wow進場後額外繼續輪播的動畫 */
.myAni {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.myAni.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.myAni.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
.myAni.infinite.pulse {
	/*animation-delay: 2s;*/
	-webkit-animation-name: pulse !important;
	animation-name: pulse !important;
}
/*表頭表尾 請勿------------------------------------砍*/
.top, .footer {
	line-height: 0px;
	width: 100%;
}
.top, .footer {
	z-index: 99;
	position: relative;
}
/*很多物件通用*/

.width1280 {
	max-width: 1280px;
	min-width: 280px;
	height: auto;
	margin: 0 auto;
}
.width1280_2 {
	max-width: 1280px;
	min-width: 280px;
	/*padding:10% 0;*/
	height: auto;
	margin: 40px auto;
}
#bzone h1{
	font-size: 36px;
	font-weight: 600;
    text-align: center;
	color: #feffd7;
	margin: 2% 0 0 0 ;	
	letter-spacing: 1px;
	padding: 0 3%;
}
#bzone h3{
	font-size: 20px;
    text-align: center;
	color: #FFFFFF;
	margin: 0 0 4% 0;
	letter-spacing: 1px;
}
#bzone h6{
	font-size: 14px;
    text-align: center;
	color: hsla(0,0%,100%,0.80);
	letter-spacing: 1px;
	font-weight: 100;
	padding: 0 3%;
}
#bzone P{
	font-size: 24px;
	padding: 0 12%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: center;
	letter-spacing: 1px;
}

#bzone img{
	margin-bottom: 20px;
	padding: 0 5%;
}
#bzone ul {
	list-style-image: url("../images/li.png");
	font-size: 19px;
	padding: 0 0 0 22%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: left;
	letter-spacing: 1px;
	line-height: 50px;
}
#czone h1{
	font-size: 36px;
	font-weight: 600;
	color: #2a2a2a;
	margin: 2% 0 3% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

/*
#dzone h1{
	font-size: 36px;
	color: #fff;
	margin-bottom: 5%;
	
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}
	

#dzone img{
	margin-bottom: 40px;
	padding: 0 6%;
}
#ezone h1{
	font-size: 36px;
	color: #fffb8a;
	text-align: center;
	margin: 5% 0 5% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

#ezone h3{
	font-size: 24px;
    text-align: center;
	color: #fff;
	margin: 0 0 15% 0;
	letter-spacing: 1px;
}
#ezone img{
	margin-bottom: 20px;
	
padding: 0 6%;
}
*/

#fzone h1{
	font-size: 36px;
	font-weight: 600;
	color: #222222;
	margin:2% 0 5% 0;
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}

#fzone h3{
	position: relative;
	font-size: 24px;
    text-align: center;
	color: #222222;
	margin: 5% 0;
	letter-spacing: 1px;
}
#fzone h3 span{
	font-size: 30px;
	letter-spacing: 1px;
}
#fzone h3::before{
	content: "";
	display: inline-block;
	background-color:#222222;
	width: 280px;
	height: 1px;
	position: absolute;
	top:40px;
	left:calc(50% - 140px);
	margin-top: 2.5%;
}

#fzone img{	
	padding: 0 6%;
	max-width:300px; 
	min-width: 250px;
	width: 80%;
}
#fzone P{
	font-size: 18px;
	padding: 0 12%;
	color: #222222;
	margin-bottom: 15%;
	letter-spacing: 1px;
	text-align: center;
/*	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);*/
}

#filltheform p{
	text-align: left;
	font-size: 20px;
	padding: 0 1%;
	color: #1e3e43;
}
.topICON {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.myButton {
	background-color: #44c767;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
	border-radius: 28px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: Arial;
	font-size: 17px;
	padding: 9px 33px;
	text-decoration: none;
}
.myButton:hover {
	background-color: #5cbf2a;
}
.myButton:active {
	position: relative;
	top: 1px;
}
/*BANNER 進場delay時間、浮動*/
.banner {
	position: relative;
	overflow: hidden;
}
img.banner001, img.banner002, img.banner003, img.banner004 {
	position: absolute;
}
img.banner_big {
	-webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
	animation-delay: 0.5s;
	-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
	animation-duration: 0.5s;
}
img.banner_min {
	-webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
	animation-delay: 0.5s;
	-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
	animation-duration: 0.5s;
}
img.banner001 {
	-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
	animation-delay: 0.7s;
}
.subtitle {
	-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
	animation-delay: 0.7s;
}
img.banner002 {
	-webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */
	animation-delay: 1.5s;
}
img.banner003 {
	-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
	animation-delay: 1s;
}
img.banner004 {
	-webkit-animation-delay: 1.3s; /* Chrome, Safari, Opera */
	animation-delay: 1.3s;
}
.bg {
	margin: 0;
	padding: 0;

	width: 100vw;
	height: 100vh;

	background-image: url(../images/bg_02.jpg);
	background-repeat: repeat;
	background-position:top;
position: fixed;
	top: 0;

}
.bg_1 {
	background-color: #fff5c6;
	
}
.bg_2 {
	background-image: url( ../images/bg_.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.bgd {
	background-color: transparent;
}
.bannerpicfull {
	display: block;
	width: 100%;
	height: auto;
}
.bannerpic1280 {
	display: none;
	width: 100%;
	height: auto;
}
.bannerpic960 {
	display: none;
	width: 100%;
	height: auto;
}
.bannerpic768 {
	display: none;
	width: 100%;
	height: auto;
}
.bannerpic480 {
	display: none;
	width: 100%;
	height: auto;
}
/*表單區*/
.fill {
	text-align: center;
	z-index: 100;
	/*padding-top: 2%;
	padding-bottom: 25px;*/
	width: 100%;
	height: auto;
	/*border-top: 15px solid #f6d258;*/
	background-image: url(../images/form_bg.jpg);
	background-repeat: repeat;
	background-position: center top;
	background-color:#fafafa;
	
}
.fill2 {
	text-align: center;
	z-index: 100;
	/*padding-top: 2%;
	padding-bottom: 25px;*/
	width: 100%;
	height: auto;
	/*border-top: 15px solid #f6d258;*/
	background-image: url(../images/form_bg_blue.jpg);
	background-repeat: repeat-y;
	
}
.fill h2 {
	text-align: center;
	line-height: 25px;
	/*font-style: italic;*/
	color: #2a2a2a
}
.fill h2 .important {
	text-align: center;
	line-height: 25px;
	font-weight: bold;
	margin-top: 0px;
	font-style: italic;
	color: #f6d258
}
.fill .share {
	display: block;
	width: 280px;
	margin: 0 auto;
}
.fill .share ul {
}
.fill .share ul li {
	float: left;
	list-style: none;
	padding-left: 12px;
}
.fill #sBut {
	display: block;
	max-width: 450px;
	height: auto;
	min-width: 280px;
	margin: 0 auto;
	width: 100%
}
.fill .go_button {
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	animation-duration: 2s;
	max-width: 388px;
	height: auto;
	min-width: 89px;
	margin: 0 auto;
	width: 85%
}
.go_button2 {
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	animation-duration: 2s;
	max-width: 250px;
	min-width: 150px;
	margin-bottom:20;
	width: 60%;
	cursor: pointer;
}
.anchor_kong{
	cursor: pointer;
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	animation-duration: 2s;
}
.fill .statement {
	color: #999;
	line-height: 40px;
}
.fill .statement a {
	color: #3370b7;
	text-decoration: underline;
}
.fill .statement a:hover {
	color: #3370b7;
}
.fill .form-control {
	margin-bottom: 5px;
	
	width: 100%;
}
.subtitle { position: absolute; top: 53%; right: 19.5%; z-index: 8;}
.subtitle p { text-align: right; font-size: 1.75em; color: #535353;}
.note { font-size: 0.8em; font-weight: 200; color: #626262; text-decoration: underline; cursor: pointer;}
#note_content { font-size: 0.65em; font-weight: 200; color: #626262; display: none;}

@media (max-width: 1280px) {

.imgsmall {
	width: 60%
}
html {
	Font-size: 100%;
}
.linehight {
	display: inline-block;
}
.bannerpicfull {
	display: none;
}
.bannerpic1280 {
	display: block;
}
.bannerpic960 {
	display: none;
}
    .bannerpic768{ display: none;}
.bannerpic480 {
	display: none;
}
}
@media (min-width:1025px) and (max-width: 1240px){
    .banner001 { width: 33vw; height: auto;}    
    .subtitle p { font-size: 1.5em;}
}
/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width:1024px) {
/*BANNER*/
/*表單區*/
.banner001 {
	display: block;
	top: 11%;
	right:17%;
	z-index: 5;
max-width: 730px;
	height: auto;
	width: 34vw;
}
	.banner002 {
	display: block;
	top: 9%;
	left:32.3%;
	z-index: 5;
max-width: 290px;
	height: auto;
	width: 13vw;
}
		.banner003 {
	display: block;
	top: 70%;
	left:18%;
	z-index: 5;
max-width: 380px;
	height: auto;
	width: 20vw;
}

	
/*箭頭*/
.arrow {
	transform: rotate(0deg);
	padding-top: 50px;
}
}
	@media (min-width:1024px) and (max-width:1200px){
	#bzone ul {
	list-style-image: url("../images/li_s.png");
	font-size: 17px;
	padding: 0 0 0 15%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: left;
	letter-spacing: 1px;
	line-height: 40px;
}
	}
/*	↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果	↓↓↓↓ */
@media (max-width: 1023px) {
.banner001 {
	display: block;
	top: 11%;
	right:15%;
	z-index: 5;
max-width: 680px;
	height: auto;
	width: 34vw;
}
    .subtitle{ right: 18%;}
.subtitle p { font-size: 1.35em;}
	.banner002 {
	display: block;
	top: 8%;
	left:32.3%;
	z-index: 5;
    max-width: 290px;
	height: auto;
	width: 13vw;
}
		.banner003 {
	display: block;
	top: 68%;
	left:17.8%;
	z-index: 5;
max-width: 380px;
	height: auto;
	width: 20vw;
}
#bzone h1{
	font-size: 36px;
	font-weight: 600;
    text-align: center;
	color: #feffd7;
	margin: 2% 0 0 0;	
	letter-spacing: 1px;
	padding: 0 3%;
}
#bzone h3{
	font-size: 20px;
    text-align: center;
	color: #FFFFFF;
	margin: 0 0 4% 0;
	letter-spacing: 1px;
}
#bzone h6{
	font-size: 14px;
    text-align: center;
	color: hsla(0,0%,100%,0.80);
	letter-spacing: 1px;
	font-weight: 100;
	padding: 0 3%;
}
#bzone P{
	font-size: 24px;
	padding: 0 12%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: center;
	letter-spacing: 1px;
}

#bzone img{
	margin-bottom: 20px;
	padding: 0 5%;
}
#bzone ul {
	list-style-image: url("../images/li_s.png");
	font-size: 16px;
	padding: 0 0 0 16%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: left;
	letter-spacing: 0px;
	line-height: 40px;
}
#czone h1{
	font-size: 36px;
	font-weight: 600;
	color: #2a2a2a;
	margin: 2% 0 3% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

/*
#dzone h1{
	font-size: 36px;
	color: #fff;
	margin-bottom: 5%;
	
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}
	

#dzone img{
	margin-bottom: 40px;
	padding: 0 6%;
}
#ezone h1{
	font-size: 36px;
	color: #fffb8a;
	text-align: center;
	margin: 5% 0 5% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

#ezone h3{
	font-size: 24px;
    text-align: center;
	color: #fff;
	margin: 0 0 15% 0;
	letter-spacing: 1px;
}
#ezone img{
	margin-bottom: 20px;
	
padding: 0 6%;
}
*/

#fzone h1{
	font-size: 36px;
	font-weight: 600;
	color: #222222;
	margin:2% 0 5% 0;
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}

#fzone h3{
	position: relative;
	font-size: 20px;
	font-weight: 600;
    text-align: center;
	color: #222222;
	margin: 10% 0 5% 0;
	letter-spacing: 1px;
}
#fzone h3 span{
	font-size: 24px;
	
}
#fzone h3::before{
	content: "";
	display: inline-block;
	background-color:#222222;
	width: 220px;
	height: 1px;
	position: absolute;
	top:35px;
	left:calc(50% - 110px);
	margin-top: 2.5%;
}

#fzone img{	
	padding: 0 6%;
	max-width:300px; 
	min-width: 250px;
	width: 80%;
}
#fzone P{
	font-size: 18px;
	padding: 2% 12%;
	color: #222222;
	margin-bottom: 15%;
	letter-spacing: 1px;
	text-align: center;
/*	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);*/
}
}

@media (min-width:768px) and (max-width: 960px) {
.banner001 {
	display: block;
	top: 14%;
	right: 8%;
	z-index: 5;
max-width: 740px;
	height: auto;
	width: 45vw;
}
    .subtitle p { font-size: 1.5em;}
    .subtitle { right: 11%;}
	.banner002 {
	display: block;
	top: 12%;
	left:26%;
	z-index: 5;
    max-width: 290px;
	height: auto;
	width: 16vw;
}
		.banner003 {
	display: block;
	top: 63%;
	left:13.8%;
	z-index: 5;
max-width: 380px;
	height: auto;
	width: 27vw;
}
html {
	Font-size: 80%;
}
.imgsmall {
	width: 60%
}
.midFont {
	font-size: 1.2rem;
}
.bannerpicfull {
	display: none;
}
.bannerpic1280 {
	display: none;
}
.bannerpic960 {
	display: block;
}
    .bannerpic768{display: none;}
.bannerpic480 {
	display: none;
}
#bzone h1{
	font-size: 32px;
	font-weight: 500;
    text-align: center;
	color: #feffd7;
	margin: 2% 0 5% 0 ;	
	letter-spacing: 1px;
	padding: 0 3%;
}
#bzone h3{
	font-size: 20px;
    text-align: center;
	color: #FFFFFF;
	margin: 0 0 4% 0;
	letter-spacing: 1px;
}
#bzone h6{
	font-size: 14px;
    text-align: center;
	color: hsla(0,0%,100%,0.80);
	letter-spacing: 1px;
	font-weight: 100;
	padding: 0 3%;
}
#bzone P{
	font-size: 24px;
	padding: 0 12%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: center;
	letter-spacing: 1px;
}

#bzone img{
	margin-bottom: 20px;
	padding: 0 5%;
}
#bzone ul {
	list-style-image: url("../images/li_s.png");
	font-size: 16px;
	padding: 0 0 0 16%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: left;
	letter-spacing: 0px;
	line-height: 40px;
}
#czone h1{
	font-size: 32px;
	font-weight: 500;
	color: #2a2a2a;
	margin: 2% 0 5% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

/*
#dzone h1{
	font-size: 36px;
	color: #fff;
	margin-bottom: 5%;
	
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}
	

#dzone img{
	margin-bottom: 40px;
	padding: 0 6%;
}
#ezone h1{
	font-size: 36px;
	color: #fffb8a;
	text-align: center;
	margin: 5% 0 5% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

#ezone h3{
	font-size: 24px;
    text-align: center;
	color: #fff;
	margin: 0 0 15% 0;
	letter-spacing: 1px;
}
#ezone img{
	margin-bottom: 20px;
	
padding: 0 6%;
}
*/

#fzone h1{
	font-size: 32px;
	font-weight: 500;
	color: #222222;
	margin:2% 0 7% 0;
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}

#fzone h3{
	position: relative;
	font-size: 20px;
	font-weight: 600;
    text-align: center;
	color: #222222;
	margin: 10% 0 5% 0;
	letter-spacing: 1px;
}
#fzone h3 span{
	font-size: 24px;
	
}
#fzone h3::before{
	content: "";
	display: inline-block;
	background-color:#222222;
	width: 220px;
	height: 1px;
	position: absolute;
	top:35px;
	left:calc(50% - 110px);
	margin-top: 2.5%;
}

#fzone img{	
	padding: 0 6%;
	max-width:300px; 
	min-width: 250px;
	width: 80%;
}
#fzone P{
	font-size: 18px;
	padding: 2% 12%;
	color: #222222;
	margin-bottom: 15%;
	letter-spacing: 1px;
	text-align: center;
/*	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);*/
}
	
}

/*↓↓↓↓ *螢幕尺寸【小於】768時頁面顯示效果	↓↓↓↓ */
@media (max-width: 767px) {
    .bannerpicfull {
	display: none;
}
.bannerpic1280 {
	display: none;
}
.bannerpic960 {
	display: none;
}
    .bannerpic768{display: block;}
.bannerpic480 {
	display: none;
}
    .banner001 { top: 12%; right: 4%; width: 55vw; height: auto;}
    .subtitle { top: 65%; right: 0; width: 100%; height: auto;}
    .subtitle p { font-size: 1.6em; background-color: rgba(265,265,265,0.6); padding: 3% 6% 3% 0;}
#bzone h1{
	font-size: 30px;
	font-weight: 500;
    text-align: center;
	color: #feffd7;
	margin: 1% 0 10% 0 ;	
	letter-spacing: 1px;
	padding: 0 3%;
}
#bzone h3{
	font-size: 20px;
    text-align: center;
	color: #FFFFFF;
	margin: 0 0 4% 0;
	letter-spacing: 1px;
}
#bzone h6{
	font-size: 14px;
    text-align: center;
	color: hsla(0,0%,100%,0.80);
	letter-spacing: 1px;
	font-weight: 100;
	padding: 0 3%;
}
#bzone P{
	font-size: 24px;
	padding: 0 12%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: center;
	letter-spacing: 1px;
}

#bzone img{
	margin-bottom: 20px;
	padding: 0 5%;
}
#bzone ul {
	list-style-image: url("../images/li_s.png");
	font-size: 22px;
	color: #FFF;
/*	text-align: left;*/
	letter-spacing: 1px;
	line-height: 40px;
	padding-left: 50px;
    margin: 0 auto 7% ;
    max-width: 398px;
    width: 100%;
}
#czone h1{
	font-size: 30px;
	font-weight: 500;
	color: #2a2a2a;
	margin: 2% 0 7% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

/*
#dzone h1{
	font-size: 36px;
	color: #fff;
	margin-bottom: 5%;
	
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}
	

#dzone img{
	margin-bottom: 40px;
	padding: 0 6%;
}
#ezone h1{
	font-size: 36px;
	color: #fffb8a;
	text-align: center;
	margin: 5% 0 5% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

#ezone h3{
	font-size: 24px;
    text-align: center;
	color: #fff;
	margin: 0 0 15% 0;
	letter-spacing: 1px;
}
#ezone img{
	margin-bottom: 20px;
	
padding: 0 6%;
}
*/

#fzone h1{
	font-size: 30px;
	font-weight: 500;
	color: #222222;
	margin:1% 0 8% 0;
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}

#fzone h3{
	position: relative;
	font-size: 24px;
	font-weight: 600;
    text-align: center;
	color: #222222;
	margin: 3% 0 5% 0;
	letter-spacing: 1px;
}
#fzone h3 span{
	font-size: 30px;
	
}
#fzone h3::before{
	content: "";
	display: inline-block;
	background-color:#222222;
	width: 440px;
	height: 1px;
	position: absolute;
	top:38px;
	left:calc(50% - 220px);
	margin-top: 2.5%;
}

#fzone img{	
	padding: 0 6%;
	max-width:420px; 
	width: 80%;
}
#fzone P{
	font-size: 20px;
	padding: 0% 15%;
	color: #222222;
	margin-bottom: 10%;
	letter-spacing: 1px;
	text-align: center;
/*	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);*/
}
}
@media (min-width: 481px) and (max-width: 575px){
    .subtitle p { font-size: 1.35em;}
}
/*↓↓↓↓ 	螢幕尺寸【小於】480時頁面顯示效果	↓↓↓↓ */
@media (max-width: 480px) {
.banner001 {
	display: block;
	top: 13%;
	right: 1%;
	z-index: 5;
max-width: 692px;
	height: auto;
	width: 60vw;
}
    .subtitle{top:60%;}
    .subtitle p{font-size: 1.3em;}
	.banner002 {
	display: block;
	top: 8%;
	left:52%;
	z-index: 5;
    max-width: 290px;
	height: auto;
	width: 25vw;
}
		.banner003 {
	display: block;
	top: 54%;
	left:27%;
	z-index: 5;
max-width: 380px;
	height: auto;
	width: 50vw;
}
	.bannerpicfull {
	display: none;
}
.bannerpic1280 {
	display: none;
}
.bannerpic960 {
	display:none ;
}
    .bannerpic768 {display: none;}
.bannerpic480 {
	display: block;
}

#bzone h1{
	font-size: 30px;
	font-weight: 500;
    text-align: center;
	color: #feffd7;
	margin: 1% 0 10% 0 ;	
	letter-spacing: 1px;
	padding: 0 3%;
}
#bzone h3{
	font-size: 20px;
    text-align: center;
	color: #FFFFFF;
	margin: 0 0 4% 0;
	letter-spacing: 1px;
}
#bzone h6{
	font-size: 14px;
    text-align: center;
	color: hsla(0,0%,100%,0.80);
	letter-spacing: 1px;
	font-weight: 100;
	padding: 0 3%;
}
#bzone P{
	font-size: 24px;
	padding: 0 12%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: center;
	letter-spacing: 1px;
}

#bzone img{
	margin-bottom: 20px;
	padding: 0 5%;
}
#bzone ul {
	list-style-image: url("../images/li_s.png");
	font-size: 20px;
	color: #FFF;
/*	text-align: left;*/
	letter-spacing: 1px;
	line-height: 40px;
	padding-left: 50px;
    margin: 0 auto 15% ;
    max-width: 380px;
    width: 100%;
}
#czone h1{
	font-size: 30px;
	font-weight: 500;
	color: #2a2a2a;
	margin: 2% 0 7% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

/*
#dzone h1{
	font-size: 36px;
	color: #fff;
	margin-bottom: 5%;
	
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}
	

#dzone img{
	margin-bottom: 40px;
	padding: 0 6%;
}
#ezone h1{
	font-size: 36px;
	color: #fffb8a;
	text-align: center;
	margin: 5% 0 5% 0;
	letter-spacing: 1px;
	padding: 0 3%;
}
	

#ezone h3{
	font-size: 24px;
    text-align: center;
	color: #fff;
	margin: 0 0 15% 0;
	letter-spacing: 1px;
}
#ezone img{
	margin-bottom: 20px;
	
padding: 0 6%;
}
*/

#fzone h1{
	font-size: 30px;
	font-weight: 500;
	color: #222222;
	margin:1% 0 8% 0;
	letter-spacing: 1px;
	text-align: center;
	padding: 0 3%;
}

#fzone h3{
	position: relative;
	font-size: 24px;
	font-weight: 600;
    text-align: center;
	color: #222222;
	margin: 3% 0 5% 0;
	letter-spacing: 1px;
}
#fzone h3 span{
	font-size: 30px;
	
}
#fzone h3::before{
	content: "";
	display: inline-block;
	background-color:#222222;
	width: 300px;
	height: 1px;
	position: absolute;
	top:38px;
	left:calc(50% - 150px);
	margin-top: 2.5%;
}

#fzone img{	
	padding: 0 6%;
	max-width:420px; 
	width: 80%;
}
#fzone P{
	font-size: 20px;
	padding: 0% 10%;
	color: #222222;
	margin-bottom: 10%;
	letter-spacing: 1px;
	text-align: center;
/*	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);*/
}

}

@media (max-width: 400px) {.subtitle p {font-size: 1.2em;}}

@media (max-width: 320px) {
    .subtitle p {font-size: 1.05em;}
    .subtitle{top: 58%;}
	#bzone h1{
	font-size: 30px;
	font-weight: 500;
    text-align: center;
	color: #feffd7;
	margin: 1% 0 10% 0 ;	
	letter-spacing: 1px;
	padding: 0 3%;
}
#bzone h3{
	font-size: 20px;
    text-align: center;
	color: #FFFFFF;
	margin: 0 0 4% 0;
	letter-spacing: 1px;
}
#bzone h6{
	font-size: 14px;
    text-align: center;
	color: hsla(0,0%,100%,0.80);
	letter-spacing: 1px;
	font-weight: 100;
	padding: 0 3%;
}
#bzone P{
	font-size: 24px;
	padding: 0 12%;
	color: #FFF;
	margin-bottom: 15%;
	text-align: center;
	letter-spacing: 1px;
}

#bzone img{
	margin-bottom: 20px;
	padding: 0 5%;
}
#bzone ul {
	list-style-image: url("../images/li_s.png");
	font-size: 18px;
	color: #FFF;
/*	text-align: left;*/
	letter-spacing: 1px;
	line-height: 40px;
	padding-left: 48px;
    margin: 0 auto 15% ;
    max-width: 360px;
    width: 100%;
}
#czone h1{
	font-size: 30px;
	font-weight: 500;
	color: #2a2a2a;
	margin: 2% 0 10% 0;
	letter-spacing: 0px;
	padding: 0 3%;
}
	

#fzone h1{
	font-size: 30px;
	font-weight: 500;
	color: #222222;
	margin:1% 0 8% 0;
	letter-spacing: 0px;
	text-align: center;
	padding: 0 3%;
}

#fzone h3{
	position: relative;
	font-size: 20px;
	font-weight: 600;
    text-align: center;
	color: #222222;
	margin: 3% 0 5% 0;
	letter-spacing: 1px;
}
#fzone h3 span{
	font-size: 24px;
	
}
#fzone h3::before{
	content: "";
	display: inline-block;
	background-color:#222222;
	width: 280px;
	height: 1px;
	position: absolute;
	top:32px;
	left:calc(50% - 140px);
	margin-top: 2.5%;
}

#fzone img{	
	padding: 0 6%;
	max-width:420px; 
	width: 80%;
}
#fzone P{
	font-size: 18px;
	padding: 0% 10%;
	color: #222222;
	margin-bottom: 10%;
	letter-spacing: 1px;
	text-align: center;
/*	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);*/
}


}
/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 280px) and (max-width:959px) {

/*箭頭*/
.arrow {
	transform: rotate(90deg)
}
.font_small {
	font-size: 300%;
}
/*手機板的FOOTER------別刪除-------------------------------*/
.FOOTER_frame {
	height: 450px;
}
}

/*========================================================*/
/*↓↓↓↓ 螢幕尺寸【大於】1024時頁面顯示效果	↓↓↓↓ */
@media (min-width:1024px) {
}

@media only screen and (max-width: 1280px) {
}