* {
    cursor: none;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Chiron GoRound TC', 'Poppins', 'Noto Sans TC', sans-serif;
    overflow: hidden;
}

body.noClick * {
    pointer-events: none !important;
}

:root {
    --bg--: #d3d3d3;
    --p-font-color--: #f1f1f1;
    --p-hover--: #303030;
    --p-off--: #929292;
    --biggest-font-size: 2rem;
    --h1-font-size: 1.75rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: 1rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
}

a {
    text-decoration: none;
    color: var(--p-font-color--);
    cursor: none;
}

.main {
    position: relative;
    background: var(--bg--);
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

#cursorOff,
#cursorOn {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    transition-duration: 0.125s;
    transition: opacity .25s ease-in-out;
    z-index: 9999;
}

#cursorOff {
    width: 1rem;
    height: 1rem;
    background-color: #1d1d1d;
}

#cursorOn {
    width: 56px;
    height: 56px;
    border: .125rem solid var(--p-off--);
    opacity: 0;
    transform: scale(0);
    transition: transform .5s ease-in-out, opacity .25s ease-in-out;
}

#cursorOn.active {
    opacity: 1;
    transform: scale(1);
}

#pageNext {
    position: fixed;
    right: 5rem;
    top: 50%;
    z-index: 99;
}

#pageNext svg {
    fill: #929292;
    transition: fill .313s cubic-bezier(0.76, 0, 0.24, 1);
}

#pageNext:hover svg {
    fill: var(--p-hover--);
}

.sectionTitle {
    font-size: var(--h1-font-size);
    text-align: center;
    padding: 1.75rem 0;
}

.homeIcon {
    width: 2rem;
    height: 2rem;
    position: fixed;
    left: 6rem;
    top: 2rem;
    z-index: 99999;
}

.homeIcon:hover svg {
    fill: var(--p-hover--);
}

.homeIcon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    fill: var(--p-off--);
    transition: all .3s ease-in-out;
}

.cover {
    width: 100%;
    height: 100%;
    position: relative;
    isolation: isolate;
    background: var(--bg--);
}

.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    filter: url(#noiseFilter);
    opacity: .5;
    mix-blend-mode: overlay;
}

.cover .coverWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: end;
    gap: 1.5rem;
}

.cover .coverWrapper:hover~#cursorOff {
    opacity: 0;
}

.cover .coverWrapper:hover~#cursorOn {
    opacity: 1;
}

.cover .coverWrapper .coverText-1,
.cover .coverWrapper .coverText-2 {
    position: relative;
    display: inline-flex;
    line-height: 1;
    color: #bebebe;
    font-weight: 700;
    overflow: hidden;
    transition: all .125s ease-in-out;
}

.cover .coverWrapper .coverText-1 {
    font-size: 5rem;
}

.cover .coverWrapper .coverText-2 {
    font-size: 2rem;
}

.cover .coverWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg--);
    border-radius: .75rem;
    z-index: 1;
    mix-blend-mode: difference;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path .8s cubic-bezier(0.76, 0, 0.24, 1);
}

.cover .coverWrapper:hover::before {
    clip-path: circle(150% at 50% 50%);
}

.main .menu {
    position: fixed;
    left: 5rem;
    top: 50%;
    border-radius: .625rem;
    padding: 2rem 1rem;
    overflow: hidden;
    background: transparent;
    transform: translateY(-50%);
    z-index: 99;
}

.main .menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(190, 190, 190, .5);
    filter: blur(.313rem);
    border-radius: inherit;
    z-index: 0;
}

.main .menuWrapper,
.main .menuList,
.main .menuItem {
    position: relative;
    z-index: 1;
}

.main .menuWrapper {
    width: 100%;
}

