body{
  position: relative;
  font-size: 30px;
  color: #231815;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #f0f0f0;
  font-family: 'Noto Sans TC', sans-serif;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}


h1,
h2,
h4,
h5,
h6,
p {
  margin: 0 !important;
  padding: 0 !important;
  /* list-style: none; */
  font-size: 1em;
}

a{
  text-decoration: none;
}

.container{max-width: 1000px !important;font-size: 30px;z-index: 10;}
/*--------------------header-------------------------------------*/
.bg_banner{
  background: url(../img/header-1.jpg) center/cover no-repeat;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 100;
}
.bg_banner img {width: 50%;margin: 0 auto; padding: 5em 0em;}
@media all and (max-width:1024px){
  .bg_banner img {width: 80%;}
}
@media all and (max-width:425px){
  .bg_banner img {width: 90%;padding:1em 0em;}
}
/*-------------------#header-------------------------------------*/

/*-----------------------car-------------------------------------*/
.planewrap{
  position:fixed;
  top:50%;
  max-width:310px;
  right:3%;
  -webkit-transition: 600ms ease;
  -moz-transition: 600ms ease;
  transition:600ms ease;
  -webkit-transform:translate(10%,-50%);
     -moz-transform:translate(10%,-50%);
      -ms-transform:translate(10%,-50%);
          transform:translate(10%,-50%);
  z-index:3;
}

.planewrap img{
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  transition:0.5s ease;
  -webkit-animation:fadein 2.7s ease infinite;
     -moz-animation:fadein 2.7s ease infinite;
          animation:fadein 2.7s ease infinite;
}

@-webkit-keyframes fadein{
  0%{
    -webkit-transform:translatey(0px);
            transform:translatey(0px);
  }
   50%{
    -webkit-transform:translatey(15px);
            transform:translatey(15px);
  }
   100%{
    -webkit-transform:translatey(0px);
            transform:translatey(0px);
  }
}

@-moz-keyframes fadein{
  0%{
    -moz-transform:translatey(0px);
         transform:translatey(0px);
  }
   50%{
    -moz-transform:translatey(15px);
         transform:translatey(15px);
  }
   100%{
    -moz-transform:translatey(0px);
         transform:translatey(0px);
  }
}

@keyframes fadein{
  0%{
    -webkit-transform:translatey(0px);
       -moz-transform:translatey(0px);
            transform:translatey(0px);
  }
   50%{
    -webkit-transform:translatey(15px);
       -moz-transform:translatey(15px);
            transform:translatey(15px);
  }
   100%{
    -webkit-transform:translatey(0px);
       -moz-transform:translatey(0px);
            transform:translatey(0px);
  }
}


.planewrap2{
  position:absolute;
  bottom:0%;
  max-width:310px;
  right:2%;
  -webkit-transform:translate(-2%,0%);
     -moz-transform:translate(-2%,0%);
      -ms-transform:translate(-2%,0%);
          transform:translate(-2%,0%);
  z-index:2;
}
.planewrap3{
  position:absolute;
  top:48%;
  max-width:310px;
  right:0%;
  -webkit-transform:translate(0%,-50%);
     -moz-transform:translate(0%,-50%);
      -ms-transform:translate(0%,-50%);
          transform:translate(0%,-50%);
  z-index:1;
  width: 10%;
}
.planewrap4{
  position:absolute;
  top:50%;
  max-width:310px;
  right:0%;
  -webkit-transform:translate(0%,-50%);
     -moz-transform:translate(0%,-50%);
      -ms-transform:translate(0%,-50%);
          transform:translate(0%,-50%);
  z-index:4;
  width: 10%;
}
/*-----------------------#car-------------------------------------*/

