html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0;
color: #535353;
font-family: var(--lato);
}
:root{
--black: #121212;
--blue: #00a1f0;
--green: #00d4c2;
--green2: #00b8a8;
--grey: #f3f4f6;
--white2: #f0f0f0;
--purple: #cd5aff;
--lato: 'Lato', sans-serif;
--noto: 'Noto Sans JP', sans-serif;
--border: 1px solid rgba(0,0,0,0.3);
--top: 7vw;
--left: 16.684vw;
--left2: 60px;
--left3: 2.5vw;
--left4: 2.5vw;
--left-banner: 9vw;
--h: 70px;
/* colors */
--primary: #26BDBD;
--primary-rgb: 30, 189, 189;
--primary-dark: #006471;
--primary-light: #D2F2F2;
--primary-lighter: #F5FFFF;
--primary-invert: #90FFFF;
--gray-1: #F5F6F8;
--gray-2: #EEEEEE;
--gray-3: #B9B9B9;
--gray-4: #707070;
--blue-1: #E8F4FD;
--blue-2: #014680;
--azure-1: #CFE6FE;
--azure-2: #008FFF;
--azure-bg: #0CA2F6;
--navy-1: #E8F4FD;
--navy-2: #014680;
--black-1: #101D23;
--danger: red;
--danger-dark: #A20D03;
--danger-light: #F6E6E5;
--shadow: rgba(0, 0, 0, 0.5);
/* sizes */
--p-font-size: 1rem;
--header-height: 5rem;
--footer-min-height: 3.28rem;
--fixed-width-nav-width: 21rem;
}
h1, h2, h3, h4, h5, h6{
color: var(--black);
}
h1{
font-size: 45px;
font-weight: 700;
line-height: 1;
margin-bottom: 20px;
}
h1 span{
display: block;
}
h2{
font-size: 35px;
font-weight: 900;
}
h2 span{
display: block;
}
h3{
font-size: 20px;
}
h4{
font-size: 18px;
}
h5{
font-size: 16px;
}
h6{
font-size: 14px;
}
p{
line-height: 1.3;
margin-bottom: 0;
}
img{
max-width: 100%;
object-fit: contain;
image-rendering: crisp-edges;
transition: .2s;
}
a{
transition: .2s;
}
[type=button], [type=reset], [type=submit], button {
appearance: none;
-webkit-appearance: none;
transition: .2s;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
}
form {
width: 100%;
}
form label {
font-size: 16px;
font-weight: 500;
margin-bottom: 5px;
}
input,
select,
textarea {
color: var(--black);
width: 100%;
outline: 0;
margin: 0;
padding: 0;
padding: 12px 20px;
border: none;
border-radius: 5px;
background-color: white;
border: 1px solid var(--black);
}
select{
color: black !important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, black 50%),
linear-gradient(135deg, black 50%, transparent 50%);
background-position:
calc(100% - 20px) calc(-10px + 30px),
calc(100% - 16px) calc(-10px + 30px),
calc(100% - 2.5em) 1.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
cursor: pointer;
}
textarea {
height: 229px;
}
input[type="submit"] {
width: 160px;
text-align: center;
color: white;
font-weight: 700;
border-radius: 5px;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
background-color: var(--green);
border: none;
transition: .2s;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: var(--green2);
}
.f-18{
font-size: 18px;
}
.f-26{
font-size: 26px;
}
.f-35{
font-size: 35px;
}
.form-holder{
margin-top: 40px;
}
.input-row{
display: flex;
flex-wrap: wrap;
margin: 0px -20px;
margin-bottom: 20px;
}
.input-col{
flex-basis: 50%;
padding: 0px 20px;
}
.input-item{
margin-bottom: 10px;
}
.input-item:last-child{
margin-bottom: 0;
}
.input-center{
text-align: center;
}
.input-center input{
margin-bottom: 14px;
}
::placeholder{
color: #535353;
opacity: 50%;
}
.country-select{
display: block;
width: 100%;
color: var(--black);
}
/* Colors - font */
.font-color-primary {
color: var(--primary) !important;
}
.font-color-primary-dark {
color: var(--primary-dark) !important;
}
.font-color-black {
color: var(--black-1) !important;
}
.font-color-white {
color: white !important;
}
.font-color-gray-3 {
color: var(--gray-3) !important;
}
.font-color-gray-4 {
color: var(--gray-4) !important;
}
.font-color-navy-2 {
color: var(--navy-2) !important;
}
.font-color-alert {
color: var(--danger) !important;
}
.font-color-alert-dark {
color: var(--danger-dark) !important;
}
/* Font */
.font-medium {
font-weight: 500;
}
.font-bold {
font-weight: bold;
}
.font-italic {
font-style: italic;
}
.f-12 {
font-size: 12px;
}
.f-14 {
font-size: 14px;
}
.f-16 {
font-size: 16px;
}
.f-20 {
font-size: 20px;
}
.f-22 {
font-size: 22px;
}
.f-30 {
font-size: 30px;
}
.f-38 {
font-size: 38px;
}
.font-size-inherit {
font-size: inherit;
}
/* --------------------------------------------------
Preloader
-------------------------------------------------- */
#preloader {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
background-color: white;
}
#preloader .loader {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 100;
}
#preloader .loader-img {
height: 130px;
}
#preloader .loader-img img{
height: 100%;
}
#preloader.is-hidden {
visibility: hidden;
opacity: 0;
}
.is-loading {
overflow: hidden;
}
#preloader .is-hidden {
visibility: hidden;
opacity: 0;
}
#preloader .txt-perc{
font-size: 20px;
letter-spacing: 1px;
text-align: center;
}
.hide{
display: none;
}
/* --------------------------------------------------
Header
-------------------------------------------------- */
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--left);
background-color: white;
z-index: 100;
transition: top 0.2s;
}
header #banner + nav:not(.hidden-nav){
top: var(--banner-h);
left: auto;
}
.reset-banner{
top: unset !important;
left: unset !important;
}
header #banner.fixed-banner{
position: fixed;
top: 0;
z-index: 100;
}
header #banner.hidden-banner{
display: none;
}
header #banner .logo-text {
align-self: flex-start;
margin-left: 20px;
}
.nav-logo img{
height: 28px;
}
.main-menu ul{
list-style: none;
padding-inline-start: 0px;
margin: 0;
display: flex;
}
.main-menu ul li{
display: flex;
align-items: center;
position: relative;
margin-left: 35px;
}
.main-menu ul li a{
color: black;
display: flex;
align-items: center;
text-decoration: none;
padding: 8px 0;
transition: .2s;
}
.main-menu ul li .nav-item:hover a{
color: var(--green);
}
.main-menu ul li:first-child{
display: none;
}
.main-menu ul li:last-child .nav-item a{
color: white;
width: 156px;
padding: 8px 5px;
text-align: center;
justify-content: center;
border-radius: 5px;
background-color: var(--green);
}
.main-menu ul li:last-child .nav-item a:hover{
background-color: var(--green2);
}
.main-menu ul li img{
height: 14px;
margin-right: 6px;
}
.main-menu .sub-menu{
position: absolute;
top: 100%;
left: 0px;
padding: 5px 0;
background-color: white;
min-width: 100px;
max-width: 250px;
display: block;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: .2s;
}
.main-menu ul li:hover .sub-menu{
opacity: 1;
visibility: visible;
}
.main-menu .sub-menu li{
margin: 0;
}
.main-menu .sub-menu li:first-child{
display: block;
}
.main-menu .sub-menu li a{
color: var(--black) !important;
font-size: 14px;
display: block;
width: 100%;
padding: 2px 10px;
text-decoration: none;
text-transform: none;
transition: .2s;
}
.main-menu .sub-menu li a:hover{
background-color: rgba(0, 0, 0, 0.1);
}
.btn-menu {
height: 10px;
width: 20px;
position: relative;
left: 50px;
z-index: 300;
will-change: transform;
transition: all .25s ease-out;
cursor: pointer;
display: none;
}
.btn-menu span {
display: block;
width: 100%;
height: 1px;
background-color: var(--black);
transition: all .25s ease-out;
position: relative;
will-change: transform;
}
.btn-menu span:nth-child(1) {
transform: translateY(0px);
}
.btn-menu span:nth-child(2) {
transform: translateY(5px);
}
.btn-menu span:nth-child(3) {
transform: translateY(9px);
}
.btn-close{
width: 20px;
height: 20px;
padding: 0;
opacity: 1;
background-size: cover;
}
.close-menu{
position: absolute;
top: 20px;
right: var(--left2);
z-index: 10;
}
.mobile-menu{
display: none;
}
.signup{
width: auto;
padding: 8px 5px;
text-align: center;
justify-content: center;
border-radius: 5px;
background-color: var(--green);
display: none;
}
.signup a{
color: white;
text-decoration: none;
}
.signup a:hover{
background-color: var(--green2);
}
.nav-light .btn-menu span{
background-color: white;
}
.nav-light .main-menu ul li a{
color: white;
}
.nav-light header nav img{
filter: invert(1) brightness(1000%);
}
.hidden-nav {
top: calc(var(--h) *-1);
}
.fixed-nav{
height: 60px;
background-color: white;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.fixed-nav .btn-menu span{
background-color: var(--black) !important;
}
.fixed-nav .main-menu ul li a{
color: var(--black) !important;
}
.fixed-nav .main-menu ul li .nav-item:hover a{
color: var(--green) !important;
}
.fixed-nav .main-menu ul li:last-child a{
color: white !important;
}
.fixed-nav .main-menu ul li:last-child .nav-item:hover a{
color: white !important;
}
.fixed-nav .main-menu .sub-menu li:last-child a{
color: var(--black) !important;
}
.fixed-nav img{
filter: none !important;
}
.fixed-nav .nav-logo img{
height: 25px;
}
.floating{
position: fixed;
bottom: 40px;
right: 30px;
width: 6.944vw;
z-index: 100;
}
.floating img:hover{
transform: scale(1.03);
}
.banner {
width: 100%;
display: flex;
background-color: #FFEF00;
padding: 20px var(--left);
}
.banner p {
font-weight: bold;
font-size: 16px;
}
.close-button {
background: none;
font-weight: bold;
border: none;
font-size: 18px;
color: #333;
cursor: pointer;
}
.logo-text {
align-self: center;
margin-left: 20px;
}
.link-disabled{
pointer-events : none;
}
/* --------------------------------------------------
Footer
-------------------------------------------------- */
footer{
color: white;
font-weight: 300;
padding: 6vw var(--left);
background-color: black;
}
footer ul{
list-style: none;
padding-inline-start: 0px;
margin: 0;
}
footer a{
color: white;
text-decoration: none;
}
footer a:hover{
color: white;
opacity: 70%;
}
footer h3{
color: var(--green);
font-weight: 700;
margin-bottom: 30px;
}
.footer-row{
display: flex;
margin: 0 -3vw;
padding-bottom: 4vw;
}
.footer-col{
padding: 0 3vw;
}
.footer1, .footer4{
flex-basis: 18%;
}
.footer2, .footer3{
flex-basis: 32%;
}
.footer-col ul{
margin: -10px -10px;
}
.footer-col li{
padding: 10px 10px;
}
.footer2 ul, .footer3 ul{
display: flex;
flex-wrap: wrap;
}
.footer2 li, .footer3 li{
flex-basis: 50%;
}
.footer-info{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.footer-logo img{
width: 175px;
margin-bottom: 5px;
filter: invert(1) brightness(1000%);
}
.footer-about{
width: 38vw;
}
.footer-social img{
height: 40px;
margin-left: 20px;
}
.footer-social a:first-child img{
margin-left: 0;
}
/* --------------------------------------------------
Common
-------------------------------------------------- */
.padding{
padding-left: var(--left);
padding-right: var(--left);
}
.top{
padding-top: var(--top);
}
.bottom{
padding-bottom: var(--top);
}
.no-banner{
padding-top: 15.278vw;
}
.top-section{
margin-top: var(--h);
}
.title-holder{
padding: 0 var(--left3);
margin-bottom: 20px;
}
.address-holder{
padding: 0 var(--left3);
margin-bottom: 20px;
margin-top: 30px;
}
.title-center{
text-align: center;
}
.bg-blue{
color: white;
background-color: var(--blue);
}
.bg-blue input,
.bg-blue select,
.bg-blue textarea{
border: none;
}
.bg-blue input[type="submit"] {
color: var(--black);
background-color: white;
}
.bg-blue input[type="submit"]:hover {
background-color: var(--white2);
}
.bg-lightBlue{
color: #000000;
background-color: #E8F4FD;
}
.btn-more a{
display: block;
color: var(--green);
font-weight: 700;
text-decoration: none;
}
.btn-more a:hover{
color: var(--green2);
text-decoration: underline;
}
.btn-link{
margin-top: 30px;
}
.btn-link a{
color: white;
font-weight: 700;
border-radius: 5px;
display: inline-block;
padding: 10px 30px;
text-decoration: none;
text-transform: uppercase;
background-color: var(--green);
}
.btn-link a:hover{
background-color: var(--green2);
}
.btn-white a{
color: var(--black);
background-color: white;
}
.btn-white a:hover{
background-color: var(--white2);
}
.freetxt h1{
margin-bottom: 50px;
}
.freetxt h2{
margin-bottom: 60px;
text-align: center;
}
.freetxt h3{
font-weight: 700;
margin-bottom: 20px;
}
.freetxt h4{
font-weight: 700;
margin-bottom: 20px;
}
.freetxt h5{
font-weight: 700;
margin-bottom: 5px;
}
.freetxt p, .freetxt img{
margin-bottom: 18px;
}
.freetxt p a,
.freetxt li a{
color: var(--green);
font-weight: 700;
text-decoration: none;
}
.freetxt p a:hover,
.freetxt li a:hover{
color: var(--green2);
}
.freetxt p:last-child{
margin-bottom: 0;
}
.freetxt ul, .freetxt ol{
padding-inline-start: 16px;
}
.freetxt li{
margin-bottom: 20px;
}
.freetxt .btn-more{
margin-bottom: 25px;
}
.freetxt .btn-more:last-child{
margin-bottom: 0;
}
.no-list{
list-style: none;
padding-inline-start: 0px;
margin: 0;
}
.list-border li{
padding: 28px 0;
border-bottom: var(--border);
}
.list-border li a{
color: black;
text-decoration: none;
position: relative;
display: block;
padding-right: 25px;
}
.list-border li h3{
color: inherit;
font-weight: 700;
margin-bottom: 0;
transition: .2s;
}
.list-border li a:hover h3{
color: var(--green);
}
.list-border li a::after {
content: "";
display: block;
position: absolute;
top: 4px;
right: 0;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
transition: .2s;
width: 16px;
height: 16px;
background-size: cover;
transform: rotate(-90deg);
}
.list-border li a:hover::after{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300d4c2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.modal-dialog {
max-width: none;
width: 70%;
}
.modal-content{
color: white;
border: none;
background-color: transparent;
}
.modal-content .close{
color: white;
font-size: 30px;
padding: 0;
margin: 0;
text-shadow: none;
opacity: 1;
cursor: pointer;
}
.modal-header{
align-items: center;
border: none;
padding: 0;
margin-bottom: 20px;
}
.modal-body{
padding: 0;
text-align: center;
}
.modal-title{
line-height: normal;
}
.modal video {
height: 39vw;
width: 69vw;
}
.page-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
z-index: -1;
transition: .2s;
}
.page-overlay.active{
z-index: 200;
opacity: 1;
visibility: visible;
}
/* --------------------------------------------------
Home
-------------------------------------------------- */
.secBanner{
color: white;
width: 100%;
height: calc(100vh - var(--h));
min-height: 600px;
max-height: 900px;
background-color: var(--blue);
position: relative;
margin-top: var(--h);
}
.banner-holder{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 0 var(--left-banner);
text-align: center;
}
.banner-txt{
margin-bottom: 20px;
}
.banner-txt > *{
color: inherit;
}
.banner-txt h1{
font-size: 45px;
margin-bottom: 20px;
}
.banner-txt h2{
font-size: 25px;
font-weight: 400;
}
.banner-img{
position: relative;
}
.banner-img .img-people{
width: 60%;
}
.banner-img .img-play{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6vw;
z-index: 1;
cursor: pointer;
}
.banner-img .img-play img{
width: 100%;
position: relative;
z-index: 2;
animation: pulse1 1.8s infinite;
}
.banner-img .img-play:before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 6vw;
height: 6vw;
border-radius: 50%;
background-color: var(--green);
z-index: 1;
animation: pulse 1.8s infinite;
}
@keyframes pulse1{
0%{transform: scale(1);}
45%{transform: scale(1.02);}
100%{transform: scale(1);}
}
@keyframes pulse{
0%{transform: scale(0); opacity: 0.5;}
45%{transform: scale(1.2); opacity: 0.25;}
90%, 100%{transform: scale(1.3); opacity: 0;}
}
.banner-form{
position: relative;
}
.calculator{
color: black;
text-align: left;
border-radius: 20px;
border: 2px solid black;
background-color: white;
overflow: hidden;
}
.calculator p{
color: #006471;
}
.calculator input, .calculator select{
border: none;
}
.large-text{
font-size: 2vw;
font-weight: 700;
}
.calc-row1{
display: flex;
flex-wrap: wrap;
position: relative;
}
.calc-row1 input, .calc-row1 select{
background-color: transparent;
}
.calc-row1-inner{
flex-basis: 50%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px;
border-bottom: 2px solid black;
}
.calc-row1-inner-left{
padding-right: 3vw;
border-right: 1px solid black;
}
.calc-row1-inner-right{
padding-left: 3vw;
}
.calc-row1 .calc-txt{
flex-basis: 70%;
}
.calc-txt, .calc-select{
display: flex;
align-items: center;
}
.calc-row1-inner-left .calc-txt p{
width: 70px;
}
.calc-row1-inner-right .calc-txt p{
width: 70px;
}
.calc-txt input{
width: 80%;
padding: 0 10px;
}
.calc-select img{
height: 25px;
margin-right: 10px;
}
.calc-select select{
font-size: 1.4vw;
font-weight: 700;
width: 4.5vw;
padding: 0px;
background-position: calc(100% - 5px) calc(-10px + 1.6vw), calc(100% - 0.5px) calc(-10px + 1.6vw), calc(100% - 2.5em) 1.5em;
}
.calc-arrow{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.472vw;
height: 3.472vw;
border-radius: 50%;
border: 1px solid black;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}
.calc-arrow img{
width: 35%;
}
.calc-row2{
padding: 20px 20px;
background-color: #f1f1f1;
}
.calc-row2-inner{
display: flex;
justify-content: space-between;
margin: -10px -5px;
}
.calc-col{
padding: 10px 5px;
}
.calc-row2 .calc-txt p{
width: 50px;
margin-right: 10px;
}
.calc-col label{
font-size: 16px;
font-weight: 300;
}
.calc-col select{
padding: 10px;
width: 14vw;
font-weight: 700;
}
.calc-col input[type="submit"]{
color: white;
font-weight: 700;
border-radius: 5px;
display: inline-block;
width: auto;
text-align: center;
padding: 12px 40px;
text-decoration: none;
text-transform: none;
background-color: var(--green);
}
.calc-col input[type="submit"]:hover{
background-color: var(--green2);
}
.calc-col h4{
font-size: 18px;
font-weight: 700;
margin-bottom: 0;
}
.banner-form .img-free{
position: absolute;
bottom: 100%;
right: 14px;
width: 5.069vw;
}
.banner-form .img-coin{
position: absolute;
top: -8vw;
right: 1vw;
width: 5vw;
}
.section{
padding-left: var(--left);
padding-right: var(--left);
}
.section-holder{
border-radius: 15px;
padding: 40px var(--left3);
background-color: var(--grey);
position: relative;
}
.sec-ads{
padding-top: 5vw;
}
.sec1{
padding-top: 5vw;
}
.sec1 .title-holder{
padding-right: 27vw;
}
.sec1 .info-holder{
width: 40vw;
}
.sec1 .section-img{
position: absolute;
top: -5vw;
right: 6vw;
width: 18vw;
}
.section-img img{
width: 100%;
}
.info-holder{
padding-left: 2vw;
}
.info{
font-weight: 900;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.info img{
width: 24px;
margin-right: 14px;
}
.tagline-holder{
color: white;
height: 8vw;
border-radius: 15px;
background-color: var(--blue);
position: relative;
margin-top: 5vw;
display: flex;
flex-direction: column;
justify-content: center;
}
.tagline-img{
position: absolute;
bottom: 0;
left: 5vw;
width: 18vw;
}
.tagline-img img{
width: 100%;
}
.tagline-txt{
color: white;
padding-left: 23vw;
}
.tagline-txt > * {
color: white;
}
.tagline-txt h3{
font-weight: 300;
}
.tagline-txt span{
display: inline;
font-family: var(--noto);
}
.tagline-txt small{
font-size: 11px;
font-weight: 300;
position: relative;
top: -8px;
opacity: 0.8;
}
.section-table{
margin-top: 20px;
}
.section-table-holder{
min-height: 1px;
height: 100%;
border-radius: 15px;
background-color: white;
overflow: hidden;
}
.section-table-head{
padding: 20px var(--left4);
background-color: var(--green);
}
.section-table-head > *{
font-weight: 900;
margin-bottom: 0;
}
.section-table-body{
padding: 20px var(--left4);
background-color: white;
}
.sec2{
padding-top: 8.333vw;
}
.sec2 .title-holder{
padding-left: 27vw;
}
.sec2 .info-holder{
padding-left: 24vw;
}
.sec2 .section-img{
position: absolute;
top: -9vw;
left: -12.5vw;
width: 36vw;
}
.sec2 .tagline-holder{
margin-top: 5.8vw;
}
.sec2 .tagline-img{
left: auto;
right: 5vw;
width: 27vw;
}
.sec2 .tagline-txt{
padding-left: 8vw;
}
.sec2 .row .section-table:first-child img{
width: 70%;
}
.sec2 .row .section-table:last-child img{
width: 90%;
}
.sec3{
padding-top: 8.681vw;
}
.sec3 .title-holder{
width: 45vw;
}
.sec3 .info-holder{
width: 43.889vw;
}
.sec3 .section-img{
position: absolute;
top: -6.5vw;
right: 6vw;
width: 17vw;
}
.sec3 .tagline-img{
width: 25vw;
}
.sec3 .tagline-txt{
padding-left: 32vw;
}
.info-row{
display: flex;
}
.info-row .info:last-child{
padding-left: 30px;
}
.section-step{
display: flex;
flex-wrap: wrap;
margin: -13px;
margin-bottom: 13px;
}
.step-box{
flex-basis: 25%;
padding: 13px;
position: relative;
}
.step-content{
min-height: 1px;
height: 100%;
padding: 5px 10px;
border-radius: 5px;
border: 2px solid var(--green);
}
.step-content h5{
font-weight: 900;
}
.step-box::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: 50%;
left: calc(100% - 6px);
transform: translateY(-50%);
width: 14px;
height: 30px;
border-style: solid;
border-width: 15px 0 15px 14px;
border-color: transparent transparent transparent #00d4c2;
}
.step-box:last-child::after{
display: none;
}
.faq-top{
padding-top: 50px;
}
.accordion-faq {
margin-bottom: 25px;
}
.accordion-faq .accordion-item{
border: none;
border-bottom: var(--border);
padding: 25px 0;
}
.accordion-faq .accordion-item:first-child{
border-top: var(--border);
}
.accordion-faq .accordion-button{
font-size: 20px;
font-weight: 700;
padding: 0;
margin-bottom: 0 !important;
cursor: pointer;
}
.accordion-button::after{
width: 16px;
height: 16px;
background-size: cover;
}
.accordion-button:not(.collapsed) {
background-color: transparent;
box-shadow: none;
}
.accordion-faq .accordion-button:not(.collapsed) {
color: var(--green);
background-color: transparent;
box-shadow: none;
}
.accordion-faq .accordion-button:not(.collapsed)::after{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300d4c2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-transfer .accordion-item{
border: none;
padding: 0;
scroll-margin-top: 25px;
}
.accordion-transfer .accordion-button{
font-size: 35px;
font-weight: 900;
margin-bottom: 0;
padding: 0;
pointer-events: none;
}
.accordion-transfer .accordion-button:after{
width: 22px;
height: 22px;
display: none;
}
.accordion-transfer .accordion-button:not(.collapsed) {
color: var(--black);
}
.accordion-transfer .accordion-button:not(.collapsed)::after{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23121212'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-transfer .accordion-body{
padding: 0;
}
.accordion-body{
padding: 0;
padding-top: 10px;
}
.secCta{
height: 36vw;
display: flex;
align-items: center;
}
.cta-holder{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
position: relative;
}
.cta-holder img{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.img-cta1{
left: 4vw;
width: 18vw;
}
.img-cta2{
right: 2vw;
width: 20vw;
}
.cta-txt{
width: 30vw;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.cta-txt h2{
font-size: 2.5vw;
}
.cta-txt > *{
color: white;
}
.cta-txt .btn-link a{
width: 150px;
font-weight: 900;
text-align: center;
text-transform: none;
}
.search-btn{
color: var(--gray-4);
position: absolute;
top:7px;
right: 0;
padding: 10px 15px 10px 10px;
}
/* --------------------------------------------------
About
-------------------------------------------------- */
.about-title{
width: 38.889vw;
}
.about-holder{
margin-top: 9.028vw;
position: relative;
}
.about-img{
position: absolute;
bottom: 100%;
right: 4vw;
width: 18vw;
}
.about-item{
position: relative;
padding: 3.889vw 5.556vw;
margin-bottom: 8.542vw;
}
.about-item:last-child{
margin-bottom: 0;
}
.about-item .about-pose{
position: absolute;
top: -3.056vw;
}
.about-item .about-txt{
padding-left: 19.792vw;
}
.about-item .about-txt h3{
font-weight: 700;
margin-bottom: 2.083vw;
}
.about-item:first-child .about-pose{
left: var(--left3);
width: 17.847vw;
}
.about-item:nth-child(even) .about-txt{
padding-left: 0;
padding-right: 20vw;
}
.about-item:nth-child(even) .about-pose{
right: 2.083vw;
width: 22.431vw;
}
.about-item:nth-child(3) .about-pose{
left: 8.750vw;
width: 10.972vw;
}
/* --------------------------------------------------
Partnership
-------------------------------------------------- */
.partnership-banner{
height: 500px;
background-color: black;
position: relative;
overflow: hidden;
}
.partnership-banner:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0aa0f0;
opacity: 5%;
}
.partnership-banner-img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 80%;
}
.partnership-banner-txt{
position: absolute;
top: 56%;
left: var(--left);
transform: translateY(-50%);
width: 600px;
max-width: 100%;
color: white;
z-index: 10;
}
.partnership-banner-txt > *{
color: inherit;
}
.partnership-banner-txt h1:last-child{
margin-bottom: 0;
}
.partnership-banner-txt h5{
margin-bottom: 16px;
}
.features{
margin-top: 65px;
}
.features-item{
margin-top: 40px;
}
.features-item img{
height: 73px;
width: 100px;
object-position: left bottom;
margin-bottom: 15px;
position: relative;
}
.features-item h3{
font-weight: 700;
margin-bottom: 24px;
position: relative;
}
.secEnquiry .title-holder{
padding: 0;
width: 90%;
}
.secEnquiry h2{
color: white;
margin-bottom: 40px;
}
.secEnquiry p a{
color: white;
}
.secEnquiry textarea {
height: 309px;
}
.secEnquiry .input-row{
margin-bottom: 40px;
}
.secEnquiry .input-submit{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.secEnquiry .input-submit input{
margin-right: 10px;
}
/* --------------------------------------------------
What Our Customer Say
-------------------------------------------------- */
.secCustomerSay{
padding-bottom: 60px;
position: relative;
overflow: hidden;
}
.secCustomerSay h2{
color: black;
}
.secCustomerSay.top{
padding-top: 50px;
}
.secCustomerSay.bottom{
padding-bottom: 3vw;
}
.secCustomerSay.mt-top{
margin-top: 50px;
}
.secBlog.mt-top{
margin-top: 50px;
}
.secFAQ.mt-top{
margin-top: 50px;
}
.customerDetail-box{
margin-top: 30px;
display:flex;
}
.customerDetail-box img{
height: 50px;
width: auto;
}
.ml-10{
margin-left:10px
}
.customerDetail-box .title-badge{
align-self: center;
}
.customerDetail-box h3{
font-weight: bold;
font-size: 16px;
margin-bottom: 3px;
}
/* --------------------------------------------------
Contact
-------------------------------------------------- */
.secContact{
padding-bottom: 150px;
position: relative;
overflow: hidden;
}
.secContact h2{
color: white;
}
.secContact.top{
padding-top: 3vw;
}
.secContact.bottom{
padding-bottom: 3vw;
}
.secMap.top{
padding-top: 3vw;
}
.secMap.bottom{
padding-bottom: 3vw;
}
.img-contact1{
position: absolute;
top: 78%;
transform: translateY(-50%);
width: 150px;
z-index: 1;
}
.img-contact2{
position: absolute;
top: 78%;
transform: translateY(-50%);
width: 150px;
z-index: 1;
}
.contact-holder{
width: 100%;
padding: 0 3.819vw;
position: relative;
}
.contact-col{
padding: 30px;
}
.customerSay-col{
padding: 12.5px;
}
.contact-row{
display: flex;
margin: -10px;
margin-top: 40px;
justify-content: center;
}
.customerSay-row{
display: flex;
margin-top: 40px;
justify-content: center;
}
.contact-box{
min-height: 1px;
height: 100%;
padding: 2vw 1.5vw;
background-color: white;
border-radius: 6px;
text-align: center;
color: var(--black);
}
.customerSay-box{
min-height: 1px;
padding: 30px;
background-color: white;
border: 3px solid #00A1F0;
box-shadow: 7px 6px #a2ddfa;
border-radius: 35px 35px 35px 0px;
color: var(--black);
}
.customerSay-box h3{
font-weight: bold;
font-size: 18px;
margin-bottom: 15px;
}
.customerSay-box h3:last-child{
margin-bottom: 0;
}
.customerSay-holder{
width: 100%;
position: relative;
}
.contact-box img{
height: 45px;
width: auto;
margin-bottom: 15px;
}
.contact-box .title-badge{
margin-bottom: 15px;
}
.contact-box h3{
font-weight: 700;
margin-bottom: 45px;
}
.contact-box h3:last-child{
margin-bottom: 0;
}
.contact-box a{
color: var(--black);
text-decoration: none;
}
.contact-box a:hover{
text-decoration: underline;
}
.btn-submit{
text-align: center;
}
#contactForm .btn-send-message{
text-transform: unset;
}
label.error{
color:red;
}
@media only screen and (min-width: 600px){
.blog-nav-selector-box{
display:none;
}
.contact-col{
flex-basis: 33.33%;
height: 360px;
}
.customerSay-col{
width: 380px;
height: auto;
}
}
/* --------------------------------------------------
MAp
-------------------------------------------------- */
.secMap h2{
color: black;
}
.mb-20{
margin-bottom: 20px;
}
.map-holder{
width: 100%;
position: relative;
}
.map-size{
width: 100%;
height: 269px;
}
@media only screen and (max-width: 991px){
.map-holder{
padding: 0;
}
/* .map-size{ */
/* width: 640px; */
/* height: 269px; */
/* } */
}
/* @media only screen and (max-width: 600px){ */
/* .map-size{ */
/* width: 100%; */
/* height: 269px; */
/* } */
/* } */
/* --------------------------------------------------
Support
-------------------------------------------------- */
.support-banner{
min-height: 300px;
background-color: var(--blue);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 150px var(--left) 50px;
}
.support-banner-txt{
width: 45vw;
max-width: 100%;
color: white;
z-index: 10;
}
.support-banner-txt > *{
color: inherit;
}
.support-banner-txt h5{
margin-bottom: 10px;
}
.support-banner-img{
position: absolute;
bottom: 0;
right: 20vw;
height: 250px;
}
.support-banner-img img, .support-banner-img svg{
height: 100%;
object-position: bottom;
}
.search-input{
position: relative;
width: 570px;
max-width: 100%;
}
.search-input input{
padding-left: 60px;
border: none;
}
.search-input img{
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
width: 20px;
}
.filter-holder{
overflow: hidden;
position: relative;
margin-bottom: 80px;
}
.filter-row{
display: flex;
justify-content: space-evenly;
}
.filter-row:after{
content: "";
display: block;
position: absolute;
bottom: 0.5px;
left: 0;
width: 100%;
height: 1px;
background-color: var(--black);
opacity: 10%;
}
.filter-item{
font-size: 20px;
cursor: pointer;
padding: 0 20px;
padding-bottom: 18px;
border-bottom: 2px solid transparent;
flex-shrink: 0;
}
.filter-item.active{
font-weight: 700;
border-bottom: 2px solid var(--green);
}
.filter-row.overflow{
justify-content: flex-start;
overflow-x: auto;
}
.filter-row.overflow .filter-item{
padding: 0;
padding-bottom: 18px;
margin-right: 40px;
}
.filter-row.overflow .filter-item:last-child{
margin-right: 0;
}
.question-holder .accordion{
margin-bottom: 50px;
}
.secRate .rate-video{
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.secRate .rate-video video{
width: 100%;
height: auto;
}
#support .section-holder{
padding: 20px var(--left3) 50px;
}
#support .personal2 .section-holder, #support .personal4 .section-holder,
#support .business2 .section-holder, #support .business3 .section-holder, #support .business4 .section-holder,
#support .transfer3 .section-holder{
padding: 60px var(--left3);
}
.personal1 .transfer-right.overtop, .business1 .transfer-right.overtop,
.transfer1 .transfer-right.overtop, .transfer4 .transfer-right.overtop,
.personal3 .transfer-right.overtop{
margin-top: -3vw;
}
.scan .transfer-right.overtop{
margin-top: -5vw;
}
.scan img{
width: 45%;
}
.transfer5 .transfer-right.overtop{
margin-top: -6vw;
}
.space-30{
margin-bottom: 30px;
}
.space-50{
margin-bottom: 50px;
}
.transfer-row{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.align-top{
align-items: flex-start;
}
.transfer-row p b{
color: var(--black);
}
.transfer-left{
flex-basis: 45%;
}
.transfer-right{
flex-basis: 55%;
padding-left: 5%;
}
.transfer-right img{
margin-bottom: 0 !important;
}
.transfer-right.overtop{
margin-top: -9.375vw;
}
#support .title-holder{
width: 55%;
}
.personal4 .transfer-left, .business8 .transfer-left{
flex-basis: 60%;
}
.personal4 .transfer-right, .business8 .transfer-right{
flex-basis: 40%;
}
.phone{
text-align: center;
}
.phone img{
width: 30%;
}
.tips-holder{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.tips-holder .tips-row{
flex-basis: 48%;
}
.tips-row{
display: flex;
flex-wrap: wrap;
color: white;
margin-top: 20px;
}
.tips-left{
width: 100px;
height: 100px;
border-radius: 10px;
padding: 6px;
margin-right: 16px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.tips-left img, .tips-left svg{
height: 50px;
margin-bottom: 5px !important;
}
.tips-left h4{
color: white;
margin-bottom: 0;
}
.tips-right{
flex: 1;
border-radius: 10px;
padding: 10px 10px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
border: 2px solid;
}
.tips-right > *{
margin-bottom: 0 !important;
}
.tips-blue .tips-left{
background-color: var(--blue);
}
.tips-blue .tips-right{
color: var(--blue);
border-color: var(--blue);
}
.tips-purple .tips-left{
background-color: var(--purple);
}
.tips-purple .tips-right{
color: var(--purple);
border-color: var(--purple);
}
.img-row{
margin-top: 20px;
}
.img-row h5{
margin-bottom: 16px;
}
.tips-blue .img-row h5{
color: var(--blue);
}
.tips-purple .img-row h5{
color: var(--purple);
}
.refer-img{
text-align: center;
margin-bottom: 6.250vw;
}
.refer-img img{
width: 50%;
}
/* --------------------------------------------------
Blog
-------------------------------------------------- */
.blog-container{
/* max-width: 1700px; */
/* padding: 0 25px; */
margin-right: 25px;
margin-left: 25px;
}
.blog-sidebar {
display: none;
}
#blog-key-container{
display: none;
}
.blog-banner{
background-color: var(--blue);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.blog-top{
padding-top: 50px;
}
.footer-button {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-pack: center;
justify-content: center;
padding: 4px 20px;
-ms-flex-align: center;
align-items: center;
text-align: center;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
white-space: nowrap;
cursor:pointer;
}
.blog-keys ul {
list-style: none;
padding-inline-start: 0px;
margin: 0;
display: flex;
justify-content: center;
background-color: #f5f6f9;
padding: 20px var(--left) 20px;
font-weight: bold;
white-space: nowrap;
}
.blog-keys ul li {
display: flex;
align-items: center;
position: relative;
margin-left: 20px;
}
.blog-keys ul li a{
display: flex;
align-items: center;
text-decoration: none;
transition: .2s;
}
.blog-category-keys ul {
list-style: none;
padding-inline-start: 0px;
margin: 0;
display: flex;
justify-content: center;
padding: 20px var(--left) 20px;
font-weight: bold;
}
.blog-category-keys ul li {
display: flex;
align-items: center;
position: relative;
white-space: nowrap;
margin-left: 20px;
}
.blog-category-keys ul li a{
display: flex;
align-items: center;
text-decoration: none;
transition: .2s;
font-size: 20px;
}
.feature-post__meta {
display: none;
}
.feature-post__title {
margin: 8px 0;
}
.blog-billboard .hero-post {
margin-bottom: 35px;
}
.hero-post {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.hero-post__tags {
margin-bottom: 8px;
}
.hero-post__category {
font-size: 18px;
-ms-flex-order: -1;
order: -1;
}
.feature-post__category, .hero-post__category, .post-card__category {
color: #424c5f;
text-decoration: unset;
}
.blog-post-list {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.blog-post-grid__title, .blog-post-list__title {
display: block;
overflow: hidden;
text-align: center;
margin: 24px auto;
font-size: 35px;
font-weight: black;
}
.blog-post-list .post-card:first-of-type {
-ms-flex-order: 0;
order: 0;
}
.blog-post-list .post-card {
-ms-flex-order: 1;
order: 1;
}
.post-card {
margin-bottom: 36px;
}
.post-card__image-wrapper {
margin-bottom: 8px;
height: calc(50vw - 24px);
}
.post-swiper__image-wrapper {
margin-bottom: 8px;
height: calc(50vw - 24px);
}
.feature-post__image, .hero-post__image, .post-card__image, .post-swiper__image {
object-fit: contain;
width: 100%;
height: 100%;
}
.event-card__image{
object-fit: fill;
width: 100%;
height: 100%;
}
[data-href] {
cursor: pointer;
}
[data-href]:hover {
color: #15171a;
}
.post-card__wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.feature-post__category, .hero-post__category, .post-card__category {
color: #424c5f;
font-size: 16px;
margin-right:10px;
}
.post-card__title {
margin: 8px 0 0;
display: -ms-grid;
display: grid;
}
.hero-post__title, .post-card__title {
color: #2c323f !important;
font-size: 20px;
font-weight: bold;
}
.feature-post__title{
color: #2c323f !important;
font-size: 18px;
font-weight: bold;
}
.feature-post__title > a{
color: #2c323f !important;
text-decoration: unset;
line-height: 22px;
}
.hero-post__wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
font-weight: 500;
border: 2px solid #e9eaee;
background-color: #fff;
}
.post-card__tags {
display: none;
}
.post-card__meta {
display: none;
}
.blog-footer {
margin-top: 100px;
text-align: center;
margin-bottom : 100px;
}
.blog-footer__button {
width: 100%;
max-width: 300px;
}
.button--lg, .button--xl {
font-size: 18px;
line-height: 25px;
padding: 8px 36px;
}
.button--xl {
padding-bottom: 16px;
padding-top: 16px;
}
.button--primary {
background-color: #00d5c3;
color: #fff;
}
.button--primary:hover {
color: white;
background-color: var(--green2);
}
.blog-article__header {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 16px;
}
.blog-article__header .subject {
margin: 8px 0 16px;
font-size: 40px;
font-weight: 500;
line-height:1.5;
}
.blog-article__header .category {
-ms-flex-order: -1;
order: -1;
color: #424c5f;
margin-right:10px;
}
.blog-article__body {
margin: 0 0 16px;
}
.kg-card.kg-image-card {
padding: 20px 0px;
}
.blog-billboard .event-card {
-ms-flex-negative: 0;
flex-shrink: 0;
max-height: 500px;
}
.event-card {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 5px;
background-color: #fff;
border: 2px solid #e9eaee;
overflow: hidden;
}
.event-card__image-wrapper {
height: calc(50vw - 24px);
}
.event-card__wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding: 16px 20px;
height: 100%;
}
.event-card__title {
margin: 0 0 12px;
font-size: 21px;
font-weight: 500;
}
.event-card__summary {
margin: 0 auto 16px;
font-size: 14px;
}
.event-card .button:last-child {
margin-top: auto;
width: 100%;
max-width: 224px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.button--lg, .button--xl {
font-size: 18px;
line-height: 25px;
padding: 8px 36px;
}
.button--aero {
border: 1px solid #00d5c3;
color: #00d5c3;
}
.blog-button {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-pack: center;
justify-content: center;
padding: 4px 20px;
-ms-flex-align: center;
align-items: center;
text-align: center;
border-radius: 30px;
font-size: 14px;
font-weight: bold;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
white-space: nowrap;
}
.hero-post__title {
margin: 12px 0;
}
.blog-article__footer {
padding: 36px 0;
border-top: 1px solid #00d5c3;
}
.about-investor-items, .about-milestone-items, .blog-article__footer .tags, .blog-sidebar-list, .blog-sidebar-medias, .hot-tags, .valid-number-contact .hint-list, .valid-number-feature-list, .valid-number-media-list {
list-style-type: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.blog-article__footer .tags {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 28px;
}
.blog-article__footer .tag {
margin: 0 12px 8px;
font-size: 20px;
font-weight: 700;
}
.blog-article__footer .tag-color{
color: #00d5c3 !important;
}
.blog-post-list__query-title {
margin: 44px 0;
font-size: 24px;
font-weight: 500;
}
.blog-post-list__query-title .highlight {
color: #00d5c3;
font-weight: 700;
text-transform: capitalize;
}
.feature-post {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 30px;
}
.feature-post__image-wrapper {
margin-bottom: 8px;
height: calc(50vw - 24px);
}
.category_button{
color: white;
}
.category_button:hover{
color: white;
opacity: unset;
text-underline-offset: 5px;
text-decoration: underline;
text-decoration-color: #00d5c3;
transition: unset;
}
.featured-title-position{
display: flex;
justify-content: center;
}
.hero-post__image-wrapper {
margin: 0 -25px;
width: 100vw;
}
.blogtxt h2{
margin-bottom: 50px;
}
.pagination-container{
justify-content: center;
display: flex;
}
.pagination-container nav ul li a{
color:black;
}
.page-link.active{
background-color: #dddedf;
}
.article-sns-widget [data-social=facebook] {
color: #4560a0;
}
.article-sns-widget [data-social=twitter] {
color: #00aaec;
}
.article-sns-widget button {
padding: 0;
}
.blog-article__header .meta{
margin-bottom: 30px;
}
.blog-article__header .meta .article-sns-widget {
display: none;
}
.article-sns-widget {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-around;
}
.article-sns-widget [data-clipboard-text] {
background-color: #00c300;
border-radius: 5px;
color: white;
}
.tooltipped {
position: relative;
}
.tooltipped-no-delay:active:after, .tooltipped-no-delay:active:before, .tooltipped-no-delay:focus:after, .tooltipped-no-delay:focus:before, .tooltipped-no-delay:hover:after, .tooltipped-no-delay:hover:before {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.tooltipped:active:after, .tooltipped:active:before, .tooltipped:focus:after, .tooltipped:focus:before, .tooltipped:hover:after, .tooltipped:hover:before {
display: inline-block;
text-decoration: none;
-webkit-animation-name: tooltip-appear;
animation-name: tooltip-appear;
-webkit-animation-duration: .1s;
animation-duration: .1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.tooltipped-n:after, .tooltipped-s:after {
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 6px;
}
.tooltipped:after, .tooltipped:before {
position: absolute;
pointer-events: none;
}
.tooltipped:after {
z-index: 1000000;
padding: 0.5em 0.75em;
-webkit-font-smoothing: subpixel-antialiased;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
font-size:12px;
content: attr(aria-label);
background: #1b1f23;
border-radius: 3px;
}
.blog-nav-search {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-positive: 1;
flex-grow: 1;
}
.blog-nav-search__toggle {
margin-left: auto;
}
.blog-nav-search__close, .blog-nav-search__toggle {
color: #fff;
}
.collapsed .blog-nav-search__input {
display: none;
}
.blog-nav-search__input {
padding: 0 40px 0px 20px;
width: 100%;
border-radius: 30px !important;
border: 0;
-webkit-box-sizing: none;
box-sizing: none;
outline: 0;
}
.collapsed .blog-nav-search__close {
display: none;
}
.blog-nav-search__close, .blog-nav-search__toggle {
color: #fff;
}
.blog-category-keys .search-btn {
color: #212529;
position: absolute;
right: 0;
top: 0;
padding: 8px 12px 13px 0px
}
.popular-title{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.blog-category-keys .input-group{
width: auto;
}
@media (min-width: 1024px){
#blog-key-container{
display: unset;
}
.blog-container{
/* max-width: 850px; */
padding: 0 var(--left);
/* padding-left: unset; */
/* padding-right: unset; */
margin-right: auto;
margin-left: auto;
}
.blog-sidebar {
display: block;
}
/* .hero-post__wrapper { */
/* right: 0; */
/* bottom: 0px; */
/* width: 420px; */
/* position: absolute; */
/* } */
.feature-post__meta {
display: block;
margin-top: auto;
font-size: 16px;
color: #717b8e;
}
content-feature-post__meta{
display: block;
margin-top: auto;
font-size: 16px;
color: #717b8e;
}
.feature-post__title {
margin-bottom: 40px;
}
.blog-billboard{
display:flex;
margin-top:36px;
/* padding-left: 300px; */
/* padding-right: 300px; */
}
.blog-billboard .hero-post {
margin-right: 20px;
margin-bottom: 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.hero-post {
--block-width: 620px;
display: block;
position: relative;
}
.blog-layout-container .blog-post-list {
-ms-flex-positive: 1;
flex-grow: 1;
}
.blog-post-list__title {
margin: 20px 0;
text-align: left;
font-size: 35px;
}
.post-card {
display: -ms-flexbox;
display: flex;
}
.post-card__image-wrapper {
width: 272px;
height: 204px;
margin: 0 20px 0 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.post-swiper__image-wrapper {
width: 272px;
height: 204px;
margin: 0 20px 0 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.post-card__title {
margin-bottom: 8px;
}
.post-card__tags {
display: block;
margin: 12px 0 auto;
}
.post-card__tag {
margin: 0 16px 12px 0;
}
.post-card__meta {
display: block;
font-size: 16px;
color: #717b8e;
}
.post-card__tag {
margin: 0 16px 12px 0;
}
.mr-lg-50{
margin-right: 50px;
}
.mb-lg-20{
margin-bottom: 20px;
}
.blog-article__header {
padding-top: 0;
}
.blog-article__header .subject {
margin: 0 0 40px;
font-size: 45px;
}
.blog-article__header .meta {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
margin-bottom: 40px;
font-size: 14px;
}
.blog-billboard .event-card {
--container-width: 235px;
width: var(--container-width);
}
.event-card__image-wrapper {
height: calc(var(--container-width)/3*2);
}
.event-card__title {
margin-right: auto;
}
.blog-article__footer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: start;
align-items: flex-start;
}
.blog-article__footer .tags {
-ms-flex-pack: start;
justify-content: flex-start;
}
.blog-article__footer .tag {
margin: 0 20px 8px 0;
}
.blog-post-list__query-title {
margin: 0 0 24px;
font-size: 30px;
}
.blog-post-grid__body {
display: grid;
column-gap: 20px;
grid-template-columns: repeat(4,1fr);
}
.feature-post__image-wrapper {
height: 150px;
}
.feature-post__category {
font-weight: 500;
}
.hero-post__image-wrapper {
--width: auto;
padding: 0 20px 0 0;
margin: 0;
width: var(--width);
height: calc(var(--width)/3*2);
}
.article-sns-widget button+button {
margin-left: 15px;
}
.blog-article__header .meta .article-sns-widget {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
.blog-nav-search {
-ms-flex-positive: 0;
flex-grow: 0;
}
.blog-nav-search__toggle {
pointer-events: none;
}
.blog-nav-search__input {
width: 169px;
height:40px;
}
.collapsed .blog-nav-search__input {
display: inline-block;
}
.blog-nav-search__close {
display: none;
}
.blog-sidebar-media {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 20px;
}
.blog-sidebar-media__image-wrapper {
--ratio: 1.5;
width: 88px;
margin-right: 20px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.blog-sidebar-media__image {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (min-width: 1440px){
.blog-container{
/* max-width: 1900px; */
margin-right: auto;
margin-left: auto;
}
.blog-post-list__title {
font-size: 35px;
margin: 0 0 36px 0;
}
.post-card__image-wrapper {
width: 329px;
height: 251px;
}
.post-swiper__image-wrapper{
width: 300px;
height: 200px;
}
.post-card__title {
font-size: 20px;
}
.blog-footer {
margin-top: 28px;
}
.blog-article__header .subject {
font-size: 45px;
}
.blog-article__header .category {
font-size: 24px;
}
.blog-article__header .meta {
font-size: 16px;
}
.blog-billboard .event-card {
--container-width: 350px;
}
.event-card__title {
font-size: 24px;
}
.event-card__summary {
font-size: 16px;
}
.blog-article__footer {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: flex-start;
}
.blog-post-list__query-title {
margin-bottom: 36px;
}
.feature-post__image-wrapper {
height: 200px;
}
.hero-post__image-wrapper {
--width: unset;
max-height: 100%;
}
/* .hero-post__wrapper { */
/* bottom: 35px; */
/* width: 420px; */
/* } */
.blog-billboard .hero-post {
margin-right: 50px;
margin-bottom: 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.gh-wrapper {
grid-template-columns: 4fr 1fr;
}
}
.mb-05{
margin-bottom: 5px;
}
.mt-50{
margin-top: 50px;
}
.mt-15{
margin-top: 15px;
}
.mt-25{
margin-top: 25px;
}
.mr-15{
margin-right: 15px;
}
.mr-50{
margin-right: 50px;
}
.ml-50{
margin-left: 50px;
}
@media (min-width: 1920px){
.hero-post__image-wrapper {
--width: unset;
max-height: 100%;
}
.feature-post__image-wrapper {
height: 300px;
}
}
/* --------------------------------------------------
Career
-------------------------------------------------- */
.career-title{
width: 38.889vw;
}
.career-holder{
margin-top: 9.028vw;
padding-top: 20px;
padding-bottom: 50px;
position: relative;
}
.career-img{
position: absolute;
bottom: 100%;
right: 4vw;
width: 19.792vw;
}
.career-holder .list-border h3{
margin-bottom: 16px;
}
/* --------------------------------------------------
Hi-res
-------------------------------------------------- */
@media only screen and (min-width: 1800px){
.no-banner{
padding-top: 220px;
}
.secBanner{
max-height: 1300px;
}
}
@media only screen and (max-width: 1300px){
/*footer*/
footer{
padding-top: 50px;
padding-bottom: 50px;
}
.footer-row{
flex-wrap: wrap;
margin: -20px -10px 0px;
}
.footer-col{
padding: 20px 10px;
}
.footer1, .footer4{
flex-basis: 40%;
}
.footer2, .footer3{
flex-basis: 60%;
}
.footer3{
order: 4;
}
.footer4{
order: 3;
}
.footer-info{
flex-wrap: wrap;
padding-top: 30px;
}
.footer-logo{
margin-bottom: 30px;
}
.footer-logo img {
width: 130px;
margin-bottom: 12px;
}
.footer-about{
width: 100%;
margin-bottom: 30px;
}
.footer-social img{
height: 35px;
margin-left: 0;
margin-right: 15px;
}
}
@media only screen and (max-width: 1100px){
:root{
--left: 10vw;
}
h2{
font-size: 30px;
}
.secBanner {
height: auto;
min-height: 600px;
max-height: none;
}
.banner-holder {
position: relative;
top: 0;
left: 0;
transform: none;
padding: 50px var(--left);
}
.large-text{
font-size: 35px;
}
.calc-row1-inner{
flex-basis: 100%;
padding: 20px !important;
}
.calc-arrow{
width: 50px;
height: 50px;
}
.calc-arrow img{
transform: rotate(90deg);
}
.calc-row1-inner-left{
border-right: none;
}
.calc-select select{
font-size: 20px;
width: 70px;
background-position: calc(100% - 5px) calc(-10px + 22px), calc(100% - 0.5px) calc(-10px + 22px), calc(100% - 2.5em) 1.5em;
}
.calc-row2-inner{
flex-wrap: wrap;
}
.calc-col{
flex-basis: 100% !important;
}
.calc-col label{
margin-bottom: 10px;
}
.calc-col select{
width: 100%;
}
.calc-col input[type="submit"]{
width: 100%;
}
}
@media only screen and (min-width: 1100px){
.img-contact1{
left: -9.5vw;
}
.img-contact2{
right: -9.5vw;
}
.contact-col {
padding: 10px;
}
.contact-holder{
padding: unset;
}
.contact-col {
flex-basis: 33.33%;
height: 285px;
}
}
@media only screen and (min-width: 1920px){
.img-contact1{
left: 0;
}
.img-contact2{
right: 0;
}
.contact-col {
padding: 30px;
height: 360px;
}
.contact-holder{
padding: 0px 5.2662vw;
}
}
@media only screen and (min-width: 2100px){
.img-contact1{
position: absolute;
top: 78%;
transform: translateY(-50%);
left: 8.3vw;
width: 150px;
z-index: 1;
}
.img-contact2{
position: absolute;
top: 78%;
transform: translateY(-50%);
right: 8.3vw;
width: 150px;
z-index: 1;
}
.contact-holder{
padding: 0 12.279vw;
}
.contact-col {
height: 360px;
}
}
/* --------------------------------------------------
Ipad
-------------------------------------------------- */
@media only screen and (max-width: 991px){
.main-menu ul li:last-child .nav-item a{
width: auto;
}
.no-banner{
padding-top: 150px;
}
.floating{
right: 10px;
bottom: 20px;
width: 100px;
}
/*about*/
.about-title, .career-title{
width: 50vw;
}
.about-img, .career-img{
right: 0;
}
.step-box{
flex-basis: 50%;
}
.step-box::after{
display: none;
}
.contact-holder{
padding: 0;
}
:root{
--top: 80px;
--left: 50px;
--left2: 20px;
--h: 100px;
}
h1, .banner-txt h1 {
font-size: 40px;
line-height: normal;
margin-bottom: 20px;
}
h2{
font-size: 30px;
}
h3{
font-size: 18px;
}
.nav-logo img {
height: 25px;
}
.input-col{
flex-basis: 100%;
margin-bottom: 10px;
}
textarea{
height: 200px;
}
.freetxt h1 {
margin-bottom: 40px;
}
.freetxt h2 {
margin-bottom: 25px;
text-align: center;
}
.freetxt h3{
margin-bottom: 18px;
}
.freetxt p, .freetxt img, .freetxt li {
margin-bottom: 16px;
}
.modal-dialog{
width: 80%;
}
.modal-dialog video{
height: auto;
width: 100%;
}
.list-border li{
padding: 20px 0;
}
.blogtxt h2{
margin-bottom: 25px;
}
/*home*/
.secBanner{
height: auto;
min-height: 600px;
max-height: none;
}
.banner-txt h2 {
font-size: 20px;
}
.banner-img .img-people {
width: 70%;
}
.banner-img .img-play{
width: 8vw;
}
.banner-img .img-play:before{
width: 8vw;
height: 8vw;
}
.banner-form .img-free{
width: 50px;
}
.banner-form .img-coin{
top: -80px;
right: 14px;
width: 50px;
}
.section {
padding-top: var(--top) !important;
}
.section-holder{
padding-top: 40px;
padding-bottom: 40px;
}
.section-img{
position: relative !important;
top: 0 !important;
right: auto !important;
left: 0 !important;
width: 100% !important;
height: auto;
margin-bottom: 30px;
padding: 0 10vw;
}
.title-holder {
width: auto !important;
padding: 0;
}
.section .title-holder{
padding: 0 var(--left3) !important;
}
#home .title-holder{
text-align: center;
padding: 0;
}
.info-holder{
width: 100% !important;
padding: 0 !important;
}
.info{
margin-bottom: 10px;
}
.tagline-holder{
height: 15vw;
margin-top: 40px !important;
}
.tagline-img{
height: 15vw;
width: auto !important;
}
.tagline-img img{
width: auto;
height: 100%;
}
.tagline-txt{
padding-left: 30vw;
}
.sec2 .tagline-txt{
padding-left: 2vw;
}
.sec3 .tagline-txt{
padding-left: 40vw;
}
.section-table-body{
padding-bottom: 40px;
}
.section-step{
margin: -8px;
margin-bottom: 20px;
}
.step-box{
flex-basis: 100%;
padding: 8px;
}
.step-box::after{
display: none;
}
.accordion-button{
font-size: 18px;
}
.cta-txt{
width: 330px;
}
.cta-txt h2 {
font-size: 30px;
}
/*about*/
.about-title, .career-title{
width: 60vw;
}
.about-item .about-pose{
position: relative;
top: 0;
left: 0 !important;
width: 150px !important;
height: 150px;
object-position: left;
margin-bottom: 30px;
}
.about-item .about-txt{
padding: 0 !important;
}
/*partnership*/
.partnership-banner-txt{
left: 0;
width: 100%;
padding: 0 var(--left);
}
/*contact*/
.secContact{
padding-bottom: var(--top);
}
.contact-row{
flex-wrap: wrap;
}
.contact-col{
flex-basis: 100%;
}
.img-contact1, .img-contact2{
display: none;
}
/*contact*/
.customerSay-col{
flex-basis: 100%;
}
.customerSay-row{
flex-wrap: wrap;
}
.customerSay-col{
flex-basis: 100%;
}
/*support*/
.support-banner{
min-height: 300px;
flex-wrap: wrap;
}
.support-banner-img{
right: var(--left);
}
.transfer-row{
flex-wrap: wrap-reverse;
}
.transfer-left {
flex-basis: 100% !important;
}
.transfer-right{
flex-basis: 100% !important;
margin-top: 0 !important;
margin-bottom: 30px !important;
padding: 0 !important;
display: flex;
justify-content: center;
}
.transfer-right img{
width: 80%;
}
.phone img{
width: 30% !important;
}
.scan img{
width: 40% !important;
}
.transfer-row2, .phone{
margin-top: 50px !important;
}
.transfer4 .transfer-row2{
flex-wrap: wrap;
}
.transfer4 .transfer-row2 .transfer-left{
margin-bottom: 30px;
}
.personal3 .transfer-row2 .transfer-right img, .business7 .transfer-row2 .transfer-right img{
width: auto;
}
.tips-holder .tips-row{
flex-basis: 100%;
}
.img-row img{
margin-right: 10px;
}
.img-row img:last-child {
margin-right: 0px;
}
.filter-item{
font-size: 18px;
}
.accordion-transfer{
margin-top: 20px;
}
.accordion-transfer .section {
padding-top: 30px !important;
}
.accordion-transfer .accordion-item{
margin-bottom: 20px;
}
.accordion-transfer .accordion-header{
padding: 0 !important;
margin-bottom: 0 !important;
}
.accordion-transfer .accordion-button{
pointer-events: auto;
padding: 15px 20px;
cursor: pointer;
}
.accordion-transfer .accordion-button:after{
display: block;
}
.accordion-transfer .accordion-button.collapsed{
padding: 15px 20px;
border-radius: 10px !important;
background-color: var(--grey);
}
.accordion-transfer .accordion-collapse{
margin-top: 20px;
}
/*career*/
.career-holder{
padding-top: 10px;
padding-bottom: 30px;
}
}
/* --------------------------------------------------
Menu
-------------------------------------------------- */
@media only screen and (max-width: 700px){
.main-menu{
display: none;
}
.btn-menu{
display: block;
}
.signup{
display: block;
}
.web-signup{
display: none;
}
.fixed-nav{
height: 50px;
}
.fixed-nav .nav-logo img {
height: 20px;
}
.mobile-menu{
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
padding: 20px;
background-color: white;
z-index: 300;
display: block;
transition: .5s;
}
.mobile-menu.active{
right: 0;
}
.mobile-menu ul{
list-style: none;
padding-inline-start: 0px;
margin-bottom: 0;
}
.mobile-menu .menu{
margin-top: 100px;
height: calc(100vh - 100px);
padding-bottom: 50px;
}
.mobile-menu ul li{
margin-bottom: 22px;
}
.mobile-menu ul li:first-child{
display: block;
}
.mobile-menu ul li a{
color: var(--black);
text-decoration: none;
text-transform: uppercase;
}
.mobile-menu ul li a img{
width: 20px;
height: 20px;
float: left;
margin-right: 10px;
margin-top: 2px;
}
.mobile-menu .nav-item{
position: relative;
font-size: 18px;
font-weight: 700;
display: flex;
justify-content: space-between;
}
.mobile-menu .nav-item a{
display: block;
width: 100%;
}
.mobile-menu ul li a:hover{
color: var(--green);
}
.mobile-menu .sub-menu{
padding-top: 10px;
padding-left: 10px;
display: none;
}
.mobile-menu .sub-menu.active{
display: block;
}
.mobile-menu .sub-menu li{
margin-bottom: 10px;
}
.mobile-menu .sub-menu li a{
font-size: 16px;
}
.mobile-menu ul li:last-child .nav-item a{
color: white;
width: 100%;
padding: 10px;
text-align: center;
justify-content: center;
border-radius: 10px;
background-color: var(--green);
}
.mobile-menu ul li:last-child .nav-item a:hover{
background-color: var(--green2);
}
/*support*/
.tips-left{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-right: 0;
margin-bottom: 10px;
border-radius: 5px;
width: 100%;
height: 50px;
}
.tips-left img, .tips-left svg{
height: 30px;
margin-bottom: 0 !important;
margin-right: 10px;
}
.tips-left h4{
font-size: 16px;
}
.tips-right {
flex: unset;
flex-basis: 100%;
padding: 10px;
border-radius: 5px;
}
#support .section-holder, #support .personal2 .section-holder, #support .personal4 .section-holder, #support .business2 .section-holder, #support .business3 .section-holder, #support .business4 .section-holder, #support .transfer3 .section-holder {
padding: 20px var(--left3);
}
.space-50 {
margin-bottom: 30px;
}
.refer-img img{
width: 90%;
}
.article-sns-widget .icon-sm{
font-size: 30px !important;
}
header #banner .logo-text {
margin-left: 0;
}
}
/* --------------------------------------------------
Mobile Potrait
-------------------------------------------------- */
@media only screen and (max-width: 600px){
:root{
--top: 60px;
--left: 20px;
--left2: 20px;
--left3: 20px;
--left4: 20px;
--h: 60px;
}
h1{
font-size: 30px;
}
.banner-txt h1{
font-size: 25px;
margin-bottom: 10px;
}
h2{
font-size: 25px;
}
h3{
font-size: 16px;
}
/*common*/
.no-banner{
padding-top: 120px;
}
.btn-link {
margin-top: 20px;
}
.modal-dialog{
width: 96%;
}
.floating{
right: 5px;
width: 80px;
}
/*home*/
.secBanner{
min-height: auto;
}
.banner-holder{
position: relative;
top: 0;
left: 0;
transform: none;
padding: 50px var(--left);
}
.banner-txt{
margin-bottom: 30px;
}
.section-img{
margin-bottom: 20px;
}
.sec2 .section-img{
padding: 0 2vw;
}
.sec3 .section-img{
padding: 0 15vw;
}
/*calculator*/
.calculator{
border-radius: 10px;
}
.calc-txt{
flex-basis: 60%;
flex-wrap: wrap;
}
.calc-txt p{
font-size: 18px;
width: 100%;
margin-bottom: 10px;
}
.calc-txt input{
padding: 0;
}
.large-text{
font-size: 28px;
}
.calc-txt p{
font-size: 14px;
font-weight: 700;
width: 100% !important;
margin-bottom: 0;
}
.calc-select select{
font-size: 18px;
min-width: 60px;
background-position: calc(100% - 10px) calc(-10px + 20px), calc(100% - 5.5px) calc(-10px + 20px), calc(100% - 2.5em) 1.5em;
}
.calc-select img{
height: 20px;
margin-right: 10px;
}
.calc-col label{
margin-bottom: 5px;
}
.calc-col select{
padding: 10px;
margin-top: 5px;
}
.calc-col input[type="submit"]{
width: 100%;
}
.banner-form .img-form-mobile{
display: block;
}
.banner-img .img-people{
width: 90%;
}
.banner-img .img-play, .banner-img .img-play:before {
width: 60px;
height: 60px;
}
.banner-form .img-free{
display: none;
}
.banner-form .img-coin {
top: 320px;
right: 80px;
width: 50px;
border-radius: 50%;
background-color: #fcf879;
}
.title-holder{
margin-bottom: 20px;
}
.section-holder{
border-radius: 10px;
}
.info img{
margin-right: 10px;
}
.tagline-holder{
height: auto;
padding: 10px;
border-radius: 10px;
text-align: center;
margin-top: 160px !important;
}
.tagline-txt{
padding: 0 !important;
}
.tagline-txt small{
display: block;
top: 0;
}
.tagline-img{
left: 0 !important;
bottom: 100%;
height: 130px;
width: 100% !important;
}
.section-table-holder{
border-radius: 10px;
}
.section-table-head{
padding-top: 15px;
padding-bottom: 15px;
}
.section-table-body {
padding-bottom: 20px;
}
.step-content{
padding: 15px 10px;
}
.info-row{
flex-wrap: wrap;
}
.info-row .info{
flex-basis: 100%;
padding: 0 !important;
}
.secCta{
height: 300px;
overflow: hidden;
}
.cta-txt h2{
font-size: 25px;
}
.cta-holder{
height: auto;
padding-bottom: 50px;
}
.cta-holder img{
top: auto;
bottom: -30px;
transform: none;
}
.img-cta1 {
left: -14vw;
width: 38vw;
}
.img-cta2 {
right: -15vw;
width: 40vw;
}
.accordion-button {
font-size: 16px;
}
/* Currency Custom Select2*/
.currency-select2 {
min-width: 120px !important;
}
/*about*/
.about-title, .career-title{
width: 100%;
}
.about-img, .career-img{
display: none;
}
/*partnership*/
.partnership-banner{
height: 350px;
}
.secEnquiry .input-row{
margin-bottom: 20px;
}
.secEnquiry .input-submit input{
margin-right: 0;
}
.secEnquiry .input-submit p{
width: 100%;
margin-top: 10px;
}
/*contact*/
.contact-col{
flex-basis: 100%;
}
.contact-box{
padding: 20px;
}
/*customer say*/
.customerSay-col{
flex-basis: 100%;
}
.customerSay-box{
padding: 20px;
}
/*support*/
.support-banner{
min-height: 100px;
flex-wrap: nowrap;
margin-bottom: 30px;
padding: 50px var(--left) 10px;
}
.support-banner-txt{
width: 60vw;
}
.support-banner-txt h5{
margin-bottom: 5px;
}
.support-banner-img{
width: auto !important;
right: 20px !important;
height: 120px;
}
.support-banner-img img, .support-banner-img svg{
height: 100%;
width: auto;
}
.secEnquiry h2{
margin-bottom: 20px;
}
.accordion-transfer .accordion-button{
font-size: 20px;
}
.accordion-transfer .section{
padding-top: 10px !important;
}
.transfer-right img {
width: 90%;
}
.phone img {
width: 50% !important;
}
/*faq*/
.search-input input{
padding-left: 30px;
}
.search-input img{
left: 10px;
width: 14px;
}
.filter-holder{
margin-bottom: 50px;
}
.filter-item{
font-size: 16px;
}
.secRate .section-content img{
width: 100%;
}
.refer-img{
margin-bottom: 40px;
}
/*footer*/
footer h3{
margin-bottom: 15px;
}
.footer-col{
flex-basis: 100% !important;
}
.footer-col ul{
margin: -5px;
}
.footer-col li{
padding: 5px;
}
.footer3{
order: 3;
}
.footer4{
order: 4;
}
.footer-logo img{
width: 130px;
}
/* blog */
.blog-key-container, .blog-category-keys{
display:none;
}
.blog-banner {
padding:5px 10px 5px 22px;
justify-content:start;
}
.blog-nav-selector-box{
display:flex;
position:relative;
}
.blog-nav-selector{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: 0;
padding: 0 10px 0 10px;
cursor: pointer;
color: currentColor;
--base-width: 5.5em;
height: 50px;
/* width: calc(var(--base-width) + 32px); */
color: #fff !important;
font-size:20px;
}
.drop-icon{
color: #fff;
top: 15px;
right: 0;
position: absolute;
pointer-events: none;
}
option{
background-color: #f5f6f9;
color:black;
}
}
/* --------------------------------------------------
Mobile Landscape
-------------------------------------------------- */
@media only screen and (max-height: 600px){
:root{
--left2: 20px;
--h: 80px;
}
.main-menu ul li{
margin-left: 20px;
}
.main-menu ul li:last-child .nav-item a{
width: auto;
}
}
.country-select .flag{
width:20px;
height:15px;
-webkit-box-shadow:0px 0px 1px 0px #888;
box-shadow:0px 0px 1px 0px #888;
background-image:url("/images/landing/flags.png");
background-repeat:no-repeat;
background-color:#dbdbdb;
background-position:20px 0
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
.country-select .flag{
background-image:url("/images/landing/flags@2x.png")
}
}
:root {
--dl-layout-size-large: 144px;
--dl-layout-size-small: 48px;
--dl-layout-space-unit: 16px;
--dl-layout-size-medium: 96px;
--dl-layout-size-xlarge: 192px;
--dl-layout-size-xsmall: 16px;
--dl-color-primary-01red: #f95151ff;
--dl-color-theme-accent1: #FFFFFF;
--dl-color-theme-accent2: #F5D1B0;
--dl-layout-radius-round: 50%;
--dl-layout-size-xxlarge: 288px;
--dl-color-greyscale-grey: #cacacaff;
--dl-color-primary-02moss: #708d81ff;
--dl-color-primary-02pale: #de716eff;
--dl-color-primary-02teal: #86b4bcff;
--dl-color-primary-02wine: #9a3f41ff;
--dl-color-primary-inlink: #0c66e4ff;
--dl-color-theme-primary1: #BF4408;
--dl-color-theme-primary2: #E65103;
--dl-layout-size-maxwidth: 1400px;
--dl-color-greyscale-black: #161616ff;
--dl-color-greyscale-white: #ffffffff;
--dl-color-primary-inhover: #de4b4bff;
--dl-color-primary-serror1: #ff0000ff;
--dl-color-primary-serror2: #ffedebff;
--dl-layout-radius-radius2: 2px;
--dl-layout-radius-radius4: 4px;
--dl-layout-radius-radius8: 8px;
--dl-layout-space-halfunit: 8px;
--dl-layout-space-sixunits: 96px;
--dl-layout-space-twounits: 32px;
--dl-color-primary-02purple: #5b293eff;
--dl-color-primary-02salmon: #f8b6a6ff;
--dl-color-theme-secondary1: #FFFFFF;
--dl-color-theme-secondary2: #FBF1EB;
--dl-layout-space-fiveunits: 80px;
--dl-layout-space-fourunits: 64px;
--dl-color-primary-inpressed: #d04848ff;
--dl-color-primary-sgeneral1: #ecaa00ff;
--dl-color-primary-sgeneral2: #fff9e8ff;
--dl-color-primary-ssuccess1: #22a06bff;
--dl-color-primary-ssuccess2: #dffcf0ff;
--dl-layout-space-threeunits: 48px;
--dl-color-greyscale-darkgrey: #595959ff;
--dl-color-greyscale-offwhite: #f9f9f9ff;
--dl-color-primary-02midnight: #0e3b43ff;
--dl-color-primary-indisabled: #d3c6c6ff;
--dl-color-theme-neutral-dark: #191818;
--dl-layout-radius-cardradius: 8px;
--dl-color-greyscale-lightgrey: #e3e3e3ff;
--dl-color-primary-inhoverdark: #ffeaeaff;
--dl-color-theme-neutral-light: #FBFAF9;
--dl-layout-radius-imageradius: 8px;
--dl-layout-radius-inputradius: 24px;
--dl-color-greyscale-darkergrey: #595959ff;
--dl-layout-radius-buttonradius: 24px;
--dl-color-greyscale-darkestgrey: #414040ff;
--dl-color-primary-inpresseddard: #ffc7c7ff;
--dl-color-greyscale-lightestgrey: #f2f2f2ff;
--dl-layout-space-oneandhalfunits: 24px;
--dl-color-greyscale-placeholdergrey: #808080ff;
}
.button {
color: var(--dl-color-theme-neutral-dark);
display: inline-block;
padding: 0.5rem 1rem;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-theme-neutral-light);
}
.input {
color: var(--dl-color-theme-neutral-dark);
cursor: auto;
padding: 0.5rem 1rem;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-theme-neutral-light);
}
.textarea {
color: var(--dl-color-theme-neutral-dark);
cursor: auto;
padding: 0.5rem;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-theme-neutral-light);
}
.list {
width: 100%;
margin: 1em 0px 1em 0px;
display: block;
padding: 0px 0px 0px 1.5rem;
list-style-type: none;
list-style-position: outside;
}
.list-item {
display: list-item;
}
.teleport-show {
display: flex !important;
transform: none !important;
}
.thq-input {
color: var(--dl-color-theme-neutral-dark);
cursor: auto;
outline: none;
padding: 0.5rem 1rem;
align-self: stretch;
text-align: center;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: var(--dl-layout-radius-inputradius);
background-color: var(--dl-color-theme-neutral-light);
}
.thq-input:focus {
outline: 1px solid var(--dl-color-theme-primary1);
}
.thq-button-filled {
gap: var(--dl-layout-space-halfunit);
fill: var(--dl-color-theme-secondary1);
color: var(--dl-color-theme-secondary1);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
font-weight: bold;
padding-top: var(--dl-layout-space-halfunit);
white-space: nowrap;
border-color: var(--dl-color-theme-primary1);
border-width: 1px;
padding-left: var(--dl-layout-space-oneandhalfunits);
border-radius: var(--dl-layout-radius-buttonradius);
padding-right: var(--dl-layout-space-oneandhalfunits);
padding-bottom: var(--dl-layout-space-halfunit);
justify-content: center;
background-color: var(--dl-color-theme-primary1);
}
.thq-button-filled:hover {
fill: var(--dl-color-theme-secondary2);
color: var(--dl-color-theme-secondary2);
border-color: var(--dl-color-theme-primary2);
background-color: var(--dl-color-theme-primary2);
}
.thq-button-outline {
gap: var(--dl-layout-space-halfunit);
fill: var(--dl-color-theme-primary1);
color: var(--dl-color-theme-primary1);
border: 1px solid;
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
font-weight: bold;
padding-top: var(--dl-layout-space-halfunit);
white-space: nowrap;
border-color: var(--dl-color-theme-primary1);
padding-left: var(--dl-layout-space-oneandhalfunits);
border-radius: var(--dl-layout-radius-buttonradius);
padding-right: var(--dl-layout-space-oneandhalfunits);
padding-bottom: var(--dl-layout-space-halfunit);
justify-content: center;
}
.thq-button-outline:hover {
fill: var(--dl-color-theme-secondary2);
color: var(--dl-color-theme-secondary2);
border-color: var(--dl-color-theme-primary2);
background-color: var(--dl-color-theme-primary2);
}
.thq-button-flat {
gap: var(--dl-layout-space-halfunit);
fill: var(--dl-color-theme-primary1);
color: var(--dl-color-theme-primary1);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
font-weight: bold;
padding-top: var(--dl-layout-space-halfunit);
white-space: nowrap;
border-color: transparent;
border-width: 1px;
padding-left: var(--dl-layout-space-oneandhalfunits);
border-radius: var(--dl-layout-radius-buttonradius);
padding-right: var(--dl-layout-space-oneandhalfunits);
padding-bottom: var(--dl-layout-space-halfunit);
justify-content: center;
}
.thq-button-flat:hover {
fill: var(--dl-color-theme-secondary1);
color: var(--dl-color-theme-secondary1);
border-color: var(--dl-color-theme-primary2);
background-color: var(--dl-color-theme-primary2);
}
.thq-heading-1 {
font-size: 48px;
font-family: STIX Two Text;
font-weight: 700;
line-height: 1.5;
}
.thq-heading-2 {
font-size: 35px;
font-family: STIX Two Text;
font-weight: 600;
line-height: 1.5;
}
.thq-heading-3 {
font-size: 26px;
font-family: STIX Two Text;
font-weight: 600;
line-height: 1.5;
}
.thq-body-large {
font-size: 18px;
font-family: Noto Sans;
line-height: 1.5;
}
.thq-body-small {
font-size: 16px;
font-family: Noto Sans;
line-height: 1.5;
}
.thq-team-image-round {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
.thq-section-padding {
width: 100%;
display: flex;
padding: var(--dl-layout-space-fiveunits);
position: relative;
align-items: center;
flex-direction: column;
}
.thq-section-max-width {
width: 100%;
max-width: var(--dl-layout-size-maxwidth);
}
.thq-img-ratio-1-1 {
width: 100%;
object-fit: cover;
aspect-ratio: 1/1;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-ratio-16-9 {
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-ratio-4-3 {
width: 100%;
object-fit: cover;
aspect-ratio: 4/3;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-ratio-4-6 {
width: 100%;
object-fit: cover;
aspect-ratio: 4/6;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-round {
width: 100%;
border-radius: var(--dl-layout-radius-round);
}
.thq-flex-column {
gap: var(--dl-layout-space-twounits);
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.thq-flex-row {
gap: var(--dl-layout-space-twounits);
display: flex;
overflow: hidden;
position: relative;
align-items: center;
}
.thq-grid-6 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.thq-grid-5 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.thq-card {
gap: var(--dl-layout-space-oneandhalfunits);
display: flex;
padding: var(--dl-layout-space-twounits);
align-items: stretch;
border-radius: var(--dl-layout-radius-cardradius);
flex-direction: column;
}
.thq-box-shadow {
box-shadow: 0px 0px 5px -2px var(--dl-color-theme-neutral-dark);
}
.thq-grid-3 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-grid-4 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.thq-grid-2 {
width: 100%;
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr;
}
.thq-checkbox {
width: var(--dl-layout-size-xsmall);
height: var(--dl-layout-size-xsmall);
}
.thq-select {
cursor: pointer;
appearance: none;
padding-top: var(--dl-layout-space-halfunit);
padding-left: var(--dl-layout-space-unit);
border-radius: var(--dl-layout-radius-inputradius);
padding-right: var(--dl-layout-space-twounits);
padding-bottom: var(--dl-layout-space-halfunit);
background-color: var(--dl-color-theme-neutral-light);
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width%3D%2220%22 height%3D%2220%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right 8px center;
}
.thq-divider-horizontal {
width: 100%;
height: 1px;
background-color: var(--dl-color-theme-neutral-dark);
}
.thq-icon-small {
width: 24px;
height: 24px;
}
.thq-button-icon {
fill: var(--dl-color-theme-secondary1);
padding: 3px;
transition: 0.3s;
border-radius: var(--dl-layout-radius-round);
}
.thq-button-icon:hover {
fill: var(--dl-color-theme-secondary2);
}
.thq-icon-medium {
width: var(--dl-layout-size-small);
height: var(--dl-layout-size-small);
}
.thq-icon-x-small {
width: var(--dl-layout-size-xsmall);
height: var(--dl-layout-size-xsmall);
}
.thq-link {
cursor: pointer;
display: inline-block;
overflow: hidden;
background: linear-gradient(to right, var(--dl-color-theme-primary1) 50%, var(--dl-color-theme-neutral-dark) 50%);
transition: background-position 300ms ease;
font-weight: 600;
background-clip: text;
background-size: 200% 100%;
background-position: 100%;
-webkit-text-fill-color: transparent;
}
.thq-link:hover {
background-position: 0 100%;
}
.thq-grid-auto-300 {
display: grid;
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.thq-animated-group-vertical-reverse {
gap: var(--dl-layout-space-unit);
width: 100%;
display: flex;
animation: scroll-y 20s linear infinite;
align-items: flex-start;
flex-direction: column;
justify-content: space-around;
animation-direction: reverse;
}
.thq-animated-group-horizontal-reverse {
gap: var(--dl-layout-space-unit);
display: flex;
animation: scroll-x 20s linear infinite;
min-width: 100%;
align-items: center;
flex-shrink: 0;
justify-content: space-around;
animation-direction: reverse;
}
.thq-animated-group-vertical {
gap: var(--dl-layout-space-unit);
width: 100%;
display: flex;
animation: scroll-y 20s linear infinite;
align-items: flex-start;
flex-direction: column;
justify-content: space-around;
}
.thq-animated-group-horizontal {
gap: var(--dl-layout-space-unit);
display: flex;
animation: scroll-x 20s linear infinite;
min-width: 100%;
align-items: center;
flex-shrink: 0;
justify-content: space-around;
}
.thq-animated-group-container-vertical {
gap: var(--dl-layout-space-unit);
display: flex;
overflow: hidden;
flex-direction: column;
}
.thq-animated-group-container-horizontal {
gap: var(--dl-layout-space-unit);
display: flex;
overflow: hidden;
}
.thq-mask-image-vertical {
mask-image: linear-gradient(to bottom, transparent, black 1%, black 99%, transparent);
}
.thq-mask-image-horizontal {
mask-image: linear-gradient(to right, transparent, black 1%, black 99%, transparent);
}
.thq-img-scale {
transition: 0.3s;
}
.thq-img-scale:hover {
scale: 1.05;
}
.thq-animated-card-bg-1 {
width: 100%;
height: 100%;
transition: transform 0.3s;
border-radius: var(--dl-layout-radius-cardradius);
background-color: var(--dl-color-theme-accent1);
}
.thq-animated-card-bg-2 {
transition: transform 0.3s;
border-radius: var(--dl-layout-radius-cardradius);
background-color: var(--dl-color-theme-accent2);
}
.thq-button-animated {
outline: none;
z-index: 1;
overflow: hidden;
position: relative;
border-width: 2px;
}
.thq-input::placeholder {
text-align: center;
vertical-align: middle;
}
.thq-animated-group-container-vertical:hover div {
animation-play-state: paused;
}
.thq-animated-group-container-horizontal:hover div {
animation-play-state: paused;
}
.thq-animated-card-bg-2:has([data-animated="true"]:hover) {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3deg) skew(0deg, 0deg);
}
.thq-animated-card-bg-1:has([data-animated="true"]:hover) {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-6deg) skew(0deg, 0deg);
}
.thq-button-animated:before {
top: 0;
left: -20%;
color: var(--dl-color-theme-neutral-light);
width: 200%;
height: 101%;
content: "";
z-index: 1;
position: absolute;
transform: scaleX(0);
transition: transform 0.5s;
border-radius: var(--dl-layout-radius-buttonradius);
background-color: var(--dl-color-theme-neutral-dark);
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
}
.thq-button-animated:hover::before {
color: var(--dl-color-theme-neutral-light);
z-index: -1;
transform: scaleX(1);
}
.H5 {
font-size: 20px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.25;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.H3medium {
font-size: 30px;
font-family: "Montserrat";
font-weight: 500;
line-height: 1.15;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.B1semibold {
font-size: 16px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.B3 {
font-size: 12px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.H4 {
font-size: 22px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.25;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.B2 {
font-size: 14px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.H1semibold {
font-size: 48px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.15;
letter-spacing: -2.5%;
text-transform: none;
text-decoration: none;
}
.B4semibold {
font-size: 10px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.H4medium {
font-size: 22px;
font-family: "Montserrat";
font-weight: 500;
line-height: 1.25;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.B3semibold {
font-size: 12px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.H3semibold {
font-size: 30px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.15;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.H5medium {
font-size: 20px;
font-family: "Montserrat";
font-weight: 500;
line-height: 1.25;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.H1medium {
font-size: 48px;
font-family: "Montserrat";
font-weight: 500;
line-height: 1.15;
letter-spacing: -2.5%;
text-transform: none;
text-decoration: none;
}
.H3 {
font-size: 30px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.15;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.H5semibold {
font-size: 20px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.25;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.B1 {
font-size: 16px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.B1medium {
font-size: 16px;
font-family: "Montserrat";
font-weight: 500;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.H2medium {
font-size: 36px;
font-family: "Montserrat";
font-weight: 500;
line-height: 1.15;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.H4semibold {
font-size: 22px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.25;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.H2 {
font-size: 36px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.15;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
.H1 {
font-size: 48px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.15;
letter-spacing: -2.5%;
text-transform: none;
text-decoration: none;
}
.B4 {
font-size: 10px;
font-family: "Montserrat";
font-weight: 400;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.B2semibold {
font-size: 14px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.5;
letter-spacing: 1%;
text-transform: none;
text-decoration: none;
}
.H2semibold {
font-size: 36px;
font-family: "Montserrat";
font-weight: 600;
line-height: 1.15;
letter-spacing: -1.5%;
text-transform: none;
text-decoration: none;
}
@media(max-width: 900px) {
.thq-grid-4 {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media(max-width: 767px) {
.thq-section-padding {
padding: var(--dl-layout-space-threeunits);
}
.thq-flex-column {
gap: var(--dl-layout-space-oneandhalfunits);
}
.thq-flex-row {
gap: var(--dl-layout-space-oneandhalfunits);
}
.thq-grid-6 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-grid-5 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-card {
padding: var(--dl-layout-space-oneandhalfunits);
}
.thq-grid-3 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr 1fr;
}
.thq-grid-4 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
flex-direction: row;
grid-template-columns: 1fr 1fr;
}
.thq-grid-2 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr;
}
.thq-img-scale {
width: 100%;
}
}
@media(max-width: 479px) {
.thq-section-padding {
padding: var(--dl-layout-space-oneandhalfunits);
}
.thq-flex-column {
gap: var(--dl-layout-space-unit);
}
.thq-flex-row {
gap: var(--dl-layout-space-unit);
}
.thq-grid-6 {
grid-gap: var(--dl-layout-space-unit);
grid-template-columns: 1fr 1fr;
}
.thq-grid-5 {
grid-gap: var(--dl-layout-space-unit);
grid-template-columns: 1fr 1fr;
}
.thq-grid-3 {
grid-gap: var(--dl-layout-space-unit);
align-items: center;
grid-template-columns: 1fr;
}
.thq-grid-4 {
grid-gap: var(--dl-layout-space-unit);
align-items: center;
flex-direction: column;
grid-template-columns: 1fr;
}
.thq-grid-2 {
grid-gap: var(--dl-layout-space-unit);
}
.thq-grid-auto-300 {
grid-template-columns: 1fr;
}
}