@charset "utf-8";

.sub-tit{text-align:center;}

/**************** CEO 인사말 ****************/

.greeting-section {
  padding: 100px 0 0;
}
/* 타이틀 */
.greeting-section .tit-area {
  text-align: center;
}
.greeting-section .tit-area h2 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  color: #0d62a6;
}
.greeting-section .tit-area h1 {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  margin-top: 40px;
}
.greeting-section .tit-area h1 span {
  color: #00a197;
}

/* 인사 영역 공통 */
.greeting-section .greeting-area {
  background: #f8f8f8;
  padding: 100px 0 150px;
  margin-top: 130px;
}
.greeting-section .greeting-area .img img {
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, .3) 6px 5px 20px;
  width: 100%;
  height: auto;
}
.greeting-section .greeting-area .txt h1 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
}
.greeting-section .greeting-area .txt p {
  font-size: clamp(16px, 2vw, 22px);
  margin-top: 40px;
  letter-spacing: -0.05em;
  line-height: 1.6em;
}
.greeting-section .greeting-area .txt h3 {
  font-size: clamp(18px, 2vw, 24px);
  margin-top: 40px;
  font-weight: 700;
}
.greeting-section .greeting-area .txt h3 span {
  margin-left: 20px;
}

/* ===== 데스크탑 (float 레이아웃 유지) ===== */
@media (min-width: 992px) {
  .greeting-section .greeting-area {
    display: block; /* flex 안씀 */
  }
  .greeting-section .greeting-area .img {
    float: left;
    width: 47%;
    max-width: 660px;
    margin-top: -180px;
  }
  .greeting-section .greeting-area .txt {
    float: right;
    width: 47%;
    max-width: 660px;
  }
  .greeting-section .greeting-area .img img {
    height: auto;
    object-fit: unset;
  }
}

/* ===== 태블릿 이하 (flex 세로 스택, 이미지 높이 200px) ===== */
@media (max-width: 991.98px) {
  .greeting-section .greeting-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 20px 100px;
    margin-top: 80px;
    -text-align: center;
  }

  .greeting-section .greeting-area .img,
  .greeting-section .greeting-area .txt {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* 이미지 높이 고정 */
  .greeting-section .greeting-area .img {
    order: 0;
    margin-bottom: 40px; /* 이미지와 텍스트 간격 */
  }
  .greeting-section .greeting-area .img img {
    height: 300px;
    object-fit: cover;
    object-position: center;
    width: 100%;
	border-radius: 10px;
  }

  /* 텍스트 블록 간격 */
  .greeting-section .greeting-area .txt {
    order: 1;
    margin-top: 10px;
  }
}

/* ===== 모바일 (여백 축소) ===== */
@media (max-width: 600px) {
  .greeting-section .greeting-area {
    padding: 20px 0 80px;
    margin-top: 30px;
  }
  .greeting-section .greeting-area .img {
    margin-bottom: 40px;
  }
   .greeting-section .greeting-area .img img {
    height: 200px;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }
  .greeting-section .greeting-area .txt h3 span {
    margin-left: 10px;
  }
  .greeting-section .greeting-area .txt h1 {
	margin-bottom:40px;
	}
  .greeting-section .greeting-area .txt p {
	margin-top: 30px;
  }
 br.none {display:none;}
}

/**************** 끝!! CEO 인사말 ****************/

