@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
/**/
html{
    scroll-behavior: smooth;
    background-color: #272727;
}
body{
    animation: fadeIn 1s ease-in-out;
}
a{
    text-decoration: none;
}
/**/
div.life{
    background: url("projects/bg/life.png");
    left: 0;
}

    div.TOOLs{
        z-index: 3;
        top: 0;
        height: 33.3vh;
        background: url("projects/bg/tool.jpg");
        background-size: cover;
    }
        div.STOCK{
            top: 0;
            height: 33.3vh;
            transition: all .5s;
        }
            div.STOCK:hover{
                background: url("projects/bg/stock.jpg");

            }
    div.GPT{
        top: 33.3vh;
        height: 33.3vh;
        transition: all .5s;
    }
        div.GPT:hover{
            background: url("projects/bg/gpt.jpg");
        }
        /**/
        div.ChatGPT{
            top: 0;
            left: 0;
        }
        div.Gemini{
            top: 0;
            left: 25vw;
        }
        /**/
        div.ChatGPT,div.Gemini{
            position: absolute;
            background-color: rgba(0,0,0,0.0);
            background-blend-mode: multiply;
            background-size: cover;
            border-radius: 0.5vh;
            height: 33.3vh;
            width: 23.5vw;
            opacity: 1;
            transition: all .5s;
        }
            div.ChatGPT:hover,div.Gemini:hover{
                background-color: rgba(255,255,255,0.7);
                border-radius: 1vh;
            }
        /**/
        div.GOOGLE{
            top: 66.6vh;
            height: 33.3vh;
            transition: all .5s;
        }
            div.GOOGLE:hover{
                background: url("projects/bg/google.jpg")
            }
            /**/
            div.GOOGLE_content1{
                top: 0;
                left: 0;
            }
            div.GOOGLE_content2{
                top: 0;
                left: 11.76vw;
            }
            div.GOOGLE_content3{
                top: 0;
                left: 23.51vw;
            }
            div.GOOGLE_content4{
                top: 0;
                left: 35.26vw;
            }
            div.GOOGLE_content5{
                top: 16.66vh;
                left: 0;
            }
            div.GOOGLE_content6{
                top: 16.66vh;
                left: 11.76vw;
            }
            div.GOOGLE_content7{
                top: 16.66vh;
                left: 23.51vw;
            }
            div.GOOGLE_content8{
                top: 16.66vh;
                left: 35.26vw;
            }
            /**/
            /**/
            div.GOOGLE_content1,div.GOOGLE_content2,div.GOOGLE_content3,div.GOOGLE_content4,div.GOOGLE_content5,div.GOOGLE_content6,div.GOOGLE_content7,div.GOOGLE_content8{
                position: absolute;
                background-color: rgba(0,0,0,0.0);
                background-blend-mode: multiply;
                background-size: cover;
                border-radius: 0.5vh;
                height: 16.5vh;
                width: 11.6vw;
                opacity: 1;
                transition: all .5s;
            }
                div.GOOGLE_content1:hover,div.GOOGLE_content2:hover,div.GOOGLE_content3:hover,div.GOOGLE_content4:hover,div.GOOGLE_content5:hover,div.GOOGLE_content6:hover,div.GOOGLE_content7:hover,div.GOOGLE_content8:hover{
                    background-color: rgba(255,255,255,0.7);
                    border-radius: 1vh;
                }
            /**/
    /**/
    div.FUN{
        z-index: 2;
        top: 33.3vh;
        height: 33.3vh;
        background: url("projects/bg/fun.jpg");
        background-size: cover;
    }
        div.TWITCH{
            top: 0;
            height: 25vh;
            transition: all .5s;
        }
            div.TWITCH:hover{
                background: url("projects/bg/Twitch.jpg");

            }
        div.YOUTUBE{
            top: 25vh;
            height: 25vh;
            transition: all .5s;
        }
            div.YOUTUBE:hover{
                background: url("projects/bg/youtube.jpg");

            }
        div.YTMusic{
            top: 50vh;
            height: 25vh;
            transition: all .5s;
        }
            div.YTMusic:hover{
                background: url("projects/bg/music.jpg");

            }
        div.Netflix{
            top: 75vh;
            height: 25vh;
            transition: all .5s;
        }
            div.Netflix:hover{
                background: url("projects/bg/Netflix.jpg");
            }
            /**/
    div.SOCIAL{
        z-index: 1;
        top: 66.6vh;
        height: 33.3vh;
        background: url("projects/bg/social.jpg");
        background-size: cover;
    }
        div.DISCORD{
            top: 0;
            height: 25vh;
            transition: all .5s;
        }
            div.DISCORD:hover{
                background: url("projects/bg/Discord.jpg");
            }
            div.DISCORD_content1{
                top: 0;
            }
            div.DISCORD_content2{
                top: 12.5vh;
            }
            /**/
            div.DISCORD_content1,div.DISCORD_content2{
                position: absolute;
                background-color: rgba(0,0,0,0.0);
                background-blend-mode: multiply;
                background-size: cover;
                border-radius: 0.5vh;
                height: 12.5vh;
                width: 47vw;
                opacity: 1;
                transition: all .5s;
            }
                div.DISCORD_content1:hover,div.DISCORD_content2:hover{
                    background-color: rgba(255,255,255,0.7);
                    border-radius: 1vh;
                }
        div.LINE{
            top: 25vh;
            height: 25vh;
            transition: all .5s;
        }
            div.LINE:hover{
                background: url("projects/bg/Line.png");

            }
        div.FaceBook{
            top: 50vh;
            height: 25vh;
            transition: all .5s;
        }
            div.FaceBook:hover{
                background: url("projects/bg/fb.jpg");

            }
        div.INSTAGRAM{
            top: 75vh;
            height: 25vh;
            transition: all .5s;
        }
            div.INSTAGRAM:hover{
                background: url("projects/bg/IG.png");
            }
        /**/
        div.STOCK,div.GPT,div.GOOGLE,div.TWITCH,div.YOUTUBE,div.YTMusic,div.Netflix,div.DISCORD,div.LINE,div.FaceBook,div.INSTAGRAM{
            left: 3vw;
        }
        /**/
