@charset 'utf-8';
/* CSS Document */
* html {height:1px;} 
* {margin:0;padding:0; box-sizing: border-box;}
body {overflow-x: hidden; font-size:17px; font-weight:400; word-break: keep-all; color:#353535; text-align:left; letter-spacing: -0.02em; font-family: 'Pretendard'; word-spacing:0px; top: 0 !important;}
.skiptranslate {
    display: none;
}

/* 전역 텍스트 줄바꿈 기본값 */
html, body {
  word-break: keep-all;        /* 한글 단어는 가급적 단어 단위로 줄바꿈 */
  overflow-wrap: break-word;   /* 긴 영문/URL은 줄바꿈 허용 */
}

.fonts{font-family: "Poppins", sans-serif; }

button {cursor:pointer; font-family: 'Pretendard'; border: 0 none; background: none;}
.bgf{background:#f0f0f0;}
.td1 {background:#f4f4f4;}

a img {border:0 none;}
/*hr {display:none;}*/
em {font-style:normal;}
a{text-decoration:none;}

h1, h2, h3, h4, h5, h6, form, input, fieldset, ul, li, dl, dt, dd, p,select {margin:0; padding:0; font-family: 'Pretendard';}
ul, li, ol, dl, dt, dd {list-style:none;}

label {
    cursor: pointer;
    vertical-align: middle;
}

textarea {
    color: #666;
    border: 1px solid #d4d7df;
    padding: 10px;
	font-size:13px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 10px;
  font-size:15px;
  
}

.h10s{height:10px;}
.h20s{height:20px;}
.h30s{height:30px;}
.h40s{height:40px;}
.h50s{height:50px;}
.h60s{height:60px;}



/* 접근성 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:root{
  --header-h: 86px;
  --line: rgba(255,255,255,.25);
  --line-dark: rgba(0,0,0,.12);
  --txt: #fff;
  --txt-dark: #222;
}

/* header base */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 110px;
  z-index: 1000;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}

.site-header .inner{
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

/* 로고 교체 */
.logo{display:flex; align-items:center; gap:10px; padding-left:30px;}
.logo-img{height:74px; display:none;}
/* 기본은 top(투명) 상태 */
.site-header.is-top .logo-light{display:block;}
.site-header.is-scrolled .logo-dark{display:block;}

/* gnb */
.gnb{flex:1;}
.gnb-list{
  display:flex;
  justify-content:center;
  gap: 44px;
}
.gnb-item{position:relative; padding: 0 15px;}
.gnb-link{
  display:inline-flex;
  align-items:center;
  height: 110px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-decoration:none;
  transition: color .2s ease;
}

/* 공통 */
.gnb-link{
  position: relative;
  transition: color .2s ease;
}



/* 밑줄 */
.gnb-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0px;
  width:0;
  height:4px;
  background: #7c9db2;
  transition: .25s ease;
  transform: translateX(-50%);
}

/* hover */
.gnb-item:hover .gnb-link,
.gnb-item:focus-within .gnb-link{
  color: #7c9db2; /* 2번 상태 기준 */
}

.gnb-item:hover .gnb-link::after,
.gnb-item:focus-within .gnb-link::after{
  width:100%;
}

/* util */
.util{display:flex; align-items:center; position: relative;}
.util-icos{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  font-weight:600;
  transition: color .2s ease;
  padding-right: 15px;
 position:relative;
 cursor: pointer;
}
.util-ico{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  font-weight:600;
  transition: color .2s ease;
  padding-right: 15px;
  position:relative;
  cursor: pointer;
}

.uts_dv{display:inline-flex; gap: 8px;} 

.util-text{
	font-size:16px; 
	display: flex;
    align-items: center;
}

.lang-wrap{
  display: inline-block;
  cursor: pointer;
}

/* 드롭다운 */
.lang-menu{
  position: absolute;
  top: 38px;
  left:31px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  display: none;
  z-index: 1000;
}

.lang-menu li a{
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.lang-menu li a:hover{
  background: #f5f5f5;
}

.user-menu{
  position: absolute;
  top: 38px;
  left:-30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  display: none;
  z-index: 1000;
}

.user-menu li a{
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.user-menu li a:hover{
  background: #f5f5f5;
}

/* 열림 상태 */
.lang-wrap.open .lang-menu{
  display: block;
}

/* caret 회전 (선택) */
.lang-wrap.open .ico.caret{
  transform: rotate(180deg);
}


.badge{
  min-width: 80px;
  height: 110px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  text-decoration:none;
  color:#fff;
}
.badge.cafe{background:#62a371;}
.badge.youtube{background:#6289a3;}

.btn-ham{
  width: 80px; height: 110px;
  border:0; background:#7c9db2; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.ham{
  width: 26px; height: 2px;
  position: relative;
  display:block;
  background: currentColor;
}
.ham::before,.ham::after{
  content:"";
  position:absolute; left:0;
  width: 26px; height: 2px;
  background: currentColor;
}
.ham::before{top:-8px;}
.ham::after{top:8px;}

/* ===== 2 상태 ===== */

/* A: 최상단(투명, 흰색 텍스트) */
.site-header.is-top{
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--line);
}
.site-header.is-top .gnb-link,
.site-header.is-top .util-ico,
.site-header.is-top .btn-ham{
  color: #fff;
}

/* B: 스크롤(흰 배경, 검정 텍스트) */
.site-header.is-scrolled{
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-bottom-color: var(--line-dark);
}
.site-header.is-scrolled .gnb-link,
.site-header.is-scrolled .util-ico,
.site-header.is-scrolled .btn-ham{
  color: var(--txt-dark);
}

/* 2번 상태: 흰 배경 + 검정 글씨 (기본/스크롤) */
.site-header.is-solid{
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.site-header.is-solid .gnb-link,
.site-header.is-solid .util-ico,
.site-header.is-solid .btn-ham{
  color:#222;
}

.site-header.is-solid .gnb-link:hover{color:#7c9db2;}

.site-header.is-solid .logo-light{display:none;}
.site-header.is-solid .logo-dark{display:block;}

/* 1번 상태: 투명 + 흰 글씨 (상단 + hover일 때만) */
.site-header.is-transparent{
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.site-header.is-transparent .gnb-link,
.site-header.is-transparent .util-ico,
.site-header.is-transparent .btn-ham{
  color:#fff;
}
.site-header.is-transparent .logo-light{display:block;}
.site-header.is-transparent .logo-dark{display:none;}

.img-hs{height:33px;}
.img-hs2{height:46px;}
.img-hs3{height:48px;}

/* ===== 서브메뉴: 가로(전체폭) 패널 ===== */
.sub-panel{
  position: fixed;
  left: 0;
  right: 0;
  top: 110px;
  background:#fff;
  border-bottom: 1px solid var(--line-dark);
  padding: 18px 0 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sub-list{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 26px;
  display:flex;
  gap: 22px;
  justify-content:center;
}
.sub-list a{
  color:#222;
  text-decoration:none;
   font-family: "Poppins", sans-serif;
  font-weight:400;
  padding: 10px 14px;
  border-radius: 10px;
}
.sub-list a:hover{background:#f3f3f3;}

/* PC에서 hover/focus로 열기 */
@media (hover:hover){
  .gnb-item:hover .sub-panel,
  .gnb-item:focus-within .sub-panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 최상단에서도 서브메뉴 열리면 배경은 흰색, 글자는 검정(요구사항 느낌) */
  .site-header.is-top .gnb-item:hover .gnb-link{
    color: #222;
  }
}

/* ===== 모바일 ===== */
.m-nav{
  display:none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background:#fff;
  border-bottom:1px solid var(--line-dark);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
}
.m-nav ul{padding: 16px 20px; display:flex; flex-direction:column; gap:10px;}
.m-nav a{text-decoration:none; color:#222; font-weight:700; padding:12px 10px; border-radius:10px;}
.m-nav a:hover{background:#f3f3f3;}

.site-header.is-mopen .m-nav{
  display:block;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}



/* ===== 사이트맵 오버레이 ===== */
.sitemap{
  position: fixed;
  inset: 0;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .2s ease;
}

.sitemap.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sitemap-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.sitemap-panel{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background:#fff;
  border-radius: 0px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  overflow: auto;
  padding: 26px 26px 32px;
  transform: translateY(10px);
  transition: .2s ease;
}

.sitemap.is-open .sitemap-panel{
  transform: translateY(0);
}

.sitemap-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin-bottom: 18px;
}

.sitemap-title{
  font-size: 22px;
  font-weight: 800;
  color:#111;
}

.sitemap-close{
  width: 44px;
  height: 44px;
  border: 0;
  background: #f3f3f3;
  border-radius: 12px;
  cursor: pointer;
  font-size: 20px;
}

.sitemap-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.sitemap-grid > li{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: #d0e9f9;
}

.depth1{
  display:inline-flex;
  font-size: 34px;
  font-weight: 800;
  color:#111;
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
}
.depth1:hover{background:#f3f3f3;}

.depth2{
  list-style:none;
  padding: 10px 0 0;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.depth2 a{
  color:#333;
  text-decoration:none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
}
.depth2 a:hover{background:#f6f6f6;}

/* 반응형: 태블릿/모바일 */

@media (max-width: 1680px){
	.gnb-list {
		gap: 20px;
	}
}

@media (max-width: 1520px){
	.gnb-list {
		gap: 10px;
	}
	
	.gnb-link {
		font-size: 17px;
	}
}

@media (max-width: 1480px){
	.gnb-item {
		padding: 0 10px;
	}

	.gnb-list {
		gap: 14px;
	}
}

@media (max-width: 1308px){
  
  .logo {
	  padding-left: 10px;
  }
  
  .site-header {
	  height: 80px;
  }

  .util-text {
	  font-size: 14px;
  }

  .util-icos{
	padding-right: 5px;
  }

  .util-ico {
	padding-right: 5px;
  }

  .util-icos  img{
	  height:20px;
  }

  .util-ico  img{
	  height:20px;
  }

  .img-hs2 {
    height: 30px;
  }

  .img-hs3 {
    height: 32px;
  }

  .badge {
	  min-width: 60px;
	  height: 80px;
  }

  .btn-ham {
	  width:60px;
	  height: 80px;
  }

  .user-menu {
	 top: 28px;
  }

  .user-menu li a {
	 font-size: 13px;
	 padding: 8px 10px;
  }

  .lang-menu {
	 top: 28px;
  }
  
  .gnb{
	  display:none;
   }

   .logo-img {
	  height: 52px;
   }

}


@media (max-width: 1024px){
  .sitemap-panel{
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    margin: 14px auto;
    border-radius: 18px;
  }
  .sitemap-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 640px){
	.logo-img {
        height: 43px;
    }

	.badge {
        min-width: 45px;
    }
}


@media (max-width: 520px){
  .sitemap-grid{
    grid-template-columns: 1fr;
  }
}