.body {
   margin: 0;
   padding: 0;
   background: #f5f5f5;
   height: 100vh;
 }

 .backgroundimage {
   width: 50%;
   height: 100%;
   position: absolute;
   z-index: -1;
 }

 #bg2{
  right: 0%;
 }

 .logo {
   position: absolute;
   width: auto;
   top: 2%;
   left: 3%;
 }

 .logo img {
   width: 25%;
 }

 .main_text {
   position: absolute;
   width: 40%;
   /*width: auto;*/
   margin-right: 16px;
   left: 55%;
   /*left: 60%;*/
   height: 90%;
   margin-top: 15px;
   display: grid;
   justify-items: center;
   grid-template-rows: 10% 6% 78% 4%;
   top: 7%;
   margin: 0;
 }

 .title {
   display: flex;
   align-items: center;
 }

 .title_tag {
   width: 35px;
   height: 65px;
   background-color: #56d1e0;
   text-align: center;
   border-radius: 0.25rem;
   font-size: 20px;
   margin: 20px 0px 20px 0px;
   display: flex;
   align-items: center;
 }

 .title_content {
   margin: 0 0 0 10px;
   font-size: 45px;
   font-weight: 600;
 }

 .caption {
   max-width: 280px;
   margin-left: 10%;
 }

 .caption p {
   margin: 0;
   font-size: 25px;
 }

 .button_container {
   display: grid;
   grid-template-columns: repeat(2, 230px);
   /*grid-template-rows: repeat(2, 230px);*/
   grid-template-rows: 230px 245px 30px;
 }

 /* 按鈕基本樣式 */
 button {
   border: none;
   border-radius: 0.4rem;
   font-size: 20px;
   color: white;
   font-weight: 600;
 }

 .button_container p {
   margin: 0;
   display: inline-block;
   font-size: 15px;
 }

 .button_container a {
   text-decoration: none;
   text-align: center;
   margin-top: 0px;
 }

 button.e {
   background-color: #f9ca06;
   cursor: pointer;
   width: 100%;
 }

 button.j {
   background-color: #27cbd8;
   cursor: pointer;
   width: 100%;
 }

 button.download {
   background-color: #efa707;
   width: 100%;
   text-align: center;
   position: relative;
   cursor: pointer;
 }

 button.download:hover {
   filter: brightness(95%);
 }

 /* 按鈕點擊樣式 */
 button:active {
   background-color: #c0c0c0;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
 }

 button:hover {
   filter: brightness(95%);
 }

 .button_grid {
   display: grid;
   grid-template-rows: 90% 10%;
   border-style: solid;
   border-width: 4px;
   border-radius: 10px;
   border-color: #e7cd7d;
   background-color: #f7eeaf;
   margin: 20px 5px 20px 5px;
   align-items: center;
   justify-items: center;
   padding: 10px;
   aspect-ratio: 1/1;
 }

 .button_grid2:hover {
   cursor: pointer;
 }

 .button_grid_div1 {
   display: grid;
   grid-template-columns: 35% 65%;
 }

 .button_grid_div2 {
   width: 90%;
 }

 .button_grid_div3 {
   width: 100%;
   display: flex;
   justify-content: space-between;
 }

 .button_grid_div3 a {
   width: 45%;
 }

 .button_grid h2 {
   margin-bottom: 0px;
   margin-top: 0px;
 }

 .button_grid h4 {
   margin: 0;
 }

 footer {
   background-color: rgb(86, 209, 224);
   position: fixed;
   bottom: 0px;
   width: 100%;
   text-align: center;
 }

 /*footer small {
   cursor: pointer;
 }*/

 .d-none{
  display: none;
 }

 #to_oldpage{
  /*width: 100%;*/
  width: 200%;
 }

 #to_oldpage button{
  background-color: #27cbd8;
  cursor: pointer;
  width: 100%;
 }

 /* RWD */
 @media screen and (max-width: 1200px) {
   button {
     margin: 0px 10px 0px 0px;
     width: 100%;
   }
 }

 @media screen and (max-width: 1110px) {
   .button_container {
     grid-template-columns: repeat(2, 230px);
     /*grid-template-rows: repeat(2, 230px);*/
     grid-template-rows: 230px 245px 30px;
   }
 }

 @media screen and (max-width: 1024px) {
   #bg1 {
     display: none;
   }
   #bg2 {
    display: none;
  }

   .backgroundimage {
     width: 100%;
   }

   .body{
    background-image: url(images/bg2.jpg);
    background-size: 100%;
  }

   .main_text {
     width: 100%;
     left: 0;
     height: auto;
     grid-template-rows: 10% 6% 87% 10%
   }

   .button_container {
     margin-top: 0;
     grid-template-columns: repeat(2, 250px);
     /*grid-template-rows: repeat(2, 250px);*/
     grid-template-rows: 250px 270px 30px;
   }

   /*#to_oldpage{
    width: 50%;
   }*/

   button {
     margin: 0px 10px 0px 0px;
     width: 100%;
     margin-top: 0;
   }

   .caption {
     margin-left: 55px;
   }
 }

 @media screen and (max-width: 600px) {
   .logo img {
     width: 40%;
   }
 }

 @media screen and (max-width: 500px) {
   .main_text {
     height: auto;
     grid-template-rows: 10% 6% 87% 10%
   }

   .button_container {
     grid-template-columns: repeat(1, 250px);
     grid-template-rows: 270px 270px 270px 270px 45px
   }

   #to_oldpage{
    width: 100%;
   }

   #to_oldpage button{
    height: 65%;
   }
 }

 @media screen and (max-width: 280px) {
   .title_content {
     font-size: 35px;
   }
 }

@media screen and (max-height: 350px){
  .button_container{
    grid-template-rows: repeat(2, 220px);
  }
}