@charset "utf-8";
/* ===================================================	共用 =================================================== */
html,
body {
  background:
    url(../images/bottom_right.png) top right no-repeat fixed,
    url(../images/bottom_left.png) bottom left no-repeat fixed,
    url(../images/deco.png) top center repeat-y,
    url(../images/bg.jpg) top center repeat fixed;

  font-family:
    "Roboto",
    /* 英文 */ "Noto Sans TC",
    /* 中文 */ sans-serif;
}

@media screen and (max-width: 991px) {
  html,
  body {
    background: url(../images/bg.jpg) top center repeat fixed;
    background-size: auto;
  }
}

@media screen and (max-width: 991px) {
  .blk_bas .blk_body > * {
    margin: 0vw auto 2vw;
  }
  .block_other {
    margin: 0 auto;
  }
}
@font-face {
  font-family: SweiHalfMoonCJKtc-Black;
  src: url("https://events.eslite.com/font/SweiHalfMoonCJKtc-Black.ttf");
}
big {
  color: #f93c7e;
}
.block0 .blk_body {
  background: none;
}
.block0 {
  position: relative;
  background: url(../images/bg_1.jpg) center repeat;
}
.block0 .blk_body::before {
  display: none;
}
/* KV */
.title-item {
  position: absolute;
  z-index: 90;
}
.title01 {
  top: calc((78 / 1920) * 100%);
  left: calc((602 / 1920) * 100%);
  width: calc((751 / 1920) * 100%);
  animation: bounceInDown 1.5s;
  animation-iteration-count: 1;
}
.title02 {
  top: calc((700 / 1920) * 100%);
  left: calc((714 / 1920) * 100%);
  width: calc((515 / 1920) * 100%);
  animation: bounceInDown 1.8s;
  animation-iteration-count: 1;
}
.title03 {
  top: calc((1318 / 1920) * 100%);
  left: calc((921 / 1920) * 100%);
  width: calc((215 / 1920) * 100%);
  animation: flipInX 1.7s;
  animation-iteration-count: 1;
}
.title04 {
  top: calc((303 / 1920) * 100%);
  left: calc((1398 / 1920) * 100%);
  width: calc((141 / 1920) * 100%);
  animation: floatShake 3s ease 0.6s infinite;
}
.title05 {
  top: calc((578 / 1920) * 100%);
  left: calc((1641 / 1920) * 100%);
  width: calc((270 / 1920) * 100%);
  animation: floatShake 3s ease 1.2s infinite;
}
.title06 {
  top: calc((1214 / 1920) * 100%);
  left: calc((329 / 1920) * 100%);
  width: calc((245 / 1920) * 100%);
  animation: floatShake 3s ease 0.6s infinite;
}
.title07 {
  top: calc((153 / 1920) * 100%);
  left: calc((39 / 1920) * 100%);
  width: calc((225 / 1920) * 100%);
  animation: floatShake 3s ease 1.2s infinite;
}

/* floatShake動畫 */
@keyframes floatShake {
  0%,
  85%,
  100% {
    transform: translateY(0) rotate(0);
  }
  88% {
    transform: translateY(-4px) rotate(2deg);
  }
  91% {
    transform: translateY(0px) rotate(-2deg);
  }
  94% {
    transform: translateY(-3px) rotate(1deg);
  }
  97% {
    transform: translateY(0px) rotate(0);
  }
}

.blk_item {
  background: none;
}
.blk_body {
  background: url(../images/bg_2.jpg) center repeat;
}
.blk_head {
  background: url(../images/btt.png) center no-repeat;
  height: 192px;
  margin: 10px auto 20px;
}
.btt {
  font-size: 70pt;
  height: 80px;
  letter-spacing: 2px;
  color: #fff;
  transform: rotate(-1deg);
  font-weight: 800;
}
.stt {
  letter-spacing: 1px;
  font-size: 45px;
  background: url(../images/bg_3.jpg) center repeat;
  padding: 10px 25px;
  margin: 10px auto 5px;
  color: #ffffff;
  transform: rotate(-1deg);
}
.stt::before {
  background: url(../images/stt_deco.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  margin-bottom: 0px;
  content: "";
}
.stt::after {
  background: url(../images/stt_deco.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 10px;
  margin-bottom: 0px;
  content: "";
}
@media screen and (max-width: 991px) {
  .blk_head {
    background: url(../images/btt_m.png) center no-repeat;
    background-size: 95%;
    height: 39vw;
    margin: 1vw auto -1vw;
  }
  .btt {
    font-size: 15vw;
    height: 57px;
  }
  .stt {
    font-size: 7vw;
    padding: 2vw 4vw 1vw;
    margin: 1vw auto;
  }
  .stt::before {
    width: 5vw;
    height: 5vw;
    margin-right: 2vw;
    margin-bottom: 0px;
  }
  .stt::after {
    width: 5vw;
    height: 5vw;
    margin-left: 2vw;
    margin-bottom: 0px;
    content: "";
  }
}

.box::before {
  color: #ffffff;
  background: #389aef;
  font-weight: 500;
}
.crosswise_3p .font h4,
.broadwise .font h4,
.rectangle .font h4 {
  color: #e95b8d;
}
.hightlight .font h4,
.box::after,
.hightlightAd .font h4,
.hightlightAd-text li:nth-child(1) h4,
.hightlight_5p .font h4 {
  background: url(../images/bg_4.jpg) center repeat;
}
.box-mix ul.quotes li {
  background: #9d74cb;
}

.box img,
.crosswise_3p li,
.banner img,
.hightlight li,
.hightlightAd li:first-child img,
.hightlightAd li,
.broadwise li,
.boxmix-forbn .box-mix ul.quotes img,
.rectangle li {
  border-radius: 10px;
}
.hightlight img,
.hightlightAd li img {
  border-radius: 10px 10px 0 0;
}

.crosswise_3p.style_1 {
  background: url(../images/style_1.png) center top no-repeat;
}
@media screen and (max-width: 991px) {
  .crosswise_3p.style_1 {
    background: none;
  }
}
/* 側邊欄*/
.menustyle2 {
  background: url(../images/bg_3.jpg) center repeat;
  border: none;
}
.menustyle2 .nav-link.active,
.menustyle2 .nav-link:hover {
  background: url(../images/bg_5.jpg) center repeat;
  color: #ffe3af;
}
@media screen and (max-width: 991px) {
  .menustyle2 a {
    padding: 1vw 3vw;
  }
}
/* .go_btn a */
.block_other {
  margin-top: 20px;
}
.go_btn a {
  background: url(../images/bg_3.jpg) center repeat;
  font-size: 35px;
  color: #ffffff;
  font-weight: 600;
}

@media screen and (max-width: 991px) {
  .go_btn a {
    font-size: 6.5vw;
  }
}
/* 特F公版調整 */
.box-mix ul.quotes li {
  display: flex;

  align-items: center;
  justify-content: center;
}
.box-mix .quotes .font h4:after {
  height: 15px;
}
.box-mix .quotes .font:after {
  content: none;
}
.box-mix ul.quotes li a {
  align-items: center;
}
.box-mix ul.quotes .font p {
  text-align: left !important;
  padding: 0;
  margin: 8px 0;
}

@media screen and (max-width: 991px) {
  .box-mix ul.quotes,
  .box-mix ul.hightlight {
    margin: 0 auto;
  }
}