* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Noto Sans TC', '微軟正黑體', 'MS UI Gothic', Arial, Helvetica, sans-serif;
  font-size: 12px;
}

a,
a:hover,
a:active,
a:visited {
  display: inline-block;
  color: #005bac;
  text-decoration: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table,
tr,
th,
td {
  margin: 0;
  padding: 0;
}

p {
  padding: 0;
}

img {
  margin: 0;
  padding: 0;
  display: block;
}

.main {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  color: #333333;
  padding-top: 80px;
  font-size: 12px;
  background-color: #DBEAFF;
}

.red {
  color: #F24541;
}

.section {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* overflow: hidden */
}

/* kv */
.kv_container {
  width: 100%;
  margin: 0 auto;
  background: url("../images/web_kv.png") center top no-repeat;
  background-size: cover;
  padding-bottom: 28%;
  overflow: hidden;
  position: relative;
}

.kv {
  width: 100%;
  max-width: 1400px;
  height: 480px;
  margin: 0 auto;
  position: relative;
  /* padding-bottom: 10%; */
}

.kv_tit {
  width: 48%;
  position: absolute;
  top: 15%;
  left: 10%;
  animation-name: pulse;
  animation-duration: 1s;
}

.godness {
  width: 28%;
  bottom: 0%;
  right: 10%;
  position: absolute;
  /* animation: shake 8s infinite; */
}

.money {
  width: 60%;
  bottom: -35%;
  right: -10%;
  position: absolute;
  /* animation: shake 8s infinite; */
}

.front {
  width: 100%;
  bottom: 0%;
  right: 0%;
  position: absolute;
  /* animation: shake 8s infinite; */
}

.mobOnly {
  display: none;
}

.webOnly {
  display: block;
}


/* content */
.content {
  /* border: 1px solid; */
  position: relative;
  width: 88%;
  max-width: 1100px;
  margin: 0 auto;
  /* background: #F8EADD; */
  padding: 3% 0% 3%;
  background-image: url("../images/bg_deco01.png"), url("../images/bg_deco02.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 3% 20%, 95% 90%;
  background-size: 20%, 25%;
}

/* event */
.event {
  width: 100%;
  margin: 0 auto 50px;
  text-align: center;
  line-height: 1.8;
  position: relative;
  background-color: #fff;
  border-radius: 15px;
  display: flex;

  padding: 40px 80px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}


.event_tit {
  color: #005EC4;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 120%;
}

.event_tit img {
  width: 32px;
  /* margin: 0 auto 0; */
}

.event_box {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 10px;
  align-self: stretch;
}

.tit_box {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 10px;
  align-self: stretch;
  flex-wrap: wrap;

}

.tit {
  display: block;
  min-width: 200px;
  /* justify-content: center; */
  /* align-items: center; */
  padding: 0px 20px 0px;
  border-radius: 100px;
  background: #005EC4;
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 200%;
  letter-spacing: 0.1rem;
  /* 40px */
}


.event_txt {
  color: #303030;
  text-align: left;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  /* 28px */
}

.event_txt_s {
  color: #005EC4;
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

.value {
  text-align: center;
}

.event_box ol {
  padding-left: 22px;
  list-style-type: disc;
}

.event_box ul {
  padding-left: 22px;
  list-style-type: decimal;
}

.blod {
  font-weight: 700;
}

/* table */
.table {
  font-size: 18px;
  text-align: center;
  line-height: 140%;
  font-weight: 600;
}

.table .caption {
  padding: 10px 10px;
  vertical-align: middle;
  color: #000000;
  font-size: 12px;
  background-color: #FFF;
  /* border-left: 3px solid #fff; */
  /* border-right: 3px solid #fff; */
}

.table tr .td_l {
  font-size: 28px;
}

.table tr td,
th {
  vertical-align: middle;
  /* width: 25%; */
  /* border-radius: 12px; */
  border: 3px solid #fff;
  padding: 20px 20px;
}

.table tr td {
  background-color: #E4EEFB;
  color: #005EC4;
  /* height: 50px; */
}

.table tr th {
  /* font-weight: 600; */
  background-color: #005EC4;
  color: #fff;
}

.table .red {
  color: #F24541;
}

/* notice */
.notice_container {
  background: #fff;
}

.notice {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2;
  color: #303030;
  font-weight: 400;
  padding: 3% 5% 3%;
}

.notice_all {
  padding: 2%;
  /* text-align: justify; */
}

.notice_all a {
  /* font-weight: bold; */
  text-decoration: underline;
  color: #007FE0;
}

.notice_all span.font-b {
  font-weight: bold;
  color: #fef9d9;
}

.notice_all ul {
  margin: 0;
  padding-left: 18px;
  list-style-type: cjk-ideographic;
}

.notice_all ul>li>ul {
  list-style-type: upper-alpha;
}

.notice_all ul>li>ol>li {
  list-style-type: decimal;
}

.notice_all ul>li>ol>li>ol>li {
  position: relative;
  counter-increment: section;
  left: 2%;
}

.notice_all ul>li>ol>li>ol>li::before {
  content: counter(section, lower-alpha) ".";
  position: absolute;
  top: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  list-style-type: none
}

.notice_all ul>li>ol>li>ol>li>ul {
  list-style-type: disc;
}

.notice_tit {
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 0;
  text-align: center;
  letter-spacing: 0.3em;
}

.footerCont .footer-item a {
  color: #ffffff;
  text-decoration: underline;
}

#contTab {
  display: none;
}

.content-more {
  display: none;
}

#contTab:checked~#cont {
  max-height: 250px;
  overflow: hidden;
}

#contTab:checked~.content-more {
  display: block;
  position: relative;
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
}

