<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery.flipTimer.js"></script>
    <link href="css/flipTimer.css" rel="stylesheet">
</head>
<body style="margin: 0 ;background:#ccc">
<header style="background: white">
    <div id="header" style="width: 1200px;height: 100px;margin: 0 auto ;padding-top: 15px">
        <div id="header_right" style="width: 720px;height: 100px; float: right">
            <div id="header_right _top" style="width: 720px;height: 40px">
<span style="display: block;float: right">
    <img src="img/lock.png">

</span>
                <a class="yekan" style="float: right;margin-right: 10px">
                    Ԑ     
                </a>
                <img src="img/signup.png" style="float: right;margin-right:20px ">
                <a class="yekan" style="float: right;margin-right: 10px">
                      
                </a>
            </div>

            <div id="header_right buttom" style="width: 720px;height: 50px;">
                <div id="basket_top" style="width: 198px;height: 40px;float: right;float: right">
                    <div id="basket_top_right"
                         style="width: 54px;height:40px ;background: #38a844  url('img/basket.png')center no-repeat;float: right ">

                    </div>

                    <div id="basket_top_left"
                         style="width: 132px;height:40px ;background: #20ff32  ;float: right ;float: right">
                        <span>
                            <a class="yekan"
                               style="float: right;font-weight: bold ;padding: 10px;line-height: 15px;color: white">

     
</a>
                        </span>
                        <span style="width: 30px;height: 28px ;background:#eee;text-align: center;float: right;display: inline-block;line-height: 27px ;border-radius: 50% ;margin-top: 5px">
0
                        </span>

                    </div>
                </div>
                <div id="search_top" style="width: 470px;height: 40px;float: right">
                    <input style="width: 480px;height: 35px;float: right;border: 1px solid #000;position: relative "
                           placeholder="        ">
                    <span style="width: 38px;height:38px ;display: block;position: absolute ;right: 711px ;background: url('img/search4.jpg')center no-repeat;top: 56px">

                    </span>
                </div>
            </div>
        </div>
        <div id="header_left" style="float: left ; width: 200px ">
            <img src="img/logo.png">
        </div>
    </div>
</header>
<style>
    @font-face {
        font-family: 'yekan';
        src: url("fonts/yekan.ttf") format("truetype"), url("fonts/yekan.eot") format("embedded-opentype");
    }

    div, span, p, a, li, ul {
        text-align: right;
        direction: rtl
    }

    a {
        text-decoration: snow
    }

    .yekan {
        font-family: yekan;
        font-size: 9.5pt;
        font-weight: bold
    }

    .fontsm {
        font-size: 11pt
    }

    .fontmd {
        font-sive: 13pt
    }

    .fontlg {
        font-size: 15pt
    }

    nav {
        box-shadow: 1px 1px 2px #000;
        webkit-box-shadow: 1px 1px 2px #000;
        moz-box-shadow: 1px 1px 2px #000;
    }
</style>
<style>
    li {
        list-style: none
    }

    #menu_top > ul > li {
        float: right;
        padding-right: 10px;
        height: 40px;
    }

    #menu_top > ul > li > a {
        padding: 0;
        height: 40px;
        display: block;
        line-height: 36px;;

    }

    .menu_down_icon {
        width: 9px;
        height: 7px;
        background: url('img/down-arrow2.png') no-repeat center;
        display: inline-block;
        margin-right: 3px;
    }

    #menu_top > ul > li > ul {
        position: absolute;
        right: 0;
        width: 1200px;
        padding: 0;
        background: white;
        box-shadow: 0 1px 3px #000;
        display: none;
    }

    #menu_top > ul > li > ul > li {
        float: right;
    }

    #menu_top > ul > li > ul > li a {
        padding: 5px 10px;
        display: block;
    }

    .top_menu3_col {
        width: 299px;
        height: 100%;
        float: right;
        border-left: 1px solid #eee;
    }

    .top_menu3_col_ul li {
        padding-right: 15px;
    }

    .top_menu3_col_ul li:first-child {
        padding-right: 2px;
        color: blue;
    }

    .top_menu3_col {;

    }

    .submenu3 {
        display: none
    }

    .active-menu {
        background: #fff;
        box-shadow: 0 2px 3px #eee;
    }

    .active-menu > a {
        color: blue;
    }

    #menu_top a {
        cursor: pointer;
    }
