/**
 * pages/hipmacplace.css — 힙맥플레이스 (/hipmacplace/*) 전용
 * ------------------------------------------------------------------
 * 페이지에서 $pageCSS = ['hipmacplace']; 선언 시 layoutHeader 가 자동 로드.
 *
 * 사용 페이지:
 *   - hipmacplace/index.php / hipmacplace.php / hanmac.php (한맥한상)
 *   - hipmacplace/store.php / store_all.php / store_busan*.php (매장)
 *   - hipmacplace/recipe.php / rec_sub01~04.php (레시피)
 *   - hipmacplace/soft_dinner.php (figure.effect-sadie)
 *
 * 이전: pc.css 89-265 + 맛집 → 통합 (2026-06-09)
 */

/* ── visual_area / store_slide (hipmacplace/store.php) ── */
.visual_area { display: flex; width: 93%; margin: 0 auto; justify-content: space-between; }
.store_slide_wrap { width: 33%; padding: 10px 0 100px; }
.store_slide_wrap p.tit { display: flex; justify-content: center; padding: 40px 0 25px; background: url("/resources/images/icon_seed.png") center top no-repeat; background-size: 23px; font-size: 1.3em; font-weight: 400; }
.store_slide_wrap .store_slide { width: 100%; }

/* ── slick slider (store_slider) ── */
.store_slider { width: 100%; max-width: 540px; margin: 0 auto; padding: 0; }
.store_slider .slick-slide { margin: 0; height: auto; }
.store_slider .slick-list { padding: 0 !important; transform: translateZ(0); }
.store_slider .slick-dots { position: absolute; right: 0; bottom: 5px; display: flex; width: 100%; padding: 0; text-align: center; list-style: none; }
.store_slider .slick-dots li { position: relative; flex: 1; height: 3px; margin: 0; padding: 0; cursor: pointer; }
.store_slider .slick-dots li button { display: block; width: 100%; height: 3px; padding: 0; background: 0 0; border: 0; outline: 0; color: transparent; cursor: pointer; }
.store_slider .slick-dots li button::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: #000; opacity: 1.75; }
.store_slider .slick-dots li.slick-active button::before { background: #fff; opacity: 1.75; }
.store_slider .slick-prev { left: 10px; height: 40px; z-index: 1; }
.store_slider .slick-next { right: 10px; height: 40px; }
.store_slider .slick-prev::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 45px; background: url("/resources/images/leftArrow.svg") no-repeat; background-size: 25px; opacity: 0.55; }
.store_slider .slick-next::before { content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 45px; background: url("/resources/images/rightArrow.svg") no-repeat; background-size: 25px; opacity: 0.55; }
.store_slider:hover .slick-prev::before,
.store_slider:hover .slick-next::before { opacity: 0.95; }

.post { display: inline-block; width: 100%; }
.post img { width: 100%; max-width: auto; }