#contTab:checked~.content-more .gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(254, 239, 212, 0)), to(#fff));
  background-image: -webkit-linear-gradient(top, rgba(254, 239, 212, 0), #fff);
  background-image: linear-gradient(-180deg, rgba(254, 239, 212, 0), #fff);
  height: 90px;
  position: absolute;
  left: 0;
  top: -80px;
  width: 100%;
}

#contTab:checked~.content-more .readmore {
  display: inline-block;
  background: #005EC4;
  color: #FFF;
  width: 175px;
  height: 42px;
  border-radius: 42px;
  line-height: 42px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
}

#contTab:checked~.content-more .readmore:hover {
  opacity: 1
}

@media screen and (max-width: 1700px) {}

@media screen and (max-width: 1500px) {}

@media screen and (max-width: 1400px) {

  /* kv */

  .kv {
    width: 100%;
    max-width: 1400px;
    height: 0;
    padding-bottom: 30%;
    /* background: url("../images/kv_bg.png") center top no-repeat; */
    background-size: 150% auto;
  }

}

@media screen and (max-width: 1220px) {
  .none_1220 {
    display: none;
  }
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {
  .main {
    padding-top: 76px;
  }

}

@media screen and (max-width: 960px) {

  /* kv */


  .kv {
    width: 100%;
    max-width: 960px;
    height: 0;
    padding-bottom: 45%;
    /* background: url("../images/kv_bg_m.png") center top no-repeat; */
    /* background-size: 200% auto; */
    position: relative;
  }

  .webOnly {
    display: none;
  }

  .mobOnly {
    display: block;
  }

  .kv_tit {
    top: 20%;
    width: 60%;
    left: 8%;
  }

  .godness {
    width: 45%;
    right: -8%;
  }

  .money {
    width: 80%;
  }

  /* event */
  .event {
    margin: 0% auto 5%;
    padding: 6% 5% 6%;
  }

  /* notice */
  .notice {
    width: 92%;
    padding: 5% 5% 5%;
  }
}

@media screen and (max-width:768px) {
  .main {
    padding-top: 58px;
  }

  /* kv */
  .kv_container {
    background: url("../images/mob_kv.png") center top no-repeat;
    background-size: cover;
    padding-bottom: 100%;
  }

  .kv {
    width: 100%;
    max-width: 768px;
    height: 0;
    padding-bottom: 100%;
    /* background: url("../images/kv_bg_m.png") center top no-repeat; */
    /* background-size: 120% auto; */
    position: relative;
  }

  .kv_tit {
    width: 90%;
    top: 12%;
    left: 5%;
  }

  .godness {
    width: 50%;
    right: 10%;
  }

  .money {
    width: 120%;
    bottom: -20%;
  }

  /* event */

  .event_tit {
    font-size: 24px;
  }

  .event_tit img {
    width: 24px;
  }

  /* notice */
  .notice {
    padding: 7% 2% 0%;
  }

  .notice_all ul {
    font-size: 14px;
    padding-left: 20px
  }

  #contTab:checked~#cont {
    max-height: 48vw;
    overflow: hidden;
  }

  #contTab:checked~.content-more .readmore {
    width: 175px;
    border-radius: 8vw;
    font-size: 1em;
  }
}

