@media only screen and (max-width: 3840px) {
  .navnenu.active {
    display: none;
  }
  .role_list_3 .text div:nth-child(3) {
    width: 36%;
  }
}
@media only screen and (max-width: 1920px) {
  .role_list_3 .text div:nth-child(3) {
    width: 40%;
  }
}

@media only screen and (max-width: 1680px) {
}

@media only screen and (max-width: 1280px) {
  .role_list .swiper-slide {
    height: 5.5vw;
  }
  .role_list_2_btn {
    width: 12vw;
    height: 3.6vh;
  }
  .role_list_3 .text {
    position: relative;
    margin: 0 auto;
    width: 80%;
  }
  .role_list_3 .text div:nth-child(4) {
    position: absolute;
    width: 6vw;
    top: 6vw;
    right: 0px;
  }
}
@media only screen and (max-width: 820px) {
}

@media only screen and (max-width: 575.98px) {
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    width: 100%;
    padding: initial;
    padding-left: unset;
  }

  .navnenu.active {
    display: block;
  }

  /*::::::::::::::::::::::: nav :::::::::::::::::::::::*/

  nav {
    position: fixed;
    background-color: #ffffff;
    width: 100%;
    top: 0%;
    right: 0%;
    padding-top: 1%;
    padding-right: 1%;
    padding-bottom: 1%;
    color: #fff;
    z-index: 10;
  }
  .meun-m {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .burger-menu {
    max-width: 6.12%;
    margin: 5%;
  }
  .btn-register-m {
    max-width: 65%;
    margin-left: 20%;
  }

  .logo-m {
    max-width: 19.141%;
  }

  .navnenu.active a {
    color: #000000;
    text-decoration: none;
  }
  .navnenu.active a:hover {
    color: #000000;
  }

  .navnenu a {
    margin: 0 5%;
  }

  /*::::::::::::::::::::::: role :::::::::::::::::::::::*/
  .character .title {
    max-width: 70vw;
    padding-top: 30vw;
  }
  .character-swiper {
    width: 94%;
  }

  .swiper {
    width: 77%;
  }

  .scrolled {
    background: #ffffffe7;
    color: #000000;
    animation: fadeIn 0.5s ease-in-out alternate;
  }

  .role_list_3 .text div:nth-child(1) img {
    width: 23vw;
  }
  .role_list .swiper-slide {
    height: 22.8vw;
  }
  .role_list_2 {
    width: 91vw;
    margin-top: 3%;
  }
  .role_list_2_btn {
    width: 30vw;
    height: 3.1vh;
  }
  .role_list_3 .text {
    width: 100%;
  }
  .role_list_3 .text div:nth-child(1) {
    left: 2vw;
    top: -55vw;
    position: absolute;
    width: 30vw;
  }
  .character .role_list_3 {
    position: relative;
    height: 175vw;
  }

  .character.role_list01_a {
    background: url(../images/portrait/role_list01_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list01_b {
    background: url(../images/portrait/role_list01_b_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list02_a {
    background: url(../images/portrait/role_list02_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list02_b {
    background: url(../images/portrait/role_list02_b_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list03_a {
    background: url(../images/portrait/role_list03_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list03_b {
    background: url(../images/portrait/role_list03_b_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list04_a {
    background: url(../images/portrait/role_list04_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list04_b {
    background: url(../images/portrait/role_list04_b_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list05_a {
    background: url(../images/portrait/role_list05_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list06_a {
    background: url(../images/portrait/role_list06_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: breath 5s infinite linear;
    animation: breath 5s infinite linear;
    animation-direction: alternate;
  }
  .character.role_list07_a {
    background: url(../images/portrait/role_list07_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character.role_list08_a {
    background: url(../images/portrait/role_list08_a_bg_m.webp) no-repeat center
      top;
    background-size: cover;
    background-color: var(--bs-white);
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }

  .character .role_list01_a_p {
    background: url(../images/portrait/role_list01_a_p_m.webp) center top /
      contain no-repeat;

    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list01_b_p {
    background: url(../images/portrait/role_list01_b_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list02_a_p {
    background: url(../images/portrait/role_list02_a_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list02_b_p {
    background: url(../images/portrait/role_list02_b_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list03_a_p {
    background: url(../images/portrait/role_list03_a_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list03_b_p {
    background: url(../images/portrait/role_list03_b_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list04_a_p {
    background: url(../images/portrait/role_list04_a_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list04_b_p {
    background: url(../images/portrait/role_list04_b_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list05_a_p {
    background: url(../images/portrait/role_list05_a_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list06_a_p {
    background: url(../images/portrait/role_list06_a_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list07_a_p {
    background: url(../images/portrait/role_list07_a_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .character .role_list08_a_p {
    background: url(../images/portrait/role_list08_a_p_m.webp) center top /
      contain no-repeat;
    -webkit-animation: initial;
    animation: initial;
    animation-direction: initial;
  }
  .role_list_3 .text div:nth-child(2) {
    position: absolute;
    top: 90vw;
    width: 100%;
    text-align: center;
  }
  .role_list_3 .text div:nth-child(2) img {
    max-width: 95%;
  }

  .role_list_3 .text div:nth-child(3) {
    position: relative;
    top: 120vw;

    width: 90%;
    margin: 0 auto;
  }
  .role_list_3 .text div:nth-child(3) img {
    width: -webkit-fill-available;
  }
  /* 雙行H3 */
  .role_list_3 .text div:nth-child(4) {
    width: 13vw;
    top: 6vw;
    right: inherit;
    left: 6vw;
  }
  /* 單行H3 */
  .role_list_3.role_list02_a_p .text div:nth-child(4),
  .role_list_3.role_list02_b_p .text div:nth-child(4),
  .role_list_3.role_list03_a_p .text div:nth-child(4),
  .role_list_3.role_list03_b_p .text div:nth-child(4) {
    width: 8vw;
  }
}