/*------------------- Start Home Daynamic Category Boxes Design ----------------*/
/*------------Swiper slider start-----------*/
.i-appli .section-title {
    margin-bottom: 60px;
    padding-bottom: 0;
    font-weight: 400;
    font-size: 16px;
    position: relative;
    display: block;
}

.i-appli {
    padding: 0px 0px 80px;
}

    .i-appli .i-appli-main {
        position: relative;
    }

.appli-list {
    display: flex;
    margin-bottom: 12px;
    list-style: none;
}

    .appli-list:last-child {
        margin-bottom: 0;
    }

    .appli-list > li {
        width: 27%;
        margin-bottom: 15px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        padding: 0 6px;
        transition: .65s;
        box-sizing: border-box;
        list-style-type: none;
    }

    .appli-list .appli-card {
        display: block;
        position: relative;
        height: 325px;
        padding: 20px;
        background-size: cover;
        background-position: center center;
        overflow: hidden;
        color: #fff;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        box-sizing: border-box;
    }

.appli-card-text {
    position: absolute;
    top: 0;
    right: 0px;
    left: 20px;
    height: 164px;
    margin-top: 285px;
    -webkit-transition: .65s;
    transition: .65s;
}

    .appli-card-text .icon {
        width: 80px;
        height: 42px;
        margin-bottom: 16px;
        background-position: left 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        display: block;
    }

    .appli-card-text .appli-card-tit {
        margin-bottom: 12px;
        font-size: 17px;
        font-weight: bold;
    }

    .appli-card-text p {
        width: auto;
        height: 3.12em;
        line-height: 1.56em;
        opacity: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #fff;
    }

.appli-list li:hover .appli-card-text {
    margin-top: 225px;
}

.appli-list li:hover p {
    opacity: 1;
    -webkit-transition: .65s .1s;
    transition: .65s .1s;
}

.i-appli .i-appli-bg {
    position: absolute;
    top: -36%;
    left: -28%;
    display: block;
    width: 56%;
    height: auto;
}

.i-appli-btn .prev {
    left: -54px;
}

.i-appli-btn .next {
    right: -54px;
}

.appli-list > li:hover {
    width: 40%;
}

.appli-list li:hover .appli-card-text {
    right: 20px;
}

.i-appli-main .slide-btn {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 9;
    display: none;
}

.slide-btn {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 9;
}

.wrapper-container .site-nav li.dropdown:nth-child(5) .site-nav-dropdown .col-1 .inner {
    width: 50%;
}

.wrapper-container .site-nav li.dropdown .site-nav-dropdown.style_2 .col-1 {
    width: 100%;
}

.site-nav-dropdown .col-1 {
    float: left;
    width: 60%;
}

.wrapper-container .site-nav li.dropdown .site-nav-dropdown .col-1 .inner {
    width: 100%;
    margin: 0px 0px;
}

.site-nav-dropdown .col-1 .inner, .site-nav-dropdown .col .inner {
    float: left;
    position: relative;
}


.slide-btn > a {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background-image: url(/DMS/Images/arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #828282;
    border-radius: 40px;
    box-sizing: border-box;
}

.slide-btn .prev {
    left: -66px;
}

.slide-btn .next {
    right: -66px;
    transform: rotate(180deg);
}

.slide-btn > a:hover {
    background-image: url(/DMS/Images/arrow-hover.png);
    border-color: #0b56c3;
}

.card-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.5));
    -webkit-transition: .65s;
    transition: .65s;
}

.card:hover .card-cover {
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.5));
}
/*------------Swiper slider end-----------*/
/*------------------- End Home Daynamic Category Boxes Design ----------------*/


/* --------------------------  Responsive Mobile Start ------------------------------ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .appli-list > li {
        width: 100%;
    }

    .appli-list > li {
        width: 26%;
        margin-bottom: 15px;
    }

    .appli-list .appli-card {
        height: 200px;
    }
    .appli-card-text {
        margin-top: 134px !important;
        left: 10px;
    }
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
    .appli-list > li {
        width: 100%;
    }
    .appli-list > li {
        width: 26%;
        margin-bottom: 15px;
    }
    .appli-list .appli-card {
        height: 200px;
    }
    .appli-card-text {
        margin-top: 134px !important;
        left: 10px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    .appli-list > li {
        width: 100%;
        margin-bottom: 15px;
    }
    .appli-list .appli-card {
        height: 200px;
    }
}

/* --------------------------  Responsive Mobile End ------------------------------ */