@charset "utf-8";
@import url("portfolio_com.css");
@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&display=swap');
:root {
    --white : #fff;
    --black : #000;
    --key-color : #04D25D;
}

@media screen and (max-width:1024px) {
  :root {
        --font-16 : 14px;
		--font-18 : 16px;
		--font-20 : 18px;
		--font-24 : 20px;
		--font-30 : 24px;
		--font-40 : 28px;

		--gap-40 : 20px;
		--gap-50 : 30px;
		--gap-60 : 40px;
		--gap-80 : 60px;
  }
}
@media screen and (max-width:768px) {

}
@media screen and (max-width:480px) {

}

.rb-section {background:#111 !important;}

.portfolio-03 .preview img {width:100%; max-width:100%; display:block; margin:0 auto;}
.portfolio-03 * {font-family:'Pretendard'; line-height:1.6;}


.portfolio-03 .work-section {width:100%;}
.portfolio-03 .work-section .section {width:100%;}
.portfolio-03 .work-section .section .sec-wrap {width:90%; max-width:1420px; margin:0 auto;}

.portfolio-03 .work-section .section .title-wrap {width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--gap-32); color:var(--key-color); text-align:left;}
.portfolio-03 .work-section .section .title-wrap > * {flex:1;}
.portfolio-03 .work-section .section .title-wrap .head {font-size:var(--font-16); font-weight:700;}
.portfolio-03 .work-section .section .title-wrap .conts {font-size:var(--font-20); font-weight:400;}

@media screen and (max-width:1024px) {
    .portfolio-03 .work-section .section .title-wrap {flex-direction:column;}
}

