@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
.animates_set{transition: all .15s ease-out;}
.animates_set750{transition: all .75s ease-out;}
.animates_set1000{transition: all 1s ease-out;}
.animates_set1250{transition: all 1.25s ease-out;}
.animates_set1500{transition: all 1.5s ease-out;}
.animates_set1750{transition: all 1.75s ease-out;}
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  color: #222222;
}
h1,h2,h3,h4,h5,h6{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}
h2{
  font-size: 44px;
  line-height: 1;
  margin-bottom: 52px;
  text-align: center;
  letter-spacing: 0.15em;
}
h3{
  font-size: 23px;
  line-height: 58px;
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 0;
}
p{
  font-size: 15px;
  line-height: 1.9;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}
a{text-decoration: none; cursor: pointer;}
a:hover{text-decoration: none;}
.sec{
  max-width: 1176px;
  margin: 0 auto;
}
img{
  width: 100%;
}
._small{
  display: none;
}
._big{
  display: inline-block;
}

.modal-header{border: 0;}
.modal-body{padding:0;}
.modal-footer{border: 0;}
.modal-content{border: 0;}
.modal-header .close:focus{outline:0;}

/* hotel_Modal */
#hotel_Modal .pop_nav{
  list-style: none;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  /* margin-bottom: 0; */
  gap:20px;
  margin-bottom: 0;
}
#hotel_Modal .pop_nav a{
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.08em;
  line-height: 1;
}
#hotel_Modal .pop_nav a.on,
#hotel_Modal .pop_nav a.on:hover{
  color: #ff5611;
  cursor: default;
}
#hotel_Modal .pop_nav a:hover{
  color: #555;
}
#hotel_Modal .close{
  font-size: 0;
  padding: 0.57rem;
}
#hotel_Modal .close span{
  display: block;
  width: 1.8rem;
}
#hotel_Modal .slick-slide img{
  border-radius: 0 0 .3rem .3rem;
}

/* #hotel_Modal .modal-header{
  position: sticky;
  top: 0;
  background-color: inherit;
  z-index: 10000;
} */

.slick-prev, .slick-next{
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 34px;
  height: 66px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 1;
}
.slick-next {
  right: -34px;
  background: url("../images/icon_arrow_to_right.svg") no-repeat center center !important;
  background-size: 100% 100% !important;
  opacity: .5;
}
.slick-prev {
  left: -34px;
  background: url("../images/icon_arrow_to_left.svg") no-repeat center center !important;
  background-size: 100% 100% !important;
  opacity: .5;
}
.slick-prev:before, .slick-next:before{
  display: none;
}
.slick-prev:hover, .slick-next:hover {
  opacity: 1;
}


/* video_Modal */
#video_Modal .modal-content{
  background-color: unset;
}
#video_Modal .modal-header .close{
  padding: 0;
  width: 40px;
}
#video_Modal .modal-header .close span{
  display: block;
  padding: 10px;
}
#video_Modal .videoContent{
  position: relative;
  overflow: hidden;
  border-radius: .3rem;
}
#video_Modal .videoContent #youtube-player{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}





