* {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 0;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    color: #000;
    word-wrap: break-word;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: manipulation;
    -webkit-touch-callout: inherit;
    -webkit-user-select: inherit;
    -khtml-user-select: inherit;
    -moz-user-select: inherit;
    -ms-user-select: inherit;
    user-select: inherit
}

*::-webkit-scrollbar {
    display: none
}

*.no-animate {
    transition: none
}

*.no-animate * {
    transition: none
}

img {
    object-fit: cover
}

img[data-src] {
    content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
    background: linear-gradient(to right, #EEF0F3, #E0E2E8, #EEF0F3)
}

a[href]:not([href=""]) {
    cursor: pointer
}

button {
    cursor: pointer
}

html {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}

*[select=false],
*[select="0"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

*[select=true],
*[select="1"] {
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial
}

body {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--global-bg);
    overflow: hidden
}

#copy {
    position: absolute;
    top: -100vh;
    left: -100vw;
    opacity: 0
}

#J002 {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--global-bg-col);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: var(--global-bg);
    overflow: hidden
}

#J002::after {
    content: attr(copyright);
    z-index: 2;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-right: -50%;
    transform: translateX(-50%);
    font-size: 1.25rem;
    color: rgba(0, 0, 0, .2);
    letter-spacing: 1px
}

@media screen and (min-width: 1024px) {
    #J002::after {
        font-size: 1.5rem
    }
}

#J002>nav {
    z-index: 10;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 1rem;
    width: 100%;
    max-width: 1024px;
    height: 5rem;
    font-size: 0
}

#J002>nav>ul {
    font-size: 0;
    height: 100%;
    overflow: hidden
}

#J002>nav>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 .75rem
}

#J002>nav>ul>li.mobile {
    display: inline-block
}

@media screen and (min-width: 1024px) {
    #J002>nav>ul>li.mobile {
        display: none
    }
}

#J002>nav>ul>li>a,
#J002>nav>ul>li>button {
    position: relative;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.75rem
}

#J002>nav>ul>li>a>i,
#J002>nav>ul>li>button>i {
    color: var(--col-txt)
}

#J002>nav>ul>li>a>svg,
#J002>nav>ul>li>button>svg {
    position: relative;
    margin-top: 29px;
    width: 25px;
    height: 25px
}

#J002>div {
    position: relative;
    display: block;
    padding: 5rem 1rem 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1024px;
    height: 100%;
    overflow: scroll
}

#J002>div>div.top-user {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    text-align: center
}

#J002>div>div.top-user>div.head {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    transition: .3s;
    opacity: 1;
    z-index: 1;
    overflow: hidden
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>div.head {
        width: 10rem;
        height: 10rem
    }

    #J002>div>div.top-user>div.head>p {
        line-height: 8.75rem;
        font-size: 5rem
    }
}

#J002>div>div.top-user>div.head::before {
    content: "";
    position: absolute;
    display: block;
    top: -0.5rem;
    left: -0.5rem;
    bottom: -0.5rem;
    right: -0.5rem;
    background-color: var(--user-top-head-border-bg-col);
    background-image: var(--user-top-head-border-bg);
    background-size: 150% 150%;
    border-radius: 50%;
    -webkit-animation: line-grad-bg 3s ease infinite;
    -moz-animation: line-grad-bg 3s ease infinite;
    animation: line-grad-bg 3s ease infinite
}

#J002>div>div.top-user>div.head::after {
    content: "";
    position: absolute;
    display: block;
    top: .25rem;
    left: .25rem;
    bottom: .25rem;
    right: .25rem;
    border-radius: 50%;
    background-color: var(--user-top-head-bg-col)
}

#J002>div>div.top-user>div.head>p {
    position: absolute;
    display: block;
    top: .5rem;
    left: .5rem;
    bottom: .5rem;
    right: .5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    line-height: 8.75rem;
    font-size: 4rem;
    font-weight: 500;
    text-align: center;
    color: #fff;
    background-color: var(--user-top-head-border-bg-col);
    background-image: var(--user-top-head-border-bg);
    background-size: 150% 150%;
    border-radius: 50%;
    -webkit-animation: line-grad-bg 3s ease infinite;
    -moz-animation: line-grad-bg 3s ease infinite;
    animation: line-grad-bg 3s ease infinite;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    z-index: 1
}

#J002>div>div.top-user>div.head>img {
    position: absolute;
    display: block;
    top: .5rem;
    left: .5rem;
    bottom: .5rem;
    right: .5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    object-fit: cover;
    z-index: 1
}

