@charset "euc-kr";

/* 기본 리셋 */
body { margin:0px; }
body, td, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, figure, textarea {
  font-family: Nanum Gothic, sans-serif;
  font-size: 11pt;
  color: #000;
  line-height: 140%;
  -webkit-text-size-adjust:none;
}
img { border:0; }
h1, h2, h3, h4, h5, figure, p, iframe { padding:0; margin:0; font-weight:normal; }
ul, li { padding:0; margin:0; list-style:none; }

/* 본문 공통 너비 컨테이너 */
#fixNextTag article { 
  width:1200px; 
  margin:0 auto; 
}

.top_text { margin-bottom:45px; }
.top_text h2 { font-size:40px; font-family:'Nanum Square'; font-weight:bold; }
.top_text h3 { font-size:28px; font-family:'Nanum Square'; font-weight:bold; }
.top_text .bar { width:100%; height:2px; margin:10px 0px; }

/* page 00 */
#page00 {
  background:url(/skin/business6075/gnuboard4/images/00bg.jpg) bottom center no-repeat;
  background-attachment: fixed;
  padding:120px 0px;
  height:50vh;
}
#page00_text {
  padding: 60px 0;
  background: #fff; /* 혹은 #f9f9f9 */
  text-align: center;
}
#page00_text .main_text_wrap h2 {
  font-size: 40px;
  font-family:'Nanum Square';
  font-weight:bold;
  color:#424242;
  margin-bottom: 20px;
}
#page00_text .main_text_wrap .normal {
  font-size: 18px;
  line-height: 30px;
  color:#424242;
  margin-bottom: 30px;
}
#page00_text .bt a {
  display:inline-block;
  font-size:16px;
  font-family:'Nanum Square';
  width:150px;
  padding:15px 0;
  text-decoration:none;
  color:#fff;
  text-align:center;
  margin: 0 10px;
}
#page00_text .bt a:nth-child(1) { background:#5789D2; }
#page00_text .bt a:nth-child(2) { background:#606168; }

/* page01 */
#page01 {
  padding:120px 0px 120px 0px;
  background:#f7f8f9;
}
#page01 article figure {
  width:400px;
  float:left;
  text-align:center;
}
#page01 article h3 {
  font-size:22px;
  font-family:'Nanum Square';
  font-weight:bold;
  color:#424242;
  margin:20px 0px;
}

/* ========== 게시판 미리보기 섹션 (NOTICE) ========== */
#notice {
  padding:60px 0px;
  color:#333;
}
#notice article {
  width:1200px;
  margin:0 auto;
}
.board_preview_wrap {
  background:rgba(255,255,255,0.8);
  padding:40px 30px;
  border-radius:8px;
}
.board_preview_wrap h2 {
  font-size:30px;
  font-family:'Nanum Square';
  font-weight:bold;
  color:#424242;
  text-align:center;
  margin-bottom:30px;
}
.board_preview_list {
  max-width:800px;
  margin:0 auto;
}
.board_preview_list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #e1e1e1;
}
.board_preview_list li a {
  font-size:15px;
  color:#333;
  text-decoration:none;
  transition: color 0.2s;
}
.board_preview_list li a:hover {
  color:#5789D2;
}
.board_preview_list li .date {
  font-size:12px;
  color:#999;
  margin-left:10px;
}
.more_btn {
  text-align:center;
  margin-top:20px;
}
.more_btn a {
  display:inline-block;
  background:#5789D2;
  color:#fff;
  padding:10px 25px;
  text-decoration:none;
  font-size:14px;
  font-family:'Nanum Square';
  border-radius:5px;
}
.more_btn a:hover {
  background:#9e7b63;
}

/* page02 */
#page02 .banner {
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  overflow:hidden;
}
#page02 .banner article {
  width:50%;
  height:auto;
  float:left;
  margin:0;
  padding:0;
  position:relative;
}
#page02 .banner:nth-child(odd) article:nth-child(1) { float:left; }
#page02 .banner:nth-child(odd) article:nth-child(2) { float:right; }
#page02 .banner:nth-child(even) article:nth-child(1) { float:right; }
#page02 .banner:nth-child(even) article:nth-child(2) { float:left; }
#page02 .banner .text {
  padding:20px;
  box-sizing: border-box;
}
#page02 .banner .text h3 {
  font-size:28px;
  font-family:'Nanum Square';
  font-weight:bold;
  color:#424242;
  margin-top:0;
}
#page02 .banner .bar {
  width:50px;
  height:3px;
  background:#5789D2;
  margin:20px 0px;
}

/* 이미지설정 */
#page02 .banner article {
  background-size: contain; /* cover -> contain 으로 변경 */
  background-repeat: no-repeat;
  background-position: center;
}
/* 이미지설정 끝*/
/* page03 */
#page03 {
  height:auto;
  padding:0px 0;
}

