.quiz-52{ 
  display: flex;
  gap:1.6rem;
  align-items: center;
}
.quiz-52--step1 {
  position: relative;
  display: flex;
  gap:1rem;
  padding-top: 3rem;
  align-self: flex-start;
}
.quiz-52--step1-tile {
  display: flex;
  flex-direction: column;
  gap:0.4rem;
  align-items: center;
  width: 6rem;
  margin: 0 0 8rem;
}
.quiz-52--step1-area {
  width: 100%;
  height: calc((3rem * 6) + (0.1rem * 5) );
  outline: 1px solid #000;
  display: flex;
  flex-direction: column;
  gap:0.1rem;
  padding:0;

  background: url(./images/dotline.svg) repeat-y 0 0 / 100%;
}
.quiz-52--step1-area .quiz-52--step1-btn {
  width: 100%;
  height: 3rem;
}
.quiz-52--step1-control {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  flex-wrap: wrap;
  gap:.6rem;
  width: 100%;
}
.quiz-52--step1-btn {
  width: 6rem;
  background-color: antiquewhite;
  height: 3rem;
  font-family: KaTeX_Main;
}
.quiz-52--step1-btn i {
  font-family: KaTeX_Math;
  font-style: italic;
  font-size: 1.5rem;
}
.quiz-52--step1-tile :focus + label {
  outline: .2rem solid #000;
  outline-offset: .3rem;
}
.quiz-52--step1-tile :checked + label {
  background: url(./images/input_check_on.svg) no-repeat 50% 50% / 2.4rem;
}
.quiz-52--step1-tile label {
  width: 2.4rem;
  height: 2.4rem;
  background: url(./images/input_check_off.svg) no-repeat 50% 50% / 2.4rem;
  display: block;
}
.quiz-52--step1-tile :checked ~ .quiz-52--step1-control {
  display: flex;
}
.quiz-52 .icon-arrow{
  transform: translateY(-.9rem);
}
.quiz-52--step3 {
  position: relative;
  padding: 5.4rem 0 0 0;
  align-self: flex-start;
}
.quiz-52--step3-area {
  width: 13.3rem;
  min-height: 19.1rem;
  border-radius: 0.4rem;
  border:1px solid #000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  gap:1px;
  padding: .2rem;
}
.quiz-52--step3-area > .btn-base{
  width: 9.8rem;
  position: absolute;
  top: calc(50% - 1.2rem);
  left: calc(50% - 4.9rem);
}
.quiz-52--step2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 13.3rem;
  height: 18.5rem;
  gap:1rem;
  padding: 5.4rem 0 8rem;
  position: relative;
}
.quiz-52--step2 .btn-base span{display: inline-block;}
.quiz-52--step2 .btn-base{
  width: 13rem;
  min-height: 5.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.quiz-52--step4 {
  padding: 5.4rem 0 8rem;
  position: relative;
}
.quiz-52--step4-area {
  width: 13.3rem;
  height: 4.8rem;
  border-radius: 0.4rem;
  border:1px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.quiz-52--step4 input{
  width: 13.3rem;
  height: 4.8rem;
  border-radius: 0.4rem;
  border:1px solid #000;
  padding: 0 1rem;
  text-align: center;
  font-size: 2.4rem;
}
.quiz-52--step4 input:focus {
  background-color: #EBF1F5;
}

*{box-sizing: border-box;}
.btn-base{
  width: auto;
  height: auto;
  background-color: #0880DB;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.4rem;
  flex-shrink: 0;
  padding: 0.4rem .4rem;
}
.btn-base:disabled {
  filter: grayscale(1);
  opacity: .4;
}
.btn-base:hover,
.btn-base:focus{
  background-color: #0061AB;
  transition: all 200ms;
}
[data-value="+a"]{
  background: url(./images/item1.svg) no-repeat 0 0 / 100% 100%;
}
[data-value="-a"]{
  background: url(./images/item2.svg) no-repeat 0 0 / 100% 100%;
}
[data-value="+b"]{
  background: url(./images/item3.svg) no-repeat 0 0 / 100% 100%;
}
[data-value="-b"]{
  background: url(./images/item4.svg) no-repeat 0 0 / 100% 100%;
}

[data-value="+a"]:hover,
[data-value="+a"]:focus{
  background: #1e97de;
}
[data-value="-a"]:hover,
[data-value="-a"]:focus{
  background: #31bcc3;
}
[data-value="+b"]:hover,
[data-value="+b"]:focus{
  background: #f27494;
}
[data-value="-b"]:hover,
[data-value="-b"]:focus{
  background: #8e74cc;
}


.quiz-52 h3{
  position: absolute;
  top:0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.quiz-52--step4 h3 {
  top: -7.1rem;
}
.quiz-52--step3-1,
.quiz-52--step3-2{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap:.1rem;
}
.quiz-52--step3 .clone {
  width: 6.3rem;
  height: 3rem;
}
.quiz-52--step1-tile .clone {
  animation-name: calcHide;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-duration: 400ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
.quiz-52--step1-tile .clone.hide-0{animation-delay: 0ms;animation-play-state:running;}
.quiz-52--step1-tile .clone.hide-1{animation-delay: 400ms;animation-play-state:running;}
.quiz-52--step1-tile .clone.hide-2{animation-delay: 800ms;animation-play-state:running;}
.quiz-52--step1-tile .clone.hide-3{animation-delay: 1200ms;animation-play-state:running;}
.quiz-52--step1-tile .clone.hide-4{animation-delay: 1600ms;animation-play-state:running;}
.quiz-52--step1-tile .clone.hide-5{animation-delay: 2000ms;animation-play-state:running;}
.quiz-52--step1-tile .clone.hide-6{animation-delay: 2400ms;animation-play-state:running;}



@keyframes calcHide {
  0% {opacity: 1;}
  30% {opacity: .5;}
  60% {opacity: 1;}
  99% {opacity: 0;}
  100% {opacity: 0; display: none;}
}
.ex1 {padding-left: 3rem;}
.rs-1 {

  display: flex;
  gap: 5rem;
}
.rs-1 .exam-item{
  margin: 0 !important;
}
[data-answer-group] .page-rule{margin-left: 3rem;}
.page-result--item .exam-item {
  margin: 0 0 2rem;
}
.img{padding-left:  2.6rem;}


.quiz-52--step4 input {
  text-align: center;
  font-family: 'inputMath', 'KaTeX_Math' !important;
}
[data-browser="safari"] .quiz-52--step4 input,
[data-platform="ios"] .quiz-52--step4 input {font-family:inherit !important;}