.page-rule{
  position: relative;
}
.finger--btn.on {
  position: absolute; 
  top:0; 
  left:0;
  z-index: 1;
  width: 6rem;
}

.ex2-wrap.n1 b[data-n] {
  color: #000;
  font-weight: 700;
  opacity: 1;
}
[data-toggle-state="true"] .guide-link--main {
  display: flex;
}
.guide-link--main {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  display: none;
}
.finger--btn[data-toggle-state="true"]{display: none;}
.page-rule--title {
  color: #078C23;
}

.page-rule .guide-link--head:before {
  display: none;

}
.page-rule .guide-link--head {
  margin-bottom: 0.8rem;
  width: 7rem;
}
.guide-link--head {
  padding-left: 0;
}
.page-rule.guide-link{
  gap:2rem;

}
.btn-green {         
  background-color: #078C23;
  color: #fff;
  height: 3.7rem;
  border-radius: .6rem;
  padding:0 2rem;
}
.page-rule--list-item{display: none;}
.page-rule--list-item > div .num:first-child{position: relative; top:0;}
.page-rule--list-item.n4 > div{ transform: translateY(-.1rem);}
.page-rule--list-item.on{ display: flex;}
.ex-img {
  position: relative;
  width: 100%;
  height: 28rem;
}
.ex-img .ex1{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display: none;
}
.ex-img[data-n="1"] .n1{display: block;}
.ex-img[data-n="2"] .n2{display: block;}
.ex-img[data-n="3"] .n3{display: block;}
.ex-img[data-n="4"] .n4{display: block;}
.finger--btn {
  z-index: 3;
  pointer-events:visible
}
.page-rule--list-item{padding-left: 2.7rem;}

.page-rule--list {height: 13.4rem;}
.img1{width: 50rem; height: 26rem; margin: 0 auto;  }
.img1 svg{position: absolute;width: 50rem !important;}

.page-rule--list-item img{display: inline-block; width: 5rem; transform: translateY(-.3rem); margin-right: .1rem;}


.page-desc.d1 {
  display: flex;
  gap:1rem;
  align-items: center;
}
.page-desc.d1 img{width: 19.7rem;}

.step-wrap{
  position: relative;
  width: 67.5rem;
  margin: 0 auto 0;
  height: 34.6rem;
}
.step2,
.step3,
.step1{
  width: 67.5rem;
  position: absolute;
  top:0;
  opacity: 0;
}
.step1-text[data-toggle-state="true"]{
  display: block;
}
.step2-text[data-toggle-state="true"]{
  display: block;
}
.step3-text[data-toggle-state="true"]{
  display: block;
}
.step1-text{
  display: none;
  position: absolute;
  top: 2.8rem;
  left: 1.5rem;
  font-size: 1.6rem;
  z-index: 2;
  width: 18rem;
  padding: 0.4rem;
}
.step2-text{
  display: none;
  position: absolute;
  top: 1.3rem;
  left: 25.2rem;
  font-size: 1.6rem;
  z-index: 2;
  width: 18rem;
  padding: 0.9rem 0rem;
  line-height: 1;
}
.step3-text{
  display: none;
  position: absolute;
  top: 3.3rem;
  left: 47.9rem;
  font-size: 1.6rem;
  z-index: 2;
  width: 19rem;
  padding: 1rem 0.4rem;
}
.step-wrap svg{width: 100% !important;}

.finger--btn{width: 3rem; height: 3rem;}
.finger.f1 .finger--btn::after{content: "1";}
.finger.f2 .finger--btn::after{content: "2";}
.finger.f3 .finger--btn::after{content: "3";}
.finger .finger--btn:focus::after,
.finger .finger--btn:hover::after{
  background-color: #75554C;
}
.finger .finger--btn::after{
  content:"";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #A2837B;
  font-size: 1.4rem;
  color:#fff;
  font-family: 'pt';
  font-weight: 200;
}
.finger button{
  background-color: transparent;
}
.finger[data-toggle-state="true"]{z-index: 0; pointer-events: none;}
.finger {display: none; padding: 0; width: 3rme; height: 3rem;}
.finger.on{display: block;}
.finger {
  position: absolute;
  top: -0.1rem;
  z-index: 1;
}
.f1{left: 1.2rem;}
.f2{left: 24.3rem;}
.f3{left: 47.6rem;}
.d2 {display: none;}
.d2.on {display: flex;}