</style>
<nav style="border-top: 1px solid #000">

    <div id="menu_top" style="width: 1200px ;height: 40px ;margin: 0 auto ;background: #dae8e6 ;">
        <ul class="yekan" style="margin: 0 ;float: right ;position: relative ;width: 1200px ;padding: 0">
            <li data-timer="1">
                <a>

                     
                    <span class="menu_down_icon">

            </span>
                </a>
                <ul>
                    <li data-timer="3">
                        <a>
                            
                        </a>

                        <div class="submenu3"
                             style="width: 1200px;height: 300px;background: white;border-top: 1px solid #000 ;position: absolute">
                            <div class="top_menu3_col">
                                <ul class="top_menu3_col_ul" style="padding: 0">
                                    <li>
                                        <a>
                                             
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            apell
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            samsunggggggggggggggggggg
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <img src="img/mobile.png" width="379" height="335"
                                 style="position: absolute;left: 2px;bottom: 2px">
                        </div>

                    </li>
                    <li data-timer="4">
                        <a>
                              
                        </a>
                        <div class="submenu3"
                             style="width: 1200px;height: 300px;background: white;border-top: 1px solid #000 ;position: absolute;right: 0">
                            <div class="top_menu3_col">
                                <ul class="top_menu3_col_ul" style="padding: 0">
                                    <li>
                                        <a>
                                            
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            apell
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            samsunggggggggggggggggggg
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <img src="img/tablet-ebook-reader.png" width="379" height="335"
                                 style="position: absolute;left: 2px;bottom: 2px">
                        </div>
                    </li>
                    <li data-timer="5">
                        <a>
                               
                        </a>
                        <div class="submenu3"
                             style="width: 1200px;height: 300px;background: white;border-top: 1px solid #000 ;position: absolute;">
                            <div class="top_menu3_col">
                                <ul class="top_menu3_col_ul" style="padding: 0">
                                    <li>
                                        <a>
                                             
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            apell
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            samsunggggggggggggggggggg
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <img src="img/mobile.png" width="379" height="335"
                                 style="position: absolute;left: 2px;bottom: 2px">
                        </div>
                    </li>
                </ul>
            </li>
            <li data-timer="2">
                <a>

                     
                    <span class="menu_down_icon">

            </span>
                </a>
                <ul>
                    <li data-timer="5">
                        <a>
                             1
                        </a>
                        <div class="submenu3"
                             style="width: 1200px;height: 300px;background: white;border-top: 1px solid #000 ;position: absolute">
                            <div class="top_menu3_col">
                                <ul class="top_menu3_col_ul" style="padding: 0">
                                    <li>
                                        <a>
                                              
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            apell
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            samsunggggggggggggggggggg
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <div class="top_menu3_col"></div>
                            <img src="img/video-audio-entertainment.png" width="379" height="335"
                                 style="position: absolute;left: 2px;bottom: 2px">
                        </div>
                    </li>
                    <li data-timer="6">
                        <a>
                            
                        </a>
                    </li>
                    <li>
                        <a>
                              
                        </a>
                    </li>
                </ul>
            </li>

            <li data-timer="3">
                <a>   
                    <span class="menu_down_icon">

            </span>
                </a>
            </li>
        </ul>
    </div>
</nav>

<style>
    #digikala_tv li a {
        display: block;
        position: relative
    }

    #digikala_tv li a::before {
        content: "";
        width: 100%;
        height: 160px;
        background: rgba(0, 0, 0, .3);
        display: block;
        position: absolute;
        border-radius: 4px;

    }

    .circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: block;
        background: rgba(255, 255, 255, .3);
        position: absolute;
        top: 48px;
        left: 0px;
        right: 0;
        margin: auto;
        text-align: center
    }

    #digikala_tv li .circle {
        transition: all 1s ease
    }

    #digikala_tv li:hover .circle {
        background: rgba(255, 255, 255, .5) !important;
    }

    #sidebar_right_ul {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        border-radius: 4px;
        overflow: hidden
    }

    #lastnews_sidebar {
        width: 290px;
        background: #fff;
        margin-top: 10px;
        border-radius: 3px;
        overflow: hidden
    }

