/* @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;
  background: var(--c03);
}
html, body{
  width: 100%;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  font-family: 'Noto Sans TC', sans-serif;
}
body.jbb{
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.noscroll{
  overflow: hidden;
}
.scrollY{
  overflow-x: hidden!important;
  overflow-y: scroll!important;
}




.landscape{
  color: var(--c05);
  font-size: 2rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
  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-top: 10px;
  padding-bottom: 50px;
}
@media screen and (orientation: landscape) and (min-width: 480px) and (max-width: 1368px) and (-webkit-min-device-pixel-ratio: 2){
  .landscape{
    display: flex;
  }
}




.main,
.wrap{
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}
.wrap::before, 
.wrap::after{
  content: "";
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -2;
}
.wrap.blog::before, 
.wrap.blog::after{
  content: none;
}
.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;
}











.gotop{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: -40px;
  position: fixed;
  right: 3%;
  bottom: 20px;
  z-index: 6;
  cursor: pointer;
  transition: opacity 0.5s ease;
  opacity: 0;
}
.gotop span{
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.gotop .line .three,
.gotop .icon{
  display: none;
  pointer-events: none;
}
.gotop .line{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-image: linear-gradient(135deg, #fbc323, #fb8d23);
  box-shadow: 0 8px 16px 0 rgba(251, 195, 35, 0.48), inset 0 -3px 0 0 rgba(251, 195, 35, 0.72), inset 0 2px 4px 0 rgba(250, 250, 250, 0.32);
  color: #fafafa;
  text-shadow: 1px 1px 0 rgba(0, 27, 59, 0.48);
  border-radius: 50%;
  transform: rotate(45deg);
}
.gotop .line .two,
.gotop .line .one{
  display: block;
  width: 6px;
  height: 16px;
  background-color: #452201;
  border-radius: 10px;
  position: absolute;
}
.gotop .line .one{
  transform: translateX(-5px);
}
.gotop .line .two{
  transform: rotate(90deg) translateX(-5px);
}
.gotop.show{
  opacity: 1;
}











.btn_more,
.btn_playn,
.btn_sign,
.blog_more span,
.ft_btn a.btn_sign,
.ft_btn a.btn_topup,
.header a.btn_playn,
.header a.btn_sign{
  color: var(--c05)!important;
  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;
}
.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);
}
.blog_more span,
.ft_btn a.btn_topup:hover,
.ft_btn a.btn_sign:hover,
.header a.btn_playn:hover,
.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);
}
.btn_more{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #452201!important;
  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);
}










/*輪播圖*/
.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{
  display: block;
  width: 100%;
  min-width: 100%;
  height: 100vh;
  object-fit: cover;
}