.main .menuList {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main .menuItem {
    position: relative;
    width: 8rem;
    font-size: 1.125rem;
    color: var(--p-font-color--);
    padding: .75rem 0;
    text-align: center;
    overflow: hidden;
    z-index: 0;
}

.main .menuItem::before {
    content: "";
    inset: 0;
    position: absolute;
    background-color: transparent;
    transform: scaleX(0);
    transition: all .3s ease-in-out;
    z-index: -1;
}

.main .menuItem:hover::before {
    background-color: var(--p-hover--);
    transform: scaleX(1);
    filter: blur(.125rem);
    inset: 0;
}

.page {
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 0;
}

.page.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
    z-index: 10;
    box-sizing: border-box;
}

.page.fade-out {
    opacity: 0;
}

.page.enter-right.active,
.page.enter-left.active {
    transform: translateX(0);
    opacity: 1;
}

.page.exit-left {
    opacity: 0;
    transform: translateX(-100%);
    z-index: 10;
}

.page.exit-right {
    opacity: 0;
    transform: translateX(100%);
    z-index: 5;
}

.pageWrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

}

#about .aboutWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10rem;
    box-sizing: border-box;
    align-items: center;
}

#about .aboutContent {
    width: 100%;
    height: 100%;
    padding: 5rem 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.aboutMini,
.aboutResume,
.aboutSkill {
    width: 100%;
    height: auto;
    padding: .5rem 10rem;
    box-sizing: border-box;
}

.aboutContent .aboutIntro {
    width: 100%;
    font-size: var(--normal-font-size);
    line-height: 1.5;
    letter-spacing: .125rem;
    text-align: justify;
}

