@charset "UTF-8";

:root {
    --color-brown:                        #4E3525;
    --color-beige:                        #F9F1E4;
    --color-deepbeige:                    #F4E3C9;
    --color-orange:                       #C57D35;
    --color-green:                        #5D5833;
    --color-border:                       #333333;

    --width_global:                       1320px;
    --width_pc_navheight:                 143px;

    --font:                               'Noto Sans KR', sans-serif;
    --line-height-loose-more:             1.825;
    --line-height-loose:                  1.725;
    --line-height:                        1.625;
    --line-height-tight:                  1.525;
    --line-height-tight-more:             1.425;
    --font-weight-1:                      400;
    --font-weight-2:                      700;
    --font-weight-3:                      800;

    --border-radius:                      15px;

    --transition:                         all 0.2s ease-in-out;
}

#gnb_all { padding:15px 0; background:rgba(255,255,255,.7); border-radius:0 0 10px 10px; border-top:1px solid #4e3525; backdrop-filter:blur(5px); }
#gnb_all .gnb_al_li li a { color:#333; }

body { font-family:var(--font); line-height:var(--line-height); letter-spacing:-0.02em; }
#wrapper { overflow:inherit; }
html { background:var(--color-deepbeige); /*scroll-behavior:smooth;*/ }
br.linebreak { display:none; }

.gototop { position:fixed; left:50%; bottom:35px; z-index:1; transform:translateX(-50%); padding:9px 40px; border-radius:25px; background:rgba(255,255,255,.7); filter:drop-shadow(0px 5px 5px rgba(0,0,0,.15)); cursor:pointer; display:none; }
    .gototop a { display:flex; width:100%; height:100%; justify-content:center; align-items:center; font-size:14px; text-transform:uppercase; color:var(--color-brown); font-weight:var(--font-weight-2); letter-spacing:0.25px; }

/* Typography */
p.h1 { font-family:var(--font); font-size:50px; font-weight:var(--font-weight-3); color:var(--color-brown); text-transform:uppercase; margin-bottom:65px; line-height:0; }
p.h2 { font-family:var(--font); font-size:34px; font-weight:var(--font-weight-3); color:var(--color-brown); text-transform:uppercase; margin-bottom:45px; line-height:0; }
div.h3 { font-family:var(--font); font-size:16px; font-weight:var(--font-weight-3); color:var(--color-orange); text-transform:uppercase; margin-bottom:35px; line-height:0; }

