.quiz-racing{
  width: 100%;
  position: relative;
  display: flex;
}
.quiz-racing--main {
  position: relative;
  padding-top: 3rem;
  z-index: 1;
}
.bg1 {
  width: 45.7rem;
}
.bg2 {
  width: 33.6rem;
  position: absolute;
  top: 33.6rem;
  left: 6.3rem;
  z-index: 1;
}
.car-btn {
  position: absolute;
  top: 1.5rem;
  z-index: 5;
  filter: grayscale(0);
  transition: all 300ms ease-in;
}
.car-btn[data-state="complete"] {
  filter:grayscale(1) !important;
}
.car-btn[data-state="complete"] + .quiz-racing--main-area .exam {display: none !important;}
.car-btn img{width: 100%; display: block;}
.car-btn.n1 {
  left: 5rem;
  width: 9.5rem;
  height: 9.8rem;
  background: url(./images/c1.svg) no-repeat 50% 50% / 9.5rem;
}
.car-btn.n2 {
  left: 15rem;
  width: 7.4rem;
  height: 9.8rem;
  background: url(./images/c2.svg) no-repeat 50% 50% / 7.4rem;
}
.car-btn.n3 {
  left: 23.4rem;
  width: 8.6rem;
  height: 9.8rem;
  background: url(./images/c3.svg) no-repeat 50% 50% / 8.6rem;
}
.car-btn.n4 {
  left: 32rem;
  width: 9.2rem;
  height: 9.8rem;
  background: url(./images/c4.svg) no-repeat 50% 50% / 9.2rem;
}
.car-btn.n1:focus,
.car-btn.n1:hover {
  background: url(./images/c1_on.svg) no-repeat 50% 50% / 9.5rem;
}
.car-btn.n2:focus,
.car-btn.n2:hover {
  background: url(./images/c2_on.svg) no-repeat 50% 50% / 7.4rem;
}
.car-btn.n3:focus,
.car-btn.n3:hover {
  background: url(./images/c3_on.svg) no-repeat 50% 50% /  8.6rem;
}
.car-btn.n4:focus,
.car-btn.n4:hover {
  background: url(./images/c4_on.svg) no-repeat 50% 50% / 9.2rem;
}
.car-btn:disabled {
  filter: grayscale(1);
}
.car-btn[data-toggle-state="true"]:disabled {
  filter: grayscale(0);
}
.ex1--line {
  position: absolute;
  top: 9rem;
  left: 4.8rem;
  width: 36rem;
  height: 21rem;
  display: block;
  overflow: hidden;
}
.ex1--line svg{
  z-index: 1;
  position: relative;
  width: 36rem !important;
  height: 29rem !important;
}
.quiz-racing--main-area{
  position: absolute;
  top:0;
  left:0;
  z-index: 3;
}
.quiz-racing--main-area[data-toggle-state="true"] {
  z-index: 4;
}
.quiz-racing--main-area .ex1--line path {
  stroke: #0880DB;
  stroke-width: 4;
  fill: none;
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  transition: none;
}
.quiz-racing--main-area.on .ex1--line {height: 29rem; }
.quiz-racing--main-area.on .exam.n2 {display: flex;}
.quiz-racing--main-area[data-toggle-state="true"] .ex1--line path {
  stroke-dashoffset:0;  
  transition: stroke-dashoffset 6s linear;
}
.quiz-racing .box.ani > div {
  background-color: #FFECEC;
  color:#D54551;
}
.quiz-racing .box.n6.ani > div {
  background-color: #E1F7FF;
  color:#00ADEF;
}
.quiz-racing .box {
  width: 5rem;
  height: 2.7rem;
  border-radius: .5rem;
  border: 1px solid #C0C1C3;
  position: absolute;
  z-index: 3;
  background-color: #fff;

}
.quiz-racing .box > div {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: .5rem;
  border: 1px solid #ED1C24;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-racing .box .katex-display{
  font-size: 1.2rem;
}
.ico-math2{
  position: absolute;
  top:0;
  left:0;
  width: 2.2rem;
  height: 2.2rem;
  background: url(./images/ico-div.svg) no-repeat 50% 50% / 2.2rem;
  z-index: 2;
}
.ico-math1{
  position: absolute;
  top:0;
  left:0;
  width: 2.2rem;
  height: 2.2rem;
  background: url(./images/ico-times.svg) no-repeat 50% 50% / 2.2rem;
  z-index: 2;
}
.ico-math1.on {background: url(./images/ico-times-on.svg) no-repeat 50% 50% / 2.2rem}
.ico-math2.on {background: url(./images/ico-div-on.svg) no-repeat 50% 50% / 2.2rem}
.quiz-racing .box.n1{top: 12.7rem;}
.quiz-racing .box.n2{top: 20.3rem;}
.quiz-racing .box.n3{top: 25.7rem;}
.quiz-racing .box.n4{top: 28.7rem;height: 4.6rem;}
.quiz-racing .box.n4>div{border-color: #F47C20;}
.quiz-racing .box.n5{top: 33.8rem;width: 7.7rem;}
.quiz-racing .box.n5>div{border-color: #A6A6A9;}
.quiz-racing .box.n5 .katex-display{font-size: 0.9rem;}
.quiz-racing .box.n6{top: 37rem;height: 4.6rem;}
.quiz-racing .box.n6>div{border-color: #00ADEF;}
.exam-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 15rem;
  gap: 1rem;
}
.quiz-racing .exam{
  position: absolute;
  top: 15rem;
  left: 52rem;
  display: none;
  flex-direction: column;
  gap:1rem;
}
.quiz-racing .exam.n1.on{
  display: flex;
}
.quiz-racing .exam.n2.on{
  display: flex;
}
:checked + .btn-label {
  background-color: #FFE8D7;     
}
.btn-label {
  border:.2rem solid #F47C20;
  width: 7rem;
  aspect-ratio: 1 / 1;
  min-height: 3rem;
  padding: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background-color: #fff;
}
:focus + .btn-label {
  outline: .2rem solid #000;
  outline-offset: .3rem;
}
.n2 .btn-label {
  border:.2rem solid #00ADEF;
}
.n2 :checked + .btn-label {
  background-color: #E1F7FF;     
}
.quiz-racing--side .icon-arrow{rotate:180deg}
.quiz-racing--side{
  position: absolute;
  top: 7rem;
  right: 0;
  border: .2rem solid #A6A6A9;
  width: 25rem;
  height: 6.2rem;
  border-radius: .8rem;
  display: flex;
  align-items:center;
  justify-content: center;
  gap:1rem;
}
[data-toggle-target="ex1--1"] .box.n1{left: 7.2rem;}
[data-toggle-target="ex1--1"] .box.n2{left: 24.9rem;}
[data-toggle-target="ex1--1"] .box.n3{left: 33.7rem;}
[data-toggle-target="ex1--1"] .box.n4{left: 33.7rem;}
[data-toggle-target="ex1--1"] .box.n5{left: 32.4rem;}
[data-toggle-target="ex1--1"] .box.n6{left: 33.7rem;}
[data-toggle-target="ex1--1"] .ico-math1{top: 16.2rem;left: 13.1rem;}
[data-toggle-target="ex1--1"] .ico-math2{top: 23.6rem;left: 31rem;}

[data-toggle-target="ex1--2"] .box.n1{left: 24.9rem;}
[data-toggle-target="ex1--2"] .box.n2{left: 33.7rem;}
[data-toggle-target="ex1--2"] .box.n3{left: 24.9rem;}
[data-toggle-target="ex1--2"] .box.n4{left: 24.9rem;}
[data-toggle-target="ex1--2"] .box.n5{left: 23.5rem;}
[data-toggle-target="ex1--2"] .box.n6{left: 24.9rem;}
[data-toggle-target="ex1--2"] .ico-math1{top: 16.2rem;left: 31rem;}
[data-toggle-target="ex1--2"] .ico-math2{top: 23.6rem;left: 31rem;}

[data-toggle-target="ex1--3"] .box.n1{left: 16.1rem;}
[data-toggle-target="ex1--3"] .box.n2{left: 7.2rem;}
[data-toggle-target="ex1--3"] .box.n3{left: 16.1rem;}
[data-toggle-target="ex1--3"] .box.n4{left: 16.1rem;}
[data-toggle-target="ex1--3"] .box.n5{left: 14.8rem;}
[data-toggle-target="ex1--3"] .box.n6{left: 16.1rem;}
[data-toggle-target="ex1--3"] .ico-math1{top: 16.2rem;left: 13.1rem;}
[data-toggle-target="ex1--3"] .ico-math2{top: 23.6rem;left: 13.1rem;}

[data-toggle-target="ex1--4"] .box.n1{left: 33.7rem;}
[data-toggle-target="ex1--4"] .box.n2{left: 16.1rem;}
[data-toggle-target="ex1--4"] .box.n3{left: 7.2rem;}
[data-toggle-target="ex1--4"] .box.n4{left: 7.2rem;}
[data-toggle-target="ex1--4"] .box.n5{left: 6rem;}
[data-toggle-target="ex1--4"] .box.n6{left: 7.2rem;}
[data-toggle-target="ex1--4"] .ico-math1{top: 16.2rem;left: 31rem;}
[data-toggle-target="ex1--4"] .ico-math2{top: 23.6rem;left: 13.1rem;}

.btn-base {
  width: 100%;
  height: 4rem;
  background-color: #0880DB;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.btn-base:hover,
.btn-base:focus{
  background-color: #0061AB;
  transition: all 200ms;
}
[data-state="complete"] + .quiz-racing--main-area[data-toggle-state="true"] {
  z-index: 3;
}
[data-state="complete"] + .quiz-racing--main-area .ico-math1.on {background: url(./images/ico-times.svg) no-repeat 50% 50% / 2.2rem}
[data-state="complete"] + .quiz-racing--main-area .ico-math2.on {background: url(./images/ico-div.svg) no-repeat 50% 50% / 2.2rem}
.car-btn[data-toggle-state="true"][data-state="complete"] + .quiz-racing--main-area .ex1--line path {
  stroke: #9fafbe;
}
.car-btn[data-toggle-state="true"]:not([data-state="complete"]) {
  animation-name: brumbrum;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-fill-mode: forwards;
  animation-duration: 400ms;
}
@keyframes brumbrum {
  0% {transform: translate(0,0);}
  20% {transform: translate(-.1rem, 0);}
  40% {transform: translate(0, -.1rem);}
  60% {transform: translate(.1rem,0);}
  80% {transform: translate(0, .1rem);}
  100% {transform: translate(0,0);}
}

.ex1--last label[aria-label="1"]::after{content: '①';}
.ex1--last label[aria-label="2"]::after{content: '②';}
.ex1--last label[aria-label="3"]::after{content: '③';}
.ex1--last label[aria-label="4"]::after{content: '④';}
.ex1--last label{
  padding: .2rem .6rem;
}
.ex1--last :focus + label {outline: .2rem solid #000; outline-offset: .3rem;}
.ex1--last :checked + label[aria-label="1"]::after{content: '❶'; color:#078C23}
.ex1--last :checked + label[aria-label="2"]::after{content: '❷'; color:#078C23}
.ex1--last :checked + label[aria-label="3"]::after{content: '❸'; color:#078C23}
.ex1--last :checked + label[aria-label="4"]::after{content: '❹'; color:#078C23}

.ex1--last{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rem;
  gap:1rem;
  margin-top: 5rem;
  font:'Pretendard';
  font-size: 1.8rem;
}
[data-mode="complete"] .ex1--last [data-result-answer="X"] + label::after{ color: #D54551 !important;}
[data-mode="complete"] .ex1--last [data-result-answer="X"] + label{
  border:0 !important;
  background-color: transparent !important;
}

.exam-item--cont.t1{
  transform: translateY(-1.3rem);
}
.exam-item--cont.t2{
  transform: translateY(-0.3rem);
}
.exam-item--cont{
  display: flex;
  flex-direction: column;
  gap:1.2rem;
}