@charset "UTF-8";

/* 공통 */
* {-webkit-box-sizing: border-box; box-sizing: border-box;}
body,html{height: 100%; overflow: hidden;}
#wrap {height: 100%;}
#header-sub .header-content .nav {display: none;}
#header-sub .header-content .pharmacy {display:none!important;}
#footer {position: absolute; bottom: 0; left: 0; right: 0; z-index: 100;}

/*! paging */
.paging {position: relative; text-align: center;}
.paging .ctrl {display: inline-block; padding: 0; vertical-align: middle;}
.paging .ctrl a {padding: 3px 5px;}
.paging .ctrl a:hover {background-color: #EEEEEE; cursor: pointer;}
.paging .ctrl img {display: inline-block; margin-top: -2px; vertical-align: middle;}
.paging ol { display: inline-block; margin: 0 7px; font-size: 0; vertical-align: middle;line-height: 0; }
.paging li { display: inline-block; margin-left: 3px; font-size: 15px; vertical-align: top;-webkit-box-sizing: border-box; box-sizing: border-box; }
.paging li:first-child {margin-left: 0;}
.paging li:hover {background-color: #EEEEEE; cursor: pointer;}
.paging li.on strong {display: inline-block; width: 25px; height: 25px; color: #00abcd; line-height: 25px;}
.paging li.on strong a {color: #00abcd;}
.paging li a, .paging p a { display: block; width: 25px; height: 25px; color: #777777;line-height: 25px; }
.paging li a.this { color: #ffffff; }
.paging .btn { position: absolute; top: 0; right: -30px; padding: 0; }

/* 검색박스  */
.search-area .tit-area {display: flex; padding: 10px 0px;}
.search-area .tit-area .tit-num {font-family:"NotoSans-Bold"; margin-right: 5px; font-size: 17px; color: #00abcd;}
.search-area .tit-area .tit {font-family:"NotoSans-Medium"; font-size: 17px; color: #191919;}
.search-area .input-area .city-box {display: flex; margin-bottom: 3px;}
.search-area .input-area .city-box select {flex: 1;}
.search-area .input-area .city-box select:first-child {margin-right: 3px;}
.search-area .input-area input, .search-area .input-area select {width: 100%; height: 40px; padding: 2px 5px; border: none; border-bottom: 1px solid #AAAAAA; font-size: 15px; color: #191919; box-sizing: border-box;}
.search-area .input-area input:focus, .search-area .input-area select:focus {outline: none;}
.search-area .input-area input::placeholder {font-size: 15px; color: #999999;}
.search-area .input-area button {display: flex; align-items: center; padding: 3px 8px; background-color: #00abcd;}
.search-area .input-area button .ico-search {
	content: ""; display: inline-block; width: 20px; height: 20px; background-image: url(../../images/mo/health/ico_search.png);
	background-size: cover; background-position: center; background-repeat: no-repeat;}
.search-area .product-area {width: 100%; height: 250px; margin-bottom: 10px; border: 1px solid #AAAAAA; border-top: none; overflow-x: hidden; overflow-y: auto; box-sizing: border-box;}
.search-area .product-area .empty {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 14px; color: #999999;}
.search-area .product-area ul {width: 100%;}
.search-area .product-area ul li {padding: 10px; border-bottom: 1px solid #EEEEEE; font-size: 15px;}
.search-area .product-area ul li.active {background-color: #00abcd; color: #FFFFFF; }
.search-area .product-area ul li:hover {color: #00abcd; cursor: pointer;}
.search-area .product-area ul li.active:hover {color: #FFFFFF;}
.search-area .btn-area {display: flex; margin-top: 10px; padding: 20px; justify-content: center; align-items: center;}
.search-area .btn-area button {width: 150px; height: 50px;}
.search-area .btn-area button.search {margin-right: 5px; border: 1px solid #00abcd; background-color: #00abcd; color: #FFFFFF;}
.search-area .btn-area button.reset {border: 1px solid #AAAAAA; background-color: #FFFFFF; color: #191919;}

#container .pharmacy-wrap .inner-left .pharmacy-area .page-box {display: flex; height: 40px; justify-content: center; align-items: center; border-top: 1px solid #EEEEEE;}

#container .pharmacy-wrap .inner-center .map-item {width: 100%; height: 100%;}
#container .pharmacy-wrap .inner-center .map-item .infoWindow {position: relative; width: 180px; height: auto; padding: 5px; box-sizing: border-box;}
#container .pharmacy-wrap .inner-center .map-item .infoWindow h4 {margin-bottom: 5px; font-size: 16px; color: #00abcd;}
#container .pharmacy-wrap .inner-center .map-item .infoWindow p.infoAddr {width: 160px; height: auto; font-size: 12px; word-break: break-all; overflow-wrap: break-word; white-space: normal;}
#container .pharmacy-wrap .inner-center .map-item .infoWindow p.infoTelNo {margin-right: 15px; font-size: 14px; text-align: right;}

/* MOBILE */
@media (max-width: 1023px) {
	#footer .footer-content {padding: 1.66667vw 1.33333vw;}
	#footer .inner {padding: 0px 1.33333vw;}
	
	#container {height: 100%; margin-top: 0px;}
	#container .pharmacy-wrap {position: absolute; top: 13vw; bottom: 22vw; display: flex; width: 100%; justify-content: center; flex-direction: row; flex-wrap: wrap; overflow-y: auto;}
	#container .pharmacy-wrap .inner-left {width: 100%; padding: 10px;}
	#container .pharmacy-wrap .inner-left .pharmacy-area {width: 100%;}
	#container .pharmacy-wrap .inner-left .pharmacy-area .back-box {width: 100%; padding: 5px; border-bottom: 1px solid #EEEEEE;}
	#container .pharmacy-wrap .inner-left .pharmacy-area .back-box button.back {display: flex; padding: 5px; align-items: center; font-size: 15px; font-weight: 600; color: #555;}
	#container .pharmacy-wrap .inner-left .pharmacy-area .back-box button.back img {width: 10px; margin-right: 5px; transform: rotate(180deg);}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul {height: 29vw; min-height: 250px; max-height: 397px; overflow-x: hidden; overflow-y: auto;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li {padding: 5px 0px; border-bottom: 1px solid #EEEEEE;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div {display: flex; padding: 3px; align-items: center; font-size: 14px;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div span {display: block; flex: 1; padding-right: 10px; text-align: right; word-wrap: break-word; overflow-wrap: break-word;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div:first-child span:first-of-type {flex: none; width: 60px; padding-left: 10px; padding-right: 0px; text-align: left;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div:first-child span:last-child {font-weight: 600; color: #00abcd;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div:last-child span.empty {display: block; flex: 1; text-align: center; background-color: #FFFFFF; color: #999999;}
	
	#container .pharmacy-wrap .inner-left .pharmacy-area .page-box {margin-top: 15px;}
	
	#container .pharmacy-wrap .inner-center {display: none; flex: 1; min-width: 300px; min-height: 300px; padding: 10px;}
	
	
	.search-area .tit-area {padding: 1vw 0px;}
	.search-area .input-area input, .search-area .input-area select {font-size: 3.5vw;}
	.search-area .input-area input::placeholder {font-size: 3vw;}
}

/* TABLET */
@media screen and (max-width: 1023px) and (min-width: 751px) and (max-width: 1023px) {
	#container .pharmacy-wrap {bottom: 15vw;}
}

/* PC */
@media (min-width: 1024px) {
	#container {height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#container .pharmacy-wrap {position: absolute; top: 92px; bottom: 100px; left: 0px; right: 0px; display: flex; min-height: 0px; padding: 10px;}
	#container .pharmacy-wrap .inner-left {width: 300px; padding: 10px; padding-left: 0px; overflow-y: auto;}
	#container .pharmacy-wrap .inner-left .pharmacy-area {width: 100%;}
	#container .pharmacy-wrap .inner-left .pharmacy-area .back-box {width: 100%; padding: 5px; border-bottom: 1px solid #EEEEEE;}
	#container .pharmacy-wrap .inner-left .pharmacy-area .back-box button.back {display: flex; padding: 5px; align-items: center; font-size: 15px; font-weight: 600; color: #555555;}
	#container .pharmacy-wrap .inner-left .pharmacy-area .back-box button.back img {width: 10px; margin-right: 5px; transform: rotate(180deg);}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul {height: 33vw; max-height: 623px; overflow-x: hidden; overflow-y: auto;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li {padding: 5px 0px; border-bottom: 1px solid #EEEEEE;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div {display: flex; padding: 3px; align-items: center; font-size: 14px;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div span {display: block; flex: 1; padding-right: 10px; text-align: right; word-wrap: break-word; overflow-wrap: break-word;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div:first-child span:first-of-type {flex: none; width: 60px; padding-left: 10px; padding-right: 0px; text-align: left;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div:first-child span:last-child {font-weight: 600; color: #00abcd;}
	#container .pharmacy-wrap .inner-left .pharmacy-area ul li div:last-child span.empty {display: block; flex: 1; text-align: center; background-color: #FFFFFF; color: #999999;}
	
	#container .pharmacy-wrap .inner-center {display: block; flex: 1; border: 1px solid #EEEEEE; overflow-y: auto;}
}