.picList {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  -webkit-transform: rotateX(-5deg);
  transform: rotateX(-5deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 455.1831372428px;
  perspective: 455.1831372428px
}
.pic {
  position: absolute;
  top: 50%;
  left: calc(50% - 50px);
  width: 100px;
  padding: 1em;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 0.9;
  background: #eee
}
.pic_name {
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  font-size: 16px;
  font-size: 1rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-align: center;
  opacity: 0
}
.picList {
  --base-deg: 0deg
}
.pic:nth-child(1) {
  background: #c7c07e
}
.picList[data-front="1"] .pic:nth-child(1) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="1"] .pic:nth-child(1) .pic_name {
  opacity: 1
}
.picList[data-front="2"] .pic:nth-child(1) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(1) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(1) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(1) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(1) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(1) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(1) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(1) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(1) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(0deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(1) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(0deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(0deg + var(--base-deg)))
}
.pic:nth-child(2) {
  background: #a6c77e
}
.picList[data-front="1"] .pic:nth-child(2) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(2) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(2) .pic_name {
  opacity: 1
}
.picList[data-front="3"] .pic:nth-child(2) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(2) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(2) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(2) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(2) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(2) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(2) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(2) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(2) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(32.7272727273deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(32.7272727273deg + var(--base-deg)))
}
.pic:nth-child(3) {
  background: #7ec77e
}
.picList[data-front="1"] .pic:nth-child(3) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(3) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(3) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(3) .pic_name {
  opacity: 1
}
.picList[data-front="4"] .pic:nth-child(3) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(3) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(3) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(3) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(3) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(3) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(3) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(3) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(65.4545454545deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(65.4545454545deg + var(--base-deg)))
}
.pic:nth-child(4) {
  background: #7ec7a5
}
.picList[data-front="1"] .pic:nth-child(4) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(4) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(4) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(4) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(4) .pic_name {
  opacity: 1
}
.picList[data-front="5"] .pic:nth-child(4) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(4) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(4) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(4) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(4) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(4) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(4) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(98.1818181818deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(98.1818181818deg + var(--base-deg)))
}
.pic:nth-child(5) {
  background: #7ec1c7
}
.picList[data-front="1"] .pic:nth-child(5) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(5) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(5) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(5) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(5) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(5) .pic_name {
  opacity: 1
}
.picList[data-front="6"] .pic:nth-child(5) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(5) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(5) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(5) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(5) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(5) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(130.9090909091deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(130.9090909091deg + var(--base-deg)))
}
.pic:nth-child(6) {
  background: #7e99c7
}
.picList[data-front="1"] .pic:nth-child(6) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(6) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(6) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(6) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(6) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(6) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(6) .pic_name {
  opacity: 1
}
.picList[data-front="7"] .pic:nth-child(6) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(6) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(6) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(6) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(6) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(163.6363636364deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(163.6363636364deg + var(--base-deg)))
}
.pic:nth-child(7) {
  background: #8b7ec7
}
.picList[data-front="1"] .pic:nth-child(7) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(7) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(7) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(7) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(7) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(7) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(7) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(7) .pic_name {
  opacity: 1
}
.picList[data-front="8"] .pic:nth-child(7) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(7) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(7) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(7) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(196.3636363636deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(196.3636363636deg + var(--base-deg)))
}
.pic:nth-child(8) {
  background: #b37ec7
}
.picList[data-front="1"] .pic:nth-child(8) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(8) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(8) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(8) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(8) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(8) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(8) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(8) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(8) .pic_name {
  opacity: 1
}
.picList[data-front="9"] .pic:nth-child(8) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(8) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(8) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(229.0909090909deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(229.0909090909deg + var(--base-deg)))
}
.pic:nth-child(9) {
  background: #c77eb3
}
.picList[data-front="1"] .pic:nth-child(9) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(9) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(9) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(9) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(9) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(9) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(9) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(9) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(9) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(9) .pic_name {
  opacity: 1
}
.picList[data-front="10"] .pic:nth-child(9) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(9) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(261.8181818182deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(261.8181818182deg + var(--base-deg)))
}
.pic:nth-child(10) {
  background: #c77e8c
}
.picList[data-front="1"] .pic:nth-child(10) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(10) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(10) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(10) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(10) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(10) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(10) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(10) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(10) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(10) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(10) .pic_name {
  opacity: 1
}
.picList[data-front="11"] .pic:nth-child(10) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(294.5454545455deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(294.5454545455deg + var(--base-deg)))
}
.pic:nth-child(11) {
  background: #c7987e
}
.picList[data-front="1"] .pic:nth-child(11) {
  z-index: 10;
  -webkit-transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(-123.0452917055px, 0, 191.4622111454px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="2"] .pic:nth-child(11) {
  z-index: 5;
  -webkit-transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(-207.024572691px, 0, 94.544954438px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="3"] .pic:nth-child(11) {
  z-index: -1;
  -webkit-transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(-225.2750146128px, 0, -32.3896572807px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="4"] .pic:nth-child(11) {
  z-index: -7;
  -webkit-transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(-172.0022311122px, 0, -149.0407816672px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="5"] .pic:nth-child(11) {
  z-index: -10;
  -webkit-transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(-64.1199545433px, 0, -218.3725109461px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="6"] .pic:nth-child(11) {
  z-index: -10;
  -webkit-transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(64.1199545433px, 0, -218.3725109461px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="7"] .pic:nth-child(11) {
  z-index: -7;
  -webkit-transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(172.0022311122px, 0, -149.0407816672px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="8"] .pic:nth-child(11) {
  z-index: -1;
  -webkit-transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(225.2750146128px, 0, -32.3896572807px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="9"] .pic:nth-child(11) {
  z-index: 5;
  -webkit-transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(207.024572691px, 0, 94.544954438px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="10"] .pic:nth-child(11) {
  z-index: 10;
  -webkit-transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(123.0452917055px, 0, 191.4622111454px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(11) {
  z-index: 11;
  -webkit-transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(327.2727272727deg + var(--base-deg)));
  transform: translate3d(0px, 0, 227.5915686214px) rotateY(calc(327.2727272727deg + var(--base-deg)))
}
.picList[data-front="11"] .pic:nth-child(11) .pic_name {
  opacity: 1
}
.btn {
  display: inline-block;
  margin-top: 4em;
  padding: 0.5em 1em;
  color: #333;
  border: none;
  background: #eee
}
.btn + .btn {
  margin-left: 2em
}
code pre {
  margin-bottom: 3em;
  padding: 0.5em;
  background: #f3f3f3
}
/*# sourceMappingURL=../sourcemaps/kurukuru2.css.map */