body {
  /* background-color: #f6e1c8; */
  overflow-x: hidden;
  max-width: 1920px;
  margin: 0  auto;
 
  
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

#mtkContainer {

  text-align: left;
  font-family: 'Montserrat','Noto Sans TC',"微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
  background: url(../images/bg_1.jpg) center top repeat;
}

#baishatunPage #mtkContainer{
  background: url(../images/bai_bg.jpg?v=20241211) center top repeat;
}

#mtkContainer.indexPage{
  background: url(../images/repeatBg-new.webp) center top repeat-y;
  background-position-y:450px ;
}

#mtkContainer * {
  transition: all 0.2s, font-size 0s;
}

.wrapper {
  position: relative;
  width: 92%;
  max-width: 1400px;
  margin: 10px auto;
}

img {
  width: 100%;
  border: 0;
  vertical-align: top;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/*header*/
#mtkContainer .header {
  position: relative;
  overflow-x: hidden;
}

.header-index{
  height: 675px;
  background: url(../images/header_pc_20240206.jpg) center top no-repeat;
}

.header-index h1{
  display: none;
}

#baishatunPage .header{
  height: 794px;
  background: url(../images/head20240201.jpg) center top no-repeat;
  text-indent: -9999px;
}


/*版頭*/
header.kv-banner { position: relative; height: 450px; background-position: top center;background-repeat:no-repeat;}
header.kv-banner h1{opacity: 0;}

@media screen and (max-width:1024px) {
header.kv-banner { background-size: 178%; height: 42vw; }
}
@media screen and (max-width:768px) {
header.kv-banner .container-fluid.pin-header-banner,header.kv-banner .container-fullbg.pin-header{margin-top: 0;}
}



.header a {
  left: 3%;
  display: block;
  position: absolute;
  top: 56%;
  width: 95%;
  animation: gameBtn 0.5s linear infinite alternate;
  cursor: default;
}

.header a>img.mobile {
  display: block;
  width: 95%;
  margin: 0 auto;
}

.header a>img.pc {
  display: none;
}

@keyframes gameBtn {
  from {
    filter: brightness(1);
  }

  to {
    filter: brightness(1.2);
  }
}

.header a:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
  animation: paused;
}

.header a .d_cup {
  position: absolute;
}

.header a .d_cup {
  width: 12%;
}

.header a .d_cup_1 {
  left: 17%;
  top: 20%;
  filter: drop-shadow(-5px 5px 3px rgba(0, 0, 0, 0.5));
  animation: d_cup_1 0.5s linear infinite alternate;
}

@keyframes d_cup_1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(10deg);
  }
}

.header a .d_cup_2 {
  transform: rotate(-157deg);
  left: 11%;
  top: 34%;
  filter: drop-shadow(5px -5px 3px rgba(0, 0, 0, 0.5));
  animation: d_cup_2 0.5s linear infinite alternate;
}

@keyframes d_cup_2 {
  from {
    transform: rotate(-157deg);
  }

  to {
    transform: rotate(-167deg);
  }
}

.header a:hover .d_cup_1,
.header a:hover .d_cup_2 {
  animation-duration: 0.2s;
}


@media screen and (max-width:1400px) {
  .header,#baishatunPage .header {
      height: 58vw;
      background-size: 120%;
  }

  .header-index{
    height: auto;
  }
  .header-index h1{
    display: block;
  }
}






.covid19 {
  position: absolute;
  bottom: 15%;
  left: 31%;
  padding: 10px 30px;
  border-radius: 20px;
  border: 5px solid #FFF;
  outline: 6px solid #6b0e0e;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  animation: light 0.3s ease infinite alternate;
  background: rgba(107, 14, 14, 1);
}

.covid19 b {
  font: bold 18px / 1.4 "微軟正黑體";
  color: #FF0;
}

.covid19 p {
  font: 18px / 1.4 "微軟正黑體";
  color: #FFF
}


@keyframes light {
  0% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(1.2);
  }
}


@media screen and (min-width:250px) {




  .covid19 {
    width: 95%;
    bottom: 10%;
    padding: 10px 10px;
    margin: -5px auto 5px auto;
    left: 3%;
    border: 3px solid #FFF;
    outline: 5px solid #6b0e0e;
  }

  .covid19 b {
    font: bold 18px / 1.4 "微軟正黑體";
  }

  .covid19 p {
    font: 14px / 1.4 "微軟正黑體";
  }
}


@media screen and (min-width:350px) {




  .header a {
    left: 5%;
    width: 90%;
    top: 53%;
  }



  .covid19 {
    bottom: 15%;
  }


  .header a>img.pc {
    display: block;
  }

  .header a>img.mobile {
    display: none;
  }

  .header a {
    left: 10%;
    width: 80%;
    top: 50%;
  }
}


  .covid19 b {
    font: bold 20px / 1.4 "微軟正黑體";
  }

  .covid19 p {
    font: 15px / 1.4 "微軟正黑體";
  }



@media screen and (min-width:768px) {


  .header a {
    left: 20%;
    width: 60%;
    top: 58%;
  }

  .covid19 b {
    font: bold 26px / 1.4 "微軟正黑體";
  }

  .covid19 p {
    font: 16px / 1.4 "微軟正黑體";
  }

}


