@charset "UTF-8"; .section.banners {display: flex;flex-direction: column;align-items: center;justify-content: center;max-width: 1920px;height: 635px;z-index: 99; } .section.banners .carousel {display: block;position: relative;width: 100%;height: 100%; } .section.banners .carousel .holder {height: 100%;overflow: hidden; } .section.banners .carousel .holder > .row {flex-wrap: nowrap;position: relative;height: 100%; } .section.banners .carousel .holder > .row > .col {flex-shrink: 0;height: 100%; } .section.banners .carousel .holder .item {position: relative;border: 0;width: 100%;height: 635px; } .section.banners .carousel .holder .slide {height: 100%; } .section.banners .carousel .holder .image {position: relative;height: 100%; } .section.banners .carousel .holder .image::after {content: " ";position: absolute;inset: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6); } .section.banners .carousel .holder .img-fluid {width: 100%;height: 100%;object-fit: cover; } .section.banners .carousel .holder .container {display: flex;align-items: flex-start;flex-direction: column;position: absolute;z-index: 1;height: 100%;top: 0;left: 50%;transform: translateX(-50%);color: var(--white);padding-top: 6.25rem; } @media (min-width: 1232px) {.section.banners .carousel .holder .container {padding-top: 7.2%;} } .section.banners .carousel .holder .container .inner {width: 100%;height: 91.3%;padding-top: 5.125rem;position: relative; } @media (min-width: 768px) {.section.banners .carousel .holder .container .inner {max-width: 81%;padding-right: 2.875rem;margin-left: -2.6875rem;padding-left: 2.6875rem;} } .section.banners .carousel .holder .container .inner::before {content: "■";position: absolute;top: 0;left: 0;width: 6.25rem;height: 5.625rem;display: flex;align-items: center;justify-content: center;font-size: 0.625rem;color: var(--primary); } .section.banners .carousel .holder .container h1, .section.banners .carousel .holder .container .h1, .section.banners .carousel .holder .container .content {max-width: 520px; } .section.banners .carousel .holder .container h1, .section.banners .carousel .holder .container .h1 {color: var(--white);font-size: 1.875rem;line-height: 1.1764705882;text-align: left;margin-bottom: 1.5625rem; } @media (min-width: 576px) {.section.banners .carousel .holder .container h1, .section.banners .carousel .holder .container .h1 {font-size: 2.5rem;} } @media (min-width: 768px) {.section.banners .carousel .holder .container h1, .section.banners .carousel .holder .container .h1 {font-size: 3.125rem;} } @media (min-width: 992px) {.section.banners .carousel .holder .container h1, .section.banners .carousel .holder .container .h1 {font-size: 3.825rem;} } .section.banners .carousel .holder .container .content p {padding-left: 1.5rem;font-size: 0.875rem;line-height: 1.6470588235;max-width: 670px;position: relative; } @media (min-width: 768px) {.section.banners .carousel .holder .container .content p {font-size: 1.0625rem;} } .section.banners .carousel .holder .container .content p::before {content: " ";position: absolute;inset: 0;top: 0;width: 2px;height: 100%;background: rgba(242, 107, 29, 0.5); } .section.banners .carousel .holder .container .slogan {position: absolute;top: 2rem;left: 7.625rem;font-size: 0.9375rem;font-weight: 500;color: var(--primary); } .section.banners .carousel .holder .container .slogan::before {content: " ";position: absolute;top: 0.8125rem;left: -3.625rem;width: 3rem;height: 1px;background: var(--primary); } .section.banners .carousel .holder .container .row-btn {margin-top: 2.875rem; } .section.banners .carousel .holder .container .row-btn .btn {width: 100%; } @media (min-width: 576px) {.section.banners .carousel .holder .container .row-btn .btn {width: auto;} } .section.banners .carousel .holder .container .row-btn .btn svg {margin-left: 1rem;margin-right: -1.0625rem; } .section.banners .carousel .holder .container .card {margin-top: 4.4375rem;border: solid 1px rgba(255, 255, 255, 0.1);background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(30.4px); } .section.banners .carousel .holder .container .card .col p {margin-bottom: 0;padding: 1.4375rem 2.0625rem 1.9375rem 2.0625rem;font-size: 0.6375rem;color: #9CA3AF;text-transform: uppercase;position: relative; } .section.banners .carousel .holder .container .card .col p::before {content: " ";position: absolute;top: 1.9375rem;left: 1rem;width: 1px;height: calc(100% - 3.875rem);background: rgba(255, 255, 255, 0.1); } .section.banners .carousel .holder .container .card .col p b {font-size: 1.9125rem;font-weight: 700;display: block;color: var(--white);margin-bottom: -0.25rem;text-transform: none; } .section.banners .carousel .holder .container .card .col:first-child::after {content: " ";position: absolute;top: 0;left: 0;width: 8rem;height: 1px;background: linear-gradient(90deg, #F26B1D 0%, rgba(0, 0, 0, 0) 100%); } .section.banners .carousel .holder .container .card .col:first-child p:last-child::before {background: rgba(242, 107, 29, 0.5); } .section.banners .carousel .holder .container .square {position: absolute; } .section.banners .carousel .holder .container .square.square-1 {width: 18.5625rem;height: 18.5625rem;right: -10%;top: 21%;border: 2px solid rgba(242, 107, 29, 0.3); } .section.banners .carousel .holder .container .square.square-2 {width: 5.6875rem;height: 5.6875rem;right: 23%;top: 35%;border: 2px solid rgba(255, 255, 255, 0.1); } .section.banners .carousel .holder .container .square.square-3 {width: 5.9375rem;height: 5.9375rem;right: -13%;top: 56%;border: 2px solid rgba(242, 107, 29, 0.3); }