body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{width:100dvw;height:100dvh}.App{padding:3vw 10vw;color:#fff}h1{font-size:5rem}p{margin:0}h2{font-size:2.3rem;color:#fff}.link-bar{position:fixed;left:2vw;top:50%;transform:translateY(-50%);display:flex;flex-flow:column;justify-content:center;height:100vh;gap:2vw;opacity:0;transition:opacity 1s ease;pointer-events:none}.link-bar.active{opacity:1;transition:opacity .5s ease;pointer-events:auto}.link-bar a{color:#fff;text-decoration:none;padding-right:5vw;font-size:1.5rem;opacity:.5}.wrap{padding-bottom:7rem}@media (min-width: 720px) and (max-width: 1799px){.App{width:100vw;height:100vh;box-sizing:border-box;padding:3vw 5vw}.App .link-bar{top:0;left:0;display:block;transform:translate(0);height:9vh;width:100vw;text-align:center;z-index:5;background:#22102ecf}.App .link-bar a{display:inline-block;font-size:2rem;padding:2rem 1rem}.App h2{font-size:2.8rem;padding:3rem 0}}@media (min-width: 335px) and (max-width: 719px){.App{padding:3vw 6vw}.App h2{font-size:2.1rem}.App .link-bar{top:0;left:0;display:block;transform:translate(0);height:8vh;width:100vw;text-align:center;z-index:5;background:#22102ecf}.App .link-bar a{display:inline-block;font-size:1.2rem;padding:2rem 1rem}}@font-face{font-family:Pretendard-Regular;src:url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff) format("woff");font-weight:400;font-style:normal}body{font-family:Pretendard-Regular,sans-serif;background:#22112e;width:100%;height:100%}.home a{text-decoration:none;color:#fff}.home .main{height:100vh;padding:80px 0;box-sizing:border-box}.home .main .top{font-size:32px;font-weight:400;position:relative}.home .main .top:after{content:"";position:absolute;top:20px;left:310px;width:42.5%;height:2px;background:#fff;animation:topline 1.5s ease-in}.home .main .scroll{position:absolute;bottom:100px;left:50%;transform:scaleY(.7) translate(-50%)}.home .main .scroll span{position:absolute;top:0;left:50%;width:24px;height:24px;margin-left:-12px;border-left:3px solid #fff;border-bottom:3px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb 2s infinite;animation:sdb 2s infinite;opacity:0;box-sizing:border-box}.home .main .scroll span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}.home .main .scroll span:nth-of-type(2){top:15px;-webkit-animation-delay:.15s;animation-delay:.15s}.home .main .scroll span:nth-of-type(3){top:30px;-webkit-animation-delay:.3s;animation-delay:.3s}.home .about{display:flex;gap:5rem;margin-bottom:10vw;align-items:center;padding-left:8rem}.home .about h2.name{margin:2rem 0 1rem;text-align:center}.home .about .profileBox span{width:10rem;height:10rem;border-radius:100%;display:inline-block;background:url(https://bomvomsss.github.io/first_portfolio/img/20201224_175629104_iOS.jpg) no-repeat center top/110%}.home .about .profileBox span img{width:100%}.home .about p{font-size:1.3rem;line-height:1.8rem}.home .career,.home .skill{padding-left:8rem}.home .skill h2{margin:5rem 0 3.5rem}.home .skill p{font-size:1.4rem;font-weight:700;margin:1em 0 .8rem}.home .skill>div{display:flex;justify-content:left;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}.home .skill span{padding:.3rem .4rem;display:flex;align-items:flex-start;background:#fff;border-radius:.2rem;color:#000;width:fit-content}.home .skill span svg{height:1.1rem;margin-right:.2rem}.home .skill span i{font-style:normal;font-size:.8rem;line-height:1.1rem;transform:scaleX(.6);color:#e08855}.home .license{padding-left:8rem}.home .license h2{margin:5rem 0 3.5rem}.home .licenseBox{display:flex;justify-content:left;margin-bottom:1.5rem}.home .licenseBox p{font-size:1.4rem;font-weight:700;width:30%}.home .licenseBox p i{font-weight:400;font-size:1.1rem;font-style:normal}.home .licenseBox p span{display:block;font-size:1.2rem;font-weight:400;margin-top:.3rem}.home .licenseBox ul{margin-top:.7rem;padding-left:1.3rem}.home .licenseBox ul li{font-size:1.1rem;text-decoration:none}.home .licenseBox ol{width:60%}.home .licenseBox ol li{width:100%;margin-bottom:3rem;font-size:1.3rem;font-weight:400}.home .licenseBox ol ul.flexBox{display:flex;flex-wrap:wrap;column-gap:2em}.home .licenseBox ol ul.flexBox li{width:40%}.home .licenseBox ol ul li{font-size:1.1rem;margin-bottom:.3rem;width:100%}.home .licenseBox ol ul li a{font-weight:700;text-decoration:underline}.home .licenseBox ol ul li a.link{font-size:1.3rem}.home .licenseBox ol ul li a.link svg{vertical-align:bottom}@keyframes topline{0%{width:0}to{width:42.5%}}@-webkit-keyframes sdb{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes sdb{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes topline2{0%{width:0}to{width:19rem}}@keyframes topline3{0%{width:0}to{width:30px}}@media (min-width: 720px) and (max-width: 1799px){.home .main{width:90vw;padding:3rem}.home .main .top{font-size:3em}.home .main .top:after{top:2.3rem;left:10em;width:4.5em;height:1px;animation:topline2 1.5s ease-in}.home .main h1{font-size:7em}.home .main .scroll span{top:15rem}.home .main .scroll span:nth-of-type(2){top:16rem}.home .main .scroll span:nth-of-type(3){top:17rem}.home .about{display:block;padding-left:0}.home .about .profileBox{text-align:center;margin-bottom:4rem}.home .about .profileBox span{width:13rem;height:13rem}.home .about .profileBox h2.name{margin:1rem 0 0;font-size:3rem}.home .about p{font-size:1.5em;line-height:2.3rem}.home .career,.home .skill,.home .license{padding-left:0}.home .career .licenseBox p,.home .skill .licenseBox p,.home .license .licenseBox p{width:45%}.home .career .licenseBox ol ul.flexBox li,.home .skill .licenseBox ol ul.flexBox li,.home .license .licenseBox ol ul.flexBox li{width:43%}}@media (min-width: 335px) and (max-width: 719px){.home .main{width:87vw;padding:3rem 0;height:100dvh}.home .main .top{font-size:1.8em}.home .main .top:after{top:1rem;left:9.8em;width:30px;height:1px;animation:topline3 1s ease-in}.home .main h1{font-size:4em}.home .main .scroll span{top:38rem}.home .main .scroll span:nth-of-type(2){top:39rem}.home .main .scroll span:nth-of-type(3){top:40rem}.home .about{display:block;padding:0 0 3rem}.home .about .profileBox{text-align:center;margin-bottom:3rem;width:85dvw}.home .about .profileBox span{width:13rem;height:13rem}.home .about .profileBox h2.name{margin:1rem 0 0;font-size:1.5rem}.home .about p{font-size:1em;line-height:1.8rem;letter-spacing:.8;width:85dvw}.home .career,.home .skill,.home .license{padding-left:0}.home .career h2,.home .skill h2,.home .license h2{margin:8rem 0 3.5rem}.home .career .licenseBox,.home .skill .licenseBox,.home .license .licenseBox{display:block;width:70dvw}.home .career .licenseBox p,.home .skill .licenseBox p,.home .license .licenseBox p,.home .career .licenseBox ol,.home .skill .licenseBox ol,.home .license .licenseBox ol,.home .career .licenseBox ol ul,.home .skill .licenseBox ol ul,.home .license .licenseBox ol ul{width:100%}.home .career .licenseBox ol ul.flexBox li,.home .skill .licenseBox ol ul.flexBox li,.home .license .licenseBox ol ul.flexBox li{width:43%}.home .career .licenseBox ol ul li,.home .skill .licenseBox ol ul li,.home .license .licenseBox ol ul li{width:100%;font-size:1rem}.home .career p,.home .skill p,.home .license p{margin-bottom:1.5rem;font-size:1.2rem}.home .career .bestSkill,.home .career .normalSkill,.home .career .canSkill,.home .skill .bestSkill,.home .skill .normalSkill,.home .skill .canSkill,.home .license .bestSkill,.home .license .normalSkill,.home .license .canSkill{width:90dvw}.home .career .bestSkill span,.home .career .normalSkill span,.home .career .canSkill span,.home .skill .bestSkill span,.home .skill .normalSkill span,.home .skill .canSkill span,.home .license .bestSkill span,.home .license .normalSkill span,.home .license .canSkill span{font-size:1.1rem}.home .licenseBox ol li{font-size:1.2rem}}.project{padding-left:8rem}.project .projectItem{margin-bottom:7vh}.project strong{font-weight:400;display:block}.project h2.tit{display:inline-block;margin:5rem 1.5rem 8rem 0}.project .projectBox{display:flex;gap:3rem;align-items:center;justify-content:space-between;margin-bottom:3rem}.project .projectBox a{font-size:1rem;color:#fff;text-decoration:none;width:15rem;display:inline-block;text-align:center}.project .projectBox a:hover{transform:scale(1.1);transition:size .2s ease}.project .projectBox h3{font-size:1.8rem;width:40%}.project .projectBox h4 a{font-size:1.8rem}.project .projectBox .imgBox{width:50%;text-align:center}.project .projectBox .imgBox img{width:10rem}.project .projectBox ul{width:48%;list-style-type:circle}.project .projectBox ul li{font-size:1.2rem;margin-bottom:.5rem}.project .projectBox ul li a{width:5.8rem}.project .projectBox .icon{width:20%}.project .projectBox .icon img{filter:invert(1);width:1.4rem;margin-bottom:-.3rem;margin-left:.2rem}.project .projectBox .per{display:flex;align-items:center}.project .projectBox .per .icon,.project .projectBox .per .code{width:50%}.project .projectBox .per ul{width:60%}@media (min-width: 720px) and (max-width: 1799px){.project{padding-left:0}.project strong{font-size:1.5rem}.project h3{font-size:1.3rem}.project .projectBox ul li.icon a{font-size:1.2rem}}@media (min-width: 335px) and (max-width: 719px){.project{padding-left:0}.project .subtit{font-size:.8rem}.project h3{font-size:1rem;text-align:left;margin-bottom:5rem}.project h3:before{content:":: ";display:inline-block;margin-right:5px}.project .projectBox{display:block;padding-bottom:3rem;border-bottom:1px dotted #fff}.project .projectBox h4 a{font-size:1.5rem;width:100%}.project .projectBox .imgBox{width:100%}.project .projectBox .imgBox img{width:11rem}.project .projectBox a{margin:1rem 0;text-align:center;width:100%}.project .projectBox ul{width:90vw;padding-right:1rem;box-sizing:border-box}.project .projectBox ul li{font-size:1rem}.project .projectBox ul li.icon a{margin:0 0 0 -4px;font-size:1.1rem}.project .projectBox ul li.icon img{width:1.2rem}.project .projectBox.monami .imgBox img{position:static;transform:translate(0)}}.contact{padding-left:8rem}.contact .subtit{font-size:.8rem}.contact .conBox{display:flex;justify-content:space-evenly;list-style:none;margin-top:15rem;padding:0}.contact .conBox li{width:33%;text-align:center}.contact .conBox li p{font-size:2rem;margin-bottom:2rem;font-weight:700}.contact .conBox li svg{width:8rem;height:8rem;margin-bottom:2rem}.contact .conBox li span{display:block;font-size:1.3rem}.contact .conBox li span svg{width:1.5rem;height:1.5rem;margin-bottom:-.3rem}.contact .conBox li a{color:#fff;text-decoration:none}.contact .conBox li a img{filter:invert(1);width:1.5rem;margin-bottom:-.3rem}@media (min-width: 720px) and (max-width: 1799px){.contact{padding-left:0;margin-top:10rem}}@media (min-width: 335px) and (max-width: 719px){.contact{padding-left:0;padding-bottom:0;margin-top:8rem}.contact .conBox{padding-left:5rem;display:block;margin-top:3rem}.contact .conBox li{width:100%;margin-bottom:3rem}.contact .conBox li p{font-size:1.2rem;margin-bottom:1rem}.contact .conBox li svg{width:5rem;height:5rem;margin-bottom:1rem}.contact .conBox li span{font-size:1rem}.contact .conBox li a img{width:1rem}}