.ex1 {
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
  flex-direction:column;
    margin-top:2.4rem
}
.ex1--group {
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
}
.ex1--bg {
  position:relative;
  width: 59rem;
  padding:0;
  display:block;
  margin-bottom:4rem;
}
.ex1--group .finger--btn[data-toggle-state="true"] {
  pointer-events: none;
}
.ex1--group .finger--btn[data-toggle-state="true"]::before {
  display: none !important;
}
[data-toggle-state="true"] + .ex1--quiz[data-toggle-state="false"] {
  display: flex;
  transform: scale(.6);
}
.ex1--quiz[data-toggle-state="false"] .ex1--quiz-close{display: none;}
.ex1--quiz[data-toggle-state="false"] .katex-display{margin: 0.4rem 0;}
.ex1--quiz[data-toggle-state="false"][data-toggle-target="evidence_1"] {
  top:0rem;
  left: -11rem;
}
.ex1--quiz[data-toggle-state="false"][data-toggle-target="evidence_2"] {
  top: 10rem;
  left: -7rem;
}
.ex1--quiz[data-toggle-state="false"][data-toggle-target="evidence_3"] {
  top: 20rem;
  left: -8rem;
}
.ex1--quiz[data-toggle-state="false"][data-toggle-target="evidence_4"] {
  top: 1rem;
  left: 38.4rem;
}
.ex1--quiz[data-toggle-state="false"][data-toggle-target="evidence_5"] {
  top: 11rem;
  left: 38rem;
}
.ex1--quiz[data-toggle-state="false"][data-toggle-target="evidence_6"] {
  top: 20rem;
  left: 29rem;
}

.ex1--quiz[data-toggle-state="true"]{display:flex;z-index:3}
.ex1--quiz{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  padding:.2rem;
  background-color:#fff;
  border:.2rem solid #FDB940;
  border-radius:1.8rem;
  box-shadow:0 .4rem .8rem 0 #00000040;
  display:none;
  z-index:2;
}
.ex1--quiz-wrap{
  padding:.8rem 1.8rem;
  border:.1rem dashed #FDB940;
  border-radius:1.8rem;
  font-size:2rem;
}
.ex1--quiz-close {
  position:absolute;
  top:-1.4rem; 
  right:-1rem;
  width:3.2rem;
  height:3.2rem;
  border-radius:50%;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.6667 1L1 11.6667' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M11.6667 11.6667L1 1' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50% / 1.3rem;
  z-index:2;
}
.ex1 [data-toggle-object="evidence_1"] {
  position:absolute; 
  top:7.4rem;
  left:4.4rem;
  height:4.1rem;
  width:3.6rem;
  background:url("./images/house1.png")no-repeat 50% 50%;
  background-size:4.6rem auto;
}
.ex1 [data-toggle-object="evidence_2"] {
  position:absolute; 
  top:11.2rem;
  left:7.6rem;
  height:4.6rem;
  width:6.6rem;
  background:url("./images/house2.png")no-repeat 50% 50%;
  background-size:7.8rem auto;
}
.ex1 [data-toggle-target="evidence_3"] .ex1--quiz-wrap {
  width:37rem;
}
.ex1 [data-toggle-object="evidence_3"] {
  position:absolute; 
  top:19.5rem;
  left:18rem;
  height:5rem;
  width:6rem;
  background:url("./images/house3.png")no-repeat 50% 50%;
  background-size:6rem auto;
}
.ex1 [data-toggle-object="evidence_4"] {
  position:absolute; 
  top:2.2rem;
  left:36rem;
  height:4.7rem;
  width:5.7rem;
  background:url("./images/house7.png")no-repeat 50% 50%;
  background-size:5.6rem auto;
}
.ex1 [data-toggle-object="evidence_5"] {
  position:absolute; 
  top:15.8rem;
  left:37.8rem;
  height:5rem;
  width:6rem;
  background:url("./images/house5.png")no-repeat 50% 50%;
  background-size:6.2rem auto;
}
.ex1 [data-toggle-object="evidence_6"] {
  position:absolute; 
  top:21.6rem;
  left:31rem;
  height:5rem;
  width:5.8rem;
  background:url("./images/house4.png")no-repeat 50% 50%;
  background-size:6rem auto;
}
.finger--btn::before{
  top:50%;
  left:50%;
  transform:translate(-50%, 0);
}

