/* search-bar */
.search-block {
	font-size: 0.875rem;
}

.search-block i.fa-magnifying-glass {
	color: #f86259;
}

.search-block .input-field {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: block;
	float: right;
	padding: 0 2em;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	background: transparent;
	color: #222;
	font-weight: bold;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.search-block .input-label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #f86259;
	border-radius: 8px;
	-webkit-transform: scale3d(0.97, 0.85, 1);
	transform: scale3d(0.97, 0.85, 1);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.search-block .input-field:focus {
	outline: none;
}

.search-block .input-label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	margin: 0;
	width: 100%;
	color: #b3b3b3;
	cursor: text;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.search-block .input-label-content {
	position: relative;
	display: block;
	padding: 1.5em 0.5em;
	width: 100%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.search-block .input-field:focus + .input-label::before,
.search-block .input-filled .input-label-akira::before {
	-webkit-transform: scale3d(0.99, 0.95, 1);
	transform: scale3d(0.99, 0.95, 1);
}

.search-block .input-field:focus + .input-label,
.search-block .input-filled .input-label {
	cursor: default;
	pointer-events: none;
}

.search-block .input-field:focus + .input-label .input-label-content,
.search-block .input-filled .input-label-content {
	-webkit-transform: translate3d(0, -2.75em, 0);
	transform: translate3d(0, -2.75em, 0);
}

.search-block .input-field:focus + .input-label .input-label-content,
.search-block .input-filled .input-label-content,
.search-block .input-field:focus + .input-label .input-label-content i.fa-magnifying-glass,
.search-block .input-filled .input-label-content i.fa-magnifying-glass {
	color: #f86259;
}

.search-block .btn-search {
	position: absolute;
	right: 1.5em;
	top: calc(50% - 1.25em);
	z-index: 99;
}

.search-block .btn-search > button, .search-block .btn-search > .btn-filter {
	background-color: #e6e6e6;
	font-size: 1em;
	line-height: 1em;
	color: #222;
	font-weight: bold;
	border: none;
	padding: 0.75em;
	margin-left: 0.3em;
	vertical-align: middle;
	border-radius: 50px;
}

.search-block .btn-search .btn-location {
	color: #f86259;
	padding: 0;
	padding-top: 0.15em;
	font-size: 1.5em;
}

.search-block .btn-search .btn-filter {
	background-color: #e6e6e6;
	border-radius: 100px;
}

.search-block .btn-search .btn-filter:hover,
.search-block .btn-search .btn-filter:active {
	color: #fff;
	background-color: #545b62;
	border-color: #4e555b;
}
.search-block .btn-search.btn-search-position {
    left: calc( 100% - 100px);
}
.search-block .input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-top: 2em;
	width: 100%;
	vertical-align: middle;
}

.search-block.map-btn {
	position: relative;
	min-height: 150px;
	background-image: url("../../img/paybonus/index_searchMap_bg.png");
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	margin: 0 1.125rem;
}

main .search-block.map-btn .btn-search {
	top: inherit;
	bottom: 20%;
	left: 5%;
}

.btn-filter .btn-views-active { color: #f86259; }

@media only screen and (max-width: 767px) {
	.search-block.map-btn { margin: 0 0.875rem; }
	.search-block .input { margin-bottom: 0; }
}

.user-location {
	border-radius: 100px;
	margin: 0 1.5rem;
	margin-top: -0.25rem;
	width: 124%;
}

.user-location h5 {
	font-size: 0.875rem;
	text-indent: -0.75rem;
	color: #311630;
	margin: 0;
	margin-left: 1.5rem;
	line-height: 1.5rem;
}


/*篩選欄位(B)*/
.fliter-block {
    border: 1px solid #f86259;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background-color: #fff;
    margin-left: calc(0.5rem + 1.25%);
    /* margin-right: calc(0.5rem + 1.25%); */
    margin-right: 1.25rem;
    /* margin: 0 2rem 2rem 2rem; */
    /* padding-bottom: 10px; */
}

@media only screen and (max-width: 767px) {
	.fliter-block { margin: 0 1rem; }
}

#collapse-fliter .course-filter {
	width: 100%;
	font-size: 0.875rem;	/* 整個搜尋欄位的字體大小 */
	padding: 1rem 1.75rem;
/*	margin-bottom: 20px;*/
}

#collapse-fliter .course-filter > .fliter-items {
	padding: 0.25em 0;
}

