img {
    max-width: 100%;
    height: auto
}

body {
    margin: 0 !important
}

.btn:hover {
    opacity: .8
}

.banner {
    padding: 73px 0 65px 0;
    background: url(/assets/images/ios/banner-pic.png) #f2f2f2 no-repeat;
    background-position: 1100px 52px
}

.banner h3 {
    font-size: 26px;
    font-weight: 400;
    font-family: "Myriad Pro";
    color: #091871;
    line-height: 1
}

.banner h1 {
    font-size: 50px;
    font-family: "myriad blod";
    font-weight: 700;
    color: #091871;
    margin: 3px 0 10px 0
}

.banner .des {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    line-height: 30px;
    max-width: 721px
}

.banner .list {
    margin: 30px 0 50px 0
}

.banner .list li {
    position: relative;
    font-size: 20px;
    font-weight: 400;
    color: #333;
    line-height: 40px;
    padding-left: 25px
}

.banner .list li:before {
    position: absolute;
    left: 0;
    top: 12px;
    width: 12px;
    height: 12px;
    content: "";
    display: inline-block;
    background: url(/assets/images/ios/gou.png) no-repeat
}

.banner .btn {
    min-width: 240px;
    height: 60px;
    background: #5683f4;
    -webkit-box-shadow: 0 3px 9px 0 rgba(48, 79, 7, .25);
    box-shadow: 0 3px 9px 0 rgba(48, 79, 7, .25);
    border-radius: 10px;
    font-size: 22px;
    color: #fff;
    line-height: 60px
}

.banner .qr {
    margin-left: 40px
}

@media screen and (max-width:1200px) {
    .banner {
        background: #f2f2f2
    }
}

@media screen and (max-width:428px) {
    .banner {
        text-align: center
    }

    .banner .list {
        display: table;
        margin: 30px auto;
        text-align: left
    }

    .banner .qr {
        display: block;
        margin: 30px auto
    }
}

h2 {
    color: #1a1a1a;
    font-size: 40px
}

.point {
    padding: 103px 0 90px 0;
    background: #fff;
    text-align: center
}

.point h2 {
    font-size: 40px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 48px
}

.point h4 {
    font-size: 22px;
    margin: 0 0 18px 0
}

.point .item {
    max-width: 270px;
    margin-top: 86px;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    padding: 15px
}

.point .item:hover {
    -webkit-box-shadow: 0 10px 20px 0 rgba(86, 131, 244, .2);
    box-shadow: 0 10px 20px 0 rgba(86, 131, 244, .2);
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px)
}

.point .imgbox {
    position: relative;
    min-height: 113px
}

.point .imgbox img {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (max-width:992px) {
    .point .item {
        max-width: 100%;
        margin-top: 10px
    }
}

.features {
    padding: 103px 0 105px 0;
    background: #f8f8f8
}

.features h2 {
    text-align: center;
    font-size: 40px;
    margin-bottom: 17px;
    color: #1a1a1a
}

.features .des {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    line-height: 26px;
    text-align: center
}

.features .checkpic {
    margin-top: 90px
}

.features .phone {
    position: relative;
    min-height: 560px;
    background: url(/assets/images/ios/phone-pic.png) no-repeat center
}

.features .checkimg {
    position: relative;
    overflow: hidden;
    height: 0;
    text-align: center
}

.features .imgshow {
    height: auto
}

.features .p-img {
    margin-top: 14px
}

.features h4 {
    position: relative;
    font-size: 20px;
    padding-left: 30px;
    margin-bottom: 10px
}

.features h4::before {
    position: absolute;
    left: 0;
    top: 3px;
    content: "";
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(/assets/images/ios/icon-features.png) no-repeat;
    background-position: 0 0
}

.features .ms {
    max-width: 330px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 26px
}

.features .txt-list {
    font-size: 0;
    text-align: center
}

.features .nobot {
    margin-bottom: 0
}

.features .icons2::before {
    background-position-y: -61px
}

.features .icons3::before {
    background-position-y: -122px
}

.features .icons4::before {
    background-position-y: -184px
}

.features .icons5::before {
    background-position-y: -242px
}

.features .icons6::before {
    background-position-y: -300px
}

.features .icons7::before {
    background-position-y: -355px
}

.features .icons8::before {
    background-position-y: -424px
}

.features .ltxt {
    display: inline-block;
    text-align: left;
    margin-bottom: 35px;
    vertical-align: top;
    width: 50%;
    padding: 0 30px
}

.features .ltxt:hover {
    color: #5683f4
}

.features .ltxt:hover p {
    color: #5683f4
}

.features .ltxt:hover h4::before {
    background-position-x: -52px
}

.features .lb .item-img {
    width: 250px
}

.features .lb .p-img {
    position: unset;
    text-align: center
}

@media screen and (max-width:992px) {
    .features .txt-list {
        margin-top: 50px
    }
}

@media screen and (max-width:496px) {
    .features .ltxt {
        width: 100%
    }

    .features .ms {
        max-width: 100%
    }
}

.how {
    background-color: #f5f8ff;
    padding: 90px 0 100px;
    text-align: center
}

.how .use-item {
    margin-top: 69px
}

.how .blue {
    color: #5683f4
}

.how .slick-nav {
    text-align: left;
    position: relative
}

.how .slick-nav:before {
    content: "";
    height: 74%;
    position: absolute;
    left: 43px;
    top: 50px;
    border-left: 1px solid #d7d0e8
}

.how .slick-nav-row {
    margin-bottom: 20px;
    padding-left: 84px;
    padding: 15px 20px 15px 84px;
    border-radius: 20px;
    position: relative;
    max-width: 480px;
    -webkit-transform: all .3s;
    -ms-transform: all .3s;
    transform: all .3s
}

.how .slick-nav-row:last-child {
    margin-bottom: 0
}

.how .slick-nav-row h4 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative
}

