틀:Formation/styles.css

/* 세부 스타일 지정 */

.Formation-unit {
	position:absolute;
	transform: translate(-50%, -50%);
	line-height:60%;
	font-size:11px;
	font-family:'GmarketSansMedium';
	font-weight:300;
	text-align:center;
	color:white;
	text-shadow:0px 0px 4px rgba(0,0,0,0.6);
    transition: color 0.5s;
}
.Formation-unit2 {
	position:absolute;
	transform: translate(-50%, -50%);
	line-height:60%;
	font-size:11px;
	font-family:'GmarketSansMedium';
	font-weight:300;
	text-align:center;
	color:white;
	text-shadow:0px 0px 4px rgba(0,0,0,0.6);
    transition: color 0.5s;
}
.Formation-unit3 {
	position:absolute;
	transform: translate(-50%, -50%);
	line-height:60%;
	font-size:11px;
	font-family:'GmarketSansMedium';
	font-weight:300;
	text-align:center;
	color:white;
	text-shadow:0px 0px 4px rgba(0,0,0,0.6);
    transition: color 0.5s;
}
.Formation-unit1 {
	position:absolute;
	transform: translate(-50%, -50%);
	line-height:60%;
	font-size:11px;
	font-family:'GmarketSansMedium';
	font-weight:300;
	text-align:center;
	color:white;
	text-shadow:0px 0px 4px rgba(0,0,0,0.6);
    transition: color 0.5s;
}
.Formation-unit0 {
	position:absolute;
	transform: translate(-50%, -50%);
	line-height:60%;
	font-size:11px;
	font-family:'GmarketSansMedium';
	font-weight:300;
	text-align:center;
	color:white;
	text-shadow:0px 0px 4px rgba(0,0,0,0.6);
    transition: color 0.5s;
}
.Formation-number {
	padding:3px 4px 3px;
	color:white;
	display:inline-block;
	margin-right:4px;
	font-size:9px;
	font-weight:400;
	box-shadow:0px 0px 4px 0px rgba(0,0,0,0.6);
	border:1px solid white;
	opacity:0.8;
	font-family:'Pretendard JP Variable';
}
.Formation-position {
	padding:3px 4px 3px;
	color:white;
	display:inline-block;
	margin-left:4px;
	font-size:9px;
	font-weight:400;
	box-shadow:0px 0px 4px 0px rgba(0,0,0,0.6);
	border:1px solid white;
	text-shadow:none;
	opacity:0.8;
	font-family:'Pretendard JP Variable';
}

/* 반응 애니메이션 */

.Formation-unit:hover {
    color:#00ff33;
}
.Formation-unit0:hover {
    color:#dd00ff;
}
.Formation-unit1:hover {
    color:#00fffb;
}
.Formation-unit2:hover {
    color:#ff6f00;
}
.Formation-unit3:hover {
    color:#ff6666;
}

.Formation-contentbox {
    display:inline-block;
}
.Formation-unit:hover > .Formation-contentbox {
    display:none;
}
.Formation-unit0:hover > .Formation-contentbox {
    display:none;
}
.Formation-unit1:hover > .Formation-contentbox {
    display:none;
}
.Formation-unit2:hover > .Formation-contentbox {
    display:none;
}
.Formation-unit3:hover > .Formation-contentbox {
    display:none;
}
.Formation-rating {
    display:none;
	padding:3px 4px 3px;
	color:white;
	margin-right:4px;
	font-size:9px;
	font-weight:400;
	box-shadow:0px 0px 4px 0px rgba(0,0,0,0.6);
	border:1px solid #FFF;
	opacity:0.8;
	font-family:'Pretendard JP Variable';
}
.Formation-unit:hover > .Formation-rating {
    display:inline-block;
	color:#00ff33;
	border:1px solid #00ff33;
}
.Formation-unit0:hover > .Formation-rating {
    display:inline-block;
	color:#dd00ff;
	border:1px solid #dd00ff;
}
.Formation-unit1:hover > .Formation-rating {
    display:inline-block;
	color:#00fffb;
	border:1px solid #00fffb;
}
.Formation-unit2:hover > .Formation-rating {
    display:inline-block;
	color:#ff6f00;
	border:1px solid #ff6f00;
}
.Formation-unit3:hover > .Formation-rating {
    display:inline-block;
	color:#ff6666;
	border:1px solid #ff6666;
}