@charset "utf-8";

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

    #sb-search .where{width: 35%;}
    #sb-search .category{width: 99%;}

    /* list */
    .fran-box{margin-top: 20px;}
    .fran-box > *{float: none;}

    .fran-box > dt #map{height: 380px;}
    .fran-box > dt .info .marker{width: 35px;height: 35px;}
    .fran-box > dt .info .layer{position: absolute;top: -140px;margin-left: -150px;width: 300px;height: 115px;padding-left: 137px;}
    .fran-box > dt .info .layer:before{bottom: -20px;margin-left: -10px;width: 20px;height: 20px;}
    .fran-box > dt .info .layer dt { left: 5px;}
    .fran-box > dt .info .layer .tit{font-size: 14px;margin-bottom: 5px;}
    .fran-box > dt .info .layer .add{font-size: 13px;}
    .fran-box > dt .info .layer .tel{font-size: 13px;}
    .fran-box > dt .info .layer .golink{width: 35px;height: 35px;}
    .fran-box > dt .info .layer i.axi{margin-top: -1px;}
    

    .map-result { position: static; transform: none; width: auto; height: 400px; padding: 15px; margin: 15px 15px 0;}
    .map-result .map_total {font-size: 16px;}
    .map-result ul { margin-top: 10px;}
    .map-result li a { padding: 10px 5px;}
    .map-result li .name { font-size: 16px;}
    .map-result li .name i { font-size: 18px;}
    .map-result li .addr { padding-top: 5px; font-size: 15px;}
    .map-result li .tel { font-size: 15px;}

    /* .fran-list{margin: -5px;}
    .fran-list > li{width: calc(50% - 10px);margin: 5px;}
    .fran-list .info{padding: 15px 10px;}
    .fran-list .info .name{font-size: 14px;}
    .fran-list .info .add{font-size: 14px;}
    .fran-list .info .tel{margin-top: 5px;padding-top: 10px;font-size: 13px;} */

    .fran-box > dd{margin-top: 30px;}
    .fran-box .tit_box { padding-bottom: 10px;}
    .fran-box .tit_box h4 { font-size: 20px;}
    .fran-list > li{padding: 20px 0;}
    .fran-list .link{}
    .fran-list .tmb_box { width: 100%; max-width: 500;}
    .fran-list .info { width: calc(100% - 250px - 40px); padding-left: 30px;}
    .fran-list .info .name{ font-size: 20px;}
    .fran-list .arrow { width: 40px; font-size: 22px;}

    /* view */
    .fran-view{padding-bottom: 20px;}
    .fran-view > *{float: none;}
    .fran-view dt{padding-right: 0;width: auto;}
    .fran-view dt .head { padding: 25px 15px;}
    .fran-view dt .head h4 { font-size: 20px;}
    .fran-view dt .bigimg{text-align: center;}
    .fran-view dt .bigimg img{max-height:320px;max-width: 100%;}
    .fran-view dt .bigimg .no-data{font-size: 16px;line-height: 200px;}
    .fran-view dt .bigimg .bx-pager{bottom: 15px;}
    .fran-view dt .bigimg .bx-pager-item a{width: 8px;height: 8px;}
    .fran-view dt .bigimg .arrows > button.prev {left: 5px;}
    .fran-view dt .bigimg .arrows > button.next {right: 5px;}
    .fran-view dt .bigimg .arrows > button i {font-size: 19px;width: 30px;height: 30px;line-height: 30px;}

    .fran-view dt .btn_box { }
    .fran-view dt .btn_box > a { height: 40px; }
    .fran-view dt .btn_box > a + a { margin-left: 5px;}
    .fran-view dt .btn_box .navermap { width: 125px; padding-left: 25px; font-size: 15px;}
    .fran-view dt .btn_box .navermap i { left: 5px; width: 20px; height: 20px;}
    .fran-view dt .btn_box .link i { font-size: 16px;}

    .fran-view dd{width: auto;}
    .fran-view dd .head{padding-bottom: 15px;margin-bottom: 15px;}
    .fran-view dd .head em{font-size: 15px;margin-top: 5px;}
    .fran-view dd .head h4{font-size: 20px;line-height: 22px;font-weight: bold;}
    .fran-view dd .txt{font-size: 15px;line-height: 20px;}

    .fran-view dd .info{margin-top: 40px;padding: 15px 5px;}
    .fran-view dd .info > li{padding: 4px 0;padding-left: 0;}
    .fran-view dd .info > li > strong{position: static;padding: 4px 0;font-size: 16px;display: block;}
    .fran-view dd .info > li > p{display: block;font-size: 16px;line-height: 18px;}

    .fran-view dd .arrows > button { width: 45px; height: 45px;}
    .fran-view dd .arrows > button.prev { transform: translateY(-75%);}
    .fran-view dd .arrows > button.next { transform: translateY(-75%);}
    .fran-view dd .arrows > button i { font-size: 18px;}
    
    .fran-view dd .dots { margin-top: 20px;}
    .fran-view dd .dots span.swiper-pagination-bullet { width: 10px; height: 10px;}

    .fran-view-map { padding-top: 30px;}
    .fran-view-map #map{height: 200px !important;}
    

    /* list, view 공통 */
    .info_list { display: block; margin-top: 10px;}
    .info_list span { display: block; margin: 5px 0; font-size: 14px;}
    .info_list span + span::before { display: none; }
    .fran-list .closed,
    .fran-view .closed { padding-top: 7px; font-size: 13px;}
    .info_list .hours i { width: 14px; height: 14px; background-size: contain;}

    .sales_info { margin-top: 15px;}
    .sales_info .badge { padding: 5px 10px; font-size: 13px;}
    .sales_info .badge i { width: 14px; height: 12px;}

}

@media screen and (max-width: 750px) {
    .fran-list > li { display: block;}
    .fran-list .tmb_box { margin: 0 auto;}
    .fran-list .info { width: 100%; padding: 10px 0 0;}
    .fran-list .arrow { display: none;}

    .fran-view dt .head { display: block; padding: 20px 0;}
    .fran-view dt .btn_box { margin-top: 20px;}

}