a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box
}

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

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

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

@font-face {
    font-family: iconfont;
    src: url(assets/fonts/iconfont.eot);
    src: url(assets/fonts/iconfont.eot?#iefix) format('eot'), url(assets/fonts/iconfont.woff) format('woff'), url(assets/fonts/iconfont.ttf) format('truetype'), url(assets/fonts/iconfont.svg#iconfont) format('svg')
}

[class*=" icon-"]:after,
[class*=" icon-"]:before,
[class^=icon-]:after,
[class^=icon-]:before {
    font-family: iconfont;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000;
    line-height: 1.25
}

p b,
p strong {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: normal
}

p b em,
p strong em {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: italic
}

p em {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: italic
}

p em b,
p em strong {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-style: italic
}

strong {
    font-weight: 700
}

a {
    color: #33f;
    text-decoration: none;
    -webkit-transition: color .15s linear;
    transition: color .15s linear
}

a:active,
a:focus,
a:hover {
    color: #00c;
    text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -1px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased
}

.t1,
h1 {
    font-size: 3em;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1em;
    margin-bottom: .5em
}

.t2,
h2 {
    font-size: 2.25em;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1em;
    margin-bottom: .5em
}

.t3,
h3 {
    font-size: 2em;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1em;
    margin-bottom: .5em
}

.t4,
h4 {
    font-size: 1.5em;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1em;
    margin-bottom: .5em
}

.t5,
h5 {
    font-size: 1.125em;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1em;
    margin-bottom: .5em
}

.t6,
h6 {
    font-size: 1em;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1em;
    margin-bottom: .5em
}

.p1,
p {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    line-height: 1.25em;
    margin-bottom: 1em
}

.p2 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .9375em;
    line-height: 1.2em;
    margin-bottom: 1.06667em
}

.p3 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .875em;
    line-height: 1.21429em;
    margin-bottom: 1.14286em
}

@media (max-width:48em) {
    .t1,
    h1 {
        font-size: 2em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1em
    }
    .t2,
    h2 {
        font-size: 1.5em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1em
    }
    .t3,
    h3 {
        font-size: 1.25em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1em
    }
    .t4,
    h4 {
        font-size: 1.125em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1em
    }
    .t5,
    h5 {
        font-size: 1em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1em
    }
    .t6,
    h6 {
        font-size: 1em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1em
    }
    .p1,
    p {
        font-size: .875em;
        line-height: .82353em
    }
    .p2 {
        font-size: .8125em;
        line-height: 1.23077em
    }
    .p3 {
        font-size: .75em;
        line-height: 1.25em
    }
}

.util-center-vertical {
    display: table;
    height: 100%;
    width: 100%
}

.util-center-vertical__inner {
    display: table-cell;
    vertical-align: middle
}

html {
    box-sizing: border-box
}

*,
::after,
::before {
    box-sizing: inherit
}

.out {
    display: none
}

.visible-desktop {
    display: inherit!important
}

.visible-phone {
    display: none!important
}

.hidden-desktop {
    display: none!important
}

@media (max-width:48em) {
    .hidden-desktop {
        display: inherit!important
    }
    .hidden-phone {
        display: none!important
    }
    .visible-desktop {
        display: none!important
    }
    .visible-phone {
        display: inherit!important
    }
}

html {
    height: 100%;
    width: 100%
}

html body {
    height: 100%;
    width: 100%;
    overflow: hidden
}

[data-concept] {
    display: none
}

[data-concept].is-ready {
    display: block
}

.border-l,
.border-r {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    background: #000;
    z-index: 10000
}

.border-l {
    left: 0
}

.border-r {
    right: 0
}

.border-b,
.border-t {
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    background: #000;
    z-index: 10000
}

.border-t {
    top: 0
}

.border-b {
    bottom: 0
}

.device-animation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

.device-animation .animation-container {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition: -webkit-transform 1.1s ease;
    transition: transform 1.1s ease
}

.device-animation img {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 1
}

.device-animation .btn-active {
    margin: 0;
    left: 0;
    top: 0;
    z-index: 0;
    display: none
}

.device-animation .text1 {
    opacity: 0;
    background-color: rgba(251, 8, 17, .75);
    -webkit-transition: opacity .2s step-start .5s;
    transition: opacity .2s step-start .5s
}

.device-animation .text2 {
    opacity: 0;
    background-color: rgba(251, 8, 17, .75);
    -webkit-transition: opacity .2s step-start 2s;
    transition: opacity .2s step-start 2s
}

.device-animation .finger-container {
    position: absolute;
    z-index: 0;
    -webkit-transition: -webkit-transform .75s ease 3s;
    transition: transform .75s ease 3s
}

.device-animation .finger-container .finger {
    -webkit-transition: -webkit-transform .2s ease;
    transition: transform .2s ease
}

.device-animation.animation-start .text1 {
    opacity: 1
}

.device-animation.animation-start .text2 {
    opacity: 1
}

.device-animation.animation-finger-press .btn-active {
    display: block
}

.device-animation.animation-zoom .text1 {
    display: none
}

.device-animation.animation-zoom .text2 {
    display: none
}

.device-animation.animation-zoom .finger {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 0
}

.endframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0);
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
    overflow: hidden
}

