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
}
body::-webkit-scrollbar {
  width: 0;
  background: 0 0
}
span {
  vertical-align: baseline
}
button,
ol,
ul {
  list-style: none;
  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 {
  background-color: #23100b;
  font-family: "Noto Sans TC","Microsoft JhengHei","Playfair Display",sans-serif,Arial
}
.sideBtn {
  flex-direction: column;
  z-index: 9;
  position: absolute;
  right: 82%;
  top: 25%;
  background: url(../images/tab-bg.png) no-repeat center center/contain;
  width: 218px;
  height: 431px;
  gap: 14.5px;
  padding-top: 36px
}
@media only screen and (max-width:1440px) {
  .sideBtn {
    position: relative;
    right: unset;
    top: unset
  }
}
.sideBtn li:nth-of-type(1) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(1) a.active img,
.sideBtn li:nth-of-type(1) a:hover img {
  content: url(../images/tab1_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(1) a.active img,
  .sideBtn li:nth-of-type(1) a:hover img {
    content: url(../images/tab1_hover.webp)
  }
}
.sideBtn li:nth-of-type(2) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(2) a.active img,
.sideBtn li:nth-of-type(2) a:hover img {
  content: url(../images/tab2_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(2) a.active img,
  .sideBtn li:nth-of-type(2) a:hover img {
    content: url(../images/tab2_hover.webp)
  }
}
.sideBtn li:nth-of-type(3) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(3) a.active img,
.sideBtn li:nth-of-type(3) a:hover img {
  content: url(../images/tab3_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(3) a.active img,
  .sideBtn li:nth-of-type(3) a:hover img {
    content: url(../images/tab3_hover.webp)
  }
}
.sideBtn li:nth-of-type(4) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(4) a.active img,
.sideBtn li:nth-of-type(4) a:hover img {
  content: url(../images/tab4_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(4) a.active img,
  .sideBtn li:nth-of-type(4) a:hover img {
    content: url(../images/tab4_hover.webp)
  }
}
.sideBtn li:nth-of-type(5) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(5) a.active img,
.sideBtn li:nth-of-type(5) a:hover img {
  content: url(../images/tab5_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(5) a.active img,
  .sideBtn li:nth-of-type(5) a:hover img {
    content: url(../images/tab5_hover.webp)
  }
}
.sideBtn li:nth-of-type(6) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(6) a.active img,
.sideBtn li:nth-of-type(6) a:hover img {
  content: url(../images/tab6_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(6) a.active img,
  .sideBtn li:nth-of-type(6) a:hover img {
    content: url(../images/tab6_hover.webp)
  }
}
.sideBtn li:nth-of-type(7) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(7) a.active img,
.sideBtn li:nth-of-type(7) a:hover img {
  content: url(../images/tab7_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(7) a.active img,
  .sideBtn li:nth-of-type(7) a:hover img {
    content: url(../images/tab7_hover.webp)
  }
}
.sideBtn li:nth-of-type(8) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(8) a.active img,
.sideBtn li:nth-of-type(8) a:hover img {
  content: url(../images/tab8_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(8) a.active img,
  .sideBtn li:nth-of-type(8) a:hover img {
    content: url(../images/tab8_hover.webp)
  }
}
.sideBtn li:nth-of-type(9) a {
  display: block;
  padding: 0;
  transition: .3s all
}
.sideBtn li:nth-of-type(9) a.active img,
.sideBtn li:nth-of-type(9) a:hover img {
  content: url(../images/tab9_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .sideBtn li:nth-of-type(9) a.active img,
  .sideBtn li:nth-of-type(9) a:hover img {
    content: url(../images/tab9_hover.webp)
  }
}
#main {
  position: relative;
  background: url(../images/mainBg.jpg) no-repeat center center/cover;
  text-align: center;
  min-height: 100vh;
  padding: 40px 0 1%;
  overflow: hidden
}
@media only screen and (max-width:767px) {
  #main {
    min-height: 800px
  }
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main {
    background: url(../images/mainBg.webp) no-repeat center center/cover
  }
}
#main .scrollbar {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 60px;
  z-index: 9;
  transition: .3s all
}
@media only screen and (max-width:767px) {
  #main .scrollbar {
    transform: translateX(0);
    left: 5%;
    width: 40px;
    position: fixed
  }
}
#main .scrollbar.hidden {
  display: none
}
#main .scrollbar .movemove {
  -webkit-animation-duration: 2s;
  animation-duration: 2s
}
#main a.outlink {
  position: absolute;
  top: 12px;
  left: 12px
}
@media only screen and (max-width:480px) {
  #main a.outlink {
    width: 40vw
  }
}
#main a.logo {
  position: absolute;
  top: 2vh;
  right: 2vw
}
#main .title {
  max-width: 40vw;
  margin: 0 auto
}
@media only screen and (max-width:480px) {
  #main .title {
    margin-top: 10vh
  }
}
@media only screen and (max-width:767px) {
  #main .title {
    max-width: 80vw
  }
}
#main .scroll {
  position: relative;
  display: block;
  margin: 0 auto 1%;
  z-index: 9;
  display: none
}
@media only screen and (max-width:480px) {
  #main .btnMB,
  #main .btnPC {
    display: none
  }
}
#main .btnMB .btn1,
#main .btnPC .btn1 {
  position: absolute;
  left: 63%;
  top: 48%;
  width: 300px
}
#main .btnMB .btn1:hover img,
#main .btnPC .btn1:hover img {
  content: url(../images/btn1_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main .btnMB .btn1:hover img,
  #main .btnPC .btn1:hover img {
    content: url(../images/btn1_hover.webp)
  }
}
#main .btnMB .btn2,
#main .btnPC .btn2 {
  position: absolute;
  left: 58%;
  top: 30%;
  width: 240px
}
#main .btnMB .btn2:hover img,
#main .btnPC .btn2:hover img {
  content: url(../images/btn2_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main .btnMB .btn2:hover img,
  #main .btnPC .btn2:hover img {
    content: url(../images/btn2_hover.webp)
  }
}
#main .btnMB .btn3,
#main .btnPC .btn3 {
  position: absolute;
  left: 33%;
  top: 30%;
  width: 200px
}
#main .btnMB .btn3:hover img,
#main .btnPC .btn3:hover img {
  content: url(../images/btn3_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main .btnMB .btn3:hover img,
  #main .btnPC .btn3:hover img {
    content: url(../images/btn3_hover.webp)
  }
}
#main .btnMB .UBbtn,
#main .btnPC .UBbtn {
  position: absolute;
  left: 24%;
  top: 50%;
  width: 240px
}
@media only screen and (max-width:1200px) {
  #main .btnMB .UBbtn,
  #main .btnPC .UBbtn {
    left: 5%;
    width: 180px
  }
}
#main .btnMB .UBbtn:hover img,
#main .btnPC .UBbtn:hover img {
  content: url(../images/UBbtn_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main .btnMB .UBbtn:hover img,
  #main .btnPC .UBbtn:hover img {
    content: url(../images/UBbtn_hover.webp)
  }
}
#main .btnMB .btn-main,
#main .btnPC .btn-main {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%,-50%);
  width: 350px
}
#main .btnMB .btn-main:hover img,
#main .btnPC .btn-main:hover img {
  content: url(../images/btn-main_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main .btnMB .btn-main:hover img,
  #main .btnPC .btn-main:hover img {
    content: url(../images/btn-main_hover.webp)
  }
}
#main .btnMB .noticebtn,
#main .btnPC .noticebtn {
  position: absolute;
  left: 36%;
  top: 64%;
  width: 160px
}
#main .btnMB .noticebtn:hover img,
#main .btnPC .noticebtn:hover img {
  content: url(../images/notice_hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #main .btnMB .noticebtn:hover img,
  #main .btnPC .noticebtn:hover img {
    content: url(../images/notice_hover.webp)
  }
}
#main .btnMB {
  display: none
}
@media only screen and (max-width:480px) {
  #main .btnMB {
    display: block
  }
  #main .btnMB .btn-main {
    top: 45%;
    width: 260px
  }
  #main .btnMB .UBbtn {
    left: 0;
    top: 53%
  }
  #main .btnMB .btn2 {
    top: 53%;
    left: 57%;
    width: 200px
  }
  #main .btnMB .noticebtn {
    left: 50%;
    transform: translateX(-50%)
  }
}
@media only screen and (max-width:767px) {
  .mt-5,
  .my-5 {
    margin-top: 1.5rem!important
  }
}
section {
  position: relative;
  text-align: center
}
section h2 {
  position: relative;
  margin: 0 auto;
  padding-right: 12px
}
section h3 {
  position: relative;
  z-index: 1
}
section p {
  font-size: 1.2rem;
  font-weight: 400;
  color: #541006;
  line-height: 2rem;
  margin: 32px 0 0
}
@media only screen and (max-width:480px) {
  section p {
    font-size: 1.1rem
  }
}
section p span {
  font-size: 1.1rem
}
section p.time {
  color: #3a3332
}
@media only screen and (max-width:767px) {
  section p.time {
    color: #f4f4f4;
    mix-blend-mode: difference
  }
}
section p.key {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1rem;
  border: solid 2px #541006;
  border-radius: 20px;
  padding: .8% 1%
}
section .ctnflex {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 99vw;
  margin: 0 auto
}
section .ctnflex > picture {
  margin: 1%
}
section .rewards {
  position: relative;
  display: flex;
  margin: 0 auto 2%
}
@media only screen and (max-width:800px) {
  section .rewards {
    display: block
  }
}
section .rewards .award {
  display: flex;
  align-items: center;
  padding: 1% 0;
  margin: 0 1%
}
@media only screen and (max-width:800px) {
  section .rewards .award {
    justify-content: center
  }
}
section .rewards .award p {
  width: 50%;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6rem;
  text-align: left;
  margin: 0 4%
}
section .rewards .award p span {
  color: #e10301;
  font-size: 1rem;
  font-weight: 400
}
section .rewards .award p span.num {
  color: #fff;
  background-color: #e10301;
  border-radius: 12px;
  padding: 0 10px
}
section > div {
  width: 100%;
  min-height: 100vh;
  padding: 4% 0
}
@media only screen and (max-width:1440px) {
  section > div {
    min-height: unset
  }
}
section > div::after,
section > div::before {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none
}
@media only screen and (max-width:1440px) {
  section > div::after,
  section > div::before {
    display: none
  }
}
section > div > .frame {
  position: relative;
  max-width: 1700px;
  height: 1220px;
  background: url(../images/frame.png) no-repeat center center/cover;
  padding: 56px 0 20px;
  margin: 1% auto
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  section > div > .frame {
    background: url(../images/frame.webp) no-repeat center center/cover
  }
}
@media only screen and (max-width:1440px) {
  section > div > .frame {
    height: unset;
    padding: 48px 12px 90px
  }
}
section > div > .frame > .popbtn {
  position: absolute;
  top: -6%;
  right: 6%;
  z-index: 8
}
section > div > .frame > .popbtn:hover {
  filter: hue-rotate(20deg)
}
@media only screen and (max-width:1200px) {
  section > div > .frame > .popbtn {
    right: 1%
  }
}
@media only screen and (max-width:800px) {
  section > div > .frame > .popbtn {
    position: relative;
    top: -50px;
    right: unset;
    margin: 0 auto
  }
}
@media only screen and (max-width:1200px) {
  section > div > .frame > .popbtn img {
    max-height: 40vh
  }
}
@media only screen and (max-width:480px) {
  section > div > .frame > .popbtn img {
    max-height: 30vh
  }
}
.main-tab {
  background: url(../images/bg1.jpg) no-repeat center center/cover;
  display: flex
}
@media only screen and (max-width:1440px) {
  .main-tab {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0
  }
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  .main-tab {
    background: url(../images/bg1.webp) no-repeat center center/cover
  }
}
#tab3 .ctnflex {
  max-width: 1080px;
  justify-content: center;
  margin: 0 auto
}
#tab3 .ctnflex ul {
  justify-content: center;
  gap: 4px
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(1) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(1) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(1) a.active img,
#tab3 .ctnflex ul li:nth-of-type(1) a:hover img {
  content: url(../images/s3-tab-01-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(1) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(1) a:hover img {
    content: url(../images/s3-tab-01-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(2) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(2) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(2) a.active img,
#tab3 .ctnflex ul li:nth-of-type(2) a:hover img {
  content: url(../images/s3-tab-02-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(2) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(2) a:hover img {
    content: url(../images/s3-tab-02-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(3) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(3) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(3) a.active img,
#tab3 .ctnflex ul li:nth-of-type(3) a:hover img {
  content: url(../images/s3-tab-03-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(3) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(3) a:hover img {
    content: url(../images/s3-tab-03-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(4) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(4) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(4) a.active img,
#tab3 .ctnflex ul li:nth-of-type(4) a:hover img {
  content: url(../images/s3-tab-04-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(4) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(4) a:hover img {
    content: url(../images/s3-tab-04-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(5) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(5) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(5) a.active img,
#tab3 .ctnflex ul li:nth-of-type(5) a:hover img {
  content: url(../images/s3-tab-05-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(5) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(5) a:hover img {
    content: url(../images/s3-tab-05-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(6) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(6) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(6) a.active img,
#tab3 .ctnflex ul li:nth-of-type(6) a:hover img {
  content: url(../images/s3-tab-06-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(6) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(6) a:hover img {
    content: url(../images/s3-tab-06-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(7) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(7) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(7) a.active img,
#tab3 .ctnflex ul li:nth-of-type(7) a:hover img {
  content: url(../images/s3-tab-07-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(7) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(7) a:hover img {
    content: url(../images/s3-tab-07-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(8) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(8) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(8) a.active img,
#tab3 .ctnflex ul li:nth-of-type(8) a:hover img {
  content: url(../images/s3-tab-08-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(8) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(8) a:hover img {
    content: url(../images/s3-tab-08-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(9) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(9) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(9) a.active img,
#tab3 .ctnflex ul li:nth-of-type(9) a:hover img {
  content: url(../images/s3-tab-09-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(9) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(9) a:hover img {
    content: url(../images/s3-tab-09-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(10) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(10) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(10) a.active img,
#tab3 .ctnflex ul li:nth-of-type(10) a:hover img {
  content: url(../images/s3-tab-10-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(10) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(10) a:hover img {
    content: url(../images/s3-tab-10-hover.webp)
  }
}
@media only screen and (max-width:767px) {
  #tab3 .ctnflex ul li:nth-of-type(11) {
    width: 40%
  }
}
#tab3 .ctnflex ul li:nth-of-type(11) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab3 .ctnflex ul li:nth-of-type(11) a.active img,
#tab3 .ctnflex ul li:nth-of-type(11) a:hover img {
  content: url(../images/s3-tab-11-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab3 .ctnflex ul li:nth-of-type(11) a.active img,
  #tab3 .ctnflex ul li:nth-of-type(11) a:hover img {
    content: url(../images/s3-tab-11-hover.webp)
  }
}
#tab4 .ctnbase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px
}
#tab6 .ctnflex {
  max-width: 1080px;
  justify-content: center;
  margin: 0 auto
}
#tab6 .ctnflex ul {
  justify-content: center;
  gap: 4px
}
#tab6 .ctnflex ul li:nth-of-type(1) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab6 .ctnflex ul li:nth-of-type(1) a.active img,
#tab6 .ctnflex ul li:nth-of-type(1) a:hover img {
  content: url(../images/s6-tab-01-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab6 .ctnflex ul li:nth-of-type(1) a.active img,
  #tab6 .ctnflex ul li:nth-of-type(1) a:hover img {
    content: url(../images/s6-tab-01-hover.webp)
  }
}
#tab6 .ctnflex ul li:nth-of-type(2) a {
  display: block;
  padding: 0;
  transition: .3s all
}
#tab6 .ctnflex ul li:nth-of-type(2) a.active img,
#tab6 .ctnflex ul li:nth-of-type(2) a:hover img {
  content: url(../images/s6-tab-02-hover.png)
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #tab6 .ctnflex ul li:nth-of-type(2) a.active img,
  #tab6 .ctnflex ul li:nth-of-type(2) a:hover img {
    content: url(../images/s6-tab-02-hover.webp)
  }
}
#tab7 .ctnbase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px
}
.modal {
  z-index: 999;
  background-color: #00000085
}
.modal .modal-content {
  background: 0 0;
  border: none
}
.modal .modal-dialog {
  pointer-events: auto
}
.modal .modal-body {
  text-align: center
}
.modal-open .modal {
  overflow-y: inherit
}
.modal-backdrop {
  display: none
}
button.close {
  position: absolute;
  display: inline-block;
  width: 64px;
  height: 72px;
  font-size: 0;
  right: 8%;
  transition: .2s;
  z-index: 9;
  opacity: .8
}
@media only screen and (max-width:1200px) {
  button.close {
    opacity: 1;
    right: 0
  }
}
button.close:hover {
  opacity: 1!important
}
@media only screen and (max-width:768px) {
  .modal .modal-dialog {
    max-width: unset;
    height: unset
  }
}
.modal .modal-dialog .modal-body {
  overflow-x: hidden
}
.modal .modal-dialog .modal-body::-webkit-scrollbar {
  width: 8px;
  border-radius: 8px
}
.modal .modal-dialog .modal-body::-webkit-scrollbar-track {
  background-color: #f4f4f4;
  overflow: hidden;
  border-radius: 8px
}
.modal .modal-dialog .modal-body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #c9b0a3
}
.modal .modal-dialog .modal-body h4 {
  position: relative;
  z-index: 1;
  margin: 4% auto
}
.modal .modal-dialog .modal-body ul.note {
  max-width: 90%;
  font-size: 1.1rem;
  line-height: 2rem;
  list-style: disc;
  text-align: left;
  font-weight: 500;
  margin: 0 auto
}
@media only screen and (max-width:480px) {
  .modal .modal-dialog .modal-body ul.note {
    font-size: 16px;
    line-height: 20px
  }
}
.modal .modal-dialog .modal-body ul.note li {
  color: #541006
}
@media only screen and (max-width:480px) {
  .modal .modal-dialog .modal-body ul.note li {
    margin-bottom: 2%
  }
}
.modal .modal-dialog .modal-body ul.note li span {
  color: #e10301
}
.modal#btnModal1 h4 {
  position: relative
}
.modal#btnModal1 h4 .hover-detail {
  position: absolute;
  bottom: 160px;
  left: 0;
  width: 100%;
  height: 50px;
  opacity: 0;
  transition: .3s
}
.modal#btnModal1 h4 .hover-detail:hover {
  opacity: 1
}
.modal#btnModal1 h4 .hover-detail img {
  position: absolute;
  top: -210px;
  left: 50%;
  transform: translateX(-50%)
}
.modal#btnModal2 .modal-dialog .modal-body {
  background: 0 0
}
#pop1 .ctnflex {
  display: flex;
  justify-content: center
}
@media only screen and (max-width:480px) {
  #pop1 .ctnflex {
    flex-wrap: wrap
  }
}
#pop1 .ctnflex ul.ctnlist {
  min-width: 340px;
  border: solid 1px #edddd0
}
#pop1 .ctnflex ul.ctnlist:first-of-type {
  border-right-color: #d8c9bc
}
#pop1 .ctnflex ul.ctnlist li {
  background-color: #fcf7f3;
  color: #541006;
  line-height: 40px
}
#pop1 .ctnflex ul.ctnlist li:nth-of-type(even) {
  background-color: #f4e5d8
}
#popup2 .modal-xl {
  max-width: 1560px
}
#popup2 .modal-body {
  padding: 2rem 1rem
}
#popup2 .modal-body .main {
  position: relative
}
#popup2 .modal-body .main::before {
  content: '';
  position: absolute;
  bottom: -27%;
  right: 10%;
  width: 445px;
  height: 559px;
  max-width: 40vw;
  background: url(../images/popup2-deco.png) no-repeat center center/contain
}
@supports (background-image:url("data:image/webp;base64,UklGRhYAAABXRUJQVlA4WAoAAAAgAAAA")) {
  #popup2 .modal-body .main::before {
    background: url(../images/popup2-deco.webp) no-repeat center center/contain
  }
}
@media only screen and (max-width:767px) {
  #popup2 .modal-body .main::before {
    height: 45vw;
    bottom: -28%;
    right: -10%
  }
}
#popup2 .modal-body .d-flex {
  gap: 12px
}
#popup2 .modal-body .bg {
  position: absolute;
  left: 50%;
  transform: translateX(-54%);
  width: 100%;
  top: 0;
  z-index: -1
}
@media only screen and (max-width:1440px) {
  #popup2 .modal-body .bg {
    width: 220%
  }
}
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
@-webkit-keyframes willow {
  0% {
    transform-origin: right top;
    transform: skew(0deg,0deg)
  }
  50% {
    transform-origin: right top;
    transform: skew(8deg,0deg)
  }
  100% {
    transform-origin: right top;
    transform: skew(0deg,0deg)
  }
}
@keyframes willow {
  0% {
    transform-origin: right top;
    transform: skew(0deg,0deg)
  }
  50% {
    transform-origin: right top;
    transform: skew(8deg,0deg)
  }
  100% {
    transform-origin: right top;
    transform: skew(0deg,0deg)
  }
}
.willow {
  -webkit-animation: willow;
  animation: take 10s infinite linear
}
@-webkit-keyframes bubble {
  0% {
    transform-origin: center center;
    transform: translate(0,0)
  }
  50% {
    transform-origin: center center;
    transform: translate(0,16px)
  }
  100% {
    transform-origin: center center;
    transform: translate(0,0)
  }
}
@keyframes bubble {
  0% {
    transform-origin: center center;
    transform: translate(0,0)
  }
  50% {
    transform-origin: center center;
    transform: translate(0,16px)
  }
  100% {
    transform-origin: center center;
    transform: translate(0,0)
  }
}
.movemove {
  -webkit-animation: bubble 5s infinite ease-in-out;
  animation: bubble 5s infinite ease-in-out
}
@-webkit-keyframes rotate {
  0% {
    transform-origin: center center;
    transform: rotate(0)
  }
  50% {
    transform-origin: center center;
    transform: rotate(8deg)
  }
  100% {
    transform-origin: center center;
    transform: rotate(0)
  }
}
@keyframes rotate {
  0% {
    transform-origin: center center;
    transform: rotate(0)
  }
  50% {
    transform-origin: center center;
    transform: rotate(8deg)
  }
  100% {
    transform-origin: center center;
    transform: rotate(0)
  }
}
.btn-main img {
  -webkit-animation: rotate 5s infinite ease-in-out;
  animation: rotate 5s infinite ease-in-out
}
.animation-delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}
.animation-delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s
}
.animation-delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s
}