@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+TC:wght@400;900&display=swap');

/* reset start */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:link, :visited , ins {text-decoration: none;}
/* reset end */






:root{
  --c00: #000;
  --c01: #8c6642;
  --c02: #a37a51;
  --c03: #ddc095;
  --c04: #faf6d7;
  --c05: #fff;
  --c06: #252934;
  --c07: #060912;
  --num: #33cccc;
  --topicH: 4.6vw;
  --fontSansSerif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}




*,*::before,*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
html, body{
  width: 100%;
  height: 100%;
  font-family: 'Noto Sans TC', sans-serif;
}
.noscroll{
  overflow: hidden;
}
.scrollY{
  overflow-x: hidden;
  overflow-y: scroll;
}
.wrap{
  width: 100%;
}
.wrap::before, .wrap::after{
  content: "";
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -2;
}
.wrap::before{
  background: linear-gradient(180deg, var(--c02),  var(--c03),  var(--c04));
  background-repeat: repeat;
  background-attachment: fixed;
}
.wrap::after{
  opacity: 0.8;
  background-image:  linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
}
.menuToggle{
  display: none;
}
.header{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 0 60px;
  transition: .6s;
  background: var(--c05);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.header .menu{
  display: flex;
  justify-content: center;
  align-items: center;
}
.header a{
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c01);
  padding: 8px 14px;
  margin: 0 4px;
  border-radius: 20px;
  transition: all 0.5s;
  opacity: .5;
  position: relative;
}
.header a.active,
.header a:hover{
  opacity: 1;
}
.header a:hover::after,
.header a.active::after{
  content: "";
  width: 20%;
  height: 3px;
  background: var(--c01);
  position: absolute;
  bottom: 0;
  left: 14px;
}
.directions .header,
.header.sticky{
  height: 40px;
  position: fixed;
  top: 0;
}
.directions .header a,
.header.sticky a{
  font-size: .9rem;
  font-weight: 400;
  color: var(--c01);
  transition: all 0.5s;
}
.btn_more,
.btn_playn,
.btn_sign,
.ft_btn a.btn_sign,
.ft_btn a.btn_topup,
.header a.btn_playn,
.header a.btn_sign{
  color: var(--c05);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-size: 0.85rem;
  text-shadow: 1px 1px 0 rgba(0, 27, 59, 0.48);
  opacity: 1;
  transition: all .2s;
}
.header a.btn_playn::after,
.header a.btn_sign::after{
  content: none;
}
.btn_playn,
.ft_btn a.btn_topup,
.header a.btn_playn{
  background-image: linear-gradient(110deg, #00dda4, #03a57b);
  box-shadow: 0 8px 16px 0 rgba(3, 165, 123, 0.48), inset -2px -4px 2px 0 rgba(0, 221, 164, 0.72), inset 0 2px 1px 0 rgba(255, 253, 247, 0.48);
}
.btn_sign,
.ft_btn a.btn_sign,
.header a.btn_sign{
  background-image: linear-gradient(135deg, #ff8700, #ff3700);
  box-shadow: 0 8px 16px 0 rgba(251, 87, 35, 0.48), inset 0 -3px 0 0 rgba(251, 141, 35, 0.72), inset 0 2px 4px 0 rgba(250, 250, 250, 0.32);
}
.ft_btn a.btn_topup:hover,
.ft_btn a.btn_sign:hover,
.header a.btn_playn:hover,
.header a.btn_sign.active,
.header a.btn_sign:hover{
  background-image: linear-gradient(109deg, rgba(38, 61, 89, 0.72), #001b3b 99%);
  box-shadow: 0 8px 16px 0 rgba(0, 27, 59, 0.32), inset 0 -3px 0 0 rgba(38, 61, 89, 0.72), inset 0 2px 4px 0 rgba(250, 250, 250, 0.32);
}


.wrap .header .blog,
.wrap .header .game,
.wrap .header .idxlink{
  display: none;
}
.wrap:is(.blog, .dire_page, .addvalue, .about_game, .login, .operate, .addto) .header .mulist:is(.game, .blog),
.wrap.idx .header .mulist.idxlink {
  display: flex;
}
.btn_more{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #452201;
  font-size: 1rem;
  font-weight: 800;
  text-shadow: none;
  width: 260px;
  height: 48px;
  padding: 8px 16px;
  margin: 16px auto 32px auto;
  background-image: linear-gradient(135deg, #fafafa, #e9f0f4);
  box-shadow: 0 8px 16px 0 rgba(69, 34, 1, 0.32), inset -2px -4px 2px 0 rgba(127, 63, 2, 0.16), inset 0 2px 1px 0 #fafafa;
  border-radius: 16px;
  cursor: pointer;
}
.btn_more:hover{
  transform: scale(1.1);
}
.logo{
  width: 260px;
  min-width: 130px;
  margin-right: auto;
  position: fixed;
  top: 0;
  left: -20px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.logo img{
  width: 100%;
  height: 100%;
}

@media 
only screen and (max-width: 1200px), 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (        min-device-pixel-ratio: 2) {
  .header.sticky,  .header{
    height: 40px;
    bottom: unset;
    background: transparent;
  }
  .header .menuToggle{
    display: block;
    width: 40px;
    height: 32px;
    position: fixed;
    top: calc(3% + 22px);
    right: calc(3% + 22px);
    cursor: pointer;
    z-index: 2;
    -webkit-touch-callout: none;
    opacity: 0;
  }
  .menuToggle ~ span{
    display: block;
    width: 33px;
    height: 4px;
    background: var(--c00);
    border-radius: 4px;
    z-index: 1;
    transform-origin: 4px 0;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    position: fixed;
    right: calc(3% + 26px);
  }
  .menuToggle ~ span:nth-child(4){
    top: calc(3% + 28px);
  }
  .menuToggle ~ span:nth-child(5){
    top: calc(3% + 38px);
  }
  .menuToggle ~ span:nth-child(6){
    top: calc(3% + 48px);
  }
  .header .menu{
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-top: -40px;
    padding: 40px;
    padding-top: 80px;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    background: rgba(255,255,255,0.68);
    transform-origin: 0% 0%;
    transform: translate(0, -100%);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: fixed;
    top: 40px;
    overflow: hidden;
  }
  .header .menu a:not(.btn_playn,.btn_sign){
    font-size: 1.5rem;
    font-weight: 800;
    width: 100%;
    padding: 20px 14px;
  }
  .header .menu .btn_playn,
  .header .menu .btn_sign{
    margin: 14px;
  }
  .menuToggle:checked ~ span{
  opacity: 1;
  transform: rotate(45deg) translate(2px, -1px);
  background: var(--c01);
  }
  .menuToggle:checked ~ span:nth-last-child(3){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
  }
  .menuToggle:checked ~ span:nth-last-child(2){
    transform: rotate(-45deg) translate(0, -1px);
  }
  .menuToggle:checked ~ .menu{
    transform: none;
  }
}


.gotop{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: -40px;
  position: fixed;
  right: 3%;
  bottom: 94px;
  z-index: 6;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gotop span{
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.gotop::before {
  display: flex;
  content: "";
  width: 1px;
  height: 44px;
  background: #f5f5f5;
  margin: 8px auto;
}
.gotop .icon{
  pointer-events: none;
}
@-webkit-keyframes glitch2 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-1px, 1px) skewX(-10deg);
  }
  40% {
    transform: translate(-1px, -1px) skewX(-2deg);
  }
  60% {
    transform: translate(1px, 1px) skewX(-15deg);
  }
  80% {
    transform: translate(1px, -1px) skewX(-4deg);
  }
  to {
    transform: translate(0);
  }
}
@keyframes glitch2 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-1px, 1px) skewX(-10deg);
  }
  40% {
    transform: translate(-1px, -1px) skewX(-2deg);
  }
  60% {
    transform: translate(1px, 1px) skewX(-15deg);
  }
  80% {
    transform: translate(1px, -1px) skewX(-4deg);
  }
  to {
    transform: translate(0);
  }
}
.gotop:hover .icon {
  -webkit-animation: glitch2 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
          animation: glitch2 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.gotop:hover .line span b {
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
}
.gotop .icon {
  display: flex;
  justify-items: center;
  align-items: center;
  background: #f5f5f5;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transition: all 0.5 ease;
}
.gotop .icon .rock {
  width: 37px;
  transform: rotate(-44deg);
  margin: 0 auto;
}
.gotop .line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  margin: 0 auto;
}
.gotop .line span {
  display: block;
  position: relative;
  width: 3px;
  height: 18px;
  overflow: hidden;
}
@-webkit-keyframes rock {
  0% {
    height: 0;
    transform: translateY(-100%);
  }
  70%, 100% {
    height: 18px;
    transform: translateY(100%);
  }
}
@keyframes rock {
  0% {
    height: 0;
    transform: translateY(-100%);
  }
  70%, 100% {
    height: 18px;
    transform: translateY(100%);
  }
}
.gotop .line span b {
  position: absolute;
  width: 3px;
  height: 18px;
  margin-right: 4px;
  border-radius: 10px;
  background: #f5f5f5;
  -webkit-animation-name: rock;
          animation-name: rock;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-direction: normal;
          animation-direction: normal;
}
.gotop .line span.one {
  top: 0;
}
.gotop .line span.one b {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.gotop .line span.two {
  top: 6px;
  margin-left: 4px;
}
.gotop .line span.three {
  top: 4px;
  margin-left: 4px;
}
.gotop .line span.three b {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.gotop.show{
  opacity: 1;
}
/*輪播圖*/
.carousel-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.carousel-images{
  display: flex;
  transition: transform 1s ease-in-out;
}
.carousel-images .img_wrap{
  display: block;
  width: 100%;
  min-width: 100%;
  height: 100vh;
}

.carousel-images .img_wrap img{
  display: block;
  width: 100%;
  min-width: 100%;
  height: 100vh;
  object-fit: cover;
}

/*大區塊*/
.sn{
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.sn.cont_1 > h1{
  width: 1px;
  height: 1px;
  margin-top: -1px;
}
.sn .cont_box{
  width: 80%;
  height: calc(100% - 40px);
  margin: 40px auto auto;
  position: relative;
}
.sn.cont_1 .qr_box{
  width: 80%;
  min-height: 140px;
  position: absolute;
  left: 12.5vw;
  bottom: 8.3vw;
  z-index: 2;
}
.sn.cont_1 .qr_box .mobile{
  display: none;
}
.sn.cont_1 .qr_box img{
  height: 140px;
}
.sn.cont_1 .dog{
  background: url('../images/banner/pc/dog.webp?v=250423');
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 260px;
  height: 260px;
  position: absolute;
  left: 0;
  bottom: 60px;
  z-index: 10;
}
.sn.cont_1 .slogan{
  width: 34vw;
  height: 8vw;
  background: url('../images/slogan.webp?v=231012');
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: absolute;
  left: 12.5vw;
  top: 25%;
  z-index: 3;
}
.sn.cont_1 .line_pn{
  display: block;
  width: 38vw;
  height: 8vw;
  position: absolute;
  left: 12.5vw;
  top: calc(25% + 10vw);
  z-index: 3;
}
.sn.cont_1 .mobile_btn{
  width: 32vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: calc(25% + 16.2vw);
  z-index: 3;
}
.sn.cont_1 .ios,
.sn.cont_1 .android{
  padding: 8px  0 0 36px;
}
.sn.cont_1 .mobile_btn img{
  width: 100%;
}

.sn.cont_1 .enter{
  width: 100%;
  height: 100%;
}
.sn .title{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.sn .title p{
  transform: rotate(90deg);
  transform-origin: 0;
  position: absolute;
  z-index: -1;
  white-space:nowrap;
}
.sn .title h2{
  color: var(--c04);
  font-size: 8rem;
  font-weight: bolder;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  text-shadow: 4px 4px 10px var(--c01);
  padding-top: 3rem;
}
.sn .title p{
  font-family: 'Archivo Black', sans-serif;
  font-size: 10rem;
  font-style: italic;
  -webkit-text-stroke: 3px var(--c03);
  color: transparent;
}

@media only screen and (max-width: 1440px) {
  .sn.cont_1 .dog{
    bottom: 0;
  }
  .sn.cont_1 .qr_box{
    top: calc(25% + 24vw);
  }
}
@media only screen and (max-width: 1280px) {
  .sn.cont_1 .dog{
    display: none;
  }
  .sn.cont_1 .line_pn{
    top: unset;
    left: 10vw;
    bottom: 31vw;
  }
  .sn.cont_1 .qr_box{
    top: unset;
    left: 10vw;
    bottom: 13vw;
  }
}
@media only screen and (max-width: 1280px) and (orientation : landscape)  {
  .sn.cont_1 a{
    width: 40vw;
    height: 6.5vw;
  }
}
@media only screen and (max-width: 912px) and (max-height: 1368px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .sn.cont_1 .slogan{
    width: 60vw;
    height: 16vw;
  }
  .sn.cont_1 a{
    width: 66vw;
    height: 11.5vw;
    top: calc(25% + 16vw);
  }
}

.games,
.topic,
.partner,
.features{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 20%;
  padding-top: 5.2vw;
  padding-bottom: 5vw;
}
.features .item{
  width: 50%;
}
.features .item:nth-child(2n){
  padding-left: 24px;
}
.features img{
  width: 14vw;
}
.features .text{
  width: 70%;
}
.features h4{
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 8px;
}
.features p{
  opacity: 0.72;
  line-height: 1.67;
}
.kim.baby01{
  width: 330px;
  height: 508px;
  background-image: url('../images/logo/baby01.webp?v=231012');
  background-size: cover;
  position: absolute;
  top: 19vw;
  left: -190px;
}
.kim.baby02{
  width: 600px;
  height: 680px;
  background-image: url('../images/logo/baby02.webp?v=231012');
  background-size: cover;
  position: absolute;
  top: 18vw;
  left: -190px;
}
@media only screen and (max-width: 1710px) and (orientation : landscape)  {
  .games,
  .topic,
  .partner,
  .features{
    padding-top: 4vw;
    padding-bottom: 2vw;
  }
  .features .text{
    width: 90%;
  }
  .features img{
    width: 12vw;
  }
}

@media only screen and (max-width: 912px) and (max-height: 1368px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .kim.baby01{
    top: unset;
  }
  .features .item{
    width: 100%;
    padding-left: 60px!important;
    padding-bottom: 40px;
  }
}

@media only screen and (max-height: 800px) {
  .kim.baby01{
    top: 14vw;
  }
}

@media only screen and (max-width: 768px) and (max-height: 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .kim.baby01{
    top: 78%;
    left: -160px;
  }
  .features .item{
    width: 100%;
    padding-left: 60px!important;
    padding-bottom: 40px;
  }
}

/*新手任務*/
.tab-button {
  display: none;
}
.features.task{
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 2vw;
  padding-bottom: 2vw;
  position: relative;
}
.features.task .old,
.features.task .new{
  position: relative;
}
.features.task .character {
  position: absolute;
  height: 5.2vw;
  width: auto;
  transform: translate(-50%, -80%);
  pointer-events: none;
  z-index: 5;
}
.features.task img{
  width: auto;
  height: calc(100vh - 4vw);
}
.features.task .title{
  width: 80px;
  height: 80px;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
}
/*動畫*/
.features.task .animate{
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.features.task .animate .hand{
  width: 80px;
  height: 80px;
  background: url('../images/task/hand.png?v=20250525') no-repeat;
  background-size: contain;
  animation-name: hand;
  animation-iteration-count: 2;
  animation-duration: 5s;
  position: absolute;
  top: 11vw;
  right: 0.6vw;
}
@keyframes hand{
    0%{
        top: 0;
        right: 100%;
    }
    70%, 100%{
        top: 11vw;
        right: 0.6vw;
    }
} 
.features.task .animate .circle{
  width: 80px;
  height: 80px;
  animation-name: circle;
  animation-iteration-count: 2;
  animation-duration: 5s;
  position: absolute;
  top: 10vw;
  right: 0.6vw;
  z-index: 2;
}
@keyframes circle{
    0%, 50%{
      opacity: 0;
    }
    51%{
      opacity: 1;
    }
    100%{
      opacity: 1;
    }
} 
.features.task .animate .circle span{
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgb(255, 255, 255,0.5), rgb(255, 255, 0, 0.5));
  border-radius: 50%;
  animation-name: circle_span;
  animation-iteration-count: infinite;
  animation-duration: 0.5s;
}
@keyframes circle_span{
    0%{
      transform: scale(0.5);
    }
    100%{
      transform: scale(1);
    }
}
.fadeOut {
  animation: fadeOut 12s forwards; /* forwards 保留動畫結尾狀態 */
}
@keyframes fadeOut {
  0%,90%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.features.task .lvbtn,
.features.task .road {
  padding: 11vw 4.375vw 3.281vw 4.794vw;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.features.task .road svg{
  width: 100%;
  height: 100%;  
}
.features.task .lvbtn {
  z-index: 3;
}
.features.task .lvbtn button {
  width: 3vw;
  height: 2.5vw;
  border: 0;
  background: url('../images/task/button.png?v=20250521') transparent no-repeat center;
  background-size: cover;
  border-radius: 50%;
  transition: all 0.3s;
  position: relative;
  cursor: pointer;
}
.features.task .lvbtn button:hover,
.features.task .lvbtn button.active {
  background: url('../images/task/button_active.png?v=20250521') transparent no-repeat center;
  background-size: cover;
}
.features.task .lvbtn button::after,
.features.task .lvbtn button::before{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  content: attr(data-num);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bolder;
  padding-bottom: 1rem;
  padding-right: 0.4rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.features.task .lvbtn button::after{
  -webkit-text-stroke: 5px #6b91b5;
  text-stroke: 5px #6b91b5;
  z-index: 1;
}
.features.task .lvbtn button:hover::after,
.features.task .lvbtn button.active::after{
  -webkit-text-stroke: 5px #ffa84a;
  text-stroke: 5px #ffa84a;
  z-index: 1;
}
/* .features.task .lvbtn button span{
  width: 80%;
  height: 80%;
  background: url('../images/task/arrow_down.webp?v=20250522') transparent no-repeat center;
  background-size: cover;
  animation-name: arrow_down;
  animation-iteration-count: infinite;
  animation-duration:1s;
  position: absolute;
  left: 10%;
  bottom: calc(100% + 4px);
}
@keyframes arrow_down{
    0%{
        bottom:  calc(100% + 24px);
    }
    50%{
        bottom: calc(100% + 4px);
    }
    100%{
        bottom:  calc(100% + 24px);
    }
} */
.features.task .lvbtn button svg{
  display: block;
  width: 150%;
  height: 150%;
  pointer-events: none; 
  margin-top: -25%;
  margin-left: -30%;
  opacity: 0;
}
.features.task .lvbtn button:hover svg,
.features.task .lvbtn button.active svg{
    opacity: 1;
}
.features.task .lvbtn button:nth-child(1){
  position: absolute;
  left: 80%;
  top: 25%;  
}
.features.task .lvbtn button:nth-child(2){
  position: absolute;
  left: 10%;
  top: 40%;  
}
.features.task .lvbtn button:nth-child(3){
  position: absolute;
  right: 18%;
  bottom: 43.5%;  
}
.features.task .lvbtn button:nth-child(4){
  position: absolute;
  left: 10%;
  bottom: 32%;  
}
.features.task .lvbtn button:nth-child(5){
  position: absolute;
  right: 4%;
  bottom: 17%;  
}
.features.task .lvbtn button:nth-child(6){
  position: absolute;
  left: 21%;
  bottom: 6%;  
}
.features.task .old .lvbtn button:nth-child(4){
  position: absolute;
  left: 21%;
  bottom: 6%;  
}
.features.task .old{
  margin-left: 6vw;
}
@media only screen and (max-width: 1410px){
  .features.task .old{
    margin-left: 1vw;
  }
}
@media only screen and (max-width: 1300px){
  .tab-content { display: none;  }
  .tab-content.active { display: block; }
  .tab-button { cursor: pointer; }
  .features.task .map{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 5vw;
    min-height: 3vw;
    position: absolute;
    top: 130px;
    left: 20%;
    z-index: 3;
  }
  .features.task .map .tab-button{
    display: inline-flex;
    width: 5vw;
    height: 5vw;
    background: transparent;
    border: 0;
    margin-bottom: 2vw;
    margin-left: 2vw;
    filter: saturate(0);
  }
  .features.task .map .tab-button.active{
    filter: saturate(1);
  }
  .features.task .map .tab-button:nth-child(1){
    background: url('../images/task/new.png?v=20250522') no-repeat center;
    background-size: contain;
  }
  .features.task .map .tab-button:nth-child(2){
    background: url('../images/task/old.png?v=20250522') no-repeat center;
    background-size: contain;
  }
  .features.task .old{
    margin-left: 0;
  }
}
@media only screen and (max-height: 800px)  {
  .features.task .lvbtn,
  .features.task .road {
    padding: 10vw 4.375vw 1.281vw 5vw;
  }
}
@media only screen and (max-height: 700px)  {
  .features.task .lvbtn,
  .features.task .road {
    padding: 10vw 4.375vw 1.281vw 5vw;
  }
}
@media only screen and (max-height: 600px)  {
  .features.task .lvbtn,
  .features.task .road {
    padding: 6.8vw 2.375vw 1.281vw 4vw;
  }
}
/*新手-彈窗*/
.custom-modal {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
}
.custom-modal .modal-content {
  color: #424242;
  width: 60vw;
  max-width: 600px;
  min-height: 300px;
  background-color: #ffff89;
  box-shadow: inset 2px 4px 4px #ffffe2, inset -4px -4px 4px #a1a10f;
  border-radius: 2vw;
  padding: 1.8vw;
  position: relative;
}
.custom-modal .modal-content .text{
  width: 100%;
  min-height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.custom-modal .modal-content p{
  font-size: 1.3rem;
  line-height: 2rem;
}
.custom-modal .modal-content h6,
.custom-modal .modal-content h2{
  height: 100%;
  display: inline-flex;
  align-items: center;
  flex: 1;
  font-size: 2.8rem;
  font-weight: bolder;
  position: relative;
}
.custom-modal .modal-content h6{
  font-size: 1.5rem;
}
.custom-modal .modal-content h2{
  flex: 0 1 80%;
}
.custom-modal .modal-content img{
  width: 100%;
  border-radius: 1.8vw; 
}
.custom-modal .modal-content h6::before,
.custom-modal .modal-content h2::before{
  content: attr(data-txt);
  background: linear-gradient(to top, #a50000, #cf0000, #ff6600);
  background: -webkit-linear-gradient(to top, #a50000, #cf0000, #ff6600);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: absolute;
  z-index: 2;
}
.custom-modal .modal-content h6::after,
.custom-modal .modal-content h2::after{
  content: attr(data-txt);
  color: #fff;
  -webkit-text-stroke: 3px #fff;
  text-stroke: 3px #fff;
  text-shadow: -2px -2px 0 #afafaf,
              2px -2px 0 #afafaf,
              -2px 2px 0 #afafaf,
              2px 2px 0 #afafaf;
  position: absolute;
  z-index: 1;
}
.custom-modal .modal-content::before{
  content: '';
  width: 4vw;
  height: 4vw;
  border-radius: 50%; 
  position: absolute;
  top: -2.6vw;
  right: -2.6vw;
  cursor: pointer;
  z-index: -1;
}
.custom-modal .modal-content::after{
  content: '';
  width: 102%;
  height: 102%;
  background:  linear-gradient(90deg,#19143d,#4bb2e0,#203582,#161237);
  box-shadow: 0 0 0 10px rgba(255,255,255,0.3);
  border-radius: 2.4vw;
  position: absolute;
  top: -1%;
  left: -1%;
  z-index: -1;
}
.custom-modal svg{
  width: 4vw;
  height: 4vw;
  position: absolute;
  top: -2.5vw;
  right: -2.5vw;
  cursor: pointer;  
}
.custom-modal .close {
  color: #89dcfe;
  font-size: 1.6vw;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3vw;
  height: 3vw;
  background-color: #212b54;
  box-shadow: inset 2px 2px 2px #24365f,  inset -4px -4px 4px #1a1740;
  border-radius: 50%;
  position: absolute;
  top: -2vw;
  right: -2vw;
  cursor: pointer;
}






ul.partner{
  justify-content: flex-start;
}
.partner li{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 170px;
  height: 85px;
  margin: 0 3% 16px 3%;
}
.partner li img{
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
  .partner li{
    width: 17vw;
    height: auto;
  }
}




.games{
  height: 100%;
  justify-content: flex-start;
}
.games li{
  width: calc(100% / 4 - 48px);
  height: 100%;
  margin-left: 48px;
}
.games li:first-child{
  margin-left: 0;
}
.games span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 5rem;
  font-weight: bolder;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  position: absolute;
  top: 3.5rem;
  background: linear-gradient(to right, #de2b89, #f48dc6);
  background: -webkit-linear-gradient(to right, #de2b89, #f48dc6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: -4px -6px 0 #fff4a1;
}
.games a{
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 2500px;
  transition: all 0.5s;
}
.games a .title,
.games a .hov,
.games a .bg{
  transition: all 0.5s;
}
.games a:hover .bg{
  transform: perspective(3000px) translateY(-5%) rotateX(45deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.games a:hover .title{
  transform: translate3d(0%, -50%, 100px);
}
.games .hov{
  opacity: 0;
  width: 100%;
  height: unset;
  transform: translate3d(0%, 100%, 100px);
  position: absolute;
}
.games a:hover .hov{
  transform: translate3d(0%, 50%, 100px);
  z-index: 1;
  opacity: 1;
}
.games img{
  display: flex;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  border-radius: 16px;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.games img.title{
  top: unset;
  bottom: 3vw;
  width: 100%;
  height: unset;
  z-index: 1;
}
.games p{
  font-family: 'Archivo Black', sans-serif;
  font-size: 3rem;
  text-transform: uppercase;
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
}

@media only screen and (max-width: 1600px) and (orientation : landscape) {
  .games li{
    width: calc(100% / 4 - 16px);
    height: 100%;
    margin-left: 16px;
  }
}
@media only screen and (max-width: 1080px) and (orientation : landscape)  {
  .games a:hover .hov{
    transform: translate3d(0%, 100%, 100px);
  }
  .games img.title{
    bottom: 6vw;
  }
  .games a:hover .title {
    transform: translate3d(0%, -70%, 100px);
  }
}

@media only screen and (max-width: 912px) and (max-height: 1368px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .topic,
  .games{
    flex-wrap: wrap;
    padding-top: 8vw;
    padding-bottom: 8vw;
  }
  .topic{
    padding-left: 26%;
    padding-right: 10%;
  }
  .games li{
    width: calc(100% / 2 - 16px);
    height: calc(100% / 2 - 16px);
    margin-left: 16px!important;
  }
  .topic .item:last-child{
    display: block!important;
  }
  .topic .item a{
    height: 14vw;
    grid-template-rows: 1fr var(--topicH) 3.5vw;
  }
  .topic .item span{
    height: 5.4vw;
  }
  .topic .item h2{
    padding: 14px 24px;
  }
  .games a:hover .hov{
    transform: translate3d(0%, 0%, 100px);
  }
  .games a:hover .title{
    transform: translate3d(0%, -32%, 100px);
  }
}



.topic{
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  position: relative;
}
.topic .banner{
  display: flex;
  width: 90%;
  height: 280px;
  border: 6px solid var(--c05);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.ban_ani{
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}
.ban_ani img{
  width: 100%;
  height: 100%;
  -o-object-position: center center;
     object-position: center center;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
}
.ban_dot{
  width: 40px;
  height: 100%;
  position: absolute;
  left: 22px;
  top: 4px;
  z-index: 2;
}
.ban_dot i{
  display: block;
  width: 40px;
  height: 40px;
  background: url('../images/dot.webp?v=231012');
  background-size: 34px 34px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 15px;
  margin-top: 6px;
  cursor: pointer;
  transition: all .3s;
}
.ban_dot i.active,
.ban_dot i:hover{
  width: 40px;
  height: 40px;
  background: url('../images/dot.gif?v=231012');
  background-size: cover;
}
.blog_tabs{
  margin-top: 20px;
  width: 90%;
  height: calc(100% - 300px);
  overflow: hidden;
}
.btab_nav{
  display: flex;
  align-items: center;
  height: 10%;
  color: var(--c02);
}
.blog_tabs .more a,
.btab_nav .tablink{
  color: var(--c01);
  font-size: 1.25rem;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 20px;
  margin-right: 10px;
  margin-left: 10px;
  cursor: pointer;
  transition: all .5s;
  white-space: nowrap;
}
.blog_tabs .more{
  margin-left: 0;
  padding-top: 0;
}
.blog_tabs .more a{
  display: none;
  height: 10%;
  margin-right: 16px;
  margin-left: 16px;
  background-image: linear-gradient(135deg, #fafafa, #e9f0f4);
  box-shadow: 0 8px 16px 0 rgba(69, 34, 1, 0.32), inset -2px -4px 2px 0 rgba(127, 63, 2, 0.16), inset 0 2px 1px 0 #fafafa;
  border-radius: 16px;
  text-align: center;
}
.blog_tabs a.show{
  display: block;
}
.btab_content{
  display: flex;
  width: 100%;
  height: calc(100% - 20%);
  transition: transform 0.3s ease-in-out;
}
.blog_con{
  font-size: 1.25rem;
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  flex: 0 0 100%;
  padding: 16px;
}
.blog_item{
  display: flex;
  width: calc(100%/2 - 10px);
  height: calc(100%/2 - 10px);
  background-color: var(--c05);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
}
.blog_item:not(:nth-child(2n)){
  margin-right: 20px;
}
.blog_item:hover img{
  transform: scale(110%);
}
.blog_box:hover .icon.arrow{
  transform: translateX(10px);
}
.blog_item .blog_img{
  width: 30%;
  min-width: 166px;
}
@media only screen and (max-width: 1280px){
  .blog_item .blog_img{
    width: 45%;
  }
}

.blog_item img{
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  transition: all .3s;
}
.blog_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-width: 281px;
  width: calc(70% - 62px);
  height: 100%;
  position: relative;
}
.blog_box h3{
  color: var(--c06);
  width: calc(100% - 42px);
  height: 78px;
  font-size: 1.25rem;
  line-height: 1.25;
  padding: 0 10px 0 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  box-sizing: border-box;
}
.blog_box span{
  height: 32px;
  color: var(--c02);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  padding-left: 32px;
  /* position: absolute;
  bottom: 8px; */
}
.blog_box .icon.arrow{
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url('../images/arrow_right.webp?v=231026');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: auto 80%;
  margin-left: auto;
  transition: all .3s;
  /* position: absolute;
  bottom: 0;
  right: 0; */
}

@media screen and (max-width:1710px) and (orientation : landscape) {
  .blog_item{
    width: 100%;
  }
  .blog_item:not(:nth-child(2n)){
    margin-right: 0;
  }
  .blog_item:not(:nth-child(1),:nth-child(2)){
    display: none;
  }
}
@media screen and (max-width:1600px) and (orientation : landscape) {
}
@media screen and (max-width:1440px) and (orientation : landscape) {
}
@media screen and (max-width:1280px) and (orientation : landscape), only screen and (min-height: 800px) {
  .blog_box h4{
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: nowrap;
    height: auto;
  }
}




.landscape{
  color: var(--c05);
  font-size: 2rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.90);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
}
.landscape img{
  width: 180px;
  transform: rotate(270deg);
  padding-right: 50px;
  padding-left: 30px;
}
.landscape span{
  padding-bottom: 100px;
}
@media screen and (orientation: landscape) and (min-width: 480px) and (max-width: 1368px) and (-webkit-min-device-pixel-ratio: 2){
  .landscape{
    display: flex;
  }
}









.bg_wrap{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* background: url(../images/bg.webp);
  background-repeat: no-repeat;
  background-size: cover; */
}
/* .bg_wrap video{
  display: none;
} */
.bg_wrap video{
  position: absolute;
  left: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%);
  opacity: 0;
  z-index: -1;
}
.bg_wrap video.show{
  opacity: 1;
  z-index: 1;
}












/*
<div id="ft_open" class="footer_btn">
  <span>版權信息</span>
  <i class="arrow"></i>
</div>

.footer_btn{
  color:  var(--c01);
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
  position: fixed;
  right: 3%;
  bottom: 0;
  z-index: 4;
  cursor: pointer;
}
.footer_btn .arrow{
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-right: 2px solid var(--c01);
  border-bottom: 2px solid var(--c01);
  transform: rotate(45deg);
  transition: all .5s;
}
.footer_btn.show{
  color:  var(--c05);
  opacity: .7;
}
.footer_btn.show .arrow{
  transform: rotate(225deg);
  border-right: 2px solid var(--c05);
  border-bottom: 2px solid var(--c05);
} */





.footer{
  width: 100%;
  height: 0;
  transition: all .5s;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  bottom: 0;
}
.footer.show{
  height: 18vw;
  visibility: visible;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  z-index: 3;
}
.footer::before{
  content: "";
  width: 150vw;
  height: 100%;
  border-radius: 50%;
  box-shadow: 1.5vh 1.5vh 0 var(--c07), -1.5vh 1.5vh 0 var(--c07), -18vh 8vh 0 var(--c07);
  box-sizing: border-box;
  position: absolute;
  z-index: -1;
  bottom: 18.5vw;
  left: -23vw;
}
.footer .bg {
  width: 100%;
  height: 100%;
  background: radial-gradient(var(--c06), var(--c07) 70%);  
  position: absolute;
  z-index: -1;
}
.footer .ft{
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer .ft.nb_1 .list{
  display: grid;
  grid-template-columns: 3.6vw 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 6px;
}
.footer .ft.nb_1 img{
  width: 90%;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  -webkit-filter: drop-shadow(-4px 4px 16px var(--c00));
          filter: drop-shadow(-4px 4px 16px var(--c00));
}
.footer .ft.nb_1 p,
.footer .ft.nb_1 em{
  color: var(--c05);
  display: flex;
  font-size: 0.9rem;
}
.footer .ft.nb_1 em{
  color: var(--c03);
  align-items: flex-end
}
.footer .ft.nb_2{
  padding: 12px 0;
  position: relative;
}
.footer .ft.nb_2::after,
.footer .ft.nb_2::before{
  content: "";
  width: 100%;
  height: 1px;
  background: #111;
  box-shadow: 1px 1px 0 #444;
  position: absolute;
}
.footer .ft.nb_2::before{
  top: 0;
}
.footer .ft.nb_2::after{
  bottom: 0;
}
.footer .ft.nb_2 .tips{
  max-width: 30%;
  font-size: .8rem;
}
.footer .ft.nb_2 .tips p{
  color: var(--c05);
  font-family: var(--fontSansSerif);
  line-height: .95rem;
  opacity: 0.64;
}
.footer .ft.nb_2 .tips p:nth-child(1){
  padding-bottom: 8px;
}
.footer .ft.nb_2 .ft_logo{
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .ft.nb_2 .ft_logo img{
  width: 80%;
}
.footer .ft.nb_2 .tips,
.footer .ft.nb_2 .payment{
  padding-left: 44px;
}
.footer .ft.nb_2 .payment .area01{
  padding: 0 0 12px;
}
.footer .ft.nb_2 .payment .area01 img{
  max-height: 48px;
  padding: 4px 10px;
  background-color: rgba(0,0,0,.65);
  border-radius: 8px;
}
.footer .ft.nb_2 .payment .area02 img{
  max-height: 36px;
  padding: 0 10px;
  margin-bottom: 8px;
}
.footer .ft.nb_2 .ft_btn{
  width: 130px;
  margin-left: auto;
}
.footer .ft.nb_2 .ft_btn a{
  color: var(--c05);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 38px;
  border-radius: 4px;
  margin: 4px;
}
.footer .ft.nb_2 .ft_btn a:hover{

}
.footer .ft.nb_3{
  padding: 12px 0;
}
.footer .ft.nb_3 p{
  color: var(--c05);
  font-size: .7rem;
  opacity: .64;
}
.footer .ft.nb_3 .ft_link{
  font-size: .8rem;
  margin-left: 16px;
}
.footer .ft.nb_3 .ft_link a{
  color: var(--c05);
  padding: 0 16px;
  opacity: .64;
  transition: all .3s;
}
.footer .ft.nb_3 .ft_link a.active,
.footer .ft.nb_3 .ft_link a:hover{
  color: var(--c03);
  background-color: transparent;
  opacity: 1;
}
.footer .ft.nb_3 img{
  margin-left: auto;
  min-width: 48px;
  height: 48px;
}

@media screen and (max-width:1710px) and (orientation : landscape) {
  .footer::before{
    bottom: 21vw;
  }
}

@media screen and (max-width:1680px) and (orientation : landscape) {
  .footer::before{
    bottom: 21.5vw;
  }
}

@media screen and (max-width:1440px) and (orientation : landscape) {
  .footer::before{
    bottom: 25vw;
  }
  .footer .ft.nb_2 .tips, .footer .ft.nb_2 .payment{
    padding-left: 2vw;
  }
}

@media screen and (max-width:1280px) and (orientation : landscape) {
  .footer::before{
    content: none;
  }
  .footer .ft.nb_1 .list{
    grid-column-gap: 4px;
    grid-row-gap: 2px;
  }
  .footer.show{
    height: 32vw;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  .footer.show{
    height: 60vw;
  }
  .footer .ft.nb_2 .tips, .footer .ft.nb_2 .payment{
    padding-left: 3%;
  }
  .footer .ft.nb_3 .ft_link a,
  .footer .ft.nb_3 p{
    line-height: 1.6;
  }
  .footer .ft.nb_1 p,
  .footer .ft.nb_1 em{
    font-size: 0.8rem;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  .footer .ft.nb_3,
  .footer .ft.nb_2,
  .footer .ft.nb_1{
    width: 87%;
    margin: unset;
    padding-left: 3%;
  }
  .footer.show{
    height: 40vw;
  }
  .footer .ft.nb_3 .ft_link a{
    padding: 0 10px;
  }
}
/* @media screen and (max-width:1180px) and (orientation: landscape), only screen and (-webkit-min-device-pixel-ratio: 2) {
  .footer .ft.nb_3,
  .footer .ft.nb_2,
  .footer .ft.nb_1{
    width: 87%;
    margin: unset;
    padding-left: 3%;
  }
  .footer.show{
    height: 40vw;
  }
  .footer .ft.nb_3 .ft_link a{
    padding: 0 10px;
  }
}
@media screen and (max-width:912px) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio: 2){
  .footer.show{
    height: 60vw;
  }
  .footer .ft.nb_2 .tips, .footer .ft.nb_2 .payment{
    padding-left: 3%;
  }
  .footer .ft.nb_3 .ft_link a,
  .footer .ft.nb_3 p{
    line-height: 1.6;
  }
  .footer .ft.nb_1 p,
  .footer .ft.nb_1 em{
    font-size: 0.8rem;
  }
} */






.scroll_tips{
  width: 242px;
  height: 100px;
  background: url(../images/banner/scroll-down.png) no-repeat center center;
  background-size: cover;
  transform: translate(-50%);
  animation-name: scroll_tips;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction:alternate;
  position: absolute;
  left: 50%;
  bottom: 100px;
  z-index: 3;
}
@keyframes scroll_tips{
  0%{
    bottom: 100px;
  }
  100%{
    bottom: 120px;
  }
}
@media only screen and (max-width: 1280px) and (orientation : landscape)  {
  .scroll_tips{
    bottom: 10px;
    animation-name: mobile_scroll_tips;
  }
}

@keyframes mobile_scroll_tips{
  0%{
    bottom: 10px;
  }
  100%{
    bottom: 30px;
  }
}


/*LINE 官方QR*/
.line_qr{
  width: 216px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  transform: translate(calc(100% - 50px), -50%);
  transition: transform 0.5s ease-in-out;
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 4;
}
.line_qr:hover{
  transform: translate(0, -50%);
}
.line_qr img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.line_qr .arrow{
  width: 60px;
  height: 46px;
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 1;
  object-fit: cover;
}
.line_qr .line{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}









.main.dir_list{
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  padding: 80px;
  margin: 0 auto;
  padding-bottom: 40%;
}
.login .main.dir_list{
  align-items: center;
}
.main.dir_list img{
  width: 80%;
  border-radius: 12px;
  margin: 0 auto;
  overflow: hidden;
}
.login_img{
  max-width: 300px;
}
.login .main.dir_list p{
  padding-top: 20px;
  padding-left: 0;
}
.main.dir_list h1{
  color: var(--c00);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.5px;
}
.main.dir_list h2{
  font-size: 14px;
  color: var(--c06);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.5px;
  margin: 20px 0;
}

.main.dir_list h4{
  font-size: 1.25rem;
  color: var(--c07);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin: 40px 0 20px 0;
}

.main.dir_list h5{
  font-size: 1rem;
  color: var(--c07);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.8px;
}
.main.dir_list h2~h4{
  margin-top: 0;
}
.main.dir_list p{
  font-size: 14px;
  color: var(--c07);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.5px;
  margin: 0 0 20px 0;
  padding-left: 40px;
}
.main.dir_list span{
  font-size: 14px;
  color: var(--c07);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.5px;
  margin: 0 0 20px 0;
  padding-left: 70px;
}
.main.dir_list q{
  font-size: 12px;
  color: var(--c07);
  line-height: 2;
  padding-left: 40px;
}

@media only screen and (max-width: 1680px) {  
  .main.dir_list{
    max-width: 70vw;
  }
}
@media only screen and (max-width: 1280px) {  
  .main.dir_list{
    max-width: 62vw;
  }
}
@media only screen and (max-width: 1180px), only screen and (-webkit-min-device-pixel-ratio: 2) {  
  .main.dir_list{
    max-width: 76vw;
    margin: unset;
    margin-left: auto;
    padding-right: calc(3% + 62px);
    padding-left: 3%;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  .main.dir_list{
    padding-bottom: 80%;
  }
}

@media only screen and (max-width: 834px), only screen and (-webkit-min-device-pixel-ratio: 2)  {  
  
}




.tabs{
  display: flex;
  font-size: 14.4px;
  letter-spacing: 0;
  line-height: 19px;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.04);
  background-color: var(--c05);
  margin: 20px 0;
  overflow: hidden;
}
.tablink{
  color: var(--c01);
  padding: 10px 22px 12px 24px;
  transition: all .5s;
}
.tablink:hover,
.tablink.active{
  color: var(--c05);
  background-color: var(--c01);
}
.tab_con{
  display: none;
}
.tab_con.active{
  display: flex;
  flex-direction: column;
}

.tab_con b{
  color: #ff3700;
  font-weight: bold;
}
.tab_con .table{
  border:  1px solid var(--c01); 
  margin-bottom: 40px;
}
.tab_con .table th{
  color: var(--c04);
  padding: 16px;
  background-color: var(--c02);
  border:  1px solid var(--c01); 
}
.tab_con .table.tab03 th{
  width: calc(100%/3);
}
.tab_con .table.tab04 th{
  width: calc(100%/2);
}
.tab_con .table.tab04 td{
  width: calc(100%/4);
}
.tab_con .table th b{
  color: var(--c04);
  font-weight: normal;
  font-size: 1.2rem;
}
.tab_con .table th q{
  color: var(--c04);
  font-weight: normal;
  letter-spacing: .5px;
}
.tab_con .table.tab04 td q{
  color: var(--c01);
  font-weight: 500;
  letter-spacing: .5px;
  padding-left: 0;
}
.tab_con .table td{
  font-size: 13px;
  color: var(--c07);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.5px;
  margin: 0 0 20px 0;
  padding: 16px;
  background-color: var(--c05);
  border:  1px solid var(--c03);
}
.tab_con .table td[rowspan]{
  text-align: center;
  vertical-align: middle;
}
.tab_con .table.tab_vip th,
.tab_con .table.tab_vip td{
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}
.tab_con .table.tab_vip th{
  color: var(--c00);
  background-color: var(--c05);
  border: 1px solid var(--c03);
}
.intro_box,
.tab_con .areaW{
  display: flex;
  width: 100%;
}
.intro_box{
  margin-bottom: 32px;
}
.intro_box .areaL,
.intro_box .areaR{
  width: 50%;
  padding: 8px;
}
.intro_box .areaL.text{
  padding-right: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.intro_box .areaR.text{
  padding-left: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.tab_con .areaL{
  width: 40%;
}
.tab_con .areaR{
  width: 60%;
}
.intro_box img,
.tab_con .areaL img{
  width: 100%;
}
.tab_con .table.tab_vip .bg02{
  color: var(--c04);
  text-align: left;
  width: 10%;
  background-color: var(--c01);
}
.tab_con .table.tab_vip .bg02 span{
  display: block;
  width: 50px;
  color: var(--c04);
  padding-left: unset;
  margin-bottom: unset;
}
.tab_con .table.tab_vip img{
  width: 60px;
  height: 60px;
} 
.tab_con .table.flow,
.tab_con .table.flow td,
.tab_con .table.flow th{
  border: 0;
  background-color: transparent;
  padding: 0;
}
.icon{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.icon.num{
  font-size: 12px;
  color: var(--c05);
  background: var(--num);
  text-shadow: 2px 3px 3px #007777;
  box-shadow: 0px 3px 3px #007777;
  border: 2px solid var(--c05);
  border-radius: 20px;
}
.icon.step{
  width: auto;
  height: 8rem;
  color: #452201;
  font-size: 8rem;
  font-family: 'Archivo Black', sans-serif;
}
.tab_con .table.flow td{
  position: relative;
}
.tab_con .table.flow td:not(:last-child) .icon::after{
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  border-right: 4px solid #452201;
  border-bottom: 4px solid #452201;
  transform: rotate(-45deg);
  position: absolute;
  left: 9rem;
}
.tab_con .table.flow .btn_sign,
.tab_con .table.flow .btn_playn{
  border: 3px solid rgba(250, 250, 250, 0.8);
  padding: 2px 12px;
  position: absolute;
  left: 4rem;
  top: 5rem;
}
.about_game .tab_con.sport.active{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.img_soon{
  width: 250px!important;
}
.tab_soon{
  margin-top: 24px;
}


.give_gift li{
  display: flex;
  padding-left: 8px;
}
.give_gift .timeline{
  width: 40px;
  position: relative;
}
.give_gift li:not(:last-child) .timeline::after{
  content: "";
  width: 2px;
  height: 100%;
  background-color: rgba(205, 194, 162, 0.64);
  display: block;
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.give_gift .info p{
  padding-left: 20px;
  min-height: 40px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #452201;
  text-shadow: 1px 1px 0 #fff8e4;
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.give_gift .step{
  width: 40px;
  height: 40px;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background-color: #fafafa;
  box-shadow: 0 8px 16px 0 rgba(127, 63, 2, 0.32);
  padding: 4px;
  border-radius: 100%;
}

.give_gift .num{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c05);
  text-shadow: 1px 1px 0 rgba(69, 34, 1, 0.48);
  background-image: linear-gradient(110deg, #00dda4, #03a57b);
    box-shadow: 0 8px 16px 0 rgba(3, 165, 123, 0.48), inset -2px -4px 2px 0 rgba(0, 221, 164, 0.72), inset 0 2px 1px 0 rgba(255, 253, 247, 0.48);
    border-radius: 100%;
}
.addvalue .give_gift img,
.addto .give_gift img{
  width: 240px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 1680px), only screen and (-webkit-min-device-pixel-ratio: 2){
  .give_gift img,
  .tab_con img{
    width: 70%;
  }
}
@media only screen and (max-width: 1280px), only screen and (-webkit-min-device-pixel-ratio: 2){
  .tab_con .table.flow td:not(:last-child) .icon::after{
    left: unset;
    right: 1rem;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  .tablink{
    padding: 10px 10px 12px 16px;
  }
  .tab_con .table td,
  .tab_con .table.tab_vip .bg02,
  .tab_con .table th{
    padding: 8px;
  }
  .header .menu .btn_playn,
  .header .menu .btn_sign{
    height: 48px;
    margin: 20px 14px;
    padding: 26px;
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 834px), only screen and (-webkit-min-device-pixel-ratio: 2) {

}




.blog .main.dir_list .bg_title span,
.about_game .main.dir_list .bg_title span,
.tab_con .bg_title span{
  color: var(--c04);
  font-size: 8rem;
  font-weight: bolder;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  text-shadow: 4px 4px 10px var(--c01);
  padding-top: 3rem;
  position: fixed;
  top: 5%;
  left: 0;
  z-index: -1;
}
.blog .main.dir_list .bg_title p,
.about_game .main.dir_list .bg_title p,
.tab_con .bg_title p{
  font-size: 10rem;
  font-style: italic;
  white-space: nowrap;
  font-family: 'Archivo Black', sans-serif;
  -webkit-text-stroke: 3px var(--c03);
  color: transparent;
  transform: rotate(90deg);
  transform-origin: 0;
  position: absolute;
  left: 5%;
  top: -10%;
  z-index: -1;
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  .blog .main.dir_list .bg_title span,
  .about_game .main.dir_list .bg_title span,
  .tab_con .bg_title span{
    left: -8%;
  }
}
@media only screen and (max-width: 834px), only screen and (-webkit-min-device-pixel-ratio: 2){
  
}













.about_game .tab_con h2{
  width: 100%;
}
.about_game .tab_con.active{
  flex-direction: unset;
  flex-wrap: wrap;
}
.about_game .tab_con .game_pic{
  width: 10%;
  height: auto;
  margin: 13px;
  cursor: pointer;
}
.about_game .tab_con .game_pic:hover{
  opacity: .5;
}
.about_game .tab_con .game_pic img{
  width: 100%;
  height: 100%;
}
.game_mask{
  width: 100%;
  height: 0;
  background: rgba(255,255,255,0.68);
  transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.game_mask.active{
  height: 100%;
  opacity: 1;
}
.game_mask.active .icon.close{
  width: 80px;
  height: 80px;
  position: fixed;
  right: 10%;
  top: 10%;
  cursor: pointer;
  transform: rotate(45deg);
  transition: all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.game_mask.active .icon.close::before{
  content: "";
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background-color: var(--c01);
  transform: rotate(90deg);
  position: absolute;
  top: 0;
  left: 0;
}
.game_mask.active .icon.close::after{
  content: "";
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background-color: var(--c01);
  position: absolute;
  top: 0;
  left: 0;
}
.game_txt{
  display: none;
  grid-template-columns: 18.5vw 1fr;
  grid-template-rows: 4rem 3rem 1fr;
  grid-column-gap: 4%;
}
.game_txt img{
  width: 100%;
  height: auto;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
.main.dir_list .game_mask .game_txt h2{
  font-size: 3rem;
  color: var(--c01);
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin: 0;
}
.game_txt h3{
  font-size: 1rem;
  color: var(--c07);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.5px;
  display: flex;
  align-items: flex-end;
}
.game_txt .context{
  font-size: 1.25rem;
  color: var(--c06);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.5px;
  margin: 24px 0 20px 0;
}
.game_txt.active{
  padding: 10% 26%;
  display: grid;
}













.app_list{
  max-width: 500px;
}
.app_list li{
  margin-bottom: 16px;
}
.app_list a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #1c293b;
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 22px 12px 24px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.04);
  background-color: var(--c05);
  border-radius: 4px;
  transition: all .5s;
}
.app_list a:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3);
}
.main.dir_list .app_list span{
  padding-left: 16px;
  margin-bottom: 0;
}
.main.dir_list .app_list img{
  width: 30px;
  margin: unset;
}
.main.dir_list .app_list .arrow{
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--c06);
  border-bottom: 2px solid var(--c06);
  transform: rotate(-45deg);
  margin-left: auto;
}














.load{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  background-color: #f1f1f1;
  z-index: 999;
}

.load .t1{
  min-width: 380px;
  min-height: 400px;
  width: 20%;
  -webkit-animation-name: oxxo;
          animation-name: oxxo; 
  -webkit-animation-duration: 0.5s; 
          animation-duration: 0.5s; 
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
}
@-webkit-keyframes oxxo{ 
  0%,100%{ 
      margin-top:0; 
      margin-left: 0px;
  } 
  50%{ 
      margin-top: 3px; 
      margin-left: 2px;
  } 
}
@keyframes oxxo{ 
  0%,100%{ 
      margin-top:0; 
      margin-left: 0px;
  } 
  50%{ 
      margin-top: 3px; 
      margin-left: 2px;
  } 
}

.t2{
  min-width: 133px;
  min-height: 470px;
  width: 7%;
  display: flex;
  -webkit-animation-name: oxxo2;
          animation-name: oxxo2; 
  -webkit-animation-duration: 0.4s; 
          animation-duration: 0.4s; 
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
}

@-webkit-keyframes oxxo2{ 
  0%,100%{ 
    margin-top:0; 
    margin-left: 56px;
    transform: scaleX(1);
  } 
  50%{ 
    margin-top: 3px; 
    margin-left: 60px;
    transform: scaleX(0.8);
  } 
}

@keyframes oxxo2{ 
  0%,100%{ 
    margin-top:0; 
    margin-left: 56px;
    transform: scaleX(1);
  } 
  50%{ 
    margin-top: 3px; 
    margin-left: 60px;
    transform: scaleX(0.8);
  } 
}












.wrap.blog{
  background-color: #eee;
}
.wrap.blog .header{
  background: transparent;
  position: absolute;
}
.wrap.blog .header a:not(.btn_sign,.btn_playn){
  color: var(--c00);
  font-weight: 700;
}
.wrap.blog .header a:hover::after,
.wrap.blog .header a.active::after{
  background: var(--c00);
}
.wrap.blog::after,
.wrap.blog::before{
  content: none;
}
.blog .blog_ban{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
}
.blog .blog_ban img{
  width: 100%;
}
.blog_navbar{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}
.blog_navbar a{
  display: block;
  min-width: 1.2rem;
  padding: 8px 32px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c00);
  text-align: center;
  border-radius: 16px;
  margin: 0 8px;
  position: relative;
  transition: all .3s;
}
.blog_navbar a:hover,
.blog_navbar a.active{
  color: var(--c05);
  background-color: var(--c00);
}
.blog_context{
  display: flex;
  flex-direction: column;
}
.blog_main{
  display: flex;
  width: 100%;
  border-bottom: 1px solid #bfbfbf;
  padding: 24px 0;
  background: transparent;
  transition: background .3s ease-in-out;
}
.blm_liink{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 996px;
  margin: 0 auto;
  transition: all .3s;
}
.blm_liink .title{
  width: 84%;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr;
  grid-column-gap: 16px;
  padding: 4px;
}
.blm_liink .title h3{
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  color: var(--c06);
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.5px;
  transition: all .3s;
}
.blm_liink .title img{
  width: 100%;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  border-radius: 24px;
  border: 6px solid #ffde70;
}
.blm_liink p{
  height: 7.5rem;
  font-size: 1rem;
  color: var(--c06);
  line-height: 1.5;
  letter-spacing: 0.5px;
  margin-top: 8px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.blm_liink .data{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16%;
  height: 100%;
  font-size: 1.8rem;
  color: #ababab;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.5px;
  position: relative;
}
.blm_liink .data::before{
  content: "";
  display: block;
  width: 1px;
  height: 80%;
  background-color: #bfbfbf;
  position: absolute;
  left: 10px;
}
.blm_liink .data .icon{
  display: none;
}
.blog_main:hover{
  background: url('../../blog/img/blog_main_hover.webp?v=231012') 50% no-repeat;
  background-size: cover;
}
.blog_main:hover .icon.arrow{
  display: inline-flex;
  width: 32px;
  height: 32px;
  background-image: url('../images/arrow_right.webp?v=231026');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: auto 80%;
  transition: all .3s;
  margin-right: 0;
}
.blog_main:hover .blm_liink{
  transform: translateX(-5vw); 
}
.blog_main:hover .blm_liink .data,
.blog_main:hover .blm_liink p,
.blog_main:hover .blm_liink .title h3{
  color: var(--c01);
}
.blog_main:last-child{
  margin-bottom: 35%;
}
.blog .footer.show{
  height: 400px;
}
.blog .footer::before{
  content: none;
}
.blog .footer .bg{
  background: url('../../blog/img/blog_bg.webp?v=231012');
  background-repeat: no-repeat;
  background-size: cover;
}
.blog .footer .ft.nb_1 img{
  -webkit-filter: drop-shadow(-2px 2px 4px rgba(0,0,0,0.45));
          filter: drop-shadow(-2px 2px 4px rgba(0,0,0,0.45));
}
.blog .footer .ft.nb_1 em{
  color: var(--c01);
}
.blog .footer .ft.nb_1 p, 
.blog .footer .ft.nb_1 em{
  color: var(--c06);
}
.blog .footer .ft.nb_2::after, 
.blog .footer .ft.nb_2::before{
  background: #e4cd3d;
  box-shadow: 1px 1px 0 #ffeb41;
}
.blog .footer .ft.nb_3 .ft_link a,
.blog .footer .ft.nb_3 p,
.blog .footer .ft.nb_2 .tips p{
  color: var(--c00);
}
.blog .footer .ft.nb_2 .payment .area02 img{
  -webkit-filter: invert(100%); 
  filter: invert(80%); 
}











.art_top_wrap,
.art_content{
  position: relative;
}
.blog_art{
  width: 100%;
}
.art_top_wrap,
.art_content{
  width: 996px;
  margin: 20px auto;
}
.art_content{
  display: flex;
}
.art_top_wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid #bfbfbf;
}
.art_top_wrap .art_info{
  display: flex;
  margin-top: 8px;
  margin-bottom: 12px;
}
.art_top_wrap .art_info *{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 6px;
  border-radius: 4px;
}
.art_top_wrap h1{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  color: var(--c06);
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin-top: 48px;
}
.art_top_wrap .back{
  color: var(--c00);
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}
.art_top_wrap .back img{
  height: 100%;
}
.art_top_wrap .art_info .art_share a{
  padding: 0;
}
.art_share img{
  height: 28px;
}
.tag_teach,
.tag_info,
.tag_slot,
.tag_arcade,
.tag_poker,
.tag_sport {
  color: var(--c06);
  margin: 0 2px;
  transition: all 0.3s;
}
.tag_teach,
.tag_info,
.tag_slot,
.tag_arcade,
.tag_poker,
.tag_sport:hover{
  color: var(--c06);
  opacity: 1;
}
.tag_teach,
.tag_info{
  background-color: #cff4fc;
}
.tag_slot{
  background-color: #e0cffc;
}
.tag_arcade{
  background-color: #fff3cd;
}
.tag_poker{
  background-color: #f7d6e6;
}
.tag_sport{
  background-color: #d2f4ea;
}
.tag_teach:hover,
.tag_info:hover{
  background-color: #9eeaf9;
}
.tag_slot:hover{
  background-color: #c29ffa;
}
.tag_arcade:hover{
  background-color: #ffda6a;
}
.tag_sport:hover{
  background-color: #79dfc1;
}
aside.sidebar{
  display: flex;
  flex-direction: column;
  width: 270px;
  background-color: var(--c01);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  border-radius: 16px;
  padding: 24px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
aside.sidebar h5{
  color: #ffde70;
  font-size: 1.25rem;
  line-height: 1.8;
}
aside.sidebar a{
  color: var(--c05);
  line-height: 1.8;
}
aside.sidebar a:hover{
  color: var(--c04);
  text-decoration: underline;
}
aside.sidebar .art_share{
  display: flex;
  width: 100%;
  height: 48px;
  margin-top: 12px;
}
aside.sidebar .art_share a{
  flex: 1;
}
aside.sidebar .art_share img{
  height: 40px;
}
.art_txt{
  width: calc(100% - 354px);
  margin-left: 36px;
  padding-bottom: 60%;
}
.art_txt h1,
.art_txt h2,
.art_txt h3,
.art_txt h4,
.art_txt h5,
.art_txt h6{
  color: var(--c06);
  font-weight: 900;
  margin: 32px 0 16px 0;
}
.art_txt h1{
  font-size: 2.5rem;
}
.art_txt h2{
  font-size: 2.25rem;
}
.art_txt h3{
  font-size: 2rem;
}
.art_txt h4{
  font-size: 1.75rem;
}
.art_txt h5{
  font-size: 1.5rem;
}
.art_txt h6{
  font-size: 1.25rem;
}
.art_txt ul{
  width: 100%;
  margin-bottom: 24px;
  padding-left: 24px;
  word-wrap: break-word;
}
.art_txt li{
  list-style: disc;
  font-size: 1.25rem;
  line-height: 1.8;
}
.art_txt li b{
  color: #fb8d23;
}
.art_txt p{
  font-size: 1.25rem;
  line-height: 1.8;
}
.art_txt img{
  width: 100%;
}














@media only screen and (max-width: 1280px) {  
  .blog .footer .bg{
    background-position: bottom;
  }
  .footer .ft.nb_2 .tips, .footer .ft.nb_2 .payment{
    padding-left: 0;
  }
}