@media screen and (min-width:800px) {
  .header a {
    left: 20%;
    width: 55%;
    top: 58%;
  }

}

@media screen and (min-width:1000px) {


  .header a {
    left: 20%;
    width: 55%;
    top: 62%;
  }




}

@media screen and (min-width:1200px) {



  .header a {
    top: 60%;
    width: 50%;
    left: 28%;
  }


  .covid19 {
    width: 80%;
    left: 10%;
    padding: 10px 30px;
  }
}

@media screen and (min-width:1400px) {


  .header a {
    top: 54%;
  }


  .covid19 b {
    font: bold 27px / 1.4 "微軟正黑體";
  }

  .covid19 p {
    font: 18px / 1.4 "微軟正黑體";
  }

  .covid19 {
    width: 60%;
    left: 20%;
  }
}

@media screen and (min-width:1600px) {
  .header a {
    left: 28%;
    top: 56%;
    width: 45%;
  }





  .covid19 {
    width: 50%;
    left: 25%;
  }
}


@media screen and (min-width:1800px) {
  .header a {
    left: 29%;
    top: 59%;
    width: 40%;
  }


}


/*nav*/
/*nav {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: -13%;
}

nav a {
  display: inline-block;
  width: 45%;
  max-width: 550px;
}

nav a:hover {
  transform: translateY(5px);
}*/

/*tour*/
.tour {
  display: none;
  padding-top: 1%;
  background: url(../images/bg_2.png) center bottom no-repeat;
  background-size: 100%;
  padding-bottom: 8%;
  z-index: 1;
  position: relative;
  margin-top: 20px;
}

.tour h2 {
  font-size: 25px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.tour h2 span {
  background: url(../images/d_couplet.png) center no-repeat;
  padding: 1em;
  margin: 0 -0.4em;
  background-size: 100%;
}

@media screen and (min-width:640px) {
  .tour h2 {
    font-size: 40px;
  }

  .tour h2 span {
    margin: 0 -0.25em;
  }
}

@media screen and (min-width:1220px) {
  .tour {
    padding-top: 50px;
  }

  .tour {
    padding-bottom: 85px;
    background-size: auto;
  }

  .tour h2 {
    font-size: 60px;
  }

  .tour h2 span {
    margin: 0 -0.25em;
  }
}

/*work*/
#work {
  margin-top: 0px;
}

/*schedule*/
.content {
  margin: 0 auto;
  max-width: 800px;
}

.schedule {
  font-size: 17px;
  width: 92%;
  max-width: 1400px;
  margin: 0% auto 0 auto;
}

.schedule .wrapper {
      padding: 50px 0;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #ceb03a;
  outline: 5px solid #c33131;
  background: #c33131;
}

.schedule h3 {
  font-size: 170%;
  font-weight: bold;
  color: white;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 30px auto 10px auto;


}

.schedule h3#blogAnc{
  margin: 60px auto 10px auto;
}

.schedule h3 img{
  width: auto;
  height: 1em;
}

.schedule h3 span{
  padding: 0 1em;
}

.schedule dl {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1.5em 0;
  text-align: center;
}

.schedule .time {
  width: 100%;
  font-size: 103%;
  color: #c33131;
  font-weight: bold;
  padding-right: 2%;
  margin-bottom: 0.2em;
}

.schedule .time span {
  display: inline-block;
  background: #f0cb89;
  border-radius: 5em;
  padding: 0.2em 0.4em;
  margin: 0.05em;
}

.schedule dt {
  width: 100%;
  background: #810d0d;
  color: white;
  padding: 0.8em;
  border: solid 1px #f5d291;
}

.schedule dl:nth-child(even) dt {
  background: #2e567a;
}


#baishatunPage .schedule dt{
  background: #6b083e;
}

#baishatunPage .schedule dl:nth-child(even) dt {
  background: #45688d;
}



.schedule .info {
  width: 100%;
  background: url(../images/bg_3.jpg);
  padding: 0.5em;
}

@media screen and (min-width:768px) {
  .schedule {
    border-right: 2em solid transparent;
    border-left: 2em solid transparent;
    /*border-image-source:url(../images/d_door.png);border-image-slice:85;border-image-width:1;border-image-repeat:repeat;*/
  }



  .schedule dl {
    flex-wrap: nowrap;
    margin: 1em 0;
  }

  .schedule .time {
    width: 23%;
    text-align: right;
    margin: 0;
  }

  .schedule dt {
    width: 60%;
    outline: solid 3px #810d0d;
  }
  #baishatunPage .schedule dt{
    outline: solid 3px #6b083e;
  }

  .schedule dl:nth-child(even) dt {
    outline: solid 3px #2e567a;
  }
  #baishatunPage .schedule dl:nth-child(even) dt {
    outline: solid 3px #45688d;
  }

  

  .schedule .info {
    width: 42%;
    text-align: left;
    margin-left: 3px;
  }
}

@media screen and (min-width:1220px) {
  .schedule {
    font-size: 20px;
    margin: 0 auto 0 auto;
    border-right: none;
    border-left: none;
  }


}

