@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Noto+Sans+TC:wght@100..900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Stick+No+Bills:wght@200..800&display=swap');
/* reset */
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

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, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output, 
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth; background: #000000; font-family: 'Oswald';}
body {width: 100%; font-size: 1.4rem; color: #fff; font-weight: 400; line-height: 1;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0; letter-spacing: -4px;}
li {font-size: 1.4rem; letter-spacing: 0;}
img {max-width: 100%; line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-family: 'Oswald'; text-transform: uppercase;}

/**/
form, fieldset {width:100%; display: block;}
label {font-family: 'Oswald'; text-transform: uppercase;}
textarea, select, input {font-size: 1.2rem; color: #fff; font-family: 'Roboto';}
textarea {resize: none;}
select {padding: 0 24px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}
select:focus {outline: none;}
input {padding: 0 24px; border: none; background: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none;}
input::-ms-clear {display: none;}
input:focus {outline: none;}
button {font-family: 'Oswald'; font-weight: 700; text-decoration: none; display: inline-block; outline: none; cursor: pointer;}
button:focus {outline: none;}
a {color: #fff; text-decoration: none; display: inline-block; outline: none;}
a:focus {outline: none;}

.dimmed {display:none; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.6); position: fixed; left: 0; top: 0; z-index: 10;}
.inner {margin:0 auto;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}
.obj {position:absolute;}
.fadeInUp {animation-duration:0.5s;}

.cha {position:absolute; opacity:0; animation-fill-mode: forwards !important;}

.cha01 {top:28.2rem; left:0; max-width:1024px; width:39.8%;}
.cha02 {bottom:21.4rem; right:0; max-width:648px; width:25.2%;}

.line {position:absolute; opacity:0; animation-fill-mode: forwards !important;}
.line01 {top:0; left:0; max-width:2040px; width:79.4%;}
.line02 {top:0; right:0; max-width:1464px; width:57%;}
.line03 {bottom:0; right:0; max-width:348px; width:13.55%;}
.line04 {bottom:0; left:0; max-width:348px; width:13.55%;}
.line05 {bottom:-7.2rem; left:2.8%; max-width:38px; width:1.48%;}

.animated .cha01 {animation: fil 0.5s;}
.animated .cha02 {animation: fir 0.5s;}
.animated .line01 {animation: fil 0.5s;}
.animated .line02 {animation: fir 0.5s;}
.animated .line03 {animation: fir 0.3s;}
.animated .line04 {animation: fil 0.3s;}
.animated .line05 {animation: fil 0.3s;}

header {position:absolute; top:0; right:0; left:0; padding:3.6rem 2.4rem 0; z-index: 12;}

.all_wrap {padding:0 0 14rem; overflow:hidden; text-align:center; padding-bottom:5rem; background:url('/images/event/2025/vote/result/bg_result.jpg') center 0 no-repeat; background-size:cover;}
section {position:relative; padding:0 2.4rem;}

.sub_tit h3 {font-size: 86px; font-weight:800; font-family: 'Stick No Bills'; text-transform:uppercase; position:relative; color:#000000;}
.sub_tit h4 {margin-top:-0.4rem; color:#44ffff; font-size:22px; letter-spacing:0.02em;}
.sub_tit h4 span {box-shadow:0 0 1rem rgba(0, 0, 0, 0.2); display:inline-block;  padding:0.8rem 9.4rem; background: url('/images/event/2025/vote/tit_bar_l.png') left 6px top 50% no-repeat , url('/images/event/2025/vote/tit_bar_r.png') right 6px top 50% no-repeat; background-color:#000;}

.section01 {position:relative; margin-bottom:13.8rem; padding-top:12rem;}
.section01 .inner {z-index: 3; position:relative; padding-left:2.4rem; padding-right:2.4rem;}
.section01 .title_wrap { margin:0 auto;}
.section01 .title {animation-duration:1s; margin:5rem auto 3rem; position:relative; }
.section01 .date {margin:0 auto; font-size:0; display:inline-block; position:relative;}
.section01 .date > span {position:relative; display:inline-block; vertical-align:middle; color:#bbffff; font-weight:600; text-transform:uppercase; font-family: 'Stick No Bills'; font-size:33.5px; z-index:1; -webkit-text-stroke: 0.05rem #44ffff; text-stroke: 0.05rem #44ffff; margin:0 2.4rem; letter-spacing:0.04rem;}
.section01 .date > span.end {color:#ffffff; -webkit-text-stroke: 0.05rem #ffdd77; text-stroke: 0.05rem #ffdd77;}
.section01 .date .bar {padding:4px 8px; display:inline-block; position:relative; vertical-align:middle; width:388px; background:url('/images/event/2025/vote/result/bar_bg.png') 0 center repeat-x; height:36px; z-index:1; }
.section01 .date .bar:before, .section01 .date .bar:after {box-shadow:0 0 0.2rem rgba(68, 255, 255, 0.3); content:''; display:block; position:absolute; top:0; bottom:0; width:4px; background:#44ffff;}
.section01 .date .bar:before {left:0;}
.section01 .date .bar:after {right:0;}
.section01 .date .bar .on {box-shadow:inset 0 0 0.4rem #44ffff, 0 0 1.2rem rgba(68, 255, 255, 0.3) , 0 0 1rem rgba(68, 255, 255, 0.2); display:block;; height:100%; position:relative; background:#44ffff;}
.section01 .date .bar .on:after {top:50%; right:-8px; z-index:1; transform:translate(0 , -50%); content:''; display:block; position:absolute; width:24px; height:60px; background:url('/images/event/2025/vote/result/bar_arr.png') 0 0 no-repeat;}

.vote_area {padding:9rem 0 4.8rem; position:relative; border:2px solid #44ffff; background:rgba(0, 34, 51, 0.8); margin-bottom:12rem; max-width:1632px; margin-left:auto; margin-right:auto;}
.vote_area:before, .vote_area:after {content:''; display:block; position:absolute; left:-2px; right:-2px;  background-repeat:no-repeat;}
.vote_area:before {top:0; background-image:url('/images/event/2025/vote/st_bar01.png'); height:1.2rem; background-position:center center;}
.vote_area:after {bottom:-2px; background-image:url('/images/event/2025/vote/result/sc02_b_l.png') , url('/images/event/2025/vote/result/sc02_b_r.png'); height:3.6rem; background-position:0 bottom , right bottom;}
.vote_area .inner {position: relative; z-index: 1;}
.vote_area .sub_tit h3 {position:relative; color:#44ffff; -webkit-text-stroke: 0.15rem #0ef; text-stroke: 0.15rem #0ef; letter-spacing: 0.04rem;}
.vote_area .sub_tit h3 span {color:#117788; font-weight:800;}
.vote_area .list {font-size:0; max-width:1296px; margin:8rem auto 0;}
.vote_area .list li {display:inline-block; vertical-align:top; width:calc((100% - 19.2rem) / 4); margin:0 2.4rem 4.8rem; position:relative;}
.vote_area .list li:after { content: ''; display: block;   padding-bottom: 78.266%;}
.vote_area .list li .con {padding:10.87% 18.12% 0; position:absolute; top:0; left:0; bottom:0; right:0; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/event/2025/vote/result/bg_guess01.png'); background-size:100% auto;}
.vote_area .list li .con img {box-shadow:0 1rem 3rem rgba(0, 25, 34, 0.35); border:1px solid #44ffff;}
.vote_area .list li .con span {display:flex; align-items:center; justify-content:center; font-size:22px; color:#ffffff; text-transform:uppercase; letter-spacing:0.02em; -webkit-text-stroke: 0.02rem #44ffff; text-stroke: 0.02rem #44ffff; height:29%;}
.vote_area .list li.top:before {z-index:1; content:''; display:block; position:absolute; top:-1.8rem; left:-1.8rem; width:9.6rem; height:9.6rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.vote_area .list li.top .con {background-image:url('/images/event/2025/vote/result/bg_guess_on.png') !important; }
.vote_area .list li.top .con img {border:none !important;}
.vote_area .list li.top .con span {color:#000000; text-stroke:0 !important; -webkit-text-stroke: 0 !important; text-shadow:0 0 1px #aaaa00;}

.section02 .vote_area .list li.top:before {background-image:url('/images/event/2025/vote/result/top4.png');}

.section03 {z-index:1;}
.section03 .vote_area {background:rgba(42, 30, 12, 0.8); border-color:#ffdd77;}
.section03 .vote_area:before {background-image:url('/images/event/2025/vote/st_bar02.png');}
.section03 .vote_area:after {background-image:url('/images/event/2025/vote/result/sc03_b_l.png') , url('/images/event/2025/vote/result/sc03_b_r.png');}
.section03 .vote_area .sub_tit h3 {position:relative; color:#ffdd77; -webkit-text-stroke: 0.15rem #ffcc44; text-stroke: 0.15rem #ffcc44;}
.section03 .vote_area .sub_tit h3 span {color:rgb(153, 136, 68);}
.section03 .vote_area .list li .con {background-image:url('/images/event/2025/vote/result/bg_guess02.png');}
.section03 .vote_area .list li .con span {-webkit-text-stroke: 0.02rem #ffeeaa; text-stroke: 0.02rem #ffeeaa;}
.section03 .vote_area .list li .con img {border-color:#ffdd77;}
.section03 .vote_area .list li.top:before {background-image:url('/images/event/2025/vote/result/top2.png');}

.section04 .vote_area {background:rgba(51, 2, 2, 0.8); border-color:#ff4444;}
.section04 .vote_area:before {background-image:url('/images/event/2025/vote/st_bar03.png');}
.section04 .vote_area:after {background-image:url('/images/event/2025/vote/result/sc04_b_l.png') , url('/images/event/2025/vote/result/sc04_b_r.png');}
.section04 .vote_area .sub_tit h3 {position:relative; color:#ff4444; -webkit-text-stroke: 0.15rem #ff1111; text-stroke: 0.15rem #ff1111;}
.section04 .vote_area .sub_tit h3 span {color:#882222;}
.section04 .vote_area .list li .con {background-image:url('/images/event/2025/vote/result/bg_guess03.png');}
.section04 .vote_area .list li .con span {-webkit-text-stroke: 0.02rem #ffcccc; text-stroke: 0.02rem #ffcccc;}
.section04 .vote_area .list li .con img {border-color:#ff7777;}
.section04 .vote_area .list li.top:before {background-image:url('/images/event/2025/vote/result/top1.png');}

footer {padding:7.2rem 2.4rem 9.5rem; text-align:center; font-size:14px; color:#999999; font-family:'Roboto';}
footer a {margin-bottom:1.5rem;}

/* tw */
.tw { font-family: 'Noto Sans TC';}
.tw .section01 .date > span {font-family: 'Noto Sans TC'; font-size:30px; letter-spacing:-0.02em;}
.tw .vote_area .sub_tit h3 {font-size:66px;}
.tw .vote_area .sub_tit h3 font {font-size:60px; font-weight:600;}
.tw .vote_area .list li .con span {font-family: 'Noto Sans TC'; font-size:20px; letter-spacing:0;}
.tw .vote_area .list li.top .con span {font-weight:500;}

@media screen and  (max-width: 1500px){

.cha01 {left:-13rem;}
}

@media screen and  (max-width: 1320px){
.cha {display:none;}
}

@media screen and  (max-width: 1280px){
.vote_area .list li .con span {font-size:18px;}
}
	
@media screen and  (max-width: 1023px){
.vote_area .list li { width: calc((100% - 14.4rem) / 3);}
}	

@media screen and  (max-width: 768px){
html {font-size:32%;}
header h1 img {width:70px;}
footer {font-size:2.3rem;}
footer img {width:100px;}
.section01 .title_wrap .logo img {width:111px;}
.section01 .date > span {font-size:3.4rem; margin-left:0;}
.section01 .date > span.end {margin-left:2.4rem; margin-right:0;}
.section01 .date .bar {width:212px;}

.sub_tit h3 {font-size:9.5rem;}
.sub_tit h3:before {background-size:1.6rem auto;}
.sub_tit h3 span {display:block;}
.sub_tit h4 {font-size:3.1rem;}
.sub_tit h4 span {background-size:6rem auto;}

.vote_area .sub_tit h3 span {display:block;}
.vote_area:before {background-size:auto 100%;}
.vote_area:after {background-size:auto 100%;}
.vote_area .list li .con span {font-size:2.4rem;}

/* tw */
.tw .section01 .date > span { font-size:3.2rem;}
.tw .vote_area .sub_tit h3 {font-size:6.5rem; font-weight: 700;}
.tw .vote_area .sub_tit h3 font {font-size:6rem;}
.tw .vote_area .list li .con span {font-size:2.8rem;}
.tw .vote_area .sub_tit h3 font {display:block;}
}

@media screen and  (max-width: 500px){
.vote_area .list li { width: calc((100% - 9.6rem) / 2);}	
.vote_area .list li .con span {font-size:2.4rem;}

/* tw */
.tw .vote_area .list li .con span {font-size: 1.9rem;}
}

@keyframes fil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes fir {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes diaUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes diaDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}