@charset "UTF-8";

.content__banner-wrap{
	width:100%;	
	background:url(bg.png) no-repeat center/cover;
}

.content__banner{
	padding:160px 0;
}

.content__banner-tit{
	text-align: center;
	color:var(--color-gray-00);
	user-select: none
}

.content__snb-wrap{
	position: relative;
	width:100%;
	box-shadow: inset 0 -2px 0 -1px var(--color-gray-10);
	z-index: 1
}

.content__snb{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
}

.content__snb-item{
	display: flex;
}

.content__snb-li a{
	display: inline-flex;
	align-items: center;
	padding:0 40px;
	height: 80px;
	box-sizing: border-box;
	color:var(--color-gray-70);
	transition: 0.3s;
	user-select: none
}

.content__snb-li.active a{
	position: relative;
	color:var(--color-gray-90)
}

.content__snb-li a:hover{
	color:var(--color-primary-60)
}


.content__snb-li.active a::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom:2px;
	transform: translateX(-50%);
	width: 100%;
	height: 6px;
	border-radius: 10px;
	background-color:var(--color-primary-70) 
}

/**/
.assoc__content{
	margin:120px auto
}

.assoc01{
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap:40px
}

.assoc01__title{
	margin-bottom: 40px
}

.assoc01__txt-wrap{
}

.assoc01__img{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 50%;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--color-gray-05)
}

.assoc01__img img{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.assoc01__txt-wrap .assoc01__txt{
	margin-bottom: 40px;
	line-height: 1.8
}

.assoc01__name{
	text-align: right
}

/**/
.assoc02{}

.assoc02__title{
	max-width: 700px;
	margin:0 auto 40px;
	text-align: center;
	word-break: keep-all;
}

.assoc02__grid{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:40px;
}

.assoc02__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap:40px;
	padding:80px 40px;
	box-sizing: border-box;
	border-radius: 20px;
	background-color: var(--color-primary-90)
}

.assoc02__item-ico{
	width: 64px;
	height: 64px;
	background-color: var(--color-gray-00)
}

.assoc02__item-title{
	margin-bottom: 12px;
	color: var(--color-gray-00);
	text-align: center;
}

.assoc02__item-txt{
	color: var(--color-primary-20);
	text-align: center;
}

/**/
.assoc03{}

.assoc03__history{
	position: relative;
	display: grid;
	grid-template-areas: 
		". historyA"
		"historyB ."
		". historyC";
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 80px
}

.assoc03__history:before{
	content: '';
	display: block;
	position: absolute;
	top:20px;
	left:50%;
	transform: translate(-50%,0);
	width: 1px;
	height: 100%;
	background:linear-gradient(#eee 70%,#fff)
}

.assoc03__history-year{
	position: relative
}

.assoc03__history-year:before{
	content: '';
	display: block;
	position: absolute;
	top:50%;
	width: 9px;
	height: 9px;
	transform: translateY(-50%);
	border-radius: 10px;
	background-color: var(--color-primary-70);
	z-index: 2
}

.assoc03__history-2025 .assoc03__history-year:after{
	content: '';
	display: block;
	position: absolute;
	top:50%;
	left:-50.5px;
	transform: translateY(-50%);
	width: 21px;
	height: 21px;
	border-radius: 10px;
	background-color: var(--color-primary-10);
	z-index: 1
}

.assoc03__history-2025 .assoc03__history-year:before,.assoc03__history-2023 .assoc03__history-year:before{
	left:-44.5px
}

.assoc03__history-2024 .assoc03__history-year:before{
	right:-44.5px
}

.assoc03__history-subtxt{
	color: var(--color-primary-70);
	word-break: keep-all
}

.assoc03__history-grid{
	display: flex;
	flex-direction: column;
	gap:12px;
	margin-top: 20px
}

.assoc03__history-item{
	display: flex;
	column-gap: 8px
}

.assoc03__history-2024 .assoc03__history-item{
	justify-content: flex-end
}

.assoc03__history-month{
	color:var(--color-gray-80);
	word-break: keep-all
}

.assoc03__history-2025{
	grid-area:	historyA
}

.assoc03__history-2024{
	grid-area:	historyB;
	text-align: right
}

.assoc03__history-2023{
	grid-area:	historyC
}

/**/
.assoc04__address{
	text-align: center
}

.assoc04__address-tit{
	margin-bottom: 4px
}

.assoc04__address-txt{
	margin-bottom: 40px
}

.assoc04__map{
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 20px 4px rgba(0,0,0,0.04)
}

.assoc04__map .map_border{
	display: none
}

.assoc04__map .root_daum_roughmap .wrap_controllers{
	border:none
}


.content__banner-wrap{
	opacity: 0;
	transition:1s ease
}

.content__snb-wrap,
.assoc01__img,
.assoc01__txt-wrap,
.assoc02__title,
.assoc03,
.assoc04{
	opacity: 0;
	transform:translateY(80px);
	transition:1s ease
}

.assoc02__item{
	opacity: 0;
	transform:scale(0,1);
	transition:1s ease
}

.content__snb-mo-tit.mo-only{
	display: none
}

@media all and (max-width:1024px) {
	.content__snb-li a{
		padding:0 20px;
	}
}

@media all and (max-width:768px) {

	.content__snb-mo-tit.mo-only{
		display: flex;
	}

	.content__snb-wrap{
		box-shadow: none
	}

	.content__snb-item{
		flex-direction: column;
		width: 100%;
		align-items: center;
		background-color: var(--color-gray-00);
		border-radius: 4px;
		overflow: hidden;
		box-shadow: inset 0 0 0 1px var(--color-gray-10);
		position: absolute;
		top:72px;
		left: 0;
		z-index: 10;
		display: none
	}

	.content__snb-li{
		width: 100%
	}

	.content__snb-li a{
		justify-content: center;
		width: 100%
	}

	.content__snb-li.active a::after{
		display: none
	}

	.content__snb-li a{
		height: 48px;
		color:var(--color-gray-90)
	}

	.content__snb-li a:hover{
		background-color: var(--color-gray-05)
	}

	.content__snb-mo-tit{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin:4px 0;
		height: 56px;
		box-shadow: inset 0 0 0 1px var(--color-gray-10);
		border-radius: 8px;
		background: url(../../../img/ico_select_close.svg) no-repeat center right 16px;
		cursor: pointer;
		z-index: 10;
		user-select: none
	}

	.content__snb-mo-tit.snb-open{
		background: url(../../../img/ico_select_open.svg) no-repeat center right 16px
	}

	.content__snb-bg{
		width: 100%;
		height: 100vh;
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
	}

	.assoc__content{
		margin:64px auto
	}

	.assoc01{
		display: flex;
		flex-direction: column;
		gap:40px
	}

	.assoc02__grid{
		display: flex;
		flex-direction: column;
		gap:40px
	}

	.assoc03__history{
		position: relative;
		display: grid;
		grid-template-areas: 
			". historyA"
			". historyB"
			". historyC";
		grid-template-columns: 20px 1fr;
		gap: 40px 0
	}

	.assoc03__history-2024{
		text-align: left
	}

	.assoc03__history:before{
		left:0;
		transform: translate(0,0)
	}

	.assoc03__history-2025 .assoc03__history-year:after{
		left:-30.5px
	}

	.assoc03__history-2025 .assoc03__history-year:before,.assoc03__history-2023 .assoc03__history-year:before, .assoc03__history-2024 .assoc03__history-year:before{
		left:-24.5px
	}

	.assoc03__history-2024 .assoc03__history-item{
		justify-content: flex-start
	}
}