/* # 테이블 속성 및 애니메이션 */
.KLhome-Sumcell-team {
background:#fafafa;
transition: background 0.3s;
}
.KLhome-Sumcell-team > .KLhome-Sumcell {
background:#ddd;
transition: background 0.3s;
}
.KLhome-Sumcell-team:hover{
background:#eee4f2;
}
.KLhome-Sumcell-team:hover > .KLhome-Sumcell{
background:#c0b7c4;
}
.KLhome-Sumcell-team0 {
background:#e3f2ff;
transition: background 0.3s;
}
.KLhome-Sumcell-team0 > .KLhome-Sumcell {
background:#bed7eb;
transition: background 0.3s;
}
.KLhome-Sumcell-team0:hover{
background:#eee4f2;
}
.KLhome-Sumcell-team0:hover > .KLhome-Sumcell{
background:#c0b7c4;
}
.KLhome-Sumcell-team1 {
background:#defce1;
transition: background 0.3s;
}
.KLhome-Sumcell-team1 > .KLhome-Sumcell {
background:#bae3be;
transition: background 0.3s;
}
.KLhome-Sumcell-team1:hover{
background:#eee4f2;
}
.KLhome-Sumcell-team1:hover > .KLhome-Sumcell{
background:#c0b7c4;
}
.KLhome-Sumcell-team2 {
background:#fcdede;
transition: background 0.3s;
}
.KLhome-Sumcell-team2 > .KLhome-Sumcell {
background:#ebbebe;
transition: background 0.3s;
}
.KLhome-Sumcell-team2:hover{
background:#eee4f2;
}
.KLhome-Sumcell-team2:hover > .KLhome-Sumcell{
background:#c0b7c4;
}
.KLhome-Sumcell-team3 {
background:#fcebde;
transition: background 0.3s;
}
.KLhome-Sumcell-team3 > .KLhome-Sumcell {
background:#f2ccae;
transition: background 0.3s;
}
.KLhome-Sumcell-team3:hover{
background:#eee4f2;
}
.KLhome-Sumcell-team3:hover > .KLhome-Sumcell{
background:#c0b7c4;
}
/* # 모바일 반응성 속성 */
@media screen and (max-width: 700px) {
.KL-mobile-margin {
margin:-8px -15px 0px;
}
}
@media screen and (min-width: 700px) {
.KL-mobile-margin {
margin:-15px -15px 0px;
}
}
/* 세부 스타일 지정 */
.KLhome-game-container {
width:100%;
overflow-x:auto;
overflow-y:hidden;
background:rgba(0,0,0,0.1);
}
.KLhome-game-line {
width:calc(100% - 40px);
display:inline-block;
height:1px;
background:black;
vertical-align:middle;
}
.KLhome-game-date {
font-family:'aldrich';
font-size:11px;
font-weight:400;
color:#000;
width:40px;
display:inline-block;
text-shadow:0px 0px 2px rgba(0,0,0,0.2);
}
.KLhome-game-box {
display:inline-block;
background:white;
border-radius:2px;
box-shadow:0px 0px 4px rgba(0,0,0,0.2);
text-align:center;
font-size:17px;
margin:0px 2px;
padding:7px;
user-select:none;
}
.KLhome-game-club {
width:25px;
height:25px;
display:inline-block;
}
.KLhome-game-Lscore {
width:18px;
display:inline-block;
background:rgba(0,0,0,0.05);
border-radius:2px;
font-family:'aldrich';
margin:0px 2px 0px 5px;
padding:2px 1px;
font-weight:700;
line-height:160%;
letter-spacing:0px;
}
.KLhome-game-Rscore {
width:18px;
display:inline-block;
background:rgba(0,0,0,0.05);
border-radius:2px;
font-family:'aldrich';
margin:0px 5px 0px 2px;
padding:2px 1px;
font-weight:700;
line-height:160%;
letter-spacing:0px;
}
/* # 반응 애니메이션 */
.KLhome-showup {
opacity: 0;
animation: KLhome-showup;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
transform: translateX(0%);
}
@keyframes KLhome-showup {
from {opacity: 0; transform: translateX(5%);}
to {opacity: 1; transform: translateX(0%);}
}
.KLhome-overflowR {
position:absolute;
height:100px;
width:60px;
background-image:linear-gradient(to left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
top:0px;
right:0px;
margin-bottom:-100px;
z-index:3;
}
.KLhome-overflowL {
position:absolute;
height:100px;
width:60px;
background-image:linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
top:0px;
Left:0px;
margin-bottom:-100px;
z-index:3;
}
.KLhome-overflow {
width:max-content;
animation:KLhome-overflow;
animation-iteration-count: infinite;
animation-duration: 4.5s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-play-state: paused;
animation-direction: unset;
margin-left:0px;
margin-right:0px;
}
.KLhome-OFbox {
width:30px;
height:1px;
display:inline-block;
background:transparent;
}
.KLhome-overflowR:hover ~ .KLhome-overflow {
animation-play-state: running;
animation-direction: normal;
}
.KLhome-overflowL:hover ~ .KLhome-overflow {
animation-play-state: running;
animation-direction: reverse;
}
@keyframes KLhome-overflow {
0% {margin-left:-0px;margin-right:0px;}
10% {margin-left:-0px;margin-right:0px;}
80% {margin-left:-380px;margin-right:380px;}
100% {margin-left:-380px;margin-right:380px;}
}
.KLhome-animation-lay1 {
position:absolute;
height:8px;
width:85px;
background:#ed91d8;
margin-bottom:-8px;
border-radius:5px;
box-shadow:0px 0px 5px rgba(235, 183, 223,0.5);
opacity:0;
animation:KLhome-animation-lay;
animation-iteration-count: infinite;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.KLhome-animation-lay2 {
position:absolute;
height:8px;
width:100px;
background:#ed91d8;
margin-bottom:-8px;
border-radius:5px;
box-shadow:0px 0px 5px rgba(235, 183, 223,0.5);
opacity:0;
animation:KLhome-animation-lay;
animation-iteration-count: infinite;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.KLhome-animation-lay3 {
position:absolute;
height:8px;
width:90px;
background:#ed91d8;
margin-bottom:-8px;
border-radius:5px;
box-shadow:0px 0px 5px rgba(235, 183, 223,0.5);
opacity:0;
animation:KLhome-animation-lay;
animation-iteration-count: infinite;
animation-duration: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.KLhome-animation-lay4 {
position:absolute;
height:8px;
width:200px;
background:#ed91d8;
margin-bottom:-8px;
border-radius:5px;
box-shadow:0px 0px 5px rgba(235, 183, 223,0.5);
opacity:0;
animation:KLhome-animation-lay;
animation-iteration-count: infinite;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.KLhome-animation-lay5 {
position:absolute;
height:8px;
width:50px;
background:#ed91d8;
margin-bottom:-8px;
border-radius:5px;
box-shadow:0px 0px 5px rgba(235, 183, 223,0.5);
opacity:0;
animation:KLhome-animation-lay;
animation-iteration-count: infinite;
animation-duration: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes KLhome-animation-lay {
0% {opacity:0;transform: translateX(-500px) scale(0.5, 1);}
30% {opacity:0.3;transform: translateX(0px) scale(1, 1);}
100% {opacity:0.5;transform: translateX(1000px) scale(1.2, 1);}
}
.KLhome-animation-laybox {
}
.KLhome-animation-textbox {
opacity:0.7;
text-shadow:0px 0px 2px rgba(255,255,255,0);
transition: opacity 0.5s, text-shadow 0.5s;
}
.KLhome-animation-laybox:hover > .KLhome-animation-textbox {
text-shadow:0px 0px 2px rgba(255,255,255,1);
opacity:0.9;
}
.KLhome-animation-laybox:hover > .KLhome-animation-lay1 {
animation-play-state: paused;
}
.KLhome-animation-laybox:hover > .KLhome-animation-lay2 {
animation-play-state: paused;
}
.KLhome-animation-laybox:hover > .KLhome-animation-lay3 {
animation-play-state: paused;
}
.KLhome-animation-laybox:hover > .KLhome-animation-lay4 {
animation-play-state: paused;
}
.KLhome-animation-laybox:hover > .KLhome-animation-lay5 {
animation-play-state: paused;
}
.KLhome-Imghover {
filter:brightness(1) drop-shadow(0px 0px 20px rgba(255,255,255,0));
transition: filter 0.5s;
}
.KLhome-animation-laybox:hover > .KLhome-Imghover {
filter:brightness(1.2) drop-shadow(0px 0px 20px rgba(255,255,255,0.3));
}
.KLhome-FCImg {
filter:brightness(0.97);
box-shadow:0px 0px 4px rgba(0,0,0,0.2);
transition: filter 0.5s, box-shadow 0.5s;
}
.KLhome-FCImg:hover {
box-shadow:0px 0px 7px rgba(0,0,0,0.7);
filter:brightness(1);
}
.KLhome-header {
display:inline-block;
vertical-align:bottom;
margin:0px 15px;
opacity:0.6;
color:white;
font-size:13px;
font-family:'aldrich';
transition: opacity 0.5s;
}
.KLhome-header:hover {
opacity:1;
}
.KLhome-header > .a {
text-decoration: none;
}