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

.header {
  background-color: #270098;
}

.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;
  margin-top: 65px;
  background-color: #ffc0b8;
  background-size: cover;
  height: 80vh;
  overflow: hidden;
}
@media (max-width: 970px) {
  .wrap-topview {
    margin-top: 0;
    background-size: auto 100%;
  }
}

/*------------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: 1200px;
  overflow: hidden;
  top: -35px;
}
/*   -webkit-animation: fadeInDown 1s ease-out;
  animation: fadeInDown 1s ease-out; */
}
@-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: 100%;
    position: relative;
    max-width: 118vh;
    top: 14px;
}
.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: #f66d90;
  overflow-x: hidden;
}
.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;
  }
  .pt {
    padding: 0 !important;
  }
  .container{
    padding: 0;
  }
}

@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 6%;
}
/* 背景裝飾彩帶 */
.ribbon-bg{
    background: 
    url(../images/ribbon-l.png) center left no-repeat, 
    url(../images/ribbon-r.png) center right no-repeat;
    background-size: 30vh;
    background-attachment: fixed;
}

.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: #f66d90;
}
.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: 20px 10px 0px 10px;
  max-width: 1000px;
  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: #270098 !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;
}
.titles{
  max-width: 90%;
  width: 27vh !important;
  display: block;
  margin: 0 auto;
  width: auto;
  position: relative;
  padding: 35px 10px 8px;
}
.pt{
  padding: 2em 4.5em;
  border-radius: 20px;
  border: solid 5px;
}
.rs{
  background-color: #fff9de;
  border-color: #ffee2f;
}
.bt{
  background-color: #f2dfff;
  border-color: #c169ff;
}
.es{
  background-color: #e3ffec;
  border-color: #6aff98;
}
.photos {
  max-width: 85%;
  margin: 0 auto;
}
.photo{
    margin-bottom: 2%;
    padding: 10px 20px;
}
.photo img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.btn-more {
    width: max-content;
    border: 3px solid #270099;
    border-radius: 50px;
    line-height: 1.5;
    font-size: 30px;
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, 155%);
}
.more-rs{
  background-color: #ffee2f;
}
.more-bt{
  background-color: #e0b5ff;
}
.more-es{
  background-color: #6aff98;
}

.channel-pid{
    color: #270099;
    font-weight: 900;
    padding: 0 15px;
}
.channel-pid:hover{
  color: #270099;
}
.fas {animation: move 1s infinite;}
@keyframes move {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(8px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* 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:#270098 !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;
    display: block;
    position: initial;
    color: #fff;
}
.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;
}
.btn-style:hover{
  color: #fff !important;
  text-decoration: none;
}

.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 ;
}

.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;
}
/* 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 (min-width: 1800px){
  .kv{
    min-height: 70vh !important;
  }
}
@media (min-width: 1000px)and (max-width: 1800px){
  .kv{
    top: -35px;
    width: 1000px;
  }
}
@media (min-width: 1200px){
    .title img {
    display: block;
    margin: 0 auto;
    max-width: 90%;
  }
}
@media (max-width: 1200px){
  .tab .t-1 {
    padding: 5px 13px;
  }
  .btn-more{
    transform: translate(-50%, 140%);
  }
}
@media (min-width: 1025px){
  .title img {
    display: block;
    margin: 3em auto 0;
  }
}
@media (max-width: 1024px){
  .contentBox{

  }
  .main-section h2 img{
    padding: 0 0 8%;
  }
  .item_btn{
    width: 22%;
  }
  .item_btn2{
    width: 65%;
  }
  .white-bg,.white-bg2{
   background-image: none;
  }
  .svg-1,.svg-2{
    display: none !important;
  }
  .texts-2{
    bottom: -1%;
  }
  .wrap-topview {
    background-image: none;
    height: auto;
  }
.pt{
    padding: 0.5em 1em;
  }

}
@media (min-width: 768px){
   .area-m{
    display: none !important;
  }
  .photos{
  max-width: 1000px;
  display: block;
  margin: 0 auto;
}
@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;
  }
}
@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%;
  }
  .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 {
    background: #004977;
    padding: 11px;
  }
  .tab_bar ul li {
    min-width: 100px;
    font-size: 0.5em !important;
    line-height: 1.4;
    margin: 0 4px;
  }
.tab_bar ul li a{
        font-size: 1.2rem;
  }

}
@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;
  }
  .title{
    padding: 0px 10px;
  }

}