/* =========================
HERO
========================= */




/* 히어로 섹션 */
.led-hero{
  width:100%;
}




/* 배경 영역 */
.led-hero__bg{
  position:relative;
  height:816px;
  overflow:hidden;




  display:flex;
  align-items:center;
  justify-content:center;




  /* 배경이미지 */
  background:url("/default/img/sub-led_main.jpg") center/cover no-repeat;
}




/* 딤 */
.led-hero__dim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}




/* 텍스트 영역 */
.led-hero__inner{
  position:relative;
  z-index:2;




  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;




  display:flex;
  justify-content:center;
}




/* 카드 */
.led-hero__card{
  text-align:center;
  color:#fff;
}




/* 타이틀 */
.led-hero__title{
  margin:0 0 14px;




  font-size:42px;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.2;




  word-break:keep-all;
}




/* 설명 */
.led-hero__desc{
  margin:0;




  font-size:18px;
  line-height:1.8;
  opacity:.92;




  word-break:keep-all;
}






/* =========================
TABLET
========================= */
@media (max-width:768px){
  .led-hero__bg{

    height:340px; 
    background-position: center;
  }
  .led-hero__title{
    font-size:28px; 
    line-height:1.3;
    margin:0 0 12px;
  }
  .led-hero__desc{
    font-size:15px;
    line-height:1.6;
  }
}




/* =========================
MOBILE
========================= */
@media (max-width:480px){
  .led-hero__bg{

    height:280px; 
  }
  .led-hero__title{
    font-size:24px; 
    line-height:1.35;
  }
  .led-hero__desc{
    font-size:13px; 
    line-height:1.6;
    padding: 0 10px; 
  }
}




/* =========================
PC/MOBILE 줄바꿈 강제 
========================= */
.sub-renew .pc-only{ display:block; }
.sub-renew .m-only{ display:none; }




/* 모바일에서만 반대로 */
@media (max-width:768px){
  .sub-renew   .pc-only{ display:none; }
  .sub-renew   .m-only{ display:block; }
}



/* =========================
SERVICE HERO
========================= */
.hero-service .led-hero__bg{
background:url("/default/img/service_main.jpg") center/cover no-repeat;
}




/* =========================
GREETING HERO
========================= */
.hero-greeting .led-hero__bg{
background:url("/default/img/greeting_main.jpg") center/cover no-repeat;
}




/* =========================
OVERVIEW HERO
========================= */
.hero-overview .led-hero__bg{
background:url("/default/img/overview_main.jpg") center/cover no-repeat;
}






/* =========================
   ADVANTAGES (STICKY SCROLL)
========================= */


/* 스크롤 트랙 */
#advantages-scroll-section{
  height:400vh;
  position:relative;
  background-color:#fff;
  font-family:'Pretendard', sans-serif;
}


/* 화면에 고정되는 컨테이너 */
.advantages-container{
  position:sticky;
  top:0;
  height:100vh;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  overflow:hidden;
}


/* 좌측 텍스트 영역 */
.advantages-text-column{
  width:50%;
  position:relative;
  padding-right:50px;
  margin-top:80px;
}


/* 상단 카테고리 */
.advantage-category{
  font-family:'Rajdhani', sans-serif;
  display:inline-block;
  font-size:21px;
  font-weight:400;
  color:#0b1bd3;
  margin-bottom:150px;
  position:relative;
  padding-top:8px;
  letter-spacing:1px;
}


.advantage-category::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:15px;
  height:1px;
  background-color:#0b1bd3;
}


/* 텍스트 래퍼 */
.text-block-wrapper{
  position:relative;
  height:200px;
}


/* 텍스트 아이템 */
.advantage-text-item{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:all 0.5s ease;
}


.advantage-text-item.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}


/* 메인 타이틀 */
.advantage-title{
  font-family:'Rajdhani', sans-serif;
  font-size:45px;
  font-weight:300;
  margin:0 0 10px;
  letter-spacing:2px;
  display:inline-block;
  line-height:1.2;
  padding-bottom:5px;
  background:linear-gradient(to right, #00b4db, #0b1bd3);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}


/* 설명 텍스트 */
.advantage-description{
  font-family:'Pretendard', sans-serif;
  font-size:32px;
  font-weight:300;
  line-height:1.5;
  color:#000;
  word-break:keep-all;
  margin:0;
}


.advantage-description strong{
  font-weight:600;
  color:#000;
}


/* 우측 이미지 영역 */
.advantages-image-column{
  width:50%;
  position:relative;
  height:500px;
  margin-top:80px;
}


.image-block{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(100px);
  transition:all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.image-block.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  z-index:2;
}


.image-block img{
  max-width:100%;
  height:auto;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}


/* sticky 깨짐 방지 */
body,
#wraper,
#container,
.content,
.sub-cont-wrap,
.sub-renew,
.sub-led{
  overflow:visible !important;
  overflow-x:clip !important;
}


/* =========================
   MOBILE
========================= */
@media (max-width:768px){
  #advantages-scroll-section{
    height:auto !important;
    padding:60px 20px;
    display:flex;
    flex-direction:column;
  }


  .advantages-container,
  .advantages-text-column,
  .text-block-wrapper,
  .advantages-image-column{
    display:contents;
  }


  .advantages-text-column,
  .advantages-image-column{
    width:100%;
    height:auto;
    padding:0;
    margin-top:0;
  }


  .advantage-category{
    order:1;
    margin-bottom:60px;
  }


  .advantage-text-item,
  .image-block{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    height:auto !important;
  }


  .advantage-text-item:nth-child(1){
    order:2;
  }


  .image-block:nth-child(1){
    order:3;
    width:80%;
    margin:0 0 40px auto;
  }


  .advantage-text-item:nth-child(2){
    order:4;
  }


  .image-block:nth-child(2){
    order:5;
    width:85%;
    margin:0 0 40px auto;
  }


  .advantage-text-item:nth-child(3){
    order:6;
  }


  .image-block:nth-child(3){
    order:7;
    width:100%;
    margin:0 0 0 auto;
  }


  .advantage-title{
    font-size:35px;
    margin-bottom:1px;
  }


  .advantage-description{
    font-size:23px;
    line-height:1.5;
    margin-bottom:1px;
  }


  .image-block img{
    width:100%;
    height:auto;
    display:block;
    border-radius:0;
    box-shadow:0 10px 20px rgba(0,0,0,0.08);
  }
}






/* =========================
   PORTFOLIO SECTION 
========================= */
#portfolio-section {
  background-color: #f7f7f7; 
  padding: 100px 20px;
  font-family: 'Pretendard', sans-serif; 
}




