.lead { font-size:16px; line-height:1.75; letter-spacing:-0.02em; color:#555;  word-break:keep-all }

@media screen and (max-width: 640px) {
  input { -webkit-appearance:none; -webkit-border-radius:0; }
}

/* ===============================
   헤더 / 내비게이션
   =============================== */
/* 헤더 기본 */
#header{
  position:relative;
  top:0;
  left:50%;
  transform:translateX(-50%);
  max-width:1400px;
  width:100%;
  height:80px;
  background:#fff;
  z-index:1000;
  transition:all .3s ease;
}
#header .header-inner{
  position:relative;            /* 중복 선언 정리: 여기 한 번만 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1500px;
  margin:0 auto;
  height:100%;
  padding:0 20px;
}

/* 로고 */
#header #logo{ margin-left:25px; padding:0; }
#header #logo a{ display:block; width:300px; height:80px; line-height:80px; }
#header #logo img{ width:100%; }

/* GNB (상단 메뉴) */
#header .gnb{
  position:relative;
  display:flex;
  gap:40px;
  margin-left:50px;
  height:100%;
  align-items:center;
}
#header .gnb>li{ display:inline-block; width:100px; text-align:center; height:80px; line-height:80px; }
#header .gnb>li>a{
  display:inline-block; width:100%;
  color:#333; font-size:17px; font-weight:600; text-decoration:none; letter-spacing:-.5px;
}
#header .gnb>li>a:hover{ color:#2253b8; }

/* 로그인/회원가입 버튼 */
#header .gnb .login a,
#header .gnb .join a{
  display:inline-block; font-size:14px; font-weight:600; padding:8px 16px; border-radius:5px;
  text-decoration:none; transition:background-color .3s ease; color:#fff;
}
#header .gnb .login a{ background:#0072ff; }
#header .gnb .login a:hover{ background:#005acc; }
#header .gnb .join a{ background:#005acc; margin-left:10px; }
#header .gnb .join a:hover{ background:#003f99; }
#header .gnb .login, #header .gnb .join{
  background:none; margin:0; padding:0; border:none; height:auto; line-height:normal;
}

/* 햄버거 메뉴 버튼 (헤더용) — 데스크톱 기본 숨김 */
#header .header-inner .menu{
  display:none;                 /* 데스크톱에선 숨김 */
  position:absolute;
  right:16px;
  top:26px;
  width:28px; height:22px;
  z-index:2000;                 /* 로고/배너 위 */
  text-indent:-9999px;
  background:url(../img/cate_more.gif) no-repeat center;
  border:0;
}
#header .header-inner .menu.on{ background-image:url(../img/cate_close.gif); }

/* 전체 펼침 서브메뉴 영역 */
#header .mega-menu{
  position:absolute; top:80px; left:0; width:100%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.1);
  display:none; z-index:999; padding:0 100px 20px; justify-content:center;
}
/* hover 노출 */
#header .gnb:hover ~ .mega-menu,
#header .mega-menu:hover{ display:flex; opacity:1; pointer-events:auto; }

/* 상단 구분선 (펼쳐졌을 때만 보이게) */
#header::after{
  content:""; display:block; width:100%; height:1px; background:#ddd;
  position:absolute; top:80px; left:0; z-index:998; opacity:0; transition:opacity .3s ease;
}

/* 서브메뉴 그룹 */
#header .mega-menu .menu-group{ flex:0 0 142px; text-align:center; }
#header .mega-menu .menu-group:nth-child(1){ margin-left:270px; }
#header .mega-menu .menu-group h4{ font-size:15px; font-weight:700; margin-bottom:10px; color:#0072ff!important; }
#header .mega-menu .menu-group ul{ list-style:none; padding:0; margin:0; }
#header .mega-menu .menu-group ul li{ margin-bottom:6px; }
#header .mega-menu .menu-group ul li a{ font-size:14px; color:#333; text-decoration:none; }
#header .mega-menu .menu-group ul li a:hover{ color:#0072ff; }

/* 반응형(모바일) */
@media screen and (max-width:960px){
  #header{
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    display:block; background:transparent;
    border-bottom:1px solid rgba(255,255,255,.4);
    z-index:3000;                 /* 배너/캐러셀보다 위 */
  }
  #header #logo{ width:120px; display:block; }
  #header .gnb, #header .mega-menu{ display:none!important; }

  /* 모바일에서만 햄버거 표시 */
  #header .header-inner .menu{ display:block; }

  /* 모바일에선 우측 패널 트리거/패널 숨김(중복 방지) */
  #open-button, #right-side{ display:none!important; }
}

/* ===============================
   오른쪽 퀵메뉴
   =============================== */
