*{
    margin: 0;
    padding: 0;
    --gg: #f7f6f4;
    --bb: rgb(151, 141, 132);
    --aa: rgb(181, 177, 170);
    --cc: rgb(96, 90, 85);

    --shi: 3.2vw;
    --in: 1.2vw;
    --non: 1vw;
    --con: 2.5vw;
    --fo: 2vw;
    --num: 3vw;
    --pat:4.7vw;
    --pro:1.4vw;
    /* --shi: clamp(3rem, 2.5vw, 5rem);
    --in: clamp(.5rem, 2.5vw, 1rem);
    --non: clamp(.3rem, 2.5vw, .7rem);
    --con: clamp(7rem, 2.5vw, 9rem) */
    scroll-behavior: smooth;
}
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital@0;1&family=Shippori+Mincho&family=Zen+Maru+Gothic&display=swap');


::-webkit-scrollbar {
    display: none; /* 隱藏滾動條 */
}

body{
    position: relative; 
    margin: 0;
    padding: 0;
    max-width: 100%;
    overscroll-behavior: none;
    overflow-x: hidden;
    background-color: var(--gg);
}
.firstpage{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100vh;
    width: 100vw;
    justify-content: start;
    align-items: center;
}
.logo{
    z-index: 9999;
    display: flex;
    position: fixed;
    width: 92%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    mix-blend-mode: difference;
}
.logo svg{
    display: block;
    position: relative;
    bottom: 25%;
    height:  40%;
    fill: #d9d9d9;
}
.loword{
    position: relative;
    display: flex;
    width: 30%;
    height: 30%;
    top: 7%;
    left: 31%;
    letter-spacing: 10;
    line-height: 2;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: var(--cc);
    mix-blend-mode: difference;
}
.loword p{
    font-size: .7vw;
    /* font-family: "Zen Maru Gothic", serif; */
    font-weight: 400;
}
.cera{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ce1{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ce1 img{
    display: flex;
    position: relative;
    height: 85%;
    bottom: 5%;
    object-fit: cover;
}
.scroll{
    position: absolute;
    display: flex;
    top: 89%;
    width: 90%;
    justify-content: start;
    align-items: start;
    font-family: "Zen Maru Gothic", serif;
    font-size: var(--non);
    font-weight: 400;
    color: var(--cc);
}
.title{
    z-index: 10;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 60%;
    width: 100%;
    top: 10%;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-family: "Noto Sans", serif;
    font-weight: 100;
    letter-spacing: 5;
    color: var(--cc);
    /* border: 1px solid black; */
}
.title1/* 拾遺 */{
    display: flex;
    flex-direction: column;
    height: 50%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 50px;
}
.t1w1, .t1w2{
    display: flex;
    position: relative;
    font-size: var(--shi);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.t1w3 /*陶瓷紋樣word*/{
    display: flex;
    height: 10%;
    margin: 0.2%;
    font-size: var(--in);
    justify-content: center;
    align-items: center;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
    /* border: 1px solid black; */
}
.title2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40%;
    width: 100%;
}
.t2w2, .t2w1{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 17%;
    width: 100%;
    overflow: hidden;
    /* border: 1px solid black; */
}
.t2w1{
    font-size: var(--con);
    margin-bottom: .2%;
}
.t2w2 h6{
    display: flex;
    height: 100%;
    top: 3%;
    font-size: 1.2vw;
    font-weight: bolder;
    justify-content: center;
    align-items: center;
}
.page05{
    height: 50vh;
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tp{
    height: 80%;
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}
#mrCurve{
    stroke: none;
}
.tp svg{
    fill: none;
    height: 250%;
    stroke: none;
}
textPath {
  fill: var(--aa);
  letter-spacing: 1.2;
  font-size: .2vw;
  font-weight: bolder;
  font-family: "Noto Sans", serif;
}
.page15{
    z-index: 1000;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 350vh;
    width: 100vw;
    text-decoration: none;
    color: var(--cc);
    /* border: 1px solid black; */
}
.p15{
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100vw;
}
.cls-p {
    fill: none;
    stroke: #605a55;
    stroke-miterlimit: 10;
    stroke-width: .75px;
}
.p151, .p152, .p153, .p154, .p155{
    display: flex;
    position: relative;
    height: 20%;
    width: 100vw;
    justify-content: center;
    list-style-type: none;
    /* border: 1px solid rgb(100, 100, 148); */
}
.story1, .story2, .story3, .story4, .story5{
    display: flex;
    position: relative;
    height: 100vh;
    width: 100vw;
    /* border: 1px solid black; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    /* background-color: beige; */
}
.story1{
    z-index: 999;
}
.p151pic{
    display: flex;
    position: absolute;
    width: 100vw;
    height: 50vh;
    top: 0%;
    transform: translateY(20%);
    opacity: 0;
}
.p151pic img{
    display: flex;
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100vh;
}
.p151pic2{
    display: flex;
    position: absolute;
    width: 100vw;
    height: 50vh;
    top: -5%;
    transform: translateY(20%);
    opacity: 0;
}
.p151pic2 img{
    display: flex;
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100vh;
}
.p151pic3{
    z-index: -1;
    display: flex;
    position: absolute;
    width: 100vw;
    height: 50vh;
    top: 0%;
    opacity: 0;
    transform: translateX(-5%);
    /* opacity: 0; */
}
.p151pic3 img{
    display: flex;
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100vh;
}
.p151pic4{
    z-index: -1;
    display: flex;
    position: absolute;
    width: 100vw;
    height: 50vh;
    top: 0%;
    opacity: 1;
}
.p151pic4 img{
    display: flex;
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100vh;
}
.p151w{
    display: flex;
    left: 20%;
    top: 30%;
}
.p152w{
    display: flex;
    right: 20%;
    bottom: 5%;
}
.p153w{
    display: flex;
    left: 20%;
}
.p154w{
    display: flex;
    top: 30%;
    right: 20%;
}
.p155w{
    display: flex;
    align-items: center;
}
.p151w, .p152w, .p153w, .p154w, .p155w{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 40%;
    width: 30%;
    /* border: 1px solid rgb(60, 60, 228); */
}
.p151w1, .p152w1, .p153w1, .p154w1, .p155w1{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 20%;
    width: 100%;
    margin: 5% 0;
    justify-content: center;
    text-align: center;
    font-family: "Noto Sans", serif;
    font-weight: 700;
    font-size: var(--num);
    overflow: hidden;
    /* border: 1px solid black; */
}
.p151w1 p, .p152w1 p, .p153w1 p, .p154w1 p, .p155w1 p{
    display: flex;
    position: relative;
    transform: translateY(120%);
}
.p151w2, .p152w2, .p153w2, .p154w2, .p155w2{
    display: flex;
    will-change: transform, z-index;
    z-index: 1000;
    flex-direction: column;
    position: relative;
    height: 80%;
    width: 100%;
    line-height: 1.7;
    letter-spacing: 2;
    font-family: "Zen Maru Gothic", serif;
    font-size: var(--non);
    transform: translateY(30%);
    opacity: 0;
}
.p155w1, .p155w2{
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    text-align: center;
}
.p152pic{
    z-index: -1;
    position: absolute;
    display: flex;
    left: 60%;
    top: 70%;
    height: 50vh;
    opacity:0;
    transform: rotate(-8deg);
    /* border: 1px solid black; */
}
.p152pic2{
    z-index: -100;
    position: absolute;
    display: flex;
    left: 40%;
    top: 90%;
    height: 60vh;
    width: 50%;
    opacity: .3;
    transform: rotate(5deg);
    /* border: 1px solid black; */
}
.s3svg1,.s3svg2,.s3svg3, .s3svg4, .s3svg5, .s3svg6, .s3svg7 {
    display: flex;
    position: absolute;
    height: 50%;
    width: 50%;
    right: 30%;
    top: 30%;
    /* border: 1px solid black; */
}
#v1{
    position: relative;
    display: flex;
    height: 100%;
    width: 130%;
    color: var(--cc) !important;
    stroke-dasharray: 420;
    /* animation:  3s fil linear; */
}
#v2{
    position: relative;
    display: flex;
    stroke-dasharray: 420;
}
#v3{
    position: relative;
    display: flex;
    stroke-dasharray: 600;
}
#v4{
    position: relative;
    display: flex;
    stroke-dasharray: 1080;
}
#v5{
    position: relative;
    display: flex;
    stroke-dasharray: 77;
}
#v6{
    position: relative;
    display: flex;
    stroke-dasharray: 46;
}
#v7{
    position: relative;
    display: flex;
    stroke-dasharray: 380;
}
.s3svg1{
    right: 30%;
    top: 10%;
}
.s3svg2{
    right: 60%;
    top: 25%;
}
.s3svg3{
    right: 35%;
    top: 60%;
    height: 30%;
}
.s3svg4{
    left: 50%;
    top: 60%;
}
.s3svg5{
    top: -10%;
    left: 50%;
}
.s3svg6{
    top: 40%;
    left: 35%;
}
.s3svg7{
    top: 15%;
    left: 65%;
}
.p154pic{
    position: absolute;
    display: flex;
    width: 100vw;
    /* border: 1px solid black; */
    opacity: 0;
}
.p154pic img{
    position: relative;
    display: flex;
    object-fit: cover;
    width: 100vw;
}
.page2{
    display: flex;
    height: 180vh;
    width: 100vw;
    overflow: hidden;
    /* border: 1px solid black; */
}
.p2pic{
    display: flex;
    position: relative;
    width: 40%;
    height: 100%;
    overflow: hidden;
    /* background-color: #fff; */
    opacity: 1;
}
.p2all{
    position: relative;
    display: flex;
    height: 100vh;
    width: 100%;
}
.all1, .all2{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
    /* border: 1px solid black; */
}
.all1 img{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
    top: 10%;
    left: 8%;
    transform: scale(80%);
}
.all11, .all12, .all21, .all22{
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    border: 1px solid brown;
}
.p2word{
    display: flex;
    position: relative;
    width: 60%;
    height: 100%;
    color: var(--cc);
    /* border: 1px solid black; */
}
.d0 {
    display: flex;
    flex-direction: column;
    list-style: none;
    position: relative;
    top: 37%;
    margin: 0 10%;
    writing-mode: horizontal-tb;
    font-family: 'Zen Maru Gothic';
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.2rem;
    line-height: 2;
}
.d0 li{
    margin: 40px 0px;
}

