@charset "utf-8";

#header{background:transparent;} 

.sec-com{padding:var(--gap-lg) 0;}
.sec-com .tit-eng{font-size:26px;font-weight:600;line-height:1.3;color:var(--main);}
 
.main-more-btn{display:flex;position:relative;width:fit-content;font-size:var(--font16);font-weight:500;color:var(--bk);font-family: 'Montserrat';line-height:1;align-items: center; gap:5px;}
.main-more-btn::after{content:'';display:block;width:35px;height:35px;background:url(../img/common/ico_more_bk.svg) no-repeat center center / cover;}
.main-more-btn.wh{color:#fff;}
.main-more-btn.wh::after{background:url(../img/common/ico_more_cl.svg) no-repeat center center / cover;}

.visual{width:100%;height:100vh;position:relative;}
.visual .swiper-slide.s1{background:url(../img/main/visual_1.jpg) no-repeat center center / cover;}
.visual .swiper-slide.s2{background:url(../img/main/visual_2.jpg) no-repeat center center / cover;}
.visual .swiper-slide.s3{background:url(../img/main/visual_3.jpg) no-repeat center center / cover;}
.visual .swiper-slide.s4{background:url(../img/main/visual_4.jpg) no-repeat center center / cover;}
.visual .swiper-slide.s5{background:url(../img/main/visual_5.jpg) no-repeat center center / cover;}
.visual .swiper-slide.s6{background:url(../img/main/visual_6.jpg) no-repeat center center / cover;}
.visual .visual-bt{position:absolute;bottom:100px;left:50%;transform: translateX(-50%);z-index:5;}
.visual .swip-txt-wrap .swip-txt{width:max-content;}
.visual .swip-txt-wrap .swip-txt h2 {font-size:60px;font-weight:600;line-height:1.3;}
.visual .swip-txt-wrap .swip-txt p {font-size:28px;line-height:1.3;}
.visual .more-btn{display:inline-block;margin-top:40px;padding-bottom:2px;border-bottom: 1px solid #fff;font-size:var(--font18);font-family: var(--eng1);}

.visual .swip-txt-wrap .txt-con {position: absolute;display: none;}
.visual .prog-bar{position:relative;width:180px;height:4px;background: rgba(255, 255, 255, 0.20);border-radius: 0;}
.visual .prog-bar .bar {
  width: 0%;
  height: 100%;
  transition: width .3s ease;
  background:#fff;
}
.visual .swip-txt-wrap{align-items: flex-end;}
.visual .swiper-pagination-fraction{width:fit-content;font-size:20px;font-family: var(--eng1);}
.visual .swip-contrl{gap:16px;color:#fff;}
.visual .swip-nav{gap:4px;}
.visual .swip-nav>div{cursor:pointer;}



/* .visual .main-visual-swip-page{margin-top:80px;}
.visual .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.visual .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{position:relative;width:80px;height:3px;background: rgba(0, 0, 0, 0.10);border-radius: 0;margin:0 4px;opacity:1 !important;}
.visual .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active, 
.visual .swiper-pagination-bullet .progress-bar {display: block;position: absolute;left: 0;top: 0;height: 100%;width: 0%;background-color: var(--main);}
.visual .white .swiper-pagination-bullet .progress-bar {background-color: #fff;}
.visual .dark .swiper-pagination-bullet .progress-bar {background-color: var(--main);}
.visual .swiper-pagination-bullet .progress-bar.animate {animation: progressFill 5s linear forwards;}

@keyframes progressFill {
  0% { width: 0%; }
  100% { width: 100%; }
} */

#overview .con-tit h3{margin-top:40px;font-size:46px;font-weight:600;line-height:1.3;letter-spacing: -0.92px;}
#overview .con-tit h3 span{font-size:50px;font-weight:700;line-height:1.3;letter-spacing: -1px;font-style:italic;}
#overview .con-txt>p{margin:20px 0 50px;font-size:var(--font18);color:var(--gray-8);line-height:1.5;letter-spacing: -0.36px;}

#overview .con-l,
#overview .con-r{width:calc(50% - 60px);}

#overview .con-r .img-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 685/585;
  overflow: hidden;
}

#overview .bg-swip{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#overview .bg-swip .swiper-wrapper,
#overview .bg-swip .swiper-slide{
  width: 100%;
  height: 100%;
}

/* ✅ 여기! slide에 마스크 */
#overview .bg-swip .swiper-slide{
  -webkit-mask-image: url('../img/main/overview_clip2.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url('../img/main/overview_clip2.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

#overview .s1 { background: url('../img/main/overview_bg1.jpg') center/cover no-repeat; }
#overview .s2 { background: url('../img/main/overview_bg2.jpg') center/cover no-repeat; }
#overview .s3 { background: url('../img/main/overview_bg3.jpg') center/cover no-repeat; }


#portfolio{position:relative;padding:0;}
/*#portfolio .portfolio-bg{display:none;width:100%;height:100%;}
 #portfolio .bg-l{width:40%;height:100%;background:var(--main);}
#portfolio .bg-r{width:60%;height:100%;background:var(--bk);} */
#portfolio .swip-tab>.con-flex-bet{padding-bottom:30px;margin-bottom:30px;border-bottom: 1px solid rgba(255, 255, 255, 0.3);align-items: flex-end;}
#portfolio .con-tit h3{font-size:56px;font-weight:600;}
#portfolio .con-tit p{font-size:28px;line-height:1.3;margin-top:10px;}
#portfolio .portfolio-con{width:100%;height:100%;}
#portfolio .portfolio-con>div{width:100%;height:100%;}

#portfolio .portfolio-con .con-l{display:flex;width:38%;justify-content: space-between;flex-direction: column;padding:var(--gap-lg) var(--gap-lg) var(--gap-lg) calc((100% - 1400px) / 2);background:var(--main);}
#portfolio .portfolio-con .con-r{width:62%;background:var(--bk);overflow:hidden;}
#portfolio .tab-lst li:not(:first-child){margin-top:12px;}
#portfolio .tab-lst a{font-size:var(--font20);color:rgba(255, 255, 255, 0.5);}
#portfolio .tab-lst li.active a{color:#fff;font-weight:600;}

#portfolio .portfolio-group {
  display: none;
}

#portfolio .portfolio-group.active {
  display: block;
}
#portfolio .swip-con{width:100%;height:100%;padding:var(--gap-lg) 120px;}
#portfolio .swip-con .portfolio-group,
#portfolio .swip-con .portfolio-wrap,
#portfolio .swip-con .swip-l-wrap{width:100%;}
/* #portfolio .portfolio-wrap{gap:54px;align-items: flex-start;} */

