header{position:fixed;top:10px;left:50%;transform:translate(-50%);width:95%;height:60px;margin:auto;display:flex;justify-content:space-between;align-items:center;background:#ffffff4d;-webkit-backdrop-filter:blur(3.5px);backdrop-filter:blur(3.5px);border-radius:10px;border:1px solid rgba(145,145,145,.2);z-index:100}header .logo{padding-left:30px}header .logo a{width:50px;height:50px}header .logo a img{width:100%;height:100%}header ul{display:flex;justify-content:center;align-items:center;padding-right:45px}header ul li{position:relative;padding-left:50px}header ul li a{position:relative;width:80px;height:100%;line-height:60px;transition:ease-in-out .3s}header ul li a:after{content:"";position:absolute;width:0;height:2px;bottom:15px;left:50%;background:#333;transition:all .3s ease;transform:translate(-50%);border-radius:100px}header ul li a:hover:after{width:50%}.photos-container{max-width:1200px;margin:auto;border-top:solid 1px #555;padding-top:50px}.masonry-grid{columns:4 200px;column-gap:5px}.masonry-item{break-inside:avoid;margin-bottom:5px}.masonry-item img{width:100%;height:auto;display:block}.photoHeader{height:30vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.aboutDetail{padding-top:50px}.aboutDetail .githubLink .link{width:100%;height:40px;display:flex;justify-content:center;align-items:center;gap:.5rem;border-radius:8px;background:#fefefe;border:solid 1px #333;transition:.3s ease-in-out;text-decoration:none;color:#333;font-size:1.6rem}.aboutDetail .githubLink .link:hover{border:solid 1px #333;background:#333;color:#fefefe}.vmvContent{width:85%;margin:0 auto;padding-bottom:50px}.vmvContent h2{font-size:4rem;margin-top:2rem;margin-bottom:1rem;color:#c6c6c6}.vmvContent h3{width:90%;margin:0 auto;font-size:3rem;color:#333}.vmvContent .vmvText{width:90%;margin:0 auto;position:relative;font-size:1.4rem;line-height:1.8;margin-bottom:4rem;color:#666;padding-left:1.8rem}.vmvContent .vmvText:before{content:"";position:absolute;left:8px;top:3px;display:block;width:3px;height:20px;background-color:#333;margin-bottom:1rem}.mainViewBox{display:flex;justify-content:center;align-items:center;position:relative}.mainViewBox .mainView{position:relative;width:100%;height:100svh;margin:auto;background:no-repeat url(/assets/gradation-KP1UQru0.png) center center / cover}.mainViewBox .mainViewText{position:absolute;display:flex;justify-content:center;align-items:center;color:#212121;font-size:2.5rem;font-weight:700}.scroll-btn{position:absolute;left:calc(50% - 16px);bottom:20px;cursor:pointer;animation:scroll-btn 1s ease-in-out alternate infinite}.scroll-btn svg{fill:#f8f7f2;height:50px;width:32px;margin-bottom:10px;filter:drop-shadow(0 0 5px rgba(240,240,240,.7));animation:glow 2s ease-in-out infinite alternate}.scroll-btn svg .animated{animation:scroll-down 2s infinite linear}.scroll-btn svg .ball{animation:ball-move 1s infinite ease-in-out alternate}@keyframes glow{0%{filter:drop-shadow(0 0 4px rgba(240,240,240,.7)) drop-shadow(0 0 8px rgba(255,255,255,.5))}to{filter:drop-shadow(0 0 12px rgba(240,240,240,.9)) drop-shadow(0 0 16px rgba(255,255,255,.7))}}@keyframes scroll-down{0%{stroke-dasharray:0,180px;opacity:1}50%{opacity:1}50%{opacity:.5}60%{opacity:.8;stroke-dasharray:215.7737px,363.607px}70%{opacity:0}80%{opacity:0}90%{opacity:0}to{opacity:0}}@keyframes ball-move{0%{opacity:0}50%{opacity:.8}to{transform:translateY(16px);opacity:0}}.productionContent{margin:0 0 60px;position:relative;overflow:hidden;box-shadow:0 .5px 8.5px .5px #00000040}.productionContent .productionImg{width:500px;height:300px;transition:ease-in-out .3s;background-color:#c3c3c3;z-index:20}.productionContent .productionImg img{width:100%;height:100%;margin-bottom:70px;background-color:#232323;transition:ease-in-out 1s}.productionContent .innerContent{box-sizing:inherit;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;background:#08080899;transition:ease-in-out .5s;padding:30px 0 0 30px;letter-spacing:.1rem;color:#fefefe;text-align:left}.productionContent .innerContent:hover{opacity:1}.productionContent .innerContent .innerData{font-size:1.3rem;padding-bottom:20px}.productionContent .innerContent .grade{font-size:1.4rem;display:inline-block;padding:6px 15px;border:solid 1px #fefefe}.productionContent .innerContent .title{font-size:2rem;font-weight:700;opacity:1;padding:25px 0;letter-spacing:.15rem}.productionContent .innerContent .type{font-size:1.4rem;letter-spacing:.15rem}.productionContent .innerContent .productionButton p{position:absolute;bottom:80px;right:200px}.productionContent .innerContent .productionButton p a{width:130px;position:absolute;font-size:1.4rem;color:#fefefe;text-decoration:none}.productionContent .innerContent .productionButton p a:after{content:"";display:inline-block;vertical-align:middle;color:#fefefe;line-height:1;width:0;height:0;border-style:solid;border-color:transparent;border-width:.6rem 1rem;border-left-color:currentColor;border-right:0;margin:-3px 0 0 10px}.workFilter{width:80%;margin:20px auto;text-align:center}.filterButtons{display:flex;justify-content:center;gap:15px}.filterButtons button{width:100%;height:50px;line-height:50px;font-size:1.6rem;border:1px solid #ddd;border-radius:5px;background:#fff;cursor:pointer;transition:all .3s ease}.filterButtons button:hover{background:#f5f5f5;border-color:#666}.filterButtons button.active{background:#333;color:#fff;border-color:#333}.productionWrap{width:80%;margin:80px auto}.productionWrap .productionList{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:flex-start;list-style:none}.button{display:block;width:180px;height:40px;line-height:40px;border:solid 1px #333;font-size:1.2rem;transition:ease-in-out .3s;border-radius:6px;background-color:#fefefe}.button:hover{color:#fefefe;background-color:#333}.about{display:flex;justify-content:center;gap:150px;padding-top:50px}.about .myPicture{position:relative;width:400px;height:500px;overflow:hidden}.about .myPicture img{width:400px;height:500px;object-fit:cover;overflow:hidden}.about .myPicture:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#f5f5f5;opacity:.2}.about .aboutTextWrap{width:60vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:50px}.about .aboutTextWrap .aboutTextContent h3{font-size:3rem}.about .aboutTextWrap .aboutTextContent h3 span{font-weight:400;font-size:2.4rem}.about .aboutTextWrap .aboutTextContent .aboutText{padding-top:20px;font-size:1.6rem;line-height:1.4}.about .aboutTextWrap .aboutTextContent .aboutText .aboutTextSpan{display:block;font-size:1.6rem;color:#888}.about .buttonContainer{display:flex;justify-content:center;align-items:center;gap:20px}.workDetails{padding:60px 0;max-width:80%;margin:0 auto}.workContent{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}.workImage img{width:100%;border-radius:8px;box-shadow:0 0 20px #1010101a}.workImage .awards{margin-top:10px}.workImage .awards ul{list-style:none;padding:0}.workImage .awards li{display:flex;flex-direction:column;margin-bottom:10px;padding:10px 15px;background:#ffffff1a;border-radius:8px}.workImage .award-name{font-weight:700;padding-left:20px}.workImage .award-date{font-size:.9em;color:#666;padding-right:10px}.workInfo h2{font-size:5rem;margin-bottom:10px}.workInfo p{font-size:1.4rem;line-height:1.4}.workInfo .grade,.workInfo .date{display:inline-block;padding:10px;background-color:#e6e6e6;border:solid 1px #e6e6e6;border-radius:5px;margin-right:10px}.workInfo h3{margin:20px 0 10px;font-size:2rem}.technologies ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}.technologies li{background-color:#e6e6e6;padding:5px 15px;border-radius:20px;font-size:1.4rem}.role p{display:inline-block;padding-right:10px}.linkContainer{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:20px}.linkContainer .link{width:100%;margin-top:30px}.linkContainer .link a{display:inline-block;width:100%;height:40px;line-height:40px;text-align:center;background:#333;color:#fefefe;border-radius:5px;text-decoration:none;transition:opacity .3s}.linkContainer .link a:hover{opacity:.8}.workReflection{margin-top:60px;padding:30px;background:#ffffff0d;border-radius:10px}.workReflection h2{margin:30px 0 15px;font-size:2rem;color:#333}.workReflection h2:first-child{margin-top:0}.workReflection ul{padding:0;list-style:none}.workReflection li{position:relative;padding-left:20px;margin-bottom:10px;font-size:1.6rem;line-height:1.6}.reflection-points{display:flex;flex-direction:column;gap:40px}.reflection-point{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.reflection-point p{font-size:1.6rem;line-height:1.8}.reflection-image{border-radius:10px;overflow:hidden;box-shadow:0 4px 6px #0000001a}.reflection-image img{width:100%;height:auto;display:block}.backButton{display:flex;justify-content:center;align-items:center}@media (max-width: 768px){.reflection-point{grid-template-columns:1fr}}.contact{padding-bottom:100px;text-align:center}.contact h2{font-size:6rem}.contact-description{font-size:1.6rem;line-height:1.6;margin-bottom:3rem;color:#666}.contact-links{display:flex;justify-content:center;gap:2rem}.contact-link{display:flex;align-items:center;gap:.5rem;padding:2rem 3rem;border-radius:8px;background:#fefefe;border:solid 1px #333;transition:all .3s ease;text-decoration:none;color:#333;font-size:1.6rem}.contact-link:hover{background:#333;color:#fefefe;scale:1.05}.contact-link svg{font-size:1.8rem}*{margin:0;padding:0}html{font-size:62.5%}body{height:100vh;background-color:#fefefe;scroll-behavior:smooth;font-size:1.6rem}section:nth-child(3){padding:50px 0}li{list-style-type:none;display:inline-block}a{display:block;color:#333;font-size:1.4rem;text-align:center;text-decoration:none}h2{font-size:6rem}p{font-size:1.2rem}footer{padding:15px;text-align:center;border-top:solid 1px #333}footer p small{font-size:1rem}