section{font-family: "Noto Sans TC", sans-serif;
background-color: beige;}


h2,h { font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
} 

  p{color: rgb(103, 103, 148);
  border-bottom: 2px solid rgb(31, 91, 188);;
  padding-bottom: 0.3em;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;}



header{
  background-color: rgb(31, 91, 188);
  /* Padding: 30px; */
  height: 100px;
  Position:sticky; 
  Top: 0; 
  z-index: 1;
  width:100%;  
  font-family: "Zen Maru Gothic", serif;
  }

header a{ 
  color:white;
  text-decoration: none;
  font-size: 20px;
  cursor: pointer;
  font-family: "Zen Maru Gothic", serif;}

 header a:hover{ color: bisque;
  cursor: pointer;
                 }


    header ul{
    position:absolute;
    right:5vw;
    top:0;
    line-height: 100px ;
    font-family: "Zen Maru Gothic", serif;
  }
 

  header li{
    display:inline-flex;
    margin-right: 4vw;}


  .dropdown {
  float: left;
  overflow: visible;}

  .dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: white;
    /* padding: 14px 16px; */
    background-color: inherit;
     font-family: "Zen Maru Gothic", serif; 
    /* float: left; */
    overflow: hidden;
        /* position:absolute; */
     top:0;
    margin-top: 35px; }


    .dropdown-content {
      display: none;
       position: absolute; 
  background-color: rgb(31, 91, 188);
  
      min-width: 130px;
      box-shadow: 8px 8px 16px 0px rgba(0,0,0,0.2);
      /* z-index: 3; */
      margin-top: 60px ;
      /* float: left; */
      overflow: hidden;}


      .dropdown-content a {
        font-family: "Zen Maru Gothic", serif;
        float: none;
        color:black;
        padding: 0px 0px; 
        text-decoration: none;
        display: block;
        text-align: center;
        line-height: 3 ;}

        .dropdown:hover .dropdown-content {
          display: block;
          
        }

        body{margin: 0px;}

 /* top button */ 
 #myBtn {
          display: none;
          position: fixed;
          bottom: 20px;
          right: 30px;
          z-index: 99;
          font-size: 18px;
          border: none;
          outline: none;
          background-color: rgb(31, 91, 188);
            color: white;
          cursor: pointer;
          padding: 15px;
          border-radius: 4px;
        }
        
       #myBtn:hover {
          background-color: rgb(90, 90, 192);
        }

      /* .a1{position:absolute;
         margin-left: 50px;
      } */

      .container {
        font-family: "Zen Maru Gothic", serif;
        line-height: 1.6;
        color: #333;
        max-width: 1000px;
        margin: 0 auto;
        /* padding: 20px; */
        background-color: #f0f0f0;
      }
      
      .g1 {
        position: relative;
        width: 100%;
        height: 800px;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }



    /* flower */
  .cherry-blossom{
    position: absolute;
    top: 20%;
    left: 0;
    /* right:0; */
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }

 
  @keyframes fall {
    0% { transform: translateY(-20vh) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(720deg); }
  }

  footer {
    padding: 10px;
    margin-top: 10px;
    color: #b7c8f4;
    background-color: inherit;
    text-align: center;
}

footer>p{border-bottom: none;}