/*大區塊*/
.sn{
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.bg_wrap{
  display: none;
}
.sn.cont_1 > h1{
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin-top: -1px;
}
.sn.cont_1{
  background: url('../images/bg_mobile.webp');
  background-position: top right;
  background-size: cover;
  background-color: #f1cb3a;
}
.sn .cont_box{
  min-width: 330px;
  width: 88%;
  height: calc(100% - 40px);
  margin: 40px auto auto;
  position: relative;
  left: 0;
  top: 0;
}
.sn.cont_1 .cont_box{
  height: 100%;
}
.sn.cont_1 .qr_box{
  display: flex;
  align-items: center;
  width: 80%;
  height: 18vw;
  position: absolute;
  left: 16px;
  bottom: calc(30% - 32vw);
  z-index: 2;
}
.sn.cont_1 .qr_box img{
  height: 100%;
  margin-right: 8px;
}
.sn.cont_1 .qr_box>img{
  height: 80%;
}
.sn.cont_1 .dog,
.sn.cont_1 .qr_box .pc{
  display: none;
}
.sn.cont_1 .qr_box .mobile{
  height: 100%;
}
.sn.cont_1 .slogan{
  width: 80%;
  height: 23vw;
  background: url('../images/slogan.webp?v=231012');
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: absolute;
  left: 40px;
  top: 16%;
  z-index: 3;
}
.sn.cont_1 .line_pn{
  display: block;
  width: 94%;
  position: absolute;
  left: 8px;
  bottom: calc(30% - 12vw);
  z-index: 3;
}
.sn.cont_1 .mobile_btn{
  width: 80%;
  min-width: 340px;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -3%;
  bottom: calc(30% - 30vw);
  z-index: 3;
}
.sn.cont_1 .ios,
.sn.cont_1 .android{
  padding: 8px;
}
.sn.cont_1 .mobile_btn img{
  width: 100%;
}
.sn.cont_1 .enter img,
.sn.cont_1 .enter{
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 1024px) and (min-width: 767px) {
  .sn.cont_1 .slogan{
    width: 80%;
    left: 40px;
  }
  .sn.cont_1 .line_pn{
    width: 70%;
    left: 40px;
  }
  .sn.cont_1 .qr_box{
    left: 40px;
    height: auto;
    bottom: calc(30% - 28vw);
  }
  .sn.cont_1 .qr_box .mobile img{
    height: 100px;
  }
  .sn.cont_1 .qr_box>img:last-child{
    height: 80px;
  }
}

.sn .title p{
  position: absolute;
  z-index: -1;
  white-space: nowrap;
}
.sn .title h2{
  color: var(--c04);
  font-size: 5rem;
  font-weight: bolder;
  text-shadow: 4px 4px 10px var(--c01);
  text-align: center;
}
.sn .title p{
  font-family: 'Archivo Black', sans-serif;
  font-size: 8rem;
  font-style: italic;
  -webkit-text-stroke: 3px var(--c03);
  color: transparent;
}










.logo{
  width: 260px;
  min-width: 130px;
  margin-right: auto;
  position: fixed;
  top: 0;
  left: -20px;
  background: transparent;
  border: 0;
}
.logo img{
  width: 100%;
  height: 100%;
}
.header .menu{
  display: flex;
  justify-content: center;
  align-items: center;
}
.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;
}
.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;
}
.header .menuToggle{
  display: block;
  width: 40px;
  height: 40px;
  position: fixed;
  top: calc(3%);
  right: calc(3% - 3px);
  cursor: pointer;
  z-index: 10;
  -webkit-touch-callout: none;
  opacity: 0;
}
.header label{
  display: block;
  width: 40px;
  height: 40px;
  background: url(../../assets/images/logo/hum_menu.webp?v=20231223) no-repeat center center;
  background-size: cover;
  position: fixed;
  top: calc(3%);
  right: calc(3% - 3px);
  cursor: pointer;
  z-index: 6;
}
.menuToggle ~ span{
  display: block;
  width: 24px;
  height: 4px;
  background: var(--c05);
  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% + 4px);
  z-index: 6;
}
.menuToggle ~ span:nth-child(4){
  top: calc(3% + 13px);
}
.menuToggle ~ span:nth-child(5){
  top: calc(3% + 19px);
}
.menuToggle ~ span:nth-child(6){
  top: calc(3% + 25px);
}
.menuToggle:checked ~ span{
opacity: 1;
transform: rotate(45deg) translate(2px, -1px);
background: var(--c05);
}
.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;
}










.header{
  position: fixed;
  z-index: 6;
}
.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{
  height: 48px;
  margin: 20px 14px;
  padding: 26px;
  font-size: 1.2rem;
}
.header a.btn_playn::after,
.header a.btn_sign::after{
  content: none;
}












.games,
.topic,
.partner,
.features{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 14%;
  padding-top: 6vw;
  padding-bottom: 14vw;
}
.features .item{
  width: 100%;
  padding-bottom: 12px;
  display: flex;
}
.features .item .img{
  width: 50%;
  min-width: 120px;
}
.features img{
  width: 100%;
  min-width: 100px;
  aspect-ratio: auto 1/1;
}
.features .text{
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.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.gif?v=231012');
    background-size: cover;
    position: absolute;
    left: -190px;
  } */





.games{
  height: 100%;
  /* justify-content: flex-start; */
}
.games li{
  width: calc(100% / 4 - 16px);
  height: 100%;
  min-width: 140px;
  margin-bottom: 16px;
}
.games li:not(:first-child){
  margin-left: 16px;
}
.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%;
  min-width: 140px;
  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%;
  min-width: 140px;
  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%;
  min-width: 140px;
  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;
  aspect-ratio: auto 1/1;
}
.games img.hov{
  aspect-ratio: auto 1/1;
}
.games img.bg{
  aspect-ratio: auto 4/16;
}
.games p{
  font-family: 'Archivo Black', sans-serif;
  font-size: 3rem;
  text-transform: uppercase;
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
}







