.body-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url('../../assets/player-bg.jpg') !important;
}
  
.player-border{
  position: absolute;
  left: calc((100% - 100vh * 1.36)/ 2);
  top: 5vh;
  right: calc((100% - 100vh * 1.36)/ 2);
  bottom: 5vh;
  text-align: center;
  
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
  border-radius: 11px;
  border: 20px solid #23b1c2;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;
}

.player-picture-group {
  padding: 2vh 5vh;
  width: 100%;
  height: 100%;
  background-size: 105% 105%;
  background-position-x: -6px;
  background-position-y: -6px;
  background-image: url('../../assets/common_bg.jpg');
  .group{
    height: 29.5%;
    overflow: hidden;
    .group-box {
      cursor: pointer;
      width: 100%;
      height: 95%;
      border-radius: 4vh;
      background: rgba(255,255,255,.5);
	    display: flex;
      flex-direction: column;
      //padding-bottom: 1vh;
	  .item{
      justify-content: center;
      align-items: center;
      display: flex;
    	.item-bg{
    	    position: absolute;
        	max-height: 100%;
		    max-width: 100%;
		    //height: 100%;
    	}
    	.item-pic{
          height: 70%;
          z-index: 1;
          position: absolute;
        }
      }
      .group-label{
        font-size: 4.5vh;
        text-align: left;
        padding-left: 3vh;
        font-weight: 900;
        font-family: ChalkboardSE-Regular;
        line-height: 5.5vh;
      }
    }

  }
  .pics{
    height: 41%;
    //overflow: hidden;
  }
  .item-box{
    padding: .3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    .item{
      cursor: pointer;
      position: relative;
      padding-bottom: 65%;
      background-size: 100%;
      background-position: 50%;
      background-image: url('../../assets/picture-group/item-bg.png');
      background-repeat: no-repeat;
      width: 90%;
      .display-item{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        font-family: ChalkboardSE-Regular;
        font-size: 3vh;
        max-width: 100%;
        max-height: 100%;
        //width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          //width: auto;
          //max-width: 100%;
          width: unset;
          height: auto;
          max-height: 70%;
		}
      }
    }
  }
  .item-box.selected {
    //transform: scale(1.2);
    //transition-duration: .5s;
    animation: zooming 1s infinite
  }
  .group-box.selected {

  }
  @keyframes zooming {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }
}
