﻿        .rowx::after {
            content: "";
            clear: both;
            /*display: table;*/
        }

        .rowx {
            display: table-row;
        }


        [class*="col-"] {
            float: left;
            padding: 0px;
            display: table-cell;
            min-height:1px;
        }

        .tablex{
	        display: table;
            width:100%;
        }
        .divTableRow {
	        display: table-row;
        }
        .divTableCell {
	        display: table-cell;
        }

        @media only screen and (min-width: 1px)  and (max-width: 320px) {
            /* For desktop: 4 */
            .xtablex {
                width:100%;
            }
            .layoutfreeresponsive{
                display: table !important; 
                margin: 0 auto !important;
                float : none !important;
                left : auto !important;
                top : auto !important;
                position : static !important;
            }
            .resp-18-hide{
                visibility:hidden;
                display:none;
            }
            .resp-18-show{
                visibility:visible;
                display:block;
            }
            .col-1 {width: 25.00%;}
            .col-2 {width: 50.00%;}
            .col-3 {width: 75.00%;}
            .col-4 {width: 100.00%;}
            .col-5 {width: 100.00%;}
            .col-6 {width: 100.00%;}
            .col-7 {width: 100.00%;}
            .col-8 {width: 100.00%;}
            .col-9 {width: 100.00%;}
            .col-10 {width: 100.00%;}
            .col-11 {width: 100.00%;}
            .col-12 {width: 100.00%;}
            .col-13 {width: 100.00%;}
            .col-14 {width: 100.00%;}
            .col-15 {width: 100.00%;}
            .col-16 {width: 100.00%;}
            .col-17 {width: 100.00%;}
            .col-18 {width: 100.00%;}
            .col-19 {width: 100.00%;}
            .col-20 {width: 100.00%;}
            .col-21 {width: 100.00%;}
            .col-22 {width: 100.00%;}
            .col-23 {width: 100.00%;}
            .col-24 {width: 100.00%;}
            
            .col-c1 {width: 100.00%;}
            .col-c2 {width: 50.00%;}
            .col-c3 {width: 33.33%;}
            .col-c4 {width: 25.00%;}
            .col-c5 {width: 20.00%;}
        }

        @media only screen and (min-width: 321px)  and (max-width: 479px) {
            /* For desktop: 6 */
            .xtablex {
                width:100%;
            }
            .layoutfreeresponsive{
                display: table !important; 
                margin: 0 auto !important;
                float : none !important;
                left : auto !important;
                top : auto !important;
                position : static !important;
            }
            .resp-18-hide{
                visibility:hidden;
                display:none;
            }
            .resp-18-show{
                visibility:visible;
                display:block;
            }
            .col-1 {width: 16.67%;}
            .col-2 {width: 33.33%;}
            .col-3 {width: 50.00%;}
            .col-4 {width: 66.67%;}
            .col-5 {width: 83.33%;}
            .col-6 {width: 100.00%;}
            .col-7 {width: 100.00%;}
            .col-8 {width: 100.00%;}
            .col-9 {width: 100.00%;}
            .col-10 {width: 100.00%;}
            .col-11 {width: 100.00%;}
            .col-12 {width: 100.00%;}
            .col-13 {width: 100.00%;}
            .col-14 {width: 100.00%;}
            .col-15 {width: 100.00%;}
            .col-16 {width: 100.00%;}
            .col-17 {width: 100.00%;}
            .col-18 {width: 100.00%;}
            .col-19 {width: 100.00%;}
            .col-20 {width: 100.00%;}
            .col-21 {width: 100.00%;}
            .col-22 {width: 100.00%;}
            .col-23 {width: 100.00%;}
            .col-24 {width: 100.00%;}
            
            .col-c1 {width: 100.00%;}
            .col-c2 {width: 50.00%;}
            .col-c3 {width: 33.33%;}
            .col-c4 {width: 25.00%;}
            .col-c5 {width: 20.00%;}
        }
        
        @media only screen and (min-width: 480px) and (max-width: 767px) {
            /* For desktop: 12 */
            .xtablex {
                width:100%;
            }
            .layoutfreeresponsive{
                display: table !important; 
                margin: 0 auto !important;
                float : none !important;
                left : auto !important;
                top : auto !important;
                position : static !important;
            }
            .resp-18-hide{
                visibility:hidden;
                display:none;
            }
            .resp-18-show{
                visibility:visible;
                display:block;
            }
            .col-1 {width: 8.33%;}
            .col-2 {width: 16.67%;}
            .col-3 {width: 25.00%;}
            .col-4 {width: 33.33%;}
            .col-5 {width: 41.67%;}
            .col-6 {width: 50.00%;}
            .col-7 {width: 58.33%;}
            .col-8 {width: 66.67%;}
            .col-9 {width: 75.00%;}
            .col-10 {width: 83.33%;}
            .col-11 {width: 91.67%;}
            .col-12 {width: 100.00%;}
            .col-13 {width: 100.00%;}
            .col-14 {width: 100.00%;}
            .col-15 {width: 100.00%;}
            .col-16 {width: 100.00%;}
            .col-17 {width: 100.00%;}
            .col-18 {width: 100.00%;}
            .col-19 {width: 100.00%;}
            .col-20 {width: 100.00%;}
            .col-21 {width: 100.00%;}
            .col-22 {width: 100.00%;}
            .col-23 {width: 100.00%;}
            .col-24 {width: 100.00%;}
            
            .col-c1 {width: 100.00%;}
            .col-c2 {width: 50.00%;}
            .col-c3 {width: 33.33%;}
            .col-c4 {width: 25.00%;}
            .col-c5 {width: 20.00%;}
        }

        @media only screen and (min-width: 768px) and (max-width: 1023px){
            /* For desktop: 18 */
            .xtablex {
                width:100%;
            }
            .layoutfreeresponsive{
                display: table !important; 
                margin: 0 auto !important;
                float : none !important;
                left : auto !important;
                top : auto !important;
                position : static !important;
            }
            .resp-18-hide{
                visibility:hidden;
                display:none;
            }
            .resp-18-show{
                visibility:visible;
                display:block;
            }
            .col-1 {width: 5.56%;}
            .col-2 {width: 11.11%;}
            .col-3 {width: 16.67%;}
            .col-4 {width: 22.22%;}
            .col-5 {width: 27.78%;}
            .col-6 {width: 33.33%;}
            .col-7 {width: 38.89%;}
            .col-8 {width: 44.44%;}
            .col-9 {width: 50.00%;}
            .col-10 {width: 55.56%;}
            .col-11 {width: 61.11%;}
            .col-12 {width: 66.67%;}
            .col-13 {width: 72.22%;}
            .col-14 {width: 77.78%;}
            .col-15 {width: 83.33%;}
            .col-16 {width: 88.89%;}
            .col-17 {width: 94.44%;}
            .col-18 {width: 100.00%;}
            .col-19 {width: 100.00%;}
            .col-20 {width: 100.00%;}
            .col-21 {width: 100.00%;}
            .col-22 {width: 100.00%;}
            .col-23 {width: 100.00%;}
            .col-24 {width: 100.00%;}

            .col-c1 {width: 100.00%;}
            .col-c2 {width: 50.00%;}
            .col-c3 {width: 33.33%;}
            .col-c4 {width: 25.00%;}
            .col-c5 {width: 20.00%;}
        }

        @media only screen and (min-width: 1024px) {
            /* For desktop: 24 */
            .xtablex {
                width:1000px;
            }
            .layoutfreeresponsive{
                display: inline; 
                margin: 0;
                float : none;
                left : auto;
                top : auto;
                position : static;
            }
            .resp-18-hide{
                visibility:visible;
                display:inline;
            }
            .resp-18-show{
                visibility:hidden;
                display:none !important;
            }
            .col-1 {width: 4.17%;}
            .col-2 {width: 8.33%;}
            .col-3 {width: 12.50%;}
            .col-4 {width: 16.66%;}
            .col-5 {width: 20.83%;}
            .col-6 {width: 25.00%;}
            .col-7 {width: 29.16%;}
            .col-8 {width: 33.33%;}
            .col-9 {width: 37.49%;}
            .col-10 {width: 41.66%;}
            .col-11 {width: 45.83%;}
            .col-12 {width: 50.00%;}
            .col-13 {width: 54.17%;}
            .col-14 {width: 58.33%;}
            .col-15 {width: 62.50%;}
            .col-16 {width: 66.66%;}
            .col-17 {width: 70.83%;}
            .col-18 {width: 75.00%;}
            .col-19 {width: 79.16%;}
            .col-20 {width: 83.33%;}
            .col-21 {width: 87.49%;}
            .col-22 {width: 91.66%;}
            .col-23 {width: 95.83%;}
            .col-24 {width: 100.00%;}

            .col-c1 {width: 100.00%;}
            .col-c2 {width: 50.00%;}
            .col-c3 {width: 33.33%;}
            .col-c4 {width: 25.00%;}
            .col-c5 {width: 20.00%;}
        }


        @media only screen and (min-width: 1px) and (max-width: 1023px) {
            .resp-24-backgroundimage{
                background-position: center;
                background-size: cover;
            }

            .resp-24-mobile-hidden{
                visibility:hidden;
                display:none;
            }
            
        }
        @media only screen and (min-width: 1024px) {
            .resp-24-backgroundimage{
                background-position: unset;
                background-size: unset;
            }

            .resp-24-mobile-hidden{
                visibility:visible;
                display:table;
            }
        }

        /*เมนู 100007*/
        .sidenav {
    /*height: 100%;*/
    width: 0;
    position: absolute;/*fixed*/
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align:left;
}

.sidenav a {
    padding: 5px 5px 5px 5px;
    text-decoration: none;
    font-size: 18px;
    color: #818181;
    display: block;
    transition: 0.3s;
    white-space:nowrap;
}

.sidenav ul {
    list-style-type: none;
    display:block !important;
    visibility:visible !important;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}