html {
scroll-behavior: smooth;
/* scroll-padding-top: 50px; */
}
h3, h4 {
margin: 0;
}
.landing-electron {
font-family: "Montserrat", sans-serif;
max-width: 1500px;
min-width: 270px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.landing-electron * {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.swiper {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* product============================================================================== */
.product-electron {
display: flex;
flex-direction: column;
align-items: start;
gap: 171px;
background-image: url(/image/catalog/landings/electron-24x25/product-bg.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
padding: 50px 100px;
}
.product-electron__inner {
display: flex;
flex-direction: column;
align-items: start;
}
.product-electron__inner span {
color: #FFF;
font-size: 38px;
font-style: normal;
font-weight: 500;
line-height: 100%;
letter-spacing: 1.14px;
padding: 8px;
border: 2px solid #FFF;
}
.product-electron__inner span:last-child {
border-top: none;
}
.product-electron__info {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-electron__info div {
display: flex;
flex-direction: column;
gap: 5px;
}
.product-electron__info div h4 {
color: #FFF;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 110%;
letter-spacing: 6.4px;
text-transform: uppercase;
margin: 0;
}
.product-electron__info div h4:last-child {
letter-spacing: 5.44px;
}
.product-electron__info h2 {
color: #FFF;
text-align: right;
font-size: 179px;
font-style: normal;
font-weight: 800;
line-height: 100%;
letter-spacing: 32.22px;
text-transform: uppercase;
margin: 0 -33px 0 0;
}
.product-electron__info p {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
max-width: 650px;
width: 100%;
}
@media screen and (max-width: 1599px) {
.product-electron {
gap: 215px;
padding: 50px;
}
.product-electron__info h2 {
font-size: 135px;
letter-spacing: 24.3px;
margin: 0 -25px 0 0;
}
}
@media screen and (max-width: 1199px) {
.product-electron {
gap: 230px;
padding: 90px 40px 50px;
background-size: cover;
background-position: center top;
background-image: url(/image/catalog/landings/electron-24x25/product-bg-m.webp);
}
.product-electron__info h2 {
font-size: 120px;
letter-spacing: 21.6px;
margin: 0 -22px 0 0;
}
}
@media screen and (max-width: 991px) {
.product-electron {
gap: 300px;
padding: 40px;
}
.product-electron__inner span {
font-size: 32px;
letter-spacing: 0.96px;
}
.product-electron__info {
align-items: center;
text-align: center;
}
.product-electron__info div {
gap: 0;
}
.product-electron__info div h4 {
font-size: 30px;
letter-spacing: 6px;
}
.product-electron__info div h4:last-child {
letter-spacing: 5.1px;
}
.product-electron__info h2 {
text-align: center;
font-size: 88px;
letter-spacing: 15.84px;
margin: 0 -16px 0 0;
}
.product-electron__info p {
text-align: center;
font-size: 16px;
}
}
@media screen and (max-width: 767px){
.product-electron {
gap: 280px;
/* background-size: 1300px; */
padding: 40px 30px 30px;
}
.product-electron__inner span {
font-size: 24px;
letter-spacing: 0.72px;
}
.product-electron__info div h4 {
font-size: 22px;
letter-spacing: 4.4px;
}
.product-electron__info div h4:last-child {
letter-spacing: 3.74px;
}
.product-electron__info h2 {
font-size: 65px;
letter-spacing: 11.7px;
margin: 0 -12px 0 0;
}
}
@media screen and (max-width: 567px) {
.product-electron {
gap: 240px;
background-size: 578px;
background-position: center top;
background-image: url(/image/catalog/landings/electron-24x25/product-bg-s.webp);
padding: 40px 20px 20px;
}
.product-electron__inner span {
font-size: 14px;
letter-spacing: 0.42px;
padding: 5px;
border-width: 1px;
}
.product-electron__info div h4 {
font-size: 11px;
letter-spacing: 2.2px;
}
.product-electron__info div h4:last-child {
letter-spacing: 1.87px;
}
.product-electron__info h2 {
font-size: 33px;
letter-spacing: 5.94px;
margin: 0 -6px 0 0;
}
.product-electron__info p {
font-size: 14px;
}
}
/* navigation------------------------------------------------------------------------------------------------ */
.navigation-electron {
display: flex;
justify-content: center;
padding: 100px 0;
}
.navigation-electron__list {
position: relative;
width: 100%;
background-image: url(/image/catalog/landings/electron-29x50/navigation-scheme.svg);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
max-width: 1100px;
width: 100%;
min-height: 620px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.navigation-electron__item {
position: absolute;
display: flex;
align-items: start;
gap: 12px;
cursor: pointer;
}
.navigation-electron__item:nth-child(1) {
top: 51%; left: 18%;
}
.navigation-electron__item:nth-child(2) {
top: 16%; left: 23%;
flex-direction: column;
}
.navigation-electron__item:nth-child(3) {
top: 77%; left: 5%;
}
.navigation-electron__item:nth-child(4) {
top: 55%; left: 66%;
flex-direction: column;
}
.navigation-electron__item:nth-child(5) {
top: 30%; left: 73%;
flex-direction: column;
}
.navigation-electron__item:nth-child(6) {
top: 2%; left: 57%;
}
.navigation-electron__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 2px solid #266141;
border-radius: 50%;
padding: 3px;
transition: all 0.3s ease;
}
.navigation-electron__icon div {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(50% 50% at 50% 50%, #338257 0%, #266141 100%);
border-radius: 50%;
padding: 9px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.navigation-electron__icon div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(50% 50% at 50% 50%, #3D9A67 56%, #266141 100%);
opacity: 0;
transition: opacity 0.3s;
border-radius: 50%;
}
.navigation-electron__icon:active {
border-color: #22372C;
}
.navigation-electron__icon:active div:after {
background: #22372C;
}
.navigation-electron__icon:active div {
background: #22372C;
}
.navigation-electron__icon:hover div:after {
opacity: 1;
}
.navigation-electron__item .navigation-electron__icon div svg {
z-index: 3;
}
.navigation-electron__item.active .navigation-electron__icon div svg path:first-child {
display: none;
}
.navigation-electron__link {
display: none;
background: #F5F5F5;
width: 470px;
text-decoration: none;
transition: all 0.2s ease;
}
.navigation-electron__link:hover {
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}
.navigation-electron__link img:first-child {
width: 120px;
height: 120px;
}
.navigation-electron__link div {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
position: relative;
background: #F5F5F5;
width: 100%;
}
.navigation-electron__link h4 {
margin: 0;
color: #266141;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.navigation-electron__link span {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
.navigation-electron__link img:last-child {
width: 30px;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.navigation-electron__item.active .navigation-electron__link {
display: flex;
}
@media screen and (max-width: 1599px) {
.navigation-electron {
padding: 120px 0;
}
.navigation-electron__list {
max-width: 950px;
min-height: 540px;
}
.navigation-electron__item:nth-child(1) {
top: 51%;
left: 15%;
flex-direction: column;
}
.navigation-electron__item:nth-child(2) {
top: 16%;
left: 23%;
flex-direction: column;
}
.navigation-electron__item:nth-child(2) .navigation-electron__link {
margin: 0 0 0 -40px;
}
.navigation-electron__item:nth-child(3) {
top: 77%;
left: 5%;
flex-direction: column;
}
.navigation-electron__item:nth-child(4) {
top: 55%;
left: 63%;
flex-direction: column;
}
.navigation-electron__item:nth-child(5) {
top: 24%;
left: 68%;
flex-direction: column;
}
.navigation-electron__item:nth-child(6) {
top: 0;
left: 54%;
}
.navigation-electron__link {
width: 446px;
}
}
@media screen and (max-width: 1344px) {
.navigation-electron {
padding: 120px 0;
}
.navigation-electron__list {
max-width: 854px;
min-height: 480px;
}
.navigation-electron__item:nth-child(1) {
top: 51%;
left: 15%;
flex-direction: column;
}
.navigation-electron__item:nth-child(2) {
top: 16%;
left: 23%;
flex-direction: column;
}
.navigation-electron__item:nth-child(2) .navigation-electron__link {
margin: 0 0 0 -40px;
}
.navigation-electron__item:nth-child(3) {
top: 77%;
left: 5%;
flex-direction: column;
}
.navigation-electron__item:nth-child(4) {
top: 55%;
left: 63%;
flex-direction: column;
}
.navigation-electron__item:nth-child(5) {
top: 24%;
left: 68%;
flex-direction: column;
}
.navigation-electron__item:nth-child(6) {
top: 0;
left: 54%;
}
.navigation-electron__link {
width: 390px;
}
.navigation-electron__link img:first-child {
width: 100px;
height: 100px;
}
.navigation-electron__link div {
padding: 24px 20px;
gap: 3px;
}
.navigation-electron__link h4 {
font-size: 22px;
}
.navigation-electron__link span {
font-size: 16px;
}
.navigation-electron__link img:last-child {
right: 20px;
}
}
@media screen and (max-width: 1199px) {
.navigation-electron {
padding: 80px 0 120px;
}
.navigation-electron__list {
max-width: 633px;
min-height: 360px;
}
.navigation-electron__item {
gap: 10px;
}
.navigation-electron__item:nth-child(1) {
top: 46%;
left: 10%;
}
.navigation-electron__item:nth-child(2) {
top: 14%;
left: 20%;
}
.navigation-electron__item:nth-child(2) .navigation-electron__link {
margin: 0 0 0 -15px;
}
.navigation-electron__item:nth-child(3) {
top: 85%;
left: 8%;
}
.navigation-electron__item:nth-child(4) {
top: 58%;
left: 62%;
}
.navigation-electron__item:nth-child(5) {
top: 23%;
left: 70%;
}
.navigation-electron__item:nth-child(6) {
top: 0;
left: 54%;
}
.navigation-electron__link {
width: 325px;
}
.navigation-electron__link img:first-child {
width: 80px;
height: 80px;
}
.navigation-electron__link div {
padding: 16px 20px;
gap: 4px;
}
.navigation-electron__link h4 {
font-size: 20px;
}
.navigation-electron__link span {
font-size: 14px;
}
.navigation-electron__link img:last-child {
width: 22px;
}
}
@media screen and (max-width: 991px) {
.navigation-electron {
padding: 80px 0;
}
.navigation-electron__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
min-height: auto;
background-image: none;
max-width: 100%;
}
.navigation-electron__item {
position: static;
display: flex;
}
.navigation-electron__icon {
display: none;
}
.navigation-electron__link {
display: flex;
position: relative;
left: auto;
top: auto;
transform: none;
background: transparent;
box-shadow: none;
width: 100%;
min-width: auto;
}
.navigation-electron__item:nth-child(2) .navigation-electron__link {
margin: 0;
}
}
@media screen and (max-width: 767px){
.navigation-electron {
padding: 70px 0;
}
.navigation-electron__link img:first-child {
width: 60px;
height: 60px;
}
.navigation-electron__link div {
padding: 10px 14px;
}
.navigation-electron__link h4 {
font-size: 16px;
}
.navigation-electron__link span {
font-size: 12px;
}
.navigation-electron__link img:last-child {
right: 10px;
}
}
@media screen and (max-width: 567px) {
.navigation-electron {
padding: 60px 0;
}
.navigation-electron__list {
display: flex;
flex-direction: column;
gap: 14px;
}
.navigation-electron__link img:first-child {
width: 80px;
height: 80px;
}
.navigation-electron__link img:last-child {
right: 20px;
}
}
/* sensor-------------------------------------------------------------------------------------- */
.sensor-electron {
display: flex;
flex-direction: column;
padding: 50px 100px 100px 100px;
background-image: url(/image/catalog/landings/electron-29x50/sensor-bg.webp);
background-size: cover;
background-position: bottom right;
background-repeat: no-repeat;
gap: 25px;
}
.sensor-electron__title {
display: flex;
align-items: end;
gap: 50px;
width: 100%;
justify-content: space-between;
}
.sensor-electron__title b {
color: #FFF;
font-size: 200px;
font-style: normal;
font-weight: 700;
line-height: 110%;
margin: 0 0 -20px 0;
position: relative;
}
.sensor-electron__title b::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
background-image: url(/image/catalog/landings/electron-29x50/sensor-rectangle.svg);
background-size: auto 100%;
background-position: left bottom;
background-repeat: no-repeat;
width: 75px;
height: 160px;
}
.sensor-electron__title b::after {
content: "";
position: absolute;
bottom: 30px;
right: 0;
width: 24px;
height: 24px;
background: #266141;
border: 1px solid #000;
box-sizing: border-box;
}
.sensor-electron__title h3 {
color: #FFF;
font-size: 64px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 19.84px;
text-transform: uppercase;
margin: 0;
max-width: 650px;
width: 100%;
}
.sensor-electron__wrap {
display: flex;
flex-direction: column;
}
.sensor-electron__text {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 650px;
width: 100%;
align-self: end;
margin: 0;
}
.sensor-electron__text span {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.sensor-electron__wrap ul {
list-style: none;
padding: 0;
margin: -80px 0 0 0;
display: flex;
flex-direction: column;
max-width: 550px;
width: 100%;
}
.sensor-electron__wrap ul li {
display: flex;
flex-direction: column;
align-items: end;
gap: 6px;
padding: 30px 0;
text-align: right;
border-bottom: 1px solid #FFF;
}
.sensor-electron__wrap ul li:first-child {
padding: 0 0 30px 0;
}
.sensor-electron__wrap ul li:last-child {
border-bottom: none;
padding: 30px 0 0 0;
}
.sensor-electron__wrap ul li h5 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin: 0;
}
.sensor-electron__wrap ul li span {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
.read-more-fallback {
display: none;
}
@media screen and (max-width: 1599px) {
.sensor-electron {
padding: 50px;
gap: 20px;
}
.sensor-electron__title b {
font-size: 169px;
margin: 0 0 -20px 0;
}
.sensor-electron__title b::before {
width: 75px;
height: 160px;
}
.sensor-electron__title b::after {
bottom: 30px;
}
.sensor-electron__title h3 {
max-width: 640px;
letter-spacing: 18.84px;
}
.sensor-electron__text {
max-width: 640px;
}
.sensor-electron__wrap ul {
margin: -80px 0 0 0;
max-width: 460px;
}
}
@media screen and (max-width: 1344px) {
.sensor-electron {
padding: 40px;
gap: 20px;
}
.sensor-electron__title {
gap: 40px;
}
.sensor-electron__title b::before {
width: 75px;
height: 160px;
}
.sensor-electron__title b::after {
bottom: 30px;
}
.sensor-electron__title h3 {
font-size: 55px;
letter-spacing: 15.05px;
max-width: 540px;
}
.sensor-electron__text {
gap: 20px;
max-width: 540px;
}
.sensor-electron__wrap ul {
margin: -107px 0 0 0;
}
}
@media screen and (max-width: 1199px) {
.sensor-electron {
gap: 30px;
background-position: bottom -20px right;
}
.sensor-electron__title {
gap: 40px;
}
.sensor-electron__title b {
font-size: 132px;
margin: 0 0 -16px 0;
}
.sensor-electron__title b::before {
width: 62px;
height: 113px;
}
.sensor-electron__title b::after {
bottom: 23px;
}
.sensor-electron__title h3 {
font-size: 45px;
letter-spacing: 12.34px;
max-width: 440px;
}
.sensor-electron__text {
gap: 20px;
max-width: 440px;
}
.sensor-electron__text span {
font-size: 16px;
}
.sensor-electron__wrap ul {
margin: -120px 0 0 0;
max-width: 360px;
}
.sensor-electron__wrap ul li {
gap: 4px;
padding: 20px 0;
}
.sensor-electron__wrap ul li:first-child {
padding: 0 0 20px 0;
}
.sensor-electron__wrap ul li:last-child {
padding: 20px 0 0 0;
}
.sensor-electron__wrap ul li h5 {
font-size: 22px;
}
.sensor-electron__wrap ul li span {
font-size: 16px;
}
}
@media screen and (max-width: 991px) {
.sensor-electron {
padding: 30px;
background-size: 900px;
background-position: bottom right -20px;
gap: 40px;
}
.sensor-electron__title {
gap: 20px;
}
.sensor-electron__title b {
font-size: 113px;
margin: 0 0 -15px 0;
}
.sensor-electron__title b::before {
width: 50px;
height: 100px;
}
.sensor-electron__title b::after {
bottom: 20px;
width: 16px;
height: 16px;
}
.sensor-electron__title h3 {
font-size: 31px;
letter-spacing: 9.4px;
max-width: 310px;
}
.sensor-electron__wrap {
gap: 40px;
}
.sensor-electron__text {
max-width: 100%;
}
.sensor-electron__wrap ul {
margin: 0;
max-width: 308px;
}
.sensor-electron__wrap ul li {
align-items: start;
text-align: start;
}
}
@media screen and (max-width: 767px){
.sensor-electron {
padding: 20px 20px 40px;
background-size: 800px;
background-image: url(/image/catalog/landings/electron-29x50/sensor-bg-m.webp);
background-position: bottom right;
}
.sensor-electron__title {
justify-content: start;
}
.sensor-electron__title b {
font-size: 84px;
margin: 0 0 -12px 0;
}
.sensor-electron__title b::before {
width: 40px;
height: 80px;
}
.sensor-electron__title b::after {
bottom: 16px;
}
.sensor-electron__title h3 {
font-size: 23px;
letter-spacing: 7.4px;
max-width: 310px;
}
.sensor-electron__wrap ul {
max-width: 232px;
}
}
@media screen and (max-width: 567px) {
.sensor-electron {
padding: 20px;
background-size: 557px;
background-image: url(/image/catalog/landings/electron-29x50/sensor-bg-s.webp);
background-position: bottom center;
}
.sensor-electron__title b::before {
background-image: url(/image/catalog/landings/electron-29x50/sensor-rectangle-s.svg);
}
.sensor-electron__wrap {
gap: 260px;
}
.sensor-electron__title {
flex-direction: column;
align-items: center;
text-align: center;
}
.sensor-electron__text span {
font-size: 14px;
}
.sensor-electron__wrap ul {
max-width: 100%;
}
.sensor-electron__wrap ul li {
padding: 14px 0;
}
.sensor-electron__wrap ul li:first-child {
padding: 0 0 14px 0;
}
.sensor-electron__wrap ul li:last-child {
padding: 14px 0 0 0;
}
.sensor-electron__wrap ul li span {
font-size: 14px;
}
.sensor-electron__info {
position: relative;
}
.js-expand {
overflow: hidden;
transition: height 0.3s ease;
height: 187px;
}
.js-expand.expanded {
height: auto !important;
}
.js-expand-btn {
border: none;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
cursor: pointer;
font-size: 14px;
text-decoration: underline;
text-align: end;
background-image: url(/image/catalog/landings/electron-29x50/sensor-bg-s.webp);
background-position: top center;
width: 100%;
}
}
/* optics---------------------------------------------------------------------------------------------------- */
.optics-electron {
display: flex;
flex-direction: column;
gap: 70px;
margin: 150px 0;
}
.optics-electron__title {
display: flex;
flex-direction: column;
}
.optics-electron__title h2 {
color: #266141;
font-size: 201px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 32.16px;
text-transform: uppercase;
margin: 0;
}
.optics-electron__title h3 {
color: #22372C;
font-size: 73px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 14.6px;
text-transform: uppercase;
margin: 0;
align-self: end;
}
.optics-electron__wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.optics-electron__wrap img {
max-width: 550px;
width: 100%;
}
.optics-electron__content {
display: flex;
flex-direction: column;
gap: 80px;
}
.optics-electron__slide {
display: flex;
gap: 100px;
}
.optics-electron__slide h4 {
color: #020A0A;
font-size: 24px;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.96px;
margin: 0;
max-width: 250px;
width: 100%;
transition: color 0.3s ease;
}
.optics-electron__slide p {
color: #020A0A;
font-size: 18px;
font-weight: 400;
line-height: 150%;
margin: 0;
max-width: 550px;
width: 100%;
}
@media screen and (max-width: 1599px) {
.optics-electron__title h2 {
font-size: 167px;
letter-spacing: 26.72px;
}
.optics-electron__title h3 {
font-size: 60px;
letter-spacing: 12px;
}
.optics-electron__wrap img {
max-width: 406px;
}
.optics-electron__content {
gap: 70px;
}
.optics-electron__slide p {
max-width: 500px;
}
}
@media screen and (max-width: 1344px) {
.optics-electron__title h2 {
font-size: 158px;
letter-spacing: 25.28px;
}
.optics-electron__title h3 {
font-size: 57px;
letter-spacing: 11.4px;
}
.optics-electron__wrap img {
max-width: 406px;
}
.optics-electron__content {
gap: 70px;
}
.optics-electron__slide {
gap: 84px;
}
.optics-electron__slide h4 {
font-size: 20px;
letter-spacing: 0.8px;
max-width: 180px;
}
.optics-electron__slide p {
max-width: 545px;
}
}
@media screen and (max-width: 1199px) {
.optics-electron {
margin: 100px 0;
}
.optics-electron__title {
gap: 0;
}
.optics-electron__title h2 {
font-size: 131px;
letter-spacing: 20.96px;
}
.optics-electron__title h3 {
font-size: 47px;
letter-spacing: 9.4px;
}
.optics-electron__wrap img {
max-width: 344px;
}
.optics-electron__content {
gap: 50px;
}
.optics-electron__slide {
gap: 57px;
}
.optics-electron__slide h4 {
font-size: 18px;
letter-spacing: 0.72px;
max-width: 152px;
}
.optics-electron__slide p {
max-width: 367px;
font-size: 16px;
}
}
@media screen and (max-width: 991px) {
.optics-electron {
margin: 80px 0;
gap: 60px;
}
.optics-electron__title h2 {
font-size: 129px;
letter-spacing: 20.64px;
}
.optics-electron__title h3 {
font-size: 31px;
letter-spacing: 6.2px;
}
.optics-electron__wrap img {
display: none;
}
.optics-electron__content {
gap: 40px;
}
.optics-electron__slide {
gap: 64px;
}
.optics-electron__slide h4 {
max-width: 160px;
}
.optics-electron__slide p {
max-width: 474px;
}
}
@media screen and (max-width: 767px){
.optics-electron {
margin: 80px 0;
gap: 50px;
}
.optics-electron__title h2 {
font-size: 17vw;
letter-spacing: 15.2px;
align-self: center;
}
.optics-electron__title h3 {
font-size: 6vw;
letter-spacing: 6.8px;
align-self: center;
}
.optics-electron__content {
gap: 30px;
}
.optics-electron__slide {
gap: 44px;
}
.optics-electron__slide h4 {
max-width: 135px;
font-size: 16px;
}
.optics-electron__slide p {
max-width: calc(100% - 180px);
}
}
@media screen and (max-width: 567px) {
.optics-electron {
margin: 70px 0;
gap: 40px;
}
.optics-electron__title h2 {
font-size: 16vw;
letter-spacing: 7.84px;
}
.optics-electron__title h3 {
font-size: 5.7vw;
letter-spacing: 3.6px;
}
.optics-electron__slide {
gap: 10px;
flex-direction: column;
}
.optics-electron__slide h4 {
max-width: 100%;
}
.optics-electron__slide p {
max-width: 100%;
}
}
/* grey------------------------------------------------------------------------------------------------- */
.grey-electron__titles {
display: flex;
flex-direction: column;
margin: 0 0 -135px 0;
}
.grey-electron__titles h2 {
color: #22372C;
font-size: 156px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 15.6px;
text-transform: uppercase;
margin: 0;
}
.grey-electron__titles b {
color: #FFF;
align-self: end;
text-align: right;
font-size: 156px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 15.6px;
text-transform: uppercase;
margin: -70px -15px 0 0;
}
.multiplicity-electron {
background-color: #22372C;
background-image: url(/image/catalog/landings/electron-29x50/grey-bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
padding: 160px 50px 50px 50px;
display: flex;
flex-direction: column;
gap: 170px;
}
.multiplicity-electron__wrap {
display: flex;
justify-content: space-between;
}
.multiplicity-electron__info {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 700px;
width: 100%;
margin: 0;
}
.multiplicity-electron__info span {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.multiplicity-electron__wrap ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
max-width: 550px;
width: 100%;
}
.multiplicity-electron__wrap ul li {
display: flex;
flex-direction: column;
gap: 6px;
padding: 30px 0;
border-bottom: 1px solid #FFF;
}
.multiplicity-electron__wrap ul li:first-child {
padding: 0 0 30px 0;
}
.multiplicity-electron__wrap ul li:last-child {
border-bottom: none;
padding: 30px 0 0 0;
}
.multiplicity-electron__wrap ul li h5 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin: 0;
}
.multiplicity-electron__wrap ul li span {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
/* --------- */
.hull-electron {
display: flex;
flex-direction: column;
gap: 100px;
}
.hull-electron__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.hull-electron__title h2 {
color: #FFF;
font-size: 139px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 13.9px;
text-transform: uppercase;
margin: 0;
}
.hull-electron__title h4 {
color: #FFF;
font-size: 52px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 7px;
text-transform: uppercase;
margin: 0;
width: 100%;
max-width: 600px;
}
.hull-electron__wrap {
display: flex;
align-items: end;
gap: 50px;
}
.hull-electron__pictures {
position: relative;
}
.hull-electron__pictures img {
max-width: 700px;
width: 100%;
height: 361px;
object-fit: cover;
object-position: center;
transition: opacity 0.3s ease;
}
.hull-electron__pictures img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
}
.hull-electron__pictures img:nth-child(3) {
position: absolute;
top: 0;
left: 0;
}
.swiper {
user-select: none
}
.hull-electron .mySwiper {
max-width: 600px;
width: 100%;
}
.hull-electron .swiper-slide {
display: flex;
flex-direction: column;
gap: 20px;
padding: 0 0 80px;
opacity: 0;
}
.hull-electron .swiper-slide-active {
opacity: 1;
}
.hull-electron .swiper-slide div {
display: flex;
flex-direction: column;
gap: 20px;
}
.hull-electron .swiper-slide div h5 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.96px;
margin: 0;
}
.hull-electron .swiper-slide div p {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.hull-electron .swiper-slide b {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%;
padding: 10px 20px;
background-color: #FFF;
}
.hull-electron .swiper-slide ul {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 170%;
margin: 0;
padding: 0 0 0 25px;
}
.hull-electron .swiper__control {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
width: 600px;
bottom: 20px;
left: 0;
right: 0;
}
.hull-electron .swiper__btns {
position: relative;
display: flex;
gap: 50px;
}
.hull-electron .swiper-button-next::after,
.hull-electron .swiper-button-prev::after {
content: none;
}
.hull-electron .swiper-button-next,
.hull-electron .swiper-button-prev {
position: static;
transform: none;
width: 40px;
height: 40px;
background-color: #7C858D;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 14px;
margin: 0;
transition: all 0.2s ease;
}
.hull-electron .swiper-button-next:hover,
.hull-electron .swiper-button-prev:hover {
background-color: #ADB3B7;
}
.hull-electron .swiper-button-next:active,
.hull-electron .swiper-button-prev:active {
background-color: #FFF;
}
.hull-electron .swiper-button-next:active svg path,
.hull-electron .swiper-button-prev:active svg path {
fill: #5B6770;
}
.hull-electron .swiper-pagination {
position: static;
max-width: 85px;
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 100%;
}
.hull-electron .current-page {
font-size: 28px;
}
.hull-electron .swiper-pagination .separator {
font-size: 18px;
margin: 0 5px;
}
.hull-electron .swiper-pagination .swiper-pagination-total {
font-size: 18px;
}
@media screen and (max-width: 1599px) {
.grey-electron__titles {
margin: 0 0 -120px 0;
}
.grey-electron__titles h2 {
font-size: 139px;
letter-spacing: 13.9px;
}
.grey-electron__titles b {
font-size: 139px;
letter-spacing: 13.9px;
margin: -65px -14px 0 0;
}
.multiplicity-electron {
gap: 150px;
}
.multiplicity-electron__info {
max-width: 620px;
}
.multiplicity-electron__wrap ul {
max-width: 480px;
}
/* --------- */
.hull-electron {
gap: 70px;
}
.hull-electron__wrap {
align-items: start;
}
.hull-electron__title h2 {
font-size: 123px;
letter-spacing: 12.3px;
}
.hull-electron__title h4 {
font-size: 42px;
letter-spacing: 6px;
max-width: 480px;
}
.hull-electron__pictures img {
max-width: 620px;
}
.hull-electron .mySwiper {
max-width: 480px;
}
.hull-electron .swiper-slide b {
font-size: 16px;
}
.hull-electron .swiper__control {
width: 480px;
bottom: 0;
}
}
@media screen and (max-width: 1344px) {
.grey-electron__titles {
margin: 0 0 -100px 0;
}
.grey-electron__titles h2 {
font-size: 126px;
letter-spacing: 12.6px;
}
.grey-electron__titles b {
font-size: 126px;
letter-spacing: 12.6px;
margin: -64px -13px 0 0;
}
.multiplicity-electron {
padding: 128px 40px 40px;
}
.multiplicity-electron__info {
max-width: 556px;
}
.multiplicity-electron__wrap ul {
max-width: 434px;
}
/* --------- */
.hull-electron {
gap: 60px;
}
.hull-electron__wrap {
align-items: start;
}
.hull-electron__title h2 {
font-size: 111px;
letter-spacing: 11.1px;
}
.hull-electron__title h4 {
font-size: 36px;
letter-spacing: 6px;
}
.hull-electron__pictures img {
max-width: 556px;
}
.hull-electron .mySwiper {
max-width: 434px;
}
.hull-electron .swiper-slide {
padding: 0 0 45px;
}
.hull-electron .swiper-slide div {
gap: 14px;
}
.hull-electron .swiper__control {
width: 434px;
}
}
@media screen and (max-width: 1199px) {
.grey-electron__titles {
margin: 0 0 -92px 0;
}
.grey-electron__titles h2 {
font-size: 104px;
letter-spacing: 10.4px;
}
.grey-electron__titles b {
font-size: 108px;
letter-spacing: 10.8px;
margin: -50px -11px 0 0;
}
.multiplicity-electron {
padding: 122px 40px 40px 40px;
gap: 100px;
}
.multiplicity-electron__info {
gap: 20px;
max-width: 456px;
}
.multiplicity-electron__info span {
font-size: 16px;
}
.multiplicity-electron__wrap ul {
max-width: 344px;
}
.multiplicity-electron__wrap ul li {
gap: 4px;
}
.multiplicity-electron__wrap ul li h5 {
font-size: 22px;
}
.multiplicity-electron__wrap ul li span {
font-size: 16px;
}
/* --------- */
.hull-electron {
gap: 40px;
}
.hull-electron__title {
gap: 30px;
justify-content: space-between;
}
.hull-electron__title h2 {
font-size: 91px;
letter-spacing: 9.1px;
}
.hull-electron__title h4 {
font-size: 30px;
letter-spacing: 5px;
}
.hull-electron__wrap {
gap: 40px;
}
.hull-electron__pictures img {
max-width: 456px;
}
.hull-electron .mySwiper {
max-width: 344px;
}
.hull-electron .swiper-slide {
gap: 10px;
padding: 0 0 65px;
}
.hull-electron .swiper-slide div {
gap: 10px;
}
.hull-electron .swiper-slide div h5 {
font-size: 20px;
letter-spacing: 0.8px;
}
.hull-electron .swiper-slide div p {
font-size: 16px;
}
.hull-electron .swiper-slide b {
font-size: 14px;
}
.hull-electron .swiper__control {
width: 344px;
}
.hull-electron .swiper__btns {
gap: 30px;
}
}
@media screen and (max-width: 991px) {
.grey-electron__titles {
margin: 0 0 -63px 0;
}
.grey-electron__titles h2 {
font-size: 73px;
letter-spacing: 7.3px;
}
.grey-electron__titles b {
font-size: 73px;
letter-spacing: 7.3px;
margin: -33px -8px 0 0;
}
.multiplicity-electron {
padding: 100px 30px 30px 30px;
}
.multiplicity-electron__wrap {
flex-direction: column;
align-items: end;
gap: 40px;
}
.multiplicity-electron__info {
max-width: 100%;
}
.multiplicity-electron__wrap ul {
max-width: 330px;
}
/* --------- */
.hull-electron {
gap: 20px;
}
.hull-electron__title {
gap: 0;
flex-direction: column;
align-items: center;
text-align: center;
}
.hull-electron__title h2 {
font-size: 125px;
letter-spacing: 12.5px;
}
.hull-electron__title h4 {
font-size: 35px;
letter-spacing: 6.3px;
max-width: none;
}
.hull-electron__wrap {
gap: 20px;
flex-direction: column;
align-items: center;
}
.hull-electron__pictures img {
max-width: 100%;
height: 333px;
}
.hull-electron .mySwiper {
max-width: 100%;
}
.hull-electron .swiper-slide {
gap: 20px;
padding: 0 0 54px;
}
.hull-electron .swiper-slide div {
gap: 10px;
}
.hull-electron .swiper-slide b {
font-size: 16px;
}
.hull-electron .swiper__control {
width: 100%;
}
}
@media screen and (max-width: 767px){
.grey-electron__titles {
margin: 0 0 -47px 0;
}
.grey-electron__titles h2 {
font-size: 55px;
letter-spacing: 5.5px;
}
.grey-electron__titles b {
font-size: 55px;
letter-spacing: 5.5px;
margin: -25px -5px 0 0;
}
.multiplicity-electron {
padding: 77px 20px 20px 20px;
}
.multiplicity-electron__wrap {
gap: 24px;
}
.multiplicity-electron__info {
gap: 10px;
position: relative;
}
.multiplicity-electron__wrap ul {
max-width: 250px;
}
/* --------- */
.hull-electron {
gap: 30px;
}
.hull-electron__title h2 {
font-size: 95px;
letter-spacing: 9.5px;
}
.hull-electron__title h4 {
font-size: 26px;
letter-spacing: 4.68px;
}
.hull-electron__wrap {
gap: 30px;
}
.hull-electron__pictures img {
max-width: 100%;
height: 46vw;
}
}
@media screen and (max-width: 567px) {
.grey-electron__titles {
margin: 0 0 -33px 0;
}
.grey-electron__titles h2 {
font-size: 36px;
letter-spacing: 3.6px;
}
.grey-electron__titles b {
font-size: 37px;
letter-spacing: 3.7px;
margin: -16px -3px 0 0;
}
.multiplicity-electron {
/* background-color: #535D65; */
background-image: url(/image/catalog/landings/electron-29x50/grey-bg-s.webp);
background-size: 570px;
background-position: top 290px left;
gap: 120px;
padding: 58px 20px 20px 20px;
}
.multiplicity-electron__wrap {
align-items: start;
gap: 30px;
}
.multiplicity-electron__info {
gap: 20px;
padding: 0 0 20px;
}
.multiplicity-electron__info span {
font-size: 14px
}
.multiplicity-electron .js-expand-btn {
background-color: #22372C;
background-image: none;
}
.multiplicity-electron__wrap ul {
max-width: 100%;
}
.multiplicity-electron__wrap ul li {
padding: 14px 0;
}
.multiplicity-electron__wrap ul li:first-child {
padding: 0 0 14px 0;
}
.multiplicity-electron__wrap ul li:last-child {
padding: 14px 0 0 0;
}
.multiplicity-electron__wrap ul li span {
font-size: 14px;
}
.hull-electron {
gap: 20px;
}
.hull-electron__title {
text-align: start;
align-items: start;
}
.hull-electron__title h2 {
font-size: 45px;
letter-spacing: 4.5px;
}
.hull-electron__title h4 {
font-size: 19px;
letter-spacing: 3.42px;
}
.hull-electron__wrap {
gap: 20px;
}
.hull-electron__pictures img {
height: 46vw;
}
.hull-electron .swiper-slide div h5 {
font-size: 16px;
letter-spacing: 0.64px;
text-wrap: balance;
}
.hull-electron .swiper-slide div p {
font-size: 14px;
}
.hull-electron .swiper-slide b {
font-size: 14px;
padding: 10px;
}
.hull-electron .swiper-slide ul {
font-size: 14px;
padding: 0 0 0 18px;
line-height: 150%;
display: flex;
flex-direction: column;
gap: 10px;
}
.hull-electron .swiper-pagination {
max-width: 75px;
font-size: 14px;
}
.hull-electron .current-page {
font-size: 24px;
}
.hull-electron .swiper-pagination .separator {
font-size: 14px;
margin: 0 5px;
}
.hull-electron .swiper-pagination .swiper-pagination-total {
font-size: 14px;
}
}
/* ballistics--------------------------------------------------------------------------------------------- */
.ballistics-electron {
display: flex;
flex-direction: column;
gap: 25px;
margin: 150px 0;
}
.ballistics-electron__titles {
display: flex;
flex-direction: column;
align-items: end;
text-align: right;
}
.ballistics-electron__titles h4 {
color: #22372C;
font-size: 64px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 4.48px;
text-transform: uppercase;
margin: 0 -5px 0 0;
}
.ballistics-electron__titles h2 {
color: #266141;
font-size: 139px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 13.9px;
text-transform: uppercase;
margin: 0 -14px 0 0;
}
.ballistics-electron__wrap {
display: flex;
flex-direction: column;
}
.ballistics-electron__video {
display: flex;
align-items: center;
justify-content: center;
max-width: 700px;
width: 100%;
background-color: #939393;
z-index: 5;
}
.ballistics-electron__video video {
max-width: 700px;
width: 100%;
}
.ballistics-electron .mySwiperMobile {
margin: -525px 0 0 0;
}
.ballistics-electron .swiper-wrapper {
display: grid;
grid-template-columns: 700px 725px;
gap: 25px;
max-width: 1450px;
width: 100%;
}
.ballistics-electron .swiper-slide:nth-child(1) {
grid-area: 1 / 2 / 2 / 3;
gap: 0;
height: 525px;
justify-content: end;
}
.ballistics-electron .swiper-slide:nth-child(2) {
grid-area: 2 / 1 / 3 / 2;
}
.ballistics-electron .swiper-slide:nth-child(3) {
grid-area: 2 / 2 / 3 / 3;
}
.ballistics-electron .swiper-slide {
display: flex;
flex-direction: column;
padding: 50px;
gap: 50px;
background: #F5F5F5;
}
.ballistics-electron .swiper-slide img {
max-width: 70px;
width: 100%;
}
.ballistics-electron__subtitle {
display: flex;
align-items: end;
}
.ballistics-electron__subtitle b {
color: #266141;
font-size: 128px;
font-style: normal;
font-weight: 700;
line-height: 100%;
letter-spacing: 7.68px;
text-transform: uppercase;
}
.ballistics-electron__subtitle h5 {
color: #020A0A;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.96px;
margin: 0;
padding: 0 0 12px 0;
}
.ballistics-electron__info {
display: flex;
flex-direction: column;
gap: 20px;
}
.ballistics-electron__info h5 {
color: #020A0A;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.96px;
margin: 0;
}
.ballistics-electron__info p {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.mySwiperMobile__control {
display: none;
}
@media screen and (max-width: 1599px) {
.ballistics-electron__titles h4 {
font-size: 54px;
letter-spacing: 3.78px;
margin: 0 -4px 0 0;
}
.ballistics-electron__titles h2 {
font-size: 119px;
letter-spacing: 11.9px;
margin: 0 -12px 0 0;
}
.ballistics-electron__video {
max-width: 613px;
height: 460px;
}
.ballistics-electron .mySwiperMobile {
margin: -460px 0 0 0;
}
.ballistics-electron .swiper-wrapper {
grid-template-columns: 613px 612px;
max-width: 1250px;
}
.ballistics-electron .swiper-slide:nth-child(1) {
height: 460px;
}
.ballistics-electron .swiper-slide {
padding: 40px;
gap: 40px;
}
}
@media screen and (max-width: 1344px) {
.ballistics-electron {
gap: 20px;
}
.ballistics-electron__titles h4 {
font-size: 47px;
letter-spacing: 3.29px;
margin: 0 -3px 0 0;
}
.ballistics-electron__titles h2 {
font-size: 108px;
letter-spacing: 10.8px;
margin: 0 -11px 0 0;
}
.ballistics-electron__video {
max-width: 550px;
height: 413px;
}
.ballistics-electron .mySwiperMobile {
margin: -413px 0 0 0;
}
.ballistics-electron .swiper-wrapper {
grid-template-columns: 550px 550px;
gap: 20px;
max-width: 1120px;
}
.ballistics-electron .swiper-slide:nth-child(1) {
height: 413px;
}
.ballistics-electron .swiper-slide {
padding: 30px;
gap: 30px;
}
.ballistics-electron__subtitle b {
font-size: 110px;
letter-spacing: 6.6px;
}
}
@media screen and (max-width: 1199px) {
.ballistics-electron {
margin: 120px 0;
}
.ballistics-electron__titles h4 {
font-size: 39px;
letter-spacing: 2.73px;
margin: 0 -3px 0 0;
}
.ballistics-electron__titles h2 {
font-size: 107px;
letter-spacing: 10.7px;
margin: 0 -10px 0 0;
}
.ballistics-electron__video {
max-width: 450px;
height: 338px;
}
.ballistics-electron .mySwiperMobile {
margin: -338px 0 0 0;
}
.ballistics-electron .swiper-wrapper {
grid-template-columns: 450px 450px;
max-width: 920px;
}
.ballistics-electron .swiper-slide:nth-child(1) {
height: 338px;
padding: 30px 20px 30px 30px;
}
.ballistics-electron .swiper-slide {
padding: 30px;
gap: 30px;
}
.ballistics-electron__subtitle b {
font-size: 74px;
letter-spacing: 4.44px;
}
.ballistics-electron__subtitle h5 {
font-size: 20px;
letter-spacing: 0.8px;
padding: 0 0 5px 5px;
}
.ballistics-electron__info {
gap: 10px;
}
.ballistics-electron__info h5 {
font-size: 20px;
letter-spacing: 0.8px;
}
.ballistics-electron__info p {
font-size: 16px;
}
}
@media screen and (max-width: 991px) {
.ballistics-electron {
margin: 120px 0;
}
.ballistics-electron__titles h4 {
font-size: 31px;
letter-spacing: 2.17px;
margin: 0 -2px 0 0;
}
.ballistics-electron__titles h2 {
font-size: 82px;
letter-spacing: 8.2px;
margin: 0 -8px 0 0;
}
.ballistics-electron__wrap {
gap: 20px;
}
.ballistics-electron__video {
height: auto;
max-width: 700px;
align-self: center;
}
.ballistics-electron .mySwiperMobile {
margin: 0;
}
.ballistics-electron .swiper-wrapper {
grid-template-columns: 340px 340px;
max-width: 700px;
}
.ballistics-electron .swiper-slide:nth-child(1) {
grid-area: 1 / 1 / 2 / 3;
height: auto;
padding: 20px;
}
.ballistics-electron .swiper-slide {
padding: 20px;
gap: 20px;
}
.ballistics-electron .swiper-slide img {
max-width: 60px;
}
}
@media screen and (max-width: 767px){
.ballistics-electron {
margin: 100px 0;
}
.ballistics-electron__titles h2 {
font-size: 60px;
letter-spacing: 6px;
margin: 0 -6px 0 0;
}
.ballistics-electron .swiper-slide:nth-child(1) {
gap: 20px;
}
.ballistics-electron .swiper-slide {
height: auto;
justify-content: end;
}
.ballistics-electron__subtitle {
margin: 0 0 -20px 0;
}
.ballistics-electron .mySwiperMobile {
position: relative;
padding: 0 0 60px 0;
}
.ballistics-electron .swiper-wrapper {
max-width: 100%;
align-items: stretch;
gap: 0;
}
.ballistics-electron .mySwiperMobile__control {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
}
.ballistics-electron .mySwiperMobile__btns {
position: relative;
display: flex;
gap: 30px;
}
.ballistics-electron .swiper-button-next-mobile::after,
.ballistics-electron .swiper-button-prev-mobile::after {
content: none;
}
.ballistics-electron .swiper-button-next-mobile,
.ballistics-electron .swiper-button-prev-mobile {
position: static;
transform: none;
width: 40px;
height: 40px;
background-color: #f1f1f1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 14px;
margin: 0;
transition: all 0.2s ease;
}
.ballistics-electron .swiper-button-next-mobile:hover,
.ballistics-electron .swiper-button-prev-mobile:hover {
background-color: #DEE7E3;
}
.ballistics-electron .swiper-button-next-mobile:active,
.ballistics-electron .swiper-button-prev-mobile:active {
background-color: #266141;
}
.ballistics-electron .swiper-button-next-mobile:active svg path,
.ballistics-electron .swiper-button-prev-mobile:active svg path {
fill: #FFFFFF;
}
.ballistics-electron .swiper-pagination-mobile {
position: static;
max-width: 85px;
color: #020A0A;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 100%;
}
.ballistics-electron .current-page {
font-size: 24px;
}
.ballistics-electron .swiper-pagination-mobile .separator {
font-size: 14px;
margin: 0 5px;
}
.ballistics-electron .swiper-pagination-mobile .swiper-pagination-total {
font-size: 14px;
}
}
@media screen and (max-width: 567px) {
.ballistics-electron__subtitle {
margin: 0 0 -20px 0;
}
.ballistics-electron .mySwiperMobile {
padding: 0 0 50px 0;
}
.ballistics-electron {
margin: 70px 0;
}
.ballistics-electron__titles h4 {
font-size: 21px;
letter-spacing: 1.01px;
margin: 0 -1px 0 0;
}
.ballistics-electron__titles h2 {
font-size: 31px;
letter-spacing: 3.1px;
margin: 0 -3px 0 0;
}
.ballistics-electron__subtitle b {
font-size: 60px;
letter-spacing: 3.6px;
}
.ballistics-electron__subtitle h5 {
font-size: 16px;
letter-spacing: 0.64px;
padding: 0 0 4px 4px;
}
.ballistics-electron__info h5 {
font-size: 16px;
letter-spacing: 0.64px;
}
.ballistics-electron__info p {
font-size: 14px;
}
.ballistics-electron .swiper-slide img {
max-width: 50px;
}
.ballistics-electron .swiper-slide {
justify-content: start;
}
}
/* reticle--------------------------------------------------------------------------------------------- */
.reticle-electron {
display: flex;
align-items: start;
justify-content: space-between;
margin: 0 0 150px 0;
}
.reticle-electron__title {
display: flex;
align-items: center;
max-width: 640px;
width: 100%;
gap: 10px;
margin: 28px 0 0 0;
}
.reticle-electron__title b {
color: #22372C;
font-size: 278px;
font-style: normal;
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
position: relative;
}
.reticle-electron__title b::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
background-image: url(/image/catalog/landings/electron-29x50/reticle-rectangle.svg);
background-size: auto 100%;
background-position: left bottom;
background-repeat: no-repeat;
width: 110px;
height: 160px;
}
.reticle-electron__title b::after {
content: "";
position: absolute;
bottom: 35px;
right: 20px;
width: 24px;
height: 24px;
background: #266141;
box-sizing: border-box;
}
.reticle-electron__title div {
display: flex;
flex-direction: column;
z-index: 2;
}
.reticle-electron__title div h3 {
color: #266141;
font-size: 108px;
font-style: normal;
font-weight: 700;
line-height: 100%;
letter-spacing: 10.8px;
text-transform: uppercase;
margin: 0;
}
.reticle-electron__title div h4 {
color: #22372C;
font-size: 53px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 3.71px;
text-transform: uppercase;
margin: 0;
}
.reticle-electron__wrap {
position: relative;
padding: 0 0 60px 0;
max-width: 725px;
width: 100%;
}
.reticle-swiper {
position: static;
background-image: url(/image/catalog/landings/electron-29x50/reticle-bg.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.reticle-electron .swiper-wrapper {
position: static;
}
.reticle-electron .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
padding: 46px;
cursor: pointer;
}
.reticle-swiper__control {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
}
.reticle__btns {
position: relative;
display: flex;
gap: 50px;
}
.reticle-button-next::after,
.reticle-button-prev::after {
content: none;
}
.reticle-button-next,
.reticle-button-prev {
position: static;
transform: none;
width: 40px;
height: 40px;
background-color: #f1f1f1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 14px;
margin: 0;
transition: all 0.2s ease;
cursor: pointer;
}
.reticle-button-next:hover,
.reticle-button-prev:hover {
background-color: #DEE7E3;
}
.reticle-button-next:active,
.reticle-button-prev:active {
background-color: #266141;
}
.reticle-button-next:active svg path,
.reticle-button-prev:active svg path {
fill: #FFFFFF;
}
.reticle-pagination {
position: static;
max-width: 88px;
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 100%;
}
.reticle-swiper .current-page {
font-size: 28px;
}
.reticle-swiper .reticle-pagination .separator {
font-size: 18px;
margin: 0 5px;
}
.reticle-swiper .reticle-pagination .swiper-pagination-total {
font-size: 18px;
}
@media screen and (max-width: 1599px) {
.reticle-electron__title {
max-width: 590px;
margin: 50px 0 0 0;
}
.reticle-electron__title b {
font-size: 250px;
}
.reticle-electron__title b::before {
width: 95px;
height: 160px;
}
.reticle-electron__title b::after {
bottom: 35px;
right: 20px;
}
.reticle-electron__title div h3 {
font-size: 100px;
letter-spacing: 10px;
margin: 0 0 -10px 0;
}
.reticle-electron__title div h4 {
font-size: 50px;
letter-spacing: 3.5px;
}
.reticle-electron__wrap {
max-width: 612px;
}
}
@media screen and (max-width: 1344px) {
.reticle-electron__title {
max-width: 520px;
margin: 40px 0 0 0;
}
.reticle-electron__title b::before {
width: 95px;
height: 160px;
}
.reticle-electron__title b::after {
bottom: 35px;
right: 20px;
}
.reticle-electron__title div h3 {
font-size: 84px;
letter-spacing: 8.4px;
margin: 0 0 18px 0;
}
.reticle-electron__title div h4 {
font-size: 42px;
letter-spacing: 2.94px;
}
.reticle-electron__wrap {
max-width: 550px;
padding: 0 0 55px 0;
}
}
@media screen and (max-width: 1199px) {
.reticle-electron {
margin: 0 0 120px 0;
}
.reticle-electron__title {
max-width: 440px;
margin: 40px 0 0 0;
}
.reticle-electron__title b {
font-size: 200px;
}
.reticle-electron__title b::before {
width: 80px;
}
.reticle-electron__title b::after {
bottom: 27px;
right: 13px;
}
.reticle-electron__title div h3 {
font-size: 73px;
letter-spacing: 7.3px;
margin: 0;
}
.reticle-electron__title div h4 {
font-size: 36px;
letter-spacing: 2.52px;
}
.reticle-electron__wrap {
max-width: 450px;
}
.reticle-electron .swiper-slide {
padding: 38px;
}
.reticle-electron .swiper-slide img {
max-width: 197px;
width: 100%;
}
}
@media screen and (max-width: 991px) {
.reticle-electron {
flex-direction: column;
gap: 20px;
align-items: center;
}
.reticle-electron__title {
max-width: 450px;
gap: 20px;
margin: 0;
}
}
@media screen and (max-width: 767px){
.reticle-electron {
margin: 0 0 100px 0;
}
.reticle__btns {
gap: 30px;
}
.reticle-pagination {
max-width: 80px;
font-size: 14px;
}
.reticle-swiper .current-page {
font-size: 24px;
}
.reticle-swiper .reticle-pagination .separator {
font-size: 14px;
}
.reticle-swiper .reticle-pagination .swiper-pagination-total {
font-size: 14px;
}
}
@media screen and (max-width: 567px) {
.reticle-electron {
margin: 0 0 70px 0;
align-items: start;
}
.reticle-electron__title {
gap: 2px;
max-width: 360px;
}
.reticle-electron__title b {
font-size: 119px;
}
.reticle-electron__title b::before {
width: 45px;
}
.reticle-electron__title b::after {
bottom: 16px;
right: 6px;
width: 16px;
height: 16px;
}
.reticle-electron__title div h3 {
font-size: 46px;
letter-spacing: 4.6px;
margin: 0 0 -4px;
}
.reticle-electron__title div h4 {
font-size: 23px;
letter-spacing: 1.61px;
}
.reticle-electron .swiper-slide {
padding: 23px;
}
.reticle-electron .swiper-slide img {
max-width: 118px;
}
}
/* application-------------------------------------------------------------------------------- */
.application-electron {
display: flex;
flex-direction: column;
align-items: center;
max-width: 1312px;
width: 100%;
align-self: end;
}
.application-electron h2 {
color: #266141;
font-size: 108px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 10.8px;
text-transform: uppercase;
margin: 0;
text-align: center;
}
.application-electron__wrap {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px;
margin: -40px 0 0 0;
}
.application-electron__inner {
display: flex;
flex-direction: column;
gap: 50px;
max-width: 600px;
width: 100%;
}
.application-electron__inner ul {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 190%;
margin: 0;
padding: 0 0 0 20px;
width: 100%;
}
.application-electron__stores {
display: flex;
gap: 150px;
padding: 0 0 27px 0;
}
.application-electron__stores div {
display: flex;
flex-direction: column;
gap: 25px;
}
.application-electron__qr {
max-width: 200px;
width: 100%;
}
.application-electron__stores div a {
text-decoration: none;
}
.application-electron__stores div a img {
max-width: 200px;
width: 100%;
}
.application-electron__img {
max-width: 666px;
width: 100%;
}
@media screen and (max-width: 1599px) {
.application-electron {
max-width: 1160px;
}
.application-electron h2 {
font-size: 96px;
letter-spacing: 9.6px;
}
.application-electron__wrap {
gap: 20px;
}
.application-electron__inner {
gap: 40px;
max-width: 500px;
}
.application-electron__inner ul {
line-height: 160%;
}
.application-electron__stores {
gap: 100px;
padding: 0;
}
.application-electron__img {
max-width: 632px;
}
}
@media screen and (max-width: 1344px) {
.application-electron {
max-width: 1080px;
}
.application-electron h2 {
font-size: 116px;
letter-spacing: 10.6px;
}
.application-electron__wrap {
margin: -30px 0 0 0;
}
.application-electron__img {
max-width: 560px;
padding: 0 0 21px 0;
}
}
@media screen and (max-width: 1199px) {
.application-electron {
max-width: 875px;
}
.application-electron h2 {
font-size: 93px;
letter-spacing: 9.3px;
}
.application-electron__wrap {
margin: 10px 0 0 0;
}
.application-electron__inner {
gap: 30px;
max-width: 435px;
}
.application-electron__inner ul {
font-size: 16px;
padding: 0 0 0 20px;
}
.application-electron__stores {
gap: 64px;
}
.application-electron__stores div {
gap: 20px;
}
.application-electron__qr {
max-width: 180px;
}
.application-electron__stores div a img {
max-width: 180px;
}
.application-electron__img {
max-width: 417px;
padding: 0;
}
}
@media screen and (max-width: 991px) {
.application-electron {
max-width: 100%;
}
.application-electron h2 {
font-size: 69px;
letter-spacing: 6.9px;
}
.application-electron__wrap {
margin: 40px 0 0 0;
}
.application-electron__inner {
gap: 30px;
max-width: 100%;
align-items: center;
flex-direction: row-reverse;
justify-content: space-between;
}
.application-electron__inner ul {
max-width: 353px;
padding: 0 0 0 20px;
}
.application-electron__stores {
gap: 20px;
flex-direction: column;
}
.application-electron__qr {
display: none;
}
.application-electron__stores div a picture {
display: block;
width: 100%;
height: auto;
}
.application-electron__stores div a img {
max-width: 238px;
display: block;
height: auto;
}
.application-electron__img {
display: none;
}
}
@media screen and (max-width: 767px){
.application-electron {
padding: 0 30px;
}
.application-electron h2 {
font-size: 94px;
letter-spacing: 9.4px;
}
.application-electron__wrap {
margin: 30px 0 0 0;
}
.application-electron__inner {
gap: 40px;
max-width: 100%;
flex-direction: column;
}
.application-electron__inner ul {
max-width: 100%;
padding: 0 0 0 20px;
}
}
@media screen and (max-width: 567px) {
.application-electron {
padding: 0;
}
.application-electron h2 {
font-size: 58px;
letter-spacing: 5.8px;
}
.application-electron__wrap {
margin: 20px 0 0 0;
}
.application-electron__inner {
gap: 30px;
}
.application-electron__inner ul {
font-size: 14px;
}
.application-electron__stores {
gap: 14px;
flex-direction: column;
}
.application-electron__stores div a img {
max-width: 208px;
}
}
/* recording---------------------------------------------------------------------------------------------- */
.recording-electron {
margin: 150px 0;
max-width: 1150px;
width: 100%;
align-self: center;
display: flex;
align-items: center;
justify-content: space-between;
}
.recording-electron__info {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 550px;
width: 100%;
}
.recording-electron__info div {
display: flex;
flex-direction: column;
}
.recording-electron__info div h2 {
color: #266141;
font-size: 108px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 10.8px;
text-transform: uppercase;
margin: 0;
}
.recording-electron__info div h3 {
color: #22372C;
font-size: 58px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 4.06px;
text-transform: uppercase;
margin: 0;
}
.recording-electron__info p {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.recording-electron__pictures img {
max-width: 550px;
width: 100%;
height: 350px;
object-fit: cover;
object-position: center;
}
@media screen and (max-width: 1599px) {
.recording-electron {
max-width: 1050px;
}
.recording-electron__info {
max-width: 512px;
}
.recording-electron__info div h2 {
font-size: 101px;
letter-spacing: 10.1px;
}
.recording-electron__info div h3 {
font-size: 55px;
letter-spacing: 3.35px;
}
.recording-electron__pictures img {
max-width: 498px;
}
}
@media screen and (max-width: 1344px) {
.recording-electron {
max-width: 1050px;
}
.recording-electron__info {
max-width: 500px;
}
.recording-electron__info div h2 {
font-size: 99px;
letter-spacing: 9.9px;
}
.recording-electron__info div h3 {
font-size: 53px;
letter-spacing: 3.35px;
}
.recording-electron__pictures img {
max-width: 500px;
}
}
@media screen and (max-width: 1199px) {
.recording-electron {
margin: 120px 0;
max-width: 840px;
}
.recording-electron__info {
gap: 25px;
max-width: 400px;
}
.recording-electron__info div h2 {
font-size: 79px;
letter-spacing: 7.9px;
}
.recording-electron__info div h3 {
font-size: 43px;
letter-spacing: 2.5px;
}
.recording-electron__info p {
font-size: 16px;
}
.recording-electron__pictures img {
max-width: 400px;
height: 282px;
}
}
@media screen and (max-width: 991px) {
.recording-electron {
max-width: 100%;
align-items: start;
}
.recording-electron__info {
gap: 20px;
max-width: 340px;
}
.recording-electron__info div h2 {
font-size: 67px;
letter-spacing: 6.7px;
}
.recording-electron__info div h3 {
font-size: 36px;
letter-spacing: 2.5px;
}
.recording-electron__pictures img {
max-width: 340px;
height: 240px;
}
}
@media screen and (max-width: 767px){
.recording-electron {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 30px;
margin: 100px 0;
padding: 0 20px;
}
.recording-electron__info {
padding: 0;
max-width: 100%;
}
.recording-electron__info div h2 {
font-size: 80px;
letter-spacing: 20.8px;
}
.recording-electron__info div h3 {
font-size: 40px;
letter-spacing: 11.6px;
}
.recording-electron__pictures {
width: 100%;
}
.recording-electron__pictures img {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width: 567px) {
.recording-electron {
margin: 70px 0;
padding: 0;
}
.recording-electron__info {
gap: 10px;
padding: 0 10px;
}
.recording-electron__info div h2 {
font-size: 45px;
letter-spacing: 4.5px;
}
.recording-electron__info div h3 {
font-size: 24px;
letter-spacing: 1.6px;
}
.recording-electron__info p {
font-size: 14px;
}
}
/* features-------------------------------------------------------------------------------------- */
.features-electron {
display: flex;
flex-direction: column;
align-self: center;
max-width: 1250px;
width: 100%;
gap: 50px;
padding: 50px;
background-color: #F5F5F5;
position: relative;
z-index: 1;
}
.features-electron__titles {
display: flex;
flex-direction: column;
align-items: end;
}
.features-electron__titles h2 {
color: #266141;
text-align: center;
font-size: 128px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0 -0.2em 0 0;
}
.features-electron__titles h3 {
color: #22372C;
font-size: 42px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.features-electron ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 50px;
width: 100%;
}
.features-electron ul li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
width: 100%;
}
.features-electron ul li:nth-child(even) {
flex-direction: row-reverse;
}
.features-electron ul li:nth-child(even) .features-electron__info {
text-align: start;
}
.features-electron__info {
display: flex;
flex-direction: column;
gap: 20px;
text-align: right;
max-width: 550px;
width: 100%;
}
.features-electron__info h4 {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: 0.04em;
margin: 0;
text-wrap: balance;
}
.features-electron__info p {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.features-electron__video {
display: flex;
align-items: center;
justify-content: center;
background-color: #D9D9D9;
max-width: 550px;
}
.features-electron__video video {
width: 100%;
height: auto;
}
@media screen and (max-width: 1599px) {
.features-electron {
max-width: 1150px;
padding: 50px 40px;
}
.features-electron__titles h2 {
font-size: 120px;
}
.features-electron__titles h3 {
font-size: 47px;
}
.features-electron ul li {
gap: 40px;
}
.features-electron__info {
max-width: 508px;
}
.features-electron__video {
max-width: 522px;
}
}
@media screen and (max-width: 1344px) {
.features-electron {
max-width: 100%;
padding: 40px;
gap: 40px;
}
.features-electron__titles h2 {
font-size: 116px;
}
.features-electron__titles h3 {
font-size: 49px;
}
.features-electron ul {
gap: 40px;
}
.features-electron__info {
max-width: 500px;
}
.features-electron__video {
max-width: 500px;
}
}
@media screen and (max-width: 1199px) {
.features-electron__titles h2 {
font-size: 94px;
}
.features-electron__titles h3 {
font-size: 39px;
}
.features-electron__info {
max-width: 400px;
}
.features-electron__info h4 {
font-size: 16px;
}
.features-electron__info p {
font-size: 16px;
}
.features-electron__video {
max-width: 400px;
}
}
@media screen and (max-width: 991px) {
.features-electron {
padding: 40px 20px;
}
.features-electron__titles h2 {
font-size: 73px;
}
.features-electron__titles h3 {
font-size: 31px;
}
.features-electron ul li {
gap: 20px;
}
.features-electron__info {
max-width: 320px;
gap: 10px;
}
.features-electron__video {
max-width: 320px;
}
}
@media screen and (max-width: 767px){
.features-electron {
gap: 30px;
}
.features-electron__titles {
align-items: center;
}
.features-electron__titles h2 {
font-size: 55px;
}
.features-electron__titles h3 {
font-size: 30px;
}
.features-electron ul li {
gap: 20px;
flex-direction: column-reverse;
}
.features-electron ul li:nth-child(even) {
flex-direction: column-reverse;
}
.features-electron__info {
text-align: left;
max-width: 100%;
}
.features-electron__video {
max-width: 100%;
}
}
@media screen and (max-width: 567px) {
.features-electron {
padding: 20px;
}
.features-electron__titles h2 {
font-size: 8.4vw;
}
.features-electron__titles h3 {
font-size: 4.5vw;
}
.features-electron ul {
gap: 30px;
}
.features-electron__info p {
font-size: 14px;
}
}
/* autonomy------------------------------------------------------------------------------------------------------------ */
.gray-wrapper {
background-color: #22372C;
padding: 480px 0 0 0;
margin: -470px 0 0 0;
}
.autonomy-electron {
display: flex;
align-items: center;
gap: 90px;
padding: 120px 100px 44px 160px;
background-image: url(/image/catalog/landings/electron-24x25/ellipse-light.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.autonomy-electron__inner {
display: flex;
flex-direction: column;
}
.autonomy-electron__inner img:first-child {
max-width: 550px;
}
.autonomy-electron__inner img:last-child {
max-width: 536px;
width: 100%;
margin: -115px 0 0 0;
}
.autonomy-electron__info {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 550px;
}
.autonomy-electron__info h4 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.04em;
margin: 0;
}
.autonomy-electron__info p {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
/* ----------- */
.guarantee-electron {
display: flex;
flex-direction: column;
gap: 40px;
padding: 150px 100px 100px 150px;
}
.guarantee-electron__titles {
display: flex;
flex-direction: column;
align-items: end;
}
.guarantee-electron__titles div {
display: flex;
justify-content: space-between;
align-items: end;
width: 100%;
}
.guarantee-electron__titles div b {
color: #FFF;
font-size: 200px;
font-style: normal;
font-weight: 700;
line-height: 110%;
position: relative;
text-transform: uppercase;
}
.guarantee-electron__titles div b::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
background-image: url(/image/catalog/landings/electron-24x25/guarantee-rectangle.svg);
background-size: auto 100%;
background-position: left bottom;
background-repeat: no-repeat;
width: 100px;
height: 180px;
}
.guarantee-electron__titles div b::after {
content: "";
position: absolute;
bottom: 35px;
right: 0;
width: 24px;
height: 24px;
background: #F3E3CD;
}
.guarantee-electron__titles div h2 {
color: #FFF;
font-size: 64px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 0.37em;
text-transform: uppercase;
max-width: 550px;
width: 100%;
margin: 0 0 20px 0;
}
.guarantee-electron__titles h3 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.03em;
margin: -10px 0 0 0;
max-width: 550px;
width: 100%;
}
.guarantee-electron__wrap {
display: flex;
justify-content: space-between;
align-items: end;
}
.guarantee-electron__wrap ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
max-width: 550px;
width: 100%;
}
.guarantee-electron__wrap ul li {
display: flex;
flex-direction: column;
align-items: end;
gap: 6px;
padding: 30px 0;
text-align: right;
border-bottom: 1px solid #FFF;
}
.guarantee-electron__wrap ul li:first-child {
padding: 0 0 30px 0;
}
.guarantee-electron__wrap ul li:last-child {
border-bottom: none;
padding: 30px 0 0 0;
}
.guarantee-electron__wrap ul li h4 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin: 0;
}
.guarantee-electron__wrap ul li span {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%;
}
.guarantee-electron__inner {
display: flex;
flex-direction: column;
gap: 46px;
max-width: 550px;
}
.guarantee-electron__inner p {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.guarantee-electron__inner a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 30px;
background-color: #FFF;
border-radius: 10px;
width: 100%;
text-decoration: none;
transition: all 0.2s ease;
}
.guarantee-electron__inner a:hover {
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.55);
}
.guarantee-electron__inner a span {
color: #020A0A;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 130%;
letter-spacing: 0.03em;
}
.guarantee-electron__inner a svg {
max-width: 40px;
width: 100%;
}
@media screen and (max-width: 1599px) {
.gray-wrapper {
padding: 519px 0 0 0;
margin: -495px 0 0 0;
}
.autonomy-electron {
justify-content: space-between;
gap: 40px;
padding: 112px 50px 44px 50px;
}
.autonomy-electron__info {
gap: 20px;
max-width: 532px;
}
/* ----------- */
.guarantee-electron {
padding: 100px 50px;
}
.guarantee-electron__titles div b {
font-size: 183px;
}
.guarantee-electron__titles div b::before {
width: 100px;
height: 180px;
}
.guarantee-electron__titles div b::after {
bottom: 35px;
right: 0;
}
.guarantee-electron__titles div h2 {
max-width: 532px;
margin: 0 0 20px 0;
}
.guarantee-electron__titles h3 {
margin: -10px 0 0 0;
max-width: 532px;
}
.guarantee-electron__inner {
max-width: 532px;
}
}
@media screen and (max-width: 1344px) {
.gray-wrapper {
padding: 100px 0 0 0;
margin: 0;
}
.autonomy-electron {
padding: 46px 40px 36px 40px;
align-items: start;
}
.autonomy-electron__inner img:first-child {
max-width: 500px;
}
.autonomy-electron__inner img:last-child {
max-width: 495px;
margin: -95px 0 0 0;
}
.autonomy-electron__info {
gap: 30px;
max-width: 500px;
}
/* ----------- */
.guarantee-electron {
padding: 80px 40px;
}
.guarantee-electron__titles div b {
font-size: 167px;
}
.guarantee-electron__titles div b::before {
width: 85px;
height: 180px;
}
.guarantee-electron__titles div b::after {
bottom: 30px;
right: 0;
}
.guarantee-electron__titles div h2 {
max-width: 500px;
margin: 0 0 20px 0;
letter-spacing: 0.3em;
}
.guarantee-electron__titles h3 {
margin: 0;
max-width: 500px;
}
.guarantee-electron__wrap ul {
max-width: 500px;
}
.guarantee-electron__inner {
max-width: 500px;
gap: 37px;
}
}
@media screen and (max-width: 1199px) {
.gray-wrapper {
padding: 100px 0 0 0;
}
.autonomy-electron {
padding: 35px 40px 47px 40px;
}
.autonomy-electron__inner img:first-child {
max-width: 400px;
}
.autonomy-electron__inner img:last-child {
max-width: 400px;
margin: -75px 0 0 0;
}
.autonomy-electron__info {
gap: 20px;
max-width: 400px;
}
.autonomy-electron__info h4 {
font-size: 20px;
}
.autonomy-electron__info p {
font-size: 16px;
}
/* ----------- */
.guarantee-electron {
padding: 80px 40px;
}
.guarantee-electron__titles div b {
font-size: 133px;
}
.guarantee-electron__titles div b::before {
width: 68px;
height: 120px;
}
.guarantee-electron__titles div b::after {
bottom: 23px;
right: 0;
}
.guarantee-electron__titles div h2 {
font-size: 51px;
max-width: 400px;
margin: 0 0 15px 0;
letter-spacing: 0.3em;
}
.guarantee-electron__titles h3 {
font-size: 20px;
max-width: 400px;
}
.guarantee-electron__wrap ul {
max-width: 400px;
}
.guarantee-electron__wrap ul li {
gap: 4px;
padding: 20px 0;
}
.guarantee-electron__wrap ul li:first-child {
padding: 0 0 20px 0;
}
.guarantee-electron__wrap ul li:last-child {
padding: 20px 0 0 0;
}
.guarantee-electron__wrap ul li h4 {
font-size: 22px;
}
.guarantee-electron__wrap ul li span {
font-size: 16px;
}
.guarantee-electron__inner {
max-width: 400px;
gap: 23px;
}
.guarantee-electron__inner p {
font-size: 16px;
}
.guarantee-electron__inner a span {
font-size: 18px;
}
}
@media screen and (max-width: 991px) {
.gray-wrapper {
padding: 100px 0 0 0;
}
.autonomy-electron {
padding: 0 30px;
background-position: top center;
flex-direction: column;
align-items: center;
gap: 17px;
}
.autonomy-electron__inner {
width: 100%;
align-items: center;
}
.autonomy-electron__inner img:first-child {
max-width: 100%;
width: 100%;
}
.autonomy-electron__inner img:last-child {
max-width: 501px;
margin: -140px 0 0 0;
}
.autonomy-electron__info {
max-width: 100%;
}
.guarantee-electron {
padding: 50px 30px;
gap: 10px;
}
.guarantee-electron__titles div b {
font-size: 103px;
}
.guarantee-electron__titles div b::before {
width: 52px;
height: 100px;
}
.guarantee-electron__titles div b::after {
bottom: 20px;
right: 0;
width: 16px;
height: 16px;
}
.guarantee-electron__titles div h2 {
font-size: 39px;
max-width: none;
width: auto;
margin: 0 0 12px 0;
letter-spacing: 0.3em;
}
.guarantee-electron__titles h3 {
max-width: 100%;
margin: 7px 0 0 0;
}
.guarantee-electron__wrap {
flex-direction: column-reverse;
gap: 30px;
}
.guarantee-electron__wrap ul {
max-width: 310px;
}
.guarantee-electron__wrap ul li {
text-align: start;
align-items: start;
}
.guarantee-electron__inner {
max-width: 100%;
gap: 20px;
}
}
@media screen and (max-width: 767px){
.gray-wrapper {
padding: 70px 0 0 0;
}
.autonomy-electron {
padding: 0 20px;
background-position: top 40px center;
gap: 20px;
}
.autonomy-electron__inner img:last-child {
max-width: 466px;
margin: -100px 0 0 0;
}
.guarantee-electron {
padding: 80px 20px 40px 20px;
}
.guarantee-electron__titles div {
justify-content: start;
gap: 20px;
}
.guarantee-electron__titles div b {
font-size: 76px;
}
.guarantee-electron__titles div b::before {
width: 39px;
height: 80px;
}
.guarantee-electron__titles div b::after {
bottom: 14px;
}
.guarantee-electron__titles div h2 {
font-size: 29px;
margin: 0 0 10px 0;
}
.guarantee-electron__titles h3 {
margin: 15px 0 0 0;
}
.guarantee-electron__wrap ul {
max-width: 100%;
}
.guarantee-electron__inner {
gap: 30px;
}
}
@media screen and (max-width: 567px) {
.gray-wrapper {
padding: 50px 0 0 0;
}
.autonomy-electron {
padding: 20px;
background-position: top center;
gap: 30px;
}
.autonomy-electron__inner img:last-child {
max-width: 466px;
margin: -16vw 0 0 0;
}
.autonomy-electron__info {
gap: 10px;
}
.autonomy-electron__info h4 {
font-size: 16px;
}
.autonomy-electron__info p {
font-size: 14px;
}
.guarantee-electron {
padding: 50px 20px 20px 20px;
}
.guarantee-electron__titles div {
flex-direction: column;
align-items: start;
gap: 4px;
}
.guarantee-electron__titles div h2 {
margin: 0;
}
.guarantee-electron__titles h3 {
margin: 10px 0 0 0;
font-size: 16px;
}
.guarantee-electron__wrap ul {
max-width: 100%;
}
.guarantee-electron__inner {
gap: 20px;
}
.guarantee-electron__inner p {
font-size: 14px;
}
.guarantee-electron__inner a {
padding: 16px;
justify-content: center;
}
.guarantee-electron__inner a span {
font-size: 14px;
}
.guarantee-electron__inner a svg {
display: none;
}
.guarantee-electron__wrap ul li {
padding: 14px 0;
}
.guarantee-electron__wrap ul li:first-child {
padding: 0 0 14px 0;
}
.guarantee-electron__wrap ul li:last-child {
padding: 14px 0 0 0;
}
.guarantee-electron__wrap ul li span {
font-size: 14px;
}
}
/* delivery----------------------------------------------------------------------------------------------- */
.delivery-electron {
margin: 100px 0 150px;
max-width: 1180px;
width: 100%;
display: flex;
flex-direction: column;
align-self: center;
}
.delivery-electron__titles {
display: flex;
align-items: end;
justify-content: space-between;
padding: 10px 15px;
width: 100%;
}
.delivery-electron__titles h3 {
color: #266141;
font-size: 89px;
font-style: normal;
font-weight: 700;
line-height: 100%;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.delivery-electron__titles h5 {
color: #020A0A;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 110%;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0 0 13px 0;
max-width: 700px;
width: 100%;
}
.delivery-electron h2 {
color: #FFF;
text-align: right;
font-size: 100px;
font-style: normal;
font-weight: 700;
line-height: 100%;
letter-spacing: 0.1em;
text-transform: uppercase;
width: 100%;
padding: 5px;
margin: 0 -0.1em 0 0;
background-color: #266141;
}
.delivery-electron__inner {
max-width: 715px;
width: 100%;
display: flex;
flex-direction: column;
gap: 46px;
align-self: end;
padding: 0 15px 0 0;
}
.delivery-electron__inner h4 {
color: #020A0A;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 23px 0 0 0;
}
.delivery-electron__info {
display: flex;
flex-direction: column;
gap: 30px;
}
.delivery-electron__info p {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 170%;
margin: 0;
}
@media screen and (max-width: 1344px) {
.delivery-electron {
margin: 80px 0 120px;
max-width: 1060px;
}
.delivery-electron__titles {
padding: 10px;
}
.delivery-electron__titles h5 {
font-size: 20px;
max-width: 576px;
letter-spacing: 0.18em;
}
.delivery-electron h2 {
font-size: 90px;
padding: 10px;
}
.delivery-electron__inner {
max-width: 586px;
gap: 30px;
padding: 0 10px 0 0;
}
.delivery-electron__inner h4 {
font-size: 29px;
}
.delivery-electron__info {
gap: 20px;
}
}
@media screen and (max-width: 1199px) {
.delivery-electron {
max-width: 860px;
}
.delivery-electron__titles h3 {
font-size: 73px;
letter-spacing: 0.05em;
}
.delivery-electron__titles h5 {
font-size: 15px;
max-width: 440px;
}
.delivery-electron h2 {
font-size: 73px;
padding: 10px 3px;
}
.delivery-electron__inner {
max-width: 450px;
gap: 25px;
}
.delivery-electron__inner h4 {
font-size: 22px;
letter-spacing: 0.16em;
margin: 25px 0 0 0;
}
.delivery-electron__info p {
font-size: 16px;
}
}
@media screen and (max-width: 991px) {
.delivery-electron {
max-width: 650px;
margin: 70px 0 100px;
}
.delivery-electron__titles {
padding: 6px 5px;
}
.delivery-electron__titles h3 {
font-size: 55px;
}
.delivery-electron__titles h5 {
font-size: 17px;
max-width: 353px;
margin: 0 0 5px 0;
}
.delivery-electron h2 {
font-size: 55px;
padding: 8px 3px;
}
.delivery-electron__inner {
max-width: 100%;
gap: 30px;
padding: 0 5px 0 0;
}
.delivery-electron__inner h4 {
font-size: 18px;
align-self: end;
margin: 11px 0 0 0;
max-width: 353px;
width: 100%;
}
}
@media screen and (max-width: 767px){
.delivery-electron {
max-width: 100%;
margin: 80px 0;
padding: 0 10px;
}
.delivery-electron__titles {
padding: 8px 10px;
gap: 30px;
justify-content: start;
}
.delivery-electron__titles h3 {
font-size: 41px;
}
.delivery-electron__titles h5 {
max-width: 100%;
margin: 0;
text-wrap: balance;
}
.delivery-electron h2 {
font-size: 41px;
text-align: center;
padding: 8px 10px;
}
.delivery-electron__inner {
gap: 20px;
padding: 0 10px;
}
.delivery-electron__inner h4 {
font-size: 24px;
align-self: start;
margin: 13px 0 0 0;
max-width: 100%;
}
}
@media screen and (max-width: 567px) {
.delivery-electron {
margin: 70px 0;
padding: 0 10px;
}
.delivery-electron__titles {
padding: 6px 10px;
gap: 2px;
flex-direction: column;
align-items: center;
text-align: center;
}
.delivery-electron__titles h3 {
font-size: 49px;
}
.delivery-electron__titles h5 {
font-size: 15px;
}
.delivery-electron h2 {
font-size: 36px;
}
.delivery-electron__inner {
gap: 20px;
padding: 0 10px;
}
.delivery-electron__inner h4 {
font-size: 24px;
align-self: center;
text-align: center;
margin: 6px 0 0 0;
}
.delivery-electron__info {
gap: 10px;
}
.delivery-electron__info p {
font-size: 14px;
}
}
/* q-a----------------------------------------------------------------------------------------------------- */
.q-a-electron {
display: flex;
flex-direction: column;
gap: 50px;
}
.q-a-electron h2 {
color: #266141;
font-size: 58px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 4.06px;
text-transform: uppercase;
margin: 0;
padding: 0 0 0 100px;
}
.q-a-electron .q-a-electron .q-a-accordion {
max-width: 100%;
width: 100%;
margin: 0 auto;
}
.q-a-electron .q-a-accordion-item {
border: 2px solid #000;
background-color: #FFF;
margin-bottom: 10px;
overflow: hidden;
padding: 34px 100px;
}
.q-a-electron .q-a-accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
gap: 70px;
}
.q-a-electron .q-a-accordion-title {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.q-a-electron .q-a-accordion-button {
display: flex;
flex-shrink: 0;
width: 60px;
height: 60px;
transition: transform 0.3s;
transform: rotate(180deg);
}
.q-a-electron .q-a-accordion-item.active .q-a-accordion-button {
transform: rotate(0deg);
}
.q-a-electron .q-a-accordion-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
}
.q-a-electron .q-a-accordion-content-inner {
padding: 40px 0 0 0;
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
max-width: 1110px;
width: 100%;
}
.q-a-electron .q-a-accordion-item.active .q-a-electron .q-a-accordion-content {
max-height: 500px;
padding: 0;
}
@media screen and (max-width: 1599px) {
.q-a-electron h2 {
padding: 0 0 0 50px;
}
.q-a-electron .q-a-accordion-item {
padding: 34px 50px;
}
.q-a-electron .q-a-accordion-content-inner {
padding: 30px 0 0 0;
max-width: 1040px;
}
}
@media screen and (max-width: 1344px) {
.q-a-electron {
gap: 40px;
}
.q-a-electron h2 {
font-size: 53px;
letter-spacing: 3.71px;
}
.q-a-electron .q-a-accordion-item {
padding: 34px 40px;
}
.q-a-electron .q-a-accordion-content-inner {
padding: 20px 0 0 0;
max-width: 910px;
}
}
@media screen and (max-width: 1199px) {
.q-a-electron {
gap: 30px;
}
.q-a-electron h2 {
font-size: 43px;
letter-spacing: 3.01px;
padding: 0 0 0 30px;
}
.q-a-electron .q-a-accordion-item {
padding: 20px 30px;
}
.q-a-electron .q-a-accordion-content-inner {
padding: 20px 0 0 0;
max-width: 767px;
font-size: 16px;
}
.q-a-electron .q-a-accordion-title {
font-size: 16px;
}
.q-a-electron .q-a-accordion-button {
width: 44px;
height: 44px;
}
}
@media screen and (max-width: 767px){
.q-a-electron {
gap: 26px;
align-items: center;
}
.q-a-electron h2 {
font-size: 37px;
letter-spacing: 2.59px;
padding: 0;
text-align: center;
}
}
@media screen and (max-width: 567px) {
.q-a-electron {
gap: 20px;
}
.q-a-electron .q-a-accordion-item {
padding: 20px;
}
.q-a-electron .q-a-accordion-header {
gap: 10px;
}
.q-a-electron .q-a-accordion-content-inner {
padding: 10px 0 0 0;
font-size: 14px;
}
.q-a-electron .q-a-accordion-title {
font-size: 14px;
}
}
/* video-------------------------------------------------------------------------- */
.video-electron {
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
padding: 150px 85px 50px 85px;
}
.video-electron__title {
display: flex;
flex-direction: column;
align-items: center;
}
.video-electron__title h4 {
color: #020A0A;
font-size: 58px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 6.38px;
text-transform: uppercase;
margin: 0;
}
.video-electron__title h2 {
color: #266141;
font-size: 139px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 22.24px;
text-transform: uppercase;
margin: 0;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.video-electron iframe {
width: 1280px;
height: 720px;
}
@media screen and (max-width: 1599px) {
.video-electron {
padding: 150px 50px 30px 50px;
}
.video-electron__title h4 {
font-size: 52px;
letter-spacing: 5.72px;
}
.video-electron__title h2 {
font-size: 125px;
letter-spacing: 20px;
}
.video-electron iframe {
width: 1150px;
height: 647px;
}
}
@media screen and (max-width: 1344px) {
.video-electron {
padding: 150px 40px 30px 40px;
gap: 40px;
}
.video-electron__title h4 {
font-size: 47px;
letter-spacing: 5.17px;
}
.video-electron__title h2 {
font-size: 113px;
letter-spacing: 18px;
}
.video-electron iframe {
width: 1040px;
height: 585px;
}
}
@media screen and (max-width: 1199px) {
.video-electron {
padding: 100px 40px 20px 40px;
gap: 30px;
}
.video-electron__title h4 {
font-size: 41px;
letter-spacing: 2.46px;
}
.video-electron__title h2 {
font-size: 97px;
letter-spacing: 9px;
}
.video-electron iframe {
width: 840px;
height: 472px;
}
}
@media screen and (max-width: 991px) {
.video-electron {
padding: 100px 40px 20px 40px;
}
.video-electron__title h4 {
font-size: 30px;
letter-spacing: 1.8px;
}
.video-electron__title h2 {
font-size: 71px;
letter-spacing: 7px;
}
.video-electron iframe {
width: 620px;
height: 348px;
}
}
@media screen and (max-width: 767px){
.video-electron {
padding: 80px 30px 10px 30px;
gap: 20px;
}
.video-electron__title h4 {
font-size: 24px;
letter-spacing: 0.24px;
}
.video-electron__title h2 {
font-size: 53px;
letter-spacing: 5px;
}
.video-electron iframe {
width: 100%;
height: 100%;
aspect-ratio: 2/1.13;
}
}
@media screen and (max-width: 567px) {
.video-electron {
padding: 60px 0 0 0;
align-items: start;
}
.video-electron__title {
text-align: start;
align-items: start;
}
.video-electron__title h4 {
font-size: 20px;
letter-spacing: normal;
}
.video-electron__title h2 {
font-size: 31px;
letter-spacing: 3px;
}
}
/* application-electron__update------------------------------------------------------------ */
.application-electron__update {
display: flex;
flex-direction: column;
gap: 50px;
margin: 100px 0 0 0;
}
.application-electron__update-info {
display: flex;
flex-direction: column;
gap: 30px;
}
.application-electron__update-info h4 {
color: #020A0A;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.04em;
margin: 0;
}
.application-electron__update-info p {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.application-electron__update a {
background-color: #266141;
border: none;
border-radius: 10px;
padding: 12px 30px;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 550px;
width: 100%;
}
.application-electron__update a span {
color: #FFF;
font-family: "Montserrat", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 130%;
letter-spacing: 0.03em;
}
.application-electron__update a svg {
width: 40px;
}
@media screen and (max-width: 1599px) {
.application-electron__update a {
max-width: 500px;
}
}
@media screen and (max-width: 1344px) {
}
@media screen and (max-width: 1199px) {
.application-electron__update {
gap: 40px;
margin: 80px 0 0 0;
}
.application-electron__update-info {
gap: 20px;
}
.application-electron__update-info h4 {
font-size: 20px;
}
.application-electron__update-info p {
font-size: 16px;
}
.application-electron__update a {
max-width: 385px;
}
.application-electron__update a span {
font-size: 18px;
}
}
@media screen and (max-width: 991px) {
.application-electron__update a {
max-width: 100%;
}
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 567px) {
.application-electron__update {
gap: 30px;
}
.application-electron__update-info h4 {
font-size: 16px;
}
.application-electron__update-info p {
font-size: 14px;
}
.application-electron__update a span {
font-size: 14px;
}
.application-electron__update a svg {
display: none;
}
@keyframes slideme {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}
.application-electron__update a {
overflow: hidden;
position: relative;
padding: 16px 30px;
}
.application-electron__update a:after {
content: "";
display: block;
width: 30px;
height: 200px;
margin-left: 60px;
background: #fff;
opacity: 0.2;
position: absolute;
left: -40px;
top: -100px;
z-index: 1;
transform: rotate(45deg);
transition: all 0.1s;
animation-name: slideme;
animation-duration: 3s;
animation-delay: 0.05s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
}
/* check------------------------------------------------------------------------------------------ */
.check-electron {
display: flex;
align-items: center;
justify-content: space-between;
padding: 100px 50px 0 50px;
}
.check-electron__info {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 650px;
width: 100%;
}
.check-electron__info h3 {
color: #266141;
font-size: 88px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0;
display: flex;
flex-direction: column;
}
.check-electron__info h3 span {
color: #22372C;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 110%;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.check-electron__info p {
color: #020A0A;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
.check-electron video {
max-width: 600px;
width: 100%;
}
@media screen and (max-width: 1599px) {
.check-electron__info {
max-width: 550px;
}
.check-electron__info h3 {
font-size: 75px;
}
.check-electron__info h3 span {
font-size: 40px;
}
.check-electron video {
max-width: 530px;
}
}
@media screen and (max-width: 1344px) {
.check-electron {
padding: 100px 40px 0 40px;
}
.check-electron__info {
max-width: 508px;
}
.check-electron__info h3 {
font-size: 68px;
}
.check-electron__info h3 span {
font-size: 32px;
}
.check-electron video {
max-width: 482px;
}
}
@media screen and (max-width: 1199px) {
.check-electron {
padding: 80px 0 0 0;
}
.check-electron__info {
max-width: 456px;
}
.check-electron__info h3 {
font-size: 62px;
}
.check-electron__info p {
font-size: 16px;
}
.check-electron video {
max-width: 424px;
}
}
@media screen and (max-width: 991px) {
.check-electron {
flex-direction: column-reverse;
gap: 30px;
}
.check-electron__info {
max-width: 500px;
gap: 20px;
}
.check-electron video {
max-width: 500px;
}
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 567px) {
.check-electron {
gap: 20px;
padding: 60px 20px 0 20px;
}
.check-electron__info {
gap: 10px;
}
.check-electron__info h3 {
font-size: 30px;
}
.check-electron__info h3 span {
font-size: 18px;
}
.check-electron__info p {
font-size: 14px;
}
}