@charset "UTF-8";

.vote_select {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  z-index: 2;
}

.vote_item {
  position: relative;
  width: 18%;
  margin: 0 2.5% 1.6rem 0;
  text-align: center;
}

.vote_num {
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  top: -10%;
  right: -10%;
  padding-top: .65em;
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  color: #bab47f;
  background-image: url(../img/n_bg.png);
  background-size: cover;
}

.inactive {
  opacity: 0.5;
  pointer-events: none;
}

.vote_item input[type="checkbox"] {
  display: none;
}

.vote_item input[type="checkbox"]+label {
  display: block;
  width: 100%;
  padding-top: 122%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .3s;
}

.vote_item.thumb_001 input[type="checkbox"]+label {
  background: url(../img/vote_001.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_001 input[type="checkbox"]:checked+label {
  background: url(../img/vote_001_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_002 input[type="checkbox"]+label {
  background: url(../img/vote_002.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_002 input[type="checkbox"]:checked+label {
  background: url(../img/vote_002_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_003 input[type="checkbox"]+label {
  background: url(../img/vote_003.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_003 input[type="checkbox"]:checked+label {
  background: url(../img/vote_003_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_004 input[type="checkbox"]+label {
  background: url(../img/vote_004.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_004 input[type="checkbox"]:checked+label {
  background: url(../img/vote_004_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_005 input[type="checkbox"]+label {
  background: url(../img/vote_005.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_005 input[type="checkbox"]:checked+label {
  background: url(../img/vote_005_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_006 input[type="checkbox"]+label {
  background: url(../img/vote_006.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_006 input[type="checkbox"]:checked+label {
  background: url(../img/vote_006_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_007 input[type="checkbox"]+label {
  background: url(../img/vote_007.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_007 input[type="checkbox"]:checked+label {
  background: url(../img/vote_007_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_008 input[type="checkbox"]+label {
  background: url(../img/vote_008.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_008 input[type="checkbox"]:checked+label {
  background: url(../img/vote_008_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_009 input[type="checkbox"]+label {
  background: url(../img/vote_009.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_009 input[type="checkbox"]:checked+label {
  background: url(../img/vote_009_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_010 input[type="checkbox"]+label {
  background: url(../img/vote_010.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_010 input[type="checkbox"]:checked+label {
  background: url(../img/vote_010_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_011 input[type="checkbox"]+label {
  background: url(../img/vote_011.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_011 input[type="checkbox"]:checked+label {
  background: url(../img/vote_011_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_012 input[type="checkbox"]+label {
  background: url(../img/vote_012.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_012 input[type="checkbox"]:checked+label {
  background: url(../img/vote_012_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_013 input[type="checkbox"]+label {
  background: url(../img/vote_013.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_013 input[type="checkbox"]:checked+label {
  background: url(../img/vote_013_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_014 input[type="checkbox"]+label {
  background: url(../img/vote_014.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_014 input[type="checkbox"]:checked+label {
  background: url(../img/vote_014_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_015 input[type="checkbox"]+label {
  background: url(../img/vote_015.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_015 input[type="checkbox"]:checked+label {
  background: url(../img/vote_015_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_016 input[type="checkbox"]+label {
  background: url(../img/vote_016.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_016 input[type="checkbox"]:checked+label {
  background: url(../img/vote_016_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_017 input[type="checkbox"]+label {
  background: url(../img/vote_017.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_017 input[type="checkbox"]:checked+label {
  background: url(../img/vote_017_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_018 input[type="checkbox"]+label {
  background: url(../img/vote_018.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_018 input[type="checkbox"]:checked+label {
  background: url(../img/vote_018_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_019 input[type="checkbox"]+label {
  background: url(../img/vote_019.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_019 input[type="checkbox"]:checked+label {
  background: url(../img/vote_019_on.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_020 input[type="checkbox"]+label {
  background: url(../img/vote_020.jpg) no-repeat;
  background-size: 100%;
}

.vote_item.thumb_020 input[type="checkbox"]:checked+label {
  background: url(../img/vote_020_on.jpg) no-repeat;
  background-size: 100%;
}

@media screen and (min-width: 1px) and (max-width: 750px) {

  .confirm_btn {
    width: 50%;
    bottom: 15px;
    left: 25%;
  }
  
  .list_inner {
    width: 90%;
    margin: 3rem auto 0;
    padding: 15% 1rem 1rem 1rem;
    border-radius: 15px;
  }
  
  .vote_select {
    width: 100%;
    justify-content: center;
  }
  
  .vote_item {
    width: 31%;
    margin: 0 3% 1rem 0;
  }

  .vote_item:nth-child(3n) {
    margin: 0 0 1rem 0;
  }

  .vote_item input[type="checkbox"]+label {
    padding-top: 116%;
  }
  
  .vote_num {
    width: 3rem;
    height: 3rem;
    top: -10%;
    right: -10%;
    padding-top: .62em;
    font-size: 1em;
    z-index: 3;
  }

}

@media screen and (min-width: 751px) and (max-width: 1024px) {

  .vote_item {
    position: relative;
    width: 18%;
    margin: 0 2.5% 1rem 0;
    text-align: center;
  }

  .vote_item:nth-child(5n) {
    margin-right: 0;
  }
  
  .vote_item input[type="checkbox"]+label {
    padding-top: 114%;
  }

}

@media screen and (min-width: 1025px) {

  .vote_item:nth-child(5n) {
    margin-right: 0;
  }

}