.ex1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap:4rem;
  padding: 0;
}
[data-answer-group] {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.ex1 .cross-color-puzzle {
  width: auto;
}
.ex2> img {
  display: block;
  width: 65rem;
  transform: translate(4.2rem, -4.6rem);
}
.ex2 {
  position: relative;
  width:  100%;
  border-radius: .8rem;
  overflow: hidden;
  height: 39rem;
}
.finger--btn{
  transform: translate(-.4rem, -.4rem);
}
.ex2 .cross-color-puzzle{
  position: absolute;
  top:0;
  left:0;
}
.ex2 .cross-color-puzzle--side {
  position: absolute;
  top: 0.1rem;
  left: 3rem;
}
.ex2 .cross-color-puzzle--side li {
  display: flex;
}
.ex2 .cross-color-puzzle--side ul {
  display: flex;
  gap:0.3rem;
}
.ex2 .cross-color-puzzle--main {
  position: absolute;
  top: 7rem;
  left: 22.4rem;
}
.page-result--item  .cross-color-puzzle--item-td,
.ex2 .cross-color-puzzle--item-td {
  width: 3.6rem;
  font-family: 'KaTeX_Main';
}
.ex2 .cross-color-puzzle--item-td{background-color: #fff;}
.ex2 .cross-color-puzzle--item-td:hover {
  outline:.2rem solid #000;outline-offset:-.2rem;
}
.ex2 .btn-reset {
  position: absolute;
  bottom: 2.4rem;
  right: 1.8rem;
}
.guide-link--head button{width: 7.6rem;}
.ex2[data-toggle-state="true"] {pointer-events: none;}
.page-example{margin-top:-3.3rem;}
.cross-color-puzzle [data-value="a"] {background-color: #FFE5C0;}
.cross-color-puzzle [data-value="b"] {background-color: #C9E9EB;}
.cross-color-puzzle [data-value="c"] {background-color: #FAD2D9;}
.cross-color-puzzle [data-value="d"] {background-color: #C4DBF2;}
.cross-color-puzzle [data-value="e"] {background-color: #C9E9EB;}
.cross-color-puzzle [data-value="f"] {background-color: #D1CFE7;}
.cross-color-puzzle [data-value="g"] {background-color: #C4DBF2;}
.cross-color-puzzle [data-value="h"] {background-color: #FFE5C0;}
.cross-color-puzzle [data-value="i"] {background-color: #FAD2D9;}
.cross-color-puzzle [data-value="j"] {background-color: #FFE5C0;}
.cross-color-puzzle [data-value="k"] {background-color: #FAD2D9;}
.cross-color-puzzle [data-value="l"] {background-color: #D1CFE7;}
.cross-color-puzzle [data-value="m"] {background-color: #FFE5C0;}

.ex2[data-toggle-state="true"]{pointer-events: none;}

.page-result--group {
  width: 100%;
  display: flex;
}
.page-result--group .cross-color-puzzle--item-td {width:2.8rem;font-size:1.6rem}

.guide-link .finger {
  width: 6.4rem;
  padding: 0;
  background-color: transparent;
  border: 0;
}
.page-rule .page-rule--list-item::before {
  animation-name: motion1;
  animation-iteration-count: 1;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-play-state: paused;
}
.page-rule .page-rule--list-item:nth-child(1)::before{animation-delay: 100ms;}
.page-rule .page-rule--list-item:nth-child(2)::before{animation-delay: 5000ms;}
.page-rule .page-rule--list-item:nth-child(3)::before{animation-delay: 10000ms;}
.page-rule[data-toggle-state="true"] .page-rule--list-item::before{
  animation-play-state:running;
}
/* [data-motion="1"][data-motion-state="play"],
[data-motion="3"][data-motion-state="play"],
[data-motion="5"][data-motion-state="play"] {opacity: 1;} */


[data-step="1"] .page-rule--list-item.n1 {opacity: 1;}
[data-step="2"] .page-rule--list-item.n1 {opacity: 1;}
[data-step="2"] .page-rule--list-item.n2 {opacity: 1;}
[data-step="3"] .page-rule--list-item.n1 {opacity: 1;}
[data-step="3"] .page-rule--list-item.n2 {opacity: 1;}
[data-step="3"] .page-rule--list-item.n3 {opacity: 1;}

.guide-link--main{
  display: none;
  justify-content: space-between;
  width: 100%;
  
}
.page-rule--list-item{opacity: 0; transition: opacity 300ms ease-in;}
.ex1{opacity: 0; }
[data-toggle-state="true"] .ex1{opacity: 1;}
[data-toggle-state="true"] .guide-link--main{display: flex;}

.cross-color-puzzle--ex table{
  table-layout: fixed;
  width: 15rem;
}
.cross-color-puzzle--ex td{
  border:1px solid #000;
  width: 3rem;
  height: 3rem;
  text-align: center;
}

.cross-color-puzzle--ex td b,
.cross-color-puzzle--ex td {transition: all 300ms;}

.cross-color-puzzle--ex.on [data-n="1"] {transition-delay: 500ms; background-color:  #75BAFF;}
.cross-color-puzzle--ex.on [data-n="2"] {transition-delay: 1000ms; background-color: #57D0D7;}
.cross-color-puzzle--ex.on [data-n="3"] {transition-delay: 1500ms; background-color: #FF93A7;}
.cross-color-puzzle--ex.on [data-n="4"] {transition-delay: 2000ms; background-color: #FFBE3D;}
.cross-color-puzzle--ex.on [data-n="5"] {transition-delay: 2500ms; background-color: #A8A0FF;}

.cross-color-puzzle--ex.on2 [data-n="1"] b {transition-delay: 500ms; font-weight:500; color:red}
.cross-color-puzzle--ex.on2 [data-n="2"] b {transition-delay: 1000ms; font-weight:500; color:red}
.cross-color-puzzle--ex.on2 [data-n="3"] b {transition-delay: 1500ms; font-weight:500; color:red}
.cross-color-puzzle--ex.on2 [data-n="4"] b {transition-delay: 2000ms; font-weight:500; color:red}
.cross-color-puzzle--ex.on2 [data-n="5"] b {transition-delay: 2500ms; font-weight:500; color:red}

.cross-color-puzzle--ex td{position: relative; margin: 0; }
.cross-color-puzzle--ex td::after{
  content: '';
  border:2px solid tomato;
  opacity: 1;
  transition: all .3s;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top:0; left:0;
  box-sizing: border-box;
  opacity: 0;
}
.cross-color-puzzle--ex.on3 td[data-n="1"]::after{opacity: 1; transition-delay: 500ms; }
.cross-color-puzzle--ex.on3 td[data-n="2"]::after{opacity: 1; transition-delay: 1000ms; }
.cross-color-puzzle--ex.on3 td[data-n="3"]::after{opacity: 1; transition-delay: 1500ms; }
.cross-color-puzzle--ex.on3 td[data-n="4"]::after{opacity: 1; transition-delay: 2000ms; }
.cross-color-puzzle--ex.on3 td[data-n="5"]::after{opacity: 1; transition-delay: 2500ms; }
.cross-color-puzzle--ex.on3 [data-n="1"]:not(:last-child):after{border-right:0;}
.cross-color-puzzle--ex.on3 [data-n="1"] + [data-n="1"]::after{border-left:0 !important;}
.cross-color-puzzle--ex.on3 [data-n="1"]:after {border:2px solid #175fa7;}


.cross-color-puzzle--ex.on3 tr:nth-child(2) [data-n="2"]::after{border-bottom:0;}
.cross-color-puzzle--ex.on3 tr:nth-child(3) [data-n="2"]::after{border-bottom:0;border-top:0;}
.cross-color-puzzle--ex.on3 tr:nth-child(4) [data-n="2"]::after{border-top:0;}
.cross-color-puzzle--ex.on3 [data-n="2"]:after {border:2px solid #0f7d83;}

.cross-color-puzzle--ex.on3 tr [data-n="3"]::after{border-right: 0;}
.cross-color-puzzle--ex.on3 tr [data-n="3"] + [data-n="3"]::after{border-left:0; border-right: 2px solid #f0536f;}
.cross-color-puzzle--ex.on3 tr:nth-child(2) [data-n="3"]::after{border-bottom:0;}
.cross-color-puzzle--ex.on3 tr:nth-child(3) [data-n="3"]::after{border-bottom:0;border-top:0;}
.cross-color-puzzle--ex.on3 tr:nth-child(4) [data-n="3"]::after{border-top:0;}
.cross-color-puzzle--ex.on3 [data-n="3"]:after {border:2px solid #f0536f;}

.cross-color-puzzle--ex.on3 tr [data-n="4"]::after{border-right-width: 0;}
.cross-color-puzzle--ex.on3 tr [data-n="4"] + [data-n="4"]::after{border-left:0; border-right-width: 2px;}
.cross-color-puzzle--ex.on3 tr:nth-child(2) [data-n="4"]::after{border-bottom:0;}
.cross-color-puzzle--ex.on3 tr:nth-child(3) [data-n="4"]::after{border-top:0;}
.cross-color-puzzle--ex.on3 [data-n="4"]:after {border:2px solid #a1700e;}


.cross-color-puzzle--ex.on3 tr [data-n="5"]::after{border-right-width: 0;}
.cross-color-puzzle--ex.on3 tr [data-n="5"] + [data-n="5"]::after{border-left:0; border-right-width: 2px;}
.cross-color-puzzle--ex.on3 [data-n="5"]:after {border:2px solid #6d61f1;}


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




@keyframes motion1 {
  0% {transform:scale(1);}
  50% {transform:scale(1.1);}
  70% {transform:scale(1);}
  100% {transform:scale(1);}
}

.guide-link .icon-arrow{display: none;}
.guide-link .cross-color-puzzle.hide{display: none;}
.guide-link .line {
  position: absolute;
  /* outline:.2rem solid black; */
  outline-offset:-.1rem;
  opacity: 0;
  transition: all .3s;
  font-family: 'KaTeX_Main';
}
[data-mode="complete"] .btn-reset{display: none;}
[data-mode="complete"] .ex2 *{
  pointer-events: none; 
}