.coverflow-swiper-container .coverflow-swiper .swiper-slide .image-wrapper .slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .coverflow-swiper-container .coverflow-swiper .swiper-slide .image-wrapper, .coverflow-swiper-container .coverflow-swiper .swiper-slide, .coverflow-swiper-container, .feature-container .feature-item .feature-content { display: block; box-sizing: border-box; } .feature-container .feature-item { display: flex; flex-direction: row; } .coverflow-swiper-container .coverflow-swiper .swiper-wrapper { display: flex; align-items: center; } .feature-comparison-container .title-row, .feature-comparison-container .comparison-row { display: flex; justify-content: space-between; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; } .is-hidden { display: none !important; } .is-visible { display: block !important; } .is-invisible { visibility: hidden !important; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (max-width: 990px) { .mobile-hidden { display: none !important; } } @media (min-width: 768px) { .desktop-hidden { display: none !important; } } :root { --v10-color-primary: #C9062C; --swiper-theme-color: #C9062C; --header_active_color: #C9062C; --page-width: 1920px; --page-margin: 0 auto; } @media (max-width: 1440px) { :root { --page-width: 100%; --page-margin: 0; } } @keyframes rotate-loop { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .full-row { width: 100%; margin: 0; padding: 0; } .container-fill { box-sizing: border-box; width: 100%; margin: 0; padding: 0 0; overflow: hidden; } @media (max-width: 1440px) { .container-fill { width: 100%; margin: 0; padding: 0 0; } } .container { width: var(--page-width); margin: var(--page-margin); padding: 0 15px; box-sizing: border-box; overflow: hidden; } @media screen and (max-width: 1920px) { .container { width: 100%; max-width: 100%; margin: 0; padding: 0 0; } } .w-100 { width: 100%; } .h-100 { height: 100%; } .b-fff { background: #fff; } .mt-em-05 { margin-top: 0.5em; } .mt-em-1 { margin-top: 1em; } .mt-em-15 { margin-top: 1.5em; } .mt-em-2 { margin-top: 2em; } .block-border-box { box-sizing: border-box; display: block; } .video-hero-container { position: relative; width: 100%; height: 50.15em; overflow: hidden; } @media (max-width: 1240px) { .video-hero-container { font-size: 14px; } } @media (max-width: 990px) { .video-hero-container { height: 35.15em; } } .video-hero-container .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 1; filter: brightness(0.95); } .video-hero-container .hero-content-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 2.45em 3.55em; z-index: 2; font-size: inherit; } @media (max-width: 990px) { .video-hero-container .hero-content-wrapper { padding: 1.25em 1.75em; } } .video-hero-container .hero-content-wrapper .logo-section { width: 100%; text-align: left; display: flex; flex-direction: row; justify-content: space-between; } .video-hero-container .hero-content-wrapper .logo-section a { vertical-align: baseline; font-size: 1em; color: #000; } .video-hero-container .hero-content-wrapper .logo-section a.ml { margin-left: 2em; } .video-hero-container .hero-content-wrapper .logo-section .hero-logo { height: 6.65em; width: auto; -o-object-fit: contain; object-fit: contain; } .video-hero-container .hero-content-wrapper .main-heading { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; font-size: inherit; } .video-hero-container .hero-content-wrapper .main-heading .heading-context { font-weight: 400; letter-spacing: 0; line-height: 1.44; color: rgb(0, 32, 96); text-align: left; width: -moz-fit-content; width: fit-content; display: block; font-size: inherit; box-sizing: border-box; } .video-hero-container .hero-content-wrapper .main-heading p { margin: 0; padding: 0; font-size: 3em; box-sizing: border-box; } @media (max-width: 990px) { .video-hero-container .hero-content-wrapper .main-heading p { font-size: 1.9em; padding: 0 1em; } } .video-hero-container .hero-content-wrapper .main-heading p:nth-child(2) { font-size: 1.9em; } @media (max-width: 990px) { .video-hero-container .hero-content-wrapper .main-heading p:nth-child(2) { font-size: 1.5em; } } .video-hero-container .hero-content-wrapper .features-grid { display: flex; justify-content: space-around; width: 50%; } @media (max-width: 990px) { .video-hero-container .hero-content-wrapper .features-grid { width: 100%; } } .video-hero-container .hero-content-wrapper .features-grid .feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .video-hero-container .hero-content-wrapper .features-grid .feature-item .feature-item-img-wrap { width: 3.85em; height: 3.85em; margin-bottom: 0.55em; } .video-hero-container .hero-content-wrapper .features-grid .feature-item .feature-item-img-wrap > img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .video-hero-container .hero-content-wrapper .features-grid .feature-item .feature-text { font-size: 1.5em; font-weight: 400; letter-spacing: 0; line-height: 2.172em; color: rgb(255, 255, 255); } @media (max-width: 990px) { .video-hero-container .hero-content-wrapper .features-grid .feature-item .feature-text { font-size: 1em; } } .feature-container { font-size: 1.25em; margin: 2em 0; box-sizing: border-box; padding: 0 2em; } @media (max-width: 1240px) { .feature-container { font-size: 14px; } } .feature-container .feature-item { align-items: center; gap: 2.2em; margin-bottom: 3em; font-size: inherit; } .feature-container .feature-item:last-child { margin-bottom: 0; } .feature-container .feature-item .feature-image { flex: 0 0 44%; aspect-ratio: 6/4; position: relative; font-size: inherit; } .feature-container .feature-item .feature-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .feature-container .feature-item .feature-image .feature-image-desc { font-size: 1.1em; text-align: center; line-height: 3; font-weight: bold; } .feature-container .feature-item .feature-image .feature-image-desc b { font-size: 1.2em; font-style: italic; font-weight: inherit; } .feature-container .feature-item .feature-image .image-decroate-mask { display: block; width: 40%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -37%); } @media (max-width: 990px) { .feature-container .feature-item .feature-image .image-decroate-mask { transform: translate(-50%, -50%); } } .feature-container .feature-item .feature-image .image-decroate-mask > i { display: block; width: 100%; padding-bottom: 100%; position: relative; } .feature-container .feature-item .feature-image .image-decroate-mask > i > figure { position: absolute; margin: 0; padding: 0; display: block; width: 100%; height: 100%; top: 0; left: 0; background-image: radial-gradient(circle, #ff8a00 0%, #da1b60 50%, rgba(218, 27, 96, 0) 62%); -webkit-mask: url("../images/acb_special/flow.svg") no-repeat center; mask: url("../images/acb_special/flow.svg") no-repeat center; -webkit-mask-size: 80%; mask-size: 80%; animation: rotate-loop 1s linear infinite; } @media (max-width: 990px) { .feature-container .feature-item .feature-image { width: 100%; flex: none; } } .feature-container .feature-item .feature-image.en img { box-shadow: 0 0.2083333333vw 0.625vw rgba(0, 0, 0, 0.6); } .feature-container .feature-item .feature-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .feature-container .feature-item .feature-content .feature-title { font-size: 2em; font-weight: 500; letter-spacing: 0; line-height: 1.448; color: rgb(56, 56, 56); margin-bottom: 1em; } .feature-container .feature-item .feature-content .feature-text { font-size: 1em; font-weight: 400; letter-spacing: 0; line-height: 2; color: rgb(56, 56, 56); margin-bottom: 1.5em; } .feature-container .feature-item .feature-content .feature-text:last-child { margin-bottom: 0; } .feature-container .feature-item .feature-content.en .feature-title { color: rgb(0, 32, 96); text-align: center; display: block; width: 100%; } @media (max-width: 990px) { .feature-container .feature-item .feature-content { width: 100%; } } .feature-container .feature-item:nth-child(even) { flex-direction: row-reverse; } .feature-container .feature-item:last-child .feature-image { aspect-ratio: 751/415; overflow: visible; position: relative; } .feature-container .feature-item:last-child .feature-image img { width: 100%; height: auto; aspect-ratio: 6/4; -o-object-fit: cover; object-fit: cover; position: absolute; left: 0; top: 0; } @media (max-width: 990px) { .feature-container .feature-item { flex-direction: column; } .feature-container .feature-item:nth-child(even) { flex-direction: column; } .feature-container .feature-item:last-child .feature-image { aspect-ratio: 6/4; overflow: visible; position: relative; } .feature-container .feature-item:last-child .feature-image img { width: 100%; height: 100%; aspect-ratio: auto; -o-object-fit: cover; object-fit: cover; position: static; } } .pain-point-container { font-size: 1.25em; position: relative; box-sizing: border-box; padding: 0 2em; } @media (max-width: 1240px) { .pain-point-container { font-size: 14px; } } @media (max-width: 990px) { .pain-point-container { padding: 1em 2em; } } .pain-point-container::before { content: ""; position: absolute; top: -2.4em; left: 0; width: 100%; height: calc(100% + 6.3em); z-index: -1; background-image: url(../images/index_img/part3bg.png); background-size: 100% 100%; background-repeat: no-repeat; } @media (max-width: 990px) { .pain-point-container::before { top: 0; height: 100%; } } .pain-point-container .pain-point-wrapper { font-size: 1em; } .pain-point-container .pain-point-wrapper .pain-point-title { font-size: 2em; font-weight: 500; letter-spacing: 0; line-height: 1.448; color: rgb(56, 56, 56); margin-bottom: 1em; } .pain-point-container .pain-point-wrapper .pain-point-text { font-size: 1em; font-weight: 400; letter-spacing: 0; line-height: 2; color: rgb(56, 56, 56); margin-bottom: 1.5em; } .pain-point-container .pain-point-wrapper .pain-point-text:last-child { margin-bottom: 0; } .feature-comparison-container { font-size: 1.25em; box-sizing: border-box; padding: 1.7em 3.05em 0 3.05em; } @media (max-width: 1240px) { .feature-comparison-container { font-size: 14px; } } .feature-comparison-container .comparison-row { align-items: center; } @media (max-width: 990px) { .feature-comparison-container .comparison-row { flex-direction: column; } } .feature-comparison-container .comparison-row .comparison-col { width: 39%; } @media (max-width: 990px) { .feature-comparison-container .comparison-row .comparison-col { width: 100%; } } .feature-comparison-container .comparison-row .comparison-col .image-placeholder { width: 100%; aspect-ratio: 48/37; border-radius: 0; overflow: visible; box-shadow: 0 0.2083333333vw 0.625vw rgba(0, 0, 0, 0.6); } .feature-comparison-container .comparison-row .comparison-col .image-placeholder img { width: 100%; height: 100%; -o-object-fit: fill; object-fit: fill; } .feature-comparison-container .comparison-row .comparison-col .title-mobile { font-size: 1.5em; font-weight: 500; letter-spacing: 0; line-height: 3; color: rgb(56, 56, 56); display: none; text-align: center; } @media (max-width: 990px) { .feature-comparison-container .comparison-row .comparison-col .title-mobile { display: block; } } .feature-comparison-container .comparison-row .vs-decorator { font-size: 2.25em; font-weight: 900; line-height: 1; color: rgb(0, 0, 0); } .feature-comparison-container .title-row { margin-top: 1.05em; } @media (max-width: 990px) { .feature-comparison-container .title-row { display: none; } } .feature-comparison-container .title-row .title-col { width: 39%; font-size: 0.9em; font-weight: 500; letter-spacing: 0; line-height: 1.448; color: rgb(56, 56, 56); text-align: center; } .feature-comparison-container .title-row .title-col:nth-child(1), .feature-comparison-container .title-row .title-col:nth-child(3) { width: 39%; flex-shrink: 0; } .acb-benefits-container { margin-top: 70px; width: 100%; display: block; box-sizing: border-box; } .section-title { font-size: 40px; font-weight: 500; letter-spacing: 0px; line-height: 1.448; color: rgb(56, 56, 56); text-align: center; width: 100%; margin: 0 auto; } @media (max-width: 1240px) { .section-title { font-size: 28px; } } @media (max-width: 990px) { .section-title { font-size: 24px; line-height: 1.2; } } .acb-benefits-grid { font-size: 20px; display: flex; flex-direction: row; height: 21.875vw; width: 100%; margin-top: 2.0833333333vw; background-size: cover; background-position: center center; background: #fff; } @media (max-width: 1240px) { .acb-benefits-grid { font-size: 14px; } } @media (max-width: 990px) { .acb-benefits-grid { display: block; height: auto; } } .acb-benefits-grid .acb-benefits-item { flex: 1; position: relative; background-size: cover; background-position: center; background-image: linear-gradient(180deg, rgba(253, 50, 104, 0.6), rgb(179, 40, 40)); transition: background-color 0.3s ease; } .acb-benefits-grid .acb-benefits-item:nth-child(even) { background-image: linear-gradient(180deg, rgba(224, 17, 72, 0.6), rgb(158, 7, 7)); } @media (max-width: 990px) { .acb-benefits-grid .acb-benefits-item { height: 100px; flex-shrink: 0; } } .acb-benefits-grid .acb-benefits-item .acb-benefits-text { font-size: 1em; font-weight: 500; line-height: 1.4479166667; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; white-space: nowrap; text-align: center; box-sizing: border-box; } .acb-benefits-grid .acb-benefits-item:hover { background-color: rgba(201, 6, 44, 0.5); } .acb-benefits-grid.en .acb-benefits-item .acb-benefits-text { white-space: normal; padding: 0 2em; } .advance-container { margin-top: 61px; } .coverflow-swiper-container { width: 100%; padding: 2.0833333333vw 0; font-size: 20px; } @media (max-width: 1240px) { .coverflow-swiper-container { font-size: 14px; } } .coverflow-swiper-container .coverflow-swiper { width: 100%; padding: 1.0416666667vw 0; position: relative; } .coverflow-swiper-container .coverflow-swiper .swiper-wrapper { padding: 1.5625vw 0; } .coverflow-swiper-container .coverflow-swiper .swiper-slide { width: 19.7916666667vw; flex-shrink: 0; transition: transform 0.3s ease; } .coverflow-swiper-container .coverflow-swiper .swiper-slide .image-wrapper { width: 100%; padding-bottom: 66.67%; position: relative; background-color: rgb(204, 204, 204); overflow: hidden; border-radius: 0.4166666667vw; box-shadow: 0 0.2083333333vw 0.625vw rgba(0, 0, 0, 0.6); } .coverflow-swiper-container .coverflow-swiper .swiper-slide .image-wrapper .slide-image { -o-object-fit: cover; object-fit: cover; } .coverflow-swiper-container .coverflow-swiper .swiper-slide .slide-title { text-align: center; margin-top: 1.0416666667em; font-size: 1.125em; font-weight: 600; line-height: 1.4; } .coverflow-swiper-container .coverflow-swiper .swiper-slide.swiper-slide-active { transform: scale(1); z-index: 2; } .coverflow-swiper-container .coverflow-swiper .swiper-slide:not(.swiper-slide-active) { opacity: 0.7; transform: scale(0.85); } .coverflow-swiper-container .coverflow-swiper .coverflow-button-prev, .coverflow-swiper-container .coverflow-swiper .coverflow-button-next { width: 2.6041666667vw; height: 2.6041666667vw; border-radius: 50%; background-color: #fff; box-shadow: 0 0.2083333333vw 0.625vw rgba(0, 0, 0, 0.6); } .coverflow-swiper-container .coverflow-swiper .coverflow-button-prev::after, .coverflow-swiper-container .coverflow-swiper .coverflow-button-next::after { font-size: 1.0416666667vw; color: #333; font-weight: bold; } .coverflow-swiper-container .coverflow-swiper .coverflow-button-prev:hover, .coverflow-swiper-container .coverflow-swiper .coverflow-button-next:hover { background-color: var(--header_active_color); } .coverflow-swiper-container .coverflow-swiper .coverflow-button-prev:hover::after, .coverflow-swiper-container .coverflow-swiper .coverflow-button-next:hover::after { color: #fff; } @media (max-width: 990px) { .coverflow-swiper-container .coverflow-swiper .coverflow-button-prev, .coverflow-swiper-container .coverflow-swiper .coverflow-button-next { display: none; } } .coverflow-swiper-container .coverflow-swiper .coverflow-button-prev { left: 1.0416666667vw; } .coverflow-swiper-container .coverflow-swiper .coverflow-button-next { right: 1.0416666667vw; } @media (max-width: 1240px) { .coverflow-swiper-container { padding: 30px 0; } .coverflow-swiper-container .coverflow-swiper .swiper-slide { width: 300px; } } @media (max-width: 990px) { .coverflow-swiper-container { padding: 20px 0; } .coverflow-swiper-container .coverflow-swiper .swiper-slide { width: 250px; } .coverflow-swiper-container .coverflow-swiper .swiper-slide .slide-title { margin-top: 20px; font-size: 20px; } } .arguments-container .arguments-grid { font-size: 20px; display: flex; flex-direction: row; height: 21.875vw; width: 100%; margin-top: 2.0833333333vw; background: #fff; background-size: cover; } @media (max-width: 1240px) { .arguments-container .arguments-grid { font-size: 14px; } } @media (max-width: 990px) { .arguments-container .arguments-grid { display: block; height: auto; } } .arguments-container .arguments-grid .arguments-item { flex: 1; font-size: inherit; position: relative; background-size: cover; background-position: center; } .arguments-container .arguments-grid .arguments-item .image-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(180deg, rgba(253, 50, 104, 0.6), rgb(179, 40, 40)); transition: background-color 0.3s ease; } .arguments-container .arguments-grid .arguments-item:nth-child(even) .image-mask { background-image: linear-gradient(180deg, rgba(224, 17, 72, 0.6), rgb(158, 7, 7)); } @media (max-width: 990px) { .arguments-container .arguments-grid .arguments-item { height: 150px; } } .arguments-container .arguments-grid .arguments-item .arguments-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .arguments-container .arguments-grid .arguments-item .arguments-text { font-size: 1em; font-weight: 500; line-height: 1.44; color: #fff; position: absolute; bottom: 1.9em; left: 1.05em; width: calc(100% - 2.1em); box-sizing: border-box; min-height: 4.32em; } @media (max-width: 990px) { .arguments-container .arguments-grid .arguments-item .arguments-text { font-size: 1.125em; width: calc(100% - 3.75em); min-height: auto; bottom: 50%; transform: translateY(50%); } } .arguments-container .arguments-grid .arguments-item:hover .image-mask { background-color: rgba(201, 6, 44, 0.5); } .arguments-container .arguments-grid .arguments-item.a-center .arguments-text { bottom: 50%; transform: translateY(50%); text-align: center; } .arguments-container .arguments-grid.en .arguments-item .arguments-text { padding: 0 2em; } .parent-container { font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 3.45em 0; } @media (max-width: 1240px) { .parent-container { font-size: 14px; } } .parent-container .slogan-text { font-size: 2em; font-weight: 500; line-height: 1.448em; color: rgb(56, 56, 56); margin-bottom: 2em; } .parent-container .contact-button { display: inline-flex; align-items: center; justify-content: center; padding: 0 3.2em; height: 3.25em; background-color: var(--header_active_color); font-size: 1.5em; font-weight: 500; line-height: 1; color: rgb(255, 255, 255); text-decoration: none; border-radius: 1em; } @media (max-width: 990px) { .parent-container .contact-button { padding: 0 1.6em; height: 2.5em; font-size: 1.2em; } } @media (max-width: 990px) { .parent-container { padding: 2em 0; } .parent-container .slogan-text { font-size: 1.5em; margin-bottom: 1em; } }