.wrap.about_game .bg_title{
  display: flex;
  justify-content: center;
}
.wrap.about_game .bg_title p{
  display: none;
}
.wrap.about_game .bg_title span{
  color: var(--c04);
  font-size: 2rem;
  font-weight: bolder;
  text-shadow: 4px 4px 10px var(--c01);
  padding: 0;
  margin: 0;
}
.wrap.about_game .intro_box .areaR,
.wrap.about_game .intro_box .areaL,
.wrap.about_game .intro_box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.wrap.about_game .intro_box img{
  width: 80%;
}
.wrap.about_game .intro_box .text{
  order: 1;
  margin-bottom: 20px;
}
.wrap.about_game .intro_box h5,
.wrap.about_game .intro_box h4,
.wrap.about_game .intro_box h1{
  margin: 4px 10px;
}
.wrap.about_game .intro_box h5{
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.wrap.about_game .intro_box h4{
  font-size: 1rem;
  line-height: 1.4;
}
.wrap.about_game .intro_box h1{
  font-size: 1.5rem;
  line-height: 2;
}
.wrap.about_game .tab_con.active{
  justify-content: flex-start;
  align-items: center;
  flex-direction: unset;
  flex-wrap: wrap;
}
.wrap.about_game .game_pic{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100%/3);
  margin-bottom: 8px;
}
.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: 6;
}
.game_mask.active{
  height: 100%;
  opacity: 1;
}
.game_mask.active .icon.close{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 36px;
  top: 36px;
  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;
}
.main.dir_list .game_mask .game_txt h2{
  font-size: 2rem;
  color: var(--c01);
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin: 0;
  text-align: center;
}
.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: 1rem;
  color: var(--c06);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.5px;
  margin: 24px 0 20px 0;
}
.main.dir_list .game_txt img{
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
}
.game_txt.active{
  height: 100%;
  padding: 16px;
  padding-top: 100px;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}













.topic{
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  position: relative;
  padding: 0;
  margin-top: 20px;
}
.topic .banner{
  display: flex;
  width: 100%;
  height: 100px;
  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{
  min-height: 88px;
  width: 100%;
  height: 100%;
  -o-object-position: center center;
     object-position: center center;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
  aspect-ratio: auto 16/4;
}
.ban_dot{
  display: flex;
  height: 100%;
  position: absolute;
  left: 22px;
  top: 4px;
  z-index: 2;
}
.ban_dot i{
  display: block;
  width: 24px;
  height: 4px;
  margin-right: 4px;
  border-radius: 15px;
  margin-top: 2px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.58);
  transition: all .3s;
}
.ban_dot i.active,
.ban_dot i:hover{
  background-color: var(--c05);
}
.blog_tabs{
  width: 100%;
  height: calc(100% - 320px);
  border-radius: 24px;
  margin-top: 20px;
  background-color: var(--c05);
  overflow: hidden;
}
.btab_nav{
  color: var(--c02);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 10%;
  padding: 4px;
  overflow-x: scroll;
}
.blog_tabs .more a,
.btab_nav .tablink{
  color: var(--c01);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .5s;
  white-space: nowrap;
}
.btab_nav .tablink{
  margin: 4px;
}
.blog_tabs .more a:hover{
  text-decoration: underline;
}
.blog_tabs .more a{
  display: none;
  justify-content: center;
  align-items: center;
  color: var(--c05);
  background-color: var(--c02);
  width: 95%;
  padding: 8px;
  margin: 0 auto;
}
.blog_tabs a.show{
  display: flex;
  margin-bottom: 8px;
}
.btab_content{
  display: flex;
  width: 100%;
  height: calc(100% - 48px);
  margin-top: 8px;
  transition: transform 0.3s ease-in-out;
}
.blog_con{
  font-size: 0.8rem;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  flex: 0 0 100%;
  padding: 8px;
}
.blog_item{
  display: flex;
  width: 100%;
  background-color: var(--c05);
  margin-bottom: 8px;
  padding: 8px;
  cursor: pointer;
}

.blog_item:nth-child(n+3):nth-child(-n+100){
  display: none;
}
.blog_item:hover img{
  transform: scale(110%);
}
.blog_box:hover .icon.arrow{
  transform: translateX(10px);
}
.blog_item .blog_img{
  min-width: 103px;
  min-height: 110px;
  width: calc(100% / 2);
}
.blog_item img{
  width: 100%;
  min-width: 100px;
  border-radius: 16px;
  overflow: hidden;
  transition: all .3s;
  aspect-ratio: auto 4/2.5;
  object-fit: cover;
}
.blog_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.blog_box h3{
  color: var(--c06);
  width: 100%;
  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{
  color: var(--c02);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  padding-left: 32px;
}
.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;
  margin-right: 0;
}











