@charset "UTF-8";
@import url('./user.common.css');
/**************************************************/
/* ================================= common */






/**************************************************/
/* ================================= layout */
/* --- sec_1 */

/* --- sec_2 */
#page_branch #sec_2{ margin-top: 40px;}
#page_branch #sec_2 .bx_search{ display: flex; width: 100%; }
#page_branch #sec_2 .bx_search > *:not(button){ border: 1px solid #C0C0C0;}

#page_branch #sec_2 .btn_search{ background: url(../img/common/ico_search_white.svg) var(--primary) no-repeat center; }

#page_branch #sec_2 .bx_table li a.btn_reserve{ width: 100%; height: 100%;}
#page_branch #sec_2 .bx_table li a:hover{
    filter: brightness(250%);
}

/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    /* ==================== common */


    /* ==================== layout */
    /* --- sec_1 */
    #page_branch #sec_1{ display: block; max-width: 1640px;}
    #page_branch #sec_1 .swiper {
        position: relative; width: 100%;
        padding: 156px 0 240px; margin: 180px auto 135px;
    }
    #page_branch #sec_1 .swiper-slide {
        position: relative;  height: calc(532px / 3 * 2);    
    }
    #page_branch #sec_1 .swiper-slide img{ 
        width: 100%; height: 100%; object-fit: cover; 
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transition: transform 0.3s ease-out;
        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        will-change: transform;
    }
    #page_branch #sec_1 .swiper-slide p{ position: absolute; bottom: 0; left: 0; padding: 45pc 50px; color: #fff; font-size: 25px; }   

    #page_branch #sec_1 .swiper-slide-active{ z-index: 1000;}
    #page_branch #sec_1 .swiper-slide-active img{
        transform: scale(2);
        -webkit-transform:scale(2);
        -moz-transform: scale(2);
        -ms-transform:scale(2);
        -o-transform: scale(2);
        transform-origin: center;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
        -ms-transform-origin: center;
        -o-transform-origin: center;
    }
    #page_branch #sec_1 .swiper-slide-next { padding-right: 10%;}
    #page_branch #sec_1 .swiper-slide-prev { padding-left: 10%; }

    /* --- sec_2 */
    /* bx_search */
    #page_branch #sec_2 .bx_search { justify-content: flex-end; margin-bottom: 84px; }
    #page_branch #sec_2 .bx_search > *{ height: 60px; border-right: none !important; }
    #page_branch #sec_2 .bx_search .sel_sido{ width: 230px; }
    #page_branch #sec_2 .bx_search .sel_gungu{ width: 300px; }

    #page_branch #sec_2 .btn_search{ width: 70px; background-size: 25px;}

    /* bx_table */
    #page_branch #sec_2 .bx_table li{ height: 60px; }
    #page_branch #sec_2 .bx_table li:nth-of-type(1){ width: 7%;}
    #page_branch #sec_2 .bx_table li:nth-of-type(2){ width: 9%;}
    #page_branch #sec_2 .bx_table li:nth-of-type(3){ width: 60%;}
    #page_branch #sec_2 .bx_table li:nth-of-type(4){ width: 9%;}
    #page_branch #sec_2 .bx_table li:nth-of-type(5){ width: 15%;}
    #page_branch #sec_2 .bx_table li a.btn_reserve{ background: url(../img/user/branch/sec2_ico_reservation.png) no-repeat center; background-size: 24px 23px;}

    #page_branch #sec_2 .bx_paginate{ padding: 30px 0 250px;}
}
@media screen and (max-width: 1680px){

}
@media screen and (max-width: 1024px){
    /* ==================== common */


    /* ==================== layout */
    /* --- sec_2 */
    /* bx_search */
    #page_branch #sec_2 .bx_search { flex-flow: row wrap; margin: 60px 0 42px; gap: 6px 0;}
    #page_branch #sec_2 .bx_search > *{ height: 40px; }

    /* bx_search */
    #page_branch #sec_2 [class*="sel_"]{ flex: 1;}
    #page_branch #sec_2 .btn_search{ width: 46px; background-size: 16px;}

    /* bx_table */
    #page_branch #sec_2 .ul_td{ 
        position: relative; left: -30px; width: calc(100% + 60px);
        padding: 28px 30px 32px; border-bottom: 2px solid #D7D7D7; background: #fff;
    }
    #page_branch #sec_2 .ul_td:nth-of-type(1){ border-top: 2px solid #D7D7D7; }
    #page_branch #sec_2 .ul_td:hover{ filter: brightness(95%);}

    #page_branch #sec_2 .bx_table li:nth-of-type(1):after{ content: '/';}
    #page_branch #sec_2 .bx_table li:nth-of-type(n+3){ width: 100%;}
    #page_branch #sec_2 .bx_table li:nth-of-type(n+3) > *{ width: 100%;color: #666; font-size: 0.85rem; text-align: left;}

    #page_branch #sec_2 .bx_table li a.btn_reserve{ position: absolute; top: 0; left: 0; }

    #page_branch #sec_2 .bx_paginate{ padding: 84px 0;}



}
@media screen and (max-width: 560px){
    #page_branch #sec_2 [class*="sel_"]{ flex: unset;}
    #page_branch #sec_2 .sel_sido{ width: 100%;}
    #page_branch #sec_2 .bx_search .sel_gungu{ width: calc(100% - 46px);}





}