.page3{
    z-index: 1000;
    display: flex;
    height: 400vh;
    width: 100vw;
    overflow: hidden;
    z-index: 1000;
}
.tashi{
    z-index: 1000;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100vw;
    justify-content: start;
    background-color: var(--gg);
}
.process{
    display: flex;
    position: relative;
    height: 5vh;
    width: 23%;
    margin: 6% 0% 3% 4%;
    font-family: "Noto Sans", serif;
    font-weight: 700;
    font-size: var(--con);
    color: var(--cc);
    overflow: hidden;
    /* border: 1px solid black; */
}
.process p{
    display: flex;
    position: relative;
    transform: translateY(100%);
}
.taph{
    display: flex;
    position: relative;
    width: 100%;
    height: 60vh;
    top: 2%;
    /* border: 1px solid black; */
}
.p3pic{
    z-index: 9999;
    display: flex;
    position: relative;
    height: 100%;
    width: 52.5%;
    margin: 0% 0 0 0%;
}
.p3pic1, .p3pic2, .p3pic3, .p3pic4, .p3pic5 {
    display: flex;
    position:absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
}
.p3pic1 img, .p3pic2 img, .p3pic3 img, .p3pic4 img, .p3pic5 img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.tap{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 35vw;
    margin: 0% 4%;
    justify-content: space-between;
    text-align: left;
    /* border: 1px solid black; */
    font-size: var(--fo);
}
.tap1, .tap2, .tap3, .tap4, .tap5{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 6%;
    width: 100%;
    justify-content: center;
    text-align: left;
    color: black;
    font-family: "zen maru gothic";
    font-weight: 700;
    font-size: var(--pro);
    letter-spacing: .5;
    color: var(--cc);
    /* border: 1px solid var(--bb); */
    opacity: 0.3;
}
.tap span{
    position: relative;
    bottom: 7%;
    margin: 3%;
    font-family: "Noto Sans", serif;
}
.tapp{
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 92%;
    left: 8%;
    font-family: "Zen Maru Gothic", serif;
    color: var(--cc);
    font-size: var(--non);
    line-height: 1.7;
    letter-spacing: 2;
    /* border: 1px solid var(--bb); */
}
.tapp1, .tapp2, .tapp3, .tapp4, .tapp5{
    display: flex;
    position: absolute;
    height: 57%;
    top: 11%;
    width: 100%;
    /* border: 1px solid var(--bb);   */
    transform: translateY(10%);
    opacity: 0;
}
.tap1 p, .tap2 p, .tap3 p, .tap4 p, .tap5 p{
    /* border: 1px solid var(--bb);   */
    display: inline-block;
    transform: translateY(100%);
    opacity: 1;
}
.tapp1{
    top: 10%;
}
.tapp2{
    top: 20%;
    /* border: 1px solid var(--bb); */
}
.tapp3{
    top: 31%;
    /* border: 1px solid var(--bb); */
}
.tapp4{
    top: 42%;
    /* border: 1px solid var(--bb); */
}
.tapp5{
    top: 53%;
    /* border: 1px solid var(--bb); */
}
.p3{
    display: flex;
    position: absolute;
    flex-direction: column;
    height: 320vh;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.p31, .p32, .p33, .p34, .p35{
    display: flex;
    position: relative;
    height: 20%;
    width: 100%;
    /* border: 1px solid gray; */
}

.sad{
    position: relative;
    z-index: 999;
    height: 250vh;
    width: 100vw;
    opacity: 1;
    background-color: var(--gg);
}
.hanaline {
    display: flex;
    width: 1500px;
    height: 1px;
    background-color: burlywood;

}
.pso{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 250vh;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}
.psoo{
    position: relative;
    display: flex;
    height: 100vh;
    width: 100%;
    top: 15%;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.psoo p{
    display: flex;
    position: relative;
    color: var(--cc);
    font-size: var(--con);
}
.haha{
    height: 187vh;
    width: 100vw;
    position: relative;
    display: flex;
}
.mmtt{
    display: flex;
    height: 100vh;
    width: 100vw;
    position: relative;
    justify-content: center;
    align-items: end;
    /* overflow: hidden;  */
}
.backto{
    z-index: 10;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 2%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.door {
    position: absolute;
    display: flex;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--cc);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 
}
.backto p {
    position: relative;
    display: flex;
    width: 2000%;
    top: 20%;
    font-weight: 300;
    font-size: 12px;
    transform: rotate(90deg);
    color: var(--cc);
    letter-spacing: 5px;
    mix-blend-mode: difference;
    transition: color 0.3s ease;
    justify-content: center;
    align-items: center;
    overflow: hidden;  
}
.namehome{
    z-index: 10;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 20%;
    justify-content: center;
    align-items: start;
    /* border: 1px solid black; */
}
.namehome p{
    opacity: 0;
    margin: 30% 0;
}

.name{
    display: flex;
    position: relative;
    height: 100%;
    width: 24%;
    padding: 2rem 4rem;
    font-size: var(--pat);
    font-family: "Noto Sans", serif;
    font-weight: bolder;
    line-height: 2;
    color: var(--cc);
    writing-mode: vertical-rl;
    justify-content: top;
    align-items: center;
    text-align: top;
}
.ename{
    display: flex;
    right: 19%;
    height: 5%;
    width: 120%;
    top: 23%;
    position: absolute;
    font-size: 25px;
    font-family: "Noto Sans", serif;
    font-weight: bolder;
    font-style: normal;
    letter-spacing: 5px;
    justify-content: left;
    align-items: left;
    color: var(--cc);
    transform: rotate(90deg);
    opacity: 0;
}
.pichome{
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 95vh;
    width: 95vh;
    top: 10%;
    left: 30%;
    justify-content: top;
    align-items: flex-start;
}
#image-container{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 20px;
}
#image-container img {
    position: absolute;
    width:100%;
}
#photo19, #photo20{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    transition: opacity 2s ease;
    justify-content: center;
    align-items: center;
}
#photo1 svg, #photo1 img, #photo2 svg, #photo2 img, #photo3 svg, #photo3 img, #photo4 svg, #photo4 img, #photo5 svg, #photo5 img, #photo6 svg, #photo6 img, #photo7 svg, #photo7 img, #photo8 svg, #photo8 img, #photo9 svg, #photo9 img, #photo10 svg, #photo10 img, #photo11 svg, #photo11 img, #photo12 svg, #photo12 img, #photo13 svg, #photo13 img, #photo14 svg, #photo14 img, #photo15 svg, #photo15 img, #photo16 svg, #photo16 img, #photo17 svg, #photo17 img, #photo18 svg, #photo18 img, #photo19 svg, #photo19 img, #photo20 svg, #photo20 img {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#oto1, #oto2, #oto3, #oto4, #oto5, #oto6, #oto7, #oto8, #oto9, #oto10, #oto11, #oto12, #oto13, #oto14, #oto15, #oto16, #oto17, #oto18, #oto19, #oto20{
    opacity:0;
}
#sv1{
    stroke-dasharray: 3422;
    stroke-dashoffset: 3422;
}
#sv2{
    stroke-dasharray: 3225 3225;
    stroke-dashoffset: 3225;
}
#sv3{
    stroke-dasharray: 9000;
    stroke-dashoffset: 9000;
}
#sv4{
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
}
#sv5{
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}
#sv6{
    stroke-dasharray: 850;
    stroke-dashoffset: 850;
}
#sv7{
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}
#sv8{
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}
#sv9{
    stroke-dasharray: 3500;
    stroke-dashoffset: 3500;
}
#sv10{
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
}
#sv11{
    stroke-dasharray: 1550;
    stroke-dashoffset: 1550;
}
#sv12{
    stroke-dasharray: 7000;
    stroke-dashoffset: 7000;
}
#sv13{
    stroke-dasharray: 2450;
    stroke-dashoffset: 2450;
}
#sv14{
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
}
#sv15{
    stroke-dasharray: 4750;
    stroke-dashoffset: 4750;
}
#sv16{
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}
#sv17{
    stroke-dasharray: 980;
    stroke-dashoffset: 980;
}
#sv18{
    stroke-dasharray: 3200;
    stroke-dashoffset: 3200;
}
#sv19{
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transition: opacity 1s;
}
#sv20{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: opacity 1s;
}
.run{
    animation: draw 2.5s cubic-bezier(0.7, 0.1, 0.5, 0.3) forwards;
}
@keyframes draw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
/* 植物 */
#photo4, #photo7, #photo11, #photo12, #photo13, #photo14, #photo16, #photo10{
    position: absolute;
    width:110%;
    top: -10%;
    display: flex;
    transition: opacity 2s ease;
    justify-content: center;
    align-items: center;
}
#photo3, #photo9, #photo15{
    position: absolute;
    height: 100%;
    width: 100%;
    width:100%; 
}
#photo2{
    position: absolute;
    height: 100%;
    width:100%;
    opacity: 1;
}
#photo17, #photo5{
    position: absolute;
    width:100%;
    height: 100%;
    left: 10%;
    bottom: 5%;
    transform: scale(90%);
}
 #photo9, #photo15{
    position: absolute;
    width:100%;
    height: 100%;
}
#photo6{
    position: absolute;
    left: 15%;
    height: 100%;
    width: 100%;
}
#photo8{
    position: absolute;
    height: 115%;
    width: 115%;
    left: 0;
    bottom: 0;
}
#photo18{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 15%;
    transform: scale(90%);
}
#image-container .visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 5s ease, visibility 0s 2s;
}
#photo19.visible {
    opacity: 1;
  }
