@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* RESET plus */
* {
  background-position: center top;
  background-repeat: no-repeat;
}

html,
body {
  font-family: "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input,
select,
option {
  font-family: "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul,
li {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
li {
  margin: 0;
  padding: 0;
  border: 0;
}

li {
  margin-left: 1.25em;
}

p {
  margin: 1.25em 0;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.wrapper {
  position: relative;
  box-sizing: border-box;
}
.wrapper * {
  background-size: 100% auto;
  box-sizing: border-box;
  word-break: break-all;
}
.wrapper *:after {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.wrapper *:before {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.wrapper:after {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.wrapper:before {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.wrapper.mobile *[data-type=dt] {
  display: none;
}
.wrapper.desktop *[data-type=mb] {
  display: none;
}

@media screen and (max-width: 768px) {
  .wrapper.desktop *[data-type=mb] {
    display: initial;
  }
  .wrapper.desktop *[data-type=dt] {
    display: none;
  }
}
body.ovh {
  overflow: hidden;
}

.btn {
  cursor: pointer;
}

.wrapper.desktop .btn:hover {
  background-position: center bottom;
}

.UNI-footer {
  position: relative;
}

.gbox {
  box-sizing: border-box;
}
.gbox * {
  box-sizing: border-box;
  word-break: break-all;
}
.gbox *:after {
  background-position: center top;
  background-repeat: no-repeat;
}
.gbox *:before {
  background-position: center top;
  background-repeat: no-repeat;
}

body.desktop .gbox-btn:hover {
  background-position: center bottom;
}

@media screen and (max-width: 1000px) {
  #topBar {
    display: none;
  }
}
input,
select,
button,
textarea {
  padding: 0;
  color: black;
  font-size: 16px;
  line-height: 1;
  outline: none;
  border: none;
  border-radius: 0;
  background: none;
  appearance: none;
  vertical-align: middle;
  display: inline-block;
}

.gbox .gbox-wrap {
  max-width: none;
  width: auto;
  padding: 0;
  background: 0;
}
.gbox .gbox-content {
  padding: 0;
}
.gbox .gbox-close {
  background-repeat: no-repeat;
  cursor: pointer;
}

.oPage {
  width: 100%;
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: center;
}
.oPage li a {
  color: #a4caff;
  text-decoration: none;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .oPage li a {
    width: 3.3333333333vw;
    height: 3.3333333333vw;
    border-radius: 0.4166666667vw;
  }
}
.oPage .active a {
  background-color: #faca20;
}
.oPage .first,
.oPage .last {
  display: none;
}
.oPage .prev,
.oPage .next {
  background-image: url(./img/arr.png);
  background-size: 96px 47px;
  background-position: 0 0;
  width: 48px;
  height: 47px;
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  .oPage .prev,
  .oPage .next {
    background-size: 8vw 3.9166666667vw;
    width: 4vw;
    height: 3.9166666667vw;
  }
}
.oPage .prev:hover,
.oPage .next:hover {
  background-position: -48px 0;
}
@media screen and (max-width: 1200px) {
  .oPage .prev:hover,
  .oPage .next:hover {
    background-position: -4vw 0;
  }
}
.oPage .prev {
  background-image: url(./img/arr.png);
}
.oPage .next {
  background-image: url(./img/arr.png);
  transform: scale(-1);
}

.mCSB_inside > .mCSB_container {
  margin-right: 20px;
}
@media screen and (max-width: 1200px) {
  .mCSB_inside > .mCSB_container {
    margin-right: 1.6666666667vw;
  }
}

.mCSB_draggerContainer {
  background: #000;
  width: 9px;
  margin: 0 auto;
  border: 2px solid #000;
  border-radius: 10px;
}
@media screen and (max-width: 1200px) {
  .mCSB_draggerContainer {
    width: 0.75vw;
    border: 0.1666666667vw solid #000;
    border-radius: 0.8333333333vw;
  }
}

.mCSB_scrollTools .mCSB_draggerRail {
  border-radius: 0;
  opacity: 0;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background: #fff;
  opacity: 1;
  width: 5px;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 0.4166666667vw;
    border-radius: 0.4166666667vw;
  }
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: white;
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: white;
}

body {
  background-color: #000;
}

#app {
  background-image: url(./img/bg.jpg);
  background-size: 1920px 3530px;
  background-position: top center;
  position: relative;
  background-color: #fff;
  padding-top: 920px;
  width: 100%;
}
@media screen and (max-width: 1200px) {
  #app {
    background-size: 160vw 294.1666666667vw;
    background-position: top center;
    padding-top: 76.6666666667vw;
  }
}
#app * {
  box-sizing: border-box;
}
#app a {
  display: block;
  text-decoration: none;
  color: #000;
}
#app p {
  margin: 0;
}
#app .colorR {
  color: #fe462e;
}
#app .colorW {
  color: #fff;
}
#app .colorB {
  color: #2c4dd9;
}
#app .fz30 {
  font-size: 30px;
  letter-spacing: 1px;
}
@media screen and (max-width: 1200px) {
  #app .fz30 {
    font-size: 2.5vw;
    letter-spacing: 0.0833333333vw;
  }
}
#app .f_bold {
  font-weight: bold;
}
#app .fz36 {
  font-size: 36px;
}
@media screen and (max-width: 1200px) {
  #app .fz36 {
    font-size: 3vw;
  }
}
#app .btnA {
  background-image: url(./img/sure.png);
  background-size: 300px 75px;
  background-position: 0 0;
  width: 150px;
  height: 75px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  text-shadow: 2px 2px 0 #fff;
}
#app .btnA:hover {
  background-position: -150px 0;
}
@media screen and (max-width: 1200px) {
  #app .btnA {
    background-size: 25vw 6.25vw;
    width: 12.5vw;
    height: 6.25vw;
    padding-top: 0.4166666667vw;
    text-shadow: 0.1666666667vw 0.1666666667vw 0 #fff;
  }
  #app .btnA:hover {
    background-position: -12.5vw 0;
  }
}
#app .btnB {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
#app .btnB::before {
  content: "";
  width: 150px;
  height: 65px;
  border-radius: 40px;
  background-color: #bfbfbf;
  z-index: -1;
  position: absolute;
  top: 7px;
  left: 0;
}
@media screen and (max-width: 1200px) {
  #app .btnB::before {
    width: 12.5vw;
    height: 5.4166666667vw;
    border-radius: 3.3333333333vw;
    top: 0.5833333333vw;
  }
}
#app .btnB span {
  width: 150px;
  height: 65px;
  border: 3px solid #000;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
}
@media screen and (max-width: 1200px) {
  #app .btnB span {
    width: 12.5vw;
    height: 5.4166666667vw;
    border: 0.25vw solid #000;
    font-size: 2.3333333333vw;
    border-radius: 3.3333333333vw;
  }
}
#app .btnB:hover::before {
  background-color: #fe2e5f;
}

