@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";section{padding:40px;min-height:100vh;min-width:100vw}.languages{position:absolute;top:3%;left:40px;font-size:.8em;display:flex;text-transform:uppercase;letter-spacing:1px;background-color:var(--navy-blue);color:#fff;padding:0 5px}.languages .language{padding:0 5px;cursor:pointer}.menu-icon{position:fixed;top:3%;right:3%;width:30px;height:25px;background-color:var(--navy-blue);fill:#fff;background-size:20px;background-position:center;background-repeat:no-repeat;cursor:pointer;z-index:1000}.banner,.sidebar{position:absolute;top:0;right:0;width:100%;padding:40px;height:100%;display:flex;justify-content:center;align-items:center}.sidebar{position:fixed;background-color:#20323e;display:flex;justify-content:center;align-items:center;transition:.5s;padding:40px;z-index:100;right:-100%}.sidebar ul{display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:#20323e}.sidebar ul li{list-style:none;background-color:#20323e}.sidebar ul li a{background-color:#20323e;color:#f8ee84;text-decoration:none;font-size:1.5em;margin:10px 0;font-weight:300;letter-spacing:2px;text-transform:uppercase}.sidebar ul li a:hover{color:#e8b069}.sidebar.active{right:0}.title{width:100%;text-align:center}.title h2{position:relative;color:var(--vintage-blue);font-size:1.8em;font-weight:700;letter-spacing:1px}.title p{max-width:700px;display:inline-block}.title h2:before{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:-10px;width:100px;height:4px;background-color:var(--vintage-blue)}.title.white h2,.title.white p{color:#fff}.title.white h2:before{background-color:var(--light-yellow)}.banner{position:relative;width:100%;min-height:100vh}.banner .side-img{display:none;position:absolute;top:0;left:0;width:500px;height:100%}.banner .side-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.banner h2{font-size:1.3em;font-weight:300;margin-bottom:20px}.frontend-dev{font-size:1.5em;color:var(--vintage-blue);font-weight:700}.banner h4{font-size:1em;font-weight:300;line-height:1.8em}.banner .keyword{font-size:1.1em;font-weight:700;color:#000;background-color:var(--keyword-bg-color);padding:0 4px;border-radius:3px}p{font-size:1em;margin:20px 0;font-weight:300}.banner .btns{margin-top:3rem}.banner .btn{background-color:var(--vintage-blue);color:var(--light-yellow);padding:10px 30px;display:inline-block;text-decoration:none;font-weight:500;letter-spacing:2px}.about{background-color:var(--vintage-blue)}.content{display:flex;flex-direction:column;justify-content:space-between;margin-top:0}.competencies-box{background:var(--background-color);padding:20px;margin-bottom:20px;border-radius:8px;box-shadow:0 2px 8px #0000001a}.competencies-box h3{font-size:1.4rem;color:var(--navy-blue);margin-bottom:15px;border-bottom:2px solid var(--keyword-bg-color);padding-bottom:8px}.competencies{list-style:none;padding:0;margin:0}.competencies li{margin-bottom:15px;padding:15px;background:var(--background-color);border-left:4px solid var(--vintage-blue);border-radius:4px;transition:transform .2s ease,box-shadow .2s ease}.competencies li:hover{transform:translate(5px)}.competencies li .keyword{display:block;font-weight:700;font-size:1rem;color:var(--navy-blue);margin-bottom:8px}.education-box{background:var(--background-color);padding:20px;margin-bottom:20px;border-radius:8px;box-shadow:0 2px 8px #0000001a}.education-box h3{font-size:1.4rem;color:var(--navy-blue);margin-bottom:15px;border-bottom:2px solid var(--keyword-bg-color);padding-bottom:8px}.education{list-style:none;margin:0;position:relative;border-left:2px dashed var(--navy-blue);padding:0 0 0 30px}.education li{margin-bottom:25px;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"year details" "status major";gap:4px 8px;align-items:center}.education li:before{content:"";position:absolute;left:-23px;top:0;width:10px;height:10px;background-color:var(--vintage-blue);border:3px solid var(--keyword-bg-color);border-radius:50%}.education li div{margin-right:8px}.education .date{font-weight:600;color:var(--navy-blue);grid-area:year}.education .school{grid-area:details;margin-right:20px}.education .status{grid-area:status;margin-right:10px;font-size:.9rem;color:var(--status-color)}.education .major{grid-area:major;font-size:1rem;color:var(--status-color)}.img-box{margin-left:0}.img-box img{max-width:100%}.skills-box{margin-top:3rem;display:flex;flex-wrap:wrap;gap:2rem}.skills-box .skills-content{flex:1 1 100%}.skills-content h3{font-size:1.3rem;line-height:1;margin-bottom:.6rem;text-align:left;color:var(--navy-blue)}.skills-content .content{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,6rem));gap:.8rem;justify-content:left}.skills-content .content span{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:6rem;height:5rem;border:2px solid var(--vintage-blue);border-radius:.3rem;font-weight:600;color:var(--navy-blue);transition:.3s ease}.skills-content .content span:hover{box-shadow:0 4px 8px var(--navy-blue)}.skills-content .content span box-icon,.skills-content .content span svg{width:3rem;height:3rem;fill:var(--vintage-blue)}.projects{background-color:var(--vintage-blue)}.projects .content{display:flex;justify-content:center;flex-direction:row;flex-wrap:wrap}.projects .content .projects-box{position:relative;max-width:100%;width:100%;margin:10px 0;height:265px;transition:.5s;text-align:center;background-color:var(--background-color)}.projects .content .projects-box .img-box,.projects .content .projects-box .text-box{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.projects .content .projects-box .img-box img{width:100%;height:100%;object-fit:contain}.projects .content .projects-box .text-box{background-color:var(--navy-blue);opacity:0;transition:.5s;cursor:pointer}.projects .content .projects-box:hover .text-box{opacity:1}.projects .content .projects-box .text-box h3{color:var(--light-yellow);text-transform:uppercase;letter-spacing:1px;font-size:1em}.activities-box{margin-top:1.5rem;padding:0 1rem}.activity-box{border-left:5px solid var(--vintage-blue);margin-bottom:1rem;overflow:hidden;background-color:#fff;border-radius:4px}.activity-box summary{list-style:none;cursor:pointer;padding:.75rem 1rem;background-color:var(--keyword-bg-color);transition:background-color .3s}.activity-box summary::-webkit-details-marker{display:none}.activity-box summary:hover{background-color:var(--hover-color)}.header-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.date{color:var(--vintage-blue);font-size:.85rem;margin-bottom:.25rem;display:flex;align-items:center}.date box-icon{fill:var(--vintage-blue);margin-right:.3rem;transform:translateY(.1rem)}.activity-category{font-size:.75rem;background-color:var(--vintage-blue);color:#fff;padding:.1rem .4rem;border-radius:3px;margin-bottom:.5rem}.activity-header h4{font-size:1rem;text-align:left}.activity-details{padding:1rem;font-size:.9rem;line-height:2;background-color:#4068821a;text-align:left}.activity-details ul{list-style:disc;padding-left:1rem}.activity-details ul li::marker{color:var(--vintage-blue)}.contact{background-color:var(--vintage-blue)}.contact .title h4{color:#fff;font-size:1.1rem;padding-top:1.8em}.contact .content{display:grid;grid-template-columns:1fr;margin:40px 0;grid-gap:20px}.contact .content a{height:50px;display:flex;justify-content:left;align-items:center;text-decoration:none;font-size:1.2em;color:#fff;transform:.5s}.contact .content a box-icon{fill:var(--deep-yellow);font-size:1.5em;margin-right:10px;transition:.5s;transform:translateY(-.4rem)}.contact .content a:hover,.contact .content a:hover box-icon{fill:var(--light-yellow);transform:scale(1.1) translateY(-.4rem)}.copyright{background-color:var(--vintage-blue);color:var(--orange-yellow);text-align:center;padding:10px}.copyright p{margin:100px;font-size:16px}@media (min-width: 768px){.languages{font-size:1.1em}.menu-icon{width:35px;height:30px}p{font-size:1.2em}.banner h2{font-size:1.5em}.frontend-dev,.my-name{display:inline}.projects .content .projects-box{width:265px;margin:10px}.activities-box{margin-top:2rem;padding:0 2rem}.activity-box summary{padding:1rem 1.5rem}.date{font-size:1rem}.activity-category{font-size:.85rem}.activity-header h4{font-size:1.125rem}.activity-details{padding:1.5rem 2rem;font-size:1rem;line-height:2.2}.contact .content{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.languages{left:100px}section{padding:100px}.sidebar ul li a{font-size:2em}.banner .side-img{display:block}.banner .content-box{width:calc(100% - 500px);padding:100px;position:absolute;right:0;top:0}.about .content{display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;grid-template-areas:"comp img" "comp edu";grid-gap:2%;margin-top:40px}.about .content .competencies-box{grid-area:comp}.about .content .img-box{grid-area:img}.about .content .education-box{grid-area:edu}.activities-box{margin-top:2.5rem;padding:0 3rem}.activity-box summary{padding:1.25rem 2rem}.date{font-size:1.1rem}.activity-category{font-size:.9rem}.activity-header h4{font-size:1.25rem}.activity-details{padding:2rem 3rem;font-size:1.1rem;line-height:2.4}.contact .content{grid-template-columns:repeat(4,1fr)}.contact .content a{justify-content:center}.contact .title h4{font-size:1.3rem}}@media (min-width: 1440px){.languages{font-size:1.2em}.menu-icon{width:40px;height:35px}p,.banner h4,.banner .keyword{font-size:1.2em}.banner h2{font-size:2em}.banner .btn{font-size:1.1em}.activities-box{margin-top:3rem;padding:0 4rem}.activity-box summary{padding:1.5rem 2.5rem}.date{font-size:1.2rem}.activity-category{font-size:1rem}.activity-header h4{font-size:1.5rem}.activity-details{padding:2.5rem 4rem;font-size:1.2rem;line-height:2.5}}.project-detail{background-color:#f9f9f9;padding:40px 20px}.project-detail .title h2{font-size:2rem;margin-bottom:20px;text-align:center;color:#333}.project-container{max-width:800px;margin:0 auto;background-color:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 8px #0000001a}.project-header{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;font-size:1rem;color:#555}.project-header>div{flex:1 1 200px}.project-container>div{margin-bottom:20px}.project-container h4{font-size:1.2rem;margin-bottom:8px;color:#222;border-bottom:2px solid #ddd;padding-bottom:5px}.project-container p{font-size:1rem;color:#444;line-height:1.6}.project-container ul{list-style-type:disc;margin-left:20px}.project-container li{margin-bottom:6px;font-size:1rem;color:#444}.links a{color:#1a0dab;text-decoration:none}.links a:hover{text-decoration:underline}:root{--background-color: #e7e5d6;--vintage-blue: #406882;--navy-blue: #20323e;--light-yellow: #f8ee84;--deep-yellow: #ddb665;--orange-yellow: #e8b069;--keyword-bg-color: #fff9f4;--status-color: #777;--hover-color: #efefef;--activity-bg-color: #fff;--activity-border-color: #ddd;--tailwind-color: #06b6d4;--html5-color: #e34f26;--css3-color: #1572b6;--javascript-color: #f7df1e;--typescript-color: #3178c6;--nextjs-color: #000000;--nodejs-color: #5fa04e;--react-color: #61dafb;--react-router: #ca4245;--react-query: #ff4154;--styled-components: #db7093;--firebase-color: #dd2c00;--figma-color: #f24e1e;--notion-color: #000000;--github-color: #181717}body{background-color:var(--background-color)}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,Noto Sans KR,sans-serif;scroll-behavior:smooth}