@charset "utf-8";

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

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

/* 상세 페이지 */
#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:'GmarketSansMedium';font-weight:700}

/* 서브 공통 */
.sub_header .location_box{height:80px;text-align:center;}
.sub_header .location_box p{line-height:80px;font-size:21px;color:#fff;font-family:'GmarketSansMedium';}
.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) {
 .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: 160px;right: 0;bottom: 0;border-top: 0px solid #cecece;background: url("./img/common/bg_location.png") repeat;z-index: 1000}
#popup_location .location_area{padding:20px 0 35px 0;background:#fff}
#popup_location .location_box{position:relative;overflow:hidden}
#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}
#popup_location .location_list{float:left;position:relative;padding:10px 40px 10px 130px;width:380px;border-right:1px solid #e5e5e5}
#popup_location .location_list .btn_location{display:block;float:left;margin:0 20px 15px 0;width:60px;height:30px;line-height:30px;text-align:center;font-family:'GmarketSansMedium';font-size:22px;font-weight:300;color:#555}
#popup_location .location_list .btn_location:hover,
#popup_location .location_list .btn_location.active{color:var(--primary);font-weight:700}
#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 li{margin-bottom:15px}
#popup_location .location_detail .detail_list .btn_detail{display:block;line-height:30px;font-family:'GmarketSansMedium';font-size:22px;font-weight:300;color:#555}
#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:980px) {
#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;z-index: 1000}
#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{float:left;position:relative;padding:10px;width:140px;border-right:1px solid #e5e5e5}
#popup_location .location_list .btn_location{display:block;float:left;margin:0 5px 5px 0;width:48px;height:30px;line-height:30px;text-align:center;font-size:17px;color:#555}
#popup_location .location_list .btn_location:hover,
#popup_location .location_list .btn_location.active{color:var(--primary);font-weight:700}
#popup_location .location_detail{float:left;padding:10px 0 10px 20px;border-left:1px solid #e5e5e5;margin-left:-1px;width: 150px; 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 li{margin-bottom:10px}
#popup_location .location_detail .detail_list .btn_detail{display:block;line-height:30px;font-size:17px;color:#555}
#popup_location .location_detail .detail_list .btn_detail:hover,
#popup_location .location_detail .detail_list .btn_detail.active{color:var(--primary);font-weight:700}
}