.ex1 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap:2rem;
    margin-top:0;
}
.ex1 .bul-notice {margin-bottom:1.2rem}
.ex1-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 12rem;
  margin-left: 0;
}
.ex1-input input:read-only {
  cursor: pointer;
}
.ex1-input input[data-check="true"] {
  background-color: #FFBC3F;
}
.ex1-input div,
.ex1-input input{
  width: 4rem;
  height: 4rem;
  border: 1px solid #000;
  margin: -1px 0 0 -1px;
  text-align: center;
  font-size: 2rem;
}
.page-result .ex1-input {
  margin: 3rem auto 0;
}
.ex1-input div{display: flex; align-items: center; justify-content: center; background-color: #fff;}
.ex1-group {
  display: flex;
  flex-direction: row;
  gap: 5rem;
} 
.ex1-group > div{
  position: relative;
}
.ex1-group h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.ex1-drag.none {pointer-events: none; filter: grayscale(1); opacity: 0.5;}
.ex1-drag {
  display: flex;
  flex-wrap: wrap;
  width: 30.4rem;
  gap:1rem;
}
.ex1-drag button:focus,
.ex1-drag button:hover {
  background-color: #CA880B;
}
.ex1-drag button:disabled {opacity: .5; pointer-events: none;}
.ex1-drag button {
  width: 9.2rem;
  height: 4.2rem;
  display: flex;
  align-items: center;
  background-color: #FFBC3F;
  justify-content: center;
  border-radius: .6rem;
  font-size: 1.6rem;
  font-weight: 500;
}
.ex1 [data-drag-target][data-empty=true]::after{
  display: none;
}
.ex1 [data-drag-id] {
  gap:0;
}
.ex1 .btn-reset {
  width: 2.8rem;
  height: 2.8rem;
  background: url(../../assets/images/icon/icon-reest.svg) no-repeat 50% 50% / 2.4rem;
  box-shadow: none;
  transition: all 300ms;
}
.ex1 .btn-reset:hover,
.ex1 .btn-reset:focus {
  transform: rotate(-180deg);
}

[data-drag-object]:hover [data-drag-rotate="item"]:after{
  background-color:#CA880B;
}
[data-drag-object] {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.03);
}
/* [data-drag-rotate="item"] {
  pointer-events: none;
} */
[data-drag-object]::before{
  content:"";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top:0rem;
  left:0rem;
  font-size: 2.2rem;
  color: #000;
  z-index: 3;
  pointer-events: none;
  font-family: '';
}

.ex1 [data-drag-target]::after{display: none;}
.ex1 .mdl-button-area {
  border:.1rem solid #E2E2E2;
  height: 5rem;
  background-color: #fff;
  border-radius: 0;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top:0;
  padding:0 2.4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.ex1 [data-drag-target]{
  border:.1rem solid #E2E2E2;
  height: 29.7rem;
  background-color: #fff;
  border-radius: 0;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
.active [data-drag-rotate="item"] {
  box-shadow: 0 0 .4rem rgba(0,0,0,0.3);
}
[data-drag-rotate="item"] {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}
[data-drag-rotate="item"]::after{
  content: "";
  position: absolute;
  display: block;
  width: .6rem !important;
  background-color: #FFBC3F;
  border-radius: .2rem;
  left:calc(50% - .3rem);
  top:0;
}

.drag-3 [data-drag-rotate="item"]::after{height: 9rem !important; top:calc(((9rem - 4rem) / 1 * -1) - 2rem);}
.drag-4 [data-drag-rotate="item"]::after{height: 12rem !important;top:calc(((12rem - 4rem) / 1 * -1) - 2rem);}
.drag-5 [data-drag-rotate="item"]::after{height: 15rem !important;top:calc(((15rem - 4rem) / 1 * -1) - 2rem);}
.drag-6 [data-drag-rotate="item"]::after{height: 18rem !important;top:calc(((18rem - 4rem) / 1 * -1) - 2rem);}
.drag-7 [data-drag-rotate="item"]::after{height: 21rem !important;top:calc(((21rem - 4rem) / 1 * -1) - 2rem);}

.text-justify {text-align:justify}


.ex2 {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  gap:5.7rem;
  margin-bottom: 2rem;
}

.ex2 li {
  width: 25%;
}
.ex2 img{
  display: flex;
  width: 12rem;
}
.ex2 figure{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:1.5rem;
  text-align: center;
}
.ex2 figure b{
  font-size: 1.8rem;
  font-weight: 700;
  color: #288796;
  display: block;

}
.ex2 figure span{
  font-size: 1.4rem;
  font-weight: 400;
  color: #666;
  display: block;
}
.guide-link .finger {
  width: 10.6rem;
}

.ex2-input {
  display: flex;
  flex-wrap: wrap;
  width: 12rem;
}
.ex2-input .number-input{
  width: 4rem;
  height: 4rem;
  border: .1rem solid #000;
  margin: -.1rem 0 0 -.1rem;
  text-align: center;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight:700;
}

.ex2-group {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap:1rem;
  text-align: center;
}

.img-wrap {
  display: flex;
  margin: 0 auto;
  width: 50rem;
  justify-content: center;
}
.img-wrap img{
  display: block;
  width: 100%;
}
[data-motion="5"] .img-wrap{margin-top: 5rem;}


.page-rule{
  position: relative;
}
.finger--btn.on {
  position: absolute; 
  top:0; 
  left:0;
  z-index: 1;
  width: 6rem;
}
.finger--btn[data-toggle-state="true"]{display: none;}
.page-rule--title {
  color: #078C23;
}
.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;
}
.page-rule .guide-link--head:before {
  display: none;
}
.page-rule .guide-link--head {
  margin-bottom: 0.8rem;

}
.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;
}

.ex1-alert{
  position: absolute;
  top:100%;
  left:0;
  margin-top: 0.2rem;
  white-space: nowrap;
  color: tomato;
}
.btn-reset2 {
  position: absolute;
  right: 0;
  top:0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18' viewBox='0 0 21 18' fill='none'%3E%3Cg clip-path='url(%23clip0_215_22929)'%3E%3Cpath d='M17.9757 7.14423C17.2456 3.48994 14.0006 0.749219 10.1302 0.785762C6.25721 0.819694 3.06198 3.61784 2.3999 7.28518L5.01418 6.90931' stroke='%23007DFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.39716 7.28266L0.785156 4.84473' stroke='%23007DFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.5957 10.8556C3.32582 14.5098 6.57077 17.2506 10.4412 17.214C14.3142 17.1801 17.5094 14.3819 18.1715 10.7146L15.5572 11.0905' stroke='%23007DFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.1738 10.7173L19.7858 13.1526' stroke='%23007DFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_215_22929'%3E%3Crect width='20.5714' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 50% 50% / 2.1rem;
  box-shadow: 0 .4rem 1rem 0 #00000040;
}

.complete .ex1-drag button {
  pointer-events: none;
}