.right_quick{ position:absolute; right:0; top:-60px; z-index:2 }
.right_quick.fixed{ position:fixed; right:0; top:189px!important; margin-bottom:50px; z-index:100; }
.right_quick.fixed .material-icons{ color:#fff; float:right }
.right_quick ul.quick_info{ position:relative; height:240px }
.right_quick ul.quick_info li{ position:absolute; height:60px; right:0 }
.right_quick ul.quick_info li:nth-child(1){ top:0 }
.right_quick ul.quick_info li:nth-child(2){ top:60px }
.right_quick ul.quick_info li:nth-child(3){ top:120px }
.right_quick ul.quick_info li:nth-child(4){ top:180px }
.right_quick ul.quick_info li:nth-child(5){ top:240px }
.right_quick ul.quick_info li a{ width:60px; height:60px; text-align:center; background:#343434; overflow:hidden; display:block }
.right_quick ul.quick_info li i{ color:#fff; font-size:24px; }
.right_quick ul.quick_info li i.ico{ position:absolute; right:20px; top:15px; z-index:2 }
.right_quick ul.quick_info li:nth-child(1) i{ right:17px }
.right_quick ul.quick_info li:nth-child(2) i{ right:17px }
.right_quick ul.quick_info li:nth-child(3) i{ right:17px }
.right_quick ul.quick_info li:nth-child(4) i{ right:17px }
.right_quick ul.quick_info li:nth-child(5) i{ right:17px }
.right_quick ul.quick_info li a span{
  height:60px; line-height:60px; color:#fff; position:absolute; text-align:left; opacity:0; left:30px; font-size:14px; font-weight:500; z-index:2
}
.right_quick ul.quick_info li a.kakao span{ color:#000 }
@media screen and (max-width:640px){ .right_quick.fixed{ display:none } }

/* ===============================
   모바일 오른쪽 슬라이드 메뉴(데스크톱에서만 사용)
   =============================== */
#right-side{
  background:#333; position:fixed; z-index:10; top:0; right:-400px; max-width:400px; width:100%;
  height:100%; color:#fff; padding:30px; transition:right .3s ease; box-sizing:border-box; overflow:auto;
}
#right-side .side_gnb .call a{
  text-align:center; display:block; position:relative; background:#6cc043; color:#fff; font-weight:bold;
  height:5em; line-height:5em; border-radius:3px; margin-top:10px; padding:2px 0 4px;
}
#right-side #btn-close-right-side{ position:absolute; top:20px; right:0; color:#fff; width:60px; text-align:center; line-height:40px; font-size:16px; cursor:pointer }
#right-side #btn-close-right-side .fa.fa-times{ font-size:18px; padding-top:20px }
.right-side-on #right-side{ right:0; }
.right-side-on #wrapper{ left:-300px; }
.right-side-on #header{ left:-300px; }
.right-side-on #rs-overlay{ display:block; }

.quick_menu{ width:100%; margin:auto; padding-top:20px }
.quick_menu ul{ text-align:center }
.quick_menu li{ display:inline-block; margin-left:-3px; width:80px; border-right:1px solid #555; }
.quick_menu li:last-child{ border:0 }
.quick_menu li a{ display:block; box-sizing:border-box; color:#f5f5f5; letter-spacing:-.8px; text-align:center; position:relative; font-size:12px }
.quick_menu li a:hover{ color:#fff; backface-visibility:hidden }
.quick_menu li a.on{ color:#fff; border-bottom:2px solid #FF3300 }
.quick_kakao{ text-align:center; height:35px; background:#ffd800; display:inline-block; clear:both }
.quick_kakao a{ display:block; position:relative; background:#ffd800 }
.quick_kakao a img{ display:block; margin:0 auto }

.side_gnb{ position:relative; width:100%; float:left; padding-top:20px; }
.side_gnb p{ color:#fff; text-align:center; padding:20px }
.side_gnb .menu-list{ display:block; position:relative; border-bottom:1px solid #555; margin-top:60px }
.side_gnb .menu-list>li>a{
  display:block; position:relative; color:#fff; font-size:15px; line-height:3.8em; padding:0 1em; border-top:1px solid #555; text-decoration:none
}
.side_gnb .menu-list>li>a i{
  display:block; position:absolute; top:50%; transform:translateY(-75%) rotate(135deg);
  right:1.5em; width:5.31%; max-width:32px; border:1px solid #ddd; border-left-width:0; border-bottom-width:0; transition:transform .3s ease
}
.side_gnb .menu-list>li.on>a i{ transform:translateY(-25%) rotate(315deg) }
.side_gnb .menu-list>li>a i:before{ content:""; display:block; position:relative; padding-top:100% }
.side_gnb .depth-2{ display:none; }
.side_gnb .depth-2>li{ background:#ddd }
.side_gnb .depth-2>li>a{
  display:block; color:#000; font-size:1.2em; line-height:3em; padding:0 1.5em 0 2.2em; border-bottom:1px solid #fff
}
@media screen and (max-width:640px){ .side_gnb .depth-2>li>a{ font-size:16px } }

/* ===============================
   메인배너
   =============================== */
.main-carousel{ max-width:1400px; margin:0 auto; display:block; }
.main-carousel .li{ height:500px; background-size:cover; background-position:center; position:relative }
.main-carousel .li .cover{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:url(../img/main_visual_cover.png) center bottom no-repeat; background-size:cover; min-width:300px; opacity:.6; z-index:1
}
.main-carousel .jarallax{ min-height:500px; }
.main-carousel .img01{ background-image:url(/image/index/main_img01.jpg?5); }
.main-carousel .img02{ background-image:url(/image/index/main_img02.jpg?5); }
.main-carousel .img03{ background-image:url(/image/index/main_img03.jpg?5); }

/* 공통 카피 영역 (기본값: 왼쪽 정렬, 수직 중앙) */
.main-carousel .li .copy_area{
  width:auto; text-align:var(--copy-align, left); color:#fff; position:absolute; top:50%;
  transform:translateY(-50%); z-index:2; left:var(--copy-left,12%); max-width:640px;
}
.main-carousel .li .copy_area h1{ font-size:var(--h1,14px); font-weight:300; line-height:1.3; letter-spacing:.5px; margin:0 0 20px; color:#fff; }
.main-carousel .li .copy_area h2{ font-size:var(--h2,48px); font-weight:700; line-height:1.2; letter-spacing:-2px; margin:0; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.25); }
.main-carousel .li .copy_area h3{ font-size:var(--h3,18px); font-weight:500; line-height:1.5; letter-spacing:-.5px; margin:10px 0 0; color:#fff; opacity:.9; }

/* 배너 1 — 좌측 정렬, 수직 중앙, 기본 크기 약간 확대 */
/* 배너 1 copy_area */
.main-carousel .img01 .copy_area {
  left: 17%;
  top: 30%; /* 조금 더 위 */
  transform: translateY(-30%);
  --copy-align: left;
  max-width: 900px;
}

/* 배너 1 글자 스타일 */
/* 배너 1 텍스트 */
.main-carousel .img01 .copy_area h2 {
  position: relative;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 70px;
  color:#f1fa89;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  z-index: 1;
  
}


/* 배너 2 — 우측 정렬, 살짝 아래로 */
.main-carousel .img02 .copy_area{
  left:auto; right:10%;
  --copy-align: right;
  --h1: 14px;
  --h2: 46px;
  --h3: 17px;
  top:56%;
  transform:translateY(-56%);
  max-width:700px;
}

/* 배너 3 — 가운데 정렬, 상단 40% 위치 */
/* ===============================
   배너 3 (img03) 전용 위치/정렬/타이포
   =============================== */

/* 1) 위치: 왼쪽으로 살짝 당기기 + 좌정렬 */
.main-carousel .img03 .copy_area{
  /* 배경 기준 좌우 위치를 %로 미세조정 */
  left: 36%;             /* ← 여기 숫자만 바꿔가며 미세조정(예: 34~42%) */
  top: 40%;
  transform: translate(-36%, -40%); /* left, top 과 같은 비율로 맞춰줘야 정확히 정렬됨 */
  --copy-align: left;    /* 텍스트 좌정렬 */
  max-width: 820px;      /* 필요시 가로폭 조절 */
}

/* 2) 타이포(슬라이드3 전용 h1/h2/h3) */
.main-carousel .img03 .copy_area h1{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .2px;
  margin: 0 0 12px;
  opacity: .95;
}
.main-carousel .img03 .copy_area h2{
  font-size: 58px;       /* 필요시 54~64px 사이에서 조정 */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1.5px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,.25);
  transform: translateX(-24px); /* 왼쪽으로 24px 이동 */
}
.main-carousel .img03 .copy_area h3{
  font-size: 20px;
  line-height: 1.6;
  margin: 14px 0 0;
  opacity: .95;
  max-width: 52ch;       /* 한 줄 길이 제한(가독) */
}

/* 네비게이션/도트 */
.main-carousel .owl-dots{ position:absolute; width:100%; text-align:center; margin:0 auto; bottom:135px; }
.main-carousel .owl-dots .owl-dot{ background:rgba(255,255,255,.5); width:30px; height:5px; display:inline-block; margin-left:10px }
.main-carousel .owl-dots .owl-dot.active{ background:#fff }
.main-carousel .owl-nav{ position:absolute; width:100%; bottom:50% }
.main-carousel .owl-nav .owl-prev,
.main-carousel .owl-nav .owl-next{
  width:40px; height:40px; font-size:22px; color:#fff; border:none; background:rgba(0,0,0,.3);
  border-radius:50%; text-align:center; line-height:40px; position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; z-index:10;
}
.main-carousel .owl-nav .owl-prev{ left:20px; }
.main-carousel .owl-nav .owl-next{ right:20px; }

/* ===============================
   반응형
   =============================== */

/* 태블릿 */
@media (max-width: 1024px){
  .main-carousel .li{ height:450px; }
  .main-carousel .li .copy_area{ max-width:600px; }
  .main-carousel .li .copy_area h2{ font-size:calc(var(--h2,48px) - 6px); }
  .main-carousel .li .copy_area h3{ font-size:calc(var(--h3,18px) - 1px); }
  .main-carousel .owl-dots{ bottom:110px; }
}

/* 모바일 */
@media (max-width: 768px){
  .main-carousel .li{ height:380px; }
  .main-carousel .li .copy_area{ max-width:86%; left:7%; right:7%; }

  /* 배너 1 — 모바일에서는 좌측 고정 유지 */
  .main-carousel .img01 .copy_area{
    --h2: 34px; --h3: 16px;
    top:54%; transform:translateY(-54%);
  }

  /* 배너 2 — 모바일에서는 우측 정렬 유지 */
  .main-carousel .img02 .copy_area{
    right:7%; left:auto;
    --h2: 32px; --h3: 15px;
    top:58%; transform:translateY(-58%);
  }

  /* 배너 3 — 모바일에서는 중앙 정렬 유지 */
  .main-carousel .img03 .copy_area{
    left:50%; right:auto;
    --h2: 32px; --h3: 15px;
    top:42%; transform:translate(-50%, -42%);
    max-width:90%;
  }

  .main-carousel .owl-dots{ bottom:90px; }
  .main-carousel .owl-nav .owl-prev,
  .main-carousel .owl-nav .owl-next{ width:36px; height:36px; line-height:36px; font-size:20px; }
}

/* 아주 작은 모바일 */
@media (max-width: 420px){
  .main-carousel .li{ height:330px; }
  .main-carousel .li .copy_area h1{ font-size:12px; margin-bottom:12px; }
  .main-carousel .li .copy_area h2{ font-size:calc(var(--h2,30px) - 4px); }
  .main-carousel .li .copy_area h3{ font-size:calc(var(--h3,14px) - 1px); }
  .main-carousel .owl-dots{ bottom:70px; }
}


/* ===============================
   섹션들(후원/사업/공지 등) — 기존 그대로
   =============================== */
.donate-section{ background:#fff; }
.donate-container{ max-width:1400px; margin:0 auto; padding:24px 16px; box-sizing:border-box; }
.donate-head{ text-align:left; margin-bottom:16px; }
.donate-title{ margin:0 0 6px; font-size:clamp(22px,3vw,36px); letter-spacing:-.02em; color:#111; }
.donate-title b{ color:#0b4ad8; font-weight:800; }
.donate-sub{ margin:4px 0 12px; color:#444; line-height:1.6; font-size:clamp(14px,1.2vw,16px); word-break:keep-all; }
.donate-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
.donate-btn{ display:inline-block; border-radius:10px; padding:12px 18px; font-weight:700; text-decoration:none; transition:.2s; }
.donate-btn--primary{ background:#0b4ad8; color:#fff; } .donate-btn--primary:hover{ background:#0736a4; }
.donate-btn--line{ border:2px solid #0b4ad8; color:#0b4ad8; } .donate-btn--line:hover{ background:#eef3ff; }
.donate-btn--ghost{ background:#e9eefc; color:#0b4ad8; }
.donate-meta{ list-style:none; padding:0; margin:8px 0 0; display:flex; gap:16px; flex-wrap:wrap; color:#666; font-size:13px; }
.donate-meta a{ color:#0b4ad8; text-decoration:underline; }
.donate-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:16px; }
@media (max-width:1024px){ .donate-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .donate-grid{ grid-template-columns:1fr; } }
.donate-card{ background:#fff; border:1px solid #eee; border-radius:14px; padding:18px; box-shadow:0 6px 20px rgba(0,0,0,.05); }
.donate-card__ttl{ margin:0 0 6px; font-size:18px; color:#111; }
.donate-card__desc{ margin:6px 0 14px; color:#555; font-size:14px; word-break:keep-all; }
.donate-account{ display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid #e8e8e8; border-radius:10px; padding:10px 12px; background:#fafafa; margin-bottom:8px; }
.donate-account__bank strong{ min-width:44px; display:inline-block; color:#111; }
.donate-account__num{ font-weight:700; letter-spacing:.3px; color:#1a1a1a; }
.donate-copy{ border:none; background:#0b4ad8; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700; }
.donate-copy:hover{ background:#0736a4; }
.donate-card__owner{ font-size:13px; color:#666; margin:8px 0 4px; }
.donate-inline{ display:inline-block; color:#0b4ad8; text-decoration:underline; font-size:13px; }

.donate-quick{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.donate-qbtn{ flex:1 1 auto; text-align:center; background:#0b4ad8; color:#fff; padding:12px; border-radius:10px; font-weight:700; text-decoration:none; }
.donate-qbtn:hover{ background:#0736a4; }
.donate-qrs{ display:flex; gap:12px; flex-wrap:wrap; }
.donate-qr{ width:140px; text-align:center; }
.donate-qr img{ width:100%; display:block; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.donate-qr figcaption{ font-size:12px; color:#666; margin-top:6px; }
.donate-help{ display:block; margin-top:8px; color:#888; font-size:12px; }

.donate-list{ margin:0 0 12px 16px; padding:0; color:#444; font-size:14px; }
.donate-list li{ margin:4px 0; }

.donate-impact{ text-align:center; margin-top:8px; }
.donate-impact h3{ font-size:18px; margin:10px 0; color:#111; }
.donate-impact__grid{ list-style:none; padding:0; margin:0 0 8px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.donate-impact__grid li{ background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; box-shadow:0 6px 20px rgba(0,0,0,.05); color:#333; font-size:14px; }
.donate-impact__grid span{ display:inline-block; margin-right:6px; font-size:18px; }
@media (max-width:768px){ .donate-impact__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .donate-impact__grid{ grid-template-columns:1fr; } }
.donate-card--media{ padding:0; overflow:hidden; border-radius:14px; }
.donate-card--media .donate-media{ display:block; }
.donate-card--media picture, .donate-card--media img{ display:block; width:100%; height:auto; }

/* 사업영역 */
.tl_company_box_wrap{ width:100%; padding:10px 0; }
.tl_company_box_wrap h2{ text-align:center; font-size:30px; color:#333 }
.tl_company_box_wrap h2:before{
  display:block; content:""; width:30px; height:6px; background:#8fd92e; margin:0 auto 20px; border-radius:10px; transform:rotate(30deg);
}
.tl_company_box_wrap h2 span{ display:block; padding:20px 0; color:#555; font-size:16px; font-weight:400 }
.tl_company_box_wrap ul{ margin-top:10px; overflow:hidden }
.tl_company_box_wrap ul li{ width:25%; text-align:center; float:left; display:block }
.tl_company_box_wrap ul li .icon{ display:inline-block; padding:10px }
.tl_company_box_wrap ul li .icon i{ color:#666 }
.tl_company_box_wrap ul li img{ vertical-align:middle; transition:transform 500ms }
.tl_company_box_wrap ul li:hover i{ transform:rotateY(180deg); transition:transform 500ms }
.tl_company_box_wrap ul li .box{ border-right:1px #eaeaea solid; padding:0 10px; display:block }
.tl_company_box_wrap ul li:last-child .box{ border-right:0 }
.tl_company_box_wrap ul li dl dt{ font-weight:bold; padding-bottom:15px; line-height:20px; color:#222; font-size:20px }
.tl_company_box_wrap ul li a{ display:inline-block; margin-top:20px; border:1px #ddd solid; padding:0 20px; line-height:30px; color:#666; transition:all .2s }
.tl_company_box_wrap ul li:hover a{ background:#2253b8; color:#fff; transition:all .3s }
@media screen and (max-width:1024px){ .tl_company_box_wrap ul li{ width:50% } }
@media screen and (max-width:960px){
  .tl_company_box_wrap ul li{ width:100% }
  .tl_company_box_wrap ul li .box{ border-right:0; border-bottom:1px solid #ddd; padding-bottom:30px }
}

/* 제품소개 */
.tl_business_now_box_warp{ width:100%; padding:100px 0; text-align:center; background:#eff1f6; clear:both; }
.tl_business_now_box_warp h2{ font-size:30px; color:#000; line-height:1.6; font-weight:600 }
.tl_business_now_box_warp h2:before{
  display:block; content:""; width:30px; height:6px; background:#8fd92e; margin:0 auto 20px; border-radius:10px; transform:rotate(30deg);
}
.tl_business_now_box_warp span{ padding:10px 10px 50px; font-size:16px; display:block; color:#555; font-weight:400 }

/* PRODUCTS */
.tl_product_box_wrap{ padding:150px 0; max-width:1200px; margin:0 auto; overflow:hidden }
.tl_product_box_wrap h2{ font-size:30px; text-align:center; color:#000; line-height:1.6; font-weight:600 }
.tl_product_box_wrap span{ padding:10px 10px 50px; font-size:16px; text-align:center; display:block; color:#555; letter-spacing:-.02em; font-weight:400 }

/* 메인 공지 최신글 */
.tl_latest_box_warp{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px 100px; border-top:1px solid #ddd; clear:both; overflow:hidden }
.tl_latest_box_warp .notice_latest{ width:48%; float:left }
.tl_latest_box_warp .counsel_latest{ width:48%; float:right }
@media screen and (max-width:960px){
  .tl_latest_box_warp .notice_latest{ width:100% }
  .tl_latest_box_warp .counsel_latest{ width:100% }
}

/* 하단 상담신청 */
.tl_contact_box_wrap{ width:100%; min-height:550px; padding:100px 0; background:url(../img/main_contact_bg.jpg) center top no-repeat; background-size:cover }
.tl_contact_box_wrap .inner{ max-width:600px; margin:0 auto; padding:0 20px 0 }
.tl_contact_box_wrap h2{ text-align:center; font-size:30px; color:#fff; line-height:1.6; font-weight:600 }
.tl_contact_box_wrap h2 span{ padding:10px 0 50px 10px; display:block; font-size:16px; color:#fff; opacity:.8; font-weight:400; letter-spacing:-.02em }
.tl_contact_box_wrap .input_page #co_name{ width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:left; border:0 }
.tl_contact_box_wrap .input_page #co_email{ width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:right; border:0 }
.tl_contact_box_wrap .txtarea_page #co_message{ margin-top:20px; width:100%; height:120px; font-size:15px; color:#6e6e6e; padding:10px 0 0 10px; border:0 }
.tl_contact_box_wrap .send_page{ text-align:center; }
.tl_contact_box_wrap .send_page .send{
  margin:50px 0 0; max-width:142px; height:41px; line-height:41px; padding:0 40px; background:#3949a3;
  font-size:15px; font-weight:bold; color:#fff; border:0; border-radius:20px
}
.tl_contact_box_wrap #x_message{ position:absolute; width:300px; border-radius:10px; height:50px; text-align:center; line-height:50px; top:50px; left:50%; margin-left:-150px; background:#FDD; border:2px solid #C00; font-weight:700; color:#666; z-index:1000 }
.tl_contact_box_wrap #x_loading{ position:absolute; display:none; width:200px; height:200px; top:50px; left:50%; margin-left:-100px; z-index:1; font-size:100px; line-height:200px }
.tl_contact_box_wrap #x_message.x-msg1{ background:#FDD; }
.tl_contact_box_wrap #x_message.x-msg2{ background:#9C6; border:2px solid #096 }

/* 서브 상단 */
.sub_visual{
  width:1400px; height:200px; margin:0 auto; position:relative; overflow:hidden;
  background-repeat:no-repeat; background-position:center top;
}
.sub_visual.visual01 .bg{ background-image:url(../img/sub_visual01.jpg) }
.sub_visual.visual02 .bg{ background-image:url(../img/sub_visual02.jpg) }
.sub_visual.visual03 .bg{ background-image:url(../img/sub_visual03.jpg) }
.sub_visual.visual04 .bg{ background-image:url(../img/sub_visual04.jpg) }
.sub_visual.visual05 .bg{ background-image:url(../img/sub_visual05.jpg) }
.sub_visual:hover .bg{ transform:scale(1.1) }
.sub_visual .title_warp{ max-width:1240px; margin:0 auto; display:table; z-index:5 }
.sub_visual .title_warp .table-cell{ display:table-cell; vertical-align:middle; height:472px; }
.sub_visual h3{ position:relative; z-index:5; font-size:45px; font-weight:bold; text-align:center; letter-spacing:-1px; color:#fff }
.sub_visual .sub_title{ position:relative; padding-bottom:10px; font-size:14px; font-weight:500; color:#fff; text-align:center; opacity:.8; z-index:5 }
.sub_visual .cover{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/sub_visual_cover.png) center bottom no-repeat; background-size:cover; min-width:1200px; opacity:.5; z-index:1 }
.sub_visual .bg{ position:absolute; top:0; left:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; z-index:0; transition:all .5s ease }
@media screen and (max-width:640px){
  .sub_visual .title_warp{ max-width:100%; }
  .sub_visual h3{ font-size:35px; }
  .sub_visual .sub_title{ font-size:13px; }
}

/* 컨텐츠 래퍼 */
.content_wrap{ width:100%; }
.content_wrap .txtCon{ max-width:1300px; margin:0 auto; padding:60px 20px 50px; font-weight:400; position:relative; clear:both }
.content_wrap .txtCon .sub_title{ margin-bottom:100px }
.content_wrap .txtCon .sub_title h1{ font-size:38px; color:#000; text-align:center }
.content_wrap .txtCon .sub_title h1:before{ content:""; display:block; height:40px; width:1px; margin:20px auto; background:#b0b0b0 }
.content_wrap .txtCon .sub_title .sub_title{ font-size:16px; color:#555; font-weight:400; text-align:center; padding-top:20px; word-break:keep-all; }
.content_wrap .txtboard{ max-width:1200px; font-size:12px; }
@media screen and (max-width:640px){ .content_wrap .txtCon .sub_title h1{ font-size:32px } }

/* 서브 하단 네비 */
.category-wrap{ width:100%; height:70px; background:#fff; border-bottom:1px solid #ddd; clear:both; background-attachment:scroll; position:relative; z-index:3 }
.sub_navI_warp{ background:#fff; max-width:1300px; z-index:3; position:relative; margin:-70px auto; }
.all-wrap{ max-width:1300px; height:69px; margin:0 auto; transition:all .3s ease; }
.all-wrap .loca-wrap{ width:100%; margin:0 auto; height:69px }
.all-wrap .loca-wrap .loca-area i{ float:left; display:inline-block; width:60px; height:71px; line-height:65px; color:#555; border-right:1px solid #ddd; padding:0; margin-top:0; text-align:center }
.all-wrap .loca-wrap .loca-area{ height:69px; float:left; }
.all-wrap .loca-wrap .loca-area>a{ display:inline-block; width:54px; height:100%; float:left; line-height:100%; text-align:center; }
.all-wrap .loca-wrap .loca-area>a img{ margin-top:17px; }
.all-wrap .loca-wrap .loca-area>ul{ float:left; margin:0; padding:0; }
.all-wrap .loca-wrap .loca-area>ul>li{ float:left; width:220px; height:70px; position:relative; margin-left:-1px }
.all-wrap .loca-wrap .loca-area>ul>li button{
  height:69px; width:220px; position:relative; text-align:left;
  background-image:url(../img/loca_arrow_off.png); background-position:100% 50%; background-repeat:no-repeat; transition:background .3s ease;
  border:0; background-color:inherit; box-sizing:border-box; border-left:1px solid #ddd; border-right:1px solid #ddd;
}
.all-wrap .loca-wrap .loca-area>ul>li button.active{ background-image:url(../img/loca_arrow_on.png); }
.all-wrap .loca-wrap .loca-area>ul>li button span{ padding-left:19px; background:transparent; color:#333; font-size:15px }
.all-wrap .loca-wrap .loca-area>ul>li div{ overflow:hidden; height:0; position:relative }
.all-wrap .loca-wrap .loca-area>ul>li div ul{ display:block; position:absolute; width:100%; left:0; border:1px solid #ddd; background:#fff; padding:0 }
.all-wrap .loca-wrap .loca-area>ul>li div ul li a{ border-bottom:1px solid #ddd; background:#fff; height:46px; color:#555; line-height:46px; display:block; transition:background .3s ease; padding-left:19px; font-size:15px; box-sizing:border-box }
.all-wrap .loca-wrap .loca-area>ul>li div ul li a:hover{ color:#000; font-weight:bold }
.all-wrap .loca-wrap .share-area{ float:right; display:block; padding-top:16px; box-sizing:border-box; }
.all-wrap .loca-wrap .share-area .hide-wrap{ width:151px; height:34px; overflow:hidden; float:left }
.all-wrap .loca-wrap .share-area .hide-wrap .hide-area{ width:151px; height:34px; position:relative; left:200px }
.all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul{ overflow:hidden; padding:0; margin:0 }
.all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li{ float:left; margin-left:13px; border-bottom:1px solid #ddd; cursor:pointer }
.all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li:first-child{ margin-left:0; }
.all-wrap .loca-wrap .share-area .share-btn{
  width:34px; height:34px; background-image:url(../img/share_open_bt.png); float:right; text-indent:-9999px; padding-left:18px; box-sizing:unset;
  background-repeat:no-repeat; background-position:right; transition:all .5s ease; background-color:inherit; border:0; margin-right:20px
}
.all-wrap .loca-wrap .share-area .share-btn.active{ background-image:url(../img/share_close_bt.png); border-left:1px solid #fff; }

@media screen and (max-width:640px){
  .all-wrap .loca-wrap .loca-area{ width:100%; float:none; }
  .all-wrap .loca-wrap .loca-area>a{ width:10%; }
  .all-wrap .loca-wrap .share-area{ display:none }
  .all-wrap .loca-wrap .loca-area>ul{ width:100%; }
  .all-wrap .loca-wrap .loca-area>ul>li{ width:50%; }
  .all-wrap .loca-wrap .loca-area>ul>li:first-child{ border:0 }
  .all-wrap .loca-wrap .loca-area>ul>li button{ width:100%; border-right:0 }
  .all-wrap .loca-wrap .loca-area i{ display:none }
}

/* 푸터 */
#footer{ padding:30px 1px; width:100%; max-width:2560px; position:relative; z-index:10; background:#f0f0f0; clear:both }
#footer .footer_in{ position:relative; z-index:10; max-width:1200px; height:224px; padding:0 10px; margin:0 auto; }
#footer .gotop{ position:fixed; left:0; bottom:20px; width:100%; min-width:1080px; height:1px; text-align:center; }
#footer .gotop a{ position:absolute; right:7px; bottom:0; }
#footer .menu{ display:block; padding:7px 0 0; }
#footer .menu a{ display:inline-block; margin-right:28px; font-size:14px; font-weight:bold; color:#bbb; }
#footer .menu a:active{ font-size:14px; }
#footer .menu a strong{ color:#f36910; }
#footer address{ position:relative; margin:35px 0 0; padding-top:37px; border-top:1px solid #414141; font-size:14px; color:#a9a9a9; }
#footer .adr{ display:block; margin:0 0 6px; vertical-align:middle; font-style:normal; }
#footer .adr:before{ content:""; display:inline-block; width:3px; height:3px; margin:0 8px 0 0; border-radius:3px; background:#fff; vertical-align:middle; }
#footer .copyright{ display:block; margin:22px 0 0; font-size:11px; font-style:normal; }
#footer a.wa{ position:absolute; right:0; top:37px; }

/* 푸터 팝업 */
.tl_pop_con{ background:#fff; }
.tl_pop_con h2.f_pop_tit{ width:100%; height:80px; line-height:80px; font-size:20px; color:#fff; }
.tl_pop_con h2.f_pop_tit img{ display:inline-block; margin-left:50px; margin-right:5px; margin-top:-10px; width:120px; }
.tl_pop_con h2.f_pop_tit span{ display:inline-block; padding-left:50px; }
.f_pop_wrap{ line-height:23px; text-align:justify; word-break:break-all; font-size:15px; overflow-y:auto; }
.f_pop_wrap strong{ color:#00a19a; font-weight:normal; }
.f_pop_wrap p{ color:#333; padding:40px 50px; line-height:1.6; }
.mfp-close:after{
  content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0;
  background:url("../img/btn_close.png") no-repeat center center; transition:transform 300ms; border-radius:50%;
}
.mfp-close{ width:40px; height:40px; text-indent:-999px; opacity:1; overflow:hidden; background:transparent; border:0; }
button.mfp-close:hover:after{ transform:rotate(270deg); }

/* 모바일 전용(스크롤 시 상태/오른쪽 버튼) */
@media screen and (max-width:960px){
  .scrolled #header{ background:#fff; border-bottom:1px solid #ddd; }
  .scrolled #open-button .nl1,
  .scrolled #open-button .nl2,
  .scrolled #open-button .nl3,
  .scrolled #open-button .navicon-line{ background:#333; }
  .scrolled #open-button.on .navicon-line{ background:#fff; }

  /* (참고) #open-button 자체는 위에서 display:none 처리됨 */
}


/* ===== Mobile menu (header) ===== */
@media (max-width:960px){
  #header .mobile-menu{
    position:fixed;
    top:80px;               /* 헤더 높이만큼 */
    left:0;
    width:100%;
    height:calc(100vh - 80px);
    background:rgba(255,255,255,.98);
    border-top:1px solid #eee;
    z-index:2500;
    overflow:auto;
    padding:8px 0;
    display:none;           /* JS로 토글 */
  }

  /* 1뎁스 */
  #header .mobile-menu .menu-list{ list-style:none; margin:0; padding:0; }
  #header .mobile-menu .menu-list > li{
    border-bottom:1px solid #eee;
  }
  #header .mobile-menu .menu-list > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:16px 18px;
    font-size:16px;
    font-weight:800;
    color:#111;
    text-decoration:none;
  }

  /* 서브가 있는 항목 화살표 */
  #header .mobile-menu .menu-list > li.has-sub > a::after{
    content:"";
    width:12px; height:12px;
    border-right:2px solid #999;
    border-bottom:2px solid #999;
    transform:rotate(45deg);
    transition:transform .2s ease;
  }
  #header .mobile-menu .menu-list > li.open > a::after{
    transform:rotate(-135deg);
  }

  /* 2뎁스 래퍼 */
  #header .mobile-menu .menu-list > li > ul{
    display:none;
    background:#f7f9ff;                 /* 서브 배경색으로 구분 */
    padding:6px 0;
  }
  #header .mobile-menu .menu-list > li > ul > li > a{
    display:block;
    padding:12px 26px 12px 28px;        /* 들여쓰기 */
    font-size:15px;
    font-weight:600;
    color:#333;
    text-decoration:none;
  }
  #header .mobile-menu .menu-list > li > ul > li > a:hover{
    background:#eaf1ff;
    color:#0b4ad8;
  }

  /* 섹션 머리 느낌으로 간격 */
  #header .mobile-menu .menu-list > li:first-child{
    border-top:1px solid #eee;
  }
}