/* 세부 스타일 지정 */
.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;
}