:root {
  --main-color: #00669f;
  --prime-color: #efc60a;
  --white-color: #fff;
  --dark-color: #000;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Merriweather Sans", sans-serif;
}
.style34 {
  color: var(--main-color);
}
.style35 {
  color: var(--prime-color);
}
.style36 {
  color: #a93737;
}
.un-heading {
  border-bottom: 6px solid var(--main-color);
  color: var(--prime-color) !important;
}
.cmn-heading {
  font-family: "Prompt", sans-serif;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
.blink {
  text-decoration: blink;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  animation: Color 4s linear infinite;
  -webkit-animation: Color 4s ease-in-out infinite;
  color: #000;
}

@keyframes Color {
  0% {
    background: #a0d468;
  }

  20% {
    background: #4fc1e9;
  }

  40% {
    background: #ffce54;
  }

  60% {
    background: #fc6e51;
  }

  80% {
    background: #ed5565;
  }

  100% {
    background: #ac92ec;
  }
}
.modal-box1 {
  height: 260px;
}
.modal-box2 {
  height: 260px;
}
.modal-box3 {
  height: 330px;
}
.modal-box4 {
  height: 330px;
}
.modal-box5 {
  height: 330px;
}
.modal-box6 {
  height: 238px;
}
.modal-box7 {
  height: 238px;
}
.modal-box8 {
  height: 450px;
}
.modal-box9 {
  height: 450px;
}
.modal-box10 {
  height: 450px;
}
.modal-box11 {
  height: 279px;
}
.modal-box12 {
  height: 279px;
}
.modal-box13 {
  height: 460px;
}
.modal-box14 {
  height: 460px;
}
.modal-box15 {
  height: 460px;
}
.modal-box16 {
  height: 269px;
}
.modal-box17 {
  height: 269px;
}
.modal-box18 {
  height: 300px;
}
.modal-box19 {
  height: 351px;
}
.modal-box20 {
  height: 351px;
}
.modal-box19 {
  height: 341px;
}
.modal-box20 {
  height: 341px;
}
.modal-box21 {
  height: 350px;
}

.modal-footer-2 {
  padding-left: 11rem;
}

.sp-box {
  font-size: 1.6rem;
  padding: 1.5rem 3rem 1.3rem;
  background: var(--main-color);
  color: var(--white-color);
  font-weight: bold;
  border-radius: 1rem;
  position: absolute;
  top: 1rem;
  left: 3rem;
}
.sp-box:hover {
  background-color: var(--prime-color) !important;
  color: var(--white-color) !important;
}
.btn-1 {
  animation: blink ingBg 1.2s infinite;
}
.toogle-btn {
  background: var(--prime-color);
  color: var(--white-color);
  font-size: 2rem;
  padding: 1.8rem 4rem 1.2rem;
  text-align: center;
  border-radius: 1rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight: bold;
  border: 3px solid var(--white-color);
}
.toogle-btn:hover {
  background: #a93737 !important;
}
.top-box .btn-bar {
  position: absolute;
  left: 50%;
  transform: translate(-112%);
  top: 76%;
}
.top-box .btn-bar-2 {
  position: absolute;
  right: 50%;
  transform: translate(341%);
  top: 4%;
}
.top-box .btn-bar-2 .btn-3 {
  background: var(--prime-color);
  color: var(--white-color);
  padding: 1.8rem 2rem 1.5rem !important;
  font-size: 2rem;
  text-align: center;
  border-radius: 1rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight: bold;
}
.toogle-btn:hover {
  color: var(--white-color) !important;
}
.top-box {
  background-image: url(../images/modulus-banner2.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 702px;
  position: relative;
  margin-bottom: 6rem;
  background-position: center center;
}
.top-box .btn-2 {
  padding: 1.8rem 6rem 1rem !important;
  margin-left: 2rem;
}

.top-box .btn-bar-2 .btn-3:hover {
  color: var(--white-color) !important;
  background: #a93737 !important;
}
.top-box img {
  width: 86%;
}
.top-box .cmn-heading {
  font-size: 4rem;
}
.top-box .cmn-heading .cl-txt {
  color: #a93737;
}
.top-box .top-txt {
  line-height: 0.6;
}
.top-box .top-content {
  padding-top: 4rem;
}
.form-box {
  margin-bottom: 6rem;
  margin-top: 6rem;
}
.registration-form {
  position: relative;
  background: var(--white-color);
  border-radius: 10px;
  padding: 2.9rem 4.2rem 3.2rem;
  box-shadow: 0 3rem 6rem 0rgba (11, 02, 56, 0.06);
  width: 100%;
  box-shadow: 1px 1px 5px #685f5f;
}
.registration-form:before {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 10rem;
  background: var(--main-color);
  clip-path: polygon(300% 0, 0 0, 0 100%);
  content: "";
  border-radius: 10px 10px 0 0;
}
.registration-form h4 {
  font-size: 3.9rem;
  color: #fff;
  line-height: 3rem;
  margin-bottom: 6rem;
  position: relative;
  z-index: 3;
}
.registration-form p {
  font-size: 1.4rem;
  color: #fff;
  line-height: 2.6rem;
  position: relative;
  z-index: 3;
  margin: 0 0 7.9rem;
}
.wpcf7-form-control-wrap {
  position: relative;
}
.registration-form input[type="text"] {
  width: 100%;
  height: 4.4rem;
  font-size: 1.4rem;
  line-height: 5.4rem;
  font-weight: bold;
  border-radius: 5px;
  border: none;
  background: #fff;
  outline: 0;
  border: 2px solid var(--main-color);
  padding: 0 2rem;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
}
.registration-form input[type="tel"] {
  width: 100%;
  height: 4.4rem;
  font-size: 1.4rem;
  line-height: 5.4rem;
  font-weight: bold;
  border-radius: 5px;
  border: none;
  background: #fff;
  outline: 0;
  border: 2px solid var(--main-color);
  padding: 0 2rem;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
}
.registration-form input::placeholder {
  color: #5f5c5c;
}
.registration-form input[type="submit"] {
  height: 50px;
  background: var(--prime-color);
  color: #fff;
  text-align: center;
  border: none;
  outline: 0;
  font-size: 2.6rem;
  line-height: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.3rem 5rem;
  border-radius: 3rem;
  font-family: "Prompt", sans-serif;
}
.registration-form input[type="submit"]:hover {
  background: var(--main-color) !important;
}
.registration-form select,
.registration-form textarea {
  height: 4.4rem;
  padding: 0 0 0 2rem;
  width: 100%;
  border: 2px solid var(--main-color);
  background: #fff;
  font-size: 1.3rem;
  color: #5f5c5c;
  font-weight: bold;
  border-radius: 5px;
  margin-bottom: 2rem;
}
.registration-form textarea {
  padding: 0 2rem;
  padding-top: 10px;
}
.sendotp {
  position: absolute;
  top: 0;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  background: #00669f;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  border: 2px solid var(--main-color);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 90px;
}
.sendotp:hover {
  color: #fff;
}
.occupatn-col .occ {
  margin-right: 3px;
}
.occupatn-col .land {
  margin-left: 3px;
}
#inputBoxContainer {
  margin-left: 6px;
}
#docs {
  height: 4.4rem;
  display: flex;
  align-items: center;
  display: flex;
  width: 100%;
  /* border: 2px solid var(--main-color); */
  background: none;
  border-radius: 5px;
  margin-bottom: 1rem;
  font-size: 12px;
  font-weight: 700;
}
.docs-lbl{
  color: red;
  font-size: 14px;
  font-weight: 700;
  margin-bottom:8px;
}
.registration-form select:focus,
.registration-form textarea:focus {
  border: 2px solid var(--main-color);
  outline: none !important;
  box-shadow: none !important;
}
.challenge-box {
  margin-bottom: 6rem;
}
.challenge-box .cmn-heading {
  font-size: 3.5rem;
}