/*新手任務*/
.tab-content { display: none;  }
.tab-content.active { display: block; }
.tab-button { cursor: pointer; }
.sn.cont_2 .cont_box{
  width: 100%;
  margin: 0;
}
.sn.cont_2 .title{
  display: none;
}
.features.task{
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  position: relative;
}
.features.task .map{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40vw;
  margin-left: -15vw;
  position: absolute;
  top: 3%;
  left: 50%;
  z-index: 3;
}
.features.task .map .tab-button{
  width: 15vw;
  height: 15vw;
  background: transparent;
  border: 0;
  margin-bottom: 2vw;
  margin-right: 2vw;
  filter: saturate(0);
}
.features.task .map .tab-button.active{
  filter: saturate(1);
  filter: drop-shadow(0px 4px 6px black);
}
.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,
.features.task .new{
  width: 100%;
  margin: 0;
  position: relative;
}
.features.task .character {
  position: absolute;
  height: 20vw;
  width: auto;
  transform: translate(-50%, -80%);
  pointer-events: none;
  z-index: 5;
}
@media only screen and (max-width: 600px) and (orientation : portrait)  {
  .features.task .character {
    height: 32vw;
  }
}
.features.task img{
  width: 100%;
}
.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: 55vw;
  right: 0.4vw;
}
@keyframes hand{
    0%{
        top: 0;
        right: 100%;
    }
    70%, 100%{
        top: 55vw;
        right: 0.4vw;
    }
} 
.features.task .animate .circle{
  width: 80px;
  height: 80px;
  animation-name: circle;
  animation-iteration-count: 2;
  animation-duration: 5s;
  position: absolute;
  top: 55vw;
  right: 0.4vw;
  z-index: 2;
}
@keyframes circle{
    0%, 50%{
      opacity: 0;
    }
    51%{
      opacity: 1;
    }
    100%{
      opacity: 1;
    }
} 

@media only screen and (max-width: 768px){
  .features.task .animate .circle,
  .features.task .animate .hand{
      top: 60vw;
      right: 4vw;
  } 
  @keyframes hand{
      0%{
          top: 0;
          right: 100%;
      }
      70%, 100%{
          top: 60vw;
          right: 4vw;
      }
  } 
}

@media only screen and (max-width: 600px){
  .features.task .animate .circle,
  .features.task .animate .hand{
    top: 55vw;
    right: 0.4vw;
  } 
  @keyframes hand{
      0%{
          top: 0;
          right: 100%;
      }
      70%, 100%{
        top: 55vw;
        right: 0.4vw;
      }
  } 
}

.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: 50vw 20vw 12.281vw 17.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: 20vw;
  height: 20vw;
  border: 0;
  background: url('../images/task/button.png?v=20250521') transparent no-repeat center;
  background-size: 70%;
  border-radius: 50%;
  transition: all 0.3s;
  position: relative;
  cursor: pointer;
}
.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 .old .lvbtn button:nth-child(4),
.features.task .lvbtn button:nth-child(6){
  position: absolute;
  left: 21%;
  bottom: 6%;  
}
.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: 70%;
}
.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.5rem;
  font-weight: bolder;
  padding-bottom: 1rem;
  padding-right: 0.2rem;
  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 svg{
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  margin-top: -3%;
  margin-left: -3%;
  opacity: 0;
}
.features.task .lvbtn button:hover svg,
.features.task .lvbtn button.active svg{
  opacity: 1;
}
/*新手-彈窗*/
.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: 80%;
  max-width: 90%;
  min-height: 300px;
  background-color: #ffff89;
  box-shadow: inset 2px 4px 4px #ffffe2, inset -4px -4px 4px #a1a10f;
  border-radius: 5vw;
  padding: 4vw;
  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: 0.8rem;
  line-height: 1.8rem;
}
.custom-modal .modal-content h6,
.custom-modal .modal-content h2{
  height: 100%;
  display: inline-flex;
  align-items: center;
  flex: 1;
  font-size: 1.8rem;
  font-weight: bolder;
  position: relative;
}
.custom-modal .modal-content h6{
  font-size: 1rem;
  flex-wrap: nowrap;
  text-wrap: nowrap;
}
.custom-modal .modal-content h2{
  flex: 0 1 70%;
}
.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 4px rgba(255,255,255,0.3);
  border-radius: 5.4vw;
  position: absolute;
  top: -1%;
  left: -1%;
  z-index: -1;
}
.custom-modal .close {
  color: #89dcfe;
  font-size: 8vw;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12vw;
  height: 12vw;
  background-color: #212b54;
  box-shadow: inset 2px 2px 2px #24365f,  inset -4px -4px 4px #1a1740;
  border-radius: 50%;
  position: absolute;
  top: -6vw;
  right: -6vw;
  cursor: pointer;
}
.custom-modal h2{
  font-size: 2rem;
  font-weight: bolder;
}

