.active-gift-rock .vip-1-block,
.active-gift-rock .vip-2-block,
.active-gift-rock .nol-1-block,
.active-gift-rock .nol-2-block {
  display: none;
}
.active-gift-rock.show-vip-1-block .vip-1-block {
  display: block;
}
.active-gift-rock.show-vip-2-block .vip-2-block {
  display: block;
}
.active-gift-rock.show-nol-1-block .nol-1-block {
  display: block;
}
.active-gift-rock.show-nol-2-block .nol-2-block {
  display: block;
}

.active-gift-air-target .vip-1-block,
.active-gift-air-target .vip-2-block {
  display: none;
}
.active-gift-air-target.show-vip-1-block .vip-1-block {
  display: block;
}
.active-gift-air-target.show-vip-1-block .vip-1-block {
  display: block;
}
.active-gift-air-target.show-vip-2-block .vip-2-block {
  display: block;
}

ol.first-ol {
  list-style-type: none;
}
span.f-light {
  color: #ffda09;
}

.btnBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.btnBox a {
  border-radius: 150px;
  text-align: center;
  line-height: 1.2em;
  font-weight: bold;
}

.table-full {
  line-height: 19px;
  letter-spacing: 1px;
}
.table-full tr td .prize-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 75%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .table-full tr td .prize-container {
    width: 90%;
  }
}
@media screen and (max-width: 580px) {
  .table-full tr td .prize-container {
    flex-direction: column;
  }
}
.table-full tr td .prize-container .prize-area {
  flex: 1;
}
.table-full tr td .prize-container .prize-area img {
  width: 100%;
  max-height: 100px;
  max-width: 165px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.3rem;
}
.table-full tr td .prize-container .prize-plus {
  width: 16%;
}
@media screen and (max-width: 580px) {
  .table-full tr td .prize-container .prize-plus {
    margin: 1rem;
  }
}
.table-full tr td .prize-container .prize-plus img {
  width: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}

.no-list-style {
  list-style-type: none;
}

.content__btn_row {
  flex-direction: column;
}