#J002>div>div.top-user>h1 {
    position: relative;
    display: block;
    margin-top: 1.5rem;
    font-size: var(--user-top-name-size);
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    color: var(--global-col-h);
    transition: .3s
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>h1 {
        font-size: 2rem
    }
}

#J002>div>div.top-user>h1::after {
    content: attr(title);
    position: relative;
    display: block;
    font-size: var(--user-top-title-size);
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--global-col-p)
}

#J002>div>div.top-user>ul.link {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    width: 100%;
    height: initial;
    transition: .3s;
    font-size: 0
}

#J002>div>div.top-user>ul.link>li {
    position: relative;
    display: block;
    width: initial;
    height: initial
}

#J002>div>div.top-user>ul.link>li>a {
    position: relative;
    display: block;
    width: initial;
    height: initial
}

#J002>div>div.top-user>ul.link>li>a>i {
    position: relative;
    display: block;
    width: initial;
    height: initial;
    font-size: var(--user-top-link-size);
    color: var(--global-col-h)
}

#J002>div>div.top-user>ul.exp {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    width: 100%;
    height: initial;
    transition: .3s;
    font-size: 0
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>ul.exp {
        gap: 3rem
    }
}

#J002>div>div.top-user>ul.exp>li {
    position: relative;
    display: block;
    width: initial;
    height: initial;
    font-size: var(--user-top-exp-p-size);
    letter-spacing: 1px;
    color: var(--global-col-p);
    transition: .3s
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>ul.exp>li {
        font-size: 1.125rem
    }
}

#J002>div>div.top-user>ul.exp>li::before {
    content: attr(num);
    display: block;
    margin-bottom: .5rem;
    width: initial;
    height: initial;
    font-size: var(--user-top-exp-h-size);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--global-col-h)
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>ul.exp>li::before {
        font-size: 1.375rem
    }
}

#J002>div>div.top-user>div.button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2.5rem;
    width: 100%;
    font-size: 0
}

#J002>div>div.top-user>div.button>a {
    position: relative;
    display: flex;
    gap: .75rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: initial;
    text-align: center;
    background-color: var(--user-top-button-bg-col);
    background-image: var(--user-top-button-bg);
    border-radius: var(--global-radius);
    background-size: 150% 150%;
    -webkit-animation: line-grad-bg 3s ease infinite;
    -moz-animation: line-grad-bg 3s ease infinite;
    animation: line-grad-bg 3s ease infinite;
    transition: .3s
}

@media screen and (min-width: 320px) {
    #J002>div>div.top-user>div.button>a[num="1"] {
        width: calc(100% - 2rem * 1 - 0.5rem * 0 - 2rem)
    }
}

@media screen and (min-width: 320px) {
    #J002>div>div.top-user>div.button>a[num="2"] {
        width: calc(100% - 2rem * 2 - 0.5rem * 1 - 2rem)
    }
}

@media screen and (min-width: 320px) {
    #J002>div>div.top-user>div.button>a[num="3"] {
        width: calc(100% - 2rem * 3 - 0.5rem * 2 - 2rem)
    }
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>div.button>a[num="4"] {
        width: calc(100% - 2rem * 4 - 0.5rem * 3 - 2rem)
    }
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>div.button>a[num="5"] {
        width: calc(100% - 2rem * 5 - 0.5rem * 4 - 2rem)
    }
}

@media screen and (min-width: 480px) {
    #J002>div>div.top-user>div.button>a[num="6"] {
        width: calc(100% - 2rem * 6 - 0.5rem * 5 - 2rem)
    }
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>div.button>a {
        width: 16rem !important
    }
}

#J002>div>div.top-user>div.button>a>i,
#J002>div>div.top-user>div.button>a>p {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: initial;
    height: initial;
    line-height: 3.5rem;
    color: var(--user-top-button-p-col)
}

#J002>div>div.top-user>div.button>a>i {
    top: 1px;
    font-size: 1.5rem
}

#J002>div>div.top-user>div.button>a>p {
    font-size: 1.125rem;
    letter-spacing: 2px
}

#J002>div>div.top-user>div.button>a>svg {
    position: relative;
    top: 1px;
    width: 23px;
    height: 23px
}

#J002>div>div.top-user>div.button>ul {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 0
}

#J002>div>div.top-user>div.button>ul.contact {
    gap: .5rem
}

