.template-inner,
.template-inner * {
    box-sizing: border-box;
}

.template-inner .content-wrap {
    max-width: 1150px;
}

.template-inner h1,
.template-inner h2,
.template-inner h3,
.template-inner h4,
.template-inner h5 {
    font-family: var(--zf-primary-bold);
}

.template-inner h1 {
    font-size: 55px;
}

.template-inner h2 {
    font-size: 45px;
}

.template-inner h2 span {
    display: block;
}

.template-inner h3 {
    font-size: 30px;
}

.act-btn {
    background: #000;
    color: #fff;
    margin: 15px 0 0;
    padding: 12px 30px;
}

.zw-product-header {
    background: #f5f7d7;
}

.top-section {
    background: #f5f7d7;
    background: -moz-linear-gradient(top, #f5f7d7 50%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #f5f7d7 50%, #ffffff 100%);
    background: linear-gradient(to bottom, #f5f7d7 50%, #ffffff 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5f7d7', endColorstr='#ffffff', GradientType=0);
    padding: 80px 0 120px;
    text-align: center;
}

.top-header {
    max-width: 870px;
    margin: 0 auto;
}

.top-header p {
    max-width: 550px;
    margin: 0 auto 20px;
}

.slider-box {
    max-width: 1980px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.slider-box-outer {
    background: url('/sites/zweb/images/workplace/dashboard-header-sprite.png') repeat-x 0 0/contain;
    min-height: 600px;
    width: 3960px;
}

.slider-box-outer.active {
    animation: slide 45s linear infinite;
}

.pause .slider-box-outer.active {
    animation-play-state: paused;
}

@keyframes slide {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-1980px, 0, 0);
    }
}

.dd {
    background: url('/sites/zweb/images/workplace/dashboard-header-sprite.png') no-repeat 0 0/1500px auto;
    opacity: 0;
}

.dd-1 {
    width: 255px;
    height: 240px;
    background-position: -10px -30px;
    transform: translate(-258%, -338%)
}

.dd-2 {
    width: 185px;
    height: 220px;
    background-position: -350px -190px;
    transform: translate(-134%, -278%);
}

.dd-3 {
    width: 185px;
    height: 160px;
    background-position: -630px -38px;
    transform: translate(76%, -518%);
}

.dd-4 {
    width: 170px;
    height: 85px;
    background-position: -846px -285px;
    transform: translate(236%, -668%);
}

.dd-5 {
    width: 180px;
    height: 90px;
    background-position: -1020px -58px;
    transform: translate(346%, -958%);
}

.dd-6 {
    width: 250px;
    height: 265px;
    background-position: -1250px -175px;
    transform: translate(336%, -218%);
}

.screen-box {
    margin: 80px 0;
}

.screen-box li {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    transition: transform 1s ease, opacity .5s ease;
}

.screen-box.active li {
    opacity: .6;
    transform: translate(0, 0);
}

.screen-box img {
    max-width: 1000px;
    display: block;
    width: 100%;
    margin: 0 auto;
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    position: relative;
    z-index: 9;
}

.bottom-animated .screen-box img {
    transform: translateY(0);
    opacity: 1;
}

.drag-box {
    position: relative;
}

.drag-box-outer {
    display: flex;
    max-width: 900px;
}

.drag-box-inner {
    width: 33.33%;
    padding: 0 15px;
}

.drag-list-outer {
    margin: 0 0 30px;
    border-radius: 25px;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: 0 15px;
    background-size: 1300px auto;
    min-height: 320px;
    position: relative;
    border: 1px solid #F5F5F5;
}

.drag-list-outer-1:after {
    content: '';
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: -255px 15px;
    background-size: 1300px auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    opacity: 0;
    visibility: hidden;
}

.drag-list-outer-2 {
    background-position: -515px 15px;
}

.drag-list-outer-3 {
    background: #F5F5F5;
}

.drag-list-outer-3:after {
    content: '';
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: -255px 15px;
    background-size: 1300px auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.drag-list-outer-4 {
    background-position: -775px 15px;
}

.drag-list-outer-5 {
    background-position: -1045px 15px;
}

.middle-animated .d-first .drag-list-outer:first-child {
    background: none;
    animation: drag 3s ease forwards;
}

.middle-animated .d-first .drag-list-outer-1:after {
    transition: visibility 1s ease 1.7s, opacity 1s ease 1.7s;
    opacity: 1;
    visibility: visible;
}

@keyframes drag {
    50% {
        border: 1px dashed #707070;
        background: #EBFAFF;
    }
    100% {
        background: #F5F5F5;
        border: 1px solid #F5F5F5;
    }
}

.drag-list-inner {
    min-height: 320px;
    position: relative;
    border-radius: 25px;
}

.drag-list-inner:after {
    content: '';
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 260px auto;
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    z-index: 99;
}

.data-loaded .drag-list-inner:after {
    background-image: url('/sites/zweb/images/workplace/dashboard-sprite.png');
}

.middle-animated .drag-list-inner {
    opacity: 1;
    box-shadow: -4px 4px 20px 4px rgba(0, 0, 0, 0.06);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 0 15px;
    background-size: 1300px auto;
    z-index: 99;
    transform: translate3d(290px, 10px, 0);
    animation: dragMove 3s ease forwards;
}

.data-loaded .drag-list-outer,
.data-loaded .drag-list-outer-1:after,
.data-loaded .drag-list-outer-3:after,
.middle-animated .data-loaded .drag-list-inner {
    background-image: url('/sites/zweb/images/workplace/dashboard-drag-drop-sprite.png');
}

@keyframes dragMove {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    50% {
        transform: translate3d(150px, 80px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(290px, 10px, 0);
    }
}

.middle-animated .d-second .drag-list-outer:first-child {
    animation: drop 3s ease forwards;
}

.middle-animated .d-second .drag-list-outer:first-child:after {
    transition: visibility 1s ease 1.7s, opacity 1s ease 1.7s;
    opacity: 0;
    visibility: hidden;
}

@keyframes drop {
    50% {
        border: 1px solid #F5F5F5;
        background: #F5F5F5;
    }
    100% {
        border: 1px dashed #707070;
        background: #EBFAFF;
    }
}

.d-last .drag-list-outer:first-child {
    background: transparent;
    border-color: transparent;
}

.drag-list-text {
    position: absolute;
    right: 60px;
    top: 50px;
}

.drag-list-text h2 {
    max-width: 330px;
}

.drag-list-text p {
    max-width: 400px;
}

.drag-box img {
    display: none;
}

.toggle-filter {
    position: absolute;
    background: #3A8CD7;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    bottom: 30px;
    right: 110px;
}

.middle-animated .toggle-filter:before {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #3A8CD7;
    border: 2px solid #3A8CD7;
    animation: wave 2s forwards infinite;
    border-radius: 100%;
}

@keyframes wave {
    0% {
        transform: scale(0.6);
        opacity: 1;
        box-shadow: inset 0px 0px 25px 3px rgba(58, 140, 215, 0.8), 0px 0px 25px 10px rgba(58, 140, 215, 0.3);
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
        box-shadow: none;
    }
}

.toggle-filter:after {
    content: '';
    background-repeat: no-repeat;
    background-position: -38px -1px;
    background-size: 240px auto;
    position: absolute;
    width: 30px;
    height: 35px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.data-loaded .toggle-filter:after {
    background-image: url('/sites/zweb/images/workplace/dashboard-sprite.png');
}

.box-inner {
    display: flex;
    margin: 80px 0;
}

.box-left {
    width: 50%;
    padding-right: 50px;
}

.box-right {
    width: 50%;
    padding-left: 50px;
}

.features-section .box-inner {
    margin: 150px 0;
}

.notify-box {
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto;
}

.update-icon {
    background: #16c381;
    width: 100px;
    height: 100px;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    box-shadow: -4px 4px 20px 4px rgba(27, 195, 128, 0.45);
}

.update-icon:before {
    content: '';
    background-repeat: no-repeat;
    background-position: -117px -1px;
    background-size: 400px auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 60px;
    height: 60px;
}

.data-loaded .update-icon:before {
    background-image: url('/sites/zweb/images/workplace/dashboard-sprite.png');
}

.bottom-animated .update-icon:before {
    animation: reload 2s linear infinite;
}

@keyframes reload {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.icon-1,
.icon-2,
.icon-3,
.icon-4,
.icon-5,
.icon-6,
.icon-7 {
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    transform: scale(0);
    transition: transform .8s ease;
}

.middle-animated [class^="icon-"] {
    will-change: transform;
    transform: scale(1);
}

.icon-1,
.icon-2,
.icon-3 {
    background: #e2e2e2;
}

.icon-1 {
    width: 30px;
    height: 30px;
    right: 70px;
    bottom: 0;
    top: 0;
    margin: auto;
}

.middle-animated .icon-1 {
    transition-delay: .2s;
}

.icon-2 {
    width: 40px;
    height: 40px;
    bottom: 60px;
    left: 70px;
}

.middle-animated .icon-2 {
    transition-delay: .4s;
}

.icon-3 {
    width: 50px;
    height: 50px;
    top: 0;
    left: 170px;
}

.middle-animated .icon-3 {
    transition-delay: .6s;
}

.icon-4,
.icon-5,
.icon-6,
.icon-7 {
    background: #fff;
    box-shadow: 0px 0px 20px 0px rgba(202, 202, 202, 0.45);
}

.icon-4,
.icon-5 {
    width: 70px;
    height: 70px;
}

.icon-4:before,
.icon-5:before,
.icon-6:before,
.icon-7:before {
    content: '';
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 240px auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.data-loaded .icon-4:before,
.data-loaded .icon-5:before,
.data-loaded .icon-6:before,
.data-loaded .icon-7:before {
    background-image: url('/sites/zweb/images/workplace/dashboard-sprite.png');
}

.icon-4 {
    left: 50px;
    top: 50px;
}

.icon-4:before {
    background-position: -105px -3px;
    width: 30px;
    height: 35px;
}

.middle-animated .icon-4 {
    transition-delay: .8s;
}

.icon-5 {
    left: 150px;
    bottom: -10px;
}

.icon-5:before {
    background-position: -169px -2px;
    height: 32px;
    width: 35px;
}

.middle-animated .icon-5 {
    transition-delay: 1s;
}

.icon-6,
.icon-7 {
    width: 80px;
    height: 80px;
}

.icon-6 {
    bottom: 20px;
    right: 20px;
}

.icon-6:before {
    background-position: -205px -5px;
    height: 27px;
    width: 35px;
}

.middle-animated .icon-6 {
    transition-delay: 1.2s;
}

.icon-7 {
    top: 20px;
    right: 50px;
}

.icon-7:before {
    background-position: -135px -4px;
    width: 30px;
    height: 30px;
}

.middle-animated .icon-7 {
    transition-delay: 1.4s;
}

.sub-section {
    padding: 120px 0 80px;
    text-align: center;
    position: relative;
}

.sub-section:before {
    content: '';
    background: #f5f7d7;
    width: 100%;
    height: 85%;
    left: 0;
    top: 0;
    right: 0;
    position: absolute;
}

.subfeatures-box {
    display: flex;
    margin: 80px auto 0;
    max-width: 1000px;
}

.subfeature-outer:first-child {
    width: 50%;
    padding-right: 25px;
}

.subfeature-outer:last-child {
    width: 50%;
    padding-left: 25px;
    margin-top: 80px;
}

.subfeature-inner {
    background: #fff;
    border-radius: 25px;
    margin-bottom: 50px;
    padding: 80px 40px 50px;
    box-shadow: -4px 4px 20px 4px rgba(0, 0, 0, 0.06);
    transition: transform .5s ease;
    transform: translateY(50px);
}

.subfeature-inner.active {
    transform: translateY(0);
}

.subfeature-inner img {
    margin: 0 auto 50px;
    max-width: 300px;
    display: block;
    width: 100%;
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.subfeature-inner.active img {
    transform: translateY(0);
    opacity: 1;
}

.search-section {
    padding: 50px 0 80px;
}

.search-section .box-inner {
    align-items: center;
    margin: 0 auto 20px;
    max-width: 1000px;
}

.search-section img {
    margin: 0 auto;
    max-width: 850px;
    display: block;
    width: 100%;
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.search-section .middle-animated img {
    transform: translateY(0);
    opacity: 1;
}

.mobile-section .box-inner {
    align-items: center;
    margin: 80px auto 40px;
    max-width: 1000px;
}

.app-scroll {
    width: 340px;
    margin: 0 auto;
    position: relative;
    display: table;
}

.app-scroll:before {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
}

.app-scroll:after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
}

.app-scroll-inner {
    width: 150px;
    float: left;
    overflow: hidden;
    height: 540px;
}

.app-scroll-inner:first-child {
    margin-right: 30px
}

.app-scroll-inner:first-child ul {
    will-change: transform;
    animation: scrollUp 30s linear infinite;
}

.app-scroll-inner:first-child:hover ul {
    animation-play-state: paused;
}

@keyframes scrollUp {
    0% {
        transform: translateY(-1620px)
    }
    100% {
        transform: translateY(0px)
    }
}

.app-scroll-inner:last-child ul {
    will-change: transform;
    animation: scrollDown 30s linear infinite;
}

.app-scroll-inner:last-child:hover ul {
    animation-play-state: paused;
}

@keyframes scrollDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-1620px);
    }
}

.app-scroll-inner li {
    height: 150px;
    width: 150px;
    margin-bottom: 30px;
    border-radius: 20px;
    position: relative;
    background: #F5F5F5;
}

.app-icon {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 1350px auto;
}

.data-loaded .app-icon {
    background-image: var(--mobile-app-icons);
}

.app-icon-1 {
    background-position: -256px -64px;
}

.app-icon-2 {
    background-position: -320px -64px;
}

.app-icon-3 {
    background-position: -384px -128px;
}

.app-icon-4 {
    background-position: -768px -128px;
}

.app-icon-5 {
    background-position: 0 -64px;
}

.app-icon-6 {
    background-position: -192px -64px;
}

.app-icon-7 {
    background-position: -64px 0;
}

.app-icon-8 {
    background-position: -1152px 0px;
}

.app-icon-9 {
    background-position: 0 -64px;
}

.mobile-section a {
    text-decoration: underline;
    color: #1975d2;
}

.bottom-section {
    padding: 80px 0;
    text-align: center;
}

/* top breadcrumb start */

@media only screen and (min-width:768px) {

.zwc_t_breadcrumb {
    background: #f6f7d7;
}

.i18n-en .zwc_t_breadcrumb + .template-inner section.top-section {
    padding-top: 60px;
}

}

/* top breadcrumb end */


@media only screen and (min-width:1400px) and (max-width:1599px) {
    .template-inner h1 {
        font-size: 55px;
    }
    .template-inner h2 {
        font-size: 40px;
    }
    .template-inner h3 {
        font-size: 25px;
    }
}

@media only screen and (max-width:1399px) {
    .template-inner h1 {
        font-size: 50px;
    }
    .template-inner h2 {
        font-size: 35px;
    }
    .template-inner h3 {
        font-size: 25px;
    }
}

@media only screen and (max-width:1199px) {
    .template-inner h1 {
        font-size: 48px;
    }
    .template-inner .content-wrap {
        max-width: 1000px;
    }
    .top-section {
        padding: 50px 0;
    }
    .slider-box-outer {
        min-height: 450px;
    }
    .screen-box ul {
        display: none;
    }
    .screen-box img {
        max-width: 800px;
    }
    .drag-list-text {
        top: 20px;
        right: 40px;
    }
    .drag-box-outer {
        max-width: 730px;
    }
    .drag-list-outer,
    .drag-list-inner {
        min-height: 250px;
    }
    .drag-list-outer {
        background-size: 1030px auto;
    }
    .drag-list-outer-1:after {
        background-size: 1030px auto;
        background-position: -205px 15px;
    }
    .drag-list-outer-2 {
        background-position: -410px 15px;
    }
    .drag-list-outer-3:after {
        background-size: 1030px auto;
        background-position: -205px 15px;
    }
    .drag-list-outer-4 {
        background-position: -615px 15px;
    }
    .drag-list-outer-5 {
        background-position: -825px 15px;
    }
    .middle-animated .drag-list-inner {
        transform: translate3d(230px, 10px, 0);
        background-size: 1030px auto;
    }
    @keyframes dragMove {
        0% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        50% {
            transform: translate3d(120px, 50px, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(230px, 10px, 0);
        }
    }
    .toggle-filter {
        right: 140px;
    }
    .features-section .box-inner {
        margin: 120px 0;
    }
    .sub-section {
        padding: 90px 0 40px;
    }
    .sub-section:before {
        height: 90%;
    }
    .subfeatures-box {
        max-width: 850px;
    }
    .search-section {
        padding: 50px 0 0;
    }
    .search-section .box-inner {
        max-width: 850px;
    }
    .search-section img {
        max-width: 750px;
    }
    .app-scroll {
        margin: 0 0 0 auto;
        transform: scale(.8);
    }
    .bottom-section {
        padding: 40px 0 60px;
    }
}

@media only screen and (max-width:991px) {
    .template-inner h1 {
        font-size: 45px;
    }
    .template-inner h2 {
        font-size: 35px;
    }
    .template-inner h2 span {
        display: inline-block;
    }
    .template-inner h3 {
        font-size: 22px;
    }
    .top-section {
        padding: 50px 0 20px;
    }
    .slider-box-outer {
        min-height: 350px;
    }
    .screen-box img {
        max-width: 600px;
    }
    .drag-list-text {
        position: static;
        text-align: center;
    }
    .drag-list-text h2 {
        margin: 0 auto 20px;
        width: inherit;
    }
    .drag-list-text p {
        margin: 0 auto;
    }
    .drag-box-outer {
        margin: 50px auto 0;
    }
    .toggle-filter {
        top: 260px;
        bottom: inherit;
    }
    .features-section .box-inner {
        flex-direction: column;
        text-align: center;
        margin: 70px 0 80px;
    }
    .features-section .box-left,
    .features-section .box-right {
        width: 100%;
        padding: 0;
    }
 
    .features-section .box-left p {
        max-width: 500px;
        margin: 0 auto 20px;
    }
    .notify-box {
        transform: scale(.8);
    }
    .sub-section {
        padding: 70px 0 20px;
    }
    .subfeatures-box {
        max-width: 750px;
    }
    .subfeature-inner {
        padding: 50px 30px 30px;
    }
    .subfeature-inner img {
        max-width: 220px;
    }
    .search-section img {
        max-width: 600px;
    }
    .mobile-section .box-inner {
        margin: 60px auto 20px;
    }
}

@media only screen and (max-width:767px) {
    body {
        -webkit-text-size-adjust: none;
    }
    .main-container-wrapper #mini-panel-product_menu .menu-icon-help-header {
        margin-top: 20px;
    }
    .main-container-wrapper.umain #mini-panel-product_menu .menu-icon-help-header {
        margin-top: 0;
    }
    .template-inner h1 {
        font-size: 30px;
    }
    .template-inner h2 {
        font-size: 25px;
    }
    .template-inner h3 {
        font-size: 20px;
    }
    .slider-box-outer {
        min-height: 230px;
    }
    .box-inner {
        flex-direction: column;
    }
    .box-left,
    .box-right {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .screen-box {
        margin: 50px 0;
    }
    .screen-box img {
        max-width: 450px;
    }
    .drag-box-outer {
        display: none;
    }
    .drag-box img {
        display: block;
        max-width: 350px;
        margin: 30px auto 0;
        transform: translateY(50px);
        opacity: 0;
        transition: transform 1s ease, opacity 1s ease;
    }
    .middle-animated .drag-box img {
        transform: translateY(0);
        opacity: 1;
    }
    .toggle-filter {
        display: none;
    }
    .features-section .box-inner {
        margin: 50px 0;
    }
    .notify-box {
        transform: scale(.7);
    }
    .sub-section:before {
        height: 95%;
    }
    .subfeatures-box {
        flex-direction: column;
        margin: 50px auto 0;
    }
    .subfeature-outer:first-child,
    .subfeature-outer:last-child {
        width: 100%;
        padding: 0;
    }
    .subfeature-outer:last-child {
        margin-top: 0;
    }
    .subfeature-inner {
        max-width: 350px;
        margin: 0 auto 30px;
    }
    .search-section img {
        max-width: 500px;
    }
    .mobile-section .box-inner {
        flex-direction: column-reverse;
    }
    .search-section p,
    .mobile-section p {
        max-width: 450px;
        margin: 0 auto 20px;
    }
    .app-scroll {
        margin: -10px auto 0;
        transform: scale(.7);
    }
    .bottom-section {
        padding: 0px 0 40px;
    }
}

@media only screen and (max-width:480px) {
    .drag-box img {
        max-width: 270px;
    }
    .notify-box {
        width: 300px;
    }
    .icon-1 {
        right: 20px;
    }
    .icon-2 {
        bottom: 50px;
        left: 30px;
    }
    .icon-3 {
        left: 120px;
    }
    .icon-4 {
        left: 10px;
        top: 60px;
    }
    .icon-5 {
        left: 120px;
        bottom: -30px;
    }
    .icon-6 {
        bottom: 30px;
        right: -20px;
    }
    .icon-7 {
        top: 10px;
        right: 20px;
    }
    .app-scroll {
        width: 310px;
    }
    .app-scroll-inner {
        height: 480px;
    }
    .app-scroll-inner:first-child {
        margin-right: 0px;
    }
    .app-scroll-inner li {
        height: 130px;
        width: 130px;
        margin: 0 auto 30px;
    }
    @keyframes scrollUp {
        0% {
            transform: translateY(-1440px);
        }
        100% {
            transform: translateY(0px);
        }
    }
    @keyframes scrollDown {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-1440px);
        }
    }
}
.i18n-zh-hant .subfeature-inner{
   padding: 80px 30px 50px;
}

/*feature-breadcrumb start*/
.feature-breadcrumb {
  padding-top: 23px;
  background-color: #f5f7d7;    
}
.feature-breadcrumb.breadcrumb-dark li {
  color: #000;
}
.feature-breadcrumb.breadcrumb-dark li a {
  color: #666;
}
.feature-breadcrumb.breadcrumb-dark li a:hover {
  color: #000;
}
.feature-breadcrumb.breadcrumb-dark li a:after {
  background: #000;
}
.feature-breadcrumb.breadcrumb-light li {
  color: #fff;
}
.feature-breadcrumb.breadcrumb-light li a {
  color: #fff;
}
.feature-breadcrumb.breadcrumb-light li a:hover {
  color: #fff;
}
.feature-breadcrumb.breadcrumb-light li a:after {
  background: #fff;
}
.feature-breadcrumb .jpc-container {
  max-width: 1240px;
  padding: 0px 20px;  
  margin-left: auto;
  margin-right: auto;
}
.feature-breadcrumb li {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
  margin-right: 14px;
  position: relative;
  color: #fff;
}
.feature-breadcrumb li a {
  color: #8cbaff;
  position: relative;
  display: block;
  transition: 0.2s;
  padding-bottom: 4px;
}
.feature-breadcrumb li a:hover {
  color: #fff;
}
.feature-breadcrumb li a:hover:after {
  width: 100%;
  left: 0;
  right: auto;
  transition: all 0.2s linear;
}
.feature-breadcrumb li a:before {
  content: '>';
  display: block;
  height: 5px;
  width: 5px;
  position: absolute;
  right: -8px;
  top: -1px;
  font-size: 13px;
  font-weight: 400;
  pointer-events: none;
}
.feature-breadcrumb li a:after {
  content: '';
  display: block;
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: #fff;
  transition: all 0.3s linear;
}
/*feature-breadcrumb end*/