.wrapA {
  border: 4px solid #000;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .wrapA {
    border: 0.3333333333vw solid #000;
  }
}
.wrapA::before {
  content: "";
  width: 22px;
  height: 22px;
  border-bottom: 4px solid #000;
  border-right: 4px solid #000;
  position: absolute;
  top: -26px;
  left: -26px;
}
@media screen and (max-width: 1200px) {
  .wrapA::before {
    width: 1.8333333333vw;
    height: 1.8333333333vw;
    border-bottom: 0.3333333333vw solid #000;
    border-right: 0.3333333333vw solid #000;
    top: -2.1666666667vw;
    left: -2.1666666667vw;
  }
}
.wrapA::after {
  content: "";
  width: 22px;
  height: 22px;
  border-top: 4px solid #000;
  border-left: 4px solid #000;
  position: absolute;
  bottom: -26px;
  right: -26px;
}
@media screen and (max-width: 1200px) {
  .wrapA::after {
    width: 1.8333333333vw;
    height: 1.8333333333vw;
    border-top: 0.3333333333vw solid #000;
    border-left: 0.3333333333vw solid #000;
    bottom: -2.1666666667vw;
    right: -2.1666666667vw;
  }
}
.wrapA .tt {
  padding: 20px 0;
}
@media screen and (max-width: 1200px) {
  .wrapA .tt {
    padding: 1.6666666667vw 0;
  }
}
.wrapA .content {
  padding: 25px 20px;
}
@media screen and (max-width: 1200px) {
  .wrapA .content {
    padding: 2.0833333333vw 1.6666666667vw;
  }
}