/**/
div.school{
    background: url("projects/bg/school.jpg");
    left: 50vw;
}
    div.GENERAL{
        z-index: 1;
        top: 0;
        right: 0;
        height: 50vh;
        background: url("projects/bg/general.jpg");
        background-size: cover;
    }
        div.WorkSpace{
            top: 0;
            width: 47vw;
            height: 20vh;
        }
            div.WorkSpace:hover{
                background: url("projects/bg/working.jpg");
            }
        div.LIBRARY{
            top: 20vh;
            width: 47vw;
            height: 20vh;
        }
            div.LIBRARY:hover{
                background: url("projects/bg/library.jpg");
            }
        div.TronClass{
            top: 40vh;
            width: 47vw;
            height: 20vh;
        }
            div.TronClass:hover{
                background: url("projects/bg/tronclass.jpg");
            }
        div.StuINFoSystem{
            top: 60vh;
            width: 47vw;
            height: 20vh;
        }
            div.StuINFoSystem:hover{
                background: url("projects/bg/student.jpg");
            }
        div.NOTE{
            top: 80vh;
            width: 47vw;
            height: 20vh;
        }
            div.NOTE:hover{
                background: url("projects/bg/note.jpg");
            }
        /**/

        /**/
    /**/
    div.SUBJECT{
        z-index: 2;
        top: 50vh;
        right: 0;
        height: 50vh;
        background: url("projects/bg/subject.jpg");
        background-size: cover;
        }
        div.UE{
            top: 0;
            width: 47vw;
            height: 33.3vh;
        }
            div.UE:hover{
                background: url("projects/bg/UE5.jpg");
            }
        .UE_content1 {
            left: 0;
        }
        .UE_content2 {
            right: 0;
        }
        .UE_content1, .UE_content2 {
            top: 0;
            position: absolute;
            background-color: rgba(0,0,0,0.0);
            background-blend-mode: multiply;
            background-size: cover;
            border-radius: 0.5vh;
            height: 33.3vh;
            width: 50%;
            opacity: 1;
            transition: all .5s;
        }
        .UE_content1:hover, .UE_content2:hover {
            background-color: rgba(255,255,255,.7);
        }

        div.AfterEffect{
            top: 33.3vh;
            width: 47vw;
            height: 33.3vh;
        }
            div.AfterEffect:hover{
                background: url("projects/bg/Animation.jpg");
            }
