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

	SUPERBOARD :: COMPANY SKIN :: basic

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

.map_cont { position: relative; display: flex; height: calc(100vh - 90px); border-top: 2px solid var(--col-purple); }

/* 매장찾기 좌측 검색 영역 */
.location_box { display: flex; flex-direction: column; width: 500px; box-sizing: border-box; box-shadow: 5px 0 10px rgba(0,0,0,0.06);}
.location_box > div { padding: 0 50px;}
.location_box .search_box { padding-top: 60px; }
.location_box .search_box .tit_box { display: flex; justify-content: space-between; align-items: center;}
.location_box .search_box h3 { font-size: 34px; }
.location_box .search_box .tit_box .pop_btn { position: relative; display: block; min-width: 110px; height: 39px; align-content: center; padding: 0 10px; color: #333; font-size: 16px; font-weight: 500; background-color: #f8f8f8; border-radius: 99px; border: 1px solid #ddd; box-sizing: border-box; text-decoration: none; }
.location_box .search_box .tit_box .location { display: inline-block; }
.location_box .search_box .tit_box .arrow { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); }

.location_box .search_box .search_tab { padding-top: 25px; }
.location_box .search_box .search_tab ul { display: flex; background-color: #f8f8f8; border-radius: 99px; }
.location_box .search_box .search_tab li { flex: 1; }
.location_box .search_box .search_tab li button { width: 100%; height: 42px; background: none; color: #000; font-size: 17px; font-weight: 500; border: 0; border-radius: 99px; }
.location_box .search_box .search_tab li.active button { background-color: var(--col-purple); color: #fff;}
.location_box .search_box .search_input { display: flex; justify-content: space-between; margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #ddd; display: none; }
.location_box .search_box .search_input.active { display: flex; }
.location_box .search_input input { width: calc(100% - 60px); padding: 0 15px; font-size: 16px; font-weight: 500; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; }
.location_box .search_input select { width: calc(50% - 32px); padding: 0 15px; font-size: 16px; font-weight: 500; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; }
.location_box .search_input button { width: 55px; aspect-ratio: 1/1; background-color: var(--col-purple); color: #fff; font-size: 20px; border-radius: 10px; border: 0;}

/* 매장찾기 좌측 검색결과 영역 */
.location_box .result_top { padding-top: 30px; padding-bottom: 15px; }
.location_box .result_top p { font-size: 17px; font-weight: 500; }
.location_box .result_top p strong {}
.location_box .result_top span { display: inline-block; padding-top: 2px; color: #888; font-size: 15px; font-weight: 300; }
.location_box .result_top .sort_btn {}
.location_box .result_box { height: 100%; box-sizing: border-box; overflow-y: auto; }
.location_box .result_box::-webkit-scrollbar {width: 4px;background: #fff;}
.location_box .result_box::-webkit-scrollbar-thumb {background-color: var(--col-purple);border-radius: 99px;}

.location_box .result_box .result_list { border-top: 2px solid var(--col-purple); }
.location_box .result_box .result_list li { position: relative; padding: 20px 10px; padding-left: 30px; border-bottom: 1px solid #ddd; box-sizing: border-box; }
.location_box .result_list li > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 1; }
.location_box .result_list li .tit { position: relative; display: flex; justify-content: space-between; align-items: center; color: #000; font-size: 18px; font-weight: 600; }
.location_box .result_list li .tit i { position: absolute; top: 5px; left: -22px; color: var(--col-purple); }
.location_box .result_list li .tit .distance { color: #999; font-size: 14px; font-weight: 300; }
.location_box .result_list li .location { padding-top: 2px; color: #666; font-size: 15px; font-weight: 300; }
.location_box .result_list li .btn_wrap { position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 1; margin-top: 15px; }
.location_box .result_list li .btn_wrap > div { display: flex; }
.location_box .result_list li .btn_wrap .btn { display: inline-block; height: 32px; align-content: center; padding: 0 8px; text-decoration: none; font-size: 15px; font-weight: 300; border-radius: 7px; }
.location_box .result_list li .btn_wrap .btn + .btn { margin-left: 5px; }
.location_box .result_list li .btn_wrap .btn i { display: inline-block; margin-right: 2px; vertical-align: middle;}
.location_box .result_list li .btn_wrap .btn.gray { background-color: #f4f4f4; color: #333; }
.location_box .result_list li .btn_wrap .btn.tel { background-color: var(--col-purple); color: #fff; }
.location_box .result_list li .btn_wrap .btn.kakao { background-color: #ffe900; color: #333; }
.location_box .result_list li .btn_wrap .btn .ico_kakao { width: 23px; aspect-ratio: 1/1; background: url(/images/sub/ico_kakao.png) no-repeat 50% / contain; margin: 0 0 1px; }


/* 매장찾기 우측 지도 영역 */
.map_box { position: relative; width: calc(100% - 500px); }
.map_box #map { width: 100%; height: 100%; }

.map_box .map_btn_wrap { position: absolute; bottom: 60px; right: 60px; display: flex; z-index: 9999;}
.map_box .map_btn_wrap a { display: block; height: 50px; align-content: center; font-size: 18px; font-weight: 500; text-align: center; border-radius: 99px; text-decoration: none; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.map_box .map_btn_wrap a + a { margin-left: 10px; }
.map_box .map_btn_wrap .now_search_btn { padding: 0 30px; background-color: var(--col-purple); color: #fff; }
.map_box .map_btn_wrap .now_location_btn { padding: 0 25px; color: #000; background-color: #fff; }

.map_box .info { position: relative; }
.map_box .info .marker{display: block;width: 60px;height: 60px;background-position: center center;background-size: contain;background-repeat: no-repeat;opacity: 0.8;cursor: pointer;}
.map_box .active .info .marker{opacity: 1;}
/* .map_box .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: 15px 40px 0 150px;display: none;} */
.map_box .info .store_name { position: absolute; bottom: 75px; left: 50%; transform: translateX(-50%); padding: 6px 8px; background-color: #fff; color: var(--col-purple); font-size: 16px; font-weight: 600; border-radius: 7px; border: 1px solid var(--col-purple); }
.map_box .info .store_name::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,100%); width: 11px; height: 10px; background: url('images/infobox-qa.png') no-repeat 50% / contain; }



/* 지역변경 팝업 */
#popup-pop2 { border-radius: 28px; }
#popup-pop2 .pop-wrap { overflow: hidden; }
.pop_area { padding: 20px 20px 0;  }
.pop_area .tit_box { border-bottom: 1px solid #ddd; }
.pop_area .tit_box h3 { padding-bottom: 25px; font-size: 24px; }
.pop_area .tit_box .close { position: absolute; top: 0; right: 0; width: 50px; aspect-ratio: 1/1; background-color: var(--col-purple); color: #fff; align-content: center; text-align: center; border-bottom-left-radius: 10px; text-indent: 0; font-size: 0; outline: none; }
.pop_area .tit_box .close:after { content: '\f1b5';display: block;position: absolute;top: 0;left: 0;width: 100%;line-height: 50px;text-align: center;font-size: 20px;color: #fff;font-family: axicon;text-indent: 0;}

.pop_area .form_box { }
.pop_area .serch_box { display: flex; margin-top: 20px; }
.pop_area .serch_box input { width: calc(100% - 60px); height: 55px; padding: 0 15px; font-size: 16px; font-weight: 500; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; }
.pop_area .serch_box button { width: 55px; aspect-ratio: 1/1; margin-left: 5px; background-color: var(--col-purple); color: #fff; font-size: 20px; border-radius: 10px; border: 0; }
.pop_area .btn_wrap { margin-top: 10px; }
.pop_area .btn_wrap .now_location_btn { display: block; width: 100%; height: 42px; align-content: center; background-color: #f2ebfc; color: #000; font-size: 17px; font-weight: 500; border-radius: 8px; text-align: center; text-decoration: none; }
.pop_area .btn_wrap .now_location_btn  i { display: inline-block; padding-right: 5px;}
.pop_area .list_box { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd; }
.pop_area .list_box strong { font-size: 17px; font-weight: 600; }
.pop_area .list_box ul { max-height: 345px; overflow-y: auto; }
.pop_area .list_box li { border-bottom: 1px solid #ddd;}
.pop_area .list_box li a { display: block; padding: 15px 0; color: #000; font-size: 16px; text-decoration: none; }