.portfolio-inner {
  max-width: 1200px;
  margin: 0 auto;
}




/* --- 상단: 이미지 4칸 그리드 --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; 
  margin-bottom: 70px;
}




.grid-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1; 
}




.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}





.grid-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%);
  pointer-events: none;
}





.grid-text {
  position: absolute;
  bottom: 25px;
  left: 25px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  z-index: 2;
  letter-spacing: -0.5px;
}






/* --- 하단: 텍스트 & 버튼 (새로운 2단 레이아웃) --- */
.portfolio-info {
  display: flex;
  justify-content: flex-start; 
  align-items: flex-start;

}




/* 왼쪽 구역 (제목+버튼) */
.info-left {
  width: 50%; 
  padding-right: 40px;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}




/* 오른쪽 구역 (상세 설명) */
.info-right {
  width: 50%; 
  max-width: none; 
  text-align: left; 
 padding-left: 60px; 
}




.portfolio-title {
  font-size: 32px;
  font-weight: 700;
  color: #111;
  margin-bottom: 45px; 
  line-height: 1.4;
  letter-spacing: -1px;
}




.info-desc {
  font-size: 18px;
  font-weight: 500;
  color: #3b3b3b;
  line-height: 1.7;
  word-break: keep-all;
  margin-top: 5px; 
}




.info-desc strong {
  font-weight: 700; 
  color: #3b3b3b; 
}




.btn-portfolio {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid #666666;
  border-radius: 5px; 
  color: #666666;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}




.btn-portfolio:hover {
  background-color: #0005d0;
  color: #fff;
  border-color: #0005d0;
}


/* =========================
   OPEN-CLOSE FRAME TITLE
========================= */


.frame-head{
  max-width:1200px;
  margin:0 auto 45px;
  padding:0;
}


/* 특허 뱃지 */
.frame-badge{
  display:block;
  width:fit-content;
  padding:7px 30px;
  border-radius:8px;
  background:#3d2ec9;
  color:#fff;
  font-family:'Pretendard Variable','Pretendard',sans-serif;
  font-size:18px;
  font-weight:600;
  margin-bottom:-10px;
}


/* 영문 타이틀 */
.frame-head h2{
  /* 글자 잘림 방지 */
  line-height:1.5 !important;
  padding:15px 0 !important;
  overflow:visible !important;


  font-family:'Rajdhani', sans-serif;
  font-size:45px;
  font-weight:300;
  letter-spacing:0.1em;
  display:inline-block;
  margin-bottom:-30px;


  background:linear-gradient(to right,#00b4db,#0b1bd3);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* =========================
  모바일 레이아웃 (768px 이하)
========================= */
@media (max-width: 768px) {
  #portfolio-section {
    padding: 60px 20px;
  }




  /* 1. 모바일 그리드 (2줄 x 2칸) */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 50px;
  }
  
  .grid-text {
    font-size: 16px;
    bottom: 15px;
    left: 15px;
  }







  .portfolio-info {
    flex-direction: column; 
    align-items: center; /* 가운데로 모으기 */
    text-align: center; /* 글씨도 가운데 정렬 */
    gap: 30px; 
  }





  .info-left { 
    width: 100%;
    max-width: 100%;
    padding-right: 0; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
  }
  
  .info-right { 
    width: 100%;
    max-width: 100%;
    padding-left: 0; 
    text-align: center; 
    order: 2; 
    margin-bottom: 20px;
  }
  

  .portfolio-title {
    font-size: 28px;
    margin-bottom: 40px;
    text-align: center;
    order: 1; 
  }
  
  .info-desc {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 20px; 
  }
  
  .btn-portfolio { 
    order: 3; 
    align-self: center; 
    margin-bottom: 10px; 
  }
}


/* =========================
   MOBILE TITLE
========================= */


@media (max-width:768px){


.frame-head{
    margin:0 auto 15px;
    padding:0;
    text-align:center;
  }


  .frame-badge{
    font-size:15px;
    padding:6px 14px;
    border-radius:6px;
    display:inline-block;
    margin-bottom:3px;
  }


  .frame-head h2{
    display:block;  
    font-size:34px;
    letter-spacing:0.00em;
    padding:10px 0 !important;
    margin:0;
  }


}


.pc-br{
  display:inline;
}


@media (max-width:768px){
  .pc-br{
    display:none;
  }
}





.info-desc p{
  margin:0;
}


.info-desc p + p{
  margin-top:28px;
}


@media (max-width:768px){


  .info-desc p + p{
    margin-top:18px;
  }


}

/* =========================
   ALADIN LED PARALLAX BANNER
========================= */


#aladin-banner {
  position: relative !important;
  width: 100% !important;
  height: 400px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;



  background-attachment: fixed !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;


  margin: 0 !important;
}




/* =========================
   페이지별 배너 이미지
========================= */


/* LED 페이지 */
.banner-led{
  background-image: url('/default/img/led-banner.jpg') !important;
}


/* SERVICE 페이지 */
.banner-service{
  background-image: url('/default/img/service-banner.jpg') !important;
}


/* GREET 페이지 */
.banner-greet{
  background-image: url('/default/img/greet-banner.jpg') !important;
}


/* GREET 페이지 */
.banner-overview{
  background-image: url('/default/img/overview-banner.jpg') !important;
}












/* 검은색 투명 덮개 */
#aladin-banner .parallax-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0,0,0,0.4) !important;
  z-index: 1 !important;
}








/* 텍스트 정렬 */
#aladin-banner .parallax-inner {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
}








/* 텍스트 스타일 */
#aladin-banner .parallax-text {
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  margin: 0 !important;
}








#aladin-banner .parallax-text strong {
  font-weight: 700 !important;
  display: inline !important;
  margin-top: 10px !important;
}








/* 모바일 (768px 이하) */
@media (max-width: 768px) {


  #aladin-banner {
    height: 300px !important;
    background-attachment: scroll !important;
  }


  #aladin-banner .parallax-text {
    font-size: 20px !important;
  }
}