.endframe .logo {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    z-index: 0
}

.endframe .nmls {
    position: absolute;
    opacity: 0;
    -webkit-transition: .75s opacity 1s;
    transition: .75s opacity 1s
}

.endframe .copy-wrap {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    -webkit-transition: .75s opacity 1.4s;
    transition: .75s opacity 1.4s
}

.endframe .copy {
    display: block;
    margin: 0 auto;
    opacity: 0
}

.endframe .ctag {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.endframe .btn-wrap {
    position: absolute;
    opacity: 0;
    -webkit-transition: .75s opacity 3s;
    transition: .75s opacity 3s;
    z-index: -1
}

.endframe .btn-wrap .arrow {
    position: absolute;
    right: 18px;
    top: 6px;
    -webkit-transition: -webkit-transform .15s ease;
    transition: transform .15s ease
}

.endframe .btn-wrap:hover .arrow {
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px)
}

.endframe.in {
    background: #fff
}

.endframe.in .btn-wrap,
.endframe.in .copy,
.endframe.in .copy-wrap,
.endframe.in .logo,
.endframe.in .nmls {
    opacity: 1
}

.endframe.in .btn-wrap {
    z-index: 2
}

.unit-728-x-90 {
    position: relative;
    width: 728px;
    height: 90px;
    overflow: hidden
}

.unit-728-x-90 .device-animation .text1 {
    left: 20px;
    right: auto;
    top: 24px
}

.unit-728-x-90 .device-animation .text2 {
    right: 20px;
    left: auto;
    top: 24px
}

.unit-728-x-90 .device-animation .finger-container {
    bottom: 0;
    left: 345px
}

.unit-728-x-90 .device-animation.animation-start .animation-container {
    background-position: 0 -190px
}

.unit-728-x-90 .device-animation.animation-start .finger-container {
    -webkit-transform: translateY(-55px);
    -ms-transform: translateY(-55px);
    transform: translateY(-55px)
}

.unit-728-x-90 .device-animation.animation-finger-press .finger-container .finger {
    -webkit-transform: translateY(-3px) scale(.95);
    -ms-transform: translateY(-3px) scale(.95);
    transform: translateY(-3px) scale(.95)
}

.unit-728-x-90 .device-animation.animation-zoom .animation-container {
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}

.unit-728-x-90 .device-animation .animation-container {
    -webkit-transition: background-position 3s ease, -webkit-transform .7s ease;
    transition: background-position 3s ease, transform .7s ease
}

.unit-728-x-90 .endframe {
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.unit-728-x-90 .endframe .logo {
    bottom: 17px;
    left: 272px;
    height: 67px;
    width: 146px;
    -webkit-transform: translate(14px, 118px) scale(.55);
    -ms-transform: translate(14px, 118px) scale(.55);
    transform: translate(14px, 118px) scale(.55)
}

.unit-728-x-90 .endframe.animation-start .logo {
    -webkit-transition: -webkit-transform 3s ease;
    transition: transform 3s ease;
    -webkit-transform: translate(14px, -75px) scale(.55);
    -ms-transform: translate(14px, -75px) scale(.55);
    transform: translate(14px, -75px) scale(.55)
}

.unit-728-x-90 .endframe .nmls {
    top: 77px;
    right: 16px;
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.unit-728-x-90 .endframe .copy-wrap {
    top: 20px;
    left: 16px;
    -webkit-transition-delay: .8s;
    transition-delay: .8s
}

.unit-728-x-90 .endframe .copy-wrap .copy {
    margin: 0
}

.unit-728-x-90 .endframe .btn-wrap {
    top: 46px;
    left: 15px;
    -webkit-transition-delay: 2.2s;
    transition-delay: 2.2s
}

.unit-728-x-90 .endframe.in .logo {
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    -webkit-transform: translate(300px, 2px) scale(1);
    -ms-transform: translate(300px, 2px) scale(1);
    transform: translate(300px, 2px) scale(1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.unit-728-x-90.concept-office-male-phone .device-animation .finger-container {
    bottom: -15px
}

.unit-728-x-90.concept-kitchen-female-phone .device-animation.animation-start .animation-container {
    background-position: 0 -185px
}

.unit-728-x-90.concept-living-room-female-tablet .device-animation.animation-start .animation-container {
    background-position: 0 -178px
}

.unit-728-x-90.concept-living-room-female-tablet .endframe .logo {
    -webkit-transform: translate(14px, 108px) scale(.75);
    -ms-transform: translate(14px, 108px) scale(.75);
    transform: translate(14px, 108px) scale(.75)
}

.unit-728-x-90.concept-living-room-female-tablet .endframe.animation-start .logo {
    -webkit-transform: translate(14px, -85px) scale(.75);
    -ms-transform: translate(14px, -85px) scale(.75);
    transform: translate(14px, -85px) scale(.75)
}

.unit-728-x-90.concept-living-room-female-tablet .endframe.in .logo {
    -webkit-transform: translate(300px, 2px) scale(.69);
    -ms-transform: translate(300px, 2px) scale(.69);
    transform: translate(300px, 2px) scale(.69)
}

.unit-728-x-90.concept-living-room-female-tablet .finger-container {
    bottom: -22px
}