.little-title-area {
  position: absolute;
  z-index: 20;
  width: 17%;
  height: 0;
  padding-bottom: 7%;
  top: 49.5%;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (orientation: portrait) {
  .little-title-area {
    top: 54%;
  }
}
@media screen and (min-width: 1280px) {
  .little-title-area {
    top: 52.5%;
  }
}
.little-title-area .little-title {
  width: 100%;
  height: 100%;
  padding-bottom: 40%;
  background: url("../../images/little-title.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.awards-area {
  position: absolute;
  z-index: 20;
  width: 78%;
  height: 0;
  padding-bottom: 30%;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (orientation: portrait) {
  .awards-area {
    width: 88%;
  }
}
.awards-area .awards {
  width: 100%;
  height: 100%;
  background: url("../../images/awards.png");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 38.5%;
}

.content .container .content__btn > div > a {
  width: 150px !important;
}
.content .container .big-title {
  position: relative;
  top: -2rem;
}
@media screen and (max-width: 710px) {
  .content .container .big-title {
    top: -1rem;
  }
}
@media screen and (max-width: 440px) {
  .content .container .big-title {
    top: -0.5rem;
  }
}

ol.list-arrow > li,
ol.list-arrow ul.list-arrow > li {
  text-indent: unset;
}

.header .role-area {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.header .role-area .role-img-area {
  position: absolute;
  top: 8%;
  width: 25%;
}
.header .role-area .role-img-area img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.header .role-area .role-img-area.role-left {
  display: flex;
  justify-content: flex-end;
  left: 14%;
  animation: slideInRight 0.5s 0.3s;
}
.header .role-area .role-img-area.role-right {
  right: 13%;
  animation: slideInLeft 0.5s 0.3s;
}
@media screen and (max-width: 1599px) {
  .header .role-area .role-img-area {
    width: 28%;
    top: 12%;
  }
  .header .role-area .role-img-area.role-left {
    left: 10%;
  }
  .header .role-area .role-img-area.role-right {
    right: 9%;
  }
}
@media screen and (max-width: 767px) {
  .header .role-area .role-img-area {
    width: 36%;
    top: 5%;
  }
  .header .role-area .role-img-area.role-left {
    left: 1%;
  }
  .header .role-area .role-img-area.role-right {
    right: 1%;
  }
}
.header .role-area .role-img-area img {
  -o-object-fit: contain;
     object-fit: contain;
}
.header .outAppData,
.header .inAppData {
  position: absolute;
  z-index: 40;
  top: 4%;
  left: 0%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 22%;
}
@media screen and (max-width: 767px) {
  .header .outAppData,
  .header .inAppData {
    padding-right: 16%;
  }
}
.header .inAppData {
  z-index: 39;
}
.header .outAppData .logo,
.header .inAppData .logo {
  position: unset;
}
.header .outAppData .logo a,
.header .inAppData .logo a {
  width: 100%;
  height: 100%;
}
.header .slogan {
  animation: slideInScale1 0.5s 0.3s;
}
.header .slogan-title {
  position: absolute;
  z-index: 15;
  top: 48%;
  left: 36%;
  width: 28%;
  animation: slideInScale2 0.5s 0.3s, heartBeatLinear 2s 1s infinite ease-in-out;
}
.header .slogan-title img {
  width: 100%;
}
@media screen and (max-width: 1599px) {
  .header .slogan-title {
    top: 48%;
    width: 32%;
    left: 34%;
  }
}
@media screen and (max-width: 767px) {
  .header .slogan-title {
    top: 42%;
    left: 30%;
    width: 40%;
  }
}
.header .coin-area {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideInScale2 0.5s 0.3s;
}

ul.tabBtnXY li a {
  border: 1px solid #484e73;
  box-shadow: 0px 3px 3px #006eff;
  text-decoration: none;
  background-image: #484e73;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#484e73), color-stop(20%, #484e73), color-stop(40%, #598da5), color-stop(60%, #598da5), color-stop(80%, #484e73), to(#484e73));
  background: linear-gradient(0deg, rgb(72, 78, 115) 0%, rgb(89, 141, 165) 50%, rgb(72, 78, 115) 100%);
  box-shadow: 0px 3px 3px #2f2b6d;
  color: #a5d1e8;
}
ul.tabBtnXY li.active a, ul.tabBtnXY li:hover a {
  background-color: #5367ff;
  border: 1px solid #3044da;
  background-image: #42a9d8;
  background-image: linear-gradient(to bottom, #3e56ff 0%, #3e56ff 20%, #42a9d8 40%, #42a9d8 60%, #3e56ff 80%, #3e56ff 100%);
  box-shadow: 0px 2px #3e56ff, inset 0 2px 2px 2px #5367ff, inset 0 -10px 10px 0px #3044da;
  color: #fff;
}

.navBtn li a {
  position: relative;
}
.navBtn li a .prompt {
  width: 40%;
  position: absolute;
  top: -10%;
  right: 3%;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 132px;
}

.part .border-content {
  padding: 0.5rem 1.3rem;
  background-color: #11193d;
  border-radius: 0.5rem;
}
.part .border-content .tabBtnXY {
  margin-bottom: 10px;
}
.part .list-asterisk li {
  text-indent: -1.33rem;
}
.part .list-asterisk li .indented-text {
  text-indent: -3.46rem;
  padding-left: 3.45rem;
}
.part .note-text ul {
  list-style-type: none;
}

.awards-area {
  animation: scale 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite 1.6s;
}

@keyframes scale {
  0% {
    transform: scale(1) translateX(-50%);
    transform-origin: center left;
  }
  50% {
    transform: scale(1.06) translateX(-50%);
    transform-origin: center left;
  }
  100% {
    transform: scale(1) translateX(-50%);
    transform-origin: center left;
  }
}
.item__box .item__box-img img {
  padding: 0.2rem;
}

.bigest {
  position: relative;
}
.bigest .bigest-img {
  position: absolute;
  top: -39%;
  left: 0px;
  max-width: 90px;
}

.italic-text {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 0.1rem;
}

.mt-1 {
  margin-top: 1rem;
}

.content .container {
  background-image: url("../../images/contentBg.png");
  box-shadow: 4px 4px 12px 4px #3f0728;
}
.content .container .part > p {
  margin-bottom: 4px;
}
.content .container table.table-column-4 tr th:first-child,
.content .container table.table-column-4 tr td:first-child {
  width: 19%;
}
.content .container table.table-column-4 tr th:nth-child(2),
.content .container table.table-column-4 tr td:nth-child(2),
.content .container table.table-column-4 tr th:nth-child(3),
.content .container table.table-column-4 tr td:nth-child(3),
.content .container table.table-column-4 tr th:nth-child(4),
.content .container table.table-column-4 tr td:nth-child(4) {
  width: 27%;
}
.content .container table.table-column-4 img {
  max-width: 50%;
}
@media screen and (max-width: 767px) {
  .content .container table.table-column-4 img {
    max-width: 70%;
  }
}
@media screen and (max-width: 500px) {
  .content .container table.table-column-4 img {
    max-width: 100%;
  }
}
.content .container table.table-column-4 .card-img {
  max-width: 90%;
}
@media screen and (max-width: 500px) {
  .content .container table.table-column-4 .card-img {
    max-width: 100%;
  }
}
.content .container table.table-column-3-2 tr th:first-child,
.content .container table.table-column-3-2 tr td:first-child {
  width: 60%;
}
.content .container table.table-column-3-2 tr th:nth-child(2),
.content .container table.table-column-3-2 tr td:nth-child(2),
.content .container table.table-column-3-2 tr th:nth-child(3),
.content .container table.table-column-3-2 tr td:nth-child(3),
.content .container table.table-column-3-2 tr th:nth-child(4),
.content .container table.table-column-3-2 tr td:nth-child(4) {
  width: 40%;
}
.content .container table.table-column-3-2 img {
  max-width: 24%;
}
@media screen and (max-width: 767px) {
  .content .container table.table-column-3-2 img {
    max-width: 33.6%;
  }
}
@media screen and (max-width: 500px) {
  .content .container table.table-column-3-2 img {
    max-width: 48%;
  }
}
.content .container table.table-column-3-2 img.title-card-img {
  max-width: 40%;
}
@media screen and (max-width: 767px) {
  .content .container table.table-column-3-2 img.title-card-img {
    max-width: 50%;
  }
}
@media screen and (max-width: 500px) {
  .content .container table.table-column-3-2 img.title-card-img {
    max-width: 70%;
  }
}
.content .container table.table-column-3 tr th:first-child,
.content .container table.table-column-3 tr td:first-child {
  width: 19%;
}
.content .container table.table-column-3 tr th:nth-child(2),
.content .container table.table-column-3 tr td:nth-child(2),
.content .container table.table-column-3 tr th:nth-child(3),
.content .container table.table-column-3 tr td:nth-child(3),
.content .container table.table-column-3 tr th:nth-child(4),
.content .container table.table-column-3 tr td:nth-child(4) {
  width: 40.5%;
}
.content .container table.table-column-3 img {
  max-width: 32.7%;
}
@media screen and (max-width: 767px) {
  .content .container table.table-column-3 img {
    max-width: 45.8%;
  }
}
@media screen and (max-width: 500px) {
  .content .container table.table-column-3 img {
    max-width: 65.4%;
  }
}
.content .container table.table-column-2 tr th:first-child,
.content .container table.table-column-2 tr td:first-child {
  width: 19%;
}
.content .container table.table-column-2 tr th:nth-child(2),
.content .container table.table-column-2 tr td:nth-child(2),
.content .container table.table-column-2 tr th:nth-child(3),
.content .container table.table-column-2 tr td:nth-child(3),
.content .container table.table-column-2 tr th:nth-child(4),
.content .container table.table-column-2 tr td:nth-child(4) {
  width: 81%;
}
.content .container table.table-column-2 img {
  max-width: 16%;
}
@media screen and (max-width: 767px) {
  .content .container table.table-column-2 img {
    max-width: 22.4%;
  }
}
@media screen and (max-width: 500px) {
  .content .container table.table-column-2 img {
    max-width: 32%;
  }
}
@media screen and (max-width: 570px) {
  .content .container table.bonus-pd {
    margin-top: 2.5rem;
  }
}
@media screen and (max-width: 471px) {
  .content .container table.bonus-pd {
    margin-top: 1rem;
  }
}
.content .container table .tipnotice.bonus-img1,
.content .container table .tipnotice.bonus-img2 {
  width: 142px;
  top: 0%;
  transform: translateY(-90%);
}
@media screen and (max-width: 767px) {
  .content .container table .tipnotice.bonus-img1,
  .content .container table .tipnotice.bonus-img2 {
    width: 120px;
  }
}
@media screen and (max-width: 500px) {
  .content .container table .tipnotice.bonus-img1,
  .content .container table .tipnotice.bonus-img2 {
    width: 100px;
  }
}
@media screen and (max-width: 960px) {
  .content .container table .tipnotice.bonus-img1 {
    left: 50%;
  }
}
@media screen and (max-width: 859px) {
  .content .container table .tipnotice.bonus-img1 {
    left: 45%;
  }
}
@media screen and (max-width: 780px) {
  .content .container table .tipnotice.bonus-img1 {
    left: 45%;
  }
}
@media screen and (max-width: 649px) {
  .content .container table .tipnotice.bonus-img1 {
    left: 30%;
  }
}
@media screen and (max-width: 560px) {
  .content .container table .tipnotice.bonus-img1 {
    left: 15%;
  }
}
.content .container table .tipnotice.bonus-img2 {
  left: 70%;
}
@media screen and (max-width: 960px) {
  .content .container table .tipnotice.bonus-img2 {
    left: 60%;
  }
}
@media screen and (max-width: 540px) {
  .content .container table .tipnotice.bonus-img2 {
    left: 45%;
  }
}
@media screen and (max-width: 313px) {
  .content .container table .tipnotice.bonus-img2 {
    left: 40%;
  }
}

@keyframes heartBeatLinear {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes slideInDown {
  0% {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes slideInRight {
  0% {
    transform: translate3d(-30%, 30%, 0);
    opacity: 0.6;
    visibility: visible;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slideInLeft {
  0% {
    transform: translate3d(30%, 30%, 0);
    opacity: 0.6;
    visibility: visible;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slideInScale1 {
  0% {
    transform: scale(0.7) translate3d(0%, 8%, 0);
    visibility: visible;
  }
  to {
    transform: scale(1) translate3d(0%, 0%, 0);
  }
}
@keyframes slideInScale2 {
  0% {
    transform: scale(0.5);
    visibility: visible;
  }
  to {
    transform: scale(1);
  }
}
.content__btn div a:hover,
.content__btn div.action a {
  background: linear-gradient(180deg, #ffa906 4%, #ffd04a 88%);
  font-family: "Noto Sans TC", sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff;
  color: #91071e;
}

.content__btn div a {
  background: linear-gradient(180deg, #fefefe 4%, #fdfdfd 4%, #d0bcd8 88%);
  font-family: "Noto Sans TC", sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 1px #fff4d7, -1px 1px 1px #fff4d7, 1px -1px 1px #fff4d7, -1px -1px 1px #fff4d7;
  color: #67228d;
}

.content h4 {
  color: #f9bf11;
}

.part p {
  color: #ffffff;
}
.part .f-wraning {
  color: #fff000;
}

.table {
  color: #313131;
  border-color: #b94d10;
}
.table .f-danger {
  color: #e70055;
}
.table tr {
  background-color: #ffffff;
}
.table tr th {
  position: relative;
  background: linear-gradient(180deg, #ffa906 4%, #ffd04a 88%);
  color: #313131;
}

.btnBox a {
  color: #ffffff;
  background-image: linear-gradient(180deg, rgb(255, 158, 252) 4%, rgb(254, 157, 252) 4%, rgb(193, 6, 255) 88%);
}

.btnBox a:hover {
  background-image: linear-gradient(180deg, rgb(255, 210, 192) 4%, rgb(255, 209, 191) 4%, rgb(255, 120, 21) 88%);
}

.card-notice {
  background: linear-gradient(180deg, rgb(249, 243, 176) 4%, rgb(255, 229, 116) 60%, rgb(255, 229, 116) 88%);
}

.part .card p {
  color: #313131;
}
.part .card .f-danger {
  color: #e70055;
}
.part .card .f-wraning {
  color: #c1219c;
}/*# sourceMappingURL=main.css.map */