/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,600,700);

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

@font-face {
    font-family: 'Harabara Mais Demo';
    src: url("../fonts/HarabaraMaisBold-HarabaraMaisBold.eot");
    src: url("../fonts/HarabaraMaisBold-HarabaraMaisBold.eot?#iefix") format("embedded-opentype"), url("../fonts/HarabaraMaisBold-HarabaraMaisBold.woff") format("woff"), url("../fonts/HarabaraMaisBold-HarabaraMaisBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

body {
    font-size: 16px;
    font-family: "Raleway", sans-serif
}

body.jp {
    font-size: 16px
}

ul {
    padding: 0
}

ul > li {
    list-style: none
}

a {
    color: #fff;
    text-decoration: none
}

button {
    border: 0;
    outline: none;
    background-color: transparent
}

main {
    min-height: 100vh;
    height: auto
}

.container {
    width: 100%;
    max-width: 1230px;
    padding: 0 15px;
    margin: auto;
    -webkit-transition: width 0.5s;
    transition: width 0.5s
}

.mb-md {
    margin-bottom: 0
}

.mbt {
    margin: 0 auto 50px !important
}

.mbt-2 {
    margin: 0 auto 50px !important
}

.grow-half {
    width: 35%
}

.visible-xs {
    display: none !important
}

@media (max-width: 767px) {
    .visible-xs {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important
    }
}

@-webkit-keyframes fade-up {
    from {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.animate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.animate.fade-up {
    -webkit-animation-name: fade-up;
    animation-name: fade-up
}

.brand {
    margin-bottom: -100px
}

.brand img {
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.brand:hover img {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
}

.dropdown {
    position: relative
}

.dropdown.active {
    background-color: #fff;
    color: #EF002F
}

.dropdown.active + i {
    color: #EF002F
}

.dropdown.active + i + .dropdown-menu {
    display: block
}

.dropdown i {
    padding: 0 0 0 15px
}

.dropdown-menu {
    width: auto !important;
    min-width: 180px;
    display: none;
    position: absolute;
    margin-top: 15px;
    margin-left: -50px;
    background-color: #fff;
    border-radius: 3px;
    padding: 5px;
    z-index: 100
}

.dropdown-menu li:hover a {
    background-color: #d9d9d9
}

.btn-play {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: url("../img/play_button.png") center no-repeat #fff;
    background-size: contain;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 10;
    margin: auto
}

.btn-play:hover {
    -webkit-transform: scale(0.6);
    transform: scale(0.6)
}

.btn-play.hide {
    opacity: 0;
    pointer-events: none
}

.btn-app {
    width: 290px;
    height: 90px;
    background: url("../img/app-button.png") center no-repeat #000;
    background-size: 111%;
    border-radius: 9px;
    border: 2px solid #fff
}

.btn-app:hover, .btn-app:active {
    border-color: #000
}

.btn-merchant, .btn-blue {
    width: 310px;
    height: 90px;
    background-color: #3498db;
    color: #fff;
    font-size: 1.9em;
    font-weight: 600;
    border-radius: 6px;
    display: inline-block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto
}

.btn-merchant:hover, .btn-blue:hover, .btn-merchant:active, .btn-blue:active {
    background-color: #1d6fa5
}

.btn-blue {
    width: 250px;
    height: 75px;
    margin: auto
}

.btn-toggle {
    width: 40px;
    height: 40px;
    display: none;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 250;
    -webkit-animation: fade 1.5s;
    animation: fade 1.5s
}

@media (max-width: 767px) {
    .btn-toggle {
        display: block
    }
}

.btn-toggle > span {
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background-color: #fff;
    display: block;
    margin-bottom: 5px;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s
}

.btn-toggle.active span {
    -webkit-animation: fade 0.5s;
    animation: fade 0.5s;
    background-color: #EF002F
}

.btn-toggle.active span:nth-child(2) {
    display: none
}

.btn-toggle.active span:first-child {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0;
    position: absolute
}

.btn-toggle.active span:last-child {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 0;
    position: absolute
}

.container-default {
    width: 100%;
    padding: 0 50px
}

.container-default.header {
    background-color: #EF002F;
    min-height: 100vh;
    position: relative
}

.container-default.red {
    background-color: #EF002F
}

.container-default.red > h1 {
    margin-top: 0;
    padding-top: 80px
}

.container-default.red .mdl-img {
    text-align: center
}

.container-default.red .mdl-img img {
    width: 100%;
    max-width: 300px
}

.container-default.red h2 {
    color: #fff;
    font-family: "Raleway", sans-serif
}

.container-default.red h2:last-child {
    padding-bottom: 60px;
    margin-bottom: 0
}

.container-default.grey {
    background-color: #fff;
    border-top: 2px solid #EF002F
}

.container-default.grey > h1 {
    color: #EF002F;
    margin-top: 0;
    padding-top: 85px
}

.container-default h1 {
    text-align: center;
    font-size: 5.7em;
    color: #fff;
    font-family: "Harabara Mais Demo", sans-serif;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto
}

.container-default h2 {
    font-size: 3.6em;
    color: #000;
    text-align: center;
    margin: 18px;
    font-weight: 700;
    font-family: "Harabara Mais Demo", sans-serif;
    text-transform: uppercase
}

.container-default .margin-h2 {
    margin-bottom: 40px
}

.container-default .btn-play {
    top: -50px;
    width: 180px;
    height: 180px
}

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 50
}

.container .item {
    opacity: 0;
    -webkit-animation: fade-up 1.5s forwards;
    animation: fade-up 1.5s forwards;
    text-align: center
}

.container .item h4 {
    color: #fff;
    font-size: 4em;
    font-family: "Harabara Mais Demo", sans-serif;
    margin: 15px 0
}

.container .item:nth-child(1) {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
}

.container .item:nth-child(2) {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms
}

.container .item:nth-child(3) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms
}

.container.resize {
    max-width: 1500px
}

.container-default-header {
    padding-top: 15px;
    margin-bottom: -60px
}

.container-default-header a, .container-default-header ul {
    width: 40%
}

.container-default-header p {
    margin: 0;
    text-align: center;
    line-height: 75px;
    font-size: 7.5em;
    color: #f2f2f2;
    font-weight: 700;
    margin-bottom: -183px
}

.container-video {
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: 0 15px
}

.container-video.resize {
    max-width: 700px
}

.container-video .item {
    width: 100%;
    text-align: center;
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%
}

.container-video .item .btn-play {
    top: 40px
}

.container-video .responsive-item, .container-video iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.img-container {
    width: 100%;
    max-width: 370px;
    height: 620px;
    position: relative;
    background: url(../img/Banner/iphone_full.png) top no-repeat;
    background-size: contain;
    opacity: 0;
    -webkit-animation: fade 0.9s 1s forwards;
    animation: fade 0.9s 1s forwards;
    padding: 79px 51px 85px
}

.img-container .iphone-screen {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 0;
    -webkit-animation: fade 1.5s 1.25s forwards;
    animation: fade 1.5s 1.25s forwards
}

.img-container img {
    width: 100%;
    position: relative;
    top: -2px;
    left: 0;
    margin-left: -1px;
    -webkit-animation-name: fade;
    animation-name: fade
}

.img-container-lg {
    max-width: 970px;
    margin: auto;
    position: relative;
    margin-top: 70px;
    margin-bottom: 70px
}

.img-container-lg img {
    width: 100%
}

.container-uses {
    margin-bottom: 80px
}

.container-uses:last-child {
    margin-bottom: 0;
    padding-bottom: 50px
}

.container-uses article.item {
    text-align: left;
    width: 33.3333%
}

.container-uses article.item h4 {
    color: #000;
    font-size: 1.5em
}

.container-uses article.item p {
    font-size: 1.1em
}

.container-uses .img-item {
    width: 66.6666%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.container-uses .img-item img {
    width: 33.333%
}

.footer > .container {
    margin-top: 70px;
    text-align: center
}

.footer > .container .brand {
    margin: auto
}

.footer .navbar {
    text-align: center;
    margin-top: 70px
}

.footer .navbar li {
    padding: 0 5px
}

.footer .navbar li a {
    color: #000;
    font-size: 16px;
    font-weight: 700
}

.footer .navbar-social {
    margin: auto;
    margin-top: 90px;
    width: 100%;
    max-width: 420px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.footer .navbar-social li {
    padding: 0
}

.footer .navbar-social li a {
    width: 100%;
    height: 100%;
    padding: 0 !important
}

.footer .navbar-social li a:hover img {
    opacity: 0.7
}

.footer .navbar-social li a img {
    width: 100%
}

.navbar-toggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    margin: 0;
    height: 100vh;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 200;
    opacity: 0;
    pointer-events: none
}

.navbar-toggle.open {
    -webkit-animation: fade 0.5s forwards;
    animation: fade 0.5s forwards;
    pointer-events: auto
}

.navbar-toggle.open li a {
    opacity: 0;
    color: #EF002F;
    padding: 20px;
    -webkit-animation: fade-up 1s forwards;
    animation: fade-up 1s forwards
}

.navbar-toggle.open li:nth-child(1) a {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
}

.navbar-toggle.open li:nth-child(2) a {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms
}

.navbar-toggle.open li:nth-child(3) a {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms
}

.navbar-toggle.open li:nth-child(4) a {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms
}

.ch .container-default h1, .cht .container-default h1 {
    height: 190px
}

.ch .container-default.about h1, .cht .container-default.about h1 {
    height: 101px
}

.jp .container-default h1 {
    font-size: 5.05em;
    letter-spacing: -2px;
    height: 210px
}

.jp .container-default.about h1 {
    height: 101px;
    font-size: 5.7em;
    letter-spacing: 0
}

.jp .container .item h4 {
    font-size: 3.4em;
    letter-spacing: -2px
}

@media (max-width: 1200px) {
    .jp .container .item h4 {
        font-size: 3em
    }
}

.jp .dropdown-menu {
    margin-left: -15px
}

.en .dropdown-menu {
    margin-left: 0
}

.nav-flex {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.nav-bottom {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -ms-grid-row-align: center;
    align-items: flex-end;
    position: relative;
    bottom: 0;
    left: 0;
    overflow: hidden;
    margin-top: -240px
}

.nav-bottom .navbar {
    width: 40%
}

.nav-bottom .navbar-social {
    width: 40%;
    text-align: right
}

.nav-bottom .img-container {
    bottom: -230px
}

.nav-bottom .img-container .btn-play {
    position: absolute;
    top: -250px;
    left: 50%;
    margin-left: -115px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.27);
    -webkit-animation: fade-up 1s;
    animation: fade-up 1s
}

.navbar li {
    display: inline-block;
    text-transform: uppercase;
    text-align: left;
    position: relative
}

.navbar li i {
    color: #fff;
    position: absolute;
    right: 11px;
    top: 11px
}

.navbar a, .navbar button {
    padding: 8.33333px 14px;
    display: block;
    border-radius: 3px;
    -webkit-transition: background 0.5s, color 0.5s, border 0.5s;
    transition: background 0.5s, color 0.5s, border 0.5s;
    font-weight: 600;
    border: 2px solid transparent;
    color: #fff
}

.navbar a.dropdown, .navbar button.dropdown {
    padding-right: 28px
}

.navbar a.active, .navbar button.active {
    border: 2px solid #fff
}

.navbar a:hover, .navbar button:hover {
    background-color: #fff;
    color: #EF002F;
    border: 2px solid #fff
}

.navbar a:hover + i, .navbar button:hover + i {
    color: #EF002F
}

.navbar button {
    font-weight: 600;
    padding: 8.33333px 14px;
    text-transform: uppercase
}

.navbar .dropdown-menu li {
    display: block;
    padding: 0
}

.navbar .dropdown-menu li a {
    padding: 15px;
    color: #EF002F;
    font-weight: 600;
    display: block
}

.navbar.black {
    text-align: right
}

.navbar.black li a, .navbar.black li button {
    width: 100%;
    color: #000;
    -webkit-transition: background 0.5s, color 0.5s, border 0.5s;
    transition: background 0.5s, color 0.5s, border 0.5s
}

.navbar.black li a.active, .navbar.black li button.active {
    border-color: #000
}

.navbar.black li a:hover, .navbar.black li button:hover {
    border-color: #EF002F;
    color: #EF002F
}

.navbar.black .dropdown-menu {
    background-color: #d9d9d9
}

.navbar-social li {
    display: inline-block;
    padding: 0 10px
}

.navbar-social li a {
    padding: 15px 20px;
    width: 80px;
    height: 80px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    font-size: 2.3em;
    -webkit-transition: background 0.25s;
    transition: background 0.25s
}

.navbar-social li a:hover {
    background-color: #fff
}

.navbar-social li a:hover i {
    color: #EF002F
}

.navbar-social li:first-child a {
    padding-right: 28px
}

.header.about {
    min-height: 55vh;
    border: 1px solid #000
}

.header.about h1 {
    margin: 0 auto
}

.header.about .nav-bottom {
    margin: 0
}

.header.about .brand {
    margin-bottom: -41px
}

.header.about .container-flex {
    margin: 70px auto 0 auto;
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    font-size: 1.4em;
    line-height: 1.25em;
    font-weight: 400;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.header.about .container-flex .text {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    padding-right: 40px;
    min-width: 600px;
    margin-bottom: 30px
}

.header.about .container-flex .adress {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 300px
}

.header.about .fa {
    font-size: 0.6em
}

.header.about .fa.fa-angle-down {
    font-size: 16px
}

.header.about .jp-adress {
    margin: 0 auto;
    text-align: left
}

.header.about .jp-adress tr td:first-child {
    padding-right: 40px
}

.header.about .navbar-social li a {
    font-size: 70px
}

.jp .header.about .container-flex {
    font-size: 1.2em
}

.about-block {
    margin-top: 40px;
    min-height: 324px;
    background: #fff;
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    max-width: 1200px;
    margin: 0 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.about-block-img {
    width: 240px;
    height: 265px;
    margin-bottom: 20px
}

.about-block-img img {
    height: 240px;
    width: 220px
}

.about-block p {
    margin-top: 5px
}

.download-button-area .app-store,
.download-button-area .google-play {
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.8s ease;
    margin: 5px 0;
    height: 66px;
    width: 180px;
}

.download-button-area .app-store:hover,
.download-button-area .google-play:hover {
    opacity: 1;
}

.app-store {
    background-image: url('/images/app_store.png');
    background-repeat: no-repeat;
    background-color:transparent;
    -webkit-background-size: cover;
    background-size: contain;
    background-position: center center;
}

.google-play {
    background-image: url('/images/google_play.png');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: contain;
    background-position: center center;
}

.navbar-social li a.blog-anchor {
    border:none;
    border-radius: 0;
    padding: 0;
    width: auto;
}

.navbar-social li a.blog-anchor:hover {
    background: none;
}

@media (max-width: 1600px) {
    body {
        font-size: 16px
    }
}

@media (max-width: 1280px) {
    body {
        font-size: 14px
    }

    .btn-app {
        width: 180px;
        height: 60px
    }

    .btn-merchant, .btn-blue {
        font-size: 1em;
        width: 180px;
        height: 60px
    }

    .navbar-social li a {
        width: 50px;
        height: 50px;
        padding: 6px 10px
    }

    .navbar-social li a:first-child {
        padding-right: 14px
    }

    .container-default {
        padding: 0 15px
    }

    .container-default .btn-play {
        top: -30px
    }

    .nav-bottom {
        margin-top: -180px
    }

    .nav-bottom .navbar {
        margin-left: 0
    }

    .nav-bottom .img-container .btn-play {
        width: 180px;
        height: 180px;
        margin-left: -90px;
        margin-top: -165px
    }

    .brand {
        margin-bottom: -65px
    }

    .brand img {
        width: 100px
    }

    .container-default-header p {
        line-height: 70px;
        margin-bottom: -160px
    }

    .about .navbar-social li a:first-child {
        padding-right: 9px
    }

    .about-block {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .header.about {
        min-height: 52vh
    }

    .header.about .navbar-social li a {
        font-size: 2.3em
    }
}

@media (max-width: 1280px) and (max-height: 800px) {
    .container-default.header {
        min-height: calc(100vh + 230px)
    }
}

@media (max-width: 1200px) {
    .nav-bottom {
        padding-bottom: 0;
        height: 400px;
        position: absolute
    }

    .nav-bottom .img-container {
        position: absolute;
        left: 50%;
        margin-left: -185px;
        max-width: 260px;
        margin-left: -130px;
        padding: 64px 21px 85px;
        bottom: -355px
    }

    .nav-bottom .img-container .btn-play {
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -170px
    }

    .nav-bottom .navbar-social, .nav-bottom .navbar {
        width: 100%
    }

    .btn-play {
        width: 140px;
        height: 140px
    }

    .container-video .item .btn-play {
        top: 60px
    }

    .navbar a:hover, .navbar button:hover {
        background: transparent;
        border-color: transparent;
        color: #fff
    }

    .navbar a:hover + i, .navbar button:hover + i {
        color: #fff
    }

    .navbar .dropdown.active {
        border-color: #fff !important;
        background-color: #fff !important;
        color: #EF002F
    }

    .navbar .dropdown.active + i {
        color: #EF002F
    }
}

@media (max-width: 1150px) {
    .header.about .container-flex {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media (max-width: 1024px) and (max-height: 768px) {
    .nav-bottom {
        position: relative;
        margin-top: -100px
    }
}

@media (max-width: 992px) {
    .container-uses .item:nth-child(1) {
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0
    }

    .container-default .btn-play {
        top: 0
    }

    .navbar a {
        padding-left: 7px;
        padding-right: 7px
    }
}

@media (max-width: 767px) {
    .jp .container-default h1, .ch .container-default h1, .cht .container-default h1 {
        height: auto
    }

    .jp .container-default h1 {
        font-size: 3.4em
    }

    .container {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .container .item {
        width: 100%
    }

    .container .item:nth-child(1), .container .item:nth-child(3) {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }

    .container .item.container-video {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        -webkit-animation: none;
        animation: none;
        opacity: 1
    }

    .container .item.container-video .item {
        -webkit-animation: none;
        animation: none;
        opacity: 1
    }

    .container-default {
        padding: 0 5px
    }

    .container-default h1 {
        font-size: 3.7em;
        height: auto
    }

    .container-default h2 {
        font-size: 1.3em
    }

    .container-default .btn-play {
        width: 65px;
        height: 65px
    }

    .brand {
        margin: 0
    }

    .brand img {
        width: 70px
    }

    .mb-md {
        margin-bottom: 30px
    }

    .container .item h4 {
        font-size: 2em
    }

    .btn-play {
        width: 80px;
        height: 80px;
        top: 0
    }

    .btn-play:hover, .btn-play:active {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }

    .container-video .item .btn-play {
        top: 85px
    }

    .container-default-header {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0
    }

    .container-default-header > a {
        width: 100%;
        text-align: center
    }

    .container-default-header > p {
        display: block;
        width: 100%;
        font-size: 57px;
        line-height: 40px;
        margin-bottom: -270px
    }

    .container-default-header .navbar {
        width: 100%;
        text-align: center
    }

    .nav-top {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .nav-top .brand, .nav-top .navbar {
        width: 100%;
        text-align: center
    }

    .container-uses {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .container-uses article.item {
        width: 100%;
        text-align: center
    }

    .container-uses .img-item {
        width: 100%;
        max-width: 320px;
        margin: auto
    }

    .navbar .delimer {
        display: none
    }

    .nav-bottom {
        height: auto;
        margin-top: 0;
        position: relative;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .nav-bottom .navbar.animate {
        text-align: center;
        -webkit-box-ordinal-group: 6;
        -webkit-order: 5;
        -ms-flex-order: 5;
        order: 5
    }

    .nav-bottom .navbar {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .nav-bottom .img-container {
        height: 510px;
        position: relative;
        left: 0;
        top: 0;
        margin: 30px auto 0;
        padding: 64px 21px 77px;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }

    .nav-bottom .navbar-social {
        text-align: center;
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4
    }

    .nav-bottom .btn-merchant-block {
        width: 100%;
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4
    }

    .hidden-xs {
        display: none !important
    }

    .container > .item a, .container > .item button {
        margin: 30px 0 0
    }

    .btn-blue {
        font-size: 1.5em
    }

    .header.about h1 {
        margin-top: 46px;
        font-size: 3em !important;
        height: 58px !important
    }

    .header.about .container-flex {
        display: block;
        font-size: 1.3em;
        line-height: 1.25em;
        margin-top: 5px
    }

    .header.about .container-flex .adress {
        margin-top: 20px
    }

    .header.about .container-flex .text {
        min-width: 100%;
        padding-right: 15px;
        padding-left: 15px
    }

    .header.about .jp-adress tr td:first-child {
        padding-right: 20px;
        min-width: 136px
    }
}

@media (max-width: 500px) {
    .container .container-video {
        padding: 0;
        margin: 0 -20px;
        width: calc(100% + 40px)
    }

    .container-video.mbt {
        padding: 0;
        margin: 0 -5px !important;
        width: calc(100% + 10px);
        padding-bottom: 50px
    }

    .container-video.mbt-2 {
        padding: 0;
        margin: 0 -5px !important;
        width: calc(100% + 10px);
        padding-bottom: 10px
    }

    .container-default h1 {
        font-size: 3.55em
    }
}

@media (max-width: 412px) {
    .container-default h1 {
        font-size: 3.18em
    }
}

@media (max-width: 374px) {
    .container-video .item .btn-play {
        top: 60px
    }

    .container-default h1 {
        font-size: 2.7em
    }
}

@media (max-width: 320px) {
    .container-video .item .btn-play {
        width: 50px;
        height: 50px
    }

    .container-default h2 {
        font-size: 1.1em
    }
}

@media (max-height: 800px) {
    .img-container {
        bottom: -260px
    }
}

@media (max-height: 780px) {
    .container-default.header {
        min-height: 100vh
    }

    .container-default.header.about {
        min-height: 50vh
    }
}