@media only screen and (max-width: 1024px)  {
  .features.task .lvbtn button::after,
  .features.task .lvbtn button::before{
    font-size: 4rem;
    padding-bottom: 2.5rem;
    padding-right: 0.5rem;
  }
}

@media only screen and (max-width: 600px) and (orientation : portrait)  {
  .custom-modal h2{
    font-size: 1rem;
  }
  .features.task .lvbtn button::after,
  .features.task .lvbtn button::before{
    font-size: 1.5rem;
    padding-bottom: 1rem;
    padding-right: 0.2rem;
  }
}















.partner{
  justify-content: flex-start;
}
.partner li{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 17vw;
  min-width: 75px;
  height: auto;
  margin: 0 3% 16px 3%;
}
.partner li img{
  width: 100%;
  aspect-ratio: auto 2/1;
}







.footer{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  position: relative;
}
.footer .bg {
  width: 100%;
  height: 100%;
  background: radial-gradient(var(--c06), var(--c07) 70%);  
  position: absolute;
  top: 0;
}
.footer .ft{
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer .ft.nb_1{
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 1;
}
.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%;
  min-width: 40px;
  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));
  aspect-ratio: auto 1/1;
}
.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{
  min-width: 80px;
  max-height: 48px;
  padding: 4px 10px;
  background-color: rgba(0,0,0,.65);
  border-radius: 8px;
}
.footer .ft.nb_2 .payment .area01 img:nth-child(1){
  aspect-ratio: auto 3/2;
}
.footer .ft.nb_2 .payment .area01 img:nth-child(2){
  aspect-ratio: auto 23/8;
}
.footer .ft.nb_2 .payment .area02 img{
  max-height: 36px;
  padding: 0 10px;
  margin-bottom: 8px;
}
.footer .ft.nb_2 .payment .area02 img:nth-child(1){
  aspect-ratio: auto 1/1;
}
.footer .ft.nb_2 .payment .area02 img:nth-child(2),
.footer .ft.nb_2 .payment .area02 img:nth-child(3),
.footer .ft.nb_2 .payment .area02 img:nth-child(4){
  aspect-ratio: auto 2/1;
}
.footer .ft.nb_2 .payment .area02 img:nth-child(5),
.footer .ft.nb_2 .payment .area02 img:nth-child(6){
  aspect-ratio: auto 3/1;
}
.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_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 8px;
  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: 0.9;
}
.footer .ft.nb_3 img{
  margin-left: auto;
  margin-bottom: 80px;
  min-width: 48px;
  height: 48px;
  z-index: 1;
  aspect-ratio: auto 1/1;
}  
.footer .ft.nb_3,
.footer .ft.nb_2,
.footer .ft.nb_1{
  width: 87%;
  margin: unset;
  padding-left: 3%;
}










.scroll_tips{
  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: 10px;
  z-index: 5;
}

@media only screen and (max-width: 600px) and (orientation : portrait)  {
  .scroll_tips{
    width: 45vw!important;
    height: 20vw!important;
  }
}

@keyframes scroll_tips{
  0%{
    bottom: 10px;
  }
  100%{
    bottom: -20px;
  }
}
@media only screen and (max-width: 1280px) and (orientation : portrait)  {
  .scroll_tips{
    width: 20vw;
    height: 10vw;
  }
}



/*LINE 官方QR*/
.line_qr{
  display: none;
  width: 0;
  height: 0;
}












.main.dir_list{
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 80px;
  margin: unset;
  margin-left: auto;
  padding-right: calc(3% + 62px);
  padding-bottom: 60%;
}
.login .main.dir_list{
  align-items: center;
}
.login .main.dir_list p{
  padding-left: 0;
}
.main.dir_list img{
  width: 80%;
  border-radius: 12px;
  margin: 0 auto;
  overflow: hidden;
}
.main.dir_list h1{
  color: var(--c00);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-align: center;
}
.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 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;
}