.aboutImg {
    position: relative;
    max-width: 400px;
    height: 55%;
    max-height: 600px;
    aspect-ratio: 1;
    border-radius: 1.563rem;
    background-color: rgba(241, 241, 241, .2);
    clip-path: url(#waveClip);
    transform: translate(0, 12%);
}

.aboutImg::before {
    content: "";
    display: block;
    inset: 50% 0 0 0;
    border-radius: 1.563rem;
}

.aboutImg img {
    width: 100%;
    height: 110%;
    position: absolute;
    transform: translate(0, -12%);
    display: inline-block;
    margin: 0;
    padding: 0;
    object-fit: cover;
}

.aboutImg.mini {
    display: none;
}

.aboutResume .resumeWrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.aboutWrapper .resumeEducation {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.aboutWrapper .resumeWork {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.aboutResume .resumeIcon {
    width: 100%;
    height: 3rem;
    padding-bottom: 1rem;
}

.aboutResume .resumeIcon svg {
    width: 100%;
    height: 100%;
    fill: var(--p-hover--);
}

.aboutResume .resumeIcon img {
    width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

.aboutResume .resumeTimeline {
    width: 100%;
}

.aboutResume .workWrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding-left: .75rem;
}

.aboutResume .workItem {
    position: relative;
    width: 100%;
    text-align: start;
}

.aboutResume .workTimeline {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

}

.aboutResume .dot {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999rem;
    background-color: var(--p-off--);
    z-index: 2;
}

.aboutResume .dot:hover,
.aboutResume .dot.active {
    background-color: var(--p-hover--);
}

.aboutResume .timeline {
    position: absolute;
    left: 0;
    width: 100%;
    border-bottom: .188rem solid var(--p-off--);
}

.aboutResume .work {
    position: absolute;
    display: flex;
    box-sizing: border-box;
    padding-left: 1.5rem;
    gap: 1.5rem;
    pointer-events: none;
    opacity: 0;
    transition: all .6s ease-in-out;
}

.aboutResume .work.active {
    position: relative;
    opacity: 1;
}

.aboutResume .workName {
    display: flex;
    flex-direction: column;
}

.aboutResume .workTitle {
    font-size: var(--h2-font-size);
    letter-spacing: .125rem;
}

.aboutResume .workTitle {
    font-size: var(--h3-font-size);
}

.aboutResume .workSub {
    font-size: var(--small-font-size);
}

.aboutResume .workYear {
    font-size: var(--small-font-size);
    margin-top: auto;
}

.aboutResume .workList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aboutSkill .skillList {
    display: flex;
    justify-content: space-around;
}

.aboutSkill .skillItem {
    display: flex;
    gap: 1.5rem;
}

.aboutSkill .skillIcon {
    width: 3rem;
    height: 3rem;
    z-index: 2;
}

.aboutSkill .skillItem:hover svg {
    fill: var(--p-hover--);
}

.aboutSkill .skillIcon svg {
    width: 100%;
    height: 100%;
    fill: var(--p-off--);
    border-radius: .313rem;
}

.aboutSkill .skillBar {
    display: none;
    flex-direction: column;
    opacity: 0;
    max-width: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all .3s ease-in-out;
}

.aboutSkill .skillBar.show {
    opacity: 1;
    transform: scaleX(1);
    max-width: 18.75rem;
}

.aboutSkill .barList {
    position: relative;
    width: auto;
    height: 1.5rem;
    aspect-ratio: 5/.5;
}

.aboutSkill .barBg {
    width: 100%;
    height: 100%;
    border-radius: 999rem;
    background-color: rgba(241, 241, 241, .5);
}

.aboutSkill .barFill {
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: 100%;
    border-radius: 999rem;
    background-color: var(--p-hover--);
}

.aboutSkill .barNumber {
    font-size: var(--small-font-size);
    margin-top: auto;
}

#graphic .pageWrapper,
#web .pageWrapper {
    overflow-y: auto;
}

#graphic .graphicContent {
    display: flex;
    padding: 15vh 0;
    margin: 0 10rem;
    box-sizing: border-box;
}

.graphicShow {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 9999;
}

.graphicShow.active {
    opacity: 1;
    pointer-events: auto;
}

.graphicShow .popupImage {
    width: 45%;
}

/* 禁止全頁點擊（只保留放大圖區域） */
body.noClick * {
    pointer-events: none !important;
}

body.noClick .graphicShow,
body.noClick .closeBtn,
body.noClick .graphicShow * {
    pointer-events: auto !important;
}

.graphicContent .graphicShow .closeBtn {
    width: 2.5rem;
    height: 2.5rem;
    z-index: 999;
    position: absolute;
    right: 25vw;
    top: 5vh;
}

.graphicContent .graphicShow .closeBtn svg {
    width: 100%;
    height: 100%;
    fill: var(--p-off--);
}

.graphicContent .graphicShow .closeBtn:hover svg {
    fill: var(--p-font-color--);
}

.graphicContent .graphicText {
    width: 40%;
    margin-left: 15.5rem;
    box-sizing: border-box;
}

.graphicText .graphicInfo {
    position: sticky;
    top: 5vh;
    margin: 0;
}

.graphicText .graphicInfo h2 {
    font-size: var(--h1-font-size);
    margin: 0;
    padding: 0;
}

.graphicText .graphicInfo p {
    font-size: var(--normal-font-size);
}

.graphicText .graphicInfo img {
    width: 7.5rem;
    height: 7.5rem;
    margin: 0;
    padding-right: .75rem;
}

.graphicContent .graphicGrid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 60%;
}

.graphicContent.graphicNormal {
    width: 50%;
}

.graphicGrid.graphicFull {
    width: 100%;
}

.graphicGrid .graphicImg {
    padding: 1.563rem;
    width: 100%;
    height: 31.25rem;
}

.graphicImg.graphicNormal {
    width: 33.33%;
    padding: .625rem;
    height: auto;
    margin: 0;
    box-sizing: border-box;
    transition: scale .3s ease-in-out;
}

.graphicImg.graphicNormal:hover {
    scale: 1.0313;
}

.graphicImg.graphicFull {
    width: 100%;
    padding: .625rem;
}

.graphicImg.graphicMiddle {
    width: 50%;
    height: auto;
    padding: .625rem;
    box-sizing: border-box;
}

.graphicImg img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.graphicImg img.full {
    display: block;
    object-fit: cover;
    width: auto;
    height: 100%;
    margin: auto;
}

.graphicImg img.middle {
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
    margin: auto;
}

#web .webContent {
    padding: 10rem 10rem 0 20rem;
    box-sizing: border-box;
    display: flex;
}

