*{
  margin: 0px;
  padding: 0px;
}

.header {
  background-color: #000;
}

.footer {
  background-color: #000;
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}
.wrap-topview {
  background-image: url(../images/kv.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  overflow-x: hidden;
  margin-top: 7vh;
  background-color: #fbdbac;
  background-size: cover;
  height: 78vh;
/*   background-attachment: fixed; */
}
@media (max-width: 970px) {
  .wrap-topview {
    margin-top: 0;
    background-size: auto 100%;
  }
}
/* 左右 */
.left{
   display: block;
    max-width: 33em;
    position: absolute;
    height: auto;
    z-index: 10;
    top: 4%;
    left: 1%;
    /* margin-top: 5%; */
    overflow: hidden;
}
.right{
    display: block;
    max-width: 45em;
    position: absolute;
    height: auto;
    z-index: 10;
    top: 10%;
    right: 1%;
/*     margin-top: 5%; */
    overflow: hidden;
}
.lnr{
    display: contents;
    position: relative;
    overflow: hidden;
  }
.pid-box{
   /*  border-radius: 1rem;
    background: #fef7e782; */
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 0;
    max-width: 1140px;
}
.blog{
  display: block;
  position: relative;
  z-index: 50;
  margin: 0 auto;
  width: 100%;
/*   cursor: pointer; */
}
.topBtn{
  display: block;
  position: fixed;
}
/*------------tab------------*/
.tab_pc {
  width: 100%;
  position: fixed;
  top: 70px;
  background: #6a4d3a;
  z-index: 200;
  padding: 10px 0;
}
.tab {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}
.tab a {
/*   flex-grow: 1; */
  display: flex;
  /*再加一層*/
  align-items: center;
  /*垂直居中*/
  justify-content: center;
  /*水平居中*/
  text-align: center;
  letter-spacing: .1rem;
  font-size: 1.3rem;
  color: #fff;
  font-weight: bold;
  padding: 10px;
}
.tab_m {
  display: none;
  position: fixed;
  top: 0;
  background: #6a4d3a;
  width: 100%;
  z-index: 100;
}
.tab_m .tab {
  height: 60px;
}
.tab_m .tab a {
  font-size: 1.1rem;
  line-height: 1.2;
}

.tab .t-1{
  border-radius: 50px;
  padding: 5px 28px;
  background-color: #fff5d4;
  color: #9e4206;
  font-size: 1.1em;
  font-weight: 600;
}
.tab .active{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+12,e0a511+27,f8b500+46,fbdf93+66,f8b500+88 */
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(45deg, #fceabb 0%, #fccd4d 12%, #e0a511 27%, #f8b500 46%, #fbdf93 66%, #f8b500 88%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #fceabb 0%,#fccd4d 12%,#e0a511 27%,#f8b500 46%,#fbdf93 66%,#f8b500 88%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #fceabb 0%,#fccd4d 12%,#e0a511 27%,#f8b500 46%,#fbdf93 66%,#f8b500 88%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f8b500',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: #fff !important;
font-weight: 600;
text-shadow: #3d200d 0.1em 0.1em 0.2em

}
.tab .t-2{
    border-radius: 50px;
    padding: 3px 10px;
    background-color: #fff5d4;
    color: #9e4206;
    font-size: 1em;
    font-weight: 600;
}
.tab .t-1:hover{
  background-color: #ffd98a;
}
.tab .t-2:hover{
  background-color: #ffd98a;
}
@media (max-width: 970px) {
  .tab_pc{
    display: none;
  }
  .tab_m{
    display: block;
    padding: 0;
  }
}
/*------------kv------------*/
.kv_m{display: none;}
.kv{
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 907px;
  -webkit-animation: fadeInDown 1s ease-out;
  animation: fadeInDown 1s ease-out;
  height:auto;
  z-index: 1000;
  bottom: 35px;
}
@-webkit-keyframes updown {
  from{
    transform:translate(0,0)
  }
  to{
    transform:translate(0,40px)
  }
}
@keyframes updown {
  from{
    transform:translate(0,0)
  }
  to{
    transform:translate(0,20px)
  }
}
.kv img{
    display: block;
    margin: 0 auto;
    width: 90vh;
    position: relative;
    top: 16vh;
    z-index: 100;
    right: 26px;
}
.kv .btn7{
  width: 37vh;
  margin-top: 12px;
  left: 9px;
  cursor: pointer;
}
.kv_title_light{
  position: absolute;
  display: block;
  max-width: 100%;
  bottom: 12%;
  left: -.3%;
  z-index: 1;
  -webkit-animation: flash 1s infinite;
  animation: flash 1s infinite;
}
/* svg */
body {
  background-color: #000;
}
.svg-1{
    position: absolute !important;
    top: 39%;
    left: 29%;
}
.svg-2{
    position: absolute !important;
    top: 31%;
    left: 51%;
}

.star-1 {
  transform-origin: 102.14px 87.09px;
  animation-duration: 3.5s;
}

.star-2 {
  transform-origin: 219.47px 205.7px;
  animation-duration: 4s;
}

.star-3 {
  transform-origin: 404.11px 35.05px;
  animation-duration: 2.5s;
}

.star-4 {
  transform-origin: 54.43px 393.81px;
  animation-duration: 2.5s;
}

.star-5 {
  transform-origin: 374.42px 271.34px;
  animation-duration: 3s;
}

@keyframes glitter {
  0% {
    -webkit-transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(.8) rotate(360deg);
    opacity: .7;
  }
  100% {
    -webkit-transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
}

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

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@media (max-width: 1024px) {
  .kv_m{display: block;}
  .kv_m img{
    max-width: 100%;
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  .kv{display: none;}
  .stage-bg{
    background-image: none !important;
  }
}
/*------------content-tab------------*/
.tab_bar {
  width: 100%;
}
.tab_bar ul {
  margin-bottom: 0;
  display: flex;
}
.tab_bar ul li {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
  display: inline-block;
/*   background-color: #472292; */
}
.tab_bar ul li:nth-child(4){border-radius: 0 1rem 0 0;}
.tab_bar ul li a {
  line-height: 2.5;
  font-size: 1.3rem;
  font-weight: bold;
  color: #aa5f35;
}
.tab_bar ul li.active{
  background-color: #aa5f35;
}
.tab_bar ul li.active a{
  color: #472292;
}
/* @media (max-width: 500px) {
  .tab_bar {
    display: none; 
  }
} */
.item_03 {
    animation: updown 1.3s ease-in-out 0.5s infinite alternate;
/*     cursor: pointer; */
}
/*------------content-tab_m------------*/
.sticky.is-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 60px;
  z-index: 1000;
  width: 100%;
}
.m_tab_bar {
  display: none;
  width: 100%;
  margin: 0 auto;
}
.m_tab_bar ul {
  margin-bottom: 0;
  display: flex;
}
.m_tab_bar ul li {
  width: 33.33%;
  border: none;
  outline: none;
  text-align: center;
  background-color: #472292;
  list-style: none;
  padding: 0.5rem 0;
}
.m_tab_bar ul li a {
  font-size: 1.1rem;
  font-weight: bold;
  color: #FFFFFF;
}
.m_tab_bar ul li.active {
  background-color: #faf4df;
}
.m_tab_bar ul li.active a{
  color: #472292;
}
@media (max-width: 500px) {
  .m_tab_bar {
    display: block;
    padding: 0;
  }
  .title img {
    max-width: 100% !important;
  }
  .texts,.texts-2{
    font-size: 1em !important;
  }
}
@media (max-width: 400px) {
  .tab .t-2 {
    font-size: 0.8em;
    } 

  }
@media (max-width: 350px) {
  .tab_m .tab a {
    font-size: 0.9rem;
    padding: 0;
  }
}
/*------------content------------*/
.contentBox{
  background-size: auto,auto,auto,cover;
  padding: 3% 0 0 0;
}
/* 背景裝飾彩帶 */
.shine{
    background: url(../images/y-bg.png) top center repeat;
    background-attachment: fixed;
    /* position: fixed; */
    z-index: 100;
    background-size: cover;
}

.contentBox_or{
  background-color: #e05010 !important;
  padding: 3% 0 0 0;
}
.contentBox_yy{
  background-color: #fff5d4;
  background-size: auto,auto,auto,cover;
  padding: 3% 0;
}
.main-section{
  background-color:  #fff5c2;
  display: block;
  position: relative;
  z-index: 100;
}
.texts {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #743b1d;
  text-decoration: underline;
  font-size: 1.5em;
  left: 9%;
  top: -45px;
  font-weight: 600;
  cursor: pointer;  }
.texts-2{
  display: inline-block;
  position: absolute;
  text-align: center;
  color: #743b1d;
  text-decoration: underline;
  font-size: 1.5em;
  left: 50%;
  bottom:2%;
  font-weight: 600;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 20;
}
/* 每頁大標題 */
.title {
  display: block;
  position: relative;
  padding: 30px 10px 10px 10px;
  max-width: 1200px;
  margin: 0 auto;
}
.title img{
  display: block;
  margin: 0 auto;
  max-width: 80%;
}
.title-s img{
  max-width: 75% !important;
}
.item{
  /* margin-bottom: 4%; */
  padding-bottom: 4%;
}
.item img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.date-s .item{
  padding: 7px;
  margin-bottom: 2%;
}

.item_btn:hover, .item_btn:focus, .item_btn:active {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}


.area-img{
    max-width: 85%;
    margin: 0 auto;
    padding-bottom: 8%;
}
.sale1123{
  max-width: 900px;
  display: block;
  margin: auto;
}
.area1123{
  max-width: 800px;
  display: block;
  margin: auto;
}
.rules ol li, .rules ul li {
    list-style-type: decimal;
    list-style-position: inside;
}
.rules{
  background-color: #000 !important;
  padding: 5%;
}
.rules li {
  padding-left: 3px;
  color: #fff !important;
}
/* 說明 */
.statement h2{
  display: block;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 2em;
  margin: 2% auto;
  font-weight: 600;
}
.statement h3{
  display: block;
    position: relative;
    color: #ffe3a2;
    text-align: center;
    font-size: 1.7em;
    margin: 1% auto;
    font-weight: 500;
}
.statement h4{
    font-weight: bold;
    font-size: 1.3em;
    padding-bottom: 1%;
    color: #fff5d4;
}
.statement p{
  font-size: 1em;
  line-height: 25px;
  color: #fff;
}
.statement .outline{
    display: block;
    border: solid 2px #fff;
    border-radius: 12px;
    padding: 20px;
}

/* modal */
.modal-content{
  border-radius: 15px;
  background-color: #fff;
  align-items: center;
  text-align: center;
  padding: 10px;
  min-height: 300px;
  justify-content: center;
  margin: 10px;
}
.modal-body{
  display: contents;
}

.btn-style{
    background-color:#6b4d3b !important;
    min-width: 100px;
    font-size: 1.4em !important;
    font-weight: 500;
    border-radius: 50px!important;
    margin-bottom: 15px;
    padding: 6px 45px!important;
    border: none !important;
}
.btn-style a{
  color: #fff !important;
}
.btn-style a:hover{
  color: #fff !important;
  text-decoration: none;
}
.btn-style a:active{
  color: #fff !important;
  text-decoration: none;
}
.ai-area{
  display: flex;
}
.ai-area img{
    max-width: 13em;
    padding: 0 ;
    margin: 10px auto;
    display: block;
}

.modal-content {
    border: none !important;
    border-radius: 0.6rem !important;
}

.modal h5{
    font-size: 1.4em;
    font-weight: 600;
    margin: 15px;
    color: #333;
}
.modal h6{
    font-size: 1.3em;
    font-weight: 500;
    margin: 15px;
    color: #333;
    margin: 0 ;
}
.shine{
  position: relative;
}
.shine img{
    width: 100%;
    border: 0px !important;
    display: block;
    margin: auto 0;
    z-index: 2;
    position: relative;
}
/* .shine .gifts{
    z-index: 10;
    width: 80%;
    max-width: 900px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} */

.sweet-alert button{
  background-color: #6b4d3b !important;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder{
  border: 4px solid #6b4d3b !important;
}
.sweet-alert .sa-icon.sa-success .sa-line{
  background-color: #6b4d3b !important;
}
.sweet-alert h2{font-size: 20px !important;}
.bn-group{
  display: block;
  position: relative;
}
/* content-tab */
.tab_bar {width: 100%;margin: 0 auto 1rem;padding: 0 2rem;}
.tab_bar ul {margin-bottom: 0;display: flex;justify-content: space-evenly;}
.tab_bar ul li {width: 20%;
    outline: none;
    display: inline-block;
    border: 2px solid #6b4d3b;
    border-radius: 35px;
    margin: 0;
    cursor: pointer;min-width: 150px;}
.tab_bar ul li a {line-height: 1.8;font-size: 1.5rem;font-weight: bold;color: #6b4d3b;}
.tab_bar ul li.active {background-color: #6b4d3b;}
.tab_bar ul li.active a {color: #fff !important;}

.content_tit{width: 100%; max-width: 1000px;}


/* content-tab_m */
.sticky.is-sticky {position: fixed;left: 0;right: 0;top: 0;z-index: 1000;width: 100%;}
.m_tab_bar {display: none;width: 100%;margin: 0 auto;}
.m_tab_bar ul {margin-bottom: 0;display: flex;}
.m_tab_bar ul li {    width: 100%;
    border: none;
    outline: none;
    text-align: center;
    /* background-color: #f8881c; */
    list-style: none;
    padding: 0.3rem 0;
    border: 2px solid #fff;
    border-radius: 30px;
    margin: 0 5px;}
.m_tab_bar ul li.tabbar_50 {width: 50%;border: none;outline: none;text-align: center;background-color: #1498c3;list-style: none;padding: 0.5rem 0;}
.m_tab_bar ul li a {font-size: 1.1rem;color: #FFF;font-weight: bold;}
.m_tab_bar ul li.active {background-color: #fff;}
.m_tab_bar ul li.active a{color: #004976;}

@media screen and (min-width: 1200px) and (max-width: 1600px){
     .topBtn {
     bottom: 5rem ;
     right: 4rem;
  }

}
@media (min-width: 1800px){
  .wrap-topview{
    height: 74vh;
  }
   .right{
    right: 5em;
  }
}
@media (min-width: 1400px){
  .left{
    left: 6%;
    max-width: 38em;
  }
  .right{
    right: 3%;
    max-width: 49em;
    top: 8%;
  }
}
@media (min-width: 1200px){
    .title img {
    display: block;
    margin: 0 auto;
    max-width: 90%;
  }
  .left{
    left: 4%;
    max-width: 33em;
  }
  .right{
    right: 1em;
    max-width: 47em;
    top: 11%
  }
     .topBtn{
    bottom: 6rem;
    right: 10rem;
 }

}
@media (max-width: 1200px){
  .tab .t-1 {
    padding: 5px 13px;
  }
  .left{
    left: 1em;
    max-width: 29em;
    top: 6%;
  }
  .right{
    right: -4em;
    max-width: 42em;
    top: 9%;
  }
      .topBtn{
    bottom: 3rem;
    right: 2rem;
 }
}
@media (min-width: 1025px) {
    .shine-m{
    display: none !important;
  }
  .activities-m{
    display: none !important;
  }
  .blog-m{
    display: none !important;
  }
  .title img {
    display: block;
    margin: 3em auto;
  }
}
@media (max-width: 1024px) {
  .contentBox{
    background-color: #fff;
    background-size: auto,auto,auto,cover;
  }
  .main-section h2 img{
    padding: 0 0 8%;
  }
  .item_btn{
    width: 22%;
  }
  .item_btn2{
    width: 65%;
  }
  .white-bg,.white-bg2{
   background-image: none;
  }
  .shine-l{
    display: none !important;
  }
  .svg-1,.svg-2{
    display: none !important;
  }
  .activities-l{
    display: none !important;
  }
  .blog-l{
    display: none !important;
  }
  .texts-2{
    bottom: -1%;
  }
  .wrap-topview {
    background-image: none;
    height: auto;
  }
  .main-section{
  background-color:  #fff5c2;
}
.left, .right{
  display: none;
 }
}
@media (min-width: 768px) {
   .area-m{
    display: none !important;
  }
}
@media (max-width: 768px) {
  .contentBox{
    background-color: #fff;
    background-size: 20% auto,8% auto,cover;
  }
  .main-section h2 img{
    padding: 3% 0 8%;
  }
    .ribbon-bg{
    background-image: none !important;
  }
       .topBtn a {
    width: 40px;
    height: 40px;
    padding: 0;
  }
}
@media (max-width: 500px) {
  .contentBox{
    background-color: #fff;
    background-size: 20% auto,8% auto,cover;
  }
  .main-section h2 img{
    padding: 3% 0 2%;
  }
  .item_btn{
    width: 30%;
  }
  .item_btn2{
    width: 80%;
  }
/*   .title img{
    margin: 20px auto 0;
  } */
  .statement h2 {
    font-size: 25px
  }
   .statement h3 {
    font-size: 23px
  }
  .statement .outline {
    border: solid 1.5px #fff;
}
  .modal h5 {
      font-size: 1.3em;
  }
  .go{
    width: 100px;
  }
  .m_tab_bar {
    /* margin: 0 auto 5%; */
    background: #004977;
    padding: 11px;
}
.tab_bar ul li {
      min-width: 100px;
    /* width: fit-content; */
    /* line-height: 0; */
    font-size: 0.5em !important;
    line-height: 1.4;
    margin: 0 4px;
}
.tab_bar ul li a{
    font-size: 1.2rem;
 }
 .shine{
     background: url(../images/y-bg.png) top center repeat;
     position: relative;
     z-index: 100;
     background-size: cover;
 } 
}
@media (min-width: 576px) {
  .area-m{
    display: none !important;
  }
}
@media (max-width: 576px) {
  .area{
    display: none !important;
  }
  .item-m{F
    max-width: 70%;
  }
  .date-s{
    max-width: 85%;
    margin: auto;
  }
  .time .area-m{
    max-width: 80%;
  }
  .title-s img{
    max-width: 100% !important;
  }
  .wheel{
    max-width: 90%;

  }
  .wheel-btn{
    max-width: 70%;
  }
  .ai-area{
    display: block;
  }
  .title{
    padding: 25px 10px 5px;
  }

}