.mteam-wrp .info .img{
	width: 100%;
	height: auto;
	display: inline-block;
    vertical-align: top;
}
.mteam-wrp [onclick]{
	cursor: pointer;
}
.mteam-wrp .ct{
	min-width: 100%;
	width: 0;
}
.mteam-wrp .ct .name{
	text-align: center;
}
.mteam-wrp .detailct{
	padding: 40px;
}
.mteam-wrp .lv1st .detailct{
	display: none;
}
.mteam-wrp .ct .name{
	margin-top: 20px;
	margin-bottom: 10px;
}
.mteam-wrp .ct .name,
.mteam-wrp .detailct .name{
	color: #009ADE;
	text-transform: uppercase;
}
.mteam-wrp .detailct .name{
	margin-bottom: 10px;
}
.mteam-wrp .ct .name h4 span,
.mteam-wrp .detailct .name h4 span{
	font-size: 125%;
}
.mteam-wrp .ct .title{
	text-align: center;
	margin-bottom: 20px;
}
.mteam-wrp .detailct .title{
	margin-bottom: 20px;
}
.mteam-wrp .ct .title,
.mteam-wrp .detailct .title{
	color: #002E6D;
	text-transform: uppercase;
}
.mteam-wrp .more-info{
	margin-top: 20px;
}
.mteam-wrp .detail .close{
	color: #009ADE;
	font-size: 30px;
	position: absolute;
    right: 30px;
    top: 20px;
    line-height: 0;
}
.mteam-wrp .open{
	font-size: 30px;
	position: absolute;
    right: 10px;
    bottom: 20px;
    line-height: 0;
	color: #fff;
}
.mteam.active .open{
	display: none;
}
.mteam-wrp .lv1st .mteam{
	display: flex;
	flex-direction: row;
}
.mteam-wrp .lv1st .mteam .info{
	max-width: 300px;
	width: 100%;
	margin:0 auto;
	flex-basis: auto;
	flex-shrink: 0;
	flex-grow: 0;
	transition: 0.3s;
}
.mteam-wrp .lv1st .mteam.active .info{
	background-color: #EAF3FA;
}
.mteam-wrp .lv1st .mteam .detail{
	flex-basis: auto;
	flex-shrink: 1;
	flex-grow: 1;
	background-color: #EAF3FA;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width 0.5s, opacity 0s;
}
.mteam-wrp .lv1st .mteam.active .detail{
	max-width: 100vw;
	opacity: 1;
	transition: max-width 0.5s, opacity 0.3s linear 0.5s;
}
.mteam-wrp .mteam-cols{
	display: flex;
	flex-direction: row;
	gap: 0 80px;
    align-items: flex-start;
    justify-content: center;
	flex-wrap: wrap;
}
.mteam-wrp .mteam{
	flex-shrink: 0;
	flex-grow: 0;
	display: flex;
	order: 1;
	justify-content: center;
}
.mteam-wrp .lv2nd .mteam{
	flex-basis: 23.33%;
}
.mteam-wrp .lv3rd .mteam{
	flex-basis: 17.5%;
}
.mteam-wrp .mteam-row{
	flex-basis: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	order: 2;
}
.mteam-wrp .mteam-row{
	margin-top: 20px;
}
.mteam-wrp .mteam-row .detail{
	background-color: #ececec;
}
.mteam-wrp .mteam.active + .mteam-row{
	display: flex;
}
.mteam-cols .mteam .info{
	width: 100%;
	max-width: 220px;
}
.mteam-cols.active-col .mteam .ct{
	display: none;
}
.mteam-wrp  .mteam-cols.active-col .mteam.active .ct{
	display: none;
}
.lv2nd,
.lv3rd{
	margin-top: 50px;
}
.mteam .info .bg{
	display: none;
}
.lv1st .mteam .info .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.lv2nd .mteam .info .bg,
.lv3rd .mteam .info .bg{
	position: absolute;
	left: -20px;
	top: -20px;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	background-color: #ececec;
}
.mteam.active .info .bg,
.mteam.active .info .bg{
 	display: block;
}
.mteam-row .detail {
	opacity: 0;
}
.mteam.active + .mteam-row .detail {
    opacity: 1;
    transition: all 0.3s linear 0.3s;
}
@media only screen and (max-width: 1024px){
	.mteam-wrp .lv1st .mteam .info{
		max-width: 225px;
	}
	.mteam-cols .mteam .info{
		max-width: 165px;
	}
	.mteam-wrp .ct .name h4 span, .mteam-wrp .detailct .name h4 span{
		font-size: 100%;
	}
	.mteam-wrp .ct .title, .mteam-wrp .detailct .title{
		font-size: 85%;
	}
	.mteam-wrp .lv2nd .mteam {
		flex-basis: 28.33%;
	}
	.mteam-wrp .lv3rd .mteam {
		flex-basis: 21.25%;
	}
	.mteam-wrp .mteam-cols{
		gap: 5%;
	}
	.mteam-wrp .detailct{
		padding: 20px;
	}
	.mteam-wrp .open {
		font-size: 20px;
		bottom: 10px;
	}
	.mteam-wrp .detail .close{
		font-size: 20px;
		right: 20px;
		top: 10px;
	}
}

@media only screen and (max-width: 767px){
	.lv1st .mteam .info .bg{
		left: -20px;
		top: -20px;
		width: calc(100% + 40px);
		height: calc(100% + 40px);
		background-color: #EAF3FA;
	}
	.mteam-wrp .lv1st .mteam{
		flex-direction: column;
	}
	.mteam-wrp .lv1st .mteam .detail{
		margin-top: 20px;
	}
	.mteam-wrp .lv2nd .mteam {
		flex-basis: 100%;
	}
	.mteam-wrp .lv3rd .mteam {
		flex-basis: 100%;
	}
	.mteam-wrp .mteam-cols {
		flex-direction: column;
		align-items: center;
	}
	.mteam-cols.active-col .mteam .ct{
		display: block;
	}
	.mteam-wrp  .mteam-cols.active-col .mteam.active .ct{
		display: none;
	}
	.mteam-wrp .mteam,
	.mteam-wrp .mteam-row{
		order: 0;
		margin-top: 20px;
	}
	.mteam-wrp .lv1st .mteam .info{
		max-width: 220px;
	}
	.mteam-cols .mteam .info{
		max-width: 220px;
	}
	.lv2nd, .lv3rd{
		margin-top: 0;
	}
}