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

	SUPERBOARD :: BOARD

**************************************************/

/**************************
	Button
**************************/
#naru-footer{position: relative;margin-top: 30px;min-height: 35px;}
#naru-footer .left{position: absolute;top: 0;left: 0;text-align: left;width: 50%;z-index: 2;}
#naru-footer .center{text-align: center;}
#naru-footer .right{text-align: right;}

.naru-btn{display: inline-block;*display: inline;*zoom: 1;vertical-align: top;box-sizing: border-box;height: 35px;line-height: 35px;text-align: center;font-size: 14px;padding: 0 20px !important;text-decoration: none !important;letter-spacing: -1px;cursor: pointer !important;}
.naru-btn.type1{background: #545c73;background: linear-gradient(180deg, #545c73 30%, #3b4151 100%);border: 1px solid #3b4151;color: #ffffff !important;}
.naru-btn.type2{background: #f7f7f7;background: linear-gradient(180deg, #ffffff 30%, #f7f7f7 100%);border: 1px solid #ddd;color: #000000 !important;}
.naru-btn.type3{background: #f7f7f7;border: 1px solid #ddd;color: #000000 !important;}
.naru-btn.type4{background: #ffffff;border: 1px solid #d4d4d4;color: #323a45 !important;}
.naru-btn.type5{background: #ffffff;background: linear-gradient(180deg, #ffffff 30%, #f7f7f7 100%);border: 1px solid #000000;color: #000000 !important;}
.naru-btn.type6{background: #f5af1c;background: linear-gradient(180deg, #f5af1c 30%, #d79712 100%);border: 1px solid #f5af1c;color: #ffffff !important;}
.naru-btn.type11{height: 25px;line-height: 25px;padding: 0 8px !important;background: #545c73;background: linear-gradient(180deg, #545c73 30%, #3b4151 100%);border: 1px solid #3b4151;color: #ffffff !important;font-size: 12px;color: #ffffff !important;}
.naru-btn.type22{height: 25px;line-height: 25px;padding: 0 8px !important;background: #f7f7f7;background: linear-gradient(180deg, #ffffff 30%, #f7f7f7 100%);border: 1px solid #ddd;color: #000000 !important;font-size: 12px;color: #2e2e2e !important;}

.naru-no-data{display: block;background: #f7f7f7;padding: 20px 10px;text-align: center;font-size: 14px;letter-spacing: -1px;color: #999;}

@media screen and (max-width: 750px) {
	#naru-footer.no-abs .left{position: static;text-align: center;width: 100%;white-space: nowrap;}
	#naru-footer.no-abs .center{margin-top: 10px;white-space: nowrap;}
	#naru-footer.no-abs .right{margin-top: 10px;text-align: center;white-space: nowrap;}
    .naru-btn{font-size: 14px !important;}
    .naru-no-data{font-size: 11px;}
}

/**************************
	Category
**************************/
#naru-category{margin-bottom: 15px;}
#naru-category li{position: relative;display: inline-block;vertical-align: middle;margin: 3px 0;padding: 0 15px;}
#naru-category li:before{content: '';display: block;position: absolute;top: 50%;left: 0;width: 1px;height: 12px;background: #ddd;margin-top: -6px;}
#naru-category li:first-child{padding-left: 0;}
#naru-category li:first-child:before{display: none;}
#naru-category li a{font-size: 15px;color: #333 !important;letter-spacing: -1px;}
#naru-category li.active a{color: #000 !important;font-weight: bold;}

@media screen and (max-width: 750px) {
    #naru-category{padding: 10px 5px;margin-bottom: 10px;background: #f7f7f7;}
    #naru-category li{padding: 0;margin: 5px 8px;}
    #naru-category li:before{display: none;}
    #naru-category li:first-child{padding-left: 0;}
    #naru-category li a{font-size: 13px;}

}

/**************************
	Search
**************************/
#naru-search{position: relative;margin-bottom: 20px;height: 40px;}
#naru-search .total{font-size: 14px;color: #333333;line-height: 40px;}
#naru-search .total strong{color: #000;}
#naru-search .tit{font-size: 16px;letter-spacing: -1px;color: #333;font-weight: bold;line-height: 40px;}
#naru-search .tit i{margin-right: 5px;}
#naru-search fieldset{position: absolute;top: 0;right: 0;font-family: empty;font-size: 0;}
#naru-search fieldset.no-abs{position: static;text-align: center;padding: 10px 0;}
#naru-search fieldset > *{display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;height: 40px;box-sizing: border-box;}
#naru-search legend{display: none;}
#naru-search .where{border: 1px solid #dddddd;border-top-color: #bababa;border-left-color: #bababa;width: 130px;overflow: hidden;background: url(/img/sb_slt_spr.jpg) no-repeat 92% center;margin-left: 5px;}
#naru-search .where select{width: 130%;height: 40px;border: none;background: none;padding-left: 10px;font-size: 14px;color: #333333;}
#naru-search .inp{position: relative;border: 1px solid #dddddd;border-top-color: #bababa;border-left-color: #bababa;padding-right: 40px;margin-left: 5px;}
#naru-search .inp .keyword{width: 100%;border: none;background: none;height: 40px;font-size: 14px;padding-left: 15px;}
#naru-search .inp .narum{position: absolute;top: 0;right: 0;width: 40px;height: 40px;background: url(/img/search.jpg) no-repeat center center;border: none;text-indent: -999em;}

@media screen and (max-width: 750px) {
    #naru-search{height: auto;}
    #naru-search .total{font-size: 12px;line-height: auto;}
    #naru-search fieldset{position: relative;top: auto;right: auto;margin: -0.5% !important;}
    #naru-search fieldset > *{height: 35px;margin: 0.5% !important;}
    #naru-search .where{width: 35%;}
    #naru-search .where select{height: 35px;padding-left: 5px;font-size: 13px;letter-spacing: -1px;}
    #naru-search .category{width: 99%;background-position: 97% center;}
    #naru-search .inp{padding-right: 35px;width: 63%;}
    #naru-search .inp .keyword{width: 100%;height: 35px;font-size: 13px;padding-left: 10px;}
    #naru-search .inp .narum{width: 35px;height: 35px;}

}

/**************************
	Password form
**************************/
#naru-password{width: 300px;margin: 0 auto;}
#naru-password fieldset{padding: 20px;border: 1px solid #ddd;border-top-width: 2px;}
#naru-password fieldset h4{display: block;padding: 0;margin-bottom: 10px;display: block;font-weight: normal;font-size: 16px;}
#naru-password fieldset .inp{width: 100%;}

@media screen and (max-width: 750px) {
	#naru-password{width: 100%;}
	#naru-password fieldset{padding: 20px 15px;}
	#naru-password fieldset h4{font-size: 14px;}
	#naru-password fieldset .inp{width: 100%;}
}

/**************************
	Write
**************************/
#naru-write{}
#naru-write .write_tbl{width: 100%;border-top: 2px solid #545c73;}
#naru-write .write_tbl tr > *{padding: 10px 15px;border-bottom: 1px solid #dddddd;font-size: 14px;line-height: 18px;}
#naru-write .write_tbl tbody th{font-weight: normal;background: #f7f7f7;}
#naru-write .write_tbl tbody.memo td{padding: 10px 0;}
#naru-write .write_tbl tbody.fileWrap th em{font-style: normal;margin-left: 3px;}
#naru-write .write_tbl .inp{width: 450px;height: 35px;line-height: 35px;padding: 0 15px;background: #ffffff;border: 1px solid #dddddd;}
#naru-write .write_tbl .inp.w100{width: 100%;}
#naru-write .write_tbl .inp.w30{width: 30%;}
#naru-write .write_tbl select{height: 35px;line-height: 35px;padding: 0 10px;background: #ffffff;border: 1px solid #dddddd;}
#naru-write .write_tbl textarea{width: 100%;height: 300px;font-size: 14px;line-height: 18px;padding: 15px;background: #ffffff;border: 1px solid #ddd;}
#naru-write .write_tbl em.tbl_sment{display: block;margin: 5px 0;font-size: 13px;color: #999;font-style: normal;letter-spacing: -1px;}
#naru-write .write_tbl .fileWrap .addFile{display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;margin-left: 10px;}
#naru-write .write_tbl .fileWrap .addFile > a{display: inline-block;*display: inline;*zoom: 1;vertical-align: top;width: 16px;height: 16px;text-indent: -999em;}
#naru-write .write_tbl .fileWrap .addFile > a.plus{background: url(/img/sb_fileinp_plus.jpg);}
#naru-write .write_tbl .fileWrap .addFile > a.minus{background: url(/img/sb_fileinp_min.jpg);}

@media screen and (max-width: 750px) {
	#naru-write .write_tbl colgroup{display: none;}
	#naru-write .write_tbl tr > *{padding: 10px 5px;font-size: 12px;line-height: 16px;}
	#naru-write .write_tbl tbody th{width: 60px;}
	#naru-write .write_tbl .inp{width: 40%;font-size: 12px;}
	#naru-write .write_tbl textarea{height: 150px;font-size: 12px;line-height: 16px;padding: 10px;}
	#naru-write .write_tbl em.tbl_sment{font-size: 11px;}
	#naru-write .write_tbl .fileWrap .addFile{display: block;margin-top: 5px;margin-left: 0;}
	#naru-write .write_tbl .fileWrap input[type=file]{width: 100%;}
}

/**************************
	View
**************************/
#naru-view{}
#naru-view .titWrap{position: relative;border-top: 2px solid #0a0e35;border-bottom: 1px solid #ddd;padding: 20px;}
#naru-view .titWrap .naruj{font-size: 16px;line-height: 20px;color: #000000;display: block;padding-right: 220px;font-weight: normal;}
#naru-view .titWrap .info{text-align: right;position: absolute;top: 23px;right: 20px;}
#naru-view .titWrap .info li{position: relative;display: inline-block;*display: inline;*zoom: 1;vertical-align: top;padding: 0 10px;font-size: 12px;line-height: 16px;font-weight: normal;}
#naru-view .titWrap .info li:last-child{padding-right: 0;}
#naru-view .titWrap .info li:after{position: absolute;top: 50%;left: 0;margin-top: -7px;content: '';display: block;width: 1px;height: 14px;background: #dddddd;}
#naru-view .titWrap .info li:first-child:after{display: none;}
#naru-view .titWrap .info li em{margin-right: 5px;font-style: normal;font-weight: normal;}
#naru-view .etcfield{position: relative;background: #f7f7f7;padding: 20px;border-bottom: 1px solid #ddd;}
#naru-view .etcfield .tit{display: inline-block;vertical-align: middle;margin-right: 30px;color: #000;letter-spacing: -1px;font-weight: bold;}
#naru-view .etcfield p{display: inline-block;vertical-align: middle;color: #333;}
#naru-view .etcfield p a{color: #333;}
#naru-view .memoWrap{padding: 50px 10px;min-height: 300px;word-break:break-all;border-bottom: 1px solid #ddd;}
#naru-view .memoWrap img {max-width:100%;height: auto;}
#naru-view .file > li{position: relative;border-bottom: 1px solid #ddd;height: 45px;line-height: 45px;padding-left: 170px;}
#naru-view .file > li > strong{position: absolute;top: 0;left: 0;width: 150px;height: 100%;font-weight: normal;line-height: 45px;text-align: center;background: #f3f4f7;}
#naru-view .file > li .filename{display: inline-block;*display: inline;*zoom: 1;vertical-align: top;color: #000;margin-right: 15px;max-width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#naru-view .file > li .byte{font-size: 12px;margin-right: 15px;}
#naru-view .file > li a img{display: none;}

@media screen and (max-width: 750px) {
	#naru-view .titWrap{padding: 20px 10px;}
	#naru-view .titWrap .naruj{font-size: 14px;line-height: 18px;padding-right: 0;margin-bottom: 10px;}
	#naru-view .titWrap .info{text-align: left;position: static;}
	#naru-view .titWrap .info li{font-size: 11px;line-height: 13px;}
	#naru-view .titWrap .info li:first-child{padding-left: 0;}
    #naru-view .etcfield{padding: 15px;}
    #naru-view .etcfield .tit{font-size: 13px;margin-right: 0;margin-bottom: 5px;display: block;}
    #naru-view .etcfield p{display: block;font-size: 13px;letter-spacing: -1px;}
	#naru-view .memoWrap{padding: 20px 10px;min-height: 150px;}
	#naru-view .memoWrap img {max-width:320px;}  /* 이미지 조절 추가 : 김태균 팀장 */
	#naru-view .file > li{height: 30px;line-height: 18px;padding: 15px 10px;}
	#naru-view .file > li > strong{display: none;}
	#naru-view .file > li .filename{display: block;width: 100%;max-width: 100%;margin-right: 0;font-size: 12px;}
	#naru-view .file > li .byte{font-size: 11px;margin-right: 0;color: #999999;}
	#naru-view .file > li img{max-width: 50px;height: auto;}
}


/**************************
	Comment
**************************/
#naru-comment{margin-top: 60px;}
#naru-comment .writeWrap{margin-bottom: 30px;}
#naru-comment .writeWrap dt{margin-bottom: 10px;}
#naru-comment .writeWrap dt .inp{width: 230px;height: 40px;line-height: 40px;padding: 0 10px;border: 1px solid #dddddd;margin-right: 5px;}
#naru-comment .writeWrap dd{margin-bottom: 10px;}
#naru-comment .writeWrap dd textarea{width: 100%;height: 110px;border: 1px solid #dddddd;}
#naru-comment .writeWrap dd label input{display: inline-block;vertical-align: middle;margin: 0;}
#naru-comment .writeWrap dd.btnWrap{position: relative;}
#naru-comment .writeWrap dd.btnWrap .narum{position: absolute;top: 0;right: 0;}

#naru-comment .list{border-top: 1px solid #dddddd;}
#naru-comment .list li{position: relative;padding: 20px 20px 20px 55px;border-bottom: 1px dashed #dddddd;background: url(/img/sb_ico_comm.png) no-repeat 18px 23px;}
#naru-comment .list li .info{margin-bottom: 10px;}
#naru-comment .list li .info .name{color: #333333;font-size: 14px;letter-spacing: -1px;font-weight: bold;}
#naru-comment .list li .info .date{margin-left: 15px;color: #999;font-size: 12px;}
#naru-comment .list li .memo{display: block;font-size: 14px;line-height: 18px;background: #f7f7f7;padding: 15px;}
#naru-comment .list li .btnWrap{position: absolute;top: 15px;right: 20px;margin-top: 0;}
#naru-comment .list li.reply,
#naru-comment .list li.reply1{padding-left: 80px;background: #f3f4f7 url(/img/sb_ico_comm_reply.png) no-repeat 55px 23px;}
#naru-comment .list li.reply2{padding-left: 110px;background: #f3f4f7 url(/img/sb_ico_comm_reply.png) no-repeat 85px 23px;}
#naru-comment .list li.reply3{padding-left: 140px;background: #f3f4f7 url(/img/sb_ico_comm_reply.png) no-repeat 115px 23px;}
#naru-comment .list li.reply4{padding-left: 170px;background: #f3f4f7 url(/img/sb_ico_comm_reply.png) no-repeat 145px 23px;}
#naru-comment .list li.reply5{padding-left: 200px;background: #f3f4f7 url(/img/sb_ico_comm_reply.png) no-repeat 175px 23px;}

@media screen and (max-width: 750px) {
	#naru-comment{margin-top: 30px;}
	#naru-comment .writeWrap{margin-bottom: 20px;}
	#naru-comment .writeWrap dt .inp{width: 40%;height: 35px;line-height: 35px;}

	#naru-comment .list li{position: relative;padding: 10px 10px 10px 25px;background-size: 13px auto;background-position: 5px 16px;}
	#naru-comment .list li .info .name{font-size: 12px;}
	#naru-comment .list li .info .date{margin-left: 7px;font-size: 11px;}
	#naru-comment .list li .memo{font-size: 12px;line-height: 16px;}
	#naru-comment .list li .memo img{width: auto;height: auto;max-width: 14px;max-height: 14px;}
	#naru-comment .list li.reply{padding-left: 40px;background-size: 10px auto;background-position: 25px 15px;}
	#naru-comment .list li .btnWrap{position: static;margin-top: 10px;opacity: 1;text-align: right;}

}

/*reset browsers*/
#naru-wrap *{ -webkit-text-size-adjust:none; -webkit-border-radius:0; }
#naru-wrap input[type=button],
#naru-wrap input[type=submit]{ -webkit-appearance:none; }

/*reset elements*/
#naru-wrap form,#naru-wrap dl,#naru-wrap dd{ margin:0; padding:0; }
#naru-wrap label{ cursor:pointer; }
#naru-wrap article,#naru-wrap aside,#naru-wrap details,#naru-wrap figcaption,#naru-wrap figure,#naru-wrap footer,header,#naru-wrap #naru-wrap hgroup,#naru-wrap menu,#naru-wrap nav,#naru-wrap section,#naru-wrap dd,#naru-wrap hgroup{ display:block; }
#naru-wrap img{ border:none; vertical-align:middle; }
#naru-wrap fieldset{ margin:0; padding:0; border:none; }
#naru-wrap legend{ margin:0; padding:0; }
#naru-wrap p{ margin:0; padding:0; }
#naru-wrap h1,#naru-wrap h2,#naru-wrap h3,#naru-wrap h4,#naru-wrap h5,#naru-wrap h6{ margin:0; padding:0; }
#naru-wrap table{ border-collapse:collapse; border-spacing:0; }

/*Inputs*/
#naru-wrap input{ cursor:pointer; }
#naru-wrap input[type=checkbox],
#naru-wrap input[type=radio]{ border:none; vertical-align:middle; }

#naru-wrap input[type=search]{ border:none;display:inline-block;vertical-align:middle; height:50px; }
#naru-wrap input[type=text],
#naru-wrap input[type=password],
#naru-wrap input[type=search],
#naru-wrap input[type=email],
#naru-wrap input[type=url],
#naru-wrap input[type=number]{display:inline-block;vertical-align:middle;outline: none;height: 35px;line-height: 35px;padding: 0 15px;background: #ffffff;border: 1px solid #dadada;box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#naru-wrap select{height: 35px;line-height: 35px;padding: 0 0 0 10px;background: #ffffff;border: 1px solid #dadada;box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#naru-wrap textarea{width: 100%;height: 300px;font-size: 14px;line-height: 18px;padding: 15px;background: #ffffff;border: 1px solid #ddd;box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

#naru-wrap ::-webkit-input-placeholder{ color:#98908b; }
#naru-wrap :-moz-placeholder{ color:#98908b; }
#naru-wrap ::-moz-placeholder{ color:#98908b; }
#naru-wrap :-ms-input-placeholder{ color:#98908b; }

/*reset links*/
#naru-wrap A:link{ text-decoration:none; color:#666666; }
#naru-wrap A:visited { text-decoration:none; color:#666666; }
#naru-wrap A:active { text-decoration:none; color:#666666; }
#naru-wrap A:hover{ text-decoration:underline; color:#000000; }

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

	#naru-wrap input[type=search]{ border:none; height:50px; }
	#naru-wrap input[type=text],
	#naru-wrap input[type=password],
	#naru-wrap input[type=search],
	#naru-wrap input[type=email],
	#naru-wrap input[type=url],
	#naru-wrap input[type=number]{font-size: 12px;padding: 0 5px;}
	#naru-wrap select{padding: 0 0 0 5px;font-size: 12px;}
	#naru-wrap textarea{padding: 10px;font-size: 12px;line-height: 16px;}
	#wm_email_select{margin-top:5px;}

}
#naru-list{}
#naru-list .list_tbl{width: 100%;border-top: 2px solid #0a0e35;}
#naru-list .list_tbl tr > *{position: relative;padding: 18px 12px;border: 1px solid #dddee0;border-width: 0 1px 1px 1px;font-size: 14px;line-height: 18px;text-align: center;}
#naru-list .list_tbl tr.tr_notice{background: #f3f4f7;}
#naru-list .list_tbl thead tr th{font-weight: normal;color: #000000;letter-spacing: -1px;}
#naru-list .list_tbl tbody tr td.no,
#naru-list .list_tbl tbody tr td.date,
#naru-list .list_tbl tbody tr td.view{font-size: 12px;color: #999;}
#naru-list .list_tbl tbody tr td.naruj{text-align: left;}
#naru-list .list_tbl tbody tr td.naruj a{color: #000;letter-spacing: -0.5px;font-size: 15px;}
#naru-list .list_tbl tbody tr td.naruj img{max-height:15px;width: auto;height: auto;}
#naru-list .list_tbl tbody tr td.naruj .cmnt{font-weight: bold;color: #cb0f16;font-size: 12px;margin-left: 10px;}
#naru-list .list_tbl tbody tr td em{display: none;}

/* 답글 들여쓰기 */
#naru-list .list_tbl tbody tr td.naruj.reply1{background: url(/img/naru_ico_reply.png) no-repeat 20px 19px;padding-left: 40px;}
#naru-list .list_tbl tbody tr td.naruj.reply2{background: url(/img/naru_ico_reply.png) no-repeat 50px 19px;padding-left: 70px;}
#naru-list .list_tbl tbody tr td.naruj.reply3{background: url(/img/naru_ico_reply.png) no-repeat 80px 19px;padding-left: 100px;}
#naru-list .list_tbl tbody tr td.naruj.reply4{background: url(/img/naru_ico_reply.png) no-repeat 110px 19px;padding-left: 130px;}
#naru-list .list_tbl tbody tr td.naruj.reply5{background: url(/img/naru_ico_reply.png) no-repeat 140px 19px;padding-left: 160px;}

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

    #naru-list .list_tbl colgroup{display: none;}
    #naru-list .list_tbl tr > *{padding: 10px 5px;font-size: 13px;letter-spacing: -1px;}
    #naru-list .list_tbl thead tr th{font-size: 12px;}
    #naru-list .list_tbl .naruj img{max-height:12px;width: auto;height: auto;}
    #naru-list .list_tbl .view,
    #naru-list .list_tbl .no{display: none;}
    #naru-list .list_tbl .date{width:50px;}
    #naru-list .list_tbl .writer{width: 70px;}
    #naru-list .list_tbl .naruj a{font-size: 13px !important;letter-spacing: -1px;}

	/* 답글 들여쓰기 */
	#naru-list .list_tbl tbody tr td.naruj.reply1{background-size: 10px auto;background-position: 7px 12px;padding-left: 22px;}
	#naru-list .list_tbl tbody tr td.naruj.reply2{background-size: 10px auto;background-position: 17px 12px;padding-left: 32px;}
	#naru-list .list_tbl tbody tr td.naruj.reply3{background-size: 10px auto;background-position: 27px 12px;padding-left: 42px;}
	#naru-list .list_tbl tbody tr td.naruj.reply4{background-size: 10px auto;background-position: 37px 12px;padding-left: 52px;}
	#naru-list .list_tbl tbody tr td.naruj.reply5{background-size: 10px auto;background-position: 47px 12px;padding-left: 62px;}
}
#naru-search .where{width: 200px;}

/* list */
.fran-box{zoom: 1;margin-top: 40px;}
.fran-box:after{display: block;content: '';clear: both;}
.fran-box > *{float: left;}

.fran-box dt{width: 45%;}
.fran-box dt .map {width: 494px;border: 1px solid #ddd;position: relative;}
.fran-box dt .map .btn a {position: absolute;z-index: 70;width: 45px;height: 23px;line-height: 23px;background: #fff;border: 1px solid #ddd;text-align: center;font-size: 14px;color: #58595b;font-weight: normal;letter-spacing: -0.01em;text-decoration: none;}
.fran-box dt .map .btn .icon1 {top: 85px;left: 95px;}
.fran-box dt .map .btn .icon2 {top: 85px;left: 145px;}
.fran-box dt .map .btn .icon3 {top: 121px;left: 165px;}
.fran-box dt .map .btn .icon4 {top: 80px;left: 245px;}
.fran-box dt .map .btn .icon5 {top: 152px;left: 226px;}
.fran-box dt .map .btn .icon6 {top: 180px;left: 200px;}
.fran-box dt .map .btn .icon7 {top: 189px;left: 153px;}
.fran-box dt .map .btn .icon8 {top: 211px;left: 210px;}
.fran-box dt .map .btn .icon9 {top: 185px;left: 274px;}
.fran-box dt .map .btn .icon10 {top: 246px;left: 173px;}
.fran-box dt .map .btn .icon11 {top: 231px;left: 270px;}
.fran-box dt .map .btn .icon12 {top: 245px;left: 316px;}
.fran-box dt .map .btn .icon13 {top: 280px;left: 242px;}
.fran-box dt .map .btn .icon14 {top: 292px;left: 290px;}
.fran-box dt .map .btn .icon15 {top: 292px;left: 165px;}
.fran-box dt .map .btn .icon16 {top: 317px;left: 152px;}
.fran-box dt .map .btn .icon17 {top: 385px;left: 113px;}
.fran-box dt .map .btn a.active {background: #e60013;color: #fff;border-color: #e60013;}
.fran-box dd{width: 55%;}

.fran-tbl{width: 100%;}
.fran-tbl tr > *{padding: 15px 5px;border: 1px solid #ddd;border-width: 1px 0 1px 0;text-align: center;}
.fran-tbl thead th{font-size: 16px;color: #000;font-weight: 300;border-top: 1px solid #000;background: #f7f7f7;}
.fran-tbl .btn{color: #3571c7;font-size: 16px;}

/* view */
.fran-view{zoom: 1;padding-bottom: 40px;}
.fran-view:after{display: block;content: '';clear: both;}
.fran-view > *{float: left;box-sizing: border-box;}
.fran-view dt{padding-right: 70px;width: 45%;display: none;}
.fran-view dt .bigimg{position: relative;}
.fran-view dt .bigimg img{max-width: 100%;max-height:700px;height: auto;}
.fran-view dt .bigimg .bx-pager{position: absolute;bottom: 20px;left: 0;z-index: 81;width: 100%;text-align: center;}
.fran-view dt .bigimg .bx-pager-item{display: inline-block;margin: 0 2px;}
.fran-view dt .bigimg .bx-pager-item a{display: block;text-indent: -999em;width: 12px;height: 12px;border-radius: 50%;background: #fff;}
.fran-view dt .bigimg .bx-pager-item a.active{background: #3571c9;}

.fran-view dd{padding-top: 10px;width: 100%;}
.fran-view dd .head{border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 25px;}
.fran-view dd .head em{display: block;margin-bottom: 5px;font-style: normal;font-size: 17px;color: #505d7e;font-weight: 300;text-align: left;}
.fran-view dd .head h4{display: block;font-size: 35px;line-height: 42px;color: #222222;letter-spacing: -1px;font-weight: normal;}
.fran-view dd .txt{display: block;font-size: 16px;line-height: 26px;color: #888888;width: 100%;margin-top: auto;float: initial;text-align: left;}

.fran-view dd .info{margin-top: 30px;padding: 25px 30px;background: #f7f7f7;border-top: 1px solid #000;}
.fran-view dd .info > li{position: relative;padding: 8px 0;padding-left: 100px;}
.fran-view dd .info > li > strong{position: absolute;top: 0;left: 0;padding: 8px 0;font-size: 15px;color: #000;font-weight: 300;}
.fran-view dd .info > li > p{font-size: 15px;line-height: 22px;color: #666;text-align: left;}

.fran-view-map{position: relative; margin-bottom:20px}


@media screen and (min-width: 750px) and (max-width: 1200px){
	#naru-search .where{width: 35%;}
    #naru-search .category{width: 99%;}
}


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

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

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

    .fran-box dt{width: auto;}
    .fran-box dt .map {width: 494px;margin: 0 auto;border: none;position: relative;left: 50%;margin-left: -220px;}
    .fran-box dt .map img{width: 100%;height: auto;}
    .fran-box dd{width: auto;}

    .fran-tbl tr > *{padding: 8px 2px;font-size: 12px;letter-spacing: -1px;}
    .fran-tbl tr > *.mo-hidden{display: none;}
    .fran-tbl colgroup{display: none;}
    .fran-tbl thead th{font-size: 12px;white-space: nowrap;letter-spacing: -1px;}
    .fran-tbl .btn{font-size: 14px;}

    /* view */
    .fran-view{padding-bottom: 20px;}
    .fran-view > *{float: none;}
    .fran-view dt{padding-right: 0;width: auto;}
    .fran-view dt .bigimg{text-align: center;}
    .fran-view dt .bigimg img{max-height:320px;max-width: 100%;}
    .fran-view dt .bigimg .bx-pager{bottom: 15px;}
    .fran-view dt .bigimg .bx-pager-item a{width: 8px;height: 8px;}

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

    .fran-view dd .info{margin-top: 20px;padding: 15px 20px;}
    .fran-view dd .info > li{padding: 4px 0;padding-left: 80px;}
    .fran-view dd .info > li > strong{padding: 4px 0;font-size: 13px;}
    .fran-view dd .info > li > p{font-size: 13px;line-height: 18px;}

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

	#naru-search .where{width: 45%;}
	#naru-search .inp{width: 100%;}

}
#sb-footer .center{text-align: center;}
#sb-footer .right{text-align: right;}

.sb-btn{display: inline-block;*display: inline;*zoom: 1;vertical-align: top;box-sizing: border-box;height: 35px;line-height: 35px;text-align: center;font-size: 14px;padding: 0 20px !important;text-decoration: none !important;letter-spacing: -1px;cursor: pointer !important;}
.sb-btn.type1{background: #545c73;background: linear-gradient(180deg, #545c73 30%, #3b4151 100%);border: 1px solid #3b4151;color: #ffffff !important;}
.sb-btn.type2{background: #f7f7f7;background: linear-gradient(180deg, #ffffff 30%, #f7f7f7 100%);border: 1px solid #ddd;color: #000000 !important;}
.sb-btn.type3{background: #f7f7f7;background: linear-gradient(180deg, #ffffff 30%, #f7f7f7 100%);border: 1px solid #ddd;color: #000000 !important;}
.sb-btn.type4{background: #eaeaea;background: linear-gradient(180deg, #eaeaea 30%, #d4d4d4 100%);border: 1px solid #d4d4d4;color: #323a45 !important;}
.sb-btn.type5{background: #ffffff;background: linear-gradient(180deg, #ffffff 30%, #f7f7f7 100%);border: 1px solid #000000;color: #000000 !important;}
.sb-btn.type6{background: #f5af1c;background: linear-gradient(180deg, #f5af1c 30%, #d79712 100%);border: 1px solid #f5af1c;color: #ffffff !important;}
.sb-btn.type11{height: 25px;line-height: 25px;padding: 0 8px !important;background: #545c73;background: linear-gradient(180deg, #545c73 30%, #3b4151 100%);border: 1px solid #3b4151;color: #ffffff !important;font-size: 12px;color: #ffffff !important;}
.sb-btn.type22{height: 25px;line-height: 25px;padding: 0 8px !important;background: #f7f7f7;background: linear-gradient(180deg, #ffffff 30%, #f7f7f7 100%);border: 1px solid #ddd;color: #000000 !important;font-size: 12px;color: #2e2e2e !important;}

.mapArea {
	overflow: hidden;
	position: absolute;
	top: 250px;
	left: -60px;
	width: 400px;
	margin: -258px 0 0 0;
}

.mapArea .map1, .shopMap .mapArea .map2, .shopMap .mapArea .map3,
	.shopMap .mapArea .map4, .shopMap .mapArea .map5, .shopMap .mapArea .map6,
	.shopMap .mapArea .map7, .shopMap .mapArea .map8, .shopMap .mapArea .map9,
	.shopMap .mapArea .map10, .shopMap .mapArea .map11, .shopMap .mapArea .map12,
	.shopMap .mapArea .map13, .shopMap .mapArea .map14, .shopMap .mapArea .map15,
	.shopMap .mapArea .map16, .shopMap .mapArea .map17 {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
}

.cityInfo {
	overflow: hidden;
	padding: 30px 30px 30px 350px;
}

.popup .overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.7);
  z-index:1;
  display:none;
}

.popup .content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:#fff;
  overflow: auto;
  width: 800px;
  height: 500px;
  z-index:2;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  font-family:"Open Sans",sans-serif;
}

.popup .close-btn {
  cursor:pointer;
  position:absolute;
  right:20px;
  top:20px;
  width:30px;
  height:30px;
  background:#222;
  color:#fff;
  font-size:25px;
  font-weight:600;
  line-height:30px;
  text-align:center;
  border-radius:50%;
}

.popup.active .overlay {
  display:block;
}

.popup.active .content {
  transition:all 300ms ease-in-out;
  transform:translate(-50%,-50%) scale(1);
}



@media screen and (max-width: 750px){
.popup .overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 70;
    display: none;
}
.popup .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    background: #fff;
    overflow: auto;
    width: 90%;
    height: 500px;
    z-index: 99;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
}
}