@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
@import"https://fonts.cdnfonts.com/css/prohibition-test";
@import"https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&display=swap";
@import"https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap";
*
{
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-size: 14px;
color: #fff;
font-family: "Poppins", sans-serif;
letter-spacing: .4px
}
body
{
background: #000
}
.row
{
display: flex
}
.col
{
display: flex;
flex-direction: column
}
.btn
{
width: -moz-fit-content;
width: fit-content;
padding: 8px 4vmin;
border: 0;
border-radius: 999rem;
cursor: pointer;
font-weight: 700;
transition: .4s;
text-transform: uppercase;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
text-decoration: none
}
.btn:hover
{
opacity: .5
}
a
{
text-decoration: none
}
.container
{
width: 100%;
min-height: 100vh;
position: relative
}
.header_main_wrap
{
width: 100%;
position: relative;
z-index: 99
}
.header_main_wrap::before
{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6509803922) 10%, rgba(0, 0, 0, 0.168627451) 60%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%)
}
.header_main_wrap .element
{
position: absolute;
width: 20%;
left: 0
}
.header_main_wrap .line_element
{
position: absolute;
width: 20%;
right: 0
}
.header_page
{
background: #1b1b1b
}
.page_main_wrap
{
overflow: hidden
}
.page_main_wrap .page_img
{
width: 100%;
min-height: 22vh;
-o-object-fit: cover;
object-fit: cover
}
.page_main_wrap .page_title_col
{
width: -moz-fit-content;
width: fit-content;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
align-items: center;
gap: 10px
}
.page_main_wrap .page_title_col .page_title
{
font-size: 5vmin;
font-size: 34px;
font-family: "Poppins", sans-serif
}
.page_main_wrap .page_title_col p
{
font-size: 14px;
text-align: center;
color: rgba(255, 255, 255, .7);
margin-top: 10px
}
.page_main_wrap .page_title_col .link_row
{
display: none;
width: -moz-fit-content;
width: fit-content;
justify-content: center;
align-items: center;
gap: 10px
}
.page_main_wrap .page_title_col .link_row .link
{
color: #fff;
transition: .4s
}
.page_main_wrap .page_title_col .link_row .link:hover
{
color: red
}
.page_main_wrap .page_title_col .link_row .page
{
cursor: default
}
.page_main_wrap::after
{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
opacity: .6;
background-image: linear-gradient(270.07deg, #981700 0.07%, #00060C 99.95%)
}
header
{
width: 100%;
position: sticky;
top: 0;
z-index: 999999999;
transition: .4s
}
header .header_wrap
{
width: 100%;
max-width: 1400px;
padding: 15px 3vmin;
margin: 0 auto;
position: relative
}
header .header_wrap .header_top
{
width: 100%;
justify-content: space-between;
align-items: center;
gap: 15px
}
header .header_wrap .header_top .social_row
{
width: 50%;
gap: 10px;
justify-items: flex-start;
align-items: center
}
header .header_wrap .header_top .social_row .social
{
width: 24px
}
header .header_wrap .header_top .social_row .social svg
{
width: 100%
}
header .header_wrap .header_top .social_row .social svg path
{
fill: #fff
}
header .header_wrap .header_top .logo
{
width: 35vmin;
max-width: 220px;
display: flex;
flex-direction: column;
align-items: center
}
header .header_wrap .header_top .logo img
{
width: 100%
}
header .header_wrap .header_top .logo .logo img
{
max-width: 100px;
margin-bottom: 10px
}
header .header_wrap .header_top .logo .logo-text
{
font-size: clamp(9px, 1.5vmin, 11px);
color: #fff;
text-align: center;
padding-top: 1vw
}
header .header_wrap .header_top .logo .logo-text a
{
font-size: clamp(9px, 1.7vmin, 14px);
}
header .header_wrap .header_top .logo .logo-link
{
text-decoration: none
}
header .header_wrap .header_top .logo .logo-link:hover
{
text-decoration: underline
}
header .header_wrap .header_top .header_widget_row
{
width: 50%;
justify-content: flex-end;
align-items: center;
gap: 10px
}
header .header_wrap .header_top .header_widget_row .btn
{
background: linear-gradient(180deg, #BEBEBE, #fff);
color: #707070
}
header .header_wrap .header_top .header_widget_row .lang_btn
{
width: -moz-fit-content;
width: fit-content;
gap: 5px;
align-items: center;
background: #3b3b3b;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .6);
padding: 6px 10px;
border-radius: 999rem;
position: relative;
cursor: pointer
}
header .header_wrap .header_top .header_widget_row .lang_btn img
{
width: 24px
}
header .header_wrap .header_top .header_widget_row .lang_btn .lang_dropdown
{
position: absolute;
top: 140%;
opacity: 0;
visibility: hidden;
transition: .2s;
width: 260px;
background: rgba(0, 0, 0, .7);
right: 0;
pointer-events: none;
padding: 8px;
z-index: 999;
border-radius: 10px
}
header .header_wrap .header_top .header_widget_row .lang_btn .lang_dropdown .nav_lang_row
{
width: 100%;
padding: 12px 20px;
align-items: center;
gap: 10px;
position: relative;
z-index: 99;
cursor: pointer;
transition: .4s;
border-radius: 10px
}
header .header_wrap .header_top .header_widget_row .lang_btn .lang_dropdown .nav_lang_row .line
{
width: 20px;
height: .6mm;
background: red;
width: 0;
transition: .2s
}
header .header_wrap .header_top .header_widget_row .lang_btn .lang_dropdown .nav_lang_row img
{
width: 20px
}
header .header_wrap .header_top .header_widget_row .lang_btn .lang_dropdown .nav_lang_row span
{
color: #fff;
font-weight: 500
}
header .header_wrap .header_top .header_widget_row .lang_btn .lang_dropdown .nav_lang_row:hover
{
background: rgba(95, 95, 95, .431372549)
}
header .header_wrap .header_top .header_widget_row .lang_btn .lang_dropdown .nav_lang_row:hover .line
{
width: 20px
}
header .header_wrap .header_top .header_widget_row .lang_btn:hover .lang_dropdown
{
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: all
}
header .header_wrap .header_nav
{
width: 100%;
margin: 0 auto;
gap: 4vmin;
justify-content: center;
align-items: center;
padding-top: 3vmin;
flex-wrap: wrap
}
header .header_wrap .header_nav .nav
{
width: -moz-fit-content;
width: fit-content;
text-align: center;
color: #fff;
font-size: 14px;
text-transform: uppercase;
padding: 0 10px;
position: relative;
padding-bottom: 5px;
cursor: pointer
}
header .header_wrap .header_nav .nav::after
{
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 2px;
background: red;
transition: .4s
}
header .header_wrap .header_nav .nav:hover:after
{
width: 100%
}
header .header_wrap .header_nav .active:after
{
width: 100%
}
header .header_wrap .header_nav .nav_dropdwon
{
display: none !important;
visibility: hidden;
opacity: 0;
width: 95vw;
max-width: 1400px;
margin: 0 auto;
position: fixed;
top: 111px;
left: 50%;
transform: translateX(-50%);
padding: 20px;
background: #fff;
border-radius: 15px;
transition: .4s;
pointer-events: none
}
header .header_wrap .header_nav .nav_dropdwon .nav_grid
{
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 15px
}
header .header_wrap .header_nav .nav_dropdwon .nav_grid .nav_block
{
width: 100%;
align-items: stretch;
border-bottom: 2px solid red;
gap: 15px
}
header .header_wrap .header_nav .nav_dropdwon .nav_grid .nav_block img
{
width: 50%;
margin: auto;
max-width: 140px
}
header .header_wrap .header_nav .nav_dropdwon .nav_grid .nav_block .nav_infor
{
flex: 1;
justify-content: center;
align-items: flex-start;
gap: 20px
}
header .header_wrap .header_nav .nav_dropdwon .nav_grid .nav_block .nav_infor .nav_title
{
color: red;
font-family: "Poppins", sans-serif
}
header .header_wrap .header_nav .nav_dropdwon .nav_grid .nav_block .nav_infor p
{
font-size: 12px;
color: #000;
text-align: left
}
header .header_wrap .header_nav .nav:hover .nav_dropdwon
{
opacity: 1;
visibility: visible;
pointer-events: all
}
.header_sticky
{
background: #1b1b1b;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .6)
}
.banner_bg
{
width: 100%;
height: 100%;
max-width: 1400px;
margin: 0 auto;
height: 61vh;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0%)
}
.bannerSwiper
{
width: 100%;
max-width: 1400px
}
.bannerSwiper .swiper-wrapper
{
transition: 1.2s
}
.bannerSwiper .swiper-slide
{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
overflow: hidden
}
.bannerSwiper .swiper-slide .left_slide
{
flex: 1;
gap: 30px;
padding: 7vmin 3vmin;
min-width: 220px
}
.bannerSwiper .swiper-slide .left_slide .title
{
width: 100%;
gap: 10px;
flex-wrap: wrap;
cursor: default
}
.bannerSwiper .swiper-slide .left_slide .title .left
{
color: #fff;
font-size: clamp(32px, 3vw, 44px);
font-family: "Poppins", sans-serif;
line-height: 1;
font-weight: 700;
word-wrap: break-word;
word-break: break-word;
flex-basis: 100%;
align-items: center
}
.bannerSwiper .swiper-slide .left_slide .title .left img
{
width: 16vmin;
min-width: 125px;
max-width: 190px;
margin-right: 10px
}
.bannerSwiper .swiper-slide .left_slide .title .right
{
line-height: 1;
font-family: "Poppins", sans-serif;
color: rgba(0, 0, 0, 0);
font-weight: 700;
font-size: clamp(32px, 3vw, 50px);
-webkit-text-stroke: 1px #fff;
word-wrap: break-word;
word-break: break-word;
flex-basis: 100%
}
.bannerSwiper .swiper-slide .left_slide .title .left_sm
{
font-size: clamp(20px, 2vw, 30px)
}
.bannerSwiper .swiper-slide .left_slide p
{
color: #fff;
max-width: 520px;
width: 100%;
text-align: left;
font-size: clamp(14px, 1.6vw, 15px);
letter-spacing: 1px;
line-height: 30px;
font-weight: 300;
cursor: default
}
.bannerSwiper .swiper-slide .right_slide
{
flex: 1;
max-width: 480px;
min-width: 220px;
position: relative;
margin-top: auto
}
.bannerSwiper .swiper-slide .right_slide img
{
width: 100%;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.6))
}
.bannerSwiper .swiper-slide .right_slide .btn_wrap
{
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
justify-content: center;
align-items: center;
gap: 10px
}
.bannerSwiper .swiper-slide .right_slide .btn_wrap .btn
{
max-width: 160px
}
.bannerSwiper .swiper-slide .right_slide .btn_wrap .btn1
{
background: linear-gradient(180deg, #BEBEBE, #fff);
color: #707070;
width: 50%;
text-align: center
}
.bannerSwiper .swiper-slide .right_slide .btn_wrap .btn2
{
background: linear-gradient(180deg, #990000, #6B0707);
color: #fff;
width: 50%;
text-align: center
}
.bannerSwiper .swiper-slide .slide_in_bottom
{
animation: slit-in-horizontal .8s ease-out both;
animation-delay: .8s
}
.bannerSwiper .swiper-slide .text_ani .left
{
animation: text-left 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}
.bannerSwiper .swiper-slide .text_ani .right
{
animation: text-right 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}
.bannerSwiper .swiper-slide .text_ani p
{
animation: fade-in-fwd .8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation-delay: .6s
}
.section
{
background: #363638;
width: 100%;
z-index: 20;
position: relative;
display: flex;
justify-content: center;
align-items: center
}
.section .content
{
width: 100%;
padding: 35px 5vmin;
max-width: 1400px;
margin: 0 auto
}
.section .content .section_title
{
width: -moz-fit-content;
width: fit-content;
font-family: "Poppins", sans-serif;
font-size: 24px;
margin-bottom: 30px;
cursor: default;
font-weight: 600;
text-shadow: 3px 6px 4px rgba(0, 0, 0, .3);
color: red
}
.section .content .title_center
{
text-align: center;
width: 100%
}
.section .content .title_right
{
width: 100%;
text-align: end;
text-shadow: 3px 6px 4px rgba(0, 0, 0, .3);
color: #fff
}
.section .content .title_normal
{
color: #fff
}
.section .content .title_red
{
color: red
}
.bg
{
width: 100%;
overflow: hidden;
height: 70vh;
position: fixed;
top: 70%;
transform: translateY(-50%);
left: 0;
z-index: 9;
min-width: 1200px
}
.bg::before
{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10vh;
background: linear-gradient(0deg, rgba(0, 0, 0, 0), #000);
z-index: 99
}
.bg #canvas
{
cursor: crosshair;
z-index: 2;
position: absolute;
top: 0;
left: 0;
min-width: 155vmin
}
.bg #overlay
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
.bg #bg_glow
{
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
.bg #info
{
z-index: 4;
position: absolute;
color: #fff;
top: 0px;
left: 0px;
background: rgba(60, 60, 60, .6);
padding: 5px
}
.bg #overlay:hover
{
cursor: pointer
}
.bg #fps
{
position: absolute;
top: 0px;
right: 0px;
z-index: 5
}
.section_2
{
background: rgba(0, 0, 0, .8509803922);
position: relative;
min-height: 30vh
}
.section_2 .content
{
width: 100%
}
.section_2 .bg
{
width: 100%;
height: 100%;
position: absolute;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
z-index: 1
}
.section_2 .content
{
z-index: 3;
position: relative
}
.product_main
{
width: 100%;
gap: 10px;
overflow: auto
}
.product_main .product
{
width: 33%;
min-width: 280px;
position: relative;
border-radius: 20px;
overflow: hidden
}
.product_main .product .pro_wrap
{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 75%;
padding: 0 4vmin
}
.product_main .product span
{
color: red;
font-family: "Poppins", sans-serif;
font-size: clamp(15px, 2vw, 21px);
transition: .8s;
font-weight: 400;
cursor: default;
transition: color .2s ease, all .4s;
transform: translateY(0px)
}
.product_main .product p
{
width: 100%;
font-size: 1.3vmin;
cursor: default;
transition: .6s;
display: none;
opacity: 0;
animation: slide-in-right .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}
.product_main .product .pro_bg
{
width: 100%;
transition: .6s;
transform-origin: right
}
.product_main .product .pro_cha
{
width: 100%;
position: absolute;
bottom: 0;
right: 0;
transition: .4s
}
.product_main .product:hover span
{
color: red;
transform: translateY(-10px)
}
.product_main .product:hover p
{
display: flex
}
.product_main .product:hover .pro_bg
{
transform: scale(1.7)
}
.product_main .product:hover .pro_cha
{
opacity: .4
}
.productSwiper
{
width: 100%
}
.productSwiper .product
{
width: 100%;
position: relative;
border-radius: 20px;
overflow: hidden
}
.productSwiper .product .pro_wrap
{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 75%;
padding: 0 2.4vmin
}
.productSwiper .product span
{
color: red;
font-family: "Poppins", sans-serif;
font-size: 16px;
transition: .8s;
font-weight: 800;
cursor: default;
transition: color .2s ease, all .4s;
transform: translateY(0px)
}
.productSwiper .product p
{
width: 100%;
font-size: 1.3vmin;
cursor: default;
transition: .6s;
display: none;
opacity: 0;
animation: slide-in-right .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}
.productSwiper .product .pro_bg
{
width: 100%;
transition: .6s;
transform-origin: right
}
.productSwiper .product .pro_cha
{
width: 100%;
position: absolute;
bottom: 0;
right: 0;
transition: .4s
}
.productSwiper .product:hover span
{
color: red;
transform: translateY(-10px)
}
.productSwiper .product:hover p
{
display: flex
}
.productSwiper .product:hover .pro_bg
{
transform: scale(1.7)
}
.productSwiper .product:hover .pro_cha
{
opacity: .4
}
.propage_wrap
{
width: 100%;
max-width: 1000px;
margin: 0 auto;
position: relative;
padding: 4vh 0
}
.propage_wrap::after
{
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: linear-gradient(90deg, #1b1b1b, rgba(27, 27, 27, 0));
z-index: 9999;
pointer-events: none
}
.propage_wrap::before
{
content: "";
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 100%;
background: linear-gradient(270deg, #1b1b1b, rgba(27, 27, 27, 0));
z-index: 9999;
pointer-events: none
}
.propage_wrap h1
{
width: 100%;
text-align: center;
margin-bottom: 30px;
font-size: 20px;
font-weight: 600;
font-family: "Poppins", sans-serif;
letter-spacing: .5px;
color: red;
z-index: 99999
}
.propage_wrap .propageSwiper
{
width: 100%
}
.propage_wrap .propageSwiper .swiper-slide
{
width: 100%
}
.propage_wrap .propageSwiper .swiper-slide a
{
width: 100%;
display: flex;
justify-content: center;
align-items: center
}
.propage_wrap .propageSwiper .swiper-slide a img
{
height: 8vmin;
height: 50px;
filter: grayscale(1);
transition: .4s
}
.propage_wrap .propageSwiper .swiper-slide a:hover img
{
filter: none
}
.process_row
{
width: 100%;
margin-top: 20px
}
.process_row .process_block
{
flex: 1;
align-items: center
}
.process_row .process_block .row
{
color: red;
font-size: 38px;
font-weight: 700;
align-items: center
}
.process_row .process_block span
{
color: red;
font-size: 38px;
font-weight: 700
}
.process_row .process_block p
{
font-size: 12px;
color: gray
}
.svg_1
{
width: 3vmin;
position: absolute;
z-index: 999999;
animation: fade_floating_1 1.4s both, floating_1 6s infinite both
}
.svg_1 svg
{
width: 100%;
filter: hue-rotate(60deg)
}
.svg_2
{
width: 6vmin;
position: absolute;
z-index: 999999;
animation: fade_floating_2 1.4s both, floating_2 6s infinite both
}
.svg_2 svg
{
width: 100%;
filter: hue-rotate(60deg)
}
.svg_3
{
width: 4vmin;
position: absolute;
z-index: 999999;
animation: fade_floating_3 1.4s both, floating_3 6s infinite both
}
.svg_3 svg
{
width: 100%;
filter: hue-rotate(60deg)
}
.svg_4
{
width: 3vmin;
position: absolute;
z-index: 999999;
animation: fade_floating_4 1.4s both, floating_4 6s infinite both
}
.svg_4 svg
{
width: 100%;
filter: hue-rotate(60deg)
}
.provi_row
{
width: 100%;
justify-content: space-between;
align-items: center;
gap: 30px;
flex-wrap: wrap
}
.provi_row .col
{
flex: 1;
min-width: 300px
}
.provi_row .provi_left
{
flex: 1;
max-width: 620px
}
.provi_row .provider_wrap
{
width: 100%;
min-width: 300px;
max-width: 600px;
margin: 0 auto
}
.provi_row .provider_wrap .proSwiper
{
width: 100%
}
.provi_row .provider_wrap .proSwiper .swiper-wrapper
{
transition-timing-function: linear !important
}
.provi_row .provider_wrap .proSwiper .swiper-slide
{
width: 100%;
transform: translate3d(0, 0, 0);
will-change: transform
}
.provi_row .provider_wrap .proSwiper .swiper-slide img
{
width: 100%;
max-width: 100px
}
.provi_row .provider_wrap .proSwiper .swiper-slide.swiper-slide-blank
{
display: none !important
}
.provi_row .provider_wrap .splide
{
width: 100%
}
.provi_row .provider_wrap .splide .splide__slide
{
margin-right: 15px
}
.provi_row .provider_wrap .splide .img_block
{
width: 100%;
padding: 14px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(28, 28, 43, .2);
box-shadow: 0px 0px 8px inset rgba(0, 0, 0, .6);
border-radius: 10px
}
.provi_row .provider_wrap .splide .img_block img
{
width: 90%
}
.infor_row
{
width: 100%;
justify-content: space-between;
align-items: center;
gap: 30px;
flex-wrap: wrap
}
.infor_row .infor_grid
{
width: 100%;
margin-right: auto;
max-width: 520px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px
}
.infor_row .infor_grid .infor_block
{
width: 100%;
padding: 20px;
border-radius: 8px;
background: #fff;
align-items: center;
gap: 10px
}
.infor_row .infor_grid .infor_block span
{
font-family: "Poppins", sans-serif;
font-size: 4vmin;
font-size: 32px;
color: #000;
line-height: 1;
transform: translateY(-2px);
min-width: 50px
}
.infor_row .infor_grid .infor_block p
{
color: #000;
text-align: right;
flex: 1;
font-size: 1.3vmin;
font-size: 11px;
font-weight: 500;
line-height: 1
}
.infor_row .infor_grid .infor_block .text_red
{
color: red
}
.infor_row .col
{
max-width: 620px;
flex: 1;
margin-left: auto;
min-width: 300px
}
.infor_row .infor_right
{
flex: 1;
text-align: right
}
.infor_row a
{
margin-top: 20px;
margin-left: auto;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 10px 4vmin;
background: linear-gradient(180deg, #FF3E3E, #8A0000);
border-radius: 10px
}
form
{
flex: 1;
background: rgba(255, 255, 255, .3);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
position: relative;
padding-bottom: 40px
}
form .form_title
{
width: 100%;
text-align: center;
position: relative;
padding-bottom: 15px;
margin-bottom: 15px
}
form .form_title::after
{
content: "";
width: 80%;
height: 1px;
background: #fff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
form .form_title::before
{
content: "";
position: absolute;
bottom: -3px;
left: 50%;
width: 25px;
height: 6px;
background: #fff;
transform: translateX(-50%)
}
form .form_grid
{
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 10px;
padding: 10px 0
}
form .form_grid .textbox_wrap
{
width: 100%
}
form .form_grid .textbox_wrap input
{
width: 100%;
padding: 10px 15px;
border-radius: 8px;
border: 0;
outline: 0;
font-size: 14px;
color: #707070
}
form .form_grid .textbox_wrap .iti
{
width: 100%;
color: #707070
}
form .form_grid .textbox_wrap .iti .iti__selected-dial-code
{
color: #707070
}
form .form_grid .textbox_wrap .iti .iti__country-name
{
color: #707070
}
form .btn_wrap
{
width: 100%;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: -20px;
left: 0;
gap: 15px;
padding: 0 5vmin
}
form .btn_wrap .btn
{
border-radius: 10px;
align-items: center;
gap: 8px;
padding: 10px 4vmin
}
form .btn_wrap .btn_1
{
background: linear-gradient(180deg, #3EFF71, #098A00)
}
form .btn_wrap .btn_2
{
background: linear-gradient(180deg, #FF3E3E, #8A0000)
}
.iti__dropdown-content
{
z-index: 99999 !important
}
.iti--fullscreen-popup.iti--container
{
z-index: 99999 !important;
justify-content: center !important
}
.iti--fullscreen-popup.iti--container .iti__dropdown-content
{
max-height: 70%
}
.iti--fullscreen-popup.iti--container .iti__country-name
{
color: #707070
}
.iti__search-input
{
color: #707070
}
.sol_grid
{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px
}
.sol_grid .sol_main_block
{
width: 100%;
gap: 10px;
display: flex;
flex-direction: column
}
.sol_grid .sol_main_block .sol_title
{
color: red;
font-size: 20px;
font-family: "Poppins", sans-serif
}
.sol_grid .sol_main_block .sol_block
{
width: 100%;
position: relative;
display: flex;
border-radius: 20px;
overflow: hidden
}
.sol_grid .sol_main_block .sol_block img
{
width: 100%
}
.sol_grid .sol_main_block .sol_block .sol_icon
{
display: none;
width: 20%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.sol_grid .sol_main_block .sol_block .sol_icon img
{
width: 100%;
filter: brightness(0) invert(1);
filter: none;
transition: .4s
}
.sol_grid .sol_main_block .sol_block:hover .sol_bg
{
top: 0
}
.sol_grid .sol_main_block .sol_block:hover .sol_icon img
{
transform: scale(1.1);
opacity: 0;
transition: .6s
}
.sol_grid .sol_main_block .sol_block .sol_bg
{
width: 100%;
background: rgba(0, 0, 0, .5);
background: rgba(0, 0, 0, .1);
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
transition: .4s
}
.sol_grid .sol_main_block .sol_block .sol_bg span
{
width: 80%;
text-align: center;
font-size: 12px
}
footer
{
width: 100%;
background: #000;
z-index: 10;
position: relative;
cursor: default
}
footer .footer_wrap
{
width: 100%;
padding: 35px 5vmin;
max-width: 1400px;
margin: auto
}
footer .footer_wrap .footer_left
{
flex: 1;
align-items: flex-start;
gap: 25px
}
footer .footer_wrap .footer_left .logo
{
width: 18vmin;
min-width: 140px
}
footer .footer_wrap .footer_left .logo img
{
width: 100%
}
footer .footer_wrap .footer_left p
{
font-size: 12px;
letter-spacing: 1px;
font-weight: 300;
max-width: 600px
}
footer .footer_wrap .footer_right
{
flex: 1;
gap: 25px;
align-items: flex-end
}
footer .footer_wrap .footer_right .social_row
{
width: -moz-fit-content;
width: fit-content;
gap: 10px;
justify-items: flex-end;
align-items: center
}
footer .footer_wrap .footer_right .social_row .social
{
width: 24px
}
footer .footer_wrap .footer_right .social_row .social svg
{
width: 100%
}
footer .footer_wrap .footer_right .social_row .social svg path
{
fill: #fff
}
footer .footer_wrap .footer_right .footer_link_row
{
gap: 15px
}
footer .footer_wrap .footer_right .footer_link_row a
{
font-size: 12px;
text-decoration: none
}
footer .footer_wrap .footer_right .copyright
{
width: 100%;
text-align: right;
font-size: 12px
}
.login_con
{
width: 100%
}
.login_con .login_left
{
width: 60%;
height: 100vh;
display: flex;
position: relative;
z-index: 9
}
.login_con .login_left video
{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
position: absolute;
top: 0;
left: 0
}
.login_con .login_left .login_left_infor
{
width: 100%;
height: 100%;
padding: 70px calc(9vw + 70px) 70px 70px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2vw;
z-index: 9
}
.login_con .login_left .login_left_infor .logo
{
width: 65%;
max-width: 260px;
display: flex;
margin-bottom: 3vw
}
.login_con .login_left .login_left_infor .logo img
{
width: 100%
}
.login_con .login_left .login_left_infor .login_slogon
{
color: #fff;
margin-bottom: 10px;
font-size: 52px;
font-weight: 700;
width: 100%
}
.login_con .login_left .login_left_infor .login_desc
{
font-size: 16px;
line-height: 1.7;
font-weight: 300;
color: #fff
}
.login_con .login_left .login_left_infor .login_widget_row
{
width: 100%;
justify-content: space-between;
align-items: center;
gap: 10px
}
.login_con .login_left .login_left_infor .login_widget_row .social_row
{
flex: 1;
justify-content: flex-start;
align-items: center;
gap: 10px
}
.login_con .login_left .login_left_infor .login_widget_row .social_row a
{
width: 30px;
height: 30px;
background: red;
border-radius: 999rem;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none
}
.login_con .login_left .login_left_infor .login_widget_row .social_row a svg
{
fill: #fff
}
.login_con .login_left .login_left_infor .login_widget_row .social_row a svg path
{
transition: .4s
}
.login_con .login_left .login_left_infor .login_widget_row p
{
color: #fff;
font-size: 12px
}
.login_con .login_form_wrap
{
width: 40%;
background: #1c222c;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
z-index: 9
}
.login_con .login_form_wrap .logo
{
width: 55%;
max-width: 260px;
display: flex;
margin-bottom: 3vw;
align-self: flex-start;
z-index: 9;
display: none
}
.login_con .login_form_wrap .logo img
{
width: 100%
}
.login_con .login_form_wrap .login_form
{
width: 95%;
margin-top: 30px;
margin-bottom: 30px;
position: relative;
z-index: 1;
margin-left: -9vw;
max-width: 770px;
background: #363638;
padding: 70px;
border-radius: 70px;
box-shadow: 0 0 100px 0 rgba(0, 0, 0, .473);
display: flex;
flex-direction: column;
animation: slit-in-horizontal .8s ease-out both;
animation-delay: .1s
}
.login_con .login_form_wrap .login_form .back_link
{
color: red;
font-size: 12px;
font-weight: 600;
gap: 10px;
align-items: center;
margin-bottom: 40px;
margin-left: auto
}
.login_con .login_form_wrap .login_form .back_link i
{
color: red;
transition: .4s
}
.login_con .login_form_wrap .login_form .back_link:hover i
{
transform: translateX(-10px)
}
.login_con .login_form_wrap .login_form .title
{
margin-bottom: 30px;
font-size: 30px;
font-weight: 600;
color: var(--txt_color)
}
.login_con .login_form_wrap .login_form .form
{
width: 100%;
display: flex;
flex-direction: column
}
.login_con .login_form_wrap .login_form .form .form_item
{
width: 100%;
position: relative;
margin-bottom: 25px
}
.login_con .login_form_wrap .login_form .form .form_item input
{
display: block;
width: 100%;
background: rgba(0, 0, 0, 0);
border: 1px solid #787878;
transition: all .3s ease;
border-radius: 999rem;
outline: 0;
font-size: 1rem;
font-weight: 400;
padding: 15px 15px 15px 30px;
color: var(--txt_color)
}
.login_con .login_form_wrap .login_form .form .form_item input:focus
{
border-color: red
}
.login_con .login_form_wrap .login_form .form .form_item label
{
position: absolute;
cursor: text;
z-index: 2;
top: 16px;
left: 15px;
font-size: 1rem;
font-weight: 400;
background: #363638;
padding: 0 10px;
color: #999;
transition: all .3s ease
}
.login_con .login_form_wrap .login_form .form_item input:focus + label,
.login_con .login_form_wrap .login_form .form_item input:valid + label
{
font-size: 14px;
top: -10px
}
.login_con .login_form_wrap .login_form .form_item input:focus + label
{
color: red
}
.login_con .login_form_wrap .login_form button
{
width: -moz-fit-content;
width: fit-content;
font-size: 13px;
font-weight: 700;
line-height: 14px;
padding: 12px 24px;
background: #d61421;
color: #fff;
border-radius: 10px;
transition: .4s;
cursor: pointer;
border: 0;
margin-left: auto;
margin-top: 30px
}
.contact_section
{
width: 100%;
position: relative;
background: #121519;
overflow: hidden;
padding: 1% 0 !important;
z-index: 999
}
.contact_section svg.contactbg
{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: -1
}
.contact_section .wave
{
animation: wave 3s linear;
animation-iteration-count: infinite;
fill: red
}
.contact_section #wave2
{
animation-duration: 5s;
animation-direction: reverse;
opacity: .6
}
.contact_section #wave3
{
animation-duration: 7s;
opacity: .3
}
.contact_section .contact_us_con
{
width: 100%;
max-width: 1400px;
margin: auto;
height: 550px
}
.contact_section .contact_us_con .contact_us_wrap
{
width: 100%;
height: 100%;
border-radius: 10px;
gap: 4%;
align-items: stretch
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form
{
width: 50%;
height: 100%;
padding: 3%;
justify-content: center;
align-items: flex-start;
background: linear-gradient(0deg, #161616 3%, #0a0a0a);
border-radius: 10px;
box-shadow: 0px 0px 4px #101010
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .alert_block
{
width: 100%;
padding: .8rem 1rem;
background: #282828;
border-radius: 10px;
align-items: center;
gap: 20px;
font-size: 12px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, .6);
margin-bottom: 20px;
color: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .alert_block i
{
font-size: 15px;
color: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_con
{
width: 100%;
justify-content: center;
align-items: center;
gap: 10px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_wrap
{
width: 100%;
margin-bottom: 20px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_wrap .title
{
color: #fff;
margin-bottom: 5px;
font-size: 14px;
font-weight: 600
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_wrap .title span
{
color: red
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_wrap input
{
width: 100%;
padding: 14px;
color: gray;
background: #282828;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 10px;
transition: .4s;
box-shadow: 0px 0px 3px rgba(0, 0, 0, .6)
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_wrap input:focus
{
outline: 0;
border: 1px solid gray
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_wrap textarea
{
width: 100%;
padding: 8px;
resize: none;
color: gray;
background: #282828;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 10px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, .6);
transition: .4s
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .textbox_wrap textarea:focus
{
outline: 0;
border: 1px solid gray
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .btn_wrap
{
width: 100%;
margin-top: auto
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .btn_wrap .btn_submit
{
width: 30%;
padding: 4px;
border: 0;
border-radius: 5px;
cursor: pointer;
box-shadow: rgba(151, 65, 252, .2) 0 15px 30px -5px;
background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB)
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .btn_wrap .btn_submit p
{
width: 100%;
height: 100%;
padding: 10px;
background-color: #05062d;
border-radius: 5px;
transition: .4s;
letter-spacing: .7px;
justify-content: center;
align-items: center;
gap: 5px;
color: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .btn_wrap .btn_submit p i
{
transition: .4s;
color: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .btn_wrap .btn_submit:hover p
{
background: none
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .btn_wrap .btn_submit:hover p i
{
transform: translateX(5px)
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block
{
flex: 1;
height: 100%;
background: linear-gradient(0deg, #060606 3%, #181818);
border-radius: 10px;
box-shadow: 0px 0px 4px #101010;
position: relative;
z-index: 4
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block h1
{
font-weight: 600;
font-size: 24px;
padding: 32px 30px 20px;
color: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block P
{
font-weight: 300;
font-size: 17px;
line-height: 21px;
padding: 10px 30px;
color: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .social_row
{
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 10px;
margin: 15px 0;
padding: 0px 30px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .social_row a
{
width: 30px;
height: 30px;
background: red;
border-radius: 999rem;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .social_row a svg
{
fill: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .social_row a svg path
{
transition: .4s
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .email_row
{
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 10px;
margin: 15px 0;
padding: 0px 30px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .email_row .icon
{
width: 30px;
height: 30px;
background: red;
border-radius: 999rem;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .email_row .icon svg
{
fill: #fff
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .email_row .icon svg path
{
transition: .4s
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .email_row p
{
font-size: 16px;
padding: 10px;
letter-spacing: .4px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .img_block
{
width: 100%;
position: absolute;
right: 0;
bottom: 0;
z-index: -1
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .img_block img
{
width: 100%;
height: 30vh;
border-radius: 0 0 10px 10px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center right;
object-position: center right
}
.login_cover
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: brightness(0.8);
backdrop-filter: brightness(0.8);
z-index: 1
}
.infor_wrap
{
width: 100%;
z-index: 9999;
position: relative;
background: #242424
}
.infor_wrap .infor_banner_wrap
{
width: 100%;
position: relative
}
.infor_wrap .infor_banner_wrap .infor_bg
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.infor_wrap .infor_banner_wrap .infor_block
{
width: 85%;
max-width: 1240px;
margin: 0 auto;
z-index: 9;
padding: 40px 0;
gap: 40px
}
.infor_wrap .infor_banner_wrap .infor_block .infor_img
{
width: 40%;
justify-content: flex-end;
align-items: center
}
.infor_wrap .infor_banner_wrap .infor_block .infor_img img
{
width: 70%;
max-width: 500px
}
.infor_wrap .infor_banner_wrap .infor_block .infor_desc_col
{
flex: 1;
justify-content: center;
align-items: flex-start;
gap: 5px
}
.infor_wrap .infor_banner_wrap .infor_block .infor_desc_col .pro_logo
{
width: 60%;
max-width: 260px
}
.infor_wrap .infor_banner_wrap .infor_block .infor_desc_col .pro_logo img
{
width: 100%
}
.infor_wrap .infor_banner_wrap .infor_block .infor_desc_col .sm_title
{
font-size: 46px;
font-weight: 600;
color: #fff;
letter-spacing: .3px
}
.infor_wrap .infor_banner_wrap .infor_block .infor_desc_col .fac_title
{
font-size: 18px;
font-weight: 600;
color: red
}
.infor_wrap .infor_banner_wrap .infor_block .infor_desc_col ul
{
padding: 0 18px
}
.infor_wrap .infor_banner_wrap .infor_block .infor_desc_col ul li
{
font-size: 14px;
padding-bottom: 7px;
word-wrap: normal;
word-break: keep-all;
font-weight: 300;
letter-spacing: .4px;
color: #fff
}
.infor_wrap .infor_contact
{
width: 100%;
align-items: center;
padding: 50px 0;
background: #121519
}
.infor_wrap .infor_contact p
{
width: 85%;
text-align: center;
font-size: 26px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 2px;
max-width: 700px;
color: #fff
}
.infor_wrap .infor_contact p span
{
font-weight: 700;
color: red;
font-size: 28px
}
.infor_wrap .infor_contact .contact_button
{
width: -moz-fit-content;
width: fit-content;
font-size: 13px;
font-weight: 700;
height: 40px;
line-height: 14px;
padding: 0 20px;
background: red;
color: #fff;
border: 0;
border-radius: 10px;
transition: .4s;
cursor: pointer;
align-items: center;
margin-top: 30px
}
.infor_wrap .infor_dif_wrap
{
width: 95%;
max-width: 1240px;
margin: 0 auto;
padding: 50px 0;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 20px
}
.infor_wrap .infor_dif_wrap .infor_dif_block
{
flex: 1;
align-items: center;
min-width: 140px
}
.infor_wrap .infor_dif_wrap .infor_dif_block .icon
{
width: 80px;
height: 80px;
background: #1d1d1d;
padding: 18px;
border-radius: 999rem;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .2)
}
.infor_wrap .infor_dif_wrap .infor_dif_block .icon img
{
width: 100%
}
.infor_wrap .infor_dif_wrap .infor_dif_block .dif_title
{
width: 100%;
text-align: center;
font-size: 16px;
letter-spacing: 1px;
font-weight: 500;
margin: 15px 0 10px;
color: red
}
.infor_wrap .infor_dif_wrap .infor_dif_block .dif_wrap
{
width: 100%;
max-width: 85px;
align-items: center;
gap: 6px
}
.infor_wrap .infor_dif_wrap .infor_dif_block .dif_wrap .dif_row
{
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-size: 13px;
letter-spacing: .3px;
white-space: nowrap
}
.infor_wrap .infor_dif_wrap .infor_dif_block .dif_wrap .dif_row img
{
width: 16px
}
.infor_wrap .infor_dif_wrap .infor_dif_block .dif_wrap .dif_row .white_icon
{
filter: brightness(0) invert(0.7)
}
.infor_wrap .infor_dif_wrap .infor_dif_block:not(:last-child)
{
position: relative;
border-right: 1px dashed rgba(128, 128, 128, .233)
}
.infor_wrap .infor_desc_con
{
width: 100%;
padding: 50px 0
}
.infor_wrap .infor_desc_con .infor_desc_wrap
{
width: 85%;
max-width: 1240px;
margin: 0 auto
}
.infor_wrap .infor_desc_con .infor_desc_wrap .desc_title
{
width: 100%;
text-align: center;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
align-items: flex-start;
margin: 30px 0 10px
}
.infor_wrap .infor_desc_con .infor_desc_wrap .desc_title span
{
font-weight: 600;
color: red;
text-align: left
}
.infor_wrap .infor_desc_con .infor_desc_wrap p
{
padding: 10px 0;
font-size: 13px;
line-height: 1.5;
color: var(--infor_p);
letter-spacing: .4px
}
.infor_wrap .infor_desc_con .infor_desc_wrap .video_demo
{
width: 100%
}
.infor_wrap .infor_desc_con .infor_desc_wrap .video_demo iframe
{
width: 100%
}
.infor_wrap .infor_desc_con .infor_desc_wrap .video_demo video
{
width: 100%
}
.floating_link
{
position: fixed;
top: 18%;
left: 2%;
z-index: 999;
width: 180px;
animation: floating_shadow 2s infinite linear
}
.floating_link img
{
width: 100%
}
.floating_link span
{
width: 53%;
position: absolute;
font-size: 13px;
right: 12%;
top: 45%;
color: #fff;
transform: translateY(-50%)
}
.page_infor_main_wrap
{
width: 100%;
background: #1b1b1b;
position: relative;
padding: 3vh
}
.page_infor_main_wrap .title_row
{
width: 100%;
max-width: 1400px;
margin: 0 auto
}
.page_infor_main_wrap .page_title
{
width: -moz-fit-content;
width: fit-content;
font-family: "Poppins", sans-serif;
font-size: 28px;
margin-bottom: 30px;
cursor: default;
font-weight: 500;
letter-spacing: .7px;
text-shadow: 3px 6px 4px rgba(0, 0, 0, .3);
color: red
}
.page_infor_main_wrap .section .content
{
padding: 45px 5vmin
}
.solution_grid
{
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 15px
}
.solution_grid .solution_block
{
width: 100%;
background: #313131;
border-radius: 15px;
padding: 25px;
gap: 15px;
position: relative
}
.solution_grid .solution_block::after
{
position: absolute;
content: "";
height: 100%;
width: 10px;
transition: all .4s;
left: 50%;
border-radius: 16px;
background: linear-gradient(90deg, #6e0c0c 0%, #c02e2e 100%);
visibility: hidden;
opacity: 0;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
.solution_grid .solution_block:hover::after
{
width: 100%;
visibility: visible;
opacity: 1;
z-index: 1
}
.solution_grid .solution_block:hover .solution_title
{
color: #fff
}
.solution_grid .solution_block:hover .solution_icon
{
transform: rotateY(180deg) translateY(-5px)
}
.solution_grid .solution_block:hover .num
{
padding-left: 60px;
color: #fff
}
.solution_grid .solution_block:hover .num::after
{
background: #fff;
transform: rotateY(180deg);
left: 0
}
.solution_grid .solution_block .solution_icon
{
height: 55px;
width: 55px;
text-align: center;
line-height: 70px;
border-radius: 50%;
transition: all .4s;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background: linear-gradient(90deg, #970707 0%, #fc6e6e 100%);
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5))
}
.solution_grid .solution_block .solution_icon img
{
width: 100%
}
.solution_grid .solution_block .solution_title
{
font-size: 12px;
font-weight: 600;
width: 100%;
text-align: left;
color: #fff;
transition: all .4s;
z-index: 4
}
.solution_grid .solution_block .solution_infor
{
width: 100%;
padding: 0 15px;
z-index: 4
}
.solution_grid .solution_block .solution_infor p
{
font-size: 11px;
color: #e9e9e9;
font-weight: 500;
text-indent: -12px
}
.solution_grid .solution_block .solution_row
{
width: 100%;
gap: 10px;
justify-content: space-between;
align-items: center;
z-index: 4
}
.solution_grid .solution_block .solution_row p
{
font-size: 12px;
font-weight: 600
}
.solution_grid .solution_block .num
{
margin-top: auto;
font-size: 14px;
font-weight: 600;
color: red;
position: relative;
align-items: center;
gap: 10px;
transition: .4s;
z-index: 4
}
.solution_grid .solution_block .num::after
{
content: "";
width: 50px;
height: 2px;
background: red;
position: absolute;
top: 48%;
transform: translateY(-50%);
left: 25px;
display: block;
transition: .4s
}
.product_grid
{
width: 100%;
max-width: 1400px;
margin: 0 auto 40px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px
}
.product_grid .solution_block
{
width: 100%;
background: #313131;
border-radius: 15px;
padding: 25px;
gap: 15px;
position: relative
}
.product_grid .solution_block::after
{
position: absolute;
content: "";
height: 100%;
width: 10px;
transition: all .4s;
left: 50%;
border-radius: 16px;
background: linear-gradient(90deg, #6e0c0c 0%, #c02e2e 100%);
visibility: hidden;
opacity: 0;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
.product_grid .solution_block:hover::after
{
width: 100%;
visibility: visible;
opacity: 1;
z-index: 1
}
.product_grid .solution_block:hover .solution_title
{
color: #fff
}
.product_grid .solution_block:hover .solution_icon
{
transform: rotateY(180deg) translateY(-5px)
}
.product_grid .solution_block:hover .num
{
padding-left: 60px;
color: #fff
}
.product_grid .solution_block:hover .num::after
{
background: #fff;
transform: rotateY(180deg);
left: 0
}
.product_grid .solution_block .solution_icon
{
height: 55px;
width: 55px;
text-align: center;
line-height: 70px;
border-radius: 50%;
transition: all .4s;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background: linear-gradient(90deg, #970707 0%, #fc6e6e 100%);
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5))
}
.product_grid .solution_block .solution_icon img
{
width: 100%
}
.product_grid .solution_block .solution_title
{
font-size: 12px;
font-weight: 600;
width: 100%;
text-align: left;
color: #fff;
transition: all .4s;
z-index: 4
}
.product_grid .solution_block .solution_infor
{
width: 100%;
padding: 0 15px;
z-index: 4
}
.product_grid .solution_block .solution_infor p
{
font-size: 11px;
color: #e9e9e9;
font-weight: 500;
text-indent: -12px
}
.product_grid .solution_block .solution_row
{
width: 100%;
gap: 10px;
justify-content: space-between;
align-items: center;
z-index: 4
}
.product_grid .solution_block .solution_row p
{
font-size: 12px;
font-weight: 600
}
.product_grid .solution_block .num
{
margin-top: auto;
font-size: 14px;
font-weight: 600;
color: red;
position: relative;
align-items: center;
gap: 10px;
transition: .4s;
z-index: 4
}
.product_grid .solution_block .num::after
{
content: "";
width: 50px;
height: 2px;
background: red;
position: absolute;
top: 48%;
transform: translateY(-50%);
left: 25px;
display: block;
transition: .4s
}
.solution_process_block
{
width: 100%;
max-width: 1400px;
margin: 4% auto;
background: #313131;
border-radius: 15px;
padding: 20px;
gap: 25px
}
.solution_process_block .solution_title
{
font-size: 28px;
font-weight: 500;
color: #fff;
font-family: "Poppins", sans-serif;
width: 100%;
text-align: center
}
.solution_process_block .solution_process_row
{
gap: 10px
}
.solution_process_block .solution_process
{
flex: 1;
align-items: center;
gap: 10px
}
.solution_process_block .solution_process img
{
width: 70%;
border-radius: 10px
}
.solution_process_block .solution_process .step_block
{
width: 50px;
height: 50px;
font-size: 16px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #970707 0%, #fc6e6e 100%);
font-weight: 600
}
.solution_process_block .solution_process p
{
font-size: 12px;
font-weight: 500;
text-align: center
}
.solution_tech_block
{
width: 100%;
max-width: 1400px;
margin: 0 auto;
background: #313131;
border-radius: 15px;
padding: 20px;
gap: 25px
}
.solution_tech_block .solution_title
{
font-size: 28px;
font-weight: 500;
color: #fff;
font-family: "Poppins", sans-serif;
width: 100%;
text-align: center
}
.solution_tech_block .solution_more_products
{
font-size: 18px;
font-weight: 500;
color: #fff;
font-family: "Poppins", sans-serif;
width: 100%;
text-align: center
}
.product_grids
{
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}
.solution_tech_block .tech_grid
{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
text-align: center
}
.solution_tech_block .tech_block
{
background: linear-gradient(0deg, #2c2c2c 0%, #535353 100%);
border-radius: 10px;
padding: 12px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center
}
.solution_tech_block .tech_block img
{
width: 100%;
max-width: 120px;
height: auto;
-o-object-fit: contain;
object-fit: contain;
transition: transform .3s
}
.solution_tech_block .tech_block:hover img
{
transform: scale(1.05)
}
@media(max-width: 768px)
{
.solution_tech_block .tech_grid
{
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
}
}
@media(max-width: 480px)
{
.solution_tech_block .tech_grid
{
grid-template-columns: 1fr
}
}
.burgermenu
{
border: none;
background: none;
min-width: 28px;
height: 28px;
padding: 0;
opacity: 1;
transition: opacity .5s ease;
outline: none;
position: relative;
display: none;
flex-direction: column;
align-items: center;
justify-content: center
}
.burgermenu span
{
display: block;
width: 100%;
height: 1px;
border-top: 2px solid red;
transition: transform .5s ease, border-color .5s ease .3s
}
.burgermenu span:before
{
content: "";
display: block;
width: 100%;
height: 2px;
background: red;
transform: translateY(-11px);
animation-name: topLineBurger;
animation-duration: .6s;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-fill-mode: forwards
}
.burgermenu span:after
{
content: "";
display: block;
width: 100%;
height: 2px;
background: red;
transform: translateY(5px);
animation-name: bottomLineBurger;
animation-duration: .6s;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-fill-mode: forwards
}
.burgermenu.opened span
{
border-color: rgba(0, 0, 0, 0);
transition: border-color .3s ease
}
.burgermenu.opened span:before
{
animation-name: topLineCross;
animation-duration: .6s;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-fill-mode: forwards
}
.burgermenu.opened span:after
{
animation-name: bottomLineCross;
animation-duration: .6s;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-fill-mode: forwards
}
.btnTotop
{
position: fixed;
bottom: 90px;
right: 4vmin;
z-index: 99999;
cursor: pointer;
outline: none;
border: none;
background: 0 0;
gap: 10px;
display: none
}
.btnTotop .animArrow
{
position: relative;
display: flex;
width: 100%;
justify-content: center;
align-items: center
}
.btnTotop .animArrow i
{
font-size: 16px;
color: #a5a5a5
}
.btnTotop .animText
{
border-radius: 15px;
border: none;
width: 50px;
height: 50px;
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: red;
display: flex;
align-items: center;
justify-content: center;
background: #3d3d3d;
box-shadow: 5px 5px 15px rgba(0, 0, 0, .08);
box-shadow: 0px 0px 10px #000
}
.btnTotop .animText i
{
color: var(--target_color);
font-size: 23px
}
.product_banner_row
{
width: 100%;
max-width: 1400px;
padding: 6vh 0;
margin: 0 auto;
justify-content: center;
align-items: center;
gap: 40px
}
.product_banner_row .product_banner_img
{
width: 35%;
width: 25%;
position: relative
}
.product_banner_row .product_banner_img::after
{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 40%;
background: linear-gradient(0deg, #1b1b1b, rgba(27, 27, 27, 0));
z-index: 9999
}
.product_banner_row .product_banner_img img
{
width: 100%
}
.product_banner_row .product_banner_infor_col
{
flex: 1;
max-width: 500px;
gap: 25px
}
.product_banner_row .product_banner_infor_col .title
{
width: 100%;
font-size: 38px;
color: red;
font-family: "Poppins", sans-serif
}
.product_banner_row .product_banner_infor_col .infor
{
color: #fff;
max-width: 520px;
width: 100%;
text-align: left;
font-size: 12px;
letter-spacing: 1px;
line-height: 24px;
font-weight: 400;
cursor: default
}
.product_banner_row .product_banner_infor_col .arrow_btn_wrap
{
width: -moz-fit-content;
width: fit-content;
gap: 15px
}
.product_banner_row .product_banner_infor_col .arrow_btn_wrap .left
{
width: 45px;
height: 45px;
border-radius: 999rem;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center
}
.product_banner_row .product_banner_infor_col .arrow_btn_wrap .right
{
width: 45px;
height: 45px;
border-radius: 999rem;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center
}
.product_banner_row .product_banner_infor_col .arrow_btn_wrap .swiper-button-disabled
{
opacity: .5;
border: 2px solid gray
}
.product_banner_row .product_banner_infor_col .arrow_btn_wrap .swiper-button-disabled i
{
color: #fff
}
.product_banner_row .banner_text_ani .title
{
animation: text-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}
.product_banner_row .banner_text_ani .infor
{
animation: text-right .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}
.product_banner_row .banner_img_ani
{
animation: slit-in-horizontal .8s ease-out both
}
@keyframes topLineCross
{
0%
{
transform: translateY(-22px)
}
50%
{
transform: translateY(0px)
}
100%
{
transform: translateY(0px) rotate(45deg)
}
}
@keyframes bottomLineCross
{
0%
{
transform: translateY(22px)
}
50%
{
transform: translateY(0px)
}
100%
{
transform: translateY(-2px) rotate(-45deg)
}
}
@keyframes topLineBurger
{
0%
{
transform: translateY(0px) rotate(45deg)
}
50%
{
transform: rotate(0deg)
}
100%
{
transform: translateY(-11px) rotate(0deg)
}
}
@keyframes bottomLineBurger
{
0%
{
transform: translateY(0px) rotate(-45deg)
}
50%
{
transform: rotate(0deg)
}
100%
{
transform: translateY(5px) rotate(0deg)
}
}
.cover
{
position: fixed;
width: 100%;
max-width: 550px;
height: 100%;
top: 0;
left: 0;
z-index: 999999;
background: rgba(0, 0, 0, .2);
display: none
}
.cover .menu_con
{
height: 100%;
width: 80%;
position: relative;
display: flex;
flex-direction: column;
z-index: 10;
transform: translateX(-100%);
transition: .6s
}
.cover .menu_con::before
{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .9;
z-index: -1;
background: rgba(0, 0, 0, 0) linear-gradient(180deg, #d62923 0%, #501c1d 100%) 0% 0% no-repeat padding-box
}
.cover .menu_con .menu_header
{
width: 100%;
background-color: #27282a;
padding: 19px;
display: flex;
justify-content: center;
align-items: center
}
.cover .menu_con .menu_header img
{
max-width: 120px
}
.cover .menu_con .menu_wrap
{
width: 100%;
display: flex;
flex-direction: column;
padding: 28% 0;
gap: 13px;
overflow: auto
}
.cover .menu_con .menu_wrap .menu_block
{
width: 100%;
transition: .4s;
display: flex;
flex-direction: column
}
.cover .menu_con .menu_wrap .menu_block .menu_row
{
width: 100%;
display: flex;
justify-content: flex-start;
border-left: 8px solid rgba(255, 98, 30, 0);
align-items: center;
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 16px;
cursor: pointer;
padding: 5px 32px;
padding-right: 40px;
gap: 10px;
text-transform: uppercase
}
.cover .menu_con .menu_wrap .menu_block .menu_row div
{
font-size: 27px;
color: #f5f4f4;
line-height: 1
}
.cover .menu_con .menu_wrap .menu_block .menu_row span
{
display: flex;
justify-content: center;
align-items: center;
margin-left: auto
}
.cover .menu_con .menu_wrap .menu_block .menu_row span svg
{
transform: rotate(90deg)
}
.cover .menu_con .menu_wrap .menu_block:hover .menu_row
{
border-left: 8px solid #ff631e
}
.cover .menu_con .menu_wrap .menu_block .menu_dropdown
{
width: 100%;
position: relative;
padding: 15px 18px 15px 40px;
z-index: 9;
display: flex;
flex-direction: column;
gap: 5px
}
.cover .menu_con .menu_wrap .menu_block .menu_dropdown::before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #0e0e0e;
opacity: .8;
z-index: -1
}
.cover .menu_con .menu_wrap .menu_block .menu_dropdown a
{
text-decoration: none;
font-weight: 700;
transition: color .3s ease-in-out;
text-transform: uppercase;
display: flex;
width: 100%;
justify-content: space-between;
color: #bcbdc4;
font-size: 14px;
padding: 5px 0px
}
.cover .menu_con .menu_wrap .menu_block .menu_dropdown a:hover
{
color: #0d6efd
}
.cover .menu_con .menu_wrap .menu_block .menu_dropdown:not(.show)
{
display: none
}
.cover .menu_con .menu_wrap .menu_block .show
{
display: flex
}
.cover .menu_show
{
transform: translateX(0)
}
.sigma_bg
{
background: #363638 url(../Images/new_index/sigma_bg.png);
background-size: cover;
background-position: center
}
.sigma_con
{
width: 100%;
gap: 50px;
align-items: center
}
.sigma_con .sigma_icon
{
width: 25%;
margin: auto
}
.sigma_con .sigma_icon img
{
width: 100%
}
.sigma_con .sigma_info
{
flex: 1;
align-items: center;
min-width: 300px
}
.sigma_con .sigma_info p
{
font-size: 20px;
font-weight: bold;
text-align: center
}
.sigma_con .sigma_info p b
{
font-size: 20px
}
.sigma_con .sigma_info span
{
font-size: 20px
}
.sigma_con a
{
font-size: 24px;
font-weight: bold;
padding: 10px 25px;
margin: 0 auto !important;
background: linear-gradient(180deg, #990000, #6B0707);
border-radius: 999px
}
.new_service_con
{
background: rgba(0, 0, 0, .8509803922);
position: relative
}
.new_service_con .new_service
{
width: 100%;
max-width: 1400px;
padding: 35px 5vmin;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px
}
.new_service_con .new_service .new_service_title
{
width: 100%;
border-radius: 10px
}
.new_service_con .new_service .new_service_title p
{
font-size: 16px;
color: red;
position: relative
}
.new_service_con .new_service .new_service_title p::after
{
content: "";
width: 50px;
height: 2px;
background: red;
position: absolute;
left: 55%;
top: 50%;
transform: translate(0, -50%)
}
.new_service_con .new_service .new_service_title span
{
font-size: 36px;
font-weight: bold;
line-height: 1.2
}
.new_service_con .new_service .new_service_item
{
width: 100%;
padding: 15px;
gap: 5px;
background: url(../Images/new_index/service_item_bg.jpg);
background-size: cover;
border-radius: 10px;
position: relative;
overflow: hidden;
transition: all .3s linear;
cursor: pointer
}
.new_service_con .new_service .new_service_item .new_service_img
{
width: 60px;
padding: 15px;
margin-bottom: 10px;
background: #df2313;
border-radius: 999px;
z-index: 999
}
.new_service_con .new_service .new_service_item .new_service_img img
{
width: 100%
}
.new_service_con .new_service .new_service_item p
{
font-size: 18px;
font-weight: 500;
color: #000;
z-index: 999
}
.new_service_con .new_service .new_service_item span
{
font-size: 12px;
color: #808287;
z-index: 999
}
.new_service_con .new_service .new_service_item .new_service_count
{
position: absolute;
line-height: 1;
right: 20px;
top: 20px;
font-size: 48px;
color: #f4f5f9;
transition: all .5s ease;
z-index: 1
}
.new_service_con .new_service .new_service_item::after
{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-image: url(../Images/new_index/service_item_hover.png);
background-color: #fff;
content: "";
transition: all .3s linear
}
.new_service_con .new_service .new_service_item:hover p
{
color: #fff
}
.new_service_con .new_service .new_service_item:hover::after
{
height: 0
}
.new_payment_con
{
width: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr)
}
.new_payment_con .new_payment_item
{
width: 100%;
padding: 40px 0 40px 0;
align-items: center;
border: 1px solid red;
position: relative;
gap: 10px
}
.new_payment_con .new_payment_item img
{
width: 50%;
transition: .3s all
}
.new_payment_con .new_payment_item .new_payment_name
{
width: 100%;
height: 0;
align-items: center;
background: red;
justify-content: center;
transition: all .3s;
overflow: hidden;
position: absolute;
bottom: 0
}
.new_payment_con .new_payment_item .new_payment_name span
{
font-size: 18px
}
.new_payment_con .new_payment_item:hover img
{
transform: translateY(-5px)
}
.new_payment_con .new_payment_item:hover .new_payment_name
{
height: 25px
}
.new_client_con
{
width: 100%;
gap: 20px
}
.new_client_con .clientSwiper
{
width: 100%
}
.new_client_con .new_client_item
{
width: 100%
}
.new_client_con .new_client_item img
{
width: 100%
}
.new_bo_con
{
width: 100%;
align-items: center;
justify-content: space-between
}
.new_bo_con .new_bo_left
{
width: 40%
}
.new_bo_con .new_bo_left img
{
width: 100%
}
.new_bo_con .new_bo_right
{
width: 50%;
align-items: flex-start
}
.new_bo_con .new_bo_right .infor_right
{
text-align: right
}
.new_bo_bg
{
background: #363638 url(../img/new_index/bo_bg.png);
background-size: cover;
background-position: center
}
.block_row
{
width: 100%;
gap: 14px;
align-items: stretch
}
.block_row .block_title
{
font-size: 16px;
font-weight: 600;
color: #fff
}
.block_row .block_title_big
{
font-size: 18px;
font-weight: 600;
color: #fff;
margin-bottom: 20px
}
.block_row .block
{
width: 100%;
border-radius: 15px;
background: #464646;
padding: 20px;
gap: 15px;
min-width: 260px;
display: flex;
flex-direction: column;
justify-content: flex-start
}
.block_row .block .block_title_sm
{
font-size: 16px;
font-weight: 600;
width: 100%;
text-align: center
}
.block_row .block svg
{
width: 60px;
margin: 0 auto;
stroke: red
}
.block_row .block p
{
font-size: 12px;
color: #b8b8b8;
font-weight: 500
}
.block_row .block p.center
{
width: 100%;
text-align: center
}
.block_row p
{
font-size: 12px;
color: #d3d3d3;
line-height: 1.6;
font-weight: 400
}
#scroll-down-animation
{
position: fixed;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
padding: 30px 20px;
background: linear-gradient(0deg, black, rgba(0, 0, 0, 0) 60%);
width: 100%
}
#scroll-down-animation .mouse
{
margin: 0 auto;
display: block;
border-radius: 50px;
border: 2px solid #fff;
height: 50px;
width: 25px;
position: relative;
overflow: hidden
}
#scroll-down-animation .move
{
position: absolute;
background-color: #fff;
height: 6px;
width: 6px;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
animation: move 2s linear infinite
}
#scroll-down-animation p
{
font-size: 12px;
margin-top: 20px;
color: #fff;
width: 100%;
text-align: center
}
@keyframes move
{
0%
{
transform: translate(-50%, 10px);
opacity: 0
}
50%
{
transform: translate(-50%, 40px);
opacity: 1
}
100%
{
transform: translate(-50%, 80px);
opacity: 0
}
}
.floating_widget_wrap
{
width: 100px;
position: fixed;
top: 50%;
left: 0;
transform: translate(-100px, -50%);
background: #383b4a;
z-index: 9999999999;
border-radius: 0 20px 20px 0;
transition: .4s;
padding: 10px
}
.floating_widget_wrap .floating_btn
{
position: absolute;
padding: 25px 8px;
background: #383b4a;
border-radius: 0 20px 20px 0;
right: -33px;
top: 45%;
transform: translateY(-50%);
cursor: pointer
}
.floating_widget_wrap .vertical_text
{
writing-mode: vertical-rl;
transform: rotate(180deg);
color: #fff;
font-size: 12px;
letter-spacing: 1px;
text-align: center;
animation: glowBounce 1.8s infinite ease-in-out
}
@keyframes glowBounce
{
0%, 100%
{
opacity: .6;
transform: rotate(180deg) translateY(0);
text-shadow: 0 0 4px #fe0
}
50%
{
opacity: 1;
transform: rotate(180deg) translateY(-5px);
text-shadow: 0 0 10px red
}
}
.floating_widget_wrap .floating_btn i
{
transition: .4s
}
.floating_widget_wrap .floatSwiper
{
width: 100%;
height: 390px
}
.floating_widget_wrap .floatSwiper .swiper-slide
{
width: 100%;
height: 130px !important;
gap: 10px
}
.floating_widget_wrap .slide_game
{
width: 100%;
cursor: pointer
}
.floating_widget_wrap .slide_game .circle
{
padding: 3px;
border: 2px solid gray;
border-radius: 999rem;
margin-bottom: 10px;
transition: .4s
}
.floating_widget_wrap .slide_game .game_block
{
width: 100%;
border-radius: 999rem;
overflow: hidden
}
.floating_widget_wrap .slide_game .game_block img
{
width: 100%;
transition: transform .1s;
border-radius: 999rem
}
.floating_widget_wrap .slide_game span
{
font-size: 10px;
font-weight: 500;
text-align: center;
width: 100%;
display: block;
color: #fff
}
.floating_widget_wrap .slide_game.active .circle
{
border: 2px solid red
}
.floating_widget_wrap .slide_game.active .game_block img
{
transform: scale(1.2)
}
.floating_widget_wrap.floating_show
{
transform: translate(0, -50%)
}
.floating_widget_wrap.floating_show .floating_btn i
{
transform: rotate(180deg)
}
.floating_infor_block
{
position: fixed;
width: 50%;
max-width: 400px;
left: 130px;
padding: 15px;
border-radius: 20px;
background: #383b4a;
display: none;
z-index: 99999999999;
gap: 10px
}
.floating_infor_block .floating_close
{
position: absolute;
top: -15px;
right: -15px;
font-size: 18px
}
.floating_infor_block .title
{
width: 100%;
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
margin-bottom: 20px
}
.floating_infor_block .floating_infor_row
{
width: 100%;
flex-wrap: wrap;
align-items: center;
gap: 20px
}
.floating_infor_block .floating_infor_row img
{
width: 35%;
min-width: 85px;
border-radius: 15px
}
.floating_infor_block .floating_infor_row .infor
{
flex: 1;
gap: 5px
}
.floating_infor_block .floating_infor_row .infor .game_name
{
font-size: 14px;
font-weight: 600
}
.floating_infor_block .floating_infor_row .infor .cate
{
font-size: 10px;
color: #ababab;
font-weight: 500
}
.floating_infor_block .floating_infor_row .infor .score_row
{
width: 100%;
flex-wrap: wrap
}
.floating_infor_block .floating_infor_row .infor .score_row .score
{
background-image: linear-gradient(90deg, rgb(250, 191, 73) 90.8%, rgb(229, 229, 229) 9.2%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
margin-right: auto
}
.floating_infor_block .floating_infor_row .infor .score_row .player
{
align-items: center;
gap: 10px;
min-width: 120px;
justify-content: flex-start
}
.floating_infor_block .floating_infor_row .infor .score_row .player span
{
font-size: 12px;
font-weight: 600
}
.floating_infor_block .floating_infor_row .infor a
{
color: red;
align-items: center;
font-size: 12px;
line-height: 1;
display: flex;
gap: 10px;
font-weight: 600
}
.floating_infor_block .floating_infor_row .infor a svg
{
stroke: red
}
@media only screen and (max-width: 1000px)
{
.login_con
{
background: #1c222c
}
.login_con .login_wrap
{
min-height: 50vh
}
.login_con .login_wrap .left
{
position: absolute;
width: 100%
}
.login_con .login_wrap .right
{
width: 100%
}
.login_con .login_wrap .right form
{
width: 90%;
margin: 0 auto
}
.login_con
{
flex-direction: column-reverse;
justify-content: flex-end
}
.login_con .login_left
{
width: 100%;
height: unset
}
.login_con .login_left video
{
position: fixed;
top: 0;
height: 100vh
}
.login_con .login_left .login_left_infor
{
padding: 20px;
gap: 20px
}
.login_con .login_left .login_left_infor .logo
{
display: none
}
.login_con .login_left .login_left_infor .login_slogon
{
font-size: 28px
}
.login_con .login_left .login_left_infor .login_desc
{
font-size: 12px
}
.login_con .login_left .login_left_infor .login_widget_row
{
flex-direction: column;
align-items: flex-start;
gap: 30px
}
.login_con .login_form_wrap
{
width: 100%;
background: none;
padding: 20px;
z-index: 9
}
.login_con .login_form_wrap .back_link
{
margin-left: unset !important
}
.login_con .login_form_wrap .logo
{
display: flex;
width: 35vmin;
max-width: 220px
}
.login_con .login_form_wrap .login_form
{
margin-left: unset;
margin: -30px auto 0;
padding: 30px;
width: 100%;
border-radius: 20px
}
.login_con .login_form_wrap .login_form .title
{
font-size: 25px
}
.login_con .login_form_wrap .login_form button
{
margin: auto
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block .email_row p
{
font-size: 14px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block P
{
font-size: 13px
}
.contact_section .contact_us_con
{
height: auto
}
.contact_section .contact_us_con .contact_us_wrap
{
flex-direction: column;
gap: 20px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form
{
width: 100%;
padding: 15px
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_form .btn_wrap .btn_submit
{
width: 45%
}
.contact_section .contact_us_con .contact_us_wrap .contact_us_block
{
min-height: 400px
}
.product_grid
{
grid-template-columns: repeat(1, 1fr)
}
.sigma_con
{
gap: 20px;
align-items: center;
flex-wrap: wrap
}
.sigma_con .sigma_icon
{
width: 40%
}
.sigma_con a
{
margin-left: 0
}
.new_service_con .new_service
{
grid-template-columns: repeat(2, 1fr)
}
.new_service_con .new_service .new_service_title p::after
{
left: 48%
}
.new_payment_con
{
width: 80%;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr)
}
.new_client_con
{
width: 80%;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr)
}
.new_bo_con
{
width: 100%;
align-items: center;
justify-content: space-between
}
.new_bo_con .new_bo_left
{
width: 40%
}
.new_bo_con .new_bo_left img
{
width: 100%
}
.new_bo_con .new_bo_right
{
width: 50%;
align-items: flex-end
}
.new_bo_con .new_bo_right a
{
text-align: right !important
}
.new_bo_con .new_bo_right .infor_right
{
text-align: right
}
}
@media only screen and (max-width: 800px)
{
header .header_wrap .header_top .social_row
{
display: none
}
header .header_wrap .header_nav
{
display: none
}
header
{
background: #1b1b1b;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .6)
}
.burgermenu
{
display: flex
}
.infor_wrap .infor_banner_wrap .infor_block
{
flex-direction: column
}
.infor_wrap .infor_banner_wrap .infor_block .infor_img
{
width: 100%;
justify-content: center
}
.product_banner_row
{
flex-direction: column;
padding: 3vh 2vh;
height: 100%
}
.product_banner_row .product_banner_infor_col
{
height: 100%
}
.product_banner_row .product_banner_img
{
width: 75%;
max-width: 500px
}
.product_banner_row .product_banner_infor_col .arrow_btn_wrap
{
margin: auto auto 0
}
.product_banner_row .infor
{
min-height: 240px
}
}
@media only screen and (max-width: 920px)
{
.infor_row .infor_grid
{
margin: 0 auto
}
.section .content .title_right
{
text-align: left
}
.form_row
{
flex-direction: column
}
.form_row form
{
width: 100%
}
.infor_row .col
{
width: 100%;
max-width: unset
}
.infor_row .infor_right
{
text-align: left
}
footer .footer_wrap
{
flex-direction: column;
gap: 25px
}
footer .footer_wrap .footer_right
{
align-items: flex-start
}
footer .footer_wrap .footer_right .copyright
{
text-align: left
}
.sigma_con
{
gap: 20px;
align-items: center;
flex-wrap: wrap
}
.sigma_con .sigma_icon
{
width: 50%
}
.sigma_con .sigma_info p
{
font-size: 18px;
font-weight: bold
}
.sigma_con .sigma_info p b
{
font-size: 18px
}
.sigma_con .sigma_info span
{
font-size: 16px
}
.sigma_con a
{
padding: 5px 15px;
margin-left: 0;
font-size: 16px
}
.new_service_con .new_service
{
grid-template-columns: repeat(1, 1fr)
}
.new_service_con .new_service .new_service_title p::after
{
display: none
}
.new_payment_con
{
width: 100%;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr)
}
.new_payment_con .new_payment_item .new_payment_name span
{
font-size: 14px
}
.new_client_con
{
width: 100%;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr)
}
.new_bo_con
{
width: 100%;
flex-direction: column;
justify-content: center;
gap: 20px
}
.new_bo_con .new_bo_left
{
width: 100%
}
.new_bo_con .new_bo_left img
{
width: 100%
}
.new_bo_con .new_bo_right
{
width: 100%;
align-items: center
}
.new_bo_con .new_bo_right a
{
text-align: center !important
}
.new_bo_con .new_bo_right .infor_right
{
text-align: center
}
.solution_process_row
{
display: grid;
grid-template-columns: repeat(2, 1fr)
}
.solution_tech_block .tech_grid
{
grid-template-columns: repeat(2, 1fr) !important
}
.page_main_wrap .page_title_col
{
width: 100%
}
.page_main_wrap .page_title_col .page_title
{
font-size: 25px;
text-align: center
}
.page_main_wrap .page_title_col p
{
width: 100%
}
.block_row
{
flex-direction: column
}
}
@media only screen and (max-width: 400px)
{
.solution_grid
{
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))
}
}
@keyframes slit-in-horizontal
{
0%
{
transform: translateZ(-800px) rotateX(90deg);
opacity: 0
}
54%
{
transform: translateZ(-160px) rotateX(87deg);
opacity: 0
}
100%
{
transform: translateZ(0) rotateX(0);
opacity: 1
}
}
@keyframes slide-in-right
{
0%
{
transform: translateX(800px);
opacity: 0
}
50%
{
transform: translateX(500px);
opacity: 0
}
100%
{
transform: translateX(0);
opacity: 1
}
}
@keyframes text-left
{
0%
{
transform: translateX(-350px);
filter: brightness(0);
opacity: 0
}
50%
{
opacity: .4
}
100%
{
transform: translateX(0);
opacity: 1;
filter: brightness(1)
}
}
@keyframes text-right
{
0%
{
transform: translateX(350px);
filter: brightness(0);
opacity: 0
}
50%
{
opacity: .4
}
100%
{
transform: translateX(0);
opacity: 1;
filter: brightness(1)
}
}
@keyframes fade-in-fwd
{
0%
{
transform: translateZ(-80px);
opacity: 0;
filter: brightness(0)
}
50%
{
opacity: .4
}
100%
{
transform: translateZ(0);
filter: brightness(1);
opacity: 1
}
}
@keyframes floating_1
{
0%, 100%
{
transform: rotateX(0deg) translateX(0px)
}
50%
{
transform: rotateX(360deg) translateX(10px)
}
}
@keyframes fade_floating_1
{
0%
{
top: 50%;
left: 50%;
opacity: 0
}
100%
{
top: 3%;
left: 10%;
opacity: 1
}
}
@keyframes floating_2
{
0%, 100%
{
transform: rotateY(0deg) translateX(0px)
}
50%
{
transform: rotateY(360deg) translateX(10px)
}
}
@keyframes fade_floating_2
{
0%
{
top: 50%;
left: 50%;
opacity: 0
}
100%
{
top: 2%;
left: 85%;
opacity: 1
}
}
@keyframes floating_3
{
0%, 100%
{
transform: rotateY(0deg) translateX(0px)
}
50%
{
transform: rotateY(360deg) translateX(10px)
}
}
@keyframes fade_floating_3
{
0%
{
top: 50%;
left: 50%;
opacity: 0
}
100%
{
top: 50%;
left: 5%;
opacity: 1
}
}
@keyframes floating_4
{
0%, 100%
{
transform: rotateX(0deg) translateX(0px)
}
50%
{
transform: rotateX(360deg) translateX(10px)
}
}
@keyframes fade_floating_4
{
0%
{
top: 50%;
left: 50%;
opacity: 0
}
100%
{
top: 68%;
left: 50%;
opacity: 1
}
}
@keyframes wave
{
to
{
transform: translateX(-100%)
}
}
.floating-icon
{
position: fixed;
left: 20px;
bottom: 20px;
z-index: 9999;
animation: floatAnim 3s ease-in-out infinite
}
.floating-icon img
{
width: 12vw;
max-width: 60px;
min-width: 40px;
height: auto;
border-radius: 10%;
box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
transition: transform .3s ease
}
.floating-icon img:hover
{
transform: scale(1.1)
}
@keyframes floatAnim
{
0%
{
transform: translateY(0)
}
50%
{
transform: translateY(-8px)
}
100%
{
transform: translateY(0)
}
}
@media(max-width: 600px)
{
.floating-icon
{
top: 120px;
bottom: auto;
right: 10px
}
.floating-icon img
{
width: 50px
}
}