.era{
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 3%;
    height: 100%;
    width: 30%;
    font-weight: bolder;
    justify-content: top;
    align-items: center;
    /* border: 1px solid black; */
}
.eraa{
    display: flex;
    flex-direction: column;
    height: 20%;
    width: 100%;
    top: 10%;
    position: relative;
    justify-content: center;
    align-items: center;
    font-family: "Noto Sans", serif;
    letter-spacing: 2px;
    color: var(--cc);
    /* border: 1px solid black; */
}
#eraa1{
    transition: 1s ease;
}
#eraa2{
    transition: 1s ease;
}
.eraa1{
    height: 45%;
    width: 100%;
    font-weight: bolder;
    text-align: right;
    overflow: hidden;
    transition: 1s ease;
    /* border: 1px solid black; */
}
.eraa1 p{
    transform: translateY(120%);
}
.eraa2{
    height: 30%;
    width: 95%;
    text-align: right;
    font-weight: bolder;
    overflow: hidden;
    transition: 1s ease;
    /* border: 1px solid black; */
}
.eraa2 p{
    transform: translateY(120%);
}
.eraa .doww{
    transform: translateY(120%)!important;
}
.eraa .upp{
    transition: 1s ease;
    transform: translateY(0%)!important;
}
.eraa1 p{
    letter-spacing: 10px;
    font-size: var(--num);
}
.eraa2 p{
    letter-spacing: 3px;
    font-size: var(--fo);
}
.genus{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 40%;
    width: 95%;
    top: 4%;
    justify-content: center;
    align-items: center;
    color: var(--cc);
    opacity: 0;
    /* border: 1px solid black; */
}
.gg{
    font-family: 'Zen Maru Gothic';
    font-size: var(--in);
    width: 100%;
    line-height: 2.1;
    letter-spacing: 1px;
    font-weight: 300;
    text-align: right;
    opacity: .4;
    /* border: 1px solid black; */
}
.good{
    transform: translateX(-20%);
    opacity: 1;
    line-height: 3;
    font-weight: 400;
    transition: 1s ease ;
}
.bad{
    transform: translateX(0);
    opacity: .3;
    font-weight: 300;
    transition: 1s ease ;
}
.goood {
    transform: translateX(-30%);
    opacity: 1;
    line-height: 3;
    font-weight: 500;
    transition: transform 1s ease; 
}
.baad {
    transform: translateX(0%); /* 回到原始位置 */
    opacity: 0;
    font-weight: 500;
    transition: transform 1s ease;
}
.z {
    transform: translateX(-5%);
    opacity: 0;
    transition: .5s ease; 
}
.zz {
    transform: translateX(5%); /* 回到原始位置 */
    opacity: 0;
}
.zzz {
    transform: translateX(0%); /* 回到原始位置 */
    opacity: 1;
    transition: 1s ease;
}
.blockh{
    z-index: 10;
    display: flex;
    position: relative;
    height: 10%;
    width: 100%;
    margin:5% 0;
    color: var(--cc);
    letter-spacing: 8px;
    font-weight: 400;
    font-size: var(--fo);
    font-family: 'Zen Maru Gothic';
    overflow: hidden;
    /* border: 1px solid black; */
}
#word{
    transition: 1s ease ;
}
#word1,#word2, #word3, #word4{
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 19px;
    font-family: 'Zen Maru Gothic';
}
.block p{
    transform: translateY(150%);
}
.blockh .do{
    transform: translateY(130%)!important;
}
.blockh .uu{
    transform: translateY(0%)!important;
}
.dtailall{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 50%;
    width: 60%;
    right: 15%;
    justify-content: center;
    /* border: 1px solid black; */
}
.dtail{
    z-index: 10;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 35%;
    width: 100%;
    font-size: var(--in);
    letter-spacing: 10px;
    font-weight: 400;
    justify-content: space-between;
    align-items: flex-start;
    font-family: 'Zen Maru Gothic';
    color: var(--cc);
    transition: .9s ease ;
    /* border: 1px solid black; */
}
.block1 p, .block2 p, .block3 p, .block4 p{
    transform: translateY(100%);

    font-size: var(--in) !important;
}
.block1 .do{
    transform: translateY(130%)!important;
    transition: .9s ease ;
}
.block1 .uu{
    transform: translateY(0%)!important;
    transition: .9s ease 0.2s;
}
.block2 .do{
    transform: translateY(130%)!important;
    transition: .9s ease ;
}
.block2 .uu{
    transform: translateY(0%)!important;
    transition: .9s ease 0.4s;
}
.block3 .do{
    transform: translateY(130%)!important;
    transition: .9s ease ;
}
.block3 .uu{
    transform: translateY(0%)!important;
    transition: .9s ease 0.6s;
}
.block4 .do{
    transform: translateY(130%)!important;
    transition: .9s ease ;
}
.block4 .uu{
    transform: translateY(0%)!important;
    transition: .9s ease 0.8s;
}
.block1{
    display: flex;
    flex-direction: column;
    height: 17%;
    width: 100%;
    position: relative;
    justify-content: center;
    overflow: hidden;
}
.block2{
    display: flex;
    height: 17%;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
.block3{
    display: flex;
    height: 17%;
    position: relative;
    overflow: hidden;
}
.block4{
    display: flex;
    flex-direction: column;
    height: 17%;
    width: 120%;
    position: relative;
    overflow: hidden;
}
.sad .ssad{
    z-index: 999;
    position: absolute;
    top: -10%;
    right:50%;
    height: 100px;
    width: 100px;
}

.sad .ssad .sssad{
    z-index: 999;
    height: 160px;
    width: 10px;
}

.sad .ssad .sssad img{
    height: 160px;
    width: 10px;
    transition: transform 2s ease-in-out;
}

.rotate-animation {
    animation: rotate720 2s ease forwards; 
}

@keyframes rotate720 {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(720deg);
    }
}


