/* =========================================================
   MOBILE RESPONSIVE
   ใส่ต่อท้าย CSS เดิม
   ========================================================= */

@media screen and (max-width: 767px){

    /* -----------------------------
       GLOBAL
    ----------------------------- */

    html,
    body{
        width:100%;
        min-width:0 !important;
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        margin:0;
        padding:0;
    }

    *,
    *:before,
    *:after{
        box-sizing:border-box;
    }

    img{
        max-width:100%;
        height:auto;
    }

    .crsm_mainsite{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding-left:15px;
        padding-right:15px;
    }


    /* -----------------------------
       TOP BAR
    ----------------------------- */

    .crsm_top{
        width:100%;
        height:auto;
        padding:10px 0;
    }

    .crsm_telmail{
        width:100%;
        float:none;
        text-align:center;
    }

    .crsm_tel{
        float:none;
        display:inline-flex;
        align-items:center;
        margin:0 10px 5px 0;
    }

    .crsm_tel b{
        float:none;
    }

    .crsm_tel span{
        float:none;
        margin-left:6px;
        font-size:16px;
        line-height:22px;
    }

    .crsm_mail{
        float:none;
        display:inline-flex;
        align-items:center;
        margin:0;
    }

    .crsm_mail b{
        float:none;
        margin-top:0;
    }

    .crsm_mail span{
        float:none;
        margin-left:6px;
        font-size:16px;
        line-height:22px;
    }

    .crsm_social{
        float:none;
        width:100%;
        text-align:center;
        margin-top:8px;
    }

    .crsm_social img{
        margin:0 3px;
    }


    /* -----------------------------
       MENU
    ----------------------------- */

    .crsm_menu{
        width:100%;
        background:#363532;
    }

    .crsm_logo{
        float:none;
        width:100%;
        margin:0;
        padding:10px 0;
        text-align:center;
    }

    .crsm_logo img{
        max-width:190px;
        height:auto;
    }

    .crsm_menu1{
        width:100%;
        float:none;
    }

    .crsm_menu1 ul,
    .crsm_menu1 .nav-menu ul{
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
    }

    .crsm_menu1 ul li{
        width:100%;
        float:none;
        display:block;
    }

    .crsm_menu1 ul li a{
        width:100%;
        float:none;
        display:block;
        padding:10px 15px;
        text-align:center;
        font-size:18px;
        line-height:25px;
        border-top:1px solid rgba(255,255,255,0.08);
    }


    /* -----------------------------
       BANNER
    ----------------------------- */

    .crsm_bbner{
        width:100%;
        overflow:hidden;
    }

    .crsm_bbner img{
        width:100% !important;
        height:auto !important;
        display:block;
    }

    /* Jssor */
    #jssor_1{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
    }

    #jssor_1 [data-u="slides"]{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
    }

    #jssor_1 [data-u="slides"] > div{
        width:100% !important;
        height:auto !important;
    }

    #jssor_1 [data-u="slides"] img{
        width:100% !important;
        height:auto !important;
        display:block;
    }

    /* ซ่อนลูกศรบนจอเล็ก */
    #jssor_1 .jssora031{
        display:none !important;
    }


    /* -----------------------------
       ABOUT
    ----------------------------- */

    .crsm_about{
        width:100%;
        padding:30px 0 40px;
    }

    .crsm_about1{
        width:100%;
    }

    .crsm_about1 h1{
        font-size:30px;
        line-height:40px;
        margin:0 0 25px;
        text-align:center;
    }

    .crsm_about1 b{
        float:none;
        display:block;
        width:100%;
        margin:0 0 20px;
        text-align:center;
    }

    .crsm_about1 b img{
        display:block;
        width:100%;
        max-width:544px;
        height:auto;
        margin:0 auto;
    }

    .crsm_about1 span{
        display:block;
        font-size:17px;
        line-height:28px;
        text-align:left;
    }


    /* -----------------------------
       SERVICE
    ----------------------------- */

    .crsm_service{
        width:100%;
        padding:35px 0 40px;
    }

    .crsm_service1{
        width:100%;
    }

    .crsm_service1 > b{
        display:block;
        font-size:30px;
        line-height:40px;
        padding:0 0 12px;
        margin:0 0 25px;
        border-bottom:1px solid #363532;
    }

    .crsm_service1 ul{
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
    }

    .crsm_service1 ul li{
        width:100% !important;
        float:none !important;
        margin:0 0 30px !important;
        padding:0;
    }

    .crsm_service1 ul li.end{
        margin-right:0 !important;
    }

    .crsm_service1 ul li a.img,
    .crsm_service1 ul li span.img{
        display:block;
        width:100%;
        height:auto;
        padding:0;
        margin:0 0 10px;
        overflow:hidden;
    }

    .crsm_service1 ul li a.img img,
    .crsm_service1 ul li span.img img{
        display:block;
        width:100%;
        min-height:0;
        height:auto;
    }

    .crsm_service1 ul li a.link,
    .crsm_service1 ul li span.link{
        display:block;
        font-size:22px;
        line-height:30px;
        margin-bottom:5px;
    }

    .crsm_service1 ul li a.link1,
    .crsm_service1 ul li span.link1{
        display:block;
        font-size:17px;
        line-height:26px;
    }


    /* -----------------------------
       CUSTOMER
    ----------------------------- */

    .crsm_costomer{
        width:100%;
        padding:0 0 40px;
        background-size:cover;
        background-position:center;
    }

    .crsm_costomer1{
        width:100%;
    }

    .crsm_costomer1 b{
        font-size:28px;
        line-height:38px;
        padding:30px 0 25px;
    }

    .crsm_costomer1 span{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
    }

    .crsm_costomer1 span img{
        float:none;
        width:20%;
        max-width:80px;
        height:auto;
        margin:0;
        padding:5px;
    }


    /* -----------------------------
       ADDRESS / FOOTER
    ----------------------------- */

    .crsm_address{
        width:100%;
        padding:30px 0 25px;
    }

    .crsm_address1{
        width:100%;
        float:none;
        text-align:center;
    }

    .crsm_address1 h1{
        float:none;
        display:block;
        margin:0 0 15px;
    }

    .crsm_address1 h1 img{
        max-width:100%;
        height:auto;
    }

    .crsm_address1 b{
        font-size:21px;
        line-height:30px;
    }

    .crsm_address1 span{
        font-size:17px;
        line-height:27px;
        padding-bottom:10px;
    }

    .crsm_address1 p{
        margin:10px 0 0;
    }

    .crsm_menu2{
        width:100%;
        float:none;
        margin-top:25px;
    }

    .crsm_menu2 ul{
        width:100%;
    }

    .crsm_menu2 ul li{
        width:100%;
    }

    .crsm_menu2 ul li a{
        font-size:18px;
        line-height:25px;
        text-align:center;
        padding:9px 0;
    }


    /* -----------------------------
       COPYRIGHT
    ----------------------------- */

    .crsm_copy{
        width:100%;
    }

    .crsm_copy span{
        font-size:12px;
        line-height:20px;
        text-align:center;
        padding:12px 10px;
    }


    /* -----------------------------
       CLEAR
    ----------------------------- */

    .clear{
        height:0 !important;
        clear:both !important;
    }

}


