/* ================= TOP input LAbel =================== */

@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ #slider {
    transform: translateX(0%);
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
    display: block;
}

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
    cursor: default;
    color: #428bff;
}

@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}

@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ #slider {
    transform: translateX(200%);
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
    display: block;
}

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
    cursor: default;
    color: #428bff;
}

@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}

@media (max-width: 1000px) {
    .tabs ul li label {
        white-space: initial;
    }

    .tabs ul li label br {
        display: initial;
    }
}

@media (max-width: 1056px) {
    div.bg svg {
        width: 80%;
    }
}

@media (max-width: 1071px) {
    div.bg svg {
        width: 70%;
    }
}

@media (max-width: 600px) {
    .tabs ul li label {
        padding: 5px;
        border-radius: 5px;
    }

    .tabs ul li label span {
        display: none;
    }

    .tabs #slider {
        display: none;
    }

    .tabs .content {
        margin-top: 20px;
    }

    .tabs .content section h2 {
        display: block;
    }
}

@media (max-width: 654px) {
    div.bg svg {
        display: none;
    }
}

/* =================== NEWBIZ TEAM =================== */

@media screen and (max-width: 1440px) {
    ul#individuals {
        grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    }
}

@media screen and (max-width: 1170px) {
    #johosystem-team p {
        font-size: 1em;
    }
}

@media screen and (max-width: 1085px) {

    /* newbiz members img */
    ul#individuals {
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    }
}

@media screen and (max-width: 484px) {
    .content .img-box {
        display: grid;
    }

    .content .img-box img {
        max-width: 20rem;
        margin: 0 auto;
    }

    h2.top-title-newbiz {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 475px) {
    ul#individuals {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        padding: 1em;
    }

    .content .meet {
        margin: 0;
    }

    ul.newbiz-card {
        grid-template-columns: 100%;
        padding: 1em;
    }
}

@media screen and (max-width: 969px) {
    .newbiz-bg-img {
        display: none;
    }
}

@media screen and (max-width: 1423px) {
    .work-with-us header h1 {
        margin-bottom: 0.4em;
    }
}

/*================== SYSTEM TEAM  ================= */
@media screen and (max-width: 500px) {
    #hive {
        display: block;
    }

}

@media screen and (max-width: 1000px) {
    .member-info h2 {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 810px) {
    .member-info h2 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 449px) {
    h2#content-title {
        font-size: 1.9em;
    }

    .member-info h2 {
        font-size: 2rem;
    }

    .about {
        width: 805px;
        height: 582px;
    }

    div.newbiz-text h3 {
        font-size: 1.5em;
    }

    .work-with-us header {
        margin-bottom: 2em;
    }

    .work-with-us header h1 {
        font-size: 2.2rem;
    }

    div.about-container {
        flex-direction: column;
        gap: 0;
    }

    .work-with-us header .button {
        font-size: 1rem;
    }

    .tabs {
        padding-bottom: 0;
    }

}

@media screen and (max-width: 426px) {
    .content .group {
        margin: 0;
    }
}

@media screen and (max-width: 599px) {
    .about {
        width: 760px;
    }
}

@media screen and (max-width: 997px) {
    .about {
        width: 764px;
    }
}

@media screen and (max-width: 1170px) {

    /* ul.descriptions li p,
    .member-info p {
        font-size: 0rem;
    } */

    /* join us p */
    .work-with-us header p {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 768px) {

    .blob {
        display: flex;
        place-content: center;
        width: 100%;
    }

    .blob svg {
        width: 200px;
    }
}

@media screen and (min-width: 771px) {

    .member:nth-child(4n + 3) .se-team-member-info,
    .member:nth-child(4n + 4) .se-team-member-info {
        order: 1;
    }

    .member:nth-child(4n + 3) .member-image,
    .member:nth-child(4n + 4) .member-image {
        order: 2;
    }

    .member:nth-child(4n + 3) .member-image::after,
    .member:nth-child(4n + 4) .member-image::after {
        left: 0;
        right: auto;
        transform: translateY(-50%) rotateZ(180deg);
    }
}

/* ==================== SOLUTUON TEAM ===================== */
@media screen and (max-width: 1024px) {
    .member-image {
        height: 90%;
    }

    .member {
        margin-bottom: 2em;
    }
}

@media screen and (max-width: 962px) {
    .member-image {
        height: 83%;
    }
}

@media screen and (max-width: 768px) {
    .member-image {
        height: 100%;
    }
}

@media screen and (max-width: 770px) {
    .list-members {
        width: 95%;
    }

    .member {
        flex-basis: 100%;
        font-size: 14px;
    }

    .social-link .fab {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .member:nth-child(even) .se-team-member-info {
        order: 1;
    }

    .member:nth-child(even) .member-image {
        order: 2;
    }

    .member:nth-child(even) .member-image::after {
        left: 0;
        right: auto;
        transform: translateY(-50%) rotateZ(180deg);
    }
}

@media screen and (max-width: 429px) {
    .se-team-member-info p {
        margin: 0%;
    }
}

@media screen and (max-width: 1210px) {
    #se-team {
        padding: 0;
    }
}

@media screen and (max-width: 433px) {
    h2.se-team-member-name {
        font-size: 2rem;
    }
}

@media screen and (max-width: 420px) {
    .member {
        display: -webkit-inline-box;
        padding: 1em;
    }

    .member-image img {
        height: 13em;
    }

    .member-image::after {
        content: "";
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
    }

    .list-members {
        padding: 0;
    }

    .se-team-member-info {
        width: 55%;
    }
}

@media screen and (max-width: 365px) {
    .member-image img {
        height: 11em;
    }
}

/* ================== JOHOSYSTEM TEAM ================== */
@media screen and (max-width: 1440px) {
    #johosystem-team ul#individuals {
        gap: 4rem 4rem;
    }

    #johosystem-team .up-circle2 {
        position: absolute;
        bottom: 12em;
        right: -5em;
    }

    #johosystem-team .img-circle2 {
        bottom: 24em;
        right: -6em;
    }
}

@media screen and (max-width: 1098px) {
    #johosystem-team .up-circle2 {
        right: 26em;
    }

    #johosystem-team .img-circle2 {
        right: 27em;
    }
}

@media screen and (max-width: 810px) {
    #johosystem-team .member-info h2 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    #johosystem-team .img-circle2 {
        bottom: 9em;
        right: 18em;
    }

    #johosystem-team .up-circle2 {
        position: absolute;
        bottom: 16em;
        right: 17em;
    }

    .content .group .right {
        display: none;
    }
}

@media screen and (max-width: 608px) {
    #johosystem-team .img-circle2 {
        bottom: 9em;
        right: -4em;
    }

    #johosystem-team .up-circle2 {
        position: absolute;
        bottom: 16em;
        right: -3em;
    }
}

@media screen and (max-width: 376px) {
    h2.top-title-newbiz {
        font-size: 1.5em;
    }

    #johosystem-team .img-circle2 {
        position: absolute;
        bottom: 1em;
        right: -1em;
    }

    #johosystem-team .up-circle2 {
        position: absolute;
        bottom: 12em;
        right: -4em;
    }
}

@media screen and (max-width: 320px) {
    #johosystem-team .up-circle2 {
        bottom: 12em;
        right: -5em;
    }

    #johosystem-team .img-circle2 {
        bottom: 8em;
        right: -3em;
    }
}