@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
* {
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
}
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400; /*Regular*/
  line-height:1.5;
  letter-spacing: -0.025rem;
}
html, body {
  height:100%;
}
.w1440 {
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 20px;
}

/* 반응형 컨테이너 */
.w1400 {
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 20px;
}

/* 반응형 유틸리티 */
.container-responsive {
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 20px;
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
  .w1440,
  .w1400,
  .container-responsive {
    padding:0 16px;
  }
  
  .top150 {
    margin-top:80px;
  }
  
  .top140 {
    margin-top:50px;
  }
  
  .bottom70 {
    margin-bottom:40px;
  }
}
:root {
  --color-main:#0D7A0E;
  --color-sub:#F1F7F1;
  --color-point:#FFED68;
  --color-point2:#7DE97E;
  --color-red:#EE0606;
  --color-f8:#f8f8f8;
  --color-f9:#f9f9f9;
  --color-e8:#e8e8e8;
  --color-b8:#b8b8b8;
  --color-e1:#e1e1e1;
  --color-e9:#e9e9e9;
  --color-76:#767676;
  --color-57:#575757;
  --color-cc:#ccc;
  --color-bb:#bbb;
  --color-11:#111;
  --color-66:#666;
  --color-99:#999;
  --color-1d1d1f:#1d1d1f;
}
.mc {
  color:var(--color-main);
}
.roundTitle16 {
  padding-left:16px;
}
::selection {
  color: var(--color-main);
  background-color: var(--color-sub);
}
.fSize24 {
  font-size:24px;
}
.fBold {
  font-weight: 700;
}
.fBlack {
  color:var(--color-111);
}
.fRed {
  color:var(--color-red);
}
.fPoint2 {
  color:var(--color-point2);
}
::placeholder {
  color:var(--color-b8);
  font-family:"Pretendard Variable";
}
.cardBox {
  transition:.3s;
}
.cardBox:hover {
  background-color:var(--color-sub);
  border:solid 1px var(--color-main);
  cursor: pointer;
}
.top150 {
  margin-top:150px;
}
.top140 {
  margin-top:140px;
}
.bottom70 {
  margin-bottom:70px;
}

header {
  width:100%;
  height:100px;
  background-color:rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  position: fixed;
  top:0;
  transition:1s;
  z-index:50;
  /* outline:solid 1px black; */
}

/* 모바일 헤더 */
@media (max-width: 768px) {
  header {
    height:70px;
  }
  
  header .w1440 {
    flex-direction: row;
    align-items: center;
    padding:10px 16px;
  }
  

  
  /* 데스크톱 네비게이션 숨김 */
  .desktop-nav {
    display: none;
  }
  
  /* 모바일에서는 모든 메뉴 항목이 100% 넓이 */
  header nav > ul > li {
    width: 100% !important;
  }
  
  header nav > ul > li:nth-child(3),
  header nav > ul > li:nth-child(4) {
    width: 100% !important;
  }
  

  
  /* 메가메뉴 숨김 */
  .megaMenu {
    display: none;
  }
}
header.hide {
  transform: translateY(-100%);
}
header .w1440 {
  display:flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* 헤더 로고 */
.header-logo {
  z-index: 51;
}

/* 햄버거 메뉴 버튼 */
.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 51;
  padding: 3px;
  position: relative;
}

/* 모바일에서 햄버거 메뉴 버튼 표시 */
@media (max-width: 768px) {
  .hamburger-menu {
    display: flex;
  }
}

.hamburger-menu span {
  width: 20px;
  height: 2px;
  background-color: var(--color-main);
  margin: 3px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
  display: block;
  transform-origin: center;
}

/* 햄버거 메뉴 애니메이션 */
.hamburger-menu.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-4px, 7.5px);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(45deg) translate(-4px, -7.5px);
}

/* 모바일 메뉴 */
.mobile-nav {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: calc(100vh - 70px);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 9999;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  -webkit-overflow-scrolling: touch;
}

/* 모바일에서 모바일 메뉴 표시 */
@media (max-width: 768px) {
  .mobile-nav {
    display: block;
  }
  
  .mobile-nav > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  
  .mobile-nav > ul > li {
    width: 100% !important;
    display: flex;
    flex-direction: column;
  }
  
  .mobile-nav > ul > li > a {
    flex: 1;
  }
  
  /* 데스크톱 버전의 고정 넓이 설정 무시 */
  .mobile-nav > ul > li:nth-child(3),
  .mobile-nav > ul > li:nth-child(4) {
    width: 100% !important;
  }
}