#J002>div>div.top-user>div.button>ul.contact>li>a {
    position: relative;
    display: block;
    width: initial;
    height: initial;
    background-color: var(--user-top-contact-bg-col);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    border-radius: calc(var(--global-radius)/2)
}

#J002>div>div.top-user>div.button>ul.contact>li>a>i {
    position: relative;
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: var(--user-top-contact-size);
    text-align: center;
    color: var(--global-col-h)
}

#J002>div>div.top-user>div.button>ul>li {
    position: relative;
    display: block;
    width: initial;
    height: initial;
    font-size: 0
}

#J002>div>div.top-user>ul.tab {
    position: relative;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .5rem;
    width: 100%;
    height: 4rem;
    font-size: 0;
    background-color: var(--user-top-tab-bg-col);
    border-radius: var(--global-radius);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    transition: .3s;
    overflow: hidden
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab {
        width: 21.5rem
    }
}

#J002>div>div.top-user>ul.tab[sel="0"]>li {
    transform: translateY(calc(-3.5rem * 0))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="0"]>li:nth-child(1) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="1"]>li {
    transform: translateY(calc(-3.5rem * 1))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="1"]>li:nth-child(2) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="2"]>li {
    transform: translateY(calc(-3.5rem * 2))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="2"]>li:nth-child(3) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="3"]>li {
    transform: translateY(calc(-3.5rem * 3))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="3"]>li:nth-child(4) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="4"]>li {
    transform: translateY(calc(-3.5rem * 4))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="4"]>li:nth-child(5) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="5"]>li {
    transform: translateY(calc(-3.5rem * 5))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="5"]>li:nth-child(6) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="6"]>li {
    transform: translateY(calc(-3.5rem * 6))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="6"]>li:nth-child(7) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="7"]>li {
    transform: translateY(calc(-3.5rem * 7))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="7"]>li:nth-child(8) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="8"]>li {
    transform: translateY(calc(-3.5rem * 8))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="8"]>li:nth-child(9) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="9"]>li {
    transform: translateY(calc(-3.5rem * 9))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="9"]>li:nth-child(10) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="10"]>li {
    transform: translateY(calc(-3.5rem * 10))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="10"]>li:nth-child(11) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="11"]>li {
    transform: translateY(calc(-3.5rem * 11))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="11"]>li:nth-child(12) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="12"]>li {
    transform: translateY(calc(-3.5rem * 12))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="12"]>li:nth-child(13) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="13"]>li {
    transform: translateY(calc(-3.5rem * 13))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="13"]>li:nth-child(14) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="14"]>li {
    transform: translateY(calc(-3.5rem * 14))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="14"]>li:nth-child(15) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="15"]>li {
    transform: translateY(calc(-3.5rem * 15))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="15"]>li:nth-child(16) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab[sel="16"]>li {
    transform: translateY(calc(-3.5rem * 16))
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab[sel="16"]>li:nth-child(17) {
        background-color: var(--user-top-tab-sel-col);
        color: var(--user-top-tab-p-sel-col)
    }
}

#J002>div>div.top-user>ul.tab.expand {
    height: 7.5rem
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab.expand {
        height: 4rem
    }
}

#J002>div>div.top-user>ul.tab.expand>li {
    transform: unset
}

#J002>div>div.top-user>ul.tab.expand>li:hover {
    background-color: var(--user-top-tab-sel-col);
    color: var(--user-top-tab-p-sel-col)
}

#J002>div>div.top-user>ul.tab>li {
    position: relative;
    display: block;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--user-top-tab-p-col);
    letter-spacing: 1px;
    transition: none;
    border-radius: var(--global-radius);
    cursor: pointer
}

@media screen and (min-width: 640px) {
    #J002>div>div.top-user>ul.tab>li {
        display: inline-block;
        vertical-align: top;
        width: 10rem;
        transform: unset !important
    }

    #J002>div>div.top-user>ul.tab>li:hover {
        background-color: rgba(0, 0, 0, .05)
    }
}

#J002>div>#portfolio-list {
    position: relative;
    display: flex;
    justify-content: left;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-bottom: 10rem;
    font-size: 0;
    transition: .3s
}

@media screen and (min-width: 640px) {
    #J002>div>#portfolio-list {
        gap: var(--portfolio-gap)
    }
}

#J002>div>#portfolio-list>figure {
    position: relative;
    width: 100%;
    aspect-ratio: var(--portfolio-ratio);
    width: 100%;
    height: 100%;
    border-radius: var(--global-radius);
    transition: .3s;
    overflow: hidden
}

