.toolbar .title { background-image: url(img/title.png); }

.page-index {
  width: .73rem;
  height: 1.3rem;
  right: .24rem;
  background: center / cover no-repeat;
}
.page-index::after { /* for preloading */
  content: '';
  z-index: -1;
  visibility: hidden;
}
.page-index[data-num="1"],
.page-index[data-num="1"].active::after {
  top: .4rem;
  background-image: url('img/1-page-index-1.png');
}
.page-index[data-num="1"].active {
  background-image: url('img/1-page-index-1-active.png');
}
.page-index[data-num="2"] {
  top: calc(.4rem + 1.37rem);
  background-image: url('img/1-page-index-2.png');
}
.page-index[data-num="2"].active,
.page-index[data-num="2"]::after {
  background-image: url('img/1-page-index-2-active.png');
}
.page-index[data-num="3"] {
  top: calc(.4rem + 1.37 * 2rem);
  background-image: url('img/1-page-index-3.png');
}
.page-index[data-num="3"].active,
.page-index[data-num="3"]::after {
  background-image: url('img/1-page-index-3-active.png');
}
.page-index[data-num="4"] {
  top: calc(.4rem + 1.37 * 3rem);
  background-image: url('img/1-page-index-4.png');
}
.page-index[data-num="4"].active,
.page-index[data-num="4"]::after {
  background-image: url('img/1-page-index-4-active.png');
}
.page-index[data-num="5"] {
  top: calc(.4rem + 1.37 * 4rem);
  background-image: url('img/1-page-index-5.png');
}
.page-index[data-num="5"].active,
.page-index[data-num="5"]::after {
  background-image: url('img/1-page-index-5-active.png');
}
.page-index[data-num="6"] {
  top: calc(.4rem + 1.37 * 5rem);
  background-image: url('img/1-page-index-6.png');
}
.page-index[data-num="6"].active,
.page-index[data-num="6"]::after {
  background-image: url('img/1-page-index-6-active.png');
}
.page-index[data-num="7"] {
  top: calc(.4rem + 1.37 * 6rem);
  background-image: url('img/1-page-index-7.png');
}
.page-index[data-num="7"].active,
.page-index[data-num="7"]::after {
  background-image: url('img/1-page-index-7-active.png');
}
.page-index[data-num="8"] {
  top: calc(.4rem + 1.37 * 7rem);
  background-image: url('img/1-page-index-8.png');
}
.page-index[data-num="8"].active,
.page-index[data-num="8"]::after {
  background-image: url('img/1-page-index-8-active.png');
}
.page-index[data-num="9"] {
  top: calc(.4rem + 1.37 * 8rem);
  background-image: url('img/1-page-index-9.png');
}
.page-index[data-num="9"].active,
.page-index[data-num="9"]::after {
  background-image: url('img/1-page-index-9-active.png');
}
.page-index[data-num="10"] {
  top: calc(.4rem + 1.37 * 9rem);
  background-image: url('img/1-page-index-10.png');
}
.page-index[data-num="10"].active,
.page-index[data-num="10"]::after {
  background-image: url('img/1-page-index-10-active.png');
}
.page-index[data-num="11"] {
  top: calc(.4rem + 1.37 * 10rem);
  background-image: url('img/1-page-index-11.png');
}
.page-index[data-num="11"].active,
.page-index[data-num="11"]::after {
  background-image: url('img/1-page-index-11-active.png');
}
.page-index[data-num="12"] {
  top: calc(.4rem + 1.37 * 11rem);
  background-image: url('img/1-page-index-12.png');
}
.page-index[data-num="12"].active,
.page-index[data-num="12"]::after {
  background-image: url('img/1-page-index-12-active.png');
}

.static,
.button,
.mask {
  width: 2rem;
  border: .02rem solid #7e5c5e;
  background: center / 100% auto no-repeat;
}

.mask {
  height: 1.39rem;
  border-left-width: 0;
  border-bottom-width: 0;
  background-color: #eaf6fb;
}

.vhead {
  width: .72rem;
  height: 1.39rem;
  border-right-width: .04rem;
  border-bottom-width: 0;
  background-color: #fff0a8;
}
.vhead[data-num="1"] {
  height: 3.12rem;
  top: .4rem;
  border-top-width: .04rem;
  background-image: url(img/1-vhead-1.png);
}
.vhead[data-num="2"] {
  top: 3.52rem;
  background-image: url(img/1-vhead-2.png);
}
.vhead[data-num="3"] {
  top: calc(3.52rem + 1.39rem);
  background-image: url(img/1-vhead-3.png);
}
.vhead[data-num="4"] {
  top: calc(3.52rem + 1.39 * 2rem);
  background-image: url(img/1-vhead-4.png);
}
.vhead[data-num="5"] {
  top: calc(3.52rem + 1.39 * 3rem);
  background-image: url(img/1-vhead-5.png);
}
.vhead[data-num="6"] {
  top: calc(3.52rem + 1.39 * 4rem);
  background-image: url(img/1-vhead-6.png);
}
.vhead[data-num="7"] {
  top: calc(3.52rem + 1.39 * 5rem);
  background-image: url(img/1-vhead-7.png);
}
.vhead[data-num="8"] {
  height: calc(1.39rem + .02rem);
  top: calc(3.52rem + 1.39 * 6rem);
  border-top-width: .04rem;
  background-image: url(img/1-vhead-8.png);
}
.vhead[data-num="9"] {
  height: 3.52rem;
  top: calc(3.52rem + 1.39 * 7rem + .02rem);
  border-bottom-width: .04rem;
  background-image: url(img/1-vhead-9.png);
}

.hhead {
  height: 1.32rem;
  top: .4rem;
  border-left-width: .04rem;
  border-top-width: .04rem;
  border-bottom-width: 0;
  background-size: auto 100%;
  background-color: #f6ebec;
}