/*         .Animation_content1 {
            left: 0;
        }
        .Animation_content2 {
            right: 0;
        }
        .Animation_content1, .Animation_content2 {
            top: 0;
            position: absolute;
            background-color: rgba(0,0,0,0.0);
            background-blend-mode: multiply;
            background-size: cover;
            border-radius: 0.5vh;
            height: 33.3vh;
            width: 50%;
            opacity: 1;
            transition: all .5s;
        }
        .Animation_content1:hover, .Animation_content2:hover {
            background-color: rgba(255,255,255,.7);
        } */

        div.SoundDesign{
            top: 66.6vh;
            width: 47vw;
            height: 33.3vh;
        }
            div.SoundDesign:hover{
                background: url("projects/bg/Sound.png");
            }
        /**/
        div.WorkSpace,div.LIBRARY,div.TronClass,div.StuINFoSystem,div.NOTE,div.UE,div.AfterEffect,div.SoundDesign{
            right: 3vw;
        }
        /**/
    /**/
        div.STOCK,div.GPT,div.GOOGLE,div.TWITCH,div.YOUTUBE,div.YTMusic,div.Netflix,div.DISCORD,div.LINE,div.FaceBook,div.INSTAGRAM,div.WorkSpace,div.LIBRARY,div.TronClass,div.StuINFoSystem,div.NOTE,div.UE,div.AfterEffect,div.SoundDesign{
            position: absolute;
            width: 47vw;
            background: none;
            background-color: rgba(0,0,0,0.8);
            background-blend-mode: multiply;
            border-radius: 0;
            transition: all .5s;
        }
            div.STOCK:hover,div.GPT:hover,div.GOOGLE:hover,div.TWITCH:hover,div.YOUTUBE:hover,div.YTMusic:hover,div.Netflix:hover,div.DISCORD:hover,div.LINE:hover,div.FaceBook:hover,div.INSTAGRAM:hover,div.WorkSpace:hover,div.LIBRARY:hover,div.TronClass:hover,div.StuINFoSystem:hover,div.NOTE:hover,div.UE:hover,div.AfterEffect:hover,div.SoundDesign:hover{
                background-color: rgba(0,0,0,0.4);
                border-radius: 1.5vh;
                background-size: cover;
            }
            div.STOCK:active,div.GPT:active,div.GOOGLE:active,div.TWITCH:active,div.YOUTUBE:active,div.YTMusic:active,div.Netflix:active,div.DISCORD:active,div.LINE:active,div.FaceBook:active,div.INSTAGRAM:active,div.WorkSpace:active,div.LIBRARY:active,div.TronClass:active,div.StuINFoSystem:active,div.NOTE:active,div.UE:active,div.AfterEffect:active,div.SoundDesign:active{
                background-color: rgba(255,255,255,0.4);
            }
    /**/
/**/
div.life,div.school{
    position: fixed;
    top: 0;
    width: 50vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    transition: all .5s;
}
    div.life:hover,div.school:hover{
        background-color: rgba(128, 128, 128, 0.2);
    }
/**/
div.TOOLs,div.FUN,div.SOCIAL,div.GENERAL,div.SUBJECT{
    overflow: hidden;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: multiply;
    transition: width 0.3s ease,height 0.3s ease,top 0.3s ease,z-index 1s ease,background-color 0.3s ease;
    width: 3vw;
}
    div.TOOLs,div.FUN,div.SOCIAL{
        border-radius:0vh 1vh 1vh 0vh;
        box-shadow: 0.2vh 0.2vh 0.2vh 0vh #4c4c4c;
    }
    div.GENERAL,div.SUBJECT{
        border-radius:1vh 0vh 0vh 1vh;
        box-shadow: -0.2vh 0.2vh 0.2vh 0vh #222222;
    }
    div.TOOLs:hover,div.FUN:hover,div.SOCIAL:hover,div.GENERAL:hover,div.SUBJECT:hover{
        z-index: 0;
        top:0;
        background-color: rgba(0,0,0,0.2);
        width: 50vw;
        height: 100vh;
    }
/*
文字
*/

.life>p,.school>p{
    font-size: 4vw;
    font-weight: 600;
    position: relative;
    text-align: center;
    opacity: 0.8;
    transform: scale(1,1);
    transition: all .5s;
    top: 40vh;
}
    .life:hover>p,.school:hover>p,.TOOLs:hover>p,.FUN:hover>p,.SOCIAL:hover>p,.GENERAL:hover>p,.SUBJECT:hover>p{
        opacity: 0;
        transform: scale(2,2);
        pointer-events: none;
    }
    .TOOLs:hover>p,.FUN:hover>p,.SOCIAL:hover>p,.GENERAL:hover>p,.SUBJECT:hover>p{
        transform: scale(2,2) rotate(90deg);
        }
