@charset "UTF-8";


.line { border-top:1px solid #ddd; margin:10px 0 10px 0; }

.top-rank {display: flex; justify-content: space-evenly; position: relative; top: 45px;}
.top-rank>div {text-align: center; position: relative;}
.top-rank>div:first-child {order: 2; transform: scale(1.3); position: relative; top: 25px;}
.top-rank>div:last-child {order: 3;}

.top-rank .rank {position: absolute; top: -9px; right: -23px; width: 100%; z-index: 1;}
.top-rank .rank img {width: 30px;}
.top-rank .exp {
  position: absolute;
  bottom: 22px;
  left: 50%;
  padding: 2px 5px;
  transform: translate(-50%,0);
  width: 100%;
  font-weight: bold;
}

.top-rank .name {position: relative; top: 1px;}
.top-rank .profile {position: relative; top: 3px; font-weight: bold;}

.ds-shadow {background: radial-gradient(#cccccc, #ffffff 65%); height: 135px;}

.rank-cate {display: flex; justify-content: space-between;}
.rank-users>div {background: #eee; border-radius: 5px; margin-bottom: 5px; padding: 8px 0;}
.rank-users>div:nth-child(even) {background: #f9f9f9;}
.rank-cate>div:nth-child(1),.rank-users>div div:nth-child(1) {flex: 0 0 20%; text-align: center;}
.rank-cate>div:nth-child(2),.rank-users>div div:nth-child(2) {flex: auto;}
.rank-cate>div:nth-child(3),.rank-users>div div:nth-child(3) {flex: 0 0 25%; text-align: center;}
.rank-users .rank img {width: 15px; margin-top: -2px;}


/*폼박스*/
.rank_set_btn {display: flex; justify-content: flex-end;}
.rank_set_btn button {outline: 0; border: 0; background: #ff2600; color: #fff; border-radius: 5px;}
.form_item_box {display: flex; justify-content: flex-end;}
.form_item_box>div {display: flex; justify-content: space-between; line-height: 1; padding: 3px 3px 3px 15px; border-radius: 5px; border: 1px solid #ddd; margin-right: 5px;}

.rank_form_id {flex: 0 0 50%;}
.rank_form_id input {height: 100%; width: 100%; border: 0; outline: 0;}

.rank_form_radio {line-height: 1.2;}
.rank_form_radio label {margin: 0; background: #e9ecef; padding: 5px; border-radius: 5px;}
.rank_form_radio label input {position: relative; top: -2px;}

.user_block_box {display: flex; flex-wrap: wrap;}
.user_block_box>div {line-height: 1; padding: 10px; background: #f9f9f9; margin: 3px;}

.rank-banner {}
.rank-banner-item {display: flex; flex-wrap: wrap; justify-content: space-between;}
.rank-banner-item>div {flex: auto; margin-bottom: 2px; border-radius: 5px; border: 1px solid #ddd; padding: 5px; background: #f9f9f9; color: #666;}
.rank-banner-item>div span,.rank-banner-item>div a {color: #ff4900; font-weight: bold;}
.rank-banner-item>div a:hover{color:#ff8f00;}

@media (max-width:767px) {
  .top-rank>div:first-child {transform: unset;}
  .rank-banner-item {flex-direction: column;}
}