/*infoBox*/
.infoBox .gametitle {
  margin: -17% 0 0 0;
  text-align: center;
}

.infoBox .gametitle img {
  width: 75%;
}

.infoBox {
  font-size: 16px;
  line-height: 1.5;
  margin: 9em auto;
}

.infoBox .wrapper {
  border: solid 3px #d1b546;
  /*outline:solid 3px #d1b546;*/
  outline-offset: 4px;
  padding: 1em;
}

.infoBox h5 {
  font-size: 250%;
  text-align: center;
  color: #b19731;
  letter-spacing: 2px;
}

.infoBox p {
  font-size: 150%;
  text-align: center;
  color: #b19731;
  letter-spacing: 5px;
  margin-bottom: 2%;
}

.infoBox dl {
  padding: 0.5em 0;
}

.infoBox dt,
.infoBox dd {
  display: inline-block;
}

.infoBox dt {
  font-weight: bold;
  color: white;
  padding: 0.2em 1em;
  border-radius: 5em;
  background: #d1b546;
}

.infoBox dd {
  padding-left: 0.5em;
}

.infoBox dd ul {
  padding: 1em 1.5em;
}

.infoBox dd ul li {
  list-style-type: decimal;
}

.infoBox dd ul li a {
  text-decoration: underline;
}

.infoBox dd ul li a:hover {
  text-decoration: none;
}

.infoBox .prize {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}

.infoBox .prize div {
  width: 46%;
  margin: 2%;
  text-align: center;
  color: white;
  border: solid 2px transparent;
  background: #6f1616;
  outline: solid 3px #6f1616;
  outline-offset: 4px;
}

.infoBox .prize div.fb {
  background: #3c579e;
  width: 96%;
}

.infoBox .prize div.fb img {
  width: 47%;
  float: left;
}

.infoBox .prize b {
  display: block;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.5em 0;
  font-size: 120%;
}

.infoBox .prize p {
  padding: 0.5em;
}

/* 護照說明 */
.infoBox .prize2 {
  display: inline-block;
  flex-wrap: wrap;
  padding-left: 0;
}

.infoBox .prize2 div {
  margin: 2%;
  text-align: center;
}

.infoBox .prize2 .pass1 {
  width: 59%;
}

.infoBox .prize2 .pass2 {
  width: 40%;
}

.infoBox .prize2 div img {
  float: left;
  display: inline-block;
}

/* blogbanner */
.prize3 {
  display: block;
}

.prize3 .banner2 {
  margin: 0 auto;
  text-align: center;
}

.prize3 img {
  width: 100%;
  display: inline-block;
  margin: 2%;
  border: solid 3px #d1b546;
  border-radius: 10px;
}

.prize3 a {
  display: inline-block;
  padding: 2% 0.5%;
}

.prize3 a:hover {
  transform: scale(0.95);
}

/* 詳細說明影藏按鈕 */
.infor-content li {
  margin-left: 37px;
  list-style-type: disc;
}

.bt2 {
  display: inline-block;
  background-color: #ce2e30;
  margin: 20px 0;
  padding: 0px 20px;
  border-radius: 50px;
  cursor: pointer;
  font: 24px / 2 "微軟正黑體";
  color: #fff;
}

.bt2 a {
  font: 24px / 2 "微軟正黑體";
  color: #fff;
}

.bt2 a:hover {
  color: #fff100;
  cursor: pointer;
}

.bt2 a:active {
  color: #fff100;
  cursor: pointer;
}

.bt2 .click.minus::before {
  content: "-";
}

.bt2 .click.collapsed::before {
  content: "+";
}

.hide {
  display: none;
}

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

  /* blogbanner */
  .infoBox .prize3 {
    margin: 1% auto;
  }
}

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

  /* 護照說明 */
  .infoBox .prize2 .pass1 {
    width: 100%;
    display: block;
    float: none;
  }

  .infoBox .prize2 .pass2 {
    width: 68%;
    margin: 0 auto;
    display: block;
    float: none;
  }

  .infoBox {
    margin: 12% auto;
  }

  .infoBox .prize3 a {
    display: block;
  }

  .infoBox .prize3 img {
    width: 75%;
  }
}

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

  /* 護照說明 */
  .infoBox {
    margin: 4em auto;
  }

  .infoBox .gametitle {
    margin: -24% 0 0 0;
    text-align: center;
  }

  .infoBox .gametitle img {
    width: 100%;
  }
}

@media screen and (min-width:768px) {

  /* 護照說明 */
  .infoBox .prize {
    padding-left: 10%;
  }

  .infoBox .prize div {
    width: 33%;
  }

  .infoBox .prize div.fb {
    width: 70%;
  }
}

@media screen and (min-width:1220px) {

  /* 護照說明 */
  .infoBox {
    font-size: 18px;
  }

  .infoBox .wrapper {
    padding: 2em;
  }
}

/*step*/
.step {
  font-size: 16px;
  margin: 5em 0 2em 0;
}

.step h5 {
  text-align: center;
  font-size: 200%;
}

.step h5:before,
.step h5:after {
  content: '';
  display: inline-block;
  width: 0.3em;
  background: black;
  height: 0.8em;
  margin: 0 0.3em;
}

