*,
*::before,
*::after{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    list-style:none;
    text-decoration: none;
    font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands",'Noto Sans TC',Arial, Helvetica, sans-serif;
}

:root{
    --clr-tone-200:#0C8B6E;
    --clr-tone-300:#fff;
    --clr-footer-100:#FFCC40;
    --clr-tone-400:#2E8B57;
    --clr-tone-500:#282828;
}

body{
  background: rgb(0,146,229);
  background: linear-gradient(142deg, rgba(0,146,229,1) 0%, rgba(89,174,148,1) 72%, rgba(154,195,89,1) 93%, rgba(180,203,67,1) 100%) no-repeat;
  
}

a:link{
  color: var(--clr-tone-300);
}

a:visited{
  color: var(--clr-tone-300);
}



/*-header-*/
header{
  width: 100%;
  height: auto;
}

.header-box{
  width: 250px;
  height: 100px;
  display: flex;
  align-items: center;
  margin: auto;
  margin-bottom: 40px;
  margin-top: 20px;

}


.logo img{
  width: 100%;
  margin: auto;
}


/*-content-*/
.content{
  width: 1000px;
  height: auto;
  margin: auto;
  
}
.titlea, .mainpic{
  margin: 10px 0px;
  display: flex;
  justify-content: center;
  align-items: center; 
  padding-bottom: 10px;
}

.titlea img{
  width: 100%;
}

.titleb{
    display: none;
  }

.btn{
  width: 250px;
  height: auto;
  margin: auto;
  transition-duration: 0.4s;
  padding: 20px 0px;
}

.btn-txt{
  display: flex;
  justify-content: center;
  align-items: center; 
  border-radius: 60px;
  height: 50px;
  font-size: 1.6em;
  text-align: center;
  background-color: var(--clr-footer-100);
  color: var(--clr-tone-500);
  box-shadow: 3px 2px 4px var(--clr-tone-400);
  letter-spacing: 3px;
}


.btn-txt:hover{
  background-color: var(--clr-tone-200);
  
}

.mainpic img{
  width: 100%;
  height: auto;
}


/*-footer-*/
footer{
  width: 100%;
  height: auto;
  background-color: var(--clr-footer-100);
  text-align: center;
  
  
}

.footer-box{
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo{
  width: 200px;
  height: auto;
}
.footer-logo img{
  width: 80%;
  height: auto;
}

.footer-txt{
  width: 200px;
  height: 30px;
  display: inline-block;
  text-align: center; 
  
}

.footer-txt p{
  color: var(--clr-tone-300);
}


.fab, .far{
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Brands";
  font-weight: 900;
  color: var(--clr-tone-300);
  letter-spacing: 2px;
}


/*-ipad-*/
@media screen and (min-width: 480px) and (max-width: 1024px){ 

/*-header-*/
  header{
    width: 100%;
    height: auto;
  }
  
  .header-box{
    width: 250px;
    height: 100px;
    display: flex;
    align-items: center;
    margin: auto;
    margin-bottom: 40px;
    margin-top: 20px;
  
  }
  
  
  .logo img{
    width: 100%;
    margin: auto;
  }
  

/*-content-*/
  .content{
    width: 100%;
    height: auto;
    margin: auto;
    
  }
  .titlea, .mainpic{
    margin: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center; 
    padding-bottom: 10px;
  }

  .titlea img{
    width: 80%;
  }

  .titleb{
    display: none;
  }

  .btn{
    width: 250px;
    height: auto;
    margin: auto;
    transition-duration: 0.4s;
    padding: 20px 0px;
  }

  .btn-txt{
    display: flex;
    justify-content: center;
    align-items: center; 
    border-radius: 60px;
    height: 50px;
    font-size: 1.6em;
    text-align: center;
    background-color: var(--clr-footer-100);
    color: var(--clr-tone-500);
    box-shadow: 3px 2px 4px var(--clr-tone-400);
    letter-spacing: 3px;
  }

  .mainpic img{
    width: 80%;
    height: auto;
  }

/*-footer-*/
  footer{
    width: 100%;
    height: auto;
    background-color: var(--clr-footer-100);
    text-align: center;
    
    
  }

  .footer-box{
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-logo{
    width: 200px;
    height: auto;
  }
  .footer-logo img{
    width: 80%;
    height: auto;
  }

  .footer-txt{
    width: 200px;
    height: 30px;
    display: inline-block;
    text-align: center; 
    
  }
}

/*-mobile-*/
@media screen and (min-width: 374px) and (max-width: 479px){ 

  /*-header-*/
  header{
    width: 100%;
    height: auto;
  }
  
  .header-box{
    width: 250px;
    height: 100px;
    display: flex;
    align-items: center;
    margin: auto;
    margin-bottom: 10px;
    margin-top: 30px;
  
  }

  .logo{
    text-align: center;
  }
  
  
  .logo img{
    width: 70%;
    
  }
  

/*-content-*/
  .content{
    width: 100%;
    height: auto;
    margin: auto;
    
  }
  .titleb, .mainpic{
    margin: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center; 
    padding-bottom: 10px;
  }

  .titleb img{
    width: 60%;
  }


  .titlea{
    display: none;
  }

  .btn{
    width: 250px;
    height: auto;
    margin: auto;
    transition-duration: 0.4s;
    padding: 20px 0px;
  }

  .btn-txt{
    display: flex;
    justify-content: center;
    align-items: center; 
    border-radius: 60px;
    height: 50px;
    font-size: 1.6em;
    text-align: center;
    background-color: var(--clr-footer-100);
    color: var(--clr-tone-500);
    box-shadow: 3px 2px 4px var(--clr-tone-400);
    letter-spacing: 3px;
  }

  .mainpic img{
    width: 80%;
    height: auto;
  }

/*-footer-*/
  footer{
    width: 100%;
    height: auto;
    background-color: var(--clr-footer-100);
  }

  .footer-box{
    height: 100%;
    display: inline-block;
    padding: 20px 0px;
    
  }

  .footer-logo{
    width: 200px;
    height: auto;
    margin: auto;
    padding-bottom: 10px 0;
  }
  .footer-logo img{
    width: 80%;
    height: auto;
  }

  .footer-txt{
    width: 200px;
    height: 30px;
    display: inline-block;
    padding: 20px 0;
    
  }
}