.btn_wrap {
  display: flex;
  position: absolute;
  top: 295px;
  left: 50%;
  transform: translateX(-50%);
}

.btn_abc_phonics {
  width: 595px;
  height: 138px;
  background: url(../image/btn_ABC_phonics_song.png) no-repeat;
}

.viewer_wrap .btn_abc,
.viewer_wrap .btn_abc_phonics {
  display: none;
}

.viewer_header .btn_home {
  background-image: url(../../act_common/image/common/btn_book_select.png);
}

.main_1 {
  background-image: url("../image/bg_book_main_1.png");
}
.main_1 .title {
  padding-top: 100px;
}
.main_1 .title .num_circle {
  color: #f47e36;
}
.main_1 .title .num_circle::after {
  content: "1";
  left: 35px;
  transform: translateX(0);
}
.main_1 .btn_abc {
  display: inline-block;
  width: 410px;
  height: 138px;
  background: url(../image/btn_ABCsong.png) no-repeat;
  margin-right: 30px;
}
.main_1 .btn_abc_phonics {
  display: inline-block;
}
.main_1 .unit_btn_wrap {
  margin-top: 230px;
}

.main_2 {
  background-image: url("../image/bg_book_main_2.png");
}
.main_2 .title {
  padding-top: 100px;
}
.main_2 .title .num_circle {
  color: #0dbcc1;
}
.main_2 .title .num_circle::after {
  content: "2";
}
.main_2 .btn_abc_phonics {
  display: inline-block;
}
.main_2 .unit_btn_wrap {
  margin-top: 230px;
}

.main_3 {
  background-image: url("../image/bg_book_main_3.png");
}
.main_3 .title .num_circle {
  color: #ee2e6a;
}
.main_3 .title .num_circle::after {
  content: "3";
}

.main_4 {
  background-image: url("../image/bg_book_main_4.png");
}
.main_4 .title .num_circle {
  color: #77c14e;
}
.main_4 .title .num_circle::after {
  content: "4";
}

.title {
  padding-top: 140px;
  text-align: center;
  font-family: "Axiforma-Black", sans-serif;
  font-size: 100px;
  color: #fff;
  font-weight: 900;
}
.title .num_circle {
  position: relative;
  top: 20px;
  display: inline-block;
  width: 120px;
  height: 120px;
  background-color: #fff;
  border-radius: 50%;
}
.title .num_circle::after {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.unit_btn_wrap {
  display: flex;
  justify-content: center;
  padding: 0 80px;
  flex-wrap: wrap;
  margin-top: 140px;
}
.unit_btn_wrap .unit {
  margin: 0 20px;
  display: inline-block;
  width: 309px;
  height: 257px;
  text-align: center;
}
.unit_btn_wrap .unit.select > img:nth-child(1) {
  animation: fadeOut 1s forwards;
}
.unit_btn_wrap .unit.select > img:nth-child(2) {
  animation: fadeIn 1s forwards;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.unit_btn_wrap .unit:first-child > span {
  padding-right: 25px;
}
.unit_btn_wrap .unit.bounce_1 {
  animation: bounce_1 6s infinite forwards;
}
.unit_btn_wrap .unit.bounce_2 {
  animation: bounce_3 6s infinite forwards;
}
.unit_btn_wrap .unit > img {
  position: absolute;
  left: 0;
  z-index: -1;
}
.unit_btn_wrap .unit > img:nth-child(1) {
  opacity: 1;
}
.unit_btn_wrap .unit > img:nth-child(2) {
  opacity: 0;
}
.unit_btn_wrap .unit > span {
  display: inline-block;
  padding-top: 45px;
  color: #fff;
  font-size: 120px;
  text-shadow: 0px 8px 0px rgba(0, 0, 0, 0.2);
  font-family: "Fredoka-SemiBold", sans-serif;
}

/*# sourceMappingURL=book_main.css.map */