@@include('./parts/header_script.html') 
@@include('./parts/header.html')  
<div id="section_about_us"> 
  <section class="aboutus-section-banner"  >
    <div class="container container-main" >
      <div class="row">
        <div class="col-lg-12 text-center zindex-1"> 
            <span class="topic_h1 text-white"  data-bind="text: $data['TOPIC']"></span>
            <span class="topic_h1 text-white" style="padding: 20px 0px 21px 25px;;background-image: url(images/assets/bg_text.png);background-position: left;background-repeat: no-repeat;background-size: cover;"  data-bind="text: $data['TOPIC1']"></span> 
             <div class="mt-3" data-bind="html: $data['NAME']"></div> 
        </div>
      </div>
    <div class="row "> 
        <div class="col-lg-12 text-center zindex-2  mb-lg-9 mt-lg-5 mt-sm-9 ">&nbsp;
        </div>
        <div class="col-lg-12 text-center zindex-2  mb-lg-9 d-sm-none">  
        </div>  
     </div> 
    </div>
  </section>
   
  <div class="container container-main" >
   <div class="row">
      <div class="col-lg-12 text-center zindex-2"> 
        <img data-bind="attr:{ src: $data.FILEURL}"  class="img_about_us"> 
      </div> 
    </div> 
  </div>
  <div class="row"> 
        <div class="container  d-sm-none">
            <div class="row justify-content-md-center"> 
            <div class="col-lg-7 col-md-7 col-sm-8 aboutus-section-1-bg" > 
                <div class="aboutus-header mt-lg-6" data-bind="html: $data['HEADER_MAIN']"></div>
                <div class="aboutus-normal mt-3"  data-bind="html: $data['DETAIL_MAIN']"></div> 
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4   ">
                <img data-bind="attr:{ src: $data.FILEURL1}"  class="img_about_us_section"> 
            </div>
            </div>  
        </div>

         <div class="container container-no-padding d-lg-none d-md-none">
            <div class="row justify-content-md-center"> 
            
            <div class="col-lg-7 col-md-7 col-sm-8  text-right ">
                <img src="images/assets/about_us_icon.png" class="mt-lg-6 d-lg-none" style="width:30%;margin-right: 40px;"> 
                <div class="aboutus-header mt-lg-6" data-bind="html: $data['HEADER_MAIN']"></div> 
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4   ">
                <img data-bind="attr:{ src: $data.FILEURL1}"  class="img_about_us_section"> 
            </div>
            </div>  
            <div class="row justify-content-md-center"> 
                <div class="col-lg-1 col-md-1 col-sm-1 ">
            </div>
                <div class=" col-sm-11 "> 
                    <div class="aboutus-normal mt-3"  data-bind="html: $data['DETAIL_MAIN']"></div> 
                </div> 
            </div>  
        </div>
  </div> 
  <section class="aboutus-section product aboutus-section-bg" > 
      <div class="container container-no-padding">
        <div class="row justify-content-md-left  mt-8"> 
            <div class="col-lg-1 col-md-1 col-sm-1 ">
            </div>
            <div class="col-lg-6 col-md-7 col-sm-11 ">
               <div class="aboutus-header-2"  data-bind="html: $data['HEADER_MAIN1']"></div> 
                <div  class="aboutus-normal mt-3 mb-3"  data-bind="html: $data['DETAIL_MAIN1']"> 
                </div>
            </div>
            <div class="col-lg-5 col-md-5 d-sm-none"> 
            </div>
          </div>  
           <div class="row justify-content-md-right aboutus-section-bg-2"> 
           
            <div class="col-lg-6 col-md-6 col-sm-12 ">
                <img  data-bind="attr:{ src: $data.FILEURL2}" class="img_about_us2"> 
            </div>
          
            <div class="col-lg-6 col-md-6 col-sm-12">
                 <div class="aboutus-header-rtl mt-lg-4"    data-bind="html: $data['HEADER_MAIN2']"> 
                </div>
                <div  class="aboutus-normal-rtl mt-lg-3  "   data-bind="html: $data['DETAIL_MAIN2']"> 
                </div>
            </div>
          </div>  

          <div class="row justify-content-md-left  aboutus-section-bg-3"> 
            <div class="col-lg-1 col-md-1 col-sm-1">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 order-sm-2 order-lg-1 order-md-1 aboutus-section_part3" >
               <div class="aboutus-header-sub mt-lg-4" data-bind="html: $data['HEADER_MAIN3']"> 
                </div>
                <div  class="aboutus-normal-sub mt-lg-3"  data-bind="html: $data['DETAIL_MAIN3']"> 
                </div>
            </div>
           
            <div class="col-lg-5 col-md-5 col-sm-12 order-sm-1  order-lg-2 order-md-2">
                <img   data-bind="attr:{ src: $data.FILEURL3}"  class="img_about_us"> 
                
            </div>
          </div>  
      </div> 
   
  </section>
   
  <section class="aboutus-section_part2 product-aboutus" style=""> 
    <div class="container">
       <div class="row">
        <div class="col-lg-12 col-md-12 text-center zindex-2 my-xl-7">
         <span class="topic_main_about" data-bind="render: $data['HEADER_MAIN4']"> </span>
         <div  style="line-height:2.0;background-image: url(images/assets/vector_line.png);background-repeat: no-repeat;background-size: contain;background-position: center;">&nbsp;</div>
        </div>
        <div class="col-lg-12 col-md-12 text-center zindex-2  "> 
          <div class="col-lg-12 col-md-12 text-center"> 
            <p data-bind="html: $data['DETAIL_MAIN4']"> 
          </div>
        </div>  
     </div> 
    </div>
  </section>
  <section class="container aboutus-section2 product bg_aboutus_section2" > 
    <div class="container">
       <div class="row">
        <div class="col-lg-12 col-md-12 text-center zindex-2 my-xl-7 ">
         <span class="topic_main_about_2" data-bind="render: $data['HEADER_MAIN5']"></span> 
        </div>
        <div class="col-lg-12 col-md-12 text-center zindex-2  "> 
          <div class="col-lg-12 col-md-12 text-center aboutus_video" > 
            <span  data-bind="html: $data['DETAIL_MAIN5']"></span>
            <div class="embed-responsive embed-responsive-16by9">
                <span  data-bind="html: $data['DETAIL_MAIN6']"></span>
            </div>
          </div> 
          <div class="col-lg-12 col-md-12 text-center"> 
            <a class="btn-square btn-primary-square  btn-lg-footer" 
          data-bind="attr:{target: '_blank',href: $data.BUTTON_LINK},text: $data.BUTTON_TEXT"></a>
          </div>

        </div>  
     </div> 
    </div>
  </section>

</div> 

@@include('./parts/appoint.html') 
@@include('./parts/footer.html')  

<style>

@media (max-width: 1024px) { 
.mb-lg-9, .my-lg-9 {
        margin-bottom: 4.5rem !important;
    }
    .my-xl-7 {
        margin-top: 12rem !important;
    }
}
 @media (max-width: 540px) {
    .feature-appoint {
        background-image: none !important;
        background-size: contain;

    }  
    .my-xl-7 {
        margin-top: 0rem !important;
    }
}

</style>

<script type="text/javascript" src="https://mecenter.co.th/pagescript/aboutus.js?v=202410220080"></script> 
</body>
</html>