/*-----------------------nav-------------------------------------*/
#Sidenav {
  position: fixed;
  left: -2%;
  top: 30%;
  z-index: 101;
}
#Sidenav ul{padding: 0px;}
#Sidenav ul li{
  position:absolute;
  left: -5em;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  list-style: none;
  text-align: right;
  padding: 10px;
  min-width: 400px;
  max-width: 400px;
  font-size: 22px;
  font-weight: bold;
  border-radius: 0 5px 5px 0;
  -webkit-transform: skew(23deg);
     -moz-transform: skew(23deg);
      -ms-transform: skew(23deg);
          transform: skew(23deg);
  background: -webkit-linear-gradient(top,  #f9bc37 0%,#f7f7f7 4%,#f7f7f7 13%,#f9bc37 33%,#ed6d28 100%);
  background: -moz-linear-gradient(top,  #f9bc37 0%,#f7f7f7 4%,#f7f7f7 13%,#f9bc37 33%,#ed6d28 100%);
  background: linear-gradient(to bottom,  #f9bc37 0%,#f7f7f7 4%,#f7f7f7 13%,#f9bc37 33%,#ed6d28 100%);
  border: 2px solid #ED705D;
}
#Sidenav ul li a{
  text-decoration: none;
  color: white;
  text-shadow: 2px -2px #EA5224, -2px 2px #EA5224, -2px -2px #EA5224, 2px 2px #EA5224;
}
#Sidenav a p{
  -webkit-transform: skew(-23deg);
     -moz-transform: skew(-23deg);
      -ms-transform: skew(-23deg);
          transform: skew(-23deg);
}
#Sidenav a p br{
  display: none;
}
#Sidenav ul li:hover {
  left: -15px;
}

#n1 {top: 1em;}
#n2 {top: 4em;}
#n3 {top: 7em;}
#n4 {top: 10em;}
@media all and (max-width:1440px) {
  #Sidenav{position: relative;}
  #Sidenav ul li{
    position: unset;
    display: inline-block;
    min-width: unset;
    max-width: unset;
    width: 24%;
    text-align: center;
    font-size: 22px;
  }
  #Sidenav a p br{
    display: inline;
  }
  #Sidenav{left: 0;}
}
@media all and (max-width:425px) {
  .menu .container{padding: 0px;}
  #Sidenav ul li{
    width: 23%;
    font-size: 12px;
    -webkit-transform:none;
       -moz-transform:none;
        -ms-transform:none;
            transform:none;
    padding: 5px;
  }
  #Sidenav a p {
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
            transform: none;
  }
}


