@import url(https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nanum+Gothic+Coding&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{margin:auto}*,body,html{margin:0;padding:0}*{box-sizing:border-box;list-style:none;text-decoration:none;word-break:keep-all}::-webkit-scrollbar{width:15px}::-webkit-scrollbar-thumb{background-color:orange;border-radius:10px}::-webkit-scrollbar-track{background-color:#020715}*{color:#f0f8ff;font-family:Nanum Gothic,sans-serif;scroll-behavior:smooth}h1{font-size:50px}h2{font-size:40px;margin-bottom:5vh}h2,h3{color:orange}h3{font-size:25px;margin-bottom:20px}h4{color:orange;font-size:23px}li,p{font-size:18px;line-height:1.4}section>ul>li{border:2px solid #f0f8ff;border-radius:15px;height:300px;margin:10px;padding:30px 50px;width:400px}section>ul>li>ul>li{text-align:start}section>ul>li>ul>li:not(:first-child){margin-top:10px}button{background-color:hsla(0,0%,100%,0);border:1px solid orange;border-radius:10px;color:orange;cursor:pointer;font-weight:700;height:30px;transition:.3s;width:100%}button:hover{background-color:orange;color:#020715}section:not(:first-child){background-color:#020715;padding-top:10vh}section>h2{text-align:center}.active{color:orange}.scrollX{overflow:hidden}.orange{color:orange;font-weight:600}.max1600{margin:auto;max-width:1600px}@media screen and (min-width:768px)and (max-width:1023px){h1{font-size:35px}h2{font-size:30px}h3{font-size:25px}h4{font-size:22px}li,p{font-size:18px}section>ul>li{height:300px;margin:10px;padding:20px 30px;width:300px}.intro .txtBox .typingText{font-size:45px!important}.intro .txtBox .typingText:after{height:45px!important}.portfoilo>ul{justify-content:center}}@media screen and (max-width:767px){h1{font-size:30px}h2{font-size:27px}h3{font-size:24px}h4{font-size:20px}li,p{font-size:16px}section>ul>li{height:300px;margin:10px;padding:10px 20px;width:250px}.intro{height:100%}.intro .txtBox .typingText{font-size:40px!important}.intro .txtBox .typingText:after{height:40px!important}.portfoilo>ul{justify-content:center}.popup .popupWrap .move{left:100%!important;top:65px!important}}header{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgba(240,248,255,.1);margin:auto;padding:20px 0;position:fixed;width:100%;z-index:1}header ul{display:flex;justify-content:space-between;margin:auto;padding:0;width:300px}header ul li{cursor:pointer;text-align:center;transition:.3s}@-webkit-keyframes cursor{0%{background-color:#f0f8ff}to{background-color:#020715}}@keyframes cursor{0%{background-color:#f0f8ff}to{background-color:#020715}}.intro{height:100vh;position:relative;width:100%}.intro .txtBox{color:#f0f8ff;padding:10vh 5vw}.intro .txtBox h1{margin-bottom:20px}.intro .txtBox h2{margin:30px 0 20px}.intro .txtBox .typingText{color:orange;font-size:55px;font-weight:700}.intro .txtBox .typingText:after{-webkit-animation:cursor 1s steps(2) infinite;animation:cursor 1s steps(2) infinite;content:"";display:inline-block;height:50px;margin-left:5px;position:relative;top:5px;width:3px}.intro video{-webkit-filter:brightness(30%);filter:brightness(30%);height:100%;object-fit:cover;position:absolute;top:0;width:100%;z-index:-1}.intro video,.intro video source{overflow:hidden}.skill .skillWrap{display:flex;flex-flow:wrap;justify-content:space-evenly;padding:0 5%}.skill .skillWrap .skillBox{overflow:hidden;position:relative;transition:.2s}.skill .skillWrap .skillBox:hover{border:2px solid orange;box-shadow:5px 5px 0 orange;-webkit-transform:translate(-5px,-5px);transform:translate(-5px,-5px);z-index:0}.skill .skillWrap .skillBox:hover:before{-webkit-transform:skewX(45deg) translateX(600px);transform:skewX(45deg) translateX(600px)}.skill .skillWrap .skillBox:before{background:hsla(0,0%,100%,.5);content:"";height:100%;left:0;position:absolute;top:0;-webkit-transform:skewX(45deg) translateX(-250px);transform:skewX(45deg) translateX(-250px);transition:.5s;width:70px}.portfoilo h4{text-align:center}.portfoilo>ul{display:flex;flex-wrap:wrap;padding:0 5%}.portfoilo>ul>li{overflow:hidden;padding:0;position:relative}.portfoilo>ul>li .backBox{height:100%;width:100%}.portfoilo>ul>li .backBox img{height:100%;object-fit:cover;width:100%}.portfoilo>ul>li .btnBox button:not(:first-child){margin-top:5px}.portfoilo>ul>li:hover .backBox{-webkit-filter:brightness(30%);filter:brightness(30%)}.portfoilo>ul>li .hoverShow{display:flex;flex-direction:column;height:80%;justify-content:space-between;margin:30px 5%;opacity:0;position:absolute;top:0;transition:.3s;width:90%}.portfoilo>ul>li .hoverShow .titleBox{align-items:center;display:flex;justify-content:center}.portfoilo>ul>li .hoverShow .titleBox img{height:40px;margin-left:10px;object-fit:contain;width:40px}.portfoilo>ul>li:hover .hoverShow{opacity:1}.popup{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;height:100%;justify-content:center;position:fixed;scroll-behavior:auto;top:0;width:100vw;z-index:1}.popup .popupWrap{background-color:#020715;border:1px solid #f0f8ff;border-radius:10px;height:600px;overflow-y:scroll;padding:0 30px 30px;position:relative;width:800px}.popup .popupWrap img{margin:20px 0;object-fit:contain;width:100%}.popup .popupWrap button{border-radius:50%;border-width:2px;height:30px;position:-webkit-sticky;position:sticky;width:30px}.popup .popupWrap .close{left:100%;top:30px}.popup .popupWrap .move{left:90%;top:30px}
/*# sourceMappingURL=main.2ca3cbec.css.map*/