.mobile-nav.active {
  transform: translateX(0);
}



.mobile-nav ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.mobile-nav > ul > li {
  border-bottom: 1px solid var(--color-e8);
  margin-bottom: 0;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav > ul > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1d1d1f);
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border-left: 4px solid transparent;
  min-height: 36px;
  word-break: keep-all;
  line-height: 1.2;
  position: relative;
  gap: 8px;
}



.mobile-nav > ul > li > a:hover,
.mobile-nav > ul > li > a:active {
  background-color: var(--color-f8);
  color: var(--color-1d1d1f);
  border-left: 4px solid transparent;
}

.mobile-nav > ul > li:first-child {
  border-top: 1px solid var(--color-e8);
}

/* 드롭다운 아이콘 */
.dropdown-icon {
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  opacity: 0.8;
}

.mobile-nav > ul > li > a:hover .dropdown-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  opacity: 1;
}

.mobile-submenu.active ~ a .dropdown-icon {
  transform: rotate(180deg);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  opacity: 1;
}

/* 모바일 서브메뉴 */
.mobile-submenu {
  display: none;
  background-color: var(--color-f8);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-e8);
}

.mobile-submenu.active {
  display: block;
}

.mobile-submenu li {
  margin: 0;
  width: 100%;
}

.mobile-submenu a {
  display: block;
  padding: 12px 24px 4px 24px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-66);
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--color-e8);
  min-height: 40px;
  word-break: keep-all;
  line-height: 1.2;
}

.mobile-submenu a:hover,
.mobile-submenu a:active {
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--color-1d1d1f);
  border-left: 4px solid transparent;
}

.mobile-submenu li:last-child a {
  border-bottom: none;
}


header nav > ul {
  display:flex;
  gap:24px;
}
header nav a {
  color:black;
}
header nav > ul > li {
  font-weight: 500;
  width:120px;
  position:relative;
}
header nav > ul > li:nth-child(3) { /* 컨설팅 */
  width:90px;
}
header nav > ul > li:nth-child(4) { /* 브랜드 보호 안내 */
  width:150px;
}
header nav > ul > li > a {
  display:block;
  height:100px;
  display:flex;
  justify-content:flex-start;
  align-items: center;
  transition:.3s;
  position:relative;
  font-size:18px;
  /* outline: solid 1px black; */
}
header nav > ul > li.hover > a {
  color:var(--color-main);
  font-weight: 700;
}


/* meega menu */
.megaMenu {
  width:100%;
  background-color:rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  position: absolute;
  z-index:50;
  /* display:none; */
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s;
  /* height: 0; */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow:4px 4px 4px rgba(0, 0, 0, 0.026);
}
.megaMenu.active {
  /* display: block; */
  opacity: 1;
  visibility: visible;
  /* height:auto; */
}
.megaMenu .w1440 {
  position: relative;
  display:flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap:24px;
}
.megaMenu > ul {
  display:flex;
}
.megaMenu > ul > li {
  width:120px;
  margin-bottom:42px;
  /* outline: solid 1px red; */
}
.megaMenu > ul > li:nth-child(3) {
  width:90px;
}
.megaMenu > ul > li:nth-child(4) {
  width:150px;
}
.megaMenu > ul > li > a {
  display:block;
  margin-bottom:20px;
  font-size:18px;
  color:var(--color-1d1d1f);
  transition:.3s;
  word-break: keep-all;
  position:relative;
}
.megaMenu > ul > li > a:first-of-type {
  margin-top:16px;
}
.megaMenu > ul > li > a:hover {
  color:var(--color-main);
}

/**/
/*footer*/
footer {
  width:100%;
  background-color:var(--color-f8);
  padding:100px 0;
  margin-top:180px;
}

/* 태블릿 푸터 반응형 */
@media (max-width: 1024px) {
  footer nav > ul {
    flex-wrap: wrap;
    gap:20px;
  }
  
  footer nav > ul > li {
    width:calc(33.33% - 14px);
  }
}

