@charset "utf-8";

/*공통css*/
.left, .right{float:left;}
.page1, .page2, .page3{overflow:hidden;}








/*company*/
.company{width:100%; height:auto;}
.company .left{width:100%; padding-left:45px; padding-right:45px;}
.company .right{width:0%;}

.company .left .mainlogo{ max-width: 95% ; height:auto; display: block; text-align:left; margin-bottom: 5%; }
.company .left h1.tite{margin-left:5px; line-height:50px; font-size:33px;font-weight:700; letter-spacing:-20; color:#422081;text-align:left; }
.company .left p{font-size:33px; color:#000; line-height:50px; letter-spacing:-20; font-weight:400; ;text-align:left;}
.company .left p span{display:block; width:1000px; max-width:98%;}
.company .left li.neo {
  font-size: 80px; /* 기본 글자 크기 */
  padding: 5% 0;
  font-family: 'NanumSquareNeoLight';
  color: #000;
  line-height: 50px;
  letter-spacing: 0;
  font-weight: 400;
  text-align: center;

  display: flex;
  align-items: center; /* 수직 정렬 */
  justify-content: left; /* 중앙 정렬 */
  gap: 50px; /* 텍스트와 이미지 간격 */

}


.scale-container {
  position: relative;
  width: 1920px; /* 기준 너비 */
  height: auto; /* 높이 자동 */
  margin: 0; /* 여백 제거 */
  transform-origin: top left; /* 축소 기준점 */
  transition: transform 0.1s ease; /* 부드러운 전환 */
  overflow: hidden; /* 넘치는 요소 숨기기 */
  max-width: 1920px; /* 1920px 이상에서는 확대 금지 */
}


@media screen and (max-width: 800px) {
  .scale-container {
    transform: none; /* 스케일 해제 */
    width: 100%; /* 브라우저 너비에 맞춤 */
  }

  .company .left li.neo {
    display: block; /* flex 해제 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    font-size: 34px; /* 글자 크기 조정 */
    gap: 20px; /* flex의 간격 해제 */
    line-height: 1.5; /* 자연스러운 줄 간격 */
  }

  .company .left li.neo img {
    display: inline-block; /* 텍스트와 이미지를 같은 줄에 */
    margin-right: 5px; /* 이미지 간격 */
    width: 24px; /* 이미지 크기 조정 */
    height: 24px; /* 이미지 크기 조정 */
  }
}







/*button*/
.company .left button{width:184px; height:52px; border:solid 1px #333; color:#333; text-align:left; font-size:16px; background:#fff; text-indent:27px; font-family: "Noto Sans KR", sans-serif !important;}
.company .left button{display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0);  transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.company .left button::before{content: ""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background: #444; -webkit-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s; transition-durat}

.company .left button:hover, .company .left button:focus, .company .left button:active {color:#fff; border:solid 1px #ddd;}
.company .left button:hover:before, .company .left button:focus:before, .company .left button:active:before {-webkit-transform: scaleX(1);  transform: scaleX(1);}

.company .right{position:relative;}
.company .right:after{content:""; display:block; width:px; height:339px; position:absolute; top:0; left:0; background:url("/images/img/cont1-company.jpg")no-repeat; background-size:cover;}







/*project-box*/
.project-box{width:100%; height:auto; padding: 1% 0; overflow:hidden; background-color:#fff; }
.project-box .wrap{ display: flex; flex-wrap: wrap;height:auto;  padding-left:25px; padding-right:25px;  box-sizing:border-box;}
.project-box h2.tite{font-size:24px; margin-bottom:13px; letter-spacing:0px; margin-left:20px;  }

.project-box .left{position:relative; width:50%; }
.project-box .right{position:relative; width:50%; } 

.scale-container2 {
  position: relative;
  width: 1920px; /* 기준 너비 */
  height: auto;
  margin: 0 auto;
  transform-origin: top left;
  transition: transform 0.3s ease; /* 부드러운 스케일 변화 */
  overflow: hidden; /* 넘치는 내용 숨기기 */
}

@media screen and (max-width: 1024px) {
  .scale-container2 {
    width: 100%; /* 1024px 이하에서는 브라우저 너비에 맞춤 */
    transform: none; /* 스케일링 해제 */
  }
}



/*intro*/
.intro{width:100%; height:auto; padding: 10% 0; overflow:hidden; background-color:#fff; }
.intro .wrap{padding-left:45px; padding-right:45px;  box-sizing:border-box;}
.intro .left{width:50%;}
.intro .right{width:50%;}

.intro .right{position:relative;}
.intro .right{padding:20px 0; text-align: left;}
.intro .right h1.tite{font-size:51px; font-weight:700; letter-spacing:-20; color:#422081;text-align:left; }
.intro .right h5.tite{font-size:50px; font-weight:700; padding:20px 0 ; letter-spacing:-20; color:#422081;text-align:left; }
.intro .right p.tite{font-size:33px; color:#422081; font-weight:700; line-height:50px; letter-spacing:-0.5px;}
.intro .right p{font-size:33px; color:#000; padding:10px 0 ; line-height:50px; letter-spacing:-1px;}
.intro .right p span{display:block; }




/* 기본 버튼 스타일 */
.intro .right button { z-index:1000; width: 150px; height: 70px; border: solid 0px #333; color: #333; text-align: center; font-size: 19px; background: #efefef; border-radius: 35px; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }

/* 가상 요소 스타일 */
.intro .right button::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #444; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; border-radius: 35px; }

/* 마우스 오버, 포커스, 클릭 시 스타일 */
.intro .right button:hover, .intro .right button:focus, .intro .right button:active { color: #fff; border: solid 0px #ddd; }
.intro .right button:hover::before, .intro .right button:focus::before, .intro .right button:active::before { -webkit-transform: scaleX(1); transform: scaleX(1); border-radius: 35px; }

/* scale-container 스타일 */
.scale-container1 { position: relative; transform-origin: top left; transition: transform 0.1s ease, width 0.1s ease; width: 100%; max-width: 1920px; }

/* li.neo 기본 스타일 */
.intro li.neo { font-size: 80px; padding: 5% 0; font-family: 'NanumSquareNeoLight'; color: #000; line-height: 50px; letter-spacing: 0; font-weight: 400; text-align: center; display: flex; align-items: center; justify-content: left; gap: 50px; }

/* 반응형 스타일 */
@media screen and (max-width: 800px) {
  .scale-container1 { transform: none; width: 100%; }
  .intro li.neo { display: block; text-align: left; font-size: 34px; gap: 20px; line-height: 1.5; }
  .intro li.neo img { display: inline-block; margin-right: 5px; width: 24px; height: 24px; }
}

/* m-video 스타일 */
.m-video { position: relative; width: 100%; height: auto; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.m-video .wrap { padding-left: 35px; padding-right: 35px; position: relative; max-width: 1920px; margin: 0 auto; }
.m-video .mv { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: #efefef; }
.m-video .mv video { position: relative; width: 100%; height: 100%; object-fit: fill; }

/* 텍스트 박스 스타일 */
.m-video .text-box { width: 100%; position: relative; max-width: 1220px; padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
.m-video .text-box p { font-size: 33px; margin-top: 80px; line-height: 1.4; color: #000; text-align: left; }




/* 하단최신글 */


.latest-box{width:100%; height:auto; margin: 50px 0; overflow:hidden; background-color:#fff; }
.latest-box .wrap{ display: flex; flex-wrap: wrap;height:auto;  padding-left:15px; padding-right:15px;  box-sizing:border-box;}





/* 하단최신글 */


@media all and (max-width:1780px) {

.intro .left{width:40%;}
.intro .right{width:60%;}
}



@media all and (max-width:1600px) {

.intro .left{width:35%;}
.intro .right{width:65%;}

.intro .right h1.tite{font-size:42px;  }
.intro .right h5.tite{font-size:40px; }
.intro .right p.tite{font-size:28px; }
.intro .right p{font-size:28px; }
}



/*S:max-width:1200*/
@media all and (max-width:1280px) {

.company .left{padding-top:100px; }
.company .left h1.tite{font-size:30px;; }
.company .left p{font-size:28px;  }


.intro .wrap{padding-left:35px; padding-right:35px;  box-sizing:border-box;}
.intro .left{width:30%;}
.intro .right{width:70%;}
.intro .right h1.tite{font-size:38px;  }
.intro .right h5.tite{font-size:36px; }
.intro .right p.tite{font-size:26px; line-height:36px;}
.intro .right p{font-size:26px; line-height:36px;}

.m-video .text-box p {
    font-size: 28px;
    margin-top: 50px;
    line-height: 1.3;
}

}



/*S:max-width:1024*/
@media all and (max-width:1120px) {
.intro .wrap{padding-left:25px; padding-right:25px;  box-sizing:border-box;}
.intro .left{width:28%;}
.intro .right{width:72%;}



}


/*S:max-width:1024*/
@media all and (max-width:1024px) {
.wrap{width:100%;}


.company .left{padding:6% 0 6% 4%; box-sizing:border-box;}


.project-box .left{width:100%; float:none; }
.project-box .right{width:100%; float:none; }


.intro .left{width:0%;}
.intro .right{width:100%; padding:2%; }
.intro .right h1.tite{font-size:35px;  }
.intro .right h5.tite{font-size:33px; }
.intro .right p.tite{font-size:24px; line-height:33px;}
.intro .right p{font-size:24px; line-height:33px;}
.intro .right button {
    width: 130px;
    height: 50px;
    font-size: 16px;
}


/* 텍스트 박스 스타일 */
.m-video .text-box {
    padding-left: 0px; /* 좌우 여백 */
    padding-right: 0px; /* 좌우 여백 */
}
.m-video .text-box p {
    font-size: 26px;
    margin-top: 50px;
}

}
/*E:max-width:1024*/

/*S:max-width:800*/
@media all and (max-width:800px){
.company .left h1.tite{font-size:27px;; }


/*page02*/
.company{height:auto;}



/*page03*/
.intro .right h1.tite{font-size:34px;  }
.intro .right h5.tite{font-size:32px; }
.intro .right p.tite{font-size:22px; line-height:31px;}
.intro .right p{font-size:22px; line-height:31px;}


}
/*E:max-width:800*/

/*S:max-width:650*/
@media all and (max-width:650px){
.intro .right p{font-size:20px; }


.m-video .wrap{ padding-left:15px; padding-right:15px; position: relative;} 
video{width:auto;}

.m-video .text-box p {
    font-size: 20px;
    margin-top: 30px;
}

/*page02*/
.company{height:auto;}
.company .left{width:100%; float:none; padding:7% 4%;}
.company .left h1.tite{font-size:24px; }
.company .left p{font-size:20px; line-height: 27px; }

.company .right{display:none;}
.company .right:after{display:none;}



/*page03*/
.intro .wrap{padding-left:15px; padding-right:15px;  box-sizing:border-box;}
.intro .right{padding:0%; }
.intro .right h1.tite{font-size:30px;  }
.intro .right h5.tite{font-size:28px; }
.intro .right p.tite{font-size:20px; line-height:31px;}
.intro .right p{font-size:20px; line-height:31px;}


.project-box .wrap{padding:6% 0;}

h2.tite{font-size:24px;}


}
/*E:max-width:650*/

/*S:max-width:375*/
@media all and (max-width:375px){




/*page02*/

.company .left button{width:170px; height:45px; font-size:14px;}
.company .left h1.tite{font-size:20px; }
.company .left p{font-size:18px; line-height: 27px; }




}
/*E:max-width:375*/

/*S:max-width:320*/
@media all and (max-width:320px){






h2.tite{font-size:20px;}



}
/*E:max-width:320*/