@charset "utf-8";

/* =========================== PAGE */
.pagecommon{position:relative;padding-bottom:100px;font-size:15px;line-height:1.5;color:#f77e01}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:var(--mainsize);margin:0 auto}

#about>div+div{margin-top:200px}
#about .s_tit span{font-size:20px;font-weight:700;font-family:'poppin'}
#about .s_tit h2{margin-top:50px;font-size:35px;font-weight:700;line-height:1.3;white-space:pre-line}

#about .tit{display:flex}
#about .tit>*{width:50%}
#about .tit .s_tit{position:sticky;top:100px;height:100%}
#about .tit .s_tit span{color:var(--primary)}
#about .tit a{display:inline-block;font-size:13px;font-weight:500;font-family:'Pretendard', 'Poppins'}
#about .tit a+a{margin-top:80px}
#about .tit a div{overflow:hidden}
#about .tit a img{transition:all .3s}
#about .tit a span{display:inline-block;margin-top:10px;font-size:16px;color:#000;opacity:.5}
#about .tit .r_cont{display:flex;flex-direction:column;align-items:flex-start;margin-left:100px}
#about .tit .r_cont a:first-child{margin-left:auto;text-align:right}

#about .about-msg {
  position: relative;
  z-index: 2; /* 애니메이션 레이어 위로 */
  font-size: 20px;
  font-weight: 400;
  color: #606060  !important;
  margin-top: 250px;
  line-height: 1.6;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  white-space: normal !important; /* 줄바꿈 허용 추가 */
}

/* C만 강조 */
#subBnr .sub_tit-company .highlight-c {
  color: #f77e01;
  font-size: 120px;
   font-weight: 800;
   display: inline; /* 인라인 유지 */
}

#subBnr .sub_tit-company {
  font-size: 120px;
  color: #000000;
  font-weight: 600;
  white-space: nowrap; /* 줄바꿈 방지 */
}

.sub_desc {
  margin-top: 20px; /* 겹치지 않도록 여백 설정 */
  margin-left : 15px;
  font-size: 30px;
  color: #555;
  font-weight: 400;
}
#about .big_txt{position:relative;font-weight:700;color:rgba(255,255,255,.2)}
#about .big_txt div{position:absolute;z-index:-1;top:0;left:0;top:0;color:#dedede;white-space:nowrap}
#about .big_txt .b_txt{position:relative;width:max-content;background:linear-gradient(to right, #114c62, #114c62) no-repeat;-webkit-background-clip:text;background-clip:text;background-size:0%;;white-space:nowrap;transition:background-size cubic-bezier(.1,.5,.5,1) 0.5s}

#about .ser{position:relative;padding-top:150px}
#about .ser:after{position:absolute;content:'';z-index:-1;top:0;left:0;width:100%;height:610px;background:var(--primary) url(../img/sub/about_bg.png)}
#about .ser .s_tit{color:#fff}
#about .ser .s_tit h2{color:#fff}
#about .ser ul{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:100px}
#about .ser ul li a{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around;height:285px;padding:40px;color:#fff;background:#111;transition:all .3s}
#about .ser ul li a dt{margin-bottom:5px;font-size:20px;font-weight:700}
#about .ser ul li a dd{opacity:.7;font-size: 16px}
#about .ser ul li svg{margin-left:auto}

#about .part{overflow:hidden}
#about .part .s_tit{color:var(--primary)}
#about .move_txt{margin-top:100px}
#about .move_txt ul{display:flex;gap:40px;white-space:nowrap}
#about .move_txt ul+ul{margin-top:20px}
#about .move_txt ul li img{border:1px solid #e1e1e1}
#about .move_txt .top{animation:textloop_left 30s infinite linear}
#about .move_txt .btm{animation:textloop_right 30s infinite linear}

@keyframes textloop_left {0% {transform:translateX(0)} 100% {transform:translateX(-50%)}}
@keyframes textloop_right {0% {transform:translateX(-50%)} 100% {transform:translateX(0%)}}

@media(hover:hover){
#about .ser ul li a:hover{transform:translateY(-20px)}
#about .tit a:hover div img{transform:rotate(5deg) scale(1.1)}
}

@media(max-width:1024px){
.pagecommon .inner{padding:0 15px}
#about .s_tit h2{font-size:30px}
}
@media(max-width:768px){
#about .s_tit{text-align:center}
#about>div+div{margin-top:100px}
#about .s_tit h2{margin-top:20px;font-size:25px;white-space:normal}
#about .tit{display:block}
#about .tit>*{width:100%}
#about .tit .s_tit{position:unset}
#about .tit .r_cont{margin-top:80px;margin-left:0}
#about .big_txt .b_txt{display:none}
#about .big_txt div{position:unset;color:var(--primary)}
#about .tit a img{width:100%}
#about .ser{padding-top:100px}
#about .ser:after{height:430px}
#about .ser ul{grid-template-columns:repeat(2,1fr);margin-bottom:60px}
#about .ser ul li a{height:240px}
#about .ser ul li a dl{margin-top:20px}
#about .ser ul li a dt{font-size:18px}
#about .move_txt{margin-top:50px}
#about .move_txt ul li img{width:200px}
  #subBnr .sub_tit-company {
    font-size: 70px;
    display: inline-flex;
    align-items: baseline;
    padding : 0px !important;
  }

  #subBnr .sub_tit-company .highlight-c {
    font-size: inherit;
    margin-right: -15px; /* 모바일에서 간격 조금만 조정 */
  }
  .sub_desc {
  margin-top: 5px !important; /* 겹치지 않도록 여백 설정 */
  margin-left : 25px !important;
  }
  #about .about-msg {
  margin-top: 100px;
 }
  #about .tit .r_cont {
    margin-left: 0 !important;
    width: 100% !important;
  }
  #about .tit .r_cont img {
  width: 100%;
  height: auto;
  }
   #about .move_txt .top {
    animation: textloop_left 5s infinite linear;
  }
  #about .move_txt .btm {
    animation: textloop_right 5s infinite linear;
  }

}
@media(max-width:480px){
#about .s_tit h2{font-size:22px}
#about .tit a img{width:60%}
#about .tit a+a{margin-top:50px}
#about .ser:after{background-position:center}
#about .ser ul{display:block;margin-top:50px}
#about .ser ul li{height:auto}
#about .ser ul li+li{margin-top:10px}
#about .ser ul li a{height:auto}
#about .ser ul li a dt{font-size:16px}

}
@media(max-width:390px){
#about .s_tit h2{font-size:20px}
#about .ser ul li a dl{padding-bottom:15px}
#about .move_txt ul{gap:20px}
#about .move_txt ul li img{width:160px}
}