/*滑動頁面上方導覽列*/
.hide{display: none!important;}
.container-lg{font-size: 30px;}
.topmenu_bg{background-color: #9fd8e9;}
#mainNav .nav-pills .nav-link {  
  font-size: 1em;
  font-weight: bold;
  background: -webkit-linear-gradient(top,  #f9bc37 0%,#f7f7f7 4%,#f7f7f7 13%,#f9bc37 33%,#ed6d28 100%);
  background: -moz-linear-gradient(top,  #f9bc37 0%,#f7f7f7 4%,#f7f7f7 13%,#f9bc37 33%,#ed6d28 100%);
  background: linear-gradient(to bottom,  #f9bc37 0%,#f7f7f7 4%,#f7f7f7 13%,#f9bc37 33%,#ed6d28 100%);
  color: #fff;
  -webkit-transform: scale(1,1);
     -moz-transform: scale(1,1);
      -ms-transform: scale(1,1);
          transform: scale(1,1); 
  -webkit-transition: all .5s ease-out; 
  -moz-transition: all .5s ease-out; 
  transition: all .5s ease-out; 
  box-shadow: 4px 4px 5px #4f4f4f;/*陰影*/
  line-height: 1em;
  text-shadow: 2px -2px #EA5224, -2px 2px #EA5224, -2px -2px #EA5224, 2px 2px #EA5224;
}
#mainNav .nav-pills .nav-link:hover {  
    -webkit-transform: scale(.8,.8);  
       -moz-transform: scale(.8,.8);  
        -ms-transform: scale(.8,.8);  
            transform: scale(.8,.8); 
 }
#mainNav{
   padding-top: 10px;
   padding-bottom: 10px;
}


@media all and (max-width:768px){
    #mainNav .nav-pills{font-size: 25px;}
}  
@media all and (max-width:425px){
    #mainNav .nav-pills {font-size: 14px;}
    #mainNav .nav-pills .nav-link{padding: .5rem 0;}
}
@media all and (max-width:375px){
    #mainNav .nav-pills .nav-link{font-size: .9em;}
    }
/*-----------------------#nav-------------------------------------*/


/*-----------------------pt1-------------------------------------*/
.pt1{
  background: url(../img/bg-1.jpg) bottom/cover no-repeat; position: relative;
  overflow: hidden;
}
.pt1 .bgimg{
  position: absolute;
  bottom: 0%;
}
.title1{
  position: relative; 
  width: 100%;
  margin: 0 auto; 
  padding: 2em 0;
}

.title1::before{
  content: '';
  position: absolute;
  bottom: 0%;
  right: -40%;
  /* width: 12%;
  height: 100%; */
  width: 160px;
  height: 204px;
  background: url(../img/title-11.png) center/cover no-repeat;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  opacity: 0;
  z-index: 1000;
  -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}
.title1.active::before{
  opacity: 1;
  right: 0%;
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.t2:before{
  background: url(../img/title-7.png) center/cover no-repeat;
}
.t3:before{
  background: url(../img/title-8.png) center/cover no-repeat;
}

.t4:before{
  background: url(../img/title-9.png) center/cover no-repeat;
}
.t5:before{
  background: url(../img/title-10.png) center/cover no-repeat;
}

.title_text1{
  position: absolute; 
  width: 100%;
  margin: 0 auto;
  text-align: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%,-50%); 
     -moz-transform: translate(-50%,-50%); 
      -ms-transform: translate(-50%,-50%); 
          transform: translate(-50%,-50%);
  color: transparent;

}

.title_text1 h2{
  font-size: 1.5em;
}

.but{
  position: absolute;
  bottom: 0;
  right: 0;
}

.card-header{background: transparent !important; border: transparent !important;}
.card{border: transparent; border-top: 1px solid rgba(0, 0, 0,.125);}


.dow{position: relative; margin: 2em auto;}
.dowbut{position: absolute; bottom: 3em; left: 6em; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); -webkit-transition: .5s; -moz-transition: .5s; transition: .5s;}
.dowbut:hover{
  -webkit-transform: scale(1.1,1.1);
     -moz-transform: scale(1.1,1.1);
      -ms-transform: scale(1.1,1.1);
          transform: scale(1.1,1.1);
}

.tit1{position: relative; width: 80%; margin: 0 auto;}

.rem1{width: 30%; display: inline-block;}
.remind{margin: 1em auto; text-align: center;}


@media all and (max-width:1024px) {
  .pt1{padding-top: 2em;}
  .title1::before{right: 0%; bottom: 0%;}
  .title1.active::before{bottom: 0%;right: -2%;}
}
@media all and (max-width:768px) {
  
  .title_text1 h2{font-size: 1em;}
}
@media all and (max-width:425px) {
  
  .title1{padding: .5em 0;}
  .title_text1 h2{font-size: .6em;}
  .title1.active::before{display: none;}
}
/*-----------------------#pt1-------------------------------------*/

/*-----------------------pt2-------------------------------------*/
.pt2{background: url(../img/bg-2.jpg) bottom/cover no-repeat; position: relative; overflow: hidden;}
.pt2 .bgimg{
  position: absolute;
  bottom: 0%;
  right: 0%;
}