/* =========================
   TRANSITION BANNER 
========================= */




.banner-maintenance{
  background-image: url('/default/img/maintenance-banner.jpg') !important;
}




/* 높이 변경 (이 섹션만) */
#aladin-banner.banner-transition{
  height: 520px !important;
}






#aladin-banner.banner-transition .transition-inner{
  max-width: 900px;
  padding: 0 20px;
}






#aladin-banner.banner-transition .transition-sub{
  color:#fff;
  font-size:16px;
  line-height:1.8;
  font-weight:400;
  opacity:0.9;
  margin:0 0 18px;
}






#aladin-banner.banner-transition .transition-title{
  color:#fff;
  font-size:44px;
  line-height:1.3;
  font-weight:600;
  margin:0 0 20px;
}






#aladin-banner.banner-transition .transition-desc{
  color:#fff;
  font-size:18px;
  line-height:1.8;
  margin:0 0 20px;
}






#aladin-banner.banner-transition .transition-strong{
  color:#fff;
  font-size:26px;
  line-height:1.5;
  font-weight:700;
}




/* 모바일 */
@media (max-width:768px){


  #aladin-banner.banner-transition{
    height: 360px !important;
  }


  #aladin-banner.banner-transition .transition-title{
    font-size:26px;
  }


  #aladin-banner.banner-transition .transition-desc{
    font-size:15px;
  }


  #aladin-banner.banner-transition .transition-strong{
    font-size:18px;
  }


}





/* =========================
   PROCESS SECTION 
========================= */
#aladin-process {
  background-color: #fff;
  padding: 100px 20px;
  /* 한글 기본 폰트 설정 */
  font-family: 'Pretendard', sans-serif; 
}




.process-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}




/* --- 상단 타이틀 --- */
.process-main-title {
 
  line-height: 1.5 !important; 
  padding: 15px 0 !important; 
  overflow: visible !important;
  
 
  font-family: 'Rajdhani', sans-serif;
  font-size: 45px;
  font-weight: 300;
  letter-spacing: 0.1em;
  display: inline-block;
  background: linear-gradient(to right, #00b4db, #0b1bd3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}





.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
}




.process-arrow img {
  width: 15px;
  height: auto;
}






.process-deco-line {
  display: block;     
  width: 1px;          
  height: 20px;        
  background-color: #000; 
  margin: 15px auto 45px;     
}




/* --- 아이콘 영역 컨테이너 --- */


.process-item-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1250px; 
  margin: 0 auto;
}




.process-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;  
  min-width: 0;
}





/* 아이콘 박스 */
.icon-box {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}





.icon-box svg {
  width: 65px !important; 
  height: 70px !important; 
}






.icon-box img{
  width:90px;
  height:90px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

.process-item:hover .icon-box img{
transform:translateY(-5px);
transition:0.3s;
}


/* --- 텍스트 스타일 --- */
.eng-title {

  font-family: 'Rajdhani', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #0b1bd3; 
  letter-spacing: 0.05em;
  margin-bottom: 25px;
  display: block;
}




.kor-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #373737;
  margin-bottom: 25px;
}




.desc {
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
 font-weight: 400 !important;
  color: #555;
  line-height: 1.7;
  word-break: keep-all;
}







.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;   
  padding-top: 170px !important; 
  flex-shrink: 0;
  width: 40px;  
}




.process-arrow img {
  width: 14px;    
  height: auto;




}




/* =========================
   모바일 레이아웃 (768px 이하)
========================= */
@media (max-width: 768px) {
  #aladin-process { padding: 60px 20px; }




  .process-main-title { font-size: 42px !important; }




  .process-item-wrap {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }




  .process-item {
    width: 100% !important;
    margin-bottom: 50px; /* 단계 사이의 간격 */
  }




  .process-item:last-child { margin-bottom: 0; }




  .pc-only { display: none !important; }
















  /* 모바일 간격 조절 */




  .process-item .icon-box {
    margin-bottom: 7px !important;
  }




    /* 1. 영문 타이틀 */
  .process-item .text-box .eng-title {
    font-size: 28px !important;
    margin-top: 2px !important; 
    margin-bottom: 5px !important; 
  }




  /* 2. 한글 메인 제목 (상담, 자체 제작 등) */
  .process-item .text-box .kor-title { 
    font-size: 22px !important; 
    margin-top: -5px !important;  
    margin-bottom: 15px !important; 
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }




  /* 3. 하단 설명글 */
  .process-item .text-box .desc { 
    font-size: 17px !important; 
    line-height: 1.6 !important;
    margin-top: -10px !important; 
    margin-bottom: 20px !important;
    word-break: keep-all;        
    color: #555;                
  }













.process-item .icon-box svg {
  width: 65px !important;    
  height: 70px !important;   
  fill: #0b1bd3 !important;    
  stroke: #0b1bd3 !important; 
  stroke-width: 2.3px !important; 
  stroke-linecap: round;
  stroke-linejoin: round;
}




/* 아이콘 박스 내부 정렬 확인 */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: transparent; 
}




/* =========================
   ALADIN LED PROCESS
========================= */
#aladin-process{
  background:#fff;
  padding:120px 20px 110px;
  font-family:'Pretendard', sans-serif;
}


.process-inner{
  max-width:1280px;
  margin:0 auto;
  text-align:center;
}


