header {
	background: #252a2f;
}
.main {
	overflow-x: hidden;
}
#networkContent{
	width: 1140px;
	margin: 0px auto;
}
.banner-top {
	position: relative;
	height: 800px;

	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	animation: ani-banner-top 3s ease;
}
.banner-top__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;

	color: #fff;
	text-align: center;
}
@keyframes ani-banner-top {
	0% {
		background-size: 150% 150%;
	}
	100% {
		background-size: 100% 100%;
	}
}
.banner-top__content h1 {
	padding-bottom: 12px;
	animation: banner-txt 2s ease;

	font-size: 36px;
	font-weight: 500;
	line-height: 42px;
	letter-spacing: 0px;
}
.banner-top__content p {
	animation: banner-txt 2s ease;

	font-size: 24px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0px;
}
@keyframes banner-txt {
	0% {
		opacity: 0;
		transform: translateY(40%);
	}
	50% {
		opacity: 0;
		transform: translateY(40%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.inner-sub-nav {
	grid-column: 1/4;
	-ms-grid-column: 1/4;
	height: 70px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.13);
}
.inner-sub-nav ul {
	height: 100%;
	display: flex;
	display: -ms-flexbox;

	text-align: center;
}
.inner-sub-nav__item {
	width: 50%;
	padding: 1px;

	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0px;
}
.inner-sub-nav__item a {
	position: relative;
	display: inline-block;
	height: 100%;
	width: 100%;
	padding-top: 22px;

	color: #1e1e1e;
}
.inner-sub-nav__item a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -1px;
	transform: translateY(-50%);
	width: 1px;
	height: 80%;
	background: #626262;
}
.inner-sub-nav__item:nth-last-child(1) a::after {
	content: none;
}
.inner-sub-nav__item--active {
	background: #014783;
}
.inner-sub-nav__item--active a {
	color: #fff;
	font-weight: 500;
}

.inner-sub-nav__item--active a::after {
	right: -2px;
}

/* network contents S */
.mb {
	background-image: url(/images/network/mb.jpg);
}

.contents {
	grid-column: 2/3;
	-ms-grid-column: 2/3;
	padding-top: 100px;
	margin-bottom: 120px;
	/* margin-bottom: 150px; */
}
.top-box {
	position: relative;
	height: 120px;
	width: 100%;
}
.top-box::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 100%;
	background: #084a8a;
}
.content__title {
	margin-bottom: 60px;

	font-size: 48px;
	font-weight: 500;
	line-height: 56px;
	letter-spacing: 0px;
	text-align: center;
	color: var(--primary);
}

.content__txt {
	width: 100%;

	display: flex;
}
.wrap-network-list {
	width: 50%;
	padding-right: 20px;
	margin-bottom: 130px;
}
.filter {
	width: 100%;
	background: var(--primary);
	padding: 0 20px;

	color: var(--pri-white);
}
.filter input {
	display: none;
}
.filter label {
	display: block;
	cursor: pointer;
}
.filter-title {
	position: relative;
	height: auto;
	/* border-bottom: 1px solid var(--pri-white); */
	padding: 10px 0;
}
.filter-title::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 24px;
	height: 10px;
	transform: translateY(-50%) rotate(180deg);
	transition: 0.5s;
	background-image: url(/images/network/icon_arrow.svg);
	/* transform: translateY(-50%); */
}
#filterTitle:checked + label .filter-title::after {
	transform: translateY(-50%) rotate(0);
}
.filter-items {
	/* height: 224px; */
	height: 0px;
	transition: 0.5s;
}
.filter__item {
	height: auto;
	border-bottom: 1px solid var(--pri-white);
}
.filter__item:nth-child(1) {
	border-top: 1px solid var(--pri-white);
}
.filter__item:nth-last-child(1) {
	border: none;
}
.filter__item button {
	display: block;
	width: 100%;
	padding: 10px 0;
	text-align: start;
}