.breadcrumb {
  display: flex;
  border-radius: 5px;
  text-align: center;
  margin: 1.5em 0 0 0;
}

#mtkContainer .breadcrumb a {
  transition: none;
}

.breadcrumb li {
  display: block;
  color: white;
  width: 31%;
  height: 100px;
  position: relative;
  background: #721919;
  padding-left: 30px;
}

.breadcrumb li b,
.breadcrumb li p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.breadcrumb li b {
  font-size: 120%;
  border-bottom: dotted 2px white;
  color: #ffffcc;
}

.breadcrumb li p {}

.breadcrumb li:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: -25px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 25px solid #721919;
  border-bottom: 50px solid transparent;
  filter: drop-shadow(3px 0px 0px #fae5c8);
  z-index: 1;
}

.breadcrumb li:first-child:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 25px solid #f9e4c5;
  border-bottom: 50px solid transparent;
}

@media screen and (min-width:768px) {
  .breadcrumb li {
    padding-left: 5%;
  }
}

@media screen and (min-width:1220px) {
  .step {
    font-size: 18px;
  }

  .breadcrumb li:after {
    right: -40px;
    border-left: 40px solid #721919;
    filter: drop-shadow(5px 0px 0px #fae5c8);
  }

  .breadcrumb li:first-child:before {
    border-left: 40px solid #f9e4c5;
  }
}

/*game*/
#game {
  margin: 17% auto 6%;
}

#game .wrapper {
  border: solid 3px #d1b546;
  padding-bottom: 2%;
}

#game .gametitle {
  margin-top: -12%;
}

#game .gamestep {
  margin: 6% auto 1%;
}

.getAward {
  margin: 40px auto 0 auto;
  text-align: center;
  font: 20px/1.4 "微軟正黑體";
  color: #000;
  border: 3px #d0b54d solid;
  width: 90%;
}

.getAward tr {
  padding: 3px 5px;
  border: 3px #d0b54d solid;
}

.getAward td {
  padding: 3px 5px;
  border: 3px #d0b54d solid;
}

.getAward th {
  font: bold 20px/1.4 "微軟正黑體";
  color: #000;
  padding: 10px 0;
  background: #d5bd57;
}

.getAward .note {
  padding: 3px 15px;
  border: 3px #d0b54d solid;
  text-align: left;
}

.getAward2 {
  margin: 1%;
  text-align: center;
  font: 20px/1.8 "微軟正黑體";
  color: #000;
  border: 3px #d0b54d solid;
}

.getAward2 tr {
  padding: 3px 5px;
  border: 3px #d0b54d solid;
}

.getAward2 td {
  padding: 3px 5px;
  border: 3px #d0b54d solid;
}

.getAward2 .note {
  font: 17px/1.8 "微軟正黑體";
  padding: 3px 15px;
  border: 3px #d0b54d solid;
  text-align: center;
  color: #fff;
  background: #d0b54d;
}

@media screen and (min-width:1220px) {
  #game {
    margin: 12% auto 6%;
  }

  .getAward {
    width: 50%;
  }

  .getAward2 {
    width: 60%;
  }
}

@media screen and (min-width:520px) {
  .getAward th {
    font: bold 26px/1.4 "微軟正黑體";
  }

  .getAward2 th {
    font: bold 26px/1.4 "微軟正黑體";
  }
}

.blog {
  position: fixed;
  right: 0;
  bottom: 10%;
  z-index: 999;
}

.blog img {
  max-width: 256px;
  width: 90%;
}

.blog p,
.blog span {
  display: none;
}

@media screen and (max-width:1200px) {
  .blog {
    bottom: 5%;
  }
}

@media screen and (max-width:900px) {
  .blog {
    bottom: 0;
    width: 100%;
    text-align: center;
  }

  .blog p {
    display: block;
    font: 24px/1.6 "微軟正黑體";
    background: rgba(133, 22, 22, 1);
    color: #FFF;
    width: 70%;
    display: inline-block;
  }

  .blog span {
    background: #ffba00;
    font: 24px/1.6 "微軟正黑體";
    color: #810d0d;
    width: 29.9%;
    display: inline-block;
  }

  .blog img {
    display: none;
  }
}

.c26Menu {
  max-width: 1100px;
  width: 10%;
  margin: 20px auto -50px auto;
  text-align: center;
  z-index: 99;
  position: relative;
  background: #882324;
  border-radius: 30px;
  font: 26px/1.4 "微軟正黑體";
  border: 1px solid #efc9b3;
  outline: 3px solid #882324;
  color: #FFF;
}

.c26Menu ul li {
  padding: 2px 1%;
  text-align: center;
  display: inline-block;
  margin: 0 0.5%;
  transition: 0.3s;
  cursor: pointer;
  /*width:9%*/
  ;
}

.c26Menu ul li:hover {
  color: #FF0;
}

.c26Menu ul li::after {
  content: "｜";
  color: #FFF;
  position: relative;
  font: 24px/2 "微軟正黑體";
  right: -10%;
}

.c26Menu ul li.last::after {
  content: none;
}

