@charset "utf-8";

.main {padding-top: var(--headerH);}
.main section {width: 100%; overflow: hidden; }
.main section .inner {width: 90%; margin: auto; }
.main section .section-title {}


/* hero */
.hero {background: var(--black); position: relative; height: calc(100svh - var(--headerH)); display: flex; align-items: center; justify-content: center; margin-bottom: var(--gap100);}
.hero .tb-text-container {overflow: hidden; position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); font-size: 0; display: flex; align-items: center; justify-content: center; height: 23vw; clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);}
.hero .tb-container-bg {width: 100%; height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: var(--primary); z-index: 0;}
.hero .tb-text-box {width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5vw 0; left: 0; top: 0; }
.hero .center-text-container {width: 30%; opacity: 0; position: relative; font-size: 0; }

/* portfolio */
.portfolio {background: var(--black); position: relative; height: 600vh; overflow: unset !important; --width:44vw; --gap:30px;}

.portfolio .pin-box {height: 100lvh;}
.portfolio .portfoli-item {}
.portfolio .portfoli-item .text-box {display: none;}

.portfolio .pf-img-box {width: 100%; aspect-ratio: 1/0.6; font-size: 0; mask-image: url(/img/main/portfolio_mask01.svg); -webkit-mask-image:url(/img/main/portfolio_mask01.svg); mask-size:70vw; mask-position: center; -webkit-mask-size:70vw; -webkit-mask-position: center; overflow: hidden; border-radius: 20px; display: block;}
.portfolio li:nth-child(2n) .pf-img-box {mask-image: url(/img/main/portfolio_mask02.svg); -webkit-mask-image:url(/img/main/portfolio_mask02.svg);}
.portfolio .pf-img-box img {width: 100%; height: 100%; object-fit: cover; }