.swip-l-wrap{position:relative;}
/* .swip-r-wrap{width:288px;} */
/* .swip-r-wrap .con-img{width:100%;aspect-ratio: 288/360;} */

#portfolio .swiper-slide{aspect-ratio: 380/475;}
#portfolio .swiper-slide>a{display:block;position:relative;z-index:5;width:100%;height:100%;}
#portfolio .swiper-slide>a img{width:100% !important;height:100% !important;object-fit: cover;}
#portfolio .swiper-slide>a p{font-size:var(--font16);line-height:1.5;margin-bottom:6px;}
#portfolio .swiper-slide>a h4{font-size:26px;font-weight:600;line-height:1.3;}
#portfolio .swiper-slide .sl-txt{position:absolute;bottom:40px;left:40px;z-index:5;}
#portfolio .swip-l-wrap .swiper-slide>a::before{content:'';display:block;width:100%;height:100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 62.41%, #000 99.11%);position:absolute;top:0;left:0;z-index:1;}

.portfolio-swip-ctrl{
  margin-top:40px;gap:15px;justify-content: flex-end;
}

.portfolio-prog{
  width:180px;
  height:4px;
  background:rgba(255, 255, 255, 0.20);
  position:relative;
}

.portfolio-prog .bar{
  height:100%;
  width:0;
  background:#fff;
  transition:width .4s ease;
}

.portfolio-swip-page{
  width:fit-content;
  font-size:20px;
  font-family: var(--eng1);
    color:#fff;
    font-weight:600;
}

.portfolio-swip-nav{
  display:flex;
  gap:12px;
  cursor:pointer;
}


#mt-portfolio{position:relative;width:100%;}
#mt-portfolio .con-top{margin:0 calc((100% - 1400px) / 2)}
#mt-portfolio .con-tit h3{margin-top:16px;font-size:40px;}
#mt-portfolio .mt-swip-nav{gap:10px;}
#mt-portfolio .mt-swip-nav>div{cursor:pointer;width:46px;height:46px;display:flex;align-items: center;justify-content: center;border:1px solid var(--bk);border-radius: 50%;}
#mt-portfolio .con-top{margin-bottom:50px;align-items: flex-end;}
/* #mt-portfolio .mt-con{padding-left:calc((100% - 1400px) / 2);} */
#mt-portfolio .swiper-slide{width:380px;font-size:26px;}
#mt-portfolio .swiper-slide .con-img{width:100%;aspect-ratio: 280/393;}
#mt-portfolio .swiper-slide h4{margin-top:30px;font-weight:500;}