.button {
  border-bottom-width: 0;
  border-left-width: 0;
  background: center / cover no-repeat;
}
.button[data-num="1"] {
  height: 1rem;
  top: 1.72rem;
}
.button[data-num="2"] {
  height: .8rem;
  top: 2.72rem;
  background-size: 1.02rem auto;
  background-image: url(img/button-meaning.png);
}
.button[data-num="2"]::after { /* for preloading */
  content: '';
  z-index: -1;
  visibility: hidden;
}
.button[data-num="2"].active,
.button[data-num="2"]::after {
  background-image: url(img/button-meaning-active.png);
}

.body1,
.body2,
.body3,
.body4,
.body5,
.body6 {
  height: 1.39rem;
  border-left-width: 0; 
  border-bottom-width: 0;
  background-size: auto 100%;
}
.body1[data-num="1"],
.body2[data-num="1"],
.body3[data-num="1"],
.body4[data-num="1"],
.body5[data-num="1"],
.body6[data-num="1"] { top: 3.52rem; }
.body1[data-num="2"],
.body2[data-num="2"],
.body3[data-num="2"],
.body4[data-num="2"],
.body5[data-num="2"],
.body6[data-num="2"] { top: calc(3.52rem + 1.39rem); }
.body1[data-num="3"],
.body2[data-num="3"],
.body3[data-num="3"],
.body4[data-num="3"],
.body5[data-num="3"],
.body6[data-num="3"] { top: calc(3.52rem + 1.39 * 2rem); }
.body1[data-num="4"],
.body2[data-num="4"],
.body3[data-num="4"],
.body4[data-num="4"],
.body5[data-num="4"],
.body6[data-num="4"] { top: calc(3.52rem + 1.39 * 3rem); }
.body1[data-num="5"],
.body2[data-num="5"],
.body3[data-num="5"],
.body4[data-num="5"],
.body5[data-num="5"],
.body6[data-num="5"] { top: calc(3.52rem + 1.39 * 4rem); }
.body1[data-num="6"],
.body2[data-num="6"],
.body3[data-num="6"],
.body4[data-num="6"],
.body5[data-num="6"],
.body6[data-num="6"] { top: calc(3.52rem + 1.39 * 5rem); }
.body1[data-num="7"],
.body2[data-num="7"],
.body3[data-num="7"],
.body4[data-num="7"],
.body5[data-num="7"],
.body6[data-num="7"] {
  top: calc(3.52rem + 1.39 * 6rem);
  height: calc(1.39rem + .02rem);
  border-top-width: .04rem;
}
.body1[data-num="8"],
.body2[data-num="8"],
.body3[data-num="8"],
.body4[data-num="8"],
.body5[data-num="8"],
.body6[data-num="8"] {
  top: calc(3.52rem + 1.39 * 7rem + .02rem);
  height: 3.52rem;
  border-bottom-width: .04rem;
}

.mask[data-num="1"] { top: 3.52rem; }
.mask[data-num="2"] { top: calc(3.52rem + 1.39rem); }
.mask[data-num="3"] { top: calc(3.52rem + 1.39 * 2rem); }
.mask[data-num="4"] { top: calc(3.52rem + 1.39 * 3rem); }
.mask[data-num="5"] { top: calc(3.52rem + 1.39 * 4rem); }
.mask[data-num="6"] { top: calc(3.52rem + 1.39 * 5rem); }
.mask[data-num="7"] { 
  top: calc(3.52rem + 1.39 * 6rem);
  height:calc(1.39rem + .02rem);
  border-top-width: .04rem;
}
.mask[data-num="8"] {
  height: 3.52rem;
  top: calc(3.52rem + 1.39 * 7rem + .02rem);
  border-bottom-width: .04rem;
}

.meaning {
  top: 3.9rem;
  background: center / cover no-repeat;
}
.meaning > .popup-close {
  position: absolute;
  width: .5rem;
  height: .5rem;
  left: -.18rem;
  top: -.18rem;
  background: center / contain url(img/meaning-close.png) no-repeat; 
}

.one-row .vhead { right: 3.44rem; }
.one-row .hhead,
.one-row .row1,
.one-row .body1,
.one-row .mask {
  width: calc(2rem + .04rem);
  right: 4.16rem;
  border-left-width: .04rem;
}
.one-row .meaning[data-num="1"] { right: calc(4.16rem + 2rem - .4rem); }

.two-rows .vhead { right: 2.26rem; }
.two-rows .hhead {
  width: calc(2 * 2rem + .04rem);
  right: 2.98rem;
}
.two-rows .row1,
.two-rows .body1,
.two-rows .mask1 { right: 2.98rem; }
.two-rows .row2,
.two-rows .body2,
.two-rows .mask2 {
  width: calc(2rem + .04rem);
  right: calc(2.98rem + 2rem);
  border-left-width: .04rem;
}
.two-rows .meaning[data-num="1"] { right: calc(2.98rem + 2rem - .4rem); }
.two-rows .meaning[data-num="2"] { left: calc(100% - 2.98rem - 2rem - .4rem + .08rem) }

.three-rows .vhead { right: 1.44rem; }
.three-rows .hhead {
  width: calc(2 * 3rem + .04rem);
  right: 2.16rem;
}
.three-rows .row1,
.three-rows .body1,
.three-rows .mask1 { right: 2.16rem; }
.three-rows .row2,
.three-rows .body2,
.three-rows .mask2 { right: calc(2.16rem + 2rem); }
.three-rows .row3,
.three-rows .body3,
.three-rows .mask3 {
  width: calc(2rem + .04rem);
  right: calc(2.16rem + 2 * 2rem);
  border-left-width: .04rem;
}
.three-rows .meaning[data-num="1"] { right: calc(2.16rem + 2rem - .4rem); }
.three-rows .meaning[data-num="2"] { left: calc(100% - 2.16rem - 2rem - .4rem + .08rem) }
.three-rows .meaning[data-num="3"] { left: calc(100% - 2.16rem - 2 * 2rem - .4rem + .08rem) }

