/*public*/
@font-face {
    font-family: 'shabnam';
    src: url('https://khorshidneshan.ir/CDN/Fonts/shabnam.eot');
    src: local('☺'), url('https://khorshidneshan.ir/CDN/Fonts/shabnam.woff') format('woff'), url('https://khorshidneshan.ir/CDN/Fonts/shabnam.ttf') format('truetype');
}

* {
    font-family: shabnam,tahoma;
    direction: rtl;
    font-size: 14px;
    word-spacing: -1px;
}

body {
    margin: 0;
}

.container {
    padding: 0 45px;
}

a {
    text-decoration: none;
}

/*sections*/

.loadingArea {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999999999;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80px;
    background: #fff;
}

    .loadingArea .loadred {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #f42223;
    }

        .loadingArea .loadred svg {
            height: 170px;
            width: 246px;
        }

            .loadingArea .loadred svg circle {
                stroke-dasharray: 1000;
                stroke-dashoffset: 1000;
                animation: stroke 2s ease-out forwards;
            }

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.loadingArea .loadred p {
    font-weight: bold;
    font-size: 80px;
    margin: 37px;
    /*border-bottom: 1px solid #000;*/
}

    .loadingArea .loadred p span {
        font-size: 80px;
    }

.loadingArea .loadred .load-text .text-load {
    font-weight: 900;
    letter-spacing: 15px;
    display: inline-block;
    color: rgba(0, 0, 0, 0.2);
    position: relative;
    font-size: 70px;
    line-height: 70px;
    font-size: 40px;
    letter-spacing: 1px;
    text-align: center;
    user-select: none;
    text-transform: uppercase;
}

    .loadingArea .loadred .load-text .text-load:before {
        animation: letters-loading 4s infinite;
        color: #000;
        content: attr(data-text);
        left: 0;
        opacity: 0;
        top: 0;
        line-height: 70px;
        position: absolute;
        text-transform: uppercase;
    }

@keyframes letters-loading {
    0%, 75%, 100% {
        opacity: 0;
        transform: rotateY(-90deg);
    }

    25%, 50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}
/**/
header .sliders {
    position: relative;
    min-height: 88vh;
}

    header .sliders .itemSkin3 {
        display: none;
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
        overflow: hidden;
        position: relative;
        /*height: 88vh;*/
    }

@-webkit-keyframes fade {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

header .sliders .itemSkin3::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 7px;
    background: #000;
    width: 100%;
    height: auto;
    /*opacity: .1;*/
    opacity: .4;
}

header .sliders .itemSkin3 .image img {
    width: 100%;
    height: 88vh;
    object-fit: cover;
}

header .sliders .itemSkin3 .title a, header .sliders .itemSkin3 .abstract a { /*header .sliders .slider p*/
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    transform: translateY(-50%);
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: titles-loading 4s;
}

@keyframes titles-loading {
    0% {
        opacity: 0;
        bottom: -100%;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
        bottom: 50%;
    }
}

header .sliders .itemSkin3 .title a {
    -webkit-line-clamp: 1;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    margin: 0 60px;
    /*margin-bottom: 60px;*/
    /*margin-bottom: 165px;*/
}

header .sliders .itemSkin3 .abstract a {
    -webkit-line-clamp: 3;
    color: #b7b4b4;
    font-size: 30px;
    margin: -160px 40px;
}

header .sliders .progress-container {
    position: absolute;
    width: 100%;
    height: 7px;
    top: 0;
}

    header .sliders .progress-container .progress {
        width: 0%;
        height: 2px;
        background-color: #f42223;
    }

header .sliders .prev, header .sliders .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    padding: 16px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 3px 0 0 3px;
}

header .sliders .next {
    left: 0;
    border-radius: 0 3px 3px 0;
}

    header .sliders .prev:hover, header .sliders .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

/**/

.headerIn {
    margin: 0;
    padding: 0;
    background-image: none;
}

header .headerMenu {
    background-color: #fff;
    padding: 10px 18px;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    transition: all 1s;
    box-shadow: 0 0 13px #0000002e;
}

.headerFixed .headerMenu {
    padding: 0 18px;
    position: fixed;
}

header .headerMenu .menuOpen, header .headerMenu .menuSub .menuClose, header .headerMenu .menuSub .menuLogo, header .headerMenu .menuSub .contact, header .headerMenu .menuSub .knkMenu {
    display: none;
}

header .headerMenu .logo {
    /*text-align: left;*/
    display: inline-block;
    width: 32%;
    vertical-align: middle;
}

    header .headerMenu .logo img {
        width: 55px;
        vertical-align: middle;
        display: inline-block;
    }

    header .headerMenu .logo h1 {
        color: #f42223;
        font-size: 22px;
        display: inline-block;
        width: 76%;
        vertical-align: middle;
        text-align: center;
    }

header .headerMenu .menuSub {
    display: inline-block;
    width: 67%;
}

header .headerMenu .menuSubExpended {
    visibility: visible;
    opacity: 1;
    transform: translate(0);
}
/*موبايل*/
/*


*/

header .headerMenu .menuSub .menuItem .item {
    color: #000;
    /*display: block;*/
    /*padding: 10px 0;*/
    margin: 7px;
    position: relative;
    padding-right: 1.1vw; /*1.7vw*/
}

header .headerMenu .menuSub .menuItem > div {
    display: inline-block;
    position: relative;
    height: 38px;
}

header .headerMenu .menuSub .menuItem .item .arrwBottom {
    width: 15px;
}

header .headerMenu .menuSub .menuItem .iconMenu {
    cursor: pointer;
}