#collapse-fliter .course-filter > .fliter-items .btn-more {
	font-size: 1em;
	margin: 0.1em;
	padding: 0.25em 0.25em;
	padding-top: 0.35em;
	line-height: 1.5em;
	float: right;
}

#collapse-fliter .course-filter > .fliter-items label,
#collapse-fliter .course-filter > .tags > label, .filter-label {
	float: left;
	font-size: inherit;
	font-weight: bold;
	margin: 0;
	line-height: 2.5em;
}

#collapse-fliter .course-filter > .fliter-items div.more > ul {
	overflow: hidden;
	margin-bottom: 0.5em;
	width: 100%;
}

#collapse-fliter .course-filter > .fliter-items div.more_off > ul { height: 2.75em; }
#collapse-fliter .course-filter > .fliter-items div.more_on > ul { height: auto; }

#collapse-fliter .course-filter > .fliter-items ul > li {
	float: left;
	list-style: none;
	line-height: 1em;
	padding: 0.5em 0.75em;
	margin: 0.25em;
	cursor: pointer;
	background-color: #e6e6e6;
	border-radius: 5px;
}
#collapse-fliter .course-filter > .fliter-items ul > li.selected-item {
	background-color: #f86259;
    color: #fff;
}


#collapse-fliter hr { border-color: #e6e6e6; }

#collapse-fliter .course-filter > .tags > ul > li {
	font-size: inherit;
	list-style: none;
	line-height: 1em;
	float: left;
	padding: 0.5em 0.75em;
	margin: 0.25em;
	cursor: pointer;
	background: #f86259;
	color: #FFF;
	border-radius: 5px;
}

#discount-query .collapse:not(.show) {
	display: block;
/*    height: 2.5em;*/
    overflow: hidden;
}

#discount-query .collapsing {
	transition: none !important;
}

@media only screen and (min-width: 768px) {
	#collapse-fliter .course-filter > .fliter-items div.more > ul { width: auto; }
}



/*篩選欄位(E)*/

/* checkbox切換 */
.chkbx {
    position: relative;
    cursor: pointer;
    width: 15em;
    font-size: 1rem;
    margin: auto;
    margin-top: 1em;
    /* margin-bottom: 0.5em;*/
}
.chkbx .x {
	position: absolute;
	z-index: 1;
	display: block;
	width: 100%;
	height: calc(3em + 4px * 2);
	background-color: #705a70;
	border: 4px solid #705a70;
	border-radius: 8px;
	transition: 0.25s;
}
.chkbx .x:before {
	content: "";
	position: absolute;
	width: 50%;
	height: 100%;
/*	height: 3em;*/
	box-sizing: border-box;
	background: #311630;
	/* border: 2px solid #311630; */
	border-radius: 6px;
	transition: 0.5s;
}

.chkbx > a.btn-check-l.btn-checked ~ .x:before {
	transform: translatex(0%);
}
.chkbx > a.btn-check-r.btn-checked ~ .x:before {
	transform: translatex(100%);
}
.chkbx > a.btn-check-l:hover ~ .x:before,
.chkbx > a.btn-check-l:focus ~ .x:before {
	transform: translatex(0%) !important;
}
.chkbx > a.btn-check-r:hover ~ .x:before,
.chkbx > a.btn-check-r:focus ~ .x:before {
	transform: translatex(100%) !important;
}

.chkbx > a {
	color: #FFF;
	z-index: 2;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
	margin: 0;
	/* padding: 1.25em 0.5em; */
	padding: 1em 0.5em;
}

@media only screen and (min-width: 768px) {
	.chkbx {
		margin-top: 2.5rem;
		margin-right: 1.25rem;
	}
}