.four-rows .vhead { right: 1.26rem; }
.four-rows .hhead {
  width: calc(1.6 * 4rem + .04rem);
  right: 1.98rem;
}
.four-rows .button,
.four-rows .body1,
.four-rows .body2,
.four-rows .body3,
.four-rows .mask { width: 1.6rem; }
.four-rows .row1,
.four-rows .body1,
.four-rows .mask1 { right: 1.98rem; }
.four-rows .row2,
.four-rows .body2,
.four-rows .mask2 { right: calc(1.98rem + 1.6rem); }
.four-rows .row3,
.four-rows .body3,
.four-rows .mask3 { right: calc(1.98rem + 1.6 * 2rem); }
.four-rows .row4,
.four-rows .body4,
.four-rows .mask4 {
  width: calc(1.6rem + .04rem);
  right: calc(1.98rem + 1.6 * 3rem);
  border-left-width: .04rem;
}
.four-rows .meaning[data-num="1"] { right: calc(1.98rem + 1.6rem - .4rem); }
.four-rows .meaning[data-num="2"] { right: calc(1.98rem + 1.6 * 2rem - .4rem); }
.four-rows .meaning[data-num="3"] { left: calc(100% - 1.98rem - 1.6 * 2rem - .4rem + .08rem); }
.four-rows .meaning[data-num="4"] { left: calc(100% - 1.98rem - 1.6 * 3rem - .4rem + .08rem); }

.six-rows .vhead { right: 1.44rem; }
.six-rows .hhead {
  width: calc(1 * 6rem + .04rem);
  right: 2.16rem;
}
.six-rows .button,
.six-rows .body1,
.six-rows .body2,
.six-rows .body3,
.six-rows .body4,
.six-rows .body5,
.six-rows .body6,
.six-rows .mask { width: 1rem; }
.six-rows .row1,
.six-rows .body1,
.six-rows .mask1 { right: 2.16rem; }
.six-rows .row2,
.six-rows .body2,
.six-rows .mask2 { right: calc(2.16rem + 1rem); }
.six-rows .row3,
.six-rows .body3,
.six-rows .mask3 { right: calc(2.16rem + 1 * 2rem); }
.six-rows .row4,
.six-rows .body4,
.six-rows .mask4 { right: calc(2.16rem + 1 * 3rem); }
.six-rows .row5,
.six-rows .body5,
.six-rows .mask5 { right: calc(2.16rem + 1 * 4rem); }
.six-rows .row6,
.six-rows .body6,
.six-rows .mask6 {
  width: calc(1rem + .04rem);
  right: calc(2.16rem + 1 * 5rem);
  border-left-width: .04rem;
}
.six-rows .meaning[data-num="1"] { right: calc(2.16rem + 1rem - .15rem); }
.six-rows .meaning[data-num="2"] { right: calc(2.16rem + 1 * 2rem - .15rem); }
.six-rows .meaning[data-num="3"] { right: calc(2.16rem + 1 * 3rem - .15rem); }
.six-rows .meaning[data-num="4"] { left: calc(100% - 2.16rem - 1 * 3rem - .15rem + .15rem); }
.six-rows .meaning[data-num="5"] { left: calc(100% - 2.16rem - 1 * 4rem - .15rem + .15rem); }
.six-rows .meaning[data-num="6"] { left: calc(100% - 2.16rem - 1 * 5rem - .15rem + .15rem); }
.six-rows .button[data-num="2"] {
  background-size: .76rem auto;
  background-image: url(img/button-meaning-s.png);
}
.six-rows .button[data-num="2"].active {
  background-image: url(img/button-meaning-s-active.png);
}

[data-page="1"] .hhead { background-image: url(img/1-1-hhead-1.png); }
[data-page="1"] .row1[data-num="1"] { background-image: url(img/1-1-button-row1.png); }
[data-page="1"] .row2[data-num="1"] { background-image: url(img/1-1-button-row2.png); }
[data-page="1"] .body1[data-num="1"] { background-image: url(img/1-1-body1-1.png); }
[data-page="1"] .body1[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="1"] .body1[data-num="3"] { background-image: url(img/1-1-body1-3.png); }
[data-page="1"] .body1[data-num="4"] { background-image: url(img/1-1-body1-4.png); }
[data-page="1"] .body1[data-num="5"] { background-image: url(img/1-1-body1-5.png); }
[data-page="1"] .body1[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="1"] .body1[data-num="7"] { background-image: url(img/1-1-body1-7.png); }
[data-page="1"] .body1[data-num="8"] { background-image: url(img/1-1-body1-8.png); }
[data-page="1"] .body2[data-num="1"] { background-image: url(img/1-1-body2-1.png); }
[data-page="1"] .body2[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="1"] .body2[data-num="3"] { background-image: url(img/1-1-body2-3.png); }
[data-page="1"] .body2[data-num="4"] { background-image: url(img/1-1-body2-4.png); }
[data-page="1"] .body2[data-num="5"] { background-image: url(img/1-1-body2-5.png); }
[data-page="1"] .body2[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="1"] .body2[data-num="7"] { background-image: url(img/1-1-body2-7.png); }
[data-page="1"] .body2[data-num="8"] { background-image: url(img/1-1-body2-8.png); }
[data-page="1"] .meaning[data-num="1"] {
  width: 1.6rem;
  height: 2.62rem;
  background-image: url(img/1-1-meaning-1.png);
}
[data-page="1"] .meaning[data-num="2"] {
  width: 2.11rem;
  height: 5.04rem;
  background-image: url(img/1-1-meaning-2.png);
}

