@import url(swiper-bundle.css);
/*共用*/
@import url(common.css);
@import url(reset.css);

/*----------------------------------*\
  # mainHero 2024-0920                   
\*----------------------------------*/
.mainHero.swiper-container { 
  position: relative;
  width:100%;
  height: var(--full-h);
}
.mainHero .swiper-slide {
  width:100%;
  height: 100%; 
  background-size: cover; 
  background-position: center; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.mainHero .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 .5rem; 
}
.mainHero .swiper-pagination-bullet {
  background-color: transparent;
  border: 0.01em solid var(--weak);
  border-radius: 50%;
  width: .6em;
  height: .6em;
  opacity: 1;
}
.mainHero .swiper-pagination-bullet-active {
  background-color: var(--weak);
}

.sloganBox { 
  position: absolute;  
  width: 93%;
  height: 90%;
  z-index: 2;
  top: 7%;left: 5%;
  display: flex;
  justify-content: space-between;
}
.sloganBox .left h2.slogan {
  color: deeppink;
  font-size: var(--slogan);
  text-shadow: var(--tx-sd);

  white-space: nowrap;
}
.sloganBox .left h2.slogan span {
  display: block;
  font-weight: 900;
  padding-left: var(--gap-2);
}
.sloganBox .left h5 {
  color: var(--weak);
  font-family: var(--en);
}
.sloganBox .left h2.enSlogan {
  font-family: var(--cursive);
  font-size: 450%;
  line-height: 1.5;
  color: var(--weak);
  font-weight: normal;
  padding-right:var(--gap-2);
}
.sloganBox .right h2.date {
  color: deeppink;
  text-shadow: var(--tx-sd);
  font-size: 261%;
  font-family: var(--num);
}
.sloganBox .right h2.dateGuide {
  color: var(--weak);
  font-size: 180%;
}
.sloganBox .right span {
  white-space: nowrap;
}
.sloganBox .left { 
  max-width: 45%;
  transform: translate(15%, 0%) rotate(-9deg) scale(1);
  animation: reveal-right 1.8s both;
  animation-delay: 0.3s;
}
.sloganBox .right { 
  padding-bottom: 3%;
  max-width: 30%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  animation: reveal-left 1.8s both;
  animation-delay: 1.2s;
}
@media (max-width: 1199px){ 
  .mainHero {
    overflow: hidden;
  }
  .mainHero .swiper-pagination-bullet {   
    border: 1px solid var(--weak);  
    width: 5px;
    height: 5px;    
  }
  .sloganBox {     
    width: 100%;
    height: 93%;   
    top: 7%;
    left: -5.4%; 
    flex-direction: column;   
  }
  .sloganBox .left { 
    max-width: 100%;    
  }
  .sloganBox .right { 
    max-width: 100%;
    padding-left:18%; 
    padding-bottom: 9%;   
  }
  .sloganBox .left h2.enSlogan {    
    font-size: 360%;   
  }
}


/*----------------------------------*\ 
  # hero         
\*----------------------------------*/
.hero {  
  width: 100%;  
  height: var(--full-h);
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;  
  display: flex;
  align-items: flex-start;
  justify-content: space-between; 
  padding: var(--gap-4) var(--gap-1) var(--gap-2);
  animation: fadeIn 2.4s both;
}

