@charset "utf-8";
.loading{ position:fixed; width:100%; min-width:100vw; height:100%; min-height:100vh; top:0; left:0; background:#FFF; z-index:100; display:flex; justify-content:center; align-items:center; }
.loading img{ width:80px; margin:16px auto; animation:loadingAni 2s infinite alternate; }
@keyframes loadingAni{from{ transform:scale(.9); } to{ transform:scale(1); } }
picture,img{ display:block; }
picture img{ width:100%; height:auto;}
.slick-dots{ display:flex; flex-wrap:wrap; gap:16px; width:100%; margin:0 auto; justify-content:center; background:transparent; padding:16px; }
.slick-dots button{ font-size:0; line-height:0; width:16px; height:16px; display:block; background:#BF2845; opacity:.4; border-radius:16px; cursor:pointer; transition:width .6s ease; }
.slick-dots .slick-active button{ opacity:1; width:32px; }
.slick-slide img ,.images_block img{ width:100%; height:auto; }

.slick-slider button.slick-arrow { font-size:0; line-height:0; background:transparent; }
.slick-arrow{ position:absolute; z-index:2; bottom:-10px; left:50%; border-radius:50%; width:30px; height:30px; border:solid 1px #BF2845; cursor:pointer; opacity:.7; }
.slick-prev{  transform:translate(-200px,-50%); }
.slick-next{  transform:translate(180px,-50%); }
.slick-arrow:before{ content:''; display:inline-block; width:30%; height:30%; border:solid 2px #BF2545; }
.slick-prev:before{ transform:translateX(10%) rotate(45deg); border-right:none; border-top:none; }
.slick-next:before{ transform:translateX(-15%) rotate(45deg); border-left:none; border-bottom:none; }

.wrap{ color:#333; overflow:clip;}
.wrap .logo_w{position:relative; background:#C6F0D3;}
.wrap .logo_w img{ width:48px; height:auto; margin:0 16px 0 auto;}

.anniversary{ width:100%; overflow:clip;}
.anniversary picture, .anniversary img{ width:100%; height:auto; }
.anniversary .btn{ font-size:clamp(1.2rem, 4.2vw, 1.6rem); font-weight:bold; padding:.5em 1.4em; line-height:1.1em; border-radius:2em; color:#fff; margin-top:24px; position:relative; overflow:hidden; cursor:pointer;}
.anniversary .btn:after{ content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; box-shadow:inset 0 0 0 transparent; transition:all .6s ease; pointer-events:none;} 
.anniversary .btn:hover:after{ box-shadow:inset 0 0 50px #ffffff80; } 


.anniversary .kv_box{ background-color:#FFFFD9; background-repeat:no-repeat; background-image:url(../images/kv_vibe_mobile.svg),url(../images/kv_vibe_bottom.svg); background-position:center bottom; background-size:100%,120%; position:relative; display:flex; flex-direction:column; padding-top:48px; gap:36px; align-items:center;} 
.anniversary .kv_box .logo{ width:auto; height:clamp(150px, 38vmin, 200px);  }
.anniversary .kv_box .kv_img,.anniversary .kv_box .ani_kv{ height:auto; }


.anniversary .events_box{ background:#c7f0d3; } 	
.anniversary .events_box section{ display:flex; flex-direction:column; gap:120px; padding:80px 16px; background-repeat:repeat ,no-repeat; background-position:top ,bottom; background-size:100%,120%; }
.anniversary .events_box section.bg_lightGreen{ background-color:#D4E9E2; background-image:url(../images/bg_events_mobile.svg), url(../images/bg_yellow_bottom.svg); padding-top:20vw;}
.anniversary .events_box section.bg_yellow{ background-color:#fff9ac; background-image:url(../images/bg_events_mobile.svg), url(../images/bg_seafoam_bottom.svg);}
.anniversary .events_box section.bg_seafoam{ background-color:#C6F0D3; background-image:url(../images/bg_events_mobile.svg); }
.anniversary .events_box figure{ display:flex; flex-direction:column-reverse; align-items:center; } 
.anniversary .events_box figure figcaption{ position:relative; width:100%; border:solid 8px #FFDD5C; background:#fff; border-radius:24px; padding:0 16px 96px; color:#00754A; display:flex; flex-direction:column; align-items:center;}
.anniversary .events_box figure figcaption .title{ font-weight:bold; font-size:clamp(3.6rem, 9.2vw, 4.2rem); line-height:1.3; letter-spacing:.1em; padding-left:.1em; margin:1em 0 .8em;}
.anniversary .events_box figure figcaption .title hr{ border:solid 2px #00754A; border-radius:8px; position:relative; margin:8px auto; overflow:visible;} 
.anniversary .events_box figure figcaption .title hr:before,.anniversary .events_box figure figcaption .title hr:after{ position:absolute; content:''; border-radius:4px; background:#01754a; width:4px; height:4px; top:0;}
.anniversary .events_box figure figcaption .title hr:before{ left:0; transform:translate(-250%, -50%);  }
.anniversary .events_box figure figcaption .title hr:after{ right:0; transform:translate(250%, -50%);  }
.anniversary .events_box figure figcaption .date{ font-size:clamp(2rem, 5.1vw, 2.4rem); margin-top:2px; font-weight:bold; font-family:SoDoSans; display:inline-block; padding:.12em 0; line-height:1; } 
.anniversary .events_box figure figcaption .date sub{ font-size:.6em; vertical-align:baseline; margin:0 4px; font-family:'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Apple LiGothic Medium', sans-serif; }
.anniversary .events_box figure figcaption .star_tag{ color:#1E3932; font-weight:bold; font-size:clamp(2.4rem, 6.1vw, 3rem); background:linear-gradient(to bottom, transparent 70%, #C0E8A6 71%); letter-spacing:.2em; padding-left:.2em; margin-bottom:24px; }
.anniversary .events_box figure figcaption .star_tag.gold{ color:#EC653B; font-weight:bold; font-size:clamp(2.4rem, 6.1vw, 3rem); background:linear-gradient(to bottom, transparent 70%, #C0E8A6 71%); letter-spacing:.2em; padding-left:.2em; margin-bottom:24px; }
.anniversary .events_box figure figcaption b{ font-weight:bold; }
.anniversary .events_box figure figcaption p{ font-size:clamp(1.6rem, 4.6vw, 1.8rem);}
.anniversary .events_box figure figcaption h6{ font-size:clamp(1.4rem, 3.5vw, 1.6rem); line-height:1.7;}
.anniversary .events_box figure figcaption .btn{ background:#0d19c3; }
/*.anniversary .events_box figure figcaption .type_tag{ background:#FFDD5C; color:#0D19C3; border-radius:0 0 1em 1em; padding:0 .8em .4em; font:bold clamp(2rem, 5.1vw, 2.4rem)/1 'SoDoSans'; }*/
/*.anniversary .events_box figure:nth-of-type(even) figcaption .type_tag{ color:#EC653B; }*/
.anniversary .events_box section figure:nth-of-type(1){ margin-top:80px; }
.anniversary .events_box figure:nth-of-type(even) figcaption .btn{ background:#EC653B; }
.anniversary .events_box figure.event12 figcaption p{ font-size:clamp(1.6rem, 4.1vw, 1.8rem);}
.anniversary .events_box figure figcaption .arc{ position:absolute; top:0; left:50%; transform:translate(-50%, -85%); width:86vw; }
.anniversary .events_box figure .images_block{ position:relative; z-index:2;  }
.anniversary .events_box figure .images_block img{ width:55vw; height:auto; transform:translateY(-80px);}
.anniversary .events_box figure.post .images_block{ margin-left:30vw; }
.anniversary .events_box figure.post figcaption .post_block{ width:35%; height:auto; position:absolute; left:0; bottom:0; transform:translate(-16px, 56%);} 


.anniversary .menu10th{ width:46px; position:fixed; bottom:16px; left:-50px; left:0; z-index:90; }
.anniversary .menu10th ul{ /*transform:translate(-81%,-50%);*/ display:flex; flex-direction:column; gap:8px; }
.anniversary .menu10th li{ position:relative; background:#0D19C3;  border-radius:0 1.5em 1.5em 0; overflow:hidden; cursor:pointer;}
.anniversary .menu10th li:after{ content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; box-shadow:inset 0 0 0 transparent; transition:all .6s ease; pointer-events:none;} 
.anniversary .menu10th li:hover:after{ box-shadow:inset 0 0 50px #ffffff80; } 
.anniversary .menu10th li:nth-of-type(even){ background:#EC653B; }
.anniversary .menu10th li a{ font-size:1.4rem; padding:.6em .6em .6em 1em; display:flex; justify-content:space-between; font-family:SoDoSans; color:#fff; }



/* 直式 */
@media (orientation:portrait){ 
.anniversary .kv_box .kv_img,.anniversary .kv_box .ani_kv{ width:96vw;  }

}

/* 橫式 */
@media (orientation:landscape){ 
.anniversary .kv_box .kv_img,.anniversary .kv_box .ani_kv{ width:59vw; min-width:814px; }
.anniversary .kv_box{ background-size:100%;}
.anniversary .kv_box{ background-image:url(../images/kv_vibe.svg),url(../images/kv_vibe_bottom.svg); background-size:100%,100%; } 


.anniversary .events_box section.bg_lightGreen{ background-image:url(../images/bg_events.svg), url(../images/bg_yellow_bottom.svg); background-size:100%,100%;}
.anniversary .events_box section.bg_yellow{ background-image:url(../images/bg_events.svg), url(../images/bg_seafoam_bottom.svg); background-size:100%,100%;}
.anniversary .events_box section.bg_seafoam{ background-image:url(../images/bg_events.svg); background-size:100%;}





}
@media (min-width: 819.98px) {
.anniversary .events_box section{ gap:200px; }
.anniversary .events_box figure{ align-items:center; flex-direction:row; justify-content:center; }
.anniversary .events_box figure:nth-of-type(even){ flex-direction:row-reverse; }
.anniversary .events_box section.bg_seafoam figure:nth-of-type(odd){ flex-direction:row-reverse; }
.anniversary .events_box figure figcaption{ width:65%; padding: 0 48px 48px; }
.anniversary .events_box figure figcaption .arc{ width:50vw; }
.anniversary .events_box figure .images_block,
.anniversary .events_box figure.post .images_block{ margin:0 -24px; }
.anniversary .events_box figure .images_block img{ width:35vw; height:auto; transform:unset; }

.wrap .logo_w img{ width:90px; }


}

@media (min-width: 991.98px) { 
.anniversary .events_box figure{ }
.anniversary .events_box figure figcaption .arc{ max-width:460px; }
.anniversary .events_box figure figcaption p br{ display:none; }

} 

@media (min-width: 1199.98px) {
.anniversary .events_box section{ gap:260px; }
.anniversary .events_box figure figcaption{ padding:0 64px 48px; }
.anniversary .events_box figure figcaption{ width:auto; min-width:560px;}
.anniversary .events_box figure figcaption .title br{ display:none; }
.anniversary .events_box figure figcaption .arc{ max-width:498px; }
.anniversary .events_box figure .images_block{ margin:0 -48px; }
.anniversary .events_box figure .images_block img{ width:350px; height:410px; object-fit:fill; }

.anniversary .events_box figure.post figcaption .post_block{ transform:translate(-60%, 12%); }



 }

@media (min-width:1399.98px) { 
.anniversary .events_box section.bg_lightGreen{ padding-top:10vw;}
.anniversary .events_box section{ gap:300px; }

}