@charset "utf-8";
@import url("portfolio_com.css");
:root {
    --white : #fff;
    --black : #000;

    --gap-15: calc(var(--gap-30)/2);
    --gap-20: calc(var(--gap-40)/2);
    --gap-30: calc(var(--gap-60)/2);

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

.portfolio-11 * {font-family:"Pretendard"; letter-spacing: 0px;}
.portfolio-11 .work_wrap {width:100%; overflow:visible; background:#FFF7EA; color: #111;}

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

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

.portfolio-11 .section {padding: 20px; padding-bottom: 0; }

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

.portfolio-11 .conts-wrap .cont-title {margin-bottom: calc(var(--gap-50)*2);}
.portfolio-11 .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-11 .conts-wrap .cont-title .title { font-size:var(--font-30); font-weight:700; margin-bottom: var(--gap-40); text-transform: uppercase;}
.portfolio-11 .conts-wrap .cont-title .desc {font-size:var(--font-20); line-height: 1.6;}

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

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

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


.portfolio-11 .sec-2 .conts {position: relative;}
.portfolio-11 .sec-2 .conts .text {position: absolute; width: 90%; margin: 4% 5% 0; display: flex; justify-content: space-between; align-items: center; font-size: var(--font-18); font-weight: 600; color: #DE9269; text-transform: uppercase; top: 0; left: 0; }
.portfolio-11 .sec-2 .conts .logo {position: absolute; width: 100%; text-align: center; left: 0; top: 17%;}
.portfolio-11 .sec-2 .conts .logo img {filter: drop-shadow(0 0 10px rgba(0,0,0,0.1));}

.portfolio-11 .sec-3 .cont {background: #fff; }
.portfolio-11 .sec-3 .conts-wrap .cont-title {margin-bottom: calc(var(--gap-50)*2.4);}
.portfolio-11 .sec-3 .img-area {display: flex; gap: var(--gap-50); align-items: start;}
.portfolio-11 .sec-3 .img-area > div {width: calc((100% - var(--gap-50))/2);}
.portfolio-11 .sec-3 .img-area .right {display: flex; gap: var(--gap-15); flex-wrap: wrap;}
.portfolio-11 .sec-3 .img-area .right .img-box {width: calc((100% - var(--gap-15))/2);}


.portfolio-11 .sec-4 .cont:nth-child(1) {background: #FFEED3; }
.portfolio-11 .sec-4 .card-list {display: flex; gap: var(--gap-60); justify-content: center;}
.portfolio-11 .sec-4 .card-list .card-item {background: #FFFCF6; border-radius: var(--gap-40); padding: var(--gap-50); text-align: center; flex: 1 1 0; opacity: 0; transform: translateY(50%); transition: 1s;}
.portfolio-11 .sec-4 .card-list .card-item .tag {border-radius: 8px; margin: auto; display: inline-flex; font-size: var(--font-18); color: #fff; font-weight: 500; height: 39px; align-items: center; justify-content: center; line-height: 1; background: #F6932E; padding: 0 var(--gap-20); }
.portfolio-11 .sec-4 .card-list .card-item .text-box {margin-top: var(--gap-60); }
.portfolio-11 .sec-4 .card-list .card-item .text-box .tit {font-size: calc(var(--font-20)*1.1); font-weight: 600; line-height: 1.6; margin-bottom: 1.1em; }
.portfolio-11 .sec-4 .card-list .card-item .text-box .desc {font-size: var(--font-18); line-height: 1.6; }

.portfolio-11 .sec-4 .card-list .card-item:nth-child(1) {transition-delay: 0.2s;}
.portfolio-11 .sec-4 .card-list .card-item:nth-child(2) {transition-delay: 0.4s;}
.portfolio-11 .sec-4 .card-list .card-item:nth-child(3) {transition-delay: 0.6s;}
.portfolio-11 .sec-4:has(.aos-animate) .card-list .card-item {opacity: 1; transform: translateY(0);}

.portfolio-11 .sec-5 {padding-top: 0;}
.portfolio-11 .sec-5 .conts-box {margin-top: var(--gap-20); }
.portfolio-11 .sec-5 .color-box {display: flex; gap: var(--gap-40); }
.portfolio-11 .sec-5 .color-box > div {width: calc((100% - var(--gap-40))/2); aspect-ratio: 1; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: var(--gap-50);}
.portfolio-11 .sec-5 .color-box .color-card {aspect-ratio: 1; width: 340px; border-radius: var(--gap-40); padding: var(--gap-50); color: #fff; text-align: left; opacity: 0; transform: translateY(50%); transition: 1s;}
.portfolio-11 .sec-5 .color-box .color-card .tit {font-size: var(--font-28); font-weight: 600; line-height: 1.2; margin-bottom: 0.9em;}
.portfolio-11 .sec-5 .color-box .color-card p {font-size: var(--font-24); line-height: 1.2;}
.portfolio-11 .sec-5 .color-box .left {background-image: url(/img/portfolio/011/img05_1.jpg);}
.portfolio-11 .sec-5 .color-box .left .color-card {background: #F39800;}
.portfolio-11 .sec-5 .color-box .right {background-image: url(/img/portfolio/011/img05_2.jpg);}
.portfolio-11 .sec-5 .color-box .right .color-card {background: #F37100;}

.portfolio-11 .sec-5 .font-box {background: #fff; display: flex; gap: var(--gap-40); padding: var(--gap-50) 0; align-items: center; margin-top: var(--gap-40);}
.portfolio-11 .sec-5 .font-box > div {padding: 0 5%; width: calc((100% - var(--gap-40))/2);}
.portfolio-11 .sec-5 .font-box .left .item {border-radius: var(--gap-40); background: #FBFBFB; padding: var(--gap-40); text-align: center;}
.portfolio-11 .sec-5 .font-box .left .item .type {color: #444; font-size: var(--font-20); font-weight: 600;}
.portfolio-11 .sec-5 .font-box .left .item p {color: #444; font-size: var(--font-20); margin-bottom: 1em;}
.portfolio-11 .sec-5 .font-box .left .item .font {font-size: min(calc(var(--vwpx)*120),calc(var(--font-30)*4)); font-weight: 500;}
.portfolio-11 .sec-5 .font-box .left .en {margin-top: var(--gap-20);}

.portfolio-11 .sec-5 .font-box .right {}
.portfolio-11 .sec-5 .font-box .right .weight {font-weight: 500; color: #000; text-align: left; margin-bottom: var(--gap-60);}
.portfolio-11 .sec-5 .font-box .right .weight span {font-weight: 400;}
.portfolio-11 .sec-5 .font-box .right .weight b {font-weight: 600;}
.portfolio-11 .sec-5 .font-box .right .size li {display: flex; justify-content: space-between; align-items: center; margin-top: 25px;}
.portfolio-11 .sec-5 .font-box .right .size .text {font-weight: 500; letter-spacing: -0.025em;}
.portfolio-11 .sec-5 .font-box .right .size .info {font-size: var(--font-16); color: #666; }

.portfolio-11 .sec-5 .design-box {display: flex; align-items: start; justify-content: center; gap: var(--gap-50); margin-top: calc(var(--gap-50)*4);}


.portfolio-11 .sec-5 .color-box div:nth-child(1) .color-card {transition-delay: 0.2s;}
.portfolio-11 .sec-5 .color-box div:nth-child(2) .color-card {transition-delay: 0.4s;}
.portfolio-11 .sec-5:has(.aos-animate) .color-box .color-card {opacity: 1; transform: translateY(0);}


.portfolio-11 .sec-6 .cont1 {background: #fff; padding: calc(var(--gap-50)*2.4) 0 calc(var(--gap-50)*2.6);}
.portfolio-11 .sec-6 .cont1 .desc {color: #333;}
.portfolio-11 .sec-6 .cont1 .conts-box {background: #FFE6C8; padding: var(--gap-30);}

.portfolio-11 .sec-6 .cont2 {margin-top: var(--gap-20);}
.portfolio-11 .sec-6 .cont2 .conts-box {display: flex; gap: var(--gap-20); align-items: stretch;}
.portfolio-11 .sec-6 .cont2 .conts-box > div {flex-grow: 1; display: flex; align-items: center; justify-content: center;}
.portfolio-11 .sec-6 .cont2 .conts-box .round80 {background: #FFE6C8;}
.portfolio-11 .sec-6 .cont2 .conts-box .img-box {max-width: 80%; margin: auto; }
.portfolio-11 .sec-6 .cont2 .conts-box .left {padding: 40px 0;}
.portfolio-11 .sec-6 .cont2 .conts-box .right {flex-direction: column; gap: var(--gap-20);}
.portfolio-11 .sec-6 .cont2 .conts-box .right > div {width: 100%;}
.portfolio-11 .sec-6 .cont2 .conts-box .right .top {padding-top: calc(var(--gap-50)*2);}
.portfolio-11 .sec-6 .cont2 .conts-box .right .top .img-box {border-radius: var(--gap-30) var(--gap-30) 0 0; width: fit-content; }
.portfolio-11 .sec-6 .cont2 .conts-box .right .bottom {padding: var(--gap-60) 0; display: flex; align-items: center; justify-content: center; flex-grow: 1;}


.portfolio-11 .sec-7 .cont1 {background: #fff; }
.portfolio-11 .sec-7 .cont1 .desc {color: #333;}
.portfolio-11 .sec-7 .cont1 .conts-box {display: flex; align-items: center; gap: calc(var(--gap-50)*2.2); justify-content: center;}
.portfolio-11 .sec-7 .cont1 .conts-box .item {background: #FFE6C8; padding: var(--gap-30); }
.portfolio-11 .sec-7 .cont1 .conts-box .right .item {padding: var(--gap-20);}
.portfolio-11 .sec-7 .cont2 {margin: var(--gap-20) 0;}

.portfolio-11 .sec-8 {padding-bottom: var(--gap-20);}
.portfolio-11 .sec-8 .cont1 {background: #fff; }
.portfolio-11 .sec-8 .cont1 .conts-box {background: #FFE6C8; padding: var(--gap-30);}
.portfolio-11 .sec-8 .cont1 .desc {color: #333;}
.portfolio-11 .sec-8 .cont2 {margin: var(--gap-20) 0;}


.portfolio-11 .list-box {display: flex; align-items: stretch; gap: var(--gap-20); }
.portfolio-11 .list-box > div {flex: 1 1 0; display: flex; flex-direction: column; gap: var(--gap-20); }
.portfolio-11 .list-box .item {padding: var(--gap-80) var(--gap-60) calc(var(--gap-50)*2.6); flex-grow: 1;}

.portfolio-11 .list-box .item .img-wrap {display: flex; justify-content: center; gap: var(--gap-40); align-items: start;}
.portfolio-11 .list-box .item .tit {font-weight: 600; font-size: var(--font-18); text-align: center; margin-bottom: var(--gap-60); line-height: 1.6; text-transform: uppercase;}
.portfolio-11 .list-box .item.ty1 {background: #FFEEC8;}
.portfolio-11 .list-box .item.ty1 .tit {color: #E5AD2F;}
.portfolio-11 .list-box .item.ty2 {background: #FFE7D5;}
.portfolio-11 .list-box .item.ty2 .tit {color: #FFA184; }
.portfolio-11 .list-box .item.ty3 {background: #FFE6C8;}
.portfolio-11 .list-box .item.ty3 .tit {color: #FFAD4A;}


@media screen and (max-width:1600px){
 .portfolio-11 .sec-5 .font-box > div {padding: 3%;}
}
@media screen and (max-width:1400px){
  .portfolio-11 .sec-5 .font-box > div {width: 80%;}
  .portfolio-11 .sec-5 .font-box {flex-direction: column;}
}
@media screen and (max-width:1260px){
  .portfolio-11 .sec-4 .card-list .card-item .text-box .desc .br {display: none;}

  .portfolio-11 .sec-5 .color-box .color-card {width: 240px;}

  .portfolio-11 .sec-7 .cont1 .conts-box {gap: var(--gap-50);}

  .portfolio-11 .list-box .item {padding: var(--gap-80) var(--gap-60);}
}
@media screen and (max-width:1024px) {
  .portfolio-11 .conts-wrap .br {display: none;}
  .portfolio-11 .conts-wrap .cont-title .big-title .br {display: block;}
  .portfolio-11 .conts-wrap .cont-title .desc {max-width: 80%; margin: auto; }

  .portfolio-11 .sec-2 .conts .logo img {width: 18%;}

  .portfolio-11 .sec-4 .card-list {flex-direction: column;}

  .portfolio-11 .sec-5 .color-box {flex-direction: column; align-items: center;}
  .portfolio-11 .sec-5 .color-box > div {width: 75%; }
  .portfolio-11 .sec-5 .color-box .color-card {width: 200px;}

  .portfolio-11 .sec-5 .font-box .right {width: 95%;}
}
@media screen and (max-width:768px) {
  .portfolio-11 .conts-wrap .cont-title .big-title {font-size: calc(var(--font-20)*2.5);}
  .portfolio-11 .conts-wrap .cont-title .desc {font-size: 14px;}

  .portfolio-11 .sec-3 .img-area {flex-direction: column;}
  .portfolio-11 .sec-3 .img-area > div {width: 100%;}

  .portfolio-11 .sec-5 .color-box > div {width: 100%; max-width: 500px;}
  
  .portfolio-11 .sec-5 .font-box .right .size li:nth-child(-n+3) {display: none;}
  .portfolio-11 .sec-5 .design-box {flex-direction: column; align-items: center;}

  .portfolio-11 .sec-6 .cont2 .conts-box {flex-direction: column;}

  .portfolio-11 .list-box {flex-direction: column;}
  .portfolio-11 .list-box .item {padding: 40px 28px;}
}
@media screen and (max-width:480px) {
  .portfolio-11 .conts-wrap .cont-title .big-title {font-size: calc(var(--font-20)*2);}
  .portfolio-11 .conts-wrap .cont-title .desc {width: 100%;}

  .portfolio-11 .sec-2 .conts .text {font-size: 14px;}
  .portfolio-11 .sec-2 .conts .logo {top: 50px;}
  .portfolio-11 .sec-2 .conts .logo img {width: 70px;}

  .portfolio-11 .sec-4 .card-list {gap: 16px;}
  .portfolio-11 .sec-4 .card-list .card-item .text-box .tit {font-size: 18px;}
  .portfolio-11 .sec-4 .card-list .card-item .text-box .desc {font-size: 14px;}

  .portfolio-11 .sec-5 .color-box > div {padding: 24px;}
  .portfolio-11 .sec-5 .color-box .color-card {border-radius: 12px; width: 160px; text-align: center;}
  .portfolio-11 .sec-5 .font-box .left .item .font {font-size: 30px; font-weight: 600;}
  .portfolio-11 .sec-5 .font-box .right .weight {text-align: center;}
  .portfolio-11 .sec-5 .font-box .right .size li {flex-direction: column; gap: 8px;}
  
  .portfolio-11 .sec-6 .cont2 .conts-box .right .top .img-box {border-radius: 12px 12px 0 0}

  .portfolio-11 .sec-7 .cont1 .conts-box {gap: 16px;}
  .portfolio-11 .sec-7 .cont1 .conts-box .item {padding: 8px;}
  .portfolio-11 .sec-7 .cont1 .conts-box .right .item {padding: 6px;}

  .portfolio-11 .sec-8 .cont1 .conts-box {padding: 8px;}

  .portfolio-11 .list-box .item .img-wrap {gap: 12px;}
}