/*     3615045 : BLANK 컨텐츠      */
.verti_line {
  margin: 30px auto;
  width: 1px;
  height: 50px;
  background: #333;
}
.verti_line.show {
  opacity: 1;
}

@media (max-width: 767px) {
  .verti_line {
    margin: 15px auto;
    height: 35px;
  }
}

/*     3615055 : BLANK 컨텐츠      */
.aniTxt {display:flex; flex-wrap:wrap; position:relative; flex-direction:row; text-align:center;justify-content:center;}
.aniTxt>span {overflow:hidden; display:inline-block;;line-height: 1em;}
.aniTxt>span>span {display:block; transform:translateY(100%);line-height: 1em;}
.aniTxt>span.on>span {transform:translateY(0); transition:all .5s ease !important; line-height:1.2em}
.text_407011_ [class^="txtAni"] .empty {width:.8vw;}
.text_407011_ [class^="txtAni"]>span {font-size:40px; letter-spacing:-1px; font-weight:normal; color:#333;font-family: NX1 !important;}
.text_407011_ [class^="txtAni"]>span>span {font-size:40px; letter-spacing:-1px; font-weight:normal; color:#333;  font-family: NX1 !important;}  
.text_407011_ p { margin:0; padding:0;
	font-size:40px; letter-spacing:-1px; font-weight:normal; color:#333; line-height:1.3em;font-family: NX1 !important;}
.text_407011_ p a {color:#333; text-decoration:none;}
  
@media screen and (max-width: 1800px){
  .text_407011_ p {font-size:40px;}
}  
  
  @media screen and (max-width: 750px){
  .text_407011_ p {font-size:20px;}
}  

/*     3615065 : BLANK 컨텐츠      */
{@
$barTop = ceil($farm_set[font_size] * 0.2);
$circleTop = ceil($farm_set[font_size] * 1.4 / 2 -6);
@}

.title_3611685_ {font-size:0; padding:0px 0 !important;}
	display:block; position:relative; margin:0; padding: 0 0 40px ;
	font-size:36px; letter-spacing:-2px; font-weight:500; color:#41b470; line-height:1.4;
}
.title_3611685_ p b{font-size:18px; font-weight:500; color:#a0a0a0;}
.title_3611685_ p span{
	display:flex; align-items:center; justify-content:center; gap:10px;
	height:30px; color:#0047AB; line-height:30px; margin-top:8px;
	font-size:15px; letter-spacing:7px; font-weight:400;
	padding:0 80px;
	white-space:nowrap;
}
.title_3611685_ p span:before,
.title_3611685_ p span:after{
	content:''; width:60px; height:1px; background:#d8d8d8; flex-shrink:0;
}
.title_3611685_ p:before {content:''; position:absolute; background:#d00000; font-size:0;}
.title_3611685_.style_top p {padding-top:10px;}
.title_3611685_.style_top p:before {left:0; top:0; width:36px; height:4px;}
.title_3611685_.style_right p {padding-right:14px;}
.title_3611685_.style_right p:before {right:0; top:{$barTop}px; width:4px; height:36px;}
.title_3611685_.style_bottom p {padding-bottom:12px;}
.title_3611685_.style_bottom p:before {left:0; bottom:0; width:36px; height:4px;}
.title_3611685_.style_left p {padding-left:14px;}
.title_3611685_.style_left p:before {left:0; top:{$barTop}px; width:4px; height:36px;}
.title_3611685_.style_circle1 p {padding-left:20px;}
.title_3611685_.style_circle1 p:before {
	left:0; top:{$circleTop}px; width:12px; height:12px;
	border-radius:12px;
}
.title_3611685_.style_circle2 p {padding-left:20px;}
.title_3611685_.style_circle2 p:before {
	left:0; top:{$circleTop}px; width:12px; height:12px;
	border:2px solid #d00000; border-radius:12px; background:none; box-sizing:border-box;
}
@media (max-width:1023px){
  .title_3611685_ p span{font-size:15px; padding:0 40px;}
}
@media (max-width:767px){
  .title_3611685_ p span{font-size:13px; letter-spacing:3px; padding:0 20px;}
}

/*     3629105 : BLANK 컨텐츠      */
.blank__3629105__ {box-sizing:border-box;display:block;position:relative;width:100%;height:65px}
.blank__3629105__.build_edit_mode {min-height:10px;border:1px dashed red;background:rgba(255,255,255,.1);}
.blank__3629105__.build_edit_mode:before {content:'Blank';display:block;position:absolute;top:50%;left:0;right:0;margin-top:-10px;padding:5px 0;font-size:13px;color:red;text-align:center;line-height:1}

@media all and (max-width:1023px){
	.blank__3629105__ {height:30px}
}

/*     3609665 : BLANK 컨텐츠      */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* =====================
   경영 비전 섹션
   ===================== */
.vision-section {width: 100%; background: #fff; padding: 0 0 120px; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif;}

.vision-container {max-width: 1400px; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}


/* 타이틀 */
.vision-title {text-align: center; font-size: 30px;font-weight: 500; color: #333; margin: 0 0 40px; letter-spacing: -0.5px;}

/* 전체 레이아웃 */
.vision-layout {display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "top-left  diagram  top-right" "bot-left  diagram  bot-right"; gap: 0 80px; align-items: center; width: 100%; justify-content: center;}

/* 텍스트 블록 공통 */
.vision-text-block { padding: 24px 0; }
.vision-text-block.top-left    { grid-area: top-left;  text-align: right; align-self: end;   padding-bottom: 50px; }
.vision-text-block.top-right   { grid-area: top-right; text-align: left;  align-self: end;   padding-bottom: 50px; }
.vision-text-block.bottom-left  { grid-area: bot-left;  text-align: right; align-self: start; padding-top: 50px; }
.vision-text-block.bottom-right { grid-area: bot-right; text-align: left;  align-self: start; padding-top: 50px; }
.vision-label {font-size: 18px; color: #0047AB; font-weight: 500; margin: 0 0 6px;}
.vision-heading {font-size: 28px; font-weight: 700; color: #0047AB; margin: 0 0 18px; letter-spacing: -0.3px;}
.vision-desc {font-size: 18px; line-height: 1.3; color: #555; margin: 0; font-weight: 400; word-break: keep-all;}

/* ===============================
   다이어그램 레이아웃
   =============================== */
.vision-diagram {grid-area: diagram; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center;}
/* -------------------------------------------------------
   wrapper 기준값 (PC)
   total : 540px
   outer-radius : 270px
   inner-radius : 124px  (hole = 248px = 45.9%)
   ring-width   : 146px
   mid-radius   : 197px  (offset from center for icons)
   icon-size    : 92px
   label-offset : 113px in x,y  (197px at 45deg)
   ------------------------------------------------------- */
.diagram-wrapper {position: relative; width: 540px; height: 540px; min-width: 540px; min-height: 540px; flex-shrink: 0;}

/* ① 도넛 링 ------------------------------------------- */
.diagram-ring {position: absolute; inset: 0; border-radius: 50%;
  /*conic-gradient 컬러 배치 (시계방향, 12시 = 0deg):
      0deg   / 12시 = #0047AB  메인 블루   (Brand Value   아이콘)
      90deg  /  3시 = #7ca1d5  하늘        (Next Level    아이콘)
      180deg /  6시 = #153471  네이비      (Sustainable   아이콘)
      270deg /  9시 = #345daa  연한 블루   (Global        아이콘)
    360deg에서 #0047AB로 부드럽게 연결 → 끊김 없음
  */
  background: conic-gradient(from -90deg,       /* 0deg = 12시 방향 정렬 */
    #0047AB   0deg,
    #7ca1d5  90deg,
    #153471 180deg,
    #345daa 270deg,
    #0047AB 360deg
  );
  box-shadow:
    0 10px 40px rgba(0, 71, 171, 0.25),
    0  4px 12px rgba(0, 71, 171, 0.15);
}

/* ② 도넛 구멍 (흰 원) ---------------------------------- */
.diagram-ring-hole {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 45.9%;   /* 248px / 540px */ height: 45.9%; border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.08);}

/* ③ 아이콘 원형 버블 ------------------------------------ */
.diagram-icon {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 중심점 기준으로 배치 */
  transform: translate(-50%, -50%);
  overflow: hidden;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.diagram-icon:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.diagram-icon img {
  width: 58%;
  height: 58%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* 흰색 아이콘으로 변환 */
  pointer-events: none;
}

/* 12시 - Brand Value */
.icon-top    { top: calc(50% - 197px); left: 50%; }
/* 3시  - Next Level */
.icon-right  { top: 50%;               left: calc(50% + 197px); }
/* 6시  - Sustainable Growth */
.icon-bottom { top: calc(50% + 197px); left: 50%; }
/* 9시  - Global Strategy */
.icon-left   { top: 50%;               left: calc(50% - 197px); }

/* ④ 링 위 텍스트 레이블 --------------------------------- */
.diagram-label {
  position: absolute;
  color: #ffffff;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 대각선 45° 위치: 197 * sin(45°) = 197 * 0.707 ≈ 139px */
.label-tl { top: calc(50% - 139px); left: calc(50% - 139px); }
.label-tr { top: calc(50% - 139px); left: calc(50% + 139px); }
.label-br { top: calc(50% + 139px); left: calc(50% + 139px); }
.label-bl { top: calc(50% + 139px); left: calc(50% - 139px); }

/* ⑤ 중앙 텍스트 ---------------------------------------- */
.diagram-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 200px;
  pointer-events: none;
  z-index: 2;
}

.center-main {
  font-size: 21px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
  line-height: 1.35;
}

.center-sub {
  font-size: 17px;
  color: #888;
  margin: 0;
  font-weight: 400;
}

/* ===============================
   반응형 - 태블릿 (max-width: 1023px)
   scale: 380/540 = 0.704
   mid-radius: 197 * 0.704 = 139px
   icon: 92 * 0.704 = 65px
   label offset: 139 * 0.704 = 98px
   =============================== */
@media (max-width: 1023px) {
  .vision-section   { padding: 80px 0 100px; }
  .vision-container { padding: 0 40px; }
  .vision-title     { font-size: 28px; margin-bottom: 60px; }
  .vision-layout    { gap: 0 40px; }

  .vision-label   { font-size: 18px; }
  .vision-heading { font-size: 22px; }
  .vision-desc    { font-size: 18px; }

  .diagram-wrapper {
    width: 380px;
    height: 380px;
    min-width: 380px;
    min-height: 380px;
  }

  .diagram-icon {
    width: 65px;
    height: 65px;
  }

  .icon-top    { top: calc(50% - 139px); left: 50%; }
  .icon-right  { top: 50%;              left: calc(50% + 139px); }
  .icon-bottom { top: calc(50% + 139px); left: 50%; }
  .icon-left   { top: 50%;              left: calc(50% - 139px); }

  .diagram-label  { font-size: 11px; }
  .label-tl { top: calc(50% - 98px); left: calc(50% - 98px); }
  .label-tr { top: calc(50% - 98px); left: calc(50% + 98px); }
  .label-br { top: calc(50% + 98px); left: calc(50% + 98px); }
  .label-bl { top: calc(50% + 98px); left: calc(50% - 98px); }

  .center-main { font-size: 17px; }
  .center-sub  { font-size: 11px; }
}

/* ===============================
   반응형 - 모바일 (max-width: 767px)
   scale: 300/540 = 0.556
   mid-radius: 197 * 0.556 = 110px
   icon: 92 * 0.556 = 51px
   =============================== */
@media (max-width: 767px) {
  .vision-section   { padding: 30px 0 0px; }
  .vision-container { padding: 0 20px; }
  .vision-title     { font-size: 24px; margin-bottom: 30px; }

  .vision-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .vision-diagram { order: 1; margin-bottom: 0; }

  .diagram-wrapper {
    width: 300px;
    height: 300px;
    min-width: 300px;
    min-height: auto;
  }

  .diagram-icon {
    width: 51px;
    height: 51px;
    border-width: 2px;
  }

  .icon-top    { top: calc(50% - 110px); left: 50%; }
  .icon-right  { top: 50%;              left: calc(50% + 110px); }
  .icon-bottom { top: calc(50% + 110px); left: 50%; }
  .icon-left   { top: 50%;              left: calc(50% - 110px); }

  .diagram-label {
    display: block;
    font-size: 10px;
    white-space: normal;
    line-height: 1.3;
    max-width: 41px;
  }

  .label-tl { top: calc(50% - 78px); left: calc(50% - 78px); }
  .label-tr { top: calc(50% - 78px); left: calc(50% + 78px); }
  .label-br { top: calc(50% + 78px); left: calc(50% + 78px); }
  .label-bl { top: calc(50% + 78px); left: calc(50% - 78px); }

  .center-main { font-size: 15px; }
  .center-sub  { font-size: 15px; }

  .vision-text-block.top-left    { order: 2; }
  .vision-text-block.top-right   { order: 3; }
  .vision-text-block.bottom-left  { order: 4; }
  .vision-text-block.bottom-right { order: 5; }

  .vision-text-block {
    width: 100%;
    text-align: center !important;
    padding: 30px 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }
  .vision-text-block:last-child { border-bottom: none; }

  .vision-label   { font-size: 15px; }
  .vision-heading { font-size: 20px; margin-bottom: 12px; }
  .vision-desc    { font-size: 15px; line-height: 1.85; }
}

/*     3608835 : BLANK 컨텐츠      */
/* ============================================================
   경영 철학 섹션 스타일
   배경: 브라우저 100% 풀폭 / 카드: max-width 1400px 중앙 정렬
   Breakpoints: 1023px / 767px
   ============================================================ */


/* === 기본 초기화 === */
.philosophy-section *,
.philosophy-section *::before,
.philosophy-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.philosophy-section ul,
.philosophy-section li { list-style: none; }
.philosophy-section img { display: block; max-width: 100%; }

/* ============================================================
   섹션 전체 래퍼
   ✅ 핵심: 섹션 자체를 left: 50% + translateX(-50%) + width: 100vw
   CMS 부모 컨테이너 너비/오프셋에 관계없이
   항상 뷰포트 정중앙 기준으로 풀폭 배치
   ============================================================ */
.philosophy-section {
  position: relative;
  left: 50%;                           /* ✅ 부모 기준 50% */
  transform: translateX(-50%);         /* ✅ 자기 자신의 절반만큼 좌로 이동 */
  width: 100vw;                        /* ✅ 뷰포트 풀폭 */
  min-height: 650px;                   /* ✅ 풀페이지 높이 */
  margin-bottom: -60px;
  padding: 65px 20px;
  font-family: 'Noto Sans KR', sans-serif;
  overflow: hidden;
  background-color: transparent;
  z-index: 0;

  display: flex;                       /* ✅ 수직 중앙 정렬 */
  align-items: center;
}

/* ============================================================
   배경 이미지
   섹션 자체가 이미 풀폭이므로 left: 0 / width: 100% 로 단순화
   ============================================================ */
.philosophy-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.philosophy-bg .bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.philosophy-bg .bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(240, 240, 240, 0.72);
}

/* ============================================================
   콘텐츠 컨테이너 - 카드 max-width 1400px 중앙 정렬
   ============================================================ */
.philosophy-container {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 24px;                     /* ✅ 좌우 동일 여백 */
}

/* ============================================================
   섹션 타이틀
   ============================================================ */
.philosophy-title-wrap {
  text-align: center;
  margin-bottom: 50px;
}

.philosophy-title {
  font-size: 30px;
  font-weight: 500;
  color: #333;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* ============================================================
   카드 리스트 4열
   ============================================================ */
.philosophy-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.philosophy-item {
  padding: 0 12px;
}

.philosophy-card {
  background: #ffffff;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.philosophy-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* ============================================================
   카드 이미지
   ============================================================ */
.card-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ddd;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.philosophy-card:hover .card-image {
  transform: scale(1.05);
}

/* ============================================================
   카드 텍스트
   ============================================================ */
.card-content {
  padding: 50px 24px 50px;
  text-align: center;
}

.card-title {
  font-size: 22px;
  font-weight: 500;
  color: #111111;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
  line-height: 1.3;
}

.card-desc {
  font-size: 18px;
  font-weight: 400;
  color: #555555;
  line-height: 1.5;
  letter-spacing: -0.2px;
  word-break: keep-all;
}

/* ============================================================
   반응형: 태블릿 (max-width: 1023px)
   ============================================================ */
@media (max-width: 1023px) {

  .philosophy-section {
    padding: 60px 20px;
  }

  .philosophy-title { font-size: 30px; }
  .philosophy-title-wrap { margin-bottom: 40px; }

  .philosophy-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }

  .philosophy-container { padding: 0 16px; }
  .philosophy-item { padding: 0 10px; }
  .card-content { padding: 24px 20px 30px; }
  .card-title { font-size: 20px; }
  .card-desc { font-size: 18px; }
}

/* ============================================================
   반응형: 모바일 (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

  .philosophy-section {padding: 30px 30px; background-color: #f5f5f5;}
  .philosophy-bg {display: none;}


  .philosophy-title { font-size: 24px; }
  .philosophy-title-wrap { margin-bottom: 32px; }

  .philosophy-list {grid-template-columns: 1fr; gap: 16px;}
  .philosophy-container { padding: 0 12px; }
  .philosophy-item { padding: 0; }

  .card-image-wrap { aspect-ratio: 16 / 9; }

  .card-content {
    padding: 20px 18px 26px;
    text-align: left;
  }

  .card-title { font-size: 18px; margin-bottom: 12px; }
  .card-desc { font-size: 15px; }
}