@media screen and (min-width: 480px) {
    #J002>div>#portfolio-list>figure {
        width: calc((100% - 1rem)/2)
    }
}

@media screen and (min-width: 640px) {
    #J002>div>#portfolio-list>figure {
        width: calc((100% - var(--portfolio-gap))/2)
    }
}

@media screen and (min-width: 1024px) {
    #J002>div>#portfolio-list>figure {
        width: calc((100% - var(--portfolio-gap)*2)/3)
    }
}

#J002>div>#portfolio-list>figure:hover>figcaption {
    top: 0;
    opacity: 1
}

#J002>div>#portfolio-list>figure>img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%
}

#J002>div>#portfolio-list>figure>figcaption {
    position: absolute;
    top: 66.6666666667%;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    background-color: rgba(0, 0, 0, .5);
    border-radius: var(--global-radius);
    transition: .2s;
    opacity: 0
}

#J002>div>#portfolio-list>figure>figcaption>ul {
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    top: 50%;
    left: 0;
    transform: translateY(-100%);
    width: 100%
}

#J002>div>#portfolio-list>figure>figcaption>ul>li {
    position: relative
}

#J002>div>#portfolio-list>figure>figcaption>ul>li>a,
#J002>div>#portfolio-list>figure>figcaption>ul>li>button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    width: initial;
    height: initial
}

#J002>div>#portfolio-list>figure>figcaption>ul>li>a>i,
#J002>div>#portfolio-list>figure>figcaption>ul>li>a>p,
#J002>div>#portfolio-list>figure>figcaption>ul>li>button>i,
#J002>div>#portfolio-list>figure>figcaption>ul>li>button>p {
    position: relative;
    display: block;
    font-size: 1rem;
    color: #fff
}

#J002>div>#portfolio-list>figure>figcaption>h6 {
    position: absolute;
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff
}

#J002>div>#skill-list {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-bottom: 10rem;
    font-size: 0
}

@media screen and (min-width: 640px) {
    #J002>div>#skill-list {
        gap: var(--portfolio-gap)
    }
}

#J002>div>#skill-list>section {
    position: relative;
    display: flex;
    justify-content: left;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: initial;
    font-size: 0
}

@media screen and (min-width: 640px) {
    #J002>div>#skill-list>section {
        gap: var(--skill-gap);
        width: calc((100% - var(--skill-gap))/2)
    }
}

#J002>div>#skill-list>section>ul {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: start;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    background-color: var(--skill-block-bg-col);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    border-radius: var(--global-radius)
}

@media screen and (min-width: 640px) {
    #J002>div>#skill-list>section>ul {
        gap: var(--skill-gap)
    }
}

#J002>div>#skill-list>section>ul>h6 {
    position: relative;
    width: 100%;
    font-size: var(--skill-block-h-size);
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--skill-block-h-color)
}

#J002>div>#skill-list>section>ul>li {
    --border-width: 0.5rem;
    --animation-sec: 1.5s;
    position: relative;
    display: block;
    width: calc((100% - 1rem)/2);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--skill-item-circle-val-col);
    background-image: var(--skill-item-circle-val-bg)
}

@media screen and (min-width: 480px) {
    #J002>div>#skill-list>section>ul>li {
        width: calc((100% - var(--skill-gap))/3)
    }
}

@media screen and (min-width: 640px) {
    #J002>div>#skill-list>section>ul>li {
        width: calc((100% - var(--skill-gap))/2)
    }
}