.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-y: hidden;
  overflow-x: auto;
}
.tablink{
  color: var(--c01);
  padding: 10px 10px 12px 16px;
  transition: all .5s;
  white-space: nowrap;
}
.tablink:hover,
.tablink.active{
  color: var(--c05);
  background-color: var(--c01);
}
.tab_con{
  display: none;
}
.tab_con.active{
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
.tab_con b{
  color: #ff3700;
  font-weight: bold;
}







.table{
  margin-bottom: 20px;
}
.table tr th{
  display: none;
}
.table tr td{
  display: block;
  width: 100%;
  color: var(--c06);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  border:  solid  var(--c03); 
  background-color: var(--c05);
  border-width: 0 1px 1px 1px;
  padding: 8px;
}
.table tr td::before{
  content: attr(data-th);
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c07);
  padding: 4px;
  width: 100%;
  background-color: var(--c05);
  border:  solid var(--c03); 
  border-width: 0 0 1px 0;
  margin-bottom: 8px;
}
.table tr .td_title{
  color: var(--c04);
  padding: 8px;
  background-color: var(--c02);
  border:  solid var(--c01); 
  border-width: 0 1px 1px 1px;
}
.table tr .td_memo::before,
.table tr .td_title::before{
  display: inline-block;
  color: var(--c04);
  width: unset;
  background-color: transparent;
  border: 0;
  margin-bottom: 0;
}
.table tr .td_memo{
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--c01);
  padding: 8px;
  background-color: var(--c04);
  border:  solid var(--c03); 
  border-width: 0 1px 1px 1px;
}
.table tr .td_memo::before{
  color: var(--c01);
}
.table tr td.td04_title::before{
  background-color: var(--c03);
}
.table.tab04 tr td::before{
  border: 0;
  margin-bottom: 0;
}
.dire_page .main.dir_list q{
  font-size: 0.8rem;
  padding-left: 0;
}
.tab_con .table.tab_vip td::before{
  display: inline-block;
  width: auto;
  color: var(--c04);
  text-align: left;
  margin-right: 10px;
  background-color: #8c6642;
  border: 0;
}
.tab_con .table.tab_vip .bg02{
  color: var(--c04);
  text-align: left;
  background-color: #8c6642;
}
.tab_con .table.tab_vip td br{
  display: none;
}
.table.flow td::before{
  content: none;
}
.table.flow td{
  width: auto;
  display: table-cell;
  background-color: transparent;
  border: 0;
}






