.finger--btn {
  position: absolute;
  top: -0.4rem;
  left: 2rem;
}
.pr{position: relative !important; top:0 !important}

.finger--btn[data-toggle-state="true"] {display: none;}

.img1{
  width: 40rem;
}
.img1 svg{width: 100%;}



.quiz-80--card-item {
  display: flex;
  width: 4.2rem;
  height: 5.6rem;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0;
  font: inherit;
  background: transparent;
}
.game-card--back-inner {
  background-color: transparent;
}
.quiz-80--card-item:nth-child(1) .game-card--back{background: url(./images/card1.svg) no-repeat 50% 50% / 100%;}
.quiz-80--card-item:nth-child(2) .game-card--back{background: url(./images/card2.svg) no-repeat 50% 50% / 100%;}
.quiz-80--card-item:nth-child(3) .game-card--back{background: url(./images/card3.svg) no-repeat 50% 50% / 100%;}
.quiz-80--card-item:nth-child(4) .game-card--back{background: url(./images/card4.svg) no-repeat 50% 50% / 100%;}
.game-card--back {
  background-color: #fff;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  outline: 0;
  padding:0;
} 

.quiz-80--card {
  display: flex;
  gap:1rem;
}
.quiz-80--card-item.on .game-card{transform: rotateY(180deg);}
.game-card{transform: rotateY(0deg);}
.game-card.on {transform: rotateY(180deg);}
.game-card--front,
.game-card--back {
  position: absolute;
  width: 100%; 
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left:0;
}
.game-card--front {
  background-color: #FFE5C0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  outline: 0;
}
.game-card--front::before {
  content:"";
  display: block;
  width: 100%;
  height: 100%;
  /* border-radius: 1.6rem; */
  /* background: url(../images/game/card-bg0.png) repeat 50% 50% / 12.1rem; */
}
.game-card {
  position: relative;
  width: 100%; 
  height: 100%; 
  position: relative;
  transition: .8s;
  transform-style: preserve-3d;
}
.game-card--back {
  font-size: 3rem;
}
.game-card--back {
  position: relative;
  width: 100%;
  height: 100%;
  /* background: url(../images/game/card-bg1.png) repeat 50% 50% / 12.1rem; */
  /* outline:.4rem solid #8A8A8A;
  outline-offset: -.4rem; */
  /* border-radius: 2rem; */
  /* padding: 2rem; */
  display: flex;
  /* box-shadow: .4rem .4rem 0 0 #00000026; */
  transform: rotateY(180deg);
}
.game-card--back-inner {
  display: flex;
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  /* border-radius: 1.6rem; */
  justify-content: center;
  align-items: center;
  /* padding: 0 2rem; */
  text-align: center;
  font-weight: 400;
} 
.quiz-80--text{
  display: flex;
  align-items: baseline;
  gap:.4rem;
  /* font-family: 'KaTeX_Main'; */
  font-size: 2.1rem;
  /* line-height: 1; */
  /* width: 20rem; */
  justify-content: center;
  /* margin-top: 3rem; */
  transform: translateY(0.2rem);
}
.quiz-80--text i {
  font-family: 'KaTeX_Main';
  font-size: 2.6rem;
  display: flex;
  align-items: center;
  line-height: 1;
  font-style: italic;
}
.quiz-80--head {
  position: relative;
}
.quiz-80--head-wrap{
  display: flex;
  gap: 2rem; 
  align-items: center;
}

.page-rule{position: relative;}
.page-rule--list-item > div .num{transform: translateY(-.1rem);}
.page-rule--list-item.n2 .txt{width: 50rem;}
.quiz-80--memo{
  position: absolute;
  top: 0rem;
  right: 0;
  width:17.6rem;
  height: 19.3rem;
  background: url(./images/memo.png) no-repeat 0 0 / 100%;
  padding:2.6rem 2.9rem;
}
.quiz-80--memo li {
  display: flex;
  align-items: center;
  gap:.8rem
}
.quiz-80--memo h4 {
  color:#078C23;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.quiz-80--memo li b{
  display: block;
  transform: translateY(-.2rem);
}
.quiz-80--memo li:nth-child(1) b{color: #FDBA4D;}
.quiz-80--memo li:nth-child(2) b{color: #59C5C7;}
.quiz-80--memo li:nth-child(3) b{color: #F1729E;}
.quiz-80--memo li:nth-child(4) b{color: #8781BD;}

.page-example--content {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.quiz-80--text b{color: #F1729E;display: block;transform: translateY(-0.3rem);}

.page-rule--list-item{opacity: 0; display: none;}
.page-rule--list-item.on{ 
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation-name:textShow;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-duration: 300ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.page-example{position: relative;}
.f2.finger--btn {
  top:0rem;
  left: 2rem;
}
.page-example--content{display: none;}
.page-example[data-toggle-state="true"] .page-example--content{display: flex;}

[data-ani="2"]{position: relative;}
[data-ani="2"]::after{
  content:"";
  position: absolute;
  width: 11.8rem;
  height: 2.8rem;
  border:.2rem dashed red;
  opacity: 0;
  transition: all 300ms;
  left: -0.6rem;
  top: -0.1rem;
  }
[data-ani="2"].on::after{opacity: 1;}

[data-ani="3"]{opacity: 0;transition: all 300ms;}
[data-ani="3"].on{opacity: 1;}

.quiz-80--text .math{display: flex;align-items: center;gap: .4rem;font-size: 3rem;transform: translateY(0.4rem); position: relative;}
.quiz-80--text .math b{transform: translateY(-1rem);}

.quiz-80--text .redline2,
.quiz-80--text .redline3,
.quiz-80--text .redline{
  content:"";
  position: absolute;
  width: 2.8rem;
  height: 4.8rem;
  border:.2rem dashed red;
  opacity: 1;
  transition: all 300ms;
  animation-name:shiny;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-duration: 600ms;
  animation-iteration-count:3;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
.redline{
  left: 3.4rem;
  top: -0.1rem;
}
.redline2{
  left: 11.5rem;
  top: -0.1rem;
}
.redline3{
  left: 17.9rem;
  top: -0.1rem;
}
.quiz-80--text .redline.on{opacity: 1; animation-play-state:running;}
.quiz-80--text .redline2.on{opacity: 1; animation-play-state:running;}
.quiz-80--text .redline3.on{opacity: 1; animation-play-state:running;}

@keyframes shiny {
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity: 0;}
}