.challenge-box .meet-points li {
  position: relative;
  padding-left: 3rem;
}
.challenge-box .meet-points li::before {
  position: absolute;
  content: "\f00c";
  font-family: "FONTAWESOME";
  top: 1rem;
  left: 0;
}

.talent-box {
  background: #f6f6f6;
  padding: 6rem 0;
  margin-bottom: 6rem;
}
.talent-box .cmn-heading {
  font-size: 3.5rem;
}
.talent-box .nav-item {
  width: 100%;
  text-align: center;
}
.talent-box .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--white-color) !important;
  background-color: var(--main-color);
  border-radius: 0;
  font-size: 2.2rem;
  font-weight: bold;
  border-bottom: 4px solid var(--white-color) !important;
}

.talent-box .nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #000 !important;
  font-size: 2.2rem !important;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  border-bottom: 4px solid var(--dark-color) !important;
}
.talent-box .bg-arrow {
  position: relative;
  background: var(--main-color);
  color: var(--white-color);
  padding: 9px 6px;
  width: 29rem;
}
.talent-box .bg-arrow::before {
  border: solid transparent;
  content: " ";
  height: 0px;
  width: 0px;
  position: absolute;
  pointer-events: none;
  border-left-color: var(--main-color);
  border-width: 22px;
  z-index: 1;
  top: 0px;
  right: -44px;
}
.talent-matrix-box {
  box-shadow: 2px 2px 6px #e1e0e0;
  background: var(--prime-color);
  border-bottom-right-radius: 3rem;
  height: 84rem;
}
.talent-box .bd-highlight img {
  height: 7rem;
}
.talent-box .talent-img {
  height: 41rem;
  border-radius: 4rem;
  border: 3px solid var(--white-color);
}