/*.tab_con .table{
  border:  1px solid var(--c01); 
  margin-bottom: 40px;
}
.tab_con .table th{
  color: var(--c04);
  padding: 8px;
  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;
  padding-left: 0;
}
.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: 8px;
  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);
}
.tab_con .areaW{
  display: flex;
  width: 100%;
}
.tab_con .areaL{
  width: 40%;
}
.tab_con .areaR{
  width: 60%;
}
.tab_con .areaL img{
  width: 100%;
}
  .tab_con .table.tab_vip .bg02{
  color: var(--c04);
  text-align: left;
  width: 10%;
  background-color: #8c6642;
  padding: 8px;
}
.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;
  right: 0;
}
.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;
}
.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 img,
.tab_con img{
  width: 70%;
}
.tab_con .bg_title{
  opacity: 0.5;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
}
.tab_con .bg_title span{
  color: var(--c04);
  font-size: 5rem;
  font-weight: bolder;
  text-shadow: 4px 4px 10px var(--c01);
  padding: 0;
  margin: 0;
  position: absolute;
  top: -2vw;
  right: calc(3% + 120px);
}
.tab_con .bg_title p{
  display: flex;
  justify-content: end;
  min-width: 50vw;
  font-size: 8rem;
  font-style: italic;
  white-space: nowrap;
  font-family: 'Archivo Black', sans-serif;
  -webkit-text-stroke: 3px var(--c03);
  color: transparent;
  padding: 0;
  padding-right: calc(3% + 120px);
  margin: 0;
}








.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;
}














.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;
}
.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: 206px;
  width: 55%;
  -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;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateX(0) translateY(0);
}
@-webkit-keyframes oxxo{ 
  0%,100%{ 
    transform: translateX(0) translateY(0);
  } 
  50%{ 
    transform: translateX(2px) translateY(3px);
  } 
}
@keyframes oxxo{ 
  0%,100%{ 
    transform: translateX(0) translateY(0);
  } 
  50%{ 
    transform: translateX(2px) translateY(3px);
  } 
}

.t2{
  min-width: 56px;
  width: 15%;
  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;
  position: absolute;
  margin: auto;
  left: 56px;
  top: 18px;
  bottom: 0;
  transform: scaleX(1) translateX(0) translateY(0);
}

@-webkit-keyframes oxxo2{ 
  0%,100%{ 
      transform: scaleX(1) translateX(0) translateY(0);
  } 
  50%{ 
      transform: scaleX(0.8) translateX(4px) translateY(3px);
  } 
}

@keyframes oxxo2{ 
  0%,100%{ 
    transform: scaleX(1) translateX(0) translateY(0);
  } 
  50%{ 
    transform: scaleX(0.8) translateX(0) translateY(3px);
  } 
}















.wrap.blog{
  background-color: #eee;
}
.wrap.blog .blog_ban img,
.wrap.blog .blog_main,
.wrap.blog .blog_ban,
.wrap.blog .blog_navbar,
.wrap.blog .blog_context,
.wrap.blog{
  width: 100%;
}
.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: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.blog_navbar a{
  display: block;
  padding: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c00);
  text-align: center;
  white-space: nowrap;
  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;
  border-bottom: 1px solid #bfbfbf;
  padding: 16px 0;
  background: transparent;
  transition: background .3s ease-in-out;
}
.blog_main:hover{
  background: url('../../blog/img/blog_main_hover.webp?v=231012') 50% no-repeat;
  background-size: cover;
}
.blm_liink{
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  transition: all .3s;
}
.blm_liink .title{
  display: grid;
  grid-template-columns: 50% 1fr;
  grid-template-rows: 1.5rem 1fr;
  grid-column-gap: 12px;
  padding: 0 20px;
}
.blm_liink .title h3{
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: var(--c06);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.5px;
  transition: all .3s;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.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: 3px solid #ffde70;
}
.blm_liink p{
  font-size: 0.8rem;
  color: var(--c06);
  height: 85px;
  line-height: 1.65;
  letter-spacing: 0.5px;
  margin-top: 8px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.blm_liink .data{
  display: none;
}
.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::before{
  content: none;
}
.blog .footer .bg{
  background: url('../../blog/img/blog_bg2.webp?v=231012');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.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_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: 100%;
  margin: 20px auto;
}
.art_content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.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;
  flex-wrap: wrap;
  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: 1.5rem;
  color: var(--c06);
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin-top: 48px;
  padding: 0 16px;
}
.art_top_wrap .back{
  color: var(--c00);
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  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_poker:hover{
  background-color: #e685b5;
}
.tag_sport:hover{
  background-color: #79dfc1;
}
aside.sidebar{
  display: flex;
  flex-direction: column;
  width: 90%;
  background-color: var(--c01);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  border-radius: 16px;
  padding: 24px;
}
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{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%;
}
.art_txt h2{
  color: var(--c06);
  font-size: 1.25rem;
  font-weight: 900;
  margin: 32px 0 16px 0;
}
.art_txt ul{
  width: 100%;
  margin-bottom: 24px;
  padding-left: 24px;
  word-wrap: break-word;
}
.art_txt li{
  list-style: disc;
  font-size: 1rem;
  line-height: 1.8;
}
.art_txt li b{
  color: #fb8d23;
}
.art_txt p{
  font-size: 1rem;
  line-height: 1.8;
}
.art_txt img{
  height: 160px;
  margin-top: 8px;
  margin-bottom: 8px;
}





























@media only screen and (max-width: 1114px) and (max-height: 720px), only screen and (max-width:1194px){
  .games li{
    width: calc(100% / 4 - 16px);
  }
  .games li:not(:nth-child(2n)){
    margin-left: 16px;
  }
}




@media only screen and (max-height: 1368px){
  .features{
    padding-top: 14vw;
  }
  .features .item{
    padding-bottom: 8vw;
  }

  .games{
    padding-left: 0;
  }
  .games li{
    width: calc(50% - 24px);
    height: 400px;
  }
  .games li:not(:nth-child(2n)){
    margin-left: 0;
  }
  .games a:hover .hov{
    transform: translate3d(0%, 0%, 100px);
  }
  .games a:hover .title{
    transform: translate3d(0%, -0%, 100px);
  }
  .main.dir_list{
    padding-bottom: 10%;
  }
  .partner{
    padding-left: 0;
    justify-content: center;
  }
  .partner li{
    width: 22vw;
  }
}


@media only screen and (max-height: 1360px){
  .sn:not(.sn.cont_1,.sn.cont_3){
    height: unset;
  }
  .sn.cont_1{
    background-image: url('../images/bg.webp');
    background-size: cover;
  }
}



@media only screen and (max-width: 1194px){
  .features{
    padding-top: 1rem;
  }
  .games{
    padding-left: 0;
    /* padding-right: 5%; */
  }

  .sn .title p{
    display: none;
  }
  .sn .title h2{
    font-size: 2rem;
  }
  .sn:not(.sn.cont_1){
    height: unset;
  }
  /* .sn.cont_1 .slogan,
  .sn.cont_1 a{
    width: 100%;
  } */
  .partner li{
    width: 20vw;
  }
}


