@charset "UTF-8";
@import url("../../../../../Common/Css/normalize.css");
@import url("../../../../../Common/Css/all.css");
img {
  display: block;
}

/*====================主要架構====================*/
html {
  font-size: 24px;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft YaHei UI", "Microsoft YaHei", Roboto, "Hiragino Sans GB", "Source Han Sans CN", Fira Sans, "Droid Sans", "Helvetica Neue", arial, sans-serif;
  color: #000000;
}

@media all and (max-width: 525px) {
  html {
    font-size: 20px;
  }
}

@media all and (max-width: 460px) {
  html {
    font-size: 18px;
  }
}

@media all and (max-width: 360px) {
  html {
    font-size: 16px;
  }
}

body {
  background: #faffd0;
  overflow-x: hidden;
}

#wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent url("../images/wrap-bg.jpg") center top no-repeat;
  background-size: 1921px;
}

@media all and (max-width: 1120px) {
  #wrapper {
    background-size: 166%;
  }
}

@media all and (max-width: 720px) {
  #wrapper {
    background: transparent url("../images/wrap-bg.jpg") center top no-repeat;
    background-size: 100%;
  }
}

#container {
  width: 1120px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

@media all and (max-width: 1120px) {
  #container {
    overflow: hidden;
    width: 100%;
  }
}

#content {
  height: auto;
  padding: 59% 8% 2%;
}

@media all and (max-width: 1120px) {
  #content {
    padding: 59% 2% 2%;
  }
}

@media all and (max-width: 720px) {
  #content {
    padding: 33% 2% 1%;
  }
}

#footer {
  width: 100%;
  height: 75px;
  background: #000 url("../../../../Global/foot.jpg") center top no-repeat;
  background-size: auto;
  position: absolute;
}

@media all and (max-width: 720px) {
  #footer {
    background: #000 url("../../../../Global/foot2.jpg") center top no-repeat;
    background-size: auto;
  }
}

@media all and (max-width: 525px) {
  #footer {
    background-size: 100%;
  }
}

@media all and (max-width: 460px) {
  #footer {
    height: 55px;
  }
}

@media all and (max-width: 360px) {
  #footer {
    height: 45px;
  }
}

/*====================LOGO、FB、浮動ICON====================*/
#logo {
  margin: 10px 0 0 5px;
  z-index: 90;
  width: 110px;
  height: 85px;
  background: transparent url("../../../../Global/logo.png") center top no-repeat;
  background-size: 100%;
  float: left;
}

@media all and (max-width: 500px) {
  #logo {
    width: 80px;
    height: 60px;
  }
}

@media all and (max-width: 400px) {
  #logo {
    width: 60px;
    height: 47px;
  }
}

#logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.mark {
  margin: 20px 0 0 0;
  width: 38px;
  height: 40px;
  background: transparent url("../../../../Global/logo_mark.png") center top no-repeat;
  background-size: 100%;
  float: left;
}

@media all and (max-width: 500px) {
  .mark {
    width: 35px;
    height: 40px;
    margin: 15px 0 0 0;
  }
}

@media all and (max-width: 400px) {
  .mark {
    width: 30px;
    height: 32px;
    margin: 10px 0 0 0;
  }
}

#fb {
  margin: 0 5px 0 0;
  width: 222px;
  height: 56px;
  display: block;
  background: transparent url("../../../../Global/fb_btn.png") center top no-repeat;
  background-size: 100%;
  float: right;
}

@media all and (max-width: 720px) {
  #fb {
    width: 180px;
    height: 40px;
  }
}

@media all and (max-width: 500px) {
  #fb {
    width: 160px;
    height: 36px;
    margin: 0;
  }
}

@media all and (max-width: 400px) {
  #fb {
    width: 135px;
    height: 32px;
  }
}

/*====================MENU====================*/
.menu {
  margin: 0 0 0 -560px;
  width: 1120px;
  position: relative;
  left: 50%;
  overflow: hidden;
}

@media all and (max-width: 1120px) {
  .menu {
    margin: 0;
    width: 100%;
    left: 0;
  }
}

.menu > a {
  margin: 0 0 1% 0;
  width: 25%;
  float: left;
}

.menu > a > img {
  width: 100%;
}

/*====================內容====================*/
.item {
  width: 100%;
  height: auto;
  padding: 1% 0 2%;
  position: relative;
}

.item .item-title {
  margin: 0;
  width: 100%;
  height: auto;
}

@media all and (max-width: 720px) {
  .item .item-title img {
    width: 40%;
  }
}

@media all and (max-width: 620px) {
  .item .item-title + .time-info > span {
    display: block;
  }
}

.item .item-con {
  padding: 1%;
  font-size: 0.9rem;
}

@media all and (max-width: 1120px) {
  .item .item-con {
    padding: 1% 2%;
  }
}

@media all and (max-width: 940px) {
  .item .item-con .l-block {
    display: block;
  }
}

.pay-content {
  padding: 0;
}

.pay-content .pay-title {
  margin: 0 0 3% 0;
  position: relative;
}

.pay-content .pay-title .pay-title-box {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
}

.pay-content .pay-title .pay-title-box > a {
  width: 23%;
  display: block;
  position: absolute;
  right: 0;
  bottom: 9%;
}

@media all and (max-width: 1120px) {
  .pay-content .pay-title .pay-title-box > a {
    width: 20%;
    right: 10%;
    bottom: 1.5%;
  }
}

@media all and (max-width: 720px) {
  .pay-content .pay-title .pay-title-box > a {
    width: 23%;
    right: 0%;
    bottom: 10%;
  }
}

.pay-content .pay-title .pay-title-box > a:hover {
  -webkit-filter: sepia(50%);
          filter: sepia(50%);
}

.pay-content .pay-title .pay-img {
  width: 1920px;
  margin-left: -960px;
  position: relative;
  left: 50%;
}

@media all and (max-width: 1120px) {
  .pay-content .pay-title .pay-img {
    margin: 0;
    width: 160%;
    left: -30%;
  }
}

@media all and (max-width: 720px) {
  .pay-content .pay-title .pay-img {
    margin: 0;
    width: 200%;
    left: -50%;
  }
}

.pay-content .pay-info {
  padding: 0 2%;
}

.pay-content .pay-info > p {
  margin: 0;
  padding: 2% 0;
}

.btnInfo {
  padding: 2px 10px;
  background: #e5006e;
  color: #FFFFFF;
  border-radius: 50px;
  white-space: nowrap;
  text-decoration: none;
}
/*# sourceMappingURL=style.css.map */