/* 상단 타이틀 */
.process-main-title{
  margin:0;
  font-family:'Rajdhani', sans-serif;
  font-size:58px;
  font-weight:300;
  letter-spacing:0.06em;
  line-height:1.2;
  display:inline-block;
  background:linear-gradient(to right, #00b4db, #2d33ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}


.process-deco-line{
  display:block;
  width:1px;
  height:38px;
  background:#222;
  margin:34px auto 58px;
}


/* 3개 영역 */
.process-item-wrap{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:34px;
}


.process-item{
  flex:0 0 320px;
  max-width:320px;
  text-align:center;
}


.icon-box{
  width:92px;
  height:92px;
  margin:0 auto 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}


.icon-box img{
  max-width:64px;
  max-height:64px;
  display:block;
}


.icon-box svg{
  width:64px !important;
  height:64px !important;
  display:block;
  fill:none !important;
  stroke:#2d33ff !important;
  stroke-width:2.2px !important;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* + 기호 */
.process-plus{
  flex:0 0 60px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:140px;
  font-size:80px;
  font-weight:200;
  line-height:1;
  color:#111;
}


/* 텍스트 */
.eng-title{
  display:block;
  margin:0 0 26px;
  font-family:'Rajdhani', sans-serif;
  font-size:30px;
  font-weight:400;
  letter-spacing:0.01em;
  color:#2d33ff;
  line-height:1.1;
}


.kor-title{
  margin:0 0 22px;
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  color:#222;
}


.desc{
  margin:0;
  font-size:18px;
  font-weight:400;
  line-height:1.7;
  color:#444;
  word-break:keep-all;
}


/* =========================
   TABLET
========================= */
@media (max-width:1024px){
  #aladin-process{
    padding:100px 20px 90px;
  }


  .process-main-title{
    font-size:50px;
  }


  .process-item-wrap{
    gap:22px;
  }


  .process-item{
    flex:1 1 0;
    max-width:none;
  }


  .process-plus{
    flex-basis:32px;
    font-size:52px;
    padding-top:105px;
  }


  .eng-title{
    font-size:27px;
  }


  .kor-title{
    font-size:22px;
  }


  .desc{
    font-size:17px;
  }
}


/* =========================
   MOBILE
========================= */
@media (max-width:768px){
  #aladin-process{
    padding:72px 20px 70px;
  }


  .process-main-title{
    font-size:42px;
    letter-spacing:0.05em;
  }


  .process-deco-line{
    height:26px;
    margin:24px auto 42px;
  }


  .process-item-wrap{
    flex-direction:column;
    align-items:center;
    gap:0;
  }


  .process-item{
    width:100%;
    max-width:340px;
  }


  .process-plus{
    display:none !important;
  }
}


  .icon-box{
    width:82px;
    height:82px;
    margin-bottom:16px;
  }


  .icon-box img{
    max-width:80px;
    max-height:80px;
  }


  .icon-box svg{
    width:56px !important;
    height:56px !important;
  }


  .eng-title{
    font-size:26px;
    margin-bottom:16px;
  }


  .kor-title{
    font-size:21px;
    margin-bottom:14px;
  }


  .desc{
    font-size:17px;
    line-height:1.65;
  }
}


/* =========================
   GREETING LAST SECTION
========================= */


.greeting-last{
  background:#f8f8f8;
  padding:140px 0;
}


.greeting-last__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:70px;
}


.greeting-last__text{
  flex:0 0 44%;
  max-width:520px;
}


.greeting-last__title{
  margin:0 0 36px;
  font-family:'Pretendard', sans-serif;
  font-size:32px;
  font-weight:700;
  line-height:1.55;
  color:#000;
  word-break:keep-all;
}


.greeting-last__desc{
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.65;
  color:#3b3b3b;
  word-break:keep-all;
}


.greeting-last__desc p{
  margin:0 0 34px;
}


.greeting-last__desc p:last-child{
  margin-bottom:0;
}


.greeting-last__sign{
  margin-top:48px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:16px;
}


.greeting-last__ceo{
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:600;
  color:#2b2b2b;
}


.greeting-last__name{
  font-family:'Pretendard', sans-serif;
  font-size:30px;
  font-weight:700;
  color:#000;
  letter-spacing:0.02em;
}


.greeting-last__image{
  flex:0 0 50%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin-top:150px;
}


.greeting-last__image img{
  width:100%;
  max-width:600px;
  height:auto;
  display:block;
}


/* =========================
   TABLET
========================= */
@media (max-width:1024px){
  .greeting-last{
    padding:110px 0;
  }


  .greeting-last__inner{
    gap:40px;
  }


  .greeting-last__title{
    font-size:28px;
  }


  .greeting-last__desc{
    font-size:17px;
    line-height:1.65;
  }


  .greeting-last__name{
    font-size:28px;
  }
}


/* =========================
   MOBILE
========================= */
@media (max-width:768px){
  .greeting-last{
    padding:80px 0;
    text-align:center;
  }


  .greeting-last__inner{
    flex-direction:column;
    align-items:center;
    gap:30px;
  }


  .greeting-last__text{
    flex:none;
    max-width:100%;
  }


  .greeting-last__title{
    font-size:28px;
    line-height:1.45;
    margin-bottom:28px;
  }


  .greeting-last__desc{
    font-size:16px;
    line-height:1.65;
  }


  .greeting-last__desc p{
    margin-bottom:28px;
  }


  .greeting-last__sign{
    margin-top:28px;
    margin-bottom:10px;
    justify-content:center;
    gap:12px;
  }


  .greeting-last__ceo{
    font-size:16px;
  }


  .greeting-last__name{
    font-size:25px;
  }


  .greeting-last__image{
    flex:none;
    width:100%;
    margin-top:10px !important;
  }


  .greeting-last__image img{
    max-width:90%;
    margin:0 auto;
  }
}




/* =========================
COMPANY OVERVIEW
========================= */


.ov-wrap{
  background:#fff;
  position:relative;
}


.ov-stage{
  position:relative;
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
  min-height:500vh; /* 5스텝 */
  box-sizing:border-box;
}


.ov-copy-sticky{
  position:sticky;
  top:160px;
  left:0;
  width:calc(100% - 710px);
  height:calc(100vh - 160px);
  display:flex;
  align-items:center;
  z-index:2;
}


.ov-copy{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease;
}


.ov-copy.active{
  opacity:1;
  visibility:visible;
}


.ov-copy h3{
  margin:0;
  font-size:45px;
  line-height:1.45;
  font-weight:400;
  letter-spacing:-2px;
  color:#000;
  word-break:keep-all;
}


.ov-copy h3 strong{
font-weight:700;
}


.ov-kicker{
  font-family:'Rajdhani', sans-serif;
  font-size:21px;
  font-weight:400;
  letter-spacing:1px;
  color:#0b1bd3;
  margin-bottom:18px;
}

