* {
  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: 100px;
  background-color: #ffe3dd;
  background-size: cover;
  height: 95vh;
}
@media (max-width: 970px) {
  .wrap-topview {
    margin-top: 60px;
    background-size: auto 100%;
  }
}

/*------------tab------------*/
.tab_pc {
  width: 100%;
  position: fixed;
  top: 70px;
  background: #d12948;
  z-index: 200;
  padding: 0;
}
.tab {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  align-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: 1px;
}
.tab_m {
  display: none;
  position: fixed;
  top: 0;
  background: #d12948;
  width: 100%;
  z-index: 100;
}
.tab_m .tab {
  height: 65px;
}
.tab_m .tab a {
  font-size: 1.1rem;
  line-height: 1.2;
}

.tab .t-1{
  border-radius: 25px;
  padding: 2px 28px;
  background-color: #fff;
  color: #531616;
  font-size: 1.1em;
  font-weight: 600;
  border: solid 2px #f89caa;
  line-height: 1.2em;
  min-height: 3em;
  position: relative;
  min-width: 133px;
  margin: 3px;
  display: grid;
  align-content: center;
}
.tab .active{
    background: #fedce3 !important;
    display: grid;
    align-content: center;

}
.tab .t-2{
    border-radius: 25px;
    padding: 0 10px;
    background-color: #fff;
    color: #531616;
    font-size: 1em;
    font-weight: 600;
    border: solid 2px #f89caa;
    line-height: 1em;
    min-height: 3em;
    position: relative;
    display: grid;
    align-content: center;
}
.tab .t-1:hover{
  background-color: #ffbcca;
}
.tab .t-2:hover{
  background-color: #ffbcca;
}
@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;
}
@-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: 100vh;
    position: relative;
    top: 7vh;
}
.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: #ffe3dc !important;
}
.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: 1.3em !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------------*/
.wrapper{
  overflow: hidden;
}
.contentBox{
  background-size: auto,auto,auto,cover;
  padding: 3% 0 0 0;
}
/* 圖案底圖*/
/* .green-bg{
    background: url(../images/green-bg.png) top center;
    background-size: 120vh;
    background-attachment: fixed;
} */
.cloud-bg{
    background-color: #f7b2b1 !important;
    background: url(../images/bg.jpg) top center no-repeat;
    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: #ffe3dc;
}
.activities{
  width: 80%;
    margin: 0 auto;
    max-width: 1000px;
}
.register{
  max-width: 500px;
}
.animate__animated{
  animation: infinite;
}
.titles{
  max-width: 90%;
  width: 35em !important;
  display: block;
  margin: 0 auto;
  width: auto;
  position: relative;
  padding: 60px 10px 15px;
}
.container h6{
    width: 20%;
    outline: none;
    display: block;
    border-radius: 35px;
    margin: 28px auto 0;
    min-width: 250px;
    font-size: 28px;
    text-align: center;
    color: #fff;
/*     background-color: #4d93bc; */
    font-weight: 500;
    padding: 5px 10px;
    letter-spacing: 2px;
}
.container .city{
  background-color: #4d93bc;
}
.container .countryside{
  background-color: #93b274;
}
.container .island{
  background-color: #fcb63f;
}
.container .oneday{
  background-color: #f584ae;
}
.texts {
  display: block;
  position: relative;
  text-align: center;
  color: #743b1d;
  text-decoration: underline;
  font-size: 1.5em;
  top: -30px;
  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;
}
.content_tit {
  display: block;
  position: relative;
  padding: 20px 10px 0px 10px;
  max-width: 1000px;
  margin: 0 auto;
}
.content_tit:hover{
  top: -10px;
}
.content_tit img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  cursor: pointer;
}
.content_p {
  display: block;
  position: relative;
  padding: 20px 10px 0px 10px;
  max-width: 1000px;
  margin: 0 auto;
}
.content_p img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
/* 每頁大標題 */
.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%;
  cursor: pointer;
}
.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);
}
.title1{
    display: block;
    margin: 2em auto;
    padding: 1em;
    width: 100%;
    max-width: 550px;
    z-index: 10;
    position: relative;
}
.title2{
    display: block;
    margin: 2em auto 0;
    padding: 1em;
    width: 100%;
    max-width: 420px;
    z-index: 10;
    position: relative;
}
/* .title1-m{
    display: block;
    margin: auto 0;
    width: 100%;
} */

