@charset "UTF-8";
/* CSS Document */

* {margin:0px; padding:0px;user-select:none}
img{/*display: block;*/  -webkit-user-drag: none;}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700&display=swap');
/*font-family: 'Noto Sans TC', sans-serif;*/

@font-face {
    font-family: 'CursedTimerUlil';
    src: url("../fonts/CursedTimerUlil-Aznm.woff") format("woff"), url("../fonts/CursedTimerUlil-Aznm.ttf") format("truetype");
}

body, html {position:relative; width:100%; height:100%; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300; color:black; overflow-x:hidden; background:url(../images/vote/bg.jpg) center no-repeat; background-size:cover;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active, a:visited {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}


/* -------- 共用 -------- */
header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  background: #e77829;
  z-index: 999;
}

header .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100px;
  padding: 0 5%;
}

header .logo {
  width: auto;
  height: 65px;
  margin: 0 20px 0 0;
}

header .logo img {
  width: auto;
  height: 100%;
}

header .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header .nav li {
  margin: 0 30px 0 0;
}

header .nav li.active a {
  color: #020202;
}

header .nav a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}

header .nav a:hover {
  color: #020202;
}

header .ham {
  display: none;
}

footer {
  width: 100%;
  background: #000;
  padding: 20px 0;
  position:relative; z-index:1; margin-top:100px;
}

footer p {
  color: #fff;
  text-align: center;
  font-size: 12px;
}


#loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #30130b;
  z-index: 100;
}

#loading .centerbox {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 400px;
}

#loading .img {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
}

#loading .loading_circle {
  width:100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-filter: drop-shadow(0 0 2px #f4812e);
          filter: drop-shadow(0 0 2px #f4812e);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: rotate 2s infinite linear;
          animation: rotate 2s infinite linear;
}

#loading .loading_img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 46px;
  -webkit-animation: scale 1.5s infinite linear;
          animation: scale 1.5s infinite linear;
}

#loading .loading_text {
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
}

#loading .loading_bar {
  height: 5px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

#loading .loading_bar .progress {
  background: #e77829;
  width: 1%;
  height: 5px;
  -webkit-transition: all 1s;
  transition: all 1s;
}