.portfolio .fixed-layer {width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.portfolio .fixed-layer .wrapper {width: 100%; height: 100lvh;  padding-top: calc((100lvh - (var(--width) * 0.6))/2 - var(--gap)/2); position: relative; overflow: hidden;}
.portfolio .portfolio-list-box {opacity: 0; position: sticky; width: 100%; left: 0; top: 0;height: 100lvh;  }
.portfolio .portfolio-list-box ul {display: flex; flex-direction: column; align-items: center; height: fit-content;}
.portfolio .portfolio-list-box .portfoli-item {width: var(--width); position: relative; height: calc(var(--width)*0.6 + var(--gap));}
.portfolio .portfolio-list-box .portfoli-item .pf-img-box {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform 0.3s;}
.portfolio .portfolio-list-box .portfoli-item .pf-img-box.on {transform: translate(-50%,-50%) scale(1.2);} 

.portfolio .portfolio-list-box .text-list-box {position: absolute; left: 0; width: 100%; top: 50%; pointer-events: none; }
.portfolio .portfolio-list-box .text-list-box .text-box {position: absolute; left: 0%; transform: translateY(-50%); font-size: var(--font20); padding: 0 8%; width: 100%;}
.portfolio .portfolio-list-box .text-list-box .text-box .line {overflow: hidden; max-width: 100%;}
.portfolio .portfolio-list-box .text-list-box .text-box .line .text-over {display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.portfolio .portfolio-list-box .text-list-box .text-box .en {font-family: var(--montserrat); font-weight: 500; line-height: 1.4; font-size: 2em; margin-bottom: 0.2em;}
.portfolio .portfolio-list-box .text-list-box .text-box .en span {padding: 0.1em 0;}
.portfolio .portfolio-list-box .text-list-box .text-box .ko {font-family: var(--pretendard); font-weight: 700; line-height: 1.2; font-size: 5em;}
.portfolio .portfolio-list-box .text-list-box .text-box .ko span {padding: 0.1em 0;}
.portfolio .portfolio-list-box .text-list-box .text-box.active .line .text-over {transform: translateY(0);}


.portfolio .grid-layout-box { width: 100%; height: 100lvh; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;  pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.portfolio .grid-layout-box .pf-list {display: grid; grid-template-columns: repeat(3, var(--width)); gap: var(--gap); transform: rotate(-15deg); opacity: 0.2;}

.portfolio .center-text-box {position: absolute; display: flex; align-items: center; justify-content: center; left: 50%; top: 50%; transform: translate(-50%,-50%);  z-index: 6; text-align: center; width: 100%;}
.portfolio .center-text-box .title {font-weight: 700; font-size: 120px; line-height: 0.9;}
.portfolio .center-text-box .desc {font-weight: 500; line-height: 1.7; margin-top: var(--gap40); font-size: var(--font25);}
.portfolio .center-text-box .btn-box {margin-top: calc(var(--gap100)*0.6); font-size: var(--font18); opacity: 0;}
@media screen and (max-width:1260px){
  
}
@media screen and (max-width:1024px){
  .portfolio .center-text-box .title {font-size: 90px;}

  .portfolio .pf-img-box {border-radius: 12px;}
}
@media screen and (max-width:768px){
  .portfolio {--width: 75vw; --gap:16px;}
  .portfolio .center-text-box .title {font-size: 60px;}
  .portfolio .pf-img-box {-webkit-mask-size:100vw; mask-size:100vw;}

  .portfolio .portfolio-list-box .text-list-box .text-box {padding: 0 5%;}
}
@media screen and (max-width:480px){
  .portfolio { --gap:8px;}
  .portfolio .center-text-box .title {font-size: 40px;}
  .portfolio .center-text-box .desc {font-size: 14px;}

  .portfolio .pf-img-box {border-radius: 8px;} 
  .portfolio .portfolio-list-box .text-list-box .text-box {font-size: 10px;}
}


/* keyword */
.keyword {background: var(--black); overflow: unset !important; }

.keyword .keywords-wrap {width: 100%; position: relative; height: 600vh;}
.keyword .keywords-wrap .pin-box {width: 100%; height: 100vh; position: sticky; left: 0; top: 0; overflow: hidden;}
.keyword .keywords-wrap .words-box {width: 100%; height: 100vh; position: absolute; left: 0; top: 0;}
.keyword .keywords-wrap .words-box .words-pin {position: relative; width: 100%; height: 100vh; left: 0; top: 0%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.keyword .keywords-wrap .words-box .title {position: absolute; width: 100%; left: 0; top: 50%; font-size: 0;}
.keyword .keywords-wrap .words-box .title span {width: 100%; color: var(--white); position: absolute; top: 50%; left: 50%; /*transform: translate(-50%,-50%);*/ }
.keyword .keywords-wrap .words-box .title span.top {clip-path: polygon(0 0, 100% 0, 100% 51%, 0 51%);}
.keyword .keywords-wrap .words-box .title span.btm {clip-path: polygon(0 49%, 100% 49%, 100% 100%, 0 100%);}
.keyword .keywords-wrap .words-box .title span img {width: 100%;}
.keyword .keywords-wrap .words-box p {color: var(--primary); font-family: var(--pretendard); font-weight: 700; font-size: 60px; letter-spacing: -0.01em; text-align: center;}

.keyword .keywords-wrap .words-box.lr p {clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);}
.keyword .keywords-wrap .words-box.td p {clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);}

@media screen and (max-width:1260px){
  .keyword .keywords-wrap .words-box p {font-size: 40px;}
}
@media screen and (max-width:1024px){
  .keyword .keywords-wrap .words-box p .mobr {display: block;}
}
@media screen and (max-width:768px){
  .keyword .keywords-wrap .words-box p {font-size: 32px;}
}
@media screen and (max-width:480px){
  .keyword .keywords-wrap .words-box p {font-size: 24px;}
}


/* business */
.rb-section {position: relative; z-index: 1; }
.rb-section .inner {max-width: 1760px;}

.business {padding: var(--gap100) var(--gap80);}
.business .block-box {}
.business .block-line {margin-bottom: var(--gap80); display: flex; gap: var(--gap80); }

.business .block-line .block {perspective: 300px; width: var(--sizeW); height: var(--sizeH);}
.business .block-line .block .box {position: absolute;  transition: 0.3s; transform-style: preserve-3d; left: 0; top: 0; bottom: 0; right: 0; pointer-events: none;  width: var(--sizeW); height: var(--sizeH); transform-origin: 50% 50% calc(var(--sizeH)/2*-1); --round:30px;}
.business .block-line .block .box .front { height: 100%; border: 1px solid #000; border-radius: var(--round); position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #eee; display: flex; align-items: center; justify-content: center;  width: var(--sizeW); height: var(--sizeH); font-size: clamp(14px, 6.25vw, 120px);}
.business .block-line .block .box .front span {text-transform: uppercase; line-height: 0.9; font-weight: 700; color: #000;}
.business .block-line .block .box .side {position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: var(--primary); width: 100%; height: 100%; border-radius: var(--round); text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 700; line-height: 1.5; font-size: clamp(12px, 1.82vw,35px);  width: var(--sizeW); height: var(--sizeH);}
.business .block-line .block .box .side .line {display: flex; justify-content: center; align-items: center; gap: 1.7em;}
.business .block-line .block .box .side .line + .line {margin-top: calc(var(--gap10)*3);}

.business .block-line .block.size-s {/*--sizeW:450px;*/ --sizeW:clamp(140px, 23vw, 450px); --sizeH:var(--sizeW) }
.business .block-line .block.size-s .box {  transform: rotate3d(0,-1,0,0deg);}
.business .block-line .block.size-s .box .side {transform-origin: 0% 0%; transform: translate3d(99%, 0, 0) rotate3d(0,1,0,90deg);}
.business .block-line .block.size-m {/* --sizeH:320px; */ --sizeH:16.6vw;}
.business .block-line .block.size-m .box { transform: rotate3d(-1,0,0,0deg);} 
.business .block-line .block.size-m .box .side {transform-origin: 0% 100%; transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg); }

.business .block-line .block.size-s:hover .box {transform: rotate3d(0,-1,0,90deg);}
.business .block-line .block.size-s:hover .box .side {transform: translate3d(100.5%, 0, 0) rotate3d(0,1,0,90deg);}
.business .block-line .block.size-m:hover .box {transform: rotate3d(-1,0,0,90deg);}

.business .block-line .block.com {--sizeW:calc(59vw + (var(--gap80)*2)); margin: auto;}
.business .block-line .block.dev {--sizeW:calc(50vw + (var(--gap80)*2)); margin-left: auto;}

@media screen and (max-width:1260px){}
@media screen and (max-width:1024px){
  .business {padding: var(--gap100) 0; }
  .business .block-line .block .box {--round:18px;}
}
@media screen and (max-width:768px){
  .business .block-line .block .box {--round:6px;}
}
@media screen and (max-width:480px){
  .business {padding: 40px 0;}
  .business .block-line .block .box .side .line + .line {margin-top: calc(var(--gap10)*2);}
  .business .block-line .block.size-m {--sizeH:24vw;}
  .business .block-line .block.dev {--sizeW:100%;}
  .business .block-line .block.com {--sizeW:100%;}
}


/* question */
.question {padding: var(--gap100) 0;}
.question .frame {width: 100%; height: 800px; border-radius: 40px; overflow: hidden; background: #000; position: relative;}
.question .frame canvas {width: 100%; height: 100%;}
.question .frame .text-cont {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; display: flex; align-items: center; text-align: center; justify-content: center; pointer-events: none;}
.question .frame .text-cont .title {font-size: 120px; color: #fff; font-weight: 700; line-height: 1.1; margin-bottom: var(--gap40);}
.question .frame .text-cont .desc {font-size: 25px; color: #fff; font-family: var(--pretendard); font-weight: 500; line-height: 1.7; width: 600px; margin: auto;}
@media screen and (max-width:1260px){
  .question .frame .text-cont .title {font-size: 80px;}
  .question .frame .text-cont .desc {font-size: 20px; width: 480px;}
}
@media screen and (max-width:768px){
  .question .frame {height: 600px;}
  .question .frame .text-cont .title {font-size: 50px;}
  .question .frame .text-cont .desc {font-size: 16px; width: 300px;}
}
@media screen and (max-width:480px){
  .question {padding: 40px 0;}
  .question .frame {height: 480px; border-radius: 24px;}
  .question .frame .text-cont .title {font-size: 32px;}
  .question .frame .text-cont .desc {font-size: 14px; width: 260px;}
}

/* board */
.board {--width: 550px; --height: 690px; position: relative; margin: var(--gap100) 0; overflow: unset !important;}
.board .inner {max-width: 1600px;}
.board .board-wrap {padding: calc(var(--gap100)/2) 0 var(--gap100);}
.board .carousel-box {height: 300lvh; width: 100%; position: relative;}
.board .carousel-wrapper {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.board .carousel {position: sticky; z-index: 1; left: 0; top: 0; /*height: calc(var(--height)*2.3);*/ height: 100lvh; width: 100%; overflow: hidden;}
.board .carousel .carousel-item {
  --opacity: calc(var(--zIndex) / var(--items) * 3 - 2); 
  --x: calc(var(--active) * 600%); --y: calc(var(--active) * 200%);
  --rot: calc(var(--active) * 120deg);
  width: var(--width); height: var(--height);
  position: absolute;
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5); 
  left: 50%; top: 50%; 
  transform-origin: 50% 100%; transform:  translate(var(--x), var(--y)) rotate(var(--rot)); 
  pointer-events: auto; 
  transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
  z-index: var(--zIndex);
}
.board .carousel .carousel-item .carousel-box {position: absolute; width: 100%; height: 100%; padding: var(--gap40); padding-bottom: var(--gap80); border-radius: 20px; background: #000; display: block;  z-index: var(--zIndex); user-select: none; transition: background-color 0.8s; }
.board .carousel .carousel-item .carousel-box .thumb-box {width: 100%; font-size: 0; opacity: max(var(--opacity), 0.2);}
.board .carousel .carousel-item .carousel-box .thumb-box span {display: block; overflow: hidden; position: relative; padding-top: 68%;}
.board .carousel .carousel-item .carousel-box .thumb-box span img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.board .carousel .carousel-item .carousel-box .text-box {margin-top: var(--gap40); color: #fff; font-size: var(--font20); font-family: var(--pretendard); opacity: max(var(--opacity), 0.2)}
.board .carousel .carousel-item .carousel-box .text-box h3 {font-size: 1.5em; font-weight: 700; font-family: inherit; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; }
.board .carousel .carousel-item .carousel-box .text-box .desc {color: #eee; font-size: 1em; margin-top: 0.5em; font-weight: 500; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-family: inherit;}
.board .carousel .carousel-item .carousel-box .text-box .date {margin-top: 2.7em; color: #ccc; font-size: 0.9em; font-family: inherit;}

.board .carousel .carousel-item.active .carousel-box {background: var(--primary);}
/* .board .carousel .carousel-item[style*="--zIndex: 4"] .carousel-box {background: #999;}
.board .carousel .carousel-item[style*="--zIndex: 3"] .carousel-box {background: #ccc;} */

.board .inner {max-width: 1600px;}
.board .top-title { /*position: absolute; right: 0; top: calc(var(--gap100)/2);*/  width: 100%;}
.board .top-title h2 {font-size: 100px; font-weight: 700; color: #000;  text-align: right; line-height: 1.2;}
.board .btn-box {/*position: absolute; left: 0; bottom: var(--gap100);*/ width: 100%;}
.board .btn-box a {font-weight: 700; font-size: 70px; line-height: 1.2; display: flex; justify-content: start; align-items: end; gap: 0.42em; color: #000; width: fit-content;}
.board .btn-box i {width: 1.14em; display: block;}
.board .btn-box i svg {width: 100%; vertical-align: bottom;}

@media screen and (max-width:1480px){
  .board {--width:460px; --height:600px;}
}
@media screen and (max-width:1024px){
  .board .top-title h2 {font-size: 80px;}
  .board .btn-box a {font-size: 55px;}
}
@media screen and (max-width:768px){
  .board {--width:400px; --height:540px;}
  .board .top-title h2 {font-size: 60px;}
  .board .btn-box a {font-size: 40px;}
  .board .carousel .carousel-item .carousel-box {padding: 30px; }
}
@media screen and (max-width:480px){
  .board {--width:280px; --height:390px; margin: 40px 0;}
  .board .top-title h2 {font-size: 40px;}
  .board .btn-box a {font-size: 24px;}
  .board .carousel .carousel-item .carousel-box {padding: 24px; border-radius: 16px;}
  .board .carousel .carousel-item .carousel-box .text-box {font-size: 15px;}
}


/* main popup */
.popup-wrap {width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none;}

.main-popup {--foot-height:77px; position: absolute; z-index: 9999; top: 110px; left: 80px; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 4px rgba(0,0,0,0.25); background: #fff; pointer-events: auto; display: none; }
.main-popup .popup-body {width: 480px; max-width: 90vw; max-height: calc(80vh - var(--foot-height)); font-size: 0; overflow: auto;}
.main-popup .popup-body a {display: block; width: 100%; height: 100%;}
.main-popup .popup-body img {width: 100%; height: 100%; object-fit: cover;}
.main-popup .popup-body[style] img {width: auto; height: auto; object-fit:unset; }
.main-popup .popup-foot {display: flex; padding: 0 40px; height: var(--foot-height); justify-content: space-between; align-items: center; font-size: 16px;}
.main-popup .popup-foot label {font-size: 1em; color: #555; font-weight: 500; display: flex; align-items: center; gap: 0.9em; flex-shrink: 0;}
.main-popup .popup-foot label input[type="checkbox"] {width: 22px; height: 22px; border-color: #555; border-radius: 3px;}
.main-popup .popup-foot label input[type="checkbox"]:checked {border-color: var(--primary);}
.main-popup .popup-foot .button {height: 37px; font-size: 1em; padding: 0 30px; font-weight: 700; margin-left: auto;}

@media screen and (max-width:768px){
  .main-popup {left: 50% !important; top: 50% !important; transform:translate(-50%,-50%); height: auto !important; --foot-height:56px; border-radius: 10px; }
  .main-popup .popup-body {height: auto;}

  .main-popup .popup-foot {padding: 0 16px; font-size: 14px;}
  .main-popup .popup-foot .button {height: 32px; padding: 0 24px; }
}


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