@charset "utf-8";
/*지도서치 */

#box{height:100%;display:flex;}
#box #mapwrapper{width:0%;height:calc(100vh - 100px);position:relative;}
#listhtmldatas{width:100%;gap:10px;display:grid;gap:10px;}
#listhtmldatas > div{position:relative;}

#box.mapopen #mapwrapper{position:sticky;top:0px;width:70%;}
#box.mapopen #mapwrapper #map{height:100%;}
#box.mapopen #listbox{width:30%;}

#box.mapopen #mapwrapper.mctr_fullscreen{position:fixed;width:100vw;height:100vh;z-index:12;}
#box.mapopen #mapwrapper.mctr_fullscreen .custom_control_map{bottom:auto;right:20px;top:160px}
#box.mapopen #mapwrapper.mctr_fullscreen .custom_typecontrol{right:20px;}
#box.mapopen #mapwrapper.mctr_fullscreen .custom_zoomcontrol{right:20px;}
#box.mapopen #mapwrapper.mctr_fullscreen .custom_zoomcontrol{right:20px;}

.map_buttons{display:flex;gap: 5px;position:sticky;top:0;z-index:2;background-color:white;padding:10px;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;align-items: center;}
.map_buttons .map_buttons_btn { letter-spacing:-2px;background-color:#fff;color:#666;padding:4px 8px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;cursor:pointer;border-radius:25px;transition-duration:0.4s;border:1px solid #666;}
.map_buttons .map_buttons_btn:first-child { padding:0 5px;margin-right:10px;}
.map_buttons .map_buttons_btn:hover { color:#fff;background-color:var(--color-main);}
.map_buttons .map_buttons_btn:first-child, .product_item2 { text-align:center;text-decoration:none;display:inline-block;font-size:14px;cursor:pointer;border-radius:25px;transition-duration:0.4s;border:0px solid #666;background:transparent;color:#fff;background-color:var(--color-main);height:30px;width:30px;}
.gallery_box img {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    display:block;
    max-width:100%;
    height:auto;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    object-fit:cover;
    background:#fff;
}
/* 이미지 스타일 설정 */
.item_box_img {position:relative;overflow:hidden;}
.item_box_img img {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    display:block;
    max-width:100%;
    height:auto;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    object-fit:cover;background:#fff;
}
.item_box_img img:hover { -webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
.item_box_content {padding:20px;}
.item_title  { display:flex;justify-content:space-between;width:100%;height:26px;line-height:26px;}
.item_title_left { flex:1;}
.item_title_right { width:80px;margin-left:auto;text-align:right;}
.item_distance {  }

.item_event { padding:0px;position:absolute;left:10px;top:5px;}
.event{ display:flex;letter-spacing:-1px;text-align:center;margin-top:10px;word-break:keep-all;align-items:center;}   
.event span{ margin-left:10px;font-size:14px;} 
.expect {border:0px;color:#fff;border-radius:3px;padding:4px 10px 4px 10px;font-size:12px !important;background-color:orange;}
.event > .ing {border:0px;color:#fff;border-radius:3px;padding:4px 10px 4px 10px;font-size:12px !important;background-color:var(--color-main);}
.event > .off {border:0px;color:#fff;border-radius:3px;padding:4px 10px 4px 10px;font-size:12px !important;background-color:#ccc;}
.event > .on {border:0px;color:#fff;border-radius:3px;padding:4px 10px 4px 10px;font-size:12px !important;background-color:#222;}

.bo_cate_link {display:inline-block;margin-right:8px;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;white-space:nowrap;color:#fff;background:var(--color-main);position:absolute;bottom:15px;left:15px;}

/*product 소개 bo_1 입력시 wr_1 업데이트*/
.product_wrap { }
.product_box { display:flex;justify-content:space-between;margin-bottom:7px;}
.product_item { flex:1;padding:0px 15px;line-height:26px;height:26px;overflow:hidden;}
.product_item:first-child { max-width:80px;border-radius:60px;background-color:#f4f4f4;text-align:center;} 
.product_item:last-child { flex:1;}
.geo_icon {height:20px;width:20px;line-height:20px;text-align:center;text-decoration:none;display:inline-block;font-size:13px;cursor:pointer;border-radius:25px;transition-duration:0.4s;border:0px solid #666;background:transparent;color:#fff;background-color:var(--color-main);}
.geo_icon:hover { background-color:#ffb722;}

/*상품유형 히트추천최신 */
.sit_icon_li7 .shop_icon { padding:2px 4px;border-radius:6px;margin-right:3px;font-size:11px;color:#fff;}
.shop_icon_1 {background:#3ec1d3;margin-right:10px;}
.shop_icon_2 {background:#ffb722;margin-right:10px;}
.shop_icon_3 {background:#2dd49f;margin-right:10px;}
.shop_icon_4 {background:#556ee6;margin-right:10px;}
.shop_icon_5 {background:#ff5081;margin-right:10px;}

/*검색창 */
.map_search{margin-left:auto;width:40px;height:40px;display:flex;border-radius:4rem;background:#fff;align-items:center;justify-content:center;outline:none;border:1px solid #c1c1c1;overflow:hidden;transition:400ms ease-in-out;position:absolute;right:5px;top:5px;}
.map_active { width:300px;}
.map_search input {position:absolute;top:0;left:0;width:100%;height:100%;margin-left:20px;margin-right:2px;outline:none;border:none;font-size:16px;box-sizing:border-box;}
.map_search_btn {display:flex;justify-content:center;font-size:2rem;border-radius:50%;border:2px solid white;width:40px;height:40px;cursor:pointer;background:var(--color-main);margin-left:auto;z-index:1;align-items:center;}
.map_search_btn i { color:#fff;font-size:1rem;}



/*지도 마크부분 닫기 */ 
#listhtmldatas .customOverCloseButton{display:none;}
#listhtmldatas .flex_item_box .map_info_close { display:none;}
#box.mapopen #mapwrapper .flex_item_box {display:flex;align-items:center;width:270px;border-radius:10px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
#box.mapopen #mapwrapper .flex_item_box .item_box_img { width:100px;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible;}
#box.mapopen #mapwrapper .flex_item_box .item_box_img img { max-width:100%;height:auto;object-fit:cover;}
#box.mapopen #mapwrapper .flex_item_box .item_box_content { flex:1;border-left:1px solid #e6e6e6;}
#box.mapopen #mapwrapper .flex_item_box.item_box_content .item_title { display:block;width:100%;height:auto;line-height:1;margin-bottom:7px;}
#box.mapopen #mapwrapper .flex_item_box.item_box_content .item_title .item_title_right { width:auto;margin-left:0px;text-align:left;}
#box.mapopen #mapwrapper .item_box_content { max-width:200px;} 
#box.mapopen #mapwrapper .flex_item_box .gallery_op_btn { display:none;}
#box.mapopen #mapwrapper .flex_item_box .distance_soundonly, 
#box.mapopen #mapwrapper .flex_item_box .product_wrap,
#box.mapopen #mapwrapper .flex_item_box .item_event { display:none;}
#box.mapopen #mapwrapper .flex_item_box .item_box_img .bo_cate_link {display:inline-block;margin-right:8px;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;white-space:nowrap;color:#fff;background:var(--color-main);position:absolute;bottom:-20px;left:10px;font-size:10px;}	

#box #mapwrapper .map_move_box {text-align:center;text-align:-webkit-center;}
#box #mapwrapper .map_move_icon { height:4px;width:50px;background:var(--color-main);margin:0 auto;border-radius:4px;border:none;}

#box #mapwrapper .map_info_close { position:absolute;top:5px;right:5px;background:#fff;cursor:pointer;border:none;}
#box #mapwrapper .map_info_close:hover { color:red;}

.map_wrap {position:relative;overflow:hidden;width:100%;height:350px;}
.mapopen:has(.custom_typecontrol) .custom_typecontrol.radius_border,
.mapopen:has(.custom_zoomcontrol) .custom_zoomcontrol.radius_border{border:1px solid #919191;border-radius:5px;}     
.mapopen:has(.custom_typecontrol) .custom_typecontrol {display:flex;position:absolute;top:10px;right:10px;overflow:hidden;width:130px;height:37px;margin:0;padding:0;z-index:1;font-size:12px;border:none;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
.custom_typecontrol button {display:block;width:65px;height:37px;float:left;text-align:center;line-height:25px;cursor:pointer;font-size:12px;white-space:nowrap;}
.mapopen:has(.custom_typecontrol) .custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff,  #e6e6e6);}       
.custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
.custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}    
.custom_typecontrol .selected_btn {color:#fff;background:var(--color-main);border:none;}
.custom_typecontrol .selected_btn:hover {color:#fff;}   
.mapopen:has(.custom_typecontrol) .custom_zoomcontrol {position:absolute;top:60px;right:10px;width:40px;height:81px;overflow:hidden;z-index:1;background-color:#f5f5f5;border:none;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);} 
.mapopen:has(.custom_typecontrol) .custom_zoomcontrol button {display:block;width:40px;height:40px;text-align:center;cursor:pointer;border:none;font-size:22px;line-height:30px;}   
.mapopen:has(.custom_typecontrol) .custom_zoomcontrol button:first-child{border-bottom:1px solid #bfbfbf;}  

.mapopen:has(.custom_control_map) .custom_set_map { position:absolute;z-index:1;width:40px;}
.mapopen:has(.custom_control_map) .custom_control_map { bottom:20px;right:10px;}
.mapopen:has(.custom_typecontrol) .custom_btn_control { margin-bottom:9px;width:38px;height:38px;border-radius:50%;background-color:rgba(255, 255, 255, 0.95);box-shadow:0 2px 1px 0 rgba(0, 0, 0, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.32);border:none;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
.custom_control_map .custom_ico_now { width:20px;height:20px;background-position:-20px 0;}
.custom_ico_comm {display:block;overflow:hidden;font-size:1px;line-height:0;color:transparent;vertical-align:top;margin:auto;}
.custom_ico_comm, .k_head .link_app, .link_more:after {background:url(//t1.daumcdn.net/localimg/localimages/07/2018/mw/m640/ico_comm_240402.png) no-repeat;background-size:250px auto;}
.custom_ico_all { width:18px;height:18px;background-position:-40px 0;}
.custom_typecontrol:has(.btn){display:none;}
.custom_control_map:has(button){display:none;}
.mapopen .custom_control_map{display:block;}

/*정렬 스타일 */
.map_sort_box label { font-size:22px;margin-left:10px;}
.map_sort_box select { font-size:14px;padding:4px 5px;border:1px solid #666;border-radius:5px;background-color:#fff;transition:border-color 0.3s, box-shadow 0.3s;cursor:pointer;}
.map_sort_box select:hover { border-color:#666;}
.map_sort_box select:focus { outline:none;border-color:#5b9bd5;box-shadow:0 0 5px rgba(91, 155, 213, 0.5);}

.justify_wrap { position:relative;}
.justify_box_icon {text-align:center;text-decoration:none;display:inline-block;font-size:14px;cursor:pointer;border-radius:25px;transition-duration:0.4s;background:transparent;color:#fff;color:var(--color-main);border:1px solid var(--color-main);height:30px;width:30px;}
.justify_box {display:none;position:absolute;top:40px;background:#fff;border:1px solid #dcdada;font-size:14px;z-index:1;border-radius:4px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
.justify_box:before { content:"";position:absolute;top:-8px;left:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #dcdada transparent;}
.justify_box_item { border-bottom:1px solid #f1f1f1;padding:6px 10px;width:90px;margin:0;white-space:nowrap;text-align:left;}
.justify_box_item button { border:none;background:transparent;} 
.justify_box_item button:hover { color:var(--color-main);font-weight:600;}  

#listbox{width:100%;}
#listhtmldatas:has(.nosearch){display:block;}
#listhtmldatas:has(.nosearch) .nosearch{display:flex;background-color:#fff;width:calc(100% - 0px);height:80px;justify-content:center;align-items:center;}

.set_sort{width:auto;padding:0px 10px;}

#mask7 {width: 100%;height: 100%;top: 0;left: 0;position: fixed;display: block;opacity: 0.8;background: white;z-index: 99;text-align: center;}
#loadingImg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);z-index: 100;}

.total{line-height:30px;display:flex;width:auto;padding:0px 10px;}
/*모바일 스타일 */
@media (min-width:1200px) {
    #box #listbox #listhtmldatas{-ms-overflow-style:none;scrollbar-width:none;overflow-y:auto;height:calc(100vh - 100px);}
    #box.mapopen #listbox #listhtmldatas{height:calc(100vh - 100px);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;width:100%;}

}

@media (min-width:786px) {
	#box.mapopen #listbox::-webkit-scrollbar { display:none;}
	#box.mapopen #listbox #listhtmldatas{height:calc(100vh - 100px);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;grid-template-columns:repeat(1, 1fr);width:100%;}
	#box.mapopen #listbox #listhtmldatas .nosearch{width:100%;}
}

@media (max-width:1200px) {
	#listhtmldatas{grid-template-columns:repeat(3, 1fr);}
    #box.mapopen #listbox #listhtmldatas{height:calc(100vh - 100px);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;grid-template-columns:repeat(1, 1fr);width:100%;}
}

@media (max-width:991px) {
	#listhtmldatas{grid-template-columns:repeat(2, 1fr);}
    #box.mapopen #listbox #listhtmldatas{height:auto;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;grid-template-columns:repeat(1, 1fr);width:100%;}
}

@media (max-width:786px)
{
    html,body{height:100vh;overflow:hidden;}

	#box{display:block;height:calc(100vh - 100px);}
    #box #mapwrapper,#box.mapopen #mapwrapper{width:100%;} 
    #box #mapwrapper #map{height:100%;width:100%;}
    #box #listbox, #box.mapopen #listbox{position:fixed;bottom:0px;z-index:5;background-color:#fff;width:100%;box-shadow:5px 0px 30px 0px rgba(98, 99, 100, 0.3);border-radius:15px 15px 0 0;}
	.width_set#box #listbox{width:calc(100% - 20px);}
    #listwrapper{overflow:auto;scrollbar-width:none;height:170px;}
    #listwrapper::-webkit-scrollbar{display:none;}
    #box.mapopen #listbox #listhtmldatas{grid-template-columns:repeat(1, 1fr);width:100%;overflow-y:scroll;}
	#listhtmldatas{width:min-content;padding:10px;display:flex;}
    .map_buttons{ border-top:0px solid #e1e1e1;}
    #box .flex_item_box {display:flex;align-items:center;width: calc(100vw - 28px);height: 148px;border-radius:10px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
    #box .item_box_img { width:100px;height:100%;display:flex;align-items:center;justify-content:center;}
    #box .item_box_img img { max-width:100%;height:auto;object-fit:cover;}
    #box .item_box_content {flex:1;border-left:1px solid #e6e6e6;width: 241px;}
    #box .item_box_content .item_title { display:block;width:100%;height:auto;line-height:1;margin-bottom:7px;}
    #box .item_box_content .item_title .item_title_right { width:auto;margin-left:0px;text-align:left;}
    #box .flex_item_box .distance_soundonly, 
    #box .flex_item_box .product_wrap,
    #box .flex_item_box .item_event { display:none;}
    #box .flex_item_box .gallery_op_btn { right:10px! important;top:10px! important;}
    #box #mapwrapper .map_info_close { position:absolute;top:5px;right:5px;background:#fff;cursor:pointer;border:none;}
    #box #mapwrapper .map_info_close:hover { color:red;}
	#box #mapwrapper .map_move_box {text-align:center;text-align:-webkit-center;}
	#box #mapwrapper .map_move_icon { height:4px;width:50px;background:var(--color-main);margin:0 auto;border-radius:4px;border:none;}
	
    #box #mapwrapper .custom_typecontrol {display:flex;position:absolute;top:10px;right:10px;overflow:hidden;width:130px;height:37px;margin:0;padding:0;z-index:1;font-size:12px;border:none;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
    #box #mapwrapper .custom_btn_control { margin-bottom:9px;width:38px;height:38px;border-radius:50%;background-color:rgba(255, 255, 255, 0.95);box-shadow:0 2px 1px 0 rgba(0, 0, 0, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.32);border:none;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
    #box #mapwrapper .custom_zoomcontrol {position:absolute;top:60px;right:10px;width:40px;height:81px;overflow:hidden;z-index:1;background-color:#f5f5f5;border:none;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);} 
    #box #mapwrapper .custom_zoomcontrol button {display:block;width:40px;height:40px;text-align:center;cursor:pointer;border:none;font-size:22px;line-height:30px;}   
    #box #mapwrapper .custom_zoomcontrol button:first-child{border-bottom:1px solid #bfbfbf;}  
	#box #mapwrapper .custom_control_map {position:absolute;z-index:1;width:40px;bottom:180px;right:10px;} 
   
    /*정렬*/
	.justify_box { top:-200px;}
	.justify_box:before { top:189px;transform:rotate(180deg);}	
	
    #footer{display:none;}
}