.how .slick-nav-row h4:before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    background: url(/assets/images/icons/icon-invite.png) no-repeat 0 -290px;
    position: absolute;
    top: 0;
    left: -59px
}

.how .slick-nav-row p {
    display: none;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    -webkit-transition: all linear .4s;
    -o-transition: all linear .4s;
    transition: all linear .4s;
    max-width: 340px
}

.how .slick-nav-row.active {
    padding-top: 31px;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 20px 0 rgba(86, 131, 244, .2);
    box-shadow: 0 10px 20px 0 rgba(86, 131, 244, .2)
}

.how .slick-nav-row.active::after {
    content: "";
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-left: 24px solid #fff;
    position: absolute;
    right: -24px;
    top: 50%;
    margin-top: -24px
}

.how .slick-nav-row.active p {
    display: block
}

.how .slick-nav-row.active h4 {
    color: #0b56dc
}

.how .slick-nav-row.active h4:before {
    width: 48px;
    background-position: 0 -234px
}

.how .slick-nav-row kbd {
    font-weight: 700
}

.how .slick-box {
    padding-bottom: 44px;
    margin-left: 70px;
    margin-top: 13px
}

.how .slick-box .slick-slide {
    position: relative
}

.how .slick-box .slick-slide img {
    margin: 0 auto
}

@media (min-width:1200px) {
    .how .slick-box img {
        max-width: 572px
    }
}

@media (max-width:991px) {
    .how .slick-nav {
        max-width: 500px;
        margin: 0 auto 50px auto
    }

    .how .slick-box {
        margin: 0
    }

    .how .slick-nav-row.active::after {
        display: none
    }
}

.customer {
    padding: 100px 0 120px 0;
    background: #f7f7f7;
    text-align: center
}

.customer h2 {
    font-size: 4rem;
    color: #1a1a1a
}

.customer .des {
    font-size: 18px;
    margin-top: 15px
}

.customer .stories {
    margin-top: 60px
}

.customer .stories .item {
    display: inline-block;
    max-width: 320px;
    min-height: 500px;
    vertical-align: top
}

.customer .stories .item:nth-child(2) {
    margin: 0 50px
}

.customer .stories .info {
    position: relative;
    background: #fff;
    border-radius: 40px;
    padding: 30px 30px 89px
}

.customer .stories .star {
    margin: 30px 0 28px 0
}

.customer .stories .users {
    position: absolute;
    bottom: -93px;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    z-index: 9999
}

.customer .stories .ms {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 24px;
    min-height: 170px
}

.customer .stories .name {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    line-height: 48px
}

.customer .stories .slick-dots {
    bottom: -20px
}

@media screen and (max-width:496px) {
    .customer .stories .item:nth-child(2) {
        margin: 50px 0
    }
}

.banner .btn-ios {
    background-color: #17BF4E;
    margin-right: 60px;
}

@media (max-width: 767px) {
    body {
        font-size: 12px;
    }

    .banner .btn-ios {
        background-color: #17BF4E;
        margin-bottom: 20px;
        margin-right: 0;
    }
}
[lang=de] .customer .stories .ms{
    min-height: 192px;
}