.navigation_bar {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1200px) {
  .navigation_bar {
    padding: 0.8333333333vw 1.6666666667vw;
  }
}
.navigation_bar .link-btns {
  display: flex;
}
.navigation_bar .link-btns .btn-link {
  background-size: 84px 42px;
  background-position: 0 0;
  width: 42px;
  height: 42px;
  margin: 0 5px;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .link-btns .btn-link {
    background-size: 7vw 3.5vw;
    width: 3.5vw;
    height: 3.5vw;
    margin: 0 0.4166666667vw;
  }
}
.navigation_bar .link-btns .btn-link:hover {
  background-position: -42px 0;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .link-btns .btn-link:hover {
    background-position: -3.5vw 0;
  }
}
.navigation_bar .link-btns .home {
  background-image: url(./img/home.png);
}
.navigation_bar .link-btns .f_b {
  background-image: url(./img/f_b.png);
}
.navigation_bar .link-btns .i_g {
  background-image: url(./img/i_g.png);
}
.navigation_bar .logo {
  background-image: url(./img/logo.png);
  background-size: contain;
  width: 126px;
  height: 61px;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .logo {
    width: 10.5vw;
    height: 5.0833333333vw;
  }
}
.navigation_bar .bot_btns {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .bot_btns {
    bottom: 2.5vw;
    right: 2.5vw;
  }
}
.navigation_bar .bot_btns .goMain_btn {
  width: 180px;
  height: 70px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  border: 2px solid #000;
  border-radius: 35px;
  margin: 0 auto 20px;
  box-shadow: 0px 5px 0px #000;
  background-color: #faca20;
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .bot_btns .goMain_btn {
    width: 15vw;
    height: 5.8333333333vw;
    border: 0.1666666667vw solid #000;
    border-radius: 2.9166666667vw;
    margin: 0 auto 1.6666666667vw;
    box-shadow: 0 0.4166666667vw 0 #000;
  }
}
.navigation_bar .bot_btns .goMain_btn:hover {
  background-color: #2b4bd5;
  color: #fff !important;
  box-shadow: inset 5px 5px 0 #000;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .bot_btns .goMain_btn:hover {
    box-shadow: inset 0.4166666667vw 0.4166666667vw 0 #000;
  }
}
.navigation_bar .bot_btns .btn-log {
  background-image: url(./img/logout_btn.png);
  background-size: 288px 148px;
  background-position: 0 0;
  width: 144px;
  height: 148px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.navigation_bar .bot_btns .btn-log:hover {
  background-position: -144px 0;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .bot_btns .btn-log {
    background-size: 24vw 12.3333333333vw;
    width: 12vw;
    height: 12.3333333333vw;
  }
  .navigation_bar .bot_btns .btn-log:hover {
    background-position: -12vw 0;
  }
}
.navigation_bar .bot_btns .top_btn {
  background-image: url(./img/top_btn.png);
  background-size: 244px 126px;
  background-position: 0 0;
  width: 122px;
  height: 126px;
  margin: 0 auto;
  cursor: pointer;
}
.navigation_bar .bot_btns .top_btn:hover {
  background-position: -122px 0;
}
@media screen and (max-width: 1200px) {
  .navigation_bar .bot_btns .top_btn {
    background-size: 20.3333333333vw 10.5vw;
    width: 10.1666666667vw;
    height: 10.5vw;
  }
  .navigation_bar .bot_btns .top_btn:hover {
    background-position: -10.1666666667vw 0;
  }
}

.event_main {
  position: relative;
}
.event_main .send_detail {
  position: relative;
  width: 720px;
  margin: 0 auto 50px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .event_main .send_detail {
    width: 60vw;
    margin: 0 auto 4.1666666667vw;
  }
}
.event_main .send_detail .tt {
  background-color: #faca20;
  position: relative;
}
.event_main .send_detail .tt .corner-triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 74.5px solid #2b4bd5;
  border-right: 74.5px solid transparent;
}
@media screen and (max-width: 1200px) {
  .event_main .send_detail .tt .corner-triangle {
    border-top: 6.2083333333vw solid #faca20;
    border-right: 6.2083333333vw solid transparent;
  }
}
.event_main .send_detail .content {
  background-color: #fff;
  position: relative;
}
.event_main .send_detail .content ol {
  text-align: left;
}
.event_main .send_detail .content ol li {
  margin-bottom: 25px;
}
@media screen and (max-width: 1200px) {
  .event_main .send_detail .content ol li {
    margin-bottom: 2.0833333333vw;
  }
}
.event_main .send_detail .content .corner-triangle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 60px solid #faca20;
  border-left: 60px solid transparent;
}
@media screen and (max-width: 1200px) {
  .event_main .send_detail .content .corner-triangle {
    border-bottom: 5vw solid #faca20;
    border-left: 5vw solid transparent;
  }
}
.event_main .send_detail::after {
  content: "";
  background: linear-gradient(to bottom, #fcd027 50%, #ff4433 50%);
  width: 139px;
  height: 423px;
  position: absolute;
  right: -30px;
  bottom: -40px;
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .event_main .send_detail::after {
    width: 11.5833333333vw;
    height: 35.25vw;
    right: -2.5vw;
    bottom: -3.3333333333vw;
  }
}
.event_main .time_vote_wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
  .event_main .time_vote_wrap {
    margin-bottom: 4.1666666667vw;
  }
}
.event_main .time_vote_wrap .time_area,
.event_main .time_vote_wrap .vote_area {
  background-image: url(./img/tv_frame.png);
  background-size: contain;
  width: 362px;
  height: 147px;
  text-align: center;
  padding-top: 30px;
  line-height: 40px;
  margin: 0 10px;
}
@media screen and (max-width: 1200px) {
  .event_main .time_vote_wrap .time_area,
  .event_main .time_vote_wrap .vote_area {
    width: 30.1666666667vw;
    height: 12.25vw;
    padding-top: 2.5vw;
    line-height: 3.3333333333vw;
    margin: 0 0.8333333333vw;
  }
}
.event_main .time_vote_wrap .time_area span,
.event_main .time_vote_wrap .vote_area span {
  text-shadow: 3px 0 0 #fff;
}
@media screen and (max-width: 1200px) {
  .event_main .time_vote_wrap .time_area span,
  .event_main .time_vote_wrap .vote_area span {
    text-shadow: 0.25vw 0 0 #fff;
  }
}
.event_main .reward_detail {
  position: relative;
  width: 720px;
  margin: 0 auto 110px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail {
    width: 60vw;
    margin: 0 auto 9.1666666667vw;
  }
}
.event_main .reward_detail .tag_wrap {
  display: flex;
  margin-bottom: 30px;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .tag_wrap {
    margin-bottom: 2.5vw;
  }
}
.event_main .reward_detail .tag_wrap .tag {
  width: 50%;
  height: 98px;
  cursor: pointer;
  border-bottom: 4px solid #000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(./img/disable_fr.png);
  background-size: cover;
  color: #404040;
  text-shadow: 2px 0px 0px #fff;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .tag_wrap .tag {
    height: 8.1666666667vw;
    border-bottom: 0.3333333333vw solid #000;
    text-shadow: 0.1666666667vw 0 0 #fff;
  }
}
.event_main .reward_detail .tag_wrap .tag:nth-child(1) {
  border-right: 2px solid #000;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .tag_wrap .tag:nth-child(1) {
    border-right: 0.1666666667vw solid #000;
  }
}
.event_main .reward_detail .tag_wrap .tag:nth-child(2) {
  border-left: 2px solid #000;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .tag_wrap .tag:nth-child(2) {
    border-left: 0.1666666667vw solid #000;
  }
}
.event_main .reward_detail .tag_wrap .tag.active {
  border-bottom: 0;
  background: #fff;
  color: #000;
}
.event_main .reward_detail .tag_wrap .tag.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 45px solid #2b4bd5;
  border-right: 45px solid transparent;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .tag_wrap .tag.active::before {
    border-top: 3.75vw solid #2b4bd5;
    border-right: 3.75vw solid transparent;
  }
}
.event_main .reward_detail .content {
  background-color: #fff;
  position: relative;
  padding: 0 0 20px !important;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content {
    padding: 0 0 1.6666666667vw !important;
  }
}
.event_main .reward_detail .content .type_btns {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  color: #404040;
  text-shadow: 2px 0px 0px #fff;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .type_btns {
    margin-bottom: 4.1666666667vw;
    text-shadow: 0.1666666667vw 0px 0px #fff;
  }
}
.event_main .reward_detail .content .type_btns .btnB {
  margin: 0 5px;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .type_btns .btnB {
    margin: 0 0.4166666667vw;
  }
}
.event_main .reward_detail .content .type_btns .btnB.active {
  color: #000;
  text-shadow: 0px 0px 0px #fff;
}
.event_main .reward_detail .content .type_btns .btnB.active::before {
  background-color: #fe2e5f !important;
}
.event_main .reward_detail .content .items {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  height: 952px;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .items {
    padding: 0 0.8333333333vw;
    height: 79.3333333333vw;
  }
}
.event_main .reward_detail .content .items .item {
  border: 4px solid #000;
  position: relative;
  width: 326px;
  height: 456px;
  padding-top: 30px;
  margin: 0 10px 20px;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .items .item {
    border: 0.3333333333vw solid #000;
    width: 27.1666666667vw;
    height: 38vw;
    padding-top: 2.5vw;
    margin: 0 0.8333333333vw 1.6666666667vw;
  }
}
.event_main .reward_detail .content .items .item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 50px solid #faca20;
  border-left: 50px solid transparent;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .items .item::after {
    border-bottom: 4.1666666667vw solid #faca20;
    border-left: 4.1666666667vw solid transparent;
  }
}
.event_main .reward_detail .content .items .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #faca20;
  border-right: 50px solid transparent;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .items .item::before {
    border-top: 4.1666666667vw solid #faca20;
    border-right: 4.1666666667vw solid transparent;
  }
}
.event_main .reward_detail .content .items .item .img {
  width: 115px;
  height: 115px;
  background-size: contain;
  margin: 0 auto 20px;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .items .item .img {
    width: 9.5833333333vw;
    height: 9.5833333333vw;
    margin: 0 auto 1.6666666667vw;
  }
}
.event_main .reward_detail .content .items .item .name {
  padding: 0 60px;
  margin-bottom: 20px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .items .item .name {
    padding: 0 5vw;
    margin-bottom: 1.6666666667vw;
    height: 5vw;
  }
}
.event_main .reward_detail .content .items .item .dec {
  background-image: url(./img/point.png);
  background-size: contain;
  width: 56px;
  height: 8px;
  margin: 0 auto 20px;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .items .item .dec {
    width: 4.6666666667vw;
    height: 0.6666666667vw;
    margin: 0 auto 1.6666666667vw;
  }
}
.event_main .reward_detail .content .items .item .btns {
  display: flex;
  font-weight: normal;
}
.event_main .reward_detail .content .vote_num {
  background-image: url(./img/vote_fr.png);
  background-size: contain;
  margin: 20px auto 0;
  width: 228px;
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .vote_num {
    margin: 1.6666666667vw auto 0;
    width: 19vw;
    height: 5.6666666667vw;
  }
}
.event_main .reward_detail .content .corner-triangle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 60px solid #2b4bd5;
  border-left: 60px solid transparent;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail .content .corner-triangle {
    border-bottom: 5vw solid #2b4bd5;
    border-left: 5vw solid transparent;
  }
}
.event_main .reward_detail::after {
  content: "";
  background: linear-gradient(to bottom, #fcd027 0%, #fcd027 33.33%, #ff4433 33.33%, #ff4433 66.66%, #2c3ee4 66.66%, #2c3ee4 100%);
  width: 139px;
  height: 634px;
  position: absolute;
  left: -30px;
  bottom: -30px;
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .event_main .reward_detail::after {
    width: 11.5833333333vw;
    height: 52.8333333333vw;
    left: -2.5vw;
    bottom: -2.5vw;
  }
}

.warn_wrap {
  background-color: #000;
  padding: 50px 0;
}
@media screen and (max-width: 1200px) {
  .warn_wrap {
    padding: 4.1666666667vw 0;
  }
}
.warn_wrap .tt {
  text-align: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
  .warn_wrap .tt {
    margin-bottom: 4.1666666667vw;
  }
}
.warn_wrap ol {
  padding: 10px;
  width: 720px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .warn_wrap ol {
    padding: 0.8333333333vw;
    width: 60vw;
  }
}
.warn_wrap ol li {
  margin-bottom: 20px;
}
@media screen and (max-width: 1200px) {
  .warn_wrap ol li {
    margin-bottom: 1.6666666667vw;
  }
}

.detail_lb .gbox-wrap::after,
.msg_popup .gbox-wrap::after,
.sure_lb .gbox-wrap::after {
  content: "";
  background-image: url(./img/norm_lb_dec.png);
  background-size: contain;
  width: 139px;
  height: 201px;
  position: absolute;
  left: -55px;
  top: -35px;
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .detail_lb .gbox-wrap::after,
  .msg_popup .gbox-wrap::after,
  .sure_lb .gbox-wrap::after {
    width: 11.5833333333vw;
    height: 16.75vw;
    left: -4.5833333333vw;
    top: -2.9166666667vw;
  }
}
.detail_lb .gbox-content,
.msg_popup .gbox-content,
.sure_lb .gbox-content {
  background-color: #fff;
  width: 730px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .gbox-content,
  .msg_popup .gbox-content,
  .sure_lb .gbox-content {
    width: 60.8333333333vw;
  }
}
.detail_lb .content .corner-triangle,
.msg_popup .content .corner-triangle,
.sure_lb .content .corner-triangle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 60px solid #fe2e5f;
  border-left: 60px solid transparent;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .corner-triangle,
  .msg_popup .content .corner-triangle,
  .sure_lb .content .corner-triangle {
    border-bottom: 5vw solid #fe2e5f;
    border-left: 5vw solid transparent;
  }
}
.detail_lb .gbox-close,
.msg_popup .gbox-close,
.sure_lb .gbox-close {
  width: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fe462e;
  font-size: 48px;
  right: 30px;
  top: -30px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .gbox-close,
  .msg_popup .gbox-close,
  .sure_lb .gbox-close {
    width: 7.3333333333vw;
    height: 7.3333333333vw;
    font-size: 4vw;
    right: 2.5vw;
    top: -2.5vw;
  }
}
.detail_lb .gbox-close:hover,
.msg_popup .gbox-close:hover,
.sure_lb .gbox-close:hover {
  background-color: #000;
  color: #faca20;
}