/**/
.TOOLs>p,.FUN>p,.SOCIAL>p,.GENERAL>p,.SUBJECT>p{
    transform: rotate(90deg);
    white-space: nowrap;
    letter-spacing: 0.7vh;
    font-size: 3vh;
    font-weight: 600;
    opacity: 0.8;
    transition: all .5s;
}
    div.STOCK>p,div.GPT>p,div.GOOGLE>p,div.TWITCH>p,div.YOUTUBE>p,div.YTMusic>p,div.Netflix>p,div.DISCORD>p,div.LINE>p,div.FaceBook>p,div.INSTAGRAM>p,div.WorkSpace>p,div.LIBRARY>p,div.TronClass>p,div.StuINFoSystem>p,div.NOTE>p,div.UE>p,div.AfterEffect>p,div.SoundDesign>p{
        position: relative;
        top: 4vh;
        transition: all .5s;
        white-space: nowrap;
        text-align: center;
        font-size: 3vw;
        font-weight: 600;
        opacity: 0.8;
    }
        div.STOCK:hover>p,div.GPT:hover>p,div.GOOGLE:hover>p,div.TWITCH:hover>p,div.YOUTUBE:hover>p,div.YTMusic:hover>p,div.Netflix:hover>p,div.DISCORD:hover>p,div.LINE:hover>p,div.FaceBook:hover>p,div.INSTAGRAM:hover>p,div.WorkSpace:hover>p,div.LIBRARY:hover>p,div.TronClass:hover>p,div.StuINFoSystem:hover>p,div.NOTE:hover>p,div.UE:hover>p,div.AfterEffect:hover>p,div.SoundDesign:hover>p{
            transform: scale(1.5,1.5);
            opacity: 0;
        }
/**/
        div.ChatGPT>p,div.Gemini>p{
            position: relative;
            text-align: center;
            top: 4vh;
            font-size: 4vw;
            font-weight: 600;
            opacity: 0;
            transition: all .5s;
        }
            div.ChatGPT:hover>p,div.Gemini:hover>p{
                color: #000;
            }
        div.GPT:hover div>p{
            opacity: 0.8;
        }
/**/
        div.GOOGLE_content1>p,div.GOOGLE_content2>p,div.GOOGLE_content3>p,div.GOOGLE_content4>p,div.GOOGLE_content5>p,div.GOOGLE_content6>p,div.GOOGLE_content7>p,div.GOOGLE_content8>p{
            position: relative;
            text-align: center;
            top: 5vh;
            font-size: 2vw;
            font-weight: 600;
            opacity: 0;
            transition: all .5s;
        }
            div.GOOGLE_content1:hover>p,div.GOOGLE_content2:hover>p,div.GOOGLE_content3:hover>p,div.GOOGLE_content4:hover>p,div.GOOGLE_content5:hover>p,div.GOOGLE_content6:hover>p,div.GOOGLE_content7:hover>p,div.GOOGLE_content8:hover>p{
                color: #000;
            }
        div.GOOGLE:hover div>p{
            opacity: 0.8;
        }
        /**/
        div.DISCORD_content1>p,div.DISCORD_content2>p{
            position: relative;
            text-align: center;
            top: 0;
            font-size: 2vw;
            font-weight: 600;
            opacity: 0;
            transition: all .5s;
        }
            div.DISCORD_content1:hover>p,div.DISCORD_content2:hover>p{
                color: #000;
            }
        div.DISCORD:hover div>p{
            opacity: 0.8;
        }
        /**/
        div.UE_content1>p,div.UE_content2>p{
            position: relative;
            text-align: center;
            top: 5vh;
            font-size: 3vw;
            font-weight: 600;
            opacity: 0;
            transition: all .5s;
        }
            div.UE_content1:hover>p,div.UE_content2:hover>p{
                color: #000;
            }
        div.UE:hover div>p{
            opacity: 0.8;
        }
        /**/
/*         div.Animation_content1>p,div.Animation_content2>p{
            position: relative;
            text-align: center;
            top: 5vh;
            font-size: 3vw;
            font-weight: 600;
            opacity: 0;
            transition: all .5s;
        }
            div.Animation_content1:hover>p,div.Animation_content2:hover>p{
                color: #000;
            } */
        div.AfterEffect:hover div>p{
            opacity: 0.8;
        }
/**/

p{
    user-select: none;
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
}