@charset "utf-8"; 

/*========================================================================
Layout
========================================================================*/
/* 웹폰트*/
@font-face {
    font-family: 'PartialSansKR-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/PartialSansKR-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RixYeoljeongdo_Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/RixYeoljeongdo_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KBO-Dia-Gothic_bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Giants-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Bold.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
/*reset css*/
body { font-family: 'Pretendard', 'Malgun Gothic', sans-serif; }


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html, body {
  touch-action: manipulation; /* 더블탭 줌 방지 */
}

html {scroll-behavior: smooth;}
body {padding: 0; margin: 0;}
h1, h2, .main-title a {font-family:  'Giants-Bold', sans-serif;}
#wrap {width:100%; }
#header {position:relative; width:100%; z-index:101; }
#header .header-inner {position:relative;width:100%; max-width:1410px; padding:0 5px; margin:0 auto; box-sizing:border-box; }
#container {position:relative; width:100%; padding:0 0 100px; box-sizing:border-box; }
#contents {display:block; width:1200px; padding:0; margin:0 auto; box-sizing:border-box; }
#contents:has(#productList) {width:100%; max-width:1410px; padding:0 5px; }
#footer .footer-inner {position:relative; width:100%; max-width:1410px; padding:0 5px; margin:0 auto; box-sizing:border-box; }

ul{padding: 0; margin: 0;}
ul li{list-style: none;}


/* font */
/* body,code,input,select,textarea,
[class^='btnBasic'], a[class^='btnBasic'],
[class^='btnNormal'], a[class^='btnNormal'],
[class^='btnEm'], a[class^='btnEm'],
[class^='btnSubmit'], a[class^='btnSubmit'] { font-family:'Pretendard','Malgun Gothic', Verdana, Dotum, AppleGothic, sans-serif; } */

/* 포인트 컬러 */
:root { --basic-color:#000000; --point-color:#87e532; }


/*========================================================================
상단 영역
========================================================================*/
#header .header-wrap { border-bottom:1px solid #f0f0f0; }
#header .header-top { position:relative; display:flex; justify-content:space-between; align-items:center; }
#header .header-main { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
#header .header-right ul li img {width:20px; height:20px; display:block;}

/* 로고 */
#header h1.top-logo { display:inline-block; margin:30px 0 30px; }
#header h1.top-logo a { display:block; line-height:1; }
#header h1.top-logo a img { width:100%; }



/* 헤더 수정 - 스크롤 배경 */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*background: #fff;*/
  transition: background-color 0.3s ease;
  z-index: 1000;
}
.header-wrap.scrolled {
    background-color: rgba(128, 128, 128, 0.7); /* 반투명한 회색 (0.7은 투명도) */
    backdrop-filter: blur(5px); /* 선택사항: 뒤 배경 흐릿하게 (고급스러운 느낌) */
}

/* 헤더 수정  */

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
}
.header-left, .header-main, .header-right {
  display: flex;
  align-items: center;
  height: 80px;
}
.header-left { flex: 0 0 auto; margin-right: auto; }
.header-main { flex: 1 1 auto; display: flex; justify-content: center; }
.header-right { flex: 0 0 auto; margin-left: auto; text-align: right; }

.top-logo img.logo {
  height: 78px;
  display: block;
  object-fit: contain;
}

.cate-main {
  position: relative;
  width: 100%;
}
.cate-menu {
   font-family:  'Giants-Bold', sans-serif;
  display: flex;
  gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.cate-menu > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cate-menu > li > a {
  display: flex;
  align-items: center;
  height: 80px;
  line-height: normal;
  padding: 0 18px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s;
  white-space: nowrap;
}
.cate-menu > li > a:hover {
  color: #007bff;
}

.mega-sub {
  display: none;
  position: absolute;
  left: 0;
  top: 98%;
  transform: none;
  min-width: 180px;
  background: #fff;
  border-radius: 0 0 12px 12px;
  padding: 16px 0 16px 0;
  z-index: 1001;
  text-align: left;
  box-sizing: border-box;
  margin-top: 0;
  list-style: none;
  padding-left: 0;
}
.cate-menu > li:hover > .mega-sub,
.cate-menu > li:focus-within > .mega-sub,
.cate-menu > li.active > .mega-sub {
  display: block;
}
.mega-sub li {
  margin-bottom: 14px;
  list-style: none;
}
.mega-sub li:last-child {
  margin-bottom: 0;
}
.mega-sub li a {
  display: block;
  padding: 8px 16px;
  color: #222;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s;
}
.mega-sub li a:hover {
  color: #007bff;
}

.top-account ul {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 80px;
}
.top-account img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  margin-left:10px;
}