/* 모바일 푸터 반응형 */
@media (max-width: 768px) {
  footer {
    padding:60px 16px;
    margin-top:60px;
  }
  
  footer .w1440 {
    padding: 0 !important;
  }
  
  .footer_info {
    flex-direction: column !important;
    gap:24px !important;
    width:100% !important;
    margin-top: 24px !important;
  }
  
  .footer_info address {
    width:100% !important;
    padding: 0 !important;
  }
  
  .footer_info address ul {
    gap:0 !important;
    width:100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .footer_info address li {
    display: block !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    padding: 16px !important;
    background-color: rgba(248, 248, 248, 0.5) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  
  .footer_info address li p {
    font-size:14px !important;
    width:100% !important;
    color:var(--color-76) !important;
    margin-bottom: 4px !important;
    text-align: left !important;
    font-weight: 600 !important;
    display: block !important;
  }
  
  .footer_info address li span {
    font-size:14px !important;
    color:var(--color-1d1d1f) !important;
    width:100% !important;
    word-break: keep-all !important;
    line-height: 1.4 !important;
    text-align: left !important;
    display: block !important;
  }
  
  /* 모바일에서 푸터 네비게이션 숨김 */
  footer nav {
    display: none;
  }
  
  .copyright {
    flex-direction: column;
    gap:16px;
    text-align: center;
    padding:16px 24px;
    margin-top:24px !important;
  }
  
  .footer_PerInfo {
    gap:16px;
  }
}
.footerLogo {
  width:100%;
  display:flex;
  justify-content: flex-start;
}
.footer_info {
  display:flex;
  margin-top:52px;
}
/* address */
.footer_info address {
  font-style: normal;
  width:40%;
}
.footer_info address ul {
  display:flex;
  flex-direction: column;
}
.footer_info address li {
  display:flex;
  margin-bottom:14px;
}
.footer_info address li p {
  font-weight: 600;
  width:24%;
}
/* footer nav */
footer nav {
  width:60%;
}
footer nav > ul {
  display:flex;
  justify-content:space-between;
}
footer nav > ul > li:nth-child(6) {
  width:80px;
}
footer nav > ul > li > a {
  color:black;
  font-size:16px;
  font-weight: 600;
  display:block;
  margin-bottom:32px;
}
footer nav > ul > li > ul {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}
footer nav > ul > li > ul > li > a {
  color:var(--color-66);
  font-size:14px;
  font-weight: 400;
}

/* copyright */
.copyright {
  width:100%;
  background-color:white;
  border-radius: 12px;
  padding:12px 52px 12px 42px;
  margin-top:72px;

  display:flex;
  justify-content: space-between;
  align-items:center;
}
.footer_PerInfo {
  display:flex;
  gap:32px;
}
.footer_PerInfo a {
  font-weight: 600;
  color:black;
}



/*Bread Crumb*/
.breadcrumb {
  /* margin-top:20px; */
  margin-top:124px;
}
.breadcrumb > ul {
  display:flex;
  align-items:center;
  gap:12px;
}
.breadcrumb > ul > li {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:14px;
  line-height:1;
}
.bread_home {
  width:16px;
  height:16px;
}
.nextFile {
  width:12px;
  height:12px;
}
.bread_nowPage {
  color:var(--color-main);
}

#about {
  width:100%;
  height:auto;
  margin-top:96px;
}

.about_title {
  text-align:center;
}
.about_title > h1 {
  font-size:42px;
  font-weight: 700;
}
.about_title > p {
  padding-top:12px;
  font-size:18px;
  line-height: 1.8;
}

/* 태블릿 반응형 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #about {
    margin-top:72px;
  }
  
  .about_title > h1 {
    font-size:36px;
  }
  
  .about_title > p {
    font-size:16px;
    padding-top:10px;
  }
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
  #about {
    margin-top:60px;
  }
  
  .about_title > h1 {
    font-size:28px;
    line-height: 1.3;
  }
  
  .about_title > p {
    font-size:14px;
    padding-top:8px;
    line-height: 1.6;
  }
}

/* 소형 모바일 반응형 */
@media screen and (max-width: 375px) {
  #about {
    margin-top:48px;
  }
  
  .about_title > h1 {
    font-size:24px;
    line-height: 1.2;
  }
  
  .about_title > p {
    font-size:13px;
    padding-top:6px;
    line-height: 1.5;
  }
}