@font-face{
    font-family:'Medium';
    src:url("../fonts/Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Medium.otf") format("opentype"),
    url("../fonts/Medium.woff") format("woff"),
    url("../fonts/Medium.ttf") format("truetype"),
    url("../fonts/Medium.svg#Medium") format("svg");
    font-weight:normal;
    font-style:normal}
@font-face{
    font-family:'Book';
    src:url("../fonts/Book.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Book.otf") format("opentype"),
    url("../fonts/Book.woff") format("woff"),
    url("../fonts/Book.ttf") format("truetype"),
    url("../fonts/Book.svg#Book") format("svg");
    font-weight:normal;
    font-style:normal}
@font-face{
    font-family:'number';
    src:url("../fonts/number.eot?#iefix") format("embedded-opentype"),
    url("../fonts/number.otf") format("opentype"),
    url("../fonts/number.woff") format("woff"),
    url("../fonts/number.ttf") format("truetype"),
    url("../fonts/number.svg#number") format("svg");
    font-weight:normal;
    font-style:normal}

body{
    background: #f8f8f8 !important;
    font-family: Book,-apple-system, BlinkMacSystemFont,KarbonRegular,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif !important;
    color: #23235b !important;
    font-size: 12px !important;
    overflow-x: hidden;
}

h1,h2,h3{
    font-weight: normal;
}


ul{
    padding-left: 0;
}
button:focus{
    outline: 0;
    outline: none;
}
.container{
    position: relative;
}

@media (min-width: 1200px){
    .container {
        width: 1000px;
    }
}



/*main-title*/

.main-title{
    text-align: center;
}
.main-title h3{
    font-size: 28px;
    color: #23235b;
    font-weight: normal;
    margin-top: 60px;
    margin-bottom:40px ;
}
.main-title h3 p{
    font-size: 12px;
    font-weight: bold;
    color: #ff9800;
    margin-bottom: 8px;
}
@media (max-width:767px){
    .main-title{
        text-align: left;
    }
}



/*home-menu*/