.detail_lb .content {
  padding: 45px 25px 25px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content {
    padding: 3.75vw 2.0833333333vw 2.0833333333vw;
  }
}
.detail_lb .content .name {
  position: relative;
  width: fit-content;
  display: block;
  padding: 0 8px;
  z-index: 2;
  margin: 0 auto;
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 20px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .name {
    padding: 0 0.6666666667vw;
    font-size: 3.5vw;
    margin-bottom: 1.6666666667vw;
  }
}
.detail_lb .content .name:after {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 100%;
  height: 25px;
  background-color: #f4c41c; /* 黃色底色 */
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .name:after {
    top: 2.0833333333vw;
    height: 2.0833333333vw;
  }
}
.detail_lb .content .datetime {
  color: #808080;
  text-align: right;
  margin-bottom: 10px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .datetime {
    margin-bottom: 0.8333333333vw;
  }
}
.detail_lb .content .role,
.detail_lb .content .type {
  background-image: url(./img/detail_fr.png);
  background-size: contain;
  width: 682px;
  height: 78px;
  text-align: left;
  margin-bottom: 10px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .role,
  .detail_lb .content .type {
    width: 56.8333333333vw;
    height: 6.5vw;
    margin-bottom: 0.8333333333vw;
  }
}
.detail_lb .content .role span,
.detail_lb .content .type span {
  display: inline-flex;
  width: 200px;
  height: 78px;
  justify-content: center;
  padding-top: 18px;
  text-shadow: 2px 2px 0 #fff;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .role span,
  .detail_lb .content .type span {
    width: 16.6666666667vw;
    height: 6.5vw;
    padding-top: 1.5vw;
    text-shadow: 0.1666666667vw 0.1666666667vw 0 #fff;
  }
}
.detail_lb .content .flex {
  display: flex;
  justify-content: space-between;
}
.detail_lb .content .img,
.detail_lb .content .p {
  background-size: contain;
  width: 324px;
  height: 310px !important;
  border: 4px solid #000;
  box-shadow: 4px 4px 0px #facd2c;
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 4px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .img,
  .detail_lb .content .p {
    width: 27vw;
    height: 25.8333333333vw !important;
    border: 0.3333333333vw solid #000;
    box-shadow: 0.3333333333vw 0.3333333333vw 0 #facd2c;
    margin: 0 0.3333333333vw;
  }
}
.detail_lb .content .p {
  text-align: left;
  padding: 15px 10px 15px 15px;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .p {
    padding: 1.25vw 0.8333333333vw 1.25vw 1.25vw;
  }
}
.detail_lb .content .p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 40px solid #facd2c;
  border-right: 40px solid transparent;
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .p::before {
    border-top: 3.3333333333vw solid #facd2c;
    border-right: 3.3333333333vw solid transparent;
  }
}
.detail_lb .content .p:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 40px solid #facd2c;
  border-left: 40px solid transparent;
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .detail_lb .content .p:after {
    border-bottom: 3.3333333333vw solid #facd2c;
    border-left: 3.3333333333vw solid transparent;
  }
}