#mt-portfolio .s1 .con-img{background:url(../img/main/mt_sl_img1.jpg) no-repeat center center / cover;}
#mt-portfolio .s2 .con-img{background:url(../img/main/mt_sl_img2.jpg) no-repeat center center / cover;}
#mt-portfolio .s3 .con-img{background:url(../img/main/mt_sl_img3.jpg) no-repeat center center / cover;}
#mt-portfolio .s4 .con-img{background:url(../img/main/mt_sl_img4.jpg) no-repeat center center / cover;}
#mt-portfolio .s5 .con-img{background:url(../img/main/mt_sl_img5.jpg) no-repeat center center / cover;}
#mt-portfolio .s6 .con-img{background:url(../img/main/mt_sl_img6.jpg) no-repeat center center / cover;}
#mt-portfolio .s7 .con-img{background:url(../img/main/mt_sl_img7.jpg) no-repeat center center / cover;}
#mt-portfolio .s8 .con-img{background:url(../img/main/mt_sl_img8.jpg) no-repeat center center / cover;}

#mt-portfolio .mt-swip-nav>div.swiper-button-disabled{border:1px solid var(--gray-bfb);}
#mt-portfolio .mt-swip-nav>div.swiper-button-disabled path{stroke:var(--gray-bfb);}

#inquiry{position:relative;width:100%;height:380px;background:url(../img/main/inquiry_bg_pc.jpg) no-repeat center center / cover;}
#inquiry .con-tit{margin-bottom:30px;}
#inquiry .con-tit h3{font-size:34px;font-weight:300;}
#inquiry .con-tit h3 span{font-weight:600 !important;}





/******************반응형*******************/


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

  #portfolio .portfolio-con .con-l{padding:var(--gap-lg) var(--gap-lg) var(--gap-lg) 50px;}
  /* #mt-portfolio .mt-con{padding-left:50px;} */
  #mt-portfolio .con-top{margin:0 50px 50px;}
  #portfolio .swip-con{padding: var(--gap-lg) 50px;}

}

@media screen and (min-width:1920px){
  #portfolio .swip-con{display:flex;justify-content: center;}
  #portfolio .portfolio-con .con-l{width:48%;padding: var(--gap-lg) calc(var(--gap-lg) + 50px) var(--gap-lg) calc((100% - 1400px) / 2);}
  #portfolio .portfolio-con .con-r{width:52%;}
}


@media screen and (max-width:1200px){
  #portfolio .swiper-slide{width:60%;}
  #portfolio .swip-con{padding: var(--gap-lg) 0px var(--gap-lg) 50px;}
  .portfolio-swip-ctrl{width:100%;padding-right:20px;}
}