.register{
  display: block;
  max-width: 75%;
  position: relative;
  margin-top: -80px !important;
}
.photo{
    margin-bottom: 2%;
    padding: 10px 20px;
}
.photo img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.photos{
  padding-bottom: 3em;
}
.code{
    margin-bottom: 2%;
    padding: 10px 10px;

}
.code:hover{
  top: -10px;
}
.code5_finish :hover{
}
.code img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
.codes{
  padding-bottom: 3em;
}
.area-img{
    max-width: 85%;
    margin: 0 auto;
    padding-bottom: 8%;
}
.rules ol li, .rules ul li {
    list-style-type: decimal;
    list-style-position: inside;
}
.rules{
  background-color: #862033 !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%;
    padding-top: 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:#d12948 !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 ;
}
.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 #d12948;
    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: #962d40;}
.tab_bar ul li.active {background-color: #d12948;}
.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: 1800px){
    .topBtn {
    bottom: 5rem ;
    right: 4rem;
 }

}
@media screen and (min-width: 768px) and (max-width: 1024px){
  .register{
    width: 20em;
  }
}
@media screen and (min-width: 450px) and (max-width: 768px){
  .activities{
    width: 60%;
  }
  .title1 {
    width: 28em;
  }
}
@media (min-width: 1800px){
  .kv{
    min-height: 70vh !important;
  }

}
@media (min-width: 1200px){
    .title img {
    display: block;
    margin: 0 auto;
    max-width: 90%;
  }

}
@media (max-width: 1200px){
  .tab .t-1 {
    padding: 5px 13px;
  }
  .topBtn {
    bottom: 3rem;
    right: 2rem;
 }
     .topBtn {
    bottom: 5rem;
    right: 2rem;
 }
}
@media (min-width: 1025px) {
  .title img {
    display: block;
    margin: 3em auto;
  }
  .a2{
    margin-bottom: 50px !important;
  }
  .register{
    width: 42vh;
  }
  .cloud-bg{
    padding-bottom: 0em !important;
  }
}
@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;
  }
  .svg-1,.svg-2{
    display: none !important;
  }
  .texts-2{
    bottom: -1%;
  }
  .wrap-topview {
    background-image: none;
    height: auto;
  }
  .main-section{
      background-color: #ffe3dc;
}
  .photos {
    max-width: 85%;
    margin: 0 auto;
  }
    .codes {
    max-width: 100%;
    margin: 0 auto;
  }
  .flower-f{
  display: block;
    position: relative;
    width: 150%;
    top: 2px;
}
  .texts{
    font-size: 1.3em;
    top: 10px;
  }


}
@media (min-width: 768px) {
   .area-m{
    display: none !important;
  }
    .photos{
    max-width: 900px;
    display: block;
    margin: 0 auto;
  }
     .codes{
    max-width: 1200px;
    display: block;
    margin: 0 auto;
  }
  .title1-m{
    display: none;
  }
  .cloud-bg{
    padding: 1.5em 0 2em;
  }
}
@media (max-width: 768px) {
  .contentBox{
    background-size: 20% auto,8% auto,cover;
  }
  .main-section h2 img{
    padding: 3% 0 8%;
  }
    .green
  -bg{
    background-image: none !important;
  }
  .title1{
      margin: 1em auto;
  }
    .flower-f{
    display: block;
    position: relative;
    width: 200%;
    top: 2px;
  }
  .cloud-bg{
    background-image: none;
    background-color: #f7efe9 !important;
    padding-bottom: 5em;
  }
.register {
    width: 100% !important;
  }
  .codes{
      padding: 0 0.5em 2em;
  }
.texts {
    top: 25px;
  }
}
@media (max-width: 500px) {
  .contentBox{

  }
  .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;
  }
.container h6{
        font-size: 22px;
        margin: 13px auto 0;
    } 
.titles{
  padding: 40px 10px 15px;
 }
 .topBtn a {
    width: 40px;
    height: 40px;
    padding: 0;
  }

}
@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: 0px 10px;
  }
}