#J002>div>#skill-list>section>ul>li[year="1"]>div:nth-child(1)::after {
    transform: rotate(calc(36deg * 1)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="2"]>div:nth-child(1)::after {
    transform: rotate(calc(36deg * 2)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="3"]>div:nth-child(1)::after {
    transform: rotate(calc(36deg * 3)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="4"]>div:nth-child(1)::after {
    transform: rotate(calc(36deg * 4)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="5"]>div:nth-child(1)::after {
    transform: rotate(calc(36deg * 5)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="6"]>div:nth-child(1)::after {
    transform: rotate(180deg) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="6"]>div:nth-child(2)::after {
    transform: rotate(calc(36deg * 1)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="7"]>div:nth-child(1)::after {
    transform: rotate(180deg) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="7"]>div:nth-child(2)::after {
    transform: rotate(calc(36deg * 2)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="8"]>div:nth-child(1)::after {
    transform: rotate(180deg) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="8"]>div:nth-child(2)::after {
    transform: rotate(calc(36deg * 3)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="9"]>div:nth-child(1)::after {
    transform: rotate(180deg) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="9"]>div:nth-child(2)::after {
    transform: rotate(calc(36deg * 4)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="10"]>div:nth-child(1)::after {
    transform: rotate(180deg) translateZ(0)
}

#J002>div>#skill-list>section>ul>li[year="10"]>div:nth-child(2)::after {
    transform: rotate(calc(36deg * 5)) translateZ(0)
}

#J002>div>#skill-list>section>ul>li>div:nth-child(1) {
    position: absolute;
    display: block;
    top: -1px;
    right: -1px;
    bottom: -1px;
    width: calc(50% + 1px);
    height: calc(100% + 2px);
    transform: translateZ(0);
    overflow: hidden
}

#J002>div>#skill-list>section>ul>li>div:nth-child(1)::after {
    content: "";
    position: relative;
    display: block;
    margin-left: -100%;
    width: 200%;
    height: 100%;
    background-image: linear-gradient(to left, var(--skill-item-circle-bg-col) 50%, transparent 0);
    transform-origin: center;
    transform: translateZ(0);
    border-radius: 50%;
    animation: circle-show-right calc(var(--animation-sec)/3*2) linear;
    -webkit-animation: circle-show-right calc(var(--animation-sec)/3*2) linear;
    -moz-animation: circle-show-right calc(var(--animation-sec)/3*2) linear
}

#J002>div>#skill-list>section>ul>li>div:nth-child(2) {
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    bottom: -1px;
    width: calc(50% + 1px);
    height: calc(100% + 2px);
    transform: translateZ(0);
    overflow: hidden
}

#J002>div>#skill-list>section>ul>li>div:nth-child(2)::after {
    content: "";
    position: relative;
    display: block;
    width: 200%;
    height: 100%;
    background-image: linear-gradient(to right, var(--skill-item-circle-bg-col) 50%, transparent 0);
    transform-origin: center;
    transform: translateZ(0);
    border-radius: 50%;
    animation: circle-show-left var(--animation-sec) linear;
    -webkit-animation: circle-show-left var(--animation-sec) linear;
    -moz-animation: circle-show-left var(--animation-sec) linear
}

@keyframes circle-show-right {
    0% {
        transform: rotate(0deg) translateZ(0)
    }
}

@-webkit-keyframes circle-show-right {
    0% {
        transform: rotate(0deg) translateZ(0)
    }
}

@-moz-keyframes circle-show-right {
    0% {
        transform: rotate(0deg) translateZ(0)
    }
}

@keyframes circle-show-left {
    0% {
        transform: rotate(0deg) translateZ(0)
    }

    67% {
        transform: rotate(0deg) translateZ(0)
    }
}

@-webkit-keyframes circle-show-left {
    0% {
        transform: rotate(0deg) translateZ(0)
    }

    67% {
        transform: rotate(0deg) translateZ(0)
    }
}

@-moz-keyframes circle-show-left {
    0% {
        transform: rotate(0deg) translateZ(0)
    }

    67% {
        transform: rotate(0deg) translateZ(0)
    }
}

#J002>div>#skill-list>section>ul>li>div:nth-child(3) {
    position: absolute;
    display: block;
    z-index: 1;
    top: var(--border-width);
    left: var(--border-width);
    bottom: var(--border-width);
    right: var(--border-width);
    width: calc(100% - var(--border-width)*2);
    height: calc(100% - var(--border-width)*2)
}

#J002>div>#skill-list>section>ul>li>div:nth-child(3)>b {
    position: relative;
    display: block;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 1px;
    color: var(--skill-item-h-col)
}

#J002>div>#skill-list>section>ul>li>div:nth-child(3)>b::after {
    content: attr(year) "年";
    position: relative;
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--skill-item-p-col)
}

#J002>div>#skill-list>section>ul>li::after {
    content: "";
    position: absolute;
    display: block;
    top: .5rem;
    left: .5rem;
    bottom: .5rem;
    right: .5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    background-color: var(--skill-item-bg-col);
    border-radius: 50%
}

@media screen and (min-width: 640px) {
    #J002>div>#skill-list>section>ul>li::after {
        top: var(--border-width);
        left: var(--border-width);
        bottom: var(--border-width);
        right: var(--border-width);
        width: calc(100% - var(--border-width)*2);
        height: calc(100% - var(--border-width)*2)
    }
}

