.quiz-80 {
  height: 48.6rem;
}

.quiz-80--card-item {
  display: flex;
  width: 4.2rem;
  height: 5.6rem;
  justify-content: center;
  align-items: center;
}
.quiz-80 .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%;}
.quiz-80 .game-card--back {
  background-color: #fff;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  outline: 0;
  padding:0;
} 
.quiz-80 .game-card--front {
  background-color: #FFE5C0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  outline: 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 {
  border:1.6rem solid #fff;
  outline:.4rem solid #8A8A8A;
  outline-offset: -.4rem;
  border-radius: 2rem;
  box-shadow: .4rem .4rem 0 0 #00000026;
}

.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 i{margin-right: .4rem;}
.quiz-80--card-2{margin: 0 .4rem;}
.quiz-80--card-3{margin: 0 .4rem;}
.quiz-80--text b{margin-right: .4rem;}
.quiz-80--text{
  position: absolute;
  top: 7rem;
  left:0;
  display: flex;
  align-items: baseline;
  font-family: 'KaTeX_Main';
  font-size: 2.6rem;
  line-height: 1;
  width: 20rem;
  justify-content: center;
  /* margin-top: 3rem; */
}
.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;
  margin-top: 4rem;
}
.quiz-80--head-wrap{
  display: flex;
  gap: 2rem; 
  align-items: center;
}
.btn-result{pointer-events: none;}
[data-step="2"] .btn-result{pointer-events: visible;}
[data-step="2"] .quiz-80--main {display: flex;}
.quiz-80--main {
  position: relative;
  width: 90%;
  display: none;
  flex-wrap: wrap;
  gap:2rem;
  height: 43rem;
  align-items: center;
  justify-content: center;
}
.quiz-80--main-tit{
  width: 11rem;
  position: absolute;
  top: 1rem;
  left: calc(50% - 1.6rem);
  z-index: 2;
  pointer-events: none;
}
.quiz-80--honeycomb {
  position: relative;
  width: 51rem;
  display: flex;
  flex-wrap: wrap;
  gap:2rem;
  height: 30rem;
  align-items: center;
  justify-content: center;
}

.quiz-80--honeycomb::before {
  content: "";
  position: absolute;
  top: 6.7rem;
  left: -1.1rem;
  display: block;
  width: 59.5rem;
  height: 29.6rem;
  background: url(./images/img2.png) no-repeat 50% 100% / 100% 37.6rem;
  z-index: 0;
}
.quiz-80--item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  position: absolute;
}
.quiz-80--item :checked + label::before{
  content:"";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23cc7204'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
  background-size: 2.4rem;
}

.quiz-80--item :focus + label::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  bottom:.3rem;
  left: calc(50% - 1.5rem);
  border: .2rem solid #000;
}
.quiz-80--item label > span{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.quiz-80--item .katex-display{margin: 0;}
.quiz-80--item label{width: 100%; height: 100%; position: relative; z-index: 1;}
.quiz-80--item :checked ~ span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points=' 100,20 170.71,65 170.71,135 100,180 29.29,135 29.29,65' fill='%23ffd775' stroke='%23f59621' stroke-width='3'/%3E%3C/svg%3E");
}
.quiz-80--item > span {
  display: block;
  width: 8rem;
  height: 9rem;
  position: absolute;
  left:0;
  top:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points=' 100,20 170.71,65 170.71,135 100,180 29.29,135 29.29,65' fill='%23FFFFFF' stroke='%23f59621' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 11.2rem 11.2rem;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(90deg) translate(-1.6rem, 1.1rem);
  transform-origin: 50% 50%;
  z-index: 0;
  pointer-events: none;

}
.quiz-80--item:nth-child(1){top:0; left:calc(12.9rem * 2);}
.quiz-80--item:nth-child(2){top:0; left:calc(12.9rem * 3);}

.quiz-80--item:nth-child(3){top:4rem; left:6.4rem;}
.quiz-80--item:nth-child(4){top:4rem; left:calc(6.4rem + (12.9rem * 1));}
.quiz-80--item:nth-child(5){top:4rem; left:calc(6.4rem + (12.9rem * 3));}

.quiz-80--item:nth-child(6){top:8rem; left:calc(12.9rem * 1);}
.quiz-80--item:nth-child(7){top:8rem; left:calc(12.9rem * 2);}
.quiz-80--item:nth-child(8){top:8rem; left:calc(12.9rem * 3);}

.quiz-80--item:nth-child(9){top:12rem; left:calc(6.4rem + (12.9rem * 1));}
.quiz-80--item:nth-child(10){top:12rem; left:calc(6.4rem + (12.9rem * 2));}
.quiz-80--item:nth-child(11){top:12rem; left:calc(6.4rem + (12.9rem * 3));}

.quiz-80--item:nth-child(12){top:16rem; left:0;}
.quiz-80--item:nth-child(13){top:16rem; left:calc(12.9rem * 1);}
.quiz-80--item:nth-child(14){top:16rem; left:calc(12.9rem * 2);}

.quiz-80--item:nth-child(15){top:20rem; left:6.4rem;}
.quiz-80--item:nth-child(16){top:20rem; left:calc(6.4rem + (12.9rem * 2));}
.quiz-80--item:nth-child(17){top:20rem; left:calc(6.4rem + (12.9rem * 3));}

.quiz-80--item:nth-child(18){top:24rem; left:calc(12.9rem * 1);}
.quiz-80--item:nth-child(19){top:24rem; left:calc(12.9rem * 2);}
.quiz-80--item:nth-child(20){top:24rem; left:calc(12.9rem * 3);}

