.table-ex {
  width: 100%;
  height: 100%;
  font-size: 15px;
  max-height: 70dvh;
  overflow: scroll;
  position: relative;
  border: 1px solid #dadee5;
  scrollbar-width: thin;
  scrollbar-color: #dadee5 #fff
}

.table-ex table {
  width: 100%;
  position: relative;
  border-spacing: 0;
  border-collapse: separate
}

.table-ex table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600
}

.table-ex table thead tr:first-child th:first-child {
  left: 0;
  z-index: 3
}

.table-ex table th:first-child {
  width: 50%
}

.table-ex table th,
.table-ex table td {
  background-color: #fff;
  text-align: center;
  border-right: 1px solid #dadee5;
  border-bottom: 1px solid #dadee5;
  padding: 10px
}

.table-ex table tbody th {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  text-align: left;
  z-index: 2;
  font-weight: 400
}

.table-ex table .block-yes,
.table-ex table .block-no {
  position: relative
}

.table-ex table .block-yes:before,
.table-ex table .block-no:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -5px 0 0 -5px
}

.table-ex table .block-yes:before {
  background-color: #78db11
}

.table-ex table .block-no:before {
  background-color: #dadee5
}

.table-ex table .td-h th,
.table-ex table .td-h td {
  position: -webkit-sticky;
  position: sticky;
  top: 38px;
  background-color: #dadee5;
  font-weight: 600;
  z-index: 4
}

.table-ex::-webkit-scrollbar {
  height: 12px;
  width: 12px
}

.table-ex::-webkit-scrollbar-track {
  background: #fff
}

.table-ex::-webkit-scrollbar-thumb {
  background-color: #dadee5;
  border-radius: 5px;
  border: 3px solid #fff
}

.region-tr {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.region-tr div {
  width: max-content;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: .3s;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.region-tr div:hover {
  background: #e6e7ea;
}

.region-tr div.active {
  background: #dadee5;
}

@media(max-width: 960px) {
  .table-ex {
    font-size: 13px
  }

  .table-ex table th:first-child {
    width: 60%
  }
}

@media(max-width: 768px) {
  .table-ex {
    font-size: 12px
  }

  .table-ex table th:first-child {
    width: max-content
  }

  .table-ex table th,
  .table-ex table td {
    padding: 5px
  }

  .table-ex table .td-h th,
  .table-ex table .td-h td {
    top: 28px
  }
}

.table-ex0 {
  padding: 10px 5px;
  border-radius: 7px;
  border: 1px solid #dadee5
}

.table-ex1 {
  display: none;
  width: 100%;
  height: 100%;
  font-size: 15px;
  max-height: 70dvh;
  overflow-y: scroll;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #dadee5 #f8fafc;
  padding: 0 5px
}

.table-ex1.active {
  display: block;
}

.table-ex-region {
  width: 100%;
  height: 100%;
  font-size: 15px;
  max-height: 70dvh;
  overflow-y: scroll;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #dadee5 #f8fafc;
  padding: 0 5px
}

.table-ex1::-webkit-scrollbar {
  height: 12px;
  width: 12px
}

.table-ex-region::-webkit-scrollbar {
  height: 12px;
  width: 12px
}

.table-ex1::-webkit-scrollbar-track {
  background: #f8fafc
}

.table-ex-region::-webkit-scrollbar-track {
  background: #f8fafc
}

.table-ex1::-webkit-scrollbar-thumb {
  background-color: #dadee5;
  border-radius: 5px;
  border: 3px solid #f8fafc
}

.table-ex-region::-webkit-scrollbar-thumb {
  background-color: #dadee5;
  border-radius: 5px;
  border: 3px solid #f8fafc
}

.table-ex-region div {
  font-weight: 600;
}

.table-ex1>div:first-child {
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 3
}

.table-ex1>div:first-child>div {
  border-bottom: none
}

.table-ex1>div:first-child>div:not(:first-child) {
  border-radius: 10px 10px 0 0;
  position: relative
}

.table-ex1>div:first-child>div:not(:first-child):before {
  position: absolute;
  content: "";
  background-color: #fff;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0
}

.table-ex1>div:last-child>div {
  border-bottom: none
}

.table-ex1>div:last-child>div:not(:first-child) {
  border-radius: 0 0 10px 10px
}

.div-tr {
  display: grid;
  grid-template-columns: auto repeat(3, 15%);
  gap: 5px
}

.div-tr>div:first-child {
  text-align: left
}

.div-tr>div {
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid #dadee5
}

.div-tr>div:nth-child(1) {
  background-color: #fff;
  border-bottom: 1px solid #dadee5
}

.div-tr>div:nth-child(2) {
  background-color: #fffaf3
}

.div-tr>div:nth-child(3) {
  background-color: #ebffff
}

.div-tr>div:nth-child(4) {
  background-color: #edfff7
}

.div-h {
  position: sticky;
  top: 44px;
  background-color: #fff;
  font-weight: 600;
  grid-column: span 4;
  padding: 10px;
  z-index: 2
}

.div-h:before {
  position: absolute;
  content: "";
  background-color: #dadee5;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 5px 0 0 5px
}

.block-yes,
.block-no {
  position: relative
}

.block-yes:before,
.block-no:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -5px 0 0 -5px
}

.block-yes:before {
  background-color: #f50000
}

.block-no:before {
  background-color: #dadee5
}

.b-b-0>div {
  border-bottom: 0 !important
}

@media(max-width: 960px) {
  .table-ex {
    font-size: 13px
  }

  .table-ex table th:first-child {
    width: 60%
  }
}

@media(max-width: 768px) {
  .table-ex0 {
    padding: 8px 4px
  }

  .table-ex1 {
    padding: 0 4px
  }

  .table-ex1>div:first-child>div:not(:first-child) {
    border-radius: 5px 5px 0 0
  }

  .table-ex1>div:last-child>div:not(:first-child) {
    border-radius: 0 0 5px 5px
  }

  .div-tr {
    grid-template-columns: auto repeat(3, 60px);
    font-size: 12px;
    gap: 2px
  }

  .div-tr>div {
    padding: 5px 0;
    text-align: center
  }

  .div-h {
    font-size: 12px;
    padding: 5px;
    top: 28px
  }

  .table-ex-region div {
    font-size: 12px;
    width: max-content;
  }

  .region-tr {
    display: flex;
    gap: 10px;
  }
}


a {
  color: #f50000;
  text-decoration: none
}

h2 {
  font-size: 18px;
  margin: 0 0 20px 0
}

section>div {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px
}