</style>
<div id="main" style="width: 1200px;margin:8px auto">

    <div id="baner_top" style="width: 1200px;height: 138px">

        <img src="img/banner.jpg" style="box-shadow: 1px 2px 3px #eee;width: 100%">

    </div>
    <div id="sidebar_rihgt" style="width: 290px;float: right ;height:2200px ">
        <img src="img/Euro2016-290.52.jpg" style="margin: 6px 0;border-radius: 3px">

        <ul id="digikala_tv" style="padding: 0px;margin: 0">
            <li style="margin-bottom: 7px">
                <a>
                    <img style="width: 100%;height: 160px;border-radius: 4px" src="img/TV_100_Innovative_Products.jpg">
                    <span class="circle">
                        <img src="img/play.png" style="margin-top: 22px;margin-left: 5px">
                    </span>

                </a>
            </li>
            <li>
                <a>
                    <img style="width: 100%;height: 160px;border-radius: 4px"
                         src="img/Motorola_Moto_360_1_Min_Intro.jpg">
                    <span class="circle">
                        <img src="img/play.png" style="margin-top: 22px;margin-left: 5px">
                    </span>

                </a>
            </li>
        </ul>

        <ul id="sidebar_right_ul" style="padding: 0px;margin: 0">
            <li style="margin-bottom: 7px">
                <a>
                    <img style="width: 100%;height: 160px;border-radius: 4px" src="img/li1.jpg">

                </a>
            </li>
            <li>
                <a>
                    <img style="width: 100%;height: 160px;border-radius: 4px" src="img/li2.jpg">

                </a>
            </li>
            <li>
                <a>
                    <img style="width: 100%;height: 160px;border-radius: 4px ; margin-top: 5px " src="img/li3.jpg">

                </a>
            </li>
        </ul>

        <div id="lastnews_sidebar">
            <h3 class="yekan"
                style="margin: 0;height: 40px ;line-height: 35px;color: blue;padding-right: 5px;border-radius: 3px">
                    </h3>
            <ul style="padding: 0;margin: 0">
                <li>
                    <a style="padding: 8px;display: block;float: right">
                        <div id="col_right" style="float: right">
                            <img src="img/SanDisk_Headquarters_Milpitas-60x60.jpg "
                                 style="width: 70px;height: 70px;border-radius: 50%">
                        </div>
                        <div id="col_left" style="float: right;width: 190px">
                            <p class="yekan" style="padding-right: 5px;margin: 0">
                                               
                            </p>
                            <p class="yekan" style="margin: 0 ;padding: 5px">
                                5 
                            </p>
                        </div>
                    </a>
                </li>
                <li>
                    <a style="padding: 8px;display: block">
                        <div id="col_right" style="float: right">
                            <img src="img/iPhone7-headphone-3-60x60.jpg "
                                 style="width: 70px;height: 70px;border-radius: 50%">
                        </div>
                        <div id="col_left" style="float: right;width: 190px">
                            <p class="yekan" style="padding-right: 5px;margin: 0">
                                     
                            </p>
                            <p class="yekan" style="margin: 0 ;padding: 5px">
                                5 
                            </p>
                        </div>
                    </a>

                </li>
                <li>
                    <a>

                    </a>
                </li>
            </ul>
        </div>

        <style>


            #brand_sidebar a {
                display: block;
                width: 140px;
                height: 95px;
                background: white;
                float: right;
                margin-left: 5px;
                margin-top: 8px;
                border-radius: 4px;
                overflow: hidden;
                box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
                vertical-align: middle;
                line-height: 110px
            }

            #brand_sidebar a img {
                width: 100%;
            }

            #brand_sidebar a:nth-child(even) {
                margin-left: 0;
                float: left
            }


        </style>


        <div id="brand_sidebar" style="margin-top: 10px ;">
            <a>
                <img src="img/x.vision.png">

            </a>
            <a>
                <img src="img/lenovo.png">
            </a>
            <a>
                <img src="img/nivea.png">
            </a>
            <a>
                <img src="img/adata.png">
            </a>
            <a>
                <img src="img/d-link.png">
            </a>
            <a>
                <img src="img/oral-b.png">
            </a>
            <a>
                <img src="img/panasonic.png">
            </a>
            <a>
                <img src="img/asus.png">
            </a>
        </div>


    </div>

    <style>

        #slider {
            height: 310px;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            background: white
        }

        #slider_img {
            height: 260px
        }

        #slider_navigator {
            height: 50px;
            background: rgba(0, 0, 0, .3);
        }

        #slider_img img {
            height: 260px;
            width: 100%;
        }

        #slider_img a {
            display: none
        }

        #slider #pre {
            width: 19px;
            height: 33px;
            display: block;
            position: absolute;
            top: 130px;
            right: 15px;
            background: url('img/arrow_slider.png') no-repeat;
            cursor: pointer;
            z-index: 2;
        }

        #slider #next {
            width: 19px;
            height: 33px;
            display: block;
            position: absolute;
            top: 130px;
            left: 15px;
            background: url('img/arrow_slider.png') no-repeat;
            background-position: 0 -33px;
            cursor: pointer;
            z-index: 2;

        }

        #slider #slider_navigator ul {
            padding: 0px;
            height: 100%;
            margin: 0;

        }

        #slider #slider_navigator ul li {
            width: 178px;
            height: 100%;
            float: right;

        }

        #slider #slider_navigator ul li a {
            width: 178px;
            height: 100%;
            display: block;
            text-align: center;
            line-height: 45px;
            color: white;
            cursor: pointer;
            background: blue;

        }

        #slider #slider_navigator .active > a {
            color: black;
            background: white;
            position: relative;

        }

        #slider #slider_navigator .active > a::after {
            content: "";
            position: absolute;
            top: -12px;
            right: 0;
            left: 0;
            margin: auto;

            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 12.5px 12px 12.5px;
            border-color: transparent transparent #fff transparent;

        }


    </style>

    <div id="content" style="width: 890px;float: left;margin-top: 10px">

        <div id="slider" style="position: relative">
            <span id="pre"></span>
            <span id="next"></span>
            <div id="slider_img">
                <a class="item">
                    <img src="img/slider1.jpg">
                </a>
                <a class="item">
                    <img src="img/slider2.jpg">
                </a>

                <a class="item">
                    <img src="img/slider3.jpg">
                </a>
                <a class="item">
                    <img src="img/slider4.jpg">
                </a>
                <a class="item">
                    <img src="img/slider5.jpg">
                </a>
            </div>

            <div id="slider_navigator">
                <ul class="yekan">
                    <li>
                        <a>
                              
                        </a>
                    </li>
                    <li>
                        <a>
                              
                        </a>
                    </li>
                    <li>
                        <a>
                              viao
                        </a>
                    </li>
                    <li>
                        <a>
                             
                        </a>
                    </li>
                    <li>
                        <a>
                             
                        </a>
                    </li>
                </ul>

            </div>

        </div>

        <style>
            #services-feaucher {
                width: 890px;
                background: white;
                height: 76px;
                box-shadow: 0 4px 2px rgba(0, 0, 0, .4);
                border-radius: 4px;
            }

            #services-feaucher ul {
                margin: 0;
                margin-top: 10px;
                padding: 0;
                height: 100%;

            }

            #services-feaucher ul li {
                width: 178px;
                height: 100%;
                float: right;

                line-height: 65px;

            }

            #services-feaucher ul li a {
                display: block;
                height: 100%;
                text-align: center;
                padding: 0 10px;

            }

            #services-feaucher ul li a i {
                width: 24px;
                height: 24px;
                display: inline-block;
                background: url("img/slices.png") no-repeat;
                margin-top: 20px;
                float: right;

            }
        </style>

        <div id="services-feaucher">
            <ul>
                <li>
                    <a class="yekan">
                        <i style="background-position: -210px -473px">

                        </i>

                        7   Ґ
                    </a>
                </li>
                <li>
                    <a class="yekan">
                        <i style="background-position: -264px -473px">

                        </i>
                          
                    </a>
                </li>
                <li>
                    <a class="yekan">
                        <i style="background-position: -157px -473px">

                        </i>
                           
                    </a>
                </li>
                <li>
                    <a class="yekan">
                        <i style="background-position: -320px -473px ;width: 30px">

                        </i>
                         ǘӁ
                    </a>
                </li>
                <li>
                    <a class="yekan">
                        <i style="background-position: -103px -473px">

                        </i>
                          
                    </a>
                </li>
            </ul>

        </div>
        <style>
            #slider2 {
                width: 890px;
                height: 304px;
                background: white;
                border-radius: 4px;
                overflow: hidden;
                margin-top: 8px;
                box-shadow: 0 4px 2px rgba(0, 0, 0, .4);
                position: relative;
            }

            #slider2_content {
                width: 705px;
                float: right;
                height: 100%;
                background: url("img/slider2_bg.jpg") no-repeat;

            }

            #slider2_content a {
                display: block;
                height: 100%;

            }

            #slider2_content a #slider2_content_left img {
                width: 220px;
                margin-right: 40px;

            }

            #slider2_navigator {
                width: 184px;
                border-right: 1px solid #ccc;
                height: 100%;
                float: left;
                background: #eee
            }

            #slider2_navigator ul li {
                height: 38px;
            }

            #slider2_navigator ul li a {
                height: 38px;
                display: block;
                text-align: center;
                width: 100%;
                font-family: yekan;
                line-height: 35px;
                cursor: pointer;
            }

            #slider2_navigator ul {
                margin: 0;
                padding: 0;
            }

            .slider2_content_ritht {
                width: 400px;
                height: 100%;
                float: right;

            }

            .slider2_content_left {
                width: 305px;
                height: 100%;
                float: left;

            }

            .slider2_content_ritht .title {
                color: red;
                font-family: yekan;
                font-size: 20px;
                font-weight: bold;
                padding-right: 25px;
                padding-top: 30px;
                margin: 0;
            }

            .slider2_content_ritht .price_info {

                height: 35px;
                margin-right: 30px;
            }

            .price_info_old {
                width: 75px;
                height: 100%;
                background: #ccc;
                float: right;
                position: relative;
                text-align: center;
                font-family: yekan;
                color: white;
            }

            .price_info_new {
                width: 155px;
                height: 100%;
                background: red;
                float: right;
                margin-right: 2px;
                position: relative;
                color: white;
                text-align: center;
                font-family: yekan;

            }

            .price_info_old::after {
                content: "";
                position: absolute;
                left: -11px;
                top: 10px;

                width: 0;
                height: 0;
                border-style: solid;
                border-width: 7.5px 12px 7.5px 0;
                border-color: transparent #cccccc transparent transparent;
                z-index: 2;
            }

            .price_info_new::before {
                content: "";
                position: absolute;
                right: 0px;
                top: 10px;

                width: 0;
                height: 0;
                border-style: solid;
                border-width: 7.5px 12px 7.5px 0;
                border-color: transparent #ffffff transparent transparent;

            }

            .price_info_old::before {
                content: "";
                position: absolute;
                right: 15px;
                top: 14px;
                width: 58%;
                border-bottom: 1pt solid #000000;
                transform: rotate(-25deg);
            }

            .flipTimer, .flipTimer div {
                direction: ltr;
            !important;
            }

            .flipTimer {
                transform: scale(.35);
                position: absolute;
                top: 190px;
                right: -135px;
            }

            .slider2_finished {
                width: 705px;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                background: rgba(0, 0, 0, .01);
                font-family: yekan;
                color: red;
                font-size: 35pt;
                text-align: center;
                line-height: 280px;
                display: none;
                z-index: 2;

            }

            #slider2_navigator .active {
                background: #ff252e;
                color: white;
                position: relative;
            }

            #slider2_navigator .active::after {
                content: "";
                position: absolute;
                right: -17px;
                top: 0;

                width: 0;
                height: 0;
                border-style: solid;
                border-width: 19px 0 19px 17px;
                border-color: transparent transparent transparent #ff252c;
            }
        </style>
        <div id="slider2">
            <div class="flipTimer">
                <!-- <div class="days"></div>-->
                <div class="hours"></div>
                <div class="minutes"></div>
                <div class="seconds"></div>

            </div>
            <div class="slider2_finished">
                 
            </div>
            <div id="slider2_content">

                <a class="item">
                    <div class="slider2_content_ritht">
                        <p class="title">
                              

                        </p>
                        <div class="price_info">
                            <div class="price_info_old" style="font-size: 18pt;line-height: 30px ">
                                25
                            </div>
                            <div class="price_info_new">
                                18.5  
                            </div>
                            <p class="yekan" style="width: 100% ;float: right;margin: 2px">
                                 
                            </p>
                            <p class="yekan" style="width: 100% ;float: right ;margin: 2px">
                                  
                            </p>

                        </div>
                    </div>
                    <div class="slider2_content_left">

                        <p class="yekan" style="text-align: center">
                            с 
                        </p>
                        <img src="img/slider2_item1.jpg">
                    </div>
                </a>
                <a class="item">
                    <div class="slider2_content_ritht">
                        <p class="title">
                              

                        </p>
                        <div class="price_info">
                            <div class="price_info_old" style="font-size: 18pt;line-height: 30px">
                                10
                            </div>
                            <div class="price_info_new">
                                8.5  
                            </div>
                            <p class="yekan" style="width: 100% ;float: right;margin: 2px">
                                 
                            </p>
                            <p class="yekan" style="width: 100% ;float: right ;margin: 2px">
                                   
                            </p>

                        </div>
                    </div>
                    <div class="slider2_content_left">

                        <p class="yekan" style="text-align: center">
                            
                        </p>
                        <img src="img/slider2_2.jpg">
                    </div>
                </a>
            </div>
            <div id="slider2_navigator">
                <ul>
                    <li>
                        <a>
                              
                        </a>
                    </li>
                    <li>
                        <a>
                            ʐ 
                        </a>
                    </li>
                    <li>
                        <a>
                            ʐ 
                        </a>
                    </li>
                    <li>
                        <a>
                            ʐ 4
                        </a>
                    </li>
                    <li>
                        <a>
                            ʐ 5
                        </a>
                    </li>
                    <li>
                        <a>
                            ʐ 6
                        </a>
                    </li>
                    <li>
                        <a>
                            ʐ 7
                        </a>
                    </li>
                    <li>
                        <a>
                            ʐ 8
                        </a>
                    </li>
                </ul>

            </div>

            <style>

                .sliderscroll {
                    height: 310px;
                    width: 890px;
                    box-shadow: 0 4px 2px rgba(0, 0, 0, .4);
                    margin-top: 10px;
                    background: white;
                    border-radius: 4px;
                    overflow: hidden;
                }

                .sliderscroll h3 {
                    background: #f7f9fa;
                    height: 35px;
                    padding-right: 10px;
                    padding-top: 7px;
                    font-family: yekan;
                    font-size: 14pt;
                    margin: 0;
                    font-weight: normal;

                }

                .sliderscroll_content {
                    height: 268px;
                }

                .sliderscroll_prev {
                    width: 55px;
                    height: 100%;
                    float: right;
                    cursor: pointer;
                }

                .sliderscroll_main {
                    width: 780px;
                    height: 100%;
                    float: right;
                    overflow: hidden;


                }

                .sliderscroll_next {
                    width: 55px;
                    height: 100%;
                    float: right;
                    cursor: pointer;

                }

                .sliderscroll_prev .prev {
                    width: 15px;
                    height: 42px;
                    background: url("img/slices.png") no-repeat;
                    background-position: -852px -677px;
                    display: block;
                    position: relative;
                    top: 90px;
                    right: 15px;

                }

                .sliderscroll_next .next {
                    width: 15px;
                    height: 42px;
                    background: url("img/slices.png") no-repeat;
                    background-position: -812px -677px;
                    display: block;
                    position: relative;
                    top: 90px;
                    right: 15px;
                }

                .sliderscroll .sliderscroll_main ul {
                    padding: 0;
                    margin: 0;
                    height: 100%;
                    width: 975px;
                }

                .sliderscroll .sliderscroll_main ul li {
                    width: 195px;
                    padding: 0;
                    height: 100%;
                    float: right;

                }

                .sliderscroll .sliderscroll_main ul li a {

                    display: block;
                    height: 100%;
                    text-align: center;
                }

                .sliderscroll .price{
                    color: greenyellow;
                    font-size: 12pt;


                }
                .sliderscroll p {
                    text-align: center;
                    margin-top: 1px;
                    margin-bottom: 1px;
                }


            </style>

        </div>
        <div class="sliderscroll">

            <h3>
                   
            </h3>
            <div class="sliderscroll_content">
                <div class="sliderscroll_prev">

                    <span class="prev" onclick="sliderscroll('right',this);"></span>

                </div>
                <div class="sliderscroll_main">
                    <ul>

                        <li>
                            <a>
                                <img src="img/sliderscroll2_1.jpg">
                                <img src="img/exclusive-blue.png">
                                <p class="yekan">
                                     

                                </p>
                                <p class="yekan price">
                                    1200000

                                </p>
                            </a>
                        </li>

                        <li>
                            <a>
                                <img src="img/sliderscroll2_2.jpg">
                                <img src="img/exclusive-blue.png">
                                <p class="yekan">
                                     

                                </p>
                                <p class="yekan price">
                                    1200000

                                </p>
                            </a>
                        </li>

                        <li>
                            <a>
                                <img src="img/sliderscroll2_3.jpg">
                                <img src="img/exclusive-blue.png">
                                <p class="yekan">
                                     

                                </p>
                                <p class="yekan price">
                                    1200000

                                </p>
                            </a>
                        </li>

                        <li>
                            <a>
                                <img src="img/sliderscroll2_4.jpg">
                                <img src="img/exclusive-blue.png">
                                <p class="yekan">
                                     

                                </p>
                                <p class="yekan price">
                                    1200000

                                </p>
                            </a>
                        </li>


                        <li>
                            <a>
                                <img src="img/sliderscroll2_4.jpg">
                                <img src="img/exclusive-blue.png">
                                <p class="yekan">
                                     

                                </p>
                                <p class="yekan price">
                                    1200000

                                </p>
                            </a>
                        </li>


                    </ul>

                </div>
                <div class="sliderscroll_next">
                    <span class="next  " onclick="sliderscroll('left',this);" > </span>


                </div>

                <style>
                    .direct-access{
                        width: 290px;
                        height: 190px;
                        display: block;
                        float: right;
                        box-shadow: 0 4px 2px rgba(0, 0, 0, .4);
                        margin-top: 10px;
                        background: white;
                        border-radius: 4px;

                        margin-left: 10px;

                    }
                </style>


            </div>

        </div>
        <a class="direct-access">
            <img src="img/direct-access1.jpg">
        </a>
        <a class="direct-access" style="width: 590px;margin-left: 0">
            <img src="img/direct-access2.jpg"  >
        </a>
        <a class="direct-access" >
            <img src="img/direct-access3.jpg" >
        </a>
        <a class="direct-access" >
            <img src="img/direct-access4.jpg" >
        </a>
        <a class="direct-access" style="margin-left: 0">
            <img src="img/direct-access5.jpg" >
        </a>
        <a class="direct-access" style="width: 590px;">
            <img src="img/direct-access6.jpg" >
        </a>
        <a class="direct-access" style="margin-left: 0">
            <img src="img/direct-access7.jpg" >

        </a>

    </div>
    <div class="sliderscroll" style="float: left">

        <h3>
              
        </h3>
        <div class="sliderscroll_content">
            <div class="sliderscroll_prev">

                <span class="prev" onclick="sliderscroll('right',this);"></span>

            </div>
            <div class="sliderscroll_main">
                <ul>

                    <li>
                        <a>
                            <img src="img/sliderscroll2_1.jpg">
                            <img src="img/exclusive-blue.png">
                            <p class="yekan">
                                 

                            </p>
                            <p class="yekan price">
                                1200000

                            </p>
                        </a>
                    </li>

                    <li>
                        <a>
                            <img src="img/sliderscroll2_2.jpg">
                            <img src="img/exclusive-blue.png">
                            <p class="yekan">
                                 

                            </p>
                            <p class="yekan price">
                                1200000

                            </p>
                        </a>
                    </li>

                    <li>
                        <a>
                            <img src="img/sliderscroll2_3.jpg">
                            <img src="img/exclusive-blue.png">
                            <p class="yekan">
                                 

                            </p>
                            <p class="yekan price">
                                1200000

                            </p>
                        </a>
                    </li>

                    <li>
                        <a>
                            <img src="img/sliderscroll2_4.jpg">
                            <img src="img/exclusive-blue.png">
                            <p class="yekan">
                                 

                            </p>
                            <p class="yekan price">
                                1200000

                            </p>
                        </a>
                    </li>


                    <li>
                        <a>
                            <img src="img/sliderscroll2_4.jpg">
                            <img src="img/exclusive-blue.png">
                            <p class="yekan">
                                 

                            </p>
                            <p class="yekan price">
                                1200000

                            </p>
                        </a>
                    </li>


                </ul>

            </div>
            <div class="sliderscroll_next">
                <span class="next  " onclick="sliderscroll('left',this);" > </span>

            </div>


            <img src="img/banner.jpg" id="hhh" style="z-index: 2;display: block" width="1188" height="134">

        </div>






    </div>


        <script>







            function sliderscroll (direction,tag) {
                var span_tag=$(tag);
                var sliderscrolltag=span_tag.parents('.sliderscroll');
                var sliderscrollul=sliderscrolltag.find('.sliderscroll_main ul');
                var sliderscrollitems=sliderscrollul.find('li');
                var sliderscrollitemsnumbers=sliderscrollitems.length;
                var slidescrollnumber=Math.ceil(sliderscrollitemsnumbers/4);
                var maxnegativemargins=-(slidescrollnumber-1)*780;

                sliderscrollul.css('width',sliderscrollitemsnumbers*195);
                var marginrightnew;
                var marginrightold=sliderscrollul.css('margin-right');
                marginrightold=parseFloat(marginrightold)


                if (direction == 'left') {
                    var marginrightnew = marginrightold - 780;



                }
                if (direction=='right') {
                    var marginrightnew = marginrightold + 780;

                }
                if(marginrightnew<maxnegativemargins){
                    marginrightnew=0
                }
                if(marginrightnew>0){
                    marginrightnew=maxnegativemargins
                }

                sliderscrollul.animate({'marginRight': marginrightnew}, 2000);
            }

            $('.next').click(function () {
                sliderscroll('left');

            });
            $('.prev').click(function () {
                sliderscroll('right');

            });


            $('.flipTimer').flipTimer({
                direction: 'down',
                /* days:true,*/
                date: 'april 13 2020 2:1:00',
                callback: function () {
                    /* alert(end);*/
                    $('.slider2_content_ritht').css('opacity', .4);
                    $('.slider2_content_left').css('opacity', .4);
                    $('.slider2_finished').fadeIn(200)
                }


            });


            var slidertag = $('#slider');
            var nextslide = 1;
            var slideritems = slidertag.find('.item');
            var timeout = 3000;
            var numitems = slideritems.length
            var slidernavigator = slidertag.find("#slider_navigator ul li");


            function slider() {
                if (nextslide > numitems) {
                    nextslide = 1;
                }
                if (nextslide < 1) {
                    nextslide = numitems;
                }


                slideritems.hide()
                slideritems.eq(nextslide - 1).fadeIn(100);
                slidernavigator.removeClass('active')
                slidernavigator.eq(nextslide - 1).addClass('active')

                nextslide++;
            }

            slider()
            var sliderinterval = setInterval(slider, timeout);
            slidertag.mouseleave(function () {
                clearInterval(sliderinterval);
                sliderinterval = setInterval(slider, timeout);
            })

            function gotonext() {
                slider()
            }

            $('#slider #next').click(function () {
                clearInterval(sliderinterval);
                gotonext()

            })

            function gotopre() {
                nextslide = nextslide - 2;
                slider()

            }

            $('#slider #pre').click(function () {
                clearInterval(sliderinterval);
                gotopre()

            })

            function gotoslide(index) {
                nextslide = index
                slider()
            }

            $('#slider #slider_navigator ul li').hover(function () {
                    clearInterval(sliderinterval);
                    var index = $(this).index();
                    gotoslide(index + 1);

                },
                function () {

                });

            $('button').click(function () {
                slider();
            });

            /* main slider */


            var slidertag2 = $('#slider2');
            var nextslide2 = 1;
            var slideritems2 = slidertag2.find('.item');
            var timeout2 = 3000;
            var numitems2 = slideritems2.length
            var slidernavigator2 = slidertag2.find("#slider2_navigator ul li");


            function slider2() {
                if (nextslide2 > numitems2) {
                    nextslide2 = 1;
                }
                if (nextslide2 < 1) {
                    nextslide2 = numitems2;
                }


                slideritems2.hide()
                slideritems2.eq(nextslide2 - 1).fadeIn(100);
                slidernavigator2.removeClass('active')
                slidernavigator2.eq(nextslide2 - 1).addClass('active')

                nextslide2++;
            }

            slider2()
            var sliderinterval2 = setInterval(slider2, timeout2);
            slidertag2.mouseleave(function () {
                clearInterval(sliderinterval2);
                sliderinterval2 = setInterval(slider2, timeout2);
            })


            function gotoslide2(index) {
                nextslide2 = index
                slider2()
            }

            $('#slider2 #slider2_navigator ul li').click(function () {
                clearInterval(sliderinterval2);
                var index = $(this).index();
                gotoslide2(index + 1);


            });

            $('button').click(function () {
                slider2();
            });
            /* main slider */


            var timer = {};
            $('#menu_top li').hover(function () {

                var taq = $(this)
                var timerattr = taq.attr('data-timer');
                clearTimeout(timer[timerattr]);
                timer[timerattr] = setTimeout(function () {
                    taq.addClass('active-menu')
                    $('> ul', taq).fadeIn(0);
                    $('>.submenu3', taq).fadeIn(0);


                }, 500)


            }, function () {
                var taq = $(this)
                var timerattr = taq.attr('data-timer');
                clearTimeout(timer[timerattr]);
                timer[timerattr] = setTimeout(function () {
                    taq.removeClass('active-menu')
                    $('> ul', taq).fadeOut(0);
                    $('>.submenu3', taq).fadeOut(0);
                }, 500)
            })


        </script>

</body>
</html>