.quiz-80--item:nth-child(21){top:4rem; left:calc(6.4rem + (12.9rem * 2));}
.quiz-80--item:nth-child(22){top:8rem; left:calc(12.9rem * 4);}
.quiz-80--item:nth-child(23){top:12rem; left:calc(6.4rem + (12.9rem * 0));}
.quiz-80--item:nth-child(24){top:16rem; left:calc(12.9rem * 3);}
.quiz-80--item:nth-child(25){top:20rem; left:calc(6.4rem + (12.9rem * 1));}
.quiz-80--item:nth-child(21)>span,
.quiz-80--item:nth-child(22)>span,
.quiz-80--item:nth-child(23)>span,
.quiz-80--item:nth-child(24)>span,
.quiz-80--item:nth-child(25)>span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points=' 100,20 170.71,65 170.71,135 100,180 29.29,135 29.29,65' fill='%23fdb912' stroke='%23f59621' stroke-width='3'/%3E%3C/svg%3E");
}


/* .quiz-80--item::after{position: absolute; top:0; left:0; color:red}
.quiz-80--item:nth-child(1)::after{content:"1"}
.quiz-80--item:nth-child(2)::after{content:"2"}
.quiz-80--item:nth-child(3)::after{content:"3"}
.quiz-80--item:nth-child(4)::after{content:"4"}
.quiz-80--item:nth-child(5)::after{content:"5"}
.quiz-80--item:nth-child(6)::after{content:"6"}
.quiz-80--item:nth-child(7)::after{content:"7"}
.quiz-80--item:nth-child(8)::after{content:"8"}
.quiz-80--item:nth-child(9)::after{content:"9"}
.quiz-80--item:nth-child(10)::after{content:"10"}
.quiz-80--item:nth-child(11)::after{content:"11"}
.quiz-80--item:nth-child(12)::after{content:"12"}
.quiz-80--item:nth-child(13)::after{content:"13"}
.quiz-80--item:nth-child(14)::after{content:"14"}
.quiz-80--item:nth-child(15)::after{content:"15"}
.quiz-80--item:nth-child(16)::after{content:"16"}
.quiz-80--item:nth-child(17)::after{content:"17"}
.quiz-80--item:nth-child(18)::after{content:"18"}
.quiz-80--item:nth-child(19)::after{content:"19"}
.quiz-80--item:nth-child(20)::after{content:"20"} */

.quiz-80--button {
  width: 10rem;
  height: 4rem;
  background-color: #0880DB;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.quiz-80--button:hover,
.quiz-80--button:focus{
  background-color: #0061AB;
  transition: all 200ms;
}

.quiz-80--memo{
  position: absolute;
  top:-10.7rem; 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 h3 {
  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;}

[data-state="x"] .quiz-80--x {
  display: block;
  opacity: 0;
  transition: opacity 200ms ease-in;
}
[data-state="x"].on .quiz-80--x {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.quiz-80--x{
  position: absolute;
  width: 20rem;
  top: 11rem;
  left: calc(50% - 6.8rem);
  z-index: 2;
  display: none;
}

.type-system .ui-modal-wrap{
  border-radius: 2rem;
  border: .4rem solid #AFAEAC;
  padding: 2rem ;
  max-width: 30.3rem !important; 
}
.type-system .ui-modal-body {
  padding:0 !important; 
  text-align: center !important;
  font-size: 1.6rem;
  line-height: 3.2rem;
}
.ui-modal-confirm {
  width: 10rem;
  height: 4rem;
  background-color: #0880DB;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.type-system .ui-modal-footer{
  padding:.8rem 0 0 !important; 
}
.type-system .modal-footer-btn-group {
  justify-content: flex-end;
  width: 100%;
}
.type-system .modal-footer-btn-group .btn-base{
  flex: auto;
  max-width: 5.2rem;
}
.ui-modal-confirm:hover,
.ui-modal-confirm:focus{
  background-color: #0061AB;
  transition: all 200ms;
}
.type-system .ui-modal-footer::before {
  display: none;
}
.type-system span.reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: .4rem 0.2rem;
  width: auto;
  padding:0 1.2rem
}
.btn-base.reset {
  display: none;
  width: 10rem;
  height: 4rem;
  background-color: #0880DB;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.6rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}
button.btn-base.reset:hover{
  background-color: #0061AB;
  transition: all 200ms;
}
.quiz-80--item input:focus + label + span {
  font-weight: 700;
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points=' 100,20 170.71,65 170.71,135 100,180 29.29,135 29.29,65' fill='%23e6e6e6' stroke='%23f59621' stroke-width='3'/%3E%3C/svg%3E"); */
}
[data-mode="complete"] .quiz-80--item [data-answer="false"] + label,
[data-mode="complete"] [data-result-answer="X"] + label {
  color: #000 !important;
}
[data-mode="complete"] [type=checkbox][data-result-answer="X"] + label, 
[data-mode="complete"] [type=radio][data-result-answer="X"] + label, 
[data-mode="complete"] [data-result-answer="X"] {
  border:0 !important;
  background-color: transparent;
  color: #000;
}
[data-mode="complete"] .page-result--state {display: none !important;}



/* 답확인용 삭제필요 */
/* .quiz-80--item [data-answer="false"] + label{
  color: #AFAEAC;
} */

.ui-modal.type-system .ui-modal-wrap{width: auto;}