[data-page="2"] .hhead { background-image: url(img/1-2-hhead-1.png); }
[data-page="2"] .row1[data-num="1"] { background-image: url(img/1-2-button-row1.png); }
[data-page="2"] .row2[data-num="1"] { background-image: url(img/1-2-button-row2.png); }
[data-page="2"] .row3[data-num="1"] { background-image: url(img/1-2-button-row3.png); }
[data-page="2"] .row4[data-num="1"] { background-image: url(img/1-2-button-row4.png); }
[data-page="2"] .body1[data-num="1"] { background-image: url(img/1-2-body1-1.png); }
[data-page="2"] .body1[data-num="2"] { background-image: url(img/1-2-body1-2.png); }
[data-page="2"] .body1[data-num="3"] { background-image: url(img/1-2-body1-3.png); }
[data-page="2"] .body1[data-num="4"] { background-image: url(img/1-2-body1-4.png); }
[data-page="2"] .body1[data-num="5"] { background-image: url(img/1-2-body1-5.png); }
[data-page="2"] .body1[data-num="6"] { background-image: url(img/1-2-body1-6.png); }
[data-page="2"] .body1[data-num="7"] { background-image: url(img/1-2-body1-7.png); }
[data-page="2"] .body1[data-num="8"] { background-image: url(img/1-2-body1-8.png); }
[data-page="2"] .body2[data-num="1"] { background-image: url(img/1-2-body2-1.png); }
[data-page="2"] .body2[data-num="2"] { background-image: url(img/1-2-body2-2.png); }
[data-page="2"] .body2[data-num="3"] { background-image: url(img/1-2-body2-3.png); }
[data-page="2"] .body2[data-num="4"] { background-image: url(img/1-2-body2-4.png); }
[data-page="2"] .body2[data-num="5"] { background-image: url(img/1-2-body2-5.png); }
[data-page="2"] .body2[data-num="6"] { background-image: url(img/1-2-body2-6.png); }
[data-page="2"] .body2[data-num="7"] { background-image: url(img/1-2-body2-7.png); }
[data-page="2"] .body2[data-num="8"] { background-image: url(img/1-2-body2-8.png); }
[data-page="2"] .body3[data-num="1"] { background-image: url(img/1-2-body3-1.png); }
[data-page="2"] .body3[data-num="2"] { background-image: url(img/1-2-body3-2.png); }
[data-page="2"] .body3[data-num="3"] { background-image: url(img/1-2-body3-3.png); }
[data-page="2"] .body3[data-num="4"] { background-image: url(img/1-2-body3-4.png); }
[data-page="2"] .body3[data-num="5"] { background-image: url(img/1-2-body3-5.png); }
[data-page="2"] .body3[data-num="6"] { background-image: url(img/1-2-body3-6.png); }
[data-page="2"] .body3[data-num="7"] { background-image: url(img/1-2-body3-7.png); }
[data-page="2"] .body3[data-num="8"] { background-image: url(img/1-2-body3-8.png); }
[data-page="2"] .body4[data-num="1"] { background-image: url(img/1-2-body4-1.png); }
[data-page="2"] .body4[data-num="2"] { background-image: url(img/1-2-body4-2.png); }
[data-page="2"] .body4[data-num="3"] { background-image: url(img/1-2-body4-3.png); }
[data-page="2"] .body4[data-num="4"] { background-image: url(img/1-2-body4-4.png); }
[data-page="2"] .body4[data-num="5"] { background-image: url(img/1-2-body4-5.png); }
[data-page="2"] .body4[data-num="6"] { background-image: url(img/1-2-body4-6.png); }
[data-page="2"] .body4[data-num="7"] { background-image: url(img/1-2-body4-7.png); }
[data-page="2"] .body4[data-num="8"] { background-image: url(img/1-2-body4-8.png); }
[data-page="2"] .meaning[data-num="1"] {
  width: 2.62rem;
  height: 6.43rem;
  background-image: url(img/1-2-meaning-1.png);
}
[data-page="2"] .meaning[data-num="2"] {
  width: 2.62rem;
  height: 6.43rem;
  background-image: url(img/1-2-meaning-2.png);
}
[data-page="2"] .meaning[data-num="3"] {
  width: 2.11rem;
  height: 5.04rem;
  background-image: url(img/1-2-meaning-3.png);
}
[data-page="2"] .meaning[data-num="4"] {
  width: 2.11rem;
  height: 5.04rem;
  background-image: url(img/1-2-meaning-4.png);
}

[data-page="3"] .hhead { background-image: url(img/1-3-hhead-1.png); }
[data-page="3"] .row1[data-num="1"] { background-image: url(img/1-3-button-row1.png); }
[data-page="3"] .body1[data-num="1"] { background-image: url(img/1-3-body1-1.png); }
[data-page="3"] .body1[data-num="2"] { background-image: url(img/1-3-body1-2.png); }
[data-page="3"] .body1[data-num="3"] { background-image: url(img/1-3-body1-3.png); }
[data-page="3"] .body1[data-num="4"] { background-image: url(img/1-3-body1-4.png); }
[data-page="3"] .body1[data-num="5"] { background-image: url(img/1-3-body1-5.png); }
[data-page="3"] .body1[data-num="6"] { background-image: url(img/1-3-body1-6.png); }
[data-page="3"] .body1[data-num="7"] { background-image: url(img/1-3-body1-7.png); }
[data-page="3"] .body1[data-num="8"] { background-image: url(img/1-3-body1-8.png); }
[data-page="3"] .meaning[data-num="1"] {
  width: 1.6rem;
  height: 2.96rem;
  background-image: url(img/1-3-meaning-1.png);
}