@media screen and (max-width:600px) {

  /* kv */
  /* event */
  .event_tit {
    width: 80%;
  }

  .tit {
    font-size: 18px;
    min-width: 10px;
  }

  .event_txt {
    font-size: 18px;
    margin-left: 2%;
    /* text-align: left; */
  }

  .event_txt_s {
    font-size: 14px;
  }

}

@media screen and (max-width:540px) {

  /* table */
  .table {
    font-size: 15px;
    text-align: center;
    line-height: 140%;
  }

  .table tr .td_l {
    font-size: 20px;
  }

  .table tr td,
  th {
    padding: 10px 10px;
  }

  /* event */
  .event_txt {
    font-size: 16px;
    /* margin: 2% auto 2%; */
    /* text-align: left; */
  }

  .event_txt_s {
    font-size: 12px;
  }

  .event_tit {
    font-size: 20px;
  }

  .event_tit img {
    width: 18px;
  }
}


@media screen and (max-width:400px) {

  /* table */
  .table {
    font-size: 12px;
    text-align: center;
    line-height: 140%;
  }
}

/* float */

.float {
  position: fixed;
  top: 20%;
  right: 0px;
  width: 50px;
  z-index: 50
}

.float-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 20px 10px;
  border-radius: 10px 0 0 10px;
  border: 1px solid #fff;
  border-right: none;
  background: rgba(9, 29, 61, 0.85);
  cursor: pointer;
}

.float-item-bl {
  margin-top: 15px
}

.float-item img {
  width: 24px
}

.float-item div {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
  writing-mode: vertical-lr
}

@media only screen and (min-width:1024px) {
  .float-item {
    transition: .3s
  }

  .float-item:hover {
    transform: scale(1.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
}

@media only screen and (max-width:1200px) {
  .float {
    top: 15%;
    width: 40px
  }

  .float-item {
    padding: 20px 10px
  }

  .float-item img {
    width: 18px
  }

  .float-item div {
    font-size: 18px
  }
}

@media only screen and (max-width:767px) {
  .float {
    width: 100%;
    top: auto;
    bottom: 0;
    right: 0;
    display: none;
    opacity: 0;
    /* pointer-events: auto; */
    transform: translateY(100%);
    transition: all 0.4s ease
  }

  .float.show {
    display: flex;
    opacity: 1;
    /* pointer-events: auto; */
    transform: translateY(0)
  }

  .float-item {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 0;
    border: 1px solid #fff;
    border-bottom: none;
    border-right: none;
    border-left: none;
    background: rgba(9, 29, 61, 1)
  }

  .float-item:hover {
    flex: 1;
    display: flex;
    flex-direction: row;
  }

  .float-item-bl {
    border-left: 1px solid #fff;
    margin-top: 0
  }

  .float-item div {
    -webkit-writing-mode: initial;
    -ms-writing-mode: initial;
    writing-mode: initial
  }

  .float-item img {
    margin: 0
  }
}




/* 彈窗 */
/* 遮罩層：預設隱藏並置中內部元素 */
.modal-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* 深色透明背景 */
  z-index: 9999;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  /* 背景模糊效果 */
}

/* 彈窗主體 */
.modal-container {
  background: #fff;
  width: 90%;
  max-width: 450px;
  border-radius: 15px;
  position: relative;
  padding: 35px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-size: 18px;
  line-height: 140%;
  font-weight: 400;
}

/* 關閉按鈕 X */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: rgb(116, 116, 116);
  display: block;
  background-color: rgb(0, 0, 0, 0.2);
  border-radius: 999px;
  padding: 4.2px 7px;
  transition: 0.4s;

}

.modal-close:hover {
  color: #fff;
  background-color: rgb(0, 0, 0, 0.6);
  transition: 0.4s;
}

.modal-header {
  font-size: 20px;
  color: #007FE0;
  font-weight: 600;
}

.modal-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 24px 0px 0px;
}

.modal-btn {
  display: inline-block;
  padding: 8px 36px;
  color: #fff;
  background-color: #0061ac;
  border-radius: 10px;
  transition: 0.4s;
  cursor: pointer;
}

.modal-btn:hover {
  background-color: #007FE0;
  transition: 0.4s;
}

.modal-btn a {
  color: #fff;
}

/* 防止背景捲動的 class */
/* body.modal-open {
  overflow: hidden;
} */