/*font 8-bit*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

.ff8bit{font-family: 'Press Start 2P';}
.ffnoto{font-family: 'Noto Sans TC', sans-serif;}

/* ========================

         首頁小賽程

========================*/
.card_week_date{
    width:120px;
    height: 88px;
    text-align:center;
    background: #000;
    display: inline-block;
    padding:5px 8px;
    margin: auto 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;

}

.week_date_info{
  position: absolute;
  top: 27%;
  left: 20%;

}

.card_game {
    width:200px;
    height: 88px;
    text-align:left;
    background: linear-gradient(135deg, #000 0%, #222 55%, #111 100%);
    display: inline-block;
    padding:6px 10px;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}


.scrolling-wrapper {
    width: calc(100% - 0px);
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;  /* IE and Edge 隱藏卷軸*/
    scrollbar-width: none;  /* Firefox 隱藏卷軸*/
}

.scrolling-wrapper ::-webkit-scrollbar {display: none;} /* Chrome, Safari and Opera 隱藏卷軸*/


.scrolling-wrapper h1, .scrolling-wrapper h3, .scrolling-wrapper h5{line-height: 21px; font-family: 'Noto Sans TC'; margin:0; font-size: 12px; color: #bbb; font-weight: 400;}
.scrolling-wrapper h1 img, .scrolling-wrapper h3 img{width:20px; margin-right: 12px;}
.scrolling-wrapper h1 span, .scrolling-wrapper h3 span, .scrolling-wrapper  span{font-family: 'Noto Sans TC'; font-weight: 500; font-size: 12px;}

/*G01 8-bit風格文字*/
.card_week_date h5 b{font-family: 'Press Start 2P'; -webkit-transform : scale(0.9); display : inline-block;  }


.index_schedule_time{-webkit-transform : scale(1); display : inline-block; margin-right: 0px; color: #ddd; text-shadow:1px 1px #000; font-weight: 300;  }


/* 贏家輸家 */
h1.winner span{opacity: 1; font-weight: 700;  }
h1.loser span{opacity: 0.5; font-weight: 700;}


/*小賽程裡部資訊*/
.game_card_info1, .game_card_info2, .game_card_info3{width: 180px;}
.game_card_info1 h3 b{color: #ddd; font-weight: 900; }

/*電腦版資訊*/
@media screen and (min-width:769px ){
.card_game:hover .game_card_info1{opacity: 0.2;}
.card_game .game_card_info2{display: none; }
.card_game:hover .game_card_info2{display: block; position: absolute; top:5px; z-index: 999; }
.card_game{ height: 88px;}
.card_game:hover{background: #000;}
}

/*手機版資訊*/
@media screen and (max-width:768px ){
.card_game:hover .game_card_info1{opacity: 1;}
.card_game .game_card_info2{display: none; }
.card_game:hover .game_card_info2{ display: none;}
.card_game{ height: 122px;}
.card_game:hover{background: linear-gradient(135deg, #000 0%, #222 55%, #111 100%);}
.week_date_info{
  position: absolute;
  top: 7%;
  left: 20%;
}
.scroll_col:hover .left_control, .scroll_col:hover .right_control {display: none;}
}

/*電腦版小賽程button*/
.game_card_info2 a{ display: block;padding: 3px 7px 3px 7px; border: 1px solid #bb986C; background: #bb986c; font-size: 14px; color: #111; margin-bottom: 5px; opacity: 1;}
.game_card_info2 a:hover{ display: block; padding: 3px 7px 3px 7px; border: 1px solid #bb986C; color: #111; margin-bottom: 5px; opacity: 1;}

/*手機版小賽程button*/
.game_card_info3 a{ display: inline-block; padding: 1px 12px; font-size: 14px; color: #111; margin-top: 10px; opacity: 1;background: linear-gradient(90deg, #bb986c 50%, #2b2013 100%); box-shadow: 0px 2px #000;  }


.game_card_info2 a span{ display: inline-block; width: 150px; text-align: left;}

.game_card_info2 a i{opacity: 0;}
.game_card_info2 a:hover i{opacity: 1;}

/*滾軸左右控制*/
.left_control{ left:-10px; }
.right_control{right:-10px;}
.left_control, .right_control{position: absolute; top:30px; opacity: 0;}
.scroll_col:hover .left_control, .scroll_col:hover .right_control {position: absolute; top:30px; opacity: .75;}


/* ========================

    電腦版 Menu 購票

========================*/


.glitch_button, .glitch_button::after {
  width: 200px;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Noto Sans TC', sans-serif;
  background: linear-gradient(90deg, #111 50%, #000 100%); 
  border: 0;
  color: #eee;
  box-shadow: 0px 0px 0px #444;
  outline: transparent;
  position: relative;
  margin: 0px 0px 0px 0;
  display: block;
  text-align: left;
  padding: 7px 0 0 15px;
  border-bottom: 1px solid #000;
}

.glitch_button:hover{background: linear-gradient(90deg, #bb986c 50%, #2b2013 100%); }


.glitch_button span{color: #bb986c;}
.glitch_button:hover span{color: #000;}

.glitch_button::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'PLG TICKET';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #000 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  box-shadow: 3px 0px 0px #00E6F6;
  clip-path: var(--slice-0);
}

.glitch_button:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}


/* ========================

    About En 關於 英文版

========================*/

.bg_about_blur{background:url('../img/page_banner/bg_about3.png') no-repeat;  background-size:100% auto; background-attachment: ; width: 100vw; }



.lines {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 100vw;
  z-index: 1;
}

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1) ;
  overflow: hidden;
  z-index: 1;
}
.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, #fff 75%, #fff 100%);
  -webkit-animation: drop 9s 0s infinite;
          animation: drop 9s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line:nth-child(1) {
  margin-left: -25%;
}
.line:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.line:nth-child(3) {
  margin-left: 25%;
}
.line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

@-webkit-keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

/*SVG*/


svg {
    display: inline-block;
    font: 120px 'Worker';
    width: 960px;
    height: 100px;
    margin: 0;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
  stroke: #a27f53;
  animation-delay: -1;
}

.text-copy:nth-child(2){
  stroke: #8c6b41;
  animation-delay: -2s;
}

.text-copy:nth-child(3){
  stroke: #a27f53;
  animation-delay: -3s;
}

.text-copy:nth-child(4){
  stroke: #8c6b41;
  animation-delay: -4s;
}

.text-copy:nth-child(5){
  stroke: #71532e;
  animation-delay: -5s;
}

@keyframes stroke-offset{
  100% {stroke-dashoffset: -35%;}
}


.header_for_about, .header_for_about_en{cursor: pointer;}
.header_for_about:hover, .header_for_about_en:hover{color: #bb986C;}

.about_tw_en_switch{position: fixed; bottom:0%; right:0px; z-index: 1;}

footer {z-index: 9;}