@charset "utf-8";

/* Google Fonts | 2026-04-08 cop */
/* font-family: 'Noto Serif KR', serif;       한글 노토 세리프 */
/* font-family: 'Noto Sans KR', sans-serif;   한글 노토 산스 */
/* font-family: 'Literata', serif;             영문 리터라타  */
:root {
    --font-kr: 'Noto Serif KR', serif;
    --font-kr-sans: 'Noto Sans KR', sans-serif;
    --font-en: 'Literata', serif;
}

/* All Device */
/*모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.*/
body,td,th,p,span{margin:0px; padding:0px; color:#666666;}
li,ul{margin:0px; padding:0px; list-style:none;}
img{border:0px; vertical-align:middle; }
input,textarea,select{vertical-align:middle; color:#666666;}
body {-webkit-text-size-adjust:none}/*아이폰 폰트 고정*/
html{scroll-behavior: smooth;} /* 앵커 링크 클릭 시 부드러운 스크롤 효과 */


/*기본링크*/
A:link {color: #5c5c5c; text-decoration: none; ;}
A:visited {color: #5c5c5c; text-decoration: none; ;}
A:active {color: #5c5c5c; text-decoration: none; ;}
A:hover {color: #1c1c1c; text-decoration: none; ;}



/* Mobile Device */
/*768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.*/

/* header */
.head_logo{text-align:center; padding:40px 0 20px 0;}
.head_logo img{width: 90px;}
.head_menu_pac{width: 100%; text-align: center; padding: 0 0 30px 0;}
.head_menu{display: inline-block; padding: 0 0px 5px 0px; font-family: var(--font-kr-sans); font-size: 14px; color: #5c5c5c; font-weight: 400; margin: 0 10px 0 10px;}
.head_menu a:link {color: #a0a0a0; text-decoration: none; ;}
.head_menu a:visited {color: #a0a0a0; text-decoration: none; ;}
.head_menu a:active {color: #a0a0a0; text-decoration: none; ;}
.head_menu a:hover {color: #1c1c1c; text-decoration: none; ;}
.menuon{border-bottom: 2px solid #1c1c1c; color: #1c1c1c;}
.menuon a:link {color: #1c1c1c; text-decoration: none; ;}
.menuon a:visited {color: #1c1c1c; text-decoration: none; ;}
.menuon a:active {color: #1c1c1c; text-decoration: none; ;}
.menuon a:hover {color: #1c1c1c; text-decoration: none; ;}

/* main banner */
.main_banner_pac{width: 100%; display: flex; text-align: center; font-size: 0; line-height: 0;}
.main_banner_pac > .main_banner:nth-child(3){display: none;} /* 모바일에서는 세 번째 배너 이미지를 숨김 */
.main_banner{display: inline-block; width: 50%; height: 350px; padding: 0 0 0px 0; overflow: hidden; position: relative; touch-action: pan-y; cursor: grab; user-select: none;}
.main_banner.is-dragging{cursor: grabbing;}
/* Mobile full-bleed banner cover | 2026-04-08 cop */
.main_banner_track{display: flex; width: 100%; height: 100%; will-change: transform; transform: translateZ(0);} /* Subpixel seam mitigation | 2026-04-09 cop */
.main_banner_slide{flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.main_banner img{width: 100%; height: 100%; object-fit: cover;}

/* about */
.about_pac{padding: 30px 30px 30px 30px;}
.about_txt_unit{font-family: var(--font-kr); font-size: 15px; color: #303030; line-height: 1.5; padding: 50px 0 30px 0; letter-spacing: -0.5px; word-break: keep-all;}
.about_txt_unit2{font-family: var(--font-en); font-size: 12px; color: #555555; line-height: 1.5; word-break: keep-all;}
.about_slogun{text-align: center; padding: 50px 0 60px 0;}
.about_h1{font-family: var(--font-kr); font-size: 15px; color: #303030; line-height: 1.5; letter-spacing: -0.5px; padding: 0 0 5px 0;}
.about_h2{font-family: var(--font-en); font-size: 12px; color: #555555; line-height: 1.5; letter-spacing: -0.5px;}

/* menu */
.menu_pac{padding: 0px 0px 80px 0px;}
.menu_img img{width: 100%;}
/* Menu img slider | 2026-04-01 cop */
.menu_img{overflow: hidden; cursor: grab; user-select: none; touch-action: pan-y;}
.menu_img.is-dragging{cursor: grabbing;}
.menu_img_track{display: flex;}
.menu_img_slide{flex: 0 0 100%; width: 100%; display: block; pointer-events: none; object-fit: cover;}
/* Mobile first menu slider height | 2026-04-08 cop */
.menu_img_pac > .menu_img:first-child{height: 350px;}
.menu_img_pac > .menu_img:first-child .menu_img_track{height: 100%;}
.menu_img_pac > .menu_img:first-child .menu_img_slide,
.menu_img_pac > .menu_img:first-child img{height: 100%; object-fit: cover;}
/* Mobile menu slider visibility | 2026-04-08 cop */
.menu_img_pac > .menu_img:nth-child(n+2){display: none;}
.menu_h1{text-align: center; padding: 40px 0 0 0; font-family: var(--font-kr); font-size: 14px; color: #303030; line-height: 1.5; letter-spacing: -0.5px;}
.menu_h2{text-align: center; padding: 20px 0 40px 0; font-family: var(--font-en); font-size: 11px; color: #919090; line-height: 1.5; letter-spacing: -0.5px;}
.menu_btn{text-align: center;}
.btn_menu_down{display: inline-block; font-family: var(--font-en); font-size: 11px; margin: 0 auto; border: 1px solid #b6b6b6; border-radius: 50px; padding: 10px 15px 10px 10px; cursor: pointer;}
.btn_menu_down img{width:25px; margin: 0 5px 0 0;}

/* reservation */
.reser_unit{padding: 0 30px 0 30px;}
.reser_unit dt{font-family: var(--font-en); font-size: 16px; font-weight: 300; color: #303030;}
.reser_unit dd{font-family: var(--font-en); font-size: 14px; color: #747474; line-height: 1.5; padding: 5px 0 30px 0; letter-spacing: -0.5px; margin: 0 0 0 0;}
.reser_btn{display: inline-block; margin: 5px 10px 0 0;}
.reser_btn img{width: 33px;}
/* reser slider | 2026-03-31 cop */
.reser_right_box{overflow: hidden; cursor: grab; user-select: none;}
.reser_right_box.is-dragging{cursor: grabbing;}
.reser_slider_track{display: flex; transition: transform 0.4s ease; will-change: transform;}
.reser_slider_track img{flex: 0 0 100%; width: 100%; display: block; pointer-events: none; object-fit: cover;}
.reser_left_box{padding: 0 0 50px 0;}

/* contact */
.contact_pac{padding: 80px 30px 100px 30px;}
.contact_h1{font-family: var(--font-en); font-size: 15px; color: #303030; line-height: 1.5;  padding: 0 0 10px 0;}
.contact_h2{font-family: var(--font-en); font-size: 12px; color: #555555; line-height: 1.5; }
.contact_h2 p:nth-child(1){font-family: var(--font-kr); font-size: 12px; color: #303030; padding: 0 0 15px 0;}
.contact_h2 p:nth-child(2){font-family: var(--font-en); font-size: 11px; color: #808080; padding: 0 0 15px 0;}
.contact_h2 p:nth-child(3){font-family: var(--font-en); font-size: 11px; color: #808080; padding: 0 0 50px 0;}
.contact_h3{font-family: var(--font-en); font-size: 12px; color: #555555; line-height: 1.5; }
.contact_insta{display: inline-block; margin: 5px 15px 0 0; vertical-align: top; border-right: 1px solid #ddd; padding: 0 15px 0 0;}
.contact_mail{display: inline-block; margin: 2px 10px 0 0; vertical-align: top; line-height: 20px;}
.contact_insta img{width: 39px;}

/* footer */
.footer{background-color: #000; text-align: center; padding: 50px 0 100px 0;}
.footer_logo img{width: 91px;}
.footer_txt{font-family: var(--font-kr-sans); font-size: 11px; color: #fff; line-height: 1.5; padding: 15px 0 0 0;}

/* intro */
.intro_logo{text-align:center; padding: 0px 0 0px 0; display: flex; justify-content: center; align-items: center; height: 100vh;}
.intro_txt{text-align: center; font-family: var(--font-kr-sans); font-size: 16px; color: #747372; position: absolute; bottom: 50px; width: 100%;}

/* Intro fade transition | 2026-04-01 cop */
body.intro-page{opacity: 0; transition: opacity 0.8s ease;}
body.intro-page.is-visible{opacity: 1;}
body.intro-page.is-leaving{opacity: 0;}

/* Main first load fade-in | 2026-04-01 cop */
body.main-page{opacity: 0; transition: opacity 0.8s ease;}
body.main-page.is-visible{opacity: 1;}

.gototop{position: fixed; bottom: 30px; right: 30px; z-index: 100;}


/* Tablet & Desktop Device */
@media all and (min-width:768px) {
/*사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.*/

section {scroll-margin-top: 247px;} /* header 높이만큼 스크롤 마진을 설정하여 앵커 링크 클릭 시 섹션이 header에 가려지지 않도록 함. */

/* header */
header{position: sticky; top: 0; z-index: 100; background-color: #fff;}
.head_logo{text-align:center; padding:40px 0 30px 0;}
.head_logo img{width: 120px;}
.head_menu_pac{width: 100%; text-align: center; padding: 0 0 40px 0;}
.head_menu{display: inline-block; padding: 0 0px 5px 0px; font-family: var(--font-kr-sans); font-size: 18px; font-weight: 400; margin: 0 20px 0 20px;}



/* about */
.about_pac{padding: 100px 50px 30px 50px;}
.about_txt_unit{font-family: var(--font-kr); font-size: 15px; color: #303030; line-height: 1.9; padding: 0 50px 40px 0; display: inline-block; vertical-align: top; width:calc(50% - 50px); word-break: keep-all;}
.about_txt_unit2{font-family: var(--font-en); font-size: 14px; color: #555555; line-height: 1.5; display: inline-block; vertical-align: top; width: calc(50% - 50px); word-break: keep-all;}
.about_h1{font-family: var(--font-kr); font-size: 20px; color: #303030; line-height: 1.5; letter-spacing: -0.5px; padding: 0 0 10px 0;}
.about_h2{font-family: var(--font-en); font-size: 15px; color: #555555; line-height: 1.5; letter-spacing: -0.5px;}


/* main banner */
.main_banner_pac{width: 100%; display: block; text-align: center; font-size: 0; line-height: 0;}
.main_banner_pac > .main_banner:nth-child(3){display: inline-block;} /* 테블릿과 데스크톱에서는 세 번째 배너 이미지를 보이도록 함 */
/* Desktop banner natural height restore | 2026-04-08 cop */
.main_banner{display: inline-block; width: 33.333%; height: auto; padding: 0 0 0px 0; margin: 0 0 0 0; font-size: 0; line-height: 0; overflow: hidden; position: relative; touch-action: pan-y; cursor: grab; user-select: none;}
.main_banner.is-dragging{cursor: grabbing;}
.main_banner_track{display: flex; width: 100%; height: auto; will-change: transform; transform: translateZ(0);} /* Subpixel seam mitigation | 2026-04-09 cop */
.main_banner_slide{flex: 0 0 100%; width: 100%; height: auto; object-fit: cover; display: block; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.main_banner img{width: 100%; height: auto; object-fit: cover; display: block;}


/* menu */
.menu_pac{padding: 50px 0px 110px 0px; text-align: center;}
.menu_img{display: inline-block; vertical-align: top; margin:0 20px 0 20px; width: 397px;}
.menu_img img{width: 397px;}
/* Desktop first menu slider height restore | 2026-04-08 cop */
.menu_img_pac > .menu_img:first-child{height: auto;}
.menu_img_pac > .menu_img:first-child .menu_img_track{height: auto;}
.menu_img_pac > .menu_img:first-child .menu_img_slide,
.menu_img_pac > .menu_img:first-child img{height: auto;}
/* Desktop menu slider visibility restore | 2026-04-08 cop */
.menu_img_pac > .menu_img:nth-child(n+2){display: inline-block;}
.menu_h1{text-align: center; padding: 80px 0 0 0; font-family: var(--font-kr); font-size: 17px; color: #303030; line-height: 1.5; letter-spacing: -0.5px;}
.menu_h2{text-align: center; padding: 20px 0 40px 0; font-family: var(--font-en); font-size: 14px; color: #919090; line-height: 1.5; letter-spacing: -0.5px;}
.menu_btn{text-align: center;}
.btn_menu_down{display: inline-block; font-family: var(--font-en); font-size: 16px; margin: 0 auto; border: 1px solid #b6b6b6; border-radius: 50px; padding: 10px 15px 12px 12px; cursor: pointer;}
.btn_menu_down img{width:25px; margin: 0 5px 0 0;}

/* reservation */
.reser_unit{padding: 0 30px 0 30px;}
.reser_unit dt{font-family: var(--font-en); font-size: 20px; font-weight: 400; color: #303030;}
.reser_unit dd{font-family: var(--font-en); font-size: 18px; font-weight: 300; color: #8a8a8a; line-height: 1.5; padding: 5px 0 30px 0; margin: 0 0 0 0;}
.reser_btn{display: inline-block; margin: 5px 15px 0 0;}
.reser_btn img{width: 33px;}
.reser_slider_track img{flex: 0 0 100%; width: 100%; display: block; pointer-events: none; object-fit: cover;}
.reser_pac{display: flex; padding: 50px 0 50px 0;}
.reser_left_box{padding: 148px 0 50px 0; display: inline-block; vertical-align: top; width:30%;}
.reser_right_box{padding: 0 0 50px 0; display: inline-block; vertical-align: top; width:70%;}

/* contact */
.contact_pac{padding: 80px 30px 100px 30px; display: flex;}
.half_box{display: inline-block; width: 50%;}
.contact_h1{font-family: var(--font-en); font-size: 22px; color: #303030; line-height: 1.5;  padding: 0 0 10px 0;}
.contact_h2{font-family: var(--font-en); font-size: 18px; color: #555555; line-height: 1.5; }
.contact_h2 p:nth-child(1){font-family: var(--font-kr); font-size: 16px; color: #303030; padding: 0 0 15px 0;}
.contact_h2 p:nth-child(2){font-family: var(--font-en); font-size: 14px; color: #808080; padding: 0 0 15px 0;}
.contact_h2 p:nth-child(3){font-family: var(--font-en); font-size: 14px; color: #808080; padding: 0 0 50px 0;}
.contact_h3{font-family: var(--font-en); font-size: 16px; color: #555555; padding: 10px 0 0 0;}
.contact_insta{display: inline-block; margin: 5px 20px 0 0; vertical-align: top; border-right: 1px solid #ddd; padding: 0 20px 0 0;}
.contact_mail{display: inline-block; margin: 0px 10px 0 0; vertical-align: top; line-height: 25px;}

/* footer */
.footer{background-color: #000; text-align: center; padding: 80px 0 80px 0;}
.footer_logo img{width: 91px;}
.footer_txt{font-family: var(--font-kr-sans); font-size: 13px; color: #fff; line-height: 1.5; padding: 25px 0 0 0;}




}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
/*사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.*/

.wrap_frame{width: 1020px; margin: 0 auto;}

.menu_img{display: inline-block; vertical-align: top; margin:0 10px 0 10px; width: 280px;}
.menu_img img{width: 280px;}


}



/* Desktop Device */
@media all and (min-width:1280px) {
/*사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.*/

.wrap_frame{width: 1280px; margin: 0 auto;}


}