.portfolio-03 .work-section .section .com-img-box {width:100%; background:#111;}
.portfolio-03 .work-section .section .com-img-box img {display:block; width:100%; max-width:100%; margin:0 auto;}



.portfolio-03 .work-section .sec-2 .img-box {width:100%;}
.portfolio-03 .work-section .sec-2 .img-box img {display:block; width:100%; max-width:100%; margin:0 auto;}



:root {
    --overview-gap : 50px;
}

@media screen and (max-width:1320px) {
    :root {
        --overview-gap : 30px;
    }
}

@media screen and (max-width:900px) {
    :root {
        --overview-gap : 20px;
    }
}



.portfolio-03 .work-section .sec-3 {background:#111; padding:calc(var(--gap-50) * 5) 0;}
.portfolio-03 .work-section .sec-3 .overview-wrap {width:100%; margin-top:calc(var(--gap-50) * 4); display:flex; gap:var(--overview-gap); flex-direction:column;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap {width:100%; display:flex; gap:var(--overview-gap); align-items:stretch;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box {flex:1;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .layout {border-radius:var(--gap-32); position:relative; overflow:hidden;}

.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box {width:100%; height:100%; display:flex; flex-direction:column; gap:var(--gap-24); justify-content:space-between; text-align:left; }
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .head {font-size:40px; font-weight:700; line-height:1.4;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .conts {font-size:var(--font-20); font-weight:500;}

@media screen and (max-width:1320px) {
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .conts .br {display:inline-block;}
}

@media screen and (max-width:1280px) {
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .layout {border-radius:var(--gap-16);}
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .head {font-size:30px;}
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .conts {font-size:16px;}
}

@media screen and (max-width:1024px) {
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .head {font-size:24px;}
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .head .br {display:inline-block;}
}

@media screen and (max-width:768px) {
    .portfolio-03 .work-section .sec-3 .overview-wrap {max-width:500px; margin-left:auto; margin-right:auto;}
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap {flex-direction:column;}

    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .head {font-size:var(--font-40);}
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .head .br {display:block;}
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap .layout-box .conts-box .conts {font-size:var(--font-18);}
}


.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box {flex-basis:calc((100% - var(--overview-gap)) / 2);}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.lf .layout {width:100%; background:#ccc; overflow:visible;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.lf .layout .img-box {width:100%; aspect-ratio:685/950; position:relative;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.lf .layout .img-box img {display:block; width:100%; max-width:100%; position:absolute; left:-14%; bottom:0;}

.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt {display:flex; flex-direction:column; gap:var(--overview-gap);}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout {flex:1; flex-basis:calc((100% - var(--overview-gap)) / 2); padding:var(--overview-gap);}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout.top {background:var(--key-color);}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout.top .conts-box { color:#111;}

@media screen and (max-width:768px) {
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout {padding:calc(var(--gap-50) * 2) var(--gap-50);}
}

.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout.bottom {background:#222;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout.bottom .conts {width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout.bottom .conts span {display:block; width:41%; max-width:280px; aspect-ratio:280/80; position:relative;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.top .layout-box.rt .layout.bottom .conts span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box {flex:auto;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.lf {width:64%;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.lf .layout {background:var(--key-color); width:100%; height:100%; padding:var(--overview-gap)}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.lf .layout .conts-box {color:#111;}

@media screen and (max-width:768px) {
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.lf .layout {padding:calc(var(--gap-40) * 2) var(--gap-40);}
}

.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.rt {width:36%;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.rt .img-box {width:100%; aspect-ratio:1; position:relative;}
.portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.rt .img-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

@media screen and (max-width:768px) {
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom {flex-direction:column-reverse;}
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.lf,
    .portfolio-03 .work-section .sec-3 .overview-wrap .layout-wrap.bottom .layout-box.rt {width:100%;}
}



.portfolio-03 .work-section .sec-5 {background:#111; padding:calc(var(--gap-50) * 5) 0;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap {width:100%; margin-top:calc(var(--gap-50) * 4); display:flex; flex-direction:column; gap:calc(var(--gap-50) * 5);}

.portfolio-03 .work-section .sec-5 .logo-design-wrap .logo-wrap {width:100%;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .logo-wrap .conts-box {width:70%; max-width:800px; aspect-ratio:800/400; position:relative; margin:0 auto;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .logo-wrap .conts-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap {width:100%; display:flex; gap:var(--overview-gap); align-items:flex-start;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box {width:calc((100% - var(--overview-gap)) / 2); padding:var(--gap-80) 0; border-radius:var(--gap-32); background:#222; color:#fff; display:flex; flex-direction:column; gap:calc(var(--gap-50) * 2);}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .img-box {width:100%;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .img-box span {display:block; width:100%; aspect-ratio:685/350; position:relative;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .img-box span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box:last-child {margin-top:calc(var(--gap-50) * 4);}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box:last-child .img-box span img {width:auto; height:90%; object-fit:contain;}

.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box {width:100%; display:flex; flex-direction:column; gap:var(--gap-40); padding:0 var(--gap-80); align-items:center;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box .icon {width:20%; max-width:100px;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box .icon img {display:block; max-width:100%; margin:0 auto;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box .head {font-size:var(--font-40); font-weight:700;}
.portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box .conts {font-size:var(--font-20); font-weight:500;}

@media screen and (max-width:1440px) {
    .portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box .conts .br {display:inline-block;}
}

@media screen and (max-width:1320px) {
    .portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box {padding:0 var(--gap-32);}
}

@media screen and (max-width:768px) {
    .portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap {flex-direction:column; max-width:600px; margin:0 auto; gap:var(--gap-80);}
    .portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box {width:100%;}
    .portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box:last-child {margin-top:0;}
    .portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box .conts {width:80%;}
    .portfolio-03 .work-section .sec-5 .logo-design-wrap .case-wrap .case-box .conts-box .conts .br {display:block;}
}


:root {
    --font-gap : 40px;
    --color-gap : 20px;
    --color-box-gap : 40px;
}

@media screen and (max-width:1280px) {
    :root {
        --font-gap : 30px;
    }
}

@media screen and (max-width:1024px) {
    :root {
        --color-gap : 15px;
        --color-box-gap : 30px;
    }
}

@media screen and (max-width:648px) {
    :root {
        --font-gap : 20px;
    }
}

@media screen and (max-width:480px) {
    :root {
        --font-gap : 15px;
        --color-gap : 10px;
        --color-box-gap : 20px;
    }
}

.portfolio-03 .work-section .sec-7 {background:#111; padding:calc(var(--gap-50) * 5) 0;}
.portfolio-03 .work-section .sec-7 .style-wrap {width:100%; margin-top:calc(var(--gap-50) * 5); display:flex; flex-direction:column; gap:calc(var(--gap-50) * 4);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap {width:100%; display:flex; flex-direction:column; gap:var(--gap-50);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap {width:100%; background:#eee; border:5px solid var(--key-color); box-shadow:0 0 30px 0 rgba(4,210,93,1); border-radius:var(--gap-32); padding:var(--font-gap) calc(var(--font-gap) * 2); display:flex; align-items:center; gap:var(--font-gap); color:#111;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap > * {width:calc((100% - var(--font-gap)) / 2);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .head {font-size:clamp(25px, 6vw, 100px); color:#111; letter-spacing:-1.5px; text-align:left;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul {width:100%; display:flex; flex-direction:column;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li {width:100%; padding:var(--font-gap) 0; border-bottom:1px solid #dcdcdc; display:flex; flex-direction:column; gap:var(--gap-32);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li:last-child {border:none;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li .font-head {width:100%; display:flex; align-items:flex-start; gap:var(--gap-16); justify-content:space-between; font-size:var(--font-16);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li .font-head p {font-weight:700;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li .font-head span {color:#999;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li .conts {width:100%; text-align:left;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li:nth-child(1) .conts {font-size:28px; font-weight:700;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li:nth-child(2) .conts {font-size:24px; font-weight:600;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li:nth-child(3) .conts {font-size:16px; font-weight:500;}

@media screen and (max-width:1024px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap {flex-direction:column;}
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap > * {width:100%;}
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .head {font-size:clamp(30px, 12vw, 100px);}
}

@media screen and (max-width:480px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap {border-width:3px; box-shadow:0 0 20px 0 rgba(4,210,93,1);}
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .font-wrap .font-list-wrap ul li .font-head {flex-direction:column; gap:5px;}
}


.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap {width:100%; display:flex; flex-direction:column; gap:var(--color-gap);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap {width:100%; display:flex; gap:var(--color-gap);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box {border-radius:var(--gap-32); display:flex; flex-direction:column; gap:10px; justify-content:flex-end; padding:var(--color-box-gap); font-size:var(--font-20);}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box .title {width:100%; text-align:right; font-weight:500;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box .conts {width:100%;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box .conts ul {display:flex; flex-direction:column; gap:3px;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box .conts ul li {width:100%; display:flex; align-items:center; gap:var(--gap-24); font-weight:400;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-2 .color-box {width:calc((100% - var(--color-gap)) / 2); aspect-ratio:2/1;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-4 .color-box {width:calc((100% - (var(--color-gap) * 3)) / 4); aspect-ratio:340/350;}

.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box.brand {background:var(--key-color); justify-content:space-between; color:#111;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box.background {background:#111; border:3px solid rgba(255,255,255,0.1); justify-content:space-between; color:var(--key-color);}

.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-4 .color-box {color:#fff;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-4 .color-box:nth-child(1) {background:#555;background: linear-gradient(180deg, rgba(85, 85, 85, 1) 0%, rgba(51, 51, 51, 1) 100%); justify-content:space-between;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-4 .color-box:nth-child(2) {background:#666;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-4 .color-box:nth-child(3) {background:#999;}
.portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-4 .color-box:nth-child(4) {background:#fff; color:#111;}

@media screen and (max-width:1440px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box {padding:calc(var(--color-box-gap) * 0.7);}
}

@media screen and (max-width:1280px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box {font-size:16px; border-radius:var(--gap-24);}
}

@media screen and (max-width:1200px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box {font-size:14px;}
}

@media screen and (max-width:1024px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box {font-size:12px;}
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box .conts ul li {gap:10px;}
}

@media screen and (max-width:768px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap {flex-wrap:wrap;}
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-2 .color-box {width:100%;}
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap.col-4 .color-box {width:calc((100% - (var(--color-gap) * 1)) / 2);}
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box {font-size:var(--font-16);}
}

@media screen and (max-width:480px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .basic-style-wrap .color-wrap .color-layout-wrap .color-box {font-size:12px;}
}


.portfolio-03 .work-section .sec-7 .style-wrap .ui-wrap {width:100%; display:flex; align-items:stretch; gap:20px; justify-content:space-between;}
.portfolio-03 .work-section .sec-7 .style-wrap .ui-wrap .ui-box ul {display:flex; flex-direction:column; gap:var(--gap-16); justify-content:space-between; height:100%;}
.portfolio-03 .work-section .sec-7 .style-wrap .ui-wrap .ui-box ul li img {max-width:100%; display:block; margin:0 auto;}

@media screen and (max-width:1024px) {
    .portfolio-03 .work-section .sec-7 .style-wrap .ui-wrap {flex-wrap:wrap; gap:var(--gap-80) var(--gap-40);}
    .portfolio-03 .work-section .sec-7 .style-wrap .ui-wrap .ui-box {width:calc((100% - var(--gap-40)) / 2);}
    .portfolio-03 .work-section .sec-7 .style-wrap .ui-wrap .ui-box:nth-child(2) ul {justify-content:flex-start;}
}





.portfolio-03 .work-section .sec-9 {background:#111; padding:calc(var(--gap-50) * 5) 0;}
.portfolio-03 .work-section .sec-9 .design-wrap {width:100%; display:flex; flex-direction:column; gap:calc(var(--gap-50) * 6);}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box {width:100%;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap {width:100%; margin-top:calc(var(--gap-50) * 4); display:flex; flex-direction:column; gap:calc(var(--gap-50) * 3);}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box {width:100%; display:flex; flex-direction:column; gap:var(--gap-50); align-items:center;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .label {width:fit-content; height:44px; background:var(--key-color); border-radius:8px; padding:0 var(--gap-16); font-size:var(--font-20); display:flex; align-items:center; color:#111; font-weight:700;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list {width:100%; display:flex; flex-direction:column; gap:calc(var(--gap-50) * 3);}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap .img-box {border-radius:10px; border:4px solid #333; overflow:hidden;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap .img-box img {display:block; width:100%; max-width:100%;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.wide .img-box {width:fit-content; max-width:100%;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.col-4 {gap:80px 40px;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.col-4 .img-box {width:calc((100% - 40px) / 2);}

@media screen and (max-width:1024px) {
    .portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.col-4 {gap:40px 20px;}
.portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.col-4 .img-box {width:calc((100% - 20px) / 2);}

}

@media screen and (max-width:648px) {
    .portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.col-4 {width:80%; margin:0 auto;}
    .portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.col-4 {gap:var(--gap-60);}
    .portfolio-03 .work-section .sec-9 .design-wrap .design-box .design-list-wrap .list-box .design-list .img-wrap.col-4 .img-box {width:100%}

}