.ov-visual{
  position:sticky;
  top:160px;
  margin-left:auto;
  width:600px;
  height:calc(100vh - 160px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}


.ov-sticky{
  position:relative;
  width:600px;
  height:720px;
}


.ov-photo{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease;
}


.ov-photo.active{
  opacity:1;
  visibility:visible;
}


.ov-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


.ov-photo-1{
  width:540px;
  height:520px;
}


.ov-photo-2{
  width:490px;
  height:680px;
}


.ov-photo-3{
  width:600px;
  height:480px;
}


.ov-triggers{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  pointer-events:none;
}


.ov-trigger{
  height:100vh;
}


.ov-mobile{
  display:none;
}


@media (max-width:1024px){


  .ov-stage{
    display:none;
  }


  .ov-mobile{
    display:block;
    padding:40px 20px 60px;
  }


  .ov-m-item{
    margin-bottom:56px;
  }


  .ov-m-item:last-child{
    margin-bottom:0;
  }


  .ov-m-item .ov-kicker{
    font-family:'Rajdhani', sans-serif;
  font-size:21px;
  font-weight:400;
  letter-spacing:3px;
  color:#0b1bd3;
  margin-bottom:18px;
}





  .ov-m-item h3{
    margin:0 0 24px;
    font-size:26px;
    line-height:1.5;
    font-weight:300;
    letter-spacing:-0.8px;
    color:#222;
    word-break:keep-all;
  }


.ov-m-item h3 strong{
font-weight:700;
color:#000;
}

  .ov-m-photo img{
    display:block;
    width:100%;
    height:auto;
  }


.ov-m-item:nth-child(1) .ov-m-photo{
  margin-left:130px;
  margin-bottom:100px;
  width:calc(100% - 130px);
}


.ov-m-item:nth-child(2) .ov-m-photo{
  margin-left:90px;
  margin-bottom:100px;
  width:calc(100% - 90px);
}


.ov-m-item:nth-child(3) .ov-m-photo{
  margin-left:0px;
  margin-bottom:100px;
  width:calc(100% -0px);
}


.ov-m-item:nth-child(4) .ov-m-photo{
  margin-left:130px;
  margin-bottom:100px;
  width:calc(100% - 130px);
}


.ov-m-item:nth-child(5) .ov-m-photo{
  margin-left:90px;
  margin-bottom:100px;
  width:calc(100% - 90px);
}
}



/* =========================
   DEVELOPMENT
========================= */
.dev-wrap{
  background:#ffffff;
}


/* 상단 타이틀 */
.dev-head{
  max-width:1450px;
  margin:0 auto 60px;
  padding:40px 40px 0;
  box-sizing:border-box;
  text-align:center;
}


.dev-head__icon{
  width:300px;
  margin:0 auto 20px;
}


.dev-head__icon img{
  display:block;
  width:100%;
  height:auto;
}


.dev-head h2{
  margin:0;
  line-height:1.5;
  padding:30px 0;
  overflow:visible;


  font-family:'Rajdhani', sans-serif;
  font-size:45px;
  font-weight:300;
  letter-spacing:0.1em;


  display:inline-block;
  background:linear-gradient(to right,#00b4db,#0b1bd3);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* 공통 */
.dev-photo img,
.dev-m-photo img{
  display:block;
  width:100%;
  height:auto;
}
/* =========================
   PC
========================= */
@media (min-width:1024px){


  .dev-mobile{
    display:none;
  }


 .dev-stage{
    max-width:1450px;
    margin:0 auto;
    padding:0 40px 220px; 
    box-sizing:border-box;
    display:grid;
    grid-template-columns:44% 48%;
    justify-content:space-between;
    align-items:start;
    column-gap:80px;
    position:relative;
    min-height:300vh;
    overflow:visible;
  }
}


  /* 왼쪽 이미지 */
  .dev-visual{
    grid-column:1;
    position:sticky;
    top:140px;
    align-self:start;
    z-index:2;
  }


  /* 이미지 영역 높이 확보 */
  .dev-sticky{
    position:relative;
    width:100%;
    min-height:700px; 
  }


  /* 이미지 fade 효과 */
  .dev-photo{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    transition:opacity .6s ease;
  }


  .dev-photo img{
    display:block;
    width:100%;
    height:auto;
  }


  .dev-photo.active{
    opacity:1;
    z-index:2;
  }


  /* 오른쪽 텍스트 */
  .dev-copy-sticky{
    grid-column:2;
    position:sticky;
    top:350px;
    align-self:start;
    z-index:2;
  }


  /* 텍스트는 바로 교체 */
  .dev-copy{
    display:none;
  }


  .dev-copy.active{
    display:block;
  }



.dev-copy h3{
  margin:0 0 40px;
  font-family:'Pretendard Variable', sans-serif;
  font-size:60px;
  line-height:1.3;
  font-weight:350;
  letter-spacing:-0.02em;
  color:#111;
  word-break:keep-all;
}


.dev-copy p{
  margin:0 0 24px;
  font-family:'Pretendard Variable', sans-serif;
  font-size:23px;
  line-height:1.5;
  font-weight:350;
  color:#3b3b3b;
  word-break:keep-all;
}


/* 본문 강조 */
.dev-copy p strong{
  font-weight:600;
  color:#111;
}


/* 제목 강조 */
.dev-copy h3 strong{
  font-weight:800;
  color:#111;
}


  .dev-copy p:last-child{
    margin-bottom:0;
  }


  /* 스크롤 트리거 */
  .dev-triggers{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    visibility:hidden;
  }


  .dev-trigger{
    height:100vh;
  }
}

/* =========================
   TABLET
========================= */
@media (max-width:1280px) and (min-width:1024px){
  .dev-head{
    margin-bottom:50px;
    padding:70px 30px 0;
  }


  .dev-head__icon{
    width:100px;
  }


  .dev-head h2{
    font-size:36px;
  }


  .dev-stage{
    padding:0 30px 0;
    column-gap:50px;
  }


  /* 위치 보정 */
  .dev-visual{
    margin-top:40px;
  }


  .dev-copy-sticky{
    margin-top:40px;
  }


  .dev-copy h3{
    margin:0 0 28px;
    font-size:58px;
    line-height:1.12;
    letter-spacing:-1px;
  }


  .dev-copy p{
    margin:0 0 18px;
    font-size:22px;
    line-height:1.75;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width:1023px){


  .dev-stage{
    display:none;
  }


  .dev-head{
    margin:0 auto 36px;
    padding:60px 20px 0;
  }


  .dev-head__icon{
    width:230px;
    margin-bottom:14px;
  }


  .dev-head h2{
    font-size:42px;
    letter-spacing:0.5px;
  }


  .dev-mobile{
    padding:0 20px 70px;
  }


  .dev-m-item{
    margin-bottom:56px;
  }


  .dev-m-item:last-child{
    margin-bottom:0;
  }


  .dev-m-photo{
    margin-bottom:22px;
  }


  .dev-m-copy h3{
    margin:0 0 20px;
    font-size:42px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:-1px;
    color:#111;
    word-break:keep-all;
  }


  .dev-m-copy p{
    margin:0 0 16px;
    font-size:17px;
    line-height:1.5;
    font-weight:500;
    color:#444;
    word-break:keep-all;
  }


  .dev-m-copy p:last-child{
    margin-bottom:0;
  }
}




/* =========================
ORGANIZATION
========================= */


.org-section{
  background:#f8f8f8;
  padding:160px 0 140px;
}


.org-inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}


.org-head{
  text-align:center;
  margin-bottom:70px;
}


.org-head h2{
  margin:0;
  font-family:'Rajdhani', sans-serif !important;
  font-size:55px;
  font-weight:300;
  line-height:1.2;
  letter-spacing:1px;
  background:linear-gradient(to right,#00b4db,#0000ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  padding:3px 0;
}


.org-line{
  display:block;
  width:1px;
  height:42px;
  background:#222;
  margin:26px auto 0;
}


.org-chart{
  text-align:center;
}


.org-chart img{
  display:inline-block;
  max-width:100%;
  height:auto;
}


/* =========================
TABLET
========================= */
@media (max-width:1024px){
  .org-section{
    padding:120px 0 100px;
  }


  .org-head{
    margin-bottom:56px;
  }


  .org-head h2{
    font-size:46px;
  }


  .org-line{
    height:34px;
    margin-top:22px;
  }
}


/* =========================
MOBILE
========================= */
@media (max-width:768px){
  .org-section{
    padding:90px 0 80px;
  }


  .org-inner{
    padding:0 20px;
  }


  .org-head{
    text-align:center;
    margin-bottom:40px;
  }


  .org-head h2{
    font-size:32px;
    line-height:1.15;
    letter-spacing:1px;
    padding:2px 0;
  }


  .org-line{
    width:1px;
    height:26px;
    margin:18px auto 0;
  }


  .org-chart{
    text-align:center;
  }


  .org-chart img{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
  }
}


@media (max-width:768px){


  .org-scroll{
    overflow-x:auto;
  }


  .org-scroll img{
    width:700px;
    max-width:none;
  }
}







.led-intro{
  padding:180px 20px 160px;
  background:#fff;
  border-top:1px solid #eee;
}


.led-intro__inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:80px;
}


.led-intro__img{
  flex:0 0 420px;
}


.led-intro__img img{
  width:100%;
  border-radius:50%;
  object-fit:cover;
}


.led-intro__text{
  flex:1;
  max-width:560px;
}


.led-intro__text h2{
  font-size:42px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.02em;
  color:#111;
  margin-bottom:26px;
}


.led-intro__text p{
  font-size:18px;
  line-height:1.9;
  color:##373737;
  margin-bottom:14px;
}


.circle-wrap{
  position:relative;
  width:500px;
  height:500px;
  margin:auto;
}


.circle-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.15),
    0 10px 20px rgba(0,0,0,0.08);
}