.msg_popup .gbox-content {
  width: 530px;
}
@media screen and (max-width: 1200px) {
  .msg_popup .gbox-content {
    width: 44.1666666667vw;
  }
}
.msg_popup .gbox-content .content {
  font-size: 48px;
  font-weight: bold;
  padding: 100px 50px 50px;
  line-height: 60px;
}
@media screen and (max-width: 1200px) {
  .msg_popup .gbox-content .content {
    font-size: 4vw;
    padding: 8.3333333333vw 4.1666666667vw 4.1666666667vw !important;
    line-height: 5vw;
  }
}
.msg_popup .gbox-content .content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 74.5px solid #fe2e5f;
  border-right: 74.5px solid transparent;
}
@media screen and (max-width: 1200px) {
  .msg_popup .gbox-content .content::before {
    border-top: 6.2083333333vw solid #fe2e5f;
    border-right: 6.2083333333vw solid transparent;
  }
}
.msg_popup .gbox-content .content:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 60px solid #fe2e5f;
  border-left: 60px solid transparent;
}
@media screen and (max-width: 1200px) {
  .msg_popup .gbox-content .content:after {
    border-bottom: 5vw solid #fe2e5f;
    border-left: 5vw solid transparent;
  }
}
.msg_popup .gbox-content .content span {
  position: relative;
  width: fit-content;
  display: block;
  padding: 0 8px;
  z-index: 2;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .msg_popup .gbox-content .content span {
    padding: 0 0.6666666667vw;
  }
}
.msg_popup .gbox-content .content span:after {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 100%;
  height: 40px;
  background-color: #f4c41c; /* 黃色底色 */
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .msg_popup .gbox-content .content span:after {
    top: 2.5vw;
    height: 3.3333333333vw;
  }
}
.msg_popup .sure_btn {
  font-size: 36px;
  margin: 40px auto 0;
  background-image: url(./img/sure.png);
  background-size: 398px 109px;
  background-position: 0 0;
  width: 199px;
  height: 109px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  text-shadow: 2px 2px 0 #fff;
}
.msg_popup .sure_btn:hover {
  background-position: -199px 0;
}
@media screen and (max-width: 1200px) {
  .msg_popup .sure_btn {
    font-size: 3vw;
    margin: 3.3333333333vw auto 0;
    background-size: 33.1666666667vw 9.0833333333vw;
    width: 16.5833333333vw;
    height: 9.0833333333vw;
    padding-top: 0.8333333333vw;
    text-shadow: 0.1666666667vw 0.1666666667vw 0 #fff;
  }
  .msg_popup .sure_btn:hover {
    background-position: -16.5833333333vw 0;
  }
}

.msg_popup.sure_lb .content {
  padding: 100px 0px 50px;
}
@media screen and (max-width: 1200px) {
  .msg_popup.sure_lb .content {
    padding: 8.3333333333vw 0 4.1666666667vw;
  }
}