@charset "UTF-8";
@media all and (min-width:0px) and (max-width:1039px){
    :root{

        --mrgn-x2: calc(var(--mrgn) * 2);
        --basic-width : calc(100% - var(--mrgn-x4));
        --mobile-nav-width: 240px;
        /* 모바일 메뉴바 넓이 */
        /* var(--mobile-nav-width) */
        /* calc(var(--mobile-nav-width) * -1) */

        /* 그리드 */
        --total-margin: calc(var(--mrgn-x2) * 11);
        --page-width: calc(var(--basic-width) - var(--total-margin));
        --column: calc(var(--page-width) / 12);
    }
    /* ---------------- 08 프레즐타임 */
    ul.g_con{ width: 100%; margin: 0 auto; display: grid; grid-gap: var(--mrgn-x2); grid-template-columns: repeat(4, 1fr);}
    ul.g_con.photo > li.cells:nth-child(1){ grid-column: 1/2; grid-row: 1/3;}
    ul.g_con.photo > li.cells:nth-child(2){ grid-column: 2/4; grid-row: 1/3;}
    ul.g_con.photo > li.cells:nth-child(3){ grid-column: 3/5; grid-row: 6/7;}
    ul.g_con.photo > li.cells:nth-child(4){ grid-column: 4/5; grid-row: 4/6;}
    ul.g_con.photo > li.cells:nth-child(5){ grid-column: 4/5; grid-row: 2/4;}
    ul.g_con.photo > li.cells:nth-child(6){ grid-column: 4/5; grid-row: 1/2;}
    ul.g_con.photo > li.cells:nth-child(7){ grid-column: 1/3; grid-row: 3/4;}
    ul.g_con.photo > li.cells:nth-child(8){ grid-column: 3/4; grid-row: 3/4;}
    ul.g_con.photo > li.cells:nth-child(9){ grid-column: 1/3; grid-row: 5/7;}
    ul.g_con.photo > li.cells:nth-child(10){ grid-column: 3/4; grid-row: 5/6;}
    ul.g_con.photo > li.cells:nth-child(11){ grid-column: 1/2; grid-row: 4/5;}
    ul.g_con.photo > li.cells:nth-child(12){ grid-column: 2/4; grid-row: 4/5;}



    html:has(> body.open_nav),
    body.open_nav { overflow: hidden;}
    #header.sections.section_00{ height: 60px !important;}
    #header.sections.section_00 .width_con .nav_cover{ position: fixed; top: 0; right: 0; width: 0; height: 100vh; background: transparent; box-shadow: 0 0 0 0 transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: all 0ms 150ms, background 150ms linear, -webkit-backdrop-filter 150ms linear, backdrop-filter 150ms linear; z-index: 1;}
    body.open_nav #header.sections.section_00 .width_con .nav_cover{ width: 100vw; background: var(--color-k-085); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 0 50vw 50vw var(--color-k-085); transition: all 500ms ease-out, -webkit-backdrop-filter 1000ms linear 500ms, backdrop-filter 1000ms linear 500ms;}
    #header.sections.section_00 .width_con .btn_open_nav{ position: absolute; top: 10px; right: 0; display: block; width: 40px; height: 40px; cursor: pointer; transition: all 250ms ease-in-out; z-index: 2; }
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav{ right: calc(var(--mobile-nav-width) - var(--mrgn-x2));}
    #header.sections.section_00 .width_con .btn_open_nav div{ position: absolute; top: 18px; right: 5px; width: 30px; height: 4px; background: var(--color-w); border-radius: 1px; transition: background 0ms 150ms;}
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div{ background: transparent;}
    #header.sections.section_00 .width_con .btn_open_nav div:before,
    #header.sections.section_00 .width_con .btn_open_nav div:after{ position: absolute; content: ''; right: 0; width: inherit; height: inherit; background: var(--color-w); border-radius: inherit; transition: all 150ms ease-in-out 150ms, transform 150ms ease-in-out; }
    #header.sections.section_00 .width_con .btn_open_nav div:before{ top: -10px; transform: rotate(0deg);}
    #header.sections.section_00 .width_con .btn_open_nav div:after{ top: 10px; transform: rotate(0deg);}
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:before,
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:after{transition: all 150ms ease-in-out, transform 150ms ease-in-out 150ms;}
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:before{ top: 0; transform: rotate(45deg);}
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:after{ top: 0; transform: rotate(135deg);}

    /* 메뉴바 촵촵촵 애니메이션 */
    #header.section_00 .width_con ul.nav_lnb li,
    #header.section_00 .width_con ul.nav_gnb li{ display: block; float: initial; margin: var(--margin) 0 0 0; transform: translateX(20px); opacity: 0; filter: blur(4px); transition: all 500ms ease-out;}
    
    body.open_nav #header.section_00 .width_con ul.nav_lnb li,
    body.open_nav #header.section_00 .width_con ul.nav_gnb li{ transform: translateX(0); opacity: 1; filter: blur(0);}
    /* 로컬메뉴 */
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(1){transition-delay: 250ms;}
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(2){transition-delay: 300ms;}
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(3){transition-delay: 350ms;}
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(4){transition-delay: 400ms;}
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(5){transition-delay: 450ms;}
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(6){transition-delay: 500ms;}
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(7){transition-delay: 550ms;}
    body.open_nav  #header.section_00 .width_con ul.nav_lnb li:nth-child(8){transition-delay: 600ms;}
    /* 글로벌메뉴 */
    body.open_nav #header.section_00 .width_con ul.nav_gnb li:nth-child(1){transition-delay: 650ms;}
    body.open_nav #header.section_00 .width_con ul.nav_gnb li:nth-child(2){transition-delay: 700ms;}
    body.open_nav #header.section_00 .width_con ul.nav_gnb li:nth-child(3){transition-delay: 750ms;}
    body.open_nav #header.section_00 .width_con ul.nav_gnb li:nth-child(4){transition-delay: 800ms;}
    body.open_nav #header.section_00 .width_con ul.nav_gnb li:nth-child(5){transition-delay: 850ms;}
    /* 여기까지 촵촵촵 */


    .sticky { position: static !important;}


    .btn.btn_a:hover,
    .btn.btn_b:hover,
    .btn.btn.tab:hover,
    ul.v_con > li.cells.box:has(> a):hover,
    ul.v_con > li.cells.box:hover > a {}



    /* ---------------- 00 헤더 */
    #header.sections.section_00 { height: 60px; overflow: visible !important;}
    /* 반응형일때 로고 변경 */
    #header.sections.section_00 .width_con a.btn_home { height: 40px !important; top: 10px !important;}
    #header.sections.section_00 .width_con a.btn_home img.bi{ display: none;}
    #header.sections.section_00 .width_con a.btn_home img.bi.long{ display: block; transition: filter .25s ease-out; margin-top: 5px;}
    body.open_nav #header.sections.section_00 .width_con a.btn_home img.bi.long{ filter: blur(4px); pointer-events: none;}
    /* 여기까지 */
    #header.sections.section_00 .width_con ul{ z-index: 2;}
    #header.sections.section_00 .width_con ul > li > a{ color: var(--color-w) !important;}
    #header.sections.section_00 .width_con ul.nav_lnb > li:hover a:after{ display: none;}
    #header.sections.section_00 .width_con ul.nav_gnb,
    #header.sections.section_00 .width_con ul.nav_lnb{ position: fixed; right: calc(var(--mobile-nav-width) * -1); width: var(--mobile-nav-width); box-sizing: border-box; background: var(--color-k);}
    #header.sections.section_00 .width_con ul.nav_gnb{ bottom: 0; top: auto !important; padding: var(--mrgn-x2) var(--mrgn-x2) var(--mrgn-x4) var(--mrgn-x2); opacity: 1 !important; filter: blur(0) !important; pointer-events: all !important; z-index: 3;}
    #header.sections.section_00 .width_con ul.nav_gnb:after{ position: absolute; content: ''; bottom: 100%; left: 0; width: 100%; height: var(--mrgn-x2); pointer-events: none; background: linear-gradient(transparent, var(--color-k));}
    #header.sections.section_00 .width_con ul.nav_lnb{ top: 0 !important; height: 100vh; padding: var(--mrgn-x8) 0 calc(var(--mrgn-x16) * 1.5); overflow: auto;}
    #header.sections.section_00 .width_con ul.nav_lnb:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: var(--mrgn-x8); pointer-events: none; background: var(--color-k) url(../img/logo_01_white.svg) no-repeat 50% var(--mrgn-x4) / calc(var(--mobile-nav-width) - var(--mrgn-x4));}
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb,
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb{right: 0;}
    #header.sections.section_00 .width_con ul.nav_gnb > li,
    #header.sections.section_00 .width_con ul.nav_lnb > li{ display: block; }
    #header.sections.section_00 .width_con ul.nav_gnb > li{ margin: 1.5em 0 0 0; font-size: 1.25em;}
    #header.sections.section_00 .width_con ul.nav_gnb > li.v_divider{ color: transparent; height: 1px; background-color: var(--color-w-015);}
    #header.sections.section_00 .width_con ul.nav_lnb > li{ margin-top: 2.5em; font-size: 1.35em;}

    

    /* ---------------- 01 비주얼 */
    #visual.sections.section_01{}
    #visual.sections.section_01 .width_con{}
    #visual.sections.section_01 .width_con .v_con.two_con{}
    #visual.sections.section_01 .width_con .v_con.two_con li.cells{}
    #visual.sections.section_01 .width_con .v_con.two_con li.cells .title_con{ top: calc(var(--mrgn-x4) * 1);}

    /* ---------------- 02 시즌메뉴 */
    #season.sections.section_02{ background: url(../img/bg_seasonmenu_798.webp) no-repeat 50% 50% / cover; aspect-ratio: 4/3;}

    /* ---------------- 03 메뉴 */
    #menu.sections.section_03 .width_con ul.v_con.six_con li.cells{ width: calc(33.333% - var(--mrgn-x2));}/* 4콘으로 만들기*/

    /* ---------------- 04 모바일 */
    #app.sections.section_04{}/* app 배경 위치 잡기*/
    #app.sections.section_04 > img{ top: calc(var(--mrgn-x8) * -1.25); width: 65%; margin: 0; transform: translate(-50%, 0);z-index: 2;}/* app img 위치 잡기*/
    
    #app.sections.section_04 .width_con ul.v_con.two_con > li.cells:first-child{ padding-top: calc(75% - var(--mrgn-x4));}/* 텍스트 위치 잡기*/
    #app.sections.section_04 .width_con ul.v_con.two_con li.cells{ width: calc(100% - var(--mrgn-x2));}/* 원콘으로 만들기*/
    #app.sections.section_04 .title_con{ text-align: center;}
    #app.sections.section_04 .title_con h3:before{ top: calc(var(--mrgn-x2) * -1.5); left: 50%; margin-left: calc(var(--mrgn) * -1);}
    #app.sections.section_04 .title_con h4:before{ left: 50%; transform: translateX(-50%);}
    #app.sections.section_04  .width_con ul.v_con .title_con h5{margin: 0 var(--mrgn-x4);}

    /* ---------------- 05 기프트카드 */
    #giftcard.sections.section_05 .title_con{ text-align: center; margin-top: var(--mrgn-x4);}
    #giftcard.sections.section_05 .title_con h3:before{ top: calc(var(--mrgn-x2) * -1.5); left: 50%; margin-left: calc(var(--mrgn) * -1);}
    #giftcard.sections.section_05 .title_con h4:before{ left: 50%; transform: translateX(-50%);}
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con li.cells{ width: calc(100% - var(--mrgn-x2));}
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con > li.cells:nth-child(1){ aspect-ratio:2/1;}
    /* 이미지위에 그라데이션 못넣겠음 */
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con > li.cells > img{ background: linear-gradient(transparent, var(--color-main));} 
    #giftcard.sections.section_05 .width_con ul.v_con.three_con li.cells{}
    #giftcard.sections.section_05 .width_con ul.v_con > .btn_con{ display: block;}
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con > li.cells .btn_con{ display: none;}
    #giftcard.sections.section_05 .width_con ul.v_con .title_con h5,
    #giftcard.sections.section_05 .width_con ul.v_con .title_con h6{ margin: var(--mrgn) var(--mrgn-x4);}

    /* ---------------- 06 브랜드소개 */
    #brand.sections.section_06 .width_con ul.v_con li.cells.open,
    #brand.sections.section_06 .width_con ul.v_con li.cells{ width: calc(50% - var(--mrgn-x2)); aspect-ratio: 2/1; transform: scale(1);}
    #brand.sections.section_06 .width_con ul.v_con li.cells{transition: all 300ms ease-out; box-sizing: border-box; overflow: hidden; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35); transform: scale(1); filter: brightness(1);}
    #brand.sections.section_06 .width_con ul.v_con li.cells{ border: 2px solid var(--color-point); background: rgba(255, 255, 255, 0.1); pointer-events: none;}
    #brand.sections.section_06 .width_con ul.v_con li.cells:not(.open){ pointer-events: none;}
    #brand.sections.section_06 .width_con ul.v_con li.cells.cube:before,
    #brand.sections.section_06 .width_con ul.v_con li.cells.cube:after { display: none;}
    /* 기본 상태 텍스트 보이게 */
    #brand.sections.section_06 .width_con ul.v_con li.cells .text_con h5,
    #brand.sections.section_06 .width_con ul.v_con li.cells .text_con h6 { position: relative; filter: opacity(1);}

    /* ---------------- 07 히스토리 */
    #history.sections.section_07 .width_con ul.v_con li.cells{ width: calc(100% - var(--mrgn-x2));}

    /* ---------------- 09 지도 */
    /* #contact.sections.section_09 .width_con { width: var(--basic-width); margin-right: auto;} */
}
@media all and (min-width:0px) and (max-width:599px){
    /*모바일*/
    :root{
        --mrgn: 12.5px;
        --mrgn-x2: calc(var(--mrgn) * 2);
        --mrgn-x4: calc(var(--mrgn) * 4);
        --basic-font-size: 12px;
        --basic-width : calc(100% - var(--mrgn-x4));
        /* 그리드 */
        --total-margin: calc(var(--mrgn-x2) * 11);
        --page-width: calc(var(--basic-width) - var(--total-margin));
        --column: calc(var(--page-width) / 12);
    }
    /* ---------------- 08 프레즐타임 */
    ul.g_con{ width: 100%; margin: 0 auto; display: grid; grid-gap: var(--mrgn-x2); grid-template-columns: repeat(3, 1fr);}
    ul.g_con.photo > li.cells:nth-child(1){ grid-column: 1/2; grid-row: 1/3;}
    ul.g_con.photo > li.cells:nth-child(2){ grid-column: 2/4; grid-row: 1/3;}
    ul.g_con.photo > li.cells:nth-child(3){ grid-column: 2/4; grid-row: 4/5;}
    ul.g_con.photo > li.cells:nth-child(4){ grid-column: 3/4; grid-row: 5/7;}
    ul.g_con.photo > li.cells:nth-child(5){ grid-column: 1/2; grid-row: 4/6;}
    ul.g_con.photo > li.cells:nth-child(6){ grid-column: 3/4; grid-row: 7/8;}
    ul.g_con.photo > li.cells:nth-child(7){ grid-column: 1/3; grid-row: 3/4;}
    ul.g_con.photo > li.cells:nth-child(8){ grid-column: 3/4; grid-row: 3/4;}
    ul.g_con.photo > li.cells:nth-child(9){ grid-column: 1/3; grid-row: 6/8;}
    ul.g_con.photo > li.cells:nth-child(10){ grid-column: 2/3; grid-row: 5/6;}
    ul.g_con.photo > li.cells:nth-child(11){ grid-column: 1/2; grid-row: 8/9;}
    ul.g_con.photo > li.cells:nth-child(12){ grid-column: 2/4; grid-row: 8/9;}


    /* ---------------- 텍스트 센터정렬 */
    
    .btn_con.mobile,
    .title_con.mobile{ text-align: center;}
    .title_con.mobile h3:before{ top: calc(var(--mrgn-x2) * -1.5); left: 50%; margin-left: calc(var(--mrgn) * -1);}
    .title_con.mobile h4:before{ left: 50%; transform: translateX(-50%);}
    .sticky { position: static !important;}

    /* ---------------- 01 비주얼 */
    #visual.sections.section_01{ background: url(../img/bg_intro_798.webp) no-repeat 50% 50% / cover; aspect-ratio: 5/8;}
    #visual.sections.section_01 .width_con .v_con.two_con li.cells{ width: calc(100% - var(--mrgn-x2));}
    #visual.sections.section_01 .width_con .v_con.two_con li.cells .title_con { margin-bottom: calc(50% - var(--mrgn));}

    /* ---------------- 02 시즌메뉴 */
    #season.sections.section_02 > .fixed_bg {background: var(--color-k) url(../img/bg_seasonmenu_476.webp) no-repeat 50% 50% / cover; aspect-ratio: 3/4;}

    /* ---------------- 03 메뉴 */
    #menu.sections.section_03 .width_con ul.v_con.six_con li.cells{ width: calc(50% - var(--mrgn-x2));}/* 2콘으로 만들기*/

    /* ---------------- 04 모바일 */
    #app.sections.section_04{ background: url(../img/bg_app.webp) no-repeat 50% calc(var(--mrgn-x4) * -1.5) / 70%;}/* app 배경 위치 잡기*/
    #app.sections.section_04 > img{ top: calc(var(--mrgn-x4) * -1.5); width: 70%; margin: 0; transform: translate(-50%, 0);z-index: 2;}/* app img 위치 잡기*/
    #app.sections.section_04 .width_con ul.v_con.two_con > li.cells:first-child{ padding-top: calc(75% - var(--mrgn-half));}/* 텍스트 위치 잡기*/
    #app.sections.section_04 .width_con ul.v_con.two_con li.cells{ width: calc(100% - var(--mrgn-x2));}/* 원콘으로 만들기*/
    #app.sections.section_04  .width_con ul.v_con .title_con h4,
    #app.sections.section_04  .width_con ul.v_con .title_con h5{ margin: var(--mrgn) var(--mrgn-x2);}

    /* ---------------- 05 기프트카드 */
    #giftcard.sections.section_05{}
    #giftcard.sections.section_05 .title_con{ margin-top: var(--mrgn);}
    #giftcard.sections.section_05 .width_con{}
    #giftcard.sections.section_05 .width_con ul.v_con{}
    #giftcard.sections.section_05 .width_con ul.v_con > .btn_con{ display: none;}
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con > li.cells .btn_con{ display: none;}
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con{}
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con > li.cells:last-child{ padding-top: var(--mrgn-x4);}
    #giftcard.sections.section_05 .width_con ul.v_con.ub_two_con li.cells{}
    #giftcard.sections.section_05 .width_con ul.v_con.three_con li.cells{ width: calc(100% - var(--mrgn-x2)); aspect-ratio: 1/1;}
    #giftcard.sections.section_05 .width_con ul.v_con.three_con li .text_con{ top: 65%;}
    #giftcard.sections.section_05 .width_con ul.v_con .title_con h4,
    #giftcard.sections.section_05 .width_con ul.v_con .title_con h5,
    #giftcard.sections.section_05 .width_con ul.v_con .title_con h6{ margin: var(--mrgn) var(--mrgn-x4);}

    /* ---------------- 06 브랜드소개 */
    #brand.sections.section_06 .width_con ul.v_con li.cells.open,
    #brand.sections.section_06 .width_con ul.v_con li.cells{ width: calc(100% - var(--mrgn-x2)); aspect-ratio: 2/1; transform: scale(1);}
    #brand.sections.section_06 .width_con ul.v_con li.cells{transition: all 300ms ease-out; box-sizing: border-box; overflow: hidden; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35); transform: scale(1); filter: brightness(1);}
    #brand.sections.section_06 .width_con ul.v_con li.cells{ border: 2px solid var(--color-point); background: rgba(255, 255, 255, 0.1); pointer-events: none;}
    #brand.sections.section_06 .width_con ul.v_con li.cells:not(.open){ pointer-events: none;}
    #brand.sections.section_06 .width_con ul.v_con li.cells.cube:before,
    #brand.sections.section_06 .width_con ul.v_con li.cells.cube:after { display: none;}
    /* 기본 상태 텍스트 보이게 */
    #brand.sections.section_06 .width_con ul.v_con li.cells .text_con h5,
    #brand.sections.section_06 .width_con ul.v_con li.cells .text_con h6 { position: relative; filter: opacity(1);}

    /* ---------------- 07 히스토리 */
    #history.sections.section_07 .width_con ul.v_con li.cells{ width: calc(100% - var(--mrgn-x2));}
    #history.sections.section_07 .width_con ul.v_con.two_con > li.cells .text_con{ padding-bottom: var(--mrgn-half);}

    /* ---------------- 09 지도 */
    #contact.sections.section_09:before{ width: auto; height: 150%; top: 0; transform: translate(-50%, 0); -webkit-mask-image: radial-gradient(transparent calc(var(--basic-width)* .15), #fff calc(var(--basic-width)* .25)); mask-image: radial-gradient(transparent calc(var(--basic-width)* .15), #fff calc(var(--basic-width)* .25)); }
    #contact.sections.section_09 .map { top: -20%; width: 100%; }
    #contact.sections.section_09 .width_con { width: var(--basic-width); margin-right: auto;}
    #contact.sections.section_09 .width_con ul.v_con li.cells.box{ width: calc(100% - var(--mrgn-x2)); text-align: center; padding-bottom: 65%;}
    #contact.sections.section_09 .width_con ul.v_con li.cells.box .title_con > *{ margin-left: auto; margin-right: auto;}
    #contact.sections.section_09 .width_con .title_con h3:before,
    #contact.sections.section_09 .width_con .title_con h4:before { left: calc(50% - var(--mrgn));}

}
@media all and (min-width:0px) and (max-width:479px){
    /*작은 모바일*/
    :root{
        --mrgn: 10px;
        --mrgn-x2: calc(var(--mrgn) * 2);
        --mrgn-x4: calc(var(--mrgn) * 4);
        --basic-font-size: 10px;
        --basic-width : calc(100% - var(--mrgn-x4));
        /* 그리드 */
        --total-margin: calc(var(--mrgn-x2) * 11);
        --page-width: calc(var(--basic-width) - var(--total-margin));
        --column: calc(var(--page-width) / 12);
    }
    /* ---------------- 08 프레즐타임 */
    ul.g_con{ width: 100%; margin: 0 auto; display: grid; grid-gap: var(--mrgn-x2); grid-template-columns: repeat(3, 1fr);}
    ul.g_con.photo > li.cells:nth-child(1){ grid-column: 1/2; grid-row: 1/3;}
    ul.g_con.photo > li.cells:nth-child(2){ grid-column: 2/4; grid-row: 1/3;}
    ul.g_con.photo > li.cells:nth-child(3){ grid-column: 2/4; grid-row: 4/5;}
    ul.g_con.photo > li.cells:nth-child(4){ grid-column: 3/4; grid-row: 5/7;}
    ul.g_con.photo > li.cells:nth-child(5){ grid-column: 1/2; grid-row: 4/6;}
    ul.g_con.photo > li.cells:nth-child(6){ grid-column: 3/4; grid-row: 7/8;}
    ul.g_con.photo > li.cells:nth-child(7){ grid-column: 1/3; grid-row: 3/4;}
    ul.g_con.photo > li.cells:nth-child(8){ grid-column: 3/4; grid-row: 3/4;}
    ul.g_con.photo > li.cells:nth-child(9){ grid-column: 1/3; grid-row: 6/8;}
    ul.g_con.photo > li.cells:nth-child(10){ grid-column: 2/3; grid-row: 5/6;}
    ul.g_con.photo > li.cells:nth-child(11){ grid-column: 1/2; grid-row: 8/9;}
    ul.g_con.photo > li.cells:nth-child(12){ grid-column: 2/4; grid-row: 8/9;}

    .btn_con.mobile,
    .title_con{ text-align: center;}
    .title_con h3:before{ top: calc(var(--mrgn-x2) * -1.5); left: 50%; margin-left: calc(var(--mrgn) * -1);}
    .title_con h4:before{ left: 50%; transform: translateX(-50%);}

    /* ---------------- 07 히스토리 */   
    #history.sections.section_07 .width_con ul.v_con li.cells{ width: calc(100% - var(--mrgn-x2));}
    
    /* ---------------- 09 지도 */
    #contact.sections.section_09 .width_con ul.v_con li.cells.box{ padding-bottom: 75%;}
}
@media all and (min-width:600px) and (max-width:1039px){
    /*타블렛*/
    :root{
        --mrgn: 15px;
        --mrgn-x2: calc(var(--mrgn) * 2);
        --mrgn-x4: calc(var(--mrgn) * 4);
        --basic-font-size: 12px;
        --basic-width : calc(100% - var(--mrgn-x4));
        /* 그리드 */
        --total-margin: calc(var(--mrgn-x2) * 11);
        --page-width: calc(var(--basic-width) - var(--total-margin));
        --column: calc(var(--page-width) / 12);
    }

    /* ---------------- 01 비주얼 */
    #visual.sections.section_01 .width_con .title_con{margin-bottom: calc(var(--mrgn-x2) * -1);}

    /* ---------------- 02 시즌메뉴 */
    #season.sections.section_02 > .fixed_bg {background: var(--color-k) url(../img/bg_seasonmenu_476.webp) no-repeat 50% 50% / cover; aspect-ratio: 3/4;}

    /* ---------------- 09 지도 */
    #contact.sections.section_09:before{ width: auto; height: 150%; top: 0; transform: translate(-50%, 0); }
    #contact.sections.section_09 .map { top: -20%; width: 100%;}
    #contact.sections.section_09 .width_con { width: var(--basic-width); margin-right: auto;}
    #contact.sections.section_09 .width_con ul.v_con li.cells.box{ width: calc(100% - var(--mrgn-x2)); text-align: center; padding-bottom: 50%;}
    #contact.sections.section_09 .width_con ul.v_con li.cells.box .title_con > *{ margin-left: auto; margin-right: auto;}
    #contact.sections.section_09 .width_con .title_con h3:before,
    #contact.sections.section_09 .width_con .title_con h4:before { left: calc(50% - var(--mrgn));}
}
@media all and (min-width:1040px) and (max-width:1239px){
    /*데스크탑*/
    :root{
        --mrgn: 17.5px;
        --basic-font-size: 13px;
        --basic-width : 1000px;
    }
    /* ---------------- 03 메뉴 */
    #menu.sections.section_03 .width_con ul.v_con.six_con li.cells{ width: calc(25% - var(--mrgn-x2));}

    /* ---------------- 09 지도 */
    #contact.sections.section_09:before{ width: auto; height: 150%; top: 0; transform: translate(-50%, 0);}
    #contact.sections.section_09 .map { top: -17.5%; width: 100%; }
    #contact.sections.section_09 .width_con { width: var(--basic-width); margin-right: auto;}
    #contact.sections.section_09 .width_con ul.v_con li.cells.box{ width: calc(100% - var(--mrgn-x2)); text-align: center; padding-bottom: 50%;}
    #contact.sections.section_09 .width_con ul.v_con li.cells.box .title_con > *{ margin-left: auto; margin-right: auto;}
    #contact.sections.section_09 .width_con .title_con h3:before,
    #contact.sections.section_09 .width_con .title_con h4:before { left: calc(50% - var(--mrgn));}
}
@media all and (min-width:1240px) and (max-width:1459px){
    /*큰 데스크탑*/
    /*1200기준 설계(쓰지 마쎄용)*/
}
@media all and (min-width:1460px){
    /*큰 데스크탑*/
    :root{
        --mrgn: 20px;
        --mrgn-x2: calc(var(--mrgn) * 2);
        --basic-font-size: 16px;
        --basic-width : 1400px;
        /* 그리드 */
        --total-margin: calc(var(--mrgn-x2) * 11);
        --page-width: calc(var(--basic-width) - var(--total-margin));
        --column: calc(var(--page-width) / 12);
        
        /* --column : 80px;  */
         
    }
}