@charset "UTF-8";

/*위젯 라이브매치*/
.main-spo-widget{
  border:1px solid var(--borderColor);
  border-radius: var(--radius);
  background: var(--colorwhite);
  padding: 1.5rem;
  visibility:hidden;
  box-shadow: var(--shadow);
}
.main-spo-widget.main-spo-ready{visibility:visible;}

.main-spo-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}

.main-spo-title{
  font-size:20px;
  font-weight:700;
  line-height:1.2;
}

.main-spo-title span{
  display:block;
  margin-top:6px;
  font-size:11px;
  letter-spacing:2px;
  color:#28c987;
  font-weight:600;
}

.main-spo-more{
  color: var(--con-sub);
  text-decoration:none;
  font-size:13px;
  transition:.25s;
}

.main-spo-live-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.main-spo-live-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
}

.main-spo-live-total{
  font-size:12px;
  color:#8da6b5;
}

.main-spo-live-dot{
  width:10px;
  height:10px;
  background:#ff4747;
  border-radius:50%;
  animation:main-spo-live 1s infinite;
}

.main-spo-live-item.is-hidden{display:none;}

.main-spo-more-btn{
  width:100%;
  height:44px;
  border:0;
  border-radius: var(--radius);
  background: #f9f9f9;
  cursor:pointer;
  font-weight:600;
  transition:.25s;
  margin-top: 1rem;
}

@keyframes main-spo-live{
  0%,100%{opacity:1;}
  50%{opacity:.3;}
}

.main-spo-live-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.main-spo-live-item{
  display:flex;
  align-items:center;
  border-radius: var(--radius);
  background: var(--colorgray-bg);
  padding: 1rem 1.5rem;
  text-decoration:none;
  transition:.25s;
}

.main-spo-live-item:hover{transform:translateX(4px);}

.main-spo-live-league{
  width:45px;
  font-size:12px;
  font-weight:500;
  color: var(--con-sub);
}
.main-spo-live-match{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:15px;
  font-weight:500;
}
.main-spo-live-score{	font-size:15px;	color: var(--colorred);}
.main-spo-live-match span {	flex: 1; text-align: center;}
.main-spo-live-status{
  width:45px;
  text-align:right;
  font-size:13px;
  font-weight:700;
  color:#ff6b6b;
}

@media (max-width: 767px) {
  .main-spo-icon {font-size: 13px;}
  .main-spo-count {font-size: 15px;}
  .main-spo-live-match {font-size: 12px;}
  .main-spo-live-score {font-size: 13px;}
  .main-spo-live-status {font-size: 10px;}
  .main-spo-name {display: none;}
  .main-spo-widget {padding: 1.5rem 1rem;}
  .main-spo-live-item {padding: 1rem;}
  .main-spo-live-league {font-size: 10px;}
}