.hero .left h2.slogan {
  color: deeppink;
  font-size: var(--slogan);
  text-shadow: var(--tx-sd);
}
.hero .left h2.slogan span {
  display: block;
  font-weight: 900;
  padding-left: var(--gap-2);
}
.hero .left h5 {
  color: var(--weak);
  font-family: var(--en);
}
.hero .left h2.enSlogan {
  font-family: var(--cursive);
  font-size: 450%;
  line-height: 1.5;
  color: var(--weak);
  font-weight: normal;
  padding-right:var(--gap-2);
}
.hero .right h2.date {
  color: deeppink;
  text-shadow: var(--tx-sd);
  font-size: 261%;
  font-family: var(--num);
}
.hero .right h2.dateGuide {
  color: var(--weak);
  font-size: 180%;
}
.hero .right span {
  white-space: nowrap;
}
.hero .left { 
  max-width: 45%;
  transform: translate(15%, 0%) rotate(-9deg) scale(1);
  animation: reveal-right 1.8s both;
  animation-delay: 0.3s;
}
.hero .right {
  padding-bottom: 3%;
	max-width: 30%;
	height: 100%;
	display: flex;
	align-items: flex-end;
  animation: reveal-left 1.8s both;
  animation-delay: 1.2s;
}
@media (max-width: 1199px) {
  .hero .left {
    max-width: 66%;
    transform: translate(3%, 0%) rotate(-9deg) scale(1);
  }
  .hero .right {
    max-width: 45%;    
  }  
}
@media (max-width: 541px) {
  .hero {
    flex-direction: column;
    justify-content: center;    
  }  
  .hero .left {
    max-width: 100%;
    width: 100%;
  }
  .hero .right {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .hero .left h2.enSlogan {
    font-size: 360%;
  } 
  .hero .right h2.dateGuide {    
    font-size: 120%;
  }
}

/*----------------------------------*\ 
  # summary        
\*----------------------------------*/
.summary {
  position: relative;
  width: 100%;
  background: var(--main);
  color: var(--weak);  
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--gap-2) var(--gap-1);
} 
.summary figure video {
  position:absolute;  
  top:0;  
  left:0;
  display:block;
  width:100%;
  height:100%; 
  object-fit:cover;
  object-position:50% 50%;  
}
.summary .ex {
  position: absolute;
  left: 15%;
  bottom: 5%;
  width: 18rem;
  max-width: 81%;  
}
.summary .item {
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
  padding: var(--gap-2); 
  padding: 0 var(--gap-2); 
}
.summary figure { 
  width:100%;  
  padding-bottom:75%;   
  border: 0px solid var(--border);
  background: no-repeat center center/100% auto;  
}
.summary figure.img_1,
.summary figure.img_2 { 
  width:72%;  
  padding-bottom:54%;    
}
.summary figure.img_3 { 
  width:63%;  
  padding-bottom:42.25%;    
}
.summary figure.img_4 { 
  width:45%;  
  padding-bottom:33.75%;    
}
.summary .item .img_1 {
  transform: translate(14%, 4.5%) rotate(-12deg) scale(1);
}
.summary .item.show .img_1 {
  animation: reveal-up 1.8s both;
  animation-delay: 0.3s;
}
.summary .item .img_2 {
  transform: translate(0%, 0%) rotate(6deg) scale(1);
}
.summary .item.show .img_2 {
  animation: reveal-down 1.8s both;
  animation-delay: 0.3s;
}
.summary .item .img_3 {
  transform: translate(3%, -3%) rotate(-6deg) scale(1);
}
.summary .item.show .img_3 {
  animation: reveal-down 1.8s both;
  animation-delay: 1.2s;
}
.summary .item .img_4 {
  transform: translate(18%, -18%) rotate(9deg) scale(1);      
}
.summary .item.show .img_4 {
  animation: reveal-up 1.8s both;
  animation-delay: 1.8s;
}
.summary h2 { 
  font-size: var(--topic);
  margin-bottom: var(--gap);
}
.summary .enTitle {
  margin-bottom: var(--gap);
  font-family: var(--en);
}
@media (max-width: 1199px) {
  .summary .ex {    
    left: 3%;
    bottom: -6%;
    max-width: 30%;
    z-index: 2;  
  }
  .summary .item.script {    
    padding: 0; 
  }
}
@media (max-width: 800px) {
  .summary { 
    flex-direction: column;
    justify-content: center;
    padding: var(--gap-2);
  }
  .summary .ex {    
    left: 3%;
    bottom: -6%;
    max-width: 81%;
    z-index: 2;  
  }
  .summary .item {
    width: 100%;       
  }  
  .summary .item.script { 
    margin: var(--gap-5) 0 var(--gap-3);    
  }    
  .summary .item .img_1 {
    transform: translate(6%, 0%) rotate(-12deg) scale(1);
  }
  .summary .item .img_2 {
    transform: translate(6%, 0%) rotate(6deg) scale(1);
  }
  .summary .item .img_3 {
    transform: translate(6%, -3%) rotate(-6deg) scale(1);
  }
  .summary .item .img_4 {
    transform: translate(21%, -18%) rotate(9deg) scale(1);      
  }
  .summary figure.img_1,
  .summary figure.img_2 {
    width:90%;  
    padding-bottom:67.5%;
  }
  .summary figure.img_3 {
    width:78%;  
    padding-bottom:58.5%;
  }
  .summary figure.img_4 {
    width:66%;  
    padding-bottom:49.5%;
  }
}