.c26Menu2 {
  width: 95%;
  margin: 25px auto;
  text-align: center;
  font: 18px/1.4 "微軟正黑體";
  color: #882324;
      position: relative;
}

.c26Menu2 ul li {
  padding:5px 25px;
  text-align: center;
  display: inline-block;
  transition: 0.3s;
  cursor: pointer;
  /* border-right: 1px solid black; */
  vertical-align: top;
  line-height: 1.2;
  margin: 10px auto;
  background: #67003f;
  color: #ffde39;
  border-radius: 40px;
  font-weight: bold;

}
.c26Menu2 ul li:last-of-type{
  border-right: none;
}

.c26Menu2 ul li small {
  display: block;
  font-size: 0.6em;
  text-align: center;
}

.c26Menu2 ul li.last {
  border-right: none;
}

.c26Menu2 ul li:hover {
  background: #6e3b0b;
}

.width1200.c26Menu2 {
  max-width: 1600px;
  margin: 20px auto;
  font: 20px/1.4 "微軟正黑體";
}

.c26Menu2.indexMenu{
  margin: 0 auto;
}

.c26Area {
  margin: 0 auto;
  text-align: center;
}

.c26Area strong {
  display: inline-block;
  text-align: center;
  margin-top: 2%;
  color: #FFF;
  font: bold 24px/1.4 "微軟正黑體";
  background: #ceb03a;
  border-radius: 50em;
  padding: 0.5% 4%;
}


@media screen and (max-width:1500px) {
  .c26Menu2 {
    font: 22px/1.8 "微軟正黑體";
  }

  .c26Menu2 ul li::after {
    right: -19%;
  }

  .width1200.c26Menu2 {
    width: 95%;
    font: 20px/1.8 "微軟正黑體";
  }
}





@media screen and (max-width:1200px) {
  .c26Menu {
    font: 2.1vw/1.4 "微軟正黑體";
  }

  .c26Menu ul li {
    padding: 2px 0.5%;
  }

  .c26Menu ul li::after {
    content: "｜";
    color: #FFF;
    position: relative;
    font: 2.1vw/2 "微軟正黑體";
    right: -20%;
  }

  .c26Menu2 ul li {
    /* padding: 2px 0.5%; */
  }


}

@media screen and (max-width:900px) {
  .c26Menu {
    font: 18px/1.4 "微軟正黑體";
    border-radius: 0px;
    width: 20%;
    margin: 20px auto 0 auto;
    /*overflow-x:scroll;white-space:nowrap;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;*/
  }

  .c26Menu ul li {
    width: 100%;
  }

  .c26Menu ul li::after {
    content: "｜";
    color: #FFF;
    position: relative;
    font: 18px/2 "微軟正黑體";
    right: -10%;
  }
}



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

  /*.c26Menu{padding:0 4% 0 4%;}
.c26Menu ul li.last{}
*/
  .width1200.c26Menu2 {
    font: 18px/1.8 "微軟正黑體";
  }

  .c26Menu2 {
    margin: 12px auto;
    font: 18px/1.2 "微軟正黑體";
    width: 100%;
  }

  .c26Menu2 ul li {
    padding:5px 10px;
    margin: 10px auto;
    font: bold 14px/1.2 "微軟正黑體";
  }

  .c26Menu2 ul li::after {
    right: -4%;
    font: 18px/2 "微軟正黑體";
  }
}



@media screen and (max-width:500px) {
  .width1200.c26Menu2 {
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    width: 100%;
    padding-left: 10px;
  }
}




/*goTop*/
#goTop {
  display: none;
  position: fixed;
  z-index: 99;
  right: 2%;
  bottom: 23%;
  padding: 10px 10px 2px 10px;
  border-radius: 5em;
  font-size: 12px;
  line-height: 3em;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  transition: padding 0.2s;
  text-decoration: none;
}

#goTop:hover {
  padding-top: 30px;
  background-color: rgba(0, 0, 0, 7);
}

#goTop::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 18px;
  width: 0;
  height: 0;
  border: 4px solid #000;
  border-color: transparent transparent #fff;
}

.fa {
  display: none;
}

.giftBase {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
}

.gift {
  width: 31%;
  border: 2px solid #ceb03a;
  background: #FFF;
  text-align: center;
  padding: 0 0 20px 0;
  margin: 10px;
}

.gift b {
  font: bold 26px/1.2 "微軟正黑體";
  color: #FFF;
  width: 100%;
  display: block;
  background: #ceb03a;
  padding: 5px 0;
}

.gift img {
  width: 100%;
  max-width: 350px;
  margin: 20px auto 10px auto;
}

.gift p {
  font: bold 24px/1.2 "微軟正黑體";
  color: #ceb03a;
  display: block;
  letter-spacing: 0px;
}

.gift small {
  font: 16px/1.2 "微軟正黑體";
  color: #626262;
  display: block;
  letter-spacing: 0px;
}

.gift .line {
  width: 80%;
  margin: 0px auto 10px auto;
  height: 1px;
  background: #ceb03a;
}

@media screen and (max-width:800px) {
  .gift {
    width: 38%;
  }
}

@media screen and (max-width:500px) {
  .gift {
    width: 100%;
  }
}