.ex1--bg2{
  display:block;
  width:57.8rem;
}
.ex1--result{
  position:absolute;
  display:flex;
  width:100%;
  height:100%;
  gap:.6rem;
  left:0;
  top:2.5rem;
  justify-content:center;
  padding:0 2.1rem;
}
.ex1--result :focus + label .ex1--tooltip{
  outline: 2px solid #000;
  outline-offset : 0.2rem;
}
.ex1--result :checked:focus + label .ex1--tooltip{
  background-color: #071518;
}
.ex1 :checked:focus + label .ex1--tooltip::after{
  background-color: #071518;
}
.ex1--result :focus + label .ex1--tooltip{
  border-color: #7e5308;
}
.ex1 :focus + label .ex1--tooltip::after{
  background-color: #7e5308;
}
.ex1--result label {
  display:flex;
  flex-direction:column;
  flex:none;
  justify-content:flex-start;
  align-items:center;
  width:6.3rem;
}

[data-mode="complete"] .ex1 [data-result-answer="X"] + label {
  border:none !important;
  background-color:transparent !important;
  color: #000 !important
}
[data-mode="complete"] .ex1 :checked[data-result-answer="X"] + label {
  border:none !important;
  background-color:transparent !important;
}
[data-mode="complete"] .ex1 :checked[data-result-answer="X"] + label .ex1--tooltip {
  border-color:#D54551;
  background-color:#fff5f6;
  color:#D54551;
}
[data-mode="complete"] .ex1 :checked[data-result-answer="X"] + label .ex1--tooltip-wrap {
  outline:none;
  border-color:#D54551;
}
[data-mode="complete"] .ex1 :checked[data-result-answer="X"] + label .ex1--tooltip:after {
  background-color:#D54551;
}

.ex1 :checked + label .ex1--tooltip {
  background-color:#2E545A;
  border-color:#2E545A;
  color:#fff;
}
.ex1 :checked + label .ex1--tooltip::after{
  background-color:#2E545A;
}
.ex1 :checked + label .ex1--tooltip-wrap {
  border-color:#fff;
  outline:.1rem solid #2E545A;
}
.ex1--tooltip {
  width:100%;
  position:relative;
  padding:.1rem;
  background-color:#fff;
  border:.2rem solid #FDB940;
  border-radius:1.2rem;
  box-shadow:0 .4rem .8rem 0 #00000040;
  display:flex;
  z-index:2;
}
.ex1--tooltip:hover {
  background-color:#EBF1F5;
}
.ex1--tooltip::after {
  content:'';
  display:block;
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  position:absolute;
  bottom:-0.5rem;
  left:calc(50% - .3rem);
  background-color:#FDB940;
}
.ex1--tooltip-wrap{
  padding:0rem .8rem;
  border:.1rem dashed #FDB940;
  border-radius:1.2rem;
  font-size:1.2rem;
  height:4rem;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  outline:.1rem solid #fff;
  z-index:2;
}

.ex2 {
  display:flex;
  justify-content:center;
  gap:1.2rem;
}
.ex2 :checked + label {
  border-color:#2E545A;
  background-color:#fff;
}
.ex2 :checked + label span {
  background-color:#2E545A;
  color:#fff;
}
[data-mode="complete"] .ex2 [data-result-answer="X"] + label {
  border:.4rem solid #dcdada!important;
  background-color:transparent !important;
  color: #000 !important
}
[data-mode="complete"] .ex2 :checked[data-result-answer="X"] + label {
  border:.4rem solid #D54551 !important;
}
[data-mode="complete"] .ex2 :checked[data-result-answer="X"] + label span {
  background-color:#D54551;
}
.ex2 :focus + label span {
  text-decoration: underline;
  text-underline-offset: .3rem;
}
.ex2 :focus + label {
  background-color:#EBF1F5;
}
.ex2 label {
  width:12.4rem;
  border:.4rem solid #dcdada;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:all .2s ;
}
.ex2 label:hover {
  background-color:#EBF1F5;
}
.ex2 label img {
  width:auto;
  height:14rem;
  margin:1.4rem;
}
.ex2 label span{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.4rem;
  background-color:#dcdada;
  font-size:1.7rem;
  transition:all .2s ;
}
[data-answer-group] {
  display: flex;
  flex-direction: column;

}
[data-answer-group="2"] {
    gap: 4rem;
}
.ex1[data-toggle-state="true"],
.ex2[data-toggle-state="true"] {pointer-events:none;}
.page-act-flex {display:flex;align-items:center;gap:2rem;}
.page-act--content .bul-dot li ~ li {margin-top:-1rem}