.withs {
	width: 100%;
}
.wrap-withs {
	width: 100%;
}
.withs-title {
	height: 60px;
	background: #F2F6F9;
	padding-top: 15px;
	padding-left: 17px;

	font-size: var(--font-size-body1);
	font-weight: 500;
	line-height: var(--font-lh-body1);
	letter-spacing: var(--font-ls-body1);
	color: var(--primary);
}
.withs-items__title {
	display: inline-block;
	position: relative;
	width: auto;
	background: var(--primary);
	padding: 0 15px;
	border-radius: 5px;
	z-index: 1;

	color: var(--pri-white);
	font-size: var(--font-size-body2);
	font-weight: 700;
	line-height: 30px;
	letter-spacing: var(--font-ls-body2);
}
.withs-item {
	position: relative;
	top: -13px;
	padding: 35px 0 35px 30px;
	border-top: 1px solid var(--primary);
	cursor: pointer;
}
.withs-item::after {
	content: '';
	position: absolute;
	top: 36px;
	right: 30px;
	width: 15px;
	height: 15px;
	background-image: url(/images/network/right_arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
}
.withs-item--active {
	background: #dcdee7;
}
.withs-item__title {
	font-size: var(--font-size-body2);
	font-weight: 700;
	line-height: var(--font-lh-body2);
	letter-spacing: var(--font-ls-body2);
	color: var(--primary);
}
.withs-item__txt {
	margin-top: 17px;

	font-size: var(--font-size-body2);
	font-weight: 500;
	line-height: var(--font-lh-body2);
	letter-spacing: var(--font-ls-body2);
}

/* network map S */

.wrap-network-map {
	position: relative;
	width: 50%;
	height: 100%;
}

.network-map {
	position: relative;
	top: 0px;
	width: 100%;
	height: 668px;
	background: #DCDEE7;
}
.network-map>div{
	height: 100%;
}
.network-map__img img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}
.map-point {
	position: absolute;
	width: 8px;
	height: 8px;
	background: #cee7ff;
	border: 1px solid var(--pri-white);
	border-radius: 100%;
	/* overflow: hidden; */

	font-size: 0;
	color: #cee7ff;
}
.twinkle-01 {
	animation: ani-twinkle 1s linear infinite;
	animation-delay: 0s;
}
.twinkle-02 {
	animation: ani-twinkle 1s linear infinite;
	animation-delay: 0.2s;
}
.twinkle-03 {
	animation: ani-twinkle 1s linear infinite;
	animation-delay: 0.4s;
}
.twinkle-04 {
	animation: ani-twinkle 1s linear infinite;
	animation-delay: 0.5s;
}
.twinkle-05 {
	animation: ani-twinkle 1s linear infinite;
	animation-delay: 0.6s;
}
@keyframes ani-twinkle {
	0% {
		opacity: 1;
	}
	30% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.point-01 {
	bottom: 360px;
	left: 250px;
}
.point-02 {
	bottom: 357px;
	left: 257px;
}
.point-03 {
	bottom: 348px;
	left: 238px;
}
.point-04 {
	bottom: 340px;
	left: 235px;
}
.point-05 {
	bottom: 340px;
	left: 251px;
}
.point-06 {
	bottom: 320px;
	left: 266px;
}
.point-07 {
	bottom: 312px;
	left: 272px;
}
.point-08 {
	bottom: 290px;
	left: 280px;
}
.point-09 {
	bottom: 230px;
	left: 330px;
}
.point-10 {
	bottom: 220px;
	left: 398px;
}
.point-11 {
	bottom: 195px;
	left: 381px;
}
.point-12 {
	bottom: 185px;
	left: 368px;
}
.point-13 {
	bottom: 185px;
	left: 386px;
}
.point-14 {
	bottom: 180px;
	left: 356px;
}
.point-15 {
	bottom: 175px;
	left: 367px;
}
.point-16 {
	bottom: 168px;
	left: 357px;
}
.point-17 {
	bottom: 162px;
	left: 290px;
}

.point-active::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300%;
	height: 300%;
	border-radius: 100%;
	background: radial-gradient(
		rgba(206, 231, 255, 0.2),
		rgba(206, 231, 255, 8)
	);
	opacity: 0;
	pointer-events: none;

	animation: point-act 1.17s linear infinite;
}

.point-active::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300%;
	height: 300%;
	border-radius: 100%;
	background: radial-gradient(
		rgba(206, 231, 255, 0),
		rgba(206, 231, 255, 0.3)
	);
	opacity: 0;
	pointer-events: none;

	animation: point-act 1.17s linear infinite;
	animation-delay: 0.3s;
}
@keyframes point-act {
	0% {
		opacity: 0;
		width: 300%;
		height: 300%;
	}
	70% {
		opacity: 1;
	}
	90% {
		opacity: 0;
		width: 1500%;
		height: 1500%;
	}
}

.display-none {
	display: none !important;
}
/* network map E */


.transition-10s{
	transition: none;
}
.fadein_up{
	transition: transform 1s, opacity 1s;
}