@charset "utf-8";


/* 1_회사소개_인사말 */
.sa-about strong,
.sa-about b,
.sa-about-title strong{font-family:'Noto Sans KR',sans-serif;font-weight:700;}
.sa-about{max-width:1200px;margin:0 auto;padding:80px 20px;font-family:'Noto Sans KR',sans-serif;color:#222;}
.sa-about-inner{display:flex;flex-direction:column;gap:32px;}
.sa-about-head{margin-bottom:8px;}
.sa-about-kicker{font-size:18px;font-weight:500;color:#5400d5;margin-bottom:10px;}
.sa-about-title{font-size:30px;line-height:1.6;font-weight:700;margin:0;}
.sa-about-title span{display:block;font-size:19px;font-weight:400;color:#333;margin-bottom:4px;}
.sa-about-title strong{display:inline-block;color:#111;}
.sa-about-title em{font-style:normal;color: #b276ff;
    border-bottom: 3px solid #5f1dff40; }
.sa-about-item{display:flex;align-items:flex-start;gap:24px;}
.sa-about-item--reverse{flex-direction:row-reverse;}
.sa-about-photo-sm{flex:0 0 470px;max-width:440px;border-radius:18px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.12);}
.sa-about-photo-sm img{display:block;width:100%;height:100%;object-fit:cover;}
.sa-about-body{flex:1;font-size:18px;line-height:1.9;color:#555;     padding: 50px 50px 0 50px;    }
.sa-about-body.left {  padding: 50px 50px 0 0px;    }
.sa-about-body h6 {font-size:22px;font-family: 'Noto Sans KR', sans-serif; letter-spacing: -1px;  color: #5400d5;}
.sa-about-body p{margin:0;}
.sa-highlight{color:#7b83ed;font-weight:600;}
.sa-about-sign{margin-top:10px; display: flex;     justify-content: flex-start;    align-items: flex-start;}
.sa-about-sign-label{font-size:17px;color:#777;margin-bottom:4px;}
.sa-about-sign-name{display:inline-block;position:relative;font-size:20px;font-weight:700;color:#222;padding-right:70px;}
.sa-about-sign-img {width: 100px; margin-left: 30px;}

@media(max-width:1024px){
  .sa-about{padding:60px 16px;}
  .sa-about-title{font-size:26px;}
  .sa-about-title span{font-size:18px;}
  .sa-about-item{gap:18px;}
  .sa-about-photo-sm{flex:0 0 200px;max-width:200px;}
}

@media(max-width:640px){
  .sa-about{padding:40px 14px;}
  .sa-about-item,.sa-about-item--reverse{flex-direction:column;}
  .sa-about-photo-sm{flex:none;max-width:100%;width:100%;}
  .sa-about-title{font-size:22px;}
  .sa-about-body{font-size:14px;}
}
@font-face{font-family:'HancomCooljazz';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2107@1.1/HancomCooljazz.woff') format('woff');font-weight:normal;font-style:normal;}

.sa-about-sign{display:flex;align-items:center;gap:10px;}
.sa-about-sign-title{font-size:16px;color:#7d7d7d;}
.sa-about-sign-name{font-family:'HancomCooljazz',sans-serif;font-size:36px;letter-spacing:-1px;color:#000;}


/* 2_회사소개_연혁 */
.sa-history{max-width:1400px;margin:0 auto;padding:10px 20px 100px;font-family:'Noto Sans KR',sans-serif;color:#222;}
.sa-history-hero{position:relative;border-radius:32px;overflow:hidden;margin-bottom:60px;}
.sa-history-hero img{display:block;width:100%;height:260px;object-fit:cover;}
.sa-history-hero-text{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);text-align:center;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45);}
.sa-history-hero-kicker{font-size:16px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;opacity:.9;}
.sa-history-hero-title{font-size:30px;line-height:1.4;font-weight:700;margin-bottom:6px;}
.sa-history-hero-sub{font-size:14px;opacity:.9;}

/* 메인 타임라인 */
.sa-history-body{position:relative;margin-top:20px;padding-top:10px;margin-left: 100px; }
/* 회색 기본 라인 */
.sa-history-body::before{content:"";position:absolute;top:0;bottom:0;left:120px;width:2px;background:#e1e4ee;z-index:0;}
/* 위에 덮는 보라색 라인 (스크롤 시 내려옴) */
.sa-history-body::after{content:"";position:absolute;top:0;bottom:0;left:120px;width:2px;background:#d4d1de;transform-origin:top;transform:scaleY(0);transition:transform 1.2s ease-out;z-index:1;}
.sa-history-body.is-active::after{transform:scaleY(1);}

.sa-history-row{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-bottom:40px;padding-left:180px;z-index:2;}
.sa-history-center{position:absolute;left:120px;top:30px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;z-index:3;}
.sa-history-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid #7b5cff;background:#fff;box-sizing:border-box;transform:scale(.25);transition:all .6s ease;}
.sa-history-dot::before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:#fff;border:5px solid #7b5cff;transform:translate(-50%,-50%);transition:all .6s ease;}
.sa-history-dot::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:#7b5cff;transform:translate(-50%,-50%);z-index:-1;opacity:0;transition:all .6s ease;}
.sa-history-row.aos-animate .sa-history-dot{transform:scale(1);}
.sa-history-row.aos-animate .sa-history-dot::after{animation:saHistoryDots 1.5s ease-in-out infinite;}

.sa-history-main{flex:1;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;  max-width:620px;
  width:100%; } /* 글자-이미지 간격 좁게 */
.sa-history-main-left{flex:1;min-width:0;}
.sa-history-year{font-size:30px;font-weight:700;margin-bottom:10px;}
.sa-history-list{list-style:none;margin:0;padding:0;}
.sa-history-list li{margin-bottom:4px;}
.sa-history-text{font-size:18px;color:#555;}
.sa-history-text strong{font-weight:700;color:#111;}

/* 이미지 300 x 150 */
.sa-history-photo{flex:0 0 300px;max-width:300px;border-radius:18px;overflow:hidden;background:#f5f7fb;box-shadow:0 10px 25px rgba(0,0,0,.06);}
.sa-history-photo img{display:block;width:100%;height:150px;object-fit:cover;}
.sa-history-photo figcaption{padding:10px 12px;font-size:12px;color:#666;line-height:1.5;}

/* 점 파동 애니메이션 */
@keyframes saHistoryDots{0%{opacity:.5;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(3);}}

/* 1024 이하 */
@media(max-width:1024px){
.sa-history{padding:60px 16px 80px;}
.sa-history-hero img{height:220px;}
.sa-history-hero-title{font-size:26px;}
.sa-history-body::before,.sa-history-body::after{left:90px;}
.sa-history-row{padding-left:145px;gap:22px;}
.sa-history-center{left:90px;}
.sa-history-year{font-size:24px;}
.sa-history-main{gap:16px;}
.sa-history-photo{flex:0 0 260px;max-width:260px;}
.sa-history-photo img{height:140px;}
}

/* 640 이하 */
@media(max-width:640px){
.sa-history{padding:40px 14px 60px;}
.sa-history-hero img{height:200px;}
.sa-history-hero-text{left:20px;right:20px;transform:none;text-align:left;}
.sa-history-hero-title{font-size:22px;}
.sa-history-hero-sub{font-size:13px;}
.sa-history-body{padding-top:30px;margin-top:10px;}
.sa-history-body::before,.sa-history-body::after{left:18px;}
.sa-history-row{flex-direction:column;align-items:flex-start;padding-left:40px;gap:12px;margin-bottom:30px;}
.sa-history-center{left:18px;top:26px;}
.sa-history-main{flex-direction:column;gap:10px;}
.sa-history-year{font-size:18px;margin-bottom:6px;}
.sa-history-photo{flex:1 1 auto;max-width:100%;}
.sa-history-photo img{height:160px;}
}


/* 3_회사소개_비젼 */
.Vision_area{margin-bottom: 120px; }
.Vision_area .imgBox2{background: linear-gradient(165deg, #fff2e5 0%, #f3f1f7 50%); border-radius: 30px; text-align: center; margin:15px auto; padding:90px}
.Vision_area .imgBox2 img{width: 100%; max-width: 1000px; }
@media screen and (max-width:950px) { .Vision_area{margin-bottom: 20px; }
	.Vision_area .imgBox2{text-align: center; margin:30px auto; padding: 15px; }
	.Vision_area .imgBox2 img{width: 100%;  }
}


/* 4_회사소개_오시는길 */
.loc-wrap{max-width:1400px;margin:0 auto;padding:40px 0;font-family:'Noto Sans KR',sans-serif;}
.loc-map{width:100%;height:500px;border-radius:20px;overflow:hidden;margin-bottom:30px;}
.loc-info{display:flex;gap:40px;background:#f8f8f8;padding:40px;border-radius:20px;}
.loc-left{flex:1;}
.loc-title{font-size:28px;font-weight:700;margin-bottom:14px;color:#111;line-height:1.45;}
.loc-right{flex:1;display:flex;flex-direction:column;gap:20px;}
.loc-row{display:flex;gap:15px;align-items:flex-start;}
.loc-ico{width:42px;height:42px;border-radius:50%;background:#eff4ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.loc-ico .material-symbols-outlined{font-size:24px;color:#3b83f6;}
.loc-data strong{font-size:16px;color:#111;display:block;margin-bottom:4px;}
.loc-data p{font-size:18px;color:#555;line-height:1.5;}
.loc-tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:13px;color:#fff;margin-right:6px;}
.loc-tag.blue{background:#3b83f6;}
.loc-tag.gray{background:#7b8a9d;}
.loc-btn-wrap{text-align:center;margin-top:30px;}
.loc-kakao-btn{display:inline-flex;align-items:center;gap:8px;background:#ffd600;padding:14px 28px;border-radius:40px;font-size:17px;font-weight:600;color:#111;transition:.3s;}
.loc-kakao-btn .material-symbols-outlined{font-size:22px;}
.loc-kakao-btn:hover{background:#ffce00;transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.15);}
@media(max-width:768px){.loc-info{flex-direction:column;padding:24px 20px;gap:24px;}.loc-title{font-size:22px;}}



/*  생산 공정 */

/* 전체 래퍼 */
.sa-process-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
  margin: 80px 0;
}

/* 개별 아이템 */
.sa-process-item {
  width: 330px;
  text-align: center;
  position: relative;
}

/* 이미지 박스 */
.sa-process-img {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5; /* 이미지 없을 때 기본 배경 */
  margin-bottom: 20px;
}

/* STEP 배지 */
.sa-process-step {
  position: absolute;
  top: 165px;
  right: 15px;
  background: #f36f21;
  color: #fff;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 30px;
  font-weight: 700;
}

/* 제목 & 본문 */
.sa-process-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.sa-process-text {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

/* 이미지 개별 경로 (원하는 경로로 변경) */
.sa-process-img1 { background-image: url('../img/process/p1.jpg'); }
.sa-process-img2 { background-image: url('../img/process/p2.jpg'); }
.sa-process-img3 { background-image: url('../img/process/p3.jpg'); }
.sa-process-img4 { background-image: url('../img/process/p4.jpg'); }
.sa-process-img5 { background-image: url('../img/process/p5.jpg'); }
.sa-process-img6 { background-image: url('../img/process/p6.jpg'); }

/* AOS 관련: 이 섹션 안에서만 조정하고 싶으면 이렇게 */
.sa-process-wrap [data-aos] {
  opacity: 0;
  transition: all 0.8s ease;
}
.sa-process-wrap [data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* 반응형 (원하면 추가) */
@media (max-width: 768px) {
  .sa-process-item {
    width: 100%;
    max-width: 420px;
  }
}