@media screen and (max-width:1024px){
  .visual .swip-txt-wrap .swip-txt h2{font-size:40px;}
  .visual .swip-txt-wrap .swip-txt p{font-size:20px;}
  .visual .swiper-pagination-fraction{font-size:16px;}

  #overview .con-tit h3{font-size:36px;}
  #overview .con-tit h3 span{font-size:45px;}
  #overview .con-l br.pc-only{display:none;}
  #overview .con-l, #overview .con-r{width:calc(50% - 30px);}

  #portfolio .con-tit h3{font-size:45px;}
  #portfolio .con-tit p{font-size:22px;}
  #portfolio .portfolio-con .con-l {padding: var(--gap-lg) 30px var(--gap-lg) 30px;}

  #mt-portfolio .con-tit h3{font-size:35px;}
  #mt-portfolio .swiper-slide{font-size:22px;}
  /* #mt-portfolio .mt-con{padding-left:30px;} */
  #mt-portfolio .con-top{margin:0 30px 50px;}

  #inquiry .con-tit h3{font-size:30px;}

  /* #portfolio .swip-con{height:100%;} */
  .swip-l-wrap{width:90%;}
  .swip-r-wrap{width:50%;}
  /* #portfolio{height:700px;} */
  #portfolio .portfolio-group{width:100%;}
  #portfolio .swip-con{padding: var(--gap-lg) 0px var(--gap-lg) 50px;}
  .portfolio-prog{width:calc(100% - 130px);}
  .portfolio-swip-page{font-size:18px;}
  #portfolio .swiper-slide .sl-txt{bottom:30px;left:20px;}
  #portfolio .swiper-slide>a h4{font-size:20px;}
  #portfolio .swiper-slide>a p{font-size:14px;}
  #portfolio .swiper-slide{min-width:320px;}


}



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

  .main-more-btn img{height:24px;}
  .main-more-btn{font-size:13px;}
  .main-more-btn::after{width:28px;height:28px;}

  .visual .swiper-slide.s1{background:url(../img/main/visual_m_1.jpg) no-repeat center center / cover;}
  .visual .swiper-slide.s2{background:url(../img/main/visual_m_2.jpg) no-repeat center center / cover;}
  .visual .swiper-slide.s3{background:url(../img/main/visual_m_3.jpg) no-repeat center center / cover;}
  .visual .swiper-slide.s4{background:url(../img/main/visual_m_4.jpg) no-repeat center center / cover;}
  .visual .swiper-slide.s5{background:url(../img/main/visual_m_5.jpg) no-repeat center center / cover;}
  .visual .swiper-slide.s6{background:url(../img/main/visual_m_6.jpg) no-repeat center center / cover;}
  .visual .swip-txt-wrap .swip-txt{width:100%;}
  .visual .swip-contrl{width:100%;justify-content: space-between;gap:0;}
  .visual .prog-bar{width:calc(100% - 100px);}
  .visual .swip-txt-wrap{top:auto;transform: translateY(0);bottom:50px;flex-wrap: wrap;gap:30px;}
  .visual .swip-txt-wrap .swip-txt h2{font-size:clamp(25px, 9vw, 30px);}
  .visual .swip-txt-wrap .swip-txt p{font-size:clamp(16px, 3.5vw, 16px);line-height:1.5;}

  .visual .swiper-pagination-fraction{font-size:14px;}
  .visual .visual-bt{bottom:30px;}
  .visual .more-btn{margin-top:20px;}


  #overview .inner{flex-wrap:wrap;gap:40px;}
  #overview .con-l,
  #overview .con-r{width:100%;}
  #overview .con-txt{width:100%;}
  #overview .con-img{width:100%;}
  #overview .con-img-wrap{width:100%;}
  #overview .con-img-wrap .img-wrap{width:100%;}
  #overview .con-img-wrap .img-wrap .img{width:100%;}
  #overview .con-img-wrap .img-wrap .img img{width:100%;}

  #overview .con-tit h3{margin-top:20px;}
  #overview .con-tit h3,
  #overview .con-tit h3 span{font-size:30px;}
  #overview .con-txt>p{margin:20px 0}
  .sec-com .tit-eng{font-size:18px;}
  
  #portfolio{height:auto;}
  #portfolio .tab-lst a{font-size:16px;}
  #portfolio .portfolio-con>div{flex-wrap: wrap;}
  #portfolio .portfolio-con .con-l{width:100%;overflow: hidden;}
  /* #portfolio .portfolio-con .con-r{width:100%;} */
  #portfolio .con-tit h3{font-size:38px;}
  #portfolio .con-tit p{font-size:20px;}
  #portfolio .swip-tab .tab-lst{width:calc(100% + 20px);overflow-x: auto;}
  #portfolio .swip-tab .tab-lst ul{width:max-content;display:flex;gap:16px;}
  #portfolio .swip-tab .tab-lst li{width:auto;}
  #portfolio .swip-tab .tab-lst li a{font-size:14px;}
  #portfolio .swip-tab .tab-lst li.active a{font-size:16px;}
  #portfolio .tab-lst li:not(:first-child){margin-top:0;}

  #mt-portfolio .con-tit h3{font-size:30px;letter-spacing: -0.6px;}
  #mt-portfolio .swiper-slide{width:238px;}
  #mt-portfolio .swiper-slide .con-img{aspect-ratio: 210 / 295;}
  #mt-portfolio .swiper-slide h4{font-size:22px;margin-top:24px;}
  #mt-portfolio  .prog-bar{position:relative;width:calc(100% - 110px);height:4px;background:var(--gray-d);border-radius: 0;}
  #mt-portfolio  .prog-bar .bar {
  width: 0%;
  height: 100%;
  transition: width .3s ease;
  background:var(--bk);
}
#mt-portfolio .mt-swip-nav>div{width:38px;height:38px;}
#mt-portfolio .mt-swip-ctl{margin-top:40px;padding-right:20px;}
#mt-portfolio .mt-con{padding-left:20px;}
#mt-portfolio .con-top{margin:0 20px 50px;}

#inquiry{height:auto;aspect-ratio: 375/420;background:url(../img/main/inquiry_bg_m.jpg) no-repeat center center / cover;}
#inquiry .con-tit h3{font-size:24px;}

#portfolio .swip-con{padding:40px 0px 60px 20px;}
/* #portfolio .portfolio-wrap{gap:16px;} */
/* .swip-l-wrap{width:85%;aspect-ratio: 260/325;}
.swip-r-wrap .con-img{aspect-ratio: 170/213;} */
.swip-r-wrap{width:56%;}
#portfolio .portfolio-con .con-r{width:100%;}
#portfolio .swiper-slide{width:75%;aspect-ratio: 260/325;}
  
}
@media screen and (max-width:500px){
  .visual .swip-txt-wrap .swip-txt p {margin-top: 20px}

}