@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&display=swap');
: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) {

}

.pf-view .bd-view-cont .rb-section {background:#111; }
.rb-section {background:#0F0F0F !important;}

.portfolio-14 { letter-spacing: -0.025em; line-height: 1.4;}
.portfolio-14 * {font-family:'Pretendard';}

.portfolio-14 .work_wrap {background-image: url(/img/portfolio/014/bg_bottom.jpg); background-position: center bottom; background-repeat: no-repeat; background-size:100% 100%;}

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

.portfolio-14 .section {}

.portfolio-14 .cont-head {}
.portfolio-14 .cont-head .tit {font-size: var(--font-18); font-weight: 700; color: #999; }
.portfolio-14 .cont-head .desc {font-size: var(--font-20); color: #fff;}

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

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

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



.portfolio-14 .sec-2 {background-color: #0E0E0E; padding-bottom: calc(var(--gap-50)*2);}
.portfolio-14 .sec-2 .cont1 {background-image: url(/img/portfolio/014/01.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: top center; position: relative;} 
.portfolio-14 .sec-2 .cont1::before {content:""; width: 100%; height: 55%; position: absolute; left: 0; bottom: 0; background: linear-gradient(to top, #0E0E0E, rgba(0,0,0,0)); }
.portfolio-14 .sec-2 .cont1 .conts-box {position: relative; aspect-ratio: 1/0.935; }
.portfolio-14 .sec-2 .cont1 .conts {padding-top: calc(var(--gap-50)*4.8);}

.portfolio-14 .sec-2 .cont1 .cont-head {}
.portfolio-14 .sec-2 .cont1 .cont-head .tit {text-align: center; margin-bottom: var(--gap-32);}

.portfolio-14 .sec-2 .cont2 {margin-top: calc(var(--gap-50)*-4); position: relative;z-index: 1;}
.portfolio-14 .sec-2 .cont2 .conts-wrap {max-width: 1700px;}
.portfolio-14 .sec-2 .cont2 .cont-head {display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--gap-50);}
.portfolio-14 .sec-2 .cont2 .cont-head .desc {text-align: left;}
.portfolio-14 .sec-2 .cont2 .list-box {display: flex; gap: var(--gap-40); align-items: center; justify-content: center;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item {width: calc((100% - var(--gap-40)*2)/3); aspect-ratio: 1/1.315; background: linear-gradient(45deg, #1F1F1F, #121212); position: relative;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item::before {content:""; width: 100%; height: 100%; position: absolute; left: 0;top: 0; background: url(/img/portfolio/014/cont1_bg.png); mix-blend-mode: luminosity; pointer-events: none;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item .item-text {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; text-transform: uppercase; color: #fff; font-size: var(--font-20); font-weight: 700; text-align: center; justify-content: center;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item .item-cont {position: relative; width: 100%; height: 100%;}

.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box {overflow: hidden;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot {position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #555; }
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot1 {left: 60%; top: 90%; animation: opacity 20s ease-in-out infinite, dotMove 45s ease-in-out infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot2 {left: 65%; top: 85%; animation: opacity 20s ease-in-out infinite, dotMove 25s ease-in-out 10s infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot3 {left: 35%; top: 10%; animation: opacity 20s ease-in-out infinite, dotMove 60s ease-in-out infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot4 {left: 45%; top: 20%; animation: opacity 20s ease-in-out infinite, dotMove 30s ease-in-out 10s infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot5 {left: 60%; top: 60%; animation: opacity 30s ease-in-out infinite, dotMove 45s ease-in-out 10s infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot6 {left: 50%; top: 40%; animation: opacity 30s ease-in-out infinite, dotMove 70s ease-in-out infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot7 {left: 30%; top: 30%; animation: opacity 30s ease-in-out infinite, dotMove 40s ease-in-out 10s infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot8 {left: 40%; top: 30%; animation: opacity 30s ease-in-out infinite, dotMove 40s ease-in-out infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot9 {left: 45%; top: 65%; animation: opacity 25s ease-in-out infinite, dotMove 50s ease-in-out 20s infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot10 {left: 50%; top: 15%; animation: opacity 25s ease-in-out infinite, dotMove 65s ease-in-out infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot11 {left: 55%; top: 75%; animation: opacity 25s ease-in-out infinite, dotMove 55s ease-in-out 10s infinite alternate;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.dot-box .dot12 {left: 70%; top: 90%; animation: opacity 25s ease-in-out infinite, dotMove 45s ease-in-out 15s infinite alternate;}

@keyframes opacity {
  0% {opacity: 1;}
  25%, 75% {opacity: 0;} 
  50% {opacity: 1;}
  100% {opacity: 1;}
}
@keyframes dotMove {
  0% {transform: translate(0, 0);}
	10% {transform: translate(20px, 50px);}
	20% {transform: translate(-30px, 10px);}
	30% {transform: translate(10px, 60px);}
	40% { transform: translate(50px, 00px); }
	50% { transform: translate(-10px, -40px); }
	60% { transform: translate(-40px, 20px);}
	70% { transform: translate(30px, -30px); }
	80% { transform: translate(0px, -60px); }
	90% {transform: translate(40px, 10px);}
	100% { transform: translate(0, 0);}
}

.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand {}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont {display: flex; align-items: center; justify-content: center;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont .rim-box {position: relative; width: 80%; aspect-ratio: 1; }
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont .rim-box .rim {width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 5px solid #3C3C3C; filter: blur(2px); border-radius: 50%; transform: scale(0.15); opacity: 0;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont .rim-box .rim1 {animation: expand 3.5s linear infinite;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont .rim-box .rim2 {animation: expand 3.5s linear 0.7s infinite;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont .rim-box .rim3 {animation: expand 3.5s linear 1.4s infinite;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont .rim-box .rim4 {animation: expand 3.5s linear 2.1s infinite;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.expand .item-cont .rim-box .rim5 {animation: expand 3.5s linear 2.8s infinite;}

@keyframes expand {
  0% {transform: scale(0.15); filter: blur(2px); opacity: 1;}
  100% {transform: scale(1); filter: blur(10px); opacity: 0;}
}

.portfolio-14 .sec-2 .cont2 .list-box .list-item.line {}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.line .item-cont {display: flex; align-items: center; justify-content: center;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.line .line-box {width: 4px; height: 80%; position: relative; filter: blur(2px); overflow: hidden;}
.portfolio-14 .sec-2 .cont2 .list-box .list-item.line .line-box .glow {position: absolute; width: 100%; height: 60%; background: linear-gradient(to bottom, rgba(0,0,0,0), #fff, rgba(0,0,0,0));  left: 0; top: 0; transform: translateY(-100%); opacity: 0.6; animation: lineglow 2.4s 0s linear infinite;}

@keyframes lineglow {
  0% {transform: translateY(-100%)}
  100% {transform: translateY(170%)}
}


.portfolio-14 .sec-3 { background: #0E0E0E; padding: calc(var(--gap-50)*2) 0 calc(var(--gap-50)*4);}
.portfolio-14 .sec-3 .cont1 {}
.portfolio-14 .sec-3 .cont1 .title {width: 100%; aspect-ratio: 1/0.09; color: transparent; mask: url(/img/portfolio/014/sec3_text.png); background: linear-gradient(to right, #6D6D6D, #1d1d1d, #6D6D6D ); mask-size: 100%; mask-position: center; }
.portfolio-14 .sec-3 .cont1 .conts-wrap {max-width: 1500px;}
.portfolio-14 .sec-3 .cont1 .font-info {margin-top: var(--gap-50);}
.portfolio-14 .sec-3 .cont1 .font-info .font-item {display: flex; justify-content: space-between; align-items: center; text-align: left;}
.portfolio-14 .sec-3 .cont1 .font-info .font-item .font-tit {color: #fff; font-size: 74px; font-weight: 700; line-height: 1.2; margin-bottom: var(--gap-80);}
.portfolio-14 .sec-3 .cont1 .font-info .font-item .font-desc {color: #999; font-size: var(--font-30); font-weight: 500; font-family: "Hind Madurai", sans-serif;}
.portfolio-14 .sec-3 .cont1 .font-info .font-item .font-desc p {font-family: inherit; }
.portfolio-14 .sec-3 .cont1 .font-info .font-item .font-desc p + p {margin-top: 0.8em;}
.portfolio-14 .sec-3 .cont1 .font-info .font-item .font-big {color: #fff; font-family: "Hind Madurai", sans-serif; font-size: clamp(200px, 30vw, 600px); font-weight: 500; line-height: 1.3;}
.portfolio-14 .sec-3 .cont1 .font-info .font-color {display: flex; gap: var(--gap-40);}
.portfolio-14 .sec-3 .cont1 .font-info .font-color > div {height: 200px;}
.portfolio-14 .sec-3 .cont1 .font-info .font-color p {text-align: left; font-size: var(--font-30); padding-left: 0.33em; color: #999; margin-top: 0.33em;}
.portfolio-14 .sec-3 .cont1 .font-info .font-color .color-gradient {flex-shrink: 0; width: calc(100% - var(--gap-40) - 178px); }
.portfolio-14 .sec-3 .cont1 .font-info .font-color .color-box {position: relative; overflow: hidden;}
.portfolio-14 .sec-3 .cont1 .font-info .font-color .color-box::before {content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; filter: url(#n); opacity: 0.5;}
.portfolio-14 .sec-3 .cont1 .font-info .font-color .color-gradient .color-box {width: 100%; height: 100%; background: linear-gradient(to right, #191919, #555555, #c1c1c1);  }
.portfolio-14 .sec-3 .cont1 .font-info .font-color .color-point {width: 178px;}
.portfolio-14 .sec-3 .cont1 .font-info .font-color .color-point .color-box {width: 100%; height: 100%; background-color: #A1E71F; }


.portfolio-14 .sec-4 { padding: calc(var(--gap-50)*4) 0 calc(var(--gap-50)*4); position: relative;}
.portfolio-14 .sec-4::before {content:""; background: linear-gradient(to bottom, #0E0E0E, rgba(0,0,0,0)); width: 100%; height: 50%; position: absolute; left: 0; top: 0;}
.portfolio-14 .sec-4 .pc-img {max-width: 1200px; margin: auto;}
.portfolio-14 .sec-4 .pc-img img {max-width: 100%;}
.portfolio-14 .sec-4 .pc-img .top {border: 2px solid #333; border-radius: 20px; font-size: 0; overflow: hidden; position: relative; z-index: 1;}
.portfolio-14 .sec-4 .pc-img .body-img {padding: 0 5%; margin-top: -51%; font-size: 0; position: relative; z-index: 0;}


.portfolio-14 .sec-5 { padding: calc(var(--gap-50)*4) 0; position: relative; }
.portfolio-14 .sec-5::before {content:""; width: 53%; aspect-ratio: 1/1.03; position: absolute; right: 0; bottom: 0; background: url(/img/portfolio/014/04.png) center no-repeat; background-size: cover; z-index: 1;}
.portfolio-14 .sec-5 .mo-img {display: flex; gap: var(--gap-80); position: relative; z-index: 2; align-items: start; justify-content: start;}
.portfolio-14 .sec-5 .mo-img .img-box {border-radius: 18px; border: 2px solid #585858; font-size: 0; overflow: hidden; width: calc((100% - var(--gap-80)*3)/4); max-width: 230px; }
.portfolio-14 .sec-5 .mo-img .img-box img {max-width: 100%; }
.portfolio-14 .sec-5 .mo-img .img-box:nth-child(2) {margin-top: var(--gap-60);}
.portfolio-14 .sec-5 .mo-img .img-box:nth-child(3) {margin-top: calc(var(--gap-60)*2);}
.portfolio-14 .sec-5 .mo-img .img-box:nth-child(4) {margin-top: var(--font-20);}





@media screen and (max-width:1440px) {}
@media screen and (max-width:1260px) {
  .portfolio-14 .sec-2 .cont1 .conts {padding-top: calc(var(--gap-50)*3);}
  .portfolio-14 .sec-3 .cont1 .font-info .font-item .font-tit {font-size: 48px;}
}
@media screen and (max-width:1024px) {
  .portfolio-14 .sec-3 .cont1 .font-info .font-item .font-desc {font-size: 20px;}
  .portfolio-14 .sec-3 .cont1 .font-info .font-color > div {height: 120px;}
  .portfolio-14 .sec-3 .cont1 .font-info .font-color .color-gradient {width: calc(75% - var(--gap-40));}
  .portfolio-14 .sec-3 .cont1 .font-info .font-color .color-point {width: 25%;}
}
@media screen and (max-width:768px) {
  .portfolio-14 .cont-head .desc {width: 90%; font-size: var(--font-18);}
  .portfolio-14 .cont-head .desc br {display: none;}

  .portfolio-14 .sec-2 .cont1 {background-position: bottom center;}
  .portfolio-14 .sec-2 .cont1::after {content:""; width: 100%; height: 40%; position: absolute; left: 0; top: 20%; background: linear-gradient(to bottom, #0E0E0E 20%, rgba(0,0,0,0));}
  .portfolio-14 .sec-2 .cont1 .cont-head .desc {margin: auto; }
  .portfolio-14 .sec-2 .cont1 .conts-box {aspect-ratio: 1/1.6; z-index: 1;}

  .portfolio-14 .sec-2 .cont2 {margin-top: 0;}
  .portfolio-14 .sec-2 .cont2 .cont-head {flex-direction: column; gap: var(--font-20);}
  .portfolio-14 .sec-2 .cont2 .list-box {flex-direction: column;}
  .portfolio-14 .sec-2 .cont2 .list-box .list-item {width: 100%; max-width: 320px; }
  .portfolio-14 .sec-2 .cont2 .list-box .list-item.line .line-box {width: 2px;}

  .portfolio-14 .sec-3 .cont1 .font-info .font-item {flex-direction: column; align-items: start; padding-top: var(--gap-80);}
  .portfolio-14 .sec-3 .cont1 .font-info .font-item .right {width: 100%;}
  .portfolio-14 .sec-3 .cont1 .font-info .font-item .font-big {font-size: clamp(200px, 50vw, 600px); text-align: center; line-height: 1.1;}

  .portfolio-14 .sec-5 .mo-img {flex-wrap:wrap; justify-content: center; gap: var(--gap-40);}
  .portfolio-14 .sec-5 .mo-img .img-box {width: calc((100% - var(--gap-40))/2);}
}
@media screen and (max-width:480px) {
  .portfolio-14 .cont-head .desc {font-size: 14px;}
  .portfolio-14 .sec-2 .cont1 {background-position: bottom -80% center; background-size: 130% auto;}
  .portfolio-14 .sec-2 .cont1::after {top: 15%; }
  .portfolio-14 .sec-2 .cont1 .conts {padding-top: calc(var(--gap-50)*2);}
  .portfolio-14 .sec-4 .pc-img .top {border-radius: 12px;}
  .portfolio-14 .sec-3 .cont1 .font-info .font-item .font-tit {font-size: 36px; margin-bottom: 1em;}
  .portfolio-14 .sec-3 .cont1 .font-info .font-color > div {height: 100px;}
  .portfolio-14 .sec-5 .mo-img .img-box {border-radius: 8px;}
}