#J002>ul {
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: -100%;
    margin-right: -50%;
    transform: translateX(-50%);
    width: initial;
    height: 3rem;
    font-size: 0;
    background-color: var(--portfolio-tab-bg-col);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    border-radius: var(--global-radius);
    transition: .5s;
    overflow: hidden
}

@media screen and (min-width: 800px) {
    #J002>ul {
        height: initial
    }

    #J002>ul>li {
        transform: unset !important
    }
}

#J002>ul[sel="0"]>li {
    transform: translateY(calc(-2.5rem * 0))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="0"]>li:nth-child(1) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="1"]>li {
    transform: translateY(calc(-2.5rem * 1))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="1"]>li:nth-child(2) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="2"]>li {
    transform: translateY(calc(-2.5rem * 2))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="2"]>li:nth-child(3) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="3"]>li {
    transform: translateY(calc(-2.5rem * 3))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="3"]>li:nth-child(4) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="4"]>li {
    transform: translateY(calc(-2.5rem * 4))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="4"]>li:nth-child(5) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="5"]>li {
    transform: translateY(calc(-2.5rem * 5))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="5"]>li:nth-child(6) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="6"]>li {
    transform: translateY(calc(-2.5rem * 6))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="6"]>li:nth-child(7) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="7"]>li {
    transform: translateY(calc(-2.5rem * 7))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="7"]>li:nth-child(8) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="8"]>li {
    transform: translateY(calc(-2.5rem * 8))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="8"]>li:nth-child(9) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="9"]>li {
    transform: translateY(calc(-2.5rem * 9))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="9"]>li:nth-child(10) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="10"]>li {
    transform: translateY(calc(-2.5rem * 10))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="10"]>li:nth-child(11) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="11"]>li {
    transform: translateY(calc(-2.5rem * 11))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="11"]>li:nth-child(12) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="12"]>li {
    transform: translateY(calc(-2.5rem * 12))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="12"]>li:nth-child(13) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="13"]>li {
    transform: translateY(calc(-2.5rem * 13))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="13"]>li:nth-child(14) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="14"]>li {
    transform: translateY(calc(-2.5rem * 14))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="14"]>li:nth-child(15) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="15"]>li {
    transform: translateY(calc(-2.5rem * 15))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="15"]>li:nth-child(16) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul[sel="16"]>li {
    transform: translateY(calc(-2.5rem * 16))
}

@media screen and (min-width: 800px) {
    #J002>ul[sel="16"]>li:nth-child(17) {
        background-color: var(--portfolio-tab-bg-sel-col);
        color: var(--portfolio-tab-p-sel-bg-col)
    }
}

#J002>ul.show {
    bottom: 2rem
}

#J002>ul.expand {
    width: calc(100% - 2rem);
    height: initial;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
    transition: .3s
}

@media screen and (min-width: 480px) {
    #J002>ul.expand {
        width: 50%
    }
}

@media screen and (min-width: 800px) {
    #J002>ul.expand {
        width: initial
    }
}

#J002>ul.expand>li {
    padding: .25rem 1rem;
    transform: unset
}

#J002>ul.expand>li:hover {
    background-color: var(--portfolio-tab-bg-sel-col);
    color: var(--portfolio-tab-p-sel-bg-col)
}

#J002>ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--col-bg);
    opacity: .5
}

#J002>ul>li {
    position: relative;
    display: block;
    margin: .5rem;
    padding: 0 1rem;
    width: initial;
    line-height: 2rem;
    text-align: center;
    font-size: 1.125rem;
    letter-spacing: 1px;
    color: var(--col-txt);
    border-radius: var(--global-radius);
    color: var(--portfolio-tab-p-col);
    cursor: pointer
}

@media screen and (min-width: 800px) {
    #J002>ul>li {
        display: inline-block;
        vertical-align: top
    }
}

@-webkit-keyframes line-grad-bg {
    0% {
        background-position: 0% 0%
    }

    50% {
        background-position: 100% 100%
    }

    100% {
        background-position: 0% 0%
    }
}

@-moz-keyframes line-grad-bg {
    0% {
        background-position: 0% 0%
    }

    50% {
        background-position: 100% 100%
    }

    100% {
        background-position: 0% 0%
    }
}

@keyframes line-grad-bg {
    0% {
        background-position: 0% 0%
    }

    50% {
        background-position: 100% 100%
    }

    100% {
        background-position: 0% 0%
    }
}