/* @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+TC:wght@400;900&display=swap'); */

/* reset start */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:link, :visited , ins {text-decoration: none;}
/* reset end */












:root{
  --c00: #000;
  --c01: #fff;
  --c02: linear-gradient(45deg, #f8b0e8, #c78af3);
  --fontSansSerif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}











*,*::before,*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
  background: var(--c02);
  background-attachment: fixed;
}
html, body{
  width: 100%;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  font-family: 'Noto Sans TC', sans-serif;
}
body{
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
img{
  display: block;
  width: 100%;
  height: auto;
  /* max-height: 100%; */
}







footer,
.wrap{
  width: 516px;
  height: 100%;
  margin: 0 auto;
}
footer{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 16px;
  position: fixed;
  left: calc(50% - 258px);    
  bottom: 0;
  z-index: 1;
}
.btn_line,
.btn_368{
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.btn_line .hover,
.btn_368 .hover{
  opacity: 0;
  position: absolute;
  transition: opacity ease-out 0.2s;
}
.btn_line:hover .hover,
.btn_368:hover .hover{
  opacity: 1;
}
footer img{
  height: 100%;
}
.block_three,
.block_two,
.block_one{
  width: 100%;
  height: 100%;
  min-height: 82vh;
  position: relative; 
}
.block_three .center,
.block_one .center,
.block_three .bg,
.block_two .bg,
.block_one .bg{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0; 
}
.block_three .center,
.block_two .block2,
.block_one .center{
  position: absolute;
  z-index: 1;
}
.block_one .center{
  animation: scale 2s linear infinite;
}
@keyframes scale {
    0%,100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
.block_two .block2{
  display: flex;
  justify-self: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 140px;
}
.block_two .img4,
.block_two .img3,
.block_two .img2,
.block_two .img1{
  width: 85%;
  height: auto;
}











/* 核心：淡入淡出動畫（預設隱形、微位移） */
.fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.fade.show {
  opacity: 1;
  transform: translateY(0);
}
/* 無障礙：使用者偏好減少動畫 → 直接顯示且不做過渡 */
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (min-width: 1400px) {
  /* 超大螢幕樣式 */
}
@media (min-width: 1200px) and (max-width: 1399px) {
  /* 桌機樣式 */
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* 平板橫向、筆電樣式 */
}
@media (min-width: 600px) and (max-width: 1023px) {
  /* 平板直立樣式 */
  footer,.wrap,
  .block_three, .block_two, .block_one{
    width: 80vw;
    height: 100vh;
    margin: 0 auto;
  }
  footer,.wrap{
    left: calc(50% - 40vw);
  }
}
@media (max-width: 767px) {
  /* 手機樣式 */
  .wrap,
  footer,
  .block_three .center, 
  .block_two .block2, 
  .block_one .center{
    width: 100%;
  }
  footer{
    left: auto;
  }
  .block_two .block2{
    padding-top: 136px;
  }
  .btn_line, 
  .btn_368{
    width: 50%;
    height: 100px;
  }
}
@media screen and (max-width: 1399px) and (orientation: landscape) {
  footer,.wrap,
  .block_three, .block_two, .block_one{
    width: 60vw;
    height: 100vw;
    margin: 0 auto;
  }
  footer,.wrap{
    left: calc(50% - 30vw);
  }
  .btn_line, .btn_368{
    height: 120px;
  }
  .block_two .block2{
    padding-top: 14vw;
  }
  footer img{
    width: 30vw;
  }
}