/**
        ## project name     : sincapp.net
        ## author           : doanerkan / www.doanerkan.com
        ## date             : 2022
**/
    @charset "utf-8";
    @import url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400;500;600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

    ul, li, div, a, img, table, tr, td, input, textarea, select { box-sizing: border-box; outline:none; }
    a, a:link, a:hover, a:focus   { cursor:pointer; outline:none; }
    * { outline:none; }

    body            { background:#fff; color:#333; font:300 13px/18px 'Montserrat', Arial, Helvetica, sans-serif; margin:0; overflow-x:hidden; }
    .transeffect    { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    .img-responsive { width:auto; }  .DNone { display:block; }
    .col-lg-1_5     { width:20%; padding:0 15px; }
    hr              { border:none; border-top:#eeeeee 2px solid; }
    a               { color:#666; cursor:pointer; display: inline-block; }
    a:hover         { color:#333; text-decoration:underline; cursor:pointer; } a:active { text-decoration:none; } a:before { cursor:pointer; }
    object{ pointer-events: none; }

    .va-top                 { vertical-align: top !important; }
    .va-middle              { vertical-align: middle !important; }
    .va-bottom              { vertical-align: bottom !important; }
    .ta-left                { text-align:left !important; }
    .ta-right               { text-align:right !important; }
    .ta-center              { text-align:center !important; }
    .ta-justify             { text-align:justify !important; }
    .paddingnone            { padding:0; }
    .dnone                  { display:none; }
    .container-fluid        { padding:0; }
    .container              { max-width:1000px !important; padding:50px 30px !important; }

    .logo   { width:100%; display:block; }
    .web-slogan     { width:100%; display:block; color:#333; font:600 24px/30px 'Roboto Slab', Arial, Helvetica, sans-serif; }

    .workDetail b   { color:#ea5b0c; font:600 16px 'Roboto Slab', Arial, Helvetica, sans-serif; }
    .workDetail span    { color:#666; font:300 14px 'Roboto Slab', Arial, Helvetica, sans-serif; }

    .web-slogan span     { width:100%; display:block; color:#333; font:300 18px/22px 'Roboto Slab', Arial, Helvetica, sans-serif; }

    .works          { width:100%; display:block; }
    .works ul, .works ul li { padding:0; margin:0; list-style-type:none; }
    .works ul li    { width:calc(100% / 3); padding:15px; float:left; }
    .works ul li a      { text-decoration:none; }
    .works ul li a:hover > b      { background:#000; }
    .works ul li b      { background:#ea5b0c; width:100%; height:60px; display:flex; align-items: center; justify-content: center; color:#fff; padding:15px; font:600 16px/22px 'Roboto Slab', sans-serif; box-sizing: border-box; }

    .workCategory       { width:auto; display:inline-block;  padding:15px; background:#ea5b0c; color:#fff; font:300 18px/22px 'Roboto Slab', Arial, Helvetica, sans-serif; }

    @media only screen and (min-width : 0px) and (max-width : 599px) {
        .works ul li    { width:calc(100% / 1); padding:15px; float:left; }
    }

    @media only screen and (min-width : 600px) and (max-width : 768px) {
        .works ul li    { width:calc(100% / 1); padding:15px; float:left; }
    }

    @media only screen and (min-width : 768px) and (max-width : 1023px) {
        .works ul li    { width:calc(100% / 2); padding:15px; float:left; }
    }
    @media only screen and (min-width : 1024px) and (max-width : 1360px) {
        .works ul li    { width:calc(100% / 3); padding:15px; float:left; }
    }