/* =========================================================
   SMALL MOBILE
   480px ลงมา
   ========================================================= */

@media screen and (max-width:480px){

    .crsm_mainsite{
        padding-left:12px;
        padding-right:12px;
    }

    .crsm_tel,
    .crsm_mail{
        display:flex;
        justify-content:center;
        width:100%;
        margin:0 0 5px;
    }

    .crsm_tel span,
    .crsm_mail span{
        font-size:15px;
    }

    .crsm_logo img{
        max-width:170px;
    }

    .crsm_menu1 ul li a{
        font-size:17px;
        padding:9px 10px;
    }

    .crsm_about1 h1{
        font-size:26px;
        line-height:35px;
    }

    .crsm_about1 span{
        font-size:16px;
        line-height:26px;
    }

    .crsm_service1 > b{
        font-size:26px;
    }

    .crsm_service1 ul li a.link,
    .crsm_service1 ul li span.link{
        font-size:20px;
        line-height:28px;
    }

    .crsm_service1 ul li a.link1,
    .crsm_service1 ul li span.link1{
        font-size:16px;
        line-height:25px;
    }

    .crsm_costomer1 b{
        font-size:25px;
    }

    .crsm_costomer1 span img{
        width:25%;
    }

    .crsm_address1 b{
        font-size:19px;
    }

    .crsm_address1 span{
        font-size:16px;
        line-height:25px;
    }

    .crsm_copy span{
        font-size:10px;
    }

}