.sad .ssad1{
    position: absolute;
    bottom: 320px;
    left: 1296px;
    height: 200px;
    width: 180px;

}

.sad .ssad1 .sssad1{
    z-index: 999;
    height: 200px;
    width: 10px;
    opacity: 0;
}

.sad .ssad1 .sssad1 img{
    height: 190px;
    width: 10px;
    
}

.ssad2{
    display: flex;
    position: absolute;
    bottom: 470px;
    left: 1200px;
    height: 200px;
    width: 200px;

}

 .ssad2 .sssad2{
    display: flex;
    position: absolute;
    z-index: 999;
    height: 200px;
    width: 200px;
    opacity: 1;
}

.ssad2 .sssad2 img{

    height: 200px;
    width: 200px;
    
}
.noname{
    position: relative;
    z-index: 10;
    height: 100vh;
    width: 100vw;
    background-image: url("kkk.jpg");
}

.coco{
    z-index: 1;
    top: 0;
    position: absolute;
    height: 200vh;
    width: 100vw;
    background-color: #fff;
    opacity: 0;
}
.horizontal-container {
    /* z-index: 2000; */
    position: relative;
    display: flex;
    width: 100%;
    height: 1200vh;
    /* background-image: url("kkk.jpg"); */
    /* background-color: var(--gg); */
    align-items: center;
    text-align: flex ;
    justify-content: center;
    overflow: hidden;
}

.ppthome{
    overflow: hidden;
    display: flex;
    position: absolute;
    height: 400vh;
    width: 100vw;
    bottom: 0;
    align-items: center;
 
    opacity: 1;
}

.ppt{
    top: 13%;
    z-index: 2000;
    display: flex;
    position: absolute;
    height: 400vh;
    width:15%;
    left: 35%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: translateY(-100%);
    background-clip: content-box;
    

}

