@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap);
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: middle
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}
body {
  line-height: 1;
  position: relative;
  overflow-x: hidden
}
button,
ol,
ul {
  margin: 0;
  padding: 0
}
blockquote,
q {
  quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: '';
  content: none
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
:focus,
a:active,
a:focus,
a:hover,
button:focus {
  text-decoration: none;
  outline: 0
}
a,
button {
  border: none;
  font-size: unset;
  padding: 0;
  margin: 0;
  background: 0 0;
  background-color: none;
  outline: 0;
  border: none
}
img {
  max-width: 100%;
  height: auto
}
body {
  font-family: 'Microsoft JhengHei',sans-serif;
  background: #1a1818
}
body p,
body span {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: unset;
  color: #c3b39e
}
@media only screen and (max-width:430px) {
  body p,
  body span {
    font-size: 1rem
  }
}
.invisible {
  opacity: 0;
  visibility: hidden
}
.more-sign {
  position: fixed;
  bottom: 20px;
  right: 49px;
  width: 140px;
  height: 164px;
  z-index: 10;
  transition: .3s all;
  display: inline-block
}
@media only screen and (max-width:767px) {
  .more-sign {
    display: none
  }
}
.more-sign img {
  width: 100%;
  height: 100%;
  -webkit-animation: updown 2s ease-in-out infinite;
  animation: updown 2s ease-in-out infinite
}
@-webkit-keyframes updown {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-10px)
  }
}
@keyframes updown {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-10px)
  }
}
.fire {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  pointer-events: none
}
.fire video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  mix-blend-mode: screen;
  z-index: 6
}
#main {
  position: relative;
  background: url(../images/mainbg.png) no-repeat center center;
  background-position: bottom center;
  background-size: cover;
  height: 1200px;
  width: 100%;
  z-index: 5
}
@media only screen and (max-width:767px) {
  #main {
    height: 700px
  }
}
#main::before {
  content: '';
  position: absolute;
  width: 1088px;
  height: 720px;
  background: url(../images/mainRole.png) center center no-repeat;
  background-size: contain;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main::before {
    background: url(../images/mainRole.webp) center center no-repeat;
    background-size: contain
  }
}
@media only screen and (max-width:767px) {
  #main::before {
    width: 450px;
    top: 300px;
    bottom: unset;
    height: 300px
  }
}
#main::after {
  content: '';
  position: absolute;
  min-width: 100%;
  height: 1174px;
  background: url(../images/banner-deco.png) center center no-repeat;
  background-size: cover;
  bottom: -35%;
  z-index: 1;
  pointer-events: none
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main::after {
    background: url(../images/banner-deco.webp) center center no-repeat;
    background-size: cover
  }
}
@media only screen and (max-width:767px) {
  #main::after {
    height: 694px;
    bottom: unset;
    top: 155px
  }
}
#main .title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: 2%;
  left: 50%;
  width: 840px;
  transform: translateX(-50%)
}
@media only screen and (max-width:767px) {
  #main .title {
    width: 400px;
    top: 77px
  }
}
.btnBar {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 800px
}
@media only screen and (max-width:767px) {
  .btnBar {
    width: 300px;
    bottom: unset;
    top: 580px
  }
}
.btnBar ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 2vh;
  gap: 10px;
  text-align: center
}
@media only screen and (max-width:767px) {
  .btnBar ul {
    padding: 0
  }
}
.btnBar ul li {
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row
}
@media only screen and (max-width:767px) {
  .btnBar ul li {
    flex-direction: column
  }
}
.btnBar ul li a {
  transition: .5s linear;
  height: 100%
}
.btnBar ul li a.active,
.btnBar ul li a:active,
.btnBar ul li a:hover {
  filter: brightness(2)
}
section {
  position: relative;
  text-align: center;
  padding: 12vw 0 14vw
}
@media only screen and (max-width:768px) {
  section {
    padding: 6% 0
  }
}
section h2 {
  overflow: hidden;
  text-align: center;
  position: relative;
  padding: 0 2%
}
section p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: unset;
  color: #000
}
@media only screen and (max-width:430px) {
  section p {
    font-size: 1rem;
    line-height: 1.4rem;
    text-align: left
  }
}
section a,
section span {
  color: #282828;
  text-align: left;
  white-space: nowrap
}
@media only screen and (max-width:767px) {
  section a,
  section span {
    line-height: 1.6
  }
}
@media only screen and (max-width:767px) {
  section a.time,
  section span.time {
    display: none
  }
}
section#s1 {
  position: relative;
  background: url(../images/s1bg.png) no-repeat bottom center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  gap: 80px;
  z-index: 4
}
@media only screen and (max-width:767px) {
  section#s1 {
    gap: 20px;
    padding: 12vw 20px;
    background-position: top center
  }
}
section#s1 h2 {
  position: relative;
  z-index: 10
}
@media only screen and (max-width:767px) {
  section#s1 h2 {
    width: 320px;
    margin: 0 auto
  }
}
section#s1 .newsWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap
}
@media only screen and (max-width:1570px) {
  section#s1 .newsWrap {
    flex-direction: column
  }
}
@media only screen and (max-width:767px) {
  section#s1 .newsWrap {
    margin: 0;
    gap: 50px
  }
}
section#s1 .newsWrap .ad {
  position: relative
}
@media only screen and (max-width:767px) {
  section#s1 .newsWrap .ad {
    width: 100%
  }
  section#s1 .newsWrap .ad .swiper-pagination {
    bottom: -20px!important
  }
}
section#s1 .newsWrap .notice {
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(../images/news-content-bg.png) no-repeat center center;
  background-size: contain;
  padding: 0 40px;
  max-width: 100%;
  width: 544px
}
@media only screen and (max-width:1570px) {
  section#s1 .newsWrap .notice {
    background-size: cover;
    padding: 20px 20px;
    margin-top: 40px
  }
}
@media only screen and (max-width:767px) {
  section#s1 .newsWrap .notice {
    margin-top: 20px
  }
}
section#s1 .newsWrap .notice ul {
  position: relative;
  display: flex;
  flex-direction: column
}
section#s1 .newsWrap .notice ul .more {
  transition: .5s linear;
  margin-top: 4px
}
section#s1 .newsWrap .notice ul .more a {
  display: inline-block;
  position: relative;
  transition: .3s all
}
section#s1 .newsWrap .notice ul .more a::before {
  content: '';
  position: absolute;
  background: url(../images/more_btn_hover.png) no-repeat center center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  transition: .3s all;
  opacity: 0
}
section#s1 .newsWrap .notice ul .more a:hover::before {
  opacity: 1
}
section#s1 .newsWrap .notice ul .more:hover {
  filter: brightness(1.2)
}
section#s1 .newsWrap .notice ul li {
  display: flex;
  gap: 20px;
  position: relative;
  padding: 10px 0
}
section#s1 .newsWrap .notice ul li::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: url(../images/news-list-border.png) center center;
  background-size: contain;
  pointer-events: none
}
section#s1 .newsWrap .notice ul li:nth-last-child(2)::before {
  display: none
}
section#s1 .newsWrap .notice ul li .labels {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1
}
section#s1 .newsWrap .notice ul li .labels.news {
  background: #e02d1a
}
section#s1 .newsWrap .notice ul li .labels.system {
  background: #2f9096
}
section#s1 .newsWrap .notice ul li .labels.event {
  background: #4b2297
}
section#s1 .newsWrap .notice ul li a {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  width: 100%;
  color: #510b10;
  line-height: 1.6
}
section#s1 .newsWrap .notice ul li a:hover {
  text-decoration: underline;
  filter: brightness(1.2)
}
@media only screen and (max-width:767px) {
  section#s1 .newsWrap .notice ul li a {
    width: 100%
  }
}
section#s2 {
  background: url(../images/s2bg.png) no-repeat center center;
  background-size: cover;
  padding: 8vw 0
}
@media only screen and (max-width:767px) {
  section#s2 {
    padding: 12vw 0
  }
}
section#s2 h2 {
  margin-bottom: 2vw;
  position: relative;
  z-index: 10
}
@media only screen and (max-width:767px) {
  section#s2 h2 {
    margin-bottom: 4vw;
    width: 320px;
    margin: 0 auto
  }
}
section#s2 > .nav {
  justify-content: center;
  margin-bottom: 2vw;
  position: relative;
  z-index: 10
}
@media only screen and (max-width:767px) {
  section#s2 > .nav {
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 20px 0
  }
}
section#s2 .nav-link {
  padding: 0
}
section#s2 .nav-pills .nav-link.active {
  background-color: transparent
}
section#s2 button.nav-link {
  width: 265px;
  height: 68px
}
@media only screen and (max-width:767px) {
  section#s2 button.nav-link {
    width: 160px;
    height: 41px
  }
}
section#s2 button.nav-link#game-01-tab {
  background: url(../images/s3Tab01.png) center center no-repeat;
  background-size: contain
}
section#s2 button.nav-link#game-01-tab.active,
section#s2 button.nav-link#game-01-tab:hover {
  background-image: url(../images/s3Tab01_hov.png)
}
section#s2 button.nav-link#game-02-tab {
  background: url(../images/s3Tab02.png) center center no-repeat;
  background-size: contain
}
section#s2 button.nav-link#game-02-tab.active,
section#s2 button.nav-link#game-02-tab:hover {
  background-image: url(../images/s3Tab02_hov.png)
}
section#s2 #game-02 {
  position: relative;
  margin: 0 auto;
  max-width: 1200px
}
section#s2 #game-02 .tab-content .tab-pane .content {
  display: flex;
  justify-content: space-between;
  width: 100%
}
@media only screen and (max-width:767px) {
  section#s2 #game-02 .tab-content .tab-pane .content {
    flex-direction: column;
    align-items: center;
    padding: 0 20px
  }
}
section#s2 #game-02 .tab-content .tab-pane .content .info {
  margin-top: 60px;
  position: relative;
  z-index: 2
}
@media only screen and (max-width:767px) {
  section#s2 #game-02 .tab-content .tab-pane .content .info {
    margin-top: 20px
  }
}
section#s2 #game-02 .tab-content .tab-pane .content .char {
  position: relative;
  max-height: 769px
}
section#s2 #game-02 .tab-content .tab-pane .content .char img {
  position: relative;
  z-index: 2
}
section#s2 #game-02 .tab-content .tab-pane .content .char::before {
  content: '';
  position: absolute;
  width: 755px;
  height: 963px;
  background: url(../images/char-01-bg.png) center center no-repeat;
  background-size: contain;
  bottom: 0;
  left: 0;
  z-index: 1
}
@media only screen and (max-width:767px) {
  section#s2 #game-02 .tab-content .tab-pane .content .char::before {
    bottom: 15%;
    left: 1%;
    width: calc(755px* .7);
    height: calc(963px* .7)
  }
}
section#s2 #game-02 .tab-content .tab-pane:nth-child(2) .content .char::before {
  background-image: url(../images/char-02-bg.png)
}
section#s2 #game-02 .tab-content .tab-pane:nth-child(3) .content .char::before {
  background-image: url(../images/char-03-bg.png)
}
section#s2 #game-02 .tab-content .tab-pane:nth-child(4) .content .char::before {
  background-image: url(../images/char-04-bg.png)
}
section#s2 #game-02 ul {
  position: absolute;
  bottom: 5%;
  z-index: 5
}
@media only screen and (max-width:767px) {
  section#s2 #game-02 ul {
    bottom: -5%;
    flex-wrap: nowrap;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%)
  }
}
section#s2 #game-02 ul li button.nav-link {
  width: 163px;
  height: 267px;
  transition: .3s all
}
@media only screen and (max-width:1024px) {
  section#s2 #game-02 ul li button.nav-link {
    width: calc(163px* .7);
    height: calc(267px* .7)
  }
}
@media only screen and (max-width:767px) {
  section#s2 #game-02 ul li button.nav-link {
    width: calc(163px* .5);
    height: calc(267px* .5)
  }
}
section#s2 #game-02 ul li button.nav-link#char-01-tab {
  background: url(../images/char-01-tab.png) center center no-repeat;
  background-size: contain
}
section#s2 #game-02 ul li button.nav-link#char-01-tab.active,
section#s2 #game-02 ul li button.nav-link#char-01-tab:hover {
  background-image: url(../images/char-01-tab_hov.png)
}
section#s2 #game-02 ul li button.nav-link#char-02-tab {
  background: url(../images/char-02-tab.png) center center no-repeat;
  background-size: contain
}
section#s2 #game-02 ul li button.nav-link#char-02-tab.active,
section#s2 #game-02 ul li button.nav-link#char-02-tab:hover {
  background-image: url(../images/char-02-tab_hov.png)
}
section#s2 #game-02 ul li button.nav-link#char-03-tab {
  background: url(../images/char-03-tab.png) center center no-repeat;
  background-size: contain
}
section#s2 #game-02 ul li button.nav-link#char-03-tab.active,
section#s2 #game-02 ul li button.nav-link#char-03-tab:hover {
  background-image: url(../images/char-03-tab_hov.png)
}
section#s2 #game-02 ul li button.nav-link#char-04-tab {
  background: url(../images/char-04-tab.png) center center no-repeat;
  background-size: contain
}
section#s2 #game-02 ul li button.nav-link#char-04-tab.active,
section#s2 #game-02 ul li button.nav-link#char-04-tab:hover {
  background-image: url(../images/char-04-tab_hov.png)
}
section#s2 h2 img.deco {
  margin-top: -10vh
}
@media only screen and (max-width:900px) {
  section#s2 h2 img.deco {
    margin-top: -8vh
  }
}
@media only screen and (max-width:767px) {
  section#s2 h2 img.deco {
    margin-top: -3vh
  }
}
section#s2 h2 img.deco1 {
  position: relative;
  bottom: 0;
  z-index: 1
}
section#s2 .tab-content {
  position: relative;
  z-index: 2
}
section#s2 .tab-content img.line {
  scale: .7
}
section#s2 .tab-content h2 {
  margin: 0
}
section#s2 .tab-content p.bold {
  font-weight: 400
}
section .content3,
section .content4 {
  display: none
}
section .content3.active,
section .content4.active {
  display: block
}
section#s3 {
  background: url(../images/s3bg.png) no-repeat top center;
  background-size: cover;
  padding: 8vw 0;
  position: relative
}
@media only screen and (max-width:767px) {
  section#s3 {
    padding: 12vw 0
  }
}
section#s3::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg,rgba(0,0,0,0) 0,#000 100%);
  z-index: 0
}
section#s3 h2 {
  margin-bottom: 2vw
}
@media only screen and (max-width:767px) {
  section#s3 h2 {
    width: 320px;
    margin: 0 auto;
    margin-bottom: 20px
  }
}
section#s3 .content {
  position: relative
}
section#s3 .content #pills-tab-s3 {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 5%;
  top: 0;
  width: 193px;
  height: 847px;
  background: url(../images/s3Tab-bg.png) no-repeat center center;
  background-size: contain
}
@media only screen and (max-width:1570px) {
  section#s3 .content #pills-tab-s3 {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    background-image: url(../images/s3Tab-bg-m.png);
    margin: 0 auto 20px;
    max-width: 426px
  }
}
section#s3 .content #pills-tab-s3 li button {
  background: url(../images/s3-btn.png) no-repeat;
  background-position: center 0;
  background-size: cover;
  width: 160px;
  height: 86px;
  padding: 0
}
@media only screen and (max-width:1570px) {
  section#s3 .content #pills-tab-s3 li button {
    width: 154px;
    height: 60px
  }
}
section#s3 .content #pills-tab-s3 li button.active,
section#s3 .content #pills-tab-s3 li button:hover {
  background-image: url(../images/s3-btn_hover.png)
}
section#s3 .content #pills-tab-s3 li:nth-child(2) button {
  background-position: center -86px
}
@media only screen and (max-width:1570px) {
  section#s3 .content #pills-tab-s3 li:nth-child(2) button {
    background-position: center -83px
  }
}
section#s3 .content #pills-tab-s3 li:nth-child(3) button {
  background-position: center -172px
}
section#s3 .content #pills-tab-s3 li:nth-child(4) button {
  background-position: center -258px
}
@media only screen and (max-width:1570px) {
  section#s3 .content #pills-tab-s3 li:nth-child(4) button {
    background-position: center -256px
  }
}
section#s3 .content #pills-tab-s3 li:nth-child(5) button {
  background-position: center -344px
}
section#s3 .content #pills-tab-s3 li:nth-child(6) button {
  background-position: center -430px
}
section#s3 .content #pills-tab-s3 li:nth-child(7) button {
  background-position: center -516px
}
section#s3 .content #pills-tab-s3 li:nth-child(8) button {
  background-position: center -602px
}
section#s3 .content .tab-content .details {
  text-align: center;
  display: flex;
  justify-content: center
}
@media only screen and (max-width:1570px) {
  section#s3 .content .tab-content .details {
    padding: 0 40px 0 60px
  }
}
section#s3 .content .tab-content .details ul {
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
  gap: 4px
}
section#s3 .content .tab-content .details ul li {
  list-style: disc;
  display: list-item;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 20px;
  text-align: left;
  line-height: 1.6;
  color: #fff;
  font-family: 'Noto Serif TC',serif;
  font-weight: 500
}
@media only screen and (max-width:767px) {
  section#s3 .content .tab-content .details ul li {
    font-size: 16px
  }
}
section#s3 .content .tab-content .details ul li span {
  color: #fab86a;
  font-weight: 500;
  vertical-align: baseline;
  font-size: 20px
}
@media only screen and (max-width:767px) {
  section#s3 .content .tab-content .details ul li span {
    font-size: 16px
  }
}
body .notice-page a,
body .notice-page p,
body .notice-page span {
  font-size: 1.1rem;
  line-height: 2rem;
  color: #312319;
  text-align: left
}
@media only screen and (max-width:767px) {
  body .notice-page a,
  body .notice-page p,
  body .notice-page span {
    font-size: 16px
  }
}
@media only screen and (max-width:767px) {
  body .notice-page a.time,
  body .notice-page p.time,
  body .notice-page span.time {
    display: none
  }
}
body .notice-page p {
  margin: 10px 0
}
@media only screen and (max-width:767px) {
  body .notice-page h2 {
    width: 320px;
    margin: 0 auto
  }
}
body .header {
  position: relative;
  background: url(../images/header.jpg) no-repeat 25% 1%;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 368px;
  overflow-x: hidden;
  display: none
}
@media only screen and (max-width:767px) {
  body .header {
    height: 200px
  }
}
body .notice-page {
  background: url(../images/news-page-bg.png) no-repeat center center;
  background-size: cover;
  position: relative;
  padding: 120px 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
  gap: 20px;
  overflow: hidden
}
body .notice-page::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg,rgba(0,0,0,0) 0,#000 100%);
  z-index: 0
}
body .notice-page .notice_wrap {
  width: 100%;
  max-width: 1200px;
  padding: 40px 80px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: url(../images/notice_wrap.png) no-repeat center center;
  background-size: cover;
  position: relative;
  gap: 8px
}
@media only screen and (max-width:767px) {
  body .notice-page .notice_wrap {
    padding: 20px 40px
  }
}
body .notice-page .notice_wrap::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -13%;
  width: 238px;
  height: 384px;
  background: url(../images/notice_wrap-deco-01.png) no-repeat center center;
  background-size: contain;
  z-index: -1
}
@media only screen and (max-width:767px) {
  body .notice-page .notice_wrap::before {
    width: 120px;
    height: 194px
  }
}
body .notice-page .notice_wrap::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -18%;
  width: 470px;
  height: 308px;
  background: url(../images/notice_wrap-deco-02.png) no-repeat center center;
  background-size: contain;
  z-index: -1
}
@media only screen and (max-width:767px) {
  body .notice-page .notice_wrap::after {
    width: 235px;
    height: 154px
  }
}
body .notice-page .notice_wrap .title h3::before {
  bottom: 0
}
body .notice-page .notice_wrap h3 {
  margin-top: 0;
  position: relative;
  font-size: 32px;
  line-height: 1.4
}
@media only screen and (max-width:767px) {
  body .notice-page .notice_wrap h3 {
    font-size: 20px
  }
}
body .notice-page .notice_wrap h3::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 8px;
  background: url(../images/news-subtitle-deco.png) no-repeat center center;
  background-size: contain
}
@media only screen and (max-width:767px) {
  body .notice-page .notice_wrap h3::before {
    background-size: cover;
    width: 100%;
    height: 4px;
    bottom: 6px
  }
}
body .notice-page .notice_wrap .labels {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  padding: 4px 12px;
  text-align: center;
  line-height: 1;
  border-radius: 4px
}
body .notice-page .notice_wrap .labels-system {
  color: #fff;
  background: #d63658
}
body .notice-page .notice_wrap .labels-event {
  color: #fff;
  background: #2f9096
}
body .notice-page .notice_wrap .breadcrumbs {
  display: flex;
  gap: 4px;
  align-items: center
}
body .notice-page .notice_wrap .title {
  margin-top: 20px
}
body .notice-page .notice_wrap .title h3 {
  color: #312319
}
body .notice-page .notice_wrap nav {
  margin-top: 20px
}
body .notice-page .notice_wrap nav .text-center a {
  border: 1px solid #312319;
  padding: 8px 16px;
  transition: .3s all
}
body .notice-page .notice_wrap nav .text-center a:hover {
  background: #ffffff5b
}
body .notice-page .news-tabs .nav-pills {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px
}
@media only screen and (max-width:767px) {
  body .notice-page .news-tabs .nav-pills {
    flex-wrap: wrap;
    gap: 4px;
    margin: 12px 0
  }
}
body .notice-page .news-tabs .nav-pills li {
  position: relative
}
body .notice-page .news-tabs .nav-pills li a {
  display: inline-block;
  width: 223px;
  height: 67px;
  background: url(../images/news-tab-01.png) no-repeat center center;
  background-size: contain;
  transition: .3s all
}
@media only screen and (max-width:767px) {
  body .notice-page .news-tabs .nav-pills li a {
    width: calc(223px * .6);
    height: calc(67px * .6)
  }
}
body .notice-page .news-tabs .nav-pills li:nth-child(2) a {
  background-image: url(../images/news-tab-02.png)
}
body .notice-page .news-tabs .nav-pills li:nth-child(3) a {
  background-image: url(../images/news-tab-03.png)
}
body .notice-page .news-tabs .nav-pills li:nth-child(4) a {
  background-image: url(../images/news-tab-04.png)
}
body .notice-page .news-tabs .nav-pills li.active:nth-child(2) a,
body .notice-page .news-tabs .nav-pills li:hover:nth-child(2) a {
  background-image: url(../images/news-tab-02-hov.png)
}
body .notice-page .news-tabs .nav-pills li.active:nth-child(3) a,
body .notice-page .news-tabs .nav-pills li:hover:nth-child(3) a {
  background-image: url(../images/news-tab-03-hov.png)
}
body .notice-page .news-tabs .nav-pills li.active:nth-child(4) a,
body .notice-page .news-tabs .nav-pills li:hover:nth-child(4) a {
  background-image: url(../images/news-tab-04-hov.png)
}
body .notice-page .news-tabs .nav-pills li.active a,
body .notice-page .news-tabs .nav-pills li:hover a {
  background-image: url(../images/news-tab-01-hov.png)
}
body .notice-page .news-list .tab-pane ul li {
  margin-bottom: 12px
}
@media only screen and (max-width:767px) {
  body .notice-page .news-list .tab-pane ul li {
    margin-bottom: 4px
  }
}
body .notice-page .news-list .tab-pane ul li a {
  display: inline-block;
  width: calc(100% - 202px);
  margin-right: 1em;
  color: #312319;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
body .notice-page .news-list .tab-pane ul li a:hover {
  text-decoration: underline
}
@media only screen and (max-width:767px) {
  body .notice-page .news-list .tab-pane ul li a {
    width: calc(100% - 80px);
    margin-right: 0
  }
}
body .notice-page .pag {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%)
}
body .notice-page .pag nav {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0
}
body .notice-page .pag nav ul li.active a {
  color: #e02323
}
body .notice-page .pag nav ul li a {
  color: #fff;
  padding: 10px 16px;
  transition: .3s all;
  font-size: 24px;
  font-family: noto-serif-tc,serif;
  text-shadow: 0 2px 4px #000
}
body .notice-page .pag nav ul li a:hover {
  color: #e02323
}
.swiper {
  max-width: 554px;
  height: 100%;
  position: relative
}
.swiper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: url(../images/news-img-border.png) no-repeat center center;
  background-size: contain;
  pointer-events: none
}
.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
  content: ''
}
.swiper .swiper-slide {
  border: 0 solid #c3b39e
}
.swiper-pagination {
  bottom: -4vh!important
}
.swiper-pagination .swiper-pagination-bullet {
  background: url(../images/pagination-bullet.png) no-repeat center center;
  background: contain;
  width: 19px;
  height: 19px;
  margin: 0 5px;
  opacity: 1
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: url(../images/pagination-bullet-active.png) no-repeat center center;
  background: contain
}
.slick-track {
  opacity: 1;
  width: 11000px;
  transform: translate3d(-1000px,0,0)
}
.slick-next,
.slick-prev {
  width: 120px;
  height: 123px;
  left: -10%;
  transition: .3s all;
  z-index: 5
}
@media only screen and (max-width:767px) {
  .slick-next,
  .slick-prev {
    width: 60px;
    height: 62px
  }
}
.slick-next::before,
.slick-prev::before {
  content: '';
  position: absolute;
  background: url(../images/arrow.png) center center no-repeat;
  background-size: contain;
  width: 120px;
  height: 123px;
  left: 0;
  top: 0
}
@media only screen and (max-width:767px) {
  .slick-next::before,
  .slick-prev::before {
    width: 60px;
    height: 62px
  }
}
.slick-next:hover::before,
.slick-prev:hover::before {
  background: url(../images/arrow_hov.png) center center no-repeat;
  background-size: contain
}
.slick-next {
  left: inherit;
  right: -10%
}
.slick-next::before {
  transform: rotate(180deg)
}
@media only screen and (max-width:1570px) {
  .slick-next {
    right: 0
  }
}
@media only screen and (max-width:1570px) {
  .slick-prev {
    left: 0
  }
}
.slick-dotted.slick-slider.slick-slider {
  margin: 65px auto;
  max-width: 1000px
}
@media only screen and (max-width:1024px) {
  .slick-dotted.slick-slider.slick-slider {
    max-width: 90vw
  }
}
#s3 .slick-next,
#s3 .slick-prev {
  left: -20%
}
@media only screen and (max-width:1024px) {
  #s3 .slick-next,
  #s3 .slick-prev {
    left: 0
  }
}
#s3 .slick-next {
  left: inherit;
  right: -20%
}
@media only screen and (max-width:1024px) {
  #s3 .slick-next {
    right: 0
  }
}
#s3 .slick-area {
  position: relative
}
#s3 .slick-area::before {
  content: '';
  position: absolute;
  width: 140%;
  height: 140%;
  background: url(../images/frame.png) no-repeat center center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  pointer-events: none
}
#s3 .slick-dotted.slick-slider.slick-slider {
  margin: 65px auto;
  max-width: 700px
}
@media only screen and (max-width:1024px) {
  #s3 .slick-dotted.slick-slider.slick-slider {
    max-width: 90vw
  }
}
#s3 .slick-dotted.slick-slider.slick-slider .slick-dots {
  bottom: -60px
}
.slick-dots {
  display: flex;
  justify-content: center
}
.slick-dots li {
  width: 19px;
  height: 19px;
  background: url(../images/pagination-bullet.png) no-repeat center center;
  background-size: contain
}
.slick-dots li.slick-active,
.slick-dots li:hover {
  background: url(../images/pagination-bullet-active.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[5];
  grid-template-columns: repeat(5,auto);
  justify-content: center;
  bottom: -280px
}
@media only screen and (max-width:900px) {
  #slick-area2 .slick-dots {
    bottom: -212px
  }
}
@media only screen and (max-width:768px) {
  #slick-area2 .slick-dots {
    bottom: -180px
  }
}
@media only screen and (max-width:430px) {
  #slick-area2 .slick-dots {
    bottom: -115px
  }
}
#slick-area2 .slick-dots li {
  width: 115px;
  height: 115px
}
@media only screen and (max-width:768px) {
  #slick-area2 .slick-dots li {
    width: 80px;
    height: 80px
  }
}
@media only screen and (max-width:430px) {
  #slick-area2 .slick-dots li {
    width: 50px;
    height: 50px
  }
}
#slick-area2 .slick-dots li:nth-of-type(1) {
  background: url(../images/s3Btn06.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(1).slick-active,
#slick-area2 .slick-dots li:nth-of-type(1):hover {
  background: url(../images/s3Btn06_hov.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(2) {
  background: url(../images/s3Btn07.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(2).slick-active,
#slick-area2 .slick-dots li:nth-of-type(2):hover {
  background: url(../images/s3Btn07_hov.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(3) {
  background: url(../images/s3Btn08.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(3).slick-active,
#slick-area2 .slick-dots li:nth-of-type(3):hover {
  background: url(../images/s3Btn08_hov.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(4) {
  background: url(../images/s3Btn09.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(4).slick-active,
#slick-area2 .slick-dots li:nth-of-type(4):hover {
  background: url(../images/s3Btn09_hov.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(5) {
  background: url(../images/s3Btn10.png) no-repeat center center;
  background-size: contain
}
#slick-area2 .slick-dots li:nth-of-type(5).slick-active,
#slick-area2 .slick-dots li:nth-of-type(5):hover {
  background: url(../images/s3Btn10_hov.png) no-repeat center center;
  background-size: contain
}
.modal {
  z-index: 999;
  padding-top: 10vh;
  background-color: #00000085
}
@media only screen and (max-width:430px) {
  .modal {
    padding-top: 20vh
  }
}
.modal .modal-content {
  border: none
}
.modal .modal-dialog {
  max-width: 1200px;
  pointer-events: auto
}
.modal .modal-body {
  text-align: center;
  padding: 4%;
  height: 60vh
}
.modal-backdrop {
  display: none
}
button.close {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 60px;
  font-size: 0;
  right: -70px;
  top: 0;
  transition: .2s;
  z-index: 999
}
@media only screen and (max-width:1570px) {
  button.close {
    right: 0
  }
}
button.close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%,-50%) rotate(45deg)
}
button.close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%,-50%) rotate(135deg)
}
@media only screen and (max-width:1570px) {
  #player1 {
    width: 90vw
  }
}
@media only screen and (max-width:900px) {
  #player1 {
    width: 90vw;
    height: 70vh
  }
}
@media only screen and (max-width:800px) {
  #player1 {
    height: 50vh
  }
}
@media only screen and (max-width:900px) {
  #notice-modal .modal-body {
    width: 90vw;
    margin: 2% auto
  }
}
footer {
  margin: 0;
  background: #000;
  font-family: "微軟正黑體","Malgun Gothic",Dotum,Tahoma,sans-serif;
  letter-spacing: normal;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #cfcfcf;
  padding: 60px 0
}
@media only screen and (max-width:767px) {
  footer {
    padding: 20px;
    flex-wrap: wrap
  }
}
footer .contain {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 32px
}
@media only screen and (max-width:767px) {
  footer .contain {
    flex-wrap: wrap
  }
}
footer .contain .copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px
}
@media only screen and (max-width:767px) {
  footer .contain .copyright {
    padding: 8px 30px 8px
  }
}
footer .contain .copyright span {
  color: #787878;
  line-height: 1.5;
  font-size: 14px
}
@media only screen and (max-width:430px) {
  footer .contain .copyright span {
    font-size: 12px
  }
}
footer .contain .textWrap {
  display: flex;
  justify-content: center;
  align-items: center
}
@media only screen and (max-width:767px) {
  footer .contain .textWrap img {
    width: 12vw
  }
}
footer .contain .textWrap span {
  margin-left: 15px;
  line-height: 1.5;
  font-size: 14px;
  color: #787878
}
@media only screen and (max-width:430px) {
  footer .contain .textWrap span {
    font-size: 12px
  }
}
.navbar {
  color: #fff;
  position: fixed;
  width: 100%;
  z-index: 11;
  padding: 40px 40px 0
}
@media only screen and (max-width:767px) {
  .navbar {
    justify-content: end;
    padding: 20px;
    background: linear-gradient(0deg,rgba(0,0,0,0) 0,#000 100%)
  }
}
.navbar .navbar-toggler {
  padding: .5rem .75rem
}
.navbar .navbar-collapse {
  justify-content: end;
  gap: 30px
}
.navbar .navbar-collapse .navbar-nav {
  justify-content: center;
  align-items: center;
  gap: 0
}
@media only screen and (max-width:767px) {
  .navbar .navbar-collapse .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap
  }
}
.navbar .navbar-collapse .navbar-nav li {
  position: relative
}
@media only screen and (max-width:767px) {
  .navbar .navbar-collapse .navbar-nav li {
    width: 80px
  }
}
.navbar .navbar-collapse .navbar-nav li a {
  display: block;
  transition: .3s all
}
.navbar .navbar-collapse .navbar-nav li a:hover {
  filter: brightness(1.5)
}
.sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background: url(../images/sidebar-bg.png) no-repeat center center;
  width: 243px;
  height: 526px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s all
}
@media only screen and (max-width:767px) {
  .sidebar {
    display: none
  }
}
.sidebar.hide {
  opacity: 0!important
}
.sidebar.collapsed {
  transform: translateX(243px) translateY(-50%)
}
.sidebar.collapsed .sidebar-btn {
  background-image: url(../images/sidebar-btn-open.png)
}
.sidebar .content {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px
}
.sidebar .content .group {
  display: flex;
  flex-direction: column;
  gap: 0
}
.sidebar .sidebar-btn {
  position: absolute;
  top: 20px;
  left: -65px;
  width: 66px;
  height: 74px;
  text-align: center;
  background: url(../images/sidebar-btn-close.png) no-repeat center center;
  background-size: contain;
  z-index: 10
}
@-webkit-keyframes float {
  0%,
  100% {
    transform: translateY(0)
  }
  40% {
    transform: translateY(-20px)
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0)
  }
  40% {
    transform: translateY(-20px)
  }
}
@-webkit-keyframes blink {
  0%,
  100% {
    filter: brightness(5);
    opacity: 1
  }
  60% {
    opacity: .2
  }
}
@keyframes blink {
  0%,
  100% {
    filter: brightness(5);
    opacity: 1
  }
  60% {
    opacity: .2
  }
}
@-webkit-keyframes film-scratch {
  0%,
  100% {
    transform: translateX(0);
    opacity: .5
  }
  10% {
    transform: translateX(-1%)
  }
  20% {
    transform: translateX(1%)
  }
  30% {
    transform: translateX(-2%);
    opacity: .75
  }
  40% {
    transform: translateX(3%)
  }
  50% {
    transform: translateX(-3%);
    opacity: .5
  }
  60% {
    transform: translateX(8%)
  }
  70% {
    transform: translateX(-3%)
  }
  80% {
    transform: translateX(10%);
    opacity: .25
  }
  90% {
    transform: translateX(-2%)
  }
}
@keyframes film-scratch {
  0%,
  100% {
    transform: translateX(0);
    opacity: .5
  }
  10% {
    transform: translateX(-1%)
  }
  20% {
    transform: translateX(1%)
  }
  30% {
    transform: translateX(-2%);
    opacity: .75
  }
  40% {
    transform: translateX(3%)
  }
  50% {
    transform: translateX(-3%);
    opacity: .5
  }
  60% {
    transform: translateX(8%)
  }
  70% {
    transform: translateX(-3%)
  }
  80% {
    transform: translateX(10%);
    opacity: .25
  }
  90% {
    transform: translateX(-2%)
  }
}
@-webkit-keyframes grain {
  0%,
  100% {
    transform: translate(0,0)
  }
  10% {
    transform: translate(-1%,-1%)
  }
  20% {
    transform: translate(1%,1%)
  }
  30% {
    transform: translate(-2%,-2%)
  }
  40% {
    transform: translate(3%,3%)
  }
  50% {
    transform: translate(-3%,-3%)
  }
  60% {
    transform: translate(4%,4%)
  }
  70% {
    transform: translate(-4%,-4%)
  }
  80% {
    transform: translate(2%,2%)
  }
  90% {
    transform: translate(-3%,-3%)
  }
}
@keyframes grain {
  0%,
  100% {
    transform: translate(0,0)
  }
  10% {
    transform: translate(-1%,-1%)
  }
  20% {
    transform: translate(1%,1%)
  }
  30% {
    transform: translate(-2%,-2%)
  }
  40% {
    transform: translate(3%,3%)
  }
  50% {
    transform: translate(-3%,-3%)
  }
  60% {
    transform: translate(4%,4%)
  }
  70% {
    transform: translate(-4%,-4%)
  }
  80% {
    transform: translate(2%,2%)
  }
  90% {
    transform: translate(-3%,-3%)
  }
}