.page-desc {
  display: flex;
  width: 100%;
  gap: 1rem;
}

.row {
  justify-content: space-between;
}

.page-desc.row img {
  width: 17.9rem;
  margin-top: -2.5rem;
}

.btn-blue {
  display: inline-flex;
  height: 4rem;
  background-color: #0880DB;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.6rem;
  flex-shrink: 0;
  padding: 0 1.6rem;
  align-items: center;
  justify-content: center;
}

.btn-blue:hover,
.btn-blue:focus {
  background-color: #0061AB;
  transition: all 200ms;
}

.col {
  flex-direction: column;
  align-items: flex-start;
}

.box-line {
  width: 100%;
  height: 13rem;
  border: 1px solid #000;
  display: flex;
  justify-content: space-around;
  padding: 0 1rem 1rem;
}

.box-line svg {
  zoom: .6;
}

.box-line .td>div {
  opacity: 0;
}

.box-line .td {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.box-line .td b {
  font-family: 'pt';
  opacity: 0;
}

.box-line .td>b,
.box-line .td>div {
  transition: opacity 200ms ease;
}

.box-line.on .td>b,
.box-line.on .td>div {
  opacity: 1;
}

.box-line .td:nth-child(1)>div {
  transition-delay: 0ms;
}

.box-line .td:nth-child(1)>b {
  transition-delay: 100ms;
}

.box-line .td:nth-child(2)>div {
  transition-delay: 200ms;
}

.box-line .td:nth-child(2)>b {
  transition-delay: 300ms;
}

.box-line .td:nth-child(3)>div {
  transition-delay: 400ms;
}

.box-line .td:nth-child(3)>b {
  transition-delay: 500ms;
}

.box-line .td:nth-child(4)>div {
  transition-delay: 600ms;
}

.box-line .td:nth-child(4)>b {
  transition-delay: 700ms;
}

.box-line .td:nth-child(5)>div {
  transition-delay: 800ms;
}

.box-line .td:nth-child(5)>b {
  transition-delay: 900ms;
}

.box-line .td:nth-child(6)>div {
  transition-delay: 1000ms;
}

.box-line .td:nth-child(6)>b {
  transition-delay: 1100ms;
}

.box-line .td:nth-child(7)>div {
  transition-delay: 1200ms;
}

.box-line .td:nth-child(7)>b {
  transition-delay: 1300ms;
}

.box-line .td:nth-child(8)>div {
  transition-delay: 1400ms;
}

.box-line .td:nth-child(8)>b {
  transition-delay: 1500ms;
}

.box-line .td:nth-child(9)>div {
  transition-delay: 1600ms;
}

.box-line .td:nth-child(9)>b {
  transition-delay: 1700ms;
}

.box-line .td:nth-child(10)>div {
  transition-delay: 1800ms;
}

.box-line .td:nth-child(10)>b {
  transition-delay: 1900ms;
}

.box-line .td:nth-child(11)>div {
  transition-delay: 2000ms;
}

.box-line .td:nth-child(11)>b {
  transition-delay: 2100ms;
}

.box-line .td:nth-child(12)>div {
  transition-delay: 2200ms;
}

.box-line .td:nth-child(12)>b {
  transition-delay: 2300ms;
}

.box-line.b2 {
  flex-direction: column;
  gap: 2rem;
  min-height: 24.4rem;
  height: 100%;
  padding: 2rem;
}

.box-line.b2 .base-table {
  opacity: 0;
}

.box-line.b2.on .base-table {
  opacity: 1;
}

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

.page-rule.on .finger--btn {
  display: block;
}

.finger--btn {
  display: none;
}

.finger--btn[data-toggle-state="true"] {
  display: none !important
}

.page-rule--title {
  color: #D14982;
}

.guide-link--head button {
  width: 2rem;
}

.page-desc.row.d2 {
  width: 100%;
  justify-content: space-between;
}

.page-desc.row.d2 img {
  margin-top: 0;
  width: 14.2rem;
}

.guide-link--main.on {
  display: flex;
}

.guide-link--main {
  width: 100%;
  display: none;
  flex-direction: column;
}

.g1 {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  gap: 1.3rem;
  margin-bottom: 2rem;
}

.g1>div {
  width: 8.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g1 svg {
  scale: .7;
}

.g2 {
  display: flex;
  gap: 1rem;
  margin-bottom: 4rem;
}

.g2-1 {
  width: 12rem;
  height: 3.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .8rem;
}

.g2-2 {
  width: 11.4rem;
  height: 3.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .8rem;
}

.g2-3 {
  width: 11rem;
  height: 3.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .8rem;
}

.g2-4 {
  width: 8.4rem;
  height: 3.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .8rem;
}

.g2>div>* {
  opacity: 0;
  transition: opacity 300ms ease;
}

.g1>div {
  position: relative;
}

.f1 {
  position: absolute;
  top: 2.8rem;
  left: 3rem;
  z-index: 4;
  pointer-events: visible;
}

.f2 {
  position: absolute;
  top: 2.8rem;
  left: 3rem;
  z-index: 4;
  pointer-events: visible;
}

.f3 {
  position: absolute;
  top: 1.9rem;
  left: 3rem;
  z-index: 4;
  pointer-events: visible;
}

td[data-toggle-state="true"][data-word="v"] {
  animation-name: lineSH1;
  animation-duration: 600ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

td[data-toggle-state="true"][data-word="u"] {
  animation-name: lineSH2;
  animation-duration: 600ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

td[data-toggle-state="true"][data-word="p"] {
  animation-name: lineSH3;
  animation-duration: 600ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.g2-4[data-toggle-state="true"]>span{
  transition-delay: 700ms;
}
[data-toggle-state="true"]>b {
  transition-delay: 700ms;
  opacity: 1 !important;
}
[data-toggle-state="true"]>span {
  transition-delay: 400ms;
  opacity: 1 !important;
}
.base-table thead th {
  font-family: 'pt';
}
.text-justify b {
  font-family: 'pt';
}
@keyframes lineSH1 {
  0% {
    outline: .2rem solid #E65938;
    outline-offset: -0.2rem;
  }

  70% {
    outline: .2rem solid #fff;
    outline-offset: -0.2rem;
  }

  100% {
    outline: .2rem solid #E65938;
    outline-offset: -0.2rem;
  }
}

@keyframes lineSH2 {
  0% {
    outline: .2rem solid #E7C822;
    outline-offset: -0.2rem;
  }

  70% {
    outline: .2rem solid #fff;
    outline-offset: -0.2rem;
  }

  100% {
    outline: .2rem solid #E7C822;
    outline-offset: -0.2rem;
  }
}

@keyframes lineSH3 {
  0% {
    outline: .2rem solid #7566AB;
    outline-offset: -0.2rem;
  }

  70% {
    outline: .2rem solid #fff;
    outline-offset: -0.2rem;
  }

  100% {
    outline: .2rem solid #7566AB;
    outline-offset: -0.2rem;
  }
}
.th-w th,
.th-w td{height: 4.2rem !important;}
.th-w th[scope="row"] {border-right:1px solid #E9EBEC; width: 12rem;}
.th-w th[scope="col"] {background-color: #fff; font-family: 'pt';border-right:1px solid #E2E2E2}
.th-w th[scope="col"]:last-child{border-right: 0;}
.th-w tbody th {
  background-color: #E9EBEC;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.6rem;
  border-left: 0;
}
.th-w tbody th + td{border-left:0;}
.th-w tbody th{border-color:#fff}