.webContent .webThumbnail {
    width: 30%;
    height: auto;
    padding: 1.75rem;
    padding-right: 3rem;
    box-sizing: border-box;
}

.webContent .webThumbnail .webTitle {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 5vh;
    margin: 0;
}

.webContent .webThumbnail .webTitle .thumbnailImg {
    width: 100%;
}

.webThumbnail .webTitle .thumbnailImg img {
    width: 100%;
    height: 100%;
    border-radius: 1.563rem;
    box-shadow: 0 0 .313rem rgba(241, 241, 241, .7);
}

.webContent .webThumbnail .webTitle .webText {
    display: flex;
    padding: 0 .313rem;
    box-sizing: border-box;
    align-items: center;
}

.webContent .webThumbnail .webTitle .webText h2 {
    font-size: var(--h2-font-size);
}

.webContent .webThumbnail .webTitle .webText svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--p-off--);
    transition: fill .3s ease-in-out;
    display: inline-block;
    vertical-align: bottom;
    padding-left: .313rem;
}

.webContent .webThumbnail .webTitle .webText svg:hover {
    fill: var(--p-hover--);
}

.webContent .webThumbnail .webTitle .webText svg:hover~.tooltip {
    visibility: visible;
}

.webContent .webThumbnail .webTitle .webText .tooltip {
    visibility: hidden;
    background-color: var(--p-hover--);
    color: var(--p-font-color--);
    text-align: center;
    border-radius: .313rem;
    padding: .625rem;
    position: absolute;
    z-index: 1;
}

.webContent .webThumbnail .webTitle .webChoose {
    display: flex;
}

.webContent .webThumbnail .webTitle .webChoose .ChooseImg,
.webContent .webThumbnail .webTitle .webChoose .ChooseCodpen {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    padding: .313em;
    margin-right: .625rem;
    box-sizing: border-box;
    border-radius: .313rem;
    fill: var(--p-font-color--);
    background-color: var(--p-off--);
    transition: background-color .3s ease-in-out;
    z-index: 1000;
    border: none;
}

.webContent .webThumbnail .webTitle .webChoose svg {
    width: 100%;
    height: 100%;
    fill: var(--p-font-color--);
}

.webContent .webThumbnail .webTitle .webChoose .ChooseImg:hover,
.webContent .webThumbnail .webTitle .webChoose .ChooseCodpen:hover {
    background-color: var(--p-hover--);
}

.webContent .webView {
    width: 70%;
    padding: 1.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.webContent .webView .webPhoto {
    display: block;
    width: 100%;
}

.webContent .webView .webPhoto img {
    width: 100%;
    object-fit: cover;
}

.webContent .webView .webCode {
    display: none;
    width: 100%;
    height: 50rem;
}

.webContent .webView .webCode iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#video .pageWrapper .videoContent {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5rem;
}

.videoContent iframe {
    width: 60vw;
    height: 60vh;
    margin: auto;
}







/* =======================================
   頭像 <=1360px
   ======================================= */
@media (max-width: 1360px) {

    #about .aboutWrapper {
        padding: 0 8rem 0 16.5rem;
    }

    .aboutMini {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .aboutMini,
    .aboutResume,
    .aboutSkill {
        padding: 0;
    }

    .aboutText {
        width: 60%;
        padding: 0;
        padding-right: 3rem;
    }

    .aboutImg {
        display: none;
        clip-path: none;
        overflow: hidden;
    }

    .aboutImg::before {
        content: none;
    }

    .aboutImg.mini {
        display: block;
        height: 100%;
    }

    .aboutImg img {
        width: auto;
        height: 120%;
        position: absolute;
        transform: translate(5%, 0);
        display: inline-block;
        margin: 0;
        padding: 0;
        object-fit: cover;
    }

    .aboutContent .aboutIntro {
        width: auto;
    }



    #graphic .graphicContent {
        display: flex;
        padding: 10vh 0;
        margin: 0 5rem 0 2.5rem;
    }

    .graphicGrid .graphicImg {
        height: auto;
    }

    .graphicImg img.full {
        width: 100%;
        height: auto;
    }





}


