/* BASIC css start */
/* ==================================================
   SHOWROOM - MOBILE
   NEW VERSION
================================================== */

@media screen and (max-width:767px){

    /* ==================================================
       COMMON
    ================================================== */

    .showroom_benefit_section,
    .showroom_map_section,
    .showroom_info_section,
    .showroom_video_section{
        position:relative;
        width:100%;
        margin:0;
        box-sizing:border-box;
        font-family:'Pretendard',sans-serif;
    }


    .showroom_section_title{
        width:calc(100% - 30px);
        margin:0 15px 30px;
        padding:0;
        text-align:center;
        box-sizing:border-box;
    }


    .showroom_section_title > p{
        margin:0 0 12px;
        padding:0;

        font-size:11px;
        line-height:1;
        font-weight:500;

        color:#9b846f;

        letter-spacing:1.5px;
        text-transform:uppercase;
    }


    .showroom_section_title h2{
        margin:0;
        padding:0;

        font-size:19px;
        line-height:1.42;
        font-weight:600;

        color:#111;

        letter-spacing:-.8px;
        word-break:keep-all;
        text-align:center;
    }


    .showroom_section_title > span{
        display:block;

        margin:13px 0 0;
        padding:0;

        font-size:12px;
        line-height:1.7;
        font-weight:400;

        color:#8c8782;

        letter-spacing:-.4px;
        word-break:keep-all;
    }



    /* ==================================================
       01. SHOWROOM BENEFIT
    ================================================== */

    .showroom_benefit_section{
        padding:60px 0 70px;
        background:#fff;
        overflow:hidden;
    }


    .showroom_benefit_wrap{
        position:relative;

        width:100%;
        margin:0;
        padding:0;

        overflow:hidden;
        box-sizing:border-box;
    }


    /* 슬라이더 viewport */
    .showroom_benefit_slider{
        position:relative !important;

        width:calc(100% - 30px) !important;

        margin:0 15px !important;
        padding:0 !important;

        overflow:hidden !important;

        box-sizing:border-box;
    }


    .showroom_benefit_slider .swiper-wrapper{
        display:flex !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box;
    }


    .showroom_benefit_slider .swiper-slide{
        position:relative;

        flex-shrink:0;

        margin:0 !important;
        padding:0 10px 0 0 !important;

        box-sizing:border-box;
    }


    .showroom_benefit_slider .swiper-slide:last-child{
        padding-right:0 !important;
    }


    /* 카드 */
    .showroom_benefit_card{
        width:100%;

        margin:0;
        padding:0;

        background:#fff;

        box-sizing:border-box;
    }


    /* 이미지 */
    .showroom_benefit_card .image{
        position:relative;

        width:100%;
        height:0;

        padding-bottom:76%;

        margin:0;

        overflow:hidden;

        background:#f2efeb;

        box-sizing:border-box;
    }


    .showroom_benefit_card .image img{
        position:absolute;

        top:0;
        left:0;

        display:block;

        width:100%;
        height:100%;

        margin:0;
        padding:0;

        object-fit:cover;
        object-position:center;

        transform:scale(1);

        transition:transform .5s ease;
    }


    .showroom_benefit_card:active .image img{
        transform:scale(1.02);
    }


    /* 카드 텍스트 */
    .showroom_benefit_card .content{
        min-height:0;

        margin:0;
        padding:20px 0 0;

        text-align:center;

        box-sizing:border-box;
    }


    .showroom_benefit_card .number{
        display:block;

        margin:0 0 9px;

        font-size:10px;
        line-height:1;

        font-weight:500;

        color:#aa9785;

        letter-spacing:.8px;
    }


    .showroom_benefit_card h3{
        margin:0 !important;
        padding:0 !important;

        border:0 !important;

        font-family:'Pretendard',sans-serif;

        font-size:17px;
        line-height:1.4;

        font-weight:600;

        color:#1c1c1c;

        letter-spacing:-.7px;

        text-align:center;
    }


    .showroom_benefit_card p{
        margin:9px 0 0;
        padding:0;

        font-size:12px;
        line-height:1.65;

        font-weight:400;

        color:#8e8984;

        letter-spacing:-.4px;

        word-break:keep-all;
    }


    /* PC 화살표 숨김 */
    .showroom_benefit_prev,
    .showroom_benefit_next{
        display:none !important;
    }


    /* progress */
    .showroom_benefit_progress{
        position:relative;

        width:calc(100% - 30px);
        height:1px;

        margin:28px 15px 0;

        overflow:hidden;

        background:#e6e1dc;

        box-sizing:border-box;
    }


    .showroom_benefit_progress span{
        position:absolute;

        top:0;
        left:0;

        width:20%;
        height:100%;

        background:#222;

        transition:left .25s ease;

        box-sizing:border-box;
    }



    /* ==================================================
       02. MAP
    ================================================== */

    .showroom_map_section{
        padding:0;

        background:#fff;

        overflow:hidden;
    }
    
    .showroom_video_heading > div{
    transform:translateY(76px);
}


    .showroom_map_container{
        width:calc(100% - 30px);

        margin:0 15px;
        padding:0;

        box-sizing:border-box;
    }


    .basic_map_wrap{
        position:relative;

        width:100%;
        height:390px;

        margin:0;
        padding:0;

        overflow:hidden;

        background:#e9e5df;

        box-sizing:border-box;
    }


    #basic_showroom_map{
        width:100%;
        height:100%;
    }


    /* 지도 하단 안내 버튼 */
    .basic_map_message{
        position:absolute;

        left:50%;
        bottom:130px;

        z-index:20;

        display:flex;
        align-items:center;

        gap:7px;

        max-width:calc(100% - 24px);

        padding:9px 13px 9px 9px;

        border-radius:999px;

        background:#201f1e;

        color:#fff !important;

        font-size:11px;
        line-height:1;

        font-weight:500;

        letter-spacing:-.3px;

        white-space:nowrap;

        text-decoration:none !important;

        transform:translateX(-50%);

        box-shadow:0 5px 16px rgba(0,0,0,.16);

        box-sizing:border-box;
    }


    .basic_map_message_icon{
        display:flex;

        align-items:center;
        justify-content:center;

        width:25px;
        height:25px;

        flex:0 0 25px;

        border-radius:50%;

        background:#57320a;

        font-size:11px;
        font-weight:600;

        color:#fff;
    }


    .basic_map_message_text{
        display:block;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;
    }


    .basic_map_message_arrow{
        flex-shrink:0;

        font-size:14px;
    }



    /* 지도 커스텀 마커 */

    .basic_custom_marker{
        position:relative;

        width:42px;
        height:52px;
    }


    .basic_custom_marker_circle{
        position:relative;

        z-index:2;

        display:flex;

        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        border:3px solid #fff;
        border-radius:50%;

        background:#57320a;

        color:#fff;

        font-size:14px;

        font-weight:600;

        box-sizing:border-box;

        box-shadow:0 4px 12px rgba(0,0,0,.2);
    }


    .basic_custom_marker_tail{
        position:absolute;

        left:50%;
        bottom:3px;

        width:12px;
        height:12px;

        background:#57320a;

        transform:
            translateX(-50%)
            rotate(45deg);
    }


    .basic_marker_name{
        min-width:125px;

        padding:8px 12px;

        border:1px solid rgba(87,50,10,.08);
        border-radius:7px;

        background:rgba(255,255,255,.97);

        color:#201f1e;

        text-align:center;

        box-sizing:border-box;

        box-shadow:0 3px 11px rgba(0,0,0,.13);
    }


    .basic_marker_name strong{
        display:block;

        font-size:12px;
        line-height:18px;

        font-weight:600;
    }


    .basic_marker_name span{
        display:block;

        margin-top:1px;

        font-size:9px;
        line-height:14px;

        color:#99938e;
    }



    /* ==================================================
       03. INFORMATION
    ================================================== */

    .showroom_info_section{
        padding:0 0 70px;

        background:#fff;
    }


    .showroom_info_grid{
        display:block;

        width:calc(100% - 30px);

        margin:0 15px;
        padding:0;

        border-right:1px solid #e3ddd7;
        border-bottom:1px solid #e3ddd7;

        box-sizing:border-box;
    }


    .showroom_info_item{
        display:flex;

        align-items:flex-start;

        gap:17px;

        width:100%;

        min-height:0;

        margin:0;

        padding:26px 20px;

        border-top:1px solid #e3ddd7;
        border-left:1px solid #e3ddd7;

        background:#fff;

        box-sizing:border-box;
    }


    .showroom_info_icon{
        flex:0 0 auto;
    }


    .showroom_info_icon span{
        display:flex;

        align-items:center;
        justify-content:center;

        width:36px;
        height:36px;

        margin:0;

        border:1px solid #8a684c;
        border-radius:50%;

        color:#765238;

        font-size:9px;

        font-weight:600;

        box-sizing:border-box;
    }


    .showroom_info_content{
        flex:1;

        min-width:0;
    }


    .showroom_info_content .label{
        margin:1px 0 8px;
        padding:0;

        color:#9c8d80;

        font-size:9px;
        line-height:1;

        font-weight:500;

        letter-spacing:1.1px;
    }


    .showroom_info_content h3{
        margin:0 !important;
        padding:0 !important;

        border:0 !important;

        font-size:16px;
        line-height:1.4;

        font-weight:700;

        color:#201f1e;

        letter-spacing:-.65px;
    }


    .showroom_info_content .description{
        margin:9px 0 0;
        padding:0;

        font-size:11px;
        line-height:1.65;

        font-weight:400;

        color:#8c8782;

        letter-spacing:-.35px;

        word-break:keep-all;
    }



    /* ==================================================
       04. SHOWROOM VIDEO
    ================================================== */

    .showroom_video_section{
        padding:65px 0 70px;

        background:#f1eee9;

        overflow:hidden;
    }


    .showroom_video_heading{
        display:block;

        width:calc(100% - 30px);

        margin:0 15px 28px;
        padding:0;

        box-sizing:border-box;
    }


    .showroom_video_heading > div > p{
        margin:0 0 12px;
        padding:0;

        color:#a59180;

        font-size:10px;
        line-height:1;

        font-weight:600;

        letter-spacing:1.5px;
    }


    .showroom_video_heading h2{
        margin:0;
        padding:0;

        color:#111;

        font-size:19px;
        line-height:1.45;

        font-weight:600;

        letter-spacing:-.9px;

        word-break:keep-all;
    }


    .showroom_video_desc{
        margin:16px 0 0;
        padding:0;

        color:#000000;

        font-size:11px;
        line-height:1.7;

        font-weight:400;

        letter-spacing:-.35px;

        text-align:right;

        word-break:keep-all;
    }


    .showroom_video_box{
        position:relative;

        width:calc(100% - 30px);

        height:0;

        margin:0 15px;
        padding-bottom:56.25%;

        overflow:hidden;

        background:#111;

        box-sizing:border-box;
    }


    .showroom_video_box iframe{
        position:absolute;

        top:50%;
        left:50%;

        display:block;

        width:150%;
        height:150%;

        margin:0;
        padding:0;

        border:0;

        transform:translate(-50%,-50%);
    }



    /* ==================================================
       SMALL MOBILE
    ================================================== */

    @media screen and (max-width:360px){

        .showroom_benefit_section{
            padding-top:55px;
            padding-bottom:65px;
        }

        .showroom_section_title h2{
            font-size:19px;
        }

        .showroom_benefit_card h3{
            font-size:16px;
        }

        .showroom_map_section{
            padding-top:60px;
        }

        .basic_map_wrap{
            height:360px;
        }

        .showroom_info_item{
            padding:24px 17px;
        }

        .showroom_video_section{
            padding-top:60px;
            padding-bottom:65px;
        }

        .showroom_video_heading h2{
            font-size:19px;
        }

    }

}

/* 쇼룸 페이지 푸터 위 body 빈 공간 제거 */
body.showroom-page .ft_inner{
    margin-top:-50px !important;
}
/* BASIC css end */