@charset "UTF-8";
:root {
  --max-width: 1300px;
  --color1: #00a8fb;
  --color2: #fddf12;
  --color3: #ff3794;
  --color4: #2d70d3;
  --color5: #1150a6;
  --BGimage1: url(../images/bgc1.jpg);
  --BGimage2: url(../images/bgc2.jpg);
  --BGimage3: url(../images/bgc3.jpg);
  --BGimage4: url(../images/bgc4.jpg);
  --BGimage5: url(../images/bgc5.jpg);
  --menu-color1: var(--color1);
  --menu-color2: var(--color2);
  --menu-color3: #fff;
  --font-size-L: 50px;
  --font-size-M: 40px;
}
@media screen and (max-width: 450px) {
  :root {
    --font-size-L: 27px;
    --font-size-M: 22px;
  }
}

html {
  background: #042554;
  background-image: url(../images/bg.jpg);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}
@media screen and (max-width: 1200px) {
  html {
    background-size: 1500px auto;
  }
}

.memo {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  padding: 0.5em;
}
@media screen and (max-width: 991px) {
  .memo {
    font-size: 12px;
  }
}

.kv_pc {
  width: 100%;
  position: relative;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width: 991px) {
  .kv_pc {
    display: block;
  }
}
.kv_pc img {
  width: 100%;
}
.kv_pc .topbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.kv_pc .member {
  position: absolute;
  width: 30%;
  top: 70%;
  left: 35%;
}
@media screen and (max-width: 991px) {
  .kv_pc .member {
    width: 75%;
    top: 67%;
    left: 11%;
  }
}
.kv_pc .member {
  -webkit-animation: pulse 1s infinite;
          animation: pulse 1s infinite;
}

/*文字標題*/
.btt {
  font-family: "Noto Sans TC";
  font-size: var(--font-size-L);
  color: #fff;
}
/*btn*/
.btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 30px auto 30px;
  padding: 0 4vw;
}
@media screen and (max-width: 450px) {
  .btn {
    margin: 20px auto 10px;
  }
}
.btn img {
  max-width: 500px;
  width: 100%;
}
@media screen and (max-width: 450px) {
  .btn img {
    max-width: 240px;
  }
}

.blk_bas {
  margin-bottom: 200px;
}
@media screen and (max-width: 991px) {
  .blk_bas {
    margin-bottom: 18vw;
  }
}
@media screen and (max-width: 450px) {
  .blk_bas {
    margin-top: 10px;
  }
}

.blk_head {
  font-size: var(--font-size-L);
  margin-bottom: -1px;
  background-color: unset;
  background-image: url(../images/blkD1.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  padding-top: 0.6em;
  padding-bottom: 1.9em;
}
@media screen and (max-width: 1200px) {
  .blk_head {
    background-size: 109% auto;
  }
}
@media screen and (max-width: 991px) {
  .blk_head {
    padding-bottom: 1.1em;
  }
}
.blk_body {
  font-size: var(--font-size-L);
  background-color: unset;
  background-image: url(../images/blkD2.png);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .blk_body {
    background-size: 109% auto;
  }
}
.blk_body:after {
  content: "";
  display: block;
  background-image: url(../images/blkD3.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  width: 100%;
  padding-bottom: 11%;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
@media screen and (max-width: 1200px) {
  .blk_body:after {
    background-size: 109% auto;
    padding-bottom: 12%;
  }
}

/*coupon*/
.coupon {
  position: relative;
  z-index: 10;
  max-width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 991px) {
  .coupon {
    max-width: 94%;
  }
}
.coupon ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding: 0 20px;
}
@media screen and (max-width: 991px) {
  .coupon ul {
    padding: 0 2vw;
  }
}
.blk_bas:nth-of-type(1) .coupon ul li {
  max-width: 800px;
  width: 100%;
}
.coupon ul li {
  width: 50%;
  padding: 10px;
}
@media screen and (max-width: 991px) {
  .coupon ul li {
    width: 100%;
    padding: 5px;
  }
}
.coupon ul img {
  width: 100%;
  margin-bottom: 0;
}

/*電子書*/
.book {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
@media screen and (max-width: 991px) {
  .book {
    gap: unset;
  }
}
.book li {
  width: calc(50% - 20px) !important;
  background-color: rgba(255, 255, 255, 0.3607843137);
  padding: 10px;
  border-radius: 10px;
}
@media screen and (max-width: 991px) {
  .book li {
    width: 100% !important;
    padding: 20px !important;
  }
}
@media screen and (max-width: 991px) {
  .book li + li {
    margin-top: 2vw;
  }
}
.book a {
  display: block;
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .book a {
    margin-bottom: 2vw;
  }
}

/*gotopro 查看適用商品按鈕*/
.selected {
  position: relative;
}
.selected a {
  display: block;
  position: absolute;
  right: 22%;
  bottom: 7%;
  width: 34%;
}
@media screen and (max-width: 991px) {
  .selected a {
    right: 23%;
    bottom: 6%;
    width: 34%;
  }
}
.selected a img {
  width: 100%;
  display: block;
}

/*btn 領券後這裡用按鈕*/
.btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 30px auto;
}
.btn img {
  max-width: 500px;
  width: 100%;
}
@media screen and (max-width: 450px) {
  .btn img {
    max-width: 300px;
  }
}

.notice {
  color: #fff;
  padding-top: 0;
  padding-bottom: 0;
}