.areaBase {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
}

.area {
  width: 19%;
  text-align: center;
  margin: 5px;
  position: relative;
  transition: 0.3s;
  overflow: hidden;
  border: 2px solid #ceb03a;
}

.area img {
  width: 100%;
  max-width: 500px;
  z-index: 1;
}

.area .black {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  font: 24px/1.2 "微軟正黑體";
  padding: 60px 0 0 0;
  text-shadow: 0px 0px 5px #000;
  z-index: 2;
  top: 0;
  left: 0;
}

.area:hover img {
  transform: scale(1.1);
}

.area:hover .black {
  background: rgba(0, 0, 0, 0.2);
}

@media screen and (max-width:1200px) {
  .area {
    width: 28%;
  }

  .area .black {
    padding: 29% 0 0 0;
  }
}

@media screen and (max-width:640px) {
  .area {
    width: 34%;
  }
}

@media screen and (max-width:500px) {
  .area {
    width: 45%;
  }

  .area .black {
    padding: 25% 0 0 0;
  }
}

.blogBase.index {
  margin: auto;
}


.blogBase {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 10px auto;
}

.blogBase a {
  flex-basis: 45%;
  background: #f6e0c8;
  margin: 0px;
  border-radius: 20px;
  border: 3px solid #f0cd8e;
  overflow: hidden;
  transition: 0.3s;
  flex-shrink: 1;
}

.blogBase a b {
  font: bold 24px/1.6 "微軟正黑體";
  color: #c78902;
  padding: 5px 10px 5px 50px;
  display: block;
  position: relative;
}

.blogBase a b.blogTitle::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 99em;
  position: absolute;
  top: 4px;
  left: 5px;
  background: url(../images/blog01-2.jpg) center no-repeat;
  background-size: cover;
}

.blogBase a b.youtubeTitle::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 99em;
  position: absolute;
  top: 4px;
  left: 5px;
  background: url(../images/blog02-2.jpg) center no-repeat;
  background-size: cover;
}

.blogBase a img {
  width: 100%;
}

.blogBase a:hover {
  transform: scale(1.05);
}

@media screen and (max-width:1330px) {
  .blogBase a b {
    font: bold 1.4vw/1.6 "微軟正黑體";
  }

  .blogBase a b.blogTitle::before {
    width: 30px;
    height: 30px;
    top: 5px;
    left: 13px;
  }

  .blogBase a b.youtubeTitle::before {
    width: 30px;
    height: 30px;
    top: 5px;
    left: 13px;
  }
}

@media screen and (max-width:1220px) {
  .blogBase a b {
    font: bold 20px/1.6 "微軟正黑體";
  }
}

@media screen and (max-width:955px) {
  .blogBase {
    flex-wrap: wrap;
  }

  .blogBase a {
    flex-basis: 70%;
  }
}

@media screen and (max-width:600px) {
  .blogBase a {
    flex-basis: 90%;
  }

  .blogBase a b {
    font: bold 18px/1.6 "微軟正黑體";
  }

  /*.blogBase a b.blogTitle::before{width:30px;height:30px;}
.blogBase a b.youtubeTitle::before{width:30px;height:30px;}
*/
}

/*gobalMenu*/
/* .wrapper.navBase {
  margin-top: -180px;
} */

.gobalMenu {
  margin-top: 0;
  display: block;
}

.gobalMenu ul {
  display: flex;
  margin: 0 auto;
  max-width: 1400px;
  justify-content: center;
}

.gobalMenu ul li {
  display: inline-block;
  position: relative;
  margin: 0 20px;
  padding-left: 40px;
  width: 310px;
  border: 2px solid #d5b341;
  background: white;
  box-shadow: 0 5px 0 #bfae87;
  cursor: pointer;
}

.gobalMenu ul li:hover{
  transform: translateY(5px);
}

.gobalMenu ul li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 102px;
  background: url(../images/dec-1.png) top center no-repeat;
}

.gobalMenu ul li:hover {
  background: #f5edd3;
}

.gobalMenu ul li a {
  display: block;
  padding: 20px 0px;
  width: 100%;
  font: bold 24px/1 "微軟正黑體";
  text-align: center;
  color: black;
}



.gobalMenu ul li.on {
  background: #9b1611;
}

.gobalMenu ul li.on a {
  color: white;
}

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

  .gobalMenu ul li {
    width: 24%;
  }
}

@media screen and (max-width:1200px) {
  /* .wrapper.navBase {
    margin-top: -20vw;
        height: auto;
            margin-bottom: 50px;
  } */

  .gobalMenu ul li {
    width: 20%;
  }

  .gobalMenu ul li a {
    font: bold 20px/1 "微軟正黑體";
    letter-spacing: 0;
  }
}


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

  .gobalMenu ul li {
    width: auto;
  }

  .gobalMenu ul li::after {
    width: 40px;
    background-size: 100%;
  }

  .gobalMenu ul li a {
    padding: 10px 10px 10px 5px;
    font: bold 20px/1 "微軟正黑體";
  }
}

