@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Heiti TC", "LantingHei TC", "Microsoft JhengHei", "Microsoft YaHei", 微軟正黑體, sans-serif;
}

@media screen and (max-width: 767px) {
  .show-lg {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .show-xs {
    display: none;
  }
}
body {
  background-color: #fff6c3;
  font-size: 0;
}

header {
  background-color: #007979;
}

img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width)/attr(height);
  vertical-align: top;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.S1 {
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #ffcc4c), color-stop(50%, #fff6c3));
  background: linear-gradient(to right, #ffcc4c 50%, #fff6c3 50%);
  background-position: center;
  background-size: contain;
}
.S1 .container {
  position: relative;
}
.S1 .S1-btn-01 a {
  position: absolute;
  width: 38%;
  height: 8.6%;
  left: 8%;
  top: 80.2%;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
@media screen and (min-width: 768px) {
  .S1 .S1-btn-01 a {
    width: 15.7%;
    height: 7.6%;
    left: 31%;
    top: 86.5%;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
}
.S1 .S1-btn-02 a {
  position: absolute;
  width: 38%;
  height: 8.6%;
  left: 53%;
  top: 80.2%;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
@media screen and (min-width: 768px) {
  .S1 .S1-btn-02 a {
    width: 15.7%;
    height: 7.6%;
    left: 52.8%;
    top: 86.5%;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
}

.S2 {
  background-color: #fff6c3;
  background-position: center;
  background-size: contain;
}
.S2 .container {
  position: relative;
}
.S2 .S2-btn-1 a {
  position: absolute;
  width: 45.8%;
  height: 4.5%;
  left: 50%;
  top: 22.6%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
}
@media screen and (min-width: 768px) {
  .S2 .S2-btn-1 a {
    width: 19.5%;
    height: 5%;
    left: 50%;
    top: 22.6%;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
  }
}
.S2 .S2-btn-2 a {
  position: absolute;
  width: 45.8%;
  height: 4.5%;
  left: 50%;
  top: 55.5%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
}
@media screen and (min-width: 768px) {
  .S2 .S2-btn-2 a {
    width: 19.5%;
    height: 5%;
    left: 50%;
    top: 55%;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
  }
}
.S2 .S2-btn-3 a {
  position: absolute;
  width: 45.8%;
  height: 4.5%;
  left: 50%;
  top: 90.5%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
}
@media screen and (min-width: 768px) {
  .S2 .S2-btn-3 a {
    width: 19.5%;
    height: 5%;
    left: 50%;
    top: 89.9%;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
  }
}

.S3 {
  background-color: #fff6c3;
  background-position: center;
  background-size: contain;
}
.S3 .container {
  position: relative;
}
.S3 .S3-btn-01 a {
  position: absolute;
  width: 22.5%;
  height: 4.5%;
  left: 11.5%;
  top: 22%;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
@media screen and (min-width: 768px) {
  .S3 .S3-btn-01 a {
    width: 9.2%;
    height: 5%;
    left: 34.5%;
    top: 20%;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
}
.S3 .S3-btn-02 a {
  position: absolute;
  width: 15%;
  height: 4.5%;
  left: 18%;
  top: 38%;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
@media screen and (min-width: 768px) {
  .S3 .S3-btn-02 a {
    width: 6%;
    height: 5%;
    left: 37%;
    top: 30%;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
}
.S3 .S3-btn-03 a {
  position: absolute;
  width: 38%;
  height: 20%;
  left: 8%;
  top: 60%;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
@media screen and (min-width: 768px) {
  .S3 .S3-btn-03 a {
    width: 15.7%;
    height: 19%;
    left: 31%;
    top: 55%;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
}
.S3 .S3-btn-04 a {
  position: absolute;
  width: 38%;
  height: 20%;
  left: 53%;
  top: 60%;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
@media screen and (min-width: 768px) {
  .S3 .S3-btn-04 a {
    width: 15.7%;
    height: 19%;
    left: 53%;
    top: 55%;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
}

.notice {
  background-color: #efefef;
  padding: 20px 0;
}
.notice h1 {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}
.notice li {
  font-size: 16px;
  padding-top: 5px;
  margin-left: 1em;
}
.notice .container {
  max-width: 75%;
}
@media screen and (min-width: 768px) {
  .notice .container {
    max-width: 50%;
    padding-bottom: 50px;
  }
}