.modal-content-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 1200px !important;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1pxsolidrgba (0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
  /* height: 162rem !important; */
}

.modal-content-2 .modal-header {
  padding: 1.5rem 0 !important;
}
.modal-dialog-2 {
  max-width: max-content !important;
  margin: auto !;
}
.modal-header .modal-title {
  font-size: 3rem;
  color: var(--main-color);
}
.modal-body .modal-box {
  background: var(--main-color);
  padding: 3rem 4rem;
  /* height: 32rem; */
  margin: 2rem 0 0;
}
.modal-body .modal-box .cmn-heading {
  font-size: 3rem;
}
.notes .btn-close {
  position: absolute;
  right: 21px;
  top: 17px;
  border: 1px solid #353030;
}
.modal-body .modal-box ul li {
  font-size: 1.5rem;
  position: relative;
  color: var(--white-color);
  padding-left: 1rem;
  font-weight: bold;
}
.modal-body .modal-box ul li::before {
  position: absolute;
  content: "\f111";
  left: -11px;
  top: 3px;
  color: var(--white-color);
  font-size: 1rem;
  font-family: "FONTAWESOME";
}
.modal-content-2 .model-footer {
  background: var(--prime-color);
}
.modal-content-2 .model-footer .modal-rw {
  padding: 2rem 3rem;
}
.video-box {
  margin-bottom: 6rem;
}
.video-box .video-heading {
  color: #2d2c26;
  font-size: 3.5rem;
  line-height: 1.5;
}

.study-box {
  margin-bottom: 6rem;
}
.study-box .cmn-heading {
  font-size: 3.5rem;
}
.statistic-para {
  float: left;
  width: 100%;
}
.statistic-para p {
}
.statistic-images {
  float: left;
  width: 100%;
}
.statistic-images img {
}
#case-studies {
  background: url(../images/h14-bg-section-04.jpg);
  padding-bottom: 10px;
  background-position: center center;
  background-size: cover;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  padding-top: 60px;
  padding-bottom: 80px;
  background-attachment: fixed;
  background: #002531;
}
#case-studies-2 {
  margin-top: -42px;
  margin-bottom: 50px;
}

