@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap";:root{--black: #2d2d2d;--dark-gray: #666;--gray: #bbbcbd;--light-gray: #e8e8e8;--white-gray: #f6f7f9;--white: #fff;--green: #13cf94;--purple-blue: #5700f7;--yellow: #feb13d;--red: #f8004c;--primary-color: var(--green);--background-color: var(--white-gray);--border-color: var(--light-gray);--border-color-dark: var(--gray);--on-background-color: var(--dark-gray);--error-color: var(--red);--fs-normal: 14px;--fs-h1: 40px;--fs-h2: 32px;--fs-h3: 28px;--fs-h4: 24px;--fs-h5: 20px;--fs-h6: 16px;--fs-caption: 12px;--fs-caption-sm: 10px;--fw-extra-bold: 700;--fw-bold: 500;--fw-normal: 400;--lh-normal: calc(var(--fs-normal) + 8px);--lh-h1: calc(var(--fs-h1) + 8px);--lh-h2: calc(var(--fs-h2) + 8px);--lh-h3: calc(var(--fs-h3) + 8px);--lh-h4: calc(var(--fs-h4) + 8px);--lh-h5: calc(var(--fs-h5) + 8px);--lh-h6: calc(var(--fs-h6) + 8px);--lh-caption: calc(var(--fs-caption) + 8px);--lh-caption-sm: calc(var(--fs-caption-sm) + 8px);--br-lg: 16px;--br-md: 8px;--br-sm: 4px;--bs-layer1: 8px 11px 29px 0px rgba(129, 127, 139, .15);--col-1: 110px;--col-4: calc(var(--col-1) * 4)}html{scroll-behavior:smooth}body{font-family:Noto Sans KR,sans-serif;font-weight:var(--fw-normal);font-size:var(--fs-normal);color:var(--on-background-color)}.wrap{position:relative}.container{width:1200px;margin:0 auto}.container.main{padding:120px 0}.mobile_br{display:none}.header{position:absolute;left:40px;top:48px;display:flex;width:calc(100% - 80px);height:72px;border:1px solid rgba(255,255,255,.1);background-color:#ffffff0d;border-radius:72px;margin:0 auto;z-index:100}.header .container{display:flex;align-items:center}.logo a{display:block;margin-right:auto;font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--white);letter-spacing:-1px}.navigation{flex:1;text-align:center}.navigation a{margin:0 20px;color:var(--white);display:inline-block;overflow:hidden}.navigation a span{position:relative;transition:all .3s cubic-bezier(.68,-.55,.27,1.55);display:inline-block;padding:8px 0}.navigation a span:before{content:attr(data-naviname);position:absolute;top:100%;padding:8px 0}.menu{display:flex;align-items:center;justify-content:center;width:80px;height:100%;margin-left:auto;border:0 none;background:none;cursor:pointer}.menu>svg{width:24px;height:24px}.header.fixed{position:fixed;top:0;left:0;width:100%;border:0 none;border-radius:0;background:var(--white);box-shadow:0 10px 30px #0000000d}.header.fixed a,.header.fixed .logo{color:var(--black)}.header.fixed .menu{background:var(--primary-color)}.navigation a:hover{color:var(--primary-color)}.navigation a:hover span{transform:translateY(-100%)}.visual{position:relative;background:url(/portfolio_snh/assets/visual_bg-o9FzxT0B.jpg) no-repeat;background-attachment:fixed;background-position:top center}.visual .container:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#0000005c}.visual .container{height:100%}.visual .visual_content{position:sticky;z-index:1;padding:240px 0 120px}.visual .visual_content .title{line-height:1.4;font-size:64px;font-weight:var(--fw-extra-bold);color:var(--white)}.visual .visual_content .sub_title{font-size:var(--fs-h5);color:var(--white)}.visual .visual_content .visual_btn{display:inline-block;margin-top:48px;padding:16px 48px;border-radius:100px;border:1px solid var(--primary-color);background:var(--primary-color);line-height:1;font-size:var(--fs-h5);font-weight:var(--fw-bold);color:var(--white);transition:all .2s ease-in}.visual .visual_content .visual_btn:hover{border:1px solid var(--primary-color);background:none;color:var(--primary-color)}.main_title{margin-bottom:48px}.main_title .sub_title{margin-bottom:16px;font-size:var(--fs-h5);font-weight:var(--fw-bold);color:var(--primary-color)}.main_title .title{padding:24px 0;border-top:1px solid var(--border-color-dark);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--black)}.profile_content_wrap{display:flex;align-items:stretch}.profile_content_box{flex:1;margin-left:24px;padding:54px;border-radius:16px;border:1px solid var(--border-color);background:var(--background-color);transition:all .2s cubic-bezier(.45,.05,.55,.95)}.profile_content_box:nth-child(1){margin-left:0}.profile_content_box svg{width:48px;height:48px;margin-bottom:16px;fill:var(--primary-color)}.profile_content_title{margin-bottom:16px;font-size:var(--fs-h6);font-weight:var(--fw-bold);color:var(--black)}.profile_content_description li{margin-left:20px;list-style-type:disc;line-height:var(--lh-normal);font-size:var(--fs-normal)}.profile_content_box:hover{border:1px solid var(--primary-color);background:var(--primary-color);color:var(--white);box-shadow:4px 5px 12px 3px #00000014;padding:32px 54px 76px}.profile_content_box:hover svg{fill:var(--white)}.profile_content_box:hover .profile_content_title{color:var(--white)}.skills_set{display:flex;align-items:center;margin-bottom:16px}.skills_set .type{min-width:180px;margin-right:20px;line-height:var(--lh-h6);font-size:var(--fs-h6);font-weight:var(--fw-bold);color:var(--black)}.skills_set .skill{padding:12px 24px;margin-right:8px;border-radius:60px;border:1px solid var(--primary-color);background-color:var(--white);line-height:var(--lh-caption);font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--primary-color)}.skills_set .skill.em{border:0 none;background-color:var(--primary-color);font-weight:var(--fw-bold);color:var(--white)}.projects_total_info{margin-bottom:32px;text-align:right;font-size:var(--fs-h6);font-weight:var(--fw-bold);color:var(--primary-color)}.project_list>li{margin-bottom:48px}.project_item{display:flex;overflow:hidden}.project_img_wrap{width:32%;aspect-ratio:20/20;margin-right:48px;border-radius:16px;overflow:hidden}.project_img_wrap img{object-fit:cover;width:100%;height:100%;transition:transform .35s cubic-bezier(.25,.46,.45,.94)}.project_content_wrap{flex:1;display:flex;flex-direction:column}.project_name{margin-bottom:16px;line-height:var(--lh-h3);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--black)}.project_view_toggle{display:none}.project_item .hideable{flex:1;display:flex;flex-direction:column;transition:max-height .3s}.project_desc{flex:1}.project_desc li{margin-bottom:4px;margin-left:16px;list-style:disc;line-height:var(--lh-normal)}.project_info{display:flex;align-items:center}.project_info .title{margin-right:8px;font-weight:var(--fw-bold);color:var(--black);word-break:keep-all}.project_info .content{line-height:var(--lh-normal);word-break:break-all}.project_info a{color:var(--border-color-dark);text-decoration:underline}.project_link{display:block;margin-top:24px;padding:16px 48px;width:fit-content;background:var(--primary-color);border:1px solid var(--primary-color);border-radius:60px;font-size:var(--fs-h6);font-weight:var(--fw-bold);color:var(--white);transition:all .2s ease-out}.project_link:hover{background:var(--white);color:var(--primary-color)}.project_item:hover .project_img_wrap img{transform:scale(1.2) translateZ(0)}.work,.project{background:var(--background-color)}.footer{background:var(--black)}.footer .container{padding:80px 0}.my_email{text-align:center;font-size:var(--fs-h6);font-weight:var(--fw-bold);color:var(--light-gray)}.my_links{display:flex;justify-content:center;align-items:center;margin:24px 0}.my_links .link{display:flex;justify-content:center;align-items:center;width:56px;height:56px;border-radius:100%;border:2px solid var(--gray);font-size:0;overflow:hidden;opacity:.75;transition:all .3s cubic-bezier(.455,.03,.515,.955)}.my_links .link.velog{margin-right:16px}.my_links .link svg{width:24px;height:24px;fill:var(--gray)}.my_links .link svg path{fill:var(--gray)}.my_links .link:hover{border:0 none;background:var(--primary-color);opacity:1}.my_links .link:hover svg,.my_links .link:hover svg path{fill:var(--white)}.footer_comment{padding:48px 0;text-align:center;color:var(--light-gray)}.drawer_wrap{position:fixed;right:0;top:0;width:100%;height:100%;z-index:500;overflow:hidden;transition:all .55s;opacity:1;pointer-events:auto}.drawer_dim{position:absolute;right:0;top:0;width:100%;height:100%;background:linear-gradient(0deg,#000000e0,#00000059);transition:all .45s;opacity:1}.drawer{position:relative;width:230px;height:100%;margin-left:auto;background:var(--white);transition:transform .45s ease-in-out}.drawer_wrap.off{pointer-events:none;opacity:0}.drawer_wrap.off .drawer_dim{opacity:0}.drawer_wrap.off .drawer{transform:translate(230px)}.drawer .close_btn{width:70px;height:70px;border:0 none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer}.drawer .close_btn svg{width:24px;height:24px;fill:var(--on-background-color)}.drawer .navigation{padding:24px;text-align:left;border-bottom:1px solid var(--border-color)}.drawer .navigation a{display:block;margin:8px 0;color:var(--black)}.drawer .navigation a:hover{color:var(--border-color-dark)}.color_select{padding:16px 24px}.color_select .title{padding:12px 0;font-size:var(--fs-normal);font-weight:var(--fw-bold);color:var(--black)}.color_select .description{font-size:var(--fs-caption);line-height:var(--lh-caption-sm)}.color_select .color_chips{display:flex;align-items:center;margin-bottom:16px}.color_select .color_chips .color_chip{width:24px;height:24px;margin-right:8px;border-radius:100%;font-size:0;overflow:hidden;cursor:pointer;transition:all .23s cubic-bezier(.46,.03,.52,.96)}.color_select .color_chips .color_chip:hover{transform:translateY(-4px)}.color_select .color_chips .color_chip[data-color=green]{background:var(--green)}.color_select .color_chips .color_chip[data-color=purple-blue]{background:var(--purple-blue)}.color_select .color_chips .color_chip[data-color=yellow]{background:var(--yellow)}.color_select .color_chips .color_chip[data-color=red]{background:var(--red)}.top_button{position:fixed;bottom:40px;right:40px;display:flex;align-items:center;justify-content:center;width:56px;height:56px;font-size:0;border:0 none;border-radius:16px;background:var(--white);box-shadow:0 4px 8px 3px #00000026,0 1px 3px #0000004d;overflow:hidden;cursor:pointer}.top_button svg{width:24px;height:24px;fill:var(--primary-color)}@media (max-width: 1240px){.container{width:calc(100% - 80px)}.container.main{padding:80px 0}.header{top:24px}.logo a{font-size:var(--fs-h5)}.visual{background:var(--black)}.profile_content_wrap{flex-direction:column}.profile_content_box{margin-left:0;margin-bottom:24px;padding:24px;display:flex}.profile_content_box svg{margin-right:24px}.profile_content_box:hover{padding:16px 24px 32px}.skills_set{flex-wrap:wrap}.skills_set .type{width:100%;margin-bottom:8px}.skills_set .skill{padding:6px 12px;border-radius:8px}.work .container.main,.project .container.main{width:100%}.work .main_title,.project .main_title{padding:0 40px}.project_list{display:flex;flex-wrap:wrap;padding:0 28px}.project_list>li{flex-basis:50%;padding:0 12px}.project_item{height:100%;flex-direction:column;background:var(--white);border-radius:16px;box-shadow:3px 4px 12px #00000014}.project_img_wrap{width:100%}.project_content_wrap{padding:24px}.project_name{margin-bottom:0;font-size:var(--fs-h5)}.project_desc{padding:24px 0}.projects_total_info{padding:0 40px;text-align:left}.project_link{margin-top:24px;margin-left:auto;padding:12px 24px;font-size:var(--fs-normal)}.footer .container{padding:24px 0}.my_links{float:left;margin:0}.my_email{float:right;height:48px;display:flex;align-items:center;font-size:var(--fs-normal)}.footer_comment{clear:both;padding:16px 0}.top_button{bottom:16px;right:16px}}@media (max-width: 768px){.container{width:calc(100% - 32px)}.main_title{margin-bottom:16px}.main_title .title{padding:12px 0;font-size:var(--fs-h5)}.mobile_br{display:block}.header{left:16px;width:calc(100% - 32px);height:52px}.header .navigation{display:none}.menu{width:52px}.header.fixed .container{width:100%}.header.fixed .logo{padding-left:16px}.visual .visual_content{padding:172px 0 120px}.visual .visual_content .title{font-size:var(--fs-h2)}.visual .visual_content .sub_title{line-height:var(--lh-h6);font-size:var(--fs-h6);word-break:keep-all}.visual .visual_content .visual_btn{margin-top:32px;padding:12px 24px;font-size:var(--fs-normal)}.profile_content_box{padding:24px 16px;flex-direction:column}.work .main_title,.project .main_title{padding:0 16px}.projects_total_info{padding:8px 16px;margin-bottom:8px}.project_list{padding:0 16px}.project_list>li{flex-basis:100%;padding:0;margin-bottom:24px}.project_name{line-height:var(--lh-h6);font-size:var(--fs-h6);word-break:keep-all}.project_item .hideable{max-height:0;transition:max-height .5s cubic-bezier(0,1,0,1)}.project_item.show_content .hideable{max-height:500vh;transition:max-height 1s ease-in-out}.project_name_wrap{display:flex;align-items:center}.project_view_toggle{display:block;margin-left:auto;border:0 none;background:none}.project_view_toggle img{width:24px;height:24px;transition:all .55s}.project_item.show_content .project_view_toggle img{transform:rotate(180deg)}.my_links{float:none}.my_links .link{border:0 none}.my_email{float:none;justify-content:center}.footer_comment{line-height:var(--lh-caption-sm);font-size:var(--fs-caption-sm)}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0 none;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;color:#000}