/* =======================================
   📱 平板（Tablet）768px–1200px
   ======================================= */
@media (hover: none),
(max-width: 1200px) {

    #cursorOff,
    #cursorOn {
        display: none;
    }

    .main .menu {
        position: fixed;
        right: 4.5rem;
        left: unset;
        top: 3rem;
        border-radius: .625rem;
        padding: .5rem 1rem;
        overflow: hidden;
        background: transparent;
        z-index: 99999;
    }

    .main .menu::before {
        background-color: transparent;
        pointer-events: none;
    }

    .main .menuWrapper {
        display: flex;
        flex-flow: row-reverse;
    }

    .main .menuList {
        display: flex;
        gap: 1rem;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
    }

    .main .menuList.active {
        transform: scaleX(1);
    }

    #burger {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all 0.3s ease;
        padding-left: 1rem;
    }

    #burger div {
        width: 100%;
        background-color: var(--p-off--);
        border-radius: 0.625rem;
        transition: all 0.3s ease;
    }

    #burger.active div {
        background-color: var(--p-hover--);
    }

    #burger.active #burgerTop {
        transform: translateY(0.7rem) rotate(45deg);
    }

    #burger.active #burgerMiddle {
        opacity: 0;
    }

    #burger.active #burgerBottom {
        transform: translateY(-0.8rem) rotate(-45deg);
    }

    #burger #burgerTop,
    #burger #burgerMiddle,
    #burger #burgerBottom {
        width: 2rem;
        height: 0.125rem;
        margin: 0 auto;
        margin-bottom: .625rem;
        border-radius: .625rem;
    }

    #burger #burgerBottom {
        margin-bottom: 0;
    }

    .main .menuItem {
        width: auto;
        padding: 0 1rem;
        font-size: 1rem;
    }

    .main .menuItem:hover::before {
        background-color: transparent;
    }

    .main .menuItem a {
        color: var(--p-off--);
        display: inline-block;
        line-height: 1;
    }

    .homeIcon {
        left: auto;
        right: 2rem;
        top: 2rem;
        width: 1.75rem;
        height: 1.75rem;
    }

    .cover .coverWrapper {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding-left: 5rem;
    }

    .cover .coverWrapper .coverText-1 {
        font-size: 3.5rem;
    }

    .cover .coverWrapper .coverText-2 {
        font-size: 1.5rem;
    }

    /* About */
    #about .aboutWrapper {
        flex-direction: column;
        padding: 4rem 3rem;
        align-items: center;
    }

    .aboutImg.mini {
        height: 100%;
        align-self: flex-end;
    }

    .aboutMini,
    .aboutResume,
    .aboutSkill {
        padding: 0;
        padding-right: 5rem;
    }

    .aboutImg {
        transform: translate(0);
    }

    .aboutText {
        padding: 0 5rem;
    }

    /* Graphic */
    #graphic .graphicContent {
        flex-direction: column;
        margin: 0 7.5rem;
    }

    .graphicContent .graphicText {
        width: 100%;
        margin-left: 5rem;
        box-sizing: border-box;
    }

    .graphicContent .graphicGrid {
        width: 100%;
        justify-content: center;
    }

    /* Web */
    #web .webContent {
        flex-direction: column;
        padding: 5rem 7.5rem;
    }

    .webContent .webThumbnail,
    .webContent .webView {
        width: 100%;
        padding: 1rem 0;
    }

    .webContent .webThumbnail .webTitle {
        position: static;
        flex-direction: row;
        align-items: center;
    }

    .webContent .webThumbnail .webTitle .thumbnailImg {
        width: 60%;
    }

    .webContent .webThumbnail .webTitle .webText {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 2rem;
    }

    .webContent .webThumbnail .webTitle .webText svg {
        padding-left: 0rem;
    }

    /* Video */
    #video .pageWrapper .videoContent {
        left: 0;
        padding-left: 0;
    }

    .videoContent iframe {
        width: 80vw;
        height: 60vh;
    }
}