.case-studie-boxs {
  border-width: 2px 2px 0;
  /* border-style: solid;
  border-color: #ebebeb; */
  padding: 26px 11px;
  position: relative;
  transition: 0.4s ease;
  min-height: 366px;
  transition: all 0.5s;
}

.case-studie-boxs .case-studie-img {
  width: 100%;
}
.case-studie-boxs .case-studie-img a {
}
.case-studie-boxs .case-studie-img a img {
  width: 100%;
}
.case-studie-content {
  padding: 10px 0px 6px;
  width: 100%;
  height: 18rem;
}
.case-studie-content .title {
  margin-bottom: 13px;
  font-size: 20px;
  font-weight: 900;
  color: #190200;
  text-align: center;
  font-family: "Prompt", sans-serif;
}

.case-studie-content .sub-title {
  font-size: 15px;
  margin-bottom: 13px;
  padding: 0px 0px;
  text-align: center;
}
.comman-btn {
  background-color: inherit;
  border: none;
  border-radius: 30px 5px 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.07);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  padding: 10px 27px;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: all 0.5s ease 0s;
  background-image: linear-gradient(to right, var(--main-color), var(--prime-color));
  color: var(--white-color);
  animation-delay: 1s;
}

.comman-btn::before {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 60px;
  content: "";
  height: 100%;
  left: -110%;
  opacity: 0.1;
  position: absolute;
  top: 0;
  transition: all 0.5s ease 0s;
  width: 100%;
  z-index: -1;
}
.comman-btn::after {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 60px;
  content: "";
  height: 100%;
  left: -110%;
  opacity: 0.1;
  position: absolute;
  top: 0;
  transition: all 0.5s ease 0s;
  width: 100%;
  z-index: -1;
}
.comman-btn:hover {
  border-radius: 5px;
  color: var(--color-white);
}
.comman-btn:hover:before {
  left: -10%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -khtml-transition: all 0.3s ease 0s;
}
.comman-btn:hover:after {
  left: -20%;
}
.comman-btn i {
  font-size: 15px;
}
.layar-btns {
  align-items: center;
  display: flex;
  justify-content: center;
}
.layer-btn-1 {
  padding-top: 3.6rem;
}
.layar-btns span {
  margin: 1px 10px;
  font-weight: bold;
  font-size: 15px;
}
.count-box {
  margin-bottom: 6rem;
}
.count-box .count-item {
  background: skyblue;
  padding: 3rem 2.5rem;
  border-radius: 0.8rem;
  border-bottom: 7px solid var(--main-color);
  height: 16rem;
}
.count-box .item-2 {
  background: #ebb487 !important;
}
.count-box .item-3 {
  background: #eb8c87 !important;
}
.count-box .item-4 {
  background: #8eeb87 !important;
}
.count-box .count-item .h1 {
  font-size: 3.5rem;
  color: white;
}
.count-box .count-item span {
  font-size: 2rem;
  color: #4d4d4d;
}
.case-studie-boxs:hover {
  box-shadow: 2px 2px 10px #a5a3a3 !important;
  background-color: #fff !important;
  border: 3px solid #00669f;
  border-radius: 20px;
  display: blocks;
  transform: scale(1.1);
}