.menu{
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    transition: all .24s ease-out;
    margin-top: -1px;
}
.navbar{
    border: none;
    background: none;
    margin-bottom: 0;
    min-height: 64px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.navbar-brand{
    width: 230px;
    height: 60px;
    background: url(../img/logo_color.png) no-repeat center;
    background-size: contain;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.navbar-nav > li{
    margin-left: 40px;
}
.navbar-nav > li > a{
    color: #23235b;
    opacity: 0.6;
    padding: 21px 0;
    font-size: 14px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.navbar-nav > li.active > a,
.navbar-nav > li > a:hover{
    background: none;
    opacity: 1;
    font-family:'Medium';
}
.navbar-nav > li.active > a{
}
.btn-language{
    display:none !important;
}
.btn-language a i{
    display: block;
    width: 20px;
    height: 20px;
    background: url(../img/icon-language-blue.png) no-repeat center;
}
.navbar-toggle{
    padding: 11px 10px;
    margin: 12px 0;
    transition: all .24s ease-out;
    background: #fff;
    box-shadow: none;
    border: 1px solid #63af57;
}
.navbar-toggle.collapsed{
    background: #63af57;
    box-shadow: 0 5px 10px rgba(99, 175, 87, 0.2);
}
.navbar-toggle span{
    background: #63af57;
}
.navbar-toggle.collapsed span{
    background: #fff;

}
.navbar-collapse{
    border-top: 1px solid #eeeef2;
}

@media (min-width:1023px){
    .home-menu{
        background: transparent;
        box-shadow: none;
    }
    .home-menu .container{
        border-radius: 0;
    }
    .home-menu .navbar-brand{
        background: url(../img/logo_white.png) no-repeat center;
        background-size: contain;
        height: 80px;
    }
    .home-menu .navbar-nav > li > a{
        color: #fff;
        padding: 30px 0;
    }
    .home-menu .navbar-nav > li.active > a,
    .home-menu .navbar-nav > li > a:hover{
        font-family:'Medium';
    }
    .home-menu .navbar-nav > li.active > a{
    }
    .home-menu .btn-language a i{
        background: url(../img/icon-language-white.png) no-repeat center;
    }
    .home-menu .nav > li > a{
        background: none !important;
    }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .menu{
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99 !important;
        margin-top: -1px !important;
    }
    .menu .navbar-brand{
        background: url(../img/logo_color.png) no-repeat center !important;
        background-size: contain !important;
    }
    .home-menu .navbar-nav > li > a{
        color: #23235b ;
        opacity: 1;
    }

}



/*home-banner*/

.home-banner{
    min-height: 768px;
    background: url(../img/home-banner-bg.jpg) no-repeat center #fff;
    background-size: cover;
    text-align: left;
    box-shadow: 0 3px 10px rgba(2, 108, 122, 0.2);
    position: relative;
    overflow: hidden;
}
.home-banner .container{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.home-banner .container .row{
    flex-basis: 100%;
}

.home-banner h1{
    margin-top: 260px;
    font-size: 30px;
    color: #fff;
    line-height: 44px;
}
.home-banner h1 strong{
    font-weight: bold;
}
.home-banner h1 p{
    font-size: 12px;
    line-height: 20px;
    font-family:'book';
    margin-top: 10px;
    margin-bottom: -10px;
    color: #a2a7dc;
}
.home-banner h1 i{
    display: inline-block;
    width: 60px;
    height: 2px;
    background: #eeff41;
}
.home-banner a{
    vertical-align: middle;
    height: 40px;
    display: inline-block;
    line-height: 38px;
    font-size: 12px;
    border-radius: 20px;
    background: #00d884;
    padding: 0 30px;
    border: none;
    color: #fff;
    margin-top: 30px;
    box-shadow: 0 9px 16px rgba(23, 83, 111, 0.4);
    transition: all .24s ease-out;
}
.home-banner a p{
    line-height: 41px;
    font-size: 15px;
    display: inline-block;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-family:'Medium';
}
.home-banner a:hover{
    transform: translate3d(0,-2px,0);
    opacity: 0.8;
}
.home-banner img{
    margin-top: 130px;
}

.banner-summary-list{
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
.banner-summary-list h3{
    font-size: 46px;
    color: #ff6901;
    line-height: 1em;
    margin: 0;
    font-family: number;
}
.banner-summary-list h3 span{
    font-size: 18px;
    display: inline-block;
    vertical-align: bottom;
}
.banner-summary-list p{
    color: #a2a7dc;
    font-size: 14px;
    line-height: 1.5em;
    margin-top: 5px;
}
@media (min-width:1025px){
    .home-banner-img{
        position: absolute;
        top: 50%;
        margin-top: -420px;
    }
    .home-banner-img + .row{
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

@media (max-width:1023px){
    .home-banner{
        text-align: left;
        min-height: 400px;
    }
    .home-banner h1{
        margin-top: 120px;
        font-size: 20px;
        line-height: 30px;
    }
    .home-banner h1 p{
        margin: 10px 0 -10px 0;
    }
    .home-banner .row div{
        overflow: hidden;
    }
    .home-banner img{
        height: 100%;
        width: 135%;
        margin-top: 80px;
        margin-bottom: 30px;
    }
    .home-banner .container{
        display: block;
    }
    .banner-summary-list h3{
        font-size: 30px;
    }
    .banner-summary-list p{
        font-size: 12px;
    }
}




/*home-introduction*/


.home-introduction{
    position: relative;
}
.home-introduction-text{
    padding-top: 140px;
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.home-introduction h3{
    position: relative;
    background: #fff;
    font-size: 22px;
    font-family:'Medium';
    line-height: 40px;
    padding: 24px 30px;
    box-shadow: 0 10px 40px rgba(40, 50, 162, 0.05);
    margin: 0;
    margin-right: 50px;
}
.home-introduction:nth-of-type(2) h3{
    margin: 0 0 0 50px;
}
.home-introduction:nth-of-type(3){
    margin-bottom: 95px;
}
.home-introduction h3:after{
    content: "";
    display: block;
    width: 666px;
    height: 428px;
    background: url(../img/home-introduction-bg.png) no-repeat center;
    position: absolute;
    left: -100px;
    top: -150px;
    z-index: -1;
}
.home-introduction h3 span{
    font-family:'book';
}
.home-introduction p{
    margin-top: 4px;
    font-size: 12px;
    margin-bottom: 16px;
    font-family:'book';
    line-height: 20px;
    color: rgba(35, 35, 91, 0.6);
}
.home-introduction-img{
    height: 400px;
    text-align: center;
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    position: relative;
}
.home-introduction-img img{
    position: absolute;
    left: 50%;
    top: 50%;
    animation-timing-function: ease-out;
}
@keyframes updown {
    0% { transform: translateY(0px);}
    40% { transform: translateY(-4px);}
    85% { transform: translateY(2px);}
    100% { transform: translateY(0px);}
}
@keyframes updownTen {
    0% { transform: translateY(0px);}
    40% { transform: translateY(-8px);}
    85% { transform: translateY(4px);}
    100% { transform: translateY(0px);}
}
@keyframes right {
    0% { transform: translate(10px,-6px);}
    50% { transform: translate(-5px,3px);}
    100% { transform: translate(10px,-6px);}
}
@keyframes rightTen {
    0% { transform: translate(6px,-3px);}
    50% { transform: translate(-4px,-2px);}
    100% { transform: translate(6px,-3px);}
}

.introduction-01{
    margin-left: -165px;
    margin-top: -201px;
}
.introduction-011{
    margin-left: -200px;
    margin-top: 8px;
    z-index: 7;
    animation: right 3.5s infinite;
    animation-delay: 0.8s;
}
.introduction-012{
    margin-left: -251px;
    margin-top: -120px;
    z-index: 6;
    animation: right 3.5s infinite;
    animation-delay: 0.6s;
}
.introduction-013{
    margin-left: -197px;
    margin-top: -114px;
    z-index: 5;
    animation: right 3.5s infinite;
    animation-delay: 0.4s;
}
.introduction-014{
    margin-left: -142px;
    margin-top: -105px;
    z-index: 4;
    animation: right 3.5s infinite;
    animation-delay: 0.2s;
}
.introduction-015{
    margin-left: 57px;
    margin-top: -59px;
    z-index: 3;
    animation: updown 3.5s infinite;
    animation-delay: 0.2s;
}
.introduction-016{
    margin-left: 57px;
    margin-top: -44px;
    z-index: 2;
    animation: updown 3.5s infinite;
    animation-delay: 0.4s;
}
.introduction-017{
    margin-left: 46px;
    margin-top: -28px;
    z-index: 1;
    animation: updown 3.5s infinite;
    animation-delay: 0.6s;
}
.introduction-02{
    margin-left: -214px;
    margin-top: -62px;
}
.introduction-021{
    margin-left: -86px;
    margin-top: -67px;
    z-index: 9;
    animation: updownTen 4s infinite;
    animation-delay: 0.6s;
}
.introduction-022{
    margin-left: 30px;
    margin-top: -124px;
    z-index: 8;
    animation: updownTen 4s infinite;
    animation-delay: 0.4s;
}
.introduction-023{
    margin-left: -39px;
    margin-top: -166px;
    z-index: 7;
    animation: updownTen 4s infinite;
    animation-delay: 0.2s;
}
.introduction-024{
    margin-left: -210px;
    margin-top: -61px;
    z-index: 6;
    animation: updownTen 4s infinite;
    animation-delay: 0.4s;
}
.introduction-025{
    margin-left: 5px;
    margin-top: -70px;
    z-index: 5;
    animation: updownTen 4s infinite;
    animation-delay: 0.8s;
}
.introduction-026{
    margin-left: -133px;
    margin-top: -18px;
    z-index: 4;
    animation: updownTen 4s infinite;
    animation-delay: 0.8s;
}
.introduction-027{
    margin-left: -148px;
    margin-top: -185px;
    z-index: 3;
    animation: updownTen 4s infinite;
    animation-delay: 0s;
}
.introduction-028{
    margin-left: 2px;
    margin-top: -202px;
    z-index: 2;
    animation: updownTen 4s infinite;
    animation-delay: 0.2s;
}
.introduction-029{
    margin-left: -197px;
    margin-top: -105px;
    z-index: 1;
    animation: updownTen 4s infinite;
    animation-delay: 0.2s;
}
.introduction-03{
    margin-left: -215px;
    margin-top: -206px;
}
.introduction-031{
    margin-left: -168px;
    margin-top: -56px;
    z-index: 9;
    animation: right 4.5s infinite;
    animation-delay: 0.6s;
}
.introduction-032{
    margin-left: -38px;
    margin-top: -57px;
    z-index: 8;
    animation: right 4.5s infinite;
    animation-delay: 0.4s;
}
.introduction-033{
    margin-left: -128px;
    margin-top: -99px;
    z-index: 7;
    animation: right 4.5s infinite;
    animation-delay: 0.2s;
}
.introduction-034{
    margin-left: -178px;
    margin-top: -132px;
    z-index: 6;
    animation: right 4.5s infinite;
    animation-delay: 0s;
}
.introduction-035{
    margin-left: -251px;
    margin-top: -139px;
    z-index: 5;
    animation: right 4.5s infinite;
    animation-delay: 0.2s;
}
.introduction-036{
    margin-left: -75px;
    margin-top: -125px;
    z-index: 4;
    animation: right 4.5s infinite;
    animation-delay: 0.4s;
}
.introduction-037{
    margin-left: -123px;
    margin-top: -161px;
    z-index: 3;
    animation: rightTen 4.5s infinite;
    animation-delay: 0.6s;
}
.introduction-038{
    margin-left: -166px;
    margin-top: -180px;
    z-index: 2;
    animation: right 4.5s infinite;
    animation-delay: 0.8s;
}
.introduction-039{
    margin-left: -232px;
    margin-top: -197px;
    z-index: 1;
    animation: right 4.5s infinite;
    animation-delay: 1s;
}
@media (max-width:1023px){
    .home-introduction{
        margin-top: 40px;
    }
    .home-introduction h3{
        margin: 0;
        padding-top: 200px;
        font-size: 16px;
        line-height: 26px;
        overflow: hidden;
    }
    .home-introduction:nth-of-type(2) h3{
        margin: 0;
    }
    .home-introduction p{
        margin-top: 12px;
    }
    .home-introduction-img{
        height: 160px;
        margin-bottom: -170px;
        margin-left: -20px;
        z-index: 1;
        transform: scale(0.5) !important;
    }
    .home-introduction-img img{
    }
    .home-introduction-text{
        padding-top: 0;
    }
    .home-introduction:nth-of-type(3){
        margin-bottom: 40px;
    }
}



/* home-cost */

.home-cost{
    background: linear-gradient(to bottom, #110e3b, #1d328a);
    color: #fff;
    padding: 80px 0 80px 0;
}
.home-cost-title{
    font-size: 30px;
    line-height: 1em;
    margin-bottom:70px ;
    margin-top: 0;
    position: relative;
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.home-cost-title:before{
    content: "";
    display: block;
    position: absolute;
    width: 80px;
    height: 2px;
    background: #ff6901;
    top: 50px;
    left: 0;
}
.home-cost-title p{
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5em;
    margin-top: 42px;
}
.home-cost-feature{
    margin: 0;
}
.home-cost-feature li{
    list-style: none;
    padding-left: 60px;
    margin-bottom: 50px;
    position: relative;
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.home-cost-feature li:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
}
.home-cost-feature li:nth-of-type(1):before{
    background-image: url(../img/feature-icon-cloud.png);
}
.home-cost-feature li:nth-of-type(2):before{
    background-image: url(../img/feature-icon-app.png);
}
.home-cost-feature li:nth-of-type(3):before{
    background-image: url(../img/feature-icon-terminal.png);
}
.home-cost-feature li:last-of-type{
    margin-bottom: 0;
}
.home-cost-feature li:last-of-type:before{
    background-image: url(../img/feature-icon-log.png);
}
.home-cost-feature h3{
    font-size: 14px;
    margin: 0 0 8px 0;
}
.home-cost-feature p{
    font-size: 12px;
    line-height: 1.5em;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}
.home-cost-img{
    text-align: right;
}
.home-cost-img img{
    width: 430px;
    border: 2px solid #221c76;
}
@media (max-width:1023px){
    .home-cost{
        padding: 60px 0;
    }
    .home-cost-title{
        margin-bottom: 40px;
    }
    .home-cost-img{
        height: 200px;
        overflow: hidden;
        margin-top: 40px;
    }
    .home-cost-img img{
        width: 100%;
        margin-top: -40px;
    }
}



/* home-efficient */

.home-efficient{
    color: #23235b;
    padding: 80px 0 80px 0;
    background: url(../img/efficient-bg.jpg) no-repeat center;
    background-size: cover;
}
.home-efficient-title{
    font-size: 30px;
    line-height: 1em;
    margin-bottom:50px ;
    margin-top: 0;
    position: relative;
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.home-efficient-title:before{
    content: "";
    display: block;
    position: absolute;
    width: 80px;
    height: 2px;
    background: #ff6901;
    top: 50px;
    left: 50%;
    margin-left: -40px;
}
.home-efficient-title p{
    font-size: 12px;
    color: rgba(35, 35, 91, 0.6);
    line-height: 1.5em;
    margin-top: 42px;
}
.home-efficient-img{
    position: relative;
}
.home-efficient-img img{
    position: absolute;
    left: 50%;
    top: 50%;
    animation-timing-function: ease-out;
}
.home-efficient-img .efficient-01{
    position: relative;
    top: initial;
    left: initial;
}
.efficient-011{
    margin: -117px 0 0 -86px;
    z-index: 5;
    animation: updownTen 4s infinite;
    animation-delay: 1s;
}
.efficient-012{
    margin: -173px 0 0 -9px;
    z-index: 4;
    animation: updownTen 4s infinite;
    animation-delay: 0.8s;
}
.efficient-013{
    margin: -193px 0 0 -184px;
    z-index: 3;
    animation: updownTen 4s infinite;
    animation-delay: 0.6s;
}
.efficient-014{
    margin: -192px 0 0 -193px;
    z-index: 2;
    animation: updownTen 4s infinite;
    animation-delay: 0.4s;
}
.efficient-015{
    margin: -150px 0 0 -202px;
    z-index: 1;
    animation: updownTen 4s infinite;
    animation-delay: 0.2s;
}
.home-efficient-feature h3{
    font-size: 16px;
    font-family:'Medium';
    line-height: 1.5em;
    box-sizing: border-box;
    padding-left: 82px;
    position: relative;
    transition-timing-function: ease-out;
}
.home-efficient-feature h3:before{
    content: "";
    display: block;
    position: absolute;
    width: 75px;
    height: 75px;
    top: -10px;
    left: 0;
    background: url(../img/feature-icon-remote.png) no-repeat center;
}
.home-efficient-feature h3:nth-of-type(2):before{
    background-image: url(../img/feature-icon-rki.png);
}
.home-efficient-feature h3:nth-of-type(3):before{
    background-image: url(../img/feature-icon-business.png);
}
.home-efficient-feature h3:nth-of-type(4):before{
    background-image: url(../img/feature-icon-receipt.png);
}

.home-efficient-feature h3 p{
    font-size: 12px;
    color: rgba(35, 35, 91, 0.6);
    line-height: 1.5em;
    font-family:'book';
    margin-top: 5px;
}
@media (min-width:1023px){
    .home-efficient{
        text-align: center;
    }
    .home-efficient-feature h3{
        position: absolute;
        width: 400px;
    }
    .home-efficient-title p{
        margin: 42px 200px 0;
    }
    .home-efficient-feature{
        position: relative;
        height: 483px;
    }
    .home-efficient-feature h3:nth-of-type(1),
    .home-efficient-feature h3:nth-of-type(3){
        text-align: right;
        padding-right: 82px;
        padding-left: 0;
        right: 50%;
        margin-right: 98px;
    }
    .home-efficient-feature h3:nth-of-type(2),
    .home-efficient-feature h3:nth-of-type(4){
        text-align: left;
        left: 50%;
        margin-left: 92px;
    }
    .home-efficient-feature h3:nth-of-type(1){
        top: 0px;
    }
    .home-efficient-feature h3:nth-of-type(2){
        top: 43px;
        width: 409px;
    }
    .home-efficient-feature h3:nth-of-type(3){
        top: 320px;
        margin-right: 109px;
        width: 392px;
    }
    .home-efficient-feature h3:nth-of-type(4){
        top: 363px;
        margin-left: 64px;
        width: 436px;
    }
    .home-efficient-feature h3:nth-of-type(1):before,
    .home-efficient-feature h3:nth-of-type(3):before{
        right: 0;
        left: initial;
    }
}
@media (max-width:1023px){
    .home-efficient{
        padding: 60px 0;
    }
    .home-efficient-title:before{
        left: 0;
        margin-left: 0;
    }
    .home-efficient-img{
        height: 240px;
    }
    .efficient-01{
        display: none;
    }
}


/*home-parenter*/

.home-parenter{
    color: #fff;
    padding: 80px 0 80px 0;
    background: url(../img/parenter-bg.jpg) no-repeat center;
    background-size: cover;
    text-align: center;
    margin-bottom: 120px;
    padding-bottom: 160px;
}
.home-parenter-title{
    font-size: 30px;
    line-height: 1.5em;
    position: relative;
    margin: 0 200px 40px 200px;
    font-family:'book';
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.home-parenter-logo{
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.home-parenter-logo > div{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin-top: 10px;
}
.home-parenter-logo img{
    width: 100%;
    transform: scale(0.7);
    opacity: 0.5;
    transition: all .35s ease-out;
}
.home-parenter-logo img:hover{
    opacity: 1;
    transform: scale(0.9);
}
.home-parenter-contact{
    background: #fff;
    color: #23235b;
    padding: 50px 15px;
    position: absolute;
    width: calc(100% - 30px);
    margin: 60px 0px 0 0px;
    height: 220px;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(35, 35, 91, 0.05);
}
.home-parenter-contact h3{
    font-size: 30px;
    margin: 0;
    line-height: 1em;
}
.home-parenter-contact p{
    font-size: 12px;
    line-height: 1.5em;
    margin: 0;
    margin-top: 10px;
    color: rgba(35, 35, 91, 0.6);
}
.home-parenter-contact a{
    display: inline-block;
    outline: none;
    border: none;
    font-size: 16px;
    background: #ff6901;
    color: #fff;
    box-shadow: 0 3px 8px rgba(255, 105, 0, 0.2);
    margin-top: 20px;
    height: 40px;
    width: 160px;
    line-height: 40px;
    border-radius: 2px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.home-parenter-contact a:hover{
    text-decoration: none;
    transform: translateY(-2px) !important;
    opacity: 0.8 !important;
    box-shadow: 0 3px 8px rgba(255, 105, 0, 0.4);
}
@media (max-width:1023px){
    .home-parenter-title{
        margin-left: 0;
        margin-right: 0;
    }
}




/*contact-info*/

.contact-banner{
    min-height: 540px;
    background: url(../img/home-banner-bg.jpg) no-repeat center #fff;
    background-size: cover;
    text-align: center;
    box-shadow: 0 3px 10px rgba(2, 108, 122, 0.2);
}
.contact-banner h1{
    margin-top: 146px ;
}
.contact-info{
    margin: -235px auto 18px auto;
    height: 488px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(91, 95, 135, 0.2);
    background: #fff;
}
.contact-message{
    text-align: right;
    padding: 0 40px 30px;
    background: #fff;
}
.contact-message h3{
    padding: 50px 0 40px 0;
    margin: 0 ;
    font-size: 20px;
    font-weight: bold;
    color: #23235b;
    text-align: left;
    background: url(../img/contact-icon-message.png) no-repeat right center;
}
.contact-message > a{
    display: inline-block;
    outline: none;
    border: none;
    font-size: 16px;
    background: #ff6901;
    color: #fff;
    box-shadow: 0 3px 8px rgba(255, 105, 0, 0.2);
    margin-top: 5px;
    height: 40px;
    width: 160px;
    line-height: 40px;
    border-radius: 2px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    text-align: center;
    cursor: pointer;
}
.contact-message a:hover {
    text-decoration: none;
    transform: translateY(-2px) !important;
    opacity: 0.8 !important;
    box-shadow: 0 3px 8px rgba(255, 105, 0, 0.4);
}
.input-box{
    position: relative;
    text-align: left;
}
.input-box label{
    font-size: 11px;
    font-weight: normal;
    color: #ff9800;
    position: absolute;
    left: 15px;
    white-space: nowrap;
    bottom: 3px;
}
.input-box input,
.input-box textarea{
    width: 100%;
    display: block;
    outline: none;
    border: none;
    border-bottom: 1px solid #d3e0ea;
    font-size: 15px;
    line-height: 36px;
    height: 36px;
    color: #63af57;
    margin-bottom: 30px;
}
.input-box textarea{
    height: 80px;
    resize: none;
}
.input-box hr{
    position: absolute;
    bottom: 30px;
    left: 50%;
    height: 2px;
    margin: 0;
    margin-left: calc(-50% + 15px);
    transition: all .18s ease-out;
    width: calc(100% - 30px);
    transform: scaleX(0);
}
.input-box input:focus + hr,
.input-box textarea:focus + hr{
    background: #63af57;
    transform: scaleX(1);
}
.contact-information{
    background: #23235b;
    background: url(../img/contact-image-logo.png) no-repeat center;
    background-size: cover;
    height: 100%;
    box-sizing: border-box;
    color: #fff !important;
    padding: 0 40px;
    float: right;
}
.contact-information h3{
    padding: 50px 0 40px 0;
    margin: 0 ;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    color: #fff !important;
}
.contact-information li{
    padding-left: 34px;
    font-size: 12px;
    line-height: 20px;
    list-style: none;
    padding-bottom: 30px;
    color: rgba(255, 255, 255, 0.5);
    background: url(../img/contact-icon-email.png) no-repeat left 8px;
}
.contact-information li.phone{
    background: url(../img/contact-icon-phone.png) no-repeat left 8px;
}
.contact-information li.address{
    background: url(../img/contact-icon-address.png) no-repeat 4px 8px;
}
@media (max-width:767px){
    .contact-message h3{
        background: none;
    }
    .contact-info{
        height: auto;
    }
    .contact-message > a{
        width: 100%;
        margin-bottom: 30px;
    }
    .input-box hr{
        bottom: 0;
    }
}
.contact-feedback{
    height: auto;
    margin-bottom: 100px
}
.contact-feedback .contact-message{
    text-align: center;
}
.contact-feedback h1{
    margin-top: 60px;
    font-size: 32px;
    line-height: 44px;
}
.contact-feedback p {
    font-size: 14px;
    line-height: 18px;
    font-family: 'book';
    margin-top: 10px;
    margin-bottom: 40px;
    opacity: 0.7;
}
.contact-feedback a{
    margin-bottom: 60px;
    width: auto;
    padding: 0 16px;
}


/*footer*/

.footer{
}
.footer .container{
    padding-top: 50px;
    padding-bottom: 52px;
    background: url(../img/footer-image-map.png) no-repeat center top;
    position: relative;
}
.footer-link{
    text-align: center;
}
.footer-link a{
    display: inline-block;
    font-size: 14px;
    color: rgba(35, 35, 91, 1);
    text-decoration: none;
    transition: all .24s ease-out;
    text-transform: uppercase;
    padding: 6px;
    margin: 0 20px 20px;
}
.footer-link a:hover{
    color: #FF6901;
}
.footer-link .footer-link-download{
    font-size: 12px;
    color: #63af57;
}
.footer-link .footer-link-download:hover{
    color: #63af57;
    font-weight: bold;
    text-decoration: underline;
}
.footer-copyright{
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    border-top: 1px solid #eeeef2;
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.footer-copyright p,
.footer-copyright a{
    line-height: 51px;
    font-size: 12px;
    color: rgba(35, 35, 91, 0.6);
    margin-bottom: 0;
    transition: all .24s ease-out;
    text-decoration: none;
}
.footer-copyright-p{
    display: inline-block;
    vertical-align: top;
    text-indent: 0;
}
.footer-copyright-p a{
    color: rgba(35, 35, 91, 0.6);
    margin-left: 12px;
    display: inline-block;
    vertical-align: top;
    text-decoration: underline;
    text-indent: 0;
    transition: all .24s ease-out;
}
.footer-copyright-p a:hover,
.footer-copyright a:hover{
    color: #FF6901;
}
.footer-copyright-p a::before{
    content: "|";
    display: inline-block;
    color: #d3e0ea;
    margin-right: 12px;
    vertical-align: middle;
    margin-top: -4px;
}
@media (max-width:767px){
    .footer-copyright{
        flex-wrap: wrap;
    }
    .footer-copyright a{
        display: block;
        width: 100%;
    }
    .footer-copyright p,
    .footer-copyright a{
        line-height: 30px;
    }
    .footer-copyright p{
        margin-bottom: 0;
        width: 100%;
    }
    .footer-link{
        margin-top: 30px;
        margin-bottom: 30px;
    }
}





/*product-group*/

.product-group {
    width: 100%;
    height: 420px;
    position: relative;
}
.product-group > ul,
.product-group ol{
    padding-left: 0;
    color: #FFFfff;
    text-align: center;
}
.product-group > ul > li {
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 420px;
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    opacity: 0;
}
.product-group ul h3{
    font-size: 32px;
    font-weight: bold;
    margin-top: 130px;
}
.product-group ul p{
    font-size: 16px;
    opacity: 0.7;
    margin: 0 20%;
}

.product-group .prev,
.product-group .next{
    display: block;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    position: absolute;
    background: url(../img/banner-btn-left.png) no-repeat center;
    left: 0;
    bottom: 50%;
    margin: 0px 0 -24px 30px;
    opacity: 0.6;
    transition: all .24s ease-out;
}
.product-group .next {
    background: url(../img/banner-btn-right.png) no-repeat center;
    left: inherit;
    right: 0;
    bottom: 50%;
    margin: 0px 30px -24px 0px;
}
.product-group > a:hover {
    opacity: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
}
.product-group{
    margin-top: 52px;
}
.product-banner-page{
    font-size: 12px;
}

@media (min-width:767px){
    .product-banner-page{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        height: 72px;
    }
    .product-banner-page ol{
        padding: 0;
    }
    .product-banner-page li{
        list-style: none;
        text-align: left;
        display: inline-block;
        width: 24%;
        box-sizing: border-box;
        vertical-align: middle;
        height: 72px;
        padding: 16px 20px 16px 30px;
        cursor: pointer;
        transition: all .24s ease-out;
        opacity: 0.85;
    }
    .product-banner-page li:before{
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        vertical-align: middle;
        margin-right: 16px;
        margin-bottom: 7px;
    }
    .product-banner-page li.product-banner-platform:before{
        background: url(../img/product-banner-icon-platform.png) no-repeat center;
    }
    .product-banner-page li.product-banner-terminal:before{
        background: url(../img/product-banner-icon-terminal.png) no-repeat center;
    }
    .product-banner-page li.product-banner-market:before{
        background: url(../img/product-banner-icon-market.png) no-repeat center;
    }
    .product-banner-page li.product-banner-statistical:before{
        background: url(../img/product-banner-icon-statistical.png) no-repeat center;
    }
    .product-banner-page li p{
        display: inline-block;
        width: 126px;
        vertical-align: middle;
    }
    .product-banner-page li.foucs{
        opacity: 1;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);;
    }
}
@media (max-width:767px){
    .product-group ol {
        position: absolute;
        bottom: 10px;
        left: 50%;
        z-index: 1;
        list-style: none;
        margin-left: -30px;
    }
    .product-group ol>li {
        cursor: pointer;
        opacity: .3;
        float: left;
        border-radius: 12px;
        margin-right: 10px;
        width: 12px;
        height: 12px;
        background: #fff;
        font-size: 0;
    }
    .product-group ol>li.foucs {
        opacity: 1;
    }
    .product-group{
        height: 360px;
    }
    .product-group > ul li{
        height: 360px;
    }
    .product-group > ul,
    .product-group ol{
        text-align: left;
    }
    .product-group ul h3{
        margin: 100px 40px 10px 30px;
    }
    .product-group ul p{
        margin: 0 50px 0 30px;
    }
    .product-group .prev,
    .product-group .next{
        /*bottom: 0;
        margin-bottom: 16px;*/
        display: none;
    }
}


/*product-entrance*/

.product-entrance{

}
.product-list{
    border-bottom: 1px solid #e0e0e6;
    position: relative;
}
.product-list .product-content{
    padding-top: 40px;
    padding-bottom: 60px;
    display: inline-block;
}
.product-list .product-image{
    min-height: 254px;
    margin: 30px 0;

}
.product-content h3{
    font-size: 22px;
}
.product-content h3:after{
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #63af57;
    margin-top: 16px;
}
.product-content p{
    font-size: 12px;
    color: rgba(35, 35, 91, 0.6);
}
.product-content a{
    vertical-align: middle;
    height: 36px;
    display: inline-block;
    line-height: 30px;
    font-size: 12px;
    border-radius: 18px;
    background: #63af57;
    padding: 0 20px;
    border: none;
    color: #fff;
    margin-top: 20px;
    box-shadow: 0 5px 10px rgba(99, 175, 87, 0.2);
    transition: all .24s ease-out;
}
.product-content a p{
    line-height: 38px;
    font-family:'Medium';
    font-size: 12px;
    display: inline-block;
    margin: 0;
    color: #fff;
}
.product-content a:after{
    content: "";
    display: inline-block;
    width: 7px;
    height: 36px;
    background: url(../img/btn-icon-arrow.png) no-repeat center;
    margin-left: 16px;
    vertical-align: top;
}
.product-content a.product-btn-download:after{
    display: none;
}
.product-content a.product-btn-download{
    margin-right: 16px;
}
.product-content a.product-btn-download:before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 40px;
    margin-right: 8px;
    vertical-align: top;
    margin-top: -2px;
}
.product-content a.product-btn-download.prolin:before{
    background: url(../img/radiobutton-icon-prolin.png) no-repeat left center;
}
.product-content a.product-btn-download.android:before{
    background: url(../img/radiobutton-icon-android.png) no-repeat left center;
}
.product-content a:hover{
    box-shadow: 0 5px 10px rgba(99, 175, 87, 0.4);
    transform: translate3d(0,-2px,0);
    opacity: 0.8;
}
.product-management .product-image{
    background: url(../img/product-image-management.png) no-repeat center;
}
.product-portal .product-image{
    background: url(../img/product-image-portal.png) no-repeat center;
}
.product-developer .product-image{
    background: url(../img/product-image-developer.png) no-repeat center;
}
.product-app .product-image{
    background: url(../img/product-image-app.png) no-repeat center;
}
.product-content > span{

    font-size: 12px;
    color: rgba(35, 35, 91, 0.6);
    margin-top: 28px;
    margin-left: -10px;
    display: inline-block;
    vertical-align: top;
    transition: all .24s ease-out;
    position: relative;
    cursor: pointer;
    width: 20px;
    background: url(../img/product-btn-qrcode.png) no-repeat center;
    height: 20px;
}
.product-content > span:hover{
    color: #63AF57;
}
.product-content > span img{
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 160px;
    transition: all .24s ease-out;
    opacity: 0;
    pointer-events: none;
    margin-left: -80px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.product-content > span:hover img{
    opacity: 1;
}


@media (max-width:767px){
    .product-list .product-image{
        background-position: left center;
    }
    .product-list .product-image{
        min-height: 190px;
        margin: 30px 0 -15px 0;
        background-size: contain;
    }
    .product-content a{
        display: none;
    }
    .product-list .product-content{
        padding-bottom:30px ;
    }
}




/*product-feature*/

.product-feature{
    background: url(../img/product-feature-bg.jpg) no-repeat center;
    background-size: cover;
}
.product-feature .container{
    position: relative;
}
.product-feature .container:before{
    content: "";
    display: block;
    width: 266px;
    height: 494px;
    position: absolute;
    bottom: -70px;
    right: 0;
    background: url(../img/product-feature-device.png) no-repeat left center;
}
.product-feature .main-title{
    text-align: left;
}
.product-feature .main-title h3{
    color: #fff;
}
.feature-list{
    position: relative;
}
.feature-list dl{
    margin-bottom: 60px;
    padding-left: 86px;
}
.feature-list dt{
    font-size: 16px;
    font-weight: 500;
    color: #eeff41;
    margin-bottom: 8px;
}
.feature-list dd{
    font-size: 12px;
    color: #FFF;
    opacity: 0.7;
}
.feature-list dl:before{
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 0;
    top: 0;
}
.feature-list dl.feature-secure:before{
    background: url(../img/feature-icon-secure.png) no-repeat center;
}
.feature-list dl.feature-innovative:before{
    background: url(../img/feature-icon-innovative.png) no-repeat center;
}
.feature-list dl.feature-tenant:before{
    background: url(../img/feature-icon-tenant.png) no-repeat center;
}
.feature-list dl.feature-expansible:before{
    background: url(../img/feature-icon-expansible.png) no-repeat center;
}
@media (max-width:767px){
    .product-feature .container:before{
        right: -15px;
        width: 30%;
    }
    .feature-list{
        padding-left: 15px;
    }
}


/*process-banner*/

.process-banner{
    height: 348px;
    text-align: center;
    color: #ffffff;
}
.process-banner-application{
    background: url(../img/process-banner-app-bg.jpg) no-repeat center;
    background-size: cover;
}
.process-banner-terminal{
    background: url(../img/process-banner-terminal-bg.jpg) no-repeat center;
}
.process-banner-value{
    background: url(../img/process-banner-value-bg.jpg) no-repeat center;
}
.process-banner h3{
    font-size: 32px;
    font-weight: bold;
    margin-top: 90px;
    margin-bottom: 14px;
    color: #ffffff;
}
.process-banner .row:before{
    content: "";
    display: inline-block;
    width: 180px;
    height: 20px;
    background: url(../img/process-banner-text-bg-01.png) no-repeat center;
    margin-top: 80px;
}
.process-banner .row:after{
    content: "";
    display: inline-block;
    width: 180px;
    height: 20px;
    background: url(../img/process-banner-text-bg-02.png) no-repeat center;
}
.process-banner p{
    font-size: 12px;
    opacity: 0.7;
    margin: 0 10%;
    line-height: 22px;
    margin-bottom: 24px;
}



/*marketplace banner*/

.marketplace-banner{
    height: 272px;

}
.marketplace-banner .row{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 220px;
}
.marketplace-banner .row:before,
.marketplace-banner .row:after{
    display: none;
}
.marketplace-banner a{
    display: inline;
    color: #ff6901;
}
.marketplace-banner p{
    margin: 0 140px;
}

/*process-group*/

.process-group{
    background: #ffffff;
}
.process-group ul{
    list-style: none;
    text-align: center;
    margin-bottom: 0;
}
.process-group li{
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 77px 0 0 0;
    background-repeat: no-repeat;
    background-position: center top;
}
.process-app-upload{
    background: url(../img/process-app-image-upload.png);
}
.process-app-audit{
    background: url(../img/process-app-image-audit.png);
}
.process-app-portal{
    background: url(../img/process-app-image-portal.png);
}
.process-app-client{
    background: url(../img/process-app-image-client.png);
}
.process-terminal-dashboard{
    background: url(../img/process-terminal-image-dashboard.png);
}
.process-terminal-information{
    background: url(../img/process-terminal-image-information.png);
}
.process-terminal-push{
    background: url(../img/process-terminal-image-push.png);
}
.process-terminal-batch{
    background: url(../img/process-terminal-image-batch.png);
}
.process-value-scan{
    background: url(../img/process-value-image-scan.png);
}
.process-value-notification{
    background: url(../img/process-value-image-notification.png);
}
.process-value-widget{
    background: url(../img/process-value-image-widget.png);
}
.process-group h3{
    font-size: 16px;
    font-weight: 500;
}
.process-group p{
    font-size: 12px;
    color: rgba(35, 35, 91, 0.6);
    line-height: 22px;
    min-height: 44px;
}
.process-group button{
    vertical-align: middle;
    height: 36px;
    font-size: 12px;
    border-radius: 18px;
    background: #ffffff;
    padding: 0 20px;
    min-width: 88px;
    margin-top: 20px;
    transition: all .24s ease-out;
    border: 1px solid #63AF57;
    color: #63af57;
    padding-bottom: 3px;
}
.process-group button:hover{
    box-shadow: 0 5px 10px rgba(99, 175, 87, 0.4);
    transform: translate3d(0,-2px,0);
    background: #63af57;
    color: #fff;
    opacity: 0.8;
}
.process-group .active button{
    background: #63af57;
    box-shadow: 0 5px 10px rgba(99, 175, 87, 0.2);
    color: #fff;
}
@media (max-width:767px){
    .process-group ul{
        text-align: left;
    }
    .process-group ul{
        margin-bottom: 40px;
    }
    .process-group p{
        min-height: 0
    }
    .process-group li{
        margin-top: 40px;
        margin-bottom: 0px;
        padding-top: 0;
        padding-left: 125px;
        background-position: left top;
    }
    .process-group h3{
        margin-top: 6px;
    }
    .process-group button{
        margin-top: 20px;
    }
}


/*process-detail*/



.process-title{
    height: 66px;
    background: url(../img/process-title-bg.png) no-repeat center;
    color: #FFFFFF;
    overflow: hidden;
    margin-top: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.16);
}
.process-title h3{
    font-size: 22px;
    padding-left: 20px;
}
.process-title p{
    font-size: 68px;
    line-height: 68px;
    font-style: italic;
    font-weight: 100;
    opacity: 0.12;
    position: absolute;
    bottom: -16px;
    left: -16px;
    white-space: nowrap;
}
.process-title span{
    position: absolute;
    right: 20px;
    top: 0;
    height: 66px;
    line-height: 66px;
    color: #cbecf3;
    display: none;
}
.process-title span a{
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    background: url(../img/process-title-icon-video.png) no-repeat center #FFFFFF;
    border-radius: 50%;
    transition: all .24s ease-out;
    margin-left: 8px;
}
.process-title span a:hover{
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);

}
.process-detail-group{
    list-style: none;
    position: relative;
}
.process-list{
    background: #FFFFFF;
    margin-top: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: all .24s ease-out;
    min-height: 200px;
    position: relative;
    z-index: 9;
}
.process-list:hover{
    box-shadow: 0 5px 20px rgba(0, 188, 212, 0.05);
}
.process-list p{
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
}
.process-list p span{
    font-size: 12px;
    line-height: 22px;
    color: rgba(35, 35, 91, 0.6);
    display: block;
    margin-top: 4px;
}
.process-list img{
    width: 100%;
    border: 1px solid #d3e0ea;
}
.process-detail-group:after{
    content: "";
    display: block;
    width: 1px;
    position: absolute;
    top: -30px;
    left: 17px;
    bottom: 0;
    z-index: 1;
    background: #e0e0e6;
}

.process-detail .container{
    overflow: hidden;
}
.process-container{
    position: relative;
}
.process-container-box{
    margin-left: 200%;
    position: absolute;
    transition: all .24s ease-out;
    margin-bottom: 40px;
}
.process-container-box.active{
    margin-left: 0;
    position: relative;
}


@media (min-width:767px){

    .process-list{
        margin-left: 64px;
        margin-right: 0px;
    }
    .process-list:before{
        content: "1";
        display: block;
        position: absolute;
        left: -69px;
        top: 10px;
        width: 45px;
        height: 45px;
        background: url(../img/process-list-step.png) no-repeat center #f8f8f8;
        z-index: 10;
        line-height: 43px;
        text-align: center;
        font-size: 16px;
        color: #00BCD4;
    }
    .process-list:nth-child(2):before{content: "2";}
    .process-list:nth-child(3):before{content: "3";}
    .process-list:nth-child(4):before{content: "4";}
    .process-list:nth-child(5):before{content: "5";}
    .process-list:nth-child(6):before{content: "6";}
    .process-list:nth-child(7):before{content: "7";}
    .process-list:nth-child(8):before{content: "8";}
    .process-list:nth-child(9):before{content: "9";}
    .process-list:nth-child(10):before{content: "10";}
    .process-list:nth-child(11):before{content: "11";}
    .process-list:nth-child(12):before{content: "12";}
    .process-list:nth-child(13):before{content: "13";}
    .process-list:nth-child(14):before{content: "14";}
    .process-list:nth-child(15):before{content: "15";}
    .process-list:last-child:before{
        height: 100%;
        background-position: center top;
    }
}

@media (max-width:767px){
    .process-list p{
        margin-bottom: 30px;
    }
    .process-title{
        margin: 0 -15px;
    }
    .process-title span{
        font-size: 0;
    }
    .process-detail-group{
        padding: 0 15px;
    }
    .process-detail-group:after{

    }
    .process-detail .container{
        margin: 0 -15px;
    }
}


.dropdown-menu{
    padding: 10px 0;
}
.dropdown-menu>li>a{
    padding: 8px 20px;
}



.title-04 h3{
    font-size: 24px;
    color: #23235b;
    line-height: 30px;
    margin: 34px 0 20px 0;
    position: relative;
}
.title-05{
    margin-top: 52px;
}
.title-05 a{
    display: inline-block;
    width: 13px;
    height: 22px;
    background: url(../img/icon-back.png) no-repeat center;
    vertical-align: middle;
    margin-top: -2px;
    padding-right: 30px;
    transition: all .24s ease-out;
}
.title-05 a:hover{
    opacity: 0.6;
    transform: translateY(-2px);
}
.title-select{
    width: 240px;
    position: absolute;
    right: 0;
    top: -2px;
}
.title-select .form-control{
    border: 1px solid #d3e0ea;
    box-shadow: none;
    border-radius: 0px;
    color: #23235b;
}




/*.app-box*/


.app-box-container{
    margin-bottom: 30px;
}
.app-box-container .row{
    margin: 0 -30px;
}
.app-box-container .row > div > div{
    padding: 0 10px 20px;
}
.app-box{
    background: #fff;
    text-align: center;
    padding: 150px 15px 30px;
    font-size: 12px;
    color: #23235b;
    line-height: 1.5em;
    height: 353px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all .24s ease-out;
}
.app-box:hover{
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    opacity: 0.8;
}
.app-box img{
    position: absolute;
    top: 30px;
    left: 50%;
    width: 90px;
    height: 90px;
    border-radius: 20px;
    margin-left: -45px;
}
.app-box h3{
    margin: 0;
    font-size: 16px;
    margin-bottom: 12px;
}
.app-box:hover h3{
    color: #00bcd4;
    transition: all .24s ease-out;
}


.app-box p{
    line-height: 20px;
    color: #a9aabd;
    height: 120px;
    overflow: hidden;
}
.app-box-download{
    display: flex;
    justify-content: space-between;
    color: #00bcd4;
    font-size: 12px;
    width: 75px;
    position: relative;
    height: 14px;
}

.app-box-download b{
    display: block;
    background: url(../img/starrank.png) no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 14px;
    z-index: 2;
}
.app-box-download i{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 14px;
    z-index: 1;
    background: #ff9800;
}





.white-card{
    background: #FFF;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    position: relative;
}

/*app-basicinfo*/

/*app-basicinfo*/

/*app-basicinfo*/

.app-basicinfo{
    padding-left: 204px;
}

.app-basicinfo img{
    width: 144px;
    height: 144px;
    position: absolute;
    left: 30px;
    top: 30px;
}
.app-basicinfo h3{
    font-family: medium;
    margin: 0;
    margin-top: 12px;
}
.app-basicinfo h3 .app-box-download{
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
.app-basicinfo li{
    display: inline-block;
    min-width: 24%;
    vertical-align: top;
    margin-top: 14px;
}
.app-basicinfo li label{
    font-size: 12px;
    color: #a9aabd;
}
.app-basicinfo li p{
    font-size: 14px;
    color: #5B5F87;
    margin-bottom: 0;
}
.app-basicinfo li a{
    color: #00bcd4;
    transition: all .24s ease-out;
}
.app-basicinfo li a:hover{
    opacity: 0.6;
}
.app-detail-rightbox{
    margin-left: 5px;
    margin-right: -15px;
}
.app-detail-title{
    font-size: 16px;
    text-transform: uppercase;
    color: #a9aabd;
    margin: 0;
    margin-top: 40px;
    margin-bottom: 15px;
}
.white-card .app-detail-title:first-child{
    margin-top: 10px;
}
.white-card p{
    font-size: 14px;
    line-height: 22px;
}



/*app_screenshot_box*/

.app_screenshot_box {
    background: #f2f5f7;
    position: relative;
    padding: 30px 0;
}

.app_screenshot_box_container {
    margin: 0 72px;
    overflow: hidden;
}

.app_screenshot_box ul {
    height: auto;
    display: flex;
    transition: all .18s linear .1s;
}

.app_screenshot_box li {
    width: 160px;
    display: inline;
    list-style: none;
    white-space: nowrap;
    margin-right: 16px;
    border: 1px solid #f3f5f7;
    cursor: pointer;
}

.app_screenshot_box li img {
    width: 160px;
}

.app_screenshot_box_left_btn,
.app_screenshot_box_right_btn {
    border-radius: 50%;
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    -webkit-transition: all .18s linear;
    -moz-transition: all .18s linear;
    transition: all .18s linear
}

.app_screenshot_box_left_btn:hover,
.app_screenshot_box_right_btn:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.app_screenshot_box_left_btn {
    left: 16px;
    background: url(../img/app_screenshot_box_left_btn.png) no-repeat center;
}

.app_screenshot_box_right_btn {
    right: 16px;
    background: url(../img/app_screenshot_box_right_btn.png) no-repeat center;
}

.download-summary{
    text-align: center;
}
.download-summary h3{
    margin-top: 10px;
    font-size: 36px;
    color: #23235b;
    line-height: 40px;
    margin-bottom: 2px;
}
.download-summary p{
    font-size: 12px;
    color: rgba(35, 35, 91, 0.6);
    margin: 0;
    margin-bottom: 4px;
}


/*app-detail-applist*/

.app-detail-applist{
    margin: 10px -20px 0;
}
.app-detail-applist li{
    list-style: none;

}
.app-detail-applist li a{
    min-height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 0;
    padding-left: 75px;
}
.app-detail-applist li img{
    width: 40px;
    height: 40px;
    border-radius: 6px;
    position: absolute;
    left: 20px;
    top: 10px;
}
.app-detail-applist li a{
    text-decoration: none;
    transition: all .24s ease-out;
}
.app-detail-applist li p{
    font-size: 16px;
    color: #23235b;
    line-height: 26px;
    margin: 0;
    transition: all .24s ease-out;
}
.app-detail-applist li a:after{
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -8px;
    width: 10px;
    height: 16px;
    background: url(../img/applist-icon-arrow.png) no-repeat center;
}
.app-detail-applist li a:hover{
    background: #f2f5f7;
}
.app-detail-applist li a:hover p{
    color: #00bcd4;
}





@media (max-width:767px){
    .process-banner{
    }
    .process-banner p{
        margin: 0 0 24px 0 ;
    }
    .process-banner .row{
        padding-left: 15px;
    }
    .process-banner .row:before{
        margin-top: 50px;
    }
    .marketplace-banner p{
        margin: 0;
    }
    .app-detail-rightbox{
        display: none;
    }
    .download-summary{
        display: block;
        margin-left: -15px;
    }
    .app-basicinfo{
        padding-left: 20px;
    }
    .app-basicinfo img{
        width: 40px;
        height: 40px;
        border-radius: 6px;
        left: 20px;
        top: 20px;
    }
    .app-basicinfo h3{
        padding-left: 55px;
    }
    .app-basicinfo li{
        padding-right: 20px;
        min-width: calc(33.3333333% - 20px);
        box-sizing: border-box;
    }
    .title-select{
        width: 100px;
    }
}

.product-desc {
    font-size: 12px;
    line-height: 20px;
    font-family:'Book';
    margin-top: 20px;
    color: rgba(255,255,255,0.6);
}
.product-desc-1 {
    font-size: 12px;
    line-height: 20px;
    font-family: Book;
    color: rgba(35,35,91,0.6);
}
.product-desc-2  {
    font-size: 12px;
    line-height: 20px;
    font-family: Book;
    color: rgba(35,35,91,0.6);
}
.product-title-1 {
    color: #23235B;
    text-align: center;
    font-size: 30px;
    font-family: Gotham-Medium,Gotham;;
    font-weight: 500;
    position: relative;
    margin: 0;
}
.product-title-1:after {
    content: " ";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    width: 80px;
    height: 2px;
    background: #FF6901;
    margin: auto;
    bottom: -25px;
}

.product-title-2 {
    color: #23235B;
    font-size: 22px;
    font-family: Gotham-Medium,Gotham;;
    font-weight: 500;
    position: relative;
}

.col-vertical-center {
    margin: 90px auto;
}
.container-product-paragraph:not(:last-child) {
    margin-bottom: 60px;
}
.insight-do-title {
    color: #23235B;
    font-size: 22px;
    font-weight: bold;
    line-height: 42px;
    vertical-align: middle;
    margin: 0 5px;
}
.insight-do-desc {
    padding-left: 55px;
    line-height: 20px;
    font-size: 12px;
    color: rgba(35,35,91,0.6);
    margin: 5px auto 20px;
}
.insight-learn-more {
    background-image: url("../img/insight-bg2.png");
    text-align: center;
    overflow: hidden;
    padding: 0 0 66px 0;
    background-size: cover;
}
.insight-learn-more-title {
    margin-top: 70px;
    color: #fff;
    font-family: Book;
}
.insight-view-doc {
    line-height: 40px;
    margin-top: 20px;
    font-size: 14px;
    background: #FF6901;
    color: #fff;
    display: inline-block;
    padding: 0 30px;
    box-shadow: 0 3px 8px rgba(255, 105, 0, 0.2);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    border-radius: 3px;
}
.insight-view-doc:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}
.insight-view-doc:focus {
    outline: none;
    color: #fff;
    text-decoration: none;
}
.product-banner {
    background: url(../img/product-banner-bg.jpg) no-repeat center #fff;
    background-size: cover;
    text-align: left;
    box-shadow: 0 3px 10px rgba(2, 108, 122, 0.2);
}
.product-banner-img img {
    margin-top: 70px;
}
.posviewer-solution-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 80px;
}
.posviewer-solution-card {
    flex: 0 0 auto;
    vertical-align: middle;
    text-align: center;
    background: #fff;
    box-shadow: 0 5px 10px 0 rgba(91,95,135,0.12);
    padding: 60px 0;
    border-radius: 10px;
    position: relative;
}
.posviewer-solution-card:before {
    content: " ";
    height: 8px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius:8px 8px 0px 0px;
}
.posviewer-solution-old.posviewer-solution-card:before {
    background-color: #D6DEF1;
}
.posviewer-solution-new.posviewer-solution-card:before {
    background-color: #2469FF;
}
.posviewer-icon-vs {
    flex: 0 0 71px;
}
.posviewer-solution-title {
    font-size: 22px;
    line-height: 26px;
    font-weight: bold;
    margin: 0 75px;
}
.posviewer-solution-old .posviewer-solution-title {
    color: #23235B;
}
.posviewer-solution-new .posviewer-solution-title {
    color: #2469FF;
}
.posviewer-product-title {
    color: #23235B;
    font-size: 30px;
    font-family: Medium;
    font-weight: 500;
    position: relative;
    margin: 0;
    padding-left: 30px;
}
.posviewer-product-title:after {
    content: " ";
    position: absolute;
    display: block;
    left: 30px;
    height: 2px;
    width: 80px;
    background-color: #FF6901;
    bottom: -25px;
}
.posviewer-why-img {
    position: absolute;
    bottom: 0;
}
.posviewer-solution-img {
    margin-top: 40px;
}
.posviewer-solution-feature-list {
    display: block;
    width: 250px;
    text-align: left;
    color: rgba(35,35,91,0.6);
}
.posviewer-solution-summary {
    color: rgba(35,35,91,0.6);
    font-size: 14px;
    font-weight: 600;
}
.posviewer-solution-old .posviewer-solution-feature-list {
    margin: 40px auto 20px;
    padding-left: 75px;
}
.posviewer-solution-new .posviewer-solution-feature-list {
    margin: 40px auto;
    padding-left: 25px;
}
.posviewer-solution-new .posviewer-solution-summary {
    color: #FF6901;
}
.posviewer-support-container {
    background:linear-gradient(180deg,rgba(17,14,59,1) 0%,rgba(31,57,152,1) 100%);
    background-size: cover;
    padding: 80px 0 60px;
}
.posviewer-support-step-container {
    display: flex;
    align-content: center;
    margin-top: 40px;
}
.posviewer-support-step {
    flex: 0 0 200px;
}
.posviewer-step-curve {
    align-self: flex-start;
    margin-top: 90px;
}
.posviewer-step-title {
    font-family: Medium;
    font-weight: 500;
    color: #FF6901;
    font-size: 22px;
    line-height: 26px;
    text-align: center;
}
.posviewer-step-desc {
    font-family: Book;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    line-height: 20px;
    text-align: center;
}
.posviewer-reason-title {
    font-family: Medium;
    font-size: 16px;
    font-weight: 500;
    color: rgba(35,35,91,1);
    line-height: 20px;
}
.posviewer-reason-desc {
    font-size: 12px;
    font-family: Book;
    color:rgba(35,35,91,0.6);
    line-height: 20px;
    margin-top: 15px;
}
.posviewer-reason-btn {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
.posviewer-reason-item {
    position: relative;
    border-bottom: 1px solid #DEDEDE;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.cloud-message-why-container {
    background:linear-gradient(180deg,rgba(17,14,59,1) 0%,rgba(31,57,152,1) 100%);
    padding: 80px 0;
    position: relative;
}
.carousel-list-container {
    margin-top: 85px;
    overflow: hidden;
}
.cloud-message-reason-title {
    color: #23235B;
    font-family: Medium;
    font-weight: 500;
    font-size: 22px;
}
.cloud-message-reason-desc {
    color: rgba(35,35,91,0.6);
    font-family: Book;
    font-size: 12px;
    margin-top: 10px;
}
.cloud-message-reason-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 50px;
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    height: 240px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.cloud-message-reason-card:not(.active) .cloud-message-reason-card-bg {
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
}
.cloud-message-reason-card[data-index="2"] .cloud-message-reason-card-bg {
    background-color: rgba(17, 14, 59, .4);
}
.cloud-message-reason-card[data-index="1"] .cloud-message-reason-card-bg {
    background-color: rgba(17, 14, 59, .6);
}
.cloud-message-reason-card.active {
    opacity: 1;
}
.cloud-message-reason-icon {
    margin-right: 40px;
}
.cloud-message-reason-inner {
}
.carousel-list {
    margin: auto;
    width: 530px;
    position: relative;
    height: 240px;
}
.carousel-navigators {
    position: absolute;
    left: 50%;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    list-style: none;
    bottom: 20px;
    text-align: center;
}
.carousel-navigators li {
    display: inline-block;
    opacity: .2;
    margin: 0 5px;
    cursor: pointer;
}
.carousel-navigator-inner {
    width: 40px;
    height: 2px;
    background-color: #fff;
    margin: 10px 0;
}
.carousel-navigators li.active {
    opacity: 1;
}
.cloud-message-switch {
    width: 200px;
    margin: auto;
    line-height: 36px;
    padding: 4px;
    border-radius: 45px;
    background-color: #fff;
    display: flex;
    box-shadow:0 3px 8px 0 rgba(91,95,135,0.12);
}
.cloud-message-switch-item {
    border-radius: 45px;
    flex: 1 0 auto;
    color:rgba(35,35,91,0.6);
    font-family: Medium;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}
.cloud-message-switch-item.active {
    background-color: #2469FF;
    color: #fff
}
.cloud-message-work-card-container {
    display: flex;
    justify-content: space-between;
}
.cloud-message-work-card {
    flex: 0 0 305px;
    background-color: #fff;
    box-shadow: 0 5px 10px 0 rgba(35,35,91,0.12);
    border-radius: 10px;
    text-align: center;
    padding: 0 25px;
    height: 415px;
    margin: 10px;
    position: relative;
    overflow: hidden;
}
.cloud-message-work-title {
    color: #23235B;
    font-size: 18px;
    font-family: Medium;
    margin-top: 32px;
    font-weight: 500;
}
.cloud-message-work-desc {
    font-size: 12px;
    font-family: Book;
    color: rgba(35,35,91,0.6);
    margin-top: 10px;
}
.cloud-message-work-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 50px;
    color: #fff;
    background-color: #FF6901;
    font-size: 18px;
    padding: 14px 11px 9px 15px;
    border-radius: 100%;
    box-shadow: 0px 5px 10px 0px rgba(255,105,1,0.2);
}
.cloud-message-work-card-wrapper {
    position: relative;
    margin-top: 60px;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.cloud-message-work-card-wrapper.sdk {
    transform: translate(-100%, 0);
}
.cloud-message-work-card-container.sdk {
    position: absolute;
    left: 100%;
    top: 0;
}
.pax-landing-sub-title {
    font-family: Medium;
    font-weight: 500;
    color: rgba(35,35,91,1);
    font-size: 16px;
    margin-bottom: 20px;
}
.pax-landing-work-container {
    padding-left: 30px;
}
.pax-landing-adv-item {
    margin-bottom: 15px;
}
.pax-lading-adv-item-number {
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    color: #2469FF;
    background-color: rgba(36, 105, 255, 0.08);
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 10px;
}
.pax-lading-adv-item-desc {
    display: inline-block;
    color: rgba(35, 35, 91, 0.6);
    font-family: Book;
}
.pax-landing-what-do-container {
    margin-top: 50px;
    text-align: center;
    position: relative;
}
.pax-landing-app-manage {
    position: absolute;
    left: 0;
    top: 160px;
}
.pax-landing-app-manage {
    text-align: right;
}
.pax-landing-app-manage .pax-lading-adv-item-number {
    margin-right: 0;
    margin-left: 10px;
}
.pax-landing-terminal-manage {
    position: absolute;
    right: 0;
    top: 110px;
}
.pax-landing-terminal-manage {
    text-align: left;
}
.pax-landing-why-item {
    position: relative;
    padding-left: 60px;
    padding-top: 13px;
}
.pax-landing-why-item .pax-landing-sub-title {
    margin-bottom: 15px;
}
.pax-landing-why-item:not(:last-child) {
    margin-bottom: 25px;
}
.pax-landing-why-icon {
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown-menu {
    padding: 15px 0;
}
.dropdown-product-logo {
    width: 35px;
    vertical-align: middle;
}
.dropdown-item-content {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}
.dropdown-item-label {
    color: #041026;
    font-size: 16px;
}
.product-label-1 {
    font-family: Book;
}
.product-label-2 {
    font-family: Medium;
}
.dropdown-menu>li>a {
    padding: 15px 60px 15px 30px;
    position: relative;
}
.dropdown-item-desc {
    color: rgba(35, 35, 91, .6);
    font-size: 12px;
}
.icon-arrow-right {
    vertical-align: middle;
    width: 20px;
    position: absolute;
    right: 20px;
    top: 20px;
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu {
        right: -70px;
        left: auto;
    }
}
@keyframes slideDown {
    from {
        max-height: 100px;
    }
    to {
        max-height: 300px;
    }
}

.open>.dropdown-menu {
    animation: slideDown .14s linear;
}