#service-a
{
    h2
    {
        text-align: center;
        position: relative;
        margin-bottom: 100px;
        &::after
        {
            content: ' ';
            width: 100%;
            height: 1px;
            top:50%;
            left: 0px;
            background: #ccc;
            position: absolute;
        }
        span
        {
            position: relative;
            z-index:1;
            background: #fff;
            display: inline-block;
            border:1px solid #ccc;
            padding:13px 30px;
            color:$main-color;

        }
    }
    ul
    {
        display: flex;
        flex-wrap:wrap;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;

        @media(min-width:980px)
        {
            width: 800px;
            li
            {
                margin:0 15px 30px 15px;
                width: calc(50% - 15px);

            }
        }
        @media(max-width: 979px)
        {
            padding:0px 10px;
            width: 100%;
            li
            {
                margin:0 10px 20px 10px;
                width: calc(50% - 10px);
            }
        }
        li
        {
            &:nth-child(2n)
            {
                margin-right: 0px;
            }
            &:nth-child(2n + 1)
            {
                margin-left: 0px;
            }
            a
            {
                display: block;
                position: relative;
                picture
                {
                    position: relative;
                    display: block;
                    padding-top:100%;
                    img
                    {
                        position: absolute;
                        top:0px;
                        left: 0px;
                        width: 100%;
                        transition-duration: 0.5s;
                        display: block;
                        filter: grayscale(100%);

                    }
                }
                &:hover
                {
                    picture
                    {
                        img
                        {
                            filter: grayscale(0%);
                        }
                    }
                }

                div
                {
                    position: absolute;
                    top:0px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content:center;
                    align-items:center;
                    span
                    {
                        text-align: center;
                        padding:13px 0;
                        width: 70%;
                        background: #fff;
                        border-radius: 50px;
                        color:#333;
                        letter-spacing: 2px;
                        font-size:18px;
                        transition-duration: 0.5s;
                        &:hover
                        {
                            background: $main-color;
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
}

#service-b
{
    article
    {
        padding: 100px 20px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        div
        {

            @media (min-width:610px)
            {
                width: 600px;
            }
            @media(max-width:609px)
            {
                width: 100%;
                padding-left: 10px;
                padding-right:10px;
            }
            margin-left:auto;
            margin-right:auto;
            h2
            {
                text-align: center;
                margin-bottom: 50px;
                a
                {
                    display: inline-block;
                    padding-bottom:20px;
                    font-size:1.8em;
                    color: #000;
                    line-height: 150%;
                    text-shadow: 0 0 1px #000;
                    border-bottom:2px solid $main-color;
                }
            }
            p
            {
                line-height: 150%;
                font-weight:300;
                padding: 5px 0;
                margin-bottom: 50px;
                letter-spacing: 2px;
            }
            .more
            {
                padding:13px 30px;
                border:1px solid #333;
                font-weight: 300;
                display: inline-block;
                color:#333;
                border-radius: 50px;
                transition-duration: 0.5s;
                &:hover
                {
                    background: $main-color;
                    color:#fff;
                    border-color:$main-color;
                }
            }
        }
    }
<?php foreach($service_b->lists as $key => $row):?>
    article
    {
        &:nth-child(<?=$key+1?>)
        {
            background-image:url('<?=userimg($row->bg->data,"1980x990")?>');
        }
    }
<?php endforeach;?>
}
#service-c
{
    padding-top: 100px;
    padding-bottom:100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image:url('<?=userimg($service_c->bg->data,"1980x990")?>');

    h2
    {
        text-align: center;
        margin-bottom: 50px;
        span
        {
            display: inline-block;
            padding-bottom:20px;
            font-size:1.8em;
            color: #000;
            line-height: 150%;
            text-shadow: 0 0 1px #000;
            border-bottom:2px solid $main-color;
        }
    }

    

    ul
    {
        display: flex;
        flex-wrap: wrap;
        li
        {

            @media(min-width:980px)
            {
                width: calc((100% - 60px) / 4);
                margin:0 10px 20px 10px;
                &:nth-child(4n)
                {
                    margin-right: 0px;
                }
                &:nth-child(4n + 1)
                {
                    margin-left: 0px;
                }
            }
            @media(max-width: 979px)
            {
                width: calc(50% - 10px);
                margin:0 10px 20px 10px;
                &:nth-child(2n)
                {
                    margin-right: 0px;
                }
                &:nth-child(2n + 1)
                {
                    margin-left: 0px;
                }
            }
            picture
            {
                display: block;
                position: relative;
                padding-top:43.3%;
                overflow: hidden;
                width: 100%;
                img
                {
                    position: absolute;
                    top:0px;
                    left: 0px;
                    display: block;
                    width: 100%;
                }
            }
        }
    }
}