.circle-blur{
  position:absolute;
  left:-30px;
  bottom:20px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:#fff;
  opacity:0.4;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}




@media (max-width:768px){


  .led-intro{
    padding:80px 20px;
  }


  .led-intro__inner{
    flex-direction:column;
    gap:36px;
  }


  .led-intro__img{
    flex:none;
    width:100%;
  }


  .circle-wrap{
    width:280px;
    height:280px;
  }


  .led-intro__text{
    width:100%;
    max-width:none;
    text-align:center;
  }


  .led-intro__text h2{
    font-size:28px;
    line-height:1.4;
    margin-bottom:18px;
  }


  .led-intro__text p{
    font-size:15px;
    line-height:1.8;
    margin-bottom:10px;
  }
}


/* =========================
   LED TYPE SECTION
========================= */
.led-type-section{
  padding:110px 0 120px;
  background:#f8f8f8;
}


.led-type-inner{
  width:min(1100px, calc(100% - 80px));
  margin:0 auto;
}


.led-type-head{
  text-align:center;
  margin-bottom:52px;
}


.led-type-head h2{
  margin:0 0 14px;
  font-size:46px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.03em;
  color:#111;
}


.led-type-head p{
  margin:0;
  font-size:18px;
  line-height:1.7;
  color:#373737;
  word-break:keep-all;
}


.led-type-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}


.led-type-card{
  display:block;
  background:#fff;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  border-radius:16px;
  overflow:hidden;
}


.led-type-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,0.08);
}


.led-type-thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:2 / 1;
  background:#ddd;
}


.led-type-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}


.led-type-card:hover .led-type-thumb img{
  transform:scale(1.04);
}


.led-type-info{
  padding:22px 22px 24px;
}


.led-type-info strong{
  display:block;
  margin-bottom:8px;
  font-size:28px;
  font-weight:700;
  line-height:1.3;
  color:#111;
}


.led-type-info span{
  display:block;
  font-size:16px;
  line-height:1.65;
  color:#666;
  word-break:keep-all;
}


/* tablet */
@media (max-width:1024px){
  .led-type-section{
    padding:90px 0 100px;
  }


  .led-type-inner{
    width:calc(100% - 48px);
  }


  .led-type-head h2{
    font-size:38px;
  }


  .led-type-head p{
    font-size:17px;
  }


  .led-type-info strong{
    font-size:24px;
  }
}


/* mobile */
@media (max-width:768px){
  .led-type-section{
    padding:75px 0 80px;
  }


  .led-type-inner{
    width:calc(100% - 32px);
  }


  .led-type-head{
    margin-bottom:34px;
  }


  .led-type-head h2{
    font-size:29px;
    line-height:1.35;
  }


  .led-type-head p{
    font-size:15px;
    line-height:1.7;
  }


  .led-type-grid{
  grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }


  .led-type-info{
    padding:18px 18px 20px;
  }


  .led-type-info strong{
    font-size:16px;
    margin-bottom:7px;
  }


  .led-type-info span{
    font-size:13px;
    line-height:1.5;
  }


  .led-type-thumb{
    aspect-ratio: 1 / 0.9;
  }
}