/*----------------------------------*\ 
  # details        
\*----------------------------------*/
.details {  
  width: 100%; 
  background: var(--mate); 
  /*若未指定背景色,則顯示該漸層色 */
}
.details .inner {
  width: 100%; 
  color: var(--font); 
  display: flex;
  flex-direction: column;
  padding: var(--gap-2) var(--gap-4);
}
.details .story { 
  display: flex;
  padding:0 var(--gap-2) var(--gap-3);
}
.details .story h2 {
  width: 30%;
  line-height: 1.32;  
  white-space:nowrap;
  margin-bottom: var(--gap);
}
.details .story h2 span{
  display: block;
  font-size: 57%;
  font-family: var(--en);
}
.details .story p {
  padding-left: var(--gap-2);
}
.details .items { 
  display: flex;  
}
.details .items .item { 
  width: calc(100% / 2); 
  display: flex;
  align-items: center; 
  justify-content: center;  
}
.details .items .item  img { 
  width: 72%;  
}
.details .item.show .img_1 {
  animation: reveal-down 1.5s both;
  animation-delay: 0.3s;
}
.details .item.show .img_2 {
  animation: reveal-down 1.8s both;
  animation-delay: 0.6s;
}
@media (max-width: 1199px) {   
  .details .inner {    
    padding: var(--gap-2);
  } 
  .details .story {   
    padding:0 0 var(--gap-3);
  } 
}
@media (max-width: 800px) { 
  .details .story {   
    flex-direction: column;
  } 
  .details .story p {
    padding-left: 0;
  }
  .details .items { 
    flex-direction: column;
  }
  .details .items .item { 
    width: 100%; 
  }
  .details .items .item img { 
    width: 100%;  
  }
  .details .items .item:nth-child(2) img { 
    margin-top: 2rem;  
  }
}
/*----------------------------------*\ 
  # belt        
\*----------------------------------*/
.belt {
  width: 100%;   
  height: calc(var(--vh, 1vh) * 36); 
  background: var(--match); 
  background-size: cover; 
  background-position: center; 
}
.belt.show {
  animation: fadeIn 2.4s both;
  animation-delay: 0.3s;
}
@media (max-width: 1199px){
  .belt {    
    height: 24vw;    
  }
}
/*----------------------------------*\ 
  # glite_slide         
\*----------------------------------*/
.glite_wrap {
  width: 100%;
  padding: var(--gap-3); 
  background: var(--match);
  display: flex;
  justify-content: center;
}
.glite { 
  position: relative;
  width: 100%;  
  height: calc(45vw / (1600 / 1000)); 
  display: flex; 
  background-size: cover; 
  background-position: center;  
  background: #66F;
}
.glite .cover { 
  position: absolute;
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;  
  background: var(--main); 
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--gap-2) var(--gap-3) var(--gap-2) 56.7%;
  color: var(--weak);
}
.glite h2 { 
  font-size: var(--topic);
  margin-bottom: var(--gap);
}
.glite p { 
  font-size: var(--big); 
}
.glite .hero-imgBox {
  overflow: hidden;
  position: absolute;
  top: 0;left: 0;
  z-index: 3;
  width: 51%; 
  height: calc(45vw / (1600 / 1000)); 
  clip-path: polygon(0% 0%, 74% 0%, 99% 50%, 74% 100%, 0% 100%);  
}
.glite .hero-imgBox .swiper-slide {
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center; 
}
.glite .edge {
  z-index: 2;
  position: absolute;
  top: 0;left: 0;
  width: calc(51% + 1rem);
  height: 100%; 
  background: rosybrown;  
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); 
}

