.portfolio-width{width:1200px;max-width:calc(100% - 40px);margin:0 auto}
.portfolio-header-spacer{height:96px}
.portfolio-banner{width:100%;height:200px;background-color:#0c264b;background-image:url("../images/project/portfolio/banner.jpg");background-size:100% auto;background-position:center center;background-repeat:no-repeat;color:#fff;position:relative;overflow:hidden}
.portfolio-banner::after{display:none}
.portfolio-banner .portfolio-width{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);display:flex;align-items:baseline;gap:25px}
.portfolio-banner h1{width:auto;display:inline-block;margin:0 25px 0 0;color:#fff;font-size:2.4rem;line-height:1;font-weight:bold;letter-spacing:1px}
.portfolio-banner p{display:inline-block;margin:5px 0 0;color:#fff;font-size:1.25rem;font-weight:500}
.portfolio-tabs{box-sizing:border-box;height:55px;margin-top:80px;padding-left:30px;border-bottom:3px solid #0e2141;display:flex;align-items:flex-start}
.portfolio-tabs a{box-sizing:border-box;width:240px;height:55px;line-height:55px;text-align:center;color:#0e2141;font-size:16px;font-weight:500;text-decoration:none;border:3px solid transparent;border-bottom:0;border-radius:10px 10px 0 0}
.portfolio-tabs a.active{border-color:#0e2141;background:#fff}
.portfolio-section{width:1220px;max-width:calc(100% - 30px);margin:0 auto;padding:0 0 110px}
.portfolio-heading{text-align:center;margin:80px 0}
.portfolio-heading h2{width:100%;font-size:2.4rem;line-height:1;margin:0;color:#111;font-weight:bold;letter-spacing:1px}
.portfolio-heading p{width:100%;font-size:1.25rem;color:#666;margin:15px 0 0}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,305px);gap:60px 0;min-height:770px}
.portfolio-card{box-sizing:border-box;width:305px;height:365px;padding-bottom:20px;display:block;color:#111;text-decoration:none;transition:transform .2s ease}
.portfolio-card:hover{transform:translateY(-5px)}
.portfolio-thumb{width:285px;height:285px;margin:0 auto;background:#eef2f7 top center/cover no-repeat;overflow:hidden}
.portfolio-card-copy{width:290px;margin:20px auto 0;padding:0}
.portfolio-card-copy strong{display:block;font-family:"Noto Sans KR",sans-serif!important;font-weight:700!important;font-size:1.3rem;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portfolio-card-copy span{display:block;margin-top:5px;color:#9e9e9e;font-size:1.15rem}
.portfolio-empty{grid-column:1/-1;text-align:center;padding:100px 0;color:#777}
.portfolio-pagination{display:flex;justify-content:center;gap:8px;margin-top:0}
.portfolio-pagination a{width:38px;height:38px;display:grid;place-items:center;text-decoration:none;color:#222;border:1px solid #ddd}
.portfolio-pagination a.active{color:#fff;background:#183b70;border-color:#183b70}
.portfolio-detail{padding:70px 0 120px}
.portfolio-detail>header{text-align:center;padding-bottom:35px;border-bottom:1px solid #ddd}
.portfolio-detail>header h2{font-size:30px;margin:0 0 12px}
.portfolio-detail>header p{margin:0;color:#777;font-size:13px}
.portfolio-body{padding-top:45px;line-height:1.75;font-size:17px;overflow:hidden}
.portfolio-body img{display:block;max-width:100%;height:auto;margin:0 auto}
.portfolio-body p{margin:0 0 1em}
.portfolio-detail-actions{display:flex;justify-content:center;gap:10px;margin-top:55px;padding-top:30px;border-top:1px solid #ddd}
.portfolio-detail-actions a{min-width:120px;padding:13px 24px;border:1px solid #183b70;color:#183b70;text-align:center;text-decoration:none}
.detail-post-nav{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:14px;margin-top:70px;padding-top:32px;border-top:1px solid #d9dee7}
.detail-post-nav a,.detail-post-nav>span{box-sizing:border-box;min-height:88px}
.detail-post-nav__side{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid #d9dee7;border-radius:8px;color:#1a2f50;text-decoration:none;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.detail-post-nav__side:hover{border-color:#183b70;box-shadow:0 8px 24px rgba(16,43,82,.1);transform:translateY(-2px)}
.detail-post-nav__side.is-next{justify-content:flex-end;text-align:right}
.detail-post-nav__side.is-disabled{color:#9ba4b1;background:#f7f8fa;pointer-events:none}
.detail-post-nav__side small{display:block;margin-bottom:5px;color:#778397;font-size:12px;font-weight:500}
.detail-post-nav__side strong{display:block;max-width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.detail-post-nav__icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;color:#fff;background:#183b70;font-size:20px;line-height:1}
.detail-post-nav__side.is-disabled .detail-post-nav__icon{background:#b7bec8}
.detail-post-nav__list{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:8px;color:#fff;text-decoration:none;background:#183b70;transition:background .2s,transform .2s}
.detail-post-nav__list:hover{background:#0e2b57;transform:translateY(-2px)}
.detail-post-nav__grid{width:23px;height:23px;background:linear-gradient(#fff 0 0) 0 0/9px 9px no-repeat,linear-gradient(#fff 0 0) 100% 0/9px 9px no-repeat,linear-gradient(#fff 0 0) 0 100%/9px 9px no-repeat,linear-gradient(#fff 0 0) 100% 100%/9px 9px no-repeat}
.detail-post-nav__list strong{font-size:14px}
@media(max-width:1230px){.portfolio-grid{grid-template-columns:repeat(3,305px);justify-content:center}}
@media(max-width:960px){.portfolio-grid{grid-template-columns:repeat(2,305px)}}
@media(max-width:650px){.portfolio-width{max-width:calc(100% - 28px)}.portfolio-banner{height:160px;background-size:auto 100%}.portfolio-banner .portfolio-width{bottom:25px;display:block}.portfolio-banner h1{font-size:2.4rem}.portfolio-banner p{font-size:1.25rem;margin-top:12px}.portfolio-tabs{max-width:calc(100% - 28px);height:55px;margin-top:45px;padding-left:0}.portfolio-tabs a{width:50%;font-size:15px}.portfolio-section{max-width:calc(100% - 28px);padding-bottom:75px}.portfolio-heading{margin:55px 0}.portfolio-heading h2{font-size:2.4rem}.portfolio-heading p{font-size:1.25rem}.portfolio-grid{grid-template-columns:1fr;gap:35px;min-height:0}.portfolio-card{width:100%;height:auto}.portfolio-thumb{width:100%;height:auto;aspect-ratio:1/1}.portfolio-card-copy{width:100%}.portfolio-card-copy strong{font-size:1.3rem}.portfolio-card-copy span{font-size:1.15rem}.portfolio-detail{padding:45px 0 80px}.portfolio-detail>header h2{font-size:24px}}
@media(max-width:650px){.detail-post-nav{grid-template-columns:1fr 72px 1fr;gap:7px;margin-top:45px;padding-top:24px}.detail-post-nav a,.detail-post-nav>span{min-height:70px}.detail-post-nav__side,.detail-post-nav__side.is-next{justify-content:center;padding:10px}.detail-post-nav__side>span:not(.detail-post-nav__icon){display:none}.detail-post-nav__icon{flex-basis:36px;width:36px;height:36px}.detail-post-nav__list{gap:5px}.detail-post-nav__grid{width:20px;height:20px;background-size:8px 8px}.detail-post-nav__list strong{font-size:12px}}