/**************** 회사연혁 ****************/
.history-top-section{text-align:center; color:#fff; height:450px;}
.history-top-section p{font-size:30px; font-weight:600; position:relative; padding-bottom:30px; margin-bottom:40px;}
.history-top-section p:after{width:50px; height:2px; background:#fff; bottom:0; left:50%; margin-left:-25px; display:block; content:""; position:absolute;}
.history-top-section h1{font-size:54px; font-weight:700;}

@media screen and (max-width:1420px){
	.history-top-section{width:90%; margin:0 auto;}
	.history-top-section p{font-size:26px;}
	.history-top-section h1{font-size:50px;}
}

@media screen and (max-width:870px){
	.history-top-section{padding:60px 30px;}
	.history-top-section p{font-size:20px; padding-bottom:20px; margin-bottom:30px;}
	.history-top-section h1{font-size:40px;}
}

@media screen and (max-width:640px){
	.history-top-section{padding:40px 20px;}
	.history-top-section p{font-size:18px; padding-bottom:20px; margin-bottom:20px;}
	.history-top-section h1{font-size:32px;}
}

@media screen and (max-width:480px){
	.history-top-section p{font-size:16px;}
	.history-top-section h1{font-size:24px;}
}


.history-top-section {
  border-radius: 20px;
  overflow: hidden;   /* 둥근 모서리에 맞게 잘리도록 */
}

.history-top-section img {
  display: block;
  width: 100%;        /* 가로 꽉 채우기 */
  height: auto;       /* 세로 비율 유지 */
  border-radius: inherit; /* 부모의 둥근 모서리 상속 */
}

/* 태블릿 이하 */
@media (max-width: 991.98px) {
  .history-top-section {
    border-radius: 15px;
  }
}

/* 모바일 */
@media (max-width: 600px) {
  .history-top-section {
    border-radius: 10px;
  }
}


/*************연혁 탭 영역***************/
.history-tab {
  width: 50%;
  margin: 0 auto;
}

/* 태블릿 이하: 너비 조금 더 넓게 */
@media (max-width: 991.98px) {
  .history-tab {
    width: 70%;
  }
}

/* 모바일: 거의 꽉 차게 */
@media (max-width: 600px) {
  .history-tab {
    width: 100%;
    box-sizing: border-box;
  }
  .history-tab table tr td a {font-size:20px;}
}
/************* 끝!! 연혁 탭 영역 **************/

/************* 연혁 이미지 영역 *************/
/* 기본 (데스크탑) */
.history-top-section.history01{background:url("../img/history01_bg.jpg") no-repeat center; background-size:cover; border-radius:20px;}
.history-top-section.history02{background:url("../img/history02_bg.jpg") no-repeat center; background-size:cover; border-radius:20px;}
.history-top-section.history03{background:url("../img/history03_bg.jpg") no-repeat center; background-size:cover; border-radius:20px;}
.history-top-section.history04{background:url("../img/history04_bg.jpg") no-repeat center top; background-size:cover; border-radius:20px;}

/* 태블릿 이하 */
@media (max-width: 991.98px) {
  .history-top-section[class*="history"] {
    border-radius:15px;          /* 둥근 모서리 조금 줄임 */
    background-position:center top;
    min-height:300px;            /* 최소 높이 보장 */
  }
}

/* 모바일: 이미지 숨김 */
@media (max-width: 600px) {
  .history-top-section[class*="history"] {
	display:none !important;      /* 요소 자체 제거 */
  }
}
/************* 끝!! 연혁 이미지 영역 **************/


/**************************************/
.history-section{padding:100px 0;}
.history-section.bg-gray{background:#f8f8f8;}
.history-section .history{}
.history-section .history-box{margin-top:80px;}
.history-section .history-box:first-child{margin-top:40px;}
.history-section .history-box:after{clear:both; display:block; content:"";}
.history-section .history-box .year{float:left; width:20%; max-width:300px; padding-left:40px; font-size:70px; font-weight:800; color:#111;}
.history-section .history-box .history-area{float:right; width:75%; max-width:1250px; border-top:2px solid #333; border-bottom:1px solid #dedede; padding:30px 20px;}
.history-section .history-box .history-area li{font-size:24px; padding:10px 0;}
.history-section .history-box .history-area li:after{clear:both; display:block; content:"";}
.history-section .history-box .history-area li span{float:left;}
.history-section .history-box .history-area li span.mon{width:10%; font-weight:800; display:inline-block; color:#1e74b8;}
.history-section .history-box .history-area li span.txt{width:90%;}

@media screen and (max-width:1280px){
	.history-section .history{width:100%; max-width:100%;}
	.history-section .history-box .year{padding-left:0; font-size:50px;}
	.history-section .history-box .history-area li{font-size:22px;}
}

@media screen and (max-width:1024px){
	.history-section{padding:80px 0;}
	.history-section .history-box{margin-top:40px;}
	.history-section .history-box:first-child{margin-top:0;}
	.history-section .history-box .year{font-size:34px; max-width:200px;}
	.history-section .history-box .history-area{padding:20px 0;}
	.history-section .history-box .history-area li{font-size:20px;}
}

@media screen and (max-width:870px){
	.history-section{padding:60px 0;}
	.history-section .history-box .year{font-size:30px; width:100%; max-width:100%; margin-bottom:20px;}
	.history-section .history-box .history-area{width:100%; max-width:100%; padding:20px 20px;}
	.history-section .history-box .history-area li{font-size:18px;}
}

@media screen and (max-width:640px){
	.history-section{padding:50px 0;}
	.history-section .history-box{margin-top:30px;}
	.history-section .history-box .year{font-size:26px;}
	.history-section .history-box .history-area li{font-size:16px;}
}

@media screen and (max-width:480px){
	.history-section{padding:40px 0;}
	.history-section .history-box .year{margin-bottom:10px;}
	.history-section .history-box .history-area{padding:10px 0;}
	.history-section .history-box .year{font-size:22px;}
	.history-section .history-box .history-area li{font-size:14px;}
}
/****************  ****************/

/**************** 회사비전 ****************/
/* =========================
   BRAND (HERO)
   ========================= */
.brand-section{
  background:url("../img/brand_bg.jpg") no-repeat center;
  background-size:cover;
  padding:250px 0 320px;   /* 데스크탑 기본 */
  position:relative;
  text-align:center;
}
.brand-section .page-tit h1{
  color:#0d62a6;
  font-size:clamp(24px, 4vw, 48px);
  font-weight:800;
}

/* 태블릿 */
@media (max-width: 991.98px){
  .brand-section{ padding:180px 0 220px; }
  .brand-section .page-tit h1{ font-size:clamp(22px, 5vw, 36px); }
}

/* 모바일 */
@media (max-width: 600px){
  .brand-section{ padding:120px 0 160px; }
  .brand-section .page-tit h1{ font-size:clamp(20px, 6.2vw, 30px); }
}

/* =========================
   SLOGAN
   ========================= */
.bg-green{ background:#fbffff; }

.slogan-area{
  margin-top:-240px; /* 히어로와 겹치는 연출 */
}
.slogan-area .page-tit{ padding:0 0 50px; text-align:center; }
.slogan-area .page-tit h1{ color:#111; font-size:clamp(22px, 3.2vw, 36px); font-weight:800; }

/* 리스트 (데스크탑: 3열) */
.slogan-area ul{
  display:flex;
  flex-wrap:wrap;
  gap:40px 40px;              /* row-gap 40, col-gap 40 */
  margin:0; padding:0; list-style:none;
}
.slogan-area ul li{
  width:calc((100% - 80px) / 3); /* 3열 & 40px 컬럼간격 고려 */
}
.slogan-area ul li .box{
  border-radius:20px; border:1px solid #0d62a6; background:#fff;
  text-align:center; padding:60px 30px;
}
.slogan-area ul li .box h1{
  color:#0d62a6; font-size:clamp(18px, 1.6vw, 22px); font-weight:700;
}
.slogan-area ul li .box p{
  font-size:clamp(18px, 2.2vw, 26px); margin-top:20px; line-height:1.5;
}

/* 모바일: 1열 */
@media (max-width: 600px){
  .slogan-area{ margin-top:-60px; }
  .slogan-area ul{ gap:18px; }
  .slogan-area ul li{ width:100%; }
  .slogan-area ul li .box{ padding:40px 22px; }
}

/* =========================
   IDEOLOGY
   ========================= */
.ideology-section{ padding:40px 0 100px; }
.ideology-section ul{
  display:flex; flex-wrap:wrap; gap:40px;
  margin:0; padding:0; list-style:none;
}
.ideology-section ul li{
  width:calc((100% - 80px) / 3);
}
.ideology-section ul li .box{
  border-radius:20px; border:7px solid #f5f5f5; background:#fff;
  text-align:center; padding:50px 30px; height:100%;
}
.ideology-section ul li .box h2{
  color:#25b1a7; font-size:clamp(20px, 2.2vw, 28px);
  font-weight:700; margin:30px 0 20px;
}
.ideology-section ul li .box p{
  font-size:clamp(15px, 1.6vw, 18px); line-height:1.6;
}

/* 모바일: 1열 */
@media (max-width: 600px){
  .ideology-section{ padding:24px 0 60px; }
  .ideology-section ul{ gap:16px; }
  .ideology-section ul li{ width:100%; }
  .ideology-section ul li .box{ padding:36px 20px; }
}

/* =========================
   VALUE (BG SECTION)
   ========================= */
.value-section{
  background:url("../img/value_bg.jpg") no-repeat center;
  background-size:cover;
  padding:150px 0;
  color:#fff;
}
.value-section .page-tit{ text-align:left; color:#fff; }
.value-section .page-tit h3{
  font-size:clamp(24px, 3.2vw, 40px);
  font-weight:700; margin-bottom:50px;
}

/* 태블릿/모바일: 패딩 축소 + 타이틀 정렬 보정 */
@media (max-width: 991.98px){
  .value-section{ padding:110px 0; }
  .value-section .page-tit{ text-align:center; }
  .value-section .page-tit h3{ margin-bottom:32px; }
}
@media (max-width: 600px){
  .value-section{ padding:80px 0; }
  .value-section .page-tit h3{ margin-bottom:24px; }
}

/* =========================
   CI
   ========================= */
.ci-section{
  background:#f8f8f8; padding:100px 0;
}
.ci-section ul{
  display:flex; flex-wrap:wrap; gap:2%;
  margin:0; padding:0; list-style:none;
}
.ci-section ul li{
  width:49%;
}
.ci-section ul li:last-child{ /* 필요 시 유지 */
  /* flex 환경에서 순서 제어 가능. 특별한 우측 정렬 필요 없으면 비움 */
}

.ci-section .btn{
  width:100%; padding:0; margin-top:50px; text-align:center;
}
.ci-section .btn a{
  display:inline-block; width:460px; max-width:100%;
  margin:0 auto; text-align:center; line-height:80px;
  border-radius:20px; font-size:clamp(18px, 1.8vw, 22px);
  background:#3284c6; color:#fff;
  box-shadow: inset 0 0 10px rgba(8,57,96,.2);
  transition:all .4s;
}
.ci-section .btn a:hover{ background:#1d6eaf; }
.ci-section .btn a i{ margin-left:20px; transition:transform .4s; }
.ci-section .btn a:hover i{ transform:rotate(-45deg); }

/* 태블릿: 2열 유지, 여백 조정 */
@media (max-width: 991.98px){
  .ci-section{ padding:80px 0; }
  .ci-section ul{ gap:24px 2%; }
  .ci-section ul li{ width:49%; }
  .ci-section .btn{ margin-top:40px; }
}

/* 모바일: 1열 + 버튼 풀폭 느낌 */
@media (max-width: 600px){
  .ci-section{ padding:60px 0; }
  .ci-section ul{ gap:16px; }
  .ci-section ul li{ width:100%; }
  .ci-section .btn{ margin-top:30px; }
  .ci-section .btn a{
    width:100%;
    line-height:64px;        /* 세로 살짝 줄임 */
  }
}


/****************  ****************/

/**************** 오시는길  ****************/

/* =========================
   Location Section (Clean)
   ========================= */

/* 섹션 여백 */
.location-section02 { padding: 100px 0; }

/* --- 데스크탑(기본): 2열 float 유지 --- */
.location-section .map-area { width: 50%; float: left; }
.location-section .add-area { width: 50%; float: right; border: 1px solid #dedede; }

/* 탭/섹션 등 내부 숨김이 필요할 때만 사용 (지도 래퍼에 적용되면 안 됨) */
.location-section .map-area .section { display: none; }

/* 좌우 반전 레이아웃 (location-section02) */
.location-section.location-section02 .map-area { float: right; }
.location-section.location-section02 .add-area { float: left; }

/* 텍스트/박스 스타일 */
.location-section .add-area h1 {
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 800;
  padding: 30px 60px;
  border-bottom: 1px solid #dedede;
}
.location-section .add-area .add {
  background: #f7f8fb;
  border-bottom: 1px solid #dedede;
  padding: 90px 60px;
}
.location-section .add-area .add h2 {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
}
.location-section .add-area .add ul { margin-top: 30px; }
.location-section .add-area .add ul li {
  font-size: clamp(15px, 1.6vw, 20px);
  margin: 10px 0;
  font-weight: 500;
}

/* 버튼 영역(항상 중앙 정렬) */
.location-section .add-area .map-btn { padding: 31.5px 0; }
.location-section .add-area .map-btn ul{
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.location-section .add-area .map-btn ul li { display: flex; }
.location-section .add-area .map-btn ul li a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 65px;
  padding: 0 40px;
  border-radius: 8px;
}
.location-section .add-area .map-btn ul li a span { margin-right: 10px; }
.location-section .add-area .map-btn ul li:first-child a { border: 1px solid #00c63b; color: #00c63b; }
.location-section .add-area .map-btn ul li:last-child  a { border: 1px solid #258fff; color: #258fff; }

/* 지도 임베드(공통 가로폭) */
.location-section .map-area iframe,
.location-section .map-area .map,
.location-section .map-area > img {
  width: 100%;
  display: block;
  max-width: 100%;
  /* 높이는 브레이크포인트에서 지정 */
}

/* =========================
   Kakao Roughmap (ID 고정)
   ========================= */
#daumRoughmapContainer1753344577027,
.root_daum_roughmap {
  display: block !important;
  width: 100% !important;
}
.root_daum_roughmap > div,
.root_daum_roughmap iframe {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* =========================
   Tablet (≤ 991.98px)
   ========================= */
@media (max-width: 991.98px) {
  /* 컬럼 → 세로 스택 */
  .location-section .map-area,
  .location-section .add-area {
    float: none;
    width: 100%;
  }

  /* 여백 다이어트 */
  .location-section02 { padding: 70px 0; }
  .location-section .add-area h1   { padding: 24px; }
  .location-section .add-area .add { padding: 40px 24px; }

  /* 버튼 축소 */
  .location-section .add-area .map-btn { padding: 24px 0; }
  .location-section .add-area .map-btn ul { gap: 8px; }
  .location-section .add-area .map-btn ul li a {
    line-height: 56px;
    padding: 0 28px;
  }

  /* 지도 높이 (px로 명확히 지정) */
  #daumRoughmapContainer1753344577027,
  .root_daum_roughmap {
    height: 400px !important;
  }
}

/* =========================
   Mobile (≤ 600px)
   ========================= */
@media (max-width: 600px) {
  .location-section02 { padding: 50px 0; }
  .location-section .add-area { border: 0; }
  .location-section .add-area h1   { padding: 20px 16px; border-left:1px solid #dedede; border-right:1px solid #dedede; }
  .location-section .add-area .add { padding: 28px 16px; border-left:1px solid #dedede; border-right:1px solid #dedede; }

  .location-section .add-area .map-btn { padding: 20px 0; }
  .location-section .add-area .map-btn ul { gap: 10px; }
  .location-section .add-area .map-btn ul li { width: 100%; }
  .location-section .add-area .map-btn ul li a {
    width: 100%;
    max-width: 420px;
    line-height: 52px;
    padding: 0 20px;
  }

  /* 지도 높이 더 축소 */
  #daumRoughmapContainer1753344577027,
  .root_daum_roughmap {
    height: 250px !important;
  }
}

/* =========================
   Desktop fix (≥ 992px)
   ========================= */
/* 데스크탑에서는 스크립트 mapHeight(550px) 보장 */
@media (min-width: 992px) {
  #daumRoughmapContainer1753344577027,
  .root_daum_roughmap {
    height: 550px !important;
  }
}



/**************** 끝!! 오시는길 ****************/