@media only screen and (max-width: 912px){
  .tab_con .bg_title{
    display: none;
  }
  .footer .ft.nb_2,
  .footer .ft.nb_1{
    width: 100%;
    flex-direction: column;
    padding-left: 0;
  }
  .footer .ft.nb_1 .list{
    width: 200px;
    padding: 10px;
  }
  .footer .ft.nb_2 .ft_logo{
    display: none;
  }
  .footer .ft.nb_2 .tips, .footer .ft.nb_2 .payment{
    max-width: 50%;
    padding-left: 0;
    margin: 10px;
  }
  .footer .ft.nb_2 .payment .area01 img{
    margin-right: 10px;
  }
  .footer .ft.nb_2 .payment .area02 img{
    min-width: 40px;
    max-height: 24px;
  }
  .footer .ft.nb_2 .payment .area01{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer .ft.nb_2 .ft_btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer .ft.nb_3{
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    padding-left: 0;
    margin: 2vw auto;
  }
  .footer .ft.nb_3 p{
    width: 100%;
    text-align: center;
  }
  .btn_more{
    width: 80%;
  }
}

@media only screen and (max-width: 820px){
  .logo{
    width: 200px;
    min-width: 200px;
  }
  .sn.cont_1{
    background-image: url('../images/bg_mobile.webp');
    background-size: cover;
  }
}


@media only screen and (max-height: 720px), 
only screen and (max-width: 440px){
  .features{
    padding-left: 0;
    padding-bottom: 0;
  }
  .features h4{
    font-size: 1rem;
  }
  .features p{
    font-size: 13px;
  }
}


@media only screen and (max-width: 768px){
  .footer .ft.nb_1 .list{
    grid-template-columns: 5.6vw 1fr;
  }
}

@media only screen and (max-width: 540px){
  .games li{
    width: calc(50% - 24px);
    height: 270px;
  }
  .icon.step{
    font-size: 5rem;
  }
  .tab_con .table.flow .btn_sign, .tab_con .table.flow .btn_playn{
    left: 0;
    top: unset;
    bottom: 0;
  }
  .tab_con .areaW{
    flex-wrap: wrap;
  }
  .tab_con .areaL{
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .tab_con .areaL img{
    width: 50%;
  }
  .tab_con .areaR{
    width: 100%;
  }
  .table{
    width: 100%;
    overflow: hidden;
  }
  .table tbody{
    overflow-x: scroll;
  }
  .main.dir_list{
    padding-bottom: 10%;
  }
}
@media only screen and (max-width: 440px){
  .header .menu{
    padding-top: 40px;
  }
  .logo{
    width: 160px;
    min-width: 160px;
  }
  .main.dir_list{
    padding: 40px;
    padding-top: 100px;
  }
  .kim.baby01{
    display: none;
  }
  .blm_liink{
    width: 100%;
  }
  .blog_navbar{
    justify-content: flex-start;
  }
  .blog_navbar a{
    font-size: 0.9rem;
    padding: 8px;
  }
  .footer .ft.nb_1 .list{
    grid-template-columns: 11.6vw 1fr;
  }
  .footer .ft.nb_2 .tips, .footer .ft.nb_2 .payment{
    min-width: 80%;
  }
  .footer .ft.nb_2 .ft_btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer .ft.nb_3{
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    padding-left: 0;
    margin: 2vw auto;
  }
  .footer .ft.nb_3 p{
    width: 100%;
    text-align: center;
  }
  .btn_more{
    width: 80%;
  }
}