/* =========================
   MODULE SECTION
========================= */


.sec-module-intro{
  padding:120px 20px;
  background:#f7f7f7;
}


.module-inner{
  max-width:1280px;
  margin:0 auto;
}


/* ---------- 상단 타이틀 ---------- */
.module-head{
  text-align:center;
  margin:0 0 100px;
}


.module-label{
  font-family:'Rajdhani', sans-serif;
  font-size:45px;
  font-weight:300;
  letter-spacing:0.1em;
  line-height:1.5;
  padding:15px 0;
  display:inline-block;
  background:linear-gradient(to right, #00b4db, #0b1bd3);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}


.module-head h2{
  font-size:42px;
  line-height:1.2;
  font-weight:300;
  color:#111;
  margin:0 0 10px;
}


.module-head h2 strong{
  font-weight:700;
}


.module-head-desc{
  font-size:18px;
  line-height:1.8;
  color:#373737;
  margin:0;
}


/* =========================
   공통 2열 블록
========================= */


.module-hero,
.module-info-block{
  display:flex;
  align-items:flex-end;
  gap:40px;
  margin:0 auto 150px;
  max-width:1080px;
}


.module-info-block.reverse{
  flex-direction:row-reverse;
}


/* 텍스트 */
.module-hero-text,
.module-info-text{
  flex:0 0 48%;
}


/* 이미지 */
.module-hero-image,
.module-info-image{
  flex:0 0 44%;
}


/* 이미지 스타일 */
.module-hero-image img,
.module-info-image img,
.module-wide-image img{
  width:100%;
  max-height:400px;
  object-fit:cover;
  display:block;
  border-radius:0;
}


/* 제목 */
.module-hero-text h3,
.module-info-text h3,
.module-wide-head h3,
.module-distance-block h3{
  font-size:32px;
  line-height:1.35;
  color:#111;
  margin:0 0 40px;
  font-weight:700;
}


/* 본문 */
.module-hero-text p,
.module-info-text p,
.module-wide-head p,
.module-wide-desc{
  font-size:18px;
  line-height:1.9;
  color:#373737;
  margin:0 0 16px;
}


/* 작은 타이틀 공통 */
.module-info-text .module-info-kicker,
.module-wide-head .module-info-kicker,
.module-distance-block .module-info-kicker{
  font-family:'Rajdhani', sans-serif;
  display:inline-block;
  font-size:18px;
  font-weight:400;
  color:#0b1bd3;
  margin:0 0 12px;
  letter-spacing:1px;
  text-transform:uppercase;
}



/* =========================
   VIEWING DISTANCE (비교형)
========================= */


.module-distance-block{
  max-width:1080px;
  margin:0 auto 150px;
  text-align:center;
}


.module-distance-compare{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin:40px 0 30px;
}


.distance-card{
  position:relative;
  overflow:hidden;
}


.distance-card img{
  width:100%;
  display:block;
  border-radius:0;
}


.distance-label{
  position:absolute;
  top:14px;
  left:14px;
  display:inline-block;


  font-family:'Rajdhani', sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:0.06em;
  color:#fff;


  background:rgba(0,0,0,0.55);
  padding:6px 12px;
  line-height:1;
}


.module-distance-desc p{
  font-size:18px;
  line-height:1.8;
  color:#373737;
  margin:0 0 8px;
}


.module-distance-desc .red{
  color:#ff3b30;
  font-weight:600;
}


.module-distance-desc .blue{
  color:#2563eb;
  font-weight:600;
}


/* =========================
   와이드 블록 (큰 이미지)
========================= */


.module-wide-block{
  padding:80px 70px;
  background:#fff;
  border-radius:32px;
  margin:0 auto 100px;
  max-width:1080px;
}


.module-wide-head{
  text-align:center;
  margin:0 0 40px;
}


.module-wide-desc{
  text-align:center;
  margin:30px 0 0;
}


/* =========================
   브릿지 & 버튼
========================= */


.module-bridge{
  text-align:center;
  margin:0 0 40px;
}


.module-bridge p{
  font-size:30px;
  line-height:1.6;
  font-weight:600;
  color:#111;
  margin:0;
}


.module-btn-wrap{
  text-align:center;
}


.module-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  height:60px;
  padding:0 32px;
  border:1px solid #111;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  color:#111;
  text-decoration:none;
  transition:all .3s ease;
}


.module-btn:hover{
  background:#111;
  color:#fff;
}







.frame-intro{
  padding:120px 20px 40px;
  text-align:center;
}


.frame-intro .frame-sub{
  font-size:16px;
  color:#888;
  margin-bottom:16px;
}


.frame-intro .frame-title{
  font-size:42px;
  font-weight:600;
  line-height:1.4;
}


.frame-section{
  padding:120px 20px;
  max-width:1200px;
  margin:0 auto;
}


.frame-head{
  text-align:center;
  margin-bottom:60px;
}


.frame-badge{
  display:block;
  width:fit-content;
  margin:0 auto 18px;
  background:#4f46e5;
  color:#fff;
  padding:6px 14px;
  border-radius:6px;
  font-size:13px;
}


.frame-head h2{
  font-size:45px;
  letter-spacing:0.1em;
  margin:0;
}


.frame-lead{
  margin-top:18px;
  color:#666;
  font-size:18px;
  line-height:1.6;
}


/* 비교 */
.frame-compare{
  display:flex;
  gap:20px;
  margin-bottom:60px;
}


.compare-item{
  flex:1;
  padding:30px;
  border:1px solid #eee;
  text-align:center;
  border-radius:16px;
  background:#fff;
}


.compare-item h4{
  margin:0 0 12px;
  font-size:22px;
  color:#111;
}


.compare-item p{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:#666;
  word-break:keep-all;
}


.compare-item.highlight{
  border:2px solid #4f46e5;
}


/* 메인 이미지 */
.frame-main{
  margin-bottom:60px;
}


.frame-main img{
  width:100%;
  display:block;
  border-radius:16px;
}


/* 기존 steps 대신 구조 설명 영역 */
.frame-structure{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:start;
  margin-bottom:80px;
}


.frame-structure__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}