.footer-copyright {
  background: var(--main-color);
  padding: 2rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.owl-nav button {
  position: absolute;
  top: 50%;
  background-color: #000;
  color: #fff;
  margin: 0;
  transition: all 0.3s ease-in-out;
}
.owl-nav button.owl-prev {
  left: 0;
}
.owl-nav button.owl-next {
  right: 0;
}

.owl-dots {
  text-align: center;
  padding-top: 15px;
}
.owl-dots button.owl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
  display: none;
}
.owl-dots button.owl-dot.active {
  background-color: #000;
}
.owl-dots button.owl-dot:focus {
  outline: none;
}
.owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.38) !important;
}
.owl-slider-1 span {
  display: none !important;
}
.owl-slider span {
  color: var(--white-color);
  font-size: 70px;
  position: relative;
  top: -5px;
}
.owl-nav button:focus {
  outline: none;
}
.owl-slide .owl-content {
  background: var(--main-color) !important;
}
.talent-box .courses-item {
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  border-radius: 6px;
  padding: 4px;
  border: 2px solid #fff;
  background: var(--main-color);
  transition: all 0.5s;
}
.talent-box .courses-item:hover {
  background: #a93737;
  transform: scale(1.1);
}
.talent-box .corsuse-box {
  margin: 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-modal {
  background: var(--main-color);
  padding: 2rem;
  border-radius: 2.3rem;
  border: 4px solid white;
}
.contact-modal .modal-header {
  border-bottom: 6px solid #dee2e6 !important;
}
.contact-modal .modal-contact-1 {
  border-bottom: 1px solid #eceae2;
  padding: 1rem 0 2rem;
}
.contact-modal .modal-contact-2 {
  border-bottom: 1px solid #eceae2;
  padding: 2rem 0;
}
.contact-modal .modal-contact-3 {
  padding: 2rem 0;
}
.contact-modal .conatct-icons {
  background: var(--prime-color);
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 6px 0;
}
.contact-modal .contact-head-icon {
  width: 4rem !important;
  height: 4rem !important;
}
.contact-modal .btn-close {
  background: none !important;
  opacity: 1 !important;
  position: absolute;
  top: 0rem;
  right: 3.9rem;
}
.contact-modal .btn-close .btn-icon {
  background: var(--prime-color);
  height: 4rem;
  width: 5rem;
  border-bottom-left-radius: 2rem;
  border-top-right-radius: 2rem;
  font-size: 3rem;
  padding: 0.4rem 0;
}
.contact-modal .modal-footer {
  padding: 0px !important;
  border-top: none !important;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .toogle-btn {
    font-size: 1.2rem !important;
    padding: 1.9rem 2rem 1.2rem !important;
  }

  .registration-form {
    padding: 0.5rem 1.2rem 3.2rem;
  }
  .registration-form:before {
    width: 100%;
    height: 5rem;
    background: var(--main-color);
    clip-path: polygon(1% 5, 1 4, 6 128%) !important;
  }
  .registration-form h4 {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  .registration-form input[type="text"] {
    margin-bottom: 1rem !important;
  }
  .registration-form select {
    margin-bottom: 1rem !important;
  }
  .count-box .count-item {
    margin-bottom: 2rem;
  }
  .challenge-box .cmn-heading {
    font-size: 2rem;
  }
  .talent-box .cmn-heading {
    font-size: 1.4rem;
  }
  .talent-box .nav-link {
    font-size: 1.2rem !important;
  }
  .date-box .date-heading-1 {
    font-size: 2.5rem;
  }
  .paper-box .paper-heading-1 {
    font-size: 2.2rem;
    line-height: 1.6;
  }
  .video-box .video-heading {
    font-size: 2.2rem;
  }
  .video-bar {
    margin-bottom: 2rem;
  }
  .accordion-flush .accordion-item .accordion-button {
    font-size: 1rem;
  }
  .faq-box .cmn-heading {
    font-size: 2.2rem;
  }
  .whyUs-container .cmn-heading {
    font-size: 2.5rem;
    padding-left: 3rem;
  }
  .talent-box .bg-arrow {
    position: relative;
    background: var(--main-color);
    color: var(--white-color);
    padding: 9px 3px;
    width: 21rem !important;
  }
  .talent-matrix-box {
    height: 155rem;
  }
  .modal-content-2 {
    width: auto !important;
    height: auto !important;
  }
  .modal-header .modal-title {
    font-size: 1.5rem;
    color: var(--main-color);
    padding-top: 2rem;
  }
  .modal-box21 {
    height: auto !important;
  }
  .talent-box .courses-item {
    margin: 0.5rem 0;
  }
  .modal-footer-2 {
    padding-left: 0rem !important;
    border-left: none !important;
  }
  .modal-box {
    height: auto !important;
  }
  .sp-box {
    font-size: 1rem;
    padding: 0.6rem 1rem 0.5rem;
    top: 6rem;
    left: 7%;
  }
  .top-sm .btn-2 {
    padding: 0.9rem 2rem 0.6rem !important;
    margin-left: 0rem !important;
  }
  .top-sm {
    display: block !important;
  }
  .top-box {
    display: none !important;
  }
  .top-sm .btn-bar {
    margin: 4rem auto !important;
  }

  .top-sm .btn-2 {
    padding: 1.9rem 4rem 1.2rem !important;
    margin-left: 2rem;
  }
  .footer-copyright .mobile-foot .copyright-txt {
    font-size: 1rem !important;
  }
  .footer-copyright .mobile-foot .logo-footer-box img {
    height: 2rem !important;
  }
  .talent-box .bg-arrow::before {
    top: -1px;
    right: -42px;
  }
  .sp-box-2 {
    top: 6rem !important;
    left: 19rem !important;
  }
  .case-studie {
    margin-bottom: 8rem;
  }
  .form-box {
    margin-bottom: 10rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .toogle-btn {
    font-size: 1.2rem !important;
    padding: 1.9rem 2rem 1.2rem !important;
  }

  .top-sm .btn-2 {
    padding: 0.9rem 2rem 0.6rem !important;
    margin-left: 0rem !important;
  }
  .top-sm {
    display: block !important;
  }
  .top-box {
    display: none !important;
  }
  .top-sm .btn-bar {
    margin: 4rem auto !important;
  }

  .top-sm .btn-2 {
    padding: 1.9rem 4rem 1.2rem !important;
    margin-left: 2rem;
  }

  .registration-form {
    margin-top: 2rem;
  }
  .count-box .count-item {
    margin-bottom: 2rem;
  }
  .talent-box .cmn-heading {
    font-size: 1.4rem;
  }
  .talent-box .bd-highlight img {
    width: 100%;
  }
  .paper-box .paper-heading-1 {
    font-size: 2.8rem;
  }
  .video-box .video-txt span {
    padding: 1.2rem 2rem;
  }
  .about-img .image img:last-child {
    width: 100%;
  }
  .about-image-block .image {
    margin-bottom: 12rem;
  }
  .talent-box .talent-img {
    width: 100%;
    object-fit: cover;
  }
  .talent-box .courses-item {
    font-size: 15px;
    padding: 1px;
  }
  .talent-matrix-box {
    height: auto !important;
  }
  .modal-content-2 {
    width: auto !important;
  }
  .modal-box3 {
    height: 354px;
  }
  .modal-box4 {
    height: 354px;
  }
  .modal-box5 {
    height: 354px;
  }
  .modal-box8 {
    height: 522px;
  }
  .modal-box9 {
    height: 522px;
  }
  .modal-box10 {
    height: 522px;
  }
  .modal-box21 {
    height: 389px;
  }
  .modal-box16 {
    height: 301px;
  }
  .modal-box17 {
    height: 301px;
  }
  .sp-box {
    font-size: 0.8rem;
    padding: 1.5rem 1rem 1.3rem;
    top: 2rem;
    left: 1rem;
  }
  .sp-box-2 {
    top: 2rem !important;
    left: 56rem !important;
  }
}

@media only screen and (min-width: 1080px) and (max-width: 2048px) {
  .top-box {
    background-size: contain;
    height: 695px;
  }
  .top-box .btn-bar-2 {
    right: 50%;
    transform: translate(332%);
    top: 4.3%;
  }
  .top-box .btn-bar {
    transform: translate(-112%);
  }
  .talent-matrix-box {
    height: auto;
  }
}