@charset "utf-8";

#btn_location2 i {font-size: 28px; line-height: 34px; color: #fff}

#viewport{width:100%;overflow:hidden}
.contains{margin:0 auto; width:100%; max-width:1500px;}

/* 상세 페이지 */
#content{position:relative;z-index:10}
#content.sub{padding-top:0px}

.sub_header .sort_box{height:80px;background:var(--primary-dark);}
.sub_header .sort_box2{position:fixed;width:100%;height:80px;background:var(--primary-dark);z-index:10;}
.sub_header .sort_menu{padding-top:20px}
.sub_header .sort_menu .btn_sort{display:block;float:left;margin-right:20px;line-height:40px;font-size:24px;color:#fff;font-family:'SCoreDream';font-weight:700}

.sub_header .sort_menu2 {display:flex; justify-content: space-between; gap:15px;}
.sub_header .sort_menu2 .btn_sort{float:none;}

/* 서브 공통 */
.sub_header .location_box{height:80px;text-align:center;}
.sub_header .location_box p{line-height:80px;font-size:21px;color:#fff;font-family:'SCoreDream';}
.sub_header .location_box .btn_location {display: inline-block;margin: -3px 0 0 6px;width: 21px;height: 22px;vertical-align: middle;background: url("./img/icon/location_w.png") no-repeat;*display: inline;zoom: 1}


.operation_guide_cont h5 {overflow:hidden;margin-left:0px;padding:20px 0 15px 0;padding-left:40px;border-bottom:1px solid #ddd;background:url('./img/icon/ico_directions.png') no-repeat 0 0;font-weight:600;font-size:22px;line-height:30px;}
.operation_guide_cont h5.arrow{background-position:0 -210px;}

@media (max-width:980px) {
	#btn_location2 i {font-size: 24px;}
	.contains{width:100%}
	#content.sub{padding-top:0px}
	.sub_header .sort_box{height:50px;background:var(--primary-dark)}
	.sub_header .sort_box2{height:50px;background:var(--primary-dark)}
	.sub_header .sort_menu{padding-top:0px}
	.sub_header .sort_menu .btn_sort{display:block;float:left;margin-left:20px;line-height:50px;font-size:18px;color:#fff;font-weight:700}
	.sub_header .location_box{height:50px;text-align:center;}
	.sub_header .location_box p{line-height:50px;font-size:16px;color:#fff}
	.sub_header .location_box .btn_location {display: inline-block;margin: -3px 0 0 6px;width: 21px;height: 22px;vertical-align: middle;background: url("./img/icon/location_w.png") no-repeat;*display: inline;zoom: 1}
}

@media (max-width:747px) {
	
	.operation_guide_cont h5 {font-size:18px;margin-top:-20px}
	#btn_location2 i {font-size: 18px; line-height: 48px; color: #fff}
}

a[data-tooltip].top:before, a[data-tooltip].top:after {
  transform: translateY(10px);
}
a[data-tooltip].top:hover:after, a[data-tooltip].top:hover:before {
  transform: translateY(0px);
}

a[data-tooltip].right:before, a[data-tooltip].right:after {
  transform: translateX(0px);
}
a[data-tooltip].right:hover:after, a[data-tooltip].right:hover:before {
  transform: translateX(10px);
}

a[data-tooltip].bottom:before, a[data-tooltip].bottom:after {
  transform: translateY(-10px);
}
a[data-tooltip].bottom:hover:after, a[data-tooltip].bottom:hover:before {
  transform: translateY(0px);
}

a[data-tooltip].left:before, a[data-tooltip].left:after {
  transform: translateX(0px);
}
a[data-tooltip].left:hover:after, a[data-tooltip].left:hover:before {
  transform: translateX(-10px);
}

a[data-tooltip] {
  position: relative;
}
a[data-tooltip]:after, a[data-tooltip]:before {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
a[data-tooltip]:before {
  content: attr(data-tooltip);
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
a[data-tooltip]:after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: "";
}
a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {
  visibility: visible;
  opacity: 0.85;
  transform: translateY(0px);
}

a[data-tooltip][data-position=top]:before {
  bottom: 100%;
  left: -130%;
  margin-bottom: 10px;
}

a[data-tooltip][data-position=top]:after {
  border-top-color: #000;
  border-bottom: none;
  bottom: 101%;
  left: calc(50% - 6px);
  margin-bottom: 4px;
}

a[data-tooltip][data-position=left]:before {
  top: -12%;
  right: 100%;
  margin-right: 10px;
}

a[data-tooltip][data-position=left]:after {
  border-left-color: #000;
  border-right: none;
  top: calc(50% - 3px);
  right: 100%;
  margin-top: -6px;
  margin-right: 4px;
}

a[data-tooltip][data-position=right]:before {
  top: -5%;
  left: 100%;
  margin-left: 10px;
}

a[data-tooltip][data-position=right]:after {
  border-right-color: #000;
  border-left: none;
  top: calc(50% - 6px);
  left: calc(100% + 4px);
}

a[data-tooltip][data-position=bottom]:before {
  top: 100%;
  left: -130%;
  margin-top: 10px;
}

a[data-tooltip][data-position=bottom]:after {
  border-bottom-color: #000;
  border-top: none;
  top: 100%;
  left: 5px;
  margin-top: 4px;
}


#popup_location .location_list .btn_location, #popup_location .location_detail .detail_list .btn_detail, .main_top .search_box .search_detail .btn_location,
.ani{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out}

/* 지역검색 팝업 */
#popup_location { display: none;  position: fixed;left: 0;top: 200px;right: 0;bottom: 0;border-top: 0px solid #cecece;background: url("./img/common/bg_location.png") repeat;z-index: 11}
#popup_location.region_region{top: 86px; display: block; bottom: auto; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
body.is_partner #popup_location.region_region{top: 121px;}
#popup_location .location_area{padding:20px 0 35px 0;background:#fff}
#popup_location .location_box{position:relative;overflow:hidden; padding:0 15px;}
#popup_location .location_box .arrow {/*position: absolute;right: 40px;top: 17px;width: 8px;height: 14px;background: url("./img/icon/location_arrow.png") no-repeat;z-index: 10*/ display:none;}
#popup_location .location_list{/* float:left; width:380px; padding:10px 40px 10px 130px; border-right:1px solid #e5e5e5; */position:relative;  
	display:flex; flex-wrap:wrap; gap:15px; justify-content:center;/* gap:15px; justify-content:space-between; */   margin-bottom:15px; border-bottom:1px solid #eee;}
#popup_location .location_list .btn_location{display:block;/* float:left; margin:0 20px 15px 0;width:60px;height:30px;line-height:30px; font-family:'SCoreDream';font-size:24px;font-weight:600;*/
	text-align:center; color:#555;  font-size:18px; padding:8px 15px 20px; position:relative;}
#popup_location .location_list .btn_location:hover, #popup_location .location_list .btn_location.active{color:var(--primary); font-weight:700; }
#popup_location .location_list .btn_location.active:before, #popup_location .location_list .btn_location:hover:before{ display:block; content:""; position:absolute; 
	width:100%; height:2px; bottom:0; left:0; background:var(--primary);}
#popup_location .location_detail{/* float:left; padding:10px 0 10px 40px;border-left:1px solid #e5e5e5;margin-left:-1px;width: 250px; height: 500px; overflow-y: auto;*/}
#popup_location .location_detail .detail_panel{display:none}
#popup_location .location_detail .detail_panel.active{display:block}
#popup_location .location_detail .detail_list{display: flex; flex-wrap: wrap;}
/*  #popup_location .location_detail .detail_list li:first-child{width: 100%; flex: 0 0 100%; */ 
#popup_location .location_detail .detail_list li{width: 10%; min-height:30px;}
#popup_location .location_detail .detail_list .btn_detail{display:block;line-height:1.68em; font-family:'SCoreDream';font-size:16px; font-weight:500; color:#777}
#popup_location .location_detail .detail_list .btn_detail:hover,
#popup_location .location_detail .detail_list .btn_detail.active{color:var(--primary);font-weight:700}

@media (max-width:1024px) {
#popup_location {display: none;position: fixed;left: 0;top: 110px;right: 0;bottom: 0;border-top: 0px solid #cecece;background: url("./img/common/bg_location.png") repeat;}
#popup_location.region_region{top: 71px;}
body.is_partner #popup_location.region_region{top: 111px;}
#popup_location .location_area{padding:10px 0 10px 0;background:#fff}
#popup_location .location_box{position:relative;overflow:hidden}
#popup_location .location_box .arrow {position: absolute;right: 15px;top: 17px;width: 8px;height: 14px;background: url("./img/icon/location_arrow.png") no-repeat;z-index: 10}
#popup_location .location_list{gap:5px;flex-wrap:nowrap; width:calc(100vw - 15px); white-space: nowrap; overflow-x: auto; overflow-y: hidden; 
	min-width: 0; scrollbar-width:none; justify-content:normal;} 
#popup_location .location_list .btn_location{font-size:16px; padding: 8px 10px 15px; }

#popup_location .location_detail .detail_panel{display:none}
#popup_location .location_detail .detail_panel.active{display:block;}
#popup_location .location_detail .detail_list{display: block; white-space: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
/* #popup_location .location_detail .detail_list li:first-child {display: block; width: 100%; margin-bottom: 10px; } */
#popup_location .location_detail .detail_list li { display: inline-block; /* 가로로 나열 */ width: auto; padding: 0 15px; }
#popup_location .location_detail .detail_list .btn_detail{font-size:14px;}
#popup_location .location_detail .detail_list .btn_detail:hover,
#popup_location .location_detail .detail_list .btn_detail.active{color:var(--primary);font-weight:700}
}