.ppt .www{
    display: flex;
    /* background-image: url("kkkk.jpg"); */
    background-clip: content-box;
    position: relative;
    height: 170px;
    width: 240px;
    margin: 0.5rem;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.ppt1{
    z-index: 2000;
    display: flex;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 400vh;
    width:15%;
    left: 15%;
    top: 25%;
    /* background-color: rgba(141, 123, 119, 0.5) */
}

.ppt1 .ww{
    /* background-image: url("kkk.jpg"); */
    position: relative;
    height: 170px;
    width: 240px;
    margin: 0.5rem;
    background-color: rgba(255, 255, 255, 0.8);
}

#ww1 img{
    position: absolute;
    height: 150%;
    top: -60;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww2 img{
    position: absolute;
    height: 130%;
    right: 5;
    top: -20;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}

#ww3 img{
    position: absolute;
    height: 120%;
    right: 5;
    top: -20;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww4 img{
    position: absolute;
    height: 120%;
    right: 5;
    top: -20;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww5, #ww9, #ww10{
    height:10rem;
}
#ww5 img{
    position: absolute;
    height: 160%;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww6 img{
    position: absolute;
    height: 140%;
    top: -55;
    right: -5;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww7 img{
    position: absolute;
    height: 160%;
    right: -20;
    top: -50;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww8 img{
    position: absolute;
    height: 160%;
    right: -20;
    top: -50;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww9 img{
    position: absolute;
    height: 170%;
    left: 0;
    top: -50;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww10 img{
    position: absolute;
    height: 170%;
    left: 0;
    top: -50;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww11 img{
    position: absolute;
    height: 140%;
    left: -5;
    top: -50;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww12 img{
    position: absolute;
    height: 150%;
    left: -10;
    top: -60;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww13 img{
    position: absolute;
    height: 140%;
    left: -5;
    top: -50;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww14 img{
    position: absolute;
    height: 140%;
    left: -5;
    top: -50;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww15 img{
    position: absolute;
    height: 150%;
    top: -60;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww19 img{
    position: absolute;
    height: 142%;
    left: 0;
    bottom: -30;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}
#ww20 img{
    position: absolute;
    height: 142%;
    left: 0;
    bottom: -30;
    /* filter: brightness(0.9) contrast(1.1) saturate(1); */
}

.too{
    position: relative;
    transform: translateY(60%);
    font-family: 'Zen Maru Gothic';
    font-weight: 900;
}
.p3-4{
    height: 20vh;
    width: 100vw;
}
.p3-42{
    z-index: 6666;
    position: relative;
    display: flex;
    height: 20vh;
    width: 100vw;
    background-color: var(--gg);
}
.page35{
    z-index: 1;
    display: flex;
    position: relative;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
}
.mov35home{
    display: flex;
    position: relative;
    height: 300vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.mov35{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: start;
}
.honmov{
    z-index: 1;
    display: flex;
    position: relative;
    height: 100vh;
    width: 100vw;
}
.honmov video{
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.page4{
    z-index: 1000;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 110vh;
    width: 100vw;
    justify-content: end;
    align-items: end;
    background-color: var(--cc);
    overflow: hidden;
}
.realp4{
    z-index: 1000;
    display: flex;
    position: relative;
    height: 100%;
    width: 100vw;
    background-image: url(bgg.PNG);
    background-size: cover;
    background-repeat: no-repeat;
} 
.p41{
    display: flex;
    position: relative;
    height: 100%;
    width: 40vw;
}
.p41t{
    display: flex;
    position: relative;
    height: 100%;
    width: 32vw;
    justify-content: center;
}
.p41t1{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 16vw;
    overflow: hidden;
    justify-content: start;
    align-items: center;
}
.p41t2{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 16vw;
    overflow: hidden;
    justify-content: end;
    align-items: start;
}
.p41t1l {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    animation: downnn 15s linear infinite;
}
.p41t2l {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    animation: uppp 15s linear infinite;
}
@keyframes downnn {
    to {
      transform: translateY(-100%);
    }
}
@keyframes uppp {
    to {
      transform: translateY(100%);
    }
}
.p41b{
    display: flex;
    position: relative;
    height: 16vw;
    width: 16vw;
}
.p41b img{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
}
.p41b::before {
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
}
#sir::after, #sirr::after {
    z-index: 1;
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    background-image: url('bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#sir::before {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: -2%;
    background-image: url('f-01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#sirr::before {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    background-image: url('f-03.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#cir::before, #cirr::before{
    content: '';
    display: block;
    position: absolute;
    height: 13rem;
    width: 13rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    background-image: url('bgb.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#cir::after {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 5%;
    background-image: url('f-02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#cirr::after {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    background-image: url('f-06.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#long, #longg{
    height: 16rem;
}
#long::before {
    content: '';
    display: block;
    position: absolute;
    height: 15rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    border-radius:  4rem 4rem 0 4rem;
    background-color: var(--gg);
}
#long::after {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    background-image: url('f-05.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#longg::before {
    content: '';
    display: block;
    height: 15rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    border-radius: 0 4rem 4rem 4rem;
    background-color: var(--gg);
}
#longg::after {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    background-image: url('f-04.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#song::before {
    content: '';
    display: block;
    height: 12rem;
    width: 12rem;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    border-radius:  4rem 0rem 4rem 4rem;
    background-color: var(--gg);
    background-image: url('f-07.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#songg::before {
    content: '';
    display: block;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    border-radius: 4rem 4rem 4rem 0rem ;
    background-color: var(--gg);
    background-image: url('f-08.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#no::before{
    content: '';
    display: block;
    position: absolute;
    height: 13rem;
    width: 13rem;
    transform: translateY(-50%);
    top: 50%;
    background-image: url('rou.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#no {
    animation: spin 10s linear infinite;
  }
@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
.roo{
    z-index: -1;
    height: 13rem;
    width: 13rem;
    display: flex;
    position: absolute;
    top: 10%;
    right: -5%;
}
.p41pic{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
}
.p42{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 60%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.p42ww{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 28%;
    width: 85%;
    gap: 2%;
    top: 35%;
}
.p42w1{
    display: flex;
    position: relative;
    height: 40%;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: var(--pat);
    font-family: "Noto Sans", serif;
    letter-spacing: 2.5rem;
    color: var(--gg);
    font-weight: 500;
    margin-bottom: 2%;
    overflow: hidden;
}
.p42w1 p{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    transform: translateY(120%);
}
.p42w{
    display: flex;
    position: relative;
    height: 20%;
    width: 100%;
    align-items: end;
    justify-content: start;
    font-size: var(--fo);
    font-family: "Noto Sans", serif;
    letter-spacing: 2;
    color: var(--gg);
    font-weight: 500;
    overflow: hidden;
}
.p42w h3{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    transform: translateY(120%);
}
.p42w2{
    display: flex;
    position: relative;
    height: 10%;
    width: 100%;
    align-items: center;
    justify-content: start;
    font-size: var(--in);
    font-family: "Noto Sans", serif;
    letter-spacing: 2;
    color: var(--gg);
    font-weight: 500;
    overflow: hidden;
}
.p42w2 span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
  }
#text{
    height: 50vh;
    width: 80vw;
    stroke-dasharray: 246;
    animation:  3s fil linear;
    /* border: 1px solid black; */
}
/* 
@keyframes fil{
    0%{
        stroke-dashoffset: 950;
    }
    100%{
        stroke-dashoffset: 0;
    }
} */
.video-background {
    display: flex;
    position: relative;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
  }
.titlepic{
    display: none;
}
.phone{
    display: none;
}
.phterns{
    display: none;
}
.anop4{
    display: none;
}
.r4, .r5{
    display:none;
}

@media (max-width: 1024px) {
    html,body {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        overflow-x: hidden;
        font-size: 14px;
    }
    .ce1{
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .ce1 img{
        display: flex;
        position: relative;    
        bottom: 2%;
    }
}

/* 手機 (寬度小於 768px) */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none; /* 隱藏滾動條 */
    }
    html,body {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        overflow-x: hidden;
        font-size: 14px;
        font-family: "Noto Sans", serif;
    }
    .firstpage{
        display: none;
    }
    .logo{
        display: none;
        width: 85%;
        height: 7%;
        margin: 10% 10%;
        justify-content: left;
        align-items: start;
    }
    .logo img{
        display: flex;
        height: 100%;
        bottom:10%;
        object-fit: cover;
    }
    .ce1{
        display: none;
        position: absolute;
        width: 100%;
        height: 50%;
        justify-content: center;
        align-items: center;
        /* border: 10px solid black; */
    }
    .ce1 img{
        display: flex;
        position: relative;
        transform: rotate(90deg);
        width: 150%;
        left: 8%;
        top: 3%;
    }
    .loword{
        display: none;
        position: relative;
    }
    .title{
        display: flex;
        position: relative;
        height: 90%;
        width: 100%;
        top: 7%;
        justify-content: center;
        align-items: end;
        /* border: 1px solid black; */
    }
    .title2{
        display: flex;
        position: relative;
        height: 50%;
        width: 90%;
        top: 45%;
        justify-content: start;
        align-items: start;
        /* border: 1px solid black; */
    }
    /* english logo */
    .t2w1{
        display: flex;
        flex-direction: column;
        position: relative;
        height: 75%;
        width: 100%;
        justify-content: start;
        align-items: start;
        /* border: 1px solid black; */
    }
    /* 1661-1945 */
    .t2w2{
        position: relative;
        letter-spacing: 1.2;
        display: flex;
        justify-content: start;
        height: 7%;
        /* border: 1px solid black; */
    }
    .t2w1 h5{
        display: flex;
        flex-direction: column;
        position: relative;
        text-align: left;
        font-size: 30px;
        letter-spacing: 1;
    }
    .t2w1 h5{
        display: flex;
        flex-direction: column;
        position: relative;
        text-align: left;
        font-size: 30px;
        letter-spacing: 1.2;
    }
    .t2w2 h6{
        display: flex;
        flex-direction: column;
        position: relative;
        text-align: left;
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 1.2;
    }
    .break {
        display: block;
    }
    .title1{
        display: flex;
        position: relative;
        height: 60%;
        width: 90%;
        bottom: 35%;
        justify-content: center;
        align-items: center;
        text-align: start;
        /* border: 1px solid black; */
    }
    .t1w1, .t1w2{
        height: 12%;
        font-weight: bolder;
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        height: 25%;
        width: 100%;
        margin: 0.3%;
        font-size: 35px;
        overflow: hidden;
    }
    .t1w3{
        top: 10%;
        height: 45%;
        margin: 10%;
        display: none;
        writing-mode: vertical-rl;
    }
    .titlepic{
        display: flex;
        position: absolute;
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .tp{
        position: absolute;
        display: flex;
        height: 23%;
        left: 40%;
        top: 57%;
        /* border: 1px solid black; */
    }
    .tp1, .tp2, .tp3, .tp4, .tp5, .tp6, .tp7, .tp8{
        display: flex;
        position: absolute;
        height: 20%;
    }
    .tp1{
        top: 8%;
        left: 78%;
        height: 12%;
    }
    .tp2{
        top: 1%;
        left: 65%;
        height: 9%;
    }
    .tp3{
        top: -5%;
        left: 85%;
        height: 9%;
    }
    .tp4{
        top: 15%;
        left: 58%;
        height: 11%;
    }
    .tp5{
        top: 25%;
        left: 75%;
        height: 8%;
    }
    .tp6{
        top: 33%;
        left: 67%;
        height: 17%;
    }
   .tp7{
        top: 22%;
        left: 35%;
        height: 19%;
    }
    .tp8{
        top: 47%;
        left: 55%;
        height: 10%;
    }
    .phone{
        display: none;
        flex-direction: column;
        position: relative;
        height: 175vh;
        width: 100vw;
        align-items: center;
        /* border: 1px solid black; */
    }
    .phonep{
        display: flex;
        position: relative;
        height: 100vw;
        width: 100vw;
    }
    .phonep img{
        height: 100%;
        width: 100%;
    }
   
    .phterns{
        height: 100vh;
        width: 100vw;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .sy{
        display: flex;
        position: absolute;
        z-index: 9999;
        width: 100vw;
        height: 100%;
        opacity: 0;
        background-color: var(--aa);
    }
    .chuchu{
        display: flex;
        position: absolute;
        width: 100vw;
    }
    .chuchu img{
        width: 100vw;
        position: relative;
        display: flex;
        object-fit: cover;
        opacity: .3;
    }
    /* 主要的 */
    .phternsnav{
        height: 100%;
        width: 100%;
        display: none;
        flex-direction: column;
        color: var(--cc);
        display: flex;
        align-items: left;
    }
    .navhome{
        z-index: 999;
        display: flex;
        position: relative;
        height: 20%;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        white-space: nowrap;
        gap: 1%;
        align-items: top;
        /* border: 1px solid black; */
        /* background-color: #CECBC6;
        border-radius: 1rem; */
    }
    .navt {
        display: flex;
        position: relative;
        height: 100%;
        width: 100%;
        display: inline-flex;
        transition: transform 0.5s ease;
      }
    .php{
        z-index: 100;
        height: 5rem;
        width: 5rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .php[data-id="1"]::after {
        z-index: 9999;
        display: flex;
        height: 25%;
        width: 80%;
        position: absolute;
        justify-content: center;
        align-items: center;
        text-align: center;
        content: "動物紋";
        color: var(--gg);
        font-size: 11px;
        letter-spacing: 1.2;
        font-family: "Zen Maru Gothic", serif;
        border-radius: 1rem;
        border: 1px solid var(--gg);
        top: 105%;
      }
      .php[data-id="2"]::after {
          z-index: 9999;
          display: flex;
          height: 25%;
          width: 80%;
          position: absolute;
          justify-content: center;
          align-items: center;
          text-align: center;
          content: "符號紋";
          color: var(--gg);
          font-size: 11px;
          letter-spacing: 1.2;
          font-family: "Zen Maru Gothic", serif;
          border-radius: 1rem;
          border: 1px solid var(--gg);
          top: 105%;
    }
    .php[data-id="3"]::after {
        z-index: 9999;
        display: flex;
        height: 25%;
        width: 80%;
        position: absolute;
        justify-content: center;
        align-items: center;
        text-align: center;
        content: "圖騰紋";
        color: var(--gg);
        font-size: 11px;
        letter-spacing: 1.2;
        font-family: "Zen Maru Gothic", serif;
        border-radius: 1rem;
        border: 1px solid var(--gg);
        top: 105%;
  }
  .php[data-id="4"]::after {
      z-index: 9999;
      display: flex;
      height: 25%;
      width: 80%;
      position: absolute;
      justify-content: center;
      align-items: center;
      text-align: center;
      content: "植物紋";
      color: var(--gg);
      font-size: 11px;
      letter-spacing: 1.2;
      font-family: "Zen Maru Gothic", serif;
      border-radius: 1rem;
      border: 1px solid var(--gg);
      top: 105%;
}
.php[data-id="5"]::after {
    z-index: 9999;
    display: flex;
    height: 25%;
    width: 80%;
    position: absolute;
    justify-content: center;
    align-items: center;
    text-align: center;
    content: "山水紋";
    color: var(--gg);
    font-size: 11px;
    letter-spacing: 1.2;
    font-family: "Zen Maru Gothic", serif;
    border-radius: 1rem;
    border: 1px solid var(--gg);
    top: 105%;
}
.php[data-id="6"]::after {
    z-index: 9999;
    display: flex;
    height: 25%;
    width: 80%;
    position: absolute;
    justify-content: center;
    align-items: center;
    text-align: center;
    content: "和風紋";
    color: var(--gg);
    font-size: 11px;
    letter-spacing: 1.2;
    font-family: "Zen Maru Gothic", serif;
    border-radius: 1rem;
    border: 1px solid var(--gg);
    top: 105%;
}
    .php::before{
        z-index: 10;
        height: var(--after-h, 5rem); /* 預設 0 */
        width: 5rem;
        content: '';
        display: block;
        position: absolute;
        top: var(--after-top, 40); 
        left: var(--after-left, 0);
        background-image: url('bmgg.svg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transition: height 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    .php img{
        z-index: 100;
        height: 5rem;
        width: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        object-fit: cover;
        /* scroll-snap-align: center; */
        opacity: 1;
        --fill-color: #CECBC6; 
        background-color: var(--fill-color);
        mask-image: url('bmg.svg');
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        -webkit-mask-image: url('bmg.svg');
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        transition: background-color 0.5s ease;
        /* border: 1px solid black; */
      }
      .spacer {
        flex: 0 0 5rem; /* 讓左右的空白占位元素也能參與置中 */
      }
      .space {
        flex: 0 0 10%; /* 讓左右的空白占位元素也能參與置中 */
      }
      .r1{
        z-index: 49;
        display: flex;
        flex-direction: column;
        position: relative;
        height: 90%;
        width: 100%;
      }
    .phw{
        height: 75%;
        width: 100vw;
        position: relative;
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }
    #phw3 {
        white-space: pre-line;
    }
    .phwp{
        height: 17%;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .r2{
        z-index: 46;
        height: 200vh;
        width: 100%;
        position: absolute;
        display: none;
        flex-direction: column;
        overflow: auto;
    }
    .main{
        height: 200vh;
        width: 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }
    .mg{
        position: relative;
        display: flex;
        flex-direction: column;
        color: var(--cc);
        align-items: center;
        justify-content: start;
        height: 50vh;
        width: 100%;
        gap: 4%;
    }
    .a2{
        position: relative;
        display: flex;
        height: 42%;
        width: 85%;
        align-items: end;
        font-size: 2rem;
        font-weight: bolder;
        letter-spacing: .2rem;
    }
    .b2{
        position: relative;
        display: flex;
        height: 30%;
        width: 85%;
    }
    .c2{
        position: relative;
        display: flex;
        height: 28%;
        width: 85%;
        font-size: 2rem;
        font-weight: bolder;
        letter-spacing: .3rem;
        justify-content: space-between;
    }
    .c2 span{
        display: flex;
        position: relative;
        left: 60%;
    }
    .p1{
        position: absolute;
        display: flex;
        height: 65%;
        top: 45%;
        left: 15%;
    }
    .unnu{
        position: relative;
        display: flex;
        top: 2vh;
        height: 8vh;
        width: 100%;
    }
    .unnu1{
        position: relative;
        display: flex;
        height: 8vh;
        width: 54vh;
        justify-content: start;
        align-items: start;
        gap: 1vh;
        animation: unnu 15s linear infinite;
}
@keyframes unnu {
    to {
      transform: translateX(-100%);
    }
}
    .unnu0{
        display: flex;
        height: 8vh;
        width: 8vh;
        position: relative;
    }
    .phone1{
        height: 10vh;
        margin: 10vh 0;
        width: 85vw;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        list-style: none;
        font-size: 9px;
        border: 1px solid black;
    }
    .ppw1{
        height: 20%;
        font-size: 18px;
        font-family: "Noto Sans", serif;
        font-weight: bolder;
        border: 1px solid black;
    }
    .ppw1 p{
        display: flex;
        position: relative;
        height: 100%;
        width: 100%;
        /* border: 1px solid black; */
    }
    .ppw2{
        margin: 3% 5%;
        text-align: center;
        line-height: 190%;
    }
    .phone2{
        height: 25vh;
        width: 60vw;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        list-style: none;
        font-size: 9px;
        left: 30%;
        /* border: 1px solid black; */
    }
    .p2pw1{
        font-size: 18px;
        font-family: "Noto Sans", serif;
        font-weight: bolder;
    }
    .p2pw2{
        margin: 3% 5%;
        text-align: center;
        line-height: 190%;
    }
    .pppp{
        display: flex;
        position: absolute;
        height: 110vw;
        width: 110vw;
        top: 32%;
        right: 40%;
    }
    .pppp img{
        display: flex;
        position: relative;
        transform: rotate(200deg);
    }
    .pppp1{
        display: flex;
        position: absolute;
        height: 50vw;
        top: 63%;
        left: 40%;
    }
    .pppp2{
        display: flex;
        position: absolute;
        height: 25vh;
        width: 85vw;
        bottom: 10%;
        justify-content: center;
    }
    .pppp2 img{
        object-fit: contain;
    }
    .phone3{
        height: 25vh;
        width: 80vw;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        list-style: none;
        font-size: 9px;
        /* border: 1px solid black; */
    }
    .p3pw1{
        font-size: 18px;
        font-family: "Noto Sans", serif;
        font-weight: bolder;
    }
    .p3pw2{
        margin: 3% 5%;
        text-align: center;
        line-height: 190%;
    }
    .phone4{
        height: 25vh;
        width: 65vw;
        position: relative;
        display: flex;
        right: 5%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        list-style: none;
        font-size: 9px;
        /* border: 1px solid black; */
    }
    .p4pw1{
        font-size: 18px;
        font-family: "Noto Sans", serif;
        font-weight: bolder;
    }
    .p4pw2{
        margin: 3% 5%;
        text-align: center;
        line-height: 190%;
    }
    .r3{
        position: absolute;
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        height: 300vh;
        overflow: auto;
    }
    .cess0{
        z-index: 30;
        position: relative;
        display: flex;
        flex-direction: column;
        top: 40vh;
        height: 250vh;
        width: 100vw;
        align-items: center;
        background-color: var(--gg);
        overflow-y: auto;
        scroll-behavior: smooth;
    }
    .c1p{
        position: relative;
        display: flex;
        height: 5vh;
        width: 80vw;
        margin: 2rem 2rem;
        transition: all 1s ease;
    }
    .c1p0{
        position: relative;
        display: flex;
        height: 33vh;
        width: 80vw;
    }
    .c1p1{
        position: absolute;
        display: flex;
        opacity: 0;
        top: 28%;
        transition: all 1s ease;
        align-items: end;
    }
    .cess2 .c1p02{
        position: absolute;
        display: flex;
        opacity: 1;
        top: 15%;
        transition: all 0.6s ease;
        align-items: end;
    }
    .cess111{
        position: relative;
        display: flex;
        flex-direction: column;
        height: 10vh;
        width: 100%;
        align-items: center;
        border-radius: 0 2rem 0 0;
        border-top: 1px solid black;
    }
    .cess1, .cess2, .cess3, .cess4, .cess5 {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 10vh;
        width: 100%;
        align-items: center;
        border-radius: 0 2rem 0 0;
        border-top: 1px solid black;
        overflow: hidden;
        transition: all 1s ease;
    }
    .cess11, .cess22, .cess33, .cess44, .cess55{
        position: relative;
        display: flex;
        z-index: 30;
        width: 90vw;
        border-radius: 2rem;
        margin: .5rem;
        border: 1px solid black;
        transition: all 0.6s ease;
        background-color: var(--gg);
        box-shadow: 0 8px 5px rgba(151, 141, 132, 0.2);
    }
    .cpic1, .cpic2, .cpic3, .cpic4, .cpic5{
        position: absolute;
        display:flex;
        height: 8rem;
        width: 45%;
        margin: 2rem 0;
        right: 2rem;
        border-radius: .3rem;
        overflow: hidden;
        clip-path: inset(0 0 0 100%);
        transition: clip-path 0.7s ease-out;
    }
    .cpic1 img, .cpic2 img, .cpic3 img, .cpic4 img, .cpic5 img{
        object-fit: cover;
        width: 100%;
        display: flex;
        position: relative;
    }
    .clip-open {
        clip-path: inset(0 0 0 0%);
      }
    .cess11{
        height: 52vh;
    }
    .cess22{
        height: 46vh;
    }
    .cess33{
        height: 38vh;
    }
    .cess44{
        height: 52vh;
    }
    .cess55{
        height: 42vh;
    }
    .cess11 .c1p1 {
        opacity: 1;
    }
    .cess22 .c1p1 {
        opacity: 1;
    }
    .cess33 .c1p1 {
        opacity: 1;
    }
    .cess44 .c1p1 {
        opacity: 1;
    }
    .cess55 .c1p1 {
        opacity: 1;
    }
    .cess11 .c1p {
        font-size: 1.7rem;
    }
    .cess22 .c1p {
        font-size: 1.7rem;
    }
    .cess33 .c1p {
        font-size: 1.7rem;
    }
    .cess44 .c1p {
        font-size: 1.7rem;
    }
    .cess55 .c1p {
        font-size: 1.7rem;
    }
      .content{
        position: absolute;
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
    }
    .ctent1{
        z-index: 100;
        position: fixed;
        display: flex;
        height: 100vw;
        width: 100vw;
        justify-content: center;
        align-items: end;
        background-color: var(--aa);
        transform: translateX(100%);
        transition: transform 1s ease;
    }
    .ctent2{
        z-index: 100;
        position: fixed;
        display: flex;
        height: 100vw;
        width: 100vw;
        top: 100vw;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        transition: transform 1s ease;
        transform: translateX(-100%);
    }
    .ctent2 video{
        width: 100%;
        height: 100%;
        object-fit: cover; /* or contain 看你要裁切還是完整 */
        display: block;
    }
    .slide-in {
        transform: translateX(0%);
        /* transition-delay: 3s; */
    }
    .slide-out {
        transform: translateX(100%);
        transition-delay: 1.2s;
    } 
    .slide-outt {
        transform: translateX(-100%);
        transition-delay: 1.2s;
    } 
    .cato{
        height: 60%;
        width: 85%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: start;
        color: var(--gg);
        letter-spacing: 1.4;
        font-weight: bold;
        line-height: 3rem;
    }
    .j{
        z-index: 100;
        display: flex;
        position: relative;
        height: 20%;
        justify-content: start;
        align-items: start;
        text-align: top;
    }
    .j li {
        display: flex;
        position: relative;
        height: 100%;
        opacity: 0;
        list-style-type: none;
        transform: translateY(100%);
        transition: opacity 1s ease, transform 1s ease; /* 修改為 transition 而非 animation */
    }
    .show {
        transform: translateY(0%) !important;
        opacity: 1 !important;
    }
    .nosh{
        transform: translateY(50%) !important;
        opacity: 0 !important;

    }
    .fixed-j {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: var(--left);
        top: var(--top);
        height: var(--h);
        width: var(--w);
        color: var(--gg);
        /* transform: translateY(22%); */
        z-index: 9999;
        font-weight: bold;
        letter-spacing: 1.4;
        text-align: start;
        justify-content: center;
        pointer-events: none;
        transition: all 2s ease;
    }
    .tin-1 {
        z-index: 100;
        transform: translateY(22%);
        opacity: 0;
    }
    .tin-2 {
        z-index: 46;
        display: flex;
        top: 23%;
        width:90%;
        font-size: 2rem;
        letter-spacing: 1.4;
        line-height: 3rem;
        justify-content: start;
        align-items: start;
        color: var(--cc);
    }  
    .tin-3 {
        z-index: 20;
        display: flex;
        position: fixed;
        top: 13%;
        width: 80%;
        left: 9%;
        font-size: 2rem;
        line-height: 3rem;
        letter-spacing: 1.4;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;   
        justify-content: start;
        align-items: start;
        color: var(--cc);
    }  
    .tin-4 {
        z-index: 49;
        display: flex;
        flex-direction: column;
        width: 30%;
        font-size: 2rem;
        line-height: 3rem;
        letter-spacing: 1.4;
        white-space: normal;   
        justify-content: start;
        align-items: start;
        color: var(--cc);
    }  
    .tin-5 {
        z-index: 49;
        display: flex;
        flex-direction: column;
        width: 30%;
        top: 20%;
        font-size: 2rem;
        line-height: 3rem;
        letter-spacing: 1.4;
        white-space: normal;   
        justify-content: start;
        align-items: start;
        color: var(--cc);
    }  
    .color{
        opacity: 0 !important;
        transition: all 2s ease;
        transition-delay: .8s;
    }
    .r4{
        height: 210vh;
        width: 100vw;
        position: absolute;
        display: none;
        flex-direction: column;
        align-items: center;
        overflow: auto;
    }
    .work{
        z-index: 48;
        height: 100vw;
        width: 100vw;
        position: relative;
        display: flex;
        background-color: #fff;
    }
    .work img{
        display: flex;
        position: relative;
        height: 100%;
    }
    .abme{
        z-index: 1000;
        display: flex;
        position: relative;
        z-index: 40;
        height: 30vh;
        width: 70%;
        font-size: 0.7rem;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--cc);
    }
    .o1{
        display: flex;
        position: relative;
        height: 10vh;
        width: 85%;
        margin: 20%;
        justify-content: center;
        align-items: center;
    }
    .o1 img{
        display: flex;
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .ot2{
        position: relative;
        display: flex;
        height: 30vh;
        width: 100%;
        justify-content: center;
        align-items: center;
        font-size: 0.7rem;
    }
    .ot21{
        position: absolute;
        display: flex;
        bottom: 5%;
        width: 70%;
        left: 5%;
        justify-content: start;
        color: var(--cc);
    }
    .ot21w{
        display: flex;
        position:relative;
        height: 100%;
        width: 100%;
        align-items: start;
        justify-content: start !important;
    }
    .ot21w p{
        text-align: left;
    }
    .ot22{
        position: relative;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .ot21w{
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .ot22 img{
        width: 100%;
        display: flex;
        position: relative;
        height: 30%;
        object-fit: cover;
    }
    .o3{
        height: 20vh;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: end;
        margin-bottom: 10%;
    }
    .o33{
        display: flex;
        position: relative;
        height: 100%;
        width: 60%;
    }
    .o33 img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: flex;
        position: relative;
    }
    .o4{
        height: 20vh;
        width: 100%;
        position: relative;
        display: flex;
        margin-bottom: 10%;
        margin-left: 15%;
    }
    .o44{
        display: flex;
        position: relative;
        height: 100%;
        width: 60%;
    }
    .o44 img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: flex;
        position: relative;
    }
    .olast{
        display: flex;
        position: relative;
        height: 5vh;
        width: 100%;
        font-size: 2rem;
        letter-spacing: .5rem;
        justify-content: end;
        margin-right: 11%;
        color: var(--cc);
        margin-bottom: 2%;
    }
    .olast2{
        display: flex;
        position: relative;
        height: 3vh;
        width: 100%;
        font-size: 1rem;
        justify-content: end;
        margin-right: 15%;
        color: var(--cc);
    }
    .fixhome{
        z-index: 1100;
        position: fixed;
        display: flex;
        height: 10%;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .under{
        z-index: 47;
        height: 10%;
        width: 100%;
        display: flex;
        position: fixed;
        background-color: var(--gg);
    }
    .fix{
        z-index: 100;
        position: relative;
        height: 100%;
        width: 90%;
        display: flex;
        border-bottom: 1px solid var(--cc);
        justify-content: space-between;
    }
    .fix img{
        position: relative;
        display: flex;
        height: 40%;
        top: 30%;
        margin: 1%;
        left: 3%;
    }
    .menu {
        top: 45%;
        width: 10%;
        height: 20%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .menu span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: #333;
        border-radius: 2px;
        transition: 0.3s ease;
        transform-origin: center;
      }
      
      /* 當加上 .active 時的變化 */
      .menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }
      
      .menu.active span:nth-child(2) {
        opacity: 0;
      }
      
      .menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(0px, -3px);
      }
      
    .phwp img{
        position: relative;
        display: flex;
        height: 40%;
        margin:1rem 2rem;
    }
    .phw2{
        height: 40%;
        width: 77%;
        display: flex;
        position: relative;
        font-size: 1rem;
        align-items: center;
        justify-content: center;
        /* border: 1px solid black; */
    }
    .phw2p{
        display: flex;
        height: 100%;
        width: 100%;
        position: absolute;
        align-items: center;
        justify-content: center;
        /* opacity: 0; */
    }
    .phw2p img{
        position: relative;
        height: 120%;
        opacity: 0;
    }
    .phw2p svg{
        display: flex;
        position: absolute;
        height: 120%;
        width: 120%;
    }
    #svg1{
        stroke-dasharray: 3422;
        stroke-dashoffset: 3422;
    }
    .run{
        animation: draw 2.5s cubic-bezier(0.7, 0.1, 0.5, 0.3) forwards;
    }
    @keyframes draw {
      to {
        opacity: 1;
        stroke-dashoffset: 0;
      }
    }
    .w {
        opacity: 1 !important;
        transition: opacity 3s ease;
        visibility: visible;
        transition: opacity 5s ease, visibility 0s 2s;
      }
    .ot{
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        align-items: center;
        height: 40%;
        width: 100%;
        /* border: 1px solid black; */
    }
    .phw1{
        height: 25%;
        width: 95%;
        display: flex;
        position: relative;
        font-size: 2.5rem;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-weight: bolder;
        font-family: "Noto Sans", serif;
        letter-spacing: 7;
        margin-top: 0%;
        overflow: hidden;
        /* border: 1px solid black; */
    }
    .but{
        display: flex;
        position: absolute;
        height: 100%;
        width: 80vw;
        align-items: center;
        justify-content: space-between;
    }
    #prevBtn {
        display: flex;
        align-items: center;
        justify-content: left;
        width: 3rem;
        height: 3rem;
        position: relative;
        overflow: hidden;
      }
      #nextBtn {
        display: flex;
        align-items: center;
        justify-content: right;
        width: 3rem;
        height: 3rem;
        position: relative;
        overflow: hidden;
      }
      .icon-track, .icon-trac {
        display: flex;
        position: relative;
        height: 100%;
        width: 200%;
        justify-content: center;
        align-items: center; 
      }
      .material-icons {
        display: flex;
        position: relative;
        color: #333;
        height: 3rem;
        width: 3rem;
        justify-content: center;
        align-items: center;
      }
      .icon-track img{
        display: flex;
        position: relative;
        height: 100%;
        width: 100%;
        transform: scale(0.3);
      }
      .icon-trac img{
        display: flex;
        position: relative;
        height: 100%;
        width: 100%;
        transform: scale(0.3) rotate(180deg);
      }
      .animate-once {
        animation: moveLeft 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite, 
        pulse 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
      }
      @keyframes moveLeft {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      
      /* 縮放動畫 */
      @keyframes pulse {
        0%, 100% {
          scale: 1;
        }
        50% {
          scale: 1.3;
        }
      }
      .animate-twice {
        animation: moveR 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite, 
        pulse 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
      }
      @keyframes moveR {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(50%);
        }
      }
      
    .phw4{
        position: relative;
        display: flex;
        height: 10%;
        width: 100%;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: 1.1rem;
        font-weight: bold;
        top: 8%;
        /* border: 1px solid black; */
    }
    .phw3{
        height: 40%;
        width: 100%;
        display: flex;
        position: relative;
        font-size: 0.7rem;
        font-weight: 400;
        font-weight: 600;
        justify-content: center;
        line-height: 2;
        margin-top: 6%;
        /* border: 1px solid black; */
    }
    #phw01, #phw02, #phw03, #phw04, #phw05, #phw06, #phw07, #phw08, #phw09, #phw10, #phw11, #phw12, #phw13, #phw14, #phw15, #phw16, #phw17, #phw18, #phw19, #phw20{
        position: absolute;
        display: flex;
        transform: translateY(100%);
        transition: transform 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    .fade-in {
        animation: fadeIn 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    .anop4{
        display: flex;
        position: relative;
        height: 120vh;
        width: 100vw;
        border: 1px solid black;
        background-color: #fff;
    }
    .up{
        transform:translateY(0) !important; 
        opacity: 1;
    }
    .up2{
    transform:translateY(-120%) !important;
    }
    .r5{
        position: absolute;
        display: none;
        flex-direction: column;
        width: 100%;
        height: 95vh;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
    }
    .mye{
        top: -10%;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 50vw;
        width: 50vw;
        align-items: center;
        text-align: center;
        font-weight: bolder;
        font-family: "Zen Maru Gothic", serif;
    }
    .mye img{
        position: relative;
        display: flex;
        object-fit: cover;
        height: 100%;
        border-radius: 1rem;
    }
    .mye h2{
        width: 130%;
        font-size: 14px;
        letter-spacing: 1.2;
        line-height: 2;
        font-weight: bolder;
        font-family: "Zen Maru Gothic", serif;
        margin-top: 5% ;
    }
    #svg2{
        stroke-dasharray: 3225 3225;
        stroke-dashoffset: 3225;
    }
    #svg3{
        stroke-dasharray: 9000;
        stroke-dashoffset: 9000;
    }
    #svg4{
        stroke-dasharray: 900;
        stroke-dashoffset: 900;
    }
    #svg5{
        stroke-dasharray: 1400;
        stroke-dashoffset: 1400;
    }
    #svg6{
        stroke-dasharray: 850;
        stroke-dashoffset: 850;
    }
    #svg7{
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
    }
    #svg8{
        stroke-dasharray: 1200;
        stroke-dashoffset: 1200;
    }
    #svg9{
        stroke-dasharray: 3500;
        stroke-dashoffset: 3500;
    }
    #svg10{
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
    }
    #svg11{
        stroke-dasharray: 1550;
        stroke-dashoffset: 1550;
    }
    #svg12{
        stroke-dasharray: 7000;
        stroke-dashoffset: 7000;
    }
    #svg13{
        stroke-dasharray: 2450;
        stroke-dashoffset: 2450;
    }
    #svg14{
        stroke-dasharray: 4000;
        stroke-dashoffset: 4000;
    }
    #svg16{
        stroke-dasharray: 4750;
        stroke-dashoffset: 4750;
    }
    #svg15{
        stroke-dasharray: 800;
        stroke-dashoffset: 800;
    }
    #svg18{
        stroke-dasharray: 980;
        stroke-dashoffset: 980;
    }
    #svg17{
        stroke-dasharray: 3200;
        stroke-dashoffset: 3200;
    }
    #svg19{
        stroke-dasharray: 3000;
        stroke-dashoffset: 3000;
        transition: opacity 1s;
    }
    #svg20{
        stroke-dasharray: 600;
        stroke-dashoffset: 600;
        transition: opacity 1s;
    }
    .scroll{
        display: none;
    }
    .sad{
        display: none;
    }
    .page15{
        display: none;
    }
    .page3{
        display: none;
    }
    .p3-4{
        display: none;
    }
    .p3-42{
        display: none;
    }
    .page05{
        display: none;
    }
    .page35{
        display: none;
    }
    .page4{
        display: none;
    }
}