* {
  padding: 0;
  margin: 0;
}
body,
html {
  height: 100%;
}
body {
  --rgb-color-r: #bd313a;
  --rgb-color-g: #30704f;
  --rgb-color-b: #16497c;
  --rgb-margin-left: 3.75rem;
  --rgb-margin-right: 3.75rem;
  /* background-color: rgb(233, 161, 161); */
}

div {
  box-sizing: border-box;
}
img {
  vertical-align: bottom;
}

#app {
  width: 100%;
  height: 100%;
}

.container {
  max-width: 120rem;
  min-width: 62.5rem;
  max-height: 67.5rem;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
}

.rgb-main {
  width: 66.6875rem;
  min-width: 56%;
  display: flex;
  flex-direction: column;
}

.rgb-main .header {
  margin-top: 2.0625rem;
  margin-left: var(--rgb-margin-left);
}
.rgb-main .header .logo {
  max-width: 12.25rem;
  max-height: 4.0625rem;
}

.rgb-main .content {
  position: relative;
  margin: auto;
  margin-left: var(--rgb-margin-left);
  margin-right: var(--rgb-margin-right);
}
.rgb-main .content .content__text {
  background-image: url("../images/RGB-OMN.png");
  /* background-size: 41.625rem; */
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  /* width: 54.4375rem; */
  width: 100%;
  max-width: 54.375rem;
  max-height: 20.5625rem;
}

.rgb-main .footer {
  position: relative;
  margin-left: var(--rgb-margin-left);
  margin-right: var(--rgb-margin-right);
  margin-bottom: 2.625rem;
  max-width: 48.9375rem;
  max-height: 5rem;
}
.rgb-main .footer .email-link {
  position: absolute;
  height: 1.25rem;
  bottom: 0;
  right: 0;
  max-width: 15rem;
  width: 50%;
}

.rgb-carousel {
  width: 53.3125rem;
  min-width: 44%;
  position: relative;
}

.rgb-carousel .footer {
  position: absolute;
  bottom: 2.6rem;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.rgb-carousel .footer .dot-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 1.75rem;
}
.rgb-carousel .footer .dot-wrapper .dot {
  height: 0.5625rem;
  width: 0.5625rem;
  border-radius: 50%;
  background-color: #cbcbcb;
}
.rgb-carousel .footer .dot-wrapper .dot:nth-child(2) {
  margin: 0 0.7188rem;
}
.rgb-carousel .footer .dot-wrapper .dot.dot-r {
  background-color: var(--rgb-color-r);
}
.rgb-carousel .footer .dot-wrapper .dot.dot-g {
  background-color: var(--rgb-color-g);
}
.rgb-carousel .footer .dot-wrapper .dot.dot-b {
  background-color: var(--rgb-color-b);
}

.rgb-footer__line {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.rgb-footer__line .line {
  width: 100%;
  height: 0.375rem;
}
.rgb-footer__line .line-r {
  background-color: var(--rgb-color-r);
}
.rgb-footer__line .line-g {
  background-color: var(--rgb-color-g);
}
.rgb-footer__line .line-b {
  background-color: var(--rgb-color-b);
}

.el-carousel__arrow {
  background-color: rgba(31, 45, 61, 0.31) !important;
}
.el-carousel__arrow:hover {
  background-color: rgba(31, 45, 61, 0.51) !important;
}
.el-carousel.el-carousel--horizontal {
  height: 100%;
}

@media (max-width: 1200px) {
  .rgb-carousel .carousel-img {
    object-fit: contain;
  }
}
@media (min-width: 1201px) {
  .rgb-carousel .carousel-img {
    object-fit: cover;
  }
  .rgb-main .footer {
    margin-left: 6.1875rem;
  }
  .rgb-main .content {
    margin-left: 6.1875rem;
  }
  .rgb-main .header {
    margin-left: 6.1875rem;
  }
}