@charset "UTF-8";body,*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,sans-serif}.container{margin:20px auto;min-height:2700px;max-width:1440px}div{box-sizing:border-box}.header-wrapper{position:sticky;top:0;z-index:100;background:#fff}header{display:flex;border:1px solid #555}.title{font-size:19px;width:25%;padding:15px;border-right:1px solid #555;display:flex;align-items:center}.search{flex:1;padding:15px;border-right:1px solid #555}.search input{width:100%;border:none;outline:none;background:transparent;font-size:16px}.logos{display:flex;gap:10px;padding:15px}.logo{font-size:20px}.welcome{background-color:#fdde0a;text-align:center;padding:8px;font-size:14px;border-left:1px solid #555;border-right:1px solid #555}nav ul{display:flex;list-style:none;gap:30px;padding:15px}.menu li{cursor:pointer}.menu{border-top:1px solid #555;border-left:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555}.Welcome2{text-align:left;padding:15px;border-left:1px solid #555;border-right:1px solid #555}.temc{display:flex;gap:30px;padding:15px;border-top:1px solid #555;border-left:1px solid #555;border-right:1px solid #555}.toggle-item{display:flex;align-items:center;gap:10px}.track{position:relative;width:40px;height:1px;background:#000}.dot{position:absolute;top:-4px;width:10px;height:10px;border:1px solid #000;border-radius:50%;transition:all .3s}.dot.left{left:-5px;background:#000}.dot.right{right:-5px;background:#fff}.toggle-item button{background:transparent;border:none;cursor:pointer;font-size:18px;font-weight:700}.portfolio-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-flow:row;border-top:1px solid #555;border-left:1px solid #555;border-right:1px solid #555}.portfolio-item{border-right:1px solid #555;border-bottom:1px solid #555;display:flex;flex-direction:column;min-height:400px;margin-right:-1px}.portfolio-item.empty{background:transparent}.portfolio-item.empty .content-wrapper{border:none}.image-wrapper{width:100%;height:300px;overflow:hidden;background-color:#f5f5f5;border-bottom:1px solid #555}.portfolio-item--circle .image-wrapper{border-radius:50%;aspect-ratio:1/1;height:auto;width:85%;margin:20px auto}.image-wrapper img{width:100%;height:100%;object-fit:cover}.content-wrapper{flex:1;display:flex;flex-direction:column}.portfolio-title{font-size:18px;font-weight:500;padding:15px;border-bottom:1px solid #555}.portfolio-description{flex:1;font-size:14px;color:#666;line-height:1.6;padding:15px;border-bottom:1px solid #555;word-break:keep-all;white-space:pre-line}.portfolio-date,.lab-date{font-size:12px;color:#999;padding:10px 15px;font-family:Roboto Mono,monospace;font-weight:400}.lab-header{margin-top:-1px;padding:15px;font-size:20px;font-weight:700;border-top:1px solid #555;border-left:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555}.lab-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-flow:row;border-left:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555}.lab-item{border-right:1px solid #555;border-bottom:1px solid #555;display:flex;flex-direction:column;min-height:400px;margin-right:-1px;margin-bottom:-1px}.lab-item.empty{background:transparent}.lab-item.empty .content-wrapper{border:none}.lab-item .image-wrapper{width:100%;height:300px;overflow:hidden;background-color:#f5f5f5;border-bottom:1px solid #555}.lab-item .content-wrapper{flex:1;display:flex;flex-direction:column}.lab-title{font-size:16px;font-weight:500;padding:15px;border-bottom:1px solid #555}.lab-description{flex:1;font-size:14px;color:#666;line-height:1.6;padding:15px;border-bottom:1px solid #555;white-space:pre-line}.lab-date{font-size:12px;color:#999;padding:10px 15px}.image-wrapper video{width:100%;height:100%;object-fit:cover}.lab-item .image-wrapper video{width:100%;height:100%;object-fit:cover}.footer{display:flex;justify-content:space-between;align-items:center;padding:20px 15px;border-left:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555;margin-top:-1px}.footer__right{display:flex;justify-content:space-between;align-items:center;gap:15px}.footer__contact{font-size:12px;font-weight:700;letter-spacing:1px}.footer__icons{display:flex;align-items:center;gap:6px}.footer__icon{font-size:24px;color:#000;text-decoration:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.footer__icon:first-child{font-size:26px}.footer__icon:hover{opacity:.7}a{color:inherit;text-decoration:none}a:visited{color:inherit}a:hover{opacity:.7}@media(max-width:1439px){.portfolio-grid,.lab-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:1023px){.portfolio-grid,.lab-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:767px){.portfolio-grid,.lab-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:639px){.portfolio-grid,.lab-grid{grid-template-columns:1fr}.portfolio-item,.lab-item{grid-column:span 1!important}}.detail-layout{display:grid;grid-template-columns:minmax(150px,200px) 1fr minmax(200px,250px);grid-template-rows:auto auto;border-left:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555;grid-template-areas:"left center right" "content-left content content-right"}.detail-layout__left{grid-area:left;padding:20px 15px;border-right:1px solid #555;border-bottom:1px solid #555;word-break:keep-all}.detail-layout__left p:first-child{font-weight:700;margin-bottom:10px}.detail-layout__center{grid-area:center;border-right:1px solid #555;border-bottom:1px solid #555;max-width:1080px}.detail-layout__title{font-size:28px;font-weight:700;padding:20px 15px;border-bottom:1px solid #555;word-break:keep-all}.detail-layout__img{width:100%;max-width:1080px;height:auto;display:block;margin-bottom:30px}.detail-layout__img:last-child{margin-bottom:0}.detail-layout__right{grid-area:right;padding:20px 15px;border-bottom:1px solid #555;word-break:keep-all}.detail-layout__tech{padding-bottom:15px;border-bottom:1px solid #555;margin-bottom:15px;line-height:1.6;margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px;word-break:keep-all}.detail-layout__url{display:flex;flex-direction:column;gap:8px}.detail-layout__url span{font-weight:700}.detail-layout__url a{color:#06c;text-decoration:none;word-break:break-all}.detail-layout__url a:hover{text-decoration:underline}.detail-layout__content-left{grid-area:content-left;border-right:1px solid #555}.detail-layout__content{grid-area:content;padding:20px 15px;border-right:1px solid #555;line-height:1.8;color:#333;word-break:keep-all}.detail-layout__content p{margin:0}.detail-layout__content-right{grid-area:content-right}@media(max-width:1024px){.detail-layout{grid-template-columns:minmax(120px,150px) 1fr minmax(180px,200px)}.detail-layout__img{margin-bottom:3vw}}@media(max-width:768px){.detail-layout{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"center" "left" "right" "content"}.detail-layout__left{display:flex;gap:8px}.detail-layout__left p:first-child{margin-bottom:0}.detail-layout__right{padding:0;border-bottom:none}.detail-layout__tech{padding:20px 15px 15px;margin-left:0;margin-right:0;margin-bottom:0;border-bottom:1px solid #555}.detail-layout__url{flex-direction:row;align-items:baseline;padding:15px;border-bottom:1px solid #555}.detail-layout__url span{flex-shrink:0}.detail-layout__left,.detail-layout__center,.detail-layout__content{border-right:none;border-bottom:1px solid #555}.detail-layout__content-left,.detail-layout__content-right{display:none}.detail-layout__title{font-size:24px}.detail-layout__img{margin-bottom:5vw}.detail-layout{border-bottom:none}}