header .headerMenu .menuSub .menuItem .subMenu {
    /*border-right: 1px solid #f42223;*/
    padding-right: 10px;
    position: absolute;
    z-index: 1;
    top: 40px;
    right: 0;
    background: #fff;
    box-shadow: 0 0 7px #0000006e;
    width: 158px;
    height: 0;
    transition: height .5s;
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded {
    height: 228px;
    top: 40px;
}

header .headerMenu .menuSub .menuItem .subMenu .openSubMenu {
    width: 94.5%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transform: rotateX( -90deg);
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu {
    transform-origin: 10% 10%;
    transition: transform .5s, opacity .5s;
    /*position: relative;*/
    visibility: visible;
    opacity: 1;
    transform: rotateX( 0deg);
    padding: 0;
    /*margin-right: 1vw;*/
}

header .headerMenu .menuSub .menuItem .subMenu a {
    display: block;
    padding: 8px 16px;
    cursor: pointer;
    color: #000;
}

    header .headerMenu .menuSub .menuItem .subMenu a:hover {
        color: #f42223;
    }

header .headerMenu .menuSub .menuItem .item:hover {
    color: #f42223;
}

header .headerMenu .menuSub .menuItem .item::before, header .headerMenu .menuSub .menuItem .item::after {
    content: "";
    position: absolute;
    right: 0;
    height: 1px;
    /*موبايل*/
    /*width: 14px;*/
    width: 10px;
    background-color: #f42223;
    top: 50%;
    transition: .2s;
}

header .headerMenu .menuSub .menuItem .item::after {
    transform: rotate(90deg);
}

header .headerMenu .menuSub .menuItem .item:hover::before {
    transform: rotate(45deg);
}

header .headerMenu .menuSub .menuItem .item:hover::after {
    transform: rotate(-45deg);
}

header .headerMenu .menuSub .menuItem .iconMenuFixed::before {
    transform: rotate(45deg);
}

header .headerMenu .menuSub .menuItem .iconMenuFixed::after {
    transform: rotate(-45deg);
}

header .headerMenu .menuSub .menuIn {
    margin: 60px 60px 0;
}

header .headerMenu .menuSub .knkMenu {
    color: #000000b5;
    text-align: center;
    margin: 2vh auto 0;
}

    header .headerMenu .menuSub .knkMenu div {
        font-size: 14px;
    }

    header .headerMenu .menuSub .knkMenu .knk a {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    header .headerMenu .menuSub .knkMenu .knk img {
        width: 30px;
        vertical-align: middle;
    }

    header .headerMenu .menuSub .knkMenu .knk div {
        color: #000000b5;
        vertical-align: middle;
        font-size: 13px;
        text-align: right;
    }

header .headerMenu .menuSub .menuItem .subMenu .openSubMenu .subMenuChild {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    border-right: 1px solid #000;
    list-style-type: none;
    padding-right: 0;
    transition: height .4s;
    right: 100%;
    top: -7px;
    width: 168px;
    background: #f42223;
    height: 0;
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subExpendedMenuChild {
    opacity: 1;
    visibility: visible;
    height: 270px;
}

/*header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .sub {
    position: relative;
}*/

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .sub::before,
header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .sub::after {
    content: "";
    position: absolute;
    background: #f42223;
    width: 10px;
    height: 1px;
    top: 17px;
    right: 0;
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .sub::after {
    transform: rotate(90deg);
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subExpendedMenuChild li a {
    color: #f42223;
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subOpen::after {
    transform: rotate(0);
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subExpendedMenuChild li a {
    color: #fff;
}

header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subMenuChild a:hover {
    color: #000;
}


/*..............................*/

/*..............................*/

.support, .whatsApp {
    position: fixed;
    bottom: 3px;
    left: 5px;
    border-radius: 50%;
    width: 60px;
    z-index: 1;
    height: 60px;
    transition: width .2s;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 0 5px #ffffff52;
}

.support {
    background-color: #f42223;
    bottom: 70px;
}

.whatsApp {
    background-color: green;
}

    .support:hover, .whatsApp:hover {
        width: 134px;
        border-radius: 30px;
        margin-top: 17px;
    }

    .support img, .whatsApp img {
        width: 70%;
        vertical-align: middle;
        margin-top: 8px;
    }

    .support:hover img, .whatsApp:hover img {
        width: 30%;
    }

    .support p, .whatsApp p {
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        margin: 10px;
        font-weight: bold;
        opacity: 0;
        visibility: hidden;
    }

    .support:hover p, .whatsApp:hover p {
        opacity: 1;
        visibility: visible;
    }

.arrowTopFixed {
    position: fixed;
    background: #f42223;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
    transform: translateY(50px);
    transition: transform .8s;
}

.activity {
    text-align: center;
}

    .activity .category {
        margin-top: 30px;
    }

    .activity .CategoryItems {
        text-align: center;
    }

        .activity .CategoryItems .categorySkin2 {
            display: inline-block;
            width: 18%;
            background: #fff;
            box-shadow: 0 0 4px #0000002b;
            margin: 8px;
            transition: transform 1s;
        }

            .activity .CategoryItems .categorySkin2:hover {
                transform: translateY(-3px);
                box-shadow: 0 0 14px #f4222363;
            }

            .activity .CategoryItems .categorySkin2 .child .image img {
                width: 100%;
                vertical-align: middle;
            }

            .activity .CategoryItems .categorySkin2 .child .title a {
                color: #000;
                text-decoration: none;
                font-size: 14px;
                text-align: center;
                height: 2.8em;
                text-overflow: ellipsis;
                word-break: break-word;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                margin: 0 9px 5px;
                font-weight: bold;
            }

            .activity .CategoryItems .categorySkin2:hover .title a {
                color: #f42223;
            }

            .activity .CategoryItems .categorySkin2 .child .abstract {
                text-align: right;
            }

                .activity .CategoryItems .categorySkin2 .child .abstract a {
                    color: rgb(85, 84, 84);
                    text-decoration: none;
                    font-size: 14px;
                    height: 2.8em;
                    text-overflow: ellipsis;
                    word-break: break-word;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    margin: 0 9px 5px;
                }

    /*specialCategory*/
    .activity .specialCategory .CategoryItems {
        text-align: right;
    }

        .activity .specialCategory .CategoryItems > .categorySkin2 {
            width: 100%;
            box-shadow: none;
            border: 2px solid #ebebeb;
        }

        .activity .specialCategory .CategoryItems .categorySkin2:hover {
            transform: unset;
            box-shadow: none;
        }

        .activity .specialCategory .CategoryItems .categorySkin2 .child, .activity .specialCategory .CategoryItems .categorySkin2 .subcategories {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
        }

        .activity .specialCategory .CategoryItems > .categorySkin2 > .child {
            width: 16%;
            background: #fff;
            border-left: 2px solid #ebebeb;
            padding-left: 23px;
            margin: 16px;
        }

        .activity .specialCategory .CategoryItems .categorySkin2 .subcategories {
            width: 77%;
        }

        .activity .specialCategory .CategoryItems .subcategories .categorySkin2 .child .image {
            width: 50px;
            margin: 3px;
            display: inline-block;
            vertical-align: middle;
        }

        .activity .specialCategory .CategoryItems .subcategories .categorySkin2 .child .title {
            width: 75%;
            display: inline-block;
            vertical-align: middle;
        }

            .activity .specialCategory .CategoryItems .subcategories .categorySkin2 .child .title a {
                -webkit-line-clamp: 1;
                height: 1.2em;
                text-align: right;
            }


        .activity .specialCategory .CategoryItems .categorySkin2 .subcategories .categorySkin2 {
            width: 30%;
            margin: 8px;
            box-shadow: none;
            border: 1px solid #eee;
        }

        .activity .specialCategory .CategoryItems .categorySkin2:hover .title a {
            color: #000;
        }

        .activity .specialCategory .CategoryItems .subcategories .categorySkin2 .child:hover {
            background: #f42223;
        }
/**/
.about {
    padding-block: 17vh;
    background-image: url(File.aspx?t=image&s=pt-bg1.jpg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: right top;
}

    .about img {
        width: 40%;
        vertical-align: middle;
    }

    .about .content {
        display: inline-block;
        width: 50%;
        padding-right: 3vw;
        vertical-align: middle;
    }

        .about .content b {
            font-size: 47px;
            color: #051136;
            position: sticky;
            padding-right: 1vw;
        }

        /*.about .content b::before {
                content: "";
                position: absolute;
                border: 3px solid #f42223;
                top: -15px;
                bottom: -10px;
                left: 6px;
                right: 37px;
                z-index: -1;
            }*/

        .about .content span {
            color: #051136;
        }

        .about .content .title {
            color: #051136;
            font-size: 25px;
            font-weight: bold;
        }

        .about .content .abstract {
            color: #777777;
            text-align: justify;
        }

        .about .content .more {
            margin-top: 11vh;
        }

            .about .content .more a {
                color: #fff;
                background-color: #f42223;
                padding: 20px 35px;
                position: relative;
                overflow: hidden;
                display: block;
                width: 74px;
            }

                .about .content .more a::after {
                    content: "";
                    position: absolute;
                    background: #fff;
                    transition: all .8s;
                    width: 15px;
                    height: 120%;
                    opacity: .3;
                    right: -26%;
                    top: -10%;
                    transform: rotate( -15deg);
                }

                .about .content .more a:hover::after {
                    right: 130%;
                }

.customer {
    background-color: #212529;
    background-image: url(File.aspx?t=image&s=world-map.png);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}

    .customer > div {
        background: #1e1d23a6;
        padding: 8vh 45px;
    }

    .customer .youtube {
        display: block;
        background-color: #f42223;
        width: 80px;
        margin: 8vh auto;
        border-radius: 50%;
        position: sticky;
        height: 80px;
    }

        .customer .youtube img {
            margin: 15px 0 0 11px
        }

        .customer .youtube::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            border: 1px solid #f42223;
            border-radius: 100%;
            animation: animationSignal3;
            animation-iteration-count: infinite;
            animation-duration: 3s;
            z-index: -1;
            transform: scale(1);
            transition: all 0.5s;
        }

        .customer .youtube::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            border: 1px solid #f42223;
            border-radius: 100%;
            animation: animationSignal4;
            animation-iteration-count: infinite;
            animation-duration: 3s;
            z-index: -1;
            transform: scale(1);
            transition: all 0.5s;
        }

@keyframes animationSignal3 {
    /*Video Popup*/
    0% {
        opacity: 0.8;
        transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
        -webkit-transform: scale(0.9);
    }

    100% {
        transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}

@-webkit-keyframes animationSignal3 {
    /*Video Popup*/
    0% {
        transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
        -webkit-transform: scale(0.9);
    }

    100% {
        transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes animationSignal4 {
    /*Video Popup*/
    0% {
        transform: scale(0.9);
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }

    100% {
        transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        opacity: 0;
    }
}

@-webkit-keyframes animationSignal4 {
    /*Video Popup*/
    0% {
        transform: scale(0.9);
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }

    100% {
        transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        opacity: 0;
    }
}

.activity b, .customer b, .product b, .latestNews b, /*.comments b,*/ .brands b {
    color: #fff;
    font-size: 26px;
    display: block;
}

.customer .ContentsItems {
    display: grid;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
}

    .customer .ContentsItems .itemSkin1 {
        display: inline-block;
        /*width: 14%;*/
        padding: 10px;
        border: 1px solid #6d6c70;
    }

        .customer .ContentsItems .itemSkin1:first-child {
            border-right: none;
        }

        .customer .ContentsItems .itemSkin1:nth-child(1),
        .customer .ContentsItems .itemSkin1:nth-child(2),
        .customer .ContentsItems .itemSkin1:nth-child(3),
        .customer .ContentsItems .itemSkin1:nth-child(4),
        .customer .ContentsItems .itemSkin1:nth-child(5),
        .customer .ContentsItems .itemSkin1:nth-child(6) {
            border-top: none;
            border-left: none;
            border-bottom: none;
        }

        .customer .ContentsItems .itemSkin1:nth-child(7),
        .customer .ContentsItems .itemSkin1:nth-child(8),
        .customer .ContentsItems .itemSkin1:nth-child(9),
        .customer .ContentsItems .itemSkin1:nth-child(10),
        .customer .ContentsItems .itemSkin1:nth-child(11),
        .customer .ContentsItems .itemSkin1:nth-child(12),
        .customer .ContentsItems .itemSkin1:nth-child(13),
        .customer .ContentsItems .itemSkin1:nth-child(14),
        .customer .ContentsItems .itemSkin1:nth-child(15),
        .customer .ContentsItems .itemSkin1:nth-child(16),
        .customer .ContentsItems .itemSkin1:nth-child(17),
        .customer .ContentsItems .itemSkin1:nth-child(18) {
            border-bottom: none;
            border-right: none;
        }

        .customer .ContentsItems .itemSkin1:nth-child(12), .customer .ContentsItems .itemSkin1:nth-child(18) {
            border-left: none;
        }

        .customer .ContentsItems .itemSkin1 a,
        .customersDetail .ContentsItems .itemSkin1 a {
            /*pointer-events: none;*/
            cursor: default;
        }

        .customer .ContentsItems .itemSkin1 img {
            width: 150px;
            height: 150px;
            object-fit: contain;
            vertical-align: middle;
            max-width: 100%;
            filter: invert(79%) sepia(10%) saturate(9%) hue-rotate( 17deg) brightness(88%) contrast(84%);
        }

            .customer .ContentsItems .itemSkin1 img:hover {
                filter: grayscale(1) brightness(5);
            }

.visibleCustomer .ContentsItems .itemSkin1 img {
    opacity: 1;
    visibility: visible;
}

.latestNews, .brands {
    text-align: center;
    margin: 60px 0 50px;
}

.product {
    background-image: url(File.aspx?t=image&s=pt-bg2.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    padding-bottom: 75px;
    text-align: center;
}

.latestNews {
    margin: 15vh 0;
}

    .activity b, .product b, .latestNews b, /*.comments b,*/ .brands b {
        color: #051136;
        padding-bottom: 15px;
    }

    .product .more, .latestNews .more, .brands .more {
        display: block;
        width: 13%;
        margin: auto;
    }

        .product .more span, .latestNews .more span, .brands .more span {
            color: #f42223;
            position: relative;
        }

            .product .more span::after, .latestNews .more span::after, .brands .more span::after {
                content: "";
                position: absolute;
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                border-right: 10px solid red;
                left: -16px;
                top: 50%;
                transform: translateY(-50%);
            }

        .product .more img, .latestNews .more img, .brands .more img {
            transform: rotate( 270deg);
            width: 20%;
            vertical-align: middle;
            padding: 5px;
            transition: .1s;
            filter: invert(74%) sepia(74%) saturate(4556%) hue-rotate( 347deg) brightness(96%) contrast(98%);
        }

/*.product .ContentsItems {
    display: grid;
    grid-template-columns: auto auto auto auto;
}*/

.product .ContentsItems .itemSkin5 {
    display: inline-block;
    width: 18%;
    text-align: left;
    margin: 10px;
    box-shadow: 0 0 4px #0000002b;
    transition: transform 1s;
    position: relative;
    overflow: hidden;
    animation: mymove 40s cubic-bezier(0, 0, 0, 0.97) infinite;
}

    .product .ContentsItems .itemSkin5:hover {
        box-shadow: 0 0 14px #f4222363;
        transform: translateY(-3px);
    }

    .product .ContentsItems .itemSkin5 .child {
        text-align: center;
        position: relative;
        overflow: hidden;
    }

        .product .ContentsItems .itemSkin5 .child::after {
            content: "";
            position: absolute;
            background: #fff;
            transition: all .8s;
            width: 15px;
            height: 120%;
            opacity: .3;
            right: -26%;
            top: -10%;
            transform: rotate( -15deg);
        }

        .product .ContentsItems .itemSkin5 .child:hover::after {
            right: 130%;
        }

        .product .ContentsItems .itemSkin5 .child .image {
            transition: 3s;
            padding: 10px;
            background-color: #fff;
        }

            .product .ContentsItems .itemSkin5 .child .image img {
                width: 100%;
                height: 29vh;
                object-fit: contain;
                width: 150px;
            }

        .product .ContentsItems .itemSkin5 .child .text {
            background-color: #fff;
            border-top: 1px solid #eee;
        }

        .product .ContentsItems .itemSkin5 .child .title {
            background-color: #fff;
            width: 86%;
            padding: 10px 0;
            display: inline-block;
            height: 3.5em;
            overflow: hidden;
            font-weight: bold;
        }

            .product .ContentsItems .itemSkin5 .child .title a {
                color: #000;
                text-decoration: none;
                font-size: 14px;
                text-align: justify;
            }

        .product .ContentsItems .itemSkin5 .child .more {
            display: inline-block;
            vertical-align: middle;
            width: 10%;
            margin-bottom: 10px;
        }

            .product .ContentsItems .itemSkin5 .child .more a {
                display: block;
                border-top: 10px solid transparent;
                border-right: 14px solid red;
                border-bottom: 10px solid transparent;
                transition: border-right-color .6s;
            }

        .product .ContentsItems .itemSkin5 .child:hover a {
            border-right-color: #000;
            color: #f42223;
        }

.aboutManager {
    background-image: url(File.aspx?t=image&s=slider.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 20px;
    min-height: 90vh;
    overflow: hidden;
    background-attachment: fixed
}

    .aboutManager .container .content {
        display: inline-block;
        width: 45%;
        text-align: center;
        padding-left: 5vw;
        vertical-align: top;
    }

        .aboutManager .container .content b {
            font-size: 45px;
            font-weight: bold;
        }

        .aboutManager .container .content p {
            text-align: justify;
            font-size: 18px;
        }

    .aboutManager .container .image {
        display: inline-block;
        width: 45%;
        position: sticky;
    }

        .aboutManager .container .image::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #f42223;
            top: 71px;
            left: -11vw;
            z-index: -2;
        }

        .aboutManager .container .image .img {
            width: 90%;
        }

        .aboutManager .container .image .backgroundImage {
            position: absolute;
            right: 330px;
            top: 180px;
            animation: move01 10s ease-in infinite;
            opacity: 0.3;
            z-index: -1;
        }

@keyframes move01 {
    0% {
        transform: rotate( 45deg);
    }

    50% {
        transform: rotate( 60deg);
    }

    100% {
        transform: rotate( 45deg);
    }
}


.latestNews .ContentsItems, .product .ContentsItems, .brands .ContentsItems {
    white-space: nowrap;
    overflow: hidden;
}



    .latestNews .ContentsItems .itemSkin4 {
        display: inline-block;
        width: 31%;
        position: relative;
        text-align: left;
        margin: 10px;
        box-shadow: 0 0 7px #00000054;
        position: relative;
        overflow: hidden;
        animation: mymove 40s cubic-bezier(0, 0, 0, 0.97) infinite;
    }

@keyframes mymove {
    0%, 20% {
        transform: translateX(-100%);
    }

    20%, 40% {
        transform: translateX(-1%);
    }

    40%, 60% {
        transform: translateX(104%);
    }

    60%, 80% {
        transform: translateX(208%);
    }

    80%, 100% {
        transform: translateX(313%);
    }
}

.latestNews .ContentsItems .itemSkin4 .child {
    text-align: center;
}

.latestNews .ContentsItems .itemSkin4 .image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, .2);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2;
    border-radius: 50%;
}

.latestNews .ContentsItems .itemSkin4:hover .image::before {
    animation: zoom-hover 0.75s;
}

@keyframes zoom-hover {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

.latestNews .ContentsItems .itemSkin4 .image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.latestNews .ContentsItems .itemSkin4 .title, .latestNews .ContentsItems .itemSkin4 .abstract {
    margin-bottom: 5px;
    text-align: right;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 10px;
    white-space: initial;
    color: rgb(85, 84, 84);
}

.latestNews .ContentsItems .itemSkin4 .title {
    -webkit-line-clamp: 1;
}

.latestNews .ContentsItems .itemSkin4 .abstract {
    -webkit-line-clamp: 3;
    height: 4em;
}

.latestNews .ContentsItems .itemSkin4 .title a {
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    word-wrap: break-word;
    overflow: hidden;
    height: 2em;
    line-height: 2em;
    text-align: justify;
    word-spacing: -1px;
}

.latestNews .ContentsItems .itemSkin4 .abstract a {
    font-size: 13px;
    color: rgb(85, 84, 84);
    text-decoration: none;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    height: 6em;
    line-height: 2em;
    text-align: justify;
    word-spacing: -1px;
}

.latestNews .ContentsItems .itemSkin4 .more {
    background-color: #f42223;
    width: 40px;
    height: 40px;
    float: left;
    position: relative;
    cursor: pointer;
}

    .latestNews .ContentsItems .itemSkin4 .more::before {
        content: "";
        position: absolute;
        right: 56%;
        transform: translate(50%, -50%);
        top: 50%;
        border-top: 10px solid transparent;
        border-right: 18px solid #fff;
        border-bottom: 10px solid transparent;
    }

    .latestNews .ContentsItems .itemSkin4 .more::after {
        content: "";
        position: absolute;
        background: #fff;
        transition: all .8s;
        width: 15px;
        height: 120%;
        opacity: .3;
        right: -28%;
        top: -10%;
        transform: rotate(-15deg);
    }

    .latestNews .ContentsItems .itemSkin4 .more:hover::after {
        right: 130%;
    }

.brands .ContentsItems .itemSkin1 {
    display: inline-block;
    width: 20%;
    border: 1px solid #e3e3e3;
    margin: 10px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    animation: mymove 40s cubic-bezier(0, 0, 0, 0.97) infinite;
}

    .brands .ContentsItems .itemSkin1:hover, main .ContentsItems .itemSkin1:hover {
        box-shadow: 0 0 15px #f42223c7;
    }

    .brands .ContentsItems .itemSkin1::before {
        content: "";
        background: #f42223;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        transition: .8s;
        height: 0;
    }

    .brands .ContentsItems .itemSkin1:hover::before {
        height: 176px;
    }

    .brands .ContentsItems .itemSkin1 a img {
        width: 100%;
        height: 140px;
        object-fit: contain;
    }

footer {
    background-color: #efefef;
    position: relative;
    padding: 100px 0 0;
}

    footer .circle-bg, footer .circle-bg-2 {
        width: 20%;
        position: absolute;
        left: 0;
        top: 100px;
    }

    footer .circle-bg-2 {
        right: 0;
        left: unset;
        top: unset;
        bottom: 0;
    }

    footer .footerAbout, footer .ourLink, footer .services, footer .contactUs, footer .map {
        display: inline-block;
        width: 24%;
        vertical-align: top;
    }

        footer .footerAbout b, footer .ourLink b, footer .services b, footer .contactUs b {
            color: #051136;
            font-size: 18px;
            display: block;
        }

        footer .footerAbout p {
            text-align: justify;
            color: #777777;
            padding-left: 50px;
        }

        footer .footerAbout .footerContact img {
            width: 24px;
            height: 24px;
            background: #f42223;
            padding: 9px;
            object-fit: contain;
            border: 1px solid transparent;
        }

            footer .footerAbout .footerContact img:hover {
                background: #000;
                filter: invert(1);
                border-color: #fff;
            }

        footer .ourLink a {
            display: block;
            color: #777777;
            margin: 10px 0;
            position: relative;
            transition: all .8s;
        }

            footer .ourLink a:hover {
                color: #f42223;
                margin-right: 20px;
            }

            footer .ourLink a::before {
                position: absolute;
                content: "";
                width: 0;
                height: 1px;
                background-color: #f42223;
                top: 11px;
                transition: all .8s;
            }

            footer .ourLink a:hover::before {
                width: 20px;
                right: -20px;
            }

        footer .contactUs .item {
            margin: 10px 0;
        }

            footer .contactUs .item img {
                width: 33px;
                filter: invert(85%) sepia(89%) saturate(4027%) hue-rotate( 347deg) brightness(93%) contrast(106%);
                vertical-align: middle;
            }

            footer .contactUs .item p {
                display: inline-block;
                width: 82%;
                vertical-align: middle;
            }

            footer .contactUs .item p, footer .contactUs .item a {
                color: #777777;
                padding-right: 5px;
                margin: 0;
            }

        footer .map iframe {
            width: 395px;
            height: 340px;
            max-width: 100%;
        }

.knkFooter {
    margin-top: 40px;
    background-color: #000;
    padding: 10px 5vw;
}

    .knkFooter .knk2 > div {
        display: inline-block;
        width: 48%;
        color: #ffffff;
    }

    .knkFooter .knk {
        text-align: left;
    }

        .knkFooter .knk a {
            color: #ffffff;
        }

            .knkFooter .knk a img {
                width: 7%;
                vertical-align: middle;
            }

            .knkFooter .knk a div {
                display: inline-block;
            }

/*صفحه داخلی*/
main .ContentsTitle, main .DetailSkin1 .ContentTitle {
    text-align: center;
    padding: 27px 0;
    font-size: 31px;
    font-weight: bold;
    position: relative;
}

    main .ContentsTitle::after, main .DetailSkin1 .ContentTitle::after {
        content: "";
        position: absolute;
        height: 2px;
        width: 119px;
        background: linear-gradient( 90deg, rgba(244,34,35,0) 0%, rgba(244,34,35,1) 50%, rgba(244,34,35,0) 100%);
        top: 68px;
        right: 50%;
        transform: translateX(50%);
    }

main .ContentsItems .itemSkin2 {
    text-align: center;
    display: inline-block;
    text-align: center;
    margin: 10px;
    width: 18%;
}

main .ContentsItems {
    margin: 0 18px 18px;
    text-align: center;
}

    main .ContentsItems .itemSkin2 .child .image {
        border: 1px solid #eee;
        padding: 10px;
    }

        main .ContentsItems .itemSkin2 .child .image img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

    main .ContentsItems .itemSkin2 .child .title {
        background: #f42223bf;
        padding: 10px;
        margin-top: -8px;
        overflow: hidden;
        height: 3em;
        line-height: 2em;
        word-spacing: -1px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        padding-bottom: 20px;
    }

        main .ContentsItems .itemSkin2 .child .title a {
            color: #fff;
        }

    /**/
    main .ContentsItems .itemSkin1 {
        box-shadow: 0 0 7px #858585;
        margin: 10px;
        transition: all .8s;
        display: inline-block;
        width: 17%;
    }

        main .ContentsItems .itemSkin1:hover {
            transform: translateY(-10px);
        }

        main .ContentsItems .itemSkin1 a img {
            width: 95%;
            margin: auto;
            vertical-align: middle;
            height: auto;
            object-fit: contain;
        }

    main .ContentsItems .itemSkin4 {
        display: inline-block;
        width: 23%;
        margin: 9px;
    }

        main .ContentsItems .itemSkin4 .child {
            background-color: #ffffff;
            border-radius: 8px;
            position: relative;
            width: 100%;
            box-shadow: 2px 3px 5px #656565;
            padding: 10px 0;
        }

        main .ContentsItems .itemSkin4 .image {
            border-radius: 8px;
            width: 95%;
            margin: auto;
        }

            main .ContentsItems .itemSkin4 .image img {
                border-radius: 8px;
                width: 100%;
                height: auto;
                object-fit: cover;
            }


        main .ContentsItems .itemSkin4 .abstract {
            text-align: justify;
            padding: 0 10px;
            overflow: hidden;
            height: 6em;
            line-height: 2em;
            word-spacing: -1px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        main .ContentsItems .itemSkin4 .more {
            padding: 0 5px;
        }

        main .ContentsItems .itemSkin4 .title {
            font-weight: bold;
            padding: 0px 3px;
        }

            main .ContentsItems .itemSkin4 .title a {
                font-size: 14px;
                text-overflow: ellipsis;
                word-wrap: break-word;
                overflow: hidden;
                height: 2em;
                line-height: 2em;
                text-align: justify;
            }

        main .ContentsItems .itemSkin4 .abstract a {
            font-size: 13px;
            text-overflow: ellipsis;
            word-wrap: break-word;
            overflow: hidden;
            height: 6em;
            line-height: 2em;
            text-align: justify;
            word-spacing: -1px;
        }

        main .ContentsItems .itemSkin4 .title a, main .ContentsItems .itemSkin4 .abstract a, main .ContentsItems .itemSkin4 .more a {
            color: #000;
            text-decoration: none;
        }

        main .ContentsItems .itemSkin4 .child:hover .more a {
            color: #fff;
        }

        main .ContentsItems .itemSkin4 .more {
            font-size: 13px;
            text-align: center;
            border: 0.5px solid #7d7d7d;
            border-radius: 7px;
            width: 80%;
            margin: 5px auto;
            margin-bottom: 8px;
            padding: 5px;
        }

        main .ContentsItems .itemSkin4 .child:hover .more {
            background-color: #f42223;
        }

main .DetailSkin1 .ContentAbstract {
    text-align: center;
    color: #2c2c2c;
    margin: 1vh 5vw;
}

main .DetailSkin1 .ContentBody p {
    text-align: justify;
}

    main .DetailSkin1 .ContentBody p iframe {
        width: 100%;
        height: 400px;
    }

    main .DetailSkin1 .ContentBody p img {
        vertical-align: middle;
        max-width: 100%;
    }

main .DetailSkin1 .ContentBody table {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    display: block;
}

    main .DetailSkin1 .ContentBody table tbody tr td {
        padding: 10px;
        text-align: center;
    }

main .DetailSkin1 .ContentBody {
    margin: 5vh 5vw;
}

main .DetailSkin1 .contentImagesDiv {
    margin: 1vh 5vw;
    text-align: center;
}

    main .DetailSkin1 .contentImagesDiv .ImageSkin1 img {
        max-width: 100%;
    }

    main .DetailSkin1 .contentImagesDiv .ImageSkin1 a {
        pointer-events: none;
    }

/**/
main .CategoryItems {
    text-align: center;
}

    main .CategoryItems .categorySkin2 {
        display: inline-block;
        width: 20%;
        margin: 10px;
        text-align: center;
        background: #fff;
        box-shadow: 0 0 4px #f422235e;
    }

        main .CategoryItems .categorySkin2 .child .image img {
            width: 100%;
        }

        main .CategoryItems .categorySkin2 .child .title {
            font-weight: bold;
            margin: 10px;
            overflow: hidden;
            word-spacing: -2px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

            main .CategoryItems .categorySkin2 .child .title a {
                color: #000;
            }

        main .CategoryItems .categorySkin2 .child .abstract {
            margin: 10px;
            overflow: hidden;
            text-align: justify;
            word-spacing: -2px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 3em;
        }

            main .CategoryItems .categorySkin2 .child .abstract a {
                color: #000;
            }
/*............mobile...............*/
@media only screen and (max-width: 768px) and (min-width: 0) {
    * {
        letter-spacing: -.9px;
    }

    .container {
        padding: 0 15px;
    }

    .loadingArea .loadred .load-text .text-load {
        letter-spacing: -1px;
        font-size: 36px;
    }

    .loadingArea .loadred svg {
        width: 230px;
    }

    header .headerMenu {
        width: 100%;
        padding: 5px 0;
    }

    .headerFixed .headerMenu {
        padding: 2px 0;
    }

    header .headerMenu .menuOpen {
        display: inline-block;
        cursor: pointer;
        padding: 16px 8px;
    }

        header .headerMenu .menuOpen span {
            background-color: #f42223;
            width: 30px;
            height: 2px;
            display: block;
            margin: 1vh 0;
            transition: width .5s;
        }

            header .headerMenu .menuOpen span:nth-child(2) {
                width: 25px;
            }

            header .headerMenu .menuOpen span:last-child {
                width: 20px;
            }

        header .headerMenu .menuOpen:hover span {
            width: 30px;
        }

    header .headerMenu .logo {
        width: 86%;
        margin-top: 5px;
        vertical-align: top;
        text-align: center;
    }

        header .headerMenu .logo img {
            width: 18%;
            margin-top: 3px;
        }

    header .headerMenu > img {
        padding: 0 14px;
        float: unset;
        padding-bottom: 0;
        margin-top: -2vh;
    }

    header .headerMenu .logo h1 {
        font-size: 18px;
        width: 73%;
    }

    header .headerMenu .menuSub {
        width: 76%;
        padding: 50px 51px 0;
        /*موبايل*/
        /*header .headerMenu .menuSub {*/
        position: fixed;
        z-index: 2;
        background-color: #fff;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition: .5s;
    }

    header .headerMenu .menuSubExpended {
        visibility: visible;
        opacity: 1;
        transform: translate(0);
    }

    .aside-overlay {
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 1;
        background-color: rgba(0,0,0,.6);
        left: 0;
        top: 0;
        transition: .5s cubic-bezier(.77,0,.175,1);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
    }

    .aside-trigger {
        opacity: 1;
        visibility: visible;
    }

    header .headerMenu .menuSub .menuClose {
        float: left;
        background: #f42223;
        padding: 23px 7px;
        cursor: pointer;
        margin: -50px 0 0 -51px;
        display: block;
    }

        header .headerMenu .menuSub .menuClose span {
            width: 40px;
            height: 1px;
            background: #fff;
            display: block;
            transform: rotate(45deg);
            transition: transform .2s;
        }

            header .headerMenu .menuSub .menuClose span:last-child {
                transform: rotate(-45deg);
            }

        header .headerMenu .menuSub .menuClose:hover span {
            transform: rotate(0);
        }

    header .headerMenu .menuSub .menuLogo {
        margin-bottom: 11px;
        border: 2px solid;
        border-image: linear-gradient(to left, #f42223, rgba(0, 0, 0, 0)) 0 0 100% 0;
        display: block;
    }

        header .headerMenu .menuSub .menuLogo p {
            font-weight: bold;
            font-size: 16px;
            margin: 0;
            color: #f42223;
        }

        header .headerMenu .menuSub .menuLogo img {
            width: 25%;
            vertical-align: middle;
        }

    header .headerMenu .menuSub .menuItem .item {
        width: 100%;
        display: block;
        padding: 10px 0;
        padding-right: 6vw;
    }

    header .headerMenu .menuSub .menuItem > div {
        height: auto;
    }

    header .headerMenu .menuSub .menuItem .item::before, header .headerMenu .menuSub .menuItem .item::after {
        width: 14px;
    }

    header .headerMenu .menuSub .menuItem .subMenu {
        position: unset;
        box-shadow: unset;
        transition: .5s;
        height: unset;
    }

    header .headerMenu .menuSub .menuItem .SubMenuExpanded {
        height: unset;
    }

        header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .sub::before, header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .sub::after {
            width: 13px;
            margin-right: 6px;
        }

        header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subMenuChild {
            position: unset;
            display: none;
            transform: rotate(-90deg);
            transition: .5s;
            background: #fff;
            height: 247px;
        }

        header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subExpendedMenuChild {
            display: block;
            transform: rotateX(0);
        }

            header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu .subExpendedMenuChild li a {
                color: #000;
            }

        header .headerMenu .menuSub .menuItem .SubMenuExpanded .openSubMenu {
            border-right: 1px solid #f42223;
            padding-right: 10px;
            position: relative;
        }


    header .headerMenu .menuSub .contact {
        padding: 24vh 0 0;
        text-align: center;
        margin-left: -11vw;
        display: block;
        margin-bottom: 5px;
    }

        header .headerMenu .menuSub .contact img {
            filter: brightness(0.5);
            vertical-align: middle;
            margin-left: 5px;
            width: 9%;
        }

            header .headerMenu .menuSub .contact img:hover {
                filter: invert(1);
            }

    header .headerMenu .menuSub .knkMenu {
        margin: 0;
        padding: 0;
        margin-right: -7vw;
        border-top: 1px solid #9f9e9e;
        display: block;
    }

        header .headerMenu .menuSub .knkMenu div {
            font-size: 14px;
        }

        header .headerMenu .menuSub .knkMenu .knk a {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
        }

        header .headerMenu .menuSub .knkMenu .knk img {
            width: 55px;
            vertical-align: middle;
        }

    header .menu .menuSub .knkMenu .knk div {
        color: #000000b5;
        vertical-align: middle;
        font-size: 13px;
        text-align: center;
    }

    header .headerMenu .menuSub .menuIn {
        margin: 0;
    }

    header .sliders .itemSkin2 .title a {
        padding: 10px 35px;
        font-size: 20px;
        max-height: 3.7em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .support, .whatsApp {
        padding: 8px;
        width: 40px;
        height: 40px;
    }

    .support {
        bottom: 10vh;
    }

        .support img, .whatsApp img {
            margin-top: 5px;
        }

        .support:hover img, .whatsApp:hover img {
            margin-top: 0;
        }

    .activity .CategoryItems .categorySkin2 {
        width: 100%;
        margin: auto;
    }

    .about {
        margin: 8vh 0;
    }

        .about img {
            width: 100%;
        }

        .about .content {
            width: 100%;
            padding-top: 15px;
            padding-right: 0;
        }

            .about .content b::before {
                top: -10px;
                bottom: -3px;
                left: 19px;
                right: 5px;
            }

            .about .content .title {
                font-size: 20px;
            }

            .about .content .more {
                margin-top: 6vh;
            }

                .about .content .more a::after {
                    right: -6%;
                }

    .customer {
        background-repeat: repeat-y;
    }

        .customer > div {
            padding: 2vh 23px;
        }

        .customer .youtube {
            margin: 4vh auto;
        }

        .customer .ContentsItems {
            display: block;
        }

            .customer .ContentsItems .itemSkin1 {
                width: 42%;
            }

                .customer .ContentsItems .itemSkin1 img {
                    width: 100%;
                }

                .customer .ContentsItems .itemSkin1:nth-child(even) {
                    border: 1px solid #6d6c70;
                    border-left: none;
                }

                .customer .ContentsItems .itemSkin1:nth-child(odd) {
                    border: 1px solid #6d6c70;
                    border-right: none;
                }

                .customer .ContentsItems .itemSkin1:first-child, .customer .ContentsItems .itemSkin1:nth-child(2) {
                    border-top: none;
                }

                .customer .ContentsItems .itemSkin1:nth-child(9), .customer .ContentsItems .itemSkin1:nth-child(10), .customer .ContentsItems .itemSkin1:nth-child(17), .customer .ContentsItems .itemSkin1:nth-child(18) {
                    border-bottom: none;
                }

    .product, .latestNews, .brands {
        margin: 10vh 0;
    }

        .product .more img {
            width: 11%;
        }

        .product .ContentsItems {
            display: block;
        }

            .product .ContentsItems .itemSkin5 {
                width: 100%;
            }

        .latestNews .ContentsItems .itemSkin4 {
            width: 100%;
        }

            .latestNews .ContentsItems .itemSkin4 .image img {
                height: 195px;
            }

    .ContentsItems .itemSkin4 .abstract {
        line-height: 1em;
        height: 5.2em;
    }

    @keyframes mymove {
        0%, 20% {
            transform: translateX(-100%);
        }

        20%, 40% {
            transform: translateX(4%);
        }

        40%, 60% {
            transform: translateX(106%);
        }

        60%, 80% {
            transform: translateX(219%);
        }

        80%, 100% {
            transform: translateX(320%);
        }
    }

    .brands .ContentsItems .itemSkin1 {
        width: 83%;
    }

        .brands .ContentsItems .itemSkin1 a img {
            height: 200px;
        }

    .comments {
        margin-top: -4vh;
    }

        .comments b {
            padding-bottom: 0;
        }

        .comments .SendMessageForm h3 {
            margin: 0;
        }

    footer {
        padding: 38px 0 0;
    }

        footer .footerAbout, footer .contactUs {
            width: 100%;
        }

        footer .footerAbout {
            margin-left: 0;
        }

        footer .footerAbout, footer .ourLink, footer .services, footer .contactUs, footer .map {
            width: 100%;
        }

            footer .footerAbout .footerContact img {
                width: 25px;
                height: 25px;
                padding: 7px;
            }

        footer .ourLink, footer .services {
            width: 100%;
            margin-top: 3vh;
        }

            footer .ourLink a, footer .services a {
                margin-right: 20px;
                display: inline-block;
                width: 44%;
            }

                footer .ourLink a::before, footer .services a::before {
                    width: 10px;
                    right: -20px;
                }

        footer .contactUs {
            margin-top: 2vh;
        }

    .knkFooter {
        padding: 10px 57px;
    }

        .knkFooter .knk2 > div {
            text-align: center;
            width: 100%;
        }

        .knkFooter .knk a img {
            width: 13%
        }

    main .ContentsItems {
        display: block;
    }

        main .ContentsItems .itemSkin2, main .ContentsItems .itemSkin4, main .ContentsItems .itemSkin1 {
            width: 100%;
            margin: auto;
            margin: 10px auto;
        }

    main .ContentsTitle::after, main .DetailSkin1 .ContentTitle::after {
        top: 7vh;
    }

    main .DetailSkin1 .ContentAbstract {
        margin: 1vh 5vw;
    }

    .aboutManager .container .content {
        width: 100%;
    }

        .aboutManager .container .content b {
            font-size: 25px;
        }

        .aboutManager .container .content p {
            font-size: 15px;
        }

    .aboutManager .container .image {
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }

        .aboutManager .container .image .backgroundImage {
            display: none;
        }

        .aboutManager .container .image::after {
            display: none;
        }

    header .menu .menuSub .knkMenu .knk img {
        width: 55px;
    }

    header .menu .menuSub .knkMenu .knk div {
        text-align: center;
    }

    main .ContentsTitle, main .DetailSkin1 .ContentTitle {
        padding: 12px 0;
        font-size: 21px;
    }

    .latestNews .ContentsItems .itemSkin4 .abstract {
        height: 3.2em;
    }

    main .DetailSkin1 .ContentBody p img {
        height: unset;
    }

    main .CategoryItems .categorySkin2 {
        width: 90%;
        margin: 3px auto;
    }
    /**/
    .activity .specialCategory .CategoryItems > .categorySkin2 {
        background-repeat: no-repeat;
    }

        .activity .specialCategory .CategoryItems > .categorySkin2 > .child {
            width: 90%;
            border: 1px solid #eee;
            padding-left: 0;
        }

    .activity .specialCategory .CategoryItems .categorySkin2 .subcategories {
        width: 100%;
        /**/
        white-space: nowrap;
        overflow: hidden;
        /**/
    }

        .activity .specialCategory .CategoryItems .categorySkin2 .subcategories .categorySkin2 {
            width: 46%;
            /**/
            transition: transform 1s;
            position: relative;
            overflow: hidden;
            animation: mymove 40s cubic-bezier(0, 0, 0, 0.97) infinite;
            /**/
        }

    .activity .specialCategory .CategoryItems .subcategories .categorySkin2 .child .image {
        width: 100%;
        margin: 0;
        display: block;
    }

    .activity .specialCategory .CategoryItems .subcategories .categorySkin2 .child .title {
        width: 100%;
    }

        .activity .specialCategory .CategoryItems .subcategories .categorySkin2 .child .title a {
            text-align: center;
        }
}
/*scroll*/
::-webkit-scrollbar {
    width: 10px;
}

header .menu .menuSub::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #f42223;
}

::-webkit-scrollbar-track {
    background-color: #000;
}