@media only screen and (min-width: 992px) {
	.chkbx {
		width: 15rem;
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 767px) {
	.chkbx{
		width: 15em;
	    margin: auto;
	    margin-top: 1em;
	    margin-bottom: 0;
	}
	.chkbx > a { padding: 0.5em; }
	.chkbx .x { height: 2.5em; }

}


/* 快速篩選項目 */
.filter-group { font-size: 0.75rem; }

/* 列表大icon - big-icon */
.filter-group.bg-icon ul li button {
	background-color: #f86259;
	color: #fff;
	border: 2px solid #f86259;
	font-size: 1em;
	border-radius: 2.25em;
	text-align: center;
	padding: 0.5em;
	margin: 0.25em;
	width: 6em;
	height: 6em;
}
.filter-group.bg-icon ul li button:hover, .filter-group.bg-icon ul li button.active {
	background-color: #fff;
	color: #f86259;
	border: 2px solid;
}

.filter-group.bg-icon ul li button i {
	font-size: 2em;
	padding: 0;
}
.filter-group.bg-icon ul li button p {
	padding-top: 0.25em;
}

.filter-group.bg-icon button svg {
	width: 2.5em;
	height: 2.5em;
}

.filter-group.bg-icon button .paybonus-icon { fill: #fff; }
.filter-group.bg-icon button:hover .paybonus-icon { fill: #f86259; }


@media only screen and (min-width: 768px) and (max-width: 991px) {
	.filter-group { font-size: 0.65rem; }
	.filter-group.bg-icon ul li button { width: 6.25em; height: 6.25em; }
}
@media only screen and (min-width: 992px) {
	.filter-group.bg-icon ul li button { width: 5.5em; height: 5.5em; }
}
@media only screen and (min-width: 1200px) {
	.filter-group { font-size: 0.875rem; }
}


/* 小icon - sm-icon */
.filter-group.sm-icon { font-size: 0.875rem; }

.filter-group.sm-icon ul li button {
	background-color: #FFF;
	color: #311630;
	/* border: 1px solid #311630; */
	border: 1px solid #e6e6e6;
	font-size: 1em;
	border-radius: 100px;
	text-align: center;
	padding: 0.5em 1em;
	margin: 0.15em;
	line-height: 1em;
}
.filter-group.sm-icon ul li button:hover, .filter-group.sm-icon ul li button:active,
.filter-group.sm-icon ul li button.active {
	background-color: #311630;
	color: #FFF;
	border: 1px solid #311630;
}


/*輪播小BN(B)*/
.MultiCarousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0 4rem;
}
.MultiCarousel .MultiCarousel-inner {
	transition: 1s ease all;
}
.MultiCarousel .MultiCarousel-inner .item {
	float: left;
	padding: 0.5rem;
}
.MultiCarousel .MultiCarousel-inner .item a:hover {
	opacity: 0.75;
}

.MultiCarousel.act-bn .MultiCarousel-inner .item a img {
	border-radius: 1rem;
	border: 1px solid #e6e6e6;
}
.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
	position: absolute;
	font-size: 1rem;
	border-radius: 0.5rem;
	top: calc(50% - 1.75rem);
	padding: 1rem 0.875rem;
	background-color: #fff;
	color: #222;
	border: 1px solid;
	line-height: 1rem;
}
.MultiCarousel .leftLst {
	left: 1rem;
}
.MultiCarousel .rightLst {
	right: 1rem;
}

.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
	display: none;
}
/*輪播小BN(E)*/

/*排序按鈕(B)*/
.order-select {
	font-size: 0.875rem;
	text-indent: -5.5rem;
	margin-left: 6rem;
	color: #666;
}

.order-select button {
	font-size: 1em;
	color: #666;
	padding: 0 0.5em;
	margin: 0;
	vertical-align: baseline;
}
.order-select button.active, .order-select button.asc, .order-select button:hover, .order-select button:focus, .order-select button:focus-visible {
	color: #f86259;
	text-decoration: none;
}
.order-select button:focus {
	box-shadow: none;
}
/*排序按鈕(E)*/

.result-list h3 {
	font-size: 2.5rem;
	font-weight: bold;
	letter-spacing: 0.05rem;
	color: #311630;
	margin: 0.5rem;
	margin-bottom: 1rem;
	text-align: center;
}

/*商家資訊框(B)*/
.shop-info-box {
	font-size: 0.875rem;	/* 整個資訊欄的字體大小 */
	border: 1px solid;
	border-radius: 0.5rem;
	margin: 0.5rem;
	cursor: pointer;
	width: calc(100% - 0.875rem - 2px);
}

.shop-info-box .card-img-top {
	min-height: 10em;
	padding: 0.5em 0.75em;
	border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
}