@media screen and (max-width:768px) {
  /* .wrapper.navBase{
        margin-bottom: 0;
        position: sticky;
        top: 0;
        width: 100%;

  } */

  .gobalMenu ul li {
    margin: 0;
    padding-left: 0px
  }

  .gobalMenu ul li::after {
    display: none;
  }

  .gobalMenu ul li a {
    padding: 7px 3px;
    font: bold 17px/1 "微軟正黑體";
  }

}

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

  
  .gobalMenu {
    margin: -40px auto 20px auto;
  }

  .gobalMenu ul li a {
    font: bold 16px/1 "微軟正黑體";
    letter-spacing: 0;
  }
}


@media screen and (max-width:475px) {
  .gobalMenu ul {
    flex-wrap: wrap;
  }

  .gobalMenu ul li {
    width: 49%;
    flex-grow: 1;
  }

}





.adBN {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #000000a6;
  z-index: 999;
}

.adBN-content {
  position: relative;
  margin: 0 auto;
  max-width: 906px;
}

.adBN-content img {
  width: 100%;
}

.adBN-content-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  font: 17px/20px "微軟正黑體";
  color: black;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
}

.adBNOpen {
  display: none;
  position: fixed;
  top: calc(100% - 30px);
  left: calc(50% - 15px);
  padding: 5px;
  width: 30px;
  height: 30px;
  background: #6c16177c;
  z-index: 30;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}

.liveTitle {
  margin-bottom: 20px;
  font: bold 40px/1 "微軟正黑體";
  color: white;
  text-align: center;
}

.liveTitle img {
  width: 100%;
}

.liveTitle span {
  padding: 10px 15px;
  background: #6f1616;
  border-radius: 90px;
}

.userBtn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  flex-wrap: wrap;
}

.userBtn-btn {
  display: inline-block;
  margin: 0 10px 20px 10px;
  min-width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

.userBtn-btn a {
  display: block;
  padding: 15px 0px;
  font: 22px/1 "微軟正黑體";
  color: white;
  text-align: center;
}

.userBtn-btn.joinEvent {
  background: #dc3564;
}

.userBtn-btn.joinMember {
  background: #729dc0;
}

.userBtn-btn:hover {
  transform: translateY(5px);
}

.moreInfor {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.moreInfor.on {
  padding-bottom: 50px;
  height: auto;
}

.moreInfor::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 10;
  background: linear-gradient(91deg, rgba(250, 230, 201, 1)0%, rgba(250, 230, 201, 0)100%);
  background: -moz-linear-gradient(91deg, rgba(250, 230, 201, 1)0%, rgba(250, 230, 201, 0)100%);
  background: -webkit-linear-gradient(91deg, rgba(250, 230, 201, 1)0%, rgba(250, 230, 201, 0)100%);
  background: -o-linear-gradient(91deg, rgba(250, 230, 201, 1)0%, rgba(250, 230, 201, 0)100%);
}

.moreInfor.on::after {
  display: none;
}

p.moreInfor-titel {
  margin-top: 30px;
  font: bold 30px/1.6 "微軟正黑體";
  color: black;
  text-align: center;
}

p.moreInfor-text {
  font: bold 24px/1.6 "微軟正黑體";
  color: black;
  text-align: center;
}

.moreInfor li {
  margin-bottom: 17px;
  font: 17px/1.6 "微軟正黑體";
  color: black;
  text-align: left;
}

.moreInfor li a {
  font-weight: bold;
  color: black;
  text-decoration: underline;
}

.moreInfor-btn {
  position: absolute;
  bottom: 0;
  left: calc(50% - 100px);
  width: 200px;
  height: auto;
  font: 25px/1.6 "微軟正黑體";
  color: white;
  text-align: center;
  border-radius: 99em;
  background: black;
  z-index: 11;
  cursor: pointer;
  transition: .5s;
}

.moreInfor-btn:hover {
  transform: scale(0.9);
}





#baishatun .wrapper {
  padding:30px 20px;
  margin: 60px auto 100px auto;
  outline: 5px solid #E03890;
  background: #E03890;
}

@media only screen and (max-width: 900px) {
  #baishatun .wrapper {
    padding: 20px 12px;
  }
  #baishatun.schedule {
    width: 92%;
    margin: 0 auto;
  }

}
@media only screen and (max-width: 500px) {
  #baishatun .wrapper {
    padding: 20px 12px;
  }

}

/*得獎名單表格*/
.awardBase {
  margin: 0 auto;
  border-radius: 20px;
  width: 100%;
  padding: 20px 8px 40px 10px;
}

table.bike {
  text-align: center;
  width: 95%;
  border: 1px #ff887b solid;
  font-size: 16px;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
}

table.bike tr td {
  padding: 10px 10px;
  border: 1px #9f0101 solid;
  text-align: center;
}

table.bike tr:nth-of-type(1) {
  background: #000;
  color: #FFF;
  font: bold 16px/1.8 "arial", "微軟正黑體";
  padding: 20px;
  text-align: center;
}


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

  .titleAward {
    font: bold 20px/1.4 "arial", "微軟正黑體";
  }

  table.bike {
    font: 14px/1.4 "arial", "微軟正黑體";
    width: 100%;
  }

  table.bike tr td {
    padding: 8px 4px;
  }

}