[data-page="4"] .hhead { background-image: url(img/1-4-hhead-1.png); }
[data-page="4"] .row1[data-num="1"] { background-image: url(img/1-4-button-row1.png); }
[data-page="4"] .row2[data-num="1"] { background-image: url(img/1-4-button-row2.png); }
[data-page="4"] .body1[data-num="1"] { background-image: url(img/1-4-body1-1.png); }
[data-page="4"] .body1[data-num="2"] { background-image: url(img/1-4-body1-2.png); }
[data-page="4"] .body1[data-num="3"] { background-image: url(img/1-4-body1-3.png); }
[data-page="4"] .body1[data-num="4"] { background-image: url(img/1-4-body1-4.png); }
[data-page="4"] .body1[data-num="5"] { background-image: url(img/1-4-body1-5.png); }
[data-page="4"] .body1[data-num="6"] { background-image: url(img/1-4-body1-6.png); }
[data-page="4"] .body1[data-num="7"] { background-image: url(img/1-4-body1-7.png); }
[data-page="4"] .body1[data-num="8"] { background-image: url(img/1-4-body1-8.png); }
[data-page="4"] .body2[data-num="1"] { background-image: url(img/1-4-body2-1.png); }
[data-page="4"] .body2[data-num="2"] { background-image: url(img/1-4-body2-2.png); }
[data-page="4"] .body2[data-num="3"] { background-image: url(img/1-4-body2-3.png); }
[data-page="4"] .body2[data-num="4"] { background-image: url(img/1-4-body2-4.png); }
[data-page="4"] .body2[data-num="5"] { background-image: url(img/1-4-body2-5.png); }
[data-page="4"] .body2[data-num="6"] { background-image: url(img/1-4-body2-6.png); }
[data-page="4"] .body2[data-num="7"] { background-image: url(img/1-4-body2-7.png); }
[data-page="4"] .body2[data-num="8"] { background-image: url(img/1-4-body2-8.png); }
[data-page="4"] .meaning[data-num="1"] {
  width: 3.12rem;
  height: 8.16rem;
  background-image: url(img/1-4-meaning-1.png);
}
[data-page="4"] .meaning[data-num="2"] {
  width: 3.12rem;
  height: 8.16rem;
  background-image: url(img/1-4-meaning-2.png);
}

[data-page="5"] .hhead { background-image: url(img/1-5-hhead-1.png); }
[data-page="5"] .row1[data-num="1"] { background-image: url(img/1-5-button-row1.png); }
[data-page="5"] .row2[data-num="1"] { background-image: url(img/1-5-button-row2.png); }
[data-page="5"] .row3[data-num="1"] { background-image: url(img/1-5-button-row3.png); }
[data-page="5"] .body1[data-num="1"] { background-image: url(img/1-5-body1-1.png); }
[data-page="5"] .body1[data-num="2"] { background-image: url(img/1-5-body1-2.png); }
[data-page="5"] .body1[data-num="3"] { background-image: url(img/1-5-body1-3.png); }
[data-page="5"] .body1[data-num="4"] { background-image: url(img/1-5-body1-4.png); }
[data-page="5"] .body1[data-num="5"] { background-image: url(img/1-5-body1-5.png); }
[data-page="5"] .body1[data-num="6"] { background-image: url(img/1-5-body1-6.png); }
[data-page="5"] .body1[data-num="7"] { background-image: url(img/1-5-body1-7.png); }
[data-page="5"] .body1[data-num="8"] { background-image: url(img/1-5-body1-8.png); }
[data-page="5"] .body2[data-num="1"] { background-image: url(img/1-5-body2-1.png); }
[data-page="5"] .body2[data-num="2"] { background-image: url(img/1-5-body2-2.png); }
[data-page="5"] .body2[data-num="3"] { background-image: url(img/1-5-body2-3.png); }
[data-page="5"] .body2[data-num="4"] { background-image: url(img/1-5-body2-4.png); }
[data-page="5"] .body2[data-num="5"] { background-image: url(img/1-5-body2-5.png); }
[data-page="5"] .body2[data-num="6"] { background-image: url(img/1-5-body2-6.png); }
[data-page="5"] .body2[data-num="7"] { background-image: url(img/1-5-body2-7.png); }
[data-page="5"] .body2[data-num="8"] { background-image: url(img/1-5-body2-8.png); }
[data-page="5"] .body3[data-num="1"] { background-image: url(img/1-5-body3-1.png); }
[data-page="5"] .body3[data-num="2"] { background-image: url(img/1-5-body3-2.png); }
[data-page="5"] .body3[data-num="3"] { background-image: url(img/1-5-body3-3.png); }
[data-page="5"] .body3[data-num="4"] { background-image: url(img/1-5-body3-4.png); }
[data-page="5"] .body3[data-num="5"] { background-image: url(img/1-5-body3-5.png); }
[data-page="5"] .body3[data-num="6"] { background-image: url(img/1-5-body3-6.png); }
[data-page="5"] .body3[data-num="7"] { background-image: url(img/1-5-body3-7.png); }
[data-page="5"] .body3[data-num="8"] { background-image: url(img/1-5-body3-8.png); }
[data-page="5"] .meaning {
  width: 2.11rem;
  height: 8.16rem;
}
[data-page="5"] .meaning[data-num="1"] { background-image: url(img/1-5-meaning-1.png); }
[data-page="5"] .meaning[data-num="2"] { background-image: url(img/1-5-meaning-2.png); }
[data-page="5"] .meaning[data-num="3"] { background-image: url(img/1-5-meaning-3.png); }

