@charset "UTF-8";
/* Fonts */
 @font-face {
    font-family: "Bahnschrift";
     src: url("../fonts/Bahnschrift/0a6ee448d1bd65c56f6cf256a7c6f20a.eot");
    /* IE9*/
     src: url("../fonts/Bahnschrift/0a6ee448d1bd65c56f6cf256a7c6f20a.eot?#iefix") format("embedded-opentype"), 
    /* IE6-IE8 */
     url("../fonts/Bahnschrift/0a6ee448d1bd65c56f6cf256a7c6f20a.woff2") format("woff2"), 
    /* chrome、firefox */
     url("../fonts/Bahnschrift/0a6ee448d1bd65c56f6cf256a7c6f20a.woff") format("woff"), 
    /* chrome、firefox */
     url("../fonts/Bahnschrift/0a6ee448d1bd65c56f6cf256a7c6f20a.ttf") format("truetype"), 
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
     url("../fonts/Bahnschrift/0a6ee448d1bd65c56f6cf256a7c6f20a.svg#Bahnschrift") format("svg");
    /* iOS 4.1- */
}
 body{
     font-family: 'Montserrat', sans-serif;
}
/* Default Styles */
 h1{
     font-size: 72px;
     font-weight: 400;
     font-family: "Bahnschrift";
     text-transform: uppercase;
     letter-spacing: 4px;
     margin: 0px;
     line-height: 1;
}
 h2{
     font-size: 48px;
     font-weight: bold;
     font-family: "Bahnschrift";
     text-transform: uppercase;
     letter-spacing: 3px;
     font-weight: 400;
     margin: 0px;
}
 p{
     font-size: 24px;
     line-height: 42px;
     font-weight: normal;
}
 p.small {
     color: #192233;
     font-size: 20px;
     line-height: 32px;
}
 .defaultBtn {
     border: 2px solid #FFF;
     padding: 10px 20px;
     line-height: 1;
     font-size: 18px;
     font-weight: 500;
     color: #FFF;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
     height: 53px;
     display: inline-flex;
     align-items: center;
     border-radius: 5px;
}
 .defaultBtn.filled{
     background: #FFF;
     color: #000;
}
 .defaultBtn:hover img{
     filter: invert(100%);
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
 .defaultBtn img{
     margin-left:15px;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
 .defaultBtn.filled img{
     filter: invert(100%);
}
 .defaultBtn:hover{
     background: #FFF;
     color: #000;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
 .buttonGroup button + a {
     margin-left: 27px;
     outline: none;
     box-shadow: none !important;
}
 .soon {
     font-size: 20px;
     font-weight: 600;
     color: #192233;
     margin-bottom: 30px;
}
/* Header Main */
 .mainHeader{
     z-index: 9;
}
 .mainHeader.darkHeader {
     background: #192233;
     position: sticky !important;
     top: 0;
}
 .mainHeader .d-flex{
     height: 118px;
}
 .mainHeader .container {
     max-width: 2000px;
     padding: 0 50px;
}
 .menuArea .navbar {
     margin: 0;
     padding: 0;
}
 .menuArea .navbar .navbar-nav .nav-item .nav-link {
     padding: 0;
     font-size: 15px;
     font-weight: 400;
     color: #FFF;
     position: relative;
}
 .menuArea .navbar .navbar-nav .nav-item .nav-link::after {
     width: 0px;
     background: #339c5e;
     height: 2px;
     position: absolute;
     content: "";
     left: 0;
     bottom: -14px;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
 .mainHeader.darkHeader .menuArea .navbar .navbar-nav .nav-item .nav-link:hover::after,  .mainHeader.darkHeader .menuArea .navbar .navbar-nav .nav-item .nav-link.active::after {
     width: 40px;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
 .mainHeader.darkHeader .menuArea .navbar .navbar-nav .nav-item .nav-link:hover, .mainHeader.darkHeader .menuArea .navbar .navbar-nav .nav-item .nav-link.active {
     color: #339c5e;
}
 .menuArea .navbar .navbar-nav .nav-item {
     margin: 0 15px;
}
 .menuArea .navbar .navbar-nav .nav-item:first-child{
     margin-left: 0px;
}
 .mainHeader .navbar-brand {
     top: 25px;
     padding: 0;
     width: 180px;
     text-align: center;
}
 .navbar-brand::after {
     background: url(../images/logoBottom.png) top center no-repeat;
     width: 248px;
     height: 42px;
     content: "";
     position: absolute;
     bottom: -13px;
     left: -34px;
     z-index: -1;
     opacity: 0;
}
 .navbar-brand .blueLogo{
     display: none;
}
 .mainHeader.darkHeader .navbar-brand{
     top: 20px;
}
 .mainHeader.darkHeader .whiteLogo{
     display: none;
}
 .mainHeader.darkHeader .blueLogo {
     display: block;
     margin: 0 auto;
}
 .mainHeader.darkHeader .navbar-brand::after{
     opacity: 1;
}
/* Main Banner */
 .bannerSection{
     background: url(../images/banner-bg.jpg) center center no-repeat;
     background-size:cover;
     min-height:1070px;
     height: 100vh;
     padding-top: 220px;
}
 .sliderArea img {
     max-width: 100%;
}
 .sliderArea{
     margin-bottom: 35px;
}
 .textAreaBanner{
     text-align: center;
     color: #FFF;
}
 .textAreaBanner h1 {
     margin-bottom: 20px;
}
 .textAreaBanner p {
     width: 1025px;
     margin: 0 auto 50px;
}
 .bottomBtnSection {
     -ms-writing-mode: tb-rl;
     -webkit-writing-mode: vertical-rl;
     writing-mode: vertical-rl;
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
     white-space: nowrap;
     font-size: 18px;
     text-decoration: none;
     color: #FFF;
     text-transform: uppercase;
     bottom: 75px;
     position: absolute;
     right: 50px;
     font-family: "Bahnschrift";
     letter-spacing: 3px;
}
 .bottomBtnSection::after {
     width: 2px;
     height: 50px;
     background: #FFF;
     position: absolute;
     top: -74px;
     content: "";
     left: 13px;
}
 .bottomBtnSection:hover{
     color: #FFF;
}

/* About */
 .aboutSection {
     background: url(../images/bg.jpg) top right #f0f0fc;
     background-size: contain;
     background-repeat: no-repeat;
     min-height: 950px;
     height: 100vh;
}
 .aboutSection img{
     max-width: 100%;
}
 .aboutData {
     padding-left: 60px;
}
 .aboutData h2 span{
     color:#339c5e;
}
 .aboutData h2{
     margin-bottom: 25px;
}
 .aboutData a.btn{
     border-color:#192233;
     color: #192233;
}
 .aboutData p{
     margin-bottom: 70px;
}
 .aboutData .defaultBtn img {
     filter: invert(100%);
}
 .bottomBtnSection.darkColor {
     color: #192233;
}
 .bottomBtnSection.darkColor::after{
     background: #192233;
}
/* point sale */
 .pointSection{
     background: url(../images/bg1.jpg) center center no-repeat;
}
 .pointSection h2{
     color:#FFF;
}
    .pointSection h2 .darkColor, body .darkColor {
        color: #339c5e;
    }
    .pointSection h2 .darkBlueColor, body .darkBlueColor {
        color: #192233;
    }
 .pointSection p{
     margin-bottom: 35px;
     color:#FFF;
}
 .pointSection .row + .row{
     margin-top:75px;
}
/* Sheet Section */
 .sheetSection{
     background: url(../images/bg2.jpg) center center no-repeat;
}
 .sheetSection h2, .bookingText h2, .mobileSection h2, .eloSection h2, .cloverSection h2{
     margin-bottom: 30px;
}
 .sheetSection p{
     margin-bottom: 45px;
}
/* Booking Section */
 .bookingSection{
     background: url(../images/bg3.jpg) center center no-repeat;
}
 .bookingText{
     padding-left: 60px;
     color: #FFF;
}
 .bookingText p{
     color: #FFF;
}
/* mobileSection */
 .mobileSection{
     background: url(../images/bg4.jpg) center center no-repeat;
}
 .mobileSection p, .mobileSection h2{
     color: #FFF;
}
 .buttonsApp {
     margin-top: 60px;
}
 .buttonsApp a {
     width: 215px;
}
 .buttonsApp a img {
     max-width: 100%;
}
 .buttonsApp a + a {
     margin-left: 40px;
}
/* Elo Section */
 .eloSection{
     background: url(../images/bg5.jpg) center center no-repeat;
}
/* Clover Section */
 .cloverSection{
     background: url(../images/bg6.jpg) center center no-repeat;
}
 .cloverSection h2, .cloverSection p, .cloverSection .soon{
     color: #FFF;
}
 .deviceImage {
     margin-left: -290px;
}
/* Give Section */
 .giveSection{
     background: url(../images/bg7.jpg) center center no-repeat;
}
 .formText h2{
     color: #FFF;
     margin-bottom: 15px;
}
 .formText p{
     font-size:24px;
     line-height: 32px;
     margin-bottom: 20px;
     color: #FFF;
}
.formText li {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 8px;
    color: #FFF;
}
 .formContact input, .formContact textarea {
     width: 100%;
     background: transparent;
     color: #FFF;
     border: 0;
     border-bottom: 1px solid #FFF;
     margin-bottom: 40px;
     height: 55px;
     font-size: 20px;
     outline: none !important;
}
 .formContact textarea {
     height: 150px;
     resize: none;
}
 .formContact button{
     float:right;
}
 .formContact ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
     color: #FFF;
     opacity: 1;
}
 .formContact ::-moz-placeholder {
    /* Firefox 19+ */
     color: #FFF;
     opacity: 1;
}
 .formContact :-ms-input-placeholder {
    /* IE 10+ */
     color: #FFF;
     opacity: 1;
}
 .formContact :-moz-placeholder {
    /* Firefox 18- */
     color: #FFF;
     opacity: 1;
}
 .copyRightSection ul {
     padding: 0;
     display: flex;
     list-style-type: none;
     margin: 0;
     margin-right: 45px;
}
 .copyRightSection ul li {
     margin-right: 15px;
}
 .copyRightSection p{
     font-size: 16px;
     font-weight: 300;
     color: #FFF;
     margin: 0px;
}
 .bottomBtnSection.backtop {
     bottom: 50px;
}
 .bottomBtnSection.backtop::after {
     bottom: -74px;
     top: auto;
}
.linkId{
    position: absolute;
    top: 0px;
    height: 1px;
    width: 100%;
}
/* Section Data to Center */
 .pointSection, .sheetSection, .mobileSection, .bookingSection, .eloSection, .cloverSection, .giveSection{
     background-size: cover;
     background-repeat: no-repeat;
     min-height: 100vh;
     padding: 160px 0 30px;
}
/* Iphone Slider */
.mobileSlider  .slick-slide, .sliderArea .slick-slide{
    transition: all 0.5s;
}
.mobileSlider  .slick-slide.slick-current.slick-active.slick-center {
	z-index: 99999;
	position: relative;
	transform: scale(1.3);
}
.mobileSlider .slick-slide img{
    max-width: 100%;
}
.mobileSlider .slick-list.draggable {
	padding: 80px 0 !important;
}

.slick-dots {
  list-style-type: none;
  text-align: center;
  margin-top: 45px;
}
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
  opacity: 0.35;
}
.slick-dots li button {
  background: none;
  border: 0;
  font-size: 0;
    outline: none;
    width: 35px;
  height: 5px;
    background: #FFF;
  border-radius: 5px;
    cursor: pointer;
}
.slick-dots li.slick-active {
  opacity: 1;
}
.sliderArea .slick-list.draggable {
	padding: 60px 0 !important;
}
.sliderArea .slick-slide img, .sliderArea .slick-slide div{
    display: block;
    line-height: 1;
    float: left;
}
.sliderArea .slick-slide.slick-current.slick-active.slick-center {
	z-index: 99999;
	position: relative;
	transform: scale(1.3);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.sliderArea .slick-dots {
    margin: 15px 0 0;
}
.stickyHeader {
	opacity: 0;
	transform: translateY(-100%);
    transition: all 0.5s;
}
.stickyHeader.darkHeader{
    opacity: 1;
    transform: translateY(00%);
    transition: all 0.5s;
}