.dateBase {
  margin: 0 auto;
  width: 100%;
  padding: 30px 0;
  max-width: 1200px;
}


table.dateTable {
  text-align: center;
  width: 95%;
  border: 1px #ff887b solid;
  font-size: 16px;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
 
}

table.dateTable tr td {
  padding: 10px 10px;
  border: 1px #9f0101 solid;
  text-align: center;
}

table.dateTable tr * {
vertical-align: middle;
}

table.dateTable tr.note{

background: #facf5a;

}



/* table.dateTable tr {
  background: #000;
  color: #FFF;
  font: bold 16px/1.8 "arial", "微軟正黑體";
  padding: 20px;
  text-align: center;
}

 */



 @media only screen and (max-width: 600px) {
 table.dateTable {
  font: 14px/1.4 "arial", "微軟正黑體";
 }


.wrapper hr{
  margin: 50px 0;
}


.map p{
  text-align: center;
  font-size: 14px;
  color: white;
  padding-top: 1em;
}

}




#baishatunPage .navArea{
  margin-top: 0;
}
#baishatunPage .navArea a{
  /* padding: 0.5em 2em; */
  margin-top: 0;
}
#baishatunPage .navArea a:hover , #baishatunPage .navArea a.on{
  background: #E03890;
  border:solid 1px #C60E6E;
  box-shadow: 2px 4px 0px #C60E6E;
}
@media only screen and (max-width: 600px) {
  .navArea a{ 
    flex-grow: 1;
  }
}

/*navArea*/
.navArea{
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  z-index: 99;
  flex-wrap: nowrap;
  padding: 10px 0;
  margin-bottom: 50px;
  /* margin-top: -70px; */

}


.navArea a{
  position: relative;
  display: inline;
  font-size: 26px;
  font-weight: bold;
  color: white;
  background: #dfb21d;
  text-align: center;
  padding: 0.5em 1em;
  margin:0 0.5em;
  border-radius: 5em;
  border:solid 1px #b98a25;
  box-shadow: 2px 4px 0px #b98a25;

  
}

.navArea a img{
  width: auto;
  height: 50px;
  vertical-align: middle;
  margin-right: 10px;
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
}

.navArea a span{
  /* margin-left: 1.5em; */
  font-family: "微軟正黑體";
}

.navArea a:hover , .navArea a.on{
  background: #ce1219;
  border-color: #ddb42c;
  box-shadow: 2px 4px 0px #ddb42c;
}



.navArea.on{
  background: #fefcf5;
  left: 0;
  position: fixed;
  width: 100%;
}
.navArea.on a{
  font-size: 16px;
}
.navArea.on a img{
  height: 36px;
}
.linearGradient{
  height: 100px;
  background: linear-gradient(to bottom,  rgba(254,252,245,1) 0%,rgba(254,252,245,0) 100%);
  margin-top: -75px;
}

@media only screen and (max-width: 1400px) {
  .navArea{
    margin-top: -3vw;
  }
  .navArea a{
    width: auto;
    flex-shrink: 0;
    padding: 1em 2em 1em 4em;
    font-size: 16px;
  }
  .navArea a span {
    margin-left: 0;
  }
}


@media only screen and (max-width: 960px) {
  .navArea{
    flex-wrap: wrap;
    margin-bottom: 0vw;
  }
  .navArea a{
    /* width: calc(30% - 0.5em); */
    width: calc(25% - 0.5em);
    margin: 0.25em;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navArea a img{
    display: none;
  }
}

@media only screen and (max-width: 800px) {
  .navArea a img{
    display: none;
  }
}
@media only screen and (max-width: 380px) {

    
}






/*menuTips*/
.menuTips{
  text-align: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 16px;
}
.menuTips a{
/*  display: inline-block;*/
  background: #ffee79;
  color: #c33131;
  font-size: 28px;
  padding: 0.5em 1.5em;
  border-radius: 5em;
  font-weight: bold;
  /* margin: 20px auto; */
  transition: all 0.2s;
}
.menuTips a:hover{
  filter: brightness(1.1);
}

@media only screen and (max-width: 960px) {
  .menuTips a{
    font-size: 20px;
    margin: 20px 0.2em;
  }
}

@media only screen and (max-width: 500px) {
   .menuTips{
    white-space: nowrap;
    gap: 4px;
  } 
  .menuTips a{
    font-size: 3.8vw;
  }
}



.goTop {
  display: inline-block;
  position: fixed;
  z-index: 99;
  right: 30px;
  bottom: 30px;
  padding: 10px 10px 2px 10px;
  border-radius: 5em;
  font-size: 12px;
  line-height: 3em;
  text-align: center;
  color: #fff;
  background-color: #dfb21d;
  text-decoration: none;
}
.goTop:hover {
  padding-top: 30px;
  color: #fff;
  background-color: #b98a25;
  transition: all 0.2s;
}
.goTop::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 18px;
  width: 0;
  height: 0;
  border: 4px solid #000;
  border-color: transparent transparent #fff;
}


#baishatunPage .goTop{
  background: #dfb21d;
}
#baishatunPage .goTop:hover {
  background: #b98a25;
}