:root {
	--color-black: #333;
	--color-orange: #ff9600;
	--color-teal: #00bebc;
	--color-white: #fff;
	--color-red: #f00;
}
.u-responsiveImg {
		width: 100%;
		height: auto;
	}
.p-container {
	padding-right: 4.2667%;
	padding-left: 4.2667%;
}
.p-anchor {
	display: inline-flex;
	overflow: scroll hidden;
	scrollbar-width: none;
	scroll-behavior: smooth;
	width: 100%;
}
.p-anchor_wrapper {
		width: 100%;
		z-index: 10;
		position: sticky;
		top: 0;
		left: 0;
		margin-bottom: 9px;
	}
.p-anchor_container {
		width: 100%;
		background-color: #fff;
		background-color: var(--color-white);
		overflow: hidden;
		padding-top: 9px;
		padding-bottom: 1px;
		border-bottom: 1px solid transparent;
		transition: all 0.3s;
	}
.p-anchor_container::before,
		.p-anchor_container::after {
			content: '';
			display: block;
			width: 30px;
			height: 30px;
			background: rgba(43, 179, 252, 50%) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NjAgOTYwIj48cGF0aCBkPSJtNDMyIDQ4MCAxNTYgMTU2YzcuMyA3LjMgMTEgMTYuNyAxMSAyOHMtMy43IDIwLjctMTEgMjgtMTYuNyAxMS0yOCAxMS0yMC43LTMuNy0yOC0xMUwzNDggNTA4Yy00LTQtNi44LTguMy04LjUtMTNzLTIuNS05LjctMi41LTE1IC44LTEwLjMgMi41LTE1IDQuNS05IDguNS0xM2wxODQtMTg0YzcuMy03LjMgMTYuNy0xMSAyOC0xMXMyMC43IDMuNyAyOCAxMSAxMSAxNi43IDExIDI4LTMuNyAyMC43LTExIDI4eiIgZmlsbD0iI2ZmZmYiLz48L3N2Zz4=') no-repeat left 3px center / 24px;
			position: absolute;
			top: calc(50% - 21.5px);
			z-index: 11;
			pointer-events: none;
			transition: all 0.3s;
		}
.p-anchor_container::before {
			left: 0;
		}
.p-anchor_container::after {
			right: 0;
			transform: rotate(180deg);
		}
.p-anchor_container.is-leftEnd::before {
				opacity: 0;
			}
.p-anchor_container.is-rightEnd::after {
				opacity: 0;
			}
.p-anchor_container.is-fixed {
			border-bottom-color: #f5f5f5;
			box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 15%);
		}
.p-anchor_linkItem {
		color: #333;
		color: var(--color-black);
		text-decoration: none;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 78px;
		min-width: 90px;
		padding-top: 24px;
		padding-right: 6px;
		padding-left: 6px;
		border-bottom: 6px solid transparent;
		position: relative;
		transition: all 0.3s;
		line-height: 1.2;
	}
.is-fixed .p-anchor_linkItem {
			color: var(--color-gray-60);
		}
.p-anchor_linkItem::before {
			content: '';
			display: block;
			width: 1px;
			height: 54px;
			background-color: var(--color-gray-80);
			position: absolute;
			top: calc(50% - 27px);
			left: 0;
		}
.p-anchor_linkItem::after {
			content: '';
			display: block;
			width: 24px;
			height: 24px;
			mask-size: 24px;
			mask-repeat: no-repeat;
			mask-image: url('/waterserver/img/icn_h_ranking.svg');
			background-color: #2bb3fc;
			position: absolute;
			top: 0;
			left: calc(50% - 12px);
		}
.is-fixed .p-anchor_linkItem::after {
				background-color: var(--color-gray-60);
			}
.-campaign .p-anchor_linkItem::after {
				mask-image: url('/waterserver/img/icn_h_campaign.svg');
			}
.-compare .p-anchor_linkItem::after {
				mask-image: url('/waterserver/img/icn_h_compare.svg');
			}
.-question .p-anchor_linkItem::after {
				mask-image: url('/waterserver/img/icn_h_check.svg');
			}
.-choose .p-anchor_linkItem::after {
				mask-image: url('/waterserver/img/icn_h_choose_2.svg');
			}
.-knowledge .p-anchor_linkItem::after {
				mask-image: url('/waterserver/img/icn_h_check.svg');
			}
.p-anchor_linkItem.is-current {
			color: #333;
			color: var(--color-black);
			border-bottom-color: #2bb3fc;
		}
.is-fixed .p-anchor_linkItem.is-current::after {
					background-color: #2bb3fc;
				}
.p-anchor_linkItem:hover,
		.p-anchor_linkItem:visited {
			color: #333;
			color: var(--color-black);
		}
.p-anchor_item {
		flex: 1;
		flex-basis: auto;
		flex-shrink: 0;
	}
.p-anchor_item:first-child .p-anchor_linkItem::before {
				display: none;
			}
.p-adjustAnchor {
	margin-top: -89px;
	padding-top: 89px;
}
.u-text-white {
		color: #fff;
		color: var(--color-white);
	}
.u-text-black {
		color: #ff9600;
		color: var(--color-orange);
	}
.u-text-orange {
		color: #ff9600;
		color: var(--color-orange);
	}
.u-text-teal {
		color: #00bebc;
		color: var(--color-teal);
	}
.u-text-red {
		color: #f00;
		color: var(--color-red);
	}
@media screen and (min-width: 767px) {
.u-only-mobile {
				display: none
		}
.p-anchor {
		display: flex;
		max-width: 91.4667%;
		margin-left: auto;
		margin-right: auto
}
.p-anchor_wrapper {
			margin-bottom: 18px
	}
.p-anchor_container::before,
		.p-anchor_container::after {
				display: none
		}
.p-anchor_linkItem {
			padding-top: 30px;
			height: 66px
	}
.p-anchor_linkItem::before {
				height: 40px;
				top: calc(50% - 20px)
		}
.p-anchor_linkItem:hover {
				opacity: 0.7
		}
.p-anchor_item {
			width: 14.28571%;
			flex-basis: unset;
			flex-shrink: unset
	}
.p-adjustAnchor {
		margin-top: -77px;
		padding-top: 77px
}
}
@media screen and (min-width: 991px) {
.u-only-tablet {
				display: none
		}
.u-lower-tablet {
				display: none
		}
.p-container {
		max-width: 992px;
		padding-right: 0;
		padding-left: 0;
		margin-right: auto;
		margin-left: auto
}
.p-anchor {
		max-width: 992px
}
.p-anchor_container {
			padding-top: 3px;
			padding-bottom: 2px
	}
.p-anchor_linkItem::after {
				width: 30px;
				height: 30px;
				mask-size: 30px;
				left: calc(50% - 15px)
		}
.p-adjustAnchor {
		margin-top: -72px;
		padding-top: 72px
}
}
@media screen and (max-width: 990px) {
.u-only-desktop {
				display: none
		}
}
@media screen and (max-width: 766px) {
.u-only-tablet {
				display: none
		}
.u-upper-tablet {
				display: none
		}
}