@import url(https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap);a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:#g;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}html{scroll-behavior:smooth}a{color:inherit;text-decoration:none}.small_hr{border:.5px solid #f6f0f9;width:30%}@font-face{font-family:Billabong;src:url(/portfolio/static/media/Ballet%20Harmony.d12c11763f333962fb35.ttf)}@media(min-width:1024px){header{height:100px;left:0;position:-webkit-sticky;position:sticky;right:0;top:0;z-index:99}header .header-inner{background-color:#fff}header .header-inner .container{align-items:center;display:flex;height:80px;justify-content:space-between}header .header-inner .container #logo{font-family:Billabong;font-size:36px}header .header-inner .container nav{display:flex;font-size:20px;justify-content:space-between;width:500px}header .header-inner .container nav a{color:#333;text-decoration:none;transition:color .3s ease,transform .3s ease}header .header-inner .container nav a:hover{color:#3339;transform:scale(1.05)}.projects-item{box-shadow:1px 1px 8px 1px #0000002e;cursor:pointer;height:100%;position:relative;transform-style:preserve-3d;transition:1.8s;width:100%}.projects-item h3{font-weight:600;margin:10px 0}.projects-item .project-back,.projects-item .project-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}.projects-item .project-front .info{display:none}.projects-item .project-front:hover{align-items:center;display:flex;flex-direction:column;justify-content:center;line-height:1.5}.projects-item .project-front:hover:after{background-color:#00000073;content:"";height:100%;position:absolute;width:100%}.projects-item .project-front:hover .info{align-items:center;border:1px solid #fff;display:flex;flex-direction:column;height:70%;justify-content:center;width:70%;z-index:1}.projects-item .project-front:hover .info .title{color:#fff;font-size:18px}.projects-item .project-front:hover .info .click-msg{color:#caf7e3;font-size:16px;padding-top:10px}.projects-item .project-back{background:#fff;font-size:12px;padding:10px 16px;transform:rotateY(180deg)}.projects-item .project-back h3{color:#4c4c6d;font-size:18px;font-weight:700}.projects-item .project-back h4{font-style:italic;font-weight:600;margin-right:10px}.projects-item .project-back .back-inner{margin-bottom:12px}.projects-item .project-back .detail p{line-height:1.4;word-break:keep-all}.projects-item .project-back .time{display:flex}.projects-item .project-back .tech h4{margin-bottom:8px}.projects-item .project-back .tech ul{display:flex;flex-wrap:wrap}.projects-item .project-back .tech ul li{line-height:1.2;margin-right:8px}.projects-item .project-back .work h4{margin-bottom:8px}.projects-item .project-back .work ul li{line-height:1.2;margin-right:6px}.projects-item .project-back .work ul li .dot{margin-right:4px}.projects-item .project-back .btn-group button{background-color:#ffa5a5;border:none;border-radius:12px;color:#fff;cursor:pointer;margin-bottom:5px;margin-right:10px;padding:4px 8px;transition:all .2s linear}.projects-item .project-back .btn-group button:focus,.projects-item .project-back .btn-group button:hover{background-color:#f47c7c}.App{font-family:Nanum Gothic,sans-serif;position:relative}.App .container{margin:0 auto;width:90vw}.App section{border-bottom:2px dashed #ceb8b8;padding:150px 0}.App section#contact{border:none}.App section h2{font-size:36px;font-weight:700;text-align:center}#about .about-inner{margin:20px auto 0;padding:20px;width:980px}#about #introduction{color:#000000b3;font-size:36px;font-weight:600;height:450px;line-height:1.5;margin-top:0;text-align:center}#about #introduction .typeit{height:120px;margin-bottom:16px}#about #introduction p{font-size:20px;font-weight:400}#about #profile{background-color:#fff;box-shadow:1px 1px 8px 1px #0003;padding-bottom:20px}#about #profile h2{margin:20px 0}#about #profile .profile-inner{align-items:center;display:flex;justify-content:space-evenly}#about #profile .profile-img{background-image:url(/portfolio/static/media/Profile_image.6f12784a7962bfc04dec.png);background-size:cover;border-radius:10%;display:flex;height:360px;width:280px}#about #profile .profile-list{color:#000000b3;font-size:20px;width:540px}#about #profile .profile-list ul{margin:10px auto;padding:10px 20px;width:480px}#about #profile .profile-list ul li{align-items:center;display:flex;margin-bottom:16px}#about #profile .profile-list ul li span{padding-left:30px}#skills{align-items:center;display:flex;flex-direction:column}#skills ul{margin-top:40px}#skills ul li{display:flex;justify-content:space-between;margin-bottom:20px;width:980px}#skills ul li .skill-name{align-items:center;color:#000000b3;display:flex;font-size:20px;font-weight:600;justify-content:center;width:120px}#skills ul li .ability-bar{background-color:#eee;border-radius:5px;box-shadow:1px 1px 6px 1px #0000004d;display:flex;flex-direction:column;height:32px;justify-content:center;padding:0 1px;width:800px}#skills ul li .ability-bar .ability-percent{align-items:center;animation:SkillUp 4s linear;background:linear-gradient(90deg,#fee9b2,#ffc898);border-radius:0 15px 15px 0;display:flex;height:30px;justify-content:flex-end;padding:0 20px}#skills ul li .ability-bar .ability-percent .percent{color:#fff;font-size:18px}#skills ul li .ability-bar p{display:none}}@media(min-width:1024px){@keyframes SkillUp{0%{width:10%}to{width:100%}}}@media(min-width:1024px){#projects .flipBtn{align-items:flex-end;display:flex;flex-direction:column;margin:0 auto;width:980px}#projects .flipBtn .filp-all{background-color:#fff;border:1px solid #00000073;color:#00000073;cursor:pointer;font-size:16px;padding:10px;text-align:center;transition:background-color 1s;width:100px}#projects .flipBtn .filp-all:hover{background-color:#000000b3;border:1px solid #000000b3;color:#fff}#projects .projects-grid{grid-gap:0 10px;display:grid;gap:0 10px;grid-auto-rows:280px;grid-template-columns:repeat(3,1fr);justify-content:center;justify-items:center;margin:20px auto 0;width:980px}#projects .projects-grid .flip{background:#fff;height:240px;perspective:1100px;width:320px}#projects .projects-grid .flip.active .projects-item{transform:rotateY(180deg)}#projects .projects-grid .flip.active .projects-item .project-front:after{display:none}#contact{display:flex;justify-content:space-between;margin:0 auto;width:980px}#contact .contact-inner{display:flex;flex-direction:column;justify-content:space-evenly;padding:20px 0;width:460px}#contact .contact-left{background-color:#fff;box-shadow:1px 1px 20px 1px #00000014}#contact .contact-left h2{font-size:28px}#contact .contact-left p{margin:0 auto;text-align:center;width:300px}#contact .contact-left .img{background-image:url(/portfolio/static/media/letter.7900b7d8bead4d50eeec.jpg);background-position:50%;background-size:cover;height:260px;margin:0 auto;width:300px}#contact .contact-right form input,#contact .contact-right form textarea{border:1px solid #00000040;color:#000000b3;font-family:Nanum Gothic,sans-serif;font-size:16px;margin-bottom:16px;width:460px}#contact .contact-right form input:focus,#contact .contact-right form textarea:focus{outline:none}#contact .contact-right form input{height:40px;padding:0 20px}#contact .contact-right form textarea{padding:16px 20px;resize:none}#contact .contact-right form button{background-color:#525e75;border:none;color:#fff;cursor:pointer;height:40px;margin:0 auto;transition:background-color .2s,box-shadow .2s;width:460px}#contact .contact-right form button:hover{background-color:#3c5788;box-shadow:1px 1px 8px 1px #00000040}footer{left:0;position:absolute;right:0}footer .footer-inner{background:linear-gradient(135deg,#7882a4,#9f87c0,#7882a4);border-top:1px solid #ffffff4d;box-shadow:0 -4px 4px #0003;color:#fff}footer .footer-inner .container{align-items:center;color:#fff;display:flex;font-size:16px;height:80px;justify-content:flex-end;padding:20px}footer .custom-shape-divider-bottom-1656519457{bottom:78px;left:0;line-height:0;overflow:hidden;position:absolute;transform:rotate(180deg);width:100%}footer .custom-shape-divider-bottom-1656519457 svg{display:block;height:60px;position:relative;width:calc(114% + 1.3px)}footer .custom-shape-divider-bottom-1656519457 .shape-fill{fill:#7882a4}}@media(min-width:768px)and (max-width:1023px){header{background-color:#fff;box-shadow:1px 0 8px 1px #00000040;height:60px;left:0;position:-webkit-sticky;position:sticky;right:0;top:0;z-index:9999}header .header-inner .container #logo{display:none}header .header-inner .container nav{align-items:center;display:flex;font-size:20px;height:60px;justify-content:space-around;margin:0 auto;width:80%}.custom-shape-divider-top-1656519075{display:none}.projects-item{box-shadow:1px 1px 8px 1px #0000002e;cursor:pointer;height:100%;position:relative;transform-style:preserve-3d;transition:1.8s;width:100%}.projects-item h3{font-weight:600;margin:10px 0}.projects-item .project-back,.projects-item .project-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}.projects-item .project-front .info{display:none}.projects-item .project-front:hover{align-items:center;display:flex;flex-direction:column;justify-content:center;line-height:1.5}.projects-item .project-front:hover:after{background-color:#00000073;content:"";height:100%;position:absolute;width:100%}.projects-item .project-front:hover .info{align-items:center;border:1px solid #fff;display:flex;flex-direction:column;height:70%;justify-content:center;width:80%;z-index:1}.projects-item .project-front:hover .info .title{color:#fff;font-size:15px}.projects-item .project-front:hover .info .click-msg{color:#caf7e3;font-size:12px;padding-top:20px}.projects-item .project-back{background:#fff;display:flex;flex-direction:column;font-size:12px;justify-content:center;padding:0 14px;transform:rotateY(180deg)}.projects-item .project-back h3{color:#4c4c6d;font-size:18px;font-weight:700}.projects-item .project-back h4{font-style:italic;font-weight:600;margin-right:10px}.projects-item .project-back .back-inner{margin-bottom:8px}.projects-item .project-back .detail p{line-height:1.25;word-break:keep-all}.projects-item .project-back .time{display:flex}.projects-item .project-back .tech h4{margin-bottom:4px}.projects-item .project-back .tech ul{display:flex;flex-wrap:wrap}.projects-item .project-back .tech ul li{line-height:1.2;margin-right:8px}.projects-item .project-back .work h4{margin-bottom:4px}.projects-item .project-back .work ul li{line-height:1.2;margin-right:6px}.projects-item .project-back .work ul li .dot{margin-right:4px}.projects-item .project-back .btn-group button{background-color:#ffc3c3;border:none;border-radius:12px;color:#fff;cursor:pointer;margin-right:10px;padding:4px 8px;transition:all .2s linear}.projects-item .project-back .btn-group button:focus,.projects-item .project-back .btn-group button:hover{background-color:#f47c7c}.App .container{margin:0 auto}.App section{border-bottom:2px dashed #ceb8b8;padding:120px 0 100px}.App section#contact{border:none}.App section h2{font-size:28px;font-weight:700;text-align:center}#about .about-inner{padding:10px 30px}#about #introduction{color:#000000b3;font-size:24px;font-weight:600;height:350px;line-height:1.5;text-align:center}#about #introduction .typeit{height:60px;margin-bottom:40px}#about #introduction p{font-size:18px;font-weight:400}#about #profile{background-color:#fff;box-shadow:1px 1px 8px 1px #00000040;margin:20px auto;padding-bottom:20px;width:80%}#about #profile h2{margin:20px 0}#about #profile .profile-inner{align-items:center;display:flex;justify-content:space-around}#about #profile .profile-img{background-image:url(/portfolio/static/media/Profile_image.6f12784a7962bfc04dec.png);background-size:cover;border-radius:10%;display:flex;height:320px;width:240px}#about #profile .profile-list{color:#000000b3;font-size:16px;width:300px}#about #profile .profile-list ul{width:330px}#about #profile .profile-list ul li{align-items:center;display:flex;margin-bottom:12px}#about #profile .profile-list ul li span{padding-left:12px}#about #profile .profile-list ul:last-child{margin-top:28px}#skills{align-items:center;display:flex;flex-direction:column}#skills ul{margin-top:20px;width:80%}#skills ul li{display:flex;justify-content:space-between;margin-top:16px}#skills ul li .skill-name{align-items:center;color:#000000b3;display:flex;font-size:18px;font-weight:600;justify-content:center;width:120px}#skills ul li .ability-bar{background-color:#eee;border-radius:4px;box-shadow:1px 1px 6px 1px #0000002e;display:flex;flex-direction:column;height:24px;justify-content:center;padding:0 1px;width:80%}#skills ul li .ability-bar .ability-percent{align-items:center;animation:SkillUp 2s linear;background:linear-gradient(90deg,#fee9b2,#ffc898);border-radius:0 12px 12px 0;display:flex;height:24px;justify-content:flex-end;padding:0 16px}#skills ul li .ability-bar .ability-percent .percent{color:#fff;font-size:16px}#skills ul li .ability-bar p{display:none}}@media(min-width:768px)and (max-width:1023px){@keyframes SkillUp{0%{width:10%}to{width:100%}}}@media(min-width:768px)and (max-width:1023px){#projects .flipBtn{align-items:flex-end;display:flex;flex-direction:column;margin:0 auto;width:100%}#projects .flipBtn .filp-all{background-color:#fff;border:1px solid #00000073;color:#00000073;cursor:pointer;font-size:16px;padding:8px;text-align:center;transition:background-color 1s;width:80px}#projects .flipBtn .filp-all:hover{background-color:#000000b3;border:1px solid #000000b3;color:#fff}#projects .projects-grid{grid-gap:10px 10px;display:grid;gap:10px 10px;grid-auto-rows:320px;grid-template-columns:repeat(2,1fr);justify-content:center;justify-items:center;margin:20px auto 0;width:100%}#projects .projects-grid .flip{background:#fff;height:100%;perspective:1100px;width:100%}#projects .projects-grid .flip.active .projects-item{transform:rotateY(180deg)}#projects .projects-grid .flip.active .projects-item .project-front:after{display:none}#contact{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:0 auto}#contact .contact-inner{width:320px}#contact .contact-left h2{font-size:24px}#contact .contact-left p{font-size:16px;margin:12px 0 20px;text-align:center}#contact .contact-left .img{display:none}#contact .contact-right form{align-items:center;display:flex;flex-direction:column;justify-content:center}#contact .contact-right form input,#contact .contact-right form textarea{border:1px solid #00000040;color:#000000b3;font-family:Nanum Gothic,sans-serif;font-size:12px;margin-bottom:12px;width:100%}#contact .contact-right form input:focus,#contact .contact-right form textarea:focus{outline:none}#contact .contact-right form input{height:24px;padding:0 12px}#contact .contact-right form textarea{padding:8px 12px;resize:none}#contact .contact-right form button{background-color:#525e75;border:none;color:#fff;cursor:pointer;height:30px;margin:0 auto;transition:background-color .2s,box-shadow .2s;width:100%}#contact .contact-right form button:hover{background-color:#3c5788;box-shadow:1px 1px 8px 1px #00000040}footer{left:0;position:absolute;right:0}footer .footer-inner{background-color:#7882a4}footer .footer-inner .container{align-items:center;color:#fff;display:flex;font-size:14px;height:60px;justify-content:flex-end;padding:20px}footer .custom-shape-divider-bottom-1656519457{bottom:59px;left:0;line-height:0;overflow:hidden;position:absolute;transform:rotate(180deg);width:100%}footer .custom-shape-divider-bottom-1656519457 svg{display:block;height:50px;position:relative;width:calc(114% + 1.3px)}footer .custom-shape-divider-bottom-1656519457 .shape-fill{fill:#7882a4}}@media(max-width:767px){header{background-color:#fff;box-shadow:1px 0 8px 1px #00000040;height:40px;left:0;position:-webkit-sticky;position:sticky;right:0;top:0;z-index:9999}header .header-inner .container #logo{display:none}header .header-inner .container nav{align-items:center;display:flex;font-size:14px;height:40px;justify-content:space-between;margin:0 auto;width:100%}.custom-shape-divider-top-1656519075{display:none}.projects-item{box-shadow:1px 1px 8px 1px #0000002e;cursor:pointer;height:100%;position:relative;transform-style:preserve-3d;transition:1.8s;width:100%}.projects-item h3{font-weight:600;margin-bottom:10px}.projects-item .project-back,.projects-item .project-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}.projects-item .project-front .info{display:none}.projects-item .project-front:hover{align-items:center;display:flex;flex-direction:column;justify-content:center;line-height:1.5}.projects-item .project-front:hover:after{background-color:#00000073;content:"";height:100%;position:absolute;width:100%}.projects-item .project-front:hover .info{align-items:center;border:1px solid #fff;display:flex;flex-direction:column;height:70%;justify-content:center;width:80%;z-index:1}.projects-item .project-front:hover .info .title{color:#fff;font-size:15px}.projects-item .project-front:hover .info .click-msg{color:#caf7e3;font-size:12px;padding-top:20px}.projects-item .project-back{background:#fff;display:flex;flex-direction:column;font-size:10px;justify-content:center;padding:0 14px;transform:rotateY(180deg)}.projects-item .project-back h3{color:#4c4c6d;font-size:16px;font-weight:700}.projects-item .project-back h4{font-style:italic;font-weight:600;margin-right:10px}.projects-item .project-back .back-inner{margin-bottom:8px}.projects-item .project-back .detail p{line-height:1.25;word-break:keep-all}.projects-item .project-back .time{display:flex}.projects-item .project-back .tech h4{margin-bottom:4px}.projects-item .project-back .tech ul{display:flex;flex-wrap:wrap}.projects-item .project-back .tech ul li{line-height:1.2;margin-right:8px}.projects-item .project-back .work h4{margin-bottom:4px}.projects-item .project-back .work ul li{line-height:1.2;margin-right:6px}.projects-item .project-back .work ul li .dot{margin-right:4px}.projects-item .project-back .btn-group button{background-color:#ffc3c3;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:10px;margin-right:10px;padding:4px 8px;transition:all .2s linear}.projects-item .project-back .btn-group button:focus,.projects-item .project-back .btn-group button:hover{background-color:#f47c7c}.App .container{margin:0 auto;width:90vw}.App section{border-bottom:2px dashed #ceb8b8;padding:50px 0}.App section#contact{border:none}.App section h2{font-size:20px;font-weight:700;text-align:center}#about .about-inner{padding:10px 30px}#about #introduction{color:#000000b3;font-size:16px;font-weight:600;height:350px;line-height:1.4;text-align:center}#about #introduction .typeit{height:70px;margin-bottom:10px;word-break:keep-all}#about #introduction p{font-size:12px;font-weight:400;word-break:keep-all}#about #profile{background-color:#f0f8ff;background-color:#fff;box-shadow:1px 1px 8px 1px #0000002e;margin:16px auto 0;padding:20px;width:100%}#about #profile h2{font-size:18px;margin-bottom:16px}#about #profile .profile-img{display:none}#about #profile .profile-list{color:#000000b3;font-size:12px}#about #profile .profile-list ul li{align-items:center;display:flex;margin-bottom:6px}#about #profile .profile-list ul li span{padding-left:10px}#about #profile .profile-list ul:first-child{border-bottom:1px dashed #ceb8b8;padding-bottom:10px}#about #profile .profile-list ul:last-child{display:flex;font-size:18px;justify-content:space-around;padding-top:14px}#about #profile .profile-list ul:last-child span{display:none}#skills{align-items:center;display:flex;flex-direction:column}#skills ul{margin-top:16px;width:100%}#skills ul li{display:flex;justify-content:space-between;margin-top:14px}#skills ul li .skill-name{align-items:center;color:#000000b3;display:flex;font-size:14px;font-weight:600;justify-content:center;width:120px}#skills ul li .ability-bar{background-color:#eee;border-radius:4px;box-shadow:1px 1px 6px 1px #0000002e;display:flex;flex-direction:column;height:16px;justify-content:center;padding:0 1px;width:90%}#skills ul li .ability-bar .ability-percent{align-items:center;animation:SkillUp 2s linear;background:linear-gradient(90deg,#fee9b2,#ffc898);border-radius:0 8px 8px 0;display:flex;height:16px;justify-content:flex-end}#skills ul li .ability-bar .ability-percent .percent{color:#fff;font-size:11px;padding-right:7px}#skills ul li .ability-bar p{display:none}}@media(max-width:767px){@keyframes SkillUp{0%{width:10%}to{width:100%}}}@media(max-width:767px){#projects .flipBtn{align-items:flex-end;display:flex;flex-direction:column;margin:0 auto;width:260px}#projects .flipBtn .filp-all{background-color:#fff;border:1px solid #00000073;color:#00000073;cursor:pointer;font-size:12px;margin-top:10px;padding:3px 6px;text-align:center;transition:background-color 1s;width:64px}#projects .flipBtn .filp-all:focus,#projects .flipBtn .filp-all:hover{background-color:#000000b3;border:1px solid #000000b3;color:#fff}#projects .projects-grid{align-items:center;display:flex;flex-direction:column;margin:12px auto 0}#projects .projects-grid .flip{background:#fff;height:240px;margin-bottom:8px;perspective:1100px;width:260px}#projects .projects-grid .flip.active .projects-item{transform:rotateY(180deg)}#projects .projects-grid .flip.active .projects-item .project-front:after{display:none}#contact{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:0 auto}#contact .contact-inner{width:260px}#contact .contact-left p{font-size:14px;margin:12px 0 24px;text-align:center}#contact .contact-left .img{display:none}#contact .contact-right{font-size:8px}#contact .contact-right form{align-items:center;display:flex;flex-direction:column;justify-content:center}#contact .contact-right form input,#contact .contact-right form textarea{border:1px solid #00000040;color:#000000b3;font-family:Nanum Gothic,sans-serif;font-size:10px;margin-bottom:12px;width:100%}#contact .contact-right form input:focus,#contact .contact-right form textarea:focus{outline:none}#contact .contact-right form input{height:24px;padding:0 12px}#contact .contact-right form textarea{padding:8px 12px;resize:none}#contact .contact-right form button{background-color:#525e75;border:none;color:#fff;cursor:pointer;font-size:12px;height:30px;margin:0 auto;transition:background-color .2s,box-shadow .2s;width:100%}#contact .contact-right form button:hover{background-color:#3c5788;box-shadow:1px 1px 8px 1px #00000040}footer{left:0;position:absolute;right:0}footer .footer-inner{background-color:#7882a4}footer .footer-inner .container{align-items:center;color:#fff;display:flex;font-size:10px;height:40px;justify-content:flex-end;line-height:1.2;padding:20px;word-break:keep-all}footer .custom-shape-divider-bottom-1656519457{bottom:39px;left:0;line-height:0;overflow:hidden;position:absolute;transform:rotate(180deg);width:100%}footer .custom-shape-divider-bottom-1656519457 svg{display:block;height:30px;position:relative;width:calc(114% + 1.3px)}footer .custom-shape-divider-bottom-1656519457 .shape-fill{fill:#7882a4}}
/*# sourceMappingURL=main.f8e1662e.css.map*/