/* _header ============================================================ */
._header{
  width: 100%;
  height: 880px;
  background: #fff url("../images/cover_pc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
._header>.header_sub{
  width: 100%;
  height: 174px;
  background-color: #ff78a0;
  position: absolute;
  left: 0;
  bottom: 0;
}
._header>.header_sub>.sec{
  height: 100%;
  padding: 0 20px;
}
._header>.header_sub h1{
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  gap:36px;
}
._header>.header_sub .main_title{
  font-size: 67px;
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1;
  position: relative;
  top: -5px;
}
._header>.header_sub .main_sub{
  font-family: "Noto Sans TC", sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1.7;
}
/* _nav ============================================================ */
._nav_bg{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
  display: none;
}
._nav{
  width: 100%;
  height: 84px;
  background-color: rgba(255, 255, 255, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
._nav>.sec{
  height: 100%;
  padding: 0 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
._nav ._logo{
  width: 204px;
  height: 84px;
  line-height: 78px;
}
._nav ._menu_block ._menu{
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0;
  list-style: none;
  padding: 0;
}
._nav ._menu_block ._burger{
  display: none;
}
._nav ._menu_block ._menu>li>a{
  height: 84px;
  display: block;
  font-size: 15px;
  color: #000;
  letter-spacing: 0.2em;
  line-height: 84px;
}
._nav ._menu_block ._menu>li>a:hover{
  color: #ff5611;
}
._nav ._menu_block ._menu>li>a>span{
  padding: 0 28px;
  border-right: 1px solid #000;
  display: inline-block;
  line-height: 1;
}
._nav ._menu_block ._menu>li:last-child>a>span{
  padding-right: 0;
  border-right: 0;
}
._nav ._menu_block ._menu>li:first-child>a>span{
  padding-left: 0;
}


/* sec1 ============================================================ */
.sec1{
  background: #fff url("../images/sec2_bg_top_pc.png");
  background-repeat: repeat-x;
  background-position: center bottom;
}
.sec1 .sec{
  padding: 100px 20px 168px;
}
.sec1 .sec h2{
  margin-bottom: 46px;
}
.sec1 .sec p{
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.11em;
  line-height: 2;
  margin-bottom: 0;
}

/* sec2 ============================================================ */
.sec2{
  background-color: #ffdb32;
}
.sec2 .sec{
  padding: 100px 20px;
}
.sec2 .con{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items:stretch;
  gap: 60px;
}
.sec2 .con .blo{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0;
  gap:28px;
}
.sec2 .con .blo h3{
  padding: 0 28px;
  border-radius: 1000px;
  color: #fff;
}
.sec2 .con .blo.blo1 h3{
  background-color: #ff78a0;
}
.sec2 .con .blo.blo2 h3{
  background-color: #4bab4b;
}
.sec2 .con .blo p{
  text-align: justify;
  flex-grow: 1;
}
.sec2 .con .blo .pics{
  display: block;
  position: relative;
}
.sec2 .con .blo .pics img{
  border-radius: 10px;
}
.sec2 .con .blo .pics .playIcon{
  width: 106px;
  height: 106px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin : 50% 50%;
}
.sec2 .con .blo .pics:hover .playIcon{
  width: 112px;
  height: 112px;
}
.sec2 .con .blo a.pics:hover>img{
  filter: brightness(115%);
}
.sec2 .con .blo .pics .playIcon img{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}
.sec2 .con .blo .pics .note{
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(0,calc(100% + 10px));
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  width: 100%;
  margin-bottom: 0;
}

/* sec3 ============================================================ */
.sec3{
  background-color: #fff;
  background: url("../images/sec2_bg_bottom_pc.png") center top repeat-x, url("../images/sec3_bg_dot_pc.png") center center repeat;
}
.sec3 .sec{
  padding: 168px 20px 100px;
}
.sec3 .con{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items:stretch;
  gap: 22px;
}
.sec3 .con .blo{
  background-color: #fff;
  border: 1px solid #7f7f7f;
  border-radius: 10px;
  padding: 18px;
  flex-grow: 1;
  flex-basis: 0;
}
.sec3 .con .blo .con-inner{
  position: relative;
  margin-bottom: 44px;
}
.sec3 .con .blo .con-inner h3{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  padding: 0 28px;
  border-radius: 1000px;
  color: #000;
  white-space: nowrap;
  background-color: #ffdb32;
}
.sec3 .con .blo p{
  margin-bottom: 26px;
}

/* sec4 ============================================================ */
.sec4{
  background-color: #482583;
}
.sec4 .sec{
  padding: 100px 20px;
  background: rgb(72,37,131);
  background: linear-gradient(90deg, rgba(72,37,131,1) 0%, rgba(33,47,144,1) 50%, rgba(72,37,131,1) 100%);
}
.sec4 .sec h2{
  color: #fff;
}
.sec4 .con{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  gap:100px;
}
.sec4 .con .blo{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
.sec4 .con .blo.blo2{
  flex-flow: row-reverse nowrap;
}
.sec4 .con .blo>div{
  flex-grow: 1;
  flex-basis: 0;
}
.sec4 .con .blo .tab_1{
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  gap: 18px;
  
}
.sec4 .con .blo .tab_1 img{
  width: 214px;
}
.sec4 .con .blo .tab_1 h3{
  padding: 0 28px;
  border-radius: 1000px;
  color: #fff;
  white-space: nowrap;
}
.sec4 .con .blo.blo1 .tab_1 h3{
  background-color: #ed6e34;
}
.sec4 .con .blo.blo2 .tab_1 h3{
  background-color: #39a1db;
}
.sec4 .con .blo.blo3 .tab_1 h3{
  background-color: #a8c265;
}
.sec4 .con .blo .tab_1 .sub{
  width: 100%;
  border-bottom: 1px dotted #fff;
}
.sec4 .con .blo .tab_1 .sub h4{
  text-align: center;
  color: #fff;
  font-size: 28px;
  line-height: 1.8;
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}
.sec4 .con .blo .tab_1 p{
  text-align: center;
  color: #fff;
}
.sec4 .con .blo .tab_2{
  display: flex;
  flex-flow: row wrap;
  justify-content:flex-start;
  align-items: flex-start;
  cursor: pointer;
  gap: 18px;
}
.sec4 .con .blo .tab_2:hover div img{
  filter: brightness(115%);
  /* transform: scale(1.02); */
}
.sec4 .con .blo .tab_2 div{
  flex-basis:0;
}
.sec4 .con .blo .tab_2 div>img{
  border-radius: 10px;
}
.sec4 .con .blo .tab_2 div:nth-child(1){
  flex-basis:content;
}
.sec4 .con .blo .tab_2 div:nth-child(2),
.sec4 .con .blo .tab_2 div:nth-child(3),
.sec4 .con .blo .tab_2 div:nth-child(4){
  flex-grow: 1;
}

/* sec5 ============================================================ */
.sec5{
  background-color: #fff;
  background: url("../images/sec3_bg_dot_pc.png") center center repeat;
}
.sec5 .sec{
  padding: 100px 20px;
}
.sec5 .sec h2{
  text-align: center;
  position: relative;
}
.sec5 .sec h2 .line{
  display: block;
  height: 1px;
  width: 100%;
  background-color: #ff5611;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.sec5 .sec h2 .text{
  display: inline-block;
  padding: 2px;
  border: 3px solid #ff5611;
  background-color: #fff;
  position: relative;
}
.sec5 .sec h2 .text span{
  display: block;
  font-size: 30px;
  color: #fff;
  background-color: #ff5611;
  padding: 16px 38px;
  line-height: 1;
}

.sec5 .sec .con{
  width: 776px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #7f7f7f;
  border-radius: 10px;
  padding: 46px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}
.sec5 .sec .con>div{
  border: 1px solid #7f7f7f;
  border-radius: 10px;
  background-color: #fffcef;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 25px 30px;
  flex-basis: 0;
  flex-grow: 1;
  gap: 20px;
}
.sec5 .sec .con>div .icon{
  width: 65px;
}
.sec5 .sec .con>div .des{
  width: calc( 100% - 65px - 20px );
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ffa970;
}
.sec5 .sec .con>div .des>div{
  text-align: center;
  line-height: 46px;
  letter-spacing: 0.08em;
}
.sec5 .sec .con>div .des>div:first-child{
  font-family: "Noto Serif TC", serif;
  font-size: 23px;
  font-weight: 600;
  background-color: #ffcda8;
}
.sec5 .sec .con>div .des>div:last-child{
  font-size: 15px;
}
.sec5 .sec .con .buy_ticket{
  flex-basis: 100%;
  background-color: #ff5611;
  border-radius: 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 66px;
  
}
.sec5 .sec .con .buy_ticket:hover{
  opacity: 0.7;
}
.sec5 .sec .con .buy_ticket span{
  line-height: 1;
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.08em;
}
.sec5 .sec .con .buy_ticket span:last-child{
  margin-left: 5px;
  width: 18px;
}
.sec5 .sec .con .buy_ticket span:last-child img{
  transform: translateY(-0.06em);
}

/* _footer ============================================================ */
._footer{
  background-color: #fcfcfc;
  border-top: 1px solid #e7e7e7;
}
._footer .sec{
  padding: 32px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 300;
  line-height: 1.8;
  text-align: center;
}
._footer .sec a{
  color: #222222;
  text-decoration: underline;
}
._footer .sec a:hover{
  color: #ff5611;
  text-decoration: underline;
}

/*MOBILE (>=1024px) ============================================*/
/*MOBILE (>=1024px) ============================================*/
/*MOBILE (>=1024px) ============================================*/
@media (max-width: 1024px) {
  ._nav ._menu_block ._menu>li>a>span{
    padding: 0 12px;
  }

  ._header>.header_sub h1{
    gap: 30px;
  }

  .sec2 .con{
    gap: 30px;
  }

  .sec4 .con .blo{
    gap: 30px;
  }
}

/*MOBILE (>=1024px) ============================================*/
/*MOBILE (>=1024px) ============================================*/
/*MOBILE (>=1024px) ============================================*/
@media (max-width: 910px) {

  h2 {
    font-size: 38px;
    letter-spacing: 0.08em;
  }
  h3{
    font-size: 20px;
    line-height: 44px;
  }
  p{
    letter-spacing: 0.05em;
  }


  ._header{
    height: 740px;
    background-position: right center; 
  }
  ._header>.header_sub{
    height: 140px;
  }
  ._header>.header_sub h1 {
    gap: 20px;
  }
  ._header>.header_sub .main_title{
    font-size: 57px;
    letter-spacing: 0.08em;
  }
  ._header>.header_sub .main_sub{
    font-size: 19px;
    letter-spacing: 0.11em;
  }


  ._nav ._menu_block ._menu>li>a>span{
    padding: 0 10px;
  }
  ._nav ._menu_block ._menu>li>a{
    letter-spacing: 0.01em;
  }
  ._nav ._logo{
    width: 170px;
  }


  .sec1 .sec p{
    font-size: 19px;
    letter-spacing: 0.08em;
  }
  .sec2 .con .blo{
    gap: 20px;
  }
  .sec2 .con .blo .note{
    letter-spacing: 0em;
  }
  .sec2 .con .blo h3 {
    padding: 0 20px;
    border-radius: 1000px;
    color: #fff;
  }


  .sec3 .con{
    gap: 14px;
  }
  .sec3 .con .blo{
    padding: 14px;
  }
  .sec3 .con .blo .con-inner h3{
    padding: 0 20px;
  }
  .sec3 .con .blo .con-inner{
    margin-bottom: 36px;
  }
  .sec3 .con .blo p{
    margin-bottom: 18px;
  }


  .sec4 .con{
    gap: 60px;
  }
  .sec4 .con .blo .tab_1{
    gap: 14px;
    /* flex-basis: auto;
    width: 100%;
    flex-grow: unset; */
  }
  .sec4 .con .blo .tab_1 .sub h4{
    font-size: 18px;
  }
  .sec4 .con .blo .tab_1 img{
    width: 160px;
  }
  .sec4 .con .blo .tab_2{
    gap: 14px;
  }


  .sec5 .sec .con{
    width: 100%;
    padding: 25px;
    gap: 20px;
  }
  .sec5 .sec .con>div{
    padding: 20px;
    gap: 14px;
  }
}

/*MOBILE (>=767px) ============================================*/
/*MOBILE (>=767px) ============================================*/
/*MOBILE (>=767px) ============================================*/

@media (max-width: 767px) {
  ._small{
    display: inline-block;
  }
  ._big{
    display: none;
  }

  h2{
    font-size: 24px;
    margin-bottom: 30px;
  }
  h3 {
    font-size: 18px;
    line-height: 44px;
  }

  ._header{
    height: 667px;
    background: #fff url("../images/cover_mobile.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  ._header>.header_sub{
    height: 160px;
  }
  ._header>.header_sub>.sec{
    padding: 0 15px;
  }
  ._header>.header_sub h1{
    flex-flow: column nowrap;
    gap: 14px;
  }
  ._header>.header_sub .main_title{
    font-size: 33px;
  }
  ._header>.header_sub .main_sub{
    font-size: 15px;
    text-align: center;
  }

  ._nav_bg{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
  }
  ._nav{
    height: 48px;
    background-color: rgba(255, 255, 255, 0.7);
  }
  ._nav>.sec{
    padding: 0 0 0 10px;
  }
  ._nav ._logo {
    width: 158px;
    height: auto;
    line-height: 1;
  }
  ._nav ._menu_block ._menu {
    display: none;
    position: fixed;
    top: 48px;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    flex-flow: column nowrap;
    justify-content: center;
    align-items: stretch;
  }
  ._nav ._menu_block ._menu>li>a{
    height: 48px;
    text-align: center;
    line-height: 48px;
  }
  ._nav ._menu_block ._menu>li>a:hover{
    color: #000;
  }
  ._nav ._menu_block ._menu>li>a>span{
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid #000;
  }
  ._nav ._menu_block ._menu>li:first-child>a>span {
    border-top: 1px solid #000;
  }
  
  ._nav ._menu_block ._burger {
    display: block;
    width: 48px;
    height: 48px;
    padding: 10px;
  }

  .sec1{
    background: #fff url("../images/sec2_bg_top_mobile.png");
    background-size: auto 34px;
    background-repeat: repeat-x;
    background-position: center bottom;
  }
  .sec1 .sec{
    padding: 70px 15px 104px;
  }
  .sec1 .sec h2 {
    margin-bottom: 22px;
  }
  .sec1 .sec p{
    font-size: 15px;
  }
  
  .sec2 .sec{
    padding: 70px 15px;
  }
  .sec2 .con {
    flex-flow: column nowrap;
    gap: 60px;
  }
  .sec2 .con .blo .pics .note{
    font-size: 9px;
    letter-spacing: 0em;
  }

  .sec3{
    background: url("../images/sec2_bg_bottom_mobile.png") center top repeat-x, url("../images/sec3_bg_dot_mobile.png") center center repeat;
    background-size: auto 34px, 10px;
  }
  .sec3 .sec{
    padding: 104px 15px 70px;
  }
  .sec3 .con{
    flex-flow: column nowrap;
    align-items:flex-start;
    gap: 30px;
  }

  .sec4 .sec{
    padding: 70px 15px;
  }
  .sec4 .con .blo{
    flex-flow: column nowrap;
  }
  .sec4 .con .blo.blo2{
    flex-flow: column nowrap;
  }
  .sec4 .con .blo .tab_1{
    gap: 14px;
    flex-basis: auto;
    width: auto;
    flex-grow: unset;
  }
  .sec4 .con .blo .tab_2{
    gap: 10px;
  }

  .sec5 .sec{
    padding: 70px 15px;
  }
  .sec5 .sec h2 .text {
    padding: 2px;
    border: 2px solid #ff5611;
  }
  .sec5 .sec h2 .text span {
    font-size: 20px;
    padding: 12px 10px;
    line-height: 1;
  }
  .sec5 .sec .con{
    flex-flow: column nowrap;
    padding: 15px;
    gap: 15px;
    align-items:stretch;
  }
  .sec5 .sec .con>div{
    padding: 20px 15px;
    flex-flow: column nowrap;
    flex-basis: content;
  }
  .sec5 .sec .con>div .icon {
    width: 70px;
  }
  .sec5 .sec .con>div .des{
    width: 100%;
  }
  .sec5 .sec .con>div .des>div:first-child{
    font-size: 18px;
  }
  .sec5 .sec .con .buy_ticket {
    flex-basis:auto;
  }

  ._footer .sec{
    padding: 20px 15px;
    font-size: 9px;
  }

  #hotel_Modal .modal-content{
    overflow: hidden;
  }
  #hotel_Modal .pop_nav{
    gap: 10px;
  }
  #hotel_Modal .sin{
    margin-bottom: 1px;
  }
  #hotel_Modal .sin:last-child{
    margin-bottom: 0;
  }
  #hotel_Modal .modal-body{
    background-color: #000;
    max-height: calc(100vh - .5rem - .5rem - 48px);
    overflow-y: auto;
  }
}