@media (max-width: 1199px){
  .glite_wrap {    
    padding: var(--gap-2);     
  }
  .glite {
    height: calc(var(--full-h) - 50px);  
  }
  .glite .cover {   
    align-items: center;
    justify-content:center;
    height: 40%;
    height: calc(40% + 90px); 
    top: auto;bottom: 0;
    padding:102px 6% 6%;   
  }  
  .glite .hero-imgBox {   
    width: 100%;
    height: 66%;     
    clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);     
  }
  .glite .edge {    
    width: 100%;
    height: 72%;
    background: rosybrown;  
    clip-path: polygon(0% 0%, 100% 0, 100% 76%, 50% 94%, 0 76%);  
  }
}
@media (max-width: 415px){
  .glite .hero-imgBox {
    height: 60%;
  }
  .glite .edge {
    height: 66%;
  }
  .glite .txEdit {
    transform: scale(.9); 
  }
  .glite .cover {
    padding:102px 3.6% 3.6%;   
  }  
}
@media (max-width: 321px){  
  .glite h2 { 
    font-size: var(--title);
  }
  .glite p { 
    font-size: var(--p); 
  }  
}
/*----------------------------------*\ 
  # contact        
\*----------------------------------*/
.contact {  
  width: 100%; 
  height: calc(var(--vh, 1vh) * 66);
  background: var(--main);
  color: var(--weak);  
  display: flex;  
  align-items: center;
  justify-content: center;
  padding: 0 0 var(--gap-3);
  padding: var(--gap-3);
}
.contact .item {
  width: calc(100% / 3);  
  display: flex;
  align-items: center;
  justify-content: center;  
}
.contact .item h2 {
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--border);
}
.contact .item .txEdit{ 
  padding-top: var(--gap);
}
.contact a {
  display: flex;
  align-items: center;
  font-size: .7rem;
}
.contact a,
.contact a:visited {  
  color:inherit; 
}
.contact a:hover {  
  color:var(--mate);  
}
.contact .item .map {
  width: 2.4rem;
}
.contact .item img.welcome {
  width: 78%;
}
.contact .item.show .img_1 {
  animation: reveal-right 1.8s both;
  animation-delay: 0.39s;
}
.contact .item.show article {
  animation: reveal-right 1.8s both;
  animation-delay: 0.42s;
}
.contact .item.show .welcome {
  animation: reveal-right 1.8s both;
  animation-delay: 0.66s;
}

@media (max-width: 1199px) { 
  .contact {
    height: auto;
    flex-direction: column;   
    padding: var(--gap-2);
  }
  .contact .item {
    width: 100%; 
    margin-bottom: var(--gap-2);     
  }
  .contact .item:nth-of-type(1) { 
    padding: var(--gap);  
  } 
  .contact .item img.welcome {  
    width: 100%;
    transform: translate(0%, 15%) scale(0.66); 
  }
  .contact .item article {
    margin-top: var(--gap-9);
    transform: scale(2); 
  }  
}
@media (max-width: 600px) {
  .contact .item article {
    margin-top: var(--gap-3);
    transform: scale(1.3); 
  }   
}
/*----------------------------------*\ 
  # footer         
\*----------------------------------*/
footer {
  width: 100%;
  background: var(--main);
  height: 2.4rem;
  line-height: 2.4rem;
  padding: 0 var(--gap-2);
  color: var(--weak);
  display: flex;
  justify-content: space-between;
}
footer a {
  font-size: var(--tiny);
}
footer a,footer a:visited {  
  color:var(--gray); 
  opacity: .6;
}
footer a:hover {  
  color:var(--match); 
}

@media (max-width: 321px) {
  footer {  
    padding: 0 var(--gap-1);  
  }
}