@media (min-width: 1441px) {
.tab-main {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    width: 64%;
}
}

@media (max-width: 1440px) {
.tab-main {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    width: 96%;
}
}

.tab-main > label {
    flex: 1 1;
    order: -1;
    opacity: 0.9;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #B0D0F0;
    color: #fff;
    font-size: 1.0em;
    text-align: center;
    cursor: pointer;
}

.tab-main > label:hover {
    opacity: 1.0;
  background-color: #3599E0;
}

.tab-main input {
    display: none;
}

.tab-main > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-main label:has(:checked) {
  background-color: #2589d0;
  color: #fff;
}

.tab-main label:has(:checked) + div {
    display: block;
}