@keyframes go {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
* {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans TC";
}


.container {
  max-width: 1000px;
  min-width: 400px;
  margin: 0 auto;
  overflow: hidden;
}


section.turntable {
  position: relative;
  max-width: 1000px;
  max-height: 1000px;
}
section.turntable button.turntable_btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
  border: none;
  outline: none;
  font-weight: 900;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  font-size: 70px;
  color: #0984e3;
  background-color: #da4546;
  cursor: pointer;
}
section.turntable button.turntable_btn:active, section.turntable button.turntable_btn:disabled {
  cursor: default;
}
section.turntable button.turntable_btn:active::after, section.turntable button.turntable_btn:disabled::after {
  box-shadow: none;
  margin-top: 2px;
  background-color: #eb9a9b;
}
section.turntable button.turntable_btn::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: #efb0b0;
  z-index: -1;
  box-shadow: 1px 2px 4px #5b1212;
}
@media screen and (max-width: 767px) {
  section.turntable button.turntable_btn {
    font-size: 42px;
  }
}
section.turntable div.list {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
section.turntable div.list {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 70%;
  height: 70%;
  text-align: center;
}
section.turntable div.list ul {
  list-style: none;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}
section.turntable div.list ul.go {
  animation: go 0.8s linear 4;
  -webkit-animation: go 0.8s linear 4;
}
section.turntable div.list ul li {
  color: #fff;
  font-size: 22.4px;
  position: absolute;
  width: 100%;
  height: 100%;
}

section.turntable div.list ul li:nth-child(2) {
  transform: rotate(320deg);
}
section.turntable div.list ul li:nth-child(3) {
  transform: rotate(280deg);
}
section.turntable div.list ul li:nth-child(4) {
  transform: rotate(240deg);
}
section.turntable div.list ul li:nth-child(5) {
  transform: rotate(200deg);
}
section.turntable div.list ul li:nth-child(6) {
  transform: rotate(160deg);
}
section.turntable div.list ul li:nth-child(7) {
  transform: rotate(120deg);
}
section.turntable div.list ul li:nth-child(8) {
  transform: rotate(80deg);
}
section.turntable div.list ul li:nth-child(9) {
  transform: rotate(40deg);
}
@media screen and (max-width: 767px) {
  section.turntable div.list ul li {
    font-size: 14px;
  }
}
section.turntable div.list ul li img {
  width: 70px;
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  section.turntable div.list ul li img {
    width: 40px;
  }
}
@media screen and (max-width: 400px) {
  section.turntable div.list ul li img {
    display: none;
  }
}
section.turntable svg > circle {
  fill: none;
  stroke: #0876ca;
  stroke-width: 5px;
}
section.turntable svg g.polyline.go {
  animation: go 0.8s linear 4;
  -webkit-animation: go 0.8s linear 4;
}
section.turntable svg g.polyline polyline {
  
  fill: #299df6;
}
section.turntable svg g.polyline polyline:nth-child(3n+1) {
  fill: #0984e3;
 
}
section.turntable svg g.circle circle {
  fill: #fff;
  stroke: none;
  box-shadow: 0px 2px 5px #ccc;
}
section.turntable svg g.circle circle:nth-child(odd) {
  animation: shiny 0.8s linear infinite;
  -webkit-animation: shiny 0.8s linear infinite;
}
section.turntable svg g.circle circle:nth-child(odd).go {
  animation: go 0.8s linear 4, shiny 0.8s linear infinite;
  -webkit-animation: go 0.8s linear 4, shiny 0.8s linear infinite;
}
section.turntable svg g.circle circle:nth-child(even) {
  animation: shiny 0.8s 0.5s linear infinite;
  -webkit-animation: shiny 0.8s 0.5s linear infinite;
}
section.turntable svg g.circle circle:nth-child(even).go {
  animation: go 0.8s 0.8s linear 4, shiny 0.8s 0.5s linear infinite;
  -webkit-animation: go 0.8s linear 4, shiny 0.8s 0.5s linear infinite;
}
section.turntable svg g.mark circle {
  fill: #d63031;
}
section.turntable svg g.mark circle.round {
  fill: none;
  stroke: #f4c5c5;
}
section.turntable svg g.mark polyline {
  fill: #d63031;
  stroke: none;
}
section.turntable svg g.bottom {
  fill: rgba(0, 0, 0, 0.4);
}