/* Layout */
div.optWrap { background:var(--color-deepbeige); }
div.optWrap.first { margin-top:var(--width_pc_navheight); border-top:1px solid #C29E87; }
div.optWrap.first.menu { position:relative; isolation:isolate; background-image:url("./background-menu-min.jpg"); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-position:center; }
div.optWrap.first.menu:after { content:""; position:absolute; background:#473B28; z-index:-1; inset:0; opacity:.8; }
    div.optWrap section.container { display:block; width:100%; max-width:var(--width_global); margin:0 auto; padding:0 40px 0 40px; }
    div.optWrap section.container.hero { /*background:var(--color-beige);*/ padding:80px 40px; }
        div.optWrap section.container.hero p { font-size:16px; color:#FFF; font-weight:var(--font-weight-1); line-height:var(--line-height-loose-more); margin-bottom:20px; }
        div.optWrap section.container.hero p.accent { font-size:24px; font-weight:var(--font-weight-3); line-height:var(--line-height); }
            div.optWrap section.container.hero p.accent b { color:var(--color-orange); font-weight:var(--font-weight-3); }
        div.optWrap section.container.hero p:last-child { margin-bottom:0; }
    div.optWrap section.container div.floatMenu { width:100%; position:sticky; top:var(--width_pc_navheight); z-index:1; filter:drop-shadow(0 12px 25px rgba(0,0,0,.08)); }
                div.optWrap section.container div.floatMenu ul.menuType { display:grid; grid-template-columns:repeat(4, 1fr); margin-bottom:80px; background:#F9F1E4; }
                div.optWrap section.container div.floatMenu ul.menuType li { font-size:18px; color:var(--color-brown); line-height:var(--line-height); text-align:center; text-transform:uppercase; border-right:1px solid #D3CFCD; transition:var(--transition); }
                div.optWrap section.container div.floatMenu ul.menuType li:hover { cursor:pointer; font-weight:var(--font-weight-2); transition:var(--transition); }
                div.optWrap section.container div.floatMenu ul.menuType li.active { font-weight:var(--font-weight-3); background:var(--color-brown); }
                    div.optWrap section.container div.floatMenu ul.menuType li.active a { color:#FFF; }
                div.optWrap section.container div.floatMenu ul.menuType li:last-child { border-right:0; }
                    div.optWrap section.container div.floatMenu ul.menuType li a { display:block; width:100%; height:100%; padding:25px 20px; }
    div.optWrap section.container div.menuWrap { display:block; position:relative; }
        div.optWrap section.container div.menuWrap div.menuListContainer { margin-bottom:70px; border-bottom:1px dashed #C29E87; }
        div.optWrap section.container div.menuWrap div.menuListContainer:last-child { margin-bottom:50px; border-bottom:0; }
            div.optWrap section.container div.menuWrap div.menuListContainer div.intro { margin-bottom:40px; }
                div.optWrap section.container div.menuWrap div.menuListContainer div.intro p { position:relative; font-size:16px; color:var(--color-brown); font-weight:var(--font-weight-1); line-height:var(--line-height-loose); padding-left:25px; margin-bottom:10px; }
                div.optWrap section.container div.menuWrap div.menuListContainer div.intro p:before { position:absolute; top:0; left:0; content:""; width:1px; height:100%; background:var(--color-brown); }
                div.optWrap section.container div.menuWrap div.menuListContainer div.intro p:last-child { margin-bottom:0; }
                    div.optWrap section.container div.menuWrap div.menuListContainer div.intro p b.accent { color:var(--color-orange); font-weight:var(--font-weight-2); }
            div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid { display:grid; grid-template-columns:repeat(4, 1fr); grid-column-gap:15px; grid-row-gap:15px; padding-bottom:60px; -webkit-user-select:none; user-select:none; }
                div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item { position:relative; display:flex; flex-direction:column; text-align:center; justify-content:center; align-items:center; padding:15px; background:rgba(255, 254, 244, 0.5); box-shadow:0 2px 10px 0 rgba(0,0,0,0.1); height:260px; border-radius:var(--border-radius); transition:var(--transition); }
                div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item:hover { cursor:pointer; transform:scale(105%); transition:var(--transition); }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item img { width:140px; -webkit-user-select:none; user-select:none; pointer-events:none; }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.title { font-size:16px; line-height:var(--line-height-tight); color:var(--color-brown); margin-bottom:0; font-weight: 500;}
                        div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.title span { display:inline-block; font-size:10px; border:1px solid var(--color-brown); color:var(--color-brown); margin:5px 0 3px 0; padding:2px 7px; transform:translateY(-3px); opacity:.6; }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.title_sub { font-size:14px; color:var(--color-brown); }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.signature { position:absolute; top:10px; right:10px; font-family:var(--font); font-weight:var(--font-weight-1); font-size:11px; color:#FFF; background:#2343156E; border-radius:var(--border-radius); padding:5px 12px; }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.decaf { position:absolute; top:10px; right:10px; font-family:var(--font); font-weight:var(--font-weight-1); font-size:11px; color:#FFF; background:#553F156E; border-radius:var(--border-radius); padding:5px 12px; }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.kidspick { position:absolute; top:10px; right:10px; font-family:var(--font); font-weight:var(--font-weight-1); font-size:11px; color:#FFF; background:#BA75116E; border-radius:var(--border-radius); padding:5px 12px; }
                        div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.signature img.recommend { width:11px; margin-right:3px; position:relative; top:-2px; }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.detail-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:#4E3525D6; color:white; border-radius:var(--border-radius); display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:0; visibility:hidden; transition:all 0.3s ease-in-out; padding:10px; box-sizing:border-box; }
                    div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item.active div.detail-overlay { opacity:1; visibility:visible; }
                        div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.detail-overlay div.title { font-size:18px; margin:0 0 13px 0; color:var(--color-orange); font-weight:var(--font-weight-1); }
                        div.optWrap section.container div.menuWrap div.menuListContainer ul.menuGrid li.menu-item div.detail-overlay p { font-size:14px; font-weight:var(--font-weight-1); line-height:var(--line-height-tight); }


/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////Responsible Layout Divider//////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */
@media screen and (max-width:1360px){
    :root {
        --width_global:                       1320px;
        --width_floatingNav:                  320px;
    }
}