@charset "utf-8";
/**************************************************

	SUPERBOARD :: COMPANY SKIN :: basic

**************************************************/
#sb-search .where{width: 200px;}

/* list */
.fran-box { }
.fran-box > dt{}
.fran-box > dt #map{width: 100%;height: 630px;}
.fran-box > dt .info .marker{display: block;width: 67px;height: 95px;background-position: center center;background-size: contain;background-repeat: no-repeat;cursor: pointer;filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));}
.fran-box > dt .active .info .marker{opacity: 1;}
.fran-box > dt .info .layer{position: absolute;top: -180px;left: 50%;margin-left: -200px;background: #fff;width: 400px;height: 150px;box-shadow: 0 0 10px rgba(0,0,0,0.1);box-sizing: border-box;padding: 0 40px 0 150px;display: none;align-content: center;}
.fran-box > dt .info .layer:before{content: '';display: block;position: absolute;bottom: -25px;left: 50%;margin-left: -12px;width: 25px;height: 25px;background: url('images/infobox-qa.png') no-repeat center center;background-size: contain;}
.fran-box > dt .info .layer dt{position: absolute;top: 50%;left: 10px;transform: translateY(-50%);width: 120px;height: auto;border: 1px solid #ddd;border-radius: 5px;overflow: hidden;text-align: center;}
.fran-box > dt .info .layer dt img{max-width:120px;max-height:120px;width: auto;height: auto;}
.fran-box > dt .info .layer .close{position: absolute;top: 5px;right: 10px;font-size: 20px;color: #000;font-weight: normal;text-decoration: none;cursor: pointer;}
.fran-box > dt .info .layer .tit{display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;color: #222222;letter-spacing: -1px;font-weight: 300;margin-bottom: 10px;}
.fran-box > dt .info .layer .add{display: block;margin-bottom: 5px;font-size: 13px;color: #555555;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.fran-box > dt .info .layer .tel{font-size: 14px;color: #555555;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.fran-box > dt .info .layer .golink{position: absolute;display: block;text-indent: -999em;width: 40px;height: 40px;bottom: 0;right: 0;background: url('images/map-more.jpg') no-repeat center center;background-size: contain;cursor: pointer;}
.fran-box > dt .info .layer i.axi{width: 15px;display: inline-block;vertical-align: middle;margin-top: -2px;}

.map-result { position: absolute; top: 50%; left: 14%; transform: translateY(-50%); width: 380px; height: 515px; padding: 35px 30px; background-color: #fff; box-shadow: 3px 3px 10px rgba(0,0,0,0.2); box-sizing: border-box; z-index: 999; border-radius: 16px; }
.map-result .map_total { display: inline-block; color: #333; font-size: 16px; font-weight: 500;}
.map-result .map_total strong { color: var(--col-red2);}
.map-result ul { height: calc(100% - 35px); margin-top: 15px; border-top: 2px solid #333; overflow-y: scroll; box-sizing: border-box;}
.map-result ul::-webkit-scrollbar {width: 4px;background: #eaeaea;}
.map-result ul::-webkit-scrollbar-thumb {background-color: #d93916;}
.map-result li { border-bottom: 1px solid #ddd;}
.map-result li a { display: block; padding: 20px 10px; box-sizing: border-box; text-decoration: none;}
.map-result li .name { display: block; color: #222; font-size: 18px; font-weight: 600;}
.map-result li .name i { color: var(--col-red2); font-size: 22px; vertical-align: bottom;}
.map-result li .addr { padding-top: 10px; color: #666; font-size: 16px; }
.map-result li .tel { display: inline-block; padding-top: 5px; color: #666; font-size: 16px; font-weight: 300; }



.fran-box > dd{margin-top: 70px;}

.fran-box .tit_box { padding-bottom: 15px;}
.fran-box .tit_box h4 { font-size: 36px; }

.fran-list{border-top: 2px solid var(--col-red2);}
.fran-list > li{display: flex;align-items: center;padding: 40px 0;position: relative;border-bottom: 1px solid #e5e5e5;}
.fran-list .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;text-indent: -999em;;}
.fran-list .tmb_box { width: 315px;}
.fran-list .tmb{position: relative;padding-bottom: 66%;background-position: center center;background-size: cover;border-radius:20px;}
/* .fran-list .tmb:after{content: '';display: block;position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: rgba(0,0,0,0.1);} */
.fran-list .info{width: calc(100% - 315px - 84px);padding-left: 50px;box-sizing: border-box;}
/* .fran-list .info .info_list { display: flex; margin-top: 20px;} */
.fran-list .info .name{display: block;font-weight: bold;font-size: 30px;color: #333;}
/* .fran-list .info .info_list span {font-size: 18px;font-weight: 300;color: #555; }
.fran-list .info .info_list span + span::before { content: ''; display: inline-block; width: 1px; height: 15px; background-color: #e5e5e5; margin: 0 15px; vertical-align: middle;}
.fran-list .info .closed{ display: block; padding-top: 15px; color: #888; font-size: 16px; font-weight: 500; }
.fran-list .info_list i { display: inline-block; margin-right: 5px; color: var(--col-red2); vertical-align: middle;}
.fran-list .info_list .hours i { width: 18px; height: 18px; background: url(/images/sub/ico_time.png); }  */


.fran-list .arrow { width: 84px; aspect-ratio: 1/1; background: none; color: #ddd; font-size: 30px; align-content: center; text-align: center; border: 1px solid #ddd; border-radius: 50%; transition: all .3s;}

.fran-list li:hover .arrow { border-color: var(--col-red2); color: var(--col-red2);}

/* view */
.fran-view{zoom: 1;padding-bottom: 60px;}
.fran-view > *{box-sizing: border-box;}
.fran-view dt{width: 100%;border-top: 2px solid var(--col-red2);}
.fran-view dt .head{display: flex; justify-content: space-between;padding: 50px 15px; box-sizing: border-box;}
.fran-view dt .head em{display: block;margin-bottom: 5px;font-style: normal;font-size: 17px;color: #999;display: none;}
.fran-view dt .head h4{font-size: 38px;}
.fran-view dt .txt{}

.fran-view dt .info{margin-top: 30px;padding: 25px 30px;border-top: 1px solid #000;border-bottom: 1px solid #ccc;}
.fran-view dt .info > li{position: relative;padding: 8px 0;padding-left: 100px;}
.fran-view dt .info > li > strong{position: absolute;top: 0;left: 0;padding: 8px 0;font-size: 15px;color: #000;font-weight: bold;}
.fran-view dt .info > li > p{font-size: 15px;line-height: 22px;color: #666;}
/* .fran-view dt .info_list { display: flex; margin-top: 20px;} */
.fran-view dt .name{display: block;font-weight: bold;font-size: 30px;color: #333;}


.fran-view dt .btn_box { display: flex;}
.fran-view dt .btn_box > a { display: block; height: 52px; align-content: center; color: #222; border: 1px solid #e1e1e1; border-radius: 99px; box-sizing: border-box; text-decoration: none; text-align: center;}
.fran-view dt .btn_box > a + a { margin-left: 10px;}
.fran-view dt .btn_box .navermap { position: relative; width: 168px; padding: 8px; padding-left: 34px; font-size: 16px; font-weight: bold;}
.fran-view dt .btn_box .navermap i { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 34px; height: 34px; background: url(/images/sub/ico_navermap.png) no-repeat 50% / contain ; }
#map_info dd .btn_box li a .ico_navermap { }
.fran-view dt .btn_box .link { aspect-ratio: 1/1;}
.fran-view dt .btn_box .link i { font-size: 18px;}


.fran-view dd{position: relative; }
.fran-view dd .bigimg{border-radius: 20px; overflow: hidden;max-width: 1200px; margin: 0 auto;}
.fran-view dd .bigimg img{max-width: 100%;height: auto;}
.fran-view dd .dots { margin-top: 40px; text-align: center;}
.fran-view dd .dots span{display: inline-block !important;margin: 0 2px;}
.fran-view dd .dots span.swiper-pagination-bullet{display: block;width: 12px;height: 12px;background: #e6e6e6;text-indent: -999em;overflow: hidden;border: none;border-radius: 12px;transition: all 0.1s;opacity: 1;}
.fran-view dd .dots span.swiper-pagination-bullet-active{background: var(--col-red2);}
.fran-view dd .bigimg .no-data{text-align: center;line-height: 300px;background: #f7f7f7;font-size: 16px;letter-spacing: -1px;color: #999;}
.fran-view dd .arrows > button {position: absolute;z-index: 33;top: 50%;border: none;background: #fff;width: 84px; height: 84px;align-content: center;box-shadow: 3px 3px 15px rgba(0,0,0,0.12);border-radius: 50%;}
.fran-view dd .arrows > button.prev {left: 0;transform: translate(-50%,-50%);}
.fran-view dd .arrows > button.next {right: 0;transform: translate(50%,-50%);}
.fran-view dd .arrows > button i {display: block;font-size: 25px;color: #222;text-align: center;border-radius: 50%;}

.fran-view-map{position: relative;padding-top: 60px; border-top: 1px solid #e9e9e9;}
.fran-view-map #map { border: 1px solid #e9e9e9;; border-radius: 20px; overflow: hidden;}

/* list, view 공통 */
.info_list { display: flex; margin-top: 20px;}
.info_list span {font-size: 18px;font-weight: 300;color: #555; }
.info_list span + span::before { content: ''; display: inline-block; width: 1px; height: 15px; background-color: #e5e5e5; margin: 0 15px; vertical-align: middle;}
.fran-list .closed,
.fran-view .closed{ display: block; padding-top: 15px; color: #888; font-size: 16px; font-weight: 500; }
.info_list i { display: inline-block; margin-right: 5px; color: var(--col-red2); vertical-align: middle;}
.info_list .hours i { width: 18px; height: 18px; background: url(/images/sub/ico_time.png) no-repeat; } 

.sales_info { display: flex; margin-top: 25px;}
.sales_info .badge { display: inline-block; padding: 10px 15px; border-radius: 99px; font-size: 17px; font-weight: 500;}
.sales_info .badge + .badge { margin-left: 5px;}
.sales_info .badge i { display: inline-block; width: 17px; height: 15px; background-position: 50%; background-repeat: no-repeat; background-size: contain; margin-right: 5px; vertical-align: middle; }
.sales_info .badge.hall { color: #63483d; background-color: rgba(99,72,61,0.1);}
.sales_info .badge.hall i { background-image: url(/images/sub/ico_badge_hall.png)}
.sales_info .badge.delivery { color: #ad9442; background-color: rgba(210,184,102,0.2);}
.sales_info .badge.delivery i { background-image: url(/images/sub/ico_badge_delivery.png)}
.sales_info .badge.takout { color: #536f38; background-color: rgba(83,111,56,0.15);}
.sales_info .badge.takout i { background-image: url(/images/sub/ico_badge_takout.png)}
.sales_info .badge.booking { color: #888; background-color: rgba(83,113,84,0.1);}
.sales_info .badge.booking i { background-image: url(/images/sub/ico_badge_booking.png)}