:root {
--c-prim-700:#1F5869;
--c-prim-600:#29748A;
--c-prim-500:#3392AE;
--c-prim-400:#3FAFD0;
--c-prim-300:#B4EEFF;
--c-prim-200:#D2F5FF;
--c-gray-800:#25282D;
--c-gray-700:#3D4452;
--c-gray-600:#5F697C;
--c-gray-500:#828897;
--c-gray-400:#C4C7CF;
--c-gray-300:#E3E4E8;
--c-gray-200:#F7F7F8;
--c-gray-100:#FCFCFD;
--c-gray-000:#FFF;
--c-green: #6BEAA1;
--c-green-dark: #1CC463;
--c-green-light: #DCF9E0;
--c-red: #EE4444;
--c-red-dark: #D11313;
--c-red-light: #F8B0B0;
}
*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {all: unset;display: revert;}
*,*::before,*::after {box-sizing: border-box;}
a, button {cursor: pointer;}
ol, ul, menu {list-style: none;}
img {max-width: 100%;}
table {border-collapse: collapse;}
textarea {white-space: revert;}
meter {-webkit-appearance: revert;appearance: revert;}
::placeholder {color: unset;}
:where([hidden]) {display: none;}
:where([contenteditable]:not([contenteditable="false"])) {-moz-user-modify: read-write;-webkit-user-modify: read-write;overflow-wrap: break-word;-webkit-line-break:after-white-space;}
:where([draggable="true"]) {-webkit-user-drag: element;}
html{
font-family: 'Montserrat', sans-serif;
color: var(--c-prim-700);
font-size: 20px;
letter-spacing: 0.75px;
}
h1{font-size: 48px;font-weight: 600;}
h2{font-size: 32px;font-weight: 600;}
h3{font-size: 28px;font-weight: 600;}
h4{font-size: 24px;font-weight: 600;}
h5{font-size: 24px;font-weight: 500;}
.cnv{
max-width: 1440px;
margin: 0 auto;
}
.cnv1200{
max-width: 1200px;
margin: 0 8%;
}
.bt{
font-size: 16px;
border: 2px solid var(--c-prim-700);
font-weight: 600;
min-width: 300px;
padding: 10px 30px;
border-radius: 10px;
color: var(--c-prim-700);
display: inline-block;
text-align: center;
}
.bt:hover{
text-decoration: none;
color: var(--c-prim-700);
}
header{
font-size: 16px;
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1200px;
display: flex; align-items: center;justify-content: space-between;
}
.logo{
background: no-repeat url('data:image/svg+xml;utf8,');background-size: 40px 40px;
}
header .logo {
padding-left: 50px;
height: 40px;
line-height: 40px;
font-weight: 600;
color: var(--c-prim-700);
}
.slogan{
font-weight: 600;
text-align: center;
margin-right: 78px;
}
.open-menu{
height: 40px;
width: 40px;
background: no-repeat 50% url('data:image/svg+xml;utf8,');background-size: 35px 24px;
}
.first-screen{
height: 1128px;
background: var(--c-prim-200) url(/f/first.webp) no-repeat 50%;
display: flex;flex-direction: column; align-items: center;justify-content: center;
}
.first-video{
margin-left: 8%;
margin-right: 8%;
mask-image:url(/f/april.svg);
mask-position:center center;
mask-repeat:no-repeat;
mask-size:cover;
-webkit-mask-image:url(/f/april.svg);
-webkit-mask-position:center center;
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:cover;
}
.first-video video{
width: 100%;
height: auto;
}
.mobile{display: none;}
.first-txt{
text-align: center;
margin-top: 100px;
font-size: 24px;
margin-bottom: 100px;
}
.first-txt .bt{
margin-top: 40px;
}
.first-txt .bt:hover{
background-color: rgba(31, 88, 105, 0.1);
transition: background-color.3s
}
.qslider{
max-width: 1048px;
margin: 0 auto;
background: #FFF;
box-shadow: 0px 9px 41px -16px rgba(136, 136, 136, 0.21);
margin-top: -225px;
position: relative;
}
.qslider-items a{
position: relative;
background-repeat: no-repeat;
padding: 40px;
display: flex; flex-direction: column; justify-content: center;
color: var(--c-prim-700);
min-height: 400px;
}
.qslider-img{
position: absolute;
top: 0;right: 0;bottom: 0;left: 0;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: auto 100%;
}
.qslider-img::before{
content: '';
position: absolute;
top: 0;right: 0;bottom: 0;left: 0;
background: linear-gradient(90deg, #FFF 50%, rgba(196, 196, 196, 0) 80%);
}
.qslider-items h3{
z-index: 1;
}
.qslider-items p{
z-index: 1;
font-size: 28px;
width: 50%;
}
.qslider-l,.qslider-r{
position: absolute;
top: 50%;
height: 57px;
width: 34px;
margin:0 50px;
background: no-repeat 50% url('data:image/svg+xml;utf8,');background-size: 34px 57px;
}
.qslider-l{
transform: rotate(180deg) translateY(30px);
right: 100%;
}
.qslider-r{
transform: translateY(-30px);
left: 100%;
}
.talent{
max-width: 1200px;
margin: 100px auto 200px auto;
}
.talent-box{
padding: 0;
margin-top: 50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px 28px;
}
.talent-box li{
font-size: 24px;
font-weight: 500;
text-align: center;
display: flex; flex-direction: column;gap: 20px;
}
.talent-box li:nth-child(2),.talent-box li:nth-child(5){
flex-direction: column-reverse;
}
.talent-box p{
margin: 0;
}
.app-cnv{
background: var(--c-prim-300) url(/f/first.webp) no-repeat;
background-size: cover;
}
.app-box{
display: flex;justify-content: space-between;gap: 100px;
margin-left: 8%;
}
.app-txt {
width: 55%;
padding: 100px 0;
}
.app-img {}
.app-img img{
transform: translateY(-90px)
}
.app-url-list{
width: 100%;
max-width: 900px;
margin: 0 auto;
transform: translateY(-40px);
display: flex; align-items: center;justify-content: space-between;
}
.how{
padding-right: 47%;
padding-top: 100px;
padding-bottom: 100px;
background: url(/f/how-bg.webp) no-repeat 100% 0;
}
.faq {
margin: 100px 8%;
}
.faq-list{
border-top: 2px solid var(--c-prim-700);
}
.faq-list li {
border-bottom: 2px solid var(--c-prim-700);
padding: 24px 0;
margin: 0 !important;
}
.faq-list a{
font-weight: 600;
color: var(--c-prim-700);
}
.uk-accordion-title::before,.menu .close {
content: "";
background:no-repeat 50% url('data:image/svg+xml;utf8,');background-size: 30px 30px;
}
.uk-open>.uk-accordion-title::before {
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
footer{
background: var(--c-prim-200) 50% 70% url(/f/first.webp);
padding: 80px 0;
}
.footer-cnv{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
footer .logo {
display: block;
padding-left: 90px;
font-size: 28px;
height: 80px;
line-height: 80px;
font-weight: 600;
color: var(--c-prim-700);
background-size: 80px 80px;
}
.fmenu{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.fmenu ul{
margin-top: 24px;
font-weight: 600;
}
.fmenu ul li{
margin-bottom: 8px;
}
.fmenu ul li:first-child{
margin-bottom: 10px;
}
.fmenu a{
font-weight: 500;
color: var(--c-prim-700);
}
main{
padding-top: 130px;
padding-bottom: 100px;
}
.main-cnv{
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 45% auto;
margin-top: 50px;
}
.main-box{
max-width: 1320px;
margin: 0 0 0 auto;
}
.hero{
font-size: 92px;
margin-bottom: 60px;
}
.main-cnv + h2{
margin-top: 100px;
}
.main-cnvr{
background-position: 0 0;
background-size: 45% auto;
margin-top: 50px;
}
.main-boxr{
padding-left: 45%;
padding-right: 0;
}
.c2{
display: flex;
gap: 30px;
margin-top: 40px;
}
.c2-txt{
width: 45.5%
}
.c2-img{
width: 54.5%;
}
.c2pr{
margin-left: 8%;
}
.c2pl{
margin-right: 8%;
flex-direction: row-reverse;
}
.str-box {
padding-left: 0;
margin-top: 100px;
text-align: center;
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.str-box>li{
padding: 30px;
box-shadow: 0px 4px 24px -6px rgba(119, 119, 119, 0.25);
border-radius: 18px;
}
.str-box-100{flex-basis: 100%;}
.str-box-50{flex-basis: calc(50% - 15px);}
.str-box-33{flex-basis: calc(33.3% - 20px);}
.str-box + h2 {
margin-top: 100px;
}
h2 + .str-box {
margin-top: 50px;
}
.map{
background: no-repeat 50% 100% url(/f/map.svg);
min-height: 730px
}
.map p{
display: block;
max-width: 560px;
margin: 0 auto;
text-align: center;
padding: 30px;
background-color: rgba(255, 255, 255, .6);
}
.axiom ul{
padding-left: 0;
background: no-repeat 50% url('data:image/svg+xml;utf8,');background-size: 500px 500px;
}
.axiom li{
margin-right: 51%;
}
.axiom li:nth-child(odd){
margin-right: auto;
margin-left: 51%;
text-align: right;
}
.menu{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
background: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, rgba(41, 116, 138, .1) 50% 100%),
url('data:image/svg+xml;utf8,');
background-position: 50% 50%;
background-size: auto auto, 150px 160px;
background-repeat: no-repeat;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
}
.menu ul{
margin: 0;
padding: 0;
height: 100%;
width: 50%;
padding-right: 100px;
display: flex;flex-direction: column; align-items: flex-end;justify-content: center;gap:20px;
}
.menu li a{
color: var(--c-prim-700);
font-weight: 700;
position: relative;
}
.menu li a.current::before,.menu li a:hover::before{
content: "";
position: absolute;
height: 12px;width: 12px;
background-color: var(--c-prim-700);
border-radius: 50%;
top: 6px;
left: -24px;
}
.menu .close{
position: absolute;
right: 0;
height: 40px;
width: 40px;
padding: 40px;
transform: rotate(45deg);
}
.uk-notification {
width: auto;
right: 10px;
}
.uk-notification-message{
color: #000;
font-size: 13px;
}
.frem{
font-size: 11px;
}
.t1{width: 100%;}
.t1 p{margin: 0;}
.t1 td{padding: 5px;border: 1px solid var(--c-gray-400);font-size: 14px;}
@media screen and (max-width: 1440px) {
header {
top: 28px;
left: 8%;
right: 8%;
width: auto;
max-width: auto;
transform: translateX(0);
}
.first-txt {
margin-left: 8%;
margin-right: 8%;
margin-top: 100px;
margin-bottom: 100px;
}
.talent {
max-width: auto;
margin: 100px 8% 200px 8%;
}
}
@media screen and (max-width: 1220px) {
.qslider {max-width: auto;margin: -225px 8% 0 8%;}
.qslider-l, .qslider-r {margin: 0 20px;}
.app-box {gap: 30px;}
.app-txt {width: 70%;padding: 8% 0; }
.app-img {width: 30%;}
.app-img img {transform: translateY(-50px);}
.how {padding-right: 25%;background-size: 400px auto;background-position: 100% 50%;}
.map {min-height: 48vw;background-size: auto 85%;}
}
@media screen and (max-width: 1024px) {
html{font-size: 16px;letter-spacing: normal;}
.cnv1200{margin: 0 4%}
.hero {font-size: 64px;margin-bottom: 30px;}
h1 {font-size: 38px;}
h2 {font-size: 24px;}
h3 {font-size: 21px;}
.menu li a.current::before, .menu li a:hover::before {top: 3px;}
header{left: 4%;right: 4%;}
.first-video,.first-txt,.qslider{margin-left: 4%;margin-right: 4%;}
.qslider{margin: 0}
.qslider-items a {align-items: center;text-align: center;}
.qslider-l{right: auto;left: 0;filter: brightness(0) saturate(100%) invert(24%) sepia(73%) saturate(443%) hue-rotate(147deg) brightness(98%) contrast(88%);}
.qslider-r{left: auto;right: 0;}
.talent {margin: 50px 4%}
.talent-box li{font-size: 18px;}
.how {padding-top: 0;padding-bottom: 0;}
.app-box {margin-left: 4%;}
.app-txt {padding: 4% 0;}
.c2pr {margin-left: 4%;}
.c2pl {margin-right: 4%;}
.faq {margin: 30px 4%;}
.c2-txt {width: 60%;}
.c2-img {width: 40%;}
.str-box + h2 {margin-top: 50px;}
footer .logo {padding-left: 74px;font-size: 20px;height: 60px;line-height: 60px;background-size: 60px 60px;}
.first-screen {height: auto;padding-top: 200px;}
.axiom ul {background-size: 350px 350px;}
.first-txt {font-size: 20px;}
}
@media screen and (max-width: 960px) {
.slogan{display: none;}
}
@media screen and (max-width:768px){
.first-video{
margin-left: 8%;margin-right: 8%;
mask-image:url(/f/a.svg);mask-size:auto 100%;
-webkit-mask-image:url(/f/a.svg);-webkit-mask-size:auto 100%;
}
.mobile{display: block;}
.desktop{display: none;}
.qslider-items a {
padding-top: 240px;
}
.qslider-img{
top: 0;right: 0;bottom: 50%;left: 0;
background-position: 50%;
background-size: cover;
}
.qslider-img::before{
display: none;
}
.qslider-l, .qslider-r {
top: 110px;
}
.qslider-l {
filter: none;
}
.qslider-items p {
font-size: 20px;
width: auto;
margin: 0;
}
.qslider-items h3 {
margin-top: 0;
}
.talent-box {
grid-template-columns: repeat(2, 1fr);
}
.talent-box li:nth-child(2n){
flex-direction: column-reverse;
}
.talent-box li:nth-child(2n+1){
flex-direction: column;
}
.menu {
background: rgba(255, 255, 255, .2);
}
.menu ul{
padding: 200px 0 0 0;
overflow: auto;
width: 100%;
align-items: center;
}
.menu li:first-child{
position: relative;
}
.menu li:first-child::before{
position: absolute;
top:-200px;
left: 50%;
transform: translateX(-50%);
height: 160px;
width: 150px;
content: '';
background: no-repeat 50% 0 url('data:image/svg+xml;utf8,');
background-size: 150px 160px;
}
.footer-cnv {
grid-template-columns: repeat(1, 1fr);
}
main {
padding-top: 90px;
padding-bottom: 60px;
}
.hero {font-size: 32px;}
h1 {font-size: 30px;text-align: center;}
h2 {font-size: 24px;}
h3 {font-size: 21px;}
.c2{flex-direction: column;}
.c2pr {margin-left: 4%;}
.c2pl {margin-right: 4%;}
.c2-txt {width: auto;}
.c2-img {width: 90%;}
.c2pr .c2-txt{margin-right: 4%;}
.c2pr .c2-img{margin-left: auto;}
.c2pl .c2-txt{margin-left: 4%;}
.c2pl .c2-img{margin-right: auto;}
.c2 + h2,.c2 + .str-box {
margin-top: 50px;
}
.str-box-50,.str-box-33 {flex-basis: 100%;}
}
@media screen and (max-width:640px){
.talent-box {
display: block;
}
.talent-box li{
display: block;
}
.talent-box img{
width: 100%;
height: auto;
}
.talent-box p{
margin-top: 20px;
margin-bottom: 30px;
}
.app-img{
display: none;
}
.app-txt {
width: auto;
}
.app-txt p:nth-child(3)::before{
content: "";
float: right;
margin-top: -30px;
width: 30%;
min-height: 400px;
background: no-repeat 0 0 url(/f/iphone.webp);
background-size: cover;
}
.app-url-list {
flex-direction: column;
}
.how {
padding-right: 0;
background: none;
}
.how h2::after{
content: '';
display: block;
height: 80vw;
background: url(/f/how-bg.webp) no-repeat 50%;
background-size: contain;
}
.uk-accordion-title {
font-size: 16px;
}
.footer-cnv>div:first-child{
display: none;
}
footer {
padding: 20px 0;
}
.axiom li{
margin-right: auto !important;
margin-left: auto !important;
}
.axiom li+li{
margin-top: 20px;
}
.map {
min-height: auto;
background: none;
}
.map::after {
content: '';
display: block;
height: 400px;
background: no-repeat 50% 50% url(/f/map.svg);
background-size: 128% auto;
margin-left: -4%;
margin-right: -4%;
position: relative;
}
}