@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;
}
/*頁首頁尾CSS共用----------------請勿砍*/
.top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 280px;
    margin-bottom: -256px;
    z-index: 9999999999999;
}

.top iframe {
    height: 280px;
}

.top + * {
    margin-top: 65px;
}

.footer {
    width: 100%;
    height: 290px;
    z-index: 9999999999999;
}

.footer iframe {
    height: 319px;
}

@media screen and (max-width: 1023px) {

    .top {
        height: 65px;
        /*margin-bottom: 405px;*/
    }

    .top iframe {
        height: 65px;
    }
  
    .footer, .footer iframe {
        height: 624px;
    }
}
/*
.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;
}
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-image: url( ../images/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  
}
.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;
}
.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%;
}


@media (max-width: 1280px) {

.imgsmall {
  width: 60%
}
html {
  Font-size: 100%;
}
.linehight {
  display: inline-block;
}
.bannerpicfull {
  display: none;
}
.bannerpic1280 {
  display: block;
}
.bannerpic960 {
  display: none;
}
.bannerpic480 {
  display: none;
}
}

/*  ↓↓↓↓  螢幕尺寸大於960時頁面顯示效果↓↓↓↓   */
@media (min-width:1024px) {
/*BANNER*/
/*表單區*/
.banner001 {
  display: block;
  top: 11%;
  left:10.5%;
  z-index: 5;
max-width: 692px;
  height: auto;
  width: 35vw;
}
  .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%;
  left:10.5%;
  z-index: 5;
max-width: 692px;
  height: auto;
  width: 35vw;
}
  .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%;
  left:2.5%;
  z-index: 5;
max-width: 692px;
  height: auto;
  width: 43vw;
}
  .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;
}
.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) {
#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);*/
}
}

/*↓↓↓↓  螢幕尺寸【小於】480時頁面顯示效果  ↓↓↓↓ */
@media (max-width: 480px) {
.banner001 {
  display: block;
  top: 9%;
  left:10%;
  z-index: 5;
max-width: 692px;
  height: auto;
  width: 80vw;
}
  .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 ;
}
.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) {}

@media (max-width: 320px) {
  #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) {
}