.dow2{width: 70%;position: relative;}
.dowbg{position: relative;}
.dowtext{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.dowtext p{font-size: 2em; font-weight: bold; color: #E5005A;}
.dowbut2{width: 70%;margin: 0 auto; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); -webkit-transition: .5s; -moz-transition: .5s; transition: .5s;}
.dowbut2:hover{
  -webkit-transform: scale(1.1,1.1);
     -moz-transform: scale(1.1,1.1);
      -ms-transform: scale(1.1,1.1);
          transform: scale(1.1,1.1);
}
.computer{width: 25%;  position: absolute;  top: -1em;  right: -6em;}

@media all and (max-width:1280px) {
  .dow2{width: 85%;}
  
}
@media all and (max-width:768px) {
  .dowbut{bottom: 2em; left: 4em;}

}
@media (max-width: 425px){
  .dowbut {
      width: 29%;
      bottom: 0.5em;
      left: 2em;
  }
  .dowtext {width: 60%;}
  .dowtext p{font-size: 1.4em;}
  .dowbut2{width: 50%;}
  .dow2{width: 100%;}
  .computer{display: none;}
}
/*-----------------------#pt2-------------------------------------*/


/*-----------------------pt3-------------------------------------*/
.pt3{background:#EAF6FD; position: relative;}
/*-----------------------#pt3-------------------------------------*/

/*-----------------------pt4-------------------------------------*/
.pt4{background:#BAE3F9; position: relative;}
.pt4img{
width: 80%;
margin: 0 auto;
}
.btn{
background: url(../img/but.png)center/cover no-repeat;
margin: .5em auto;
color: white !important;
font-weight: bold !important;
text-shadow: 0px 2px 2px #1D2088, 2px 0px 2px #1D2088, 0px -2px 2px #1D2088, -2px 0px 2px #1D2088 ;

-webkit-filter: drop-shadow(1px 6px 0px #7B2020);

        filter: drop-shadow(1px 6px 0px #7B2020);
-webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
        transform: translateY(0px);

display: -webkit-flex !important;

display: -moz-box !important;

display: -ms-flexbox !important;

display: flex !important;
-webkit-justify-content: center;
   -moz-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-align-items: center;
   -moz-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-flex-direction: column;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.btn h3{
  font-size: 1.5em;

}
.btn:hover{
-webkit-filter: drop-shadow(0px 0px 0px #7B2020);
        filter: drop-shadow(0px 0px 0px #7B2020);
-webkit-transform: translateY(5px);
   -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
        transform: translateY(5px);

}
@media all and (max-width: 425px){
 .btn{
  width: 168px;
  height: 54px;
 }
}
/*-----------------------#pt4-------------------------------------*/
.footertext{
font-size: 16px;
}

.FOOTER a{color: white;font-size: .5em;}
.FOOTER a:hover{color: rgb(214, 214, 214);}

/*-----------TOP按鈕------------------*/
#goTop{
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 3em;
  height: 3em;
  padding: 0.5em;
  z-index: 999;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  -webkit-animation: gotopbackchange 6s linear infinite !important;
     -moz-animation: gotopbackchange 6s linear infinite !important;
          animation: gotopbackchange 6s linear infinite !important;
}
#goTop .fas{font-family: "Font Awesome 5 Free" !important;}
@media all and (max-width: 575px){
#goTop {bottom: 4em;}
}


@-webkit-keyframes gotopbackchange{
  0%{background: rgba(255,79,79,0.7);}
  10%{background: rgba(255, 185, 79, 0.7);}
  30%{background: rgba(243, 255, 79, 0.7);}
  50%{background: rgba(120, 255, 79, 0.7);}
  70%{background: rgba(79, 229, 255, 0.7);}
  90%{background: rgba(79, 105, 255, 0.7);}
  100%{background: rgba(220, 79, 255, 0.7);}
}


@-moz-keyframes gotopbackchange{
  0%{background: rgba(255,79,79,0.7);}
  10%{background: rgba(255, 185, 79, 0.7);}
  30%{background: rgba(243, 255, 79, 0.7);}
  50%{background: rgba(120, 255, 79, 0.7);}
  70%{background: rgba(79, 229, 255, 0.7);}
  90%{background: rgba(79, 105, 255, 0.7);}
  100%{background: rgba(220, 79, 255, 0.7);}
}


@keyframes gotopbackchange{
  0%{background: rgba(255,79,79,0.7);}
  10%{background: rgba(255, 185, 79, 0.7);}
  30%{background: rgba(243, 255, 79, 0.7);}
  50%{background: rgba(120, 255, 79, 0.7);}
  70%{background: rgba(79, 229, 255, 0.7);}
  90%{background: rgba(79, 105, 255, 0.7);}
  100%{background: rgba(220, 79, 255, 0.7);}
}
/*-----------TOP按鈕------------------*/