@-webkit-keyframes rotate {
  form {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate {
  form {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  8% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  16% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  24% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  32% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  8% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  16% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  24% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  32% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}


.cen1200 {display:block; width:90%; max-width:1200px; margin:50px auto; position:relative; z-index:1;}


.kol {position:relative; display:flex; justify-content:flex-start; align-items:center;}
.kol p {font-size:36px; font-weight:700; color:white; z-index:1;}
.kol::after {display:block; content:''; width:480px; height:100px; background:rgba(0, 0, 0, 0.4); position:absolute; z-index:0; transform: translate(0px, 0px) skew(-10deg, 0deg); border:1px solid rgba(239, 81, 19, 0.4);}

.kol .rotate_yl {position:relative; width:80px; height:80px; margin-left:20px; margin-right:20px; z-index:1;}
.kol .rotate_yl img {position:absolute; top:0; left:0; width:100%;}
.kol .rotate_yl img.yellow_circle {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

.kol .pointing_line {display:flex; align-items:flex-start; width:200px; height:80px; position:absolute; top:90%; left:120px; z-index:1;}
.kol .pointing_line span:nth-child(1) {width:55%; border-bottom:2px solid #e77829; position:relative;}
.kol .pointing_line span:nth-child(1)::before {display:block; content:''; width:7px; height:7px; background:#e77829; border-radius:50%; position:absolute; top:50%; left:0px; transform:translateY(-50%);}
.kol .pointing_line span:nth-child(2) {width:45%; height:100%; position:relative;
  background: linear-gradient(to top right,
  transparent 0%,
  transparent calc(50% - 2px),
  #e77829 50%,
  transparent calc(50% + 2px),
  transparent 100%);
}
.kol .pointing_line span:nth-child(2)::after {display:block; content:''; width:7px; height:7px; background:#e77829; border-radius:50%; position:absolute; right:-2px; bottom:-2px;}

.main_area {position:relative; margin:50px auto; display:flex; justify-content:space-between; align-items:center;}

.pic_area {position:relative; flex:1; z-index:3;}
.pic_area .kol_pic {width:100%; height:auto; z-index:1; position:relative;}
.pic_area .time_circle {position:absolute; left:0px; bottom:0px; z-index:0; width:100%; height:auto;}
.pic_area .wincafe {width:48%; height:auto; position:absolute; top:45%; left:0px; transform:translateY(-50%); z-index:2;}
.pic_area .vote_title {display:block; width:70%; padding:20px; position:absolute; bottom:15%; left:50%; transform:rotate(355deg) translateX(-50%); z-index:4; font-size:30px; color:#e77829; font-weight:700; text-align:center;}
.pic_area .vote_title::before {display:block; content:''; width:calc(100% - 4px); height:calc(100% - 4px); background:black; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1; clip-path: polygon(1% 5%, 97% 0, 100% 102%, 0 95%);}
.pic_area .vote_title::after {display:block; content:''; width:100%; height:100%; background:#e77829; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:-2; clip-path: polygon(1% 5%, 97% 0, 100% 102%, 0 95%);}

.vote_area {position:relative; flex:1; box-sizing:border-box; padding-left:30px;}

.corner {display:block; position:absolute; top:0px; left:0px; z-index:1; width:100%; height:100%;}
.corner .tp_lt {width:20px; height:20px; position:absolute; top:-20px; left:-20px; border-top:3px solid #e77829; border-left:3px solid #e77829;}
.corner .tp_rt {width:20px; height:20px; position:absolute; top:-20px; right:-20px;  border-top:3px solid #e77829; border-right:3px solid #e77829;}
.corner .bt_lt {width:20px; height:20px; position:absolute; bottom:-20px; left:-20px; border-bottom:3px solid #e77829; border-left:3px solid #e77829;}
.corner .bt_rt {width:20px; height:20px; position:absolute; bottom:-20px; right:-20px; border-bottom:3px solid #e77829; border-right:3px solid #e77829;}

#count_area {display:table; padding:60px 50px 40px 50px; margin-bottom:60px; position:relative; background:url(../images/vote/time_bg.png) center no-repeat;}
.clock {font-family: 'CursedTimerUlil'; font-style:italic; color:white; font-size:60px; position:relative; z-index:2;}
#count_area p {display:table; padding:10px 20px; position:absolute; top:-10px; left:0px; z-index:1; color:white; font-weight:500; font-size:20px; filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.8));}
#count_area p::before {display:block; content:''; width:120px; height:40px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) skew(-10deg, 0deg); z-index:-1; background:#e77829; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 60%);}
#count_area p::after {display:block; content:''; width:122px; height:42px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) skew(-10deg, 0deg); z-index:-2; background:#ffff00; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 60%);}

.voting {position:relative;}
.options {position:relative; margin:30px 0px; z-index:1;}
.options p {font-size:24px; color:white; font-weight:500; font-style:italic; margin-bottom:10px;}
.options .inline {display:flex; justify-content:space-between; align-items:center;}
.progress＿bar {display:flex; width:60%; flex-wrap:nowrap; justify-content:flex-start; align-items:center; padding:10px 0px 10px 15px; background:url(../images/vote/bar_bg.png) left bottom no-repeat; background-size:auto 60%; overflow:visible;}
.progress＿bar span {width:4%; height:30px; margin:2px; transform:translate(0px, 0px) skew(-17deg, 0deg);
  box-shadow: 0px 0px 5px 0px #ef5113;
  background: rgb(255,235,11);
  background: -moz-linear-gradient(180deg, rgba(255,235,11,1) 0%, rgba(255,146,18,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,235,11,1) 0%, rgba(255,146,18,1) 100%);
  background: linear-gradient(180deg, rgba(255,235,11,1) 0%, rgba(255,146,18,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffeb0b",endColorstr="#ff9212",GradientType=1);
}
.percentage {font-size:60px; margin:0px 5px; color:yellow; font-style:italic; font-weight:500;}
.percentage small {font-size:40px;}

.choose {position:relative; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; padding:8px 15px; border-radius:50px; border:2px solid #e77829; background:none; margin-left:20px; box-shadow: 0px 0px 10px 0px rgba(255,127,35,0.8); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.choose p {font-size:26px; width:60px; color:#e77829; font-style:normal; margin:0px 5px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.choose span {width:30px; height:40px; position:relative;}
.choose span img {width:100%; position:absolute; top:0px; left:0px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.choose img.hv {opacity:0;}

.choose:hover {border:2px solid yellow; box-shadow: 0px 0px 10px 0px yellow;}
.choose:hover p {color:yellow;}
.choose:hover img.hv {opacity:1;}
.choose:hover img.nor {opacity:0;}

#vote_success, #vote_repeat {max-width:500px; margin:auto; box-sizing:border-box; padding:30px; display:none;}

.fancybox__container {--fancybox-bg:rgba(0, 0, 0, 0.8) !important;}
.fancybox__content {background:rgba(0, 0, 0, 0.7) !important; border:1px solid #e77829;}
.fancybox__content>.f-button.is-close-btn {background:black !important; border:1px solid #e77829; border-radius:50% !important; top:-17px !important; right:-17px !important; opacity:1 !important; --f-button-color:#e77829 !important; --f-button-hover-color:#e77829 !important;}

#vote_success h1 {font-size:34px; line-height:45px; text-align:center; color:#ffff00; font-weight:500; margin-bottom:20px;}
#vote_success p {font-size:16px; line-height:24px; color:white; text-align:justify; margin-bottom:20px;}
#vote_success p a {color:yellow; border-bottom:1px solid yellow;}
#vote_success .price_pic {display:flex; justify-content:space-between; align-items:center;}
#vote_success .price_pic img {width:30%;}
#vote_success .goline {display:table; margin:30px auto 0px auto; padding:10px 15px; border:1px solid #e77829; border-radius:100px; font-size:24px; color:#e77829; font-weight:500;}

#vote_repeat h1 {font-size:34px; line-height:45px; text-align:center; color:#ffff00; font-weight:500; margin-bottom:20px;}
#vote_repeat p {font-size:16px; line-height:24px; color:white; text-align:justify; margin-bottom:20px;}
#vote_repeat p a {color:yellow; border-bottom:1px solid yellow;}
#vote_repeat .goline {display:table; margin:30px auto 0px auto; padding:10px 15px; border:1px solid #e77829; border-radius:100px; font-size:24px; color:#e77829; font-weight:500;}

.voting::after {display:block; content:''; width:150vw; height:calc(100% + 60px); background:rgba(0, 0, 0, 0.5); position:absolute; top:50%; left:-60vw; transform:translateY(-50%); z-index:0; border-top:1px solid #e77829; border-bottom:1px solid #e77829; box-shadow: 0px 0px 10px 0px rgba(255,127,35,0.8);}

.bg_block_a {width:120px; height:80px; background:rgba(0,0,0,0.5); border:1px solid #e77829; position:absolute; top:3%; right:30%; z-index:0; opacity:0.3;}
.bg_block_b {width:120px; height:80px; background:rgba(0,0,0,0.5); border:1px solid #e77829; position:absolute; top:20%; left:-3%; z-index:0; opacity:0.3;}
.bg_block_c {width:120px; height:80px; background:rgba(0,0,0,0.5); border:1px solid #e77829; position:absolute; top:35%; right:7%; z-index:0; opacity:0.3;}
.bg_block_d {width:120px; height:80px; background:rgba(0,0,0,0.5); border:1px solid #e77829; position:absolute; bottom:0px; left:25%; z-index:0; opacity:0.3;}






@media screen and (max-width:820px) {
	#loading .centerbox {
    width: 90%;
    max-width: 400px;
  }
	
  header .inner {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 65px;
  }
  header .inner .logo {
    height: 40px;
  }
  header .inner .nav {
    display: none;
  }
  header .inner .nav.on {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 80;
    background: #e77829;
    width: 100vw;
    height: calc(100vh - 60px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  header .inner .nav.on li {
    border-bottom: 1px solid #fff;
    width: 90%;
    margin: 0 auto;
  }
  header .inner .nav.on li a {
	display:block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 16px;
  }
  header .inner .ham {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 30px;
    height: 24px;
    padding: 5px;
    box-sizing:border-box;
  }
  header .inner .ham span {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
  }
  header .inner .ham.on {
    position: relative;
  }
  header .inner .ham.on span {
    position: absolute;
  }
  header .inner .ham.on span:nth-child(1) {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
  }
  header .inner .ham.on span:nth-child(2) {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
  }
  header .inner .ham.on span:nth-child(3) {
    display: none;
  }
	

  .kol {justify-content:center;}
  .kol .rotate_yl {width:50px; height:50px; margin-left:0px; margin-right:5px;}
  .kol p {font-size:26px;}
  .kol::after {width:95%; height:60px;}

  .kol .pointing_line {height:60px; left:80px;}

  .main_area {flex-wrap:wrap; margin:30px auto;}
  .main_area {flex:auto;}
  .pic_area {flex:auto;}

  .pic_area .vote_title {bottom:10%; font-size:24px;line-height: 1.2;}
  .pic_area .kol_pic{display: block;width: 75%;margin: 0 auto;}

  .vote_area {flex:auto; width:100%; padding-left:0px;}
  #count_area {padding:50px 40px 20px 40px; background-size:100% 100%; margin:20px auto;}
  .clock {font-size:40px; text-align:center;}

  .options p {font-size:20px;}
  .percentage {font-size:45px;}
  .percentage small {font-size:28px;}
  .choose {padding:6px;}
  .choose p {font-size:20px; width:50px; margin:0px 2px;}
  .choose span {width:20px; height:26px;}

  .fancybox__content>.f-button.is-close-btn {top:-38px !important; right:0px !important;}

  .voting::after {height:calc(100% + 50px); left:-30vw;}

}
@media screen and (max-width:480px) {
  .pic_area .vote_title {bottom:10%; font-size:20px; max-height: 60px;}
  .pic_area .kol_pic{width: 100%;}

  .options p {font-size:16px;}
  .percentage {font-size:30px;}
  .percentage small {font-size:20px;}
  .choose p {font-size:16px;  width:35px; margin:0px 2px;}
}