/* page04 */
#page04 {
  background:url(/skin/business6075/gnuboard4/images/04bg.jpg) bottom center no-repeat;
  background-attachment: fixed;
  padding:120px 0px 60px 0px;
}
#page04 .page04_from {
  background:#fff;
  width:480px;
  padding:10px;
}
#page04 .page04_con {
  box-sizing:border-box;
  border:3px solid #5789D2;
  padding:45px 35px;
}
#page04 .page04_con h3 {
  font-size:18px;
  font-weight:bold;
  font-family:'Nanum Square';
  color:#535353;
  margin-bottom:30px;
}
#page04 .page04_con h3 span {
  display:block;
  font-size:34px;
  line-height:120%;
  color:#5789D2;
}

/* 푸터 */
footer {
  background:#2b2b2b;
}
.copy {
  padding:50px 0px;
  font-size:10pt;
  color:#fff;
  line-height:135%;
  text-align:center;
}

/* ===== 상단 메뉴(header) 영역 ===== */
/* /** 변경 부분: left, right 둘 다 지정 + text-align:right 유지 **/
.top_bar_fix, .top_fix_zone {
  position: fixed;
  top: 0px;
  left: 0px;        /* 화면 왼쪽부터 */
  right: 0px;       /* 화면 오른쪽까지 */
  z-index: 999 !important;
  text-align: right; /* PC에서는 우측 정렬 */
  width: 100%;
}

#topmenu {
  width:1200px;
  margin:0 auto;
  z-index:10000;
  position:relative;
}
#topmenu ul, #topmenu h1 {
  float:left;
}
#topmenu ul {
  width:78%;
}
#topmenu h1 {
  width:22%;
}
#topmenu ul li {
  display:inline-block;
}

.top_bar_fix {
  background:rgba(0,0,0,0.7) !important;
}
.top_fix_zone {
  background-color:none;
  padding:13px 0px;
}
.top_fix_zone #topmenu a {
  color:#fff;
  text-decoration:none;
  font-size:14pt;
  font-weight:bold;
  padding-right:20px;
  line-height:26pt;
}
.top_bar_fix #topmenu a {
  color:#424242 !important;
}
.top_bar_fix #topmenu a:hover {
  color:#fff !important;
}
.top_fix_zone #topmenu a:hover {
  color:#333;
}
/* 로고 영역에 마진을 두어 왼쪽으로 벗어나지 않도록 */
.top_fix_zone #logo {
  width:auto;
  height:auto;
  margin-left:10px;  /* 왼쪽 여백 */
  float:left;
}

/* 폼메일 */
#online {
  width:100%;
}
#online td {
  padding:0px 0px;
}
#online .from_title {
  color:#505050;
  font-size:17px;
  width:70px;
  font-family:'Nanum Square';
  font-weight:bold;
}
#online_btn {
  width:100%;
  text-align:center;
}
.from_con {
  width:100%;
  height:30px;
  margin-bottom:15px;
}
.from_con input {
  width:400px;
  height:30px;
  color:#535353;
  font-size:16px;
  border:1px solid #e0e0e0;
}
textarea {
  width:398px;
  height:140px;
  color:#535353;
  font-size:16px;
  border:1px solid #e0e0e0;
}
#from_button {
  margin-top:15px;
}
#from_button input {
  width:100%;
  font-family:'Nanum Square';
  text-align:center;
  font-size:18px;
  font-weight:bold;
  color:#ba9257;
  padding:10px 0px;
  box-sizing:border-box;
  border:2px solid #5789D2;
  background:#fff;
}

/* PC에서는 햄버거 버튼 숨김 */
label.hamburger,
#toggle {
  display: none;
}

