blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,select,td,textarea,th,ul{margin:0;padding:0}fieldset,img{border:0 none}dl,li,menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}button,input,select,textarea{font-size:100%;vertical-align:middle}button{border:0 none;background-color:transparent;cursor:pointer}table{border-spacing:0;border-collapse:collapse}body{-webkit-text-size-adjust:none}input:checked[type=checkbox]{background-color:#fff;-webkit-appearance:checkbox;color:#212126}html input[type=button],input[type=email],input[type=password],input[type=reset],input[type=search],input[type=submit],input[type=tel],input[type=text]{border-radius:0;-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}a,a:active,a:hover{text-decoration:none}address,caption,cite,code,dfn,em,var{font-weight:400;font-style:normal}body{background-color:#f0f7f8;text-align:center}@font-face{font-family:KoPubDotumMedium;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/KoPubDotumMedium.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Cafe24SsurroundAir;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Cafe24Ssurround;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:SpoqaHanSansNeo-Regular;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:SDSamliphopangche_Outline;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:SDSamliphopangche_Basic;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Basic.woff) format("woff");font-weight:400;font-style:normal}*{font-family:Cafe24Ssurround}.logo-text{font-family:SDSamliphopangche_Outline}.carousel__title{font-family:Cafe24Ssurround}.title{font-size:3rem}.navbar{margin-bottom:50px;position:fixed;top:0;width:100%;background-color:#c6dada;z-index:2000}.navbar nav{justify-content:space-between;align-items:center;height:70px;padding:0 2rem;display:flex}.navbar nav .title{font-weight:700;font-size:1.5rem;text-decoration:none;cursor:pointer}.navbar .menus{display:flex;gap:1rem;padding:.25rem 1rem;font-weight:700}.navbar .menu-item{text-decoration:none;color:inherit;cursor:pointer}.navbar ul{display:flex;flex-direction:row;list-style:none}.navbar ul li{margin-left:20px}.navbar ul li a{font-size:1.3rem;position:relative;padding:0 2px;color:#000}.navbar ul li a:before{content:"";position:absolute;width:100%;height:1px;bottom:-4px;left:0;background-color:hsla(0,0%,100%,.349);visibility:hidden;transform:scaleX(0);transition:all .4s ease-in-out}.navbar ul li a:hover:before{visibility:visible;transform:scaleX(1)}.slogan{width:60%;display:flex;flex-direction:row;align-items:center;margin:100px auto 10px;text-align:left;height:800px}.slogan .slo_title{font-size:3rem;line-height:170%}.slogan .slo_title .slo_key{color:#18cccc}.slogan .slo_title .slo_sub{position:absolute;top:200px;left:10%;color:#a2b6c9;font-size:1.7rem}.slogan .slide-enter-active{transition:all .4s ease}.slogan .slide-enter{transform:translateX(-100%)}.about{width:65%;height:500px;margin:100px auto}.about .about_container{background-color:#a1dbdb;display:flex;justify-content:center;align-items:center;border-radius:30px;width:100%;height:100%;margin-top:40px}.about .image-wrapper{width:35%}.about .info-all-wrapper{width:60%}.about img{width:200px;border-radius:100px}.about .info-wrapper{display:flex;align-items:center;margin-top:30px;padding-bottom:2px;font-size:1.66rem}.about .profile-name{margin-top:30px;font-size:1.6rem}.about .small-tag{font-size:1rem;opacity:.4}.skills{margin-top:100px}.skills .section-content{width:50%;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.skills .skill{margin-left:60px}.skills img{margin-top:50px;max-width:120px;height:120px}.skills .altCaption{margin-top:1rem}.experience{margin-top:200px}.experience .container{width:100%;display:flex;align-items:center;justify-content:center;padding:70px 0 50px}.experience .date{font-size:1rem;margin-bottom:10px;color:#000}.experience .timeline{width:80%;height:auto;max-width:800px;margin:0 auto;position:relative}.experience .timeline ul{list-style:none}.experience .timeline li{padding:20px;line-height:150%;background-color:#a1dbdb;border-radius:10px;margin-bottom:20px}.experience .timeline li:last-child{margin-bottom:0}.experience .timeline li pre{font-size:1.2rem}@media only screen and (min-width:768px){.experience .timeline:before{content:"";position:absolute;transform:translateX(-50%);width:2px;height:100%;background-color:grey}.experience .timeline li{width:50%;position:relative;margin-bottom:50px}.experience .timeline li:before{content:"";position:absolute;height:20px;width:20px;border-radius:50%;background-color:grey;top:0}.experience .timeline li:hover:before{background-color:#0ff}.experience .timeline li:nth-child(odd){float:left;clear:right;transform:translateX(-70px);border-radius:20px 0 20px 20px}.experience .timeline li:nth-child(odd):before{transform:translate(50%,-50%);right:-30px}.experience .timeline li:nth-child(2n){float:right;clear:left;transform:translateX(70px);border-radius:0 20px 20px 20px}.experience .timeline li:nth-child(2n):before{transform:translate(-50%,-50%);left:-30px}.experience .date{position:absolute;top:-30px}}.project{margin-top:150px;height:900px}.project #project-container{width:300px;perspective:1000px;margin:80px auto}.project #project-carousel,.project #project-container{position:relative;display:flex;transform-style:preserve-3d;transform:rotateX(-10deg)}.project #project-carousel{width:100%;height:100%;-webkit-animation:rotate360 60s linear infinite forwards;animation:rotate360 60s linear infinite forwards}.project #project-carousel:hover{-webkit-animation-play-state:paused;animation-play-state:paused}.project .carousel__title{width:100%;position:absolute;top:-30px;text-align:center}.project .carousel__face{position:absolute;width:190px;height:300px;top:20px;left:0;right:0;background-size:cover;box-shadow:0 0 12px rgba(0,0,0,.5);display:flex;border-radius:10px;-webkit-box-reflect:below 10px linear-gradient transparent,transparent,rgba(0,0,0,.3333333333333333)}.project .carousel__face:hover{cursor:pointer;box-shadow:0 0 20px #fff;-webkit-box-reflect:below 10px linear-gradient transparent,transparent,rgba(0,0,0,.4666666666666667)}.project .carousel__face img{width:190px;border-radius:10px}@-webkit-keyframes rotate360{0%{transform:rotateY(0deg)}to{transform:rotateY(-1turn)}}@keyframes rotate360{0%{transform:rotateY(0deg)}to{transform:rotateY(-1turn)}}@-webkit-keyframes spin{0%{transform:rotateY(0deg)}to{transform:rotateY(1turn)}}@keyframes spin{0%{transform:rotateY(0deg)}to{transform:rotateY(1turn)}}@-webkit-keyframes spinRevert{0%{transform:rotateY(0deg)}to{transform:rotateY(-1turn)}}@keyframes spinRevert{0%{transform:rotateY(0deg)}to{transform:rotateY(-1turn)}}.project-detail{font-family:SDSamliphopangche_Basic;margin-top:200px}.project-detail hr{border:1px solid #000;width:93%}.project-detail h2{margin-bottom:30px}.project-detail h3{margin:40px 30px 20px}.project-detail .od{padding-left:30px}.project-detail .project__card{width:800px;min-width:500px;height:300px;background:orange;position:relative;margin:100px;border-radius:8px;box-shadow:-5px 10px 45px -15px #000;transition:transform .3s ease}.project-detail .project__card .stacks__container{position:absolute;left:10px;bottom:calc(100% - 20px);display:flex;z-index:5}.project-detail .project__card .image__wrapper{position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;width:40%;height:100%;transition:margin-right .3s ease .08s}.project-detail .project__card .project__image{max-width:100%;max-height:100%;transform:scale(1.1);box-shadow:-5px 10px 20px -2px rgba(0,0,0,.3);z-index:5;border-radius:5px}.project-detail .project__card .project__image.large{max-width:120%}.project-detail .project__card .title{position:absolute;bottom:-25px;left:-30px;line-height:90%;width:300px;text-align:left;color:#fff;font-weight:600;font-size:60px;transition:transform .3s ease .08s;z-index:10;pointer-events:none}.project-detail .project__card .description{box-sizing:border-box;width:55%;text-align:left;padding:40px 30px;color:#fff;font-size:1.1rem}.project-detail .project__card:hover{transform:scale(1.05)}.project-detail .project__card:hover .title{transform:scale(1.05) translate(-3px,2px)}.project-detail .text_info{text-align:left;font-size:1.6rem;margin:50px 100px}.project-detail .text_info div{margin-top:20px}.project-detail .arch_info{text-align:left;font-size:1.6rem;margin:50px 100px}.project-detail .arch_info .img__wrapper img{margin-top:20px;width:70%;border-radius:20px}.project-detail .impl_info{text-align:left;font-size:1.6rem;margin:50px 100px;width:80%}.project-detail .impl_info .stage{display:flex;align-items:center}.project-detail .impl_info .img__wrapper{text-align:center}.project-detail .impl_info .img__wrapper img{width:500px;height:350px;margin-top:20px;border-radius:20px}.project-detail .impl_info .info-wrapper{padding-left:50px}.project-detail .content_info{text-align:left;font-size:1.6rem;margin:50px 100px 100px}.project-detail .content_info .comment{line-height:170%;margin-left:50px}.project-detail .content_info .comment .fa-medal{color:#cccc3f}.project-detail .content_info .comment .fa-highlighter{color:#18aae4}.project-detail .content_info .comment .fa-thumbtack{color:#d35151}.footer[data-v-af893bce]{background-color:#000;height:60px;color:#fff;align-items:center;padding-top:20px;font-size:1.3rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#app{font-family:sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;height:100%;min-width:100vw;min-height:100vh}