.frame-structure__thumb{
  overflow:hidden;
  border-radius:16px;
  background:#f7f7f7;
}


.frame-structure__thumb:first-child{
  grid-column:1 / -1;
}


.frame-structure__thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


.frame-structure__text{
  display:flex;
  flex-direction:column;
  gap:24px;
}


.structure-copy{
  padding:30px;
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
}


.structure-copy span{
  display:block;
  margin-bottom:10px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.12em;
  color:#4f46e5;
}


.structure-copy h3{
  margin:0 0 12px;
  font-size:28px;
  color:#111;
}


.structure-copy p{
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:#666;
  word-break:keep-all;
}


/* 특허 */
.frame-patent{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-bottom:60px;
  padding:36px;
  border:1px solid #eee;
  border-radius:20px;
  background:#fafafa;
}


.patent-text h3{
  margin:0 0 14px;
  font-size:30px;
  color:#111;
}


.patent-text p{
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:#666;
  word-break:keep-all;
}


.patent-img img{
  width:260px;
  max-width:100%;
  display:block;
}


/* 장점 */
.frame-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  padding:0;
  margin:0;
  list-style:none;
}


.frame-benefits li{
  padding:14px 22px;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
  font-size:15px;
  color:#333;
}


/* 태블릿 */
@media (max-width:991px){
  .frame-section{
    padding:90px 20px;
  }


  .frame-head{
    margin-bottom:45px;
  }


  .frame-head h2{
    font-size:38px;
  }


  .frame-lead{
    font-size:17px;
  }


  .frame-compare{
    flex-direction:column;
    gap:16px;
    margin-bottom:45px;
  }


  .compare-item{
    padding:24px 20px;
  }


  .frame-main{
    margin-bottom:45px;
  }


  .frame-structure{
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:60px;
  }


  .frame-structure__grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }


  .frame-structure__thumb:first-child{
    grid-column:1 / -1;
  }


  .structure-copy{
    padding:24px 20px;
  }


  .structure-copy h3{
    font-size:24px;
  }


  .frame-patent{
    flex-direction:column;
    text-align:center;
    padding:28px 20px;
  }


  .patent-text h3{
    font-size:26px;
  }
}


/* 모바일 */
@media (max-width:768px){
  .frame-intro{
    padding:90px 20px 30px;
  }


  .frame-intro .frame-sub{
    font-size:14px;
    margin-bottom:12px;
  }


  .frame-intro .frame-title{
    font-size:30px;
    line-height:1.45;
  }


  .frame-section{
    padding:70px 16px;
  }


  .frame-head{
    margin-bottom:35px;
  }


  .frame-badge{
    font-size:12px;
    padding:6px 12px;
    border-radius:6px;
    margin-bottom:14px;
  }


  .frame-head h2{
    font-size:30px;
    letter-spacing:0.06em;
    line-height:1.25;
  }


  .frame-lead{
    margin-top:14px;
    font-size:15px;
    line-height:1.7;
  }


  .compare-item h4{
    font-size:19px;
  }


  .compare-item p{
    font-size:15px;
    line-height:1.7;
  }


  .frame-main img{
    border-radius:12px;
  }


  .frame-structure__grid{
    grid-template-columns:1fr;
  }


  .frame-structure__thumb:first-child{
    grid-column:auto;
  }


  .frame-structure__thumb{
    border-radius:12px;
  }


  .structure-copy{
    padding:20px 16px;
    border-radius:12px;
  }


  .structure-copy span{
    font-size:12px;
    margin-bottom:8px;
  }


  .structure-copy h3{
    font-size:21px;
    margin-bottom:10px;
  }


  .structure-copy p{
    font-size:15px;
    line-height:1.75;
  }


  .frame-patent{
    gap:24px;
    margin-bottom:40px;
    padding:22px 16px;
    border-radius:14px;
  }


  .patent-text h3{
    font-size:22px;
    margin-bottom:10px;
  }


  .patent-text p{
    font-size:15px;
    line-height:1.75;
  }


  .patent-img img{
    width:200px;
  }


  .frame-benefits{
    gap:10px;
  }


  .frame-benefits li{
    width:100%;
    text-align:center;
    padding:13px 16px;
    font-size:14px;
    border-radius:10px;
  }
}



/* 전체 */
.portfolio-contact{
  padding:100px 20px;
  background:#f8f8f8;
}


/* 타이틀 */
.pc-head{
  text-align:center;
  margin-bottom:60px;
}


.pc-head h2{
  font-size:38px;
  font-weight:600;
  margin-bottom:15px;
}


.pc-head p{
  font-size:18px;
  line-height:1.6;
  color:#555;
}


/* 이미지 */
.pc-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0; 
  max-width:1200px;
  margin:0 auto 40px;
}


.pc-item{

  position:relative;
  overflow:hidden;
  height:320px; /* ← 이 값으로 길이 조절 */
}


.pc-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.4s;
}


/* 하단 텍스트 */
.pc-item span{
  position:absolute;
  left:20px;
  bottom:20px;
  color:#fff;
  font-size:15px;
  font-weight:500;
  z-index:2;
}


/* 살짝 어둡게 */
.pc-item::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}


/* hover */
.pc-item:hover img{
  transform:scale(1.05);
}


/* 버튼 */
.pc-btns{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:flex-end;
  gap:15px;
}


/* 버튼 스타일 */
.btn-line{
  padding:12px 26px;
  border:1px solid #000;
  background:#fff;
  color:#000;
}


.btn-fill{
  padding:12px 26px;
  background:#000;
  color:#fff;
}




@media (max-width: 768px){
  .frame-intro{
    padding: 70px 20px 30px !important;
    text-align: center;
  }




  .frame-intro .inner{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
  }


  .frame-intro .frame-sub{
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    word-break: keep-all;
  }


  .frame-intro .frame-title{
    font-size: 24px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 0 auto !important;
    max-width: 320px !important;
    width: 100%;
    word-break: keep-all;
  }


  .dev-head{
    padding: 30px 20px 0 !important;
    margin: 0 auto !important;
  }


  .dev-head h2{
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 auto !important;
  }
}