.tag {
	position: relative;
	display: inline-block;
	background-color: #ccc;
	color: #222;
	font-size: 1em;
	border-radius: 100px;
	padding: 0.5em 0.75em;
	line-height: 1em;
	text-align: center;
}
.tag-km{
	right: 4px;
	bottom: 4px;
}

#discount_query .shop-info-box .card-img-top .shop-badge-block {
	left: 0;
	bottom: 4px;
}

#discount_query .shop-info-box .card-img-top .shop-badge-block .shop-ad-badge {
	display: block;
	border-radius: 0 100px 100px 0;
	padding-left: 0.5em;
	text-align: left;
}

.line-clamp-1{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.line-clamp-2{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.line-icon{
	height: fit-content;
}
.distance {
	font-size: 12px;
	max-height: 1.666667em;
	min-width: 4.75em;
	padding: 0.425em;
	line-height: 1em;
	margin-left: 0.5em;
}

.distance span {
	display: inline-block;
	width: 2.25em;
	overflow: hidden;
	vertical-align: bottom;
	white-space: nowrap;
}

.shop-type-list {
	position: relative;
	float: left;
	/* width: 6em; */
}

.shop-type {
	background-color: #311630;
	color: #fff;
	font-size: 0.875em;
	margin: 0.1em;
	box-shadow: rgb(0 0 0 / 50%) 0px 0px 2px;
}

.shop-type i { padding-left: 0; }

.shop-ad-badge {
	background-color: #FAAE3F;
	font-size: 11px;
	color: #FFF;
}

.card-img-top button.btn-favorites {
    position: absolute;
    color: #fff;
    font-size: 1.5em;
    float: right;
    padding: 0;
    z-index: 99;
    width: 60px;
    height: 50px;
    top: 0;
    right: 0;
}
.card-img-top button.btn-favorites:focus {
	text-decoration: none;
	box-shadow: none;
}

.card-img-top button.btn-favorites i {
	text-shadow: 0 0 3px #000;
}

.shop-info-box .shop-data {
	background-color: #fff;
	padding: 1em;
	padding-bottom: 0.75em;
}

.shop-data h2.shop-name {
	font-size: 1.325em;
	font-weight: bold;
	margin-bottom: 0;
}

.shop-data h2.shop-name, .shop-data h2.shop-name > a, .shop-data h2.shop-name > a:hover {
	color: #f86259;
	width:  12em;
}

.shop-data > p {
	font-size: 0.875em;
	margin-top: 5px;
	line-height: 1.25em;
}

.shop-data > a.button {
	font-size: 1em;
	line-height: 1em;
}

/* .shop-data .shop-score { padding: 0; } */

.shop-info-box .shop-offer {
	color: #fff;
	padding: 1em;
}

.shop-info-box .shop-offer > * { margin-bottom: 0.5em; }
.shop-info-box .shop-offer > *:last-child { margin-bottom: 0; }

.shop-info-box .shop-offer p {
	font-size: 1em;
	line-height: 1.25em;
}

.shop-info-box .shop-offer ul {
	margin-top: 5px;
	margin-bottom: 0.5em;
}

.shop-info-box .shop-offer ul:last-child {
	margin-bottom: 0;
}

.shop-info-box .shop-offer ul > li {
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.25em;
	text-indent: -0.75em;
	margin-left: 1.5em;
	list-style: none;
}

.shop-info-box .shop-offer button.btn-tooltip {
	text-decoration: underline;
    vertical-align: baseline;
}
.shop-info-box .shop-offer button.btn-tooltip:hover,
.shop-info-box .shop-offer button.btn-tooltip:active,
.shop-info-box .shop-offer button.btn-tooltip.active
.shop-info-box .shop-offer button.btn-tooltip:focus,
.shop-info-box .shop-offer button.btn-tooltip.focus {
	text-decoration: none;
	color: inherit !important;
	background-color: inherit;
	border-color: inherit;
}

.tag.mapshow { display: none; }
.tag.listshow { display: inline-block; }

/* 非營業時段 */
.shop-info-box.shop-close,
.shop-info-box.shop-close.group {
 border-color: #b3b3b3;
 background-color: #b3b3b3;
}

.shop-info-box.shop-close .shop-type,
.shop-info-box.shop-close.group .shop-type {
 background-color: #b3b3b3;
}

/* 營業中 */
.shop-info-box.shop-open {
 border-color: #311630;
 background-color: #311630;
}

.shop-info-box.shop-open .shop-type {
 background-color: #311630;
}

/* 營業中+VIP */
.shop-info-box.shop-open.vip {
 border-color: #311630;
 background-color: #311630;
}

.shop-info-box.shop-open.vip .shop-type {
 background-color: #311630;
}

/* 營業中+團體優惠 */
.shop-info-box.shop-open.group {
 border-color: #f86259;
 background-color: #f86259;
}

.shop-info-box.shop-open.group .shop-type {
 background-color: #f86259;
}

/* 營業中+VIP+團體優惠 */
.shop-info-box.shop-open.vip.group {
 border-color: #f86259;
 background-color: #f86259;
}

.shop-info-box.shop-open.vip.group .shop-type {
 background-color: #f86259;
}

/* 營業中+現正時段折扣 */
.shop-info-box.shop-open.offer-now,
.shop-info-box.shop-open.offer-now.vip,
.shop-info-box.shop-open.offer-now.group,
.shop-info-box.shop-open.offer-now.vip.group {
 border-color: #7ac943;
 background-color: #7ac943;
}

.shop-info-box.shop-open.offer-now .shop-type,
.shop-info-box.shop-open.offer-now.vip .shop-type,
.shop-info-box.shop-open.offer-now.group .shop-type,
.shop-info-box.shop-open.offer-now.vip.group .shop-type {
 background-color: #7ac943;
}

/* 營業中+稍晚有時段折扣 */
.shop-info-box.shop-open.offer-later,
.shop-info-box.shop-open.offer-later.vip,
.shop-info-box.shop-open.offer-later.group,
.shop-info-box.shop-open.offer-later.vip.group {
 border-color: #faae3f;
 background-color: #faae3f;
}

.shop-info-box.shop-open.offer-later .shop-type,
.shop-info-box.shop-open.offer-later.vip .shop-type,
.shop-info-box.shop-open.offer-later.group .shop-type,
.shop-info-box.shop-open.offer-later.vip.group .shop-type {
 background-color: #faae3f;
}

@media only screen and (min-width: 576px) {
	.shop-info-box { width: calc(50% - 0.875rem - 2px); }
	.search-block .btn-search.btn-search-position { right: 7em; left: auto; }
}
@media only screen and (min-width: 768px) {
	.shop-info-box { width: calc(33.333333333% - 0.875rem - 2px); }
}
@media only screen and (min-width: 992px) {
	.shop-info-box { width: calc(25% - 0.875rem - 2px); }
}
@media only screen and (min-width: 1200px) {
	.shop-info-box { width: calc(20% - 0.875rem - 2px); }
}
@media only screen and (min-width: 1500px) {
	.shop-info-box { width: calc(16.6666666667% - 0.875rem - 2px); }
}




/*商家資訊框(E)*/


/* 分頁btn */
#discount-query .pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
}
#discount-query .pagination > li {
	display: inline;
}
#discount-query .pagination > li > a,
#discount-query .pagination > li > span {
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #666;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
}
#discount-query .pagination > li:first-child > a,
#discount-query .pagination > li:first-child > span {
	margin-left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
#discount-query .pagination > li:last-child > a,
#discount-query .pagination > li:last-child > span {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
#discount-query .pagination > li > a:hover,
#discount-query .pagination > li > span:hover,
#discount-query .pagination > li > a:focus,
#discount-query .pagination > li > span:focus {
	color: #666;
	background-color: #e6e6e6;
	border-color: #ddd;
}
#discount-query .pagination > .active > a,
#discount-query .pagination > .active > span,
#discount-query .pagination > .active > a:hover,
#discount-query .pagination > .active > span:hover,
#discount-query .pagination > .active > a:focus,
#discount-query .pagination > .active > span:focus {
	z-index: 2;
	color: #fff;
	cursor: default;
	background-color: #CCC;
	border-color: #CCC;
}
#discount-query .pagination > .disabled > span,
#discount-query .pagination > .disabled > span:hover,
#discount-query .pagination > .disabled > span:focus,
#discount-query .pagination > .disabled > a,
#discount-query .pagination > .disabled > a:hover,
#discount-query .pagination > .disabled > a:focus {
	color: #777;
	cursor: not-allowed;
	background-color: #fff;
	border-color: #ddd;
}