/* =======================================
   📱 手機（Mobile）小於768px
   ======================================= */
@media (max-width: 768px) {

    #pageNext {
        display: none;
    }

    .main .menu {
        right: 2.5rem;
        top: 2rem;
    }

    .main .menuItem {
        width: auto;
        padding: .5rem;
        font-size: 1rem;
    }

    .homeIcon {
        right: 1rem;
        top: 1rem;
        width: 1.8rem;
        height: 1.8rem;
    }

    .cover .coverWrapper {
        flex-direction: column;
        text-align: center;
        gap: .5rem;
        padding-left: 0;
    }

    .cover .coverWrapper .coverText-1 {
        font-size: 2.25rem;
    }

    .cover .coverWrapper .coverText-2 {
        font-size: 1.25rem;
    }

    /* 上下切換動畫 */
    .page.enter-up {
        animation: slideInFromBottom 0.6s ease forwards;
    }

    .page.enter-down {
        animation: slideInFromTop 0.6s ease forwards;
    }

    .page.slide-out-up {
        animation: slideOutUp 0.6s ease forwards;
    }

    /* 動畫定義 */
    @keyframes slideInFromBottom {
        0% {
            transform: translateY(100%);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideInFromTop {
        0% {
            transform: translateY(-100%);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideOutUp {
        0% {
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            transform: translateY(-100%);
            opacity: 0;
        }
    }



    .pageWrapper {
        padding: 2rem 0;
    }

    /* About */

    #about .aboutWrapper {
        padding: 2rem 1rem;
        flex-direction: column;
    }

    #about .aboutContent {
        padding: 0;
        overflow-y: auto;
    }

    .aboutMini,
    .aboutResume,
    .aboutSkill {
        padding: 0;
    }

    .aboutMini {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .aboutText {
        padding: 0 1rem;
        width: 100%;
        box-sizing: border-box;
    }

    .aboutImg.mini {
        width: 40%;
        height: auto;
        align-self: inherit;
    }

    .aboutResume .resumeWrapper {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .aboutWrapper .resumeEducation,
    .aboutWrapper .resumeWork {
        width: 100%;
    }

    .aboutResume .workWrapper {
        padding-left: 0;
        padding: 0 1rem;
    }

    .aboutResume .work {
        padding-left: 0rem;
        padding: 0 0.5rem;
        gap: 1rem;
    }

    .aboutSkill .skillList {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* Graphic */
    #graphic .graphicContent {
        margin: 5rem 1rem 0 1rem;
        padding: 5vh 0;
        flex-direction: column;
        box-sizing: border-box;
    }

    #graphic .pageWrapper,
    #web .pageWrapper {
        overflow-y: hidden;
    }

    .graphicWrapper {
        width: 100%;
        height: 100%;
        margin: 2rem 0;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .graphicContent .graphicText {
        margin: 0 0 1rem 0;
        width: 100%;
    }

    .graphicGrid .graphicImg {
        width: 100%;
        padding: .5rem 0;
    }

    /* Web */

    .webWrapper {
        width: 100%;
        height: 100%;
        margin: 2rem 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    #web .webContent {
        padding: 5rem 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .webContent .webThumbnail,
    .webContent .webView {
        width: 100%;
        padding: 0;
    }

    .webContent .webThumbnail .webTitle .webText h2 {
        font-size: 1rem;
    }

    .webContent .webView .webPhoto img {
        border-radius: .5rem;
    }

    .webContent .webView .webCode {
        height: 60rem;
    }

    /* Video */
    .videoContent iframe {
        width: 80vw;
        height: 35vh;
    }

    /* 自訂滑鼠在手機隱藏 */
    #cursorOff,
    #cursorOn {
        display: none;
    }
}










/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--p-off--) transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 1.75rem;
}

*::-webkit-scrollbar-track {
    background: var(--p-hover--);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--p-hover--);
}