/* ========== 반응형 (768px 이하) ========== */
@media all and (max-width: 768px) {


  /* 가로 스크롤 없애기 (필요시) */
  html, body {
    max-width: 100%;
    overflow-x: hidden; /* /** 변경 부분: 모바일에서 가로 스크롤 제거 **/
  }

  /* 모바일에서 헤더 왼쪽 정렬로 변경 */
  .top_fix_zone {
    background-color: #fff !important; /* 헤더 배경 흰색 */
    padding:10px;
    text-align:left !important; /* /** 변경 부분: 모바일에서 왼쪽 정렬 **/
    height:auto;
  }

  /* 본문 컨테이너 폭 100% */
  #fixNextTag article {
    width:100%;
    margin:0 auto;
  }
  
  #topmenu {
    width:100%;
    margin:0;
    position:relative;
    height:auto;
  }

  /* 로고: float:left + 기본 여백 최소화 */
  #topmenu #logo {
    float:left;
    margin:0 0 0 10px;
  }

  /* 햄버거 버튼: 화면 왼쪽에 배치 */
  #toggle {
    display: none; /* 체크박스 자체는 숨김 */
  }
  label.hamburger {
    display:inline-block;
    float:right;
    font-size:30px;
    font-weight:bold;
    color:#000;
    cursor:pointer;
    background:#fff;
    margin-right:10px;  /* /** 변경 부분: 필요 시 조절 */
    padding:5px 10px;
    box-sizing:border-box;
  }

  /* 드롭다운 메뉴 (가로 100%, 중앙 정렬, 라인 제거) */
  #nav {
    width:100%;
    display:none;
    background:#fff;    /* 화이트 배경 */
    padding:0;
    margin:0 auto;
    box-sizing:border-box;
    text-align:center;  /* 중앙 정렬 */
  }
  #toggle:checked + label.hamburger + #nav {
    display:block; /* 햄버거 클릭 시 펼쳐짐 */
  }

  /* 메뉴 아이템: 라인 제거, 중앙 정렬 */
  #nav li {
    display:block;
    width:100%;
    padding:10px;
    margin:0;
    border:none; /* 라인 제거 */
  }
  #nav li a {
    color:#000;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
  }

  /* 페이지 섹션 반응형 */
  #page00 .main_text {
    text-align:center;
    margin:0;
  }
  #page01 {
    padding:60px 0px;
    background:#fff;
  }
  #page01 article figure {
    width:100%;
    float:none;
  }
  #page01 article figure:nth-child(2) {
    margin:40px 0px;
  }
  #notice {
    padding:40px 0px;
  }
  .board_preview_wrap {
    margin:0 10px;
    padding:20px;
  }
  .board_preview_list {
    max-width:100%;
  }
  #page02 .banner {
    height:auto;
  }
  #page02 .banner article {
    width:100%;
    float:none;
    height:auto;
  }
  #page02 .banner .text {
    padding:20px;
    box-sizing:border-box;
  }
  #page03 {
    height:auto;
    padding:30px 0;
  }
  #page04 .page04_from {
    width: 80%;          /* 혹은 100%로 주고 padding/box-sizing 조절 */
    max-width: 480px;    /* PC에서는 최대폭 480px */
    margin: 0 auto;
  }
  

  .from_con input,
  textarea {
    width: 100% !important;
    box-sizing: border-box;
  }  
}
#page02 .banner article img {
  width: 100%;
  height: auto;
  display: block;
}
@media all and (max-width: 768px) {
  #toggle:checked + label.hamburger + #nav {
    background: #5789D2; /* 토글 열렸을 때 메뉴 배경 */
  }
  #toggle:checked + label.hamburger + #nav li a {
    color: #fff !important; /* 글자 색을 흰색으로 */
  }
}
#toggle:checked + label.hamburger + #nav li a {
  color: #fff !important;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 살짝 그림자 */
}

@media all and (max-width: 768px) {
  #page00 .main_text h2 {
    font-size: 28px;
    line-height: 36px;
  }
  #page00 .main_text .normal {
    font-size: 14px;
    line-height: 24px;
  }
}
@media all and (max-width: 768px) {
  #page00 .main_text {
    margin-top: 40px; /* 모바일에서 위 여백 */
  }
}
#page00 .main_text {
  margin-top: 60px; /* 추가 */
}
#page00 .main_text {
  padding-top: 200px;
}
@media all and (max-width: 768px) {
  #page00 .main_text {
    padding-top: 100px;
  }
}
/* ===== 상단 메뉴 전체 글자 색상 흰색으로 ===== */
#topmenu a,
#topmenu h1 a,
#nav li a {
  color: #fff !important;
}

/* 스크롤 후 fixed 메뉴에서도 흰색 유지 */
.top_bar_fix #topmenu a,
.top_bar_fix #topmenu h1 a,
.top_bar_fix #nav li a {
  color: #fff !important;
}

/* 모바일 토글 메뉴 열렸을 때도 흰색 유지 */
@media all and (max-width: 768px) {
  #nav {
    background: rgba(0,0,0,0.8); /* 배경 어두운 색 */
  }
  #nav li a {
    color: #fff !important;
  }
}
#page00 {
  background: url('/imgs/01.jpg') center/cover no-repeat;
  width: 100%;
  aspect-ratio: 16 / 9;
  transition: background-size 0.3s ease;
}

/* 모바일: background-size: contain 강제 적용 + 높이 지정 */
@media all and (max-width: 768px) {
  #page00 {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center;
    aspect-ratio: auto;
    height: 320px;  /* 더 작게 하고 싶으면 200px~230px 정도로 조절 가능 */
  }
}
/* PC, 태블릿에서는 background cover */
#page00 {
  background: url('/imgs/01.jpg') center/cover no-repeat;
  height: 50vh;
  width: 100%;
}

/* 모바일: background 없애고 img 보여주기 */
@media all and (max-width: 768px) {
  #page00 {
    background: none !important;
    height: auto;
  }
  #page00 img.main-banner-img {
    display: block !important;
    width: 100%;
    height: auto;
  }
}

/* 기본 상태에서는 img 숨김 */
#page00 img.main-banner-img {
  display: none;
}
.floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

/* 공통 버튼 스타일 */
.floating-buttons a {
  display: block;
  font-weight: bold;
  padding: 12px 18px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  font-size: 14px;
  transition: all 0.3s ease;
}

/* 카카오톡 버튼 */
.floating-kakao {
  background: #ffeb00;
  color: #3c1e1e;
}
.floating-kakao:hover {
  background: #ffe000;
}

/* 전화 버튼 - 예시로 초록색 */
.floating-call {
  background: #4CAF50;
  color: #fff;
}
.floating-call:hover {
  background: #45a049;
}