.menu-toggle {
  display: none;
  position: fixed;
  right: 20px; top: 20px;
  width: 40px; height: 40px;
  background: none; border: none; z-index: 2000;
  flex-direction: column; justify-content: center; align-items: center;
}
.menu-toggle span {
  display: block; width: 28px; height: 4px; margin: 4px 0;
  background: #ffffff; border-radius: 2px;
  transition: all 0.3s;
}
.menu-toggle.c_chg span{background: #2e2e2e;}

.menu-toggle.c_chg span:first-child {
  transform: translateY(12px) rotate(45deg); /* 4px(높이) + 4px(margin) + 4px(margin) */
}
.menu-toggle.c_chg span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.c_chg span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

/* .m_subtog {
  display: none;
} */


/* 회원메뉴 */
#header .top-account { display:flex; align-items:center; }
#header .top-account > ul { display:flex; align-items:center; margin:0 4px 0 0; }
#header .top-account > ul > li { display:inline-block; vertical-align:top; position:relative; width:auto; margin:0 0 0 25px; }
#header .top-account > ul > li > a { display:block; position:relative; color:var(--basic-color); font-size:16px; }

/* 예약하기 버튼 */
.reservation-btn { display:inline-block; }
.reservation-btn a { display:block; width:160px; height:50px; line-height:50px; color:#fff; font-size:20px; font-weight:500; border-radius:8px; background:var(--point-color); }
.reservation-btn a > span { display:flex; justify-content:center; align-items:center; }
.reservation-btn a > span::before { content:""; display:inline-block; width:26px; height:26px; margin:0 6px 0 0; background:url("/_dbook/img/time_w_icon.png") no-repeat 50%; }

/* 검색 레이어 */
#header .search-layer { display:none; position:fixed; top:0; left:0; width:100%; height:300px; background:#fff; box-sizing:border-box; z-index:99; } 
#header .search-layer .search-close-btn { position:absolute; top:10px; right:10px; padding:50px; cursor:pointer; }
#header .top-search { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:900px; margin:0 auto; padding:0 0 7px; border-bottom:2px solid #222222; box-sizing:border-box; }
#header .top-search form { display:inline-block; vertical-align:top; width:100%; }
#header .top-search fieldset { position:relative; height:35px; }
#header .top-search fieldset::before { content:""; position:absolute; top:0; right:0; width:27px; height:27px; background:url("/_dbook/img/common/layer_search_btn.png") no-repeat; }
#header .top-search fieldset #keyword { width:calc(100% - 42px); height:100%; line-height:35px; border:0; padding:0 0 0 10px; font-size:22px; background:none; box-sizing:border-box; }
#header .top-search fieldset input[type="image"] {float:right; position:relative; width:35px; height:100%; opacity:0; z-index:1; }
#layerDim { display:none; position:fixed; top:0; left:0; z-index:70; width:100%; height:100%; background:rgba(0,0,0,0.3); }

/* 카테고리 */
#category { position:relative; }
#category .cate-main { display:inline-block; vertical-align:top; }
#category .cate-main > ul { display:inline-block; vertical-align:top; text-wrap:nowrap; }
#category .cate-main > ul > li { display:inline-block; vertical-align:top; position:relative; margin:0 21px; }
#category .cate-main > ul > li:first-child { margin-left:0; }
#category .cate-main > ul > li:last-child { margin-right:0; }
#category .cate-main > ul > li > a { display:flex; align-items:center; height:55px; color:#fff; font-size:20px; font-weight:400; }

/* 하위 카테고리 */
#category .cate-main > ul > li.on .sub-menu-box { display:block; }
#category .cate-main .sub-menu-box { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:110px; padding:15px 20px 16px; border:1px solid #e4e4e4; background:#fff; text-align:left; white-space:nowrap; z-index:1; box-sizing:border-box; }
#category .cate-main .sub-menu-box ul { display:inline-block; vertical-align:top; }
#category .cate-main .sub-menu-box li { }
#category .cate-main .sub-menu-box a { display:block; padding:3px 0; color:#000; font-size:14px; }
#category .cate-main .sub-menu-box a:hover,
#category .cate-main .sub-menu-box li.selected a { }


/*========================================================================
하단 영역
========================================================================*/
/* #footer { margin-top:0; padding:60px 0 60px; background:linear-gradient(to bottom,  #232323 0%,#242422 44%,#282d26 77%,#272d23 82%,#2a2d24 83%,#2a3223 100%); } */
#footer { margin-top:0; padding:60px 0 60px; background-color:#232323; }
#footer .footer-content { display:flex; justify-content:space-between; width:100%; border-bottom:1px solid rgba(147,147,147,0.2); }

/* 하단 로고 */
#footer .footer-logo { display:block;}
#footer .footer-logo img { width:150px; object-fit:contain; }

#footer .footer-left {margin:0 0 40px 0;}

/* 하단 링크 */
#footer .footer-menu { flex:auto; display:flex; justify-content:space-between; align-items:center; }
#footer .footer-menu ul { display:flex; align-items:center; gap:16px; }
#footer .footer-menu li { position:relative; font-size:16px; font-weight:400; line-height:1.2; }
#footer .footer-menu li:first-child::before { display:none; }
#footer .footer-menu li a { display:inline-block; color:#fff; text-decoration: none;}
#footer .address dd a {color:#a3a3a3; text-decoration: none;}
#footer .footer-menu li strong { font-weight:300; }

/* 하단 정보 */
#footer .footer-info { display:flex; flex-direction: column; }

/* 회사 정보 */
#footer .shop-info { display:flex; flex-direction:column; padding:38px 0 0; color:#a3a3a3; font-size:14px; font-weight:300; line-height:1; }
#footer .shop-info .address { padding:13px 0 0; }
#footer .shop-info dl { display:flex; text-wrap:nowrap; line-height:1.572; }
#footer .shop-info dl dt { position:relative; padding:0 0 0 7px; color:#a3a3a3; }
#footer .shop-info dl dd { margin:0 7px 0 5px; color:#a3a3a3; }
#footer .shop-info dl dt:first-child { padding-left:0; }

/* copyright */
#footer .copyright { margin:10px 0 0; color:#a3a3a3; font-size:13px; font-weight:300; line-height:1.572; }
#footer .copyright strong { font-weight:300; }

/* SNS */
#footer .footer-sns { margin:25px 0 40px; }
#footer .footer-sns ul { display:flex; align-items:center; gap:8px; }
#footer .footer-sns ul li { }
#footer .footer-sns ul li a { display:flex; justify-content:center; align-items:center; width:42px; height:42px; border-radius:50%; border:1px solid #b7b7b7; box-sizing:border-box; }

/* 고객센터 */
#footer .cs-box { margin:38px 0 0; box-sizing:border-box; }
#footer .cs-box strong { display:inline-block; color:#fff; font-size:20px; font-weight:400; line-height:1; }
#footer .cs-box strong:nth-child(n+2) { margin-left:20px; }
#footer .cs-box p { margin-top:14px; color:#bcbcbc; font-size:18px; font-weight:400; line-height:1.5; }

/* 하단 카테고리 */
.footer-right { display:flex; width:560px; }
.footer-right dl { flex:1; }
.footer-right dl dt { margin:0 0 15px; color:#ffffff; font-size:18px; font-weight:700; line-height:1; }
.footer-right dl dd { color:#bcbcbc; font-size:16px; font-weight:400; line-height:1.75; }

/* 상단으로 버튼 */
.bottom-fixed-btn { position:absolute; bottom:48px; left:auto; right:0; width:auto; z-index:61; }
.bottom-fixed-btn a { display:flex; align-items:center; justify-content:center; width:60px; height:60px; }


/*========================================================================
서브 공통
========================================================================*/
/* 타이틀 공통 */
.titleArea { padding:100px 0 40px; margin:0; text-align:left; }
.titleArea h2,
.xans-board .titleArea h2 font { color:var(--tit-color); font-size:35px; font-weight:700; line-height:1; letter-spacing:-1px; }

/* 현재 위치 표시 */
#wrap .path { position:absolute; top:0px; right:0; }
.path { margin:60px 0 0;}
.path li,
.path li a,
.path li strong, 
.path li strong a { color:#b4b4b4; font-size:18px; font-weight:300; }
.path li:first-child { color:#b4b4b4; }
.path li:first-child a { display:inline-block; color:#999999; font-size:18px; }
#wrap .path li { background:url("/_dbook/img/path_arr_icon.png") no-repeat 0 50%;}

/* 페이지네이션 */
.ec-base-paginate > a img { opacity:0; }
.ec-base-paginate > a { display:inline-block; vertical-align:top; width:30px; height:30px; margin:0; border:0; background:no-repeat 50% 50%; box-sizing:border-box; }
.ec-base-paginate a.first,
.ec-base-paginate.typeSub .first { background-image:url("/_dbook/img/btn_page_first.png"); }
.ec-base-paginate a.first + a,
.xans-board-paging > a:first-child { background-image:url("/_dbook/img/btn_page_prev.png"); }
.ec-base-paginate ol + a { background-image:url("/_dbook/img/btn_page_next.png"); }
.ec-base-paginate a.last,
.ec-base-paginate.typeSub .last { background-image:url("/_dbook/img/btn_page_last.png"); }
.ec-base-paginate ol { margin:0 20px; }
.ec-base-paginate li { padding:0; margin:0; border:0; }
.ec-base-paginate li:first-child { margin:0; }
.ec-base-paginate li a,
.ec-base-paginate.typeSub li a { width:auto; min-width:0; height:30px; line-height:30px; padding:0; margin:0 10px; color:var(--basic-color); font-size:16px; font-weight:400; border:0; border-radius:30px; background:none; text-align:center; box-sizing:border-box; }
.ec-base-paginate li a:hover { background:none; }
.ec-base-paginate li a.this,
.ec-base-paginate.typeSub li a.this { position:relative; height:30px; padding:0 11px; margin:0 10px 0 0; color:#fff; font-weight:500; background-color:#111111; border:0; text-decoration:none; z-index:1; }

/* background:var(--point-color) */


h2{margin: 0;}
.m_on{display: none;}

@media (max-width: 1200px) {
  .header-inner { max-width: 100%; padding: 0 10px; }
  .cate-menu { gap: 24px; }
  .mega-sub { padding: 0 10px 10px 10px; min-width: 120px; }
}


@media (max-width: 900px) {
  .pc_on{display: none;}
  /*헤더*/
  .top-logo img.logo{width: 70px; height: 70px;}
  #category .cate-main > ul{width: 100%;}
  #category .cate-main > ul > li{display: block;margin-left: 10px; position: relative;}
  #category .cate-main > ul > li:first-child{margin-left: 10px;}
  .mega-sub li{margin-left: 22px;}
  .mega-sub li a{color: #575757;}
  #category .cate-main > ul > li > a{color: #333;}

  .top-account.m_on{position: absolute; bottom: 20vh; left: 50%; transform: translateX(-50%);}
  .top-account.m_on ul{justify-content: center;}

  .header-inner { padding: 0 10px;}
  .cate-menu { gap: 10px; }
  .menu-toggle {display: block;}

  #category {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #fff; z-index: 1500; transform: translateX(-100%);
    display: flex; flex-direction: column; align-items: center;
    padding-top: 80px;
  }
  #category.open {transform: translateX(0);}
  .cate-menu {flex-direction: column; gap: 0;}
  .cate-menu > li > a { height: 56px; line-height: 56px;}

    .mega-sub {
    position: static;
    display: none;
    background: none;
    padding: 0;
    min-width: 0;
    border-radius: 0;
  }
  .cate-menu > li:hover > .mega-sub, .cate-menu > li:focus-within > .mega-sub, .cate-menu > li.active > .mega-sub{display: none;}
    .cate-menu > li > .mega-sub {display: none;}
  .cate-menu > li.open > .mega-sub {display: block;}

.m_subtog::before {
  content: '+';
  display: block;
  position: absolute;
  font-size: 30px;
  color: #ccc;
  top: 10px;
  right: 5%;
}

.m_subtog.open::before {
  content: '-';
}
  
  /*푸터*/
  #footer{padding: 4% 0;}
  .m_on{display: block; width: 100%;}
  #footer .footer-inner{padding: 0 10px;}
  #footer .footer-logo img{width: 80px; height: 80px;}
  #footer .footer-left{margin: 0 0 20px 0;}
  #footer .cs-box{margin: 20px 0 0;}
  #footer .cs-box strong{display: block; font-size: 16px;}
  #footer .cs-box strong:nth-child(n+2){margin: 10px 0;}
  #footer .cs-box p{font-size: 16px;}
  .bottom-fixed-btn{bottom: 90%; right: 15px;}
  .bottom-fixed-btn a{width: 40px; height: 40px;}
  .bottom-fixed-btn img{width: 100%}
  #footer .shop-info dl{display: block; margin-bottom: 0;}
  #footer .shop-info dl:nth-child(2){margin-top: 0; text-wrap: inherit;}
  #footer .shop-info dl dt{padding-left: 0;}
  #footer .shop-info dl >*:not(.m_on){display: inline-block;}
}