[data-page="6"] .hhead { background-image: url(img/1-6-hhead-1.png); }
[data-page="6"] .row1[data-num="1"] { background-image: url(img/1-6-button-row1.png); }
[data-page="6"] .row2[data-num="1"] { background-image: url(img/1-6-button-row2.png); }
[data-page="6"] .row3[data-num="1"] { background-image: url(img/1-6-button-row3.png); }
[data-page="6"] .row4[data-num="1"] { background-image: url(img/1-6-button-row4.png); }
[data-page="6"] .row5[data-num="1"] { background-image: url(img/1-6-button-row5.png); }
[data-page="6"] .row6[data-num="1"] { background-image: url(img/1-6-button-row6.png); }
[data-page="6"] .body1[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body1[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body1[data-num="3"] { background-image: url(img/1-6-body1-3.png); }
[data-page="6"] .body1[data-num="4"] { background-image: url(img/1-6-body1-4.png); }
[data-page="6"] .body1[data-num="5"] { background-image: url(img/1-6-body1-5.png); }
[data-page="6"] .body1[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body1[data-num="7"] { background-image: url(img/1-6-body1-7.png); }
[data-page="6"] .body1[data-num="8"] { background-image: url(img/1-6-body1-8.png); }
[data-page="6"] .body2[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body2[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body2[data-num="3"] { background-image: url(img/1-6-body2-3.png); }
[data-page="6"] .body2[data-num="4"] { background-image: url(img/1-6-body2-4.png); }
[data-page="6"] .body2[data-num="5"] { background-image: url(img/1-6-body2-5.png); }
[data-page="6"] .body2[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body2[data-num="7"] { background-image: url(img/1-6-body2-7.png); }
[data-page="6"] .body2[data-num="8"] { background-image: url(img/1-6-body2-8.png); }
[data-page="6"] .body3[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body3[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body3[data-num="3"] { background-image: url(img/1-6-body3-3.png); }
[data-page="6"] .body3[data-num="4"] { background-image: url(img/1-6-body3-4.png); }
[data-page="6"] .body3[data-num="5"] { background-image: url(img/1-6-body3-5.png); }
[data-page="6"] .body3[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body3[data-num="7"] { background-image: url(img/1-6-body3-7.png); }
[data-page="6"] .body3[data-num="8"] { background-image: url(img/1-6-body3-8.png); }
[data-page="6"] .body4[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body4[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body4[data-num="3"] { background-image: url(img/1-6-body4-3.png); }
[data-page="6"] .body4[data-num="4"] { background-image: url(img/1-6-body4-4.png); }
[data-page="6"] .body4[data-num="5"] { background-image: url(img/1-6-body4-5.png); }
[data-page="6"] .body4[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body4[data-num="7"] { background-image: url(img/1-6-body4-7.png); }
[data-page="6"] .body4[data-num="8"] { background-image: url(img/1-6-body4-8.png); }
[data-page="6"] .body5[data-num="1"] { background-image: url(img/1-6-body5-1.png); }
[data-page="6"] .body5[data-num="2"] { background-image: url(img/1-6-body5-2.png); }
[data-page="6"] .body5[data-num="3"] { background-image: url(img/1-6-body5-3.png); }
[data-page="6"] .body5[data-num="4"] { background-image: url(img/1-6-body5-4.png); }
[data-page="6"] .body5[data-num="5"] { background-image: url(img/1-6-body5-5.png); }
[data-page="6"] .body5[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body5[data-num="7"] { background-image: url(img/1-6-body5-7.png); }
[data-page="6"] .body5[data-num="8"] { background-image: url(img/1-6-body5-8.png); }
[data-page="6"] .body6[data-num="1"] { background-image: url(img/1-6-body6-1.png); }
[data-page="6"] .body6[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body6[data-num="3"] { background-image: url(img/1-6-body6-3.png); }
[data-page="6"] .body6[data-num="4"] { background-image: url(img/1-6-body6-4.png); }
[data-page="6"] .body6[data-num="5"] { background-image: url(img/1-6-body6-5.png); }
[data-page="6"] .body6[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="6"] .body6[data-num="7"] { background-image: url(img/1-6-body6-7.png); }
[data-page="6"] .body6[data-num="8"] { background-image: url(img/1-6-body6-8.png); }
[data-page="6"] .meaning[data-num="1"] {
  width: 3.63rem;
  height: 7.12rem;
  background-image: url(img/1-6-meaning-1.png);
}
[data-page="6"] .meaning[data-num="2"] {
  width: 3.63rem;
  height: 7.12rem;
  background-image: url(img/1-6-meaning-2.png);
}
[data-page="6"] .meaning[data-num="3"] {
  width: 2.62rem;
  height: 7.47rem;
  background-image: url(img/1-6-meaning-3.png);
}
[data-page="6"] .meaning[data-num="4"] {
  width: 2.62rem;
  height: 7.82rem;
  background-image: url(img/1-6-meaning-4.png);
}
[data-page="6"] .meaning[data-num="5"] {
  width: 4.14rem;
  height: 5.74rem;
  background-image: url(img/1-6-meaning-5.png);
}
[data-page="6"] .meaning[data-num="6"] {
  width: 3.12rem;
  height: 7.12rem;
  background-image: url(img/1-6-meaning-6.png);
}

[data-page="7"] .hhead { background-image: url(img/1-7-hhead-1.png); }
[data-page="7"] .row1[data-num="1"] { background-image: url(img/1-7-button-row1.png); }
[data-page="7"] .row2[data-num="1"] { background-image: url(img/1-7-button-row2.png); }
[data-page="7"] .body1[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="7"] .body1[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="7"] .body1[data-num="3"] { background-image: url(img/1-7-body1-3.png); }
[data-page="7"] .body1[data-num="4"] { background-image: url(img/1-7-body1-4.png); }
[data-page="7"] .body1[data-num="5"] { background-image: url(img/1-7-body1-5.png); }
[data-page="7"] .body1[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="7"] .body1[data-num="7"] { background-image: url(img/1-7-body1-7.png); }
[data-page="7"] .body1[data-num="8"] { background-image: url(img/1-7-body1-8.png); }
[data-page="7"] .body2[data-num="1"] { background-image: url(img/1-7-body2-1.png); }
[data-page="7"] .body2[data-num="2"] { background-image: url(img/1-7-body2-2.png); }
[data-page="7"] .body2[data-num="3"] { background-image: url(img/1-7-body2-3.png); }
[data-page="7"] .body2[data-num="4"] { background-image: url(img/1-7-body2-4.png); }
[data-page="7"] .body2[data-num="5"] { background-image: url(img/1-7-body2-5.png); }
[data-page="7"] .body2[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="7"] .body2[data-num="7"] { background-image: url(img/1-7-body2-7.png); }
[data-page="7"] .body2[data-num="8"] { background-image: url(img/1-7-body2-8.png); }
[data-page="7"] .meaning[data-num="1"] {
  width: 2.11rem;
  height: 6.43rem;
  background-image: url(img/1-7-meaning-1.png);
}
[data-page="7"] .meaning[data-num="2"] {
  width: 3.63rem;
  height: 8.16rem;
  background-image: url(img/1-7-meaning-2.png);
}

[data-page="8"] .hhead { background-image: url(img/1-8-hhead-1.png); }
[data-page="8"] .row1[data-num="1"] { background-image: url(img/1-8-button-row1.png); }
[data-page="8"] .row2[data-num="1"] { background-image: url(img/1-8-button-row2.png); }
[data-page="8"] .body1[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="8"] .body1[data-num="2"] { background-image: url(img/body-circle.png); }
[data-page="8"] .body1[data-num="3"] { background-image: url(img/1-8-body1-3.png); }
[data-page="8"] .body1[data-num="4"] { background-image: url(img/1-8-body1-4.png); }
[data-page="8"] .body1[data-num="5"] { background-image: url(img/1-8-body1-5.png); }
[data-page="8"] .body1[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="8"] .body1[data-num="7"] { background-image: url(img/1-8-body1-7.png); }
[data-page="8"] .body1[data-num="8"] { background-image: url(img/1-8-body1-8.png); }
[data-page="8"] .body2[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="8"] .body2[data-num="2"] { background-image: url(img/1-8-body2-2.png); }
[data-page="8"] .body2[data-num="3"] { background-image: url(img/1-8-body2-3.png); }
[data-page="8"] .body2[data-num="4"] { background-image: url(img/1-8-body2-4.png); }
[data-page="8"] .body2[data-num="5"] { background-image: url(img/1-8-body2-5.png); }
[data-page="8"] .body2[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="8"] .body2[data-num="7"] { background-image: url(img/1-8-body2-7.png); }
[data-page="8"] .body2[data-num="8"] { background-image: url(img/1-8-body2-8.png); }
[data-page="8"] .meaning[data-num="1"] {
  width: 1.6rem;
  height: 6.08rem;
  background-image: url(img/1-8-meaning-1.png);
}
[data-page="8"] .meaning[data-num="2"] {
  width: 2.11rem;
  height: 6.08rem;
  background-image: url(img/1-8-meaning-2.png);
}

[data-page="9"] .hhead { background-image: url(img/1-9-hhead-1.png); }
[data-page="9"] .row1[data-num="1"] { background-image: url(img/1-9-button-row1.png); }
[data-page="9"] .body1[data-num="1"] { background-image: url(img/body-circle.png); }
[data-page="9"] .body1[data-num="2"] { background-image: url(img/1-9-body1-2.png); }
[data-page="9"] .body1[data-num="3"] { background-image: url(img/1-9-body1-3.png); }
[data-page="9"] .body1[data-num="4"] { background-image: url(img/1-9-body1-4.png); }
[data-page="9"] .body1[data-num="5"] { background-image: url(img/1-9-body1-5.png); }
[data-page="9"] .body1[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="9"] .body1[data-num="7"] { background-image: url(img/1-9-body1-7.png); }
[data-page="9"] .body1[data-num="8"] { background-image: url(img/1-9-body1-8.png); }
[data-page="9"] .meaning[data-num="1"] {
  width: 2.11rem;
  height: 5.9rem;
  background-image: url(img/1-9-meaning-1.png);
}

[data-page="10"] .hhead { background-image: url(img/1-10-hhead-1.png); }
[data-page="10"] .row1[data-num="1"] { background-image: url(img/1-10-button-row1.png); }
[data-page="10"] .row2[data-num="1"] { background-image: url(img/1-10-button-row2.png); }
[data-page="10"] .body1[data-num="1"] { background-image: url(img/1-10-body1-1.png); }
[data-page="10"] .body1[data-num="2"] { background-image: url(img/1-10-body1-2.png); }
[data-page="10"] .body1[data-num="3"] { background-image: url(img/1-10-body1-3.png); }
[data-page="10"] .body1[data-num="4"] { background-image: url(img/1-10-body1-4.png); }
[data-page="10"] .body1[data-num="5"] { background-image: url(img/1-10-body1-5.png); }
[data-page="10"] .body1[data-num="6"] { background-image: url(img/1-10-body1-6.png); }
[data-page="10"] .body1[data-num="7"] { background-image: url(img/1-10-body1-7.png); }
[data-page="10"] .body1[data-num="8"] { background-image: url(img/1-10-body1-8.png); }
[data-page="10"] .body2[data-num="1"] { background-image: url(img/1-10-body2-1.png); }
[data-page="10"] .body2[data-num="2"] { background-image: url(img/1-10-body2-2.png); }
[data-page="10"] .body2[data-num="3"] { background-image: url(img/1-10-body2-3.png); }
[data-page="10"] .body2[data-num="4"] { background-image: url(img/1-10-body2-4.png); }
[data-page="10"] .body2[data-num="5"] { background-image: url(img/1-10-body2-5.png); }
[data-page="10"] .body2[data-num="6"] { background-image: url(img/1-10-body2-6.png); }
[data-page="10"] .body2[data-num="7"] { background-image: url(img/1-10-body2-7.png); }
[data-page="10"] .body2[data-num="8"] { background-image: url(img/1-10-body2-8.png); }
[data-page="10"] .meaning[data-num="1"] {
  width: 2.11rem;
  height: 5.04rem;
  background-image: url(img/1-10-meaning-1.png);
}
[data-page="10"] .meaning[data-num="2"] {
  width: 1.6rem;
  height: 4.35rem;
  background-image: url(img/1-10-meaning-2.png);
}

[data-page="11"] .hhead { background-image: url(img/1-11-hhead-1.png); }
[data-page="11"] .row1[data-num="1"] { background-image: url(img/1-11-button-row1.png); }
[data-page="11"] .row2[data-num="1"] { background-image: url(img/1-11-button-row2.png); }
[data-page="11"] .body1[data-num="1"] { background-image: url(img/1-11-body1-1.png); }
[data-page="11"] .body1[data-num="2"] { background-image: url(img/1-11-body1-2.png); }
[data-page="11"] .body1[data-num="3"] { background-image: url(img/1-11-body1-3.png); }
[data-page="11"] .body1[data-num="4"] { background-image: url(img/1-11-body1-4.png); }
[data-page="11"] .body1[data-num="5"] { background-image: url(img/1-11-body1-5.png); }
[data-page="11"] .body1[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="11"] .body1[data-num="7"] { background-image: url(img/1-11-body1-7.png); }
[data-page="11"] .body1[data-num="8"] { background-image: url(img/1-11-body1-8.png); }
[data-page="11"] .body2[data-num="1"] { background-image: url(img/1-11-body2-1.png); }
[data-page="11"] .body2[data-num="2"] { background-image: url(img/1-11-body2-2.png); }
[data-page="11"] .body2[data-num="3"] { background-image: url(img/1-11-body2-3.png); }
[data-page="11"] .body2[data-num="4"] { background-image: url(img/1-11-body2-4.png); }
[data-page="11"] .body2[data-num="5"] { background-image: url(img/1-11-body2-5.png); }
[data-page="11"] .body2[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="11"] .body2[data-num="7"] { background-image: url(img/1-11-body2-7.png); }
[data-page="11"] .body2[data-num="8"] { background-image: url(img/1-11-body2-8.png); }
[data-page="11"] .meaning[data-num="1"] {
  width: 1.6rem;
  height: 5.04rem;
  background-image: url(img/1-11-meaning-1.png);
}
[data-page="11"] .meaning[data-num="2"] {
  width: 1.6rem;
  height: 5.04rem;
  background-image: url(img/1-11-meaning-2.png);
}

[data-page="12"] .hhead { background-image: url(img/1-12-hhead-1.png); }
[data-page="12"] .row1[data-num="1"] { background-image: url(img/1-12-button-row1.png); }
[data-page="12"] .row2[data-num="1"] { background-image: url(img/1-12-button-row2.png); }
[data-page="12"] .row3[data-num="1"] { background-image: url(img/1-12-button-row3.png); }
[data-page="12"] .body1[data-num="1"] { background-image: url(img/1-12-body1-1.png); }
[data-page="12"] .body1[data-num="2"] { background-image: url(img/1-12-body1-2.png); }
[data-page="12"] .body1[data-num="3"] { background-image: url(img/1-12-body1-3.png); }
[data-page="12"] .body1[data-num="4"] { background-image: url(img/1-12-body1-4.png); }
[data-page="12"] .body1[data-num="5"] { background-image: url(img/body-circle.png); }
[data-page="12"] .body1[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="12"] .body1[data-num="7"] { background-image: url(img/1-12-body1-7.png); }
[data-page="12"] .body1[data-num="8"] { background-image: url(img/1-12-body1-8.png); }
[data-page="12"] .body2[data-num="1"] { background-image: url(img/1-12-body2-1.png); }
[data-page="12"] .body2[data-num="2"] { background-image: url(img/1-12-body2-2.png); }
[data-page="12"] .body2[data-num="3"] { background-image: url(img/1-12-body2-3.png); }
[data-page="12"] .body2[data-num="4"] { background-image: url(img/1-12-body2-4.png); }
[data-page="12"] .body2[data-num="5"] { background-image: url(img/1-12-body2-5.png); }
[data-page="12"] .body2[data-num="6"] { background-image: url(img/1-12-body2-6.png); }
[data-page="12"] .body2[data-num="7"] { background-image: url(img/1-12-body2-7.png); }
[data-page="12"] .body2[data-num="8"] { background-image: url(img/1-12-body2-8.png); }
[data-page="12"] .body3[data-num="1"] { background-image: url(img/1-12-body3-1.png); }
[data-page="12"] .body3[data-num="2"] { background-image: url(img/1-12-body3-2.png); }
[data-page="12"] .body3[data-num="3"] { background-image: url(img/1-12-body3-3.png); }
[data-page="12"] .body3[data-num="4"] { background-image: url(img/1-12-body3-4.png); }
[data-page="12"] .body3[data-num="5"] { background-image: url(img/1-12-body3-5.png); }
[data-page="12"] .body3[data-num="6"] { background-image: url(img/body-circle.png); }
[data-page="12"] .body3[data-num="7"] { background-image: url(img/1-12-body3-7.png); }
[data-page="12"] .body3[data-num="8"] { background-image: url(img/1-12-body3-8.png); }
[data-page="12"] .meaning {
  width: 2.11rem;
  height: 5.39rem;
}
[data-page="12"] .meaning[data-num="1"] { background-image: url(img/1-12-meaning-1.png); }
[data-page="12"] .meaning[data-num="2"] { background-image: url(img/1-12-meaning-2.png); }
[data-page="12"] .meaning[data-num="3"] { background-image: url(img/1-12-meaning-3.png); }