* {
  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/1111kv.gif);
  background-repeat: no-repeat;
  background-position: center top;
  overflow-x: hidden;
  margin-top: 120px;
  background-color: #41001b;
  background-size: auto;
}
@media (max-width: 970px) {
  .wrap-topview {
    margin-top: 60px;
    background-size: auto 100%;
  }
}

/*------------tab------------*/
.tab_pc {
  width: 100%;
  position: fixed;
  top: 70px;
  background: #1e0001;
  z-index: 15;
  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: #1e0001;
  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 52px;
  background-color: #1e0001;
  border: solid 3px #d8b2ff;
  color: #fff;
  font-size: 1.2em;
  font-weight: 600;
  box-shadow: 0 0 22px #c5a8ff;
}
.tab .active{
  background-color: #521524;
  border: solid 3px #ff90fb;
  color: #ffd2fd;
  font-weight: 600;
  box-shadow: 0 0 22px #ff90fb;
}
.tab .t-2{
    border-radius: 50px;
    padding: 2px 7px;
    background-color: #1e0001;
    border: solid 3px #d8b2ff;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    box-shadow: 0 0 22px #c5a8ff;
}
.tab .t-1:hover{
  background-color: #7b507d;
}
.tab .t-2:hover{
  background-color: #7b507d;
}
@media (max-width: 970px) {
  .tab_pc{
    display: none;
  }
  .tab_m{
    display: block;
    padding: 0;
  }
}
/*------------kv------------*/
.kv_m{display: none;}
.kv{
  position: relative;
  display: block;
  min-height: 90vh !important;
/*   margin: 50px auto;
  max-width: 907px;
  -webkit-animation: fadeInDown 1s ease-out;
  animation: fadeInDown 1s ease-out; */
}
.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;
}
@-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;}
  .ribbon-bg{
    background-image: none !important;
  }
  .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(1){border-radius: 1rem 0 0 0;}
.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: #faf4df;
}
.tab_bar ul li.active{
  background-color: #faf4df;
}
.tab_bar ul li.active a{
  color: #472292;
}
@media (max-width: 500px) {
  .tab_bar {
    display: none; 
  }
}
/*------------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;
  }
}
@media (max-width: 400px) {
  .tab .t-2 {
    font-size: 0.8em;
    border: solid 2px #d8b2ff;
    } 

  }
@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;
}
/* 背景裝飾彩帶 */
.ribbon-bg{
    background: 
    url(../images/ribbon-l.png) top left repeat-y, 
    url(../images/ribbon-r.png) top right repeat-y;
    background-size: 20vh;
}
/* 轉盤背景 */
.stage-bg{
    background: url(../images/stage-bg.png) top center no-repeat;
    background-size: cover;
    position: relative;
}
.stage-bg .contentBox{
  padding: 0;
}
/* 轉盤 */
.wheel, .wheel-btn{
  display: block;
  margin: 5% auto;
  position: relative;
}
.wheel-group{
  display: block;
  position: relative;
}
.wheel{
  max-width: 60vh;
  animation-name: spin;
  animation-duration: 1300ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.go{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 160px;
}

.wheel-btn{
  max-width: 36vh;
}
.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: #41001b;
}
/* 每頁大標題 */
.title {
  display: block;
  position: relative;
  padding: 20px 10px 0px 10px;
  max-width: 730px;
  margin: 0 auto;
}
.title img{
  display: block;
  margin: 60px auto 0;
  max-width: 100%;
}
.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{
  background-color: #280011;
  padding: 5%;
}
/* 說明 */
.statement h2{
  display: block;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 2em;
  margin: 2% auto;
}
.statement h4{
    font-weight: bold;
    font-size: 1.3em;
    padding-bottom: 1%;
    color: #e99ac6;
}
.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-secondary{
    background-image: linear-gradient(to top, #a938d1, #f65ab2);
    min-width: 100px;
    font-size: 1.5em;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 7px 19px;
}
.btn-secondary a{
  color: #fff;
}
.ai-area{
  display: flex;
}
.ai-area img{
    max-width: 13em;
    padding: 0 3px;
    margin: 10px auto;
    display: block;
}

.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 ;
}
.code{
      font-size: 1.5em;
}
.code-frame{
    display: flex;
    background: #e7d8ec;
    padding: 10px 15px;
    border: solid 2px #a33cc2;
    border-radius: 4px;
    margin-bottom: 10px;
    align-items: center;
}
@media (min-width: 1800px){
  .kv{
    min-height: 70vh !important;
  }
}

@media (max-width: 1200px){
  .tab .t-1 {
    padding: 5px 13px;
  }
}
@media (max-width: 1024px) {
  .contentBox{
    /* background: url(../images/content_bg_botr.png) right -3% bottom no-repeat,
                url(../images/content_bg_topl.png) left 3% top 3% no-repeat,
                url(../images/content_bg_topr.png) right 5% top no-repeat,
                url(../images/content_bg.jpg) center bottom no-repeat; */
    background-color: #41001b;
    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;
  }
}
@media (min-width: 768px) {
   .area-m{
    display: none !important;
  }
}
@media (max-width: 768px) {
  .contentBox{
    /* background: url(../images/content_bg_botr.png) right bottom no-repeat,
                url(../images/content_bg_topr.png) right 5% top no-repeat,
                url(../images/content_bg.jpg) center bottom no-repeat; */
    background-color: #41001b;
    background-size: 20% auto,8% auto,cover;
  }
  .main-section h2 img{
    padding: 3% 0 8%;
  }
@media (max-width: 500px) {
  .contentBox{
   /*  background: url(../images/content_bg_botr.png) right bottom no-repeat,
                url(../images/content_bg_topr.png) right 5% top no-repeat,
                url(../images/content_bg.jpg) center bottom no-repeat; */
    background-color: #41001b;
    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: 22px
  }
  .modal h5 {
      font-size: 1.3em;
  }
  .go{
    width: 100px;
  }
}
@media (min-width: 576px) {
  .area-m{
    display: none !important;
  }
}
@media (max-width: 576px) {
  .area{
    display: none !important;
  }
  .item-m{
    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;
  }
}