.logo-wrap {
  border-bottom: 3px solid #000;
}
.link {
  color: rgb(0, 106, 236);
  font-weight: 800;
  text-decoration: underline;
}
.banner {
  max-width: 1440px;
  margin: auto;
}
/*-----------banner錨點-----------*/
.button-2z-wrap {
  position: absolute;
  margin: 0 auto;
  z-index: 9;
  display: flex;
  width: 60%;
  top: 50%;
  left: 20%;
}
.button-z {
  width: 100%;
  margin: 0 auto;
}
.button-z img {
  width: 90%;
}
.button-z a:hover {
  filter: brightness(120%);
  transform: translateY(5px);
  transition: .3s;
}
.button-1z-wrap {
  position: absolute;
  margin: 0 auto;
  z-index: 9;
  display: flex;
  width: 64%;
  top: 72%;
  left: 18%;
}
section {
  padding: 50px 0;
  max-width: 1440px;
  margin: auto;
}
.content {
  width: 95%;
  max-width: 1280px;
  margin: auto;
  padding: 50px 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.section-a {
  background-color: #ffd72e;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.section-a .content {
  background-image: url(../image/content-bg1.png);
}
.section-b {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  background-color: #69d8d5;
  opacity: 1;
  background: radial-gradient(circle, transparent 20%, #69d8d5 20%, #69d8d5 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #69d8d5 20%, #69d8d5 80%, transparent 80%, transparent) 22.5px 22.5px, linear-gradient(#b2ebe9 1.8px, transparent 1.8px) 0 -0.9px, linear-gradient(90deg, #b2ebe9 1.8px, #69d8d5 1.8px) -0.9px 0;
  background-size: 45px 45px, 45px 45px, 22.5px 22.5px, 22.5px 22.5px;
}
.section-b .content {
  background-image: url(../image/content-bg2.png);
}
.section-c {
  border-top: 2px solid #000;
  background-color: #da232f;
  opacity: 1;
  background-image:  radial-gradient(rgba(255,255,255,.7) 0.75px, transparent 0.75px), radial-gradient(rgba(255,255,255,.7) 0.75px, #da232f 0.75px);
  background-size: 30px 30px;
  background-position: 0 0,15px 15px;
}
.section-c .link {
  color: #fff;
}
.section-c .content {
  background-image: url(../image/content-bg3.png);
}
.section-d {
  background-color: #ffd72e;
  opacity: 1;
  background-image:  linear-gradient(rgba(255,255,255,.3) 1.6px, transparent 1.6px), linear-gradient(to right, rgba(255,255,255,.3) 1.6px, #ffd72e 1.6px);
  background-size: 32px 32px;
}
.section-e {
  background-color: #ff92cc;
  opacity: 1;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 1px, #ff92cc 0, #ff92cc 50%);
}
.section-f {
  background-color: #ff92cc;
  opacity: 1;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 1px, #ff92cc 0, #ff92cc 50%);
}
.section-g {
  background-color: #4fe8e0;
  opacity: 1;
  background-image:  linear-gradient(#3fcbd5 0.8px, transparent 0.8px), linear-gradient(90deg, #3fcbd5 0.8px, transparent 0.8px), linear-gradient(#3fcbd5 0.4px, transparent 0.4px), linear-gradient(90deg, #3fcbd5 0.4px, #4fe8e0 0.4px);
  background-size: 20px 20px, 20px 20px, 4px 4px, 4px 4px;
  background-position: -0.8px -0.8px, -0.8px -0.8px, -0.4px -0.4px, -0.4px -0.4px;
}
.section-e .content,
.section-f .content,
.section-g .content {
  width: 95%;
  max-width: 1000px;
  margin: auto;
  padding: 20px 0;
  
}
.header {
  max-width: 90%; 
  margin: auto;
}
.header img {
  justify-self: center;
}
.cta-btn {
  width: 80%; 
  max-width: 700px;
  margin: auto; 
  display: block;
}
.cta-btn:hover {
  filter: brightness(110%);
  transform: scale(1.1);
  cursor: pointer;
}
.coupon-wrap {
  display: flex; 
  flex-wrap: wrap;
  max-width: 80%;
  margin: auto;
}
.section-d .content .coupon {
  margin: -20px auto;
}
.section-d .content .coupon-wrap {
  max-width: 95%;
}
.coupon {
  width: 30%;
  margin: 5px auto;
}
.coupon img {
  width: 100%;
}
.section-footer,
.footer {
  text-align: left;
  line-height: 1.6;
}
.section-c .section-footer {
  color: #fff;
}
.section-footer {
  padding: 10px 20px 20px 5px;
}
.footer {
  color: #fff;
  background-color: #000;
  padding: 20px 40px 40px 10px;
  max-width: 1390px;
  margin: auto;
}
.section-footer h4,
.footer h4 {
  font-size: 1.2em;
  text-align: center;
  margin: 5px auto;
}
.section-footer ul,
.footer ul {
  width: 90%;
  max-width: 1000px;
  justify-self: left;
  margin: auto;
}
/* ========== RWD ========== */
/* Tablet */
@media (max-width: 1024px) {
  body::before {
    background: url(../image/background-tab.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
  }
}
/* Mobile */
@media (max-width: 767px) {
  body::before {
    background: url(../image/background-m.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
  }
  .button-2z-wrap {
    top: 55%;
    width: 88%;
    left: 6%;
  }
  .button-1z-wrap {
    width: 92%;
    top: 76%;
    left: 4%;
  }
  section {
    padding: 25px 0;
  }
  .content {
    width: 100%;
    max-width: 90%;
    padding: 15px 0;
  }
  .section-a .content {
    background-image: url(../image/content-bg1-m.png);
  }
  .section-b .content {
    background-image: url(../image/content-bg2-m.png);
  }
  .section-c .content {
    background-image: url(../image/content-bg3-m.png);
  }
  .coupon-wrap {
    display: flex; 
    flex-wrap: wrap;
    max-width: 95%;
    margin: auto;
  }
  .coupon {
    width: 32%;
    margin: 12px auto;
  }
  .section-d .content .coupon {
    width: 88%;
    margin: 5px auto;
  }
  .section-d .content .coupon:first-child {
    margin-top: -30px;
  }
}