@charset "utf-8";
@import url("portfolio_com.css");
@font-face {
	font-family: 'SUIT';
	font-weight: 100;
	src: url('/portfolio/css/font/SUIT-Thin.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-Thin.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 200;
	src: url('/portfolio/css/font/SUIT-ExtraLight.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-ExtraLight.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 300;
	src: url('/portfolio/css/font/SUIT-Light.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-Light.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 400;
	src: url('/portfolio/css/font/SUIT-Regular.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-Regular.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 500;
	src: url('/portfolio/css/font/SUIT-Medium.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-Medium.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 600;
	src: url('/portfolio/css/font/SUIT-SemiBold.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-SemiBold.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 700;
	src: url('/portfolio/css/font/SUIT-Bold.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-Bold.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 800;
	src: url('/portfolio/css/font/SUIT-ExtraBold.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-ExtraBold.ttf') format('TrueType');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 900;
	src: url('/portfolio/css/font/SUIT-Heavy.woff2') format('woff2'),
	url('/portfolio/css/font/SUIT-Heavy.ttf') format('TrueType');
}
:root {
    --white : #fff;
    --black : #000;

    --suit : 'SUIT';

    --vwpx : 0.052vw;
}

@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:#FFF8F4 !important;}

.portfolio-13 {font-family:'SUIT'; letter-spacing: 0px; background: #FFF8F4; line-height: 1.6;}
.portfolio-13 * {font-family:'SUIT';}
.portfolio-13 .work_wrap {width:100%; overflow:visible;}

.portfolio-13 .work_wrap .round10 {border-radius: 10px; overflow: hidden;}
.portfolio-13 .work_wrap .round20 {border-radius: var(--gap-20); overflow: hidden;}
.portfolio-13 .work_wrap .round30 {border-radius: var(--gap-30); overflow: hidden;}
.portfolio-13 .work_wrap .round40 {border-radius: var(--gap-40); overflow: hidden;}
.portfolio-13 .work_wrap .round80 {border-radius: var(--gap-80); overflow: hidden;}

.portfolio-13 .work_wrap .img-box {font-size: 0; overflow: hidden;}
.portfolio-13 .work_wrap .img-box img {max-width: 100%;}

.portfolio-13 .section {}

.portfolio-13 .cont-head {text-align: left;}
.portfolio-13 .cont-head .sub-tit {font-size: var(--font-18); font-weight: 600; color: #075B37; margin-bottom: 0.75em; }
.portfolio-13 .cont-head .tit {font-size: var(--font-40); font-weight: 800; color: #000; line-height: 1.5;}

.portfolio-13 .cont-head.ta-c {text-align: center;}

.portfolio-13 .conts-wrap {width:90%; max-width:1620px; margin:0 auto; }

/* .portfolio-13 .conts-wrap {width:90%; max-width:1680px; margin:0 auto; height:100%; display:flex; justify-content:space-between; flex-direction:column;}
.portfolio-13 .conts-wrap.ty2 {width: 100%; max-width: 100%;}
.portfolio-13 .conts-wrap.ty3 {width:90%; max-width:1620px;} */

/* .portfolio-13 .conts-wrap .cont-title {margin-bottom: calc(var(--gap-50)*2);}
.portfolio-13 .conts-wrap .cont-title .big-title {font-size: calc(var(--font-20)*3.5); color: #111; margin-bottom: calc(var(--font-20)*1.5); line-height: 1.2;}
.portfolio-13 .conts-wrap .cont-title .title { font-size:var(--font-30); font-weight:700; margin-bottom: var(--gap-40); text-transform: uppercase;}
.portfolio-13 .conts-wrap .cont-title .desc {font-size:var(--font-20); line-height: 1.6;}

.portfolio-13 article {padding: calc(var(--gap-50)*3) 0 calc(var(--gap-50)*2);}
.portfolio-13 article.padding0 {padding: 0;}
.portfolio-13 article.round-area {overflow: hidden; border-radius: var(--gap-80);} */

.portfolio-13 .sec-1 * {font-size: "Pretendard";}

@media screen and (max-width:768px) {
  .portfolio-13 .work_wrap .round80 {border-radius: 28px;}
  .portfolio-13 .work_wrap .round40 {border-radius: 20px;}

  .portfolio-13 article.round-area {border-radius: 28px;}
}
@media screen and (max-width:480px) {
  .portfolio-13 .work_wrap .round80 {border-radius: 24px;}
  .portfolio-13 .work_wrap .round40 {border-radius: 12px;}
  .portfolio-13 .work_wrap .round30 {border-radius: 8px;}
  .portfolio-13 .work_wrap .round20 {border-radius: 6px;}
  .portfolio-13 .work_wrap .round10 {border-radius: 4px;}
}



.portfolio-13 .sec-2 {}
.portfolio-13 .sec-2 .cont1 .top-img {width: 100%;}
.portfolio-13 .sec-2 .cont1 .top-img span {display: block; width: 100%; padding-top: 28.5%; position: relative; overflow: hidden; }
.portfolio-13 .sec-2 .cont1 .top-img span img {position: absolute; right: 0%; top: 50%; transform: translateY(-47%); width: 100%;} 

.portfolio-13 .sec-2 .cont2 {padding: var(--gap-80) 0 calc(var(--gap-50)*4);}
.portfolio-13 .sec-2 .cont2 .conts-box {padding: 0 5%; }
.portfolio-13 .sec-2 .cont2 .conts-box .text-box {display: flex; justify-content: end; margin-top: calc(var(--gap-50)*2); background-image: url(/img/portfolio/013/hanja.png); background-repeat: no-repeat; background-position: left center; font-size: var(--font-18); padding: 1em 0;}
.portfolio-13 .sec-2 .cont2 .conts-box .text-box .text {width: 50%; padding-left: var(--gap-40); text-align: left;}

.portfolio-13 .sec-2 .cont3 .conts-box {padding: calc(var(--gap-80)*1.5) 5%; background: rgba(255,122,40,0.04); border-radius: 20px;  }
.portfolio-13 .sec-2 .cont3 .conts-box .card-list {display: flex; gap: var(--gap-60); align-items: start; }
.portfolio-13 .sec-2 .cont3 .conts-box .card-item {flex: 1; padding: var(--gap-80) var(--gap-24); border-radius: 20px; background: rgba(255,122,40,0.08);}
.portfolio-13 .sec-2 .cont3 .conts-box .card-item:nth-child(1) {margin-top: calc(var(--gap-50)*6);}
.portfolio-13 .sec-2 .cont3 .conts-box .card-item:nth-child(2) {margin-top: calc(var(--gap-50)*3);}
.portfolio-13 .sec-2 .cont3 .conts-box .card-item .text-box {margin-top: var(--gap-40);}
.portfolio-13 .sec-2 .cont3 .conts-box .card-item .text-box .sub {color: #075B37; font-size: var(--font-16); font-weight: 600;}
.portfolio-13 .sec-2 .cont3 .conts-box .card-item .text-box .tit {font-weight: 800; font-size: var(--font-24); line-height: 1.5; margin: 0.7em 0 0.5em;}
.portfolio-13 .sec-2 .cont3 .conts-box .card-item .text-box .desc {font-size: var(--font-16); }



.portfolio-13 .sec-3 {margin: calc(var(--gap-50)*1.8) 0; padding: calc(var(--gap-50)*1.8) 0;}
.portfolio-13 .sec-3 .title {font-size: calc(var(--font-40)*1.45); font-weight: 800; margin-bottom: var(--gap-60); }
.portfolio-13 .sec-3 .conts {display: flex; gap: var(--gap-80); align-items: stretch; justify-content: center;}
.portfolio-13 .sec-3 .conts .typo-box {display: flex; border-radius: 20px; background: rgba(255,122,40,0.1); padding: var(--gap-40); flex-direction: column; justify-content: space-between; gap: var(--gap-40); font-size: var(--font-18); line-height: 1.5; max-width: 580px; width: calc((100% - var(--gap-80))/2);}
.portfolio-13 .sec-3 .conts .typo-box .top {display: flex; justify-content: space-between; align-items: center; font-weight: 500;  }
.portfolio-13 .sec-3 .conts .typo-box .mid {font-size: 160px; font-weight: 800; text-align: center; width: 100%; line-height: 1;}
.portfolio-13 .sec-3 .conts .typo-box .btm {display: flex; flex-direction: column; gap: var(--font-20); }
.portfolio-13 .sec-3 .conts .typo-box .btm > div {display: flex; justify-content: space-between; align-items: center;}
.portfolio-13 .sec-3 .conts .typo-box .btm .medium {font-weight: 500;}
.portfolio-13 .sec-3 .conts .typo-box .btm .bold {font-weight: 700;}
.portfolio-13 .sec-3 .conts .typo-box .btm .extrabold {font-weight: 800;}

.portfolio-13 .sec-3 .conts .color-box {width: calc((100% - var(--gap-80))/2); max-width: 580px; display: flex;}
.portfolio-13 .sec-3 .conts .color-box > div {flex: 1; }
.portfolio-13 .sec-3 .conts .color-box > div .box {border-radius: 10px; display: flex; flex-direction: column; align-items: end; color: #fff; font-size: var(--font-18); font-weight: 500; line-height: 1.5; justify-content: center; padding: 0 var(--gap-40);}

.portfolio-13 .sec-3 .conts .color-box .orange .box {background: #FF7A28;}
.portfolio-13 .sec-3 .conts .color-box .green .box {background: #075B37;}
.portfolio-13 .sec-3 .conts .color-box > div .box.full {aspect-ratio: 1; padding: var(--gap-40); justify-content: space-between;}
.portfolio-13 .sec-3 .conts .color-box > div .box.full span.ta-l {width: 100%; display: block; text-align: left;}
.portfolio-13 .sec-3 .conts .color-box > div .box.op8 {opacity: 0.8; height: 100px;}
.portfolio-13 .sec-3 .conts .color-box > div .box.op6 {opacity: 0.6; height: 75px;}
.portfolio-13 .sec-3 .conts .color-box > div .box.op4 {opacity: 0.4; height: 70px;}
.portfolio-13 .sec-3 .conts .color-box > div .box.op2 {opacity: 0.2; height: 45px;}

.portfolio-13 .sec-3 .icon-box {margin-top: calc(var(--gap-50)*3); display: flex; justify-content: center; align-items: center; gap: var(--gap-80) var(--gap-40);}
.portfolio-13 .sec-3 .icon-box .icon {}


.portfolio-13 .sec-4 {position: relative; padding-top: var(--gap-60);}
.portfolio-13 .sec-4 .cont1 {position: relative; padding: calc(var(--gap-50)*4) 0;}
.portfolio-13 .sec-4 .cont1::before {content:""; width: 200%; padding-top: 80%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); clip-path: ellipse(50% 100% at 50% 100%);; background: linear-gradient(to bottom, #FF7A28, rgba(0,0,0,0)); z-index: 0;}
.portfolio-13 .sec-4 .cont1::after {content:""; width: 200%; padding-top: 80%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); clip-path: ellipse(50% 100% at 50% 0%); background: linear-gradient(to top, #FF7A28, rgba(0,0,0,0)); z-index: 0;}
.portfolio-13 .sec-4 .cont1 .conts-wrap {max-width: 1920px; width: 100%;}
.portfolio-13 .sec-4 .cont1 .title {color: #fff; font-size: var(--font-24); font-weight: 800; margin-bottom: 1.1em; }
.portfolio-13 .sec-4 .cont1 p {font-weight: 500; font-size: var(--font-18); color: #fff;}
.portfolio-13 .sec-4 .cont1 .conts {margin-top: var(--gap-80); position: relative; z-index: 1;}
.portfolio-13 .sec-4 .cont1 .main-page .mac {position: relative; z-index: 1; width: min(calc(var(--vwpx)*1270),1270px); margin: auto;}
.portfolio-13 .sec-4 .cont1 .main-page .mac::before {content:""; width: 102%; left: -1%; bottom: 5px; position: absolute; height: 1px; box-shadow: 0 0px 15px rgba(0,0,0,0.9); z-index: -1; background: rgba(0,0,0,0.045);}
.portfolio-13 .sec-4 .cont1 .main-page .mac img {max-width: 100%;}
.portfolio-13 .sec-4 .cont1 .main-page .page {margin-top: -42%;  border-radius: 20px; position: relative;}

.portfolio-13 .sec-4 .cont1 .mobile {display: flex; justify-content: center; align-items: center; gap: calc(var(--gap-50)*2); width: 90%; margin: calc(var(--gap-50)*2) auto 0;}
.portfolio-13 .sec-4 .cont1 .mobile .item {border-radius: 20px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.25);}


.portfolio-13 .sec-5 {padding: calc(var(--gap-50)*4) 0; position: relative;}
.portfolio-13 .sec-5::before {content:""; width: 100%; padding-top: 48.4%; background: url(/img/portfolio/013/08_bg.svg) center no-repeat; background-size: cover; position: absolute; left: 0; bottom: 24%; z-index: 0;}
.portfolio-13 .sec-5::after {content:""; width: 470px; height: 470px; background: radial-gradient(closest-side, #FF7A28, rgba(0,0,0,0)); opacity: 0.4; position: absolute; left: -140px; bottom: 200px; z-index: 0;}
/* .portfolio-13 .sec-5 .conts-wrap {max-width: 1420px;} */
.portfolio-13 .sec-5 .head {display: flex; padding: 0 40px; text-align: left; max-width: 1420px; margin: auto;}
.portfolio-13 .sec-5 .head > div {width: 50%;}
.portfolio-13 .sec-5 .head .title {font-size: var(--font-24); font-weight: 800; text-transform: uppercase;}
.portfolio-13 .sec-5 .head p {font-weight: 500; font-size: var(--font-18); }

.portfolio-13 .sec-5 .conts .mock-up {overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.2);}
.portfolio-13 .sec-5 .conts .mock-up.mo {border-radius: 15px; }
.portfolio-13 .sec-5 .conts .mock-up.pc {border-radius: 20px; }

.portfolio-13 .sec-5 .cont1  {position: relative; z-index: 1;}
.portfolio-13 .sec-5 .cont1 .conts {display: flex; justify-content: center; align-items: start; gap: calc(var(--gap-80)*2); margin-top: var(--gap-80);}

.portfolio-13 .sec-5 .cont2 {margin-top: calc(var(--gap-50)*4.5); position: relative; z-index: 1;}
.portfolio-13 .sec-5 .cont2 .conts {display: flex; gap: calc(var(--gap-50)*2.7); justify-content: center; margin-top: var(--gap-80);}
.portfolio-13 .sec-5 .cont2 .conts .left {padding-top: calc(var(--gap-50)*4); max-width: 440px;}
.portfolio-13 .sec-5 .cont2 .conts .left .icon-box {display: flex; gap: var(--gap-40); justify-content: start; margin-bottom: 40px; flex-wrap: wrap; }
.portfolio-13 .sec-5 .cont2 .conts .left .icon-box .icon {border-radius: 8px; overflow: hidden; background: #F27325; width: calc((100% - var(--gap-40)*3)/4); max-width: 80px; }
.portfolio-13 .sec-5 .cont2 .conts .left .img-wrap {display: flex; gap: var(--gap-60); justify-content: center; padding-right: 16px; align-items: end; }
.portfolio-13 .sec-5 .cont2 .conts .left .img-wrap .mock-up:nth-child(2) {margin-bottom: 110%;}

.portfolio-13 .sec-6 {padding: calc(var(--gap-50)*3.6) 0 calc(var(--gap-50)*4); background: #FFF4EE;text-align: left; }
.portfolio-13 .sec-6 .frame-box {background: #FFEDE2; border-radius: 20px;}
.portfolio-13 .sec-6 .head .title {font-size: var(--font-24); font-weight: 800; text-transform: uppercase; margin-bottom: var(--gap-40);}
.portfolio-13 .sec-6 .head p {font-weight: 500; font-size: var(--font-18); }
.portfolio-13 .sec-6 .cont .mock-up {overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.2); border-radius: 20px; max-width: fit-content;}

.portfolio-13 .sec-6 .cont1 {display: flex;}
.portfolio-13 .sec-6 .cont1 .left {width: 50%;}
.portfolio-13 .sec-6 .cont1 .right {padding-left: var(--gap-80); display: flex; flex-direction: column; justify-content: space-between; width: 50%; gap: 24px;}
.portfolio-13 .sec-6 .cont1 .frame-box {padding: var(--gap-60);}
.portfolio-13 .sec-6 .cont1 .frame-box p {margin-bottom: 0.8em; font-size: var(--font-18); font-weight: 700;}
.portfolio-13 .sec-6 .cont1 .frame-box .img {box-shadow: 0 0 25px rgba(255,122,40,0.06);}

.portfolio-13 .sec-6 .cont2 {display: flex; margin-top: calc(var(--gap-50)*4);}
.portfolio-13 .sec-6 .cont2 .frame-box {padding: var(--gap-40);}
.portfolio-13 .sec-6 .cont2 .left {width: 50%; padding: 0 var(--gap-80); display: flex; flex-direction: column; justify-content: space-evenly; align-items: start; gap: 24px;}
.portfolio-13 .sec-6 .cont2 .left .frame-box:nth-child(2) {margin-left: auto;}
.portfolio-13 .sec-6 .cont2 .right {width: 50%;}


.portfolio-13 .sec-7 {padding: calc(var(--gap-50)*4) 0;}
.portfolio-13 .sec-7 .conts-box {position: relative; padding: calc(var(--gap-50)*3.7) 0 calc(var(--gap-50)*3);}
.portfolio-13 .sec-7 .conts-box::before {content:""; width: 98%; height: 40%; position: absolute; left: 1%; top: 0; background: linear-gradient(to bottom, #F27325, rgba(255,122,40,0.3)); opacity: 0.1; clip-path: ellipse(50% 100% at 50% 100%);}
.portfolio-13 .sec-7 .conts-box::after {content:""; width: 98%; height: 60%; position: absolute; left: 1%; bottom: 0; background: linear-gradient(to bottom, rgba(255,122,40,0.3), #fff); opacity: 0.1;}
.portfolio-13 .sec-7 .conts-box + .conts-box {margin-top: calc(var(--gap-50)*4);}
.portfolio-13 .sec-7 .title {font-size: var(--font-24); font-weight: 800; text-transform: uppercase; margin-bottom: var(--gap-80); position: relative; z-index: 1;}
.portfolio-13 .sec-7 .cont {position: relative; z-index: 1; display: flex; gap: var(--gap-80); justify-content: center; width: 70%; margin: auto; max-width: 1260px;}

.portfolio-13 .sec-7 .cont1 .img-box {position: relative;}
.portfolio-13 .sec-7 .cont1 .img-box::after {content:""; width: 100%; height: 40%; background: linear-gradient(to top, #FFF8F4, rgba(0,0,0,0)); position: absolute; left: 0; bottom: 0;}

.portfolio-13 .sec-7 .cont2 .cont {flex-wrap: wrap; max-width: 1060px; margin: auto;} 
.portfolio-13 .sec-7 .cont2 .img-box {width: calc((100% - var(--gap-80)*2)/3); }






@media screen and (max-width:1440px) {
  .portfolio-13 .sec-2 .cont3 .conts-box .card-list {gap: var(--gap-24);}
  .portfolio-13 .sec-2 .cont3 .conts-box .card-item {padding: var(--gap-40) var(--gap-24);}
  .portfolio-13 .sec-2 .cont3 .conts-box .card-item .text-box .desc .br {display: none;}
}
@media screen and (max-width:1280px) {
  .portfolio-13 .sec-2 .cont2 .conts-box .text-box .text {padding-left: 0; width: 60%;}

  .portfolio-13 .sec-3 .conts {flex-direction: column; align-items: center;}
  .portfolio-13 .sec-3 .conts .color-box {width: 100%;}
  .portfolio-13 .sec-3 .conts .typo-box {width: 100%;}

  .portfolio-13 .sec-4 .cont1 .mobile {gap: var(--gap-40);}

  .portfolio-13 .sec-5 .head {flex-wrap: wrap; gap: 24px;}
  .portfolio-13 .sec-5 .cont1 .conts {gap: var(--gap-80);}
  .portfolio-13 .sec-5 .cont2 .conts {gap: calc(var(--gap-50)*1.5);}
  .portfolio-13 .sec-5 .cont2 .conts .left {width: 40%;}
  .portfolio-13 .sec-5 .cont2 .conts .left .icon-box {gap: var(--gap-24);}
  .portfolio-13 .sec-5 .cont2 .conts .left .icon-box .icon {width: calc((100% - var(--gap-24)*3)/4);}
  .portfolio-13 .sec-5 .cont2 .conts .right {width: 60%;}

}
@media screen and (max-width:1024px) {
  .portfolio-13 .sec-2 .cont2 .conts-box .text-box {background-size: 200px; background-position: right bottom; padding: 1em 0 120px;}
  .portfolio-13 .sec-2 .cont2 .conts-box .text-box .text {width: 100%;}
  .portfolio-13 .sec-2 .cont3 .conts-box .card-list {flex-direction: column; margin-top: var(--gap-40);}
  .portfolio-13 .sec-2 .cont3 .conts-box .card-item {margin: 0 auto !important; max-width: 480px; }

  .portfolio-13 .sec-3 .icon-box {flex-wrap: wrap;}
  .portfolio-13 .sec-3 .icon-box .icon {width: calc((100% - var(--gap-40)*2)/3);}

  .portfolio-13 .sec-4 .cont1 .main-page .mac {width: calc(var(--vwpx)*1270 * 1.3);}
  .portfolio-13 .sec-4 .cont1 .main-page .page {margin-top: -55%; width: 130%; margin-left: -15%; }

  .portfolio-13 .sec-5 .cont1 .conts {gap: 24px;}
  .portfolio-13 .sec-5 .cont2 .conts {flex-direction: column;}
  .portfolio-13 .sec-5 .cont2 .conts .left {width: 100%; max-width: 100%; padding-top: 0;}
  .portfolio-13 .sec-5 .cont2 .conts .left .icon-box {justify-content: center;}
  .portfolio-13 .sec-5 .cont2 .conts .left .img-wrap {align-items: start; padding-right: 0;}
  .portfolio-13 .sec-5 .cont2 .conts .left .img-wrap .mock-up:nth-child(1) {margin-top: 10%;}
  .portfolio-13 .sec-5 .cont2 .conts .left .img-wrap .mock-up:nth-child(2) {margin-bottom: 0;}
  .portfolio-13 .sec-5 .cont2 .conts .right {width: 100%;}

  .portfolio-13 .sec-6 .cont1,
  .portfolio-13 .sec-6 .cont2 {flex-direction: column-reverse; gap: var(--gap-80);}
  .portfolio-13 .sec-6 .cont1 .right,
  .portfolio-13 .sec-6 .cont1 .left,
  .portfolio-13 .sec-6 .cont2 .left,
  .portfolio-13 .sec-6 .cont2 .right {width: 100%; padding: 0;}

  .portfolio-13 .sec-7 .cont {gap: var(--gap-40);}
  .portfolio-13 .sec-7 .cont2 .img-box {width: calc((100% - var(--gap-40)*2)/3);}
}
@media screen and (max-width:768px) {
  .work_cont .br {display: none;}

  .portfolio-13 .sec-2 .cont1 .top-img span {padding-top: 40%;}

  .portfolio-13 .sec-4 .cont1::before,
  .portfolio-13 .sec-4 .cont1::after {padding-top: 120%;}
  .portfolio-13 .sec-4 .cont1 .mobile .item {border-radius: 6px;}

  .portfolio-13 .sec-5 .head {padding: 0;}
  .portfolio-13 .sec-5 .head .title {width: 100%;}
  .portfolio-13 .sec-5 .conts .mock-up.mo {border-radius: 6px;}
  .portfolio-13 .sec-5 .conts .mock-up.pc {border-radius: 12px;}
  .portfolio-13 .sec-5 .cont2 .conts .left .img-wrap {gap: 24px;}

  .portfolio-13 .sec-6 .cont .mock-up {border-radius: 12px;}

  .portfolio-13 .sec-7 .conts-box::before {height: 30%;}
  .portfolio-13 .sec-7 .conts-box::after {height: 70%;}
  .portfolio-13 .sec-7 .cont {width: 85%;}
}
@media screen and (max-width:480px) {

  .portfolio-13 .sec-2 .cont2 .conts-box .text-box {background-size: 160px;}

  .portfolio-13 .sec-3 .conts .color-box > div .box.op8 {height: 80px;}
  .portfolio-13 .sec-3 .conts .color-box > div .box.op6 {height: 60px;}
  .portfolio-13 .sec-3 .conts .color-box > div .box.op4 {height: 40px;}
  .portfolio-13 .sec-3 .conts .color-box > div .box.op2 {height: 30px;}

  .portfolio-13 .sec-3 .conts .typo-box {font-size: 14px;}
  .portfolio-13 .sec-3 .conts .typo-box .mid {font-size: 100px;}
  .portfolio-13 .sec-3 .conts .typo-box .btm > div {flex-direction: column; align-items: start; max-width: 300px; margin: auto;}

  .portfolio-13 .sec-5 .cont2 .conts .left .icon-box {}
  .portfolio-13 .sec-5 .cont2 .conts .left .icon-box .icon {width: calc((100% - var(--gap-24)*2)/3);}

  .portfolio-13 .sec-7 .cont {gap: 12px;}
  .portfolio-13 .sec-7 .cont2 .img-box {width: calc((100% - 24px)/3);}
}

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