body {
  padding: 0px;
  margin: 0px;
  background-color: rgb(246, 245, 246);
}

#banner-bg {
  background-color: rgb(240, 140, 135);
  width: 100%;
  overflow: hidden;
}
#banner {
  background-color: rgb(240, 140, 135);
  min-width: 360px;
}

#banner-logo-container {
  max-width: 1210px;
  /* min-width: 480px; */
  margin: 0 auto;
  position: relative;
  text-align: left;
  padding: 16px 0px 12px;

}


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 1210px;
  margin: 30px auto;
  padding: 0 10px 20px 32px; /* 為了在頁面左右兩側保留間距 */
  row-gap: 32px;
  column-gap: 8px;
}

#centralize-menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}


.donation-menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* column-gap: 8px;
  row-gap: 6px; */
  /* max-width: 1050px; */
  width: 1210px;
  padding: 30px 10px 24px; 
  line-height: 35px;
  margin: 0px auto;
}

.donation-menu-link {
  width: 120px;
  padding: 8px;
  background-color:rgba(208, 208, 208, 0.2);
  border-radius: 28px;
  height: 28px;
  border: solid 1px rgba(150, 150, 150, 0.5);
  color:rgba(78, 78, 78, 1);
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
  margin-left: 6px;
  margin-right: 6px;
}


.donation-activated-menu-link {
  width: 120px;
  padding: 8px;
  background-color:rgb(214, 107, 107);
  border-radius: 28px;
  height: 28px;
  border: none;
  color:rgb(255, 235, 235);
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
  margin-left: 6px;
  margin-right: 6px;
  cursor: default;
}


.donation-menu-link:hover {
  width: 120px;
  padding: 8px;
  background-color:rgba(255, 155, 155, 0.81);
  border-radius: 28px;
  height: 28px;
  border: solid 1px rgba(150, 150, 150, 0.5);
  color:rgba(78, 78, 78, 1);
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
}



/* 基本樣式 */
.box {
  width: 360px;
  height: 450px;
  background-color: white;
  box-sizing: border-box;
  padding: 22px 28px;
  position: relative;
  text-align: left;
  /* margin: 30px 22px; */
  border-radius: 9px;
  box-shadow: 10px 10px 18px -1px rgba(150, 150, 150, 0.5);
  -webkit-box-shadow: 10px 10px 18px -1px rgba(150, 150, 150, 0.5);
  -moz-box-shadow: 10px 10px 18px -1px rgba(150, 150, 150, 0.5);
}

.option-title {
  color:rgb(74, 53, 44);
  font-size: 22pt;
  font-weight: 700;
  margin-top: 12px;
}


.option-notes {
  font-size: 12pt;
  font-weight: 600;
  color: rgb(94, 80, 60);
  margin-top: 20px;
}

.option-notes .value {
  color: rgb(213, 124, 124) !important;
}

.option-doc:link {
  position: absolute; /* 絕對定位相對於它的最近的定位祖先元素 */
  bottom: 90px; 
  right: 80px;
  color:rgb(74, 53, 44);
  font-size: 11pt;
  font-weight: 300;
  text-decoration: none;
}
.option-doc:visited {
  position: absolute; /* 絕對定位相對於它的最近的定位祖先元素 */
  bottom: 90px; 
  right: 80px;
  color:rgb(74, 53, 44);
  font-size: 11pt;
  font-weight: 300;
  text-decoration: none;
}
.option-doc:hover {
  position: absolute; /* 絕對定位相對於它的最近的定位祖先元素 */
  bottom: 90px; 
  right: 80px;
  color:rgb(107, 83, 72);
  font-size: 11pt;
  font-weight: 400;
  text-decoration: underline;
}

.additional-links a:link {
  color:rgb(74, 53, 44);
  font-size: 11pt;
  font-weight: 400;
  text-decoration: none;
}
.additional-links a:visited {
  color:rgb(74, 53, 44);
  font-size: 11pt;
  font-weight: 400;
  text-decoration: none;
}

.caption {
  position: absolute; /* 絕對定位相對於它的最近的定位祖先元素 */
  bottom: 36px; /* 距離底部30px */
  left: 10px; /* 靠左 */
  margin-left: 24px; /* 靠左但有一個小間距 */
}


.caption a:link {
  color:rgb(74, 53, 44);
  font-size: 12pt;
  font-weight: 300;
  text-decoration: none;
}
.caption a:visited {
  color:rgb(74, 53, 44);
  font-size: 12pt;
  font-weight: 300;
  text-decoration: none;
}

.caption a:hover {
  color:rgb(114, 47, 19);
  font-size: 12pt;
  font-weight: 500;
  text-decoration: underline !important;
}
.bank-list {
  position: relative;
  padding-top: 30px;
  text-align: center;
}

.link-btn{
  width: 220px;
  padding: 6px 6px 6px 20px;
  background-color:rgb(74, 53, 44);
  border-radius: 28px;
  height: 28px;
  color:rgb(251, 254, 240);
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  text-decoration: none;

}

.online-pay-by-credit-card {
  position: absolute;
  top: 256px;

}

.download-credit-auth-doc {
  position: absolute;
  top: 305px;

}

.online-payment {
  position: absolute;
  top: 346px;

}

.one-time {
  font-size: 11pt;
  padding-top: 8px;
  width: 60px;
  height: 32px;
  color: rgb(74, 53, 44);
  background-color: antiquewhite;
  border-radius: 22px;
  position: absolute;
  top: 0px;
  left: -2px;
  line-height: 24px;
}

.interval {
  font-size: 12pt;
  width: 40px;
  height: 24px;
  color: rgb(74, 53, 44);
  background-color: antiquewhite;
  border-radius: 20px;
  position: absolute;
  top: 12px;
  left: 10px;
}

.link-btn:link{
  text-decoration: none;

}



@media (min-width: 890px) and (max-width: 1280px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 840px;
    margin: 30px auto;
  }



  .donation-menu-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 8px;
    row-gap: 6px;
    width: 540px;
    padding: 30px 10px 24px; 
  }


  #banner-logo-container {
    width: 840px;
  }

  .link-btn{
    font-size: 12pt !important;
    width: 240px !important;
  }

}



@media (min-width: 450px) and (max-width: 890px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    width: 420px;
    margin: 30px auto;
  }
  .donation-menu-container {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    column-gap: 8px;
    row-gap: 6px;
    width: 360px;
    padding: 30px 10px 24px; 
  }
  .link-btn{
    font-size: 10pt !important;
    width: 200px !important;
  }

  #banner-logo-container {
    width: 450px;
  }

}


@media (max-width: 449px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    width: 360px;
    margin: 30px auto;
  }
  .donation-menu-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    row-gap: 6px;
    width: 300px;
    padding: 30px 10px 24px; 
  }

  .link-btn{
    font-size: 10pt !important;
    width: 200px !important;
  }



  .box {
    width: 320px;
    height: 450px;

  }


  .option-notes {
    font-size: 11pt;
    font-weight: 600;
  }

}