/* ── figure.effect-sadie (hipmacplace 카드 hover — store / recipe / soft_dinner) ── */
figure.effect-sadie { position: relative; width: 100%; margin: 0; background: #3085a3; text-align: center; cursor: pointer; overflow: hidden; }
figure.effect-sadie figcaption::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%); opacity: 0.2; }
figure.effect-sadie h2 { position: absolute; left: 0; top: 18%; transform: translate3d(0, -50%, 0); width: 100%; color: rgba(255, 255, 255, 0.5); font-size: 42px; font-weight: 500; transition: transform 0.35s, color 0.35s; }
figure.effect-sadie h2 span { display: block; font-size: 0.6em; font-weight: 200; }
figure.effect-sadie figcaption::before,
figure.effect-sadie p { font-size: 24px; transition: opacity 0.35s, transform 0.35s; }
figure.effect-sadie p { position: absolute; left: 0; bottom: 10%; transform: translate3d(0, 30px, 0); width: 100%; padding: 0 1em; color: rgba(255, 255, 255, 0.7); font-weight: 200; opacity: 0; }
figure.effect-sadie p span.adr { display: block; padding: 15px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 0.7em; }
figure.effect-sadie p.sort { display: flex; align-items: flex-start; justify-content: center; }
figure.effect-sadie p.sort span { flex-basis: 20%; margin: 0 5px; }
figure.effect-sadie div.icon_area { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; width: 100%; opacity: 0; }
figure.effect-sadie div.icon_area .btn_gomap { width: 70px; height: 70px; margin: 0 20px; background: url("/resources/images/btn_gomap.png") no-repeat; background-size: 70px; opacity: 0.6; }
figure.effect-sadie div.icon_area .btn_view { width: 70px; height: 70px; margin: 0 20px; background: url("/resources/images/btn_viewvod.png") no-repeat; background-size: 70px; opacity: 0.6; }
figure.effect-sadie div.icon_area .btn_go { width: 68px; height: 68px; margin: 0; background: url("/resources/images/hipmacplace/arrow_go.png") no-repeat; background-size: 68px; opacity: 0.6; }
figure.effect-sadie div.icon_area .btn_gomap span,
figure.effect-sadie div.icon_area .btn_view span,
figure.effect-sadie div.icon_area .btn_go span { display: block; width: 0; height: 0; overflow: hidden; }
figure.effect-sadie:hover h2 { transform: translate3d(0, -50%, 0) translate3d(0, 10px, 0); color: #c38b48; }
figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover p { transform: translate3d(0, 0, 0); opacity: 1; }
figure.effect-sadie:hover div.icon_area { opacity: 1; }
figure.effect-sadie div.icon_area .btn_gomap:hover,
figure.effect-sadie div.icon_area .btn_view:hover { opacity: 1; }

/* ── store_list (busan/all) ── */
.store_list_wrap { width: 90%; margin: 0 auto; }
.store_list li { position: relative; display: flex; justify-content: space-between; padding: 70px 0; border-bottom: 1px solid #eee; }
.store_list_wrap.busan .store_list .store_list_tit:first-of-type { padding-top: 45px; }
.store_list_wrap.busan .store_list .store_list_tit { color: #00321f; font-size: 40px; font-weight: 800; line-height: 85px; border-bottom: 3px solid #00321f; }
.store_list_wrap.busan .store_list ul { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
.store_list_wrap.busan .store_list ul.cate-type { margin-bottom: 75px; }
.store_list_wrap.busan .store_list ul.cate-type:last-of-type { margin-bottom: auto; }
.store_list_wrap.busan .store_list ul::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1px; height: 100%; background: #eee; }
.store_list_wrap.busan .store_list li { flex-basis: 50%; align-items: flex-start; width: 50%; padding: 20px 0 0; }
.store_list_wrap.busan .store_list li:nth-child(2n-1) { padding: 20px 20px 0 0; }
.store_list_wrap.busan .store_list li:nth-child(2n) { padding: 20px 0 0 20px; }
.store_list_wrap.busan .store_list li .list_num { position: relative; width: 40px; height: 40px; margin-right: 12px; background: #014d39; color: #fff; font-size: 0.8em; font-weight: 400; line-height: 40px; text-align: center; }
.store_list_wrap.busan .store_list li .list_num.pick { background: #08b386; border-radius: 30px; }
.store_list_wrap.busan .store_list li .list_num.pick::after { content: ""; position: absolute; left: -10px; top: 70%; width: 70px; height: 100%; background: url("/resources/images/icon_pick_red.png") 50% no-repeat; background-size: contain; }
.store_list_wrap.busan .store_list li .right_info { flex-basis: 65%; width: 65%; }
.store_list_wrap.busan .store_list li .right_info h2,
.store_list_wrap.busan .store_list li .right_info p.info { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store_list_wrap.busan .store_list li .right_info h2 { font-size: 1.3em; }

/* ── thumbnail + right_info (공통 카드) ── */
.thumbnail-wrapper { flex-shrink: 0; width: 25%; padding-right: 40px; }
.thumbnail { position: relative; padding-top: 65%; overflow: hidden; }
.thumbnail .centered { position: absolute; inset: 0; transform: translate(50%, 50%); }
.thumbnail .centered img { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); max-width: 100%; height: auto; }
.right_info { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.right_info h2 { font-size: 1.46em; font-weight: 500; }
.right_info h2 span { padding: 0 0 0 10px; font-size: 0.6em; font-weight: 300; }
.right_info p.info { padding: 0 0 20px; font-size: 0.92em; font-weight: 300; }
.right_info p.adress { font-size: 0.65em; opacity: 0.5; }

/* ── store_list .icon_area (지도보기/영상보기) ── */
.store_list li .icon_area { position: relative; display: flex; justify-content: flex-end; }
.store_list li .icon_area .btn_gomap { width: 70px; height: 70px; margin: 0 20px; background: url("/resources/images/btn_gomap_d.png") no-repeat; background-size: 70px; }
.store_list li .icon_area .btn_view { width: 70px; height: 70px; margin: 0 20px; background: url("/resources/images/btn_viewvod_d.png") no-repeat; background-size: 70px; }
.store_list li .icon_area .btn_gomap span,
.store_list li .icon_area .btn_view span { display: block; width: 0; height: 0; overflow: hidden; }
.store_list li .icon_area a { cursor: pointer; }
.store_list li .icon_area a:hover { filter: brightness(0); }

/* ── recipe (hipmacplace/recipe.php + rec_sub01~04.php) ── */
.rec_list_area { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 0 auto; }
.rec_list { flex-basis: 25%; margin-bottom: -10px; }
.rec_list .thumbnail-wrapper { width: 100%; padding: 0; }
.rec_list .thumbnail-wrapper .thumbnail { padding-top: 110%; }
.recipe_ing { position: relative; display: flex; background: #014d39; }
.recipe_ing .thumbnail-wrapper { width: 50%; padding-right: 40px; }
.recipe_ing .thumbnail { padding-top: 70%; }
.food_info { position: relative; flex-grow: 1; padding: 30px; }
.food_info h3 { color: #d19f58; font-size: 1em; font-weight: 500; }
.food_info p { padding: 3px 0; font-size: 22px; }
.food_info .foon_name { display: flex; }
.food_info .foon_name .orig,
.food_info .foon_name .season { flex: 1; }
.food_info .foon_name .season h4 { color: #44907c; font-weight: 400; }
.food_info p.sort { display: flex; padding: 0 0 10px; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
.food_info p.sort span { margin: 0 15px 0 0; }
.food_img { position: absolute; left: 62%; bottom: 5%; width: 200px; }
.home_rec_img { width: 100%; min-height: 600px; height: 100%; }
.home_rec_img01 { background: url("/resources/images/recipe/rec_thum01.png") center no-repeat; background-size: cover; }
.home_rec_img02 { background: url("/resources/images/recipe/rec_thum02.png") center no-repeat; background-size: cover; }
.home_rec_img03 { background: url("/resources/images/recipe/rec_thum03.png") center no-repeat; background-size: cover; }
.home_rec_img04 { background: url("/resources/images/recipe/rec_thum04.png") center no-repeat; background-size: cover; }

.rec_sub_area { display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 0 auto; }
.rec_sub_area .rec_list { position: relative; flex-basis: 27%; margin: 80px 0 40px; }
.rec_sub_area .rec_list .thumbnail-wrapper { width: 100%; padding: 0; }
.rec_sub_area .rec_list .thumbnail-wrapper .thumbnail { padding-top: 100%; }

.proc_num { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; background: #014d39; color: #fff; font-size: 0.7em; line-height: 130%; text-align: center; }
.proc_num span { font-size: 1.1em; font-weight: 400; }
.proc_info { padding: 20px 5px; color: #00321f; }

/* ── rec_sub 네비 버튼 ── */
.btn_line { margin: 0 20px; padding: 10px 50px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 30px; color: #fff; font-size: 24px; }
.btn_prev { width: 40px; padding: 0 0 0 50px; background: url("/resources/images/btn_prev.png") left center no-repeat; background-size: 40px; color: #fff; font-size: 18px; opacity: 0.6; }
.btn_next { width: 40px; padding: 0 50px 0 0; background: url("/resources/images/btn_next.png") right center no-repeat; background-size: 40px; color: #fff; font-size: 18px; opacity: 0.6; }

/* ── 한맥한상 (hipmacplace/hanmac.php) ── */
.han_main { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.wonil_img { position: absolute; left: 20px; top: 120px; z-index: 2; width: 40%; height: 100%; background: url("/resources/images/wonil.png") center top no-repeat; }
.han_main_menu { position: relative; left: 0; z-index: 3; flex-grow: 1; flex-basis: 50vh; padding: 8% 0 3% 38%; }
.han_menu { position: relative; z-index: 1; }
.han_menu a { position: relative; display: inline-block; padding: 15px 0; transition: all 0.25s ease; }
.han_menu a span { color: #087c5d; font-size: 33px; font-weight: 400; cursor: pointer; transition: all 0.25s ease; }
.han_menu a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; width: 100%; height: 3px; background: #087c5d; }
.han_menu a span.num { padding: 0 12px 0 0; font-size: 33px; }
.han_menu a:hover span { color: #d19f58; font-weight: 400; }
.han_menu a:hover span::after { background: #d19f58; }
.han_menu a.none span { color: #c3d1cd; cursor: default; }
.han_menu a.none span::after,
.han_menu a.none:hover span::after { background: #c3d1cd; }
.han_menu a.none:hover span { color: #c3d1cd; font-weight: 400; }
.dis_tab_img { opacity: 1; }
.menuon { position: absolute; right: 0; bottom: 0; opacity: 0; transition: all 0.25s ease; }
.menuon img { width: 39vw; }

.han_main_info { position: relative; flex-grow: 1; width: 100%; }
.han_main_info .info_wrap { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; height: 100%; background: #014d39; }
.han_main_info .info_txt { padding: 5% 10px 5% 38%; color: #fff; }
.han_main_info .info_txt h2 { font-size: 42px; font-weight: 400; line-height: 100%; }
.han_main_info .info_txt h1 { padding: 0 0 20px; color: #d19f58; font-size: 62px; font-weight: 500; }
.han_main_info .btm p { line-height: 160%; }

/* ── 맛집 업데이트 (hipmacplace/hipmacplace.php) ── */
.famous_main .text_area ul { display: flex; width: 98%; margin: 0 auto; }
.area_square { position: relative; width: 30%; height: auto; margin: 0 2% 5vw; background: #fff; }
.area_name p { color: #fff; font-size: 40px; font-weight: 700; line-height: 1.2; text-align: center; }
.line_white { position: relative; display: flex; justify-content: center; width: 100%; height: 300px; background: #fff; transition: all 0.5s; }
.line_white::before,
.line_white::after { content: ""; position: absolute; left: 0; width: 0%; height: 2px; transition: all 0.5s; opacity: 0; }
.line_white::before { top: 0; background: rgba(255, 255, 255, 0.7); }
.line_white::after { top: 100%; background: rgba(230, 230, 230, 0.7); }
.line_white span { display: flex; align-items: center; }
.line_white span::before,
.line_white span::after { content: ""; position: absolute; top: 0; width: 2px; height: 0%; background: rgba(230, 230, 230, 0.7); transition: all 0.5s; opacity: 0; }
.line_white span::before { left: 0; }
.line_white span::after { left: 100%; }
.line_white.img01 { background: url("/resources/images/store_img01.jpg") no-repeat center/cover; }
.line_white.img02 { background: url("/resources/images/store_img02.jpg") no-repeat center/cover; }
.line_white.img03 { background: url("/resources/images/store_img03.jpg") no-repeat center/cover; }
.area_square:hover .area_name p { color: #fff; }
.area_square:hover .line_white { background: #00321f; }
.area_square:hover .line_white::before { width: 100%; opacity: 1; }
.area_square:hover .line_white::after { width: 100.4%; opacity: 1; }
.area_square:hover .line_white span::before,
.area_square:hover .line_white span::after { height: 100%; opacity: 1; }

/* ── vod_wrap (hipmacplace/hanmac.php, hanmac_sub01.php) ── */
.vod_wrap { display: flex; flex-direction: column; padding: 120px 5%; background: #00321f; }
.vod_wrap.sub_vod { padding: 80px 5%; }
.vod_wrap.sub_vod .vod_txt { justify-content: space-around; }
.vod_wrap.sub_vod iframe { height: 28vw; }
.vod_area { display: flex; align-items: stretch; justify-content: space-between; flex: 1; }
.vod_area .vod_img { flex-basis: 54%; }
.vod_area .vod_txt { flex-basis: 42%; }
.vod_area.right { flex-direction: row-reverse; }
.vod_area.right .vod_txt { align-items: flex-end; text-align: right; }
.vod_txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.vod_tit { display: flex; align-items: center; color: #d19f58; font-size: 42px; font-weight: 500; line-height: 120%; }
.vod_txt p { color: rgba(255, 255, 255, 0.75); }
.vod_txt p span { display: block; }
.vod_img { width: 100%; height: auto; }
.vod_img div { position: relative; }
.vod_img div a.btn_play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none !important; width: 104px; height: 104px; background: rgba(2, 2, 2, 0.4); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 104px; cursor: pointer; opacity: 0.6; z-index: 2; }
.vod_img div a.btn_play::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%); display: block; width: 0; height: 10px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid; border-radius: 3px; color: #fff; }
.vod_img div a.btn_play:hover { opacity: 1; }
.vod_img div a.btn_play span { display: block; width: 0; height: 0; overflow: hidden; }
.vod_img video { display: block; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
 * Responsive — tablet.css/mobile.css 에서 이전 (2026-06-09)
 * ══════════════════════════════════════════════════════════════════════ */

@media all and (max-width: 1024px) {
    .place_btn {
        left: 70px;
    }

    .vod_wrap {
        padding: 40px 0;
    }

    .vod_txt {
        font-size: 1.1em;
        padding: 0 60px;
    }

    .vod_txt p {
        padding: 0 0 0px;
    }

    .vod_tit {
        font-size: 1.4em;
        padding: 30px 0 20px;
    }

    .vod_area {
        flex-direction: column;
        align-items: stretch;
    }

    .vod_area.right {
        flex-direction: column;
    }

    .vod_area.right .vod_txt {
        text-align: right;
    }

    .vod_wrap.sub_vod {
        padding: 20px 5% 0;
    }

    .vod_wrap.sub_vod .vod_txt {
        padding: 20px 15px;
    }

    .vod_wrap.sub_vod .vod_txt p {
        padding: 0 0 10px;
    }

    .vod_wrap.sub_vod .vod_txt p br {
        display: none;
    }

    .vod_wrap.sub_vod .vod_tit p br {
        display: none;
    }

    .vod_wrap.sub_vod .vod_txt {
        padding: 20px 0px;
    }

    .vod_wrap.sub_vod .vod_tit {
        padding: 10px 0 20px;
    }

    .place_wh100 {
        /* margin-top: 53px; */
    }

    .place_main {
        flex-direction: column;
        align-items: center;
        padding: 1vw 20px 20px;
    }

    .place_main h1,
    .place_main h2,
    .place_main h3 {
        font-size: 60%;
    }

    .place_main .map_area {
        width: 95%;
        margin-left: -3%;
    }

    .place_main .text_area a.btn_allview {
        padding: 2px 55px 0px 0;
        background-size: 50px;
    }

    .map_area .location.loc01 {
        top: 8%;
        left: 4%;
    }

    .map_area .location.loc02 {
        top: 5%;
        right: -1%;
    }

    .map_area .location.loc03 {
        top: 53vw;
        right: 8%;
    }

    .place_main .text_area {
        padding: 30px 0;
    }

    .place_main .text_area:after {
        top: auto;
        width: 100%;
        left: 0;
        bottom: 25%;
    }

    .place_main .text_area h3 {
        font-size: 1.6em;
    }

    .place_main .text_area .txt_big h2 {
        font-size: 1.6em;
    }

    .place_main .text_area .txt_big h1 {
        font-size: 2.6em;
    }

    .place_main .text_area .txt_big p {
        font-size: 1.4em;
        margin: 12% 0 0 -4vw;
    }

    .tit_area.han_sub {
        padding: 60px 0 0px 40px;
    }

    .vod_wrap.sub_vod iframe {
        height: 60vw;
    }

    figure.effect-romeo figcaption::before,
    figure.effect-romeo figcaption::after {
        width: 30px;
    }

    figure.effect-romeo h2 {
        font-size: 1.3em;
        top: 79%;
    }

    .location.loc03 figure.effect-romeo h2 {
        top: 105%;
    }

    .visual_area {
        flex-wrap: wrap;
    }

    .store_slide_wrap {
        width: 100%;
        padding: 30px 0 20px;
    }

    figure.effect-sadie figcaption::before {
        opacity: 0.7;
    }

    figure.effect-sadie p {
        opacity: 1;
        font-size: 1.1em;
    }

    figure.effect-sadie div.icon_area {
        opacity: 1;
    }

    figure.effect-sadie h2 {
        font-size: 1.5em;
    }

    figure.effect-sadie:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }

    figure.effect-sadie:hover h2 {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    .right_info p.info {
        font-size: 1em;
    }

    .right_info p.adress {
        font-size: 0.9em;
    }

    .recipe_ing .thumbnail-wrapper {
        padding-right: 20px;
    }

    .recipe_ing .thumbnail {
        padding-top: 100%;
    }

    .rec_sub_area .rec_list {
        flex-basis: 47%;
        margin: 30px 0 0px;
    }

    .rec_sub_area .rec_list:last-child {
        padding-bottom: 30px;
    }

    .rec_sub_area .rec_list.last {
        padding-bottom: 30px;
    }

    .rec_list_area {
        padding: 0px 0;
    }

    .proc_num {
        width: 60px;
        height: 60px;
    }

    .food_info {
        padding: 20px 20px 20px 0;
    }

    .food_info .foon_name {
        flex-direction: column;
    }

    .food_info .foon_name .orig {
        display: flex;
        flex-wrap: wrap;
    }

    .food_info .foon_name .season {
        display: flex;
        flex-wrap: wrap;
    }

    .food_info .foon_name .season h4 {
        width: 100%;
        padding: 15px 0 5px;
    }

    .food_info p {
        font-size: 1em;
        padding: 0px 7px 0 0;
    }

    .food_info p.sort {
        font-size: 1em;
    }

    .sub_contents.store_bs .top_bg {
        background: url("/resources/images/busan_visual_w3.jpg") center bottom
            no-repeat;
        background-size: contain;
    }

    .store_slide_wrap p.tit {
        padding: 40px 0 15px;
    }

    .store_list_wrap {
    }

    .store_list li {
        padding: 30px 0;
    }

    .store_list li .icon_area {
        justify-content: flex-end;
        top: 13%;
        transform: none;
    }

    .store_list li .icon_area .btn_gomap {
        background-size: 45px;
        width: 45px;
        height: 50px;
        margin: 0 2px;
    }

    .store_list li .icon_area .btn_view {
        background-size: 45px;
        width: 45px;
        height: 50px;
        margin: 0 2px;
    }

    .thumbnail {
        padding-top: 100%;
    }

    .thumbnail-wrapper {
        width: 25%;
        padding-right: 15px;
    }

    .store_list_wrap.busan .store_list .store_list_tit:first-of-type {
        padding-top: 25px;
    }

    .store_list_wrap.busan .store_list .store_list_tit {
        font-size: 30px;
        line-height: 65px;
        border-bottom: 2px solid #00321f;
    }

    .store_list_wrap.busan .store_list ul {
        flex-direction: column;
    }

    .store_list_wrap.busan .store_list ul.cate-type {
        margin-bottom: 50px;
    }

    .store_list_wrap.busan .store_list ul:before {
        content: none;
    }

    .store_list_wrap.busan .store_list li:nth-child(2n-1),
    .store_list_wrap.busan .store_list li:nth-child(2n) {
        padding: 20px 20px 0 0;
        flex-basis: 100%;
        width: 100%;
    }

    .store_list_wrap.busan .store_list li .list_num {
        width: 25px;
        height: 25px;
        line-height: 25px;
    }

    .store_list_wrap.busan .store_list li .list_num.pick:after {
        width: 50px;
    }

    .store_list_wrap.busan .store_list li .icon_area .btn_gomap {
        top: 0;
        margin: 0;
    }

    .han_main .wonil_img {
        width: 40%;
        top: 10%;
        left: -35px;
        background: url("/resources/images/wonil.png") right bottom no-repeat;
        background-size: contain;
    }

    .han_main_info {
    }

    .han_menu a span {
        font-size: 1.8em;
    }

    .han_menu a span.num {
        font-size: 1.5em;
    }

    .han_main_menu {
        padding: 10vw 0 8vw 38vw;
    }

    .han_main_info .info_wrap {
        height: 100%;
        margin-bottom: 0;
    }

    .han_main_info .info_txt h2 {
        font-size: 1.8em;
    }

    .han_main_info .info_txt h1 {
        font-size: 2em;
    }

    .han_main_info .info_txt {
        padding: 30px 10px 30px 40%;
        margin: 0;
    }

    .home_rec_img {
        min-height: 330px;
    }

    .dis_tab_img {
        opacity: 1;
    }

    figure.effect-sadie p.sort {
        bottom: 17%;
    }

    figure.effect-sadie p.sort span {
        flex-basis: 20%;
    }

    .line_white {
        height: 30vw;
    }

    .area_name p {
        font-size: 1.6em;
    }
}

@media all and (max-width: 768px) {
    .rec_list {
        flex-basis: 100%;
    }

    .rec_list .thumbnail-wrapper .thumbnail {
        padding-top: 50%;
    }

}

@media all and (max-width: 512px) {
    .vod_wrap {
        flex-direction: column;
    }

    .vod_tit {
        font-size: 1.5em;
        padding: 40px 0px 25px;
    }

    .vod_txt {
        font-size: 1.1em;
        padding: 0 35px;
    }

    .place_main .text_area {
        /* text-align: center; */
    }

    .place_main .text_area br {
        display: none;
    }

    .place_main .text_area h3 {
        font-size: 1.3em;
    }

    .place_main .text_area a.btn_allview {
        font-size: 20px;
    }

    .place_main .text_area .txt_big {
        flex-direction: column;
        /* align-items: center; */
    }

    .place_main .text_area .txt_big h1 {
        padding: 10px 0;
    }

    .place_main .text_area .txt_big h2 {
        padding: 0;
    }

    .place_main .text_area .txt_big p {
        margin: 0;
    }

    .map_area .location.loc03 {
        top: 39vw;
        right: 1%;
    }

    .location.loc03 figure.effect-romeo h2 {
        top: 109%;
    }

    .store_list_wrap {
        width: 90%;
    }

    .store_list li {
        flex-wrap: wrap;
        padding: 20px 0;
    }

    .right_info {
        flex-grow: 0;
        flex-basis: 60%;
        width: 70%;
    }

    .right_info h2 {
        font-size: 1.2em;
        padding: 5px 0 10px;
    }

    .right_info p.info {
        padding: 0 0 8px;
    }

    .store_list li .icon_area {
        justify-content: center;
        flex-grow: 1;
        flex-basis: 100%;
    }

    .store_list li .icon_area .btn_gomap {
        background-size: 45px;
        width: 45px;
        height: 50px;
        margin: 10px 2px 0px 10px;
    }

    .store_list li .icon_area .btn_view {
        background-size: 45px;
        width: 45px;
        height: 50px;
        margin: 10px 2px 0px 10px;
    }

    .thumbnail-wrapper {
        width: 100%;
        padding: 0 0 15px 0;
    }

    .thumbnail {
        padding-top: 50%;
    }

    .store_list_wrap.busan .store_list .store_list_tit:first-of-type {
        padding-top: 0.5em;
    }

    .store_list_wrap.busan .store_list .store_list_tit {
        font-size: 1.8em;
        line-height: 2em;
        border-bottom: 1px solid #00321f;
    }

    .store_list_wrap.busan .store_list .right_info {
        flex-grow: 0;
    }

    .store_list_wrap.busan .store_list ul.cate-type {
        margin-bottom: 3.5em;
    }

    .store_list_wrap.busan .store_list li .icon_area {
        flex-basis: 10%;
        flex-grow: 0;
        margin-left: auto;
    }

    .store_list_wrap.busan .store_list li .icon_area .btn_gomap {
        margin: 0;
    }

    .store_list_wrap.busan .store_list .right_info h2 {
        padding: 0px 0 3px;
        width: 100%;
    }

    .store_list_wrap.busan .store_list .right_info p.info {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
    }

    .store_list_wrap.busan .store_list li:nth-child(2n-1),
    .store_list_wrap.busan .store_list li:nth-child(2n) {
        padding: 13px 5px 5px 0;
    }

    /* .rec_list {
        flex-basis: 100%;
    }

    .rec_list .thumbnail-wrapper .thumbnail {
        padding-top: 50%;
    } */

    figure.effect-sadie div.icon_area .btn_go {
        background-size: 38px;
        width: 38px;
        height: 38px;
    }

    figure.effect-sadie p.sort span {
        flex-basis: 30%;
    }

    figure.effect-sadie p.sort {
        bottom: 27%;
    }

    .han_main .wonil_img {
        width: 60%;
        top: 7%;
        left: auto;
        right: -40px;
        background: url("/resources/images/wonil.png") right bottom no-repeat;
        background-size: contain;
    }

    .han_main_menu {
        padding: 50px 5% 1%;
        flex-basis: 35vh;
        display: flex;
        align-items: center;
    }

    .han_menu a {
        padding: 7px 0;
    }

    .han_menu a span:after {
        bottom: 1px;
    }

    .han_menu a span {
        font-size: 1.3em;
    }

    .han_main_info {
        /* flex-basis: 50vh; */
    }

    .han_main_info .info_txt {
        padding: 25px 53% 20px 8%;
    }

    .dis_tab_img {
        display: none;
        opacity: 0;
    }

    .tit_area.han_sub {
        padding: 60px 0 0px 20px;
    }

    .vod_wrap.sub_vod .vod_tit {
        padding: 5px 0px;
    }

    .recipe_ing {
        flex-direction: column;
    }

    .recipe_ing .thumbnail-wrapper {
        width: 100%;
        padding: 0px;
    }

    .recipe_ing .thumbnail {
        padding-top: 65%;
    }

    .food_info {
        padding: 20px 20px 20px 20px;
    }

    .proc_num {
        width: 40px;
        height: 40px;
    }

    .proc_info {
        padding: 20px 5px 0px;
    }

    .home_rec_img {
        height: 40vh;
    }

    .sub_contents.store_bs .top_bg {
        background: url("/resources/images/busan_visual_m3.jpg") center 8vw
            no-repeat;
        background-size: cover;
        height: 126vw;
    }

    .sub_contents.store_bs .tit_area {
    }

    .vod_txt p br {
        display: none;
    }

    .famous_main .text_area ul {
        padding: 5vw 3vw;
        flex-direction: column;
    }

    .area_square {
        width: 97%;
    }
}