mjlogistics/assets/css/style.css

@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #000;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

html:has(.header--mob--wrap.active) {
  overflow: hidden;
}
html:has(.header--mob--lang--wrap.active) {
  overflow: hidden;
}

* {
  font-family: "pretendard";
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header--wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: background-color 0.3s ease;
}
.header--wrap:hover {
  background-color: #fff;
}
.header--wrap:hover .header--inner .header--logo {
  background-image: url(../img/logo--white.svg);
}
.header--wrap:hover .header--inner:has(.header--mob--lang--btn.active) .header--logo {
  background-image: url(../img/logo--default.svg);
}
.header--wrap:hover .header--inner:has(.header--mob--btn.active) .header--logo {
  background-image: url(../img/logo--default.svg);
}
.header--wrap:hover .header--inner .header--mob--lang--btn {
  background-image: url(../img/ico--global--black.svg);
}
.header--wrap:hover .header--inner .header--mob--btn {
  background-image: url(../img/ico--header--black.svg);
}
.header--wrap:hover .header--inner .header--nav > ul > li > a {
  color: #000;
}
.header--wrap:hover .header--inner .header--lang--btn {
  background-color: #EC3237;
}
.header--wrap .header--inner {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
}
.header--wrap .header--inner .header--logo {
  display: flex;
  align-items: center;
  max-width: 290px;
  min-width: 191px;
  width: 30%;
  z-index: 100;
  height: 55px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/logo--default.svg);
}
.header--wrap .header--inner .header--nav > ul {
  list-style: none;
  display: flex;
}
.header--wrap .header--inner .header--nav > ul > li {
  position: relative;
}
.header--wrap .header--inner .header--nav > ul > li > a {
  transition: all 0.3s;
  display: inline-block;
  text-transform: uppercase;
  padding: 40px 75px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.header--wrap .header--inner .header--nav > ul > li:hover .sub--nav--wrap {
  max-height: 400px;
}
.header--wrap .header--inner .header--nav > ul > li:hover:nth-child(3) .sub--nav--wrap {
  max-height: 800px;
  transition: max-height 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap {
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: #fff;
  overflow: hidden;
}
.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav {
  padding: 35px 30px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav > a {
  display: inline-block;
  font-weight: 400;
  color: #111;
  text-transform: capitalize;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.3s;
}
.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav > a:hover {
  color: #EC3237;
  font-weight: 500;
}
.header--wrap .header--inner .header--lang--btn {
  display: flex;
  align-items: center;
  width: 130px;
  color: #fff;
  transition: all 0.3s;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 38px 20px;
  position: relative;
}
.header--wrap .header--inner .header--lang--btn:hover .lang--select--wrap {
  height: 190px;
  border-top: 1px solid #FB484D;
}
.header--wrap .header--inner .header--lang--btn i {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
.header--wrap .header--inner .header--lang--btn .ico--global {
  width: 24px;
  margin-right: 10px;
  height: 24px;
  background-image: url(../img/ico--global.svg);
}
.header--wrap .header--inner .header--lang--btn .ico--arrow {
  margin-left: auto;
  width: 14px;
  height: 14px;
  background-image: url(../img/ico--global--arrow.svg);
}
.header--wrap .header--inner .header--lang--btn .lang--select--wrap {
  height: 0;
  overflow: hidden;
  position: absolute;
  background: #EC3237;
  top: 100%;
  left: 0;
  transition: height 0.3s;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
}
.header--wrap .header--inner .header--lang--btn .lang--select--wrap li {
  width: 100%;
  transition: all 0.3s;
  text-align: center;
}
.header--wrap .header--inner .header--lang--btn .lang--select--wrap li a {
  padding: 10px 0;
  width: 100%;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
}
.header--wrap .header--inner .header--lang--btn .lang--select--wrap li:first-child a {
  padding-top: 25px;
}
.header--wrap .header--inner .header--lang--btn .lang--select--wrap li:last-child a {
  padding-bottom: 25px;
}
.header--wrap .header--inner .header--lang--btn .lang--select--wrap li:hover a {
  color: #ef0;
}
.header--wrap .header--inner .header--lang--btn .lang--select--wrap li.active a {
  color: #ef0;
}
.header--wrap .header--inner .header--mob--lang--btn {
  display: none;
  width: 26px;
  margin-left: auto;
  margin-right: 20px;
  z-index: 100;
  height: 26px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(../img/ico--global.svg);
  cursor: pointer;
}
.header--wrap .header--inner .header--mob--lang--btn.active {
  margin-right: 0;
  background-image: url(../img/ico--close.svg) !important;
}
.header--wrap .header--inner .header--mob--lang--btn.hide {
  display: none;
}
.header--wrap .header--inner .header--mob--lang--wrap {
  position: fixed;
  background-color: #1a1b20;
  width: 100%;
  height: 100vh;
  right: -100%;
  z-index: 99;
  top: 0;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}
.header--wrap .header--inner .header--mob--lang--wrap.active {
  right: 0;
}
.header--wrap .header--inner .header--mob--lang--wrap > ul {
  display: flex;
  width: 100%;
  flex-direction: column;
  list-style: none;
}
.header--wrap .header--inner .header--mob--lang--wrap > ul > li {
  width: 100%;
  text-align: center;
}
.header--wrap .header--inner .header--mob--lang--wrap > ul > li > a {
  text-decoration: none;
  width: 100%;
  padding: 45px 0;
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 25px;
}
.header--wrap .header--inner .header--mob--lang--wrap > ul > li.active > a {
  color: #ef0;
}
.header--wrap .header--inner .header--mob--btn {
  display: none;
  width: 26px;
  cursor: pointer;
  z-index: 100;
  height: 26px;
  background-image: url(../img/ico--header.svg);
  background-repeat: no-repeat;
}
.header--wrap .header--inner .header--mob--btn.active {
  background-image: url(../img/ico--close.svg) !important;
}
.header--wrap .header--inner .header--mob--btn.hide {
  display: none;
}
.header--wrap .header--inner .header--mob--wrap {
  position: fixed;
  background-color: #101014;
  width: 100%;
  height: 100vh;
  padding-top: 80px;
  right: -100%;
  z-index: 99;
  top: 0;
  display: flex;
  transition: all 0.3s;
}
.header--wrap .header--inner .header--mob--wrap.active {
  right: 0;
}
.header--wrap .header--inner .header--mob--wrap .mob--l {
  width: 40%;
  border-top: 1px solid #31313A;
  padding: 40px 0;
}
.header--wrap .header--inner .header--mob--wrap .mob--l ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.header--wrap .header--inner .header--mob--wrap .mob--l ul li a {
  line-height: 25px;
  height: 25px;
  width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: 0 30px;
  transition: all 0.3s;
  position: relative;
}
.header--wrap .header--inner .header--mob--wrap .mob--l ul li a::after {
  content: "";
  position: absolute;
  width: 2px;
  right: 0;
  top: 0;
  display: inline-block;
  transition: all 0.3s;
  height: 100%;
  background-color: #EC3237;
  opacity: 0;
}
.header--wrap .header--inner .header--mob--wrap .mob--l ul li a:hover {
  color: #EC3237;
}
.header--wrap .header--inner .header--mob--wrap .mob--l ul li a:hover::after {
  opacity: 1;
}
.header--wrap .header--inner .header--mob--wrap .mob--l ul li a.active {
  color: #EC3237;
}
.header--wrap .header--inner .header--mob--wrap .mob--l ul li a.active::after {
  opacity: 1;
}
.header--wrap .header--inner .header--mob--wrap .mob--r {
  width: 60%;
  border-top: 1px solid #31313A;
  background-color: #1a1b20;
  padding: 40px 10px 40px 30px;
}
.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap {
  height: 100%;
  overflow-y: auto;
}
.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav {
  display: none;
  flex-direction: column;
  gap: 40px;
}
.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav.active {
  display: flex;
}
.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  width: 100%;
}
.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a.active {
  color: #ec3237;
}
.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a br {
  display: none;
}

.footer--wrap {
  z-index: 10;
  position: absolute;
  width: 100%;
  color: #fff;
  bottom: 0;
  left: 0;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: #020203;
}

.container {
  position: relative;
  height: 300vh; /* 3개 이미지 * 100vh */
}
.container .image--section {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.container .image--section.global--section {
  background-color: #1A1B20;
}
.container .image--section.contact--section {
  background-image: url(../img/main--contact.png);
  background-size: cover;
}
.container .image--section.black3 {
  background-color: #15161A;
}
.container .image--section .section--container {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.container .image--section .section--container .map--wrap {
  position: absolute;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: flex-end;
  height: 100%;
}
.container .image--section .section--container .map--wrap .map--img {
  position: relative;
}
.container .image--section .section--container .map--wrap .map--img img {
  -o-object-fit: none;
     object-fit: none;
  height: auto;
}
.container .image--section .section--container .map--wrap .map--dot--box {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots {
  position: relative;
  width: 100%;
  height: 100%;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot {
  width: 168px;
  height: 168px;
  border-radius: 100px;
  background: rgba(205, 25, 29, 0.6);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  justify-content: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot .circle {
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  padding: 8px 10px;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot > p {
  margin-top: 10px;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot > p span {
  color: #fff;
  font-size: 23px;
  font-weight: 800;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot .txt {
  margin-top: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot1 {
  left: 7%;
  top: 24%;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot2 {
  background: rgba(169, 9, 13, 0.6);
  left: 27%;
  bottom: 18%;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot3 {
  background: rgba(235, 63, 68, 0.6);
  top: 19%;
  left: 44%;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot4 {
  background: rgba(188, 106, 108, 0.6);
  right: 25%;
  bottom: 18%;
}
.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot5 {
  background: rgba(166, 0, 4, 0.6);
  right: 9%;
  top: 21%;
}
.container .image--section .section--container .text--wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 10%;
}
.container .image--section .section--container .text--wrap > h4 {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.36px;
  margin-bottom: 70px;
}
.container .image--section .section--container .text--wrap > h4 span {
  color: #EC3237;
}
.container .image--section .section--container .text--wrap > h3 {
  font-size: 50px;
  color: rgba(255, 255, 255, 0.1);
  margin-bottom: 35px;
}
.container .image--section .section--container .text--wrap > p {
  color: #fff;
  font-size: 19px;
  font-weight: 400;
  word-break: keep-all;
  letter-spacing: -0.38px;
  margin-bottom: 110px;
}
.container .image--section .section--container .text--wrap .btn--wrap a {
  display: flex;
  gap: 20px;
  align-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 20px 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
}
.container .image--section .section--container .text--wrap .btn--wrap a .ico {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-image: url(../img/ico--arrow--white.svg);
}
.container .image--section .section--container .contact--wrap {
  width: 100%;
  gap: 30px;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.container .image--section .section--container .contact--wrap .location--group {
  display: flex;
  flex-wrap: wrap;
  width: 52%;
  height: 80vh;
  max-height: 850px;
  gap: 2%;
}
.container .image--section .section--container .contact--wrap .location--group input[type=radio] {
  display: none;
}
.container .image--section .section--container .contact--wrap .location--group .location--item {
  display: flex;
  width: 18.4%;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 30px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.container .image--section .section--container .contact--wrap .location--group .location--item:hover {
  transform: scale(1.1);
}
.container .image--section .section--container .contact--wrap .location--group .location--item label {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.container .image--section .section--container .contact--wrap .location--group .location--item .image--area {
  cursor: pointer;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.container .image--section .section--container .contact--wrap .location--group .location--item .image--area:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(26, 27, 32, 0.5);
  top: 0;
  left: 0;
}
.container .image--section .section--container .contact--wrap .location--group .location--item .text--area {
  cursor: pointer;
  position: absolute;
  padding: 25px;
  font-weight: 600;
  font-size: 14px;
  z-index: 2;
  color: #fff;
  top: 0;
  left: 0;
}
.container .image--section .section--container .contact--wrap .location--group input[type=radio]:checked + label {
  border: 2px solid rgba(236, 50, 55, 0.5);
  box-shadow: 0 0 20px 0 rgba(25, 36, 77, 0.25);
}
.container .image--section .section--container .contact--wrap .location--group input[type=radio]:checked + label .image--area::before {
  display: none;
}
.container .image--section .section--container .contact--wrap .location--group label[for=location1] .image--area {
  background-image: url(../img/contact1.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location2] .image--area {
  background-image: url(../img/contact2.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location3] .image--area {
  background-image: url(../img/contact3.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location4] .image--area {
  background-image: url(../img/contact4.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location5] .image--area {
  background-image: url(../img/contact5.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location6] .image--area {
  background-image: url(../img/contact6.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location7] .image--area {
  background-image: url(../img/contact7.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location8] .image--area {
  background-image: url(../img/contact8.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location9] .image--area {
  background-image: url(../img/contact9.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location10] .image--area {
  background-image: url(../img/contact10.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location11] .image--area {
  background-image: url(../img/contact11.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location12] .image--area {
  background-image: url(../img/contact12.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location13] .image--area {
  background-image: url(../img/contact13.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location14] .image--area {
  background-image: url(../img/contact14.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location15] .image--area {
  background-image: url(../img/contact15.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location16] .image--area {
  background-image: url(../img/contact16.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location17] .image--area {
  background-image: url(../img/contact17.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location18] .image--area {
  background-image: url(../img/contact18.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location19] .image--area {
  background-image: url(../img/contact19.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location20] .image--area {
  background-image: url(../img/contact20.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location21] .image--area {
  background-image: url(../img/contact21.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location22] .image--area {
  background-image: url(../img/contact22.png);
}
.container .image--section .section--container .contact--wrap .location--group label[for=location23] .image--area {
  background-image: url(../img/contact23.png);
}
.container .image--section .section--container .contact--wrap .contact--tit--mo {
  display: none;
}
.container .image--section .section--container .contact--wrap .contact--btn--mo {
  display: none;
}
.container .image--section .section--container .contact--wrap .contact--form {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  max-height: 850px;
  justify-content: space-between;
  width: calc(48% - 30px);
  background-color: #1a1b20;
  border-radius: 40px;
  padding: 70px;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--tit {
  width: 100%;
  display: flex;
  color: #fff;
  justify-content: space-between;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--tit h3 {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 25px;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--tit p {
  font-size: 16px;
  font-weight: 400;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--tit .contact--btn {
  background-repeat: no-repeat;
  background-position: center;
  min-width: 70px;
  border: none;
  cursor: pointer;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ec3237;
  background-image: url(../img/ico--contact.svg);
}
.container .image--section .section--container .contact--wrap .contact--form .contact--cont {
  width: 100%;
  color: #fff;
  display: flex;
  overflow-y: auto;
  height: calc(100% - 140px);
  flex-direction: column;
  gap: 35px;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap {
  display: flex;
  width: 100%;
  gap: 30px;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap .input--wrap {
  width: calc(50% - 15px);
}
.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap select {
  border-radius: 12px;
  border: 1px solid #323340;
  background-color: #262730;
  padding: 20px;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url(../img/ico--select.svg);
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px 16px;
  padding-right: 50px;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap input {
  border-radius: 12px;
  border: 1px solid #323340;
  background-color: #262730;
  padding: 20px;
  font-size: 16px;
  color: #fff;
}
.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap textarea {
  resize: none;
  border-radius: 12px;
  border: 1px solid #323340;
  background-color: #262730;
  padding: 20px;
  font-size: 16px;
  color: #fff;
}
.container .image--section img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.container .image--section:nth-child(2) {
  z-index: 2;
}
.container .image--section:nth-child(3) {
  z-index: 3;
}
.container .image--section .main--swiper {
  position: relative;
}
.container .image--section .main--swiper .swiper-slide .img--wrap {
  position: relative;
}
.container .image--section .main--swiper .swiper-slide .img--wrap::after {
  content: "";
  position: absolute;
  width: 100%;
  z-index: 2;
  display: inline-block;
  height: 100%;
  background: linear-gradient(180deg, #1A1B20 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.4;
  top: 0;
  left: 0;
}
.container .image--section .main--swiper .swiper-slide .txt--wrap {
  position: absolute;
  display: flex;
  max-width: 1600px;
  width: 100%;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  flex-direction: column;
}
.container .image--section .main--swiper .swiper-slide .txt--wrap > span {
  color: #fff;
  font-size: 23px;
  font-weight: 500;
  margin-bottom: 35px;
  letter-spacing: -0.46px;
  text-transform: capitalize;
}
.container .image--section .main--swiper .swiper-slide .txt--wrap > h2 {
  font-size: 120px;
  color: #fff;
  margin-bottom: 65px;
  font-weight: 900;
  letter-spacing: -2.4px;
  text-transform: uppercase;
}
.container .image--section .main--swiper .swiper-slide .txt--wrap > h2 strong {
  color: #ec3237;
}
.container .image--section .main--swiper .swiper-slide .txt--wrap .btn--wrap a {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  color: #ec3237;
  font-size: 14px;
  background-color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 700;
  padding: 20px 30px;
  border-radius: 100px;
}
.container .image--section .main--swiper .swiper-slide .txt--wrap .btn--wrap a .ico {
  display: inline-block;
  background-image: url(../img/ico--arrow.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 16px;
  height: 16px;
}
.container .image--section .main--swiper .swiper--btn--wrap {
  display: none;
  position: absolute;
  right: 20px;
  display: flex;
  gap: 15px;
  width: 143px;
  height: 64px;
  bottom: 30px;
}
.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next,
.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev {
  display: none;
  margin-top: 0;
  top: 0;
  background-image: url(../img/ico--arrow--swiper.svg);
  background-size: 25px 25px;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-position: center;
}
.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next::after,
.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev::after {
  display: none;
}
.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev {
  left: 0;
  transform: rotate(180deg);
}
.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next {
  right: 0;
  left: auto;
}
.container .image--section .main--swiper .swiper--pag--wrap {
  display: none;
  position: absolute;
  width: calc(100% - 240px);
  height: 64px;
  bottom: 30px;
  left: 30px;
}
.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag {
  position: relative;
  height: 100%;
  width: 100%;
}
.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag p {
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span {
  display: inline-block;
  position: absolute;
  z-index: 1;
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 700;
  bottom: 0;
}
.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span.active {
  color: #fff;
}
.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span.num--6 {
  right: 0;
}
.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb .swiper-pagination {
  position: absolute;
  top: auto;
  border-radius: 100px;
  height: 5px;
  width: calc(100% - 60px);
  margin: 5px 0;
  left: 30px;
  overflow: hidden;
  bottom: 0;
  background-color: #4A494D;
}
.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb .swiper-pagination .swiper-pagination-progressbar-fill {
  background-color: #fff;
}
.container .image--section .main--swiper .main--swiper--tab {
  position: absolute;
  max-width: 1600px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: 5;
}
.container .image--section .main--swiper .main--swiper--tab .tab--wrap {
  cursor: pointer;
  transition: all 0.3s;
  word-break: keep-all;
  width: 16.6666666667%;
  padding: 70px 35px 50px;
}
.container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner {
  padding-top: 20px;
  border-top: 1px solid #fff;
}
.container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner dt {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner dd {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  line-height: 1.7;
}
.container .image--section